*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
    --bg:  #060b12;
    --s1:  #090f1a;
    --s2:  #0d1522;
    --s3:  #121a2e;
    --s4:  #172038;

    --a:     #2589d4;
    --a-lt:  #4fb8f7;
    --a-dim: rgba(37,137,212,.13);
    --a-glow:rgba(37,137,212,.35);

    --b:     #12c99c;
    --b-lt:  #2ee8b6;
    --b-dim: rgba(18,201,156,.11);
    --b-glow:rgba(18,201,156,.32);

    --grad:      linear-gradient(135deg, var(--a) 0%, var(--b) 100%);
    --grad-r:    linear-gradient(135deg, var(--b) 0%, var(--a) 100%);
    --grad-text: linear-gradient(135deg, var(--a-lt) 0%, var(--b-lt) 100%);

    --t1: #e8f0f9;
    --t2: #6a859f;
    --t3: #2e3f52;

    --bd:  rgba(255,255,255,.055);
    --bd2: rgba(255,255,255,.09);

    --ff:  'Plus Jakarta Sans', sans-serif;
    --ffm: 'JetBrains Mono', monospace;
    --ease: cubic-bezier(.4,0,.2,1);
}
html { scroll-behavior:smooth; }
body { font-family:var(--ff); background:var(--bg); color:var(--t1); overflow-x:hidden; -webkit-font-smoothing:antialiased; }

/* ── BACKGROUND ── */
.bg { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bg-grid {
    position:absolute; inset:0;
    background-image:
            linear-gradient(rgba(37,137,212,.028) 1px,transparent 1px),
            linear-gradient(90deg,rgba(37,137,212,.028) 1px,transparent 1px);
    background-size:52px 52px;
}
.blob { position:absolute; border-radius:50%; filter:blur(90px); }
.blob-1 { width:700px;height:700px; top:-15%;left:-8%; background:radial-gradient(circle,rgba(37,137,212,.14) 0%,transparent 70%); animation:d1 24s ease-in-out infinite; }
.blob-2 { width:600px;height:600px; bottom:-12%;right:-8%; background:radial-gradient(circle,rgba(18,201,156,.12) 0%,transparent 70%); animation:d2 28s ease-in-out infinite; }
.blob-3 { width:400px;height:400px; top:45%;left:42%; background:radial-gradient(circle,rgba(37,137,212,.06) 0%,transparent 70%); animation:d3 20s ease-in-out infinite; }
@keyframes d1 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(55px,35px) scale(1.06)} 66%{transform:translate(-25px,70px) scale(.96)} }
@keyframes d2 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(-60px,-45px) scale(1.05)} 66%{transform:translate(35px,-25px) scale(.98)} }
@keyframes d3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-35px,55px) scale(1.09)} }
.particles { position:absolute; inset:0; }
.p { position:absolute; border-radius:50%; animation:pfloat linear infinite; }
@keyframes pfloat { 0%{transform:translateY(110vh);opacity:0} 5%{opacity:1} 95%{opacity:.5} 100%{transform:translateY(-10vh) translateX(25px);opacity:0} }

