/* ============================================================
   BYD PROMOS PH — design tokens (light theme)
   Background: #F6F7F4 bg / #FFFFFF surface / #EEF0EC surface-raised
   Border:    #E1E4DF
   Text:      #14181C primary / #5B6570 muted
   Accent A:  #5A7A00 voltage (CTAs, links — AA-contrast olive-lime on white)
   Accent B:  #E4402C signal red (BYD mark, alerts)
   Dark inset: #12161C / #1D242E — reserved for the vehicle art panels only,
               so the neon-lime line art keeps its contrast on a light page.
   Display:   'Space Grotesk'   Body: 'IBM Plex Sans'
   ============================================================ */

:root{
  --bg:#F6F7F4;
  --ink:#12161C;
  --surface:#FFFFFF;
  --surface-raised:#EEF0EC;
  --border:#E1E4DF;
  --text:#14181C;
  --muted:#5B6570;
  --muted-dim:#78818C;
  --volt:#5A7A00;
  --volt-dim:#8FAF00;
  --signal:#E4402C;
  --radius:2px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'IBM Plex Sans', -apple-system, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  line-height:1.1;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
p{margin:0 0 1em; color:var(--muted); max-width:64ch;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{padding-left:1.2em; color:var(--muted);}
li{margin-bottom:.4em;}

.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
section{padding:88px 0;}
@media(max-width:640px){ section{padding:56px 0;} }

/* ---------- top utility bar ---------- */
.topbar{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  font-size:13px;
  color:var(--muted-dim);
}
.topbar .wrap{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:9px; padding-bottom:9px; flex-wrap:wrap; gap:8px;
}
.topbar .contact-line{display:flex; gap:20px; flex-wrap:wrap;}
.topbar a:hover{color:var(--volt);}

/* ---------- nav ---------- */
header.nav{
  background:rgba(246,247,244,.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:50;
}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; padding:16px 24px;}
.brand{display:flex; align-items:center; gap:10px; font-family:'Space Grotesk'; font-weight:700; font-size:20px;}
.brand .mark{
  width:30px; height:30px; background:var(--signal);
  display:flex; align-items:center; justify-content:center;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  font-size:14px; font-weight:800; color:var(--ink);
}
.brand small{display:block; font-family:'IBM Plex Sans'; font-weight:400; font-size:11px; color:var(--muted-dim); letter-spacing:.04em;}
nav.links{display:flex; gap:32px; font-size:14px;}
nav.links a{color:var(--muted); padding:6px 0; border-bottom:2px solid transparent;}
nav.links a:hover, nav.links a.active{color:var(--text); border-color:var(--volt);}
.cta-btn{
  background:var(--volt); color:var(--ink); font-weight:700; font-size:14px;
  padding:11px 22px; border-radius:var(--radius); border:none; cursor:pointer;
  font-family:'Space Grotesk';
}
.cta-btn:hover{background:#729900;}
.cta-btn.ghost{background:transparent; border:1px solid var(--border); color:var(--text);}
.cta-btn.ghost:hover{border-color:var(--volt); color:var(--volt);}
.menu-toggle{display:none; background:none; border:1px solid var(--border); color:var(--text); padding:8px 10px; border-radius:var(--radius);}

@media(max-width:860px){
  nav.links{position:fixed; top:110px; left:0; right:0; background:var(--surface);
    flex-direction:column; padding:20px 24px; gap:0; border-bottom:1px solid var(--border);
    transform:translateY(-140%); transition:transform .25s ease; z-index:40;}
  nav.links.open{transform:translateY(0);}
  nav.links a{padding:14px 0; border-bottom:1px solid var(--border); width:100%;}
  .menu-toggle{display:block;}
  .nav .cta-btn.desktop-only{display:none;}
}

/* ---------- hero ---------- */
.hero{
  background:
    radial-gradient(circle at 15% 20%, rgba(90,122,0,.10), transparent 40%),
    radial-gradient(circle at 85% 0%, rgba(228,64,44,.08), transparent 45%),
    linear-gradient(rgba(246,247,244,.55), rgba(246,247,244,.85)),
    url('image/hero/hero-bg-plaza.jpg') center bottom / cover no-repeat,
    var(--bg);
  padding:96px 0 64px;
  border-bottom:1px solid var(--border);
}
.hero .grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center;}
@media(max-width:900px){ .hero .grid{grid-template-columns:1fr;} }
.eyebrow-tag{
  display:inline-block; font-size:12px; font-weight:600; color:var(--volt);
  border:1px solid var(--volt-dim); padding:5px 12px; border-radius:20px; margin-bottom:20px;
}
.hero h1{font-size:clamp(34px,5vw,58px); max-width:14ch;}
.hero h1 em{font-style:normal; color:var(--volt);}
.hero .lead{font-size:18px; max-width:48ch;}
.hero .actions{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap;}
.hero-stats{display:flex; gap:32px; margin-top:48px; flex-wrap:wrap;}
.hero-stats div{border-left:2px solid var(--border); padding-left:14px;}
.hero-stats .num{font-family:'Space Grotesk'; font-size:26px; font-weight:700; color:var(--text);}
.hero-stats .label{font-size:12px; color:var(--muted-dim);}

.hero-panel{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:28px; position:relative;
}
.hero-panel .art{
  aspect-ratio:1/1; position:relative; overflow:hidden; border-radius:calc(var(--radius) - 6px);
  background:linear-gradient(160deg,#1D242E,#12161C); border:1px solid var(--border);
  margin:-6px -6px 20px -6px;
}
.hero-panel .art .real-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .35s ease;}
.hero-panel h3{font-size:16px; margin-bottom:18px;}
.hero-panel .spec-row, .hero-panel h3{transition:opacity .35s ease;}
.hero-panel.fading .art .real-photo, .hero-panel.fading .spec-row, .hero-panel.fading h3{opacity:0;}
.spec-row{display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--border); font-size:14px;}
.spec-row:last-child{border-bottom:none;}
.spec-row span:first-child{color:var(--muted-dim);}
.spec-row span:last-child{font-family:'Space Grotesk'; font-weight:600;}

/* ---------- section headers ---------- */
.section-head{max-width:640px; margin-bottom:48px;}
.section-head .eyebrow-tag{margin-bottom:16px;}
.section-head h2{font-size:clamp(26px,3.4vw,38px);}

/* ---------- model grid ---------- */
.model-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media(max-width:940px){ .model-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:640px){ .model-grid{grid-template-columns:1fr;} }

.model-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; transition:border-color .15s;
}
.model-card:hover{border-color:var(--volt-dim);}
.model-card .art{
  aspect-ratio:1/1; height:auto; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#1D242E,#12161C);
  border-bottom:1px solid var(--border); position:relative; overflow:hidden;
}
.model-card .art svg{width:78%; opacity:.92;}
.model-card .tag{
  position:absolute; top:12px; left:12px; font-size:11px; font-weight:700; z-index:3;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.7);
  padding:3px 9px; border-radius:20px; text-transform:uppercase; letter-spacing:.04em;
}
.model-card .body{padding:20px; display:flex; flex-direction:column; flex:1;}
.model-card h3{font-size:19px; margin-bottom:4px;}
.model-card .body-type{font-size:12px; color:var(--muted-dim); margin-bottom:12px;}
.model-card p{font-size:14px; margin-bottom:16px;}
.model-card .from{margin-top:auto; padding-top:12px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center;}
.model-card .from .price{font-family:'Space Grotesk'; font-weight:700; color:var(--volt); font-size:15px;}
.model-card .from .price small{display:block; color:var(--muted-dim); font-weight:400; font-size:11px;}
.model-card .from a{font-size:13px; font-weight:600; color:var(--text); border-bottom:1px solid var(--volt);}

