/* ══════════════════════════════════════════════════════════
   AssetVault — Premium Dark Theme Stylesheet
   ══════════════════════════════════════════════════════════ */

/* ── Custom Properties ─────────────────────────────────── */
:root {
  --bg:            #08080C;
  --bg-2:          #0D0D15;
  --bg-card:       #111118;
  --bg-card-2:     #16161F;
  --accent:        #5A52FF;
  --accent-lo:     #7B75FF;
  --accent-hi:     #9B8BFF;
  --accent-glow:   rgba(90,82,255,.35);
  --accent-glow2:  rgba(90,82,255,.18);
  --grad:          linear-gradient(135deg,#5A52FF 0%,#9B8BFF 50%,#C084FC 100%);
  --grad2:         linear-gradient(135deg,#5A52FF,#3B82F6);
  --txt:           #EEEEFF;
  --txt-2:         #8888AA;
  --txt-3:         #484870;
  --bdr:           rgba(90,82,255,.14);
  --bdr-card:      rgba(255,255,255,.055);
  --glass:         rgba(13,13,21,.78);
  --glass-bdr:     rgba(255,255,255,.07);
  --r-sm:          8px;
  --r-md:          14px;
  --r-lg:          20px;
  --r-xl:          26px;
  --shadow-glow:   0 0 40px rgba(90,82,255,.28),0 0 80px rgba(90,82,255,.12);
  --shadow-card:   0 8px 32px rgba(0,0,0,.55);
  --ease-spring:   cubic-bezier(.34,1.56,.64,1);
  --ease-out:      cubic-bezier(.4,0,.2,1);
  --t-fast:        .15s ease;
  --t-med:         .3s var(--ease-out);
  --t-slow:        .55s var(--ease-out);
}

/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{background:var(--bg);color:var(--txt);font-family:'Inter',system-ui,sans-serif;font-size:16px;line-height:1.6;overflow-x:hidden}
img,video{display:block;max-width:100%}
button{cursor:pointer;font-family:inherit;border:none}
a{text-decoration:none;color:inherit}

/* noise overlay */
body::after{content:'';position:fixed;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");pointer-events:none;z-index:9000;opacity:.45}

/* scrollbar */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:3px}

/* ── Typography ─────────────────────────────────────────── */
.t-display{font-size:clamp(2.6rem,6vw,5.4rem);font-weight:800;line-height:1.07;letter-spacing:-.03em}
.t-h2{font-size:clamp(1.9rem,4vw,3rem);font-weight:700;line-height:1.15;letter-spacing:-.025em}
.t-h3{font-size:clamp(1.15rem,2.5vw,1.6rem);font-weight:600;line-height:1.3;letter-spacing:-.015em}
.t-body{font-size:1rem;line-height:1.75;color:var(--txt-2)}
.t-sm{font-size:.875rem}
.t-xs{font-size:.75rem;letter-spacing:.04em}
.grad-text{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ── Layout ─────────────────────────────────────────────── */
.wrap{width:100%;max-width:1260px;margin:0 auto;padding:0 clamp(1.25rem,4vw,2.75rem)}
.section{padding:clamp(5rem,10vw,8.5rem) 0}

/* ── Scroll Reveal ──────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .65s var(--ease-out),transform .65s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.rd1{transition-delay:.08s}.rd2{transition-delay:.16s}.rd3{transition-delay:.24s}
.rd4{transition-delay:.32s}.rd5{transition-delay:.40s}.rd6{transition-delay:.48s}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.875rem 1.75rem;border-radius:var(--r-md);font-size:.93rem;font-weight:600;transition:all var(--t-med);position:relative;overflow:hidden;white-space:nowrap}
.btn::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,0);transition:background var(--t-fast)}
.btn:hover::after{background:rgba(255,255,255,.06)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 4px 22px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.15)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 36px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.15)}
.btn-primary:active{transform:none}
.btn-ghost{background:transparent;color:var(--txt);border:1px solid var(--glass-bdr);backdrop-filter:blur(12px)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-lo);transform:translateY(-2px)}
.btn-lg{padding:1rem 2rem;font-size:1rem}

/* ── Badge ───────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .85rem;border-radius:100px;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.badge-accent{background:rgba(90,82,255,.13);color:var(--accent-lo);border:1px solid rgba(90,82,255,.28)}
.badge-new{background:linear-gradient(135deg,rgba(90,82,255,.28),rgba(192,132,252,.22));color:#C084FC;border:1px solid rgba(192,132,252,.3);font-size:.62rem;padding:.18rem .55rem}
.badge-green{background:rgba(52,211,153,.1);color:#34D399;border:1px solid rgba(52,211,153,.22)}

/* ── Glass Card ─────────────────────────────────────────── */
.glass{background:var(--glass);border:1px solid var(--glass-bdr);border-radius:var(--r-lg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.glass-hover{transition:all var(--t-med)}
.glass-hover:hover{border-color:var(--bdr);box-shadow:var(--shadow-glow);transform:translateY(-4px)}

/* ── Section Label ──────────────────────────────────────── */
.sec-label{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.sec-label-line{height:1px;width:36px;background:var(--bdr)}
.sec-label-txt{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-lo)}
.center{text-align:center}
.center .sec-label{justify-content:center}

/* ════════════════════════════════════════════════════════
   NAVBAR
   ════════════════════════════════════════════════════════ */
#nav{position:fixed;top:0;left:0;right:0;z-index:900;padding:1.1rem 0;transition:all var(--t-med)}
#nav.scrolled{background:rgba(8,8,12,.88);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--glass-bdr);padding:.75rem 0}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:.65rem;font-weight:750;font-size:1.15rem}
.nav-logo-icon{width:34px;height:34px;background:var(--grad);border-radius:9px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 18px var(--accent-glow2)}
.nav-links{display:flex;align-items:center;gap:2rem;list-style:none}
.nav-links a{font-size:.875rem;font-weight:500;color:var(--txt-2);transition:color var(--t-fast)}
.nav-links a:hover{color:var(--txt)}
.nav-right{display:flex;align-items:center;gap:.75rem}
.burger{display:none;flex-direction:column;gap:5px;background:none;padding:4px}
.burger span{display:block;width:22px;height:2px;background:var(--txt);border-radius:2px;transition:all var(--t-med)}

/* mobile overlay nav */
#mob-nav{display:none;position:fixed;inset:0;background:rgba(8,8,12,.97);backdrop-filter:blur(24px);z-index:895;flex-direction:column;align-items:center;justify-content:center;gap:2rem}
#mob-nav.open{display:flex}
#mob-nav a{font-size:1.5rem;font-weight:600;color:var(--txt-2);transition:color var(--t-fast)}
#mob-nav a:hover{color:var(--accent-lo)}
#mob-close{position:absolute;top:1.5rem;right:1.5rem;background:none;color:var(--txt-2);font-size:1.6rem;padding:.5rem}

/* ════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════ */
#hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding-top:80px}

/* animated mesh bg */
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-grad{position:absolute;inset:0;background:
  radial-gradient(ellipse 80% 55% at 50% -10%,rgba(90,82,255,.26) 0%,transparent 60%),
  radial-gradient(ellipse 50% 40% at 80% 80%,rgba(59,130,246,.11) 0%,transparent 50%),
  radial-gradient(ellipse 40% 30% at 10% 65%,rgba(192,132,252,.08) 0%,transparent 50%);
  animation:meshPulse 9s ease-in-out infinite alternate}
@keyframes meshPulse{0%{opacity:.7;transform:scale(1)}100%{opacity:1;transform:scale(1.06)}}
.hero-grid{position:absolute;inset:0;background-image:
  linear-gradient(rgba(90,82,255,.04) 1px,transparent 1px),
  linear-gradient(90deg,rgba(90,82,255,.04) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 20%,transparent 75%)}

.hero-content{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:4rem;padding:clamp(2rem,5vw,4rem) 0}
.hero-text{display:flex;flex-direction:column;gap:1.75rem}
.hero-eye{display:flex;align-items:center;gap:.65rem}
.hero-dot{width:8px;height:8px;background:var(--accent);border-radius:50%;box-shadow:0 0 10px var(--accent);animation:dotPulse 2.2s ease-in-out infinite}
@keyframes dotPulse{0%,100%{box-shadow:0 0 10px var(--accent);transform:scale(1)}50%{box-shadow:0 0 22px var(--accent);transform:scale(1.25)}}
.hero-desc{color:var(--txt-2);font-size:clamp(.95rem,2vw,1.1rem);line-height:1.75;max-width:480px}
.hero-btns{display:flex;gap:1rem;flex-wrap:wrap}
.hero-stats{display:flex;gap:0;padding-top:1.25rem;border-top:1px solid var(--glass-bdr)}
.hero-stat-item{flex:1;padding:0 1.25rem;border-right:1px solid var(--glass-bdr);min-width:0}
.hero-stat-item:first-child{padding-left:0}
.hero-stat-item:last-child{border-right:none}
.stat-val{font-size:.98rem;font-weight:700;color:var(--txt);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-lbl{font-size:.72rem;color:var(--txt-3);margin-top:.35rem;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Hero Demo Video Frame ───────────────────────────────── */
.hero-vis{position:relative;display:flex;align-items:center;justify-content:center}
.hero-glow-ring{position:absolute;width:460px;height:460px;background:radial-gradient(circle,rgba(90,82,255,.2) 0%,transparent 70%);border-radius:50%;animation:ringPulse 4.5s ease-in-out infinite}
@keyframes ringPulse{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.09);opacity:1}}

/* Video frame — same premium styling as old plugin-mock */
.hero-demo-frame{
  position:relative;
  width:100%;
  max-width:510px;
  aspect-ratio:16/9;
  border-radius:var(--r-xl);
  overflow:hidden;
  border:1px solid rgba(90,82,255,.22);
  box-shadow:0 0 0 1px rgba(255,255,255,.035),0 24px 80px rgba(0,0,0,.72),0 0 60px rgba(90,82,255,.18);
  animation:mockFloat 5.5s ease-in-out infinite;
}
@keyframes mockFloat{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-14px) rotate(.6deg)}}
.hero-demo-vid{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  background:#0f0f1a;
}
/* Play overlay button — appears on hover */
.hero-demo-play{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0);
  border:none;
  cursor:pointer;
  opacity:0;
  transition:opacity .25s ease, background .25s ease;
}
.hero-demo-play span,
.hero-demo-play svg{pointer-events:none}
.hero-demo-frame:hover .hero-demo-play,
.hero-demo-frame:focus-within .hero-demo-play{
  opacity:1;
  background:rgba(0,0,0,.35);
}
.hero-demo-play svg{
  width:56px;
  height:56px;
  background:rgba(90,82,255,.85);
  border-radius:50%;
  padding:14px;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 8px 32px rgba(90,82,255,.6);
  color:#fff;
  transition:transform .2s ease,background .2s ease;
}
.hero-demo-frame:hover .hero-demo-play svg{
  transform:scale(1.08);
  background:rgba(90,82,255,1);
}

/* Keep floating chips rules (same as before) */

/* floating chips */
.fl-chip{position:absolute;padding:.5rem .875rem;background:rgba(12,12,20,.92);border:1px solid var(--glass-bdr);border-radius:100px;font-size:.72rem;font-weight:500;color:var(--txt-2);backdrop-filter:blur(14px);display:flex;align-items:center;gap:.4rem;white-space:nowrap;box-shadow:var(--shadow-card)}
.fl-chip svg{color:var(--accent-lo);flex-shrink:0}
.fc1{top:8%;left:-6%;animation:fc1 6.5s ease-in-out infinite}
.fc2{bottom:12%;right:-9%;animation:fc2 7.5s ease-in-out infinite}
.fc3{bottom:38%;left:-12%;animation:fc1 5.5s ease-in-out infinite 1.2s}
@keyframes fc1{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes fc2{0%,100%{transform:translateY(0)}50%{transform:translateY(11px)}}

/* ════════════════════════════════════════════════════════
   VIDEO MODAL
   ════════════════════════════════════════════════════════ */
#vid-modal{position:fixed;inset:0;z-index:1800;display:none;align-items:center;justify-content:center;padding:1rem}
#vid-modal.open{display:flex}
.modal-bg{position:absolute;inset:0;background:rgba(4,4,8,.92);backdrop-filter:blur(14px)}
.modal-box{position:relative;z-index:1;width:100%;max-width:880px;background:var(--bg-card);border:1px solid var(--glass-bdr);border-radius:var(--r-xl);overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.8),var(--shadow-glow);animation:modalIn .3s var(--ease-spring)}
@keyframes modalIn{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
.modal-close{position:absolute;top:.875rem;right:.875rem;z-index:2;background:rgba(255,255,255,.09);color:var(--txt);width:34px;height:34px;border-radius:50%;font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:background var(--t-fast)}
.modal-close:hover{background:rgba(255,255,255,.18)}
#modal-vid{position:relative;aspect-ratio:16/9;background:#000}
#modal-vid iframe,#modal-vid video{width:100%;height:100%;border:none}

/* ════════════════════════════════════════════════════════
   LIVE ASSET EXPLORER
   ════════════════════════════════════════════════════════ */
#explorer{padding:clamp(4rem,8vw,7rem) 0;position:relative}
.exp-head{text-align:center;margin-bottom:1.5rem}

/* AEP banner — THE key copy block */
.aep-banner{display:inline-flex;align-items:center;gap:1rem;padding:1rem 1.75rem;background:linear-gradient(135deg,rgba(90,82,255,.14),rgba(192,132,252,.09));border:1px solid rgba(90,82,255,.38);border-radius:var(--r-md);margin-bottom:3rem;box-shadow:0 0 32px rgba(90,82,255,.13)}
.aep-icon{font-size:1.75rem;flex-shrink:0}
.aep-main{font-size:clamp(.95rem,2vw,1.1rem);font-weight:700;color:var(--txt)}
.aep-sub{font-size:.82rem;color:var(--txt-2);font-weight:400;margin-top:.2rem}

/* plugin shell */
.plugin-shell{background:rgba(9,9,15,.97);border:1px solid rgba(90,82,255,.18);border-radius:var(--r-xl);overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.025)}

/* titlebar */
.shell-bar{display:flex;align-items:center;gap:.7rem;padding:.8rem 1.2rem;background:rgba(255,255,255,.02);border-bottom:1px solid var(--glass-bdr)}
.shell-dots{display:flex;gap:5px}
.shell-dots span{width:11px;height:11px;border-radius:50%}
.shell-dots span:nth-child(1){background:#FF5F57}
.shell-dots span:nth-child(2){background:#FEBC2E}
.shell-dots span:nth-child(3){background:#28C840}
.shell-name{flex:1;text-align:center;font-size:.78rem;color:var(--txt-3);margin-right:52px;letter-spacing:.02em}
.shell-ver{font-size:.68rem;padding:.18rem .55rem;background:rgba(90,82,255,.18);color:var(--accent-lo);border-radius:100px;border:1px solid rgba(90,82,255,.28)}

/* toolbar */
.shell-toolbar{display:flex;align-items:center;gap:.65rem;padding:.65rem 1.2rem;border-bottom:1px solid var(--glass-bdr);flex-wrap:wrap}
.search-wrap{flex:1;min-width:180px;display:flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.035);border:1px solid var(--glass-bdr);border-radius:var(--r-sm);padding:.45rem .8rem;transition:border-color var(--t-fast)}
.search-wrap:focus-within{border-color:var(--accent)}
.search-wrap svg{color:var(--txt-3);flex-shrink:0}
.search-wrap input{background:none;border:none;outline:none;color:var(--txt);font-size:.82rem;width:100%;font-family:inherit}
.search-wrap input::placeholder{color:var(--txt-3)}
.view-grp{display:flex;gap:.2rem}
.vbtn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:transparent;color:var(--txt-3);transition:all var(--t-fast)}
.vbtn.on,.vbtn:hover{background:rgba(90,82,255,.14);color:var(--accent-lo)}
.sort-sel{background:rgba(255,255,255,.035);border:1px solid var(--glass-bdr);border-radius:var(--r-sm);color:var(--txt-2);font-size:.8rem;padding:.38rem .7rem;outline:none;font-family:inherit;cursor:pointer;transition:border-color var(--t-fast)}
.sort-sel:focus{border-color:var(--accent)}
option{background:var(--bg-card)}

/* main layout */
.shell-main{display:flex;height:500px}

/* sidebar */
.shell-side{width:175px;flex-shrink:0;border-right:1px solid var(--glass-bdr);overflow-y:auto;padding:.6rem 0}
.side-sec{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--txt-3);padding:.35rem .9rem;margin-top:.5rem}
.side-item{display:flex;align-items:center;gap:.55rem;padding:.5rem .9rem;font-size:.79rem;color:var(--txt-2);cursor:pointer;transition:all var(--t-fast);border-left:2px solid transparent;user-select:none}
.side-item svg{flex-shrink:0;opacity:.7}
.side-item:hover{color:var(--txt);background:rgba(255,255,255,.03)}
.side-item.on{color:var(--accent-lo);border-left-color:var(--accent);background:rgba(90,82,255,.07)}
.side-item.on svg{opacity:1}
.side-ct{margin-left:auto;font-size:.62rem;background:rgba(255,255,255,.05);padding:.1rem .38rem;border-radius:100px;color:var(--txt-3)}

/* grid wrapper */
.shell-grid-wrap{flex:1;overflow-y:auto;padding:.875rem}
.shell-grid-wrap::-webkit-scrollbar{width:3px}
.shell-grid-wrap::-webkit-scrollbar-thumb{background:var(--bdr)}
.asset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:.8rem}

/* empty state */
.empty-st{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;padding:3rem;color:var(--txt-3);font-size:.88rem;text-align:center}
.empty-st svg{opacity:.35}

/* asset card */
.asset-card{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--bg-card);border:1px solid var(--bdr-card);cursor:pointer;transition:transform .2s var(--ease-spring),border-color .2s ease,box-shadow .2s ease}
.asset-card:hover{transform:scale(1.045);border-color:rgba(90,82,255,.4);box-shadow:0 8px 28px rgba(0,0,0,.5),0 0 18px rgba(90,82,255,.2);z-index:2}

