@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* 
   TOKENS
 */
:root {
    --indigo: #6366f1;
    --violet: #8b5cf6;
    --pink:   #ec4899;
    --green:  #4ade80;
    --teal:   #2dd4bf;
    --dark:   #0a0e1a;
    --muted:  rgba(255,255,255,.5);
    --line:   rgba(255,255,255,.08);
    --surface: rgba(255,255,255,.05);
    --surface2: rgba(255,255,255,.09);
    --radius-card: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    color: #fff;
    background: var(--dark);
    overflow-x: hidden;
}

/* BG */
.page-bg {
    position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.page-bg::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 90% 70% at 10%  5%,  rgba(99,102,241,.36) 0%, transparent 55%),
        radial-gradient(ellipse 70% 80% at 88% 90%,  rgba(139,92,246,.30) 0%, transparent 52%),
        radial-gradient(ellipse 55% 45% at 75% 12%,  rgba(236,72,153,.17) 0%, transparent 48%),
        radial-gradient(ellipse 50% 50% at  5% 85%,  rgba(45,212,191,.13) 0%, transparent 45%);
}
.page-bg-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
    background-size: 52px 52px;
}
.orb { position: absolute; border-radius: 50%; }
.orb-1 { width:480px; height:480px; background:radial-gradient(circle, rgba(99,102,241,.22), transparent 70%); top:-160px; left:-120px; animation:orbFloat 9s ease-in-out infinite; }
.orb-2 { width:380px; height:380px; background:radial-gradient(circle, rgba(139,92,246,.18), transparent 70%); bottom:10%; right:-80px; animation:orbFloat 13s ease-in-out infinite reverse; }
.orb-3 { width:260px; height:260px; background:radial-gradient(circle, rgba(236,72,153,.15), transparent 70%); top:40%; left:60%; animation:orbFloat 16s ease-in-out infinite 3s; }
.orb-4 { width:200px; height:200px; background:radial-gradient(circle, rgba(45,212,191,.13), transparent 70%); bottom:25%; left:8%; animation:orbFloat 19s ease-in-out infinite 6s reverse; }
@keyframes orbFloat {
    0%,100% { transform:translate(0,0) scale(1); }
    33%  { transform:translate(22px,-28px) scale(1.04); }
    66%  { transform:translate(-14px,18px) scale(0.96); }
}
body > *:not(.page-bg) { position: relative; z-index: 1; }

/* CONTAINER */
.container { width: min(1200px, 92%); margin: 0 auto; }

/* HEADER */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(10,14,26,.72);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.nav { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:15px 0; }
.brand-wrapper { display:flex; flex-direction:column; align-items:center; gap:4px; flex-shrink:0; }
.brand { display:inline-flex; align-items:center; gap:12px; color:#fff; text-decoration:none; flex-shrink:0; }
.brand-logo {
    width:42px; height:42px;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:20px;
}
.brand-slogan { color: rgba(255,255,255,.62); font-size: 11px; font-weight:500; }
.brand strong { display:block; font-size:15px; font-weight:700; }
.brand small  { display:block; font-size:11px; color:var(--muted); margin-top:1px; }
.nav-links { display:flex; align-items:center; gap:4px; }
.nav-links a { color:rgba(255,255,255,.62); text-decoration:none; font-size:14px; font-weight:500; padding:7px 13px; border-radius:8px; transition:color .15s,background .15s; }
.nav-links a:hover { color:#fff; background:rgba(255,255,255,.07); }
.nav-actions { display:flex; align-items:center; gap:10px; }

/* BUTTONS */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:11px 20px; border-radius:10px; border:none;
    background:linear-gradient(135deg,var(--indigo),var(--violet));
    color:#fff !important; text-decoration:none; font-weight:600; font-size:14px;
    font-family:inherit; cursor:pointer;
    box-shadow:0 4px 14px rgba(99,102,241,.38);
    transition:transform .15s,box-shadow .15s;
    letter-spacing:.01em; position:relative; overflow:hidden;
}
.btn::before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.12),transparent); }
.btn:hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(99,102,241,.5); }

