/* ============================================================
   GYAE | shared stylesheet
   ============================================================ */

:root{
  --void:#030304;
  --panel:rgba(15,12,17,0.72);
  --panel-solid:#0c0a0e;
  --line:rgba(255,255,255,0.09);
  --line-red:rgba(255,25,60,0.4);

  --red:#ff123c;
  --ember:#ff5a1f;
  --gold:#ffb700;
  --cyan:#00e5d4;

  --white:#f6f4f1;
  --silver:#9d97a3;
  --dim:#5a5563;

  --f-head:'Syne',sans-serif;
  --f-slab:'Bebas Neue',sans-serif;
  --f-soul:'Cormorant Garamond',serif;
  --f-mono:'Space Mono',monospace;
  --f-body:'Inter',sans-serif;

  --radius:22px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  background:var(--void);
  color:var(--white);
  font-family:var(--f-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
::selection{background:var(--red);color:#000;}
img,svg{display:block;max-width:100%;}

/* ---------- ambience ---------- */
.field{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.glow{position:absolute;border-radius:50%;filter:blur(150px);}
.glow-a{width:640px;height:640px;background:radial-gradient(circle,rgba(255,18,60,.20),transparent 68%);top:-14%;left:-12%;}
.glow-b{width:620px;height:620px;background:radial-gradient(circle,rgba(255,90,31,.14),transparent 68%);bottom:-16%;right:-10%;}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(rgba(255,18,60,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,18,60,.028) 1px,transparent 1px);
  background-size:42px 42px;}

.app{position:relative;z-index:5;}

/* ---------- top nav ---------- */
.topnav{
  position:sticky;top:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;margin:16px auto 0;max-width:1360px;
  background:rgba(9,7,11,0.78);
  border:1px solid var(--line-red);
  border-radius:100px;
  backdrop-filter:blur(18px);
  box-shadow:0 0 30px rgba(255,18,60,0.14);
}
.brand-mark{display:flex;align-items:center;gap:10px;font-family:var(--f-head);font-weight:800;font-size:19px;letter-spacing:.06em;color:var(--white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:62vw;}
.brand-mark .dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red);animation:pulse 1.05s infinite alternate ease-in-out;}
@keyframes pulse{0%{transform:scale(.75);opacity:.5;}100%{transform:scale(1.3);opacity:1;}}

.nav-links{display:flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;}
.nav-links a{
  color:var(--silver);padding:9px 16px;border-radius:100px;
  transition:all .2s ease;display:inline-block;
}
.nav-links a:hover{color:var(--white);}
.nav-links a.active{color:#000;background:linear-gradient(135deg,var(--red),var(--ember));box-shadow:0 0 18px rgba(255,90,31,.4);}

.nav-cta{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;font-weight:700;
  background:transparent;border:1px solid var(--line-red);color:var(--white);
  padding:9px 18px;border-radius:100px;transition:all .2s ease;display:inline-block;
}
.nav-cta:hover{background:var(--red);border-color:var(--red);box-shadow:0 0 22px rgba(255,18,60,.5);}

.nav-burger{display:none;background:none;border:1px solid var(--line-red);border-radius:10px;width:38px;height:38px;color:var(--white);font-size:16px;}

/* ---------- mobile drawer overlay ---------- */
.drawer-backdrop{position:fixed;inset:0;z-index:99998;background:rgba(3,3,4,.6);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s ease;}
.drawer-backdrop.open{opacity:1;pointer-events:auto;}
.mobile-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:99999;width:min(84vw,360px);
  background:rgba(6,5,8,.98);backdrop-filter:blur(24px);
  border-left:1px solid var(--line-red);box-shadow:-24px 0 60px rgba(0,0,0,.65);
  display:flex;flex-direction:column;justify-content:space-between;padding:30px 24px;
  transform:translateX(100%);transition:transform .38s cubic-bezier(.16,.84,.32,1);
}
.mobile-drawer.open{transform:translateX(0);}
body.drawer-locked{overflow:hidden;}

/* ---------- shared type ---------- */
.eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;color:var(--red);text-transform:uppercase;}
.section{max-width:1360px;margin:0 auto;padding:110px 28px;position:relative;}
.section-tight{padding-top:60px;padding-bottom:60px;}
h2.h-slab{font-family:var(--f-slab);font-size:clamp(38px,5.4vw,72px);letter-spacing:.02em;line-height:.96;text-transform:uppercase;}
.soul{font-family:var(--f-soul);font-style:italic;color:var(--ember);}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.09em;font-weight:700;
  padding:15px 30px;border-radius:100px;border:1px solid transparent;transition:all .22s cubic-bezier(.2,.9,.3,1);
}
.btn-solid{background:linear-gradient(135deg,var(--red),#a3001c);color:#fff;box-shadow:0 0 26px rgba(255,18,60,.45);}
.btn-solid:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 0 40px rgba(255,18,60,.7);}
.btn-ghost{border-color:var(--line-red);color:var(--white);}
.btn-ghost:hover{background:rgba(255,18,60,.1);}

/* ---------- HERO ---------- */
.hero{max-width:1360px;margin:22px auto 0;padding:0 28px;}
.hero-inner{
  position:relative;border:1px solid var(--line-red);border-radius:32px;
  overflow:hidden;min-height:min(88vh,880px);display:flex;flex-direction:column;justify-content:center;
  padding:70px 48px 54px;
  box-shadow:0 30px 90px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.08);
}
.hero-inner::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:3;background:linear-gradient(90deg,transparent,var(--red),var(--gold),transparent);}
.hero-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.85;}
.hero-bg-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(3,3,4,.55) 0%,rgba(3,3,4,.35) 32%,rgba(3,3,4,.72) 78%,rgba(3,3,4,.94) 100%),
             radial-gradient(circle at 50% 30%,rgba(255,18,60,.16),transparent 60%);
}
.hero-content{position:relative;z-index:2;}
.hero-top{display:flex;justify-content:center;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;color:var(--red);text-transform:uppercase;margin-bottom:26px;opacity:0;animation:rise .7s ease .1s forwards;}
.hero-word{font-family:var(--f-head);font-weight:800;font-size:clamp(76px,15vw,196px);line-height:.82;letter-spacing:-.03em;text-transform:uppercase;opacity:0;animation:rise .8s ease .22s forwards;}
.hero-word .twi{display:block;font-family:var(--f-soul);font-style:italic;font-weight:400;font-size:clamp(22px,3.4vw,38px);color:var(--ember);text-shadow:0 0 22px rgba(255,90,31,.45);margin-top:10px;text-transform:none;letter-spacing:.01em;}
.hero-subtitle{
  display:inline-flex;align-items:center;gap:12px;margin-top:18px;
  font-family:var(--f-mono);font-weight:700;font-size:clamp(13px,1.6vw,16px);letter-spacing:.34em;text-transform:uppercase;color:var(--silver);
  opacity:0;animation:rise .8s ease .34s forwards;
}
.hero-subtitle::before,.hero-subtitle::after{content:'';width:26px;height:1px;background:var(--line-red);}
.hero-punch{font-family:var(--f-slab);font-size:clamp(20px,2.6vw,30px);letter-spacing:.03em;text-transform:uppercase;margin-top:22px;color:var(--white);opacity:.85;
  opacity:0;animation:rise .8s ease .42s forwards;}
