:root{
  --bg:#050816;
  --bg-deep:#090e22;
  --panel:rgba(11,16,38,.68);
  --panel-strong:rgba(13,19,45,.88);
  --stroke:rgba(255,255,255,.09);
  --text:#f6f7ff;
  --muted:#acb5d8;
  --accent:#f5d38a;
  --accent-2:#d4a95f;
  --accent-3:#fff1cf;
  --accent-4:#caa35f;
  --radius:28px;
  --shadow:0 30px 80px rgba(3,9,27,.5), inset 0 1px 0 rgba(255,255,255,.05);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',system-ui,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 14% 14%, rgba(120,97,255,.14), transparent 24%),
    radial-gradient(circle at 82% 10%, rgba(111,247,255,.10), transparent 22%),
    radial-gradient(circle at 70% 78%, rgba(255,160,110,.08), transparent 22%),
    linear-gradient(180deg, #070809 0%, #0d1014 44%, #0a0b0d 100%);
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
canvas#webCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.96;transform:translate3d(0,0,0);will-change:transform;backface-visibility:hidden}
.cursor-glow{position:fixed;width:300px;height:300px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle, rgba(111,247,255,.12), rgba(111,247,255,0) 62%);filter:blur(18px);transform:translate3d(-999px,-999px,0);opacity:.8;will-change:transform}
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-3),var(--accent-2));z-index:20;box-shadow:0 0 28px rgba(111,247,255,.5)}
.ambient{position:fixed;inset:auto;filter:blur(80px);pointer-events:none;z-index:0;opacity:.55;animation:floatBlob 14s ease-in-out infinite}
.ambient-a{top:10%;left:-4%;width:280px;height:280px;background:rgba(245,211,138,.14)}
.ambient-b{top:34%;right:-4%;width:360px;height:360px;background:rgba(212,169,95,.16);animation-delay:-4s}
.ambient-c{bottom:10%;left:38%;width:320px;height:320px;background:rgba(245,211,138,.10);animation-delay:-8s}
@keyframes floatBlob{50%{transform:translate3d(0,-24px,0) scale(1.08)}}
.container{width:min(1180px,calc(100% - 32px));margin:0 auto;position:relative;z-index:2}
.site-header{position:sticky;top:10px;z-index:15;background:linear-gradient(180deg, rgba(15,28,54,.88), rgba(15,28,54,.66));backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 12px 38px rgba(0,0,0,.14)}
.nav-wrap{min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:14px;font-weight:800;font-size:clamp(1.2rem,2vw,1.55rem);letter-spacing:-.04em;text-transform:lowercase}
.brand img{height:56px;flex:none}
.brand span{color:#f6f7ff;position:relative}
.brand span::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:linear-gradient(90deg, rgba(111,247,255,0), rgba(111,247,255,.35), rgba(255,98,192,0));opacity:.8}
.nav{display:flex;align-items:center;gap:28px;color:#dce4ff}
.nav a{position:relative}
.nav a:not(.nav-cta)::after{content:"";position:absolute;left:0;bottom:-8px;width:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-3));transition:width .3s ease}
.nav a:hover::after{width:100%}
.mobile-toggle{display:none}
.mobile-menu{display:none;background:linear-gradient(180deg, rgba(20,36,67,.96), rgba(16,29,56,.94));box-shadow:0 18px 40px rgba(0,0,0,.18)}
.nav-cta,.btn{
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  padding:14px 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:700;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.nav-cta{background:linear-gradient(135deg, rgba(245,211,138,.14), rgba(212,169,95,.16)); box-shadow:0 10px 30px rgba(111,247,255,.12)}
.btn-primary{background:linear-gradient(135deg, var(--accent), var(--accent-2) 58%, var(--accent-3)); color:#07101f; box-shadow:0 18px 44px rgba(111,247,255,.22),0 0 42px rgba(123,97,255,.16)}
.btn-secondary{background:rgba(255,255,255,.04);color:var(--text)}
.btn:hover,.nav-cta:hover{transform:translateY(-2px)}
.hero{padding:120px 0 26px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1.03fr;gap:34px;align-items:center;min-height:760px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;letter-spacing:.12em;text-transform:uppercase;color:#d6e0ff;font-weight:700;font-size:.76rem}
.pill{padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);position:relative;overflow:hidden}
.animated-pill{background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.03));backdrop-filter:blur(12px);animation:pillFloat 8s ease-in-out infinite}
.animated-pill::before{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);animation:pillShine 4.6s ease-in-out infinite}
@keyframes pillFloat{50%{transform:translateY(-2px)}}
@keyframes pillShine{55%,100%{transform:translateX(100%)}}
.hero-copy h1{font-size:clamp(3rem,6vw,6.1rem);line-height:.95;letter-spacing:-.06em;margin:18px 0 22px;max-width:12ch}
.hero-copy h1 span,.section-head h2 span,.contact-shell h2 span{background:linear-gradient(92deg,var(--accent),#c2b6ff 35%,var(--accent-3) 70%,var(--accent-4));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-text,.section-head p,.showcase-copy p,.timeline p,.price-card p,.faq-list p,.contact-shell p{font-size:1.06rem;line-height:1.8;color:var(--muted)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0}
.hero-points{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.point{padding:18px;border-radius:22px;min-height:158px;display:flex;flex-direction:column;justify-content:flex-start}
.point strong{display:block;font-size:1rem;margin-bottom:8px}
.point span{color:#c1c9e3;font-size:.94rem;line-height:1.55}
.glass{background:linear-gradient(180deg, rgba(14,19,41,.8), rgba(9,13,31,.72));border:1px solid var(--stroke);box-shadow:var(--shadow);backdrop-filter:blur(18px)}
.hero-stage{position:relative;height:760px}
.scene-wrap{position:absolute;inset:0;perspective:1600px}
.scene-grid{position:absolute;inset:6% 6% 8%;border-radius:40px;background:
  linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
  linear-gradient(180deg, rgba(111,247,255,.06), rgba(123,97,255,.02));
  background-size:34px 34px,34px 34px,100% 100%;
  transform:rotateX(70deg) translateY(12%);
  transform-origin:center bottom;
  opacity:.6;
  mask-image:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.8) 30%, #000 100%);
}
.hero-orbit{position:absolute;border:1px solid rgba(255,255,255,.09);border-radius:50%;filter:drop-shadow(0 0 24px rgba(111,247,255,.12));animation:spinSlow 18s linear infinite}
.orbit-a{width:560px;height:560px;right:4%;top:8%}
.orbit-b{width:380px;height:380px;left:10%;bottom:14%;animation-direction:reverse;animation-duration:24s}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.main-browser,.floating-window{position:absolute;border-radius:28px;overflow:hidden;background:linear-gradient(180deg, rgba(16,23,52,.95), rgba(8,12,28,.92));border:1px solid rgba(255,255,255,.1);box-shadow:0 40px 90px rgba(0,0,0,.45), 0 0 60px rgba(111,247,255,.08)}
.main-browser{width:74%;height:470px;left:12%;top:14%;transform:rotateX(7deg) rotateY(-8deg);animation:heroFloat 8.8s ease-in-out infinite}
.floating-window{animation:windowDrift 7s ease-in-out infinite}
.window-left{width:39%;height:210px;left:0;top:16%;transform:rotate(-10deg);animation-delay:-1.2s}
.window-right{width:32%;height:230px;right:1%;top:28%;transform:rotate(9deg);animation-delay:-2.8s}
.window-bottom{width:36%;height:180px;right:10%;bottom:10%;transform:rotate(-7deg);animation-delay:-4.2s}
@keyframes heroFloat{50%{transform:rotateX(8deg) rotateY(-8deg) translateY(-12px)}}
@keyframes windowDrift{50%{transform:translateY(-12px) rotate(var(--r,0deg)) scale(1.01)}}
.window-left{--r:-10deg}.window-right{--r:9deg}.window-bottom{--r:-7deg}
.browser-top{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015))}
.browser-top span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.34)}
.browser-top span:nth-child(2){background:rgba(111,247,255,.7)}
.browser-top span:nth-child(3){background:rgba(255,98,192,.7)}
.browser-url{margin-left:10px;flex:1;height:36px;border-radius:999px;background:rgba(255,255,255,.05);display:flex;align-items:center;padding:0 16px;color:#cfd7f3;font-size:.9rem}
.browser-screen,.window-body{height:calc(100% - 60px);position:relative;padding:18px}
.hero-preview-layer{position:absolute;border-radius:22px;inset:auto;box-shadow:0 20px 60px rgba(0,0,0,.26)}
.preview-layer-back{left:8%;top:18%;width:56%;height:58%;background:linear-gradient(160deg, rgba(111,247,255,.12), rgba(123,97,255,.1));border:1px solid rgba(255,255,255,.08);animation:layerFloat 8s ease-in-out infinite}
.preview-layer-mid{right:7%;top:14%;width:40%;height:34%;background:linear-gradient(160deg, rgba(255,98,192,.14), rgba(123,97,255,.1));border:1px solid rgba(255,255,255,.08);animation:layerFloat 7s ease-in-out infinite reverse}
.preview-layer-front{inset:18px;background:linear-gradient(180deg, rgba(8,13,29,.92), rgba(10,14,36,.88));border:1px solid rgba(255,255,255,.07)}
@keyframes layerFloat{50%{transform:translateY(-12px)}}
.mini-header{height:42px;border-radius:14px;background:linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.03));margin-bottom:16px}
.mini-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;align-items:center}
.mini-copy i,.mini-copy small,.mini-metrics span,.mini-panels div,.cards-body b,.site-stack span,.editorial-panels span{display:block;border-radius:16px;background:linear-gradient(90deg, rgba(255,255,255,.08), rgba(111,247,255,.16), rgba(255,255,255,.05));background-size:220% 100%;animation:shimmer 3.8s linear infinite}
@keyframes shimmer{to{background-position:220% 0}}
.mini-copy i{height:18px;margin:0 0 12px}
.mini-copy i:nth-child(1){width:84%}.mini-copy i:nth-child(2){width:66%}.mini-copy i:nth-child(3){width:92%}
.mini-copy small{width:52%;height:52px;margin-top:18px;background:linear-gradient(135deg, rgba(111,247,255,.28), rgba(123,97,255,.25), rgba(255,98,192,.22))}
.mini-device{height:230px;border-radius:26px;background:radial-gradient(circle at 50% 20%, rgba(111,247,255,.36), transparent 40%), linear-gradient(180deg, rgba(18,30,60,.9), rgba(9,14,28,.92));position:relative;border:1px solid rgba(255,255,255,.07);overflow:hidden}
.mini-device::before,.mini-device::after{content:"";position:absolute;border-radius:24px}
.mini-device::before{inset:18px;background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02))}
.mini-device::after{left:24px;right:24px;bottom:22px;height:84px;background:linear-gradient(90deg, rgba(255,98,192,.22), rgba(123,97,255,.22), rgba(111,247,255,.22))}
.device-glow{position:absolute;inset:0;background:radial-gradient(circle at 40% 30%, rgba(111,247,255,.22), transparent 26%), radial-gradient(circle at 70% 70%, rgba(255,98,192,.18), transparent 30%);animation:pulseGlow 5s ease-in-out infinite}
@keyframes pulseGlow{50%{opacity:.58}}
.mini-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}
.mini-metrics span{height:64px}
.mini-panels{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mini-panels div{height:110px}
.code-body i{display:block;height:12px;border-radius:999px;margin-bottom:16px;background:linear-gradient(90deg, rgba(111,247,255,.22), rgba(123,97,255,.2), rgba(255,255,255,.06));animation:shimmer 3s linear infinite}
.analytics-body{display:flex;align-items:center;justify-content:space-between;gap:18px}
.ring{width:96px;height:96px;border-radius:50%;border:10px solid rgba(255,255,255,.06);border-top-color:var(--accent);border-right-color:var(--accent-3);animation:spinSlow 5s linear infinite}
.bars{display:flex;align-items:flex-end;gap:10px;height:96px;flex:1}
.bars i{display:block;flex:1;border-radius:999px;background:linear-gradient(180deg, var(--accent), var(--accent-2));animation:barBounce 1.8s ease-in-out infinite}
.bars i:nth-child(1){height:38%}.bars i:nth-child(2){height:78%;animation-delay:-.2s}.bars i:nth-child(3){height:54%;animation-delay:-.4s}.bars i:nth-child(4){height:90%;animation-delay:-.6s}
@keyframes barBounce{50%{transform:scaleY(1.08)}}
.cards-body{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cards-body b{height:54px}
.floating-chip{position:absolute;padding:12px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(7,11,27,.74);backdrop-filter:blur(16px);font-size:.88rem;color:#dfe7ff;box-shadow:0 18px 50px rgba(0,0,0,.24);animation:tagFloat 7s ease-in-out infinite}
.chip-a{right:2%;top:9%}.chip-b{left:4%;bottom:22%;animation-delay:-2s}.chip-c{right:18%;bottom:2%;animation-delay:-4s}
@keyframes tagFloat{50%{transform:translateY(-9px)}}


.footer-brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:-.04em}
.text-only-brand span{font-size:1.15rem;text-transform:lowercase}
.footer-brand img{height:42px}

.premium-scene{isolation:isolate}
.premium-scene::before{content:"";position:absolute;inset:8% 6% 10%;border-radius:42px;background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.08), rgba(255,255,255,0) 42%),linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.stage-halo,.aurora-ribbon,.glass-panel,.mesh-lines{position:absolute}
.stage-halo{border-radius:50%;filter:blur(70px);opacity:.62;mix-blend-mode:screen}
.halo-a{width:340px;height:340px;left:12%;top:15%;background:rgba(245,211,138,.14);animation:floatBlob 14s ease-in-out infinite}
.halo-b{width:400px;height:400px;right:8%;bottom:12%;background:rgba(255,98,192,.16);animation:floatBlob 17s ease-in-out infinite reverse}
.mesh-lines{inset:16% 10%;border-radius:34px;opacity:.32;background:linear-gradient(120deg, rgba(255,255,255,.08) 0 1px, transparent 1px) 0 0/140px 140px,linear-gradient(24deg, rgba(255,255,255,.05) 0 1px, transparent 1px) 0 0/170px 170px;mask-image:linear-gradient(180deg, transparent, rgba(0,0,0,.95) 18%, rgba(0,0,0,.95) 82%, transparent)}
.aurora-ribbon{left:8%;right:8%;height:84px;border-radius:999px;filter:blur(.2px);opacity:.9;box-shadow:0 18px 70px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.2)}
.aurora-ribbon::before{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(255,255,255,.18);background:linear-gradient(90deg, rgba(111,247,255,.10), rgba(255,255,255,.04), rgba(255,98,192,.10));backdrop-filter:blur(12px)}
.aurora-ribbon::after{content:"";position:absolute;inset:10px 18px;border-radius:inherit;background:linear-gradient(92deg, rgba(111,247,255,.58), rgba(201,180,255,.40) 32%, rgba(255,154,112,.44) 66%, rgba(255,98,192,.45));filter:blur(18px);opacity:.78}
.ribbon-1{top:22%;transform:rotate(-12deg);animation:ribbonDriftA 12s ease-in-out infinite}
.ribbon-2{top:44%;left:16%;right:2%;height:92px;transform:rotate(10deg);animation:ribbonDriftB 14s ease-in-out infinite}
.ribbon-3{bottom:18%;left:4%;right:18%;height:76px;transform:rotate(-6deg);animation:ribbonDriftC 13s ease-in-out infinite}
.glass-panel{border-radius:28px;background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(18px);box-shadow:0 35px 80px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12)}
.glass-panel::before{content:"";position:absolute;inset:16px;border-radius:20px;border:1px solid rgba(255,255,255,.10);background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015))}
.glass-panel::after{content:"";position:absolute;left:24px;right:24px;top:26px;height:1px;background:linear-gradient(90deg, rgba(111,247,255,.0), rgba(111,247,255,.46), rgba(255,98,192,.0));box-shadow:0 56px 0 rgba(255,255,255,.06), 0 112px 0 rgba(255,255,255,.05)}
.panel-a{width:260px;height:170px;left:8%;bottom:13%;transform:rotate(-10deg);animation:panelFloat 12s ease-in-out infinite}
.panel-b{width:210px;height:140px;right:11%;top:18%;transform:rotate(12deg);animation:panelFloat 10s ease-in-out infinite reverse}
.panel-c{width:180px;height:120px;right:18%;bottom:10%;transform:rotate(-8deg);animation:panelFloat 11.5s ease-in-out infinite}
@keyframes ribbonDriftA{50%{transform:translateY(-12px) rotate(-9deg) translateX(8px)}}
@keyframes ribbonDriftB{50%{transform:translateY(10px) rotate(8deg) translateX(-10px)}}
@keyframes ribbonDriftC{50%{transform:translateY(-8px) rotate(-4deg) translateX(8px)}}
@keyframes panelFloat{50%{transform:translateY(-10px) rotate(var(--panel-rot,0deg))}}
.panel-a{--panel-rot:-10deg}.panel-b{--panel-rot:12deg}.panel-c{--panel-rot:-8deg}


.dashboard-card{position:absolute;border-radius:28px;border:1px solid rgba(255,255,255,.10);background:linear-gradient(180deg, rgba(11,16,38,.88), rgba(9,13,31,.78));box-shadow:0 30px 80px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(18px)}
.dashboard-card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 20% 20%, rgba(255,255,255,.08), transparent 30%), linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));pointer-events:none}
.dashboard-main{left:18%;top:26%;width:52%;height:300px;transform:rotate(-8deg);animation:dashFloat 11s ease-in-out infinite}
.dash-top{display:flex;align-items:center;gap:8px;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.08);font-size:.78rem;color:#d9e4ff;position:relative;z-index:1}
.dash-top span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.3)}
.dash-top span:nth-child(2){background:rgba(111,247,255,.78)}
.dash-top span:nth-child(3){background:rgba(255,98,192,.78)}
.dash-top b{font-weight:700;opacity:.92;margin-left:6px}
.dash-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;padding:20px;position:relative;z-index:1}
.dash-copy i,.dash-copy small,.dash-copy em,.widget-lines span,.widget-bars span{display:block;border-radius:16px;background:linear-gradient(90deg, rgba(255,255,255,.08), rgba(245,211,138,.14), rgba(255,255,255,.05));background-size:220% 100%;animation:shimmer 3.8s linear infinite}
.dash-copy i{height:18px;margin-bottom:10px}.dash-copy i:nth-child(2){width:82%}.dash-copy i:nth-child(3){width:68%}
.dash-copy small{height:86px;margin:16px 0 12px}.dash-copy small:nth-of-type(2){height:34px;width:74%}
.dash-copy em{height:42px;width:54%;background:linear-gradient(135deg, rgba(111,247,255,.36), rgba(255,98,192,.36));box-shadow:0 14px 36px rgba(111,247,255,.16)}
.dash-chart{display:flex;align-items:flex-end;gap:12px;padding:12px 0 4px}
.dash-chart u{display:block;flex:1;border-radius:18px 18px 10px 10px;background:linear-gradient(180deg, rgba(111,247,255,.8), rgba(123,97,255,.26));box-shadow:0 10px 24px rgba(111,247,255,.12)}
.dash-chart u:nth-child(1){height:44%}.dash-chart u:nth-child(2){height:74%}.dash-chart u:nth-child(3){height:58%}.dash-chart u:nth-child(4){height:84%;background:linear-gradient(180deg, rgba(255,98,192,.85), rgba(123,97,255,.24))}
.dashboard-widget{width:170px;height:170px;display:grid;place-items:center}
.dashboard-widget-a{right:12%;top:34%;transform:rotate(10deg);animation:dashFloat 9.4s ease-in-out infinite reverse}
.dashboard-widget-b{right:20%;bottom:12%;width:200px;height:150px;transform:rotate(-9deg);animation:dashFloat 10.5s ease-in-out infinite}
.widget-donut{width:82px;height:82px;border-radius:50%;background:conic-gradient(var(--accent) 0 34%, rgba(255,255,255,.08) 34% 42%, var(--accent-3) 42% 74%, rgba(255,255,255,.08) 74% 100%);position:relative;box-shadow:0 16px 40px rgba(111,247,255,.14)}
.widget-donut::after{content:"";position:absolute;inset:18px;border-radius:50%;background:rgba(10,14,28,.92);border:1px solid rgba(255,255,255,.08)}
.widget-bars{display:flex;gap:10px;align-items:flex-end;height:56px;margin-top:8px}
.widget-bars span{width:10px}.widget-bars span:nth-child(1){height:30px}.widget-bars span:nth-child(2){height:46px}.widget-bars span:nth-child(3){height:22px}
.widget-lines{display:grid;gap:12px;width:100%;padding:24px}.widget-lines span{height:16px}.widget-lines span:nth-child(2){width:78%}.widget-lines span:nth-child(3){width:88%}.widget-lines span:nth-child(4){width:56%}
@keyframes dashFloat{50%{transform:translateY(-12px) rotate(var(--dash-rot,0deg))}}
.dashboard-main{--dash-rot:-8deg}.dashboard-widget-a{--dash-rot:10deg}.dashboard-widget-b{--dash-rot:-9deg}