.card-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-2)}
.card-thumb img,.card-thumb video{width:100%;height:100%;object-fit:cover}
.card-thumb video{position:absolute;inset:0;opacity:0;transition:opacity .3s ease}
.card-thumb img{transition:opacity .3s ease}
.asset-card:hover .card-thumb video{opacity:1}
.asset-card:hover .card-thumb img{opacity:0}

.card-new{position:absolute;top:.38rem;right:.38rem;z-index:1}
.card-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--t-fast);background:rgba(0,0,0,.28)}
.asset-card:hover .card-play{opacity:1}
.card-play svg{color:#fff;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}

.card-info{padding:.55rem .7rem}
.card-title{font-size:.76rem;font-weight:600;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-cat{font-size:.65rem;color:var(--txt-3);margin-top:.12rem}
.card-tags{display:flex;flex-wrap:wrap;gap:.22rem;margin-top:.45rem}
.card-tag{font-size:.58rem;padding:.12rem .38rem;border-radius:100px;background:rgba(255,255,255,.04);color:var(--txt-3);border:1px solid var(--bdr-card)}

/* status bar */
.shell-status{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1.2rem;border-top:1px solid var(--glass-bdr);font-size:.68rem;color:var(--txt-3);background:rgba(255,255,255,.012);flex-wrap:wrap;gap:.5rem}
.s-left{display:flex;align-items:center;gap:.7rem}
.s-online{display:flex;align-items:center;gap:.38rem}
.s-green{width:6px;height:6px;background:#34D399;border-radius:50%;box-shadow:0 0 6px #34D399}
.s-right{color:var(--accent-lo);font-weight:500}

/* ════════════════════════════════════════════════════════
   FEATURES  — Bento Box
   ════════════════════════════════════════════════════════ */
#features{position:relative}
.feat-head{text-align:center;margin-bottom:3.5rem}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:1.1rem}

.bc{background:var(--bg-card);border:1px solid var(--bdr-card);border-radius:var(--r-xl);padding:2rem;position:relative;overflow:hidden;transition:all var(--t-med)}
.bc::before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--grad);opacity:0;transition:opacity var(--t-med);mask:linear-gradient(rgba(0,0,0,.07) 0%,transparent 55%)}
.bc:hover{border-color:rgba(90,82,255,.32);box-shadow:0 0 38px rgba(90,82,255,.1),var(--shadow-card);transform:translateY(-3px)}
.bc:hover::before{opacity:1}
.bc>*{position:relative;z-index:1}