.hero-copy{color:var(--silver);font-weight:300;line-height:1.8;margin-top:20px;max-width:46ch;opacity:0;animation:rise .8s ease .5s forwards;}
.hero-actions{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;opacity:0;animation:rise .8s ease .6s forwards;}

@keyframes rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}

.ticker-wrap{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:16px 0;margin-top:70px;background:rgba(255,18,60,.04);}
.ticker{display:flex;width:max-content;animation:scroll 22s linear infinite;}
.ticker span{font-family:var(--f-slab);font-size:22px;letter-spacing:.06em;color:var(--dim);padding:0 28px;text-transform:uppercase;white-space:nowrap;}
.ticker span.hot{color:var(--red);}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* manifesto */
.split{display:grid;grid-template-columns:1.3fr .9fr;gap:60px;align-items:start;}
.quote{font-family:var(--f-soul);font-style:italic;font-size:clamp(26px,3vw,38px);line-height:1.35;color:var(--white);}
.quote span{color:var(--ember);}
.stat-stack{display:flex;flex-direction:column;gap:18px;margin-top:30px;}
.stat-card{border:1px solid var(--line);border-radius:16px;padding:20px 22px;background:var(--panel);}
.stat-card .num{font-family:var(--f-head);font-size:26px;font-weight:800;color:var(--white);}
.stat-card .lab{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:var(--silver);margin-top:6px;}