.hero-bottom-bar{margin:44px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-radius:28px;overflow:hidden;background:linear-gradient(180deg, rgba(14,19,41,.78), rgba(9,13,31,.66));position:relative;width:100%;max-width:100%;z-index:2;clear:both;grid-column:1 / -1;isolation:isolate;box-shadow:0 24px 64px rgba(4,10,28,.28), inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(255,255,255,.04);animation:heroBarBreathe 7.5s ease-in-out infinite}
.hero-bottom-bar::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(111,247,255,.10), transparent 24%, transparent 76%, rgba(255,98,192,.10));pointer-events:none;opacity:.9}
.hero-bottom-bar::after{content:"";position:absolute;inset:-30% -10%;background:radial-gradient(circle at 16% 50%, rgba(245,211,138,.14), transparent 18%), radial-gradient(circle at 84% 50%, rgba(255,98,192,.16), transparent 20%), linear-gradient(110deg, transparent 28%, rgba(255,255,255,.10) 48%, transparent 68%);filter:blur(14px);mix-blend-mode:screen;opacity:.55;pointer-events:none;animation:heroBarSweep 9s linear infinite}
.hero-bottom-item{padding:22px 24px;position:relative;transition:transform .45s ease, background .45s ease}
.hero-bottom-item::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));opacity:0;transform:translateY(10px);animation:heroBarItemGlow 7.5s ease-in-out infinite}
.hero-bottom-item:nth-child(2)::before{animation-delay:1.2s}
.hero-bottom-item:nth-child(3)::before{animation-delay:2.4s}
.hero-bottom-item:nth-child(4)::before{animation-delay:3.6s}
.hero-bottom-item + .hero-bottom-item{border-left:1px solid rgba(255,255,255,.06)}
.hero-bottom-item strong{display:block;font-size:.96rem;letter-spacing:.02em;margin-bottom:8px;color:#f6f7ff;position:relative;z-index:1}
.hero-bottom-item span{display:block;color:#b7c2e3;line-height:1.55;font-size:.92rem;position:relative;z-index:1}
.hero-bottom-item:last-child strong{background:linear-gradient(92deg,var(--accent),#c2b6ff 35%,var(--accent-3) 70%,var(--accent-4));-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes heroBarSweep{0%{transform:translateX(-18%) translateY(0)}50%{transform:translateX(10%) translateY(-2%)}100%{transform:translateX(28%) translateY(0)}}
@keyframes heroBarBreathe{0%,100%{transform:translateY(0);box-shadow:0 24px 64px rgba(4,10,28,.28), inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(255,255,255,.04)}50%{transform:translateY(-3px);box-shadow:0 30px 78px rgba(4,10,28,.34), inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 1px rgba(255,255,255,.05), 0 0 34px rgba(111,247,255,.12)}}
@keyframes heroBarItemGlow{0%,18%,100%{opacity:0;transform:translateY(10px)}8%,12%{opacity:1;transform:translateY(0)}}

.section{padding:120px 0;position:relative;z-index:2}
.section-alt{background:linear-gradient(180deg, rgba(255,255,255,.016), rgba(255,255,255,.008))}
.trust-strip{padding-top:32px;padding-bottom:10px}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:22px 24px;border-radius:28px}
.trust-grid div{padding:12px 10px}
.trust-grid strong{display:block;font-size:1.02rem;margin-bottom:8px}
.trust-grid span{color:#c1cae6;line-height:1.65}
.section-head{max-width:760px;margin-bottom:32px}
.section-head h2,.contact-shell h2{font-size:clamp(2.2rem,4vw,4.3rem);line-height:1.02;letter-spacing:-.05em;margin:16px 0 18px}
.services-grid,.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.service-card,.price-card{padding:28px;border-radius:28px;min-height:100%}
.service-number{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;font-weight:800;margin-bottom:22px;background:linear-gradient(135deg, rgba(245,211,138,.24), rgba(202,163,95,.18), rgba(255,241,207,.12));border:1px solid rgba(255,255,255,.1)}
.service-card h3,.showcase-copy h3,.price-card h3,.timeline-step h3{font-size:1.24rem;margin:0 0 12px}
.service-card p{color:var(--muted);line-height:1.7}
.showcase-stack{display:grid;gap:20px}
.showcase-card{display:grid;grid-template-columns:1.02fr .98fr;gap:24px;padding:26px;border-radius:34px;align-items:center}
.showcase-card.reverse{grid-template-columns:.98fr 1.02fr}
.showcase-copy ul,.price-card ul{padding-left:18px;color:#dce3ff;line-height:1.8}
.showcase-visual{min-height:320px;border-radius:28px;background:linear-gradient(180deg, rgba(8,14,31,.9), rgba(14,20,46,.9));border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden}
.visual-one::before,.visual-two::before{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at 20% 30%, rgba(245,211,138,.14), transparent 18%), radial-gradient(circle at 76% 30%, rgba(212,169,95,.16), transparent 20%), radial-gradient(circle at 50% 76%, rgba(255,98,192,.16), transparent 22%);filter:blur(16px)}
.site-stack,.editorial-panels{position:absolute;inset:24px;display:grid;gap:16px}
.site-stack span{height:84px}.site-stack span:nth-child(1){margin-top:20px}.site-stack span:nth-child(2){height:150px}.site-stack span:nth-child(3){height:96px}
.editorial-panels{grid-template-columns:1fr 1fr;grid-template-rows:120px 150px}
.editorial-panels span:nth-child(1){grid-column:1/3}.editorial-panels span:nth-child(4){grid-column:2/3;height:100%}
.process-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:28px;align-items:start}
.timeline{padding:26px;border-radius:32px;display:grid;gap:16px}
.timeline-step{display:grid;grid-template-columns:72px 1fr;gap:18px;align-items:start;padding:18px;border-radius:24px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05)}
.timeline-step b{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:1.1rem;background:linear-gradient(135deg, rgba(245,211,138,.14), rgba(255,98,192,.18));border:1px solid rgba(255,255,255,.08)}
.price-card .price{font-size:2.1rem;font-weight:900;letter-spacing:-.05em;margin-bottom:12px}
.price-card.featured{background:linear-gradient(180deg, rgba(226,247,255,.96), rgba(199,186,255,.96), rgba(255,226,242,.95));color:#09101f;box-shadow:0 40px 90px rgba(123,97,255,.20)}
.price-card.featured p,.price-card.featured ul{color:#13213d}
.faq-contact{padding-top:88px}
.dual-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;align-items:start}
.faq-list{display:grid;gap:14px}
.faq-list details{padding:22px 24px;border-radius:24px}
.faq-list summary{list-style:none;cursor:pointer;font-weight:700;font-size:1.02rem}
.faq-list summary::-webkit-details-marker{display:none}
.contact-shell{padding:30px;border-radius:34px}
.contact-form{margin-top:22px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:block;color:#dde4ff;font-size:.94rem;margin-bottom:14px}
input,select,textarea{width:100%;margin-top:10px;padding:16px 18px;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.045);color:#fff;font:inherit;outline:none;transition:border-color .25s ease, transform .25s ease, background .25s ease, box-shadow .25s ease}
input:focus,select:focus,textarea:focus{border-color:rgba(111,247,255,.72);background:rgba(255,255,255,.075);transform:translateY(-1px);box-shadow:0 0 0 4px rgba(111,247,255,.08)}
.form-status{min-height:26px;margin-top:14px;color:#9ff5d0}
.site-footer{padding:34px 0 54px;border-top:1px solid rgba(255,255,255,.06);position:relative;z-index:2}
.footer-wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:24px 26px;border-radius:28px}
.footer-wrap p{margin:12px 0 0;color:#aeb8d7;max-width:720px;line-height:1.7}
.footer-legal{display:flex;flex-direction:column;align-items:flex-end;gap:8px;color:#d9e1fb;font-size:.95rem;white-space:nowrap}
.footer-legal span:last-child{color:#9fb0d7;font-size:.88rem}
.reveal,.reveal-delay-1,.reveal-delay-2,.reveal-delay-3{opacity:0;transform:translateY(34px) scale(.985);transition:opacity .95s ease, transform .95s cubic-bezier(.2,.8,.2,1)}
.reveal-delay-1{transition-delay:.12s}.reveal-delay-2{transition-delay:.24s}.reveal-delay-3{transition-delay:.36s}
.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.cursor-glow{display:none}.animated-pill::before{display:none}}
@media (max-width:1100px){
  .hero-grid,.process-grid,.dual-grid,.showcase-card,.showcase-card.reverse{grid-template-columns:1fr}
  .hero-stage{height:650px}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .pricing-grid{grid-template-columns:1fr}
}
@media (max-width:820px){
  .nav{display:none}
  .mobile-toggle{display:block;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);color:#fff;font-size:1.45rem;border-radius:16px;padding:10px 14px}
  .mobile-menu{display:none;flex-direction:column;gap:14px;padding:18px 16px 18px;border-top:1px solid rgba(255,255,255,.08)}
  .mobile-menu.open{display:flex}
  .hero-grid{min-height:auto}
  .hero-stage{height:560px}
  .main-browser{width:88%;left:6%;top:16%;height:380px}
  .window-left{width:46%;height:180px}.window-right{width:40%;height:190px}.window-bottom{width:44%;height:150px}
  .hero-points,.trust-grid,.form-row{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr}
  .floating-chip,.dashboard-card{display:none}
}
@media (max-width:560px){
  .section{padding:88px 0}
  .hero{padding-top:36px}
  .hero-copy h1{font-size:2.85rem}
  .section-head h2,.contact-shell h2{font-size:2.2rem}
  .main-browser{height:300px}
  .window-left{height:140px}.window-right{height:150px}.window-bottom{height:120px}
  .browser-url{font-size:.74rem}
  .service-card,.price-card,.showcase-card,.timeline,.contact-shell{padding:22px}
  .hero-bottom-bar,.trust-grid,.services-grid,.pricing-grid{grid-template-columns:1fr}
  .hero-bottom-item + .hero-bottom-item{border-left:0;border-top:1px solid rgba(255,255,255,.06)}
  .footer-wrap{flex-direction:column;align-items:flex-start;padding:22px}
  .footer-legal{align-items:flex-start;white-space:normal}
}

@media (max-width:820px){
  .brand{gap:10px;font-size:1.15rem}
  .hero-stage{height:420px}
  .premium-scene::before{inset:10% 4% 8%}
  .mesh-lines{inset:18% 8%}
  .panel-a{width:180px;height:120px;left:2%;bottom:16%}
  .panel-b{width:150px;height:102px;right:4%;top:20%}
  .panel-c{display:none}
  .ribbon-1{top:26%}.ribbon-2{top:46%}.ribbon-3{bottom:22%}
}
@media (max-width:560px){
  canvas#webCanvas{opacity:.58}
  .site-header{background:linear-gradient(180deg, rgba(15,28,54,.92), rgba(15,28,54,.78))}
  .hero-stage{height:300px;margin-top:8px}
  .scene-grid{inset:10% 2% 12%;opacity:.26}
  .stage-halo{filter:blur(42px);opacity:.45}
  .mesh-lines{opacity:.18}
  .aurora-ribbon{left:4%;right:4%;height:60px}
  .ribbon-2{left:10%;right:2%;height:68px}
  .ribbon-3{left:2%;right:14%;height:56px}
  .glass-panel,.dashboard-card{display:none}
}

@media (hover:none),(pointer:coarse){.cursor-glow{display:none}}


body.mobile-safe-bg canvas#webCanvas,
body.mobile-safe-bg .cursor-glow,
body.mobile-safe-bg .ambient{display:none !important}
body:not(.canvas-disabled) canvas#webCanvas{display:block}
body.mobile-safe-bg{background:
  radial-gradient(circle at 16% 18%, rgba(120,97,255,.10), transparent 24%),
  radial-gradient(circle at 78% 10%, rgba(111,247,255,.08), transparent 22%),
  radial-gradient(circle at 72% 76%, rgba(255,160,110,.06), transparent 22%),
  linear-gradient(180deg, #070809 0%, #0d1014 44%, #0a0b0d 100%)}


:root{--brand-font:"Space Grotesk", "Inter", sans-serif}
.brand span,.footer-brand span,.hero h1 span,.section-head h2 span{font-family:var(--brand-font)}
.brand span{font-size:clamp(1.24rem,2vw,1.7rem);font-weight:700;letter-spacing:-.06em;text-transform:none;background:linear-gradient(92deg,#f6f7ff 0%,#c6fbff 36%,#ffd0e7 76%,#f6f7ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 28px rgba(111,247,255,.08)}
.hero h1{max-width:13ch}
.hero h1 span{display:block;margin-top:.15em;color:#dff8ff;background:none;-webkit-text-fill-color:initial;font-weight:700}
.hero-text{max-width:62ch}
.site-header{background:linear-gradient(180deg, rgba(15,28,54,.88), rgba(15,28,54,.68) 70%, rgba(15,28,54,.12));backdrop-filter:blur(12px)}
.scene-shine,.scene-noise{position:absolute;inset:8% 6% 10%;border-radius:42px;pointer-events:none}
.scene-shine{background:linear-gradient(118deg, rgba(255,255,255,.14), rgba(255,255,255,0) 22%, rgba(255,255,255,0) 58%, rgba(255,255,255,.08) 76%, rgba(255,255,255,0) 100%);mix-blend-mode:screen;opacity:.55;transform:translate3d(0,0,0)}
.scene-noise{opacity:.05;background-image:radial-gradient(rgba(255,255,255,.8) .6px, transparent .7px);background-size:18px 18px;mask-image:linear-gradient(180deg, transparent, rgba(0,0,0,.6) 18%, rgba(0,0,0,.9) 82%, transparent)}
.dashboard-main{left:16%;top:25%;width:54%;height:316px}
.dashboard-widget-a{right:10%;top:31%}
.dashboard-widget-b{right:16%;bottom:11%;width:216px;height:158px}
.hero-bottom-bar{box-shadow:0 24px 80px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.08)}
.service-card:hover,.showcase-card:hover,.price-card:hover{border-color:rgba(111,247,255,.22);box-shadow:0 24px 80px rgba(0,0,0,.26), 0 0 0 1px rgba(255,255,255,.03) inset}
.site-footer{padding:22px 0 54px}
.footer-wrap{display:grid;grid-template-columns:1.3fr .9fr .8fr;gap:32px;align-items:start;padding:28px 30px;border-radius:30px;background:linear-gradient(180deg, rgba(12,17,38,.82), rgba(9,13,29,.74))}
.footer-col{display:grid;gap:12px}
.footer-main p{max-width:48ch;margin:0;color:#b8c5e2;line-height:1.7}
.footer-links strong,.footer-legal strong{color:#f7f8ff;font-size:.98rem}
.footer-links a,.footer-legal span{color:#b8c5e2;text-decoration:none;line-height:1.8}
.footer-links a:hover{color:#f7f8ff}
.footer-legal{justify-items:start}
.footer-brand span{font-size:clamp(1.25rem,2vw,1.7rem);letter-spacing:-.06em;text-transform:none;background:linear-gradient(92deg,#f8fbff 0%,#c6fbff 40%,#ffc6e2 82%);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width: 980px){.footer-wrap{grid-template-columns:1fr}.footer-col{gap:8px}}
@media (max-width: 820px){.scene-shine,.scene-noise{display:none}.footer-wrap{padding:22px}.brand span,.footer-brand span{font-size:1.25rem}}
body.chrome-mobile canvas#webCanvas{display:none !important}
body.chrome-mobile .ambient{opacity:.9}


/* Definitive mobile hero wave fix */
body.mobile-safe-bg .hero{
  isolation:isolate;
}
body.mobile-safe-bg .hero::before,
body.mobile-safe-bg .hero::after{
  content:"";
  position:absolute;
  left:-12%;
  right:-12%;
  pointer-events:none;
  z-index:0;
  border-radius:999px;
  opacity:.95;
  will-change:transform, opacity;
}
body.mobile-safe-bg .hero::before{
  top:140px;
  height:220px;
  background:
    radial-gradient(ellipse at 18% 50%, rgba(111,247,255,.30), rgba(111,247,255,.10) 28%, transparent 60%),
    radial-gradient(ellipse at 78% 52%, rgba(255,98,192,.22), rgba(123,97,255,.10) 30%, transparent 62%),
    linear-gradient(90deg, rgba(245,211,138,.14), rgba(123,97,255,.14) 46%, rgba(255,98,192,.18));
  filter: blur(44px);
  animation: mobileHeroWaveA 12s ease-in-out infinite alternate;
}
body.mobile-safe-bg .hero::after{
  top:420px;
  height:170px;
  background:
    radial-gradient(ellipse at 20% 48%, rgba(245,211,138,.14), transparent 58%),
    radial-gradient(ellipse at 76% 50%, rgba(255,98,192,.18), transparent 58%),
    linear-gradient(90deg, rgba(111,247,255,.12), rgba(123,97,255,.12), rgba(245,211,138,.10));
  filter: blur(52px);
  animation: mobileHeroWaveB 14s ease-in-out infinite alternate;
}
body.mobile-safe-bg .hero .container,
body.mobile-safe-bg .hero-copy,
body.mobile-safe-bg .hero-bottom-bar{
  position:relative;
  z-index:1;
}
body.mobile-safe-bg .hero-copy::before,
body.mobile-safe-bg .hero-copy::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:-1;
  border-radius:50%;
  filter:blur(42px);
}
body.mobile-safe-bg .hero-copy::before{
  width:160px;
  height:160px;
  top:120px;
  left:-28px;
  background:radial-gradient(circle, rgba(111,247,255,.22), transparent 70%);
  animation: mobileGlowDrift 9s ease-in-out infinite alternate;
}
body.mobile-safe-bg .hero-copy::after{
  width:180px;
  height:180px;
  top:210px;
  right:-22px;
  background:radial-gradient(circle, rgba(255,98,192,.18), transparent 72%);
  animation: mobileGlowDrift 11s ease-in-out infinite alternate-reverse;
}
@keyframes mobileHeroWaveA{
  0%{transform:translate3d(-4%, 0, 0) scaleX(1) scaleY(.94)}
  50%{transform:translate3d(4%, -12px, 0) scaleX(1.06) scaleY(1.04)}
  100%{transform:translate3d(-2%, 14px, 0) scaleX(.98) scaleY(.96)}
}
@keyframes mobileHeroWaveB{
  0%{transform:translate3d(6%, 0, 0) scaleX(1.02) scaleY(1)}
  50%{transform:translate3d(-5%, -10px, 0) scaleX(.96) scaleY(1.08)}
  100%{transform:translate3d(2%, 12px, 0) scaleX(1.04) scaleY(.98)}
}
@keyframes mobileGlowDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(0,-16px,0) scale(1.08)}
}

@media (max-width: 820px){
  body.mobile-safe-bg .hero-copy h1,
  body.mobile-safe-bg .hero-copy h1 span{
    color:#f6f7ff !important;
    -webkit-text-fill-color:#f6f7ff !important;
    text-shadow:0 6px 28px rgba(4,8,20,.26);
  }
  body.mobile-safe-bg .hero-copy h1 span{
    background:none !important;
  }
  body.mobile-safe-bg .hero-text{
    color:#d9e4ff !important;
  }
  body.mobile-safe-bg .eyebrow,
  body.mobile-safe-bg .point span,
  body.mobile-safe-bg .hero-bottom-item span{
    color:#dce5ff;
  }
}

@media (max-width: 560px){
  body.mobile-safe-bg .hero::before{top:132px;height:210px;left:-18%;right:-18%}
  body.mobile-safe-bg .hero::after{top:456px;height:162px;left:-18%;right:-18%}
  body.mobile-safe-bg .hero-copy::before{top:146px;left:-40px}
  body.mobile-safe-bg .hero-copy::after{top:290px;right:-44px}
}
.menu-admin-link{font-size:.88rem;opacity:.8;border:1px solid rgba(255,255,255,.08);padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.03)}
.custom-section-card.style-accent{background:linear-gradient(135deg, rgba(111,247,255,.12), rgba(123,97,255,.12));border:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow);backdrop-filter:blur(14px)}
.custom-section-card.style-minimal{background:transparent;border:1px dashed rgba(255,255,255,.16)}

@media (max-width:820px){.brand-logo-image{height:68px}.brand img{height:68px}}
@media (max-width:560px){.brand-logo-image{height:62px}.brand img{height:62px}.mobile-menu a{padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}}


/* V3.3 header polish */
.site-header{background:linear-gradient(180deg, rgba(24,42,78,.88), rgba(20,36,67,.72));border-bottom:1px solid rgba(255,255,255,.10)}
.brand img,.brand-logo-image{height:88px !important;width:auto;object-fit:contain}
.footer-logo-image{height:54px !important}
.mobile-menu{background:linear-gradient(180deg, rgba(35,56,96,.94), rgba(29,48,84,.92));border-top:1px solid rgba(255,255,255,.12)}
.mobile-menu a{background:rgba(255,255,255,.08) !important;border:1px solid rgba(255,255,255,.10) !important}
@media (max-width:820px){.brand img,.brand-logo-image{height:82px !important}}
@media (max-width:560px){.brand img,.brand-logo-image{height:74px !important}.site-header{background:linear-gradient(180deg, rgba(28,47,85,.94), rgba(22,40,73,.88))}}


/* Real project preview stack */
.project-preview-stack{position:absolute;inset:0;pointer-events:none}
.project-preview-card{position:absolute;pointer-events:none;overflow:hidden;border-radius:30px;background:linear-gradient(180deg, rgba(8,14,31,.96), rgba(11,18,38,.92));border:1px solid rgba(255,255,255,.10);box-shadow:0 34px 90px rgba(0,0,0,.34),0 0 0 1px rgba(255,255,255,.04) inset}
.project-preview-card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg, rgba(255,255,255,.06), transparent 28%, transparent 72%, rgba(111,247,255,.08));pointer-events:none}
.project-preview-card-a{left:9%;top:16%;width:58%;height:62%;transform:rotate(-8deg);animation:dashFloat 11s ease-in-out infinite}
.project-preview-card-b{right:8%;bottom:10%;width:42%;height:46%;transform:rotate(9deg);animation:dashFloat 10s ease-in-out infinite reverse}
.project-browser-bar{position:absolute;left:16px;right:16px;top:14px;height:42px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:8px;padding:0 12px;z-index:3}
.project-browser-bar span{width:9px;height:9px;border-radius:999px;background:rgba(255,255,255,.28)}
.project-browser-bar b{font-size:12px;letter-spacing:.04em;color:#dce7ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:6px}
.project-preview-device{position:absolute;left:16px;right:16px;top:66px;bottom:68px;border-radius:22px;overflow:hidden;background:linear-gradient(180deg, rgba(8,13,29,.98), rgba(10,15,34,.94));border:1px solid rgba(255,255,255,.08)}
.project-preview-device iframe{width:1440px;height:980px;border:0;transform:scale(.42);transform-origin:top left;pointer-events:none;filter:saturate(1.02) contrast(1.02)}
.project-preview-card-b .project-preview-device iframe{width:1280px;height:900px;transform:scale(.30)}
.project-preview-fallback{position:absolute;inset:auto 18px 18px 18px;padding:14px 16px;border-radius:18px;background:linear-gradient(180deg, rgba(8,15,33,.88), rgba(11,18,40,.88));border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px);display:grid;gap:4px;box-shadow:0 14px 40px rgba(0,0,0,.28)}
.project-preview-fallback strong{font-size:15px;color:#fff}
.project-preview-fallback small{font-size:12px;color:#b8c5e2}
.project-preview-meta{position:absolute;left:16px;right:16px;bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 4px;z-index:3}
.project-preview-meta strong{font-size:14px;color:#f4f7ff}
.project-preview-meta span{font-size:12px;color:#b9c6e3;text-align:right}

@media (max-width: 980px){
  .project-preview-card-a{left:6%;top:18%;width:72%;height:48%;transform:rotate(-7deg)}
  .project-preview-card-b{right:5%;bottom:12%;width:52%;height:36%;transform:rotate(7deg)}
  .project-preview-device iframe{transform:scale(.22);width:1440px;height:980px}
  .project-preview-card-b .project-preview-device iframe{transform:scale(.18);width:1280px;height:900px}
  .project-browser-bar{height:38px}
  .project-preview-device{top:60px;bottom:60px}
}

@media (max-width: 640px){
  .project-preview-card{border-radius:24px}
  .project-preview-card-a{left:4%;top:17%;width:76%;height:44%;transform:rotate(-6deg)}
  .project-preview-card-b{right:4%;bottom:11%;width:56%;height:31%;transform:rotate(6deg)}
  .project-browser-bar{left:10px;right:10px;top:10px;height:32px;border-radius:13px;padding:0 10px}
  .project-browser-bar b{font-size:10px}
  .project-preview-device{left:10px;right:10px;top:48px;bottom:50px;border-radius:16px}
  .project-preview-device iframe{transform:scale(.16);width:1440px;height:980px}
  .project-preview-card-b .project-preview-device iframe{transform:scale(.135);width:1280px;height:900px}
  .project-preview-meta{left:10px;right:10px;bottom:10px;display:grid;gap:2px}
  .project-preview-meta strong{font-size:12px}
  .project-preview-meta span{font-size:10px;text-align:left}
  .project-preview-fallback{left:10px;right:10px;bottom:10px;padding:10px 12px;border-radius:14px}
  .project-preview-fallback strong{font-size:12px}
  .project-preview-fallback small{font-size:10px}
}

.dashboard-main,.dashboard-widget,.glass-panel.panel-a,.glass-panel.panel-b,.glass-panel.panel-c{display:none !important;}



/* Project preview cards refined */
.premium-scene{isolation:isolate}
.premium-scene::before,.premium-scene::after{content:"";position:absolute;pointer-events:none;z-index:0;border-radius:999px;filter:blur(34px);opacity:.9}
.premium-scene::before{left:4%;top:18%;width:44%;height:24%;background:radial-gradient(circle at 30% 50%, rgba(94,231,255,.24), rgba(94,231,255,.10) 38%, rgba(94,231,255,0) 72%);animation:heroPanelGlowA 10s ease-in-out infinite alternate}
.premium-scene::after{right:2%;bottom:10%;width:38%;height:22%;background:radial-gradient(circle at 50% 50%, rgba(204,116,255,.18), rgba(111,247,255,.10) 42%, rgba(111,247,255,0) 75%);animation:heroPanelGlowB 11s ease-in-out infinite alternate}
.scene-wrap .stage-halo,.scene-wrap .mesh-lines,.scene-wrap .aurora-ribbon,.scene-wrap .floating-chip,.scene-wrap .scene-grid,.scene-wrap .scene-shine,.scene-wrap .scene-noise{z-index:0}
.project-preview-stack{z-index:2}
.project-preview-stack::before{content:"";position:absolute;left:14%;right:14%;bottom:10%;height:18%;border-radius:999px;background:radial-gradient(circle at 50% 50%, rgba(13,23,52,.72), rgba(13,23,52,0) 72%);filter:blur(24px);opacity:.9;animation:stackShadowPulse 7s ease-in-out infinite}
.project-preview-card{position:absolute;overflow:hidden;pointer-events:none;border-radius:34px;backdrop-filter:blur(16px);background:linear-gradient(180deg, rgba(7,13,30,.94), rgba(8,15,33,.90));border:1px solid rgba(255,255,255,.13);box-shadow:0 44px 110px rgba(0,0,0,.44),0 18px 40px rgba(5,13,31,.28),0 0 0 1px rgba(255,255,255,.04) inset;transform-style:preserve-3d}
.project-preview-card::before{content:"";position:absolute;inset:1px;border-radius:32px;background:linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,0) 28%, rgba(111,247,255,.06) 74%, rgba(255,255,255,0));pointer-events:none;opacity:.9}
.project-preview-card::after{content:"";position:absolute;inset:-30% -40%;background:linear-gradient(115deg, transparent 36%, rgba(255,255,255,.16) 48%, transparent 58%);transform:translateX(-55%) rotate(8deg);animation:projectGlassSweep 10s ease-in-out infinite;pointer-events:none}
.project-preview-card-a{left:6%;top:10%;width:64%;height:68%;transform:rotate(-3.5deg);animation:projectCardFloatA 8.5s ease-in-out infinite}
.project-preview-card-b{right:4%;bottom:8%;width:44%;height:52%;transform:rotate(4deg);animation:projectCardFloatB 9s ease-in-out infinite}
.project-preview-card-a .project-preview-device,.project-preview-card-b .project-preview-device{box-shadow:0 18px 34px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.04) inset}
.project-browser-bar{position:absolute;left:16px;right:16px;top:14px;height:46px;border-radius:18px;background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.09);display:flex;align-items:center;gap:8px;padding:0 14px 0 14px;z-index:3;box-shadow:0 10px 22px rgba(0,0,0,.16) inset}
.project-browser-bar span{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.26)}
.project-browser-bar b{font-size:12px;font-weight:800;letter-spacing:.03em;color:#ecf3ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:8px;max-width:calc(100% - 124px)}
.project-browser-bar em{position:absolute;right:10px;top:9px;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#08111f;background:linear-gradient(135deg,var(--accent),var(--accent2));padding:6px 10px;border-radius:999px;box-shadow:0 10px 20px rgba(94,231,255,.24)}
.project-preview-device{position:absolute;left:16px;right:16px;top:68px;bottom:78px;border-radius:24px;overflow:hidden;background:linear-gradient(180deg, rgba(7,12,28,.985), rgba(9,14,33,.96));border:1px solid rgba(255,255,255,.08)}
.project-preview-screen{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg, rgba(10,16,38,.98), rgba(7,12,28,.98))}
.project-preview-screen::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 12%, rgba(94,231,255,.13), transparent 30%), radial-gradient(circle at 78% 18%, rgba(204,116,255,.12), transparent 28%);pointer-events:none;z-index:1}
.project-preview-screen::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(8,12,28,0) 0%, rgba(8,12,28,0) 64%, rgba(8,12,28,.22) 84%, rgba(8,12,28,.46) 100%), linear-gradient(135deg, rgba(94,231,255,.08), transparent 42%, rgba(122,92,255,.08));pointer-events:none;z-index:2}
.project-preview-poster{position:absolute;left:0;top:0;width:100%;height:auto;min-height:100%;display:block;object-fit:cover;object-position:top center;transform:translateY(0) scale(1.02);animation:previewScrollDrift 18s ease-in-out infinite alternate}
.project-preview-card-b .project-preview-poster{animation-duration:21s}
.project-preview-open{position:absolute;right:14px;bottom:14px;z-index:4;display:inline-flex;align-items:center;gap:8px;padding:11px 15px;border-radius:999px;background:linear-gradient(180deg, rgba(8,15,33,.86), rgba(11,20,44,.80));border:1px solid rgba(255,255,255,.13);color:#f4f7ff;font-size:12px;font-weight:800;letter-spacing:.02em;text-decoration:none;backdrop-filter:blur(12px);box-shadow:0 10px 24px rgba(0,0,0,.24)}
.project-preview-open:hover{transform:translateY(-1px);background:linear-gradient(180deg, rgba(10,18,40,.94), rgba(13,22,48,.88))}
.project-preview-fallback{display:none}
.project-preview-meta{position:absolute;left:16px;right:16px;bottom:14px;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:12px 14px;border-radius:18px;background:linear-gradient(180deg, rgba(8,14,31,.18), rgba(8,14,31,.52));border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px);z-index:3}
.project-preview-meta strong{display:block;font-size:16px;line-height:1.1;color:#f7f9ff;margin-bottom:5px}
.project-preview-meta span{font-size:12px;color:#c0cee7;text-align:right;max-width:220px}
.project-preview-card-b .project-preview-meta strong{font-size:15px}
@keyframes previewScrollDrift{0%{transform:translateY(0) scale(1.02)}100%{transform:translateY(-14%) scale(1.02)}}
@keyframes heroPanelGlowA{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(20px,-10px,0) scale(1.08)}}
@keyframes heroPanelGlowB{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-18px,12px,0) scale(1.06)}}
@keyframes projectGlassSweep{0%,24%{transform:translateX(-58%) rotate(8deg)}42%,100%{transform:translateX(62%) rotate(8deg)}}
@keyframes projectCardFloatA{0%,100%{transform:translate3d(0,0,0) rotate(-3.5deg)}50%{transform:translate3d(0,-12px,0) rotate(-1.8deg)}}
@keyframes projectCardFloatB{0%,100%{transform:translate3d(0,0,0) rotate(4deg)}50%{transform:translate3d(0,-10px,0) rotate(2.2deg)}}
@keyframes stackShadowPulse{0%,100%{transform:scale(1);opacity:.86}50%{transform:scale(1.05);opacity:1}}
@media (max-width:980px){
  .project-preview-card-a{left:3%;top:15%;width:78%;height:52%}
  .project-preview-card-b{right:2%;bottom:10%;width:58%;height:40%}
  .project-preview-meta strong{font-size:14px}
  .project-preview-meta span{font-size:11px;max-width:160px}
  .project-preview-open{padding:9px 12px;font-size:11px}
}
@media (max-width:640px){
  .premium-scene::before{left:-4%;top:22%;width:54%;height:18%}
  .premium-scene::after{right:-1%;bottom:14%;width:46%;height:16%}
  .project-preview-card{border-radius:26px}
  .project-preview-card::before{border-radius:24px}
  .project-preview-card-a{left:3%;top:18%;width:80%;height:42%;transform:rotate(-3deg)}
  .project-preview-card-b{right:3%;bottom:12%;width:60%;height:31%;transform:rotate(3.2deg)}
  .project-browser-bar{left:10px;right:10px;top:10px;height:34px;border-radius:14px;padding:0 10px}
  .project-browser-bar span{width:8px;height:8px}
  .project-browser-bar b{font-size:10px;max-width:calc(100% - 20px);margin-left:6px}
  .project-browser-bar em{display:none}
  .project-preview-device{left:10px;right:10px;top:50px;bottom:56px;border-radius:18px}
  .project-preview-meta{left:10px;right:10px;bottom:10px;padding:10px 11px;display:grid;gap:2px}
  .project-preview-meta strong{font-size:12px;margin:0}
  .project-preview-meta span{font-size:10px;text-align:left;max-width:none}
  .project-preview-open{right:10px;bottom:10px;padding:7px 10px;font-size:10px}
}

/* card redesign fix */
.project-preview-stack{z-index:2;pointer-events:none}
.project-preview-stack::before{content:"";position:absolute;left:18%;right:12%;bottom:9%;height:16%;border-radius:999px;background:radial-gradient(circle at 50% 50%, rgba(10,18,38,.78), rgba(10,18,38,0) 72%);filter:blur(26px);opacity:.95;animation:stackShadowPulse 7s ease-in-out infinite}
.project-preview-card{position:absolute;overflow:hidden;pointer-events:none;border-radius:34px;background:linear-gradient(180deg, rgba(8,12,28,.96), rgba(8,13,32,.92));border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 90px rgba(0,0,0,.44),0 0 0 1px rgba(255,255,255,.04) inset;transform-style:preserve-3d}
.project-preview-card::before{content:"";position:absolute;inset:1px;border-radius:32px;background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,0) 24%, rgba(121,95,255,.05) 72%, rgba(255,255,255,0));pointer-events:none}
.project-preview-card::after{content:"";position:absolute;inset:auto 10% -14% 10%;height:32%;border-radius:50%;background:radial-gradient(circle at 50% 50%, rgba(120,88,255,.18), rgba(111,247,255,0) 68%);filter:blur(30px);opacity:.55;pointer-events:none}
.project-preview-card-a{left:8%;top:14%;width:58%;height:60%;transform:rotate(-4deg);animation:projectCardFloatA 7.8s ease-in-out infinite}
.project-preview-card-b{right:6%;bottom:14%;width:31%;height:50%;transform:rotate(6deg);animation:projectCardFloatB 8.6s ease-in-out infinite}
.project-browser-bar{position:absolute;left:16px;right:16px;top:14px;height:40px;border-radius:999px;display:flex;align-items:center;gap:8px;padding:0 14px;background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08);z-index:4;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.project-browser-bar span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.26)}
.project-browser-bar span:nth-child(1){background:rgba(255,255,255,.32)}
.project-browser-bar span:nth-child(2){background:rgba(111,247,255,.75)}
.project-browser-bar span:nth-child(3){background:rgba(255,98,192,.75)}
.project-browser-bar b{font-size:.92rem;line-height:1;color:#eef2ff;letter-spacing:.01em}
.project-browser-bar em{margin-left:auto;font-style:normal;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#9fb0d8;opacity:.86}
.project-preview-device{position:absolute;left:16px;right:16px;top:68px;bottom:16px;border-radius:24px;overflow:hidden;background:linear-gradient(180deg, rgba(7,12,28,.99), rgba(9,14,33,.96));border:1px solid rgba(255,255,255,.07)}
.project-preview-device-browser{bottom:76px}
.project-preview-device-phone{bottom:74px;border-radius:28px}
.project-preview-screen{position:absolute;inset:0;overflow:hidden;background:#0a1022}
.project-preview-screen::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,0) 18%, rgba(8,12,28,0) 72%, rgba(8,12,28,.30) 100%);z-index:2;pointer-events:none}
.project-preview-poster{position:absolute;left:0;top:0;width:100%;height:auto;display:block;object-fit:cover;object-position:top center;transform-origin:top center}
.project-preview-poster-tom{min-height:100%;transform:scale(1.02);animation:previewScrollDriftTom 22s ease-in-out infinite alternate}
.project-preview-poster-gibon{width:100%;height:100%;object-fit:cover;object-position:top center;transform:scale(1.01);animation:previewFloatPhone 11s ease-in-out infinite}
.project-preview-meta{position:absolute;left:16px;right:16px;bottom:14px;display:grid;gap:4px;padding:12px 14px;border-radius:18px;background:linear-gradient(180deg, rgba(8,14,31,.22), rgba(8,14,31,.58));border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px);z-index:4}
.project-preview-meta strong{display:block;font-size:17px;line-height:1.08;color:#f8faff}
.project-preview-meta span{font-size:12px;color:#bfcbeb}
.project-preview-card-b .project-preview-meta strong{font-size:15px}
.project-preview-card-b .project-preview-meta span{font-size:11px}
.project-preview-open{display:none}
.floating-chip{padding:10px 15px;font-size:.82rem;letter-spacing:.04em;background:rgba(7,11,27,.78);border:1px solid rgba(255,255,255,.1);box-shadow:0 16px 42px rgba(0,0,0,.26)}
.chip-a{right:5%;top:8%}.chip-b{left:6%;bottom:14%}.chip-c{display:none}
@keyframes projectCardFloatA{50%{transform:translateY(-12px) rotate(-4deg)}}
@keyframes projectCardFloatB{50%{transform:translateY(-14px) rotate(6deg)}}
@keyframes previewScrollDriftTom{0%{transform:translateY(0) scale(1.02)}100%{transform:translateY(-46%) scale(1.02)}}
@keyframes previewFloatPhone{50%{transform:translateY(-10px) scale(1.015)}}

@media (max-width: 1100px){
  .project-preview-card-a{left:4%;top:18%;width:76%;height:48%}
  .project-preview-card-b{right:4%;bottom:14%;width:42%;height:44%}
}

@media (max-width: 780px){
  .project-preview-card{border-radius:26px}
  .project-preview-card::before{border-radius:24px}
  .project-preview-card-a{left:3%;top:18%;width:78%;height:40%;transform:rotate(-3deg)}
  .project-preview-card-b{right:3%;bottom:12%;width:50%;height:34%;transform:rotate(4deg)}
  .project-browser-bar{left:10px;right:10px;top:10px;height:34px;padding:0 10px;gap:6px}
  .project-browser-bar span{width:8px;height:8px}
  .project-browser-bar b{font-size:.7rem}
  .project-browser-bar em{font-size:.52rem;letter-spacing:.12em}
  .project-preview-device{left:10px;right:10px;top:50px;bottom:58px;border-radius:18px}
  .project-preview-device-phone{border-radius:20px}
  .project-preview-meta{left:10px;right:10px;bottom:10px;padding:9px 10px}
  .project-preview-meta strong{font-size:12px}
  .project-preview-meta span{font-size:10px}
  .chip-a{right:2%;top:10%}
  .chip-b{left:4%;bottom:9%}
}

/* === Project cards polish override === */
.project-preview-stack{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}
.project-preview-stack::before{
  content:"";
  position:absolute;
  left:12%;
  right:10%;
  bottom:8%;
  height:18%;
  border-radius:999px;
  background:radial-gradient(circle at 50% 50%, rgba(13,20,46,.82), rgba(13,20,46,0) 72%);
  filter:blur(28px);
  opacity:.95;
}
.project-preview-stack::after{
  content:"";
  position:absolute;
  inset:12% 8% 10%;
  border-radius:42px;
  background:
    radial-gradient(circle at 26% 34%, rgba(111,247,255,.10), transparent 24%),
    radial-gradient(circle at 72% 64%, rgba(255,98,192,.10), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0));
  pointer-events:none;
}
.project-preview-card{
  position:absolute;
  overflow:hidden;
  pointer-events:none;
  border-radius:34px;
  background:linear-gradient(180deg, rgba(9,14,32,.98), rgba(8,13,31,.94));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 34px 100px rgba(0,0,0,.40), 0 10px 30px rgba(5,12,30,.24), inset 0 1px 0 rgba(255,255,255,.05);
  transform-style:preserve-3d;
}
.project-preview-card::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:32px;
  background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,0) 24%, rgba(125,96,255,.05) 72%, rgba(255,255,255,0));
  pointer-events:none;
}
.project-preview-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, transparent 28%, rgba(255,255,255,.10) 42%, transparent 54%);
  transform:translateX(-120%);
  animation:projectCardShine 10.5s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:.7;
}
.project-preview-card-a{
  left:8%;
  top:12%;
  width:56%;
  height:62%;
  transform:rotate(-4deg);
  animation:projectCardFloatA 8.6s ease-in-out infinite;
}
.project-preview-card-b{
  right:5%;
  bottom:11%;
  width:33%;
  height:52%;
  transform:rotate(5deg);
  animation:projectCardFloatB 9.2s ease-in-out infinite;
}
.project-browser-bar{
  position:absolute;
  left:16px;
  right:16px;
  top:14px;
  height:42px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 14px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  z-index:4;
}
.project-browser-bar span{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,.26);
}
.project-browser-bar span:nth-child(2){background:rgba(111,247,255,.72)}
.project-browser-bar span:nth-child(3){background:rgba(255,98,192,.72)}
.project-browser-bar b{
  font-size:.88rem;
  line-height:1;
  color:#eef3ff;
  letter-spacing:.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.project-browser-bar em{
  margin-left:auto;
  font-style:normal;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#aab7d8;
  opacity:.9;
}
.project-preview-device{
  position:absolute;
  left:16px;
  right:16px;
  top:68px;
  bottom:78px;
  border-radius:26px;
  overflow:hidden;
  background:#0a1022;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
}
.project-preview-device-browser{bottom:86px;}
.project-preview-device-phone{bottom:84px;border-radius:30px;}
.project-preview-screen{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(10,16,36,.99), rgba(8,12,28,.98));
}
.project-preview-screen::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 16%, rgba(8,12,28,0) 76%, rgba(8,12,28,.26) 100%),
    radial-gradient(circle at 22% 10%, rgba(94,231,255,.10), transparent 24%),
    radial-gradient(circle at 78% 20%, rgba(204,116,255,.10), transparent 26%);
  pointer-events:none;
}
.project-preview-poster{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  display:block;
}
.project-preview-poster-tom{
  object-position:center top;
  transform:scale(1.02);
  animation:previewScrollDriftTom 24s ease-in-out infinite alternate;
}
.project-preview-poster-gibon{
  object-position:center top;
  transform:scale(1.02);
  animation:previewFloatPhone 13s ease-in-out infinite;
}
.project-preview-meta{
  position:absolute;
  left:16px;
  right:16px;
  bottom:14px;
  display:grid;
  gap:4px;
  padding:13px 14px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(8,14,31,.16), rgba(8,14,31,.56));
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(12px);
  z-index:4;
}
.project-preview-meta strong{
  display:block;
  font-size:1.02rem;
  line-height:1.04;
  color:#f8faff;
}
.project-preview-meta span{
  font-size:.82rem;
  color:#c6d0e8;
}
.project-preview-card-b .project-preview-meta strong{font-size:.95rem;}
.project-preview-card-b .project-preview-meta span{font-size:.76rem;}

