/* ==========================================================================
   DIAKO — Design tokens
   Palette:  --void #0A0B0D | --surface #15171B | --surface-2 #1D2025
             --titanium #9AA3AC | --firouzeh #2CC6C0 | --brass #D8B26A
             --ink #EDEFF2 | --ink-dim #7C838C
   Type:     Display/Body → Vazirmatn (fa) | Data/Utility → JetBrains Mono
   ========================================================================== */

:root{
  --void:#0A0B0D;
  --surface:#15171B;
  --surface-2:#1B1E23;
  --surface-3:#22262c;
  --titanium:#9AA3AC;
  --firouzeh:#2CC6C0;
  --firouzeh-dim:#1c8f8b;
  --brass:#D8B26A;
  --ink:#EDEFF2;
  --ink-dim:#7C838C;
  --line:rgba(237,239,242,0.09);
  --radius:18px;
  --ease:cubic-bezier(.16,.84,.32,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:auto;background:var(--void);}
body{
  background:var(--void);
  color:var(--ink);
  font-family:'Vazirmatn',sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--firouzeh);color:var(--void);}

.mono{font-family:'JetBrains Mono',monospace;}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit;}
ul{list-style:none;}

.wrap{
  max-width:1240px;
  margin:0 auto;
  padding:0 40px;
}

@media(max-width:720px){
  .wrap{padding:0 22px;}
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

/* ----------------------------- noise / grain ----------------------------- */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:9990;
  opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ----------------------------- scroll progress ---------------------------- */
.progress-rail{
  position:fixed;top:0;right:0;left:0;height:2px;z-index:9999;
  background:transparent;
}
.progress-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--firouzeh),var(--brass));
  transform-origin:right;
}

/* ================================ NAV ==================================== */
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  padding:26px 0;
  transition:padding .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
header.nav.scrolled{
  padding:16px 0;
  background:rgba(10,11,13,.72);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;letter-spacing:.02em;}
.brand .mark{
  width:30px;height:30px;border-radius:8px;
  background:conic-gradient(from 220deg,var(--firouzeh),var(--brass),var(--firouzeh));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 22px rgba(44,198,192,.35);
  position:relative;
}
.brand .mark::after{content:"د";font-family:'Vazirmatn';font-weight:800;color:var(--void);font-size:16px;}
.nav-links{display:flex;gap:34px;font-size:14.5px;color:var(--titanium);}
.nav-links a{position:relative;padding:4px 0;transition:color .25s;}
.nav-links a::after{
  content:"";position:absolute;bottom:0;right:0;left:auto;width:0;height:1px;background:var(--firouzeh);
  transition:width .3s var(--ease);
}
.nav-links a:hover{color:var(--ink);}
.nav-links a:hover::after{width:100%;}
.nav-cta{
  display:flex;align-items:center;gap:16px;
}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 22px;border-radius:100px;
  font-size:14px;font-weight:600;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
}
.btn-primary{
  background:linear-gradient(135deg,var(--firouzeh),var(--firouzeh-dim));
  color:#04201f;
  box-shadow:0 6px 24px -6px rgba(44,198,192,.55);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px -6px rgba(44,198,192,.7);}
.btn-ghost{
  border:1px solid var(--line);color:var(--ink);
}
.btn-ghost:hover{border-color:var(--firouzeh);color:var(--firouzeh);}
.burger{display:none;width:24px;height:18px;position:relative;}
.burger span{position:absolute;right:0;left:0;height:2px;background:var(--ink);border-radius:2px;}
.burger span:nth-child(1){top:0;}
.burger span:nth-child(2){top:8px;}
.burger span:nth-child(3){top:16px;}

@media(max-width:900px){
  .nav-links{display:none;}
  .btn-ghost{display:none;}
}

/* ================================ HERO ==================================== */
.hero{
  position:relative;
  height:340vh;
  background:radial-gradient(ellipse 80% 55% at 50% 8%, rgba(44,198,192,.10), transparent 60%), var(--void);
}
#hero-canvas{
  position:sticky; top:0; height:100vh; width:100%;
  overflow:hidden;
}
.hero-particles{position:absolute;inset:0;z-index:1;}