/* model grid */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:44px;gap:24px;flex-wrap:wrap;}
.model-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.model-card{
  position:relative;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);
  padding:26px 22px 24px;overflow:hidden;transition:all .3s cubic-bezier(.2,.9,.3,1);
}
.model-card:hover{border-color:var(--line-red);transform:translateY(-6px);box-shadow:0 20px 50px rgba(255,18,60,.16);}
.model-card .flag{position:absolute;top:16px;right:16px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;color:var(--void);background:var(--gold);padding:4px 10px;border-radius:100px;font-weight:700;}
.glass-stage{height:130px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.model-card .m-name{font-family:var(--f-head);font-weight:800;font-size:17px;letter-spacing:.01em;text-transform:uppercase;line-height:1.2;}
.model-card .m-tag{font-family:var(--f-body);font-size:12.5px;color:var(--silver);margin-top:8px;line-height:1.5;font-weight:300;}
.model-card .m-foot{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding-top:16px;border-top:1px solid var(--line);}
.m-price{font-family:var(--f-mono);font-size:12.5px;color:var(--white);}
.m-arrow{width:30px;height:30px;border-radius:50%;border:1px solid var(--line-red);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--red);transition:all .2s ease;}
.model-card:hover .m-arrow{background:var(--red);color:#fff;transform:rotate(45deg);}

/* feature highlight */
.feature-panel{
  display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line-red);border-radius:32px;overflow:hidden;
  background:linear-gradient(160deg,rgba(20,8,14,.7),rgba(3,3,4,.98));
}
.feature-copy{padding:58px 52px;}
.feature-copy .flag-inline{display:inline-block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;color:var(--void);background:var(--gold);padding:5px 12px;border-radius:100px;font-weight:700;margin-bottom:22px;}
.feature-list{margin-top:30px;display:flex;flex-direction:column;gap:18px;}
.feature-item{display:flex;gap:14px;align-items:flex-start;}
.feature-item .ico{width:34px;height:34px;flex:none;border-radius:10px;background:rgba(255,18,60,.14);border:1px solid var(--line-red);display:flex;align-items:center;justify-content:center;color:var(--red);font-family:var(--f-mono);font-size:13px;}
.feature-item .ftxt b{display:block;font-family:var(--f-body);font-weight:600;font-size:14.5px;}
.feature-item .ftxt span{font-size:12.5px;color:var(--silver);font-weight:300;}

.device{padding:44px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);border-left:1px solid var(--line);}
.phone{width:260px;border-radius:34px;border:1px solid var(--line-red);background:linear-gradient(180deg,#0c0a0d,#040304);padding:16px;box-shadow:0 30px 70px rgba(0,0,0,.6);}
.phone-top{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:9px;color:var(--silver);padding:2px 6px 14px;}
.phone-card{border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:10px;background:rgba(255,255,255,.02);}
.phone-card .pt{font-family:var(--f-mono);font-size:9.5px;color:var(--red);letter-spacing:.08em;}
.phone-card .pn{font-family:var(--f-head);font-weight:700;font-size:15px;margin-top:6px;}
.phone-card .pw{font-size:10.5px;color:var(--silver);margin-top:4px;}
.rec-row{display:flex;align-items:center;gap:8px;margin-top:12px;}
.rec-dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);animation:pulse 1s infinite alternate;}
.rec-bars{display:flex;gap:2px;align-items:flex-end;height:20px;}
.rec-bars i{width:3px;background:var(--cyan);border-radius:2px;animation:barpulse 1.1s ease-in-out infinite;}
@keyframes barpulse{0%,100%{height:20%;}50%{height:100%;}}