/* MENU TOGGLE */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin: 0;
}
.menu-toggle span {
    width: 24px;
    height: 2px;
    background: rgba(255, 255, 255, .8);
    border-radius: 2px;
    transition: all .3s ease;
}
.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}
.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .menu-toggle {
        display: flex;
    }
    
    .nav {
        flex-wrap: wrap;
        gap: 0;
    }
    
    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        gap: 0;
        margin-top: 10px;
        order: 3;
    }
    
    .nav-links.active {
        display: flex;
    }
    
    .nav-links a {
        padding: 12px 13px;
        border-radius: 0;
    }
    
    .nav-actions {
        display: none;
        flex-direction: column;
        width: 100%;
        gap: 8px;
        margin-top: 10px;
        order: 4;
    }
    
    .nav-actions.active {
        display: flex;
    }
    
    .nav-actions a {
        flex: 1;
        justify-content: center;
    }
}
.btn-ghost {
    background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
    color:rgba(255,255,255,.88) !important; box-shadow:none;
}
.btn-ghost::before { display:none; }
.btn-ghost:hover { background:rgba(255,255,255,.12); transform:translateY(-1px); box-shadow:none; }

/* SECTIONS */
main { overflow:hidden; }
section { padding:88px 0; }

.eyebrow {
    display:inline-flex; align-items:center; gap:7px;
    padding:6px 14px; border-radius:999px;
    background:rgba(99,102,241,.14); border:1px solid rgba(99,102,241,.26);
    color:#a5b4fc; font-size:11px; font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; margin-bottom:18px;
}
.eyebrow-dot { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:pulse 2.2s infinite; }
@keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.5; transform:scale(1.4); } }

.grad-text {
    background:linear-gradient(135deg,#fff 20%,rgba(196,181,253,.85) 60%,rgba(167,139,250,.8));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* HERO */
.hero {
    padding-top: 80px;
    position: relative;
    isolation: isolate;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 8px 0 0 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 70% 55% at 10% 10%, rgba(255,255,255,.78) 0%, transparent 62%),
        radial-gradient(ellipse 55% 48% at 90% 28%, rgba(219,234,254,.72) 0%, transparent 60%),
        linear-gradient(145deg, rgba(255,255,255,.92) 0%, rgba(241,245,249,.86) 55%, rgba(224,231,255,.82) 100%);
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,.38);
    box-shadow: 0 18px 52px rgba(15,23,42,.22);
}

.hero.pricing-section::before {
    display: none;
}