.hero-eyebrow{
  position:absolute;top:118px;left:50%;transform:translateX(-50%);
  z-index:5;text-align:center;
  font-family:'JetBrains Mono';font-size:12.5px;letter-spacing:.28em;
  color:var(--firouzeh);text-transform:uppercase;
  opacity:0;
}
.hero-title{
  position:absolute;top:150px;left:50%;transform:translateX(-50%);
  z-index:5;text-align:center;width:100%;padding:0 20px;
}
.hero-title h1{
  font-size:clamp(38px,7vw,86px);
  font-weight:800;line-height:1.08;letter-spacing:-.01em;
}
.hero-title h1 .line{display:block;overflow:hidden;}
.hero-title h1 .line span{display:inline-block;transform:translateY(110%);}
.hero-title h1 .accent{
  background:linear-gradient(90deg,var(--firouzeh),#7fe9e4);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{
  position:absolute;top:328px;left:50%;transform:translateX(-50%);
  z-index:5;max-width:560px;text-align:center;color:var(--titanium);
  font-size:16.5px;line-height:1.9;padding:0 24px;opacity:0;
}
.hero-cta-row{
  position:absolute;top:420px;left:50%;transform:translateX(-50%);
  z-index:5;display:flex;gap:16px;opacity:0;
}

.hero-scroll-hint{
  position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
  z-index:5;display:flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--ink-dim);font-family:'JetBrains Mono';font-size:11px;letter-spacing:.18em;
}
.hero-scroll-hint .stick{
  width:1px;height:34px;background:linear-gradient(var(--firouzeh),transparent);
  animation:hint-move 1.8s infinite ease-in-out;
}
@keyframes hint-move{
  0%{transform:scaleY(0);transform-origin:top;}
  50%{transform:scaleY(1);transform-origin:top;}
  50.01%{transform-origin:bottom;}
  100%{transform:scaleY(0);transform-origin:bottom;}
}

/* --- 3D laptop stage --- */
.stage{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  perspective:1800px;
  z-index:3;
}
.laptop{
  position:relative;
  width:640px;
  transform-style:preserve-3d;
  transform:translateY(6vh) rotateX(14deg) scale(0.62);
}
@media(max-width:720px){
  .laptop{width:320px;}
}

.lid{
  position:relative;
  width:100%;
  aspect-ratio:16/10.4;
  transform-origin:bottom center;
  transform-style:preserve-3d;
  transform:rotateX(102deg);
  border-radius:14px 14px 4px 4px;
  background:linear-gradient(160deg,#2a2d33,#131519 70%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.lid-back{
  position:absolute;inset:0;
  border-radius:14px 14px 4px 4px;
  background:linear-gradient(150deg,#2c2f35,#101215);
  backface-visibility:hidden;
  display:flex;align-items:center;justify-content:center;
}
.lid-back .logo{
  width:38px;height:38px;border-radius:9px;
  background:conic-gradient(from 220deg,var(--firouzeh),var(--brass),var(--firouzeh));
  opacity:.9;filter:drop-shadow(0 0 18px rgba(44,198,192,.5));
}
.screen-face{
  position:absolute;inset:0;
  border-radius:14px 14px 4px 4px;
  background:#050607;
  transform:rotateY(180deg);
  backface-visibility:hidden;
  padding:14px;
  display:flex;
}
.screen-inner{
  position:relative;
  flex:1;border-radius:6px;overflow:hidden;
  background:linear-gradient(160deg,#06181a,#020304 70%);
}
.screen-glow{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 50% at 50% 30%, rgba(44,198,192,.35), transparent 70%);
  opacity:0;
}
.screen-ui{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;
  text-align:center;
}
.screen-ui .os-mark{
  width:44px;height:44px;border-radius:12px;margin-bottom:14px;
  background:conic-gradient(from 220deg,var(--firouzeh),var(--brass),var(--firouzeh));
}
.screen-ui .os-text{
  font-family:'JetBrains Mono';font-size:11px;letter-spacing:.3em;color:var(--titanium);
}
.screen-scanline{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.025) 0px, transparent 1px, transparent 3px);
}