/* ---------- disclosure note ---------- */
.note-box{
  background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--volt);
  padding:18px 22px; border-radius:var(--radius); font-size:13.5px; color:var(--muted); margin-top:36px;
}
.note-box strong{color:var(--text);}

/* ---------- calculator ---------- */
.calc{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
}
@media(max-width:760px){ .calc{grid-template-columns:1fr;} }
.calc-inputs{padding:36px; border-right:1px solid var(--border);}
@media(max-width:760px){ .calc-inputs{border-right:none; border-bottom:1px solid var(--border);} }
.field{margin-bottom:20px;}
.field label{display:block; font-size:13px; color:var(--muted-dim); margin-bottom:8px;}
.field select, .field input[type=range]{width:100%;}
.field select{
  background:var(--surface-raised); color:var(--text); border:1px solid var(--border);
  padding:10px 12px; border-radius:var(--radius); font-size:14px; width:100%;
}
.field input[type=range]{accent-color:var(--volt);}
.field .val{font-family:'Space Grotesk'; font-weight:700; color:var(--volt); float:right;}
.calc-output{padding:36px; display:flex; flex-direction:column; justify-content:center;}
.calc-output .big{font-family:'Space Grotesk'; font-size:44px; font-weight:700;}
.calc-output .big small{font-size:15px; color:var(--muted-dim); font-weight:400;}
.calc-output .sub{font-size:13px; color:var(--muted-dim); margin-top:6px;}
.calc-output .breakdown{margin-top:24px; font-size:13.5px;}
.calc-output .breakdown .r{display:flex; justify-content:space-between; padding:8px 0; border-top:1px solid var(--border); color:var(--muted);}

