/* ===== GTlora v5 — Racing Editorial Design System ===== */
:root{
  --black: #030303;
  --near-black: #0A0808;
  --white: #FFFFFF;
  --bg: #060505;
  --paper: #100D0D;
  --ink: #F5F1EF;
  --ink-soft: #8C807D;
  --line: rgba(255,255,255,0.10);
  --line-strong: rgba(255,255,255,0.18);
  --red-deep: #4A0A10;
  --red-mid: #9E1420;
  --red-bright: #FF2A2A;
  --red-glow: #FF4D3D;
  --gold: #E8B94D;
  --font-display: 'Bebas Neue', 'Oswald', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-sans: 'Inter', -apple-system, sans-serif;
  --container: 1240px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--container); margin:0 auto; padding:0 40px;}

/* ===== dot matrix (reused) ===== */
.dm-wrap{display:inline-flex; align-items:flex-end;}
.dm-char{display:inline-flex; flex-direction:column;}
.dm-row{display:flex;}
.dm-dot{display:inline-block; border-radius:50%; background:rgba(255,255,255,0.14);}
.dm-dot.on{background:var(--ink);}
.accent .dm-dot.on{background:var(--red-bright);}

/* ===== top bar with search ===== */
.topbar{
  background:var(--black);
  border-bottom:1px solid var(--line);
  padding:10px 0;
}
.topbar-inner{
  display:flex; align-items:center; gap:16px;
}
.search-wrap{
  flex:1;
  position:relative;
  max-width:640px;
}
.search-input{
  width:100%;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--line);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:14px;
  padding:11px 16px 11px 42px;
  border-radius:3px;
  transition:border-color .15s, background .15s;
}
.search-input::placeholder{color:var(--ink-soft);}
.search-input:focus{outline:none; border-color:var(--red-bright); background:rgba(255,255,255,0.06);}
.search-icon{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; opacity:0.5; pointer-events:none;
}
.search-icon svg{width:100%; height:100%;}
.topbar-links{display:flex; gap:26px; font-family:var(--font-mono); font-size:12px; letter-spacing:0.04em; white-space:nowrap;}
.topbar-links a{color:rgba(255,255,255,0.5); transition:color .15s;}
.topbar-links a:hover{color:var(--white);}
.lang-switch{display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:12px;}
.lang-btn{background:transparent; border:none; color:rgba(255,255,255,0.4); cursor:pointer; padding:4px; font-family:var(--font-mono); font-size:12px;}
.lang-btn.active{color:var(--white); font-weight:700;}
.lang-sep{color:rgba(255,255,255,0.25);}

/* ===== nav (logo + cart) ===== */
.nav{
  background:var(--black);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:60px;
}
.logo{
  font-family:var(--font-display);
  font-size:28px;
  letter-spacing:0.04em;
  color:var(--white);
  display:flex; align-items:center; gap:9px;
}
.logo-dot{width:7px; height:7px; border-radius:50%; background:var(--red-bright); box-shadow:0 0 8px var(--red-glow); display:inline-block;}
.nav-cart{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.04em;
  border:1px solid var(--line-strong); color:var(--white);
  padding:9px 18px; display:flex; align-items:center; gap:9px; cursor:pointer;
  transition:border-color .15s, background .15s;
}
.nav-cart:hover{border-color:var(--red-bright); background:rgba(255,42,42,0.06);}

/* ===== HERO ===== */
.hero{
  position:relative;
  height:100vh;
  min-height:640px;
  background:radial-gradient(ellipse at 50% 30%, #180505 0%, #030101 70%);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.hero-noise{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:26px 26px;
  pointer-events:none;
  opacity:0.5;
}
.hero-vignette{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 55%, transparent 30%, rgba(3,1,1,0.85) 100%);
  pointer-events:none;
}
.hero-content{
  position:relative; z-index:5;
  padding:0 0 48px;
}
.hero-eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.2em;
  color:rgba(255,255,255,0.5);
  display:flex; align-items:center; gap:12px;
  margin-bottom:18px;
}
.hero-eyebrow .line{width:30px; height:1px; background:var(--red-bright);}
.hero h1{
  font-family:var(--font-display);
  font-size:clamp(56px, 9vw, 132px);
  line-height:0.86;
  letter-spacing:0.01em;
  color:var(--white);
  text-shadow:0 4px 40px rgba(0,0,0,0.6);
}
.hero h1 .accent{color:var(--red-bright); text-shadow:0 0 30px rgba(255,42,42,0.55);}
.hero-sub{
  margin-top:18px;
  font-family:var(--font-sans);
  font-size:16px;
  color:rgba(255,255,255,0.6);
  max-width:420px;
}
.hero-cta{margin-top:32px; display:flex; gap:14px;}
.btn{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.05em;
  padding:15px 28px; cursor:pointer; border:1px solid var(--white);
  transition:transform .15s, background .15s, color .15s, border-color .15s;
  display:inline-flex; align-items:center; gap:9px;
}
.btn-primary{background:var(--red-bright); border-color:var(--red-bright); color:var(--white);}
.btn-primary:hover{background:var(--red-glow); box-shadow:0 0 24px rgba(255,42,42,0.4);}
.btn-ghost{background:transparent; color:var(--white);}
.btn-ghost:hover{border-color:var(--red-bright); color:var(--red-bright);}