.base{
  position:relative;
  width:100%;
  aspect-ratio:16/10.5;
  margin-top:-2px;
  border-radius:6px 6px 16px 16px;
  background:linear-gradient(180deg,#22252a,#0e0f12);
  box-shadow:0 60px 100px -30px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.06);
  transform-style:preserve-3d;
}
.base::before{
  content:"";position:absolute;left:50%;top:10px;transform:translateX(-50%);
  width:22%;height:5px;border-radius:4px;background:rgba(0,0,0,.4);
}
.keyboard{
  position:absolute;top:26px;right:9%;left:9%;bottom:26px;
  border-radius:6px;
  background:
    repeating-linear-gradient(90deg, #17191d 0 6.2%, #0d0e10 6.2% 6.6%),
    repeating-linear-gradient(0deg, #17191d 0 13%, #0d0e10 13% 14%);
  opacity:.9;
}
.trackpad{
  position:absolute;bottom:2%;left:50%;transform:translateX(-50%);
  width:26%;height:34%;border-radius:6px;
  background:linear-gradient(160deg,#1a1c20,#101114);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}

.laptop-shadow{
  position:absolute;
  bottom:-40px;left:50%;transform:translateX(-50%);
  width:70%;height:44px;border-radius:50%;
  background:radial-gradient(ellipse, rgba(0,0,0,.55), transparent 70%);
  filter:blur(6px);
}

/* --- floating spec badges --- */
.spec-badge{
  position:absolute;z-index:6;
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;border-radius:12px;
  background:rgba(21,23,27,.72);
  border:1px solid var(--line);
  backdrop-filter:blur(10px);
  font-family:'JetBrains Mono';font-size:12.5px;
  opacity:0;
  white-space:nowrap;
}
.spec-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--firouzeh);box-shadow:0 0 10px var(--firouzeh);}
.spec-badge .val{color:var(--ink);font-weight:700;}
.spec-badge .lbl{color:var(--ink-dim);}
.spec-badge .line{
  position:absolute;top:50%;width:60px;height:1px;background:linear-gradient(90deg,var(--firouzeh),transparent);
}
.spec-badge[data-side="right"] .line{left:100%;}
.spec-badge[data-side="left"] .line{right:100%;background:linear-gradient(270deg,var(--firouzeh),transparent);}

.sb-1{top:16%;right:calc(50% + 300px);}
.sb-1 .line{left:100%;}
.sb-2{top:34%;left:calc(50% + 300px);}
.sb-2 .line{right:100%;background:linear-gradient(270deg,var(--firouzeh),transparent);}
.sb-3{top:56%;right:calc(50% + 320px);}
.sb-3 .line{left:100%;}
.sb-4{top:70%;left:calc(50% + 280px);}
.sb-4 .line{right:100%;background:linear-gradient(270deg,var(--firouzeh),transparent);}
.sb-5{top:44%;right:calc(50% + 260px);}
.sb-5 .line{left:100%;}

@media(max-width:980px){
  .spec-badge{display:none;}
}

/* ============================= SECTIONS shared ============================ */
section{position:relative;padding:170px 0;}
@media(max-width:720px){ section{padding:100px 0;} }

.eyebrow{
  font-family:'JetBrains Mono';font-size:12px;letter-spacing:.28em;color:var(--firouzeh);
  text-transform:uppercase;margin-bottom:18px;display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--firouzeh);}

h2.section-title{
  font-size:clamp(30px,4.2vw,50px);font-weight:800;line-height:1.2;letter-spacing:-.01em;
  max-width:820px;
}
p.section-lead{
  margin-top:22px;max-width:560px;color:var(--titanium);font-size:16.5px;line-height:1.9;
}

.reveal{opacity:0;transform:translateY(46px);}

/* ================================ STORY ==================================== */
.story{background:var(--void);border-top:1px solid var(--line);}
.story-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-top:90px;
}
@media(max-width:900px){.story-grid{grid-template-columns:1fr;gap:50px;}}

.story-visual{
  position:relative;aspect-ratio:1/1;border-radius:24px;overflow:hidden;
  background:linear-gradient(160deg,var(--surface),var(--void));
  border:1px solid var(--line);
}
.story-visual canvas{width:100%;height:100%;display:block;}
.story-visual .tag{
  position:absolute;bottom:22px;right:22px;
  font-family:'JetBrains Mono';font-size:11.5px;color:var(--ink-dim);
  background:rgba(10,11,13,.6);padding:8px 12px;border-radius:8px;
  border:1px solid var(--line);
}

