/* ============================================================
   RaceLink — shared site styles
   Design language: dark, high-energy racing tech
   Colour code:  cyan / magenta = available now
                 amber          = on the roadmap
   ============================================================ */

/* ------------------------------------------------------------
   SELF-HOSTED FONTS  (no external requests — GDPR clean)

   File names follow the google-webfonts-helper scheme:
     <family>-v<version>-latin-<style>.woff2
   where weight 400 is written as "regular".

   Expected files in  assets/fonts/ :
     chakra-petch-v13-latin-regular.woff2   (weight 400)
     chakra-petch-v13-latin-500.woff2       (weight 500)
     chakra-petch-v13-latin-600.woff2       (weight 600)
     chakra-petch-v13-latin-700.woff2       (weight 700)
     sora-v17-latin-regular.woff2           (weight 400)
     sora-v17-latin-600.woff2               (weight 600)

   These are the exact google-webfonts-helper file names
   (Chakra Petch v13, Sora v17). Drop the six files into
   assets/fonts/ with these names and the site uses them
   immediately; until then a system-font fallback applies and no
   external request is ever made.
   ------------------------------------------------------------ */

@font-face{
  font-family:'Chakra Petch';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/chakra-petch-v13-latin-regular.woff2') format('woff2');
}
@font-face{
  font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/chakra-petch-v13-latin-500.woff2') format('woff2');
}
@font-face{
  font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/chakra-petch-v13-latin-600.woff2') format('woff2');
}
@font-face{
  font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/chakra-petch-v13-latin-700.woff2') format('woff2');
}
@font-face{
  font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/sora-v17-latin-regular.woff2') format('woff2');
}
@font-face{
  font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/sora-v17-latin-600.woff2') format('woff2');
}

:root{
  --bg:#07080D;
  --bg-2:#0c0e16;
  --surface:#12141f;
  --surface-2:#181b28;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.18);
  --text:#F3F5FA;
  --muted:#8a90a4;
  --cyan:#1fe6d6;
  --pink:#ff2e6e;
  --amber:#ffb23e;
  --grad:linear-gradient(100deg,var(--pink),var(--cyan));
  --maxw:1180px;
  --font-display:'Chakra Petch','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --font-body:'Sora',-apple-system,system-ui,sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(900px 520px at 12% -3%, rgba(255,46,110,.13), transparent 60%),
    radial-gradient(820px 600px at 92% 4%, rgba(31,230,214,.11), transparent 58%),
    var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;}
img{max-width:100%;display:block;}

/* faint speed-grid texture behind everything */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000,transparent 80%);
          mask-image:radial-gradient(ellipse at 50% 0%,#000,transparent 80%);
  pointer-events:none;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,56px);}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  background:rgba(7,8,13,.72);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;}
.brand{
  font-family:var(--font-display);font-weight:700;
  font-size:21px;letter-spacing:.06em;text-decoration:none;color:var(--text);
  display:flex;align-items:center;gap:9px;
}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--grad);box-shadow:0 0 14px var(--pink);}
.brand .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}

.nav{display:flex;align-items:center;gap:6px;}
.nav a{
  font-family:var(--font-display);font-weight:600;font-size:14px;
  letter-spacing:.02em;text-decoration:none;color:var(--muted);
  padding:9px 14px;border-radius:9px;transition:color .15s ease,background .15s ease;
}
.nav a:hover{color:var(--text);background:rgba(255,255,255,.04);}
.nav a.active{color:var(--text);}
.nav a.active::after{
  content:"";display:block;height:2px;margin-top:5px;border-radius:2px;background:var(--grad);
}
.nav a.ext::after{content:" ↗";color:var(--muted);font-size:.85em;}
.nav .btn{margin-left:8px;}

.nav-toggle,.nav-toggle-label{display:none;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:.03em;
  text-decoration:none;padding:14px 24px;border-radius:12px;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
.btn svg{width:16px;height:16px;}
.btn--sm{padding:10px 18px;font-size:13.5px;}
.btn--primary{color:#07080D;background:var(--grad);box-shadow:0 8px 30px rgba(255,46,110,.30);}
.btn--primary:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(255,46,110,.42);}
.btn--ghost{color:var(--text);border:1px solid var(--line);background:rgba(255,255,255,.03);}
.btn--ghost:hover{transform:translateY(-3px);border-color:rgba(31,230,214,.5);background:rgba(31,230,214,.06);}

/* ---------- generic structure ---------- */
.section{padding:clamp(60px,9vw,118px) 0;}
.section--tight{padding:clamp(44px,6vw,80px) 0;}
.kicker{
  font-family:var(--font-display);font-weight:600;font-size:13px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--pink);margin:0 0 12px;
}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.01em;}
h1{font-weight:700;line-height:1.02;font-size:clamp(38px,7vw,82px);margin:18px 0;}
h2{font-weight:700;line-height:1.08;font-size:clamp(28px,4.3vw,50px);margin:0 0 16px;}
h3{font-weight:600;font-size:19px;margin:0 0 8px;}
.lead{color:var(--muted);max-width:62ch;font-size:clamp(16px,1.6vw,19px);}
.g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:600;font-size:13px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);
  padding:7px 16px;border:1px solid var(--line);border-radius:999px;background:rgba(31,230,214,.05);
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);}