/* ── HEADER ── */
header {
    position:fixed; top:0; left:0; right:0; z-index:100;
    height:64px; padding:0 52px;
    display:flex; align-items:center; justify-content:space-between;
    background:rgba(6,11,18,.8); backdrop-filter:blur(20px) saturate(160%);
    border-bottom:1px solid var(--bd);
    animation:hIn .6s var(--ease) both;
}
@keyframes hIn { from{opacity:0;transform:translateY(-100%)} to{opacity:1;transform:none} }
.hdr-logo { display:flex; align-items:center; gap:11px; text-decoration:none; transition:opacity .2s; }
.hdr-logo:hover { opacity:.72; }
.hdr-logo img { width:28px; height:28px; border-radius:7px; }
.hdr-logo span { font-size:15px; font-weight:800; letter-spacing:-.025em; background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hdr-nav { display:flex; align-items:center; gap:4px; }
.hdr-lnk { padding:7px 14px; border-radius:8px; font-size:13px; font-weight:500; color:var(--t2); text-decoration:none; border:1px solid transparent; transition:all .18s; }
.hdr-lnk:hover { color:var(--t1); background:rgba(255,255,255,.04); }
.hdr-cta { padding:9px 20px; border-radius:9px; font-size:13px; font-weight:700; background:var(--grad); color:#fff; border:none; cursor:pointer; font-family:var(--ff); box-shadow:0 4px 16px var(--a-glow); transition:all .2s; letter-spacing:.01em; margin-left:6px; }
.hdr-cta:hover { transform:translateY(-1px); box-shadow:0 6px 24px var(--a-glow); }

/* ── HERO ── */
.hero {
    position:relative; z-index:1;
    min-height:100vh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:100px 48px 80px;
    overflow:hidden;
}

/* Central orbit disc */
.orbit-wrap {
    position:relative;
    width:240px; height:240px;
    margin:0 auto 68px;
    animation:oIn .9s var(--ease) .15s both;
}
@keyframes oIn { from{opacity:0;transform:scale(.75) translateY(24px)} to{opacity:1;transform:none} }

/* Orbiting rings */
.ring { position:absolute; border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); }
.ring-1 { width:300px;height:300px; border:1px dashed rgba(37,137,212,.14); animation:rRot 18s linear infinite; }
.ring-2 { width:390px;height:390px; border:1px dashed rgba(18,201,156,.1); animation:rRot 28s linear infinite reverse; }
.ring-3 { width:480px;height:480px; border:1px dashed rgba(37,137,212,.06); animation:rRot 42s linear infinite; }
@keyframes rRot { to{transform:translate(-50%,-50%) rotate(360deg)} }

/* Dots on rings */
.rdot { position:absolute; border-radius:50%; width:7px; height:7px; margin:-3.5px; }
.rdot.a { background:var(--a); box-shadow:0 0 10px var(--a-glow); top:0; left:50%; }
.rdot.b { background:var(--b); box-shadow:0 0 10px var(--b-glow); bottom:0; left:50%; }
.rdot.c { background:var(--a-lt); box-shadow:0 0 8px var(--a-glow); top:50%; right:0; }
.rdot.d { background:var(--b-lt); box-shadow:0 0 8px var(--b-glow); top:50%; left:0; }

/* Main disc */
.disc {
    position:absolute; inset:0; border-radius:50%;
    background:linear-gradient(145deg,var(--s3),var(--s4));
    border:1px solid rgba(37,137,212,.18);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 60px rgba(37,137,212,.18),0 0 120px rgba(18,201,156,.1),inset 0 1px 0 rgba(255,255,255,.06);
    transition:box-shadow .3s;
}
.disc::before {
    content:''; position:absolute; inset:-2px; border-radius:50%; z-index:-1;
    background:conic-gradient(from 0deg,var(--a) 0%,var(--b) 38%,transparent 58%,var(--a) 100%);
    animation:spin 8s linear infinite; opacity:.55;
}
.disc::after { content:''; position:absolute; inset:18px; border-radius:50%; border:1px solid rgba(18,201,156,.1); }
@keyframes spin { to{transform:rotate(360deg)} }
.disc:hover { box-shadow:0 0 80px rgba(37,137,212,.3),0 0 160px rgba(18,201,156,.18),inset 0 1px 0 rgba(255,255,255,.06); }

.disc-core {
    width:60px; height:60px; border-radius:50%;
    background:var(--s1); border:1px solid var(--bd2);
    display:flex; align-items:center; justify-content:center;
    box-shadow:inset 0 2px 8px rgba(0,0,0,.5);
}
.disc-core svg { width:26px; height:26px; }

/* Wave below disc */
.hero-wave {
    position:absolute; bottom:-28px; left:50%; transform:translateX(-50%);
    display:flex; align-items:flex-end; gap:4px; height:22px;
}
.hw { width:3px; border-radius:2px; animation:hwb 1.4s ease-in-out infinite; }
.hw:nth-child(odd){background:var(--a)} .hw:nth-child(even){background:var(--b)}
.hw:nth-child(1){animation-delay:.0s;height:7px}.hw:nth-child(2){animation-delay:.12s;height:13px}.hw:nth-child(3){animation-delay:.24s;height:20px}.hw:nth-child(4){animation-delay:.36s;height:16px}.hw:nth-child(5){animation-delay:.48s;height:22px}.hw:nth-child(6){animation-delay:.36s;height:16px}.hw:nth-child(7){animation-delay:.24s;height:20px}.hw:nth-child(8){animation-delay:.12s;height:13px}.hw:nth-child(9){animation-delay:.0s;height:7px}
@keyframes hwb { 0%,100%{transform:scaleY(.2);opacity:.3} 50%{transform:scaleY(1);opacity:1} }

/* Hero text */
.h-eye  { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-top:20px; margin-bottom:20px; animation:tIn .7s var(--ease) .3s both; }
.h-title { font-size:clamp(38px,6vw,66px); font-weight:800; letter-spacing:-.04em; line-height:1.07; color:var(--t1); margin-bottom:22px; animation:tIn .7s var(--ease) .45s both; }
.h-title em { font-style:normal; background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.h-sub  { font-size:clamp(15px,2.2vw,18px); color:var(--t2); line-height:1.8; max-width:500px; margin:0 auto 44px; animation:tIn .7s var(--ease) .6s both; }
@keyframes tIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }

.h-btns { display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; animation:tIn .7s var(--ease) .75s both; }
.btn-main {
    padding:16px 36px; border-radius:12px; font-size:15px; font-weight:800; letter-spacing:.01em;
    background:var(--grad); color:#fff; border:none; cursor:pointer; font-family:var(--ff);
    box-shadow:0 6px 28px var(--a-glow); transition:all .22s var(--ease);
    display:flex; align-items:center; gap:9px; position:relative; overflow:hidden;
}
.btn-main::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.2),transparent); opacity:0; transition:opacity .22s; }
.btn-main:hover::before { opacity:1; }
.btn-main:hover { transform:translateY(-3px); box-shadow:0 10px 42px var(--a-glow); }
.btn-main:active { transform:none; }
.btn-main svg { width:17px; height:17px; stroke:white; fill:none; stroke-width:2.5; flex-shrink:0; }
.btn-ghost {
    padding:15px 28px; border-radius:12px; font-size:15px; font-weight:600;
    background:var(--a-dim); border:1px solid rgba(37,137,212,.24); color:var(--a-lt);
    cursor:pointer; font-family:var(--ff); transition:all .22s var(--ease);
    display:flex; align-items:center; gap:8px;
}
.btn-ghost:hover { background:rgba(37,137,212,.22); border-color:rgba(37,137,212,.45); transform:translateY(-2px); }
.btn-ghost svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; }