@keyframes projectCardShine{
  0%,18%{transform:translateX(-120%)}
  32%,100%{transform:translateX(120%)}
}
@keyframes projectCardFloatA{
  0%,100%{transform:translate3d(0,0,0) rotate(-4deg)}
  50%{transform:translate3d(0,-13px,0) rotate(-2.3deg)}
}
@keyframes projectCardFloatB{
  0%,100%{transform:translate3d(0,0,0) rotate(5deg)}
  50%{transform:translate3d(0,-15px,0) rotate(2.8deg)}
}
@keyframes previewScrollDriftTom{
  0%{transform:translateY(0) scale(1.02)}
  100%{transform:translateY(-28%) scale(1.02)}
}
@keyframes previewFloatPhone{
  0%,100%{transform:translateY(0) scale(1.02)}
  50%{transform:translateY(-2.5%) scale(1.03)}
}

@media (max-width: 820px){
  .scene-wrap .floating-chip,
  .scene-wrap .aurora-ribbon{
    display:none !important;
  }
  .project-preview-stack::after{
    inset:16% 4% 12%;
    border-radius:28px;
    background:
      radial-gradient(circle at 26% 34%, rgba(111,247,255,.12), transparent 24%),
      radial-gradient(circle at 72% 64%, rgba(245,211,138,.10), transparent 22%);
  }
  .project-preview-card{
    border-radius:28px;
    box-shadow:0 26px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05);
  }
  .project-preview-card::before{border-radius:26px}
  .project-preview-card-a{
    left:4%;
    top:18%;
    width:78%;
    height:42%;
    transform:rotate(-3deg);
  }
  .project-preview-card-b{
    right:4%;
    bottom:12%;
    width:48%;
    height:34%;
    transform:rotate(4deg);
  }
  .project-browser-bar{
    left:10px;
    right:10px;
    top:10px;
    height:34px;
    gap:6px;
    padding:0 10px;
  }
  .project-browser-bar span{width:8px;height:8px}
  .project-browser-bar b{font-size:.72rem}
  .project-browser-bar em{display:none}
  .project-preview-device{
    left:10px;
    right:10px;
    top:50px;
    bottom:58px;
    border-radius:18px;
  }
  .project-preview-device-browser{bottom:62px}
  .project-preview-device-phone{bottom:60px;border-radius:22px}
  .project-preview-poster-tom{
    object-fit:cover;
    object-position:center top;
    animation:previewScrollDriftTomMobile 22s ease-in-out infinite alternate;
  }
  .project-preview-poster-gibon{
    object-fit:cover;
    object-position:center top;
    animation:previewFloatPhoneMobile 12s ease-in-out infinite;
  }
  .project-preview-meta{
    left:10px;
    right:10px;
    bottom:10px;
    padding:9px 10px;
    border-radius:16px;
  }
  .project-preview-meta strong{font-size:1rem}
  .project-preview-meta span{font-size:.74rem;line-height:1.25}
  .project-preview-card-b .project-preview-meta strong{font-size:.84rem}
  .project-preview-card-b .project-preview-meta span{font-size:.66rem}
}