/* ---------- hero ---------- */
.hero{padding:clamp(64px,10vw,128px) 0 clamp(40px,6vw,72px);}
.hero h1{margin:22px 0;}
.hero p{color:var(--muted);max-width:60ch;font-size:clamp(17px,1.9vw,22px);margin:0;}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px;}

/* positioning strip */
.strip{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);
}
.strip .wrap{padding-top:30px;padding-bottom:30px;}
.strip p{margin:0;color:var(--text);font-size:clamp(16px,2vw,21px);max-width:80ch;}
.strip b{color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text;font-weight:600;}

/* ---------- card grid ---------- */
.grid{display:grid;gap:18px;margin-top:42px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));}
.card{
  position:relative;padding:30px 28px 32px;overflow:hidden;
  background:linear-gradient(180deg,var(--surface),var(--bg-2));
  border:1px solid var(--line);border-radius:18px;
  transition:transform .2s ease,border-color .2s ease;
}
.card::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--grad);opacity:0;transition:opacity .25s ease;}
.card:hover{transform:translateY(-5px);border-color:var(--line-strong);}
.card:hover::after{opacity:1;}
.ico{
  width:44px;height:44px;border-radius:11px;display:grid;place-items:center;margin-bottom:18px;
  background:rgba(31,230,214,.08);border:1px solid rgba(31,230,214,.22);
}
.ico svg{width:22px;height:22px;stroke:var(--cyan);fill:none;stroke-width:2;}
.card p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.6;}

/* ---------- diagram ---------- */
.diagram{
  margin-top:42px;padding:clamp(20px,3.5vw,40px);
  background:linear-gradient(180deg,var(--surface),var(--bg-2));
  border:1px solid var(--line);border-radius:22px;
}
.diagram svg{width:100%;height:auto;display:block;}
.note{margin:22px 4px 0;color:var(--muted);font-size:15px;display:flex;gap:10px;align-items:flex-start;}
.note b{color:var(--text);font-weight:600;}
@keyframes rl-pulse{0%{stroke-opacity:0;stroke-dashoffset:90;}35%{stroke-opacity:.95;}100%{stroke-opacity:0;stroke-dashoffset:0;}}
.rl-wave{stroke-dasharray:90;animation:rl-pulse 2.6s linear infinite;}
.rl-wave.w2{animation-delay:.5s;}.rl-wave.w3{animation-delay:1s;}

