:root{
  --ink:#0A1F1D;
  --ink-soft:#3D5450;
  --paper:#FBFFFD;
  --paper-dim:#F0FBF5;
  --mint:#B0FFAC;
  --cyan:#13FFF7;
  --teal:#0B8F88;
  --coral:#FF4E50;
  --gold:#F9D323;
  --grad-aqua:linear-gradient(100deg,var(--mint),var(--cyan));
  --grad-sunset:linear-gradient(100deg,var(--coral),var(--gold));
  --display:"Bricolage Grotesque",sans-serif;
  --body:"Albert Sans",sans-serif;
  --mono:"Spline Sans Mono",monospace;
  --measure:34rem;
  --gutter:clamp(1.25rem,5vw,5rem);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--mint);color:var(--ink)}
a{color:inherit}
img{display:block;max-width:100%}

/* ---------- nav ---------- */
nav{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:0.9rem var(--gutter);
  background:color-mix(in srgb,var(--ink) 86%,transparent);
  color:var(--paper);
  backdrop-filter:blur(10px);
  border-bottom:1px solid color-mix(in srgb,var(--paper) 10%,transparent);
}
.brand{display:flex;align-items:center;gap:0.65rem;text-decoration:none}
.brand img{width:2.1rem;height:auto}
.brand span{
  font-family:var(--display);font-weight:700;font-size:1.15rem;
  letter-spacing:-0.02em;
}
nav ul{display:flex;gap:2rem;list-style:none}
nav ul a{
  text-decoration:none;font-family:var(--mono);font-size:0.8rem;
  letter-spacing:0.06em;text-transform:lowercase;
  border-bottom:2px solid transparent;padding-bottom:2px;
}
nav ul a:hover{border-color:var(--cyan)}