@media (max-width: 560px){
  .project-preview-stack::before{left:10%;right:10%;bottom:10%;height:18%}
  .project-preview-card-a{
    left:4%;
    top:20%;
    width:80%;
    height:39%;
    transform:rotate(-2.5deg);
  }
  .project-preview-card-b{
    right:4%;
    bottom:11%;
    width:54%;
    height:31%;
    transform:rotate(3.8deg);
  }
  .project-preview-meta strong{font-size:.92rem}
  .project-preview-meta span{font-size:.68rem}
  .project-preview-card-b .project-preview-meta strong{font-size:.8rem}
  .project-preview-card-b .project-preview-meta span{font-size:.62rem}
}

@keyframes previewScrollDriftTomMobile{
  0%{transform:translateY(0) scale(1.04)}
  100%{transform:translateY(-18%) scale(1.04)}
}
@keyframes previewFloatPhoneMobile{
  0%,100%{transform:translateY(0) scale(1.03)}
  50%{transform:translateY(-1.5%) scale(1.04)}
}

/* === Ultra polish override: project cards only === */
.project-preview-stack{
  perspective:1800px;
  isolation:isolate;
}
.project-preview-stack::before{
  left:14%;
  right:10%;
  bottom:6%;
  height:20%;
  background:radial-gradient(circle at 50% 50%, rgba(8,15,35,.88), rgba(8,15,35,0) 74%);
  filter:blur(30px);
}
.project-preview-stack::after{
  content:"";
  position:absolute;
  inset:12% 4% 10%;
  border-radius:44px;
  background:
    radial-gradient(circle at 68% 32%, rgba(255,98,192,.22), transparent 22%),
    radial-gradient(circle at 28% 74%, rgba(245,211,138,.14), transparent 24%),
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,0) 32%, rgba(122,92,255,.08) 78%, rgba(255,255,255,0));
  opacity:.95;
  filter:blur(8px);
  pointer-events:none;
  z-index:0;
}
.project-preview-card{
  border-radius:36px;
  background:linear-gradient(180deg, rgba(6,11,27,.97), rgba(9,15,34,.92));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 46px 110px rgba(0,0,0,.48),
    0 10px 24px rgba(8,15,35,.36),
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 0 60px rgba(111,247,255,.08);
}
.project-preview-card::before{
  border-radius:34px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 54%, rgba(111,247,255,.06) 80%, rgba(255,255,255,0)),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
}
.project-preview-card::after{
  inset:-24% -38%;
  height:auto;
  border-radius:0;
  background:linear-gradient(112deg, transparent 36%, rgba(255,255,255,.18) 49%, transparent 59%);
  filter:none;
  opacity:.6;
  animation:projectCardShine 12s ease-in-out infinite;
}
.project-preview-card-a{
  left:5%;
  top:12%;
  width:61%;
  height:64%;
  transform:rotate(-4.4deg) translateZ(0);
}
.project-preview-card-b{
  right:3%;
  bottom:10%;
  width:35%;
  height:54%;
  transform:rotate(6deg) translateZ(0);
}
.project-preview-card-b{
  box-shadow:
    0 36px 86px rgba(0,0,0,.5),
    0 10px 24px rgba(8,15,35,.34),
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 0 48px rgba(255,98,192,.08);
}
.project-browser-bar{
  left:14px;
  right:14px;
  top:14px;
  height:42px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.18);
}
.project-browser-bar b{font-size:.9rem;font-weight:800;letter-spacing:.01em}
.project-browser-bar em{
  color:#cae3ff;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:none;
  padding:5px 9px;
}
.project-preview-device{
  left:14px;
  right:14px;
  top:64px;
  bottom:78px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 34px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05);
}
.project-preview-device-browser::before,
.project-preview-device-phone::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 14%, rgba(255,255,255,0) 75%, rgba(8,12,28,.24));
  pointer-events:none;
  z-index:3;
}
.project-preview-device-phone::after{
  content:"";
  position:absolute;
  left:50%;
  top:9px;
  width:32%;
  height:12px;
  transform:translateX(-50%);
  border-radius:0 0 14px 14px;
  background:linear-gradient(180deg, rgba(16,20,40,.96), rgba(7,12,28,.96));
  box-shadow:0 8px 18px rgba(0,0,0,.28);
  z-index:4;
}
.project-preview-screen{
  border-radius:inherit;
  background:#070d1e;
}
.project-preview-screen::before{
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 12%, rgba(8,12,28,0) 72%, rgba(8,12,28,.34) 100%),
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.08), transparent 24%);
}
.project-preview-screen::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(8,12,28,0) 0%, rgba(8,12,28,0) 58%, rgba(8,12,28,.1) 72%, rgba(8,12,28,.56) 100%);
  z-index:2;
  pointer-events:none;
}
.project-preview-poster{
  width:100%;
  height:auto;
  min-height:100%;
  object-fit:cover;
  object-position:top center;
  filter:saturate(1.02) contrast(1.02);
}
.project-preview-poster-tom{
  transform:scale(1.04);
  animation:previewScrollDriftTomUltra 24s cubic-bezier(.45,0,.2,1) infinite alternate;
}
.project-preview-poster-gibon{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  transform:scale(1.03);
  animation:previewFloatPhoneUltra 12.5s ease-in-out infinite;
}
.project-preview-meta{
  left:14px;
  right:14px;
  bottom:14px;
  gap:5px;
  padding:14px 15px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(6,12,28,.14), rgba(6,12,28,.68));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 14px 34px rgba(0,0,0,.26);
}
.project-preview-meta strong{
  font-size:1.08rem;
  letter-spacing:-.03em;
}
.project-preview-meta span{
  color:#ced9f1;
  font-size:.82rem;
}
.project-preview-card-b .project-preview-meta strong{font-size:1rem}
.project-preview-card-b .project-preview-meta span{font-size:.78rem}
@keyframes previewScrollDriftTomUltra{
  0%{transform:translateY(0) scale(1.04)}
  100%{transform:translateY(-36%) scale(1.04)}
}
@keyframes previewFloatPhoneUltra{
  0%,100%{transform:translateY(0) scale(1.03)}
  50%{transform:translateY(-2.2%) scale(1.045)}
}
@media (max-width: 820px){
  .scene-wrap .mesh-lines,
  .scene-wrap .scene-grid{
    display:none !important;
  }
  .project-preview-stack::after{
    inset:16% 3% 10%;
    border-radius:30px;
    background:
      radial-gradient(circle at 70% 36%, rgba(255,98,192,.18), transparent 24%),
      radial-gradient(circle at 30% 76%, rgba(111,247,255,.16), transparent 24%);
    filter:blur(10px);
  }
  .project-preview-card{
    border-radius:28px;
  }
  .project-preview-card::before{border-radius:26px}
  .project-preview-card-a{
    left:3%;
    top:20%;
    width:79%;
    height:42%;
    transform:rotate(-3.4deg);
  }
  .project-preview-card-b{
    right:3%;
    bottom:11%;
    width:50%;
    height:35%;
    transform:rotate(4.6deg);
  }
  .project-browser-bar{
    left:10px;right:10px;top:10px;height:34px;padding:0 10px;
  }
  .project-browser-bar b{font-size:.72rem}
  .project-preview-device{
    left:10px;right:10px;top:50px;bottom:60px;border-radius:18px;
  }
  .project-preview-device-browser{bottom:64px}
  .project-preview-device-phone{bottom:62px;border-radius:22px}
  .project-preview-poster-tom{
    animation:previewScrollDriftTomUltraMobile 24s cubic-bezier(.45,0,.2,1) infinite alternate;
  }
  .project-preview-poster-gibon{
    animation:previewFloatPhoneUltraMobile 12.5s ease-in-out infinite;
  }
  .project-preview-meta{
    left:10px;right:10px;bottom:10px;padding:10px 11px;border-radius:16px;
  }
  .project-preview-meta strong{font-size:.98rem}
  .project-preview-meta span{font-size:.72rem}
  .project-preview-card-b .project-preview-meta strong{font-size:.84rem}
  .project-preview-card-b .project-preview-meta span{font-size:.64rem}
}
@media (max-width: 560px){
  .project-preview-card-a{
    left:3%;
    top:21%;
    width:81%;
    height:39%;
  }
  .project-preview-card-b{
    right:3%;
    bottom:10%;
    width:54%;
    height:32%;
  }
}
@keyframes previewScrollDriftTomUltraMobile{
  0%{transform:translateY(0) scale(1.05)}
  100%{transform:translateY(-24%) scale(1.05)}
}
@keyframes previewFloatPhoneUltraMobile{
  0%,100%{transform:translateY(0) scale(1.035)}
  50%{transform:translateY(-1.6%) scale(1.05)}
}

/* === Project cards WOW override === */
.project-preview-stack{
  perspective:2200px;
}
.project-preview-stack::before{
  left:12%;
  right:8%;
  bottom:4%;
  height:24%;
  background:radial-gradient(circle at 50% 50%, rgba(5,12,28,.92), rgba(5,12,28,.08) 55%, rgba(5,12,28,0) 78%);
  filter:blur(38px);
  opacity:1;
}
.project-preview-stack::after{
  inset:10% 2% 7%;
  border-radius:56px;
  background:
    radial-gradient(circle at 69% 36%, rgba(255,98,192,.30), transparent 18%),
    radial-gradient(circle at 27% 73%, rgba(111,247,255,.24), transparent 21%),
    radial-gradient(circle at 53% 50%, rgba(122,92,255,.18), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,0) 34%, rgba(122,92,255,.08) 72%, rgba(255,255,255,0));
  filter:blur(14px);
}
.scene-wrap .floating-chip{
  padding:12px 18px;
  font-size:.84rem;
  letter-spacing:.03em;
  color:#eef4ff;
  background:linear-gradient(180deg, rgba(7,12,28,.78), rgba(8,14,30,.62));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 48px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
}
.project-preview-card{
  border-radius:38px;
  background:
    linear-gradient(180deg, rgba(8,13,31,.98), rgba(9,15,35,.93));
  border:1px solid rgba(255,255,255,.15);
  box-shadow:
    0 60px 130px rgba(0,0,0,.52),
    0 18px 38px rgba(7,12,30,.42),
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 0 70px rgba(111,247,255,.08);
}
.project-preview-card::before{
  border-radius:36px;
  background:
    linear-gradient(144deg, rgba(255,255,255,.18), rgba(255,255,255,0) 16%, rgba(255,255,255,0) 56%, rgba(111,247,255,.07) 78%, rgba(255,255,255,0)),
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.12), transparent 28%);
}
.project-preview-card::after{
  inset:-20% -32%;
  background:linear-gradient(115deg, transparent 34%, rgba(255,255,255,.22) 48%, transparent 60%);
  opacity:.76;
}
.project-preview-card-a{
  left:4%;
  top:9%;
  width:63%;
  height:70%;
  transform:rotate(-5.5deg) translateZ(40px);
}
.project-preview-card-b{
  right:2%;
  bottom:6%;
  width:37%;
  height:58%;
  transform:rotate(7.5deg) translateZ(85px);
  box-shadow:
    0 54px 118px rgba(0,0,0,.56),
    0 18px 34px rgba(9,14,32,.46),
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 0 58px rgba(255,98,192,.10);
}
.project-browser-bar{
  left:16px;
  right:16px;
  top:16px;
  height:44px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.09);
}
.project-browser-bar b{font-size:.92rem}
.project-browser-bar em{
  color:#edf4ff;
  background:linear-gradient(135deg, rgba(245,211,138,.14), rgba(255,98,192,.16));
  border:1px solid rgba(255,255,255,.10);
  padding:6px 10px;
}
.project-preview-device{
  left:16px;
  right:16px;
  top:68px;
  bottom:86px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01));
  box-shadow:
    0 24px 42px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -30px 40px rgba(7,11,27,.10);
}
.project-preview-device::after{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  bottom:-12px;
  height:22px;
  border-radius:999px;
  background:radial-gradient(circle at 50% 50%, rgba(111,247,255,.26), rgba(255,98,192,.14) 44%, rgba(8,12,28,0) 72%);
  filter:blur(10px);
  opacity:.9;
}
.project-preview-screen{
  background:
    radial-gradient(circle at 18% 10%, rgba(111,247,255,.06), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(255,98,192,.08), transparent 22%),
    #070d1e;
}
.project-preview-screen::before{
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 12%, rgba(8,12,28,0) 72%, rgba(8,12,28,.40) 100%),
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.08), transparent 22%),
    linear-gradient(90deg, rgba(255,255,255,.035) 0, rgba(255,255,255,0) 22%, rgba(255,255,255,.03) 44%, rgba(255,255,255,0) 66%);
}
.project-preview-poster{
  filter:saturate(1.04) contrast(1.04);
}
.project-preview-meta{
  left:14px;
  right:14px;
  bottom:14px;
  gap:6px;
  padding:15px 16px 16px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(6,12,28,.22), rgba(6,12,28,.78));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 20px 42px rgba(0,0,0,.28);
}
.project-preview-meta strong{
  font-size:1.12rem;
  line-height:1.02;
}
.project-preview-meta span{
  font-size:.82rem;
  color:#d6e1f7;
}
.project-preview-card-a .project-preview-meta::after,
.project-preview-card-b .project-preview-meta::after{
  content:"Live case";
  position:absolute;
  right:14px;
  top:-12px;
  padding:6px 10px;
  border-radius:999px;
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#f6fbff;
  background:linear-gradient(135deg, rgba(111,247,255,.28), rgba(255,98,192,.20));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 24px rgba(0,0,0,.24);
}
@keyframes projectCardFloatA{
  0%,100%{transform:translateY(0) rotate(-5.5deg) translateZ(40px)}
  50%{transform:translateY(-14px) rotate(-6.6deg) translateZ(46px)}
}
@keyframes projectCardFloatB{
  0%,100%{transform:translateY(0) rotate(7.5deg) translateZ(85px)}
  50%{transform:translateY(-18px) rotate(8.8deg) translateZ(94px)}
}
@media (max-width: 820px){
  .project-preview-stack::after{
    inset:15% 1% 9%;
    border-radius:34px;
  }
  .scene-wrap .floating-chip{
    font-size:.74rem;
    padding:10px 14px;
  }
  .project-preview-card{
    border-radius:30px;
  }
  .project-preview-card::before{border-radius:28px}
  .project-preview-card-a{
    left:2%;
    top:17%;
    width:82%;
    height:45%;
    transform:rotate(-4.4deg);
  }
  .project-preview-card-b{
    right:2%;
    bottom:9%;
    width:53%;
    height:37%;
    transform:rotate(5.5deg);
  }
  .project-browser-bar em{display:none}
  .project-preview-device{top:52px;bottom:66px;border-radius:20px}
  .project-preview-device-browser{bottom:68px}
  .project-preview-device-phone{bottom:66px;border-radius:24px}
  .project-preview-meta{padding:10px 11px 11px;border-radius:18px}
  .project-preview-meta strong{font-size:1rem}
  .project-preview-meta span{font-size:.73rem}
  .project-preview-card-a .project-preview-meta::after,
  .project-preview-card-b .project-preview-meta::after{
    top:-10px;
    right:10px;
    padding:5px 8px;
    font-size:.56rem;
  }
}
@media (max-width: 560px){
  .project-preview-card-a{
    width:84%;
    height:43%;
  }
  .project-preview-card-b{
    width:56%;
    height:34%;
  }
}