/* Stats */
.h-stats { display:flex; gap:44px; align-items:center; justify-content:center; margin-top:62px; flex-wrap:wrap; animation:tIn .7s var(--ease) .9s both; }
.stat { text-align:center; }
.stat-val { font-size:30px; font-weight:800; letter-spacing:-.03em; background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; display:block; margin-bottom:4px; }
.stat-lbl { font-size:10.5px; color:var(--t3); font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.stat-sep { width:1px; height:38px; background:var(--bd); }

/* ── FEATURES ── */
.section { position:relative; z-index:1; padding:104px 52px; }
.section-head { text-align:center; margin-bottom:64px; }
.sec-eye { font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:14px; }
.sec-title { font-size:clamp(28px,4vw,44px); font-weight:800; letter-spacing:-.035em; color:var(--t1); margin-bottom:14px; line-height:1.1; }
.sec-sub { font-size:15px; color:var(--t2); line-height:1.7; max-width:500px; margin:0 auto; }

.feat-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px; max-width:1100px; margin:0 auto;
}

.fc {
    background:var(--s2); border:1px solid var(--bd); border-radius:16px;
    padding:30px 26px; position:relative; overflow:hidden;
    transition:all .25s var(--ease); cursor:default;
}
.fc::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--grad); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.fc::after  { content:''; position:absolute; inset:0; border-radius:16px; background:radial-gradient(circle at 50% 0%,rgba(37,137,212,.08) 0%,transparent 70%); opacity:0; transition:opacity .3s; pointer-events:none; }
.fc:hover { border-color:rgba(37,137,212,.24); transform:translateY(-6px); box-shadow:0 20px 50px rgba(0,0,0,.38); }
.fc:hover::before { transform:scaleX(1); }
.fc:hover::after  { opacity:1; }

.fc-icon { width:46px; height:46px; border-radius:11px; margin-bottom:20px; background:var(--grad); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px var(--a-glow); position:relative; z-index:1; transition:transform .25s, box-shadow .25s; }
.fc:hover .fc-icon { transform:scale(1.1); box-shadow:0 6px 22px var(--a-glow); }
.fc-icon svg { width:21px; height:21px; stroke:white; fill:none; stroke-width:2; }
.fc.green .fc-icon { background:var(--grad-r); box-shadow:0 4px 16px var(--b-glow); }
.fc:hover.green .fc-icon { box-shadow:0 6px 22px var(--b-glow); }

.fc-title { font-size:15px; font-weight:800; color:var(--t1); margin-bottom:9px; letter-spacing:-.01em; position:relative; z-index:1; }
.fc-desc  { font-size:13px; color:var(--t2); line-height:1.7; position:relative; z-index:1; }

/* Wide card: spans 2 cols */
.fc.wide {
    grid-column:span 2;
    display:flex; gap:28px; align-items:center; padding:32px;
}
.fc.wide .fc-icon { width:54px; height:54px; flex-shrink:0; }
.fc.wide .fc-icon svg { width:24px; height:24px; }

