:root { --navy:#0b1f3a; --blue:#174ea6; --blue-deep:#103b7c; --gold:#c99a2e; --gold-soft:#fff7dd; --ink:#182230; --muted:#667085; --line:#dce3eb; --page:#f5f8fb; --white:#fff; --success:#067647; --danger:#b42318; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--page); color:var(--ink); font:16px/1.65 system-ui,-apple-system,"Segoe UI",sans-serif; margin:0; }
button,input,select,textarea { font:inherit; }
a { color:var(--blue); }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid #c99a2e88; outline-offset:2px; }
.skip-link { background:var(--gold); color:var(--navy); left:1rem; padding:.5rem .8rem; position:fixed; top:-5rem; z-index:20; }
.skip-link:focus { top:1rem; }
.site-header { background:var(--navy); border-bottom:3px solid var(--gold); color:#fff; }
.nav-shell { align-items:center; display:flex; gap:1.5rem; justify-content:space-between; margin:auto; max-width:1180px; min-height:4.5rem; padding:.7rem 1.25rem; }
.brand { color:#fff; font-size:1.22rem; font-weight:850; letter-spacing:.02em; text-decoration:none; }
.brand-mark { color:var(--gold); margin-right:.35rem; }
.brand-logo { display:block; height:auto; max-height:3rem; max-width:min(13rem,45vw); object-fit:contain; width:auto; }
.site-nav { align-items:center; display:flex; flex-wrap:wrap; gap:.15rem; justify-content:flex-end; }
.site-nav a,.site-nav span { border-radius:.35rem; color:#dce7f5; font-size:.91rem; padding:.45rem .65rem; text-decoration:none; }
.site-nav a:hover,.site-nav a.active { background:#ffffff15; color:#fff; }
.site-nav span { opacity:.48; }
.container { margin:auto; max-width:1180px; padding:3rem 1.25rem; }
.narrow { max-width:780px; }
.hero { background:var(--navy); color:#fff; overflow:hidden; position:relative; }
.hero::after { border:1px solid #c99a2e35; border-radius:50%; content:""; height:25rem; position:absolute; right:-10rem; top:-13rem; width:25rem; }
.hero .container { padding-bottom:5rem; padding-top:5rem; position:relative; z-index:1; }
.hero h1 { font-size:clamp(2.25rem,6vw,4rem); letter-spacing:-.035em; line-height:1.05; margin:.45rem 0 1.2rem; max-width:800px; }
.hero-copy { color:#cbd8e8; font-size:clamp(1.05rem,2vw,1.25rem); max-width:680px; }
.eyebrow { color:var(--gold); font-size:.77rem; font-weight:850; letter-spacing:.13em; margin:0; text-transform:uppercase; }
.button-row { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.7rem; }
.button { border-radius:.45rem; display:inline-block; font-weight:750; padding:.7rem 1rem; text-decoration:none; }
.button-primary { background:var(--gold); color:var(--navy); }
.button-secondary { background:#fff; border:1px solid var(--line); color:var(--navy); }
.hero .button-secondary { background:transparent; border-color:#ffffff55; color:#fff; }
.section-heading { align-items:end; display:flex; gap:1rem; justify-content:space-between; margin-bottom:1.4rem; }
.section-heading h1,.section-heading h2 { letter-spacing:-.02em; line-height:1.2; margin:.25rem 0 0; }
.section-heading h1 { font-size:clamp(2rem,5vw,3.2rem); }
.section-heading h2 { font-size:clamp(1.5rem,3vw,2.2rem); }
.section-heading p { margin-bottom:0; }
.section-alt { background:#eaf0f7; border-block:1px solid var(--line); }
.card-grid { display:grid; gap:1rem; grid-template-columns:repeat(3,minmax(0,1fr)); }
.prediction-card { background:#fff; border:1px solid var(--line); border-radius:.75rem; box-shadow:0 3px 12px #10284b0a; display:flex; flex-direction:column; min-width:0; padding:1.15rem; }
.prediction-card.featured-card { border-top:4px solid var(--gold); }
.card-top { align-items:center; display:flex; gap:.5rem; justify-content:space-between; }
.competition { color:var(--blue-deep); font-size:.76rem; font-weight:800; letter-spacing:.05em; margin:0; text-transform:uppercase; }
.featured-label { color:#855d09; font-size:.74rem; font-weight:800; }
.prediction-card h2,.prediction-card h3 { font-size:1.15rem; line-height:1.35; margin:.8rem 0 .3rem; }
.prediction-card h2 a,.prediction-card h3 a { color:var(--navy); text-decoration:none; }
.match-time { color:var(--muted); font-size:.84rem; margin:0 0 .8rem; }
.pick { background:#f1f5fa; border-left:3px solid var(--blue); border-radius:.3rem; margin:.2rem 0 .8rem; padding:.65rem .75rem; }
.pick small { color:var(--muted); display:block; }
.pick strong { display:block; }
.odds-confidence { color:var(--muted); font-size:.84rem; margin:.4rem 0; }
.excerpt { color:#475467; font-size:.92rem; }
.card-footer { align-items:center; display:flex; gap:.5rem; justify-content:space-between; margin-top:auto; padding-top:.8rem; }
.text-link { font-weight:750; text-decoration:none; }
.badge { border:1px solid currentColor; border-radius:999px; display:inline-block; font-size:.72rem; font-weight:800; padding:.15rem .5rem; text-transform:uppercase; }
.badge-pending { color:#475467; }
.badge-won { color:var(--success); }
.badge-lost,.badge-cancelled { color:var(--danger); }
.badge-void { color:#855d09; }
.empty-state { background:#fff; border:1px dashed #aeb9c7; border-radius:.75rem; padding:2.5rem 1.25rem; text-align:center; }
.empty-state h2 { margin-top:0; }
.settled-list { display:grid; gap:.65rem; }
.settled-row { align-items:center; background:#fff; border:1px solid var(--line); border-radius:.6rem; display:grid; gap:1rem; grid-template-columns:1.2fr .8fr .6fr auto; padding:.8rem 1rem; text-decoration:none; }
.settled-row:hover { border-color:#9eb3ca; }
.settled-row strong { color:var(--navy); }
.settled-row span { color:var(--ink); }
.score { font-size:1.1rem; font-weight:850; white-space:nowrap; }
.method-grid { display:grid; gap:2rem; grid-template-columns:1.1fr .9fr; }
.method-list { display:grid; gap:.8rem; grid-template-columns:repeat(2,1fr); list-style:none; margin:0; padding:0; }
.method-list li { background:#fff; border:1px solid var(--line); border-radius:.55rem; font-weight:650; padding:.8rem; }
.notice { background:var(--gold-soft); border:1px solid #ead28e; border-radius:.6rem; color:#62480c; padding:1rem; }
.page-intro { background:#eaf0f7; border-bottom:1px solid var(--line); }
.page-intro .container { padding-bottom:2.5rem; padding-top:2.5rem; }
.page-intro h1 { font-size:clamp(2rem,5vw,3.15rem); line-height:1.15; margin:.3rem 0 .7rem; }
.page-intro p:last-child { color:#526174; max-width:720px; }
.filters { align-items:end; background:#fff; border:1px solid var(--line); border-radius:.7rem; display:grid; gap:1rem; grid-template-columns:repeat(4,1fr); margin-bottom:1.3rem; padding:1rem; }
.field label { display:block; font-size:.84rem; font-weight:750; margin-bottom:.3rem; }
.field input,.field select,.field textarea { background:#fff; border:1px solid #aeb9c7; border-radius:.4rem; min-height:2.6rem; padding:.55rem .65rem; width:100%; }
.field textarea { resize:vertical; }
.field-error { color:var(--danger); display:block; font-size:.85rem; margin-top:.3rem; }
.contact-form { background:#fff; border:1px solid var(--line); border-radius:.75rem; display:grid; gap:1rem; grid-template-columns:repeat(2,minmax(0,1fr)); padding:clamp(1rem,4vw,2rem); }
.contact-form .field-full,.contact-form .button { grid-column:1/-1; }
.contact-form .button { border:0; justify-self:start; }
.form-notice { border-radius:.55rem; margin-bottom:1rem; padding:.85rem 1rem; }
.form-success { background:#ecfdf3; border:1px solid #abefc6; color:var(--success); }
.form-error { background:#fef3f2; border:1px solid #fecdca; color:var(--danger); }
.honeypot { height:1px; left:-10000px; overflow:hidden; position:absolute; top:auto; width:1px; }
.filter-actions { display:flex; gap:.45rem; }
.filter-actions button { border:0; cursor:pointer; }
.history-list { display:grid; gap:.8rem; }
.history-card { align-items:center; background:#fff; border:1px solid var(--line); border-radius:.65rem; display:grid; gap:1rem; grid-template-columns:1.5fr .75fr 1fr .6fr auto; padding:1rem; }
.history-card h2 { font-size:1rem; margin:0; }
.history-card p { margin:.15rem 0 0; }
.pagination { display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin-top:1.5rem; }
.pagination a,.pagination span { background:#fff; border:1px solid var(--line); border-radius:.35rem; padding:.4rem .65rem; text-decoration:none; }
.pagination .current { background:var(--navy); color:#fff; }
.breadcrumbs { color:var(--muted); font-size:.85rem; margin-bottom:1.3rem; }
.breadcrumbs a { color:var(--muted); }
.prediction-article { background:#fff; border:1px solid var(--line); border-radius:.8rem; padding:clamp(1.2rem,4vw,2.4rem); }
.prediction-article h1 { font-size:clamp(2rem,5vw,3.2rem); line-height:1.1; margin:.35rem 0 .8rem; }
.fixture-meta { color:var(--muted); }
.main-pick { background:var(--navy); border-left:5px solid var(--gold); border-radius:.65rem; color:#fff; margin:1.5rem 0; padding:1.2rem; }
.main-pick p { color:#cbd8e8; margin:0; }
.main-pick strong { display:block; font-size:1.45rem; margin:.15rem 0; }
.scoreboard { background:#eaf0f7; border-radius:.6rem; margin:1.4rem 0; padding:1rem; text-align:center; }
.scoreboard strong { display:block; font-size:2rem; }
.analysis { font-size:1.02rem; max-width:780px; }
.analysis p { white-space:normal; }
.details-grid { display:grid; gap:1rem; grid-template-columns:repeat(3,1fr); }
.detail { background:#f6f8fb; border-radius:.5rem; padding:.8rem; }
.detail small { color:var(--muted); display:block; }
.angles { display:grid; gap:.6rem; list-style:none; padding:0; }
.angle { align-items:center; background:#f6f8fb; border:1px solid var(--line); border-radius:.5rem; display:grid; gap:.8rem; grid-template-columns:1fr 2fr auto auto; padding:.75rem; }
.article-links { border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem; padding-top:1rem; }
.channel-cta { align-items:center; background:linear-gradient(135deg,var(--navy),var(--blue-deep)); border-left:5px solid var(--gold); border-radius:.65rem; color:#fff; display:flex; gap:1.25rem; justify-content:space-between; margin-top:2rem; padding:1.2rem; }
.channel-cta h2 { font-size:1.25rem; margin:0 0 .2rem; }
.channel-cta p { color:#dce7f5; margin:0; }
.button-whatsapp { background:var(--gold); color:var(--navy); flex:0 0 auto; text-align:center; }
.recent-links { display:grid; gap:.5rem; list-style:none; padding:0; }
.recent-links a { background:#fff; border:1px solid var(--line); border-radius:.4rem; display:block; padding:.6rem .8rem; text-decoration:none; }
.article-grid { display:grid; gap:1.1rem; grid-template-columns:repeat(3,minmax(0,1fr)); }
.article-card { background:#fff; border:1px solid var(--line); border-radius:.75rem; display:flex; flex-direction:column; overflow:hidden; }
.article-card-image { aspect-ratio:16/9; background:#eaf0f7; object-fit:cover; width:100%; }
.article-card-content { display:flex; flex:1; flex-direction:column; padding:1.1rem; }
.article-card h2,.article-card h3 { font-size:1.18rem; line-height:1.35; margin:.5rem 0; }
.article-card h2 a,.article-card h3 a { color:var(--navy); text-decoration:none; }
.article-meta { color:var(--muted); font-size:.82rem; }
.article-summary { color:#475467; }
.article-card .text-link { margin-top:auto; }
.blog-article { background:#fff; border:1px solid var(--line); border-radius:.8rem; margin:auto; max-width:850px; overflow:hidden; }
.blog-article-cover { aspect-ratio:16/8; object-fit:cover; width:100%; }
.blog-article-inner { padding:clamp(1.2rem,5vw,3rem); }
.blog-article h1 { font-size:clamp(2rem,5vw,3.3rem); letter-spacing:-.03em; line-height:1.1; margin:.45rem 0 .8rem; }
.blog-deck { color:#475467; font-size:1.08rem; }
.article-body { font-size:1.04rem; line-height:1.8; margin-top:2rem; }
.article-body h2 { color:var(--navy); font-size:1.65rem; margin:2.2rem 0 .6rem; }
.article-body h3 { color:var(--navy); font-size:1.25rem; margin:1.7rem 0 .5rem; }
.article-body ul { padding-left:1.3rem; }
.article-body a { overflow-wrap:anywhere; }
.category-link { font-weight:750; text-decoration:none; }
.prose h2 { color:var(--navy); margin-top:2rem; }
.site-footer { background:var(--navy); color:#cbd8e8; margin-top:2rem; }
.footer-grid { display:grid; gap:2rem; grid-template-columns:1fr 2fr; padding-bottom:2rem; padding-top:2.5rem; }
.footer-links { display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; justify-content:flex-end; }
.footer-links a { color:#e6edf6; text-decoration:none; }
.footer-links span { color:#7f91a8; }
.footer-logo { max-height:3.5rem; }
.footer-bottom { border-top:1px solid #ffffff1f; font-size:.82rem; padding:1rem 1.25rem; text-align:center; }
@media (max-width:900px) { .card-grid,.article-grid { grid-template-columns:repeat(2,1fr); } .filters { grid-template-columns:repeat(2,1fr); } .history-card { grid-template-columns:1.4fr .8fr 1fr auto; } .history-card .history-date { display:none; } .details-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:650px) { .nav-shell { align-items:flex-start; flex-direction:column; gap:.35rem; } .site-nav { justify-content:flex-start; margin-inline:-.35rem; } .container { padding:2.2rem .9rem; } .hero .container { padding-block:3.6rem; } .section-heading { align-items:flex-start; flex-direction:column; } .card-grid,.article-grid,.method-grid,.method-list,.filters,.contact-form { grid-template-columns:1fr; } .settled-row { grid-template-columns:1fr auto; } .settled-row .settled-pick { grid-column:1/-1; grid-row:2; } .history-card { align-items:start; grid-template-columns:1fr auto; } .history-card .history-pick,.history-card .history-date { grid-column:1/-1; } .details-grid { grid-template-columns:1fr; } .angle { grid-template-columns:1fr auto; } .angle .angle-selection { grid-column:1/-1; grid-row:2; } .channel-cta { align-items:flex-start; flex-direction:column; } .button-whatsapp { width:100%; } .footer-grid { grid-template-columns:1fr; } .footer-links { justify-content:flex-start; } }