/* === WOW concept override: spotlight project stage === */
.scene-wrap .floating-chip{display:none !important}
.project-preview-stack{
  inset:0;
  perspective:2400px;
  isolation:isolate;
}
.project-preview-stack::before{
  content:"";
  position:absolute;
  left:10%;
  right:8%;
  bottom:4%;
  height:24%;
  border-radius:999px;
  background:radial-gradient(circle at 50% 50%, rgba(7,13,32,.94), rgba(7,13,32,0) 70%);
  filter:blur(34px);
  z-index:0;
  opacity:1;
}
.project-preview-stack::after{
  content:"";
  position:absolute;
  left:22%;
  top:15%;
  width:56%;
  height:56%;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(120,92,255,.20), rgba(120,92,255,0) 54%),
    radial-gradient(circle at 36% 36%, rgba(245,211,138,.14), rgba(111,247,255,0) 34%),
    radial-gradient(circle at 72% 62%, rgba(255,98,192,.18), rgba(255,98,192,0) 30%);
  filter:blur(16px);
  z-index:0;
  opacity:.9;
}
.project-preview-card{
  overflow:hidden;
  pointer-events:none;
  transform-style:preserve-3d;
  background:linear-gradient(180deg, rgba(6,10,25,.98), rgba(8,14,34,.92));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    0 50px 120px rgba(0,0,0,.50),
    0 18px 40px rgba(5,12,30,.34),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 70px rgba(111,247,255,.06);
}
.project-preview-card::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  background:
    linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,0) 18%, rgba(255,255,255,0) 62%, rgba(111,247,255,.08) 82%, rgba(255,255,255,0)),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  pointer-events:none;
}
.project-preview-card::after{
  content:"";
  position:absolute;
  inset:-20% -40%;
  background:linear-gradient(112deg, transparent 34%, rgba(255,255,255,.14) 46%, transparent 58%);
  transform:translateX(-110%);
  mix-blend-mode:screen;
  opacity:.75;
  animation:projectCardShine 12s ease-in-out infinite;
  pointer-events:none;
}
.project-preview-card-a{
  left:8%;
  top:10%;
  width:64%;
  height:68%;
  border-radius:36px;
  transform:translate3d(0,0,0) rotate(-3deg);
  animation:projectCardFloatA 9s ease-in-out infinite;
  z-index:2;
}
.project-preview-card-b{
  right:8%;
  bottom:9%;
  width:28%;
  height:56%;
  border-radius:34px;
  transform:translate3d(0,0,0) rotate(7deg);
  animation:projectCardFloatB 9.6s ease-in-out infinite;
  z-index:3;
}
.project-preview-card-b::before,
.project-preview-card-b::after{border-radius:inherit}
.project-browser-bar{
  position:absolute;
  left:16px;
  right:16px;
  top:14px;
  height:42px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 14px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 8px 24px rgba(6,12,28,.22), inset 0 1px 0 rgba(255,255,255,.05);
  z-index:4;
}
.project-browser-bar b{font-size:.9rem;font-weight:700;letter-spacing:.01em;color:#f7f9ff}
.project-browser-bar em{
  margin-left:auto;
  font-style:normal;
  font-size:.6rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#d8e0ff;
  padding:8px 10px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(111,247,255,.12), rgba(126,92,255,.14));
  border:1px solid rgba(255,255,255,.10);
}
.project-preview-device{
  position:absolute;
  left:16px;
  right:16px;
  top:66px;
  bottom:84px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(7,12,29,.995), rgba(8,12,28,.98));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 22px 40px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.04);
}
.project-preview-device-browser{border-radius:28px}
.project-preview-device-phone{border-radius:34px; bottom:92px}
.project-preview-device-phone::before{
  content:"";
  position:absolute;
  top:10px;
  left:50%;
  width:34%;
  height:18px;
  transform:translateX(-50%);
  border-radius:999px;
  background:rgba(6,10,22,.92);
  z-index:3;
}
.project-preview-screen{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(10,16,36,.99), rgba(8,12,28,.98));
}
.project-preview-screen::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 16%, rgba(8,12,28,0) 76%, rgba(8,12,28,.28) 100%),
    radial-gradient(circle at 24% 12%, rgba(94,231,255,.12), transparent 22%),
    radial-gradient(circle at 76% 16%, rgba(204,116,255,.12), transparent 24%);
}
.project-preview-poster{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.project-preview-poster-tom{transform:scale(1.02);animation:previewScrollDriftTom 24s ease-in-out infinite alternate}
.project-preview-poster-gibon{transform:scale(1.035);animation:previewFloatPhone 14s ease-in-out infinite}
.project-preview-meta{
  position:absolute;
  left:16px;
  right:16px;
  bottom:14px;
  padding:14px 16px;
  display:grid;
  gap:5px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(8,14,31,.18), rgba(8,14,31,.64));
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  z-index:4;
}
.project-preview-meta::after{
  content:"LIVE CASE";
  justify-self:start;
  margin-top:4px;
  padding:6px 10px;
  border-radius:999px;
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#f3f7ff;
  background:linear-gradient(135deg, rgba(111,247,255,.14), rgba(126,92,255,.18));
  border:1px solid rgba(255,255,255,.12);
}
.project-preview-meta strong{font-size:1.18rem;line-height:1.05;color:#f8faff}
.project-preview-meta span{font-size:.84rem;color:#cad4ea;max-width:95%}
.project-preview-card-b .project-preview-meta strong{font-size:1.02rem}
.project-preview-card-b .project-preview-meta span{font-size:.78rem}
.project-preview-card-b .project-preview-meta::after{content:"MOBILE VIEW"}
@keyframes projectCardFloatA{
  0%,100%{transform:translate3d(0,0,0) rotate(-3deg)}
  50%{transform:translate3d(0,-18px,0) rotate(-1.2deg)}
}
@keyframes projectCardFloatB{
  0%,100%{transform:translate3d(0,0,0) rotate(7deg)}
  50%{transform:translate3d(0,-20px,0) rotate(4.5deg)}
}
@media (max-width: 820px){
  .scene-wrap .aurora-ribbon,.scene-wrap .mesh-lines,.scene-wrap .scene-grid{display:none !important}
  .project-preview-stack::after{
    left:12%;top:22%;width:76%;height:48%;
    filter:blur(14px);
  }
  .project-preview-card-a{
    left:4%;
    top:18%;
    width:84%;
    height:42%;
    transform:translate3d(0,0,0) rotate(-2deg);
  }
  .project-preview-card-b{
    right:4%;
    bottom:12%;
    width:48%;
    height:36%;
    transform:translate3d(0,0,0) rotate(5deg);
  }
  .project-browser-bar{left:10px;right:10px;top:10px;height:34px;padding:0 10px;gap:6px}
  .project-browser-bar span{width:8px;height:8px}
  .project-browser-bar b{font-size:.72rem}
  .project-browser-bar em{display:none}
  .project-preview-device{left:10px;right:10px;top:50px;bottom:66px}
  .project-preview-device-browser{border-radius:20px}
  .project-preview-device-phone{border-radius:24px;bottom:72px}
  .project-preview-meta{left:10px;right:10px;bottom:10px;padding:10px 11px;border-radius:16px}
  .project-preview-meta strong{font-size:.94rem}
  .project-preview-meta span{font-size:.70rem;line-height:1.25}
  .project-preview-meta::after{padding:5px 8px;font-size:.50rem;letter-spacing:.14em}
  .project-preview-card-b .project-preview-meta strong{font-size:.84rem}
  .project-preview-card-b .project-preview-meta span{font-size:.66rem}
}
@media (max-width: 560px){
  .project-preview-stack::before{left:6%;right:6%;bottom:8%;height:20%}
  .project-preview-card-a{left:4%;top:22%;width:86%;height:38%}
  .project-preview-card-b{right:4%;bottom:10%;width:50%;height:32%}
}


/* === Real fullscreen showcase override === */
@media (min-width: 981px){
  .hero{padding-top:26px}
  .hero .container.hero-grid{
    display:block;
    position:relative;
    min-height:820px;
  }
  .hero-copy{
    position:absolute;
    left:0;
    top:74px;
    width:min(520px, 42%);
    z-index:8;
  }
  .hero-text{max-width:44ch}
  .hero-points{max-width:520px}
  .hero-stage{
    position:relative;
    height:820px;
    width:100%;
    z-index:1;
  }
  .scene-wrap.premium-scene{
    position:absolute;
    inset:0;
    border-radius:36px;
    overflow:hidden;
    padding:0;
    background:linear-gradient(180deg, rgba(6,11,27,.72), rgba(5,10,24,.4));
  }
  .premium-scene::before{inset:0;border-radius:36px}
  .project-preview-stack{inset:0;z-index:3}
  .project-preview-stack::before{
    left:32%;right:4%;bottom:2%;height:20%;
    background:radial-gradient(circle at 50% 50%, rgba(5,10,24,.92), rgba(5,10,24,0) 72%);
    filter:blur(42px);
  }
  .project-preview-stack::after{
    left:48%;top:10%;width:42%;height:58%;opacity:1;
    filter:blur(24px);
  }
  .project-preview-card-a{
    left:46%;top:8%;width:45%;height:78%;border-radius:38px;
    transform:rotate(-2.5deg) translateZ(0);
  }
  .project-preview-card-b{
    right:6%;bottom:10%;width:19%;height:58%;border-radius:34px;
    transform:rotate(6deg) translateZ(0);
  }
  .project-browser-bar{left:18px;right:18px;top:16px;height:44px}
  .project-preview-device{left:18px;right:18px;top:70px;bottom:92px}
  .project-preview-device-phone{bottom:94px}
  .project-preview-meta{left:18px;right:18px;bottom:16px;padding:16px 18px}
  .project-preview-meta strong{font-size:1.18rem}
  .project-preview-meta span{font-size:.9rem}
  .project-preview-card-b .project-preview-meta strong{font-size:1rem}
  .project-preview-card-b .project-preview-meta span{font-size:.82rem}
  .hero-bottom-bar{margin-top:34px}
}

@media (max-width: 980px){
  .project-preview-stack::after{display:none}
  .project-preview-card-a{left:6%;top:26%;width:76%;height:34%;border-radius:28px;transform:rotate(-4deg)}
  .project-preview-card-b{right:4%;bottom:10%;width:36%;height:46%;border-radius:28px;transform:rotate(7deg)}
  .project-preview-device{top:56px;bottom:72px}
  .project-preview-device-phone{bottom:74px}
}

/* --- Admin direct preview mode --- */
body.admin-preview-mode{padding-top:78px;overflow-x:hidden}
.preview-topbar{position:fixed;left:0;right:0;top:0;z-index:60;padding:14px 18px;background:rgba(5,10,23,.82);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08)}
.preview-topbar-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;color:#f4f8ff}
.preview-topbar-inner strong{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#cfdcff}
.preview-topbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.preview-topbar-actions a{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:#dbe5ff;font-size:13px;font-weight:700}
.preview-topbar-actions a.active,.preview-topbar-actions a:hover{background:linear-gradient(135deg, rgba(94,231,255,.18), rgba(122,92,255,.22));border-color:rgba(255,255,255,.16);color:#fff}
.preview-topbar-actions .preview-topbar-close{background:rgba(255,255,255,.08)}
@media (max-width:780px){.preview-topbar-inner{align-items:flex-start;flex-direction:column}.preview-topbar-actions{width:100%}.preview-topbar-actions a{flex:1 1 auto}}

/* --- MacBook hero showcase --- */
/* === Premium hero v2 rebuild === */
.hero-grid{align-items:start;}



/* === No-device hero layout hotfix === */
@media (min-width: 981px){
  .hero .container.hero-grid{
    display:block !important;
    position:relative !important;
    min-height:0 !important;
  }
  .hero-copy{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:min(640px, 100%) !important;
    z-index:8 !important;
  }
  .hero-text{max-width:44ch !important;}
  .hero-points{
    max-width:none !important;
    margin-top:0 !important;
  }
  .hero-bottom-bar{
    margin-top:28px !important;
    grid-column:auto !important;
  }
}
body.admin-preview-mode.preview-device-desktop .hero-bottom-bar{
  margin-top:28px !important;
}
body.admin-preview-mode.preview-device-desktop .hero-copy,
body.admin-preview-mode.preview-device-tablet .hero-copy,
body.admin-preview-mode.preview-device-mobile .hero-copy{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  width:min(640px, 100%) !important;
}


/* === requested: top points higher + lower trust bar match upper hero bar === */
@media (min-width: 981px){
  .hero-points{margin-top:-58px !important;}
  .trust-strip{padding-top:22px !important;}
}
body.admin-preview-mode.preview-device-desktop .hero-points{
  margin-top:-58px !important;
}
body.admin-preview-mode.preview-device-desktop .trust-strip{
  padding-top:22px !important;
}

.trust-grid{
  gap:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  position:relative !important;
  isolation:isolate !important;
  background:linear-gradient(180deg, rgba(14,19,41,.78), rgba(9,13,31,.66)) !important;
  box-shadow:0 24px 64px rgba(4,10,28,.28), inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(255,255,255,.04) !important;
  animation:heroBarBreathe 7.5s ease-in-out infinite !important;
}
.trust-grid::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(111,247,255,.10), transparent 24%, transparent 76%, rgba(255,98,192,.10));
  pointer-events:none;
  opacity:.9;
}
.trust-grid::after{
  content:"";
  position:absolute;
  inset:-30% -10%;
  background:radial-gradient(circle at 16% 50%, rgba(245,211,138,.14), transparent 18%), radial-gradient(circle at 84% 50%, rgba(255,98,192,.16), transparent 20%), linear-gradient(110deg, transparent 28%, rgba(255,255,255,.10) 48%, transparent 68%);
  filter:blur(14px);
  mix-blend-mode:screen;
  opacity:.55;
  pointer-events:none;
  animation:heroBarSweep 9s linear infinite;
}
.trust-grid > div{
  padding:22px 24px !important;
  position:relative !important;
  transition:transform .45s ease, background .45s ease;
}
.trust-grid > div::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  opacity:0;
  transform:translateY(10px);
  animation:heroBarItemGlow 7.5s ease-in-out infinite;
}
.trust-grid > div:nth-child(2)::before{animation-delay:1.2s}
.trust-grid > div:nth-child(3)::before{animation-delay:2.4s}
.trust-grid > div + div{border-left:1px solid rgba(255,255,255,.06)}
.trust-grid strong{
  display:block;
  font-size:.96rem;
  letter-spacing:.02em;
  margin-bottom:8px;
  color:#f6f7ff;
  position:relative;
  z-index:1;
}
.trust-grid span{
  display:block;
  color:#b7c2e3;
  line-height:1.55;
  font-size:.92rem;
  position:relative;
  z-index:1;
}






/* === GIBON PRO BACKGROUND PATCH v9 — exact GD, stable layer, premium aura === */
body.gd-roadmap-bg{
  background:#07101c !important;
  overflow-x:hidden !important;
}
body.gd-roadmap-bg canvas#webCanvas,
body.gd-roadmap-bg .ambient,
body.gd-roadmap-bg .cursor-glow,
body.gd-roadmap-bg .scroll-progress,
body.gd-roadmap-bg .hero::before,
body.gd-roadmap-bg .hero::after,
body.gd-roadmap-bg .hero-copy::before,
body.gd-roadmap-bg .hero-copy::after,
body.gd-roadmap-bg .site-wrap::before,
body.gd-roadmap-bg .site-wrap::after{
  display:none !important;
}
body.gd-roadmap-bg::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 39%, rgba(0, 210, 255, .115), rgba(0, 210, 255, 0) 28%),
    radial-gradient(circle at 56% 46%, rgba(50, 255, 215, .075), rgba(50, 255, 215, 0) 36%),
    radial-gradient(circle at 42% 42%, rgba(104, 93, 255, .08), rgba(104, 93, 255, 0) 34%),
    linear-gradient(180deg, #081321 0%, #07101c 54%, #091625 100%);
}
body.gd-roadmap-bg::after{
  content:"";
  position:fixed;
  left:50%;
  top:46%;
  width:min(58vw, 780px);
  aspect-ratio:271 / 235;
  z-index:0;
  pointer-events:none;
  transform:translate(-50%, -50%);
  background:url('../assets/gd-monogram-exact.svg') center / contain no-repeat;
  opacity:.185;
  filter:
    drop-shadow(0 0 22px rgba(117, 243, 255, .16))
    drop-shadow(0 0 58px rgba(36, 205, 255, .10))
    drop-shadow(0 0 92px rgba(91, 89, 255, .08));
  image-rendering:auto !important;
  animation:none !important;
  will-change:auto !important;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
body.gd-roadmap-bg .gd-bg-stage{
  position:fixed !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
  transform:none !important;
  -webkit-transform:none !important;
  will-change:auto !important;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  contain:paint;
}
body.gd-roadmap-bg .gd-bg-stage::before{
  content:"";
  position:absolute;
  left:5%; right:5%; top:8%; bottom:8%;
  border-radius:42px;
  background:
    linear-gradient(rgba(100,238,255,.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100,238,255,.032) 1px, transparent 1px);
  background-size:132px 132px;
  opacity:.36;
  mask-image:radial-gradient(circle at 50% 42%, rgba(0,0,0,.9), transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 50% 42%, rgba(0,0,0,.9), transparent 72%);
}
body.gd-roadmap-bg .gd-bg-halo{
  position:absolute !important;
  left:50%; top:46%;
  width:min(70vw, 980px); height:min(48vw, 660px);
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(80, 242, 255, .20), rgba(80, 242, 255, .065) 36%, rgba(80, 242, 255, 0) 70%),
    radial-gradient(circle at 58% 50%, rgba(96, 86, 255, .10), rgba(96, 86, 255, 0) 62%);
  filter:blur(30px);
  opacity:.78;
  animation:gdAuraBreath 8.5s ease-in-out infinite;
}
body.gd-roadmap-bg .gd-orbit{
  position:absolute !important;
  left:50% !important;
  top:46% !important;
  width:min(62vw, 850px) !important;
  height:min(39vw, 540px) !important;
  transform:translate(-50%, -50%) rotate(-7deg) !important;
  border-radius:50% !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
  opacity:1 !important;
  filter:none !important;
  animation:none !important;
}
body.gd-roadmap-bg .gd-orbit::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:conic-gradient(from 220deg,
    transparent 0deg,
    transparent 72deg,
    rgba(84, 239, 255, .00) 86deg,
    rgba(84, 239, 255, .36) 104deg,
    rgba(220, 255, 255, .62) 113deg,
    rgba(84, 239, 255, .20) 124deg,
    transparent 145deg,
    transparent 232deg,
    rgba(91, 102, 255, .22) 248deg,
    rgba(94, 238, 255, .18) 262deg,
    transparent 286deg,
    transparent 360deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px), #000 calc(100% - 1px), transparent 100%);
          mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px), #000 calc(100% - 1px), transparent 100%);
  filter:blur(.45px) drop-shadow(0 0 12px rgba(91,239,255,.20));
  opacity:.64;
  animation:gdPremiumSweep 16s linear infinite;
}
body.gd-roadmap-bg .gd-orbit::after{
  content:"";
  position:absolute;
  inset:11%;
  border-radius:inherit;
  border:1px solid rgba(124, 237, 255, .075);
  box-shadow:0 0 34px rgba(65, 219, 255, .055) inset;
  opacity:.75;
}
body.gd-roadmap-bg .gd-orbit-b{
  width:min(48vw, 660px) !important;
  height:min(29vw, 400px) !important;
  transform:translate(-50%, -50%) rotate(13deg) !important;
  opacity:.82 !important;
}
body.gd-roadmap-bg .gd-orbit-b::before{
  background:conic-gradient(from 45deg,
    transparent 0deg,
    transparent 44deg,
    rgba(51, 255, 218, .22) 66deg,
    rgba(230, 255, 255, .38) 76deg,
    transparent 94deg,
    transparent 202deg,
    rgba(90, 111, 255, .16) 222deg,
    transparent 246deg,
    transparent 360deg) !important;
  filter:blur(.4px) drop-shadow(0 0 10px rgba(51,255,218,.16)) !important;
  opacity:.50 !important;
  animation:gdPremiumSweepReverse 22s linear infinite !important;
}
body.gd-roadmap-bg .gd-orbit-b::after{display:none !important;}
body.gd-roadmap-bg .container,
body.gd-roadmap-bg .site-header,
body.gd-roadmap-bg .mobile-menu,
body.gd-roadmap-bg main,
body.gd-roadmap-bg .section,
body.gd-roadmap-bg .hero,
body.gd-roadmap-bg .hero-grid,
body.gd-roadmap-bg .hero-copy,
body.gd-roadmap-bg .hero-bottom-bar,
body.gd-roadmap-bg .hero-points,
body.gd-roadmap-bg .trust-grid,
body.gd-roadmap-bg .showcase-card,
body.gd-roadmap-bg .service-card,
body.gd-roadmap-bg .price-card,
body.gd-roadmap-bg .contact-shell,
body.gd-roadmap-bg .page-card,
body.gd-roadmap-bg .custom-section-card{
  position:relative;
  z-index:2;
}
body.gd-roadmap-bg .hero,
body.gd-roadmap-bg .section,
body.gd-roadmap-bg main{
  background:transparent !important;
}
body.gd-roadmap-bg .hero{overflow:visible !important;}
@keyframes gdAuraBreath{
  0%,100%{opacity:.68; transform:translate(-50%, -50%) scale(.985)}
  50%{opacity:.88; transform:translate(-50%, -50%) scale(1.035)}
}
@keyframes gdPremiumSweep{to{transform:rotate(360deg)}}
@keyframes gdPremiumSweepReverse{to{transform:rotate(-360deg)}}
@media (max-width:980px){
  body.gd-roadmap-bg::after{
    top:42%;
    width:min(78vw, 520px);
    opacity:.145;
  }
  body.gd-roadmap-bg .gd-bg-halo{top:42%; width:88vw; height:56vw; opacity:.64; filter:blur(26px);}
  body.gd-roadmap-bg .gd-orbit{top:42% !important; width:82vw !important; height:48vw !important;}
  body.gd-roadmap-bg .gd-orbit-b{top:42% !important; width:64vw !important; height:34vw !important;}
}
@media (prefers-reduced-motion: reduce){
  body.gd-roadmap-bg .gd-bg-halo,
  body.gd-roadmap-bg .gd-orbit::before,
  body.gd-roadmap-bg .gd-orbit-b::before{animation:none !important;}
}

/* =========================================================
   GIBON DEV — Cinematic Neon Glass Design System v17
   Scope: visual skin only (navbar, panels, cards, GD background)
   ========================================================= */