.hero-scroll-cue{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.2em;
  color:rgba(255,255,255,0.4);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  z-index:5;
  animation:bobDown 2.2s ease-in-out infinite;
}
.hero-scroll-cue .chev{width:14px; height:14px; opacity:0.6;}
@keyframes bobDown{0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,8px);}}

/* car svg layer */
.hero-car{
  position:absolute; left:0; right:0; bottom:0;
  z-index:2;
  display:flex; justify-content:center;
}
.hero-car svg{width:min(1500px, 130vw); height:auto;}

/* exhaust smoke puffs */
.puff{
  animation:puffRise 3.2s ease-out infinite;
  transform-origin:center;
}
.puff.p2{animation-delay:1s;}
.puff.p3{animation-delay:2s;}
@keyframes puffRise{
  0%{transform:translate(0,0) scale(0.4); opacity:0;}
  15%{opacity:0.55;}
  100%{transform:translate(-38px,-22px) scale(2.4); opacity:0;}
}
.headlight-glow{animation:hlPulse 3.4s ease-in-out infinite;}
@keyframes hlPulse{
  0%,100%{opacity:0.85;}
  50%{opacity:1;}
}

/* ===== scroll-reveal marquee strip ===== */
.strip{
  background:var(--red-bright);
  overflow:hidden;
  white-space:nowrap;
  transform:translateY(-6px);
  opacity:0;
  transition:transform .6s cubic-bezier(.16,1,.3,1), opacity .6s ease;
}
.strip.in-view{transform:translateY(0); opacity:1;}
.strip-track{
  display:inline-flex;
  animation:marquee 24s linear infinite;
  font-family:var(--font-display);
  font-size:20px;
  letter-spacing:0.03em;
  padding:12px 0;
  color:var(--black);
}
.strip-track span{padding:0 28px; display:inline-flex; align-items:center; gap:14px;}
.strip-track span::after{content:'●'; font-size:8px; opacity:0.55;}
@keyframes marquee{0%{transform:translateX(0);} 100%{transform:translateX(-50%);}}

/* ===== section pattern ===== */
.section{padding:120px 0;}
.section-head{
  display:grid; grid-template-columns:auto 1fr auto; align-items:end; gap:40px;
  margin-bottom:60px; padding-bottom:26px; border-bottom:1px solid var(--line);
}
.section-tag{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.16em;
  color:var(--red-bright); margin-bottom:12px;
}
.section-head h2{
  font-family:var(--font-display); font-size:clamp(34px,4.4vw,58px);
  letter-spacing:0.01em; color:var(--white);
}
.section-desc{max-width:280px; font-size:13px; color:var(--ink-soft); font-family:var(--font-mono); line-height:1.7;}