/* ── FLOW / HOW IT WORKS ── */
.flow-wrap {
    position:relative; z-index:1;
    background:rgba(9,15,26,.55);
    border-top:1px solid var(--bd); border-bottom:1px solid var(--bd);
    padding:96px 52px;
}
.flow-grid {
    display:flex; gap:0; max-width:920px; margin:0 auto;
    position:relative;
}
.flow-grid::before {
    content:''; position:absolute;
    top:23px; left:24px; right:24px; height:1px;
    background:linear-gradient(90deg,rgba(37,137,212,.18),rgba(18,201,156,.18),rgba(37,137,212,.18));
}
.fs { flex:1; text-align:center; padding:0 18px; position:relative; }
.fs-num {
    width:46px; height:46px; border-radius:50%;
    background:var(--s3); border:1px solid var(--bd2);
    margin:0 auto 18px; display:flex; align-items:center; justify-content:center;
    font-family:var(--ffm); font-size:12px; font-weight:600; color:var(--a-lt);
    position:relative; z-index:1;
    box-shadow:0 0 0 5px rgba(37,137,212,.05),0 4px 14px rgba(0,0,0,.3);
    transition:all .25s;
}
.fs:hover .fs-num { background:var(--a); color:white; box-shadow:0 0 0 6px rgba(37,137,212,.14),0 4px 18px var(--a-glow); }
.fs-title { font-size:14px; font-weight:700; color:var(--t1); margin-bottom:8px; }
.fs-desc  { font-size:12.5px; color:var(--t2); line-height:1.65; }
.fs-arrow { position:absolute; right:-14px; top:10px; color:var(--t3); z-index:2; }
.fs-arrow svg { width:20px; height:20px; stroke:currentColor; stroke-width:2; fill:none; }

/* ── CTA SECTION ── */
.cta-wrap { position:relative; z-index:1; padding:108px 52px; text-align:center; }
.cta-box {
    max-width:680px; margin:0 auto;
    background:var(--s2); border:1px solid var(--bd2);
    border-radius:24px; padding:60px 52px; position:relative; overflow:hidden;
}
/* Spinning gradient border */
.cta-box::before {
    content:''; position:absolute; inset:-1.5px; border-radius:24px; z-index:-1;
    background:conic-gradient(from 0deg,var(--a),var(--b),var(--a));
    opacity:.22; animation:spin 14s linear infinite;
}
.cta-box::after { content:''; position:absolute; inset:0; border-radius:24px; background:radial-gradient(circle at 50% -10%,rgba(37,137,212,.12) 0%,transparent 65%); pointer-events:none; }
.cta-title { font-size:clamp(26px,4vw,40px); font-weight:800; letter-spacing:-.035em; color:var(--t1); margin-bottom:14px; line-height:1.15; position:relative; z-index:1; }
.cta-sub   { font-size:15px; color:var(--t2); line-height:1.75; margin-bottom:36px; position:relative; z-index:1; }
.cta-row   { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; position:relative; z-index:1; }

/* ── FOOTER ── */
footer {
    position:relative; z-index:1;
    border-top:1px solid var(--bd);
    padding:26px 52px;
    display:flex; align-items:center; justify-content:space-between;
}
.ftr-logo { display:flex; align-items:center; gap:10px; }
.ftr-logo img { width:22px; height:22px; border-radius:5px; }
.ftr-logo span { font-size:13px; font-weight:800; background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
footer small { font-size:12px; color:var(--t3); }

/* ── SCROLL REVEAL ── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .65s var(--ease),transform .65s var(--ease); }
.reveal.on { opacity:1; transform:none; }
.d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s} .d4{transition-delay:.4s}

/* ── RESPONSIVE ── */
@media (max-width:900px) {
    header { padding:0 24px; }
    .hero,.section,.flow-wrap,.cta-wrap { padding:80px 24px; }
    .feat-grid { grid-template-columns:1fr; }
    .fc.wide { grid-column:span 1; flex-direction:column; gap:18px; }
    .flow-grid { flex-direction:column; gap:30px; }
    .flow-grid::before { display:none; }
    .fs-arrow { display:none; }
    footer { flex-direction:column; gap:12px; text-align:center; }
    .h-stats { gap:22px; }
    .stat-sep { display:none; }
    .orbit-wrap { width:200px; height:200px; }
    .ring-1{width:250px;height:250px} .ring-2{width:320px;height:320px} .ring-3{width:400px;height:400px}
}