/* custom band (home teaser) */
.custom-band{
  border:1px solid var(--line-red);border-radius:32px;padding:60px 52px;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;
  background:linear-gradient(120deg,rgba(255,18,60,.08),rgba(3,3,4,.9));
}

/* footer */
.foot{border-top:1px solid var(--line);padding:50px 28px 40px;max-width:1360px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;}
.foot-brand{font-family:var(--f-head);font-weight:800;font-size:20px;}
.foot-cols{display:flex;gap:60px;flex-wrap:wrap;}
.foot-col{font-family:var(--f-mono);font-size:11.5px;}
.foot-col .t{color:var(--red);letter-spacing:.08em;margin-bottom:12px;}
.foot-col a{display:block;color:var(--silver);margin-bottom:8px;transition:color .15s;}
.foot-col a:hover{color:var(--white);}
.foot-bottom{max-width:1360px;margin:0 auto;padding:0 28px 40px;font-family:var(--f-mono);font-size:10.5px;color:var(--dim);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

/* ================= SECONDARY PAGES (UI only) ================= */
.subnav{display:flex;gap:8px;max-width:1360px;margin:26px auto 0;padding:0 28px;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;flex-wrap:wrap;}
.subnav a{background:var(--panel);border:1px solid var(--line);color:var(--silver);padding:10px 18px;border-radius:100px;transition:all .15s;display:inline-block;}
.subnav a.active{color:#000;background:var(--white);border-color:#fff;}
.subnav a:hover{color:var(--white);}

.page-head{max-width:1360px;margin:0 auto;padding:50px 28px 10px;}
.page-head .tag{font-family:var(--f-mono);font-size:11px;color:var(--red);letter-spacing:.14em;}
.page-head h1{font-family:var(--f-slab);font-size:clamp(40px,6vw,84px);text-transform:uppercase;letter-spacing:.02em;line-height:.95;margin-top:10px;}
.page-head p{color:var(--silver);font-weight:300;max-width:56ch;margin-top:16px;line-height:1.7;}

.chip-row{display:flex;gap:10px;flex-wrap:wrap;margin:34px 0 30px;}
.chip{font-family:var(--f-mono);font-size:11px;padding:9px 16px;border-radius:100px;border:1px solid var(--line);color:var(--silver);display:inline-block;}
.chip.on{background:var(--red);border-color:var(--red);color:#fff;}

/* product detail */
.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;max-width:1360px;margin:0 auto;padding:40px 28px 100px;}
.pd-gallery-main{border:1px solid var(--line);border-radius:26px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 20%,rgba(255,90,31,.14),transparent 55%),#0a0810;}
.pd-thumbs{display:flex;gap:10px;margin-top:14px;}
.pd-thumb{width:70px;height:70px;border-radius:12px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;background:#0a0810;}
.pd-thumb.on{border-color:var(--red);}
.pd-info .tag{font-family:var(--f-mono);font-size:11px;color:var(--gold);letter-spacing:.1em;}
.pd-info h1{font-family:var(--f-head);font-weight:800;font-size:clamp(30px,3.6vw,44px);text-transform:uppercase;margin-top:10px;}
.pd-price{font-family:var(--f-mono);font-size:20px;margin-top:14px;color:var(--white);}
.pd-desc{color:var(--silver);font-weight:300;line-height:1.8;margin-top:18px;max-width:48ch;}
.var-block{margin-top:30px;}
.var-label{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:var(--silver);margin-bottom:10px;}
.swatches{display:flex;gap:10px;}
.sw{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.15);}
.sw.ring{outline:2px solid var(--red);outline-offset:3px;}
.size-row{display:flex;gap:10px;}
.size-pill{font-family:var(--f-mono);font-size:12px;padding:10px 16px;border-radius:100px;border:1px solid var(--line);color:var(--silver);}
.size-pill.on{background:#fff;color:#000;border-color:#fff;}
.qty-row{display:flex;align-items:center;gap:16px;margin-top:30px;}
.qty-box{display:flex;align-items:center;border:1px solid var(--line);border-radius:100px;overflow:hidden;}
.qty-box button{background:none;border:none;color:var(--white);width:38px;height:38px;font-size:16px;}
.qty-box span{font-family:var(--f-mono);width:34px;text-align:center;}
.pd-actions{display:flex;gap:14px;margin-top:28px;}
.trust-row{display:flex;gap:22px;margin-top:36px;padding-top:26px;border-top:1px solid var(--line);font-family:var(--f-mono);font-size:10.5px;color:var(--silver);flex-wrap:wrap;}

/* cart */
.cart-wrap{max-width:1000px;margin:0 auto;padding:40px 28px 100px;display:grid;grid-template-columns:1.5fr 1fr;gap:40px;}
.cart-line{display:grid;grid-template-columns:70px 1fr auto auto;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);}
.cart-thumb{width:70px;height:70px;border-radius:12px;background:#0a0810;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;}
.cart-line .cn{font-family:var(--f-body);font-weight:600;font-size:14px;}
.cart-line .cv{font-family:var(--f-mono);font-size:10.5px;color:var(--silver);margin-top:4px;}
.cart-price{font-family:var(--f-mono);font-size:13px;}
.summary-card{border:1px solid var(--line-red);border-radius:20px;padding:28px;background:var(--panel);height:fit-content;}
.sum-row{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:12.5px;color:var(--silver);padding:8px 0;}
.sum-row.total{color:var(--white);font-size:15px;border-top:1px solid var(--line);margin-top:8px;padding-top:16px;}
.promo{display:flex;gap:8px;margin:18px 0;}
.promo input{flex:1;background:transparent;border:1px solid var(--line);border-radius:100px;padding:10px 16px;color:var(--white);font-family:var(--f-mono);font-size:11.5px;}

/* checkout */
.checkout-wrap{max-width:1100px;margin:0 auto;padding:40px 28px 100px;display:grid;grid-template-columns:1.3fr 1fr;gap:50px;}
.co-steps{display:flex;gap:10px;font-family:var(--f-mono);font-size:11px;color:var(--dim);margin-bottom:30px;}
.co-steps span.on{color:var(--red);}
.field-group{margin-bottom:18px;}
.field-group label{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;color:var(--silver);margin-bottom:8px;}
.field-group input,.field-group select,.field-group textarea{
  width:100%;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:14px 16px;color:var(--white);font-family:var(--f-body);font-size:13.5px;
}
.field-row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.pay-tabs{display:flex;gap:10px;margin-bottom:18px;}
.pay-tab{flex:1;text-align:center;font-family:var(--f-mono);font-size:11px;border:1px solid var(--line);border-radius:12px;padding:14px;color:var(--silver);}
.pay-tab.on{border-color:var(--red);color:var(--white);background:rgba(255,18,60,.08);}

/* custom flow */
.cu-steps{display:flex;flex-wrap:wrap;gap:14px;max-width:1360px;margin:40px auto 0;padding:0 28px;}
.cu-step-chip{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:11px;color:var(--silver);border:1px solid var(--line);padding:9px 16px;border-radius:100px;}
.cu-step-chip.on{border-color:var(--line-red);color:var(--white);background:rgba(255,18,60,.08);}
.cu-step-chip b{color:var(--red);}
.cu-block{max-width:1360px;margin:50px auto 0;padding:0 28px;}
.cu-num{font-family:var(--f-head);font-size:13px;color:var(--red);letter-spacing:.1em;margin-bottom:10px;}
.cu-title{font-family:var(--f-slab);font-size:clamp(26px,3.4vw,40px);text-transform:uppercase;margin-bottom:30px;}
.cu-model-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.cu-model-pick{border:1px solid var(--line);border-radius:18px;padding:20px;text-align:center;background:var(--panel);}
.cu-model-pick.on{border-color:var(--red);box-shadow:0 0 24px rgba(255,18,60,.18);}
.cu-model-pick .cm-name{font-family:var(--f-head);font-weight:700;font-size:13px;text-transform:uppercase;margin-top:12px;}
.pref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.pref-card{border:1px solid var(--line);border-radius:18px;padding:22px;background:var(--panel);}
.pref-card .pt{font-family:var(--f-mono);font-size:11px;color:var(--silver);letter-spacing:.08em;margin-bottom:14px;}
.pref-opts{display:flex;gap:8px;flex-wrap:wrap;}
.pref-dot{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.15);}
.req-box{border:1px solid var(--line);border-radius:18px;padding:24px;background:var(--panel);}
.req-box textarea{width:100%;height:110px;background:transparent;border:none;color:var(--white);font-family:var(--f-body);font-size:14px;resize:none;}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;max-width:520px;}
.cal-cell{aspect-ratio:1;border-radius:10px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-size:12px;color:var(--silver);}
.cal-cell.on{background:var(--red);color:#fff;border-color:var(--red);}
.cal-cell.off{opacity:.25;}
.time-row{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;}
.time-pill{font-family:var(--f-mono);font-size:11.5px;padding:10px 18px;border-radius:100px;border:1px solid var(--line);color:var(--silver);}
.time-pill.on{background:#fff;color:#000;border-color:#fff;}
.confirm-card{border:1px solid var(--line-red);border-radius:24px;padding:40px;background:linear-gradient(160deg,rgba(255,18,60,.08),rgba(3,3,4,.9));display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;}
.confirm-id{font-family:var(--f-mono);font-size:11px;color:var(--gold);letter-spacing:.1em;}
.cu-nav{display:flex;justify-content:space-between;max-width:1360px;margin:60px auto 100px;padding:0 28px;}

/* control dashboard */
.dash{display:grid;grid-template-columns:240px 1fr;max-width:1440px;margin:26px auto 60px;padding:0 28px;gap:0;min-height:80vh;}
.dash-side{border:1px solid var(--line);border-radius:24px 0 0 24px;background:var(--panel-solid);padding:26px 16px;border-right:none;min-width:0;}
.dash-brand{font-family:var(--f-head);font-weight:800;font-size:16px;padding:0 12px 24px;letter-spacing:.05em;}
.dash-nav{display:flex;flex-direction:column;gap:4px;}
.dash-nav a{text-align:left;background:none;border:none;color:var(--silver);padding:12px 14px;border-radius:12px;font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;display:flex;align-items:center;gap:10px;}
.dash-nav a.active{background:rgba(255,18,60,.12);color:var(--white);border:1px solid var(--line-red);}
.dash-nav a:hover{color:var(--white);}
.dash-user{margin-top:30px;padding:14px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:11px;color:var(--silver);}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--red),var(--ember));flex:none;}