/* ===== product grid ===== */
.grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.card{background:var(--bg); display:flex; flex-direction:column; transition:background .2s;}
.card:hover{background:var(--paper);}
.card-media{
  aspect-ratio:1; background:linear-gradient(160deg,#160707,#050202);
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.card-media svg{width:66%; height:66%; opacity:0.95;}
.card-media img{width:100%; height:100%; object-fit:cover;}
.card-code{position:absolute; top:14px; left:14px; font-family:var(--font-mono); font-size:10px; color:rgba(255,255,255,0.45); letter-spacing:0.08em;}
.card-idx{position:absolute; top:14px; right:14px;}
.card-body{padding:24px;}
.card h3{font-size:16px; font-weight:700; margin-bottom:6px; letter-spacing:-0.01em; color:var(--white);}
.card p{font-size:13px; color:var(--ink-soft); margin-bottom:22px; line-height:1.55;}
.card-foot{display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); padding-top:16px;}
.card-price{display:flex; align-items:center; gap:2px;}
.card-add{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.04em;
  border:1px solid var(--ink); color:var(--ink);
  padding:9px 14px; cursor:pointer; background:transparent; transition:background .15s, color .15s, border-color .15s;
}
.card-add:hover{background:var(--red-bright); border-color:var(--red-bright); color:var(--white);}
.card-empty{grid-column:1/-1; padding:60px; text-align:center; color:var(--ink-soft); font-family:var(--font-mono); font-size:13px;}

/* ===== feature split ===== */
.xray{background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.split{display:grid; grid-template-columns:1.05fr 1fr; gap:70px; align-items:center; padding:120px 0;}
.split-media{aspect-ratio:5/4; position:relative; border:1px solid var(--line);}
.split-media svg{width:100%; height:100%;}
.feature-list{margin-top:36px;}
.feature-item{display:flex; gap:22px; padding:24px 0; border-top:1px solid var(--line);}
.feature-item:last-child{border-bottom:1px solid var(--line);}
.feature-num{min-width:34px; padding-top:2px;}
.feature-item h4{font-size:15px; font-weight:700; margin-bottom:5px; color:var(--white);}
.feature-item p{font-size:13px; color:var(--ink-soft);}

/* ===== trust strip ===== */
.trust{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.trust-item{padding:38px 32px; border-right:1px solid var(--line);}
.trust-item:last-child{border-right:none;}
.trust-label{font-size:12px; color:var(--ink-soft); margin-top:10px; font-family:var(--font-mono); letter-spacing:0.02em;}

/* ===== cta band ===== */
.band{background:linear-gradient(135deg,#1A0505,#050202); padding:110px 0; text-align:center; border-bottom:1px solid var(--line);}
.band-tag{font-family:var(--font-mono); font-size:12px; letter-spacing:0.14em; color:var(--red-bright); margin-bottom:18px;}
.band h2{font-family:var(--font-display); font-size:clamp(36px,5vw,64px); color:var(--white); max-width:680px; margin:0 auto 22px;}
.band p{color:var(--ink-soft); margin-bottom:38px;}
.band-form{display:flex; gap:0; justify-content:center; max-width:440px; margin:0 auto; border:1px solid var(--line-strong);}
.band-form input{flex:1; background:transparent; border:none; color:var(--ink); padding:16px 18px; font-family:var(--font-sans); font-size:14px;}
.band-form input::placeholder{color:var(--ink-soft);}
.band-form button{font-family:var(--font-mono); background:var(--red-bright); color:var(--white); border:none; padding:16px 26px; cursor:pointer; font-size:12px; letter-spacing:0.04em;}
.band-form button:hover{background:var(--red-glow);}

/* ===== footer ===== */
footer{padding:64px 0 40px; background:var(--black);}
.foot-top{display:flex; justify-content:space-between; padding-bottom:42px; border-bottom:1px solid var(--line); margin-bottom:26px;}
.foot-cols{display:flex; gap:80px;}
.foot-col h5{font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em; color:rgba(255,255,255,0.4); margin-bottom:18px;}
.foot-col a{display:block; font-size:14px; padding:6px 0; color:rgba(255,255,255,0.85);}
.foot-col a:hover{color:var(--red-bright);}
.foot-bottom{display:flex; justify-content:space-between; font-size:11px; color:rgba(255,255,255,0.4); font-family:var(--font-mono); letter-spacing:0.02em;}

/* ===== cart drawer ===== */
.cart-drawer{position:fixed; top:0; right:-420px; width:400px; max-width:92vw; height:100vh; background:var(--paper); color:var(--ink); border-left:1px solid var(--line); z-index:100; transition:right .3s cubic-bezier(.16,1,.3,1); display:flex; flex-direction:column;}
.cart-drawer.open{right:0;}
.cart-overlay{position:fixed; inset:0; background:rgba(3,1,1,0.7); z-index:99; opacity:0; pointer-events:none; transition:opacity .3s;}
.cart-overlay.open{opacity:1; pointer-events:auto;}
.cart-head{padding:22px 26px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center;}
.cart-head h3{font-family:var(--font-display); font-size:20px; letter-spacing:0.04em;}
.cart-close{cursor:pointer; font-size:22px; line-height:1; color:var(--ink-soft);}
.cart-items{flex:1; overflow-y:auto; padding:18px 26px;}
.cart-empty{color:var(--ink-soft); font-size:13px; padding:40px 0; text-align:center; font-family:var(--font-mono);}
.cart-line{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line);}
.cart-line-img{width:60px; height:60px; background:var(--black); flex-shrink:0;}
.cart-line-info{flex:1;}
.cart-line-info h5{font-size:13px; margin-bottom:6px;}
.cart-foot{padding:22px 26px; border-top:1px solid var(--line);}
.cart-total{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; font-size:13px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.06em;}
.cart-checkout{width:100%; background:var(--red-bright); color:var(--white); border:none; padding:16px; font-family:var(--font-mono); font-size:12px; letter-spacing:0.04em; cursor:pointer;}
.cart-checkout:hover{background:var(--red-glow);}

/* ===== responsive ===== */
@media (max-width:900px){
  .topbar-links{display:none;}
  .grid{grid-template-columns:1fr 1fr;}
  .split{grid-template-columns:1fr; gap:40px; padding:80px 0;}
  .trust{grid-template-columns:1fr 1fr;}
  .trust-item:nth-child(2){border-right:none;}
  .foot-top{flex-direction:column; gap:32px;}
  .section-head{grid-template-columns:1fr; gap:16px;}
  .section-desc{max-width:100%; text-align:left;}
  .hero{min-height:560px;}
}
@media (max-width:600px){
  .grid{grid-template-columns:1fr;}
  .section{padding:70px 0;}
  .band-form{flex-direction:column; border:none; gap:10px;}
  .band-form input, .band-form button{border:1px solid var(--line-strong);}
  .topbar-inner{flex-wrap:wrap;}
}