:root{
  --cinema-bg-0:#050914;
  --cinema-bg-1:#071326;
  --cinema-panel:rgba(8,18,42,.72);
  --cinema-panel-2:rgba(10,24,56,.66);
  --cinema-line:rgba(93,184,255,.22);
  --cinema-line-soft:rgba(255,255,255,.095);
  --cinema-cyan:#5ee7ff;
  --cinema-blue:#357dff;
  --cinema-violet:#7a5cff;
  --cinema-magenta:#bc55ff;
  --cinema-text:#f7fbff;
  --cinema-muted:#b7c8eb;
  --cinema-shadow:0 28px 78px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.105);
}
body.gd-roadmap-bg{
  background:
    radial-gradient(circle at 20% 8%, rgba(66,148,255,.12), transparent 34%),
    radial-gradient(circle at 82% 32%, rgba(122,92,255,.12), transparent 34%),
    radial-gradient(circle at 50% 84%, rgba(94,231,255,.065), transparent 38%),
    linear-gradient(180deg, #040912 0%, #071427 48%, #050a15 100%) !important;
}
body.gd-roadmap-bg::before{
  background:
    radial-gradient(circle at 52% 36%, rgba(90,231,255,.20), rgba(90,231,255,.055) 24%, transparent 50%),
    radial-gradient(circle at 70% 44%, rgba(130,82,255,.18), rgba(130,82,255,.04) 28%, transparent 54%),
    linear-gradient(180deg, rgba(6,13,28,.25), rgba(2,6,14,.88)) !important;
}
body.gd-roadmap-bg::after{
  content:"" !important;
  position:fixed !important;
  left:55% !important;
  top:42% !important;
  width:min(62vw, 840px) !important;
  aspect-ratio:271 / 235 !important;
  transform:translate(-50%, -50%) !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:
    linear-gradient(135deg,
      rgba(121,244,255,.55) 0%,
      rgba(238,249,255,.34) 18%,
      rgba(78,172,255,.36) 42%,
      rgba(118,92,255,.43) 70%,
      rgba(191,85,255,.34) 100%) !important;
  -webkit-mask:url('../assets/gd-monogram-exact.svg') center / contain no-repeat !important;
          mask:url('../assets/gd-monogram-exact.svg') center / contain no-repeat !important;
  opacity:.62 !important;
  filter:
    drop-shadow(0 0 18px rgba(94,231,255,.26))
    drop-shadow(0 0 52px rgba(61,134,255,.18))
    drop-shadow(0 0 98px rgba(122,92,255,.16)) !important;
  animation:none !important;
  will-change:auto !important;
  backface-visibility:hidden !important;
}
body.gd-roadmap-bg .gd-bg-stage{
  position:fixed !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
  contain:paint !important;
}
body.gd-roadmap-bg .gd-bg-stage::before{
  content:"" !important;
  position:absolute !important;
  inset:4% 3% 2% 3% !important;
  border-radius:48px !important;
  background:
    linear-gradient(rgba(94,231,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94,231,255,.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)) !important;
  background-size:116px 116px, 116px 116px, 100% 100% !important;
  opacity:.55 !important;
  mask-image:radial-gradient(circle at 54% 38%, #000 0%, rgba(0,0,0,.74) 38%, transparent 76%) !important;
  -webkit-mask-image:radial-gradient(circle at 54% 38%, #000 0%, rgba(0,0,0,.74) 38%, transparent 76%) !important;
  animation:cinemaGridBreath 13s ease-in-out infinite !important;
}
body.gd-roadmap-bg .gd-bg-stage::after{
  content:"" !important;
  position:absolute !important;
  left:-14%; right:-14%; top:20%; height:44%;
  background:
    linear-gradient(112deg, transparent 0 32%, rgba(94,231,255,.11) 40%, rgba(122,92,255,.10) 52%, transparent 66%);
  filter:blur(30px);
  opacity:.60;
  transform:rotate(-7deg) translateX(-8%);
  animation:cinemaWideSweep 13s cubic-bezier(.55,0,.2,1) infinite;
}
body.gd-roadmap-bg .gd-bg-halo{
  left:55% !important;
  top:42% !important;
  width:min(74vw, 1020px) !important;
  height:min(44vw, 600px) !important;
  opacity:.86 !important;
  filter:blur(32px) !important;
  background:
    radial-gradient(circle at 42% 48%, rgba(94,231,255,.28), rgba(94,231,255,.07) 35%, transparent 68%),
    radial-gradient(circle at 68% 52%, rgba(122,92,255,.20), rgba(122,92,255,.035) 45%, transparent 72%) !important;
  animation:cinemaGlowPulse 8s ease-in-out infinite !important;
}
body.gd-roadmap-bg .gd-orbit{
  left:55% !important;
  top:42% !important;
  width:min(66vw, 900px) !important;
  height:min(34vw, 470px) !important;
  transform:translate(-50%, -50%) rotate(-8deg) !important;
  opacity:1 !important;
}
body.gd-roadmap-bg .gd-orbit::before{
  background:conic-gradient(from 210deg,
    transparent 0deg,
    transparent 58deg,
    rgba(94,231,255,0) 74deg,
    rgba(94,231,255,.52) 92deg,
    rgba(230,255,255,.74) 102deg,
    rgba(93,125,255,.36) 114deg,
    transparent 137deg,
    transparent 252deg,
    rgba(185,85,255,.22) 266deg,
    rgba(94,231,255,.18) 280deg,
    transparent 305deg,
    transparent 360deg) !important;
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 2.4px), #000 calc(100% - 1px), transparent 100%) !important;
          mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 2.4px), #000 calc(100% - 1px), transparent 100%) !important;
  filter:blur(.35px) drop-shadow(0 0 16px rgba(94,231,255,.32)) drop-shadow(0 0 38px rgba(122,92,255,.18)) !important;
  opacity:.72 !important;
  animation:cinemaOrbit 19s linear infinite !important;
}
body.gd-roadmap-bg .gd-orbit::after{
  inset:14% !important;
  border:1px solid rgba(94,231,255,.11) !important;
  box-shadow:0 0 52px rgba(94,231,255,.07) inset !important;
  opacity:.55 !important;
}
body.gd-roadmap-bg .gd-orbit-b{
  left:55% !important;
  top:42% !important;
  width:min(48vw, 670px) !important;
  height:min(25vw, 350px) !important;
  transform:translate(-50%, -50%) rotate(15deg) !important;
  opacity:.88 !important;
}
body.gd-roadmap-bg .gd-orbit-b::before{
  background:conic-gradient(from 25deg,
    transparent 0deg,
    transparent 44deg,
    rgba(82,239,255,.28) 62deg,
    rgba(255,255,255,.44) 74deg,
    transparent 92deg,
    transparent 208deg,
    rgba(132,92,255,.20) 224deg,
    transparent 250deg,
    transparent 360deg) !important;
  filter:blur(.35px) drop-shadow(0 0 14px rgba(82,239,255,.22)) !important;
  opacity:.52 !important;
  animation:cinemaOrbitReverse 28s linear infinite !important;
}
body.gd-roadmap-bg .gd-orbit-b::after{display:none !important;}

/* Unified Cinematic Neon Glass material */
body.gd-roadmap-bg .site-header,
body.gd-roadmap-bg .mobile-menu,
body.gd-roadmap-bg .glass,
body.gd-roadmap-bg .hero-bottom-bar,
body.gd-roadmap-bg .trust-grid,
body.gd-roadmap-bg .service-card,
body.gd-roadmap-bg .price-card,
body.gd-roadmap-bg .showcase-card,
body.gd-roadmap-bg .timeline,
body.gd-roadmap-bg .timeline-step,
body.gd-roadmap-bg .contact-shell,
body.gd-roadmap-bg .faq-list details,
body.gd-roadmap-bg .page-card,
body.gd-roadmap-bg .custom-section-card,
body.gd-roadmap-bg input,
body.gd-roadmap-bg select,
body.gd-roadmap-bg textarea{
  background:
    radial-gradient(circle at 8% 0%, rgba(94,231,255,.115), transparent 34%),
    radial-gradient(circle at 92% 100%, rgba(188,85,255,.11), transparent 38%),
    linear-gradient(180deg, rgba(10,22,51,.82), rgba(5,12,29,.66)) !important;
  border:1px solid rgba(103,178,255,.20) !important;
  box-shadow:
    0 28px 82px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,255,255,.035) inset,
    inset 0 1px 0 rgba(255,255,255,.115),
    inset 0 -1px 0 rgba(94,231,255,.035) !important;
  backdrop-filter:blur(20px) saturate(142%) !important;
  -webkit-backdrop-filter:blur(20px) saturate(142%) !important;
}
body.gd-roadmap-bg .site-header{
  top:18px !important;
  border-radius:32px !important;
  width:min(1180px, calc(100% - 32px)) !important;
  margin:0 auto 18px !important;
  border-color:rgba(104,188,255,.26) !important;
  overflow:hidden !important;
}
body.gd-roadmap-bg .site-header::before,
body.gd-roadmap-bg .mobile-menu::before,
body.gd-roadmap-bg .glass::before,
body.gd-roadmap-bg .hero-bottom-bar::before,
body.gd-roadmap-bg .trust-grid::before,
body.gd-roadmap-bg .service-card::before,
body.gd-roadmap-bg .price-card::before,
body.gd-roadmap-bg .showcase-card::before,
body.gd-roadmap-bg .timeline::before,
body.gd-roadmap-bg .contact-shell::before,
body.gd-roadmap-bg .faq-list details::before,
body.gd-roadmap-bg .page-card::before,
body.gd-roadmap-bg .custom-section-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(105deg, transparent 0 30%, rgba(255,255,255,.105) 48%, transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.075), transparent 35%);
  opacity:.42;
  transform:translateX(-115%);
  animation:cinemaGlassSheen 8.8s ease-in-out infinite;
}
body.gd-roadmap-bg .site-header::after,
body.gd-roadmap-bg .mobile-menu::after,
body.gd-roadmap-bg .glass::after,
body.gd-roadmap-bg .hero-bottom-bar::after,
body.gd-roadmap-bg .trust-grid::after,
body.gd-roadmap-bg .service-card::after,
body.gd-roadmap-bg .price-card::after,
body.gd-roadmap-bg .showcase-card::after,
body.gd-roadmap-bg .timeline::after,
body.gd-roadmap-bg .contact-shell::after,
body.gd-roadmap-bg .faq-list details::after,
body.gd-roadmap-bg .page-card::after,
body.gd-roadmap-bg .custom-section-card::after{
  content:"";
  position:absolute;
  left:16px; right:16px; top:0;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(94,231,255,.54), rgba(188,85,255,.26), transparent);
  opacity:.72;
}
body.gd-roadmap-bg .nav a:not(.nav-cta),
body.gd-roadmap-bg .mobile-menu a{
  border-radius:999px;
  transition:background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
}
body.gd-roadmap-bg .nav a:not(.nav-cta){padding:10px 12px;color:#eaf2ff;}
body.gd-roadmap-bg .nav a:not(.nav-cta):hover,
body.gd-roadmap-bg .mobile-menu a:hover{
  background:rgba(94,231,255,.08);
  color:#fff;
  box-shadow:0 0 24px rgba(94,231,255,.10) inset;
}
body.gd-roadmap-bg .nav a:not(.nav-cta)::after{background:linear-gradient(90deg, var(--cinema-cyan), var(--cinema-violet), var(--cinema-magenta)) !important;}
body.gd-roadmap-bg .nav-cta,
body.gd-roadmap-bg .btn-primary{
  background:linear-gradient(135deg, #65eaff 0%, #377eff 48%, #b94bff 100%) !important;
  color:#041020 !important;
  border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:0 18px 52px rgba(94,231,255,.22), 0 0 48px rgba(122,92,255,.18), inset 0 1px 0 rgba(255,255,255,.38) !important;
  position:relative;
  overflow:hidden;
}
body.gd-roadmap-bg .nav-cta::before,
body.gd-roadmap-bg .btn-primary::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg, transparent, rgba(255,255,255,.34), transparent);
  transform:translateX(-125%);
  animation:cinemaBtnSheen 5.2s ease-in-out infinite;
}
body.gd-roadmap-bg .btn-secondary{
  background:rgba(9,20,48,.64) !important;
  border-color:rgba(94,231,255,.18) !important;
  color:#edf5ff !important;
}
body.gd-roadmap-bg .mobile-toggle{
  background:radial-gradient(circle at 30% 15%, rgba(255,255,255,.16), transparent 32%), linear-gradient(180deg, rgba(18,37,78,.86), rgba(9,20,48,.72)) !important;
  border:1px solid rgba(110,194,255,.26) !important;
  box-shadow:0 18px 46px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.13), 0 0 32px rgba(94,231,255,.10) !important;
  color:#fff !important;
  min-width:58px;
  min-height:58px;
  border-radius:22px !important;
}
body.gd-roadmap-bg .mobile-menu{
  position:relative;
  border-radius:0 0 28px 28px;
  margin-top:-2px;
  overflow:hidden;
}
body.gd-roadmap-bg .mobile-menu a{
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)) !important;
  border:1px solid rgba(103,178,255,.18) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
  font-weight:750;
}
body.gd-roadmap-bg .point,
body.gd-roadmap-bg .hero-bottom-item,
body.gd-roadmap-bg .trust-grid > div,
body.gd-roadmap-bg .timeline-step,
body.gd-roadmap-bg .service-card,
body.gd-roadmap-bg .price-card,
body.gd-roadmap-bg .showcase-card,
body.gd-roadmap-bg .faq-list details{
  position:relative;
  overflow:hidden;
}
body.gd-roadmap-bg .point:hover,
body.gd-roadmap-bg .service-card:hover,
body.gd-roadmap-bg .price-card:hover,
body.gd-roadmap-bg .showcase-card:hover,
body.gd-roadmap-bg .faq-list details:hover{
  transform:translateY(-4px);
  border-color:rgba(94,231,255,.34) !important;
  box-shadow:0 34px 90px rgba(0,0,0,.45), 0 0 44px rgba(94,231,255,.10), inset 0 1px 0 rgba(255,255,255,.13) !important;
}
body.gd-roadmap-bg .hero-bottom-bar,
body.gd-roadmap-bg .trust-grid{isolation:isolate;}
body.gd-roadmap-bg .hero-bottom-item + .hero-bottom-item{border-left:1px solid rgba(103,178,255,.14) !important;}
body.gd-roadmap-bg .hero-bottom-item:last-child strong,
body.gd-roadmap-bg .service-number,
body.gd-roadmap-bg .price-card .price{
  text-shadow:0 0 24px rgba(94,231,255,.16);
}
body.gd-roadmap-bg .pill{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035)) !important;
  border-color:rgba(120,195,255,.22) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 14px 38px rgba(0,0,0,.18) !important;
}
body.gd-roadmap-bg input:focus,
body.gd-roadmap-bg select:focus,
body.gd-roadmap-bg textarea:focus{
  border-color:rgba(94,231,255,.70) !important;
  box-shadow:0 0 0 4px rgba(94,231,255,.10), 0 18px 48px rgba(0,0,0,.22) !important;
}
@keyframes cinemaGridBreath{0%,100%{opacity:.42;transform:scale(1)}50%{opacity:.62;transform:scale(1.015)}}
@keyframes cinemaWideSweep{0%,100%{opacity:.34;transform:rotate(-7deg) translateX(-18%)}42%{opacity:.74}68%{transform:rotate(-7deg) translateX(18%)}}
@keyframes cinemaGlowPulse{0%,100%{opacity:.68;transform:translate(-50%,-50%) scale(.98)}50%{opacity:.93;transform:translate(-50%,-50%) scale(1.035)}}
@keyframes cinemaOrbit{to{transform:rotate(360deg)}}
@keyframes cinemaOrbitReverse{to{transform:rotate(-360deg)}}
@keyframes cinemaGlassSheen{0%,70%{transform:translateX(-115%);opacity:0}82%{opacity:.46}100%{transform:translateX(115%);opacity:0}}
@keyframes cinemaBtnSheen{0%,62%{transform:translateX(-125%);opacity:0}74%{opacity:1}100%{transform:translateX(125%);opacity:0}}
@media (max-width:980px){
  body.gd-roadmap-bg::after{left:59% !important;top:38% !important;width:min(82vw, 560px) !important;opacity:.50 !important;}
  body.gd-roadmap-bg .gd-bg-halo{left:59% !important;top:38% !important;width:92vw !important;height:58vw !important;opacity:.68 !important;}
  body.gd-roadmap-bg .gd-orbit{left:59% !important;top:38% !important;width:88vw !important;height:48vw !important;}
  body.gd-roadmap-bg .gd-orbit-b{left:59% !important;top:38% !important;width:66vw !important;height:35vw !important;}
  body.gd-roadmap-bg .site-header{width:min(100% - 24px, 1180px) !important;top:12px !important;border-radius:28px !important;}
  body.gd-roadmap-bg .hero-bottom-item + .hero-bottom-item{border-left:0 !important;border-top:1px solid rgba(103,178,255,.14) !important;}
}
@media (prefers-reduced-motion: reduce){
  body.gd-roadmap-bg .gd-bg-stage::before,
  body.gd-roadmap-bg .gd-bg-stage::after,
  body.gd-roadmap-bg .gd-bg-halo,
  body.gd-roadmap-bg .gd-orbit::before,
  body.gd-roadmap-bg .gd-orbit-b::before,
  body.gd-roadmap-bg .site-header::before,
  body.gd-roadmap-bg .mobile-menu::before,
  body.gd-roadmap-bg .glass::before,
  body.gd-roadmap-bg .hero-bottom-bar::before,
  body.gd-roadmap-bg .trust-grid::before,
  body.gd-roadmap-bg .service-card::before,
  body.gd-roadmap-bg .price-card::before,
  body.gd-roadmap-bg .showcase-card::before,
  body.gd-roadmap-bg .timeline::before,
  body.gd-roadmap-bg .contact-shell::before,
  body.gd-roadmap-bg .faq-list details::before,
  body.gd-roadmap-bg .nav-cta::before,
  body.gd-roadmap-bg .btn-primary::before{animation:none !important;}
}

/* =========================================================
   GIBON DEV — Cinematic Neon Glass v18 (concept #4 alignment)
   Scope: visual skin only. No content/layout structure changes.
   ========================================================= */
:root{
  --neon-bg:#020713;
  --neon-bg-2:#06122a;
  --neon-card:rgba(3,10,27,.72);
  --neon-card-2:rgba(5,14,36,.58);
  --neon-line:rgba(71,151,255,.40);
  --neon-line-hot:rgba(108,238,255,.58);
  --neon-violet:rgba(126,89,255,.55);
  --neon-magenta:rgba(203,76,255,.38);
  --neon-text:#f8fbff;
  --neon-muted:#b9c8ea;
}
body.gd-roadmap-bg{
  background:
    radial-gradient(circle at 74% 18%, rgba(45,105,255,.17), transparent 29%),
    radial-gradient(circle at 22% 72%, rgba(12,211,255,.10), transparent 33%),
    radial-gradient(circle at 82% 84%, rgba(162,63,255,.11), transparent 30%),
    linear-gradient(180deg,#020713 0%,#050d20 48%,#020711 100%) !important;
}
body.gd-roadmap-bg::before{
  background:
    radial-gradient(circle at 70% 28%, rgba(72,157,255,.26), rgba(72,157,255,.07) 24%, transparent 54%),
    radial-gradient(circle at 46% 46%, rgba(89,237,255,.14), rgba(89,237,255,.035) 28%, transparent 58%),
    radial-gradient(circle at 79% 60%, rgba(184,69,255,.16), rgba(184,69,255,.035) 32%, transparent 62%),
    linear-gradient(180deg, rgba(1,5,14,.10), rgba(1,5,14,.74)) !important;
  opacity:1 !important;
}
body.gd-roadmap-bg::after{
  left:66% !important;
  top:38% !important;
  width:min(45vw, 640px) !important;
  opacity:.72 !important;
  background:
    linear-gradient(135deg,
      rgba(103,229,255,.78) 0%,
      rgba(238,248,255,.34) 22%,
      rgba(57,123,255,.58) 52%,
      rgba(126,89,255,.76) 77%,
      rgba(205,76,255,.48) 100%) !important;
  filter:
    drop-shadow(0 0 18px rgba(76,172,255,.32))
    drop-shadow(0 0 46px rgba(42,102,255,.26))
    drop-shadow(0 0 82px rgba(151,74,255,.22)) !important;
}
body.gd-roadmap-bg .gd-bg-stage::before{
  inset:0 !important;
  border-radius:0 !important;
  background:
    linear-gradient(rgba(79,167,255,.052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,167,255,.043) 1px, transparent 1px),
    radial-gradient(circle at 70% 38%, rgba(97,238,255,.10), transparent 40%) !important;
  background-size:90px 90px, 90px 90px, 100% 100% !important;
  opacity:.62 !important;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.88),rgba(0,0,0,.50) 68%,transparent 100%) !important;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.88),rgba(0,0,0,.50) 68%,transparent 100%) !important;
}
body.gd-roadmap-bg .gd-bg-stage::after{
  left:-22%;right:-22%;top:13%;height:54% !important;
  background:
    linear-gradient(108deg, transparent 0 29%, rgba(81,185,255,.17) 43%, rgba(126,89,255,.15) 55%, transparent 70%),
    linear-gradient(112deg, transparent 0 40%, rgba(255,255,255,.055) 50%, transparent 60%) !important;
  filter:blur(22px) !important;
  opacity:.70 !important;
}
body.gd-roadmap-bg .gd-bg-halo{
  left:66% !important;
  top:38% !important;
  width:min(60vw, 820px) !important;
  height:min(38vw, 520px) !important;
  opacity:.82 !important;
  filter:blur(34px) !important;
  background:
    radial-gradient(circle at 45% 50%, rgba(82,225,255,.26), rgba(82,225,255,.07) 35%, transparent 70%),
    radial-gradient(circle at 68% 50%, rgba(121,89,255,.22), rgba(121,89,255,.05) 44%, transparent 74%) !important;
}
body.gd-roadmap-bg .gd-orbit,
body.gd-roadmap-bg .gd-orbit-b{
  display:none !important;
}

