/* =====================================================
   DAO BOLD — Premium Design System v3
   Aesthetic: Deep Space Agency
   Palette: Void Black · Electric Violet · Cyan · Blue
   Fonts: Syne 800 (display) · DM Sans (body)
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600&display=swap');

:root {
    --void:       #000510;
    --surf:       rgba(8, 14, 32, 0.75);
    --surf-2:     rgba(14, 22, 46, 0.85);
    --card:       rgba(6, 11, 28, 0.7);

    --violet:        #7C3AED;
    --violet-hi:     #9F67FF;
    --violet-dim:    rgba(124,58,237,0.13);
    --violet-glow:   rgba(124,58,237,0.4);
    --blue:          #3B82F6;
    --blue-light:    #93C5FD;
    --cyan:          #22D3EE;
    --cyan-dim:      rgba(34,211,238,0.11);
    --green:         #10B981;
    --green-dim:     rgba(16,185,129,0.12);
    --warm:          #F59E0B;
    --pink:          #EC4899;

    --t1: #EEF2FF;
    --t2: #C7D2FE;
    --t3: #8892B0;
    --t4: #3D4A6A;
    --border:  rgba(255,255,255,0.065);
    --bv:      rgba(124,58,237,0.38);

    --fd: 'Syne', sans-serif;
    --fb: 'DM Sans', sans-serif;

    --ease: cubic-bezier(0.16,1,0.3,1);
    --t:    all 0.5s cubic-bezier(0.16,1,0.3,1);
    --r:    14px;
    --rl:   22px;
    --rp:   100px;
    --max:  1120px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

body {
    background-color: var(--void);
    background-image:
        radial-gradient(ellipse 90% 70% at 85% -5%,  rgba(124,58,237,.22) 0%, transparent 55%),
        radial-gradient(ellipse 70% 60% at -5% 80%,  rgba(59,130,246,.13) 0%, transparent 55%),
        radial-gradient(ellipse 40% 40% at 50% 110%, rgba(34,211,238,.07) 0%, transparent 60%),
        linear-gradient(rgba(124,58,237,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124,58,237,.028) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 100% 100%, 52px 52px, 52px 52px;
    background-attachment: fixed;
    color: var(--t1);
    font-family: var(--fb);
    line-height: 1.65;
    overflow-x: hidden;
}
/* Grain */
body::after {
    content:'';position:fixed;inset:0;z-index:9000;pointer-events:none;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity:.022;
}
h1,h2,h3,h4,h5{font-family:var(--fd);font-weight:800;line-height:1.1;letter-spacing:-.035em;}
a{text-decoration:none;color:inherit;}
section{padding:120px 5%;max-width:var(--max);margin:0 auto;}

/* Cursor glow */
.cursor-glow{position:fixed;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.065) 0%,transparent 65%);pointer-events:none;transform:translate(-50%,-50%);z-index:1;will-change:left,top;transition:left .06s linear,top .06s linear;}
@media(hover:none){.cursor-glow{display:none;}}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 30px;border-radius:var(--rp);font-family:var(--fd);font-weight:700;font-size:.88rem;cursor:pointer;border:1px solid transparent;transition:var(--t);text-align:center;position:relative;overflow:hidden;white-space:nowrap;}
.btn-v{background:linear-gradient(135deg,#7C3AED,#5B21B6);color:#fff;border-color:rgba(124,58,237,.6);box-shadow:0 4px 24px rgba(124,58,237,.4),inset 0 1px 0 rgba(255,255,255,.18);}
.btn-v::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 60%);opacity:0;transition:opacity .3s;}
.btn-v:hover{transform:translateY(-3px);box-shadow:0 0 0 4px rgba(124,58,237,.18),0 12px 40px rgba(124,58,237,.55),inset 0 1px 0 rgba(255,255,255,.22);}
.btn-v:hover::before{opacity:1;}
.btn-g{background:rgba(255,255,255,.04);color:var(--t2);border-color:var(--border);backdrop-filter:blur(12px);}
.btn-g:hover{border-color:var(--bv);background:rgba(124,58,237,.09);color:var(--t1);transform:translateY(-2px);}

