:root{
    --bg:#f9fbfd;
    --card:#ffffff;
    --text:#0f172a;
    --muted:#556071;
    --brand:#1da1f2;
    --brand-2:#7dd3fc;
    --line:rgba(15,23,42,.10);
    --shadow: 0 18px 50px rgba(2, 40, 80, .10);
    --shadow-soft: 0 10px 30px rgba(2, 40, 80, .08);
    --radius: 18px;
    --radius-sm: 14px;
    --container: 1120px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
    margin:0;
    font-family:"DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color:var(--text);
    background: #fff;
    line-height:1.55;
}

a{ color:inherit; }
.container{
    width:min(var(--container), 92vw);
    margin:0 auto;
}

.skip-link{
    position:absolute;
    left:-999px;
    top:10px;
    background:#fff;
    border:1px solid var(--line);
    padding:10px 12px;
    border-radius:12px;
    z-index:9999;
}
.skip-link:focus{ left:10px; }

/* NAV */
.nav-wrap{
    position:sticky;
    top:0;
    z-index:1000;
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(15,23,42,.06);
}
.nav{
    height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}
.brand{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
}
.brand-mark{
    width:14px;
    height:14px;
    border-radius:6px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow: 0 8px 18px rgba(29,161,242,.35);
}
.brand-text{ font-size:1.05rem; }
.brand-text strong{ font-weight:700; }

.nav-links{
    display:flex;
    align-items:center;
    gap:18px;
}
.nav-links a{
    text-decoration:none;
    color: rgba(15,23,42,.82);
    font-weight:500;
    padding:10px 10px;
    border-radius:12px;
}
.nav-links a:hover{
    background: rgba(29,161,242,.08);
    color: var(--text);
}
.nav-cta{
    background: rgba(29,161,242,.12);
    border: 1px solid rgba(29,161,242,.20);
}
.nav-cta:hover{
    background: rgba(29,161,242,.18);
}

.nav-toggle{
    display:none;
    background:transparent;
    border:0;
    padding:10px;
    border-radius:12px;
}
.nav-toggle:hover{ background: rgba(15,23,42,.06); }
.nav-toggle span{
    display:block;
    width:22px;
    height:2px;
    background: rgba(15,23,42,.80);
    margin:5px 0;
    border-radius:10px;
}

/* HERO */
.hero{
    background:
            radial-gradient(800px 500px at 15% 15%, rgba(125,211,252,.45), transparent 60%),
            radial-gradient(900px 520px at 85% 20%, rgba(29,161,242,.30), transparent 60%),
            linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
    padding: 76px 0 46px;
}
.hero-grid{
    display:grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 40px;
    align-items:center;
}
.pill{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    border-radius:999px;
    background: rgba(255,255,255,.75);
    border:1px solid rgba(15,23,42,.08);
    box-shadow: 0 10px 25px rgba(2,40,80,.06);
    color: rgba(15,23,42,.78);
    font-weight:500;
}
.dot{
    width:10px; height:10px;
    border-radius:99px;
    background: linear-gradient(135deg,var(--brand),var(--brand-2));
}
.hero-copy h1{
    margin:18px 0 10px;
    font-size: clamp(2.2rem, 4vw, 3.35rem);
    letter-spacing:-.02em;
    line-height:1.05;
}
.hero-copy .muted{ color: rgba(15,23,42,.55); font-weight:700; }
.lead{
    margin: 14px 0 22px;
    font-size: 1.08rem;
    color: rgba(15,23,42,.72);
    max-width: 52ch;
}
.hero-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top: 18px;
}
.hero-metrics{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-top: 26px;
}
.metric{
    display:flex;
    gap:10px;
    align-items:center;
    padding:12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,.75);
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 14px 30px rgba(2,40,80,.06);
}
.metric-num{
    width:36px; height:36px;
    display:grid;
    place-items:center;
    border-radius: 14px;
    background: rgba(29,161,242,.12);
}
.metric-text span{ color: rgba(15,23,42,.62); font-size:.92rem; }

/* Buttons */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding: 12px 16px;
    border-radius: 14px;
    border:1px solid transparent;
    text-decoration:none;
    font-weight:700;
    cursor:pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn.primary{
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color:#fff;
    box-shadow: 0 16px 30px rgba(29,161,242,.28);
}
.btn.primary:hover{ transform: translateY(-1px); box-shadow: 0 20px 40px rgba(29,161,242,.33); }
.btn.ghost{
    background: rgba(255,255,255,.78);
    border:1px solid rgba(15,23,42,.10);
    color: rgba(15,23,42,.86);
}
.btn.ghost:hover{ transform: translateY(-1px); background:#fff; box-shadow: var(--shadow-soft); }
.btn.full{ width:100%; }

/* Hero Visual */
.hero-visual{
    position:relative;
    min-height: 360px;
}
.glass-card{
    position:relative;
    width:min(420px, 92%);
    margin-left:auto;
    border-radius: 24px;
    background: rgba(255,255,255,.60);
    border: 1px solid rgba(255,255,255,.65);
    box-shadow: 0 30px 70px rgba(2,40,80,.18);
    overflow:hidden;
}
.visual-top{
    display:flex;
    gap:10px;
    padding:14px 16px;
    border-bottom: 1px solid rgba(15,23,42,.06);
    background: rgba(255,255,255,.55);
}
.chip{
    width: 10px; height:10px;
    border-radius: 99px;
    background: rgba(15,23,42,.18);
}
.visual-body{
    position:relative;
    height: 320px;
    background:
            radial-gradient(260px 200px at 20% 25%, rgba(125,211,252,.55), transparent 60%),
            radial-gradient(300px 220px at 80% 35%, rgba(29,161,242,.35), transparent 60%),
            linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.35));
}