.story-copy p{color:var(--titanium);font-size:16px;line-height:2;margin-bottom:20px;}
.story-copy strong{color:var(--ink);font-weight:700;}
.story-stats{display:flex;gap:40px;margin-top:38px;padding-top:34px;border-top:1px solid var(--line);}
.story-stats .stat b{
  display:block;font-family:'JetBrains Mono';font-size:30px;font-weight:700;color:var(--firouzeh);
}
.story-stats .stat span{font-size:12.5px;color:var(--ink-dim);}

/* ============================== MODELS =============================== */
.models{background:linear-gradient(180deg,var(--void),#0c0d10 40%,var(--void));}
.models-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;}
.model-cards{
  margin-top:70px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
}
@media(max-width:980px){.model-cards{grid-template-columns:1fr;}}

.model-card{
  position:relative;
  border-radius:22px;padding:34px 30px 30px;
  background:linear-gradient(165deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);
  overflow:hidden;
  transition:transform .12s linear, border-color .35s;
  transform-style:preserve-3d;
}
.model-card:hover{border-color:rgba(44,198,192,.4);}
.model-card::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(44,198,192,.14), transparent 60%);
}
.model-card:hover::before{opacity:1;}
.model-tag{
  font-family:'JetBrains Mono';font-size:11px;letter-spacing:.2em;color:var(--brass);
  text-transform:uppercase;
}
.model-card h3{font-size:27px;font-weight:800;margin:10px 0 6px;}
.model-card .desc{color:var(--titanium);font-size:14.5px;line-height:1.85;min-height:66px;}
.model-visual{
  height:150px;margin:26px 0;border-radius:14px;
  background:linear-gradient(150deg,#1a1c20,#0a0b0d);
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.model-visual .glyph{
  width:60px;height:60px;border-radius:16px;
  background:conic-gradient(from var(--ang,0deg),var(--firouzeh),transparent 40%, var(--brass), transparent 80%);
  filter:blur(.2px);
  box-shadow:0 0 40px rgba(44,198,192,.25);
}
.model-specs{display:flex;flex-direction:column;gap:9px;margin-bottom:26px;}
.model-specs li{
  display:flex;justify-content:space-between;font-size:13.5px;
  padding-bottom:9px;border-bottom:1px dashed var(--line);color:var(--titanium);
}
.model-specs li b{color:var(--ink);font-family:'JetBrains Mono';font-weight:600;}
.model-price{
  display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px;
}
.model-price .amount{font-family:'JetBrains Mono';font-size:22px;font-weight:700;color:var(--ink);}
.model-price .amount small{font-size:12px;color:var(--ink-dim);font-weight:400;}
.model-card .btn{width:100%;justify-content:center;}
.model-card.featured{
  background:linear-gradient(165deg, rgba(44,198,192,.10), var(--surface));
  border-color:rgba(44,198,192,.35);
}
.model-card.featured .model-tag{color:var(--firouzeh);}

/* ============================== SPEC DEEP DIVE =============================== */
.deep{
  background:var(--void);
  position:relative;
}
.deep-grid{
  margin-top:80px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);
  border:1px solid var(--line);border-radius:20px;overflow:hidden;
}
@media(max-width:900px){.deep-grid{grid-template-columns:repeat(2,1fr);}}
.deep-cell{
  background:var(--surface);padding:38px 28px;
}
.deep-cell .num{
  font-family:'JetBrains Mono';font-size:40px;font-weight:700;color:var(--firouzeh);
  display:flex;align-items:baseline;gap:4px;
}
.deep-cell .num sup{font-size:16px;color:var(--brass);}
.deep-cell .lbl{margin-top:10px;font-size:14px;color:var(--titanium);line-height:1.7;}

/* ============================== GALLERY (detail close-ups) ============================== */
.gallery{background:linear-gradient(180deg,var(--void),#0c0d10);}
.gallery-track-wrap{margin-top:70px;overflow:hidden;}
.gallery-track{display:flex;gap:24px;width:max-content;}
.gcard{
  width:340px;height:420px;border-radius:22px;flex-shrink:0;
  background:linear-gradient(155deg,var(--surface-2),var(--void));
  border:1px solid var(--line);
  padding:26px;display:flex;flex-direction:column;justify-content:flex-end;
  position:relative;overflow:hidden;
}
.gcard .glow{
  position:absolute;inset:0;
  background:radial-gradient(circle at 30% 20%, rgba(44,198,192,.22), transparent 55%);
}
.gcard h4{font-size:20px;font-weight:700;margin-bottom:8px;position:relative;}
.gcard p{font-size:13.5px;color:var(--titanium);line-height:1.8;position:relative;}
.gcard .idx{
  position:absolute;top:24px;left:26px;font-family:'JetBrains Mono';font-size:12px;color:var(--ink-dim);
}

/* ============================== COMPARISON ============================== */
.compare table{width:100%;border-collapse:collapse;margin-top:60px;}
.compare th, .compare td{
  padding:20px 18px;text-align:center;border-bottom:1px solid var(--line);font-size:14.5px;
}
.compare th{
  font-family:'JetBrains Mono';font-size:12px;letter-spacing:.1em;color:var(--ink-dim);
  text-transform:uppercase;font-weight:500;
}
.compare td:first-child, .compare th:first-child{text-align:right;color:var(--titanium);}
.compare tbody tr:hover{background:rgba(44,198,192,.04);}
.compare td b{color:var(--firouzeh);font-family:'JetBrains Mono';}
.compare-scroll{overflow-x:auto;}

/* ============================== TESTIMONIALS ============================== */
.voices{background:var(--void);}
.voice-grid{margin-top:70px;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
@media(max-width:900px){.voice-grid{grid-template-columns:1fr;}}
.voice-card{
  padding:30px;border-radius:20px;background:var(--surface);border:1px solid var(--line);
}
.voice-card .stars{color:var(--brass);font-size:14px;letter-spacing:2px;margin-bottom:16px;}
.voice-card p{font-size:15px;line-height:1.9;color:var(--ink);margin-bottom:22px;}
.voice-person{display:flex;align-items:center;gap:12px;}
.voice-person .av{width:38px;height:38px;border-radius:50%;background:linear-gradient(140deg,var(--firouzeh),var(--brass));}
.voice-person b{display:block;font-size:13.5px;}
.voice-person span{font-size:12px;color:var(--ink-dim);}

/* ============================== CTA ============================== */
.cta{
  background:linear-gradient(160deg,#0d3735,#0a0b0d 60%);
  border-radius:32px;margin:0 auto;max-width:1160px;
  padding:90px 60px;text-align:center;position:relative;overflow:hidden;
  border:1px solid rgba(44,198,192,.25);
}
.cta::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 80% at 50% 0%, rgba(44,198,192,.25), transparent 70%);
}
.cta h2{font-size:clamp(30px,4.5vw,52px);font-weight:800;position:relative;max-width:640px;margin:0 auto;}
.cta p{color:var(--titanium);margin:20px auto 36px;max-width:460px;font-size:16px;position:relative;}
.cta-form{
  display:flex;gap:10px;max-width:420px;margin:0 auto;position:relative;
}
.cta-form input{
  flex:1;padding:14px 18px;border-radius:100px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);color:var(--ink);font-family:'Vazirmatn';font-size:14px;
}
.cta-form input:focus{outline:2px solid var(--firouzeh);outline-offset:2px;}
@media(max-width:600px){ .cta{padding:60px 26px;} .cta-form{flex-direction:column;} }

/* ============================== FOOTER ============================== */
footer{border-top:1px solid var(--line);padding:70px 0 34px;background:var(--void);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;}
@media(max-width:800px){.footer-grid{grid-template-columns:1fr 1fr;}}
.footer-grid h5{font-size:13px;color:var(--ink-dim);margin-bottom:16px;font-weight:500;}
.footer-grid ul li{margin-bottom:11px;font-size:14px;color:var(--titanium);}
.footer-grid ul li a:hover{color:var(--firouzeh);}
.footer-bottom{
  margin-top:60px;padding-top:26px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  font-size:12.5px;color:var(--ink-dim);font-family:'JetBrains Mono';
}

/* ============================== misc widgets ============================== */
.cursor-dot{
  position:fixed;top:0;left:0;width:8px;height:8px;border-radius:50%;
  background:var(--firouzeh);pointer-events:none;z-index:9998;
  transform:translate(-50%,-50%);mix-blend-mode:difference;
  transition:width .2s,height .2s;
  display:none;
}
@media(hover:hover) and (pointer:fine){ .cursor-dot{display:block;} }

.back-to-top{
  position:fixed;bottom:28px;left:28px;z-index:400;
  width:46px;height:46px;border-radius:50%;
  background:var(--surface);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s, transform .3s;
}
.back-to-top.show{opacity:1;pointer-events:auto;}
.back-to-top:hover{border-color:var(--firouzeh);transform:translateY(-3px);}

/* ============================== PRELOADER ============================== */
#preloader{
  position:fixed;inset:0;z-index:10000;
  background:var(--void);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
}
#preloader .pl-mark{
  width:56px;height:56px;border-radius:16px;
  background:conic-gradient(from 220deg,var(--firouzeh),var(--brass),var(--firouzeh));
  box-shadow:0 0 40px rgba(44,198,192,.45);
}
#preloader .pl-bar{
  width:220px;height:2px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;
}
#preloader .pl-bar-fill{width:0%;height:100%;background:linear-gradient(90deg,var(--firouzeh),var(--brass));}
#preloader .pl-pct{font-family:'JetBrains Mono';font-size:12px;color:var(--ink-dim);letter-spacing:.2em;}

