/* ══════════════════════════════════════════════════════════════
   Rugby Union Manager - landing page
   Direction: a rugby club at night, seen from the tunnel.
   Near-black ground, floodlight bloom, pitch-line grid, one green.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* Ground */
  --ink:        #060907;
  --ink-2:      #0a0f0c;
  --surface:    #0e1512;
  --surface-2:  #131b17;
  --line:       #1d2823;

  /* Floodlight + pitch */
  --green:      #4ade80;
  --green-deep: #157f43;
  --green-glow: rgba(74, 222, 128, .16);
  --warm:       #f3e7c8;

  /* Type */
  --fg:         #e9efea;
  --fg-2:       #9daba2;
  --fg-3:       #6b7a72;

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body:    "Manrope", ui-sans-serif, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  --shell: 1240px;
  --r: 14px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--fg);
  font-family:var(--body);
  font-size:clamp(15px,.55vw + 13px,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ─── Atmosphere ─────────────────────────────────────────────── */

/* Floodlight blooming from above the stand */
.floodlight{
  position:fixed; inset:-20% -10% auto -10%; height:120vh; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 42% at 22% 0%,  rgba(74,222,128,.10), transparent 68%),
    radial-gradient(46% 38% at 78% 4%,  rgba(243,231,200,.07), transparent 70%),
    radial-gradient(80% 50% at 50% 0%,  rgba(120,180,150,.05), transparent 75%);
}