.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; padding: 26px; border-radius: 30px; }
.hero-copy { color: #0f172a; }
.hero .eyebrow {
    background: rgba(99,102,241,.12);
    border-color: rgba(99,102,241,.25);
    color: #4f46e5;
}
.hero-copy h1 {
    font-size:clamp(34px,4.2vw,56px);
    line-height:1.06;
    margin:0 0 18px;
    letter-spacing:-.03em;
    font-weight:900;
    color: #0f172a;
}
.hero-copy p  { color:#334155; font-size:16.5px; line-height:1.75; margin:0 0 26px; }
.hero-points  { display:grid; gap:10px; margin-bottom:28px; }
.point        { display:flex; align-items:center; gap:12px; font-size:14.5px; color:#1e293b; }
.point-check  { width:26px; height:26px; border-radius:999px; flex-shrink:0; background:rgba(74,222,128,.16); border:1px solid rgba(22,163,74,.20); display:inline-flex; align-items:center; justify-content:center; color:#16a34a; font-size:13px; font-weight:800; }
.hero-cta     { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:36px; }
.hero .btn-ghost {
    background: rgba(15,23,42,.05);
    color: #0f172a !important;
    border: 1px solid rgba(15,23,42,.14);
}
.hero .btn-ghost:hover { background: rgba(15,23,42,.09); }
.hero-stats   { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.stat-card    { background:rgba(255,255,255,.62); border:1px solid rgba(148,163,184,.28); border-radius:16px; padding:18px; backdrop-filter:blur(10px); transition:background .2s,border-color .2s; }
.stat-card:hover { background:rgba(255,255,255,.78); border-color:rgba(99,102,241,.26); }
.stat-card strong { display:block; font-size:26px; font-weight:800; background:linear-gradient(135deg,#a5b4fc,#c4b5fd); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:4px; }
.stat-card span   { color:#475569; font-size:12.5px; }

/* MOCKUP */
.hero-visual { position:relative; }
.mockup-shell { background:rgba(255,255,255,.75); border:1px solid rgba(148,163,184,.28); border-radius:28px; box-shadow:0 26px 58px rgba(15,23,42,.22),0 0 0 1px rgba(255,255,255,.5); overflow:hidden; backdrop-filter:blur(12px); }
.mockup-topbar { display:flex; gap:8px; padding:14px 18px; border-bottom:1px solid rgba(15,23,42,.08); background:rgba(248,250,252,.9); }
.mockup-topbar span { width:10px; height:10px; border-radius:50%; background:rgba(15,23,42,.2); }
.mockup-topbar span:nth-child(1) { background:#ef4444; }
.mockup-topbar span:nth-child(2) { background:#f59e0b; }
.mockup-topbar span:nth-child(3) { background:#22c55e; }
.mockup-body { display:grid; grid-template-columns:178px 1fr; min-height:530px; }
.mockup-sidebar { padding:18px 14px; background:rgba(15,23,42,.92); border-right:1px solid rgba(255,255,255,.08); color:#fff; }
.mockup-brand { font-weight:700; font-size:14px; margin-bottom:18px; color:#c7d2fe; }
.mockup-menu-item { padding:9px 12px; border-radius:10px; margin-bottom:4px; font-size:12.5px; color:rgba(255,255,255,.62); }
.mockup-menu-item.active { background:linear-gradient(135deg,rgba(99,102,241,.34),rgba(139,92,246,.25)); color:#eef2ff; }
.mockup-content { padding:18px; background:#f8fafc; }
.mockup-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.mini-card { padding:14px; border-radius:14px; border:1px solid rgba(255,255,255,.07); color:#fff; }
.mini-card strong { display:block; font-size:22px; margin-bottom:3px; }
.mini-card span   { font-size:12px; opacity:.75; }
.accent-blue   { background:linear-gradient(135deg,rgba(99,102,241,.5),rgba(79,70,229,.45)); }
.accent-green  { background:linear-gradient(135deg,rgba(16,185,129,.5),rgba(5,150,105,.45)); }
.accent-purple { background:linear-gradient(135deg,rgba(139,92,246,.5),rgba(109,40,217,.45)); }
.mockup-panels { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.panel { background:#ffffff; border-radius:16px; padding:14px; border:1px solid #e2e8f0; }
.panel h4    { margin:0 0 12px; font-size:13px; color:#0f172a; }
.panel.tall  { grid-row:span 2; }
.pipeline-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #e2e8f0; font-size:12px; color:#475569; }
.pipeline-row b { color:#4f46e5; }
.message-pill { padding:8px 10px; border-radius:10px; background:#f8fafc; margin-bottom:7px; font-size:12px; color:#475569; border:1px solid #e2e8f0; }
.message-pill.success { background:rgba(74,222,128,.12); color:#047857; border-color:rgba(22,163,74,.22); }
.image-panel { min-height:188px; background:linear-gradient(140deg,rgba(99,102,241,.65),rgba(139,92,246,.6)); position:relative; overflow:hidden; }
.image-panel::before,.image-panel::after { content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.08); }
.image-panel::before { width:155px; height:155px; top:-38px; right:-18px; }
.image-panel::after  { width:105px; height:105px; bottom:-18px; left:-18px; }
.image-overlay { position:absolute; inset:auto 16px 16px; color:#fff; }
.image-overlay span   { font-size:11px; opacity:.7; display:block; margin-bottom:4px; }
.image-overlay strong { font-size:17px; line-height:1.25; }

/* LOGO STRIP */
.logo-strip { padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.logos { display:flex; flex-wrap:wrap; gap:32px; justify-content:center; color:rgba(255,255,255,.40); font-weight:800; letter-spacing:.12em; font-size:11.5px; }

/* SECTION HEAD */
.section-head { display:flex; justify-content:space-between; gap:24px; align-items:flex-end; margin-bottom:38px; }
h2 { font-size:clamp(28px,3.4vw,42px); line-height:1.1; margin:0; font-weight:800; letter-spacing:-.025em; }
.sub { color:var(--muted); max-width:480px; line-height:1.75; margin:0; font-size:15px; }

/* SERVICES */
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feature-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card); padding:26px; backdrop-filter:blur(12px); transition:background .2s,border-color .2s,transform .2s; }
.feature-card:hover { background:var(--surface2); border-color:rgba(255,255,255,.13); transform:translateY(-3px); }
.feature-card h3 { font-size:17px; margin:0 0 10px; color:#fff; }
.feature-card p  { color:var(--muted); line-height:1.7; margin:0; font-size:14px; }
.icon-wrap { width:52px; height:52px; border-radius:16px; display:inline-flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:18px; border:1px solid rgba(255,255,255,.08); }
.icon-wrap.blue   { background:rgba(99,102,241,.18); }
.icon-wrap.green  { background:rgba(74,222,128,.14); }
.icon-wrap.purple { background:rgba(139,92,246,.18); }
.icon-wrap.orange { background:rgba(249,115,22,.15); }
.icon-wrap.dark   { background:rgba(255,255,255,.07); }
.icon-wrap.sky    { background:rgba(14,165,233,.15); }

/* WHY US */
.soft-section { background:linear-gradient(180deg,rgba(99,102,241,.06) 0%,rgba(139,92,246,.04) 50%,transparent 100%); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.split-section { display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.check-list { display:grid; gap:12px; margin-top:22px; }
.check-list div { display:flex; gap:12px; align-items:flex-start; color:rgba(255,255,255,.72); font-size:14.5px; }
.check-list span { width:24px; height:24px; border-radius:999px; flex:0 0 auto; background:rgba(74,222,128,.12); border:1px solid rgba(74,222,128,.2); color:var(--green); display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; }
.benefit-stack { display:grid; gap:14px; }
.benefit-card { border-radius:var(--radius-card); padding:22px 24px; border:1px solid rgba(255,255,255,.08); transition:transform .2s; }
.benefit-card:hover { transform:translateX(5px); }
.benefit-card strong { display:block; font-size:16px; margin-bottom:6px; color:#fff; }
.benefit-card p { margin:0; font-size:14px; line-height:1.65; }
.gradient-1 { background:linear-gradient(135deg,rgba(99,102,241,.28),rgba(79,70,229,.2)); border-color:rgba(99,102,241,.22); }
.gradient-1 p { color:rgba(196,181,253,.75); }
.gradient-2 { background:linear-gradient(135deg,rgba(139,92,246,.28),rgba(109,40,217,.2)); border-color:rgba(139,92,246,.22); }
.gradient-2 p { color:rgba(216,180,254,.75); }
.gradient-3 { background:linear-gradient(135deg,rgba(16,185,129,.22),rgba(5,150,105,.18)); border-color:rgba(16,185,129,.18); }
.gradient-3 p { color:rgba(110,231,183,.75); }

/* ADVANTAGES */
.advantage-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.adv-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card); padding:24px; backdrop-filter:blur(10px); transition:background .2s,transform .2s; }
.adv-card:hover { background:var(--surface2); transform:translateY(-2px); }
.adv-card strong { display:block; font-size:16px; color:#fff; margin-bottom:10px; }
.adv-card p { color:var(--muted); line-height:1.7; margin:0; font-size:14px; }

/* PRICING */
.pricing-section { background:linear-gradient(180deg,rgba(139,92,246,.06) 0%,transparent 60%); border-top:1px solid var(--line); }
.pricing-toggle { display:flex; gap:8px; margin:16px 0 30px; flex-wrap:wrap; }
.chip { border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); color:rgba(255,255,255,.62); padding:9px 18px; border-radius:999px; cursor:pointer; font-weight:600; font-size:14px; font-family:inherit; transition:all .15s; }
.chip.active { background:linear-gradient(135deg,var(--indigo),var(--violet)); color:#fff; border-color:transparent; box-shadow:0 4px 14px rgba(99,102,241,.35); }
.plan-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.plan-card { background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:26px; position:relative; overflow:hidden; backdrop-filter:blur(12px); transition:background .2s,transform .2s; }
.plan-card:hover { background:var(--surface2); transform:translateY(-4px); }
.plan-card.featured { background:linear-gradient(145deg,rgba(99,102,241,.18),rgba(139,92,246,.14)); border-color:rgba(99,102,241,.35); box-shadow:0 0 0 1px rgba(99,102,241,.22),0 20px 50px rgba(99,102,241,.18); transform:translateY(-6px); }
.plan-card.featured:hover { transform:translateY(-10px); }
.plan-tag { display:inline-flex; padding:5px 12px; border-radius:999px; background:rgba(99,102,241,.18); border:1px solid rgba(99,102,241,.28); color:#a5b4fc; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; margin-bottom:14px; }
.plan-card h3 { font-size:20px; margin:0 0 8px; color:#fff; }
.plan-card > p { color:var(--muted); font-size:14px; margin:0 0 20px; line-height:1.6; }
.plan-price { font-size:36px; font-weight:900; margin-bottom:6px; color:#fff; letter-spacing:-.03em; }
.plan-price small { font-size:14px; color:var(--muted); font-weight:500; }
.plan-list { list-style:none; padding:0; margin:20px 0 24px; display:grid; gap:10px; }
.plan-list li { color:rgba(255,255,255,.72); font-size:13.5px; display:flex; align-items:center; gap:10px; }
.plan-list li::before { content:"✓"; width:20px; height:20px; border-radius:999px; background:rgba(74,222,128,.12); border:1px solid rgba(74,222,128,.18); color:var(--green); display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:11px; flex-shrink:0; }

/* REFERENCES */
.reference-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.reference-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card); overflow:hidden; backdrop-filter:blur(10px); transition:transform .2s,background .2s; }
.reference-card:hover { transform:translateY(-3px); background:var(--surface2); }
.ref-visual {
    height:210px;
    background-size:cover;
    background-position:center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.img-a {
    background:
        linear-gradient(rgba(17,24,39,.38), rgba(17,24,39,.38)),
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.08), transparent 38%),
        linear-gradient(145deg, #1f2937 0%, #111827 55%, #0b1220 100%);
}
.img-b {
    background:
        linear-gradient(rgba(15,23,42,.38), rgba(15,23,42,.38)),
        radial-gradient(circle at 75% 25%, rgba(255,255,255,.08), transparent 36%),
        linear-gradient(145deg, #1b2a3b 0%, #0f172a 60%, #0b1220 100%);
}
.img-c {
    background:
        linear-gradient(rgba(17,24,39,.38), rgba(17,24,39,.38)),
        radial-gradient(circle at 30% 75%, rgba(255,255,255,.08), transparent 40%),
        linear-gradient(145deg, #2b2235 0%, #1f2937 55%, #111827 100%);
}

.ref-logo-real {
    width: min(100%, 270px);
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: 0 14px 30px rgba(0,0,0,.28);
}

.ref-logo-real svg {
    width: 100%;
    height: auto;
    display: block;
}

.reference-card h3 { margin:20px 24px 8px; font-size:18px; color:#fff; }
.reference-card p  { margin:0 24px 24px; color:var(--muted); font-size:14px; line-height:1.65; }

/* FOOTER */
.site-footer { background:rgba(5,8,18,.96); border-top:1px solid var(--line); color:rgba(255,255,255,.5); padding:60px 0 24px; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px; }
.footer-brand { margin-bottom:14px; }
.site-footer h4 { color:#fff; margin:0 0 14px; font-size:14px; font-weight:700; }
.site-footer a { color:rgba(255,255,255,.45); text-decoration:none; display:block; margin:8px 0; font-size:14px; transition:color .15s; }
.site-footer a:hover { color:rgba(255,255,255,.9); }
.site-footer p { color:rgba(255,255,255,.38); line-height:1.8; font-size:14px; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:32px; padding-top:20px; border-top:1px solid var(--line); font-size:13px; }

/* FORM */
.form-field { width:100%; padding:14px 16px; border-radius:14px; border:2px solid rgba(99,102,241,.3); background:#ffffff; color:#1a1a2e; font:inherit; font-size:14px; font-weight:500; outline:none; transition:border-color .2s,box-shadow .2s,background .2s; box-shadow:0 2px 8px rgba(99,102,241,.08); }
.form-field::placeholder { color:#9ca3af; }
.form-field:focus { border-color:rgba(99,102,241,.8); box-shadow:0 0 0 4px rgba(99,102,241,.12), 0 4px 12px rgba(99,102,241,.15); background:#fafbff; }

/* RESPONSIVE */
@media (max-width: 1100px) {
    .hero-grid,.split-section { gap:28px; }
    .feature-grid,.advantage-grid,.plan-grid { grid-template-columns:repeat(2,1fr); }
    .footer-grid { grid-template-columns:1fr 1fr; }
    .section-head { display:grid; grid-template-columns:1fr; }
    .sub { max-width:100%; }
}
@media (max-width: 900px) {
    .nav-links { display:none; }
    .hero-grid,.split-section { grid-template-columns:1fr; }
    .hero-visual { display:none; }
    .reference-grid { grid-template-columns:1fr; }
}
@media (max-width: 680px) {
    section { padding:62px 0; }
    .feature-grid,.advantage-grid,.plan-grid { grid-template-columns:1fr; }
    .hero-stats,.mockup-kpis,.mockup-panels { grid-template-columns:1fr; }
    .nav { flex-wrap:wrap; }
    .nav-actions { width:100%; justify-content:flex-end; }
    .hero-copy h1 { font-size:34px; }
    .hero-cta { flex-direction:column; }
    .footer-grid { grid-template-columns:1fr; }
    .footer-bottom { flex-direction:column; align-items:flex-start; }
    .btn { width:100%; }
}