/* ---------- hardware ---------- */
.hw-grid{display:grid;gap:18px;margin-top:42px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.hw-card{padding:28px 26px;border-radius:18px;background:linear-gradient(180deg,var(--surface),var(--bg-2));border:1px solid var(--line);}
.hw-card h3{display:flex;align-items:center;gap:10px;margin:0 0 4px;}
.hw-card ul{list-style:none;margin:16px 0 0;padding:0;}
.hw-card li{position:relative;padding:10px 0 10px 22px;color:var(--muted);font-size:15px;border-top:1px solid var(--line);}
.hw-card li:first-child{border-top:none;}
.hw-card li::before{content:"";position:absolute;left:0;top:18px;width:7px;height:7px;border-radius:2px;background:var(--pink);}
.hw-card li b{color:var(--text);font-weight:600;}
.hw-card li sup{color:var(--amber);font-weight:700;}
.footnote{margin-top:22px;color:var(--muted);font-size:14px;padding:16px 18px;border-radius:12px;background:rgba(255,178,62,.05);border:1px solid rgba(255,178,62,.18);}
.footnote sup{color:var(--amber);font-weight:700;}
.footnote a{color:var(--amber);}

/* ---------- tags / badges ---------- */
.tag{
  font-family:var(--font-display);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;border-radius:999px;white-space:nowrap;
}
.tag--core{color:var(--cyan);background:rgba(31,230,214,.1);border:1px solid rgba(31,230,214,.25);}
.tag--road{color:var(--amber);background:rgba(255,178,62,.1);border:1px solid rgba(255,178,62,.28);}

/* ---------- steps ---------- */
.steps{display:grid;gap:16px;margin-top:42px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.step{padding:30px 26px 28px;border-radius:18px;background:linear-gradient(180deg,var(--surface),var(--bg-2));border:1px solid var(--line);}
.num{font-family:var(--font-display);font-weight:700;font-size:42px;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.step h3{margin:14px 0 8px;}
.step p{margin:0;color:var(--muted);font-size:15px;}
.step a,.faq a,.note a,.prose a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(31,230,214,.35);}
.step a:hover,.faq a:hover,.prose a:hover{color:var(--text);}

/* available-feature highlight box (cyan, NOT amber) */
.feature-box{
  margin-top:24px;padding:clamp(24px,4vw,40px);border-radius:20px;
  background:radial-gradient(600px 240px at 100% 0%,rgba(31,230,214,.12),transparent 60%),linear-gradient(180deg,var(--surface-2),var(--bg-2));
  border:1px solid rgba(31,230,214,.32);
}
.feature-box h3{font-weight:700;font-size:clamp(20px,2.6vw,26px);margin:14px 0 10px;}
.feature-box p{margin:0;color:var(--muted);max-width:64ch;}
.feature-box .hl{color:var(--cyan);font-weight:600;}

/* roadmap callout (amber) */
.roadmap-box{
  margin-top:24px;padding:clamp(22px,4vw,36px);border-radius:20px;
  background:radial-gradient(600px 240px at 100% 0%,rgba(255,178,62,.10),transparent 60%),linear-gradient(180deg,var(--surface-2),var(--bg-2));
  border:1px solid rgba(255,178,62,.32);
}
.roadmap-box h3{margin:14px 0 8px;}
.roadmap-box p{margin:0;color:var(--muted);max-width:66ch;}

/* ---------- FAQ ---------- */
.faq{margin-top:36px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:linear-gradient(180deg,var(--surface),var(--bg-2));}
.faq details{border-top:1px solid var(--line);}
.faq details:first-child{border-top:none;}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 26px;
  font-family:var(--font-display);font-weight:600;font-size:17px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--cyan);font-size:24px;font-weight:400;transition:transform .2s ease;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq p{margin:0 26px 24px;color:var(--muted);font-size:15.5px;}

/* ---------- closing ---------- */
.closing{
  text-align:center;padding:clamp(44px,6vw,80px) 24px;border-radius:24px;margin:clamp(60px,9vw,110px) 0 0;
  background:radial-gradient(700px 360px at 50% 0%,rgba(255,46,110,.15),transparent 62%),linear-gradient(180deg,var(--surface),var(--bg-2));
  border:1px solid var(--line);
}
.closing h2{margin:14px auto;}
.closing p{color:var(--muted);max-width:52ch;margin:0 auto 30px;}
.closing .cta{justify-content:center;}

/* ---------- showcase empty state ---------- */
.showcase-grid{display:grid;gap:16px;margin-top:42px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
.ph-tile{
  aspect-ratio:4/3;border-radius:16px;display:grid;place-items:center;text-align:center;padding:20px;
  background:linear-gradient(135deg,var(--surface),var(--bg-2));
  border:1px dashed var(--line-strong);color:var(--muted);
}
.ph-tile svg{width:34px;height:34px;stroke:var(--muted);fill:none;stroke-width:1.5;margin-bottom:12px;opacity:.7;}
.ph-tile span{font-family:var(--font-display);font-size:13px;letter-spacing:.08em;}

/* ---------- legal / prose ---------- */
.prose{max-width:760px;}
.prose h2{font-size:clamp(22px,3vw,30px);margin:42px 0 12px;}
.prose h3{font-size:18px;margin:28px 0 8px;}
.prose p,.prose li{color:var(--muted);font-size:16px;}
.prose ul{padding-left:20px;}
.prose strong{color:var(--text);}
.callout{
  margin:26px 0;padding:20px 22px;border-radius:14px;
  background:rgba(255,178,62,.06);border:1px solid rgba(255,178,62,.3);
  color:var(--text);font-size:15px;
}
.callout b{color:var(--amber);}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);margin-top:clamp(60px,9vw,120px);background:rgba(7,8,13,.6);}
.site-footer .wrap{padding-top:64px;padding-bottom:40px;}
.foot-grid{display:grid;gap:40px;grid-template-columns:1.4fr 1fr 1fr 1.2fr;}
.foot-brand .brand{margin-bottom:14px;}
.foot-brand p{color:var(--muted);font-size:14.5px;max-width:34ch;margin:0;}
.foot-col h4{
  font-family:var(--font-display);font-size:12px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 16px;
}
.foot-col a,.foot-col span{display:block;color:var(--text);text-decoration:none;font-size:14.5px;padding:6px 0;}
.foot-col a:hover{color:var(--cyan);}
.foot-col .soon{color:var(--muted);font-size:13px;}
.foot-bottom{
  margin-top:48px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  color:var(--muted);font-size:13.5px;
}
.foot-bottom a{color:var(--muted);text-decoration:none;}
.foot-bottom a:hover{color:var(--text);}