/* Pitch markings, barely there */
.pitchlines{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(to right, rgba(160,200,180,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(160,200,180,.028) 1px, transparent 1px);
  background-size:96px 100%, 100% 96px;
  mask-image:linear-gradient(to bottom, #000 0%, #000 42%, transparent 92%);
}

/* Grain, so the flat blacks aren't plastic */
.grain{
  position:fixed; inset:0; z-index:9; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

main, .topbar, .foot{ position:relative; z-index:1; }

/* ─── Top bar ────────────────────────────────────────────────── */

.topbar{
  max-width:var(--shell); margin:0 auto;
  padding:26px clamp(20px,4vw,40px);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}

.wordmark{
  display:inline-flex; align-items:center; gap:12px;
  text-decoration:none; letter-spacing:-.01em;
}
.badge{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(160deg, var(--surface-2), #0b120e);
  border:1px solid var(--line);
  box-shadow:0 0 0 1px rgba(74,222,128,.06), 0 0 26px -8px var(--green-glow);
}
.badge svg{ width:20px; height:20px; fill:none; stroke:var(--green); stroke-width:7; }

.wordmark-text{
  font-family:var(--display); font-weight:600; font-size:1.06rem;
  font-variation-settings:"SOFT" 0,"WONK" 1;
}
.wordmark-text em{ font-style:normal; color:var(--green); margin-left:.34em; }

.topnav{ display:flex; align-items:center; gap:28px; font-size:.9rem; }
.topnav a{ text-decoration:none; color:var(--fg-2); transition:color .2s; }
.topnav a:hover{ color:var(--fg); }
.btn-ghost{
  padding:9px 16px; border:1px solid var(--line); border-radius:999px;
  color:var(--fg) !important; background:rgba(255,255,255,.015);
}
.btn-ghost:hover{ border-color:rgba(74,222,128,.5); background:rgba(74,222,128,.07); }
@media (max-width:760px){ .topnav a:not(.btn-ghost){ display:none; } }

/* ─── Hero ───────────────────────────────────────────────────── */

.hero{
  max-width:var(--shell); margin:0 auto;
  padding:clamp(28px,6vw,80px) clamp(20px,4vw,40px) clamp(40px,7vw,96px);
  display:grid; grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:clamp(28px,5vw,68px); align-items:center;
}
@media (max-width:940px){ .hero{ grid-template-columns:1fr; } }

.eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.19em;
  text-transform:uppercase; color:var(--green); margin:0 0 20px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--green); opacity:.65;
}

h1{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.5rem,5.6vw,4.35rem); line-height:1.03;
  letter-spacing:-.028em; margin:0 0 24px;
  font-variation-settings:"SOFT" 0,"WONK" 1;
}
h1 em{
  font-style:normal;
  background:linear-gradient(96deg,var(--green),#a7f3c8 60%,var(--warm));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.lede{ color:var(--fg-2); font-size:1.06rem; max-width:46ch; margin:0 0 30px; }
.microcopy{ color:var(--fg-3); font-size:.82rem; margin:14px 0 0; }

.hero-shot{
  margin:0; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 40px 90px -50px #000, 0 0 70px -34px var(--green-glow);
  transform:perspective(1600px) rotateY(-4deg) rotateX(1.4deg);
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.hero-shot:hover{ transform:perspective(1600px) rotateY(-1.5deg) rotateX(.4deg); }
@media (max-width:940px){ .hero-shot{ transform:none; } }

/* ─── Waitlist form ──────────────────────────────────────────── */

.waitlist{ display:flex; flex-wrap:wrap; gap:10px; max-width:520px; }
.waitlist input{
  flex:1 1 240px; min-width:0;
  padding:14px 17px; border-radius:11px;
  background:var(--surface); color:var(--fg);
  border:1px solid var(--line);
  font-family:var(--body); font-size:.97rem;
  transition:border-color .2s, box-shadow .2s;
}
.waitlist input::placeholder{ color:var(--fg-3); }
.waitlist input:focus{
  outline:none; border-color:rgba(74,222,128,.62);
  box-shadow:0 0 0 4px rgba(74,222,128,.10);
}
.waitlist button{
  padding:14px 24px; border:0; border-radius:11px; cursor:pointer;
  background:linear-gradient(180deg,#5ce592,var(--green));
  color:#05130b; font-family:var(--body); font-weight:700; font-size:.95rem;
  letter-spacing:-.005em;
  box-shadow:0 12px 30px -14px rgba(74,222,128,.75);
  transition:transform .16s, box-shadow .16s, filter .16s;
}
.waitlist button:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.waitlist button:active{ transform:translateY(0); }
.waitlist button[disabled]{ opacity:.55; cursor:progress; transform:none; }

.formnote{
  flex-basis:100%; margin:4px 0 0; font-size:.85rem; min-height:1.2em;
  font-family:var(--mono); letter-spacing:.01em;
}
.formnote.ok{ color:var(--green); }
.formnote.bad{ color:#f8a4a4; }

/* ─── Ticker ─────────────────────────────────────────────────── */

.ticker{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(14,21,18,.7), rgba(6,9,7,.35));
}
.ticker ul{
  max-width:var(--shell); margin:0 auto; padding:22px clamp(20px,4vw,40px);
  list-style:none; display:flex; flex-wrap:wrap; gap:clamp(22px,5vw,60px);
}
.ticker li{ display:flex; align-items:baseline; gap:9px; }
.ticker b{
  font-family:var(--display); font-weight:700; font-size:1.5rem; color:var(--green);
  letter-spacing:-.02em;
}
.ticker span{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--fg-3);
}

/* ─── Sections ───────────────────────────────────────────────── */

.section-head{
  max-width:var(--shell); margin:0 auto;
  padding:clamp(56px,9vw,120px) clamp(20px,4vw,40px) clamp(20px,3vw,40px);
}
h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.1;
  letter-spacing:-.026em; margin:0;
  font-variation-settings:"SOFT" 0,"WONK" 1;
}

.pillars{ max-width:var(--shell); margin:0 auto; padding:0 clamp(20px,4vw,40px) 20px; }

.pillar{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(24px,4vw,56px); align-items:center;
  padding:clamp(30px,5vw,58px) 0;
  border-top:1px solid var(--line);
}
.pillar.flip .pillar-text{ order:2; }
@media (max-width:880px){
  .pillar{ grid-template-columns:1fr; }
  .pillar.flip .pillar-text{ order:0; }
}

.kicker{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--fg-3); margin:0 0 12px;
}
.pillar h3{
  font-family:var(--display); font-weight:600; font-size:clamp(1.35rem,2.3vw,1.85rem);
  line-height:1.18; letter-spacing:-.02em; margin:0 0 14px;
}
.pillar p{ color:var(--fg-2); margin:0; max-width:44ch; }

.pillar figure{
  margin:0; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 30px 70px -46px #000;
  transition:border-color .35s, box-shadow .35s, transform .35s;
}
.pillar figure:hover{
  border-color:rgba(74,222,128,.34);
  box-shadow:0 34px 80px -44px #000, 0 0 60px -34px var(--green-glow);
  transform:translateY(-3px);
}

/* ─── Gallery ────────────────────────────────────────────────── */

.gallery{ max-width:var(--shell); margin:0 auto; padding:0 clamp(20px,4vw,40px); }
/* Two-up rather than auto-fit: these are dense UI screenshots and the detail is
   unreadable at three across. Four items also tile evenly as 2x2. */
.gallery .grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2.4vw,26px);
}
@media (max-width:720px){
  .gallery .grid{ grid-template-columns:1fr; }
}
.gallery figure{
  margin:0; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line); background:var(--surface);
  transition:border-color .35s, transform .35s;
}
.gallery figure:hover{ border-color:rgba(74,222,128,.34); transform:translateY(-3px); }
.gallery figcaption{
  padding:13px 16px; font-size:.85rem; color:var(--fg-2);
  border-top:1px solid var(--line);
}