.dash-main{border:1px solid var(--line);border-radius:0 24px 24px 0;background:rgba(10,8,12,.5);padding:34px 36px;min-width:0;}
.dash-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:14px;}
.dash-top h2{font-family:var(--f-slab);font-size:30px;text-transform:uppercase;letter-spacing:.02em;}
.dash-search{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:100px;padding:10px 18px;font-family:var(--f-mono);font-size:11px;color:var(--dim);width:220px;}

.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:30px;}
.kpi{border:1px solid var(--line);border-radius:18px;padding:22px;background:var(--panel);}
.kpi .kl{font-family:var(--f-mono);font-size:10.5px;color:var(--silver);letter-spacing:.08em;}
.kpi .kv{font-family:var(--f-head);font-weight:800;font-size:28px;margin-top:10px;}
.kpi .kd{font-family:var(--f-mono);font-size:10.5px;margin-top:8px;color:var(--cyan);}
.kpi .kd.down{color:var(--red);}

.dash-grid2{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;}
.card{border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:24px;min-width:0;}
.card .ch{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.card .ch h3{font-family:var(--f-body);font-weight:600;font-size:14px;}
.card .ch span{font-family:var(--f-mono);font-size:10px;color:var(--silver);}

table{width:100%;border-collapse:collapse;font-family:var(--f-mono);font-size:11.5px;}
th{text-align:left;color:var(--dim);font-weight:400;letter-spacing:.06em;padding:10px 8px;border-bottom:1px solid var(--line);}
td{padding:13px 8px;border-bottom:1px solid var(--line);color:var(--silver);}
td.strong{color:var(--white);}
.status{display:inline-block;padding:4px 10px;border-radius:100px;font-size:9.5px;letter-spacing:.05em;}
.status.paid{background:rgba(0,229,212,.12);color:var(--cyan);}
.status.pending{background:rgba(255,183,0,.12);color:var(--gold);}
.status.ship{background:rgba(255,18,60,.12);color:var(--red);}

.bars{display:flex;align-items:flex-end;gap:10px;height:150px;margin-top:10px;}
.bars i{flex:1;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--ember),var(--red));display:block;}