/* deep black glass, neon edges like concept #4 */
body.gd-roadmap-bg .site-header,
body.gd-roadmap-bg .mobile-menu,
body.gd-roadmap-bg .glass,
body.gd-roadmap-bg .hero-bottom-bar,
body.gd-roadmap-bg .trust-grid,
body.gd-roadmap-bg .service-card,
body.gd-roadmap-bg .price-card,
body.gd-roadmap-bg .showcase-card,
body.gd-roadmap-bg .timeline,
body.gd-roadmap-bg .timeline-step,
body.gd-roadmap-bg .contact-shell,
body.gd-roadmap-bg .faq-list details,
body.gd-roadmap-bg .page-card,
body.gd-roadmap-bg .custom-section-card,
body.gd-roadmap-bg input,
body.gd-roadmap-bg select,
body.gd-roadmap-bg textarea{
  background:
    radial-gradient(circle at 14% 0%, rgba(70,164,255,.13), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(183,65,255,.14), transparent 44%),
    linear-gradient(180deg, rgba(4,12,32,.88), rgba(2,8,23,.72)) !important;
  border:1px solid rgba(70,148,255,.36) !important;
  box-shadow:
    0 32px 90px rgba(0,0,0,.52),
    0 0 0 1px rgba(255,255,255,.025) inset,
    inset 0 1px 0 rgba(166,220,255,.16),
    inset 0 -1px 0 rgba(126,89,255,.10),
    0 0 28px rgba(28,91,255,.11) !important;
  backdrop-filter:blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(145%) !important;
}
body.gd-roadmap-bg .site-header{
  background:
    linear-gradient(180deg, rgba(6,16,41,.86), rgba(2,8,23,.68)) !important;
  border-color:rgba(68,143,255,.52) !important;
  box-shadow:
    0 18px 52px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(174,226,255,.18),
    0 0 30px rgba(43,106,255,.13) !important;
}
body.gd-roadmap-bg .site-header::after,
body.gd-roadmap-bg .mobile-menu::after,
body.gd-roadmap-bg .glass::after,
body.gd-roadmap-bg .hero-bottom-bar::after,
body.gd-roadmap-bg .trust-grid::after,
body.gd-roadmap-bg .service-card::after,
body.gd-roadmap-bg .price-card::after,
body.gd-roadmap-bg .showcase-card::after,
body.gd-roadmap-bg .timeline::after,
body.gd-roadmap-bg .contact-shell::after,
body.gd-roadmap-bg .faq-list details::after,
body.gd-roadmap-bg .page-card::after,
body.gd-roadmap-bg .custom-section-card::after{
  height:1px !important;
  left:18px !important;
  right:18px !important;
  background:linear-gradient(90deg, transparent, rgba(93,231,255,.72), rgba(111,118,255,.34), rgba(206,76,255,.28), transparent) !important;
  opacity:.82 !important;
}
body.gd-roadmap-bg .site-header::before,
body.gd-roadmap-bg .mobile-menu::before,
body.gd-roadmap-bg .glass::before,
body.gd-roadmap-bg .hero-bottom-bar::before,
body.gd-roadmap-bg .trust-grid::before,
body.gd-roadmap-bg .service-card::before,
body.gd-roadmap-bg .price-card::before,
body.gd-roadmap-bg .showcase-card::before,
body.gd-roadmap-bg .timeline::before,
body.gd-roadmap-bg .contact-shell::before,
body.gd-roadmap-bg .faq-list details::before,
body.gd-roadmap-bg .page-card::before,
body.gd-roadmap-bg .custom-section-card::before{
  background:
    linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,.13) 50%, transparent 62%),
    radial-gradient(circle at 14% 0%, rgba(93,231,255,.12), transparent 34%),
    radial-gradient(circle at 96% 100%, rgba(203,76,255,.12), transparent 36%) !important;
  opacity:.48 !important;
  animation:cinemaGlassSheen 9.5s ease-in-out infinite !important;
}
body.gd-roadmap-bg .point,
body.gd-roadmap-bg .service-card,
body.gd-roadmap-bg .price-card,
body.gd-roadmap-bg .showcase-card,
body.gd-roadmap-bg .faq-list details,
body.gd-roadmap-bg .timeline-step{
  border-color:rgba(60,133,255,.40) !important;
  box-shadow:
    0 24px 72px rgba(0,0,0,.48),
    0 0 34px rgba(50,118,255,.08),
    inset 0 1px 0 rgba(180,226,255,.13) !important;
}
body.gd-roadmap-bg .point:hover,
body.gd-roadmap-bg .service-card:hover,
body.gd-roadmap-bg .price-card:hover,
body.gd-roadmap-bg .showcase-card:hover,
body.gd-roadmap-bg .faq-list details:hover{
  border-color:rgba(98,229,255,.62) !important;
  box-shadow:
    0 34px 92px rgba(0,0,0,.56),
    0 0 50px rgba(63,154,255,.20),
    0 0 80px rgba(150,76,255,.11),
    inset 0 1px 0 rgba(225,247,255,.20) !important;
}
body.gd-roadmap-bg .hero-bottom-bar,
body.gd-roadmap-bg .trust-grid{
  background:
    linear-gradient(180deg, rgba(5,14,35,.86), rgba(2,8,22,.72)),
    radial-gradient(circle at 0% 0%, rgba(93,231,255,.13), transparent 36%),
    radial-gradient(circle at 100% 100%, rgba(203,76,255,.15), transparent 40%) !important;
}
body.gd-roadmap-bg .nav a:not(.nav-cta){
  color:#e7f1ff !important;
  opacity:.92 !important;
}
body.gd-roadmap-bg .nav a:not(.nav-cta):hover,
body.gd-roadmap-bg .mobile-menu a:hover{
  background:rgba(64,148,255,.13) !important;
  box-shadow:0 0 24px rgba(68,153,255,.12) inset, 0 0 24px rgba(103,230,255,.06) !important;
}
body.gd-roadmap-bg .nav-cta,
body.gd-roadmap-bg .btn-primary{
  background:linear-gradient(135deg, #56e7ff 0%, #2d78ff 48%, #7f54ff 72%, #c94dff 100%) !important;
  box-shadow:
    0 16px 44px rgba(64,154,255,.30),
    0 0 54px rgba(126,89,255,.22),
    inset 0 1px 0 rgba(255,255,255,.50) !important;
}
body.gd-roadmap-bg .btn-secondary{
  background:linear-gradient(180deg, rgba(6,15,38,.68), rgba(2,8,22,.62)) !important;
  border-color:rgba(82,168,255,.36) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 24px rgba(72,148,255,.08) !important;
}
body.gd-roadmap-bg .mobile-toggle{
  background:
    radial-gradient(circle at 32% 14%, rgba(255,255,255,.20), transparent 36%),
    linear-gradient(180deg, rgba(7,17,44,.92), rgba(3,9,24,.78)) !important;
  border-color:rgba(96,189,255,.48) !important;
  box-shadow:0 18px 48px rgba(0,0,0,.44), 0 0 34px rgba(58,144,255,.16), inset 0 1px 0 rgba(255,255,255,.16) !important;
}
body.gd-roadmap-bg .mobile-menu{
  border-color:rgba(73,151,255,.46) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(93,231,255,.13), transparent 36%),
    radial-gradient(circle at 92% 100%, rgba(173,76,255,.13), transparent 36%),
    linear-gradient(180deg, rgba(6,16,40,.94), rgba(2,8,22,.90)) !important;
}
body.gd-roadmap-bg .mobile-menu a{
  background:linear-gradient(180deg, rgba(34,58,103,.45), rgba(12,28,62,.34)) !important;
  border-color:rgba(92,172,255,.30) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 12px 24px rgba(0,0,0,.18) !important;
}
body.gd-roadmap-bg .pill{
  background:linear-gradient(180deg, rgba(10,23,52,.72), rgba(4,12,30,.58)) !important;
  border-color:rgba(88,166,255,.44) !important;
  box-shadow:0 18px 44px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.14), 0 0 30px rgba(83,166,255,.08) !important;
}
body.gd-roadmap-bg .hero-copy h1 span,
body.gd-roadmap-bg .section-head h2 span,
body.gd-roadmap-bg .contact-shell h2 span{
  background:linear-gradient(92deg,#63eaff 0%,#4e93ff 36%,#8b63ff 65%,#ff5ed1 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
}
@media (max-width:980px){
  body.gd-roadmap-bg::after{
    left:65% !important;
    top:36% !important;
    width:min(78vw, 520px) !important;
    opacity:.58 !important;
  }
  body.gd-roadmap-bg .site-header{
    border-radius:24px !important;
  }
  body.gd-roadmap-bg .mobile-menu{
    border-radius:28px !important;
    margin-top:14px !important;
  }
}

/* === v19 Cinematic Neon Glass refinement: closer to concept #4 === */
@keyframes v19EdgePulse{0%,100%{opacity:.74;filter:blur(.2px)}50%{opacity:1;filter:blur(0)}}
@keyframes v19AuroraDrift{0%,100%{transform:translate3d(-2%,0,0) scale(1)}50%{transform:translate3d(2%,-1%,0) scale(1.04)}}
@keyframes v19GlassSweep{0%,72%,100%{transform:translateX(-130%) skewX(-15deg);opacity:0}80%{opacity:.85}92%{transform:translateX(130%) skewX(-15deg);opacity:0}}

body.gd-roadmap-bg{
  background:#020713 !important;
}
body.gd-roadmap-bg::before{
  background:
    radial-gradient(circle at 74% 24%, rgba(42,116,255,.22), rgba(42,116,255,.055) 24%, transparent 50%),
    radial-gradient(circle at 88% 72%, rgba(198,60,255,.18), rgba(198,60,255,.040) 28%, transparent 58%),
    radial-gradient(circle at 28% 20%, rgba(57,232,255,.12), rgba(57,232,255,.028) 26%, transparent 60%),
    linear-gradient(180deg, #020713 0%, #050b18 44%, #020712 100%) !important;
  opacity:1 !important;
  animation:v19AuroraDrift 14s ease-in-out infinite !important;
}
body.gd-roadmap-bg .gd-bg-stage::before{
  background:
    linear-gradient(rgba(72,155,255,.040) 1px, transparent 1px),
    linear-gradient(90deg, rgba(72,155,255,.034) 1px, transparent 1px),
    radial-gradient(circle at 72% 34%, rgba(52,222,255,.12), transparent 34%),
    radial-gradient(circle at 88% 69%, rgba(194,62,255,.10), transparent 34%) !important;
  background-size:104px 104px,104px 104px,100% 100%,100% 100% !important;
  opacity:.72 !important;
}
body.gd-roadmap-bg .gd-bg-stage::after{
  left:34% !important;
  right:-24% !important;
  top:8% !important;
  height:56% !important;
  opacity:.75 !important;
  background:
    linear-gradient(112deg, transparent 0 35%, rgba(65,164,255,.18) 45%, rgba(132,90,255,.14) 56%, transparent 72%),
    linear-gradient(104deg, transparent 0 42%, rgba(255,255,255,.060) 50%, transparent 61%) !important;
  filter:blur(24px) !important;
}
body.gd-roadmap-bg::after{
  left:72% !important;
  top:34% !important;
  width:min(34vw, 520px) !important;
  opacity:.82 !important;
  background:linear-gradient(135deg,
    rgba(83,219,255,.90) 0%,
    rgba(186,229,255,.50) 24%,
    rgba(63,132,255,.72) 50%,
    rgba(126,79,255,.88) 74%,
    rgba(211,68,255,.70) 100%) !important;
  filter:
    drop-shadow(0 0 10px rgba(93,230,255,.30))
    drop-shadow(0 0 30px rgba(44,122,255,.34))
    drop-shadow(0 0 62px rgba(144,78,255,.31))
    drop-shadow(0 0 96px rgba(208,70,255,.16)) !important;
}
body.gd-roadmap-bg .gd-bg-halo{
  left:72% !important;
  top:34% !important;
  width:min(48vw,720px) !important;
  height:min(32vw,460px) !important;
  opacity:.92 !important;
  filter:blur(32px) !important;
  background:
    radial-gradient(circle at 42% 48%, rgba(76,225,255,.24), transparent 48%),
    radial-gradient(circle at 68% 56%, rgba(126,85,255,.25), transparent 50%),
    radial-gradient(circle at 86% 70%, rgba(226,76,255,.13), transparent 50%) !important;
}

body.gd-roadmap-bg .site-header,
body.gd-roadmap-bg .mobile-menu,
body.gd-roadmap-bg .glass,
body.gd-roadmap-bg .hero-bottom-bar,
body.gd-roadmap-bg .trust-grid,
body.gd-roadmap-bg .service-card,
body.gd-roadmap-bg .price-card,
body.gd-roadmap-bg .showcase-card,
body.gd-roadmap-bg .timeline,
body.gd-roadmap-bg .timeline-step,
body.gd-roadmap-bg .contact-shell,
body.gd-roadmap-bg .faq-list details,
body.gd-roadmap-bg .page-card,
body.gd-roadmap-bg .custom-section-card,
body.gd-roadmap-bg input,
body.gd-roadmap-bg select,
body.gd-roadmap-bg textarea{
  background:
    radial-gradient(circle at 12% -8%, rgba(73,219,255,.18), transparent 30%),
    radial-gradient(circle at 108% 110%, rgba(210,68,255,.18), transparent 36%),
    linear-gradient(180deg, rgba(3,10,28,.94), rgba(3,8,23,.82)) !important;
  border:1px solid rgba(61,150,255,.48) !important;
  box-shadow:
    0 28px 80px rgba(0,0,0,.58),
    0 0 0 1px rgba(255,255,255,.030) inset,
    inset 0 1px 0 rgba(177,230,255,.16),
    inset 0 -1px 0 rgba(190,72,255,.13),
    0 0 26px rgba(41,122,255,.18),
    0 0 58px rgba(134,75,255,.080) !important;
  backdrop-filter:blur(20px) saturate(170%) !important;
  -webkit-backdrop-filter:blur(20px) saturate(170%) !important;
}
body.gd-roadmap-bg .site-header{
  background:
    radial-gradient(circle at 14% 0%, rgba(73,219,255,.16), transparent 32%),
    linear-gradient(180deg, rgba(4,13,34,.90), rgba(2,7,20,.78)) !important;
  border-color:rgba(71,160,255,.58) !important;
  box-shadow:
    0 20px 60px rgba(0,0,0,.56),
    inset 0 1px 0 rgba(205,242,255,.20),
    0 0 34px rgba(53,140,255,.18),
    0 0 78px rgba(128,79,255,.10) !important;
}
body.gd-roadmap-bg .site-header::after,
body.gd-roadmap-bg .mobile-menu::after,
body.gd-roadmap-bg .glass::after,
body.gd-roadmap-bg .hero-bottom-bar::after,
body.gd-roadmap-bg .trust-grid::after,
body.gd-roadmap-bg .service-card::after,
body.gd-roadmap-bg .price-card::after,
body.gd-roadmap-bg .showcase-card::after,
body.gd-roadmap-bg .timeline::after,
body.gd-roadmap-bg .contact-shell::after,
body.gd-roadmap-bg .faq-list details::after,
body.gd-roadmap-bg .page-card::after,
body.gd-roadmap-bg .custom-section-card::after{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  left:18px !important;
  right:18px !important;
  height:1px !important;
  background:linear-gradient(90deg, transparent, rgba(97,235,255,.95), rgba(89,118,255,.50), rgba(222,72,255,.42), transparent) !important;
  opacity:.95 !important;
  pointer-events:none !important;
  animation:v19EdgePulse 4.8s ease-in-out infinite !important;
}
body.gd-roadmap-bg .site-header::before,
body.gd-roadmap-bg .mobile-menu::before,
body.gd-roadmap-bg .glass::before,
body.gd-roadmap-bg .hero-bottom-bar::before,
body.gd-roadmap-bg .trust-grid::before,
body.gd-roadmap-bg .service-card::before,
body.gd-roadmap-bg .price-card::before,
body.gd-roadmap-bg .showcase-card::before,
body.gd-roadmap-bg .timeline::before,
body.gd-roadmap-bg .contact-shell::before,
body.gd-roadmap-bg .faq-list details::before,
body.gd-roadmap-bg .page-card::before,
body.gd-roadmap-bg .custom-section-card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  pointer-events:none !important;
  background:
    linear-gradient(105deg, transparent 0 40%, rgba(255,255,255,.16) 50%, transparent 60%),
    radial-gradient(circle at 12% 0%, rgba(91,235,255,.15), transparent 35%),
    radial-gradient(circle at 100% 100%, rgba(218,74,255,.13), transparent 40%) !important;
  opacity:.52 !important;
  transform:translateX(-125%) skewX(-15deg) !important;
  animation:v19GlassSweep 10.5s ease-in-out infinite !important;
}
body.gd-roadmap-bg .point,
body.gd-roadmap-bg .service-card,
body.gd-roadmap-bg .price-card,
body.gd-roadmap-bg .showcase-card,
body.gd-roadmap-bg .faq-list details,
body.gd-roadmap-bg .timeline-step,
body.gd-roadmap-bg .hero-bottom-item{
  background:
    radial-gradient(circle at 16% 0%, rgba(93,231,255,.13), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(200,76,255,.14), transparent 40%),
    linear-gradient(180deg, rgba(5,13,34,.86), rgba(3,8,22,.76)) !important;
  border-color:rgba(66,151,255,.46) !important;
  box-shadow:
    0 22px 64px rgba(0,0,0,.50),
    0 0 34px rgba(55,138,255,.12),
    0 0 56px rgba(186,70,255,.055),
    inset 0 1px 0 rgba(205,241,255,.15) !important;
}
body.gd-roadmap-bg .hero-bottom-bar,
body.gd-roadmap-bg .trust-grid{
  background:
    radial-gradient(circle at 0% 0%, rgba(93,231,255,.14), transparent 32%),
    radial-gradient(circle at 100% 100%, rgba(216,74,255,.18), transparent 42%),
    linear-gradient(180deg, rgba(4,12,31,.91), rgba(2,7,20,.78)) !important;
  border-color:rgba(78,160,255,.50) !important;
}
body.gd-roadmap-bg .nav-cta,
body.gd-roadmap-bg .btn-primary,
body.gd-roadmap-bg .preview-topbar-actions a.active{
  background:linear-gradient(135deg, #63eaff 0%, #2b85ff 46%, #7759ff 70%, #d84cff 100%) !important;
  color:#050712 !important;
  box-shadow:
    0 18px 50px rgba(56,149,255,.34),
    0 0 62px rgba(126,89,255,.25),
    inset 0 1px 0 rgba(255,255,255,.60) !important;
}
body.gd-roadmap-bg .btn-secondary,
body.gd-roadmap-bg .mobile-menu a,
body.gd-roadmap-bg .pill{
  background:linear-gradient(180deg, rgba(8,18,44,.74), rgba(3,9,25,.66)) !important;
  border-color:rgba(83,169,255,.42) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11), 0 0 24px rgba(68,151,255,.10) !important;
}
body.gd-roadmap-bg .hero-copy h1 span,
body.gd-roadmap-bg .section-head h2 span,
body.gd-roadmap-bg .contact-shell h2 span{
  background:linear-gradient(92deg,#63eaff 0%,#4a9bff 34%,#9b6cff 63%,#ff55d6 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
}
@media (max-width:980px){
  body.gd-roadmap-bg::after{
    left:72% !important;
    top:35% !important;
    width:min(66vw, 500px) !important;
    opacity:.64 !important;
  }
  body.gd-roadmap-bg .gd-bg-halo{
    left:72% !important;
    top:35% !important;
    width:min(82vw, 620px) !important;
    height:min(54vw, 420px) !important;
    opacity:.80 !important;
  }
  body.gd-roadmap-bg .site-header,
  body.gd-roadmap-bg .mobile-menu{
    border-radius:24px !important;
  }
}

/* === v19.4 ONLY FIX: pricing cards readability + centered pinned GD === */
/* Keep the cinematic style, only prevent price-card decorative layers from darkening content */
body.gd-roadmap-bg .price-card,
body.gd-roadmap-bg .price-card.featured{
  color:#f7fbff !important;
  opacity:1 !important;
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(93,231,255,.14), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(206,76,255,.16), transparent 42%),
    linear-gradient(180deg, rgba(4,12,32,.92), rgba(3,8,24,.82)) !important;
  border-color:rgba(86,176,255,.50) !important;
}
body.gd-roadmap-bg .price-card.featured p,
body.gd-roadmap-bg .price-card.featured ul,
body.gd-roadmap-bg .price-card.featured li,
body.gd-roadmap-bg .price-card p,
body.gd-roadmap-bg .price-card ul,
body.gd-roadmap-bg .price-card li{
  color:#dce7ff !important;
  opacity:1 !important;
}
body.gd-roadmap-bg .price-card h3,
body.gd-roadmap-bg .price-card .price,
body.gd-roadmap-bg .price-card .pill{
  color:#ffffff !important;
  opacity:1 !important;
}
body.gd-roadmap-bg .price-card > *{
  position:relative !important;
  z-index:3 !important;
  opacity:1 !important;
}
body.gd-roadmap-bg .price-card::before{
  z-index:1 !important;
  opacity:.18 !important;
  mix-blend-mode:screen !important;
  pointer-events:none !important;
}
body.gd-roadmap-bg .price-card::after{
  z-index:1 !important;
  opacity:.55 !important;
  pointer-events:none !important;
}
/* Pin the GD exactly in the visual center and keep it behind content */
body.gd-roadmap-bg::after{
  left:50% !important;
  top:50% !important;
  transform:translate3d(-50%,-50%,0) !important;
  width:min(74vw, 820px) !important;
  aspect-ratio:271 / 235 !important;
  opacity:.58 !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:linear-gradient(135deg,
    rgba(95,232,255,.84) 0%,
    rgba(191,233,255,.42) 24%,
    rgba(70,137,255,.70) 50%,
    rgba(126,79,255,.82) 74%,
    rgba(214,74,255,.60) 100%) !important;
  -webkit-mask:url('../assets/gd-monogram-exact.svg') center / contain no-repeat !important;
          mask:url('../assets/gd-monogram-exact.svg') center / contain no-repeat !important;
  filter:
    drop-shadow(0 0 12px rgba(93,230,255,.22))
    drop-shadow(0 0 34px rgba(44,122,255,.28))
    drop-shadow(0 0 70px rgba(144,78,255,.24)) !important;
  will-change:auto !important;
  animation:none !important;
}
body.gd-roadmap-bg .gd-bg-halo{
  left:50% !important;
  top:50% !important;
  transform:translate3d(-50%,-50%,0) !important;
  width:min(88vw, 960px) !important;
  height:min(56vw, 620px) !important;
  opacity:.74 !important;
  z-index:0 !important;
  pointer-events:none !important;
}
@media (max-width:980px){
  body.gd-roadmap-bg::after{
    left:50% !important;
    top:50% !important;
    width:min(112vw, 680px) !important;
    opacity:.42 !important;
  }
  body.gd-roadmap-bg .gd-bg-halo{
    left:50% !important;
    top:50% !important;
    width:120vw !important;
    height:76vw !important;
    opacity:.62 !important;
  }
}

/* === v19.5 ONLY requested fixes: labels, GD size, pricing colors, navbar material === */
/* 1) Prevent pill labels from overlapping titles/text in cards */
body.gd-roadmap-bg .pill,
body.gd-roadmap-bg .showcase-copy .pill,
body.gd-roadmap-bg .price-card .pill{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:max-content !important;
  max-width:100% !important;
  margin:0 0 18px 0 !important;
  position:relative !important;
  z-index:4 !important;
  line-height:1.15 !important;
  white-space:normal !important;
}
body.gd-roadmap-bg .showcase-copy h3,
body.gd-roadmap-bg .price-card h3{
  position:relative !important;
  z-index:4 !important;
  margin-top:0 !important;
  clear:both !important;
}
body.gd-roadmap-bg .showcase-copy > *,
body.gd-roadmap-bg .price-card > *{
  position:relative !important;
  z-index:4 !important;
}

/* 2) Restore the GD background size/position to the clean good version, while keeping v19 colors */
body.gd-roadmap-bg::after{
  left:50% !important;
  top:46% !important;
  transform:translate3d(-50%,-50%,0) !important;
  width:min(58vw, 780px) !important;
  aspect-ratio:271 / 235 !important;
  opacity:.30 !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:linear-gradient(135deg,
    rgba(108,235,255,.58) 0%,
    rgba(182,226,255,.32) 25%,
    rgba(70,137,255,.58) 50%,
    rgba(130,82,255,.68) 76%,
    rgba(206,78,255,.44) 100%) !important;
  -webkit-mask:url('../assets/gd-monogram-exact.svg') center / contain no-repeat !important;
          mask:url('../assets/gd-monogram-exact.svg') center / contain no-repeat !important;
  filter:
    drop-shadow(0 0 16px rgba(94,231,255,.18))
    drop-shadow(0 0 48px rgba(52,125,255,.20))
    drop-shadow(0 0 86px rgba(148,84,255,.16)) !important;
  animation:none !important;
  will-change:auto !important;
}
body.gd-roadmap-bg .gd-bg-halo{
  left:50% !important;
  top:46% !important;
  transform:translate3d(-50%,-50%,0) !important;
  width:min(70vw, 980px) !important;
  height:min(48vw, 660px) !important;
  opacity:.66 !important;
  filter:blur(30px) !important;
  pointer-events:none !important;
}

/* 3) Pricing cards: keep cinematic glass, but give clear tier color character */
body.gd-roadmap-bg .pricing-grid .price-card{
  background:
    radial-gradient(circle at 14% 0%, rgba(180,205,226,.11), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(82,118,160,.10), transparent 42%),
    linear-gradient(180deg, rgba(10,15,25,.94), rgba(7,11,20,.86)) !important;
  border-color:rgba(151,174,205,.36) !important;
  box-shadow:
    0 28px 76px rgba(0,0,0,.56),
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 32px rgba(92,162,255,.09) !important;
}
body.gd-roadmap-bg .pricing-grid .price-card.featured{
  background:
    radial-gradient(circle at 18% 0%, rgba(255,221,132,.28), transparent 38%),
    radial-gradient(circle at 94% 100%, rgba(255,85,214,.20), transparent 42%),
    linear-gradient(180deg, rgba(28,19,8,.96), rgba(10,10,24,.88)) !important;
  border-color:rgba(255,207,92,.68) !important;
  box-shadow:
    0 36px 96px rgba(0,0,0,.60),
    0 0 42px rgba(255,191,73,.18),
    0 0 70px rgba(255,85,214,.12),
    inset 0 1px 0 rgba(255,245,206,.24) !important;
}
body.gd-roadmap-bg .pricing-grid .price-card.featured .pill{
  color:#190f03 !important;
  background:linear-gradient(135deg, #ffe49a 0%, #ffb84d 48%, #ff67d7 100%) !important;
  border-color:rgba(255,233,164,.75) !important;
  box-shadow:0 14px 42px rgba(255,190,74,.20), inset 0 1px 0 rgba(255,255,255,.55) !important;
}
body.gd-roadmap-bg .pricing-grid .price-card:not(.featured) .pill{
  color:#eaf4ff !important;
  background:linear-gradient(180deg, rgba(180,198,225,.15), rgba(128,150,180,.07)) !important;
  border-color:rgba(166,195,230,.30) !important;
}

/* 4) Navbar: calmer premium cinematic bar, less cheap glow, same layout/behavior */
body.gd-roadmap-bg .site-header{
  background:
    radial-gradient(circle at 8% 0%, rgba(94,231,255,.13), transparent 30%),
    radial-gradient(circle at 94% 100%, rgba(129,85,255,.10), transparent 38%),
    linear-gradient(180deg, rgba(7,16,37,.88), rgba(3,9,24,.78)) !important;
  border:1px solid rgba(108,185,255,.30) !important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(224,246,255,.14),
    0 0 36px rgba(71,151,255,.10) !important;
}
body.gd-roadmap-bg .site-header::before{
  opacity:.22 !important;
  animation:cinemaGlassSheen 13s ease-in-out infinite !important;
}
body.gd-roadmap-bg .site-header::after{
  left:28px !important;
  right:28px !important;
  opacity:.52 !important;
  background:linear-gradient(90deg, transparent, rgba(103,227,255,.68), rgba(127,105,255,.30), transparent) !important;
}
body.gd-roadmap-bg .mobile-toggle{
  background:
    radial-gradient(circle at 28% 12%, rgba(255,255,255,.16), transparent 30%),
    linear-gradient(180deg, rgba(13,29,61,.82), rgba(6,15,35,.72)) !important;
  border-color:rgba(127,194,255,.34) !important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.13),
    0 0 24px rgba(94,231,255,.08) !important;
}

@media (max-width:980px){
  body.gd-roadmap-bg::after{
    left:50% !important;
    top:42% !important;
    width:min(78vw, 520px) !important;
    opacity:.28 !important;
  }
  body.gd-roadmap-bg .gd-bg-halo{
    left:50% !important;
    top:42% !important;
    width:88vw !important;
    height:56vw !important;
    opacity:.56 !important;
  }
  body.gd-roadmap-bg .showcase-copy .pill,
  body.gd-roadmap-bg .price-card .pill{
    margin-bottom:20px !important;
  }
  body.gd-roadmap-bg .price-card{
    padding-top:26px !important;
  }
}

/* === v21 Luxury Champagne Glass System: panels + navbar only ===
   Scope: visual material system only. No content/layout/HTML changes. */
body.gd-roadmap-bg{
  --lux-ink:#050911;
  --lux-panel-a:rgba(8,13,24,.88);
  --lux-panel-b:rgba(11,18,32,.78);
  --lux-panel-c:rgba(18,25,38,.66);
  --lux-line:rgba(246,226,178,.30);
  --lux-line-soft:rgba(255,255,255,.12);
  --lux-gold:#f6d98f;
  --lux-gold-2:#d7a84b;
  --lux-cream:#fff6db;
  --lux-ice:#eaf7ff;
  --lux-cyan:#71e5ff;
  --lux-violet:#8b7cff;
}

@keyframes luxSheen {
  0%, 100% { transform:translateX(-135%) skewX(-14deg); opacity:0; }
  18% { opacity:.34; }
  52% { opacity:.18; }
  72% { transform:translateX(135%) skewX(-14deg); opacity:0; }
}
@keyframes luxBreath {
  0%,100% { box-shadow:0 28px 74px rgba(0,0,0,.54), inset 0 1px 0 rgba(255,255,255,.13), 0 0 0 1px rgba(246,217,143,.18), 0 0 30px rgba(113,229,255,.06); }
  50% { box-shadow:0 32px 86px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px rgba(246,217,143,.26), 0 0 42px rgba(246,217,143,.09); }
}

/* Core cards/panels: premium dark luxury glass with champagne edges */
body.gd-roadmap-bg .glass,
body.gd-roadmap-bg .service-card,
body.gd-roadmap-bg .showcase-card,
body.gd-roadmap-bg .price-card,
body.gd-roadmap-bg .timeline,
body.gd-roadmap-bg .contact-shell,
body.gd-roadmap-bg .trust-grid,
body.gd-roadmap-bg .footer-wrap,
body.gd-roadmap-bg .point,
body.gd-roadmap-bg .hero-bottom-bar,
body.gd-roadmap-bg .faq-list details,
body.gd-roadmap-bg .page-card,
body.gd-roadmap-bg .custom-section-card,
body.gd-roadmap-bg .mobile-menu{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 14% 0%, rgba(255,244,205,.115), transparent 30%),
    radial-gradient(circle at 92% 100%, rgba(114,229,255,.075), transparent 34%),
    radial-gradient(circle at 100% 18%, rgba(218,167,77,.065), transparent 36%),
    linear-gradient(145deg, rgba(9,14,26,.91), rgba(7,10,20,.77) 52%, rgba(15,18,28,.83)) !important;
  border:1px solid rgba(246,217,143,.22) !important;
  box-shadow:
    0 28px 74px rgba(0,0,0,.54),
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -1px 0 rgba(246,217,143,.055),
    0 0 0 1px rgba(113,229,255,.055),
    0 0 36px rgba(246,217,143,.065) !important;
  backdrop-filter:blur(18px) saturate(128%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(128%) !important;
}

body.gd-roadmap-bg .glass::before,
body.gd-roadmap-bg .service-card::before,
body.gd-roadmap-bg .showcase-card::before,
body.gd-roadmap-bg .price-card::before,
body.gd-roadmap-bg .timeline::before,
body.gd-roadmap-bg .contact-shell::before,
body.gd-roadmap-bg .trust-grid::before,
body.gd-roadmap-bg .footer-wrap::before,
body.gd-roadmap-bg .point::before,
body.gd-roadmap-bg .hero-bottom-bar::before,
body.gd-roadmap-bg .faq-list details::before,
body.gd-roadmap-bg .page-card::before,
body.gd-roadmap-bg .custom-section-card::before,
body.gd-roadmap-bg .mobile-menu::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(120deg, transparent 0 35%, rgba(255,255,255,.115) 47%, rgba(246,217,143,.11) 52%, transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 28%);
  opacity:.46;
}
body.gd-roadmap-bg .glass::after,
body.gd-roadmap-bg .service-card::after,
body.gd-roadmap-bg .showcase-card::after,
body.gd-roadmap-bg .price-card::after,
body.gd-roadmap-bg .timeline::after,
body.gd-roadmap-bg .contact-shell::after,
body.gd-roadmap-bg .trust-grid::after,
body.gd-roadmap-bg .footer-wrap::after,
body.gd-roadmap-bg .point::after,
body.gd-roadmap-bg .hero-bottom-bar::after,
body.gd-roadmap-bg .faq-list details::after,
body.gd-roadmap-bg .page-card::after,
body.gd-roadmap-bg .custom-section-card::after,
body.gd-roadmap-bg .mobile-menu::after{
  content:"";
  position:absolute;
  inset:1px;
  z-index:-1;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(135deg, rgba(113,229,255,.18), transparent 22%, transparent 68%, rgba(246,217,143,.15));
  opacity:.62;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding:1px;
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}