/* ─── Roadmap ────────────────────────────────────────────────── */

.status{ max-width:var(--shell); margin:0 auto; padding:0 clamp(20px,4vw,40px); }
.roadmap{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(14px,2vw,20px);
}
.roadmap li{
  padding:24px 22px; border-radius:var(--r);
  background:linear-gradient(180deg,var(--surface),rgba(6,9,7,.5));
  border:1px solid var(--line); position:relative;
}
.roadmap li::before{
  content:"Planned"; position:absolute; top:-9px; left:20px;
  font-family:var(--mono); font-size:.63rem; letter-spacing:.15em; text-transform:uppercase;
  padding:2px 9px; border-radius:999px;
  background:var(--ink-2); border:1px solid var(--line); color:var(--fg-3);
}
.roadmap li.done::before{
  content:"Built"; color:var(--green); border-color:rgba(74,222,128,.4);
}
.roadmap li.now::before{
  content:"In progress"; color:var(--warm); border-color:rgba(243,231,200,.32);
}
.roadmap h3{
  font-family:var(--display); font-weight:600; font-size:1.12rem;
  margin:6px 0 8px; letter-spacing:-.015em;
}
.roadmap p{ margin:0; color:var(--fg-2); font-size:.93rem; }

/* ─── Closing CTA ────────────────────────────────────────────── */

.cta{ padding:clamp(60px,9vw,120px) clamp(20px,4vw,40px) clamp(40px,6vw,80px); }
.cta-inner{
  max-width:760px; margin:0 auto; text-align:center;
  padding:clamp(34px,5vw,60px) clamp(22px,4vw,50px);
  border-radius:20px; border:1px solid var(--line);
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(74,222,128,.10), transparent 62%),
    linear-gradient(180deg,var(--surface),rgba(6,9,7,.6));
  box-shadow:0 40px 100px -60px #000;
}
.cta-inner h2{ margin-bottom:12px; }
.cta-inner > p{ color:var(--fg-2); margin:0 auto 26px; max-width:48ch; }
.waitlist.big{ margin:0 auto; justify-content:center; }
.waitlist.big .formnote{ text-align:center; }

/* ─── Footer ─────────────────────────────────────────────────── */

.foot{
  border-top:1px solid var(--line);
  max-width:var(--shell); margin:0 auto;
  padding:34px clamp(20px,4vw,40px) 56px;
  display:flex; flex-wrap:wrap; gap:8px 26px; align-items:baseline;
}
.foot-mark{
  font-family:var(--display); font-weight:600; margin:0; letter-spacing:-.015em;
}
.foot-note{ margin:0; color:var(--fg-3); font-size:.85rem; }
.foot-note a{ color:var(--fg-2); text-decoration:none; border-bottom:1px solid var(--line); }
.foot-note a:hover{ color:var(--green); border-color:var(--green); }

/* ─── Reveal on scroll ───────────────────────────────────────── */

.reveal{ opacity:0; transform:translateY(16px); }
.reveal.in{
  opacity:1; transform:none;
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal.d1.in{ transition-delay:.07s; }
.reveal.d2.in{ transition-delay:.14s; }
.reveal.d3.in{ transition-delay:.21s; }
.reveal.d4.in{ transition-delay:.28s; }

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; }
  .hero-shot, .pillar figure, .gallery figure, .waitlist button{ transition:none; }
}