.stock-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);}
.stock-bar{width:110px;height:6px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;}
.stock-bar i{display:block;height:100%;background:var(--cyan);}
.stock-bar i.low{background:var(--red);}

.grid-2col{display:grid;grid-template-columns:1fr 1fr;gap:20px;}

/* Mobile Horizontal Touch Carousels & Mobile Enhancements */
@media (max-width:768px){
  .horizontal-carousel,
  .model-grid,
  .kabza-feature-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 16px;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    gap: 16px !important;
    padding-bottom: 14px !important;
    margin-right: -16px;
    padding-right: 16px;
    scrollbar-width: none;
  }
  .horizontal-carousel::-webkit-scrollbar,
  .model-grid::-webkit-scrollbar,
  .kabza-feature-grid::-webkit-scrollbar {
    display: none;
  }
  .horizontal-carousel > *,
  .model-grid > *,
  .kabza-feature-grid > * {
    flex: 0 0 82% !important;
    min-width: 82% !important;
    scroll-snap-align: start !important;
  }

  .stat-stack {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 16px;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    gap: 12px !important;
    padding-bottom: 8px !important;
    margin-right: -16px;
    padding-right: 16px;
    scrollbar-width: none;
  }
  .stat-stack::-webkit-scrollbar {
    display: none;
  }
  .stat-stack > * {
    flex: 0 0 72% !important;
    min-width: 72% !important;
    scroll-snap-align: start !important;
  }
}