/* ---------- hero ---------- */
header{
  min-height:92vh;
  display:grid;align-content:center;
  padding:4rem var(--gutter);
  position:relative;
  overflow:hidden;
  background:var(--ink);
  color:var(--paper);
}
/* aurora: two slow-drifting gradient blobs */
header::before,header::after{
  content:"";position:absolute;border-radius:50%;
  filter:blur(90px);opacity:0.35;pointer-events:none;
}
header::before{
  width:55vw;height:55vw;min-width:420px;min-height:420px;
  background:radial-gradient(circle,var(--cyan),transparent 65%);
  top:-18vw;right:-12vw;
  animation:drift1 26s ease-in-out infinite alternate;
}
header::after{
  width:45vw;height:45vw;min-width:340px;min-height:340px;
  background:radial-gradient(circle,var(--mint),transparent 65%);
  bottom:-16vw;left:-10vw;
  animation:drift2 32s ease-in-out infinite alternate;
}
@keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(-9vw,7vw) scale(1.15)}}
@keyframes drift2{from{transform:translate(0,0) scale(1)}to{transform:translate(8vw,-6vw) scale(1.1)}}
.cursor-glow{
  position:absolute;width:34rem;height:34rem;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--cyan) 22%,transparent),transparent 62%);
  transform:translate(-50%,-50%);
  pointer-events:none;opacity:0;transition:opacity .5s ease;
  mix-blend-mode:screen;z-index:1;
}
header:hover .cursor-glow{opacity:1}
header>*{position:relative;z-index:2}
.eyebrow{
  font-family:var(--mono);font-size:0.8rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--mint);
  margin-bottom:1.6rem;
}
/* staged entrance */
.rise{opacity:0;transform:translateY(26px);animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
.rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.22s}
.rise.d3{animation-delay:.38s}.rise.d4{animation-delay:.54s}
@keyframes rise{to{opacity:1;transform:none}}
header .grad-aqua{
  filter:none;
  text-shadow:none;
}
header h1 .grad-aqua{
  position:relative;
}
header h1 .grad-aqua::after{
  content:"";position:absolute;inset:-0.1em -0.15em;
  background:var(--grad-aqua);filter:blur(38px);opacity:0.28;
  z-index:-1;border-radius:1em;
}
h1{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(2.9rem,8.5vw,7.2rem);
  line-height:0.98;
  letter-spacing:-0.03em;
  max-width:14ch;
}
.grad-aqua{
  background:var(--grad-aqua);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* keep neon legible on white */
  filter:saturate(1.1) brightness(0.82);
}
.grad-sunset{
  background:var(--grad-sunset);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{
  margin-top:2rem;max-width:var(--measure);
  font-size:clamp(1.05rem,1.6vw,1.3rem);
  color:color-mix(in srgb,var(--paper) 74%,transparent);
}
.hero-turtle{
  position:absolute;right:calc(var(--gutter) * 0.6);bottom:clamp(1rem,3.5vw,3rem);
  width:clamp(170px,22vw,380px);
  opacity:0.95;
  pointer-events:none;
  animation:swim 9s ease-in-out infinite;
  filter:drop-shadow(0 0 40px color-mix(in srgb,var(--cyan) 30%,transparent));
}
@keyframes swim{
  0%,100%{transform:rotate(-6deg) translateY(0)}
  50%{transform:rotate(-3deg) translateY(-16px)}
}
.hero-actions{margin-top:2.6rem;display:flex;gap:1rem;flex-wrap:wrap}
.btn{
  font-family:var(--mono);font-size:0.85rem;letter-spacing:0.05em;
  text-decoration:none;padding:0.85rem 1.5rem;border-radius:999px;
  border:1.5px solid var(--ink);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 -2px var(--cyan)}
header .btn{border-color:var(--paper);color:var(--paper)}
header .btn-solid{background:var(--grad-aqua);color:var(--ink);border-color:transparent;font-weight:500}
header .btn:hover{box-shadow:0 6px 0 -2px var(--mint)}

/* ---------- manifesto ---------- */
.manifesto{
  padding:3.5rem var(--gutter) 8rem;
  position:relative;
}
.section-label{
  font-family:var(--mono);font-size:0.8rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--teal);
  margin-bottom:4rem;
}
.belief{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.9rem,5.2vw,4.3rem);
  line-height:1.06;
  letter-spacing:-0.025em;
  max-width:18ch;
  margin:0 auto 22vh;
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
}
.belief.visible{opacity:1;transform:none}
.belief:nth-child(even){margin-left:auto;margin-right:0;text-align:right}
.belief:nth-child(odd){margin-left:0;margin-right:auto;text-align:left}
.belief small{
  display:block;margin-top:1rem;
  font-family:var(--body);font-weight:400;
  font-size:clamp(0.95rem,1.3vw,1.1rem);
  line-height:1.55;letter-spacing:0;
  color:var(--ink-soft);max-width:34rem;
}
.belief:nth-child(even) small{margin-left:auto}
/* the swim path */
.swim{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:-1;opacity:0.55;
}
.swim path{
  fill:none;stroke:url(#swimGrad);stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
}

/* ---------- products ---------- */
.products{padding:5rem var(--gutter)}
.product-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.5rem;margin-top:1rem;
}
.card{
  border-radius:1.4rem;
  padding:2.4rem;
  background:var(--paper-dim);
  border:1px solid color-mix(in srgb,var(--ink) 7%,transparent);
  position:relative;overflow:hidden;
  transition:transform .2s ease;
}
.card:hover{transform:translateY(-4px)}
.card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:6px;
}
.card.aqua::before{background:var(--grad-aqua)}
.card.sunset::before{background:var(--grad-sunset)}
.card h3{
  font-family:var(--display);font-weight:800;
  font-size:1.9rem;letter-spacing:-0.02em;margin-bottom:0.4rem;
}
.card .tag{
  font-family:var(--mono);font-size:0.75rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--teal);
}
.card.sunset .tag{color:#D9430F}
.card p{margin-top:1rem;color:var(--ink-soft)}
.card a{
  display:inline-block;margin-top:1.6rem;font-family:var(--mono);
  font-size:0.85rem;text-decoration:none;
  border-bottom:2px solid var(--cyan);padding-bottom:2px;
}
.card.sunset a{border-color:var(--gold)}
.card .status{
  display:inline-flex;align-items:center;gap:0.5rem;margin-top:1.6rem;
  font-family:var(--mono);font-size:0.75rem;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ink-soft);
}
.card .status::before{
  content:"";width:0.5rem;height:0.5rem;border-radius:50%;
  background:var(--grad-aqua);
}
.card.sunset .status::before{background:var(--grad-sunset)}

/* ---------- how ---------- */
.how{padding:5rem var(--gutter);background:var(--ink);color:var(--paper)}
.how .section-label{color:var(--mint)}
.how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2.5rem;margin-top:1rem}
.how h3{
  font-family:var(--display);font-weight:700;font-size:1.25rem;
  margin-bottom:0.5rem;letter-spacing:-0.01em;
}
.how p{color:color-mix(in srgb,var(--paper) 72%,transparent);font-size:0.98rem}

/* ---------- contact + footer ---------- */
.contact{padding:7rem var(--gutter);text-align:center}
.contact h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.2rem,5.5vw,4.5rem);letter-spacing:-0.03em;line-height:1.02;
}
.contact p{margin:1.4rem auto 2.4rem;max-width:var(--measure);color:var(--ink-soft)}
footer{
  padding:2.5rem var(--gutter);
  border-top:1px solid color-mix(in srgb,var(--ink) 8%,transparent);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-size:0.85rem;color:var(--ink-soft);
  font-family:var(--mono);
}
@media (prefers-reduced-motion:reduce){
  .belief{opacity:1;transform:none;transition:none}
  .swim{display:none}
  .rise{opacity:1;transform:none;animation:none}
  header::before,header::after,.hero-turtle{animation:none}
  .cursor-glow{display:none}
  html{scroll-behavior:auto}
}
@media (max-width:640px){
  nav ul{gap:1.1rem}
  .hero-turtle{display:none}
  .belief:nth-child(even),.belief:nth-child(odd){text-align:left;margin:0 0 16vh 0}
  .belief:nth-child(even) small{margin-left:0}
}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}