/* ---------- faq ---------- */
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{
  width:100%; text-align:left; background:none; border:none; color:var(--text);
  font-family:'Space Grotesk'; font-size:16px; font-weight:600; padding:20px 0;
  display:flex; justify-content:space-between; align-items:center; cursor:pointer;
}
.faq-q .icon{color:var(--volt); font-size:20px; transition:transform .2s;}
.faq-item.open .faq-q .icon{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-item.open .faq-a{max-height:240px;}
.faq-a p{padding-bottom:20px; font-size:14.5px;}

/* ---------- steps ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
@media(max-width:900px){ .steps{grid-template-columns:repeat(2,1fr);} }
@media(max-width:520px){ .steps{grid-template-columns:1fr;} }
.step{border-top:2px solid var(--border); padding-top:16px;}
.step .n{font-family:'Space Grotesk'; font-size:13px; color:var(--volt); font-weight:700;}
.step h4{font-size:16px; margin:8px 0 8px;}
.step p{font-size:14px;}

/* ---------- cta band ---------- */
.cta-band{
  background:var(--surface-raised); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  text-align:center;
}
.cta-band h2{font-size:clamp(24px,3.4vw,34px); max-width:20ch; margin:0 auto 14px;}
.cta-band p{margin:0 auto 28px; }
.cta-band .actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* ---------- footer ---------- */
footer{background:var(--surface); border-top:1px solid var(--border); padding:64px 0 28px; font-size:14px;}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px;}
@media(max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr; row-gap:32px;} }
.foot-grid h5{font-family:'Space Grotesk'; font-size:13px; color:var(--muted-dim); text-transform:uppercase; letter-spacing:.05em; margin-bottom:16px;}
.foot-grid a, .foot-grid p{display:block; color:var(--muted); margin-bottom:10px; font-size:14px;}
.foot-grid a:hover{color:var(--volt);}
.foot-bottom{
  border-top:1px solid var(--border); padding-top:24px; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:12px; color:var(--muted-dim); font-size:12.5px;
}
.foot-bottom a{color:var(--muted-dim);}
.foot-bottom a:hover{color:var(--volt);}

/* ---------- simple inner-page header for policy pages ---------- */
.page-hero{padding:64px 0 40px; border-bottom:1px solid var(--border);}
.page-hero h1{font-size:clamp(28px,4vw,42px);}
.legal{padding:56px 0 96px;}
.legal h2{font-size:20px; margin-top:40px;}
.legal p, .legal li{font-size:15px; color:var(--muted);}
.legal .updated{color:var(--muted-dim); font-size:13px; margin-bottom:32px;}

