/* ProBike Studio — preview design system (Orbea-inspired editorial) */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Manrope:wght@400;500;600;700&display=swap');

:root{
  --ink:#0A0A0A;
  --paper:#FFFFFF;
  --wash:#F5F4F2;
  --smoke:#6B6B6B;
  --line:#E7E6E3;
  --orange:#FF4A17;
  --orange-deep:#E23C0C;
  --maxw:1320px;
  --nav-h:74px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Manrope',system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.display{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.03em;line-height:.92}
.eyebrow{font-family:'Archivo',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.22em;font-size:12px;color:var(--orange)}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 32px;background:rgba(10,10,10,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav a{color:#fff}
.brand{font-family:'Archivo',sans-serif;font-weight:900;letter-spacing:-.02em;font-size:20px;display:flex;align-items:center;gap:2px}
.brand b{color:var(--orange)}
.brand span{font-weight:500;font-size:11px;letter-spacing:.3em;color:#9a9a9a;align-self:flex-end;margin-bottom:3px;margin-left:4px}
.nav nav{display:flex;gap:34px;align-items:center}
.nav nav a{font-size:14px;font-weight:600;color:#d9d9d9;transition:color .2s;position:relative}
.nav nav a:hover{color:#fff}
.nav nav a.active{color:#fff}
.nav-cta{background:var(--orange);color:#fff!important;padding:11px 20px;border-radius:100px;font-size:13px;font-weight:700}
.nav-cta:hover{background:var(--orange-deep)}
@media(max-width:900px){.nav nav{display:none}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;
  padding:16px 30px;border-radius:100px;transition:transform .2s,background .2s,color .2s;cursor:pointer;border:none}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--orange);transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.22)}
.btn-orange{background:var(--orange);color:#fff}
.btn-orange:hover{background:var(--orange-deep);transform:translateY(-2px)}
.arrow{transition:transform .2s}
.btn:hover .arrow{transform:translateX(4px)}

/* ---------- Sections ---------- */
section{position:relative}
.pad{padding:110px 0}
.pad-sm{padding:72px 0}
.section-head{max-width:760px;margin-bottom:56px}
.section-head h2{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.03em;font-size:clamp(34px,5vw,60px);line-height:1;margin:14px 0}
.section-head p{color:var(--smoke);font-size:18px;max-width:560px}
.dark{background:var(--ink);color:#fff}
.dark .section-head p{color:#a5a5a5}

/* ---------- Footer ---------- */
.foot{background:var(--ink);color:#fff;padding:80px 0 40px}
.foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:56px}
.foot h4{font-family:'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:#777;margin-bottom:18px}
.foot a{color:#cfcfcf;display:block;margin-bottom:10px;font-size:15px;transition:color .2s}
.foot a:hover{color:var(--orange)}
.foot .big{font-family:'Archivo',sans-serif;font-weight:900;font-size:34px;letter-spacing:-.02em}
.foot .big b{color:var(--orange)}
.foot .bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:26px;display:flex;justify-content:space-between;color:#7a7a7a;font-size:13px;flex-wrap:wrap;gap:12px}
@media(max-width:800px){.foot .cols{grid-template-columns:1fr 1fr}}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- Preview ribbon ---------- */
.ribbon{position:fixed;bottom:16px;left:16px;z-index:200;background:var(--orange);color:#fff;font-family:'Archivo',sans-serif;
  font-weight:700;font-size:12px;letter-spacing:.05em;padding:9px 16px;border-radius:100px;box-shadow:0 10px 30px rgba(0,0,0,.25)}