.bc-7{grid-column:span 7}.bc-5{grid-column:span 5}
.bc-4{grid-column:span 4}.bc-8{grid-column:span 8}
.bc-6{grid-column:span 6}.bc-12{grid-column:span 12}

.b-icon{width:50px;height:50px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;margin-bottom:1.2rem;font-size:1.4rem}
.bi-violet{background:rgba(90,82,255,.14);border:1px solid rgba(90,82,255,.22)}
.bi-blue  {background:rgba(59,130,246,.14);border:1px solid rgba(59,130,246,.22)}
.bi-purple{background:rgba(192,132,252,.14);border:1px solid rgba(192,132,252,.22)}
.bi-green {background:rgba(52,211,153,.14);border:1px solid rgba(52,211,153,.22)}
.b-title{font-size:1.1rem;font-weight:700;color:var(--txt);margin-bottom:.55rem}
.b-desc{font-size:.86rem;color:var(--txt-2);line-height:1.68}

/* workflow steps */
.wf-steps{display:flex;flex-direction:column;gap:.45rem;margin-top:1.5rem}
.wf-step{display:flex;align-items:center;gap:.7rem;padding:.55rem .8rem;background:rgba(255,255,255,.025);border:1px solid var(--bdr-card);border-radius:var(--r-sm);font-size:.8rem;color:var(--txt-2)}
.wf-num{width:22px;height:22px;background:var(--grad);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;color:#fff;flex-shrink:0}

/* category chips */
.cat-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.25rem}
.cat-chip{padding:.32rem .8rem;border-radius:100px;font-size:.76rem;font-weight:500;background:rgba(255,255,255,.038);border:1px solid var(--bdr-card);color:var(--txt-2);display:flex;align-items:center;gap:.38rem}
.cat-chip.hi{background:rgba(90,82,255,.11);border-color:rgba(90,82,255,.22);color:var(--accent-lo)}