/* ---------- contact page ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px;}
@media(max-width:860px){ .contact-grid{grid-template-columns:1fr;} }
.info-card{background:var(--surface); border:1px solid var(--border); padding:24px; border-radius:var(--radius); margin-bottom:16px;}
.info-card h4{font-size:14px; color:var(--muted-dim); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px;}
.info-card .value{font-family:'Space Grotesk'; font-size:18px; font-weight:600;}
form.inquiry .field input, form.inquiry .field textarea{
  width:100%; background:var(--surface-raised); border:1px solid var(--border); color:var(--text);
  padding:12px 14px; border-radius:var(--radius); font-family:'IBM Plex Sans'; font-size:14px;
}
form.inquiry .field textarea{resize:vertical; min-height:110px;}
form.inquiry .field label{color:var(--muted-dim); font-size:13px; margin-bottom:6px; display:block;}

/* ---------- model sub-nav (promo detail pages) ---------- */
.model-subnav{
  background:var(--surface); border-bottom:1px solid var(--border);
  overflow-x:auto; white-space:nowrap; -ms-overflow-style:none; scrollbar-width:none;
}
.model-subnav::-webkit-scrollbar{display:none;}
.model-subnav .wrap{display:flex; gap:4px; padding-top:10px; padding-bottom:10px;}
.model-subnav a{
  font-size:13px; font-weight:600; padding:8px 14px; border-radius:20px; color:var(--muted);
  border:1px solid transparent; flex:0 0 auto;
}
.model-subnav a:hover{color:var(--text);}
.model-subnav a.active{background:var(--bg); border-color:var(--volt-dim); color:var(--volt);}