.bubble{
    position:absolute;
    border-radius: 999px;
    background: rgba(255,255,255,.65);
    border:1px solid rgba(15,23,42,.06);
    box-shadow: 0 18px 30px rgba(2,40,80,.08);
    animation: float 5.5s ease-in-out infinite;
}
.b1{ width:72px; height:72px; left:16%; top:18%; animation-delay:.1s; }
.b2{ width:48px; height:48px; left:62%; top:22%; animation-delay:.9s; }
.b3{ width:60px; height:60px; left:45%; top:58%; animation-delay:1.6s; }

.spark{
    position:absolute;
    width: 10px; height: 10px;
    border-radius: 4px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    opacity:.85;
    box-shadow: 0 12px 22px rgba(29,161,242,.35);
    animation: twinkle 2.4s ease-in-out infinite;
}
.s1{ left: 18%; top: 60%; }
.s2{ left: 72%; top: 68%; animation-delay: .6s; }
.s3{ left: 58%; top: 40%; animation-delay: 1.1s; }

.mini-card{
    position:absolute;
    left: 12%;
    bottom: 12%;
    width: 62%;
    padding: 14px 14px;
    border-radius: 18px;
    background: rgba(255,255,255,.78);
    border:1px solid rgba(15,23,42,.08);
    box-shadow: 0 20px 40px rgba(2,40,80,.12);
}
.mini-title{ font-weight:800; }
.mini-sub{ color: rgba(15,23,42,.62); font-size:.95rem; margin-top:4px; }

.floating-tag{
    position:absolute;
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.85);
    border:1px solid rgba(15,23,42,.08);
    box-shadow: 0 18px 30px rgba(2,40,80,.10);
    font-weight:700;
    color: rgba(15,23,42,.72);
    animation: float 6.2s ease-in-out infinite;
}
.t1{ left: 6%; top: 18%; }
.t2{ right: 4%; top: 38%; animation-delay: .7s; }
.t3{ right: 12%; bottom: 10%; animation-delay: 1.2s; }

@keyframes float{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-10px); }
}
@keyframes twinkle{
    0%,100%{ transform: scale(1); opacity:.9; }
    50%{ transform: scale(1.25); opacity:.6; }
}

/* Sections */
.section{ padding: 74px 0; }
.section.soft{ background: var(--bg); }
.section.contact{ background:
        radial-gradient(900px 520px at 15% 20%, rgba(125,211,252,.35), transparent 60%),
        radial-gradient(900px 520px at 90% 0%, rgba(29,161,242,.25), transparent 60%),
        linear-gradient(180deg, #ffffff, var(--bg));
}

.section-head{
    text-align:center;
    margin-bottom: 30px;
}
.section-head h2{
    margin:0;
    font-size: clamp(1.65rem, 2.8vw, 2.25rem);
    letter-spacing:-.02em;
}
.sub{
    margin: 10px auto 0;
    color: rgba(15,23,42,.65);
    max-width: 62ch;
}

/* Cards */
.grid.cards{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 26px;
}
.card{
    background: var(--card);
    border: 1px solid rgba(15,23,42,.08);
    border-radius: var(--radius);
    padding: 18px 18px;
    box-shadow: 0 14px 32px rgba(2,40,80,.06);
    text-align:left;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: rgba(29,161,242,.25);
}
.card .icon{
    width: 44px; height:44px;
    border-radius: 16px;
    display:grid;
    place-items:center;
    background: rgba(29,161,242,.10);
    margin-bottom: 12px;
    font-size: 1.1rem;
}
.card h3{ margin: 0 0 6px; letter-spacing:-.01em; }
.card p{ margin:0; color: rgba(15,23,42,.62); }

/* Steps */
.steps{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 24px;
}
.step{
    background: rgba(255,255,255,.85);
    border:1px solid rgba(15,23,42,.08);
    border-radius: var(--radius);
    padding: 18px;
    text-align:left;
    box-shadow: 0 14px 32px rgba(2,40,80,.06);
}
.step-badge{
    width: 38px; height:38px;
    display:grid;
    place-items:center;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(29,161,242,.14), rgba(125,211,252,.20));
    border:1px solid rgba(29,161,242,.18);
    font-weight:800;
    margin-bottom: 10px;
}
.step h3{ margin: 0 0 6px; }
.step p{ margin:0; color: rgba(15,23,42,.62); }