/* ---------- entrance animation ---------- */
.reveal{opacity:0;transform:translateY(16px);animation:rl-in .7s ease forwards;}
.reveal.d1{animation-delay:.06s;}.reveal.d2{animation-delay:.12s;}
.reveal.d3{animation-delay:.18s;}.reveal.d4{animation-delay:.24s;}
@keyframes rl-in{to{opacity:1;transform:none;}}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  .nav-toggle-label{
    display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:8px;
  }
  .nav-toggle-label span{display:block;width:24px;height:2px;background:var(--text);border-radius:2px;transition:.2s;}
  .nav{
    position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:#080910;border-bottom:1px solid var(--line);
    box-shadow:0 24px 40px rgba(0,0,0,.55);
    max-height:0;overflow:hidden;transition:max-height .28s ease;padding:0 clamp(20px,5vw,56px);
  }
  .nav a{padding:16px 4px;border-bottom:1px solid var(--line);border-radius:0;}
  .nav a.active::after{display:none;}
  .nav .btn{margin:16px 0;justify-content:center;}
  .nav-toggle:checked ~ .nav{max-height:420px;}
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(2){opacity:0;}
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr;gap:32px;}
  .btn{width:100%;justify-content:center;}
  .cta{width:100%;}
}
@media (prefers-reduced-motion:reduce){
  .reveal{animation:none;opacity:1;transform:none;}
  .rl-wave{animation:none;stroke-opacity:.7;}
  .btn,.card{transition:none;}
  html{scroll-behavior:auto;}
}

/* ============================================================
   Showcase: real photo
   ============================================================ */
.photo-frame{
  margin-top:42px;border-radius:20px;overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--surface),var(--bg-2));
  position:relative;
}
.photo-frame::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--grad);opacity:.85;
}
.photo-frame img{
  width:100%;height:auto;display:block;
  aspect-ratio:4/3;object-fit:cover;
}
.photo-cap{
  display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline;
  padding:16px 20px;color:var(--muted);font-size:14px;
  border-top:1px solid var(--line);
}
.photo-cap b{
  color:var(--text);font-family:var(--font-display);
  font-weight:600;font-size:14px;letter-spacing:.02em;
}

/* ============================================================
   Partner / integration logo card
   Always a light, neutral plate so a logo with fixed dark
   artwork stays readable in BOTH the light and dark theme.
   This removes the "black text invisible in dark mode" bug
   regardless of how the SVG colours itself internally.
   ============================================================ */
.logo-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:24px;
  margin-top:42px;padding:clamp(22px,4vw,36px);
  border-radius:20px;
  background:linear-gradient(180deg,var(--surface),var(--bg-2));
  border:1px solid var(--line);
}
.logo-plate{
  flex:0 0 auto;
  display:grid;place-items:center;
  width:200px;height:104px;padding:18px 24px;
  background:#ffffff;                 /* fixed light plate, both themes */
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 6px 22px rgba(0,0,0,.28);
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
a.logo-plate:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.34);
}
a.logo-plate:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
}
.logo-plate img,
.logo-plate svg{
  max-width:100%;max-height:100%;
  width:auto;height:auto;display:block;
}
.logo-row__text{flex:1 1 280px;min-width:240px;}
.logo-row__text h3{margin:0 0 6px;}
.logo-row__text p{margin:0;color:var(--muted);font-size:15.5px;}
.logo-row__text a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(31,230,214,.35);}
.logo-row__text a:hover{color:var(--text);}
.logo-plate--empty{
  color:#5a6072;font-family:var(--font-display);
  font-size:12px;letter-spacing:.12em;text-align:center;line-height:1.5;
}
@media (max-width:560px){
  .logo-plate{width:100%;}
}