:root{
    --sea-1:#3fd0d8; --sea-3:#14879e;
    --palm:#15705a;
    --coral:#ff6b4a; --mango:#ffb03a;
    --ink:#053742; --ink-soft:#0a5163;
    --cream:#fffaf0;
    --shadow:0 18px 40px -18px rgba(4,33,43,.55);
    --font-display:'Anton',Impact,'Haettenschweiler',sans-serif;
    --font-body:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{font-family:var(--font-body); color:var(--ink); background:var(--cream);
       -webkit-font-smoothing:antialiased; overflow-x:hidden}
  a{color:inherit}

  /* ── Hero ───────────────────────────────────────────────────────────────
     The owner's own photo, uncomposited. Two art-directed crops: the full
     16:9 frame in landscape, a tight rear three-quarter in portrait (a 4:5
     crop sliced the car in half). object-position keeps the sky and the
     wheels when a viewport forces a vertical crop — the empty foreground
     tarmac is what gets sacrificed.                                       */
  .hero{position:relative; min-height:100svh; display:flex; flex-direction:column;
        overflow:hidden; background:#04212b}
  /* cover, anchored to the bottom. The assets are built taller than the source
     frame (tools/make_hero.py adds sky on top), so the photo always fills the
     viewport with no letterboxing, and what a given aspect has to crop comes
     off the synthesised sky — never off the car. Nothing is upscaled, so the
     car and scenery stay at native sharpness. The car is centred in the asset
     itself, so no CSS nudge is needed. */
  .hero-photo,.hero-photo img{position:absolute; inset:0; width:100%; height:100%;
        object-fit:cover; object-position:50% 100%; z-index:0}

  /* Darkens the sky so cream type reads, and clears well before the car. */
  .hero::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
        background:linear-gradient(180deg, rgba(3,26,35,.88) 0%, rgba(3,26,35,.66) 24%,
                                            rgba(3,26,35,.30) 42%, rgba(3,26,35,0) 60%)}

  .topbar{position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between;
          gap:16px; padding:clamp(12px,2.6vh,22px) clamp(18px,5vw,56px)}
  .mark{display:flex; align-items:center; gap:10px; font-family:var(--font-display); letter-spacing:.06em;
        font-size:15px; color:var(--cream); text-transform:uppercase; text-decoration:none}
  .mark .dot{width:10px; height:10px; border-radius:50%; background:var(--coral); box-shadow:0 0 0 4px rgba(255,107,74,.3)}
  .topbar .soon{font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
        color:var(--cream); background:rgba(255,250,240,.14); border:1px solid rgba(255,250,240,.42);
        padding:7px 14px; border-radius:999px; backdrop-filter:blur(6px)}

  /* Copy sits high, inside the sky. Kept deliberately compact — the long
     description lives in the section below, not over the car. */
  .stage{position:relative; z-index:2; flex:1; display:flex; align-items:flex-start;
         padding:clamp(0px,1vh,18px) clamp(18px,5vw,56px) 0}
  .copy{max-width:min(560px,46%)}

  /* Type is clamped against viewport HEIGHT as well as width: the copy has to
     stay inside the sky above the car, and on a short landscape window that
     ceiling is what runs out first, not the width. */
  .eyebrow{margin:0 0 clamp(8px,1.4vh,12px); font-size:clamp(11px,1.4vw,13px); font-weight:600;
           letter-spacing:.34em; text-transform:uppercase; color:rgba(255,250,240,.8)}
  h1{margin:0; font-family:var(--font-display); font-weight:400; line-height:.85;
     font-size:clamp(40px,min(6.4vw,8.7vh),96px); letter-spacing:.005em; color:var(--cream);
     text-transform:uppercase; text-shadow:0 3px 0 rgba(3,26,35,.3), 0 22px 44px rgba(3,26,35,.55)}
  h1 .stupido{color:var(--mango)}
  .tagline{margin:clamp(8px,1.3vh,18px) 0 0; font-size:clamp(17px,min(2.2vw,2.7vh),26px);
           font-weight:600; color:var(--cream); text-shadow:0 3px 18px rgba(3,26,35,.7)}

  .cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(12px,2vh,24px)}
  .btn{display:inline-flex; align-items:center; gap:10px; padding:16px 30px; border-radius:999px;
       font-weight:600; font-size:16px; text-decoration:none; border:2px solid transparent;
       transition:transform .18s ease, box-shadow .18s ease, background .18s ease}
  .btn-primary{background:var(--coral); color:#fff; box-shadow:var(--shadow)}
  .btn-primary:hover{transform:translateY(-2px); box-shadow:0 22px 44px -16px rgba(255,107,74,.75)}
  .btn-ghost{background:rgba(255,250,240,.14); color:var(--cream); border-color:rgba(255,250,240,.6);
             backdrop-filter:blur(6px)}
  .btn-ghost:hover{background:rgba(255,250,240,.28); transform:translateY(-2px)}

  /* ── Below the fold ────────────────────────────────────────────────── */
  .what{position:relative; z-index:2; background:var(--cream); padding:clamp(56px,9vw,110px) clamp(18px,5vw,56px)}
  .what h2{margin:0 0 10px; text-align:center; font-family:var(--font-display); font-weight:400;
           text-transform:uppercase; letter-spacing:.02em; font-size:clamp(28px,4.6vw,52px); color:var(--ink)}
  .what .sub{margin:0 auto 46px; max-width:62ch; text-align:center; color:var(--ink-soft);
             font-weight:300; font-size:clamp(15px,1.8vw,18px); line-height:1.6}
  .cards{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); max-width:1080px; margin:0 auto}
  .card{background:#fff; border:1px solid rgba(5,55,66,.09); border-radius:20px; padding:30px 26px;
        box-shadow:0 12px 34px -22px rgba(5,55,66,.5)}
  .card .ico{width:46px; height:46px; border-radius:14px; display:grid; place-items:center; margin-bottom:16px;
             background:linear-gradient(135deg,var(--sea-1),var(--sea-3)); color:#fff; font-size:22px}
  .card:nth-child(2) .ico{background:linear-gradient(135deg,var(--mango),var(--coral))}
  .card:nth-child(3) .ico{background:linear-gradient(135deg,#3ad29f,var(--palm))}
  .card h3{margin:0 0 8px; font-size:19px; font-weight:800; letter-spacing:-.01em}
  .card p{margin:0; color:var(--ink-soft); font-weight:300; line-height:1.6; font-size:15px}

  .strip{background:var(--ink); color:var(--cream); text-align:center; padding:clamp(48px,7vw,84px) clamp(18px,5vw,56px)}
  .strip h2{margin:0 0 12px; font-family:var(--font-display); font-weight:400; text-transform:uppercase;
            font-size:clamp(26px,4.2vw,46px)}
  .strip p{margin:0 auto 28px; max-width:52ch; font-weight:300; opacity:.85; line-height:1.6}
  .strip .cta{justify-content:center}

  footer{background:var(--ink); color:rgba(255,250,240,.6); text-align:center;
         padding:0 clamp(18px,5vw,56px) 46px; font-size:13px; font-weight:300}
  footer .socials{display:flex; gap:10px; justify-content:center; margin-bottom:22px; flex-wrap:wrap}
  footer .socials a{display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:999px;
        border:1px solid rgba(255,250,240,.22); text-decoration:none; color:rgba(255,250,240,.82);
        font-size:13px; font-weight:600; transition:background .18s ease, border-color .18s ease}
  footer .socials a:hover{background:rgba(255,250,240,.1); border-color:rgba(255,250,240,.5)}
  footer a.mail{color:var(--sea-1); text-decoration:none}

  /* Ultra-wide, short windows (21:9 and similar): bottom-anchoring crops most of
     the sky, so a stacked copy block would land on the car's roof. Rather than
     compromise the crop, lay the copy out in two columns — eyebrow over the
     wordmark, tagline over the buttons — which roughly halves its height and
     keeps it inside the remaining sky. Grid placement only, same markup. */
  @media (min-aspect-ratio:19/10){
    .hero-photo,.hero-photo img{object-position:50% 96%}
    .copy{max-width:none; display:grid; align-items:end;
          grid-template-columns:max-content max-content; column-gap:clamp(20px,3vw,44px)}
    .eyebrow{grid-area:1/1; margin:0 0 10px}
    h1{grid-area:2/1; font-size:clamp(38px,min(6.4vw,8vh),96px)}
    .tagline{grid-area:1/2; align-self:end; margin:0 0 10px}
    .cta{grid-area:2/2; margin:0 0 6px}
  }

  /* Portrait: the crop puts the car in the bottom half, so copy gets the top */
  @media (max-aspect-ratio:1/1){
    .copy{max-width:100%}
    .hero::after{background:linear-gradient(180deg, rgba(3,26,35,.9) 0%, rgba(3,26,35,.6) 28%,
                                                     rgba(3,26,35,.22) 46%, rgba(3,26,35,0) 64%)}
  }
  @media (max-width:640px){
    h1{font-size:clamp(42px,12vw,74px)}
    .btn{padding:15px 24px; font-size:15px}
  }
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none !important; transition:none !important}
  }