/* ---------- promo hero ---------- */
.promo-hero{
  background:linear-gradient(160deg,var(--surface-raised),var(--bg));
  border-bottom:1px solid var(--border); padding:56px 0 0;
}
.promo-hero .crumb{font-size:13px; color:var(--muted-dim); margin-bottom:14px;}
.promo-hero .crumb a{color:var(--muted-dim);}
.promo-hero .crumb a:hover{color:var(--volt);}
.promo-hero .titles{display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:end; padding-bottom:40px;}
@media(max-width:860px){ .promo-hero .titles{grid-template-columns:1fr;} }
.promo-hero h1{font-size:clamp(30px,4.4vw,48px);}
.promo-hero .sub{font-size:16px; color:var(--muted); max-width:52ch;}
.promo-hero .quicklinks{display:flex; gap:10px; flex-wrap:wrap;}
.promo-hero .quicklinks a{
  font-size:13px; font-weight:600; color:var(--text); border:1px solid var(--border);
  padding:8px 14px; border-radius:20px;
}
.promo-hero .quicklinks a:hover{border-color:var(--volt); color:var(--volt);}
.promo-hero .art-strip{
  height:220px; border:1px solid var(--border); border-radius:var(--radius);
  background:linear-gradient(160deg,#1D242E,#12161C); display:flex; align-items:center; justify-content:center; margin-bottom:-1px;
}
.promo-hero .art-strip svg{width:70%; max-width:420px;}
.promo-hero .art-strip.square{
  height:auto; aspect-ratio:1/1; max-width:400px; margin-left:auto; margin-right:auto;
}
.promo-hero .art-strip.full{
  height:auto; min-height:220px; overflow:visible;
}
.promo-hero .art-strip.full .real-photo{
  position:static; width:100%; height:auto; object-fit:contain; display:block; border-radius:var(--radius);
}

/* ---------- per-trim square photo (used inside a trim section) ---------- */
.trim-photo{
  width:100%; max-width:560px; aspect-ratio:1/1; overflow:hidden; border-radius:var(--radius);
  border:1px solid var(--border); background:linear-gradient(160deg,#1D242E,#12161C);
  margin:0 0 24px; position:relative;
}
.trim-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.trim-photo svg{position:absolute; inset:0; margin:auto; width:70%; height:auto;}

/* ---------- dp option cards ---------- */
.dp-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media(max-width:860px){ .dp-grid{grid-template-columns:1fr;} }
.dp-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:26px; display:flex; flex-direction:column;
}
.dp-card.featured{border-color:var(--volt); position:relative;}
.dp-card.featured::before{
  content:'MOST CHOSEN'; position:absolute; top:-11px; left:20px; background:var(--volt);
  color:var(--ink); font-size:10px; font-weight:800; letter-spacing:.05em; padding:3px 9px; border-radius:20px;
}
.dp-card .opt-label{font-size:12px; color:var(--muted-dim); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px;}
.dp-card .pct{font-family:'Space Grotesk'; font-size:32px; font-weight:700;}
.dp-card .pct small{font-size:15px; color:var(--muted-dim); font-weight:400;}
.dp-card .dp-amount{font-size:14px; color:var(--muted); margin-bottom:18px;}
.dp-card .monthly{border-top:1px solid var(--border); padding-top:16px; margin-top:auto;}
.dp-card .monthly .amt{font-family:'Space Grotesk'; font-size:22px; font-weight:700; color:var(--volt);}
.dp-card .monthly .term{font-size:12px; color:var(--muted-dim);}

/* ---------- dp stacked list (promo-flyer style) ---------- */
.dp-stack{display:flex; flex-direction:column; gap:14px; max-width:480px;}
.dp-line{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px 22px;
}
.dp-line.featured{border-color:var(--volt); border-width:2px;}
.dp-opt-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px;}
.dp-opt-head .dp-opt-num{font-family:'Space Grotesk'; font-weight:700; font-size:15px; color:var(--text);}
.dp-opt-head .dp-opt-pct{font-family:'Space Grotesk'; font-weight:700; font-size:15px; color:var(--muted-dim);}
.dp-opt-allin{display:flex; align-items:center; gap:10px; font-size:19px; font-weight:600; color:var(--text); margin-bottom:8px;}
.dp-opt-allin .check{
  flex:0 0 auto; width:20px; height:20px; border-radius:4px; background:var(--volt);
  color:var(--ink); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:900;
}
.dp-opt-allin strong{color:var(--signal); font-weight:800;}
.dp-opt-allin .was{color:var(--muted-dim); font-weight:400; font-size:14px; text-decoration:line-through; margin-right:4px;}
.dp-opt-monthly{font-size:15px; color:var(--muted); padding-left:30px;}
.dp-opt-monthly strong{color:var(--volt); font-family:'Space Grotesk'; font-weight:700; font-size:17px;}