/* ===== NAVBAR ===== */
header{position:fixed;top:0;width:100%;padding:20px 5%;display:flex;justify-content:space-between;align-items:center;z-index:1000;transition:var(--t);}
header.scrolled{background:rgba(0,5,16,.82);backdrop-filter:blur(24px) saturate(180%);border-bottom:1px solid var(--border);padding:12px 5%;}
.logo{font-family:var(--fd);font-size:1.35rem;font-weight:800;color:var(--t1);display:flex;align-items:center;gap:9px;z-index:1010;letter-spacing:-.04em;}
.logo svg{color:var(--violet-hi);}
.logo em{color:var(--violet-hi);font-style:normal;}
nav{display:flex;gap:28px;align-items:center;}
nav a{color:var(--t3);font-size:.87rem;font-weight:500;transition:color .3s;}
nav a:hover{color:var(--t1);}
.burger{display:none;flex-direction:column;gap:5px;background:var(--surf);border:1px solid var(--border);border-radius:10px;cursor:pointer;padding:9px;z-index:1010;width:40px;height:40px;backdrop-filter:blur(10px);}
.burger span{display:block;width:18px;height:2px;background:var(--t1);border-radius:2px;transition:var(--t);transform-origin:center;}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ===== HELPERS ===== */
.label{display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 8px;background:var(--violet-dim);color:var(--violet-hi);border:1px solid rgba(124,58,237,.28);border-radius:var(--rp);font-size:.72rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:20px;}
.label::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--violet-hi);flex-shrink:0;}
.sh{text-align:center;margin-bottom:64px;}
.sh h2{font-size:clamp(2rem,4vw,3.2rem);color:var(--t1);margin-bottom:16px;}
.sh p{color:var(--t3);font-size:1rem;max-width:560px;margin:0 auto;line-height:1.8;}
.gt{background:linear-gradient(130deg,#fff 20%,var(--violet-hi) 60%,var(--cyan) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* ===== GLASS CARD ===== */
.gc{background:var(--card);backdrop-filter:blur(20px) saturate(150%);border:1px solid var(--border);border-radius:var(--r);transition:var(--t);position:relative;overflow:hidden;}
.gc::before{content:'';position:absolute;inset:0;border-radius:var(--r);padding:1px;background:linear-gradient(135deg,rgba(124,58,237,.55),transparent 45%,rgba(34,211,238,.35));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .5s ease;}
.gc:hover::before{opacity:1;}
.gc:hover{border-color:transparent;transform:translateY(-7px);box-shadow:0 24px 64px rgba(0,0,0,.5),0 0 40px rgba(124,58,237,.12);}

/* ===== MARQUEE ===== */
.mqw{width:100%;overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:rgba(4,9,22,.6);backdrop-filter:blur(12px);padding:16px 0;max-width:100%;}
.mq{display:flex;width:max-content;animation:ticker 35s linear infinite;}
.mq:hover{animation-play-state:paused;}
@keyframes ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.mi{display:inline-flex;align-items:center;gap:10px;padding:0 28px;color:var(--t3);font-size:.82rem;font-weight:500;white-space:nowrap;}
.mi i{color:var(--violet-hi);font-style:normal;font-size:1rem;}
.ms{width:5px;height:5px;border-radius:50%;background:rgba(124,58,237,.45);flex-shrink:0;}

/* ===== STATS ===== */
.sb{background:var(--card);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:var(--r);padding:32px 28px;text-align:center;transition:var(--t);}
.sb:hover{border-color:var(--bv);transform:translateY(-5px);box-shadow:0 20px 50px rgba(0,0,0,.45),0 0 30px rgba(124,58,237,.09);}
.sn{font-family:var(--fd);font-size:3rem;font-weight:800;line-height:1;margin-bottom:10px;letter-spacing:-.04em;}
.sd{font-size:.82rem;color:var(--t3);line-height:1.55;}
.sb.sv .sn{background:linear-gradient(135deg,#A78BFA,#7C3AED);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.sb.sb2 .sn{background:linear-gradient(135deg,#93C5FD,#3B82F6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.sb.sc .sn{background:linear-gradient(135deg,#67E8F9,#22D3EE);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.sb.sg .sn{background:linear-gradient(135deg,#6EE7B7,#10B981);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* ===== PROCESS ===== */
.pw{background:linear-gradient(160deg,rgba(10,16,40,.95),rgba(4,8,22,.98));border:1px solid var(--border);border-radius:var(--rl);padding:clamp(40px,6vw,80px);position:relative;overflow:hidden;margin:0 5%;}
.pw::before{content:'';position:absolute;top:-100px;right:-100px;width:350px;height:350px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.12),transparent 70%);pointer-events:none;}
.pg{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:50px;position:relative;}
.pg::before{content:'';position:absolute;top:35px;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(124,58,237,.6) 20%,rgba(34,211,238,.6) 80%,transparent);z-index:0;}
.ps{text-align:center;position:relative;z-index:1;}
.pn{width:70px;height:70px;border-radius:50%;background:linear-gradient(135deg,var(--violet),#4C1D95);display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:800;font-size:1.3rem;color:#fff;margin:0 auto 20px;box-shadow:0 8px 30px rgba(124,58,237,.5),inset 0 1px 0 rgba(255,255,255,.2);position:relative;}
.pn::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(124,58,237,.4);animation:ring 2.5s ease-in-out infinite;}
@keyframes ring{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.15);opacity:.2}}
.ps:nth-child(1) .pn::after{animation-delay:0s;}
.ps:nth-child(2) .pn::after{animation-delay:.6s;}
.ps:nth-child(3) .pn::after{animation-delay:1.2s;}
.ps:nth-child(4) .pn::after{animation-delay:1.8s;}
.ps h4{font-size:.95rem;color:var(--t1);margin-bottom:8px;font-weight:700;}
.ps p{font-size:.8rem;color:var(--t3);line-height:1.6;}

