:root {
  --primary: #2563eb;
  --primary-dark: #1e40af;
  --accent: #fbbf24;
  --bg: #f5f8ff;
  --text: #22252b;
  --text-light: #6b7280;
  --font: 'Nunito', Arial;
  --radius: 14px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: var(--font), 'Segoe UI', sans-serif; color: var(--text); background: var(--bg); line-height:1.7; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
.container { max-width:1140px; margin:0 auto; padding:0 24px; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:13px 28px; border-radius:100px; font-weight:700; font-size:15px; border:none; cursor:pointer; transition:.2s; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-dark); transform:translateY(-2px); }
.btn-outline { background:transparent; color:var(--primary); border:2px solid var(--primary); }
.btn-outline:hover { background:var(--primary); color:#fff; }
.btn-accent { background:var(--accent); color:#1a1a1a; }
.btn-accent:hover { filter:brightness(0.94); transform:translateY(-2px); }

/* Demo banner */
.demo-banner { background:#111827; color:#fbbf24; text-align:center; padding:9px 16px; font-size:13px; font-weight:600; }
.demo-banner a { color:#fff; text-decoration:underline; }

/* Header */
header { background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.05); position:sticky; top:0; z-index:100; }
.nav-wrap { display:flex; align-items:center; justify-content:space-between; padding:18px 0; }
.logo { display:flex; align-items:center; gap:12px; font-weight:800; font-size:20px; color:var(--primary); }
.logo .ico { width:44px; height:44px; border-radius:10px; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; }
nav ul { list-style:none; display:flex; gap:32px; }
nav a { font-weight:600; font-size:15px; color:var(--text); }
nav a:hover, nav a.active { color:var(--primary); }
.nav-cta { display:flex; gap:12px; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; }
.hamburger span { width:26px; height:3px; background:var(--primary); border-radius:2px; }

@media (max-width: 860px) {
  nav { display:none; position:absolute; top:100%; left:0; right:0; background:#fff; box-shadow:0 8px 20px rgba(0,0,0,.08); }
  nav.open { display:block; }
  nav ul { flex-direction:column; padding:20px 24px; gap:18px; }
  .nav-cta { display:none; }
  .hamburger { display:flex; }
}

/* Hero */
.hero { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff; padding:90px 0; }
.hero-inner { text-align:center; max-width:720px; margin:0 auto; }
.hero .badge { display:inline-block; background:rgba(255,255,255,.15); padding:7px 18px; border-radius:100px; font-size:13px; font-weight:600; margin-bottom:20px; }
.hero h1 { font-size:44px; font-weight:800; line-height:1.25; margin-bottom:18px; }
.hero p { font-size:17px; opacity:.9; margin-bottom:32px; }
.hero-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.page-hero { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff; padding:70px 0; text-align:center; }
.page-hero h1 { font-size:34px; font-weight:800; margin-bottom:10px; }
.page-hero p { opacity:.9; font-size:16px; }
.breadcrumb { padding:16px 0; font-size:13px; color:var(--text-light); }
.breadcrumb a { color:var(--primary); }

/* Sections */
.section { padding:76px 0; }
.section-alt { background:#fff; }
.section-header { text-align:center; max-width:600px; margin:0 auto 48px; }
.section-label { display:inline-block; background:color-mix(in srgb, var(--primary) 12%, white); color:var(--primary); font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:6px 16px; border-radius:100px; margin-bottom:14px; }
.section-header h2 { font-size:32px; font-weight:800; margin-bottom:12px; }
.section-header p { color:var(--text-light); font-size:16px; }

.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:40px; align-items:center; }
@media (max-width:860px) { .grid-3 { grid-template-columns:1fr; } .grid-2 { grid-template-columns:1fr; } }

.card { background:#fff; border-radius:var(--radius); padding:34px 28px; box-shadow:0 4px 20px rgba(0,0,0,.05); transition:.2s; }
.card:hover { transform:translateY(-6px); box-shadow:0 12px 30px rgba(0,0,0,.08); }
.card .icon-box { width:58px; height:58px; border-radius:14px; background:color-mix(in srgb, var(--primary) 12%, white); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:26px; margin-bottom:20px; }
.card h3 { font-size:19px; font-weight:700; margin-bottom:10px; }
.card p { color:var(--text-light); font-size:14.5px; }

.img-placeholder { border-radius:var(--radius); background:linear-gradient(135deg, var(--primary), var(--accent)); min-height:320px; display:flex; align-items:center; justify-content:center; font-size:60px; color:rgba(255,255,255,.9); }

.stats { display:flex; justify-content:center; gap:60px; flex-wrap:wrap; text-align:center; }
.stats .num { font-size:36px; font-weight:800; color:var(--primary); }
.stats .label { font-size:14px; color:var(--text-light); margin-top:4px; }

.testimonial { background:#fff; border-radius:var(--radius); padding:28px; box-shadow:0 4px 16px rgba(0,0,0,.05); }
.testimonial .stars { color:var(--accent); font-size:16px; margin-bottom:12px; }
.testimonial .author { display:flex; align-items:center; gap:12px; margin-top:18px; }
.testimonial .avatar { width:42px; height:42px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }

.cta-band { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff; padding:60px 0; text-align:center; }
.cta-band h2 { font-size:28px; font-weight:800; margin-bottom:12px; }
.cta-band p { opacity:.9; margin-bottom:26px; }

.form-box { background:#fff; border-radius:var(--radius); padding:36px; box-shadow:0 4px 20px rgba(0,0,0,.06); }
.form-group { margin-bottom:18px; }
.form-group label { display:block; font-weight:600; font-size:14px; margin-bottom:7px; }
.form-group input, .form-group textarea { width:100%; padding:12px 16px; border:1.5px solid #e5e7eb; border-radius:10px; font-size:14.5px; font-family:inherit; }
.form-group input:focus, .form-group textarea:focus { outline:none; border-color:var(--primary); }
.form-group textarea { min-height:120px; }

.contact-item { display:flex; gap:16px; margin-bottom:24px; }
.contact-item .ico { width:48px; height:48px; border-radius:12px; background:color-mix(in srgb, var(--primary) 12%, white); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.contact-item .lbl { font-size:13px; color:var(--text-light); }
.contact-item .val { font-weight:700; font-size:15.5px; }

footer { background:#171a21; color:#c3c7d1; padding:56px 0 24px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.3fr; gap:36px; margin-bottom:40px; }
@media (max-width:860px) { .footer-grid { grid-template-columns:1fr 1fr; } }
footer h4 { color:#fff; font-size:15px; margin-bottom:16px; }
footer .flogo { display:flex; align-items:center; gap:10px; color:#fff; font-weight:800; font-size:18px; margin-bottom:14px; }
footer .flogo .ico { width:38px; height:38px; border-radius:8px; background:var(--primary); display:flex; align-items:center; justify-content:center; }
footer ul { list-style:none; }
footer li { margin-bottom:10px; font-size:14px; }
footer li a:hover { color:var(--accent); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding-top:22px; text-align:center; font-size:13px; color:#8b90a0; }

.text-center { text-align:center; }
.mt-32 { margin-top:32px; }