/* ============================== SIDE DOT NAV ============================== */
.side-dots{
  position:fixed;left:26px;top:50%;transform:translateY(-50%);z-index:400;
  display:flex;flex-direction:column;gap:16px;
}
@media(max-width:900px){.side-dots{display:none;}}
.side-dots button{
  width:9px;height:9px;border-radius:50%;
  background:rgba(237,239,242,.18);
  transition:background .3s,transform .3s;
  position:relative;
}
.side-dots button::after{
  content:attr(data-label);position:absolute;left:20px;top:50%;transform:translateY(-50%);
  font-family:'JetBrains Mono';font-size:11px;white-space:nowrap;color:var(--ink-dim);
  opacity:0;transition:opacity .25s;pointer-events:none;
}
.side-dots button:hover::after{opacity:1;}
.side-dots button.active{background:var(--firouzeh);transform:scale(1.4);box-shadow:0 0 10px var(--firouzeh);}

/* ============================== RADIAL RING (deep dive) ============================== */
.deep-cell{position:relative;}
.ring{
  position:absolute;top:34px;left:28px;width:52px;height:52px;border-radius:50%;
  background:conic-gradient(var(--firouzeh) calc(var(--p,0) * 1%), rgba(255,255,255,.07) 0);
  display:flex;align-items:center;justify-content:center;
}
.ring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--surface);}
.deep-cell.has-ring .num{margin-right:70px;}
@media(max-width:900px){ .ring{display:none;} .deep-cell.has-ring .num{margin-right:0;} }