/* Subtle living material on larger cards only */
body.gd-roadmap-bg .showcase-card,
body.gd-roadmap-bg .price-card,
body.gd-roadmap-bg .timeline,
body.gd-roadmap-bg .contact-shell,
body.gd-roadmap-bg .hero-bottom-bar,
body.gd-roadmap-bg .trust-grid{
  animation:luxBreath 9s ease-in-out infinite;
}

/* Navbar: completely new luxury capsule, less blue/neon, more executive champagne glass */
body.gd-roadmap-bg .site-header{
  position:sticky;
  top:max(16px, env(safe-area-inset-top));
  z-index:50;
  overflow:hidden;
  background:
    radial-gradient(circle at 9% 0%, rgba(255,245,215,.14), transparent 30%),
    radial-gradient(circle at 86% 105%, rgba(113,229,255,.10), transparent 34%),
    linear-gradient(145deg, rgba(11,17,31,.88), rgba(6,10,20,.79) 58%, rgba(19,19,27,.84)) !important;
  border:1px solid rgba(246,217,143,.32) !important;
  box-shadow:
    0 26px 80px rgba(0,0,0,.48),
    0 0 0 1px rgba(255,255,255,.055),
    0 0 46px rgba(246,217,143,.09),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
  backdrop-filter:blur(22px) saturate(136%) !important;
  -webkit-backdrop-filter:blur(22px) saturate(136%) !important;
}
body.gd-roadmap-bg .site-header::before{
  content:"" !important;
  position:absolute !important;
  inset:-1px !important;
  pointer-events:none !important;
  background:linear-gradient(110deg, transparent 0 34%, rgba(255,255,255,.16) 45%, rgba(246,217,143,.14) 51%, transparent 66%) !important;
  opacity:.72 !important;
  transform:translateX(-120%) skewX(-12deg);
  animation:luxSheen 8s ease-in-out infinite !important;
}
body.gd-roadmap-bg .site-header::after{
  content:"" !important;
  position:absolute !important;
  left:28px !important;
  right:28px !important;
  bottom:0 !important;
  height:1px !important;
  background:linear-gradient(90deg, transparent, rgba(246,217,143,.75), rgba(113,229,255,.42), transparent) !important;
  opacity:.72 !important;
}
body.gd-roadmap-bg .brand-logo img,
body.gd-roadmap-bg .site-logo img{
  filter:drop-shadow(0 7px 20px rgba(0,0,0,.34)) drop-shadow(0 0 16px rgba(246,217,143,.08));
}
body.gd-roadmap-bg .nav a,
body.gd-roadmap-bg .mobile-menu a{
  color:rgba(255,250,235,.88) !important;
}
body.gd-roadmap-bg .nav a:hover,
body.gd-roadmap-bg .mobile-menu a:hover{
  color:#fff8df !important;
  text-shadow:0 0 18px rgba(246,217,143,.24);
}

/* Mobile menu button: luxury button, not flat neon */
body.gd-roadmap-bg .mobile-toggle{
  background:
    radial-gradient(circle at 30% 15%, rgba(255,255,255,.20), transparent 31%),
    linear-gradient(145deg, rgba(28,31,41,.88), rgba(7,12,24,.76)) !important;
  border:1px solid rgba(246,217,143,.28) !important;
  box-shadow:
    0 18px 48px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 24px rgba(246,217,143,.09) !important;
}
body.gd-roadmap-bg .mobile-toggle span{
  background:#fff6df !important;
  box-shadow:0 0 14px rgba(246,217,143,.25);
}

/* Pills/labels: stop giant overlapping label look; make them elegant and contained */
body.gd-roadmap-bg .pill,
body.gd-roadmap-bg .eyebrow,
body.gd-roadmap-bg .service-number,
body.gd-roadmap-bg .timeline-step b{
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.16), transparent 34%),
    linear-gradient(135deg, rgba(246,217,143,.16), rgba(113,229,255,.07) 55%, rgba(255,255,255,.04)) !important;
  border:1px solid rgba(246,217,143,.26) !important;
  color:rgba(255,247,224,.94) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 10px 30px rgba(0,0,0,.25) !important;
}
body.gd-roadmap-bg .showcase-copy .pill,
body.gd-roadmap-bg .price-card .pill{
  display:inline-flex !important;
  max-width:100% !important;
  margin:0 0 24px 0 !important;
  position:relative !important;
  z-index:5 !important;
  white-space:normal !important;
  line-height:1.15 !important;
}
body.gd-roadmap-bg .showcase-copy h3,
body.gd-roadmap-bg .price-card h3,
body.gd-roadmap-bg .timeline-step h3{
  position:relative !important;
  z-index:5 !important;
  clear:both !important;
}

/* Pricing tiers: refined champagne system, not random blue/purple */
body.gd-roadmap-bg .pricing-grid .price-card{
  background:
    radial-gradient(circle at 16% 0%, rgba(255,255,255,.10), transparent 32%),
    radial-gradient(circle at 100% 100%, rgba(246,217,143,.10), transparent 42%),
    linear-gradient(145deg, rgba(9,13,23,.94), rgba(7,10,18,.82)) !important;
  border-color:rgba(218,218,214,.24) !important;
}
body.gd-roadmap-bg .pricing-grid .price-card:nth-child(1){
  border-color:rgba(218,218,214,.32) !important;
  box-shadow:0 30px 76px rgba(0,0,0,.54), inset 0 1px 0 rgba(255,255,255,.14), 0 0 34px rgba(255,255,255,.045) !important;
}
body.gd-roadmap-bg .pricing-grid .price-card.featured,
body.gd-roadmap-bg .pricing-grid .price-card:nth-child(2){
  background:
    radial-gradient(circle at 18% 0%, rgba(255,233,168,.30), transparent 36%),
    radial-gradient(circle at 95% 100%, rgba(255,124,201,.18), transparent 42%),
    linear-gradient(145deg, rgba(27,19,8,.96), rgba(9,9,18,.88)) !important;
  border-color:rgba(246,217,143,.70) !important;
  box-shadow:
    0 38px 96px rgba(0,0,0,.62),
    0 0 46px rgba(246,217,143,.18),
    0 0 70px rgba(255,120,200,.10),
    inset 0 1px 0 rgba(255,249,223,.24) !important;
}
body.gd-roadmap-bg .pricing-grid .price-card:nth-child(3){
  background:
    radial-gradient(circle at 20% 0%, rgba(203,226,238,.16), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(132,155,176,.10), transparent 42%),
    linear-gradient(145deg, rgba(12,16,24,.94), rgba(8,11,18,.84)) !important;
  border-color:rgba(187,204,213,.34) !important;
}
body.gd-roadmap-bg .pricing-grid .price-card.featured .pill,
body.gd-roadmap-bg .pricing-grid .price-card:nth-child(2) .pill{
  color:#1b1206 !important;
  background:linear-gradient(135deg, #fff0ba 0%, #f0bf58 47%, #ff84cf 100%) !important;
  border-color:rgba(255,239,181,.84) !important;
  box-shadow:0 14px 38px rgba(246,190,84,.22), inset 0 1px 0 rgba(255,255,255,.55) !important;
}

/* Process/timeline cards: avoid oversized/overlapping inner shapes */
body.gd-roadmap-bg .timeline-step,
body.gd-roadmap-bg .showcase-copy,
body.gd-roadmap-bg .price-card{
  position:relative !important;
  z-index:2 !important;
}
body.gd-roadmap-bg .timeline-step::before,
body.gd-roadmap-bg .timeline-step::after{
  pointer-events:none !important;
  z-index:0 !important;
  opacity:.32 !important;
}
body.gd-roadmap-bg .timeline-step > *,
body.gd-roadmap-bg .service-card > *,
body.gd-roadmap-bg .showcase-card > *,
body.gd-roadmap-bg .price-card > *,
body.gd-roadmap-bg .faq-list details > *,
body.gd-roadmap-bg .contact-shell > *{
  position:relative;
  z-index:3;
}

/* Buttons: gold/cyan premium instead of hard candy neon */
body.gd-roadmap-bg .btn-primary,
body.gd-roadmap-bg .nav-cta{
  background:
    linear-gradient(135deg, #70e4ff 0%, #8e83ff 42%, #f5c55d 100%) !important;
  color:#050912 !important;
  box-shadow:
    0 18px 52px rgba(78,174,255,.22),
    0 0 30px rgba(246,217,143,.18),
    inset 0 1px 0 rgba(255,255,255,.52) !important;
}
body.gd-roadmap-bg .btn-secondary,
body.gd-roadmap-bg .btn-ghost{
  background:linear-gradient(145deg, rgba(10,15,27,.82), rgba(5,9,18,.66)) !important;
  border:1px solid rgba(246,217,143,.22) !important;
  color:#fff5de !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 14px 40px rgba(0,0,0,.24) !important;
}

/* Keep GD background present but less intrusive behind panels */
body.gd-roadmap-bg::after{
  opacity:.22 !important;
  width:min(55vw, 760px) !important;
  filter:drop-shadow(0 0 18px rgba(113,229,255,.14)) drop-shadow(0 0 56px rgba(246,217,143,.08)) !important;
}

@media (max-width:980px){
  body.gd-roadmap-bg .site-header{
    border-color:rgba(246,217,143,.28) !important;
    box-shadow:0 22px 62px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.15), 0 0 32px rgba(246,217,143,.065) !important;
  }
  body.gd-roadmap-bg .glass,
  body.gd-roadmap-bg .service-card,
  body.gd-roadmap-bg .showcase-card,
  body.gd-roadmap-bg .price-card,
  body.gd-roadmap-bg .timeline,
  body.gd-roadmap-bg .contact-shell,
  body.gd-roadmap-bg .trust-grid,
  body.gd-roadmap-bg .footer-wrap,
  body.gd-roadmap-bg .point,
  body.gd-roadmap-bg .hero-bottom-bar,
  body.gd-roadmap-bg .faq-list details,
  body.gd-roadmap-bg .mobile-menu{
    background:
      radial-gradient(circle at 14% 0%, rgba(255,244,205,.095), transparent 30%),
      radial-gradient(circle at 92% 100%, rgba(113,229,255,.06), transparent 34%),
      linear-gradient(145deg, rgba(8,13,24,.91), rgba(7,10,19,.80) 55%, rgba(15,17,26,.84)) !important;
  }
  body.gd-roadmap-bg::after{
    width:min(70vw, 500px) !important;
    opacity:.18 !important;
  }
}



.site-header{width:min(1180px,calc(100% - 24px));margin:12px auto 0;border:1px solid rgba(245,211,138,.18);border-radius:34px;background:rgba(10,12,16,.78);backdrop-filter:blur(20px)}
.nav-wrap{padding:0 20px}
.nav{gap:18px}
.nav a{color:#f4ead7}
.hero,.section{overflow:hidden}
.glass,.service-card,.timeline,.faq-list details,.showcase-card,.price-card{background:linear-gradient(180deg, rgba(10,12,16,.92), rgba(12,14,20,.88));border:1px solid rgba(245,211,138,.16)}
.service-number,.timeline-step b{background:linear-gradient(135deg, rgba(245,211,138,.24), rgba(202,163,95,.20));color:#fff7e8}
.faq-list details{transition:.3s ease;box-shadow:0 10px 34px rgba(0,0,0,.22)}
.faq-list details:hover{transform:translateY(-2px);border-color:rgba(245,211,138,.32)}
.price-card.featured{background:linear-gradient(180deg,#2a1d09,#18120a);border-color:#d4a95f;color:#fff4df}
.price-card.featured p,.price-card.featured ul{color:#f2e2c2}
.btn-primary{background:linear-gradient(135deg,#fff1cf,#d4a95f,#b98a44);color:#111}
.mobile-toggle{border:1px solid rgba(245,211,138,.18);background:rgba(255,255,255,.03);border-radius:20px}
@media(max-width:768px){.hero{padding-top:140px}.site-header{top:8px}.timeline-step{grid-template-columns:58px 1fr}.showcase-card,.dual-grid,.process-grid,.hero-grid,.services-grid,.pricing-grid{grid-template-columns:1fr}.container{width:min(100% - 20px,1180px)}.timeline-step,.service-card,.price-card,.faq-list details{padding:18px}.hero-copy h1{font-size:3.8rem}.nav{display:none}}