/* ---------- promo flyer card (promocolumns2 format) ---------- */
.promocolumns2{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:24px; max-width:1200px; margin:0 auto; align-items:start; justify-items:center;
}
.promocolumns2 .srpprice{width:100%; max-width:400px;}
.promocolumns2 .srpprice{
  list-style:none; margin:0; padding:0; background:var(--surface);
  border:2px solid #9AA394; border-radius:6px; overflow:hidden;
  box-shadow:0 4px 16px rgba(20,24,28,.14);
}
.promocolumns2 .srpprice li{margin:0;}
.promocolumns2 .promimg{line-height:0; border-bottom:2px solid #9AA394;}
.promocolumns2 .promimg img{width:100%; display:block;}
.promocolumns2 .promoheader{background:var(--ink); padding:14px 18px; text-align:center; border-bottom:2px solid #9AA394;}
.promocolumns2 .promoheader h2{margin:0; font-size:17px; color:#fff; font-family:'Space Grotesk';}
.promocolumns2 .grey1{background:var(--surface-raised); padding:10px 18px; text-align:center; font-weight:700; font-size:15px; color:var(--text); border-bottom:2px solid #9AA394;}
.promocolumns2 .promodetails{padding:14px 18px; border-bottom:1px solid #C7CCC1; font-size:14.5px; color:var(--text); line-height:1.5;}
.promocolumns2 .promodetails:last-of-type{border-bottom:2px solid #9AA394;}
.promocolumns2 .promodetails strike{color:var(--muted-dim); font-weight:400;}
.promocolumns2 .grey{background:var(--surface-raised); padding:16px 18px; display:flex; gap:10px; justify-content:center;}
.promocolumns2 .grey .button{
  display:inline-block; background:var(--volt); color:var(--ink); font-family:'Space Grotesk'; font-weight:700;
  font-size:13px; text-align:center; padding:11px 18px; border-radius:var(--radius); text-decoration:none; flex:1;
}
.promocolumns2 .grey .button:hover{background:#729900;}

/* ---------- inclusions checklist ---------- */
.inclusions-list{display:grid; grid-template-columns:repeat(2,1fr); gap:10px 24px;}
@media(max-width:640px){ .inclusions-list{grid-template-columns:1fr;} }
.inclusions-list li{
  list-style:none; display:flex; gap:10px; font-size:14.5px; color:var(--text); padding:9px 0;
  border-bottom:1px solid var(--border);
}
.inclusions-list li::before{content:'✓'; color:var(--volt); font-weight:700; flex:0 0 auto;}

/* ---------- specs table ---------- */
.specs-table{width:100%; border-collapse:collapse; font-size:14.5px;}
.specs-table th{
  text-align:left; font-family:'Space Grotesk'; font-size:12px; text-transform:uppercase;
  letter-spacing:.04em; color:var(--muted-dim); padding:14px 12px 10px; border-bottom:1px solid var(--border);
}
.specs-table td{padding:12px; border-bottom:1px solid var(--border); color:var(--text);}
.specs-table td:first-child{color:var(--muted); width:42%;}
.specs-table tr:last-child td{border-bottom:none;}

/* ---------- requirement tabs ---------- */
.req-tabs{display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap;}
.req-tab-btn{
  background:var(--surface); border:1px solid var(--border); color:var(--muted);
  padding:10px 18px; border-radius:20px; font-size:13.5px; font-weight:600; cursor:pointer;
  font-family:'IBM Plex Sans';
}
.req-tab-btn.active{background:var(--volt); color:var(--ink); border-color:var(--volt);}
.req-panel{display:none;}
.req-panel.active{display:block;}
.req-panel ul{padding-left:0;}
.req-panel li{list-style:none; display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); font-size:14.5px; color:var(--text);}
.req-panel li::before{content:'—'; color:var(--volt-dim);}

/* ---------- bank partner strip ---------- */
.bank-strip{display:flex; flex-wrap:wrap; gap:10px;}
.bank-strip span{
  font-size:13px; font-weight:600; color:var(--muted); border:1px solid var(--border);
  padding:8px 14px; border-radius:20px;
}

/* ---------- floating chat widget ---------- */
.chat-widget{position:fixed; right:20px; bottom:20px; display:flex; flex-direction:column; gap:10px; z-index:60;}
.chat-widget a{
  width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--border); font-size:20px; color:var(--text);
  box-shadow:0 6px 18px rgba(20,24,28,.16);
}
.chat-widget a:hover{border-color:var(--volt); color:var(--volt);}
.chat-widget a.primary{background:var(--volt); color:var(--ink); border-color:var(--volt);}

/* ---------- about page ---------- */
.value-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media(max-width:760px){ .value-grid{grid-template-columns:1fr;} }
.value-card{border-top:2px solid var(--volt); padding-top:16px;}
.value-card h4{font-size:17px; margin-bottom:8px;}
.value-card p{font-size:14px;}

/* ---------- model lineup page ---------- */
.lineup-layout{display:grid; grid-template-columns:220px 1fr; gap:48px; align-items:start;}
@media(max-width:860px){ .lineup-layout{grid-template-columns:1fr;} }
.lineup-sidebar{position:sticky; top:96px;}
.lineup-sidebar .heading{
  font-family:'Space Grotesk'; font-weight:700; font-size:13px; color:var(--signal);
  text-transform:uppercase; letter-spacing:.04em; padding-bottom:12px; border-bottom:1px solid var(--border); margin-bottom:4px;
}
.lineup-sidebar button.filter-btn{
  display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
  font-family:'IBM Plex Sans'; font-size:14.5px; color:var(--muted); padding:11px 0; border-bottom:1px solid var(--border);
}
.lineup-sidebar button.filter-btn:hover{color:var(--text);}
.lineup-sidebar button.filter-btn.active{color:var(--volt); font-weight:600;}
.lineup-sidebar .compare-link{
  display:block; margin-top:18px; font-family:'Space Grotesk'; font-weight:700; font-size:13px;
  color:var(--signal); text-transform:uppercase; letter-spacing:.04em;
}
.lineup-sidebar .compare-link:hover{text-decoration:underline;}
.lineup-sidebar .sort-select{
  width:100%; font-family:'IBM Plex Sans'; font-size:14px; color:var(--text);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:9px 10px; cursor:pointer;
}
.lineup-sidebar .sort-select:focus{outline:2px solid var(--volt); outline-offset:1px;}

.lineup-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media(max-width:1080px){ .lineup-grid{grid-template-columns:repeat(3,1fr);} }
@media(max-width:800px){ .lineup-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:520px){ .lineup-grid{grid-template-columns:1fr;} }

.lineup-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column;}
.lineup-card .art{
  aspect-ratio:1/1; height:auto; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#1D242E,#12161C); position:relative; overflow:hidden;
}
.lineup-card .art .real-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.lineup-card .art svg{width:74%; opacity:.92; position:relative; z-index:1;}
.lineup-card .info{padding:16px 18px 18px;}
.lineup-card .cat-tag{font-size:11px; font-weight:700; color:var(--muted-dim); text-transform:uppercase; letter-spacing:.04em;}
.lineup-card h4{font-size:16px; margin:6px 0 4px;}
.lineup-card .starts{font-size:13.5px; color:var(--muted);}
.lineup-card .starts b{color:var(--text); font-family:'Space Grotesk'; font-weight:700;}
.lineup-card a.card-link{
  display:block; margin-top:12px; font-size:13px; font-weight:600; color:var(--volt);
  border-top:1px solid var(--border); padding-top:12px;
}
.lineup-card a.card-link.disabled{color:var(--muted-dim);}

/* ---------- photo-with-fallback (real photo over line-art, auto-falls-back) ---------- */
.art{position:relative; overflow:hidden;}
.art .real-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2;
}
.art-strip{position:relative; overflow:hidden;}
.art-strip .real-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; border-radius:var(--radius);
}

/* ---------- color picker section ---------- */
.color-section{
  background:#12161C; padding:72px 0; text-align:center; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.color-section .section-head h2{color:#fff; font-size:clamp(28px,4vw,42px);}
.color-section .section-head p{color:#9AA3AD; max-width:none;}
.color-viewer{
  position:relative; max-width:560px; margin:40px auto 32px; height:280px;
  display:flex; align-items:center; justify-content:center;
}
.color-viewer img{max-width:100%; max-height:100%; object-fit:contain; display:block;}
.color-viewer svg{max-width:100%; height:auto; position:absolute; inset:0; margin:auto;}
.color-swatches{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.color-swatch{
  background:#1D242E; border:2px solid transparent; border-radius:var(--radius); padding:14px 18px;
  cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:10px; min-width:110px;
  font-family:'IBM Plex Sans'; transition:border-color .15s;
}
.color-swatch:hover{border-color:#3A4453;}
.color-swatch.active{border-color:var(--volt);}
.color-swatch .swatch-chip{
  width:34px; height:34px; border-radius:6px; position:relative; box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
}
.color-swatch.active .swatch-chip::after{
  content:'\2713'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:900; font-size:15px; text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.color-swatch .swatch-label{font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:#C7CED6;}
.color-swatch.active .swatch-label{color:var(--volt);}