/* Hopeland FC — red / black / white, kit-stripe motif */
:root{
  --red:#E80000; --red-deep:#B50000; --red-bright:#FF1F1F;
  --ink:#121212; --ink-soft:#3A3A3E; --mut:#6E6E74;
  --wash:#F4F4F5; --line:#E4E4E7; --white:#FFFFFF;
  --disp:-.02em; --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;color:var(--ink);background:var(--white);line-height:1.55;font-size:16px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:200}
.skip:focus{left:10px}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.stripes{background-image:repeating-linear-gradient(100deg,transparent 0 16px,rgba(255,255,255,.05) 16px 18px)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.eyebrow::before{content:"";width:18px;height:3px;background:var(--red);transform:skewX(-24deg)}
h1,h2,h3,.disp{font-weight:900;letter-spacing:var(--disp);text-transform:uppercase;line-height:1.04}
h2{font-size:clamp(26px,3.6vw,40px);margin:.35em 0 .5em}
h3{font-size:19px}
p.lead{font-size:18px;color:var(--ink-soft);max-width:62ch}
.btn{display:inline-block;background:var(--red);color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:14px;padding:13px 26px;clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%);transition:background .15s, transform .15s}
.btn:hover{background:var(--red-deep);transform:translateY(-1px)}
.btn.ghost{background:var(--ink);}
.btn.ghost:hover{background:#000}
.btn.inv{background:#fff;color:var(--red)}
.btn.inv:hover{background:#f3f3f3;color:var(--red-deep)}

/* top utility bar */
.topbar{background:var(--ink);color:#cfcfd4;font-size:12px}
.topbar .container{display:flex;justify-content:space-between;align-items:center;height:34px}
.topbar b{color:#fff;font-weight:700}
.topbar a{color:#fff;font-weight:700}
.topbar .join{color:var(--red-bright)}

/* header */
header.site{position:sticky;top:0;z-index:100;background:var(--red);box-shadow:0 2px 14px rgba(0,0,0,.18)}
.navwrap{display:flex;align-items:center;gap:26px;height:64px}
.crest{display:flex;align-items:center;gap:12px;color:#fff}
.crest img{height:52px;width:auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.crest .name{font-weight:900;text-transform:uppercase;letter-spacing:.02em;font-size:19px;line-height:1}
.crest .name small{display:block;font-weight:700;font-size:9.5px;letter-spacing:.34em;opacity:.85;margin-top:3px}
nav.main{margin-left:auto}
nav.main ul{display:flex;list-style:none;gap:2px}
nav.main a{display:block;color:#fff;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.05em;padding:10px 13px;border-bottom:3px solid transparent}
nav.main a:hover{background:rgba(0,0,0,.14)}
nav.main a.active{border-bottom-color:#fff;background:rgba(0,0,0,.14)}
.navtoggle{display:none;margin-left:auto;background:none;border:2px solid #fff;color:#fff;font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;cursor:pointer}

/* hero */
.hero{position:relative;background:linear-gradient(115deg,#1a0000 0%,var(--red-deep) 46%,var(--red) 78%);color:#fff;overflow:hidden}
.hero .container{position:relative;padding-top:76px;padding-bottom:120px;z-index:2}
.hero .watermark{position:absolute;right:-70px;top:-60px;height:150%;opacity:.10;z-index:1}
.hero h1{font-size:clamp(38px,6vw,72px);max-width:14ch}
.hero .tag{margin-top:18px;font-size:18px;max-width:56ch;color:#ffd9d9}
.hero .cta{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.hero.slim .container{padding-top:56px;padding-bottom:64px}
.crumb{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#ffbcbc;margin-bottom:14px}

/* next match card */
.matchcard{position:relative;z-index:5;margin-top:-70px}
.matchcard .card{background:#fff;border-top:4px solid var(--red);box-shadow:0 18px 40px rgba(18,18,18,.14);display:grid;grid-template-columns:1fr auto 1fr auto;gap:18px;align-items:center;padding:22px 26px}
.badge{width:54px;height:54px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:15px;letter-spacing:.02em;flex:none}
.badge.red{background:var(--red)}
.team{display:flex;align-items:center;gap:14px;font-weight:900;text-transform:uppercase;font-size:17px}
.team.right{justify-content:flex-end;text-align:right}
.kick{ text-align:center}
.kick .vs{font-weight:900;font-size:22px;color:var(--red)}
.kick .meta{font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-top:2px}
.count{display:flex;gap:10px;justify-content:center;margin-top:8px}
.count div{background:var(--wash);padding:6px 8px;min-width:52px;text-align:center}
.count b{display:block;font-size:20px;font-weight:900;color:var(--ink)}
.count span{font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);font-weight:700}
.matchcard .buy{justify-self:end}
@media(max-width:860px){.matchcard .card{grid-template-columns:1fr;text-align:center}.team,.team.right{justify-content:center;text-align:center}.matchcard .buy{justify-self:center}}

/* sections */
section.block{padding:64px 0}
section.block.wash{background:var(--wash)}
.sechead{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:28px}
.sechead .more{font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--red);white-space:nowrap}
.sechead .more:hover{color:var(--red-deep)}

/* news grid */
.newsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.newsgrid .feature{grid-column:span 2;grid-row:span 2}
article.news{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
article.news:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(18,18,18,.10)}
.thumb{aspect-ratio:16/9;background:linear-gradient(120deg,var(--ink) 0%,#2c0000 55%,var(--red-deep) 100%);position:relative;overflow:hidden}
.thumb::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(100deg,transparent 0 16px,rgba(255,255,255,.05) 16px 18px)}
.thumb .th-crest{position:absolute;right:12px;bottom:10px;height:56%;opacity:.28}
.thumb .th-word{position:absolute;left:16px;bottom:12px;color:#fff;font-weight:900;text-transform:uppercase;letter-spacing:.02em;font-size:20px;line-height:1.05;max-width:80%;z-index:2}
.feature .thumb .th-word{font-size:30px}
.cat{position:absolute;top:0;left:0;background:var(--red);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%);z-index:3}
.cat.k-academy{background:#0F7A3D}.cat.k-women{background:#7A0F5E}.cat.k-club{background:var(--ink)}
article.news .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
article.news h3{font-size:17px;letter-spacing:-.01em}
.feature h3{font-size:22px}
article.news p{color:var(--mut);font-size:14px}
article.news .date{margin-top:auto;font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);font-weight:700}
@media(max-width:900px){.newsgrid{grid-template-columns:1fr 1fr}.newsgrid .feature{grid-column:span 2;grid-row:auto}}
@media(max-width:600px){.newsgrid{grid-template-columns:1fr}.newsgrid .feature{grid-column:auto}}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.pillar{background:#fff;border-top:4px solid var(--red);padding:20px 18px;border:1px solid var(--line);border-top:4px solid var(--red)}
.pillar .num{font-weight:900;color:var(--red);font-size:13px;letter-spacing:.12em}
.pillar h3{font-size:15px;margin:8px 0 8px}
.pillar p{font-size:13px;color:var(--mut)}
@media(max-width:980px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pillars{grid-template-columns:1fr}}

/* table widget & fixtures */
table.league{width:100%;border-collapse:collapse;background:#fff;font-size:14px}
table.league th{background:var(--ink);color:#fff;text-transform:uppercase;font-size:11px;letter-spacing:.08em;padding:10px 12px;text-align:left}
table.league td{padding:11px 12px;border-bottom:1px solid var(--line)}
table.league tr.us{background:#FFF0F0;border-left:4px solid var(--red);font-weight:800}
table.league td.num,table.league th.num{text-align:center;width:44px}
.fixrow{display:grid;grid-template-columns:110px 1fr auto 1fr 150px;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);padding:14px 18px;margin-bottom:10px}
.fixrow .comp{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.fixrow .score{font-weight:900;font-size:18px;text-align:center;min-width:70px}
.fixrow .score.win{color:var(--red)}
.fixrow .when{text-align:right;font-size:13px;color:var(--mut);font-weight:700}
.fixrow .t{display:flex;align-items:center;gap:10px;font-weight:800;text-transform:uppercase;font-size:14px}
.fixrow .t.right{justify-content:flex-end;text-align:right}
.fixrow .badge{width:38px;height:38px;font-size:11px}
@media(max-width:820px){.fixrow{grid-template-columns:1fr auto 1fr;grid-template-areas:"a s b" "c c c"}.fixrow .comp,.fixrow .when{display:none}}

/* promo bands */
.band{background:var(--red);color:#fff;position:relative;overflow:hidden}
.band.dark{background:var(--ink)}
.band .container{position:relative;z-index:2;padding-top:56px;padding-bottom:56px;display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:center}
.band h2{color:#fff}
.band p{color:#ffdada;max-width:56ch}
.band.dark p{color:#c9c9cf}
.band .bignum{font-size:clamp(44px,6vw,76px);font-weight:900;line-height:1;text-align:right}
.band .bignum small{display:block;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:#ffbcbc;margin-top:8px}
.band.dark .bignum small{color:#8f8f97}
@media(max-width:820px){.band .container{grid-template-columns:1fr}.band .bignum{text-align:left}}

/* tiers */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tier{background:#fff;border:1px solid var(--line);padding:26px 24px;display:flex;flex-direction:column;gap:12px}
.tier.hot{border-top:5px solid var(--red);box-shadow:0 16px 34px rgba(18,18,18,.10)}
.tier .price{font-size:34px;font-weight:900}
.tier .price small{font-size:13px;color:var(--mut);font-weight:700}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--ink-soft)}
.tier ul li::before{content:"";display:inline-block;width:10px;height:3px;background:var(--red);margin-right:9px;vertical-align:middle;transform:skewX(-24deg)}
.tier .btn{margin-top:auto;text-align:center}
@media(max-width:880px){.tiers{grid-template-columns:1fr}}

/* squad */
.squadgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.player{background:#fff;border:1px solid var(--line);overflow:hidden;transition:transform .15s,box-shadow .15s}
.player:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(18,18,18,.10)}
.player .ph{aspect-ratio:1/1.05;background:linear-gradient(150deg,var(--ink),#3d0000 70%,var(--red-deep));position:relative}
.player .ph::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(100deg,transparent 0 14px,rgba(255,255,255,.05) 14px 16px)}
.player .no{position:absolute;top:8px;right:12px;color:#fff;font-weight:900;font-size:34px;opacity:.9}
.player .sil{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:64%;opacity:.35}
.player .info{padding:12px 14px}
.player .info b{display:block;font-weight:900;text-transform:uppercase;font-size:14.5px}
.player .info span{font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.posh{margin:34px 0 14px}
@media(max-width:960px){.squadgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.squadgrid{grid-template-columns:repeat(2,1fr)}}

/* tabs & filters */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.tabs button{background:#fff;border:1px solid var(--line);font-weight:800;text-transform:uppercase;font-size:12.5px;letter-spacing:.06em;padding:10px 18px;cursor:pointer;color:var(--ink-soft)}
.tabs button.on{background:var(--red);border-color:var(--red);color:#fff}
[hidden]{display:none !important}

/* two-col info */
.twocol{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:start}
@media(max-width:860px){.twocol{grid-template-columns:1fr}}
.statwall{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stat{background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);padding:16px}
.stat b{display:block;font-size:26px;font-weight:900}
.stat span{font-size:12.5px;color:var(--mut)}
.checklist{list-style:none;display:flex;flex-direction:column;gap:12px}
.checklist li{background:#fff;border:1px solid var(--line);padding:14px 16px;font-size:14.5px}
.checklist li b{text-transform:uppercase;font-size:13px;letter-spacing:.04em}
.checklist li::before{content:"";display:inline-block;width:12px;height:4px;background:var(--red);margin-right:10px;transform:skewX(-24deg);vertical-align:middle}

/* forms */
form.std{display:grid;gap:14px;max-width:560px}
form.std label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
form.std input,form.std select,form.std textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);font:inherit;background:#fff}
form.std input:focus,form.std select:focus,form.std textarea:focus{border-color:var(--red);outline:none}
.newsletter{display:flex;gap:10px;max-width:520px}
.newsletter input{flex:1;padding:13px 14px;border:1.5px solid rgba(255,255,255,.4);background:rgba(0,0,0,.18);color:#fff;font:inherit}
.newsletter input::placeholder{color:#ffc7c7}

/* footer */
footer.site{background:var(--ink);color:#b9b9c0;margin-top:0}
footer .top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;padding:54px 0 38px}
footer h4{color:#fff;text-transform:uppercase;font-size:13px;letter-spacing:.1em;margin-bottom:14px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:14px}
footer a:hover{color:#fff}
footer .legal{border-top:1px solid #2a2a2e;padding:18px 0;font-size:12px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
footer .crest2{display:flex;gap:12px;align-items:center;margin-bottom:14px}
footer .crest2 img{height:56px}
footer .crest2 b{color:#fff;text-transform:uppercase;font-weight:900;font-size:17px}
.socials{display:flex;gap:10px;margin-top:14px}
.socials a{width:34px;height:34px;border:1.5px solid #3a3a3e;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12px;color:#fff}
.socials a:hover{border-color:var(--red);color:var(--red-bright)}
@media(max-width:820px){footer .top{grid-template-columns:1fr 1fr}}

@media(max-width:960px){
  nav.main{position:fixed;inset:98px 0 auto 0;background:var(--red-deep);display:none;padding:8px 0 16px;box-shadow:0 20px 30px rgba(0,0,0,.3)}
  nav.main.open{display:block}
  nav.main ul{flex-direction:column;padding:0 22px}
  .navtoggle{display:block}
}
@media(prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}html{scroll-behavior:auto}}