/* Soccer Home site. Direction C: centered, premium, navy and blue with red accents.
   Scott's layout rule: content central, big readable type, symmetric sections, no dead white space. */
@font-face{font-family:"Poppins";src:url("../fonts/poppins-regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-bold.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --ink:#0B2233; --navy:#143D73; --blue:#2F6FB5; --red:#B70D2B;
  --cream:#F6F3EC; --paper:#FFFDF8; --line:#E2DCCF; --muted:#4A5963; --soft:#EEF3F9;
  --panel:#0E2B44; --panel-2:#08192B; --on-dark:#FFFFFF; --on-dark-muted:#C9D6DD;
  --font:"Poppins","Segoe UI",Arial,sans-serif;
  --wrap:1120px; --gutter:20px; --radius:14px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font);font-size:18px;line-height:1.6}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
h1,h2,h3{margin:0;line-height:1.12;text-wrap:balance;letter-spacing:-.015em}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.center{text-align:center}
.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px;z-index:10}
.skip:focus{left:8px}

/* Mark */
.mark{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.18em;font-size:.86rem;text-decoration:none;color:inherit}
.mark svg{width:24px;height:24px;flex:none}

/* Header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:rgba(246,243,236,.94);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding-block:14px}
.nav{display:flex;gap:28px;font-size:.95rem;font-weight:500}
.nav a{text-decoration:none;color:var(--ink)}
.nav a:hover{color:var(--blue)}
.head-cta{justify-self:end}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:14px 22px;font:700 1rem/1.2 var(--font);text-decoration:none;cursor:pointer;white-space:nowrap}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:#9B0B24}
.btn-ink{background:var(--ink);color:#fff;padding:10px 18px;font-size:.9rem;border-radius:99px}
.btn-ink:hover{background:var(--navy)}
@media (max-width:860px){
  .site-head .wrap{grid-template-columns:1fr auto}
  .nav{display:none}
}

/* Hero */
.hero{padding-block:56px 0}
.hero h1{font-size:clamp(2.4rem,5.6vw,4.2rem);font-weight:700;max-width:19ch;margin:14px auto 0}
.hero .sub{font-size:clamp(1.1rem,1.8vw,1.3rem);color:var(--muted);max-width:40ch;margin:20px auto 0}
.stack{position:relative;max-width:760px;height:clamp(300px,46vw,470px);margin:40px auto 0}
.stack img{position:absolute;border-radius:10px;box-shadow:0 26px 50px -24px rgba(7,20,31,.45),0 2px 6px rgba(7,20,31,.08);background:#fff}
.stack .side{width:38%;top:12%}
.stack .l{left:2%;transform:rotate(-6deg)}
.stack .r{right:2%;transform:rotate(6deg)}
.stack .mid{width:46%;left:27%;top:0;z-index:2}
.stack::after{content:"";position:absolute;inset:auto 0 0 0;height:34%;background:linear-gradient(180deg,rgba(246,243,236,0),var(--cream) 85%);z-index:3;pointer-events:none}

/* Offer card */
.offer{position:relative;z-index:4;max-width:760px;margin:-72px auto 0;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:30px 32px;box-shadow:0 30px 60px -40px rgba(7,20,31,.5);text-align:center;display:grid;gap:12px;justify-items:center}
.offer .tag{font-size:.74rem;font-weight:700;letter-spacing:.16em;color:#fff;background:var(--red);border-radius:99px;padding:5px 12px}
.offer h2{font-size:clamp(1.5rem,2.6vw,1.9rem)}
.offer p{color:var(--muted);max-width:52ch}
.signup{display:flex;gap:10px;width:100%;max-width:560px;margin-top:6px}
.signup input{flex:1;min-width:0;font:500 1rem var(--font);padding:14px 16px;border:1.5px solid #CFC8B8;border-radius:12px;background:#fff;color:var(--ink)}
.signup input:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(47,111,181,.2)}
.fine{font-size:.82rem;color:var(--muted)}
.form-note{font-size:.9rem;font-weight:600;color:var(--navy)}
@media (max-width:560px){.signup{flex-direction:column}.offer{padding:24px 18px;margin-top:-48px}}

/* Credentials band */
.creds{margin-top:64px;background:linear-gradient(180deg,var(--panel),var(--panel-2));color:var(--on-dark)}
.creds .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-block:40px;text-align:center}
.cred b{display:block;font-size:1.3rem;line-height:1.25}
.cred span{display:block;margin-top:6px;color:var(--on-dark-muted);font-size:.95rem}
.cred::before{content:"";display:block;width:36px;height:5px;border-radius:3px;background:var(--red);margin:0 auto 14px}
@media (max-width:760px){.creds .wrap{grid-template-columns:1fr;gap:28px}}

/* Sections */
.section{padding-block:72px}
.section-head{text-align:center;display:grid;gap:10px;justify-items:center;margin-bottom:36px}
.section-head h2{font-size:clamp(2rem,3.6vw,2.8rem)}
.section-head p{color:var(--muted);max-width:52ch;font-size:1.08rem}

/* Lanes */
.lanes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.lane{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:grid;grid-template-rows:auto 1fr;text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease}
.lane:hover{transform:translateY(-3px);box-shadow:0 22px 40px -28px rgba(7,20,31,.45)}
.lane img{aspect-ratio:4/3;object-fit:cover;width:100%;border-bottom:1px solid var(--line)}
.lane .body{padding:20px 22px 22px;display:grid;gap:8px;align-content:start;text-align:center;justify-items:center}
.lane h3{font-size:1.25rem}
.lane p{font-size:.98rem;color:var(--muted)}
.lane .go{margin-top:4px;font-weight:700;font-size:.95rem;color:var(--navy)}
.lane .go::after{content:" \2192"}
.lane .soon{font-size:.72rem;font-weight:700;letter-spacing:.14em;color:#fff;background:var(--blue);border-radius:99px;padding:4px 10px}
@media (max-width:900px){.lanes{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.lanes{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.lane{transition:none}.lane:hover{transform:none}}

/* Recruiting band */
.recruit{background:linear-gradient(180deg,var(--panel),var(--panel-2));color:var(--on-dark)}
.recruit .section-head .eyebrow{color:#8FB8E6}
.recruit .section-head p{color:var(--on-dark-muted)}
.recruit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:36px}
.point{border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);padding:22px;text-align:center;background:rgba(255,255,255,.04)}
.point b{display:block;font-size:1.12rem}
.point span{display:block;margin-top:6px;color:var(--on-dark-muted);font-size:.95rem}
.recruit .offer{margin:0 auto;color:var(--ink)}
@media (max-width:760px){.recruit-grid{grid-template-columns:1fr}}

/* About */
.about{display:grid;justify-items:center;text-align:center;gap:22px;max-width:760px;margin:0 auto}
.portrait{width:220px;aspect-ratio:1;border-radius:50%;overflow:hidden;border:6px solid var(--paper);box-shadow:0 20px 40px -26px rgba(7,20,31,.5);background:repeating-linear-gradient(135deg,#DDD6C8 0 12px,#E6E0D4 12px 24px);display:grid;place-items:center;color:var(--muted);font-size:.85rem;font-weight:600}
.portrait img{width:100%;height:100%;object-fit:cover}
.about h2{font-size:clamp(2rem,3.6vw,2.8rem)}
.about p{font-size:1.12rem;color:#2A3A45;max-width:58ch}

/* Footer */
.site-foot{border-top:1px solid var(--line);padding-block:40px 48px;text-align:center;color:var(--muted);font-size:.92rem}
.site-foot .links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin:14px 0}
.site-foot .links a{color:var(--ink);font-weight:500}

/* Simple pages */
.page{max-width:760px;margin:0 auto;padding-block:64px 80px}
.page h1{font-size:clamp(2.2rem,4.4vw,3.2rem);text-align:center}
.page .lede{text-align:center;font-size:1.15rem;color:var(--muted);margin-top:14px}
.page h2{font-size:1.4rem;margin-top:36px}
.page p,.page li{font-size:1.05rem;margin-top:12px}
.page .card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:28px;margin-top:32px;text-align:center}

.site-foot .crest{width:96px;height:auto;margin:0 auto 14px}