/* ===== PLAN CARDS ===== */
.plg{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start;}
.pl{background:var(--card);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:var(--rl);padding:36px;display:flex;flex-direction:column;transition:var(--t);position:relative;overflow:hidden;}
.pl:hover{transform:translateY(-8px);box-shadow:0 24px 60px rgba(0,0,0,.5);}
.pl.hp{border-color:rgba(124,58,237,.45);background:linear-gradient(160deg,rgba(124,58,237,.1),rgba(6,11,28,.95));}
.pl.hp::before{content:'';position:absolute;inset:0;border-radius:var(--rl);padding:1px;background:linear-gradient(135deg,var(--violet) 0%,transparent 45%,var(--cyan) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;}
.pb{position:absolute;top:-1px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--violet),#5B21B6);color:#fff;padding:4px 18px;border-radius:0 0 12px 12px;font-size:.7rem;font-weight:700;letter-spacing:.6px;white-space:nowrap;box-shadow:0 4px 16px rgba(124,58,237,.4);}
.pname{font-size:1.2rem;font-family:var(--fd);font-weight:700;margin-bottom:4px;}
.pdesc{color:var(--t3);font-size:.82rem;margin-bottom:18px;}
.pprice{font-family:var(--fd);font-size:3rem;font-weight:800;letter-spacing:-.05em;line-height:1;}
.pprice small{font-size:.9rem;font-weight:500;color:var(--t3);letter-spacing:0;vertical-align:middle;}
.pdeliv{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;background:var(--green-dim);color:#6EE7B7;border:1px solid rgba(16,185,129,.22);border-radius:var(--rp);font-size:.73rem;font-weight:600;margin:16px 0;}
.phr{height:1px;background:var(--border);margin:16px 0;}
.pul{list-style:none;flex:1;display:flex;flex-direction:column;gap:10px;}
.pul li{display:flex;align-items:flex-start;gap:9px;font-size:.84rem;color:var(--t3);line-height:1.5;}
.pul li .fi{flex-shrink:0;margin-top:1px;font-size:.65rem;width:14px;}
.pul li .fi.ok{color:var(--green);}
.pul li .fi.inf{color:var(--blue-light);}
.pul li .fi.no{color:var(--t4);}
.pul li strong{color:var(--t2);}
.pnote{font-size:.72rem;color:var(--t4);margin-top:14px;padding-top:12px;border-top:1px solid var(--border);}
.ibox{background:rgba(124,58,237,.06);border:1px solid rgba(124,58,237,.18);border-radius:var(--r);padding:20px 24px;display:flex;gap:14px;align-items:flex-start;margin-top:30px;}
.ibox p{font-size:.84rem;color:var(--t3);line-height:1.7;}
.ibox strong{color:var(--t2);}

/* ===== FAQ ===== */
.fi-wrap{border-bottom:1px solid var(--border);}
.fq{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;background:none;border:none;cursor:pointer;text-align:left;font-family:var(--fd);font-size:1rem;font-weight:700;color:var(--t1);transition:color .3s;}
.fq:hover{color:var(--violet-hi);}
.fqi{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--t3);flex-shrink:0;transition:var(--t);}
.fi-wrap.open .fq{color:var(--violet-hi);}
.fi-wrap.open .fqi{background:var(--violet-dim);border-color:var(--bv);color:var(--violet-hi);transform:rotate(45deg);}
.fa{max-height:0;overflow:hidden;transition:max-height .45s var(--ease);}
.fa p{color:var(--t3);font-size:.9rem;line-height:1.8;padding-bottom:20px;}
.fa strong{color:var(--t2);}

/* ===== CTA STRIP ===== */
.cta-strip{text-align:center;background:linear-gradient(160deg,rgba(124,58,237,.12) 0%,rgba(4,8,22,.98) 60%);border:1px solid rgba(124,58,237,.2);border-radius:var(--rl);padding:clamp(60px,8vw,100px) 5%;position:relative;overflow:hidden;margin:0 5% 100px;}
.cta-strip::before{content:'';position:absolute;top:-80px;left:50%;transform:translateX(-50%);width:500px;height:300px;background:radial-gradient(ellipse,rgba(124,58,237,.2) 0%,transparent 70%);pointer-events:none;}

footer{text-align:center;padding:36px 5%;color:var(--t4);border-top:1px solid var(--border);font-size:.84rem;}
footer a{color:var(--violet-hi);}

/* ===== BROWSER MOCKUP ===== */
.browser{background:#0A0F1E;border:1px solid rgba(255,255,255,.1);border-radius:var(--r);overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.7),0 0 60px rgba(124,58,237,.18);}
.bbar{background:#131929;padding:10px 14px;display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(255,255,255,.06);}
.bd{width:10px;height:10px;border-radius:50%;}
.bd.r{background:#FF5F57;}.bd.y{background:#FEBC2E;}.bd.g{background:#28C840;}
.burl{flex:1;background:#0A0F1E;border-radius:6px;padding:5px 12px;font-size:.68rem;color:var(--t3);display:flex;align-items:center;gap:6px;margin-left:8px;font-family:var(--fb);}
.burl::before{content:'🔒';font-size:.6rem;}
.bcontent{background:linear-gradient(170deg,#060B1C,#0A1228);position:relative;overflow:hidden;}
.bnav{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.04);}
.blogo{width:56px;height:8px;background:linear-gradient(90deg,var(--violet),var(--cyan));border-radius:4px;}
.blinks{display:flex;gap:8px;align-items:center;}
.bl{width:28px;height:6px;background:rgba(255,255,255,.12);border-radius:3px;}
.bl.cta{width:50px;height:20px;background:linear-gradient(90deg,var(--violet),#5B21B6);border-radius:100px;}
.bhero{padding:22px 18px 12px;}
.bh1{width:78%;height:18px;background:linear-gradient(90deg,rgba(255,255,255,.85),rgba(255,255,255,.2));border-radius:4px;margin-bottom:8px;}
.bh2{width:55%;height:18px;background:linear-gradient(90deg,rgba(167,139,250,.6),rgba(34,211,238,.3));border-radius:4px;margin-bottom:14px;}
.bsub{width:65%;height:6px;background:rgba(255,255,255,.12);border-radius:3px;margin-bottom:6px;}
.bsub.sm{width:48%;}
.bbtns{display:flex;gap:8px;margin-top:14px;}
.bb{width:72px;height:24px;border-radius:100px;}
.bb.f{background:linear-gradient(90deg,var(--violet),#5B21B6);box-shadow:0 0 12px rgba(124,58,237,.5);}
.bb.o{border:1px solid rgba(255,255,255,.15);}
.bcards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:0 18px 14px;}
.bc{height:44px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:8px;}
.bc.hl{border-color:rgba(124,58,237,.35);background:rgba(124,58,237,.06);}
.bspeed{position:absolute;bottom:10px;right:12px;background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.3);border-radius:8px;padding:5px 10px;font-size:.6rem;color:#6EE7B7;display:flex;align-items:center;gap:5px;font-family:var(--fb);}
.bspeed::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);animation:blink 1.8s ease-in-out infinite;flex-shrink:0;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.borb{position:absolute;top:-30px;right:-30px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.22),transparent 70%);pointer-events:none;}

/* Float badges */
.fbadge{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--rp);font-size:.77rem;font-weight:600;backdrop-filter:blur(12px);border:1px solid;}
.fb-v{background:rgba(124,58,237,.12);border-color:rgba(124,58,237,.3);color:var(--violet-hi);}
.fb-g{background:var(--green-dim);border-color:rgba(16,185,129,.3);color:#6EE7B7;}
.fb-c{background:var(--cyan-dim);border-color:rgba(34,211,238,.3);color:var(--cyan);}
.fb-w{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.3);color:var(--warm);}
@keyframes fa{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes fb{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@keyframes fc{0%,100%{transform:translateY(-4px)}50%{transform:translateY(4px)}}

/* ===== ANIMATIONS ===== */
.au{opacity:0;transform:translateY(44px);transition:opacity .85s var(--ease),transform .85s var(--ease);}
.al{opacity:0;transform:translateX(-44px);transition:opacity .85s var(--ease),transform .85s var(--ease);}
.ar{opacity:0;transform:translateX(44px);transition:opacity .85s var(--ease),transform .85s var(--ease);}
.as{opacity:0;transform:scale(.91) translateY(22px);transition:opacity .85s var(--ease),transform .85s var(--ease);}
.on{opacity:1!important;transform:none!important;}
.d1{transition-delay:.08s!important;}.d2{transition-delay:.16s!important;}.d3{transition-delay:.24s!important;}
.d4{transition-delay:.32s!important;}.d5{transition-delay:.40s!important;}.d6{transition-delay:.48s!important;}

/* Sticky mobile CTA */
.sticky-bar{display:none;position:fixed;bottom:0;left:0;right:0;padding:14px 20px;background:rgba(0,5,16,.92);backdrop-filter:blur(20px);border-top:1px solid var(--border);z-index:990;}
.sticky-bar .btn{width:100%;}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
    .plg{grid-template-columns:1fr;max-width:480px;margin:0 auto;}
    .pl.hp{order:-1;}
    .pg{grid-template-columns:repeat(2,1fr);}
    .pg::before{display:none;}
}
@media(max-width:768px){
    header{flex-direction:row!important;background:rgba(0,5,16,.95);padding:12px 5%;}
    header.scrolled{padding:10px 5%;}
    .burger{display:flex;}
    nav{display:none;position:fixed;inset:0;background:rgba(0,5,16,.97);backdrop-filter:blur(30px);flex-direction:column;justify-content:center;align-items:center;gap:30px;z-index:1005;}
    nav.open{display:flex;}
    nav a{font-size:1.4rem;color:var(--t1);font-weight:700;}
    nav .btn{width:auto;padding:16px 44px;font-size:1rem;}
    section{padding:80px 5% 50px;}
    .pw{margin:0;border-radius:0;}
    .cta-strip{margin:0 0 60px;border-radius:0;}
    .sticky-bar{display:block;}
    body{padding-bottom:80px;}
}
@media(max-width:600px){
    .pg{grid-template-columns:1fr;}
    .pn{width:56px;height:56px;font-size:1.1rem;}
    .plg{max-width:100%;}
    .ibox{flex-direction:column;}
}