/* EG sliders */
.eg-panel{margin-top:1.2rem;background:rgba(255,255,255,.025);border:1px solid var(--bdr-card);border-radius:var(--r-md);padding:.875rem;display:flex;flex-direction:column;gap:.65rem}
.eg-row{display:flex;align-items:center;gap:.65rem;font-size:.76rem;color:var(--txt-2)}
.eg-track{flex:1;height:3px;background:var(--bdr-card);border-radius:2px;overflow:hidden}
.eg-fill{height:100%;background:var(--grad);border-radius:2px;width:0;transition:width 1.2s var(--ease-out)}
.eg-val{font-size:.68rem;color:var(--accent-lo);min-width:32px;text-align:right}

/* scanner */
.scanner{display:flex;flex-direction:column;gap:.45rem;margin-top:1.2rem}
.scan-item{display:flex;align-items:center;gap:.65rem;padding:.55rem .8rem;border-radius:var(--r-sm);border:1px solid var(--bdr-card);font-size:.78rem;color:var(--txt-2)}
.scan-item.ok  {border-color:rgba(52,211,153,.2);background:rgba(52,211,153,.04)}
.scan-item.warn{border-color:rgba(251,191,36,.2);background:rgba(251,191,36,.04)}
.scan-item.err {border-color:rgba(239,68,68,.2); background:rgba(239,68,68,.04)}
.scan-status{margin-left:auto;font-size:.68rem}
.scan-item.ok   .scan-status{color:#34D399}
.scan-item.warn .scan-status{color:#FBB024}
.scan-item.err  .scan-status{color:#EF4444}

/* ════════════════════════════════════════════════════════
   PRICING
   ════════════════════════════════════════════════════════ */
#pricing{position:relative;overflow:hidden}
#pricing::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:580px;height:380px;background:radial-gradient(ellipse,rgba(90,82,255,.1) 0%,transparent 70%);pointer-events:none}
.pricing-head{text-align:center;margin-bottom:3rem}
.pricing-wrap{display:flex;justify-content:center}
.pricing-card{width:100%;max-width:450px;background:var(--bg-card);border:1px solid rgba(90,82,255,.38);border-radius:var(--r-xl);padding:2.5rem;position:relative;box-shadow:0 0 0 1px rgba(90,82,255,.08),0 40px 80px rgba(0,0,0,.5),0 0 55px rgba(90,82,255,.13)}
.pricing-card::before{content:'';position:absolute;inset:-1px;border-radius:inherit;background:var(--grad);z-index:-1;filter:blur(22px);opacity:.25}
.p-tag{position:absolute;top:-1rem;left:50%;transform:translateX(-50%);white-space:nowrap}
.p-label{font-size:.8rem;font-weight:600;color:var(--txt-2);text-transform:uppercase;letter-spacing:.09em;text-align:center}
.p-price{display:flex;align-items:baseline;gap:.4rem;justify-content:center;margin:1.25rem 0}
.p-cur{font-size:1.9rem;font-weight:600;color:var(--txt-2)}
.p-amount{font-size:5rem;font-weight:800;line-height:1;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.p-sub{font-size:.88rem;color:var(--txt-3);text-align:center;margin-bottom:2rem}
.p-divider{height:1px;background:var(--glass-bdr);margin:1.5rem 0}
.p-perks{display:flex;flex-direction:column;gap:.85rem;margin-bottom:2rem}
.p-perk{display:flex;align-items:flex-start;gap:.7rem;font-size:.88rem;color:var(--txt-2)}
.p-check{width:19px;height:19px;background:rgba(52,211,153,.13);border:1px solid rgba(52,211,153,.28);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:.1rem}
.p-check svg{color:#34D399}
.p-cta{width:100%;font-size:1rem;padding:.95rem;justify-content:center;display:flex;text-decoration:none}
.p-guarantee{display:flex;align-items:center;justify-content:center;gap:.45rem;margin-top:1.2rem;font-size:.78rem;color:var(--txt-3)}
.p-guarantee svg{color:#34D399}

/* ════════════════════════════════════════════════════════
   FAQ
   ════════════════════════════════════════════════════════ */
#faq{background:var(--bg-2)}
.faq-head{text-align:center;margin-bottom:3rem}
.faq-list{max-width:700px;margin:0 auto;display:flex;flex-direction:column;gap:.65rem}
.faq-item{background:var(--bg-card);border:1px solid var(--bdr-card);border-radius:var(--r-md);overflow:hidden;transition:border-color var(--t-fast)}
.faq-item:hover{border-color:rgba(90,82,255,.18)}
.faq-item.open{border-color:rgba(90,82,255,.32)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem 1.4rem;cursor:pointer;font-size:.93rem;font-weight:600;color:var(--txt);user-select:none}
.faq-chev{width:22px;height:22px;border-radius:50%;background:rgba(90,82,255,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform var(--t-med),background var(--t-fast);color:var(--accent-lo)}
.faq-item.open .faq-chev{transform:rotate(180deg);background:rgba(90,82,255,.22)}
.faq-ans{max-height:0;overflow:hidden;transition:max-height .4s var(--ease-out)}
.faq-item.open .faq-ans{max-height:300px}
.faq-ans-in{padding:0 1.4rem 1.2rem;font-size:.86rem;color:var(--txt-2);line-height:1.78;border-top:1px solid var(--glass-bdr);padding-top:.9rem}

/* ════════════════════════════════════════════════════════
   FINAL CTA
   ════════════════════════════════════════════════════════ */
#cta{padding:clamp(6rem,12vw,10rem) 0;text-align:center;position:relative;overflow:hidden}
.cta-g1{position:absolute;top:50%;left:28%;width:480px;height:340px;background:radial-gradient(ellipse,rgba(90,82,255,.22) 0%,transparent 70%);transform:translate(-50%,-50%);pointer-events:none}
.cta-g2{position:absolute;top:50%;right:18%;width:380px;height:280px;background:radial-gradient(ellipse,rgba(192,132,252,.13) 0%,transparent 70%);transform:translateY(-50%);pointer-events:none}
.cta-inner{position:relative;z-index:1}
.cta-hl{max-width:680px;margin:0 auto 1.25rem}
.cta-sub{color:var(--txt-2);font-size:1rem;max-width:460px;margin:0 auto 2.5rem}
.cta-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.cta-mb{margin-top:1.5rem;font-size:.8rem;color:var(--txt-3);display:flex;align-items:center;justify-content:center;gap:.4rem}
.cta-mb svg{color:#34D399}

/* ════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════ */
footer{padding:2.25rem 0;border-top:1px solid var(--glass-bdr)}
.foot-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.foot-copy{font-size:.8rem;color:var(--txt-3)}
.foot-links{display:flex;gap:1.5rem}
.foot-links a{font-size:.8rem;color:var(--txt-3);transition:color var(--t-fast)}
.foot-links a:hover{color:var(--txt-2)}

/* ════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .bc-7,.bc-5,.bc-8,.bc-4,.bc-6{grid-column:span 6}
  .shell-side{width:148px}
}
@media(max-width:768px){
  .nav-links,.nav-right .btn-ghost{display:none}
  .burger{display:flex}
  .hero-content{grid-template-columns:1fr;text-align:center;gap:3rem}
  .hero-btns,.hero-stats{justify-content:center}
  .fc1,.fc2,.fc3{display:none}
  .hero-glow-ring{width:300px;height:300px}
  .bc-7,.bc-5,.bc-8,.bc-4,.bc-6{grid-column:span 12}
  .shell-main{height:420px}
  .shell-side{width:128px}
  .asset-grid{grid-template-columns:repeat(auto-fill,minmax(135px,1fr))}
  .foot-inner{justify-content:center;text-align:center}
  .foot-links{justify-content:center}
}
@media(max-width:480px){
  .shell-side{display:none}
  .shell-main{height:auto;flex-direction:column}
  .shell-grid-wrap{max-height:380px}
  .asset-grid{grid-template-columns:repeat(2,1fr)}
  .hero-stats{gap:0;flex-wrap:wrap}.hero-stat-item{padding:0 .875rem;min-width:auto}.hero-stat-item:first-child{padding-left:0}.stat-val{font-size:.82rem;white-space:normal;overflow:visible;text-overflow:clip}.stat-lbl{white-space:normal}
}