/* =========== RESET & BASE =========== */
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";color:#e5e7eb;background:#0b1020}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button{font:inherit}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
.grid{display:grid;gap:24px}
.section{padding:72px 0}
h1{font-size:clamp(32px,5vw,56px);line-height:1.1;margin:0 0 16px;color:#f8fafc}
h2{font-size:clamp(24px,3.5vw,36px);line-height:1.15;margin:0 0 16px;color:#f8fafc}
h3{font-size:22px;margin:0 0 12px;color:#e5e7eb}
p{line-height:1.8;color:#e5e7eb}
.small{font-size:14px;color:#cbd5e1}

/* =========== THEMES =========== */
:root{
 --radius:18px;
 --glass:rgba(255,255,255,.06);
 --glass2:rgba(255,255,255,.12);
 --stroke:rgba(255,255,255,.14);
 --shadow:0 10px 30px rgba(0,0,0,.25);
}
body.gradient-1{background:radial-gradient(1200px 600px at 10% -10%,#6d28d9 0%,rgba(109,40,217,0) 60%),linear-gradient(135deg,#0b1020 0%,#0b1221 60%,#0e182f 100%)}
body.gradient-2{background:radial-gradient(900px 500px at 80% -10%,#ef4444 0%,rgba(239,68,68,0) 60%),linear-gradient(135deg,#0b1020,#101a36)}
body.gradient-3{background:radial-gradient(900px 500px at 10% -10%,#06b6d4 0%,rgba(6,182,212,0) 60%),linear-gradient(135deg,#0b1020,#0c142a)}
.card{background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--stroke);border-radius:var(--radius);box-shadow:var(--shadow)}

/* =========== HEADER / NAV =========== */
.header{position:sticky;top:0;z-index:50;background:rgba(7,10,20,.6);backdrop-filter:blur(10px);border-bottom:1px solid var(--stroke)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}
.logo-badge{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,#8b5cf6,#06b6d4);display:grid;place-items:center;color:white;font-weight:900;box-shadow:0 6px 18px rgba(99,102,241,.45)}
.nav{display:flex;align-items:center;gap:18px}
.nav a{padding:10px 12px;border-radius:12px;color:#e5e7eb}
.nav a:hover{background:rgba(255,255,255,.08)}
.cta{display:flex;gap:10px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:14px;border:1px solid var(--stroke);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,.25)}
.btn.primary{background:linear-gradient(135deg,#8b5cf6,#06b6d4)}
.btn.ghost{background:transparent}
.phone{display:none}
@media (min-width:860px){.phone{display:inline-flex;color:#e5e7eb}}

/* Burger */
.burger{display:inline-flex;flex-direction:column;gap:4px;padding:10px;border-radius:10px;border:1px solid var(--stroke);background:rgba(255,255,255,.06)}
.burger span{width:22px;height:2px;background:#e5e7eb;border-radius:2px;display:block}
@media(min-width:1024px){.burger{display:none}}
.mobile-menu{position:fixed;inset:0;background:rgba(7,10,20,.9);backdrop-filter:blur(8px);display:none;z-index:60;overflow:hidden}
.mobile-menu.open{display:block}
.mobile-menu .panel{position:absolute;right:0;top:0;height:100%;width:min(85%,360px);max-width:92vw;background:rgba(255,255,255,.04);border-left:1px solid var(--stroke);padding:24px;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:84px}
.mobile-menu a{display:block;padding:14px 0;border-bottom:1px dashed var(--stroke);color:#e5e7eb}

/* =========== HERO =========== */
.hero{padding:80px 0 40px;position:relative;overflow:hidden}
.hero .orb{position:absolute;border-radius:999px;filter:blur(40px);opacity:.5;pointer-events:none}
.hero .orb.o1{width:320px;height:320px;background:radial-gradient(#8b5cf6,#06b6d4);left:-60px;top:-80px}
.hero .orb.o2{width:260px;height:260px;background:radial-gradient(#ef4444,#f97316);right:-60px;bottom:-120px}
.hero h1 span{background:linear-gradient(135deg,#8b5cf6,#06b6d4);-webkit-background-clip:text;background-clip:text;color:transparent}
.kpi{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.kpi .tag{padding:8px 12px;border-radius:999px;border:1px solid var(--stroke);color:#e5e7eb;background:rgba(255,255,255,.06)}

/* =========== SECTIONS =========== */
.cards{grid-template-columns:repeat(1,minmax(0,1fr))}
@media(min-width:640px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card.padded{padding:22px}
.icon{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:2}
.icon-wrap{line-height:1.8;color:#e5e7eb}

/* Pricing */
.pricing{grid-template-columns:repeat(1,minmax(0,1fr))}
@media(min-width:900px){.pricing{grid-template-columns:repeat(3,minmax(0,1fr))}}
.price-card{position:relative;overflow:hidden}
.price{font-size:34px;font-weight:800;margin:8px 0}
.check{display:flex;align-items:center;gap:8px;color:#d1d5db}
.badge{position:absolute;top:16px;right:16px;background:linear-gradient(135deg,#22c55e,#16a34a);padding:6px 10px;border-radius:999px;color:#052e16;font-weight:700}

/* Reviews */
.reviews{grid-template-columns:repeat(1,minmax(0,1fr))}
@media(min-width:900px){.reviews{grid-template-columns:repeat(3,minmax(0,1fr))}}
.stars{letter-spacing:2px;color:#fbbf24}

/* Process */
.steps{grid-template-columns:repeat(1,minmax(0,1fr))}
@media(min-width:900px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.step-num{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#8b5cf6,#06b6d4);display:grid;place-items:center;color:#fff;font-weight:800}

/* FAQ */
.faq-item{border-bottom:1px solid var(--stroke);padding:14px 0}
.faq-q{display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.faq-a{display:none;padding-top:8px;color:#cbd5e1}
.faq-item.open .faq-a{display:block}

/* Footer */
.footer{background:rgba(255,255,255,.04);border-top:1px solid var(--stroke);padding:32px 0;margin-top:32px}
.footer a{color:#cbd5e1}
.footer .grid{grid-template-columns:repeat(1,minmax(0,1fr))}
@media(min-width:860px){.footer .grid{grid-template-columns:2fr 1fr 1fr}}

/* Reveal animations */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* Sticky bottom bar (mobile) */
.sticky-cta{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);z-index:40;background:linear-gradient(135deg,#8b5cf6,#06b6d4);color:#fff;padding:10px 16px;border-radius:999px;display:flex;gap:10px;align-items:center;border:1px solid var(--stroke)}
@media(min-width:860px){.sticky-cta{display:none}}

/* Tables */
.table{width:100%;border-collapse:collapse;border:1px solid var(--stroke);border-radius:14px;overflow:hidden}
.table th,.table td{padding:12px 14px;border-bottom:1px solid var(--stroke);color:#e5e7eb;text-align:left}
.table thead{background:rgba(255,255,255,.06)}

/* Background animation canvas */
.bg-canvas{position:fixed;inset:0;pointer-events:none;opacity:.5;z-index:0}

/* ===== Dropdown in header ===== */
.nav .dropdown{position:relative}
.nav .dropdown-toggle{display:inline-flex;align-items:center;gap:6px;padding:10px 12px;border-radius:12px;color:#e5e7eb}
.nav .dropdown:hover .dropdown-toggle,.nav .dropdown:focus-within .dropdown-toggle{background:rgba(255,255,255,.08)}
.nav .dropdown-menu{position:absolute;top:calc(100% + 10px);left:0;min-width:320px;max-height:70vh;overflow:auto;background:rgba(7,10,20,.95);border:1px solid var(--stroke);border-radius:14px;padding:10px;display:none;backdrop-filter:blur(10px);box-shadow:var(--shadow);z-index:70}
.nav .dropdown:hover .dropdown-menu,.nav .dropdown:focus-within .dropdown-menu{display:block}
.nav .dropdown-menu a{display:block;padding:10px;border-radius:10px;color:#e5e7eb}
.nav .dropdown-menu a:hover{background:rgba(255,255,255,.08)}
.menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
@media(min-width:1200px){.menu-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ===== Mobile nested services ===== */
.mobile-menu details{border-bottom:1px dashed var(--stroke);padding:10px 0}
.mobile-menu details summary{cursor:pointer;color:#e5e7eb;outline:none;list-style:none}
.mobile-menu details a{padding:8px 0;display:block;color:#cbd5e1}

.no-scroll{overflow:hidden;height:100vh}

/* ===== DOM bubbles fallback ===== */
.bubbles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bubbles .bubble{position:absolute;bottom:-12vh;border-radius:999px;opacity:.55;
  background:radial-gradient(closest-side, rgba(139,92,246,.9), rgba(6,182,212,.4), rgba(0,0,0,0));
  filter:blur(0.2px);
  animation:rise var(--dur,16s) linear infinite, sway var(--dur2,6s) ease-in-out infinite}
@keyframes rise{to{transform:translateY(-120vh) scale(var(--s,1))}}
@keyframes sway{50%{transform:translateX(var(--dx,40px))}}