/* Trust */
.trust-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 24px;
}
.trust-card{
    background: var(--card);
    border: 1px solid rgba(15,23,42,.08);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: 0 14px 32px rgba(2,40,80,.06);
    text-align:left;
}
.trust-card h3{ margin:0 0 6px; }
.trust-card p{ margin:0; color: rgba(15,23,42,.62); }

/* Contact */
.contact-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items:start;
}
.contact-left .sub{ margin-left:0; }
.contact-cards{
    display:grid;
    gap: 12px;
    margin-top: 16px;
}
.mini-info{
    display:flex;
    gap: 12px;
    align-items:flex-start;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(15,23,42,.08);
    border-radius: var(--radius);
    padding: 14px;
    box-shadow: 0 14px 32px rgba(2,40,80,.06);
}
.mini-ic{
    width: 40px; height: 40px;
    display:grid;
    place-items:center;
    border-radius: 16px;
    background: rgba(29,161,242,.10);
}
.mini-info a{ color: rgba(15,23,42,.85); }

.hint{
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: rgba(29,161,242,.08);
    border: 1px solid rgba(29,161,242,.15);
    color: rgba(15,23,42,.72);
    font-weight:500;
}

/* Form */
.form{
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 22px;
    padding: 18px;
    box-shadow: 0 18px 50px rgba(2,40,80,.10);
}
.form-row{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.field{
    display:flex;
    flex-direction:column;
    gap: 7px;
    margin-bottom: 12px;
}
label{
    font-weight:700;
    font-size: .95rem;
    color: rgba(15,23,42,.82);
}
input, select, textarea{
    border-radius: 14px;
    border: 1px solid rgba(15,23,42,.14);
    padding: 12px 12px;
    background: #fff;
    font: inherit;
    color: rgba(15,23,42,.88);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
textarea{ min-height: 130px; resize: vertical; }
input:focus, select:focus, textarea:focus{
    border-color: rgba(29,161,242,.55);
    box-shadow: 0 0 0 4px rgba(29,161,242,.12);
}
.error{
    min-height: 18px;
    color: #b42318;
    font-size: .85rem;
}
.form-note{
    margin: 10px 0 0;
    color: rgba(15,23,42,.60);
    font-size: .88rem;
}

/* Toast */
.toast{
    margin-top: 12px;
    display:none;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(16,185,129,.25);
    background: rgba(16,185,129,.10);
    color: rgba(15,23,42,.80);
    font-weight:600;
}

/* Reveal */
.reveal{
    opacity:0;
    transform: translateY(14px);
    transition: opacity .55s ease, transform .55s ease;
}
.reveal.is-visible{
    opacity:1;
    transform: translateY(0);
}

.center{ text-align:center; }

/* Floating buttons */
.fab{
    position: fixed;
    right: 16px;
    bottom: 16px;
    display:flex;
    flex-direction:column;
    gap:10px;
    z-index: 1200;
}
.fab-btn{
    width: 48px;
    height: 48px;
    display:grid;
    place-items:center;
    border-radius: 18px;
    text-decoration:none;
    background: rgba(255,255,255,.90);
    border: 1px solid rgba(15,23,42,.10);
    box-shadow: 0 18px 40px rgba(2,40,80,.12);
    transition: transform .15s ease, background .15s ease;
}
.fab-btn:hover{ transform: translateY(-2px); background:#fff; }

/* Footer */
.footer{
    background: #fff;
    border-top: 1px solid rgba(15,23,42,.06);
    padding: 18px 0;
}
.footer-inner{
    display:flex;
    justify-content:space-between;
    gap:10px;
    color: rgba(15,23,42,.66);
}
.footer-links a{
    text-decoration:none;
    color: rgba(15,23,42,.72);
}
.footer-links a:hover{ color: rgba(15,23,42,.95); }
.sep{ margin: 0 8px; opacity:.6; }

/* Responsive */
@media (max-width: 980px){
    .hero-grid{ grid-template-columns: 1fr; }
    .hero-visual{ min-height: 320px; }
    .glass-card{ margin: 0 auto; }
    .grid.cards{ grid-template-columns: 1fr 1fr; }
    .steps{ grid-template-columns: 1fr; }
    .trust-grid{ grid-template-columns: 1fr 1fr; }
    .contact-grid{ grid-template-columns: 1fr; }
    .form-row{ grid-template-columns: 1fr; }
}

@media (max-width: 760px){
    .nav-toggle{ display:inline-block; }
    .nav-links{
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        top: 74px;
        width: min(560px, 92vw);
        display:none;
        flex-direction: column;
        gap: 8px;
        padding: 12px;
        background: rgba(255,255,255,.95);
        border:1px solid rgba(15,23,42,.08);
        border-radius: 18px;
        box-shadow: var(--shadow);
    }
    .nav-links.open{ display:flex; }
    .nav-links a{ width:100%; text-align:center; }
}