/* ============================== MINI LAPTOP (per model card) ============================== */
.mini-stage{
  perspective:900px;height:100%;width:100%;
  display:flex;align-items:center;justify-content:center;
}
.mini-laptop{
  width:64%;transform-style:preserve-3d;transform:translateY(4px) rotateX(8deg) scale(.86);
}
.mini-lid{
  position:relative;width:100%;aspect-ratio:16/10.4;transform-origin:bottom center;
  transform-style:preserve-3d;transform:rotateX(100deg);
  border-radius:8px 8px 2px 2px;
}
.mini-lid-back{
  position:absolute;inset:0;border-radius:8px 8px 2px 2px;backface-visibility:hidden;
  background:linear-gradient(150deg,#2c2f35,#101215);
  display:flex;align-items:center;justify-content:center;
}
.mini-lid-back .dotmark{width:12px;height:12px;border-radius:4px;background:var(--mcolor,var(--firouzeh));opacity:.85;}
.mini-screen{
  position:absolute;inset:0;border-radius:8px 8px 2px 2px;background:#050607;
  transform:rotateY(180deg);backface-visibility:hidden;padding:6px;
}
.mini-screen-inner{
  position:relative;width:100%;height:100%;border-radius:3px;overflow:hidden;
  background:linear-gradient(160deg,#0a1517,#020304 70%);
}
.mini-screen-inner .glow{
  position:absolute;inset:0;opacity:0;
  background:radial-gradient(ellipse 70% 60% at 50% 30%, var(--mcolor,var(--firouzeh)), transparent 70%);
  filter:blur(2px);
}
.mini-base{
  position:relative;width:100%;aspect-ratio:16/10.5;margin-top:-1px;
  border-radius:2px 2px 9px 9px;
  background:linear-gradient(180deg,#22252a,#0e0f12);
  box-shadow:0 20px 40px -14px rgba(0,0,0,.7);
}
.mini-base .kb{
  position:absolute;top:5px;right:9%;left:9%;bottom:5px;border-radius:3px;
  background:repeating-linear-gradient(90deg,#17191d 0 6%,#0d0e10 6% 6.6%);opacity:.8;
}

/* ============================== COLOR SWATCHES ============================== */
.swatches{display:flex;gap:9px;margin-bottom:22px;align-items:center;}
.swatches .lbl-txt{font-size:12px;color:var(--ink-dim);margin-left:6px;font-family:'JetBrains Mono';}
.swatch{
  width:20px;height:20px;border-radius:50%;cursor:pointer;position:relative;
  border:2px solid transparent;transition:transform .2s;
}
.swatch:hover{transform:scale(1.15);}
.swatch.active{border-color:var(--ink);}
.swatch.active::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--line);
}

/* ============================== CONFIGURATOR ============================== */
.configurator{background:linear-gradient(180deg,#0c0d10,var(--void));}
.config-box{
  margin-top:70px;display:grid;grid-template-columns:1.1fr .9fr;gap:0;
  border-radius:24px;overflow:hidden;border:1px solid var(--line);
  background:var(--surface);
}
@media(max-width:900px){.config-box{grid-template-columns:1fr;}}
.config-visual{
  background:linear-gradient(155deg,var(--surface-3),var(--void));
  display:flex;align-items:center;justify-content:center;padding:50px;min-height:320px;
  position:relative;overflow:hidden;
}
.config-visual .cv-laptop{width:78%;}
.config-panel{padding:46px 44px;}
.config-row{margin-bottom:28px;}
.config-row .row-label{
  display:flex;justify-content:space-between;font-size:13.5px;color:var(--titanium);margin-bottom:12px;
}
.config-row .row-label b{color:var(--ink);font-family:'JetBrains Mono';}
.chip-set{display:flex;gap:10px;flex-wrap:wrap;}
.chip{
  padding:9px 16px;border-radius:100px;border:1px solid var(--line);
  font-size:13px;font-family:'JetBrains Mono';color:var(--titanium);transition:all .25s;
}
.chip:hover{border-color:var(--firouzeh);color:var(--ink);}
.chip.active{background:var(--firouzeh);border-color:var(--firouzeh);color:#04201f;font-weight:700;}
.config-total{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:36px;padding-top:26px;border-top:1px solid var(--line);
}
.config-total .t-label{font-size:13px;color:var(--ink-dim);}
.config-total .t-amount{font-family:'JetBrains Mono';font-size:26px;font-weight:700;color:var(--firouzeh);}

/* ============================== FAQ ============================== */
.faq{background:var(--void);}
.faq-list{margin-top:60px;max-width:760px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  padding:24px 4px;text-align:right;font-size:16px;font-weight:600;
}
.faq-q .plus{
  font-family:'JetBrains Mono';font-size:20px;color:var(--firouzeh);transition:transform .35s var(--ease);flex-shrink:0;margin-left:16px;
}
.faq-item.open .faq-q .plus{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease);}
.faq-a p{padding:0 4px 24px;color:var(--titanium);font-size:14.5px;line-height:1.9;max-width:620px;}

/* ============================== magnetic ============================== */
.magnetic{will-change:transform;}