/* responsive */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;}
  .model-grid{grid-template-columns:repeat(2,1fr); gap:16px;}
  .split{grid-template-columns:1fr; gap:36px;}
  .feature-panel{grid-template-columns:1fr;}
  .pd-grid,.cart-wrap,.checkout-wrap{grid-template-columns:1fr; gap:36px; padding:30px 16px 80px;}
  .dash{grid-template-columns:1fr;}
  .dash-side{border-radius:24px 24px 0 0;border-right:1px solid var(--line);padding:16px;}
  .dash-main{border-radius:0 0 24px 24px; padding:24px 16px;}
  .stat-row,.pref-grid,.cu-model-row{grid-template-columns:repeat(2,1fr); gap:16px;}
  .dash-grid2,.grid-2col{grid-template-columns:1fr; gap:20px;}
  .section{padding:50px 16px;}
  .page-head{padding:24px 16px 10px;}
  .hero{padding:0 16px;}
  .topnav{margin:10px 16px 0; padding:10px 18px;}

  /* the admin sidebar becomes a compact dropdown menu on mobile —
     a horizontal scroll strip isn't discoverable, this is */
  .dash-brand{display:none;}
  .dash-user{border-top:none;margin-top:0;padding:10px 4px 4px;}
  .dash-nav{display:none;}
  .dash-nav-select{
    display:block;width:100%;appearance:none;-webkit-appearance:none;
    background:rgba(255,18,60,.1) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M0 0l5 6 5-6z" fill="%23f6f4f1"/></svg>') no-repeat right 16px center;
    border:1px solid var(--line-red);color:var(--white);
    font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;
    padding:13px 40px 13px 16px;border-radius:14px;
  }
}
@media (min-width:981px){
  .dash-nav-select{display:none;}
}
@media (max-width:680px){
  .nav-links{display:none;}
  .nav-burger{display:block; cursor:pointer;}
  .custom-band{grid-template-columns:1fr;text-align:left; padding:32px 20px; gap:20px;}
  .hero-inner{padding:96px 16px 36px !important; border-radius:24px; min-height:92vh !important;}
  .ticker-wrap{margin-top:36px;}
  .btn{width:100%; justify-content:center; padding:14px 20px; font-size:11.5px;}
  .hero-actions{width:100%; flex-direction:column; gap:10px;}
  .field-row-2{grid-template-columns:1fr;}
  .pay-tabs{flex-direction:column; gap:8px;}
  .foot{padding:36px 16px 24px;}
  .foot-cols{gap:24px; flex-direction:column;}
  .ticker span{font-size:16px; padding:0 16px;}
  #scroll-video-wrap{height:180vh !important;}

  /* nav breathes on narrow phones instead of stepping abruptly */
  .topnav{padding:10px 4vw;}
  .nav-cta{padding:8px 14px; font-size:10px;}
  .brand-mark{font-size:17px;}

  /* stack layouts that were still 2-up / row-based */
  .confirm-card{grid-template-columns:1fr; text-align:center; padding:28px 22px;}
  .cu-nav{flex-wrap:wrap; gap:12px; justify-content:center;}
  .device{padding:28px 20px;}
  .feature-copy{padding:36px 22px;}
  .pd-actions{flex-direction:column;}
  .qty-row{flex-wrap:wrap; gap:12px;}
  .trust-row{gap:14px;}
  .cart-line{grid-template-columns:56px 1fr; grid-template-areas:"thumb name" "thumb price"; row-gap:6px;}
  .cart-thumb{grid-area:thumb; width:56px; height:56px;}
  .cart-line > .cn, .cart-line > .cv{grid-area:name;}
  .cart-price{grid-area:price;}
  .dash-search{width:100%;}
  .dash-top{width:100%;}

  /* stock/funnel rows: label above the bar instead of three items
     fighting for space on one line */
  .stock-row{flex-wrap:wrap; row-gap:8px; padding:14px 0;}
  .stock-row > span:first-child{flex:1 1 100%; font-size:12.5px;}
  .stock-bar{flex:1; width:auto !important; min-width:0;}
  .stock-row > span:last-child{flex:none;}
}

