/* ============================================================
   JETSKI BAY — Design System  (aligned to the jet ski logo)
   Drop in:  <link rel="stylesheet" href="jetskibay.css">
   Palette pulled straight from the logo: teal craft, orange spray, cream.
   Two fonts only. White background. Strong hierarchy.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* ---- Color, sampled from the logo ---- */
  --teal:      #0EA8AA;  /* the craft — primary brand            */
  --teal-deep: #08808A;  /* pressed / deeper teal                */
  --teal-ink:  #063B40;  /* darkest teal — dark surfaces         */
  --orange:    #ED6C23;  /* the spray — accent                   */
  --throttle:  #E64E25;  /* hottest — primary action             */
  --throttle-deep:#C93C18;
  --cream:     #FDF5E7;  /* soft wash, sparing                   */

  --white: #FFFFFF;
  --ink:   #0B2E31;      /* body text                            */
  --muted: #5E7A7C;      /* secondary text                       */
  --line:  #E4ECEA;      /* hairlines / borders                  */

  /* ---- Semantic ---- */
  --bg: var(--white);
  --surface: var(--white);
  --text: var(--ink);
  --text-muted: var(--muted);
  --border: var(--line);

  /* ---- Type: two families, clear jobs ---- */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* ---- Scale: built for strong hierarchy ---- */
  --t-mega: clamp(3rem, 8vw, 6rem);
  --t-h1:   clamp(2.25rem, 5vw, 3.75rem);
  --t-h2:   clamp(1.6rem, 3.2vw, 2.5rem);
  --t-h3:   1.25rem;
  --t-body: 1.0625rem;
  --t-small:.9375rem;
  --t-micro:.75rem;

  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;
  --r-sm:8px;--r-md:14px;--r-lg:22px;--r-xl:30px;

  --shadow-sm:0 1px 2px rgba(8,128,138,.10);
  --shadow-md:0 10px 30px -10px rgba(8,128,138,.28);
  --shadow-lg:0 28px 70px -20px rgba(6,59,64,.30);
  --glow:0 0 0 4px rgba(14,168,170,.20);

  --ease:cubic-bezier(.22,.61,.36,1);--fast:.16s;--med:.28s;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;font-family:var(--font-body);font-size:var(--t-body);line-height:1.6;
  color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

/* ---- Hierarchy ---- */
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.02;letter-spacing:-.02em;margin:0 0 var(--s-4);color:var(--teal-ink);font-weight:700;}
h1{font-size:var(--t-h1);}
h2{font-size:var(--t-h2);font-weight:700;}
h3{font-size:var(--t-h3);font-weight:600;letter-spacing:-.01em;}
p{margin:0 0 var(--s-4);}
a{color:var(--teal-deep);text-underline-offset:2px;}
::selection{background:var(--teal);color:var(--white);}

/* ---- Eyebrow: small tracked label ---- */
.eyebrow{
  font-family:var(--font-body);font-size:var(--t-micro);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--throttle);
  display:inline-block;margin-bottom:var(--s-3);
}

/* ---- Build-stamp: the fleet tag on every demo ---- */
.build-stamp{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-family:var(--font-body);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);
  background:var(--white);border:1px solid var(--border);padding:6px var(--s-3);border-radius:99px;
}
.build-stamp::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px rgba(14,168,170,.22);}
.build-stamp[data-status="live"]::before{background:var(--throttle);box-shadow:0 0 0 3px rgba(230,78,37,.25);}
.build-stamp[data-status="docked"]::before{background:var(--muted);box-shadow:none;}

/* ---- Layout ---- */
.bay-shell{max-width:1080px;margin-inline:auto;padding-inline:var(--s-5);}
.bay-section{padding-block:var(--s-9);}
.bay-grid{display:grid;gap:var(--s-5);}
@media(min-width:720px){.bay-grid.cols-2{grid-template-columns:repeat(2,1fr);}.bay-grid.cols-3{grid-template-columns:repeat(3,1fr);}}

/* ---- Buttons ---- */
.btn{
  font-family:var(--font-body);font-weight:600;font-size:var(--t-small);
  display:inline-flex;align-items:center;gap:var(--s-2);padding:12px var(--s-5);
  border-radius:var(--r-md);border:1.5px solid transparent;cursor:pointer;line-height:1;text-decoration:none;
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease),background var(--fast) var(--ease);
}
.btn:active{transform:translateY(1px);}
.btn--throttle{background:var(--throttle);color:#fff;box-shadow:var(--shadow-sm);}
.btn--throttle:hover{background:var(--throttle-deep);box-shadow:var(--shadow-md);transform:translateY(-1px);}
.btn--launch{background:var(--teal);color:#fff;}
.btn--launch:hover{background:var(--teal-deep);transform:translateY(-1px);}
.btn--ghost{background:transparent;color:var(--teal-ink);border-color:var(--border);}
.btn--ghost:hover{border-color:var(--teal-ink);}
.btn:focus-visible{outline:none;box-shadow:var(--glow);}

/* ---- Card ---- */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s-6);box-shadow:var(--shadow-sm);
  transition:transform var(--med) var(--ease),box-shadow var(--med) var(--ease);
}
.card--hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.card h3{margin-top:0;}

/* ---- Tag ---- */
.tag{
  font-family:var(--font-body);font-size:var(--t-micro);font-weight:600;letter-spacing:.04em;
  padding:4px var(--s-2);border-radius:var(--r-sm);background:rgba(14,168,170,.12);color:var(--teal-deep);
}
.tag--orange{background:rgba(237,108,35,.14);color:var(--throttle-deep);}
.tag--cream{background:var(--cream);color:#9a6a1f;}

/* ---- Demo frame: the fleet bar ---- */
.bay-bar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-3) var(--s-5);background:var(--teal-ink);color:var(--white);
  position:sticky;top:0;z-index:50;
}
.bay-bar a{color:var(--teal);text-decoration:none;}
.bay-bar__brand{display:inline-flex;align-items:center;gap:var(--s-3);font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;color:var(--white);}
.bay-bar .build-stamp{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#bfe0e0;}

/* ---- On dark teal ---- */
.on-teal{background:var(--teal-ink);color:var(--white);}
.on-teal h1,.on-teal h2,.on-teal h3{color:var(--white);}
.on-teal .eyebrow{color:var(--orange);}

/* ---- A11y floor ---- */
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}}