:root {
  --ink: #102a43;
  --ink-soft: #536a7d;
  --yellow: #ffd43b;
  --yellow-dark: #e8b900;
  --teal: #00a896;
  --paper: #f4f7f8;
  --white: #fff;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--paper); margin: 0; }
a { color: inherit; }
.topbar { align-items: center; background: rgba(255,255,255,.94); border-bottom: 1px solid #e3eaee; display: flex; height: 76px; justify-content: space-between; padding: 0 max(5vw, 24px); position: sticky; top: 0; z-index: 10; }
.brand { align-items: center; display: flex; gap: 10px; text-decoration: none; }
.brand span { align-items: center; background: var(--yellow); border-radius: 12px; display: flex; height: 34px; justify-content: center; transform: rotate(-8deg); width: 34px; }
.brand strong { letter-spacing: 1.2px; }
nav { display: flex; gap: 32px; }
nav a { color: #546b7e; font-size: 13px; font-weight: 700; text-decoration: none; }
nav a:hover { color: var(--teal); }
.nav-cta { background: var(--ink); border-radius: 13px; color: white; font-size: 12px; font-weight: 800; padding: 12px 18px; text-decoration: none; }
main { overflow: hidden; }
.hero { align-items: center; background: var(--ink); color: white; display: grid; gap: 7vw; grid-template-columns: 1.15fr .85fr; min-height: 680px; padding: 70px max(8vw, 30px); position: relative; }
.hero::before { background: var(--yellow); border-radius: 50%; content: ""; filter: blur(2px); height: 380px; opacity: .11; position: absolute; right: -100px; top: -100px; width: 380px; }
.eyebrow { color: var(--teal); font-size: 11px; font-weight: 900; letter-spacing: 1.8px; margin: 0 0 15px; }
.hero h1 { font-size: clamp(42px, 6vw, 74px); letter-spacing: -3px; line-height: .99; margin: 0; }
.hero h1 em { color: var(--yellow); font-style: normal; }
.hero-text { color: #c2d1dc; font-size: 17px; line-height: 1.75; margin: 28px 0; max-width: 690px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { border-radius: 15px; display: inline-flex; font-size: 13px; font-weight: 900; justify-content: center; padding: 15px 20px; text-decoration: none; }
.button.primary { background: var(--yellow); color: var(--ink); }
.button.primary:hover, .cart-button:hover { background: #ffe06b; transform: translateY(-1px); }
.button.secondary { border: 1px solid #486073; color: white; }
.trust-row { color: #9fb2c1; display: flex; flex-wrap: wrap; font-size: 11px; font-weight: 700; gap: 22px; margin-top: 30px; }
.hero-card { background: #f8fafb; border: 8px solid white; border-radius: 38px; box-shadow: 0 30px 80px rgba(0,0,0,.35); color: var(--ink); margin: auto; max-width: 390px; overflow: hidden; transform: rotate(2deg); width: 100%; }
.phone-top { align-items: center; display: flex; justify-content: space-between; padding: 18px; }
.phone-top span { background: var(--yellow); border-radius: 9px; height: 24px; width: 24px; }
.phone-top b { font-size: 11px; letter-spacing: 1px; }.phone-top i { color: #7890a2; font-size: 8px; font-style: normal; font-weight: 900; }
.map-grid { background-color: #e5edf0; background-image: linear-gradient(#d3dfe3 1px,transparent 1px),linear-gradient(90deg,#d3dfe3 1px,transparent 1px); background-size: 38px 38px; height: 250px; position: relative; }
.route { border: 5px solid var(--teal); border-bottom-color: transparent; border-left-color: transparent; border-radius: 50%; height: 160px; left: 93px; position: absolute; top: 40px; transform: rotate(36deg); width: 180px; }
.pin { align-items: center; background: white; border-radius: 50%; box-shadow: 0 5px 16px #8ca0aa; display: flex; height: 38px; justify-content: center; position: absolute; width: 38px; }
.pin.start { color: var(--teal); left: 80px; top: 170px; }.pin.end { background: var(--yellow); right: 75px; top: 42px; }
.ride-card { background: white; border-radius: 25px 25px 0 0; margin-top: -28px; padding: 23px; position: relative; }
.ride-card small { color: var(--teal); font-size: 8px; font-weight: 900; letter-spacing: 1px; }.ride-card strong { display: block; font-size: 30px; margin-top: 7px; }.ride-card strong span { color: #718596; font-size: 13px; }.ride-card p { color: #718596; font-size: 11px; }.ride-card div { background: #e7f8f5; border-radius: 12px; font-size: 11px; padding: 10px; }.ride-card div b { color: var(--teal); font-size: 15px; }
.numbers { background: white; border-bottom: 1px solid #e2e9ed; display: grid; grid-template-columns: repeat(4,1fr); padding: 28px max(8vw, 30px); }
.numbers article { border-right: 1px solid #e2e9ed; display: grid; justify-items: center; padding: 10px; }.numbers article:last-child { border: 0; }.numbers strong { font-size: 23px; }.numbers span { color: #788b99; font-size: 10px; margin-top: 4px; }
.section { margin: auto; max-width: 1240px; padding: 105px 28px; }
.section-heading { margin: auto; max-width: 680px; text-align: center; }.section-heading h2,.membership h2,.safety h2,.cart-section h2 { font-size: clamp(32px,4vw,48px); letter-spacing: -1.7px; margin: 0; }.section-heading > p:last-child,.membership-copy > p,.cart-section > div > p { color: var(--ink-soft); line-height: 1.7; }
.steps { display: grid; gap: 18px; grid-template-columns: repeat(3,1fr); margin-top: 48px; }.steps article { background: white; border: 1px solid #e1e9ed; border-radius: 24px; padding: 28px; }.steps span { color: var(--teal); font-size: 11px; font-weight: 900; }.steps h3 { font-size: 18px; margin: 32px 0 10px; }.steps p,.safety-grid p { color: #708493; font-size: 13px; line-height: 1.65; margin-bottom: 0; }
.membership { align-items: center; background: var(--ink); border-radius: 38px; color: white; display: grid; gap: 70px; grid-template-columns: 1fr 440px; margin-bottom: 100px; padding: 64px; }.membership-copy > p { color: #b7c7d2; }.membership ul { color: #d7e1e7; line-height: 2.2; list-style: none; padding: 0; }.membership li::before { color: var(--teal); content: "✓"; font-weight: 900; margin-right: 10px; }
.product-card { background: white; border-radius: 28px; color: var(--ink); padding: 30px; position: relative; }.product-badge { background: #e5f8f4; border-radius: 10px; color: #007f73; display: inline-block; font-size: 8px; font-weight: 900; letter-spacing: .6px; padding: 7px 9px; }.product-name { font-size: 16px; font-weight: 900; margin: 18px 0 10px; }.price { align-items: flex-end; display: flex; gap: 6px; }.price strong { font-size: 42px; letter-spacing: -1.5px; }.price span { color: #718596; font-size: 13px; margin-bottom: 8px; }.tax-note { color: #7890a2; font-size: 10px; margin: 3px 0 22px; }.order-line { border-top: 1px solid #e7edf0; display: flex; font-size: 12px; justify-content: space-between; padding: 14px 0; }.order-line.total b { color: var(--teal); }.cart-button { align-items: center; background: var(--yellow); border: 0; border-radius: 15px; color: var(--ink); cursor: pointer; display: flex; font-size: 13px; font-weight: 900; justify-content: space-between; margin-top: 10px; padding: 15px 17px; transition: .2s; width: 100%; }.secure-note { color: #8293a0; font-size: 9px; line-height: 1.5; text-align: center; }
.cart-section { background: white; border: 1px solid #dce6ea; border-radius: 30px; margin: 0 auto 100px; max-width: 1184px; padding: 38px; }.cart-summary { align-items: center; background: #f4f7f8; border-radius: 20px; display: grid; gap: 14px; grid-template-columns: auto 1fr auto auto; margin: 28px 0 16px; padding: 18px; }.cart-icon { align-items: center; background: var(--yellow); border-radius: 12px; display: flex; height: 38px; justify-content: center; width: 38px; }.cart-summary div { display: grid; }.cart-summary small { color: #738795; margin-top: 4px; }.cart-summary button { background: transparent; border: 0; color: #b34141; cursor: pointer; font-weight: 800; }.button.wide { width: 100%; }
.safety { align-items: start; display: grid; gap: 50px; grid-template-columns: .8fr 1.2fr; }.safety-grid { display: grid; gap: 12px; }.safety-grid article { background: white; border: 1px solid #e1e9ed; border-radius: 18px; padding: 20px; }
footer { background: #0b2032; color: white; display: grid; gap: 44px; grid-template-columns: 1.3fr 1fr 1fr 1.3fr; padding: 60px max(8vw, 30px) 28px; }.footer-brand > p,footer div > p { color: #8da3b3; font-size: 11px; line-height: 1.65; }.footer-brand > p { max-width: 260px; }.footer-brand .brand span { color: var(--ink); }.footer-brand .brand strong { color: white; }.footer-brand div { display: flex; }.footer-brand p { display: block; } footer h3 { font-size: 12px; margin: 0 0 16px; } footer > div > a { color: #a9bbc7; display: block; font-size: 11px; margin: 10px 0; text-decoration: none; }.copyright { border-top: 1px solid #20384b; color: #678092; font-size: 9px; grid-column: 1/-1; margin: 12px 0 0; padding-top: 22px; }
.legal-page { background: white; min-height: 100vh; }.legal-header { background: var(--ink); color: white; padding: 54px max(8vw,30px); }.legal-header .brand { color: white; margin-bottom: 40px; }.legal-header .brand span { color: var(--ink); }.legal-header h1 { font-size: clamp(32px,5vw,54px); letter-spacing: -1.5px; margin: 0; }.legal-header p { color: #aec0cc; }.legal-content { margin: auto; max-width: 900px; padding: 60px 28px 90px; }.legal-content h2 { font-size: 20px; margin-top: 40px; }.legal-content h3 { font-size: 15px; margin-top: 28px; }.legal-content p,.legal-content li { color: #4f6577; font-size: 14px; line-height: 1.8; }.legal-content a { color: #007f73; }.legal-note { background: #fff7cf; border-left: 4px solid var(--yellow-dark); border-radius: 8px; padding: 14px 16px; }.legal-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 45px; }.legal-links a { background: #edf5f4; border-radius: 10px; font-size: 12px; font-weight: 800; padding: 10px 13px; text-decoration: none; }
@media (max-width: 850px) { nav { display: none; }.hero { grid-template-columns: 1fr; padding-top: 52px; }.hero-card { max-width: 350px; }.numbers { grid-template-columns: repeat(2,1fr); }.numbers article:nth-child(2) { border-right: 0; }.steps,.membership,.safety { grid-template-columns: 1fr; }.membership { border-radius: 0; margin-bottom: 40px; padding: 55px 28px; }.product-card { max-width: 480px; width: 100%; }.cart-section { border-radius: 0; margin-bottom: 40px; }.cart-summary { align-items: start; grid-template-columns: auto 1fr; }.cart-summary > strong,.cart-summary > button { grid-column: 2; } footer { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .topbar { height: 66px; }.nav-cta { display: none; }.hero { min-height: auto; padding: 46px 22px 65px; }.hero h1 { letter-spacing: -2px; }.hero-text { font-size: 15px; }.numbers { padding: 20px 10px; }.section { padding: 75px 20px; }.steps { grid-template-columns: 1fr; }.membership { gap: 35px; }.price strong { font-size: 36px; } footer { grid-template-columns: 1fr; }.company { grid-column: 1; } }