/* extend the touch-carousel treatment already used for model-grid
   to the remaining multi-column pickers, so nothing gets squeezed
   into unreadable narrow columns on a phone */
@media (max-width:600px){
  .cu-model-row,
  .pref-grid{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    scroll-snap-type:x mandatory !important;
    scroll-padding-left:16px;
    -webkit-overflow-scrolling:touch;
    gap:14px !important;
    padding-bottom:10px !important;
    margin-right:-16px;
    padding-right:16px;
    scrollbar-width:none;
  }
  .cu-model-row::-webkit-scrollbar,
  .pref-grid::-webkit-scrollbar{display:none;}
  .cu-model-row > *{flex:0 0 44%; min-width:44%; scroll-snap-align:start;}
  .pref-grid > *{flex:0 0 78%; min-width:78%; scroll-snap-align:start;}
}

/* tightest phones (iPhone SE / small Android) get one more pass
   so headings and card padding don't overpower the viewport */
@media (max-width:400px){
  .section{padding:40px 14px;}
  .hero-word{font-size:clamp(54px,17vw,76px);}
  .hero-punch{font-size:18px;}
  h2.h-slab{font-size:clamp(30px,9vw,40px);}
  .page-head h1{font-size:clamp(32px,10vw,44px);}
  .model-card{padding:20px 16px 18px;}
  .stat-card{padding:16px 18px;}
  .btn{font-size:11px; padding:13px 16px;}
  .dash-top h2{font-size:22px;}
  .kpi .kv{font-size:22px;}
}

/* respect the notch / home-indicator area when content sits
   flush with the bottom edge on a phone */
.mobile-drawer{padding-bottom:max(30px, env(safe-area-inset-bottom));}
.pd-actions, .cu-nav{padding-bottom:env(safe-area-inset-bottom);}

/* disable hover-only affordances on touch so nothing gets stuck
   mid-transition, and give a lightweight tap response instead */
@media (hover:none), (pointer:coarse){
  .model-card:hover{transform:none; box-shadow:none; border-color:var(--line);}
  .model-card:active{border-color:var(--line-red); transform:translateY(-2px);}
  .btn-solid:hover{transform:none; box-shadow:0 0 26px rgba(255,18,60,.45);}
  .btn-solid:active{transform:scale(.98);}
}

/* any data table (dashboard pages) scrolls horizontally instead
   of squashing columns or breaking the page layout */
.table-scroll{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.table-scroll table{min-width:560px;}