/* Plain CSS replacement (no Tailwind) */
:root {
  --color-bg: #f9f9fa;
  --color-surface: #ffffff;
  --color-border: #e2e5e9;
  --color-border-dark: #d0d4d9;
  --color-text: #1a1d21;
  --color-text-soft: #5c6470;
  --color-accent: #10b981;
  --color-accent-alt: #059669;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px -2px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.06);
  --gradient-accent: linear-gradient(135deg,var(--color-accent) 0%, var(--color-accent-alt) 100%);
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
* { box-sizing:border-box; }
html,body { height:100%; }
body { margin:0; background:var(--color-bg); color:var(--color-text); -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { color:var(--color-accent); text-decoration:none; }
a:hover { text-decoration:underline; }

/* Layout */
.header { position:sticky; top:0; z-index:40; background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(16px); border-bottom:1px solid var(--color-border); }
.nav-bar { max-width:1200px; margin:0 auto; padding:0 1.25rem; height:64px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:.6rem; font-weight:600; font-size:1.05rem; color:var(--color-text); text-decoration:none; }
.brand-badge { width:40px; height:40px; display:grid; place-items:center; font-weight:700; font-size:.85rem; color:#fff; background:var(--gradient-accent); border-radius:12px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 4px 10px -3px rgba(0,0,0,.25); }
.nav-links { display:flex; gap:.35rem; align-items:center; }
.nav-links a { position:relative; padding:.55rem .85rem; border-radius:8px; font-size:.85rem; font-weight:500; color:var(--color-text-soft); text-decoration:none; line-height:1.1; transition:.25s; }
.nav-links a:hover { color:var(--color-text); background:rgba(0,0,0,.04); }
.nav-links a.active { color:var(--color-accent); background:rgba(234,106,9,.1); }
.nav-links a.active::after { content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px; border-radius:1px; background:var(--color-accent); }
.nav-toggle { display:none; width:44px;height:44px; border:1px solid var(--color-border); background:#fff; border-radius:12px; align-items:center; justify-content:center; flex-direction:column; gap:5px; cursor:pointer; transition:.25s; }
.nav-toggle span { width:20px; height:2px; background:var(--color-text); border-radius:2px; transition:.35s; }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-panel { display:none; border-top:1px solid var(--color-border); background:#fff; }
.mobile-links { display:flex; flex-direction:column; padding:.75rem .75rem 1rem; gap:.3rem; }
.mobile-links a { padding:.65rem .85rem; border-radius:8px; font-size:.9rem; font-weight:500; color:var(--color-text-soft); text-decoration:none; }
.mobile-links a:hover { background:rgba(0,0,0,.04); color:var(--color-text); }
.mobile-links a.active { background:rgba(234,106,9,.12); color:var(--color-accent); }

main { width:100%; max-width:1200px; margin:0 auto; padding:2.25rem 1.25rem 3.5rem; }

/* Hero */
.hero { position:relative; overflow:hidden; background:linear-gradient(135deg,#10b981,#059669 35%,#047857); color:#fff; padding:4.5rem clamp(1.25rem,4vw,3rem) 4.75rem; border-radius:32px; box-shadow:var(--shadow-md); margin-bottom:3rem; }
.hero h1 { margin:0 0 1.25rem; font-size:clamp(2.2rem,5.2vw,3.4rem); line-height:1.05; letter-spacing:-.5px; text-wrap:balance; }
.hero p { margin:0 0 1.75rem; font-size:clamp(1.05rem,2vw,1.35rem); max-width:680px; font-weight:400; color:rgba(255,255,255,.92); }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; }

/* Buttons */
.btn { --btn-bg:#111; --btn-color:#fff; --btn-bg-hover:#222; display:inline-flex; align-items:center; gap:.55rem; padding:.85rem 1.35rem; font-size:.9rem; font-weight:600; border-radius:12px; background:var(--btn-bg); color:var(--btn-color); border:1px solid transparent; text-decoration:none; cursor:pointer; line-height:1.1; transition:.3s; box-shadow:0 2px 4px -2px rgba(0,0,0,.3),0 4px 12px -4px rgba(0,0,0,.35); }
.btn:hover { background:var(--btn-bg-hover); }
.btn-outline { --btn-bg:rgba(255,255,255,.15); --btn-bg-hover:rgba(255,255,255,.25); --btn-color:#fff; border:1px solid rgba(255,255,255,.35); box-shadow:none; }
.btn-accent { --btn-bg:var(--color-accent); --btn-bg-hover:#10b981; --btn-color:#fff; box-shadow:0 4px 12px -3px rgba(234,106,9,.45); }

/* Cards / Grids */
.grid-3 { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); margin-bottom:3rem; }
.grid-2 { display:grid; gap:2rem; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); }
.grid-auto { display:grid; gap:1.25rem; }
@media (min-width:680px){ .grid-auto.cards-4 { grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .grid-auto.cards-4 { grid-template-columns:repeat(4,1fr); } }
.card { position:relative; background:var(--color-surface); border:1px solid var(--color-border); border-radius:20px; padding:1.25rem 1.15rem 1.35rem; display:flex; flex-direction:column; gap:.55rem; box-shadow:var(--shadow-sm); transition:.4s; }
.card:hover { border-color:var(--color-border-dark); box-shadow:var(--shadow-md); transform:translateY(-3px); }
.card h2 { font-size:1.05rem; margin:.1rem 0 .25rem; line-height:1.2; }
.card p { font-size:.84rem; line-height:1.45; color:var(--color-text-soft); flex:1; margin:0; }
.card a.more { font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.7px; margin-top:.8rem; text-decoration:none; color:var(--color-accent); }
.card a.more:hover { text-decoration:underline; }

/* Section */
.section-header { margin:0 0 .65rem; font-size:2.15rem; line-height:1.07; letter-spacing:-.5px; }
.section-lead { margin:0 0 2rem; color:var(--color-text-soft); max-width:720px; line-height:1.5; }

/* Sponsors & CTA blocks */
.surface-block { background:var(--color-surface); border:1px solid var(--color-border); border-radius:28px; padding:2rem 2.25rem 2.4rem; position:relative; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:1.2rem; }
.surface-block.dark { background:#14171b; color:#fff; border-color:#1f252b; box-shadow:0 2px 4px -1px rgba(0,0,0,.5),0 12px 36px -8px rgba(0,0,0,.55); }
.surface-block.dark p { color:rgba(255,255,255,.78); }
.logo-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); }
.logo-cell { height:72px; background:linear-gradient(120deg,#eef1f4,#fafbfc); border:1px dashed var(--color-border-dark); border-radius:18px; display:grid; place-items:center; font-size:.65rem; font-weight:600; letter-spacing:.8px; text-transform:uppercase; color:var(--color-text-soft); }
.dark .logo-cell { background:#1d242b; border-color:#2f3740; color:#d0d4d9; }

/* Tables */
.table-wrap { overflow-x:auto; border:1px solid var(--color-border); border-radius:18px; background:var(--color-surface); box-shadow:var(--shadow-sm); }
.table { width:100%; border-collapse:collapse; font-size:.85rem; }
.table th { background:#f2f4f6; font-weight:600; text-align:left; padding:.9rem .9rem; font-size:.7rem; letter-spacing:.8px; text-transform:uppercase; border-bottom:1px solid var(--color-border); }
.table td { padding:.85rem .9rem; border-bottom:1px solid var(--color-border); }
.table tbody tr:last-child td { border-bottom:none; }
.table tbody tr:hover { background:#fafafa; }

/* Results rows */
.result-row { display:flex; flex-direction:column; gap:.85rem; border:1px solid var(--color-border); background:var(--color-surface); padding:1.1rem 1.15rem; border-radius:20px; box-shadow:var(--shadow-sm); }
@media (min-width:680px){ .result-row { flex-direction:row; align-items:center; justify-content:space-between; } }
.badge { display:inline-flex; align-items:center; padding:.35rem .6rem; border-radius:999px; font-size:.65rem; font-weight:600; background:rgba(234,106,9,.12); color:var(--color-accent); letter-spacing:.8px; text-transform:uppercase; }

/* Team cards */
.player-card { position:relative; background:var(--color-surface); border:1px solid var(--color-border); border-radius:22px; overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); transition:.45s; }
.player-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.player-photo { aspect-ratio:4/3; background:linear-gradient(135deg,#e7eaee,#f6f8f9); display:grid; place-items:center; color:#6c747e; font-size:.75rem; letter-spacing:.6px; font-weight:600; }
.player-body { padding:1rem 1.1rem 1.15rem; display:flex; flex-direction:column; gap:.4rem; flex:1; }
.player-body h2 { margin:0; font-size:.95rem; }
.player-number { position:absolute; top:10px; left:10px; background:#111; color:#fff; font-size:.65rem; padding:.35rem .55rem; border-radius:10px; letter-spacing:.8px; font-weight:600; }
.player-grid { display:grid; gap:1.15rem; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); margin-bottom:1rem; }

/* Gallery */
.gallery-grid { display:grid; gap:.9rem; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
.gallery-item { position:relative; background:linear-gradient(125deg,#e4e7ea,#f7f9fa); aspect-ratio:1/1; border:1px solid var(--color-border); border-radius:18px; overflow:hidden; display:grid; place-items:center; font-size:.6rem; font-weight:600; color:#5c6470; letter-spacing:.8px; }
.gallery-item span { position:absolute; inset:0; background:rgba(0,0,0,.58); color:#fff; display:flex; align-items:center; justify-content:center; opacity:0; transition:.4s; font-size:.75rem; }
.gallery-item:hover span { opacity:1; }

/* Sponsor cards */
.sponsor-grid { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.sponsor-card { position:relative; display:flex; flex-direction:column; background:var(--color-surface); border:1px solid var(--color-border); padding:1.15rem 1.15rem 1.35rem; gap:.65rem; border-radius:22px; box-shadow:var(--shadow-sm); transition:.4s; }
.sponsor-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.sponsor-logo { aspect-ratio:4/2; background:linear-gradient(125deg,#e7eaee,#f4f6f8); border:1px dashed var(--color-border-dark); border-radius:16px; display:grid; place-items:center; font-size:.65rem; color:#6a737d; letter-spacing:.7px; font-weight:600; margin-bottom:.5rem; }
.sponsor-card p { font-size:.75rem; line-height:1.45; color:var(--color-text-soft); margin:0; }

/* Contact */
.contact-grid { display:grid; gap:2.25rem; }
@media (min-width:980px){ .contact-grid { grid-template-columns:2fr 1fr; align-items:start; } }
.form { background:var(--color-surface); border:1px solid var(--color-border); border-radius:26px; padding:2rem 2rem 2.4rem; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:1.35rem; }
.form-row { display:grid; gap:1.2rem; }
@media (min-width:640px){ .form-row.two { grid-template-columns:1fr 1fr; } }
.field { display:flex; flex-direction:column; gap:.45rem; font-size:.75rem; font-weight:600; letter-spacing:.8px; text-transform:uppercase; color:var(--color-text-soft); }
.field input, .field textarea { font:inherit; font-size:.85rem; padding:.75rem .85rem; border:1px solid var(--color-border); border-radius:12px; resize:vertical; background:#fff; color:var(--color-text); transition:.25s; }
.field input:focus, .field textarea:focus { outline:2px solid var(--color-accent); outline-offset:2px; }
.note { font-size:.65rem; color:var(--color-text-soft); }
.aside-box { background:var(--color-surface); border:1px solid var(--color-border); padding:1.6rem 1.7rem 1.9rem; border-radius:24px; display:flex; flex-direction:column; gap:.9rem; box-shadow:var(--shadow-sm); }
.aside-accent { background:var(--gradient-accent); color:#fff; border:none; }
.aside-accent h2 { margin:0; font-size:1.05rem; }
.aside-accent p { margin:0; font-size:.85rem; line-height:1.4; }

/* Footer */
.footer { background:#101417; color:#d1d6db; margin-top:3.5rem; border-top:1px solid #1d242b; }
.footer-inner { max-width:1200px; margin:0 auto; padding:3.5rem 1.25rem 3.5rem; display:grid; gap:2.2rem; }
@media (min-width:880px){ .footer-inner { grid-template-columns:repeat(4,1fr); } }
.footer h3, .footer h4 { margin:0 0 .9rem; font-weight:600; letter-spacing:.5px; color:#fff; }
.footer p { margin:0; font-size:.8rem; line-height:1.5; color:#b8bfc6; }
.footer ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.footer a { color:#d1d6db; font-size:.8rem; text-decoration:none; }
.footer a:hover { color:#fff; }
.newsletter { display:flex; flex-direction:column; gap:.65rem; }
.newsletter input { padding:.7rem .85rem; border:1px solid #2c343b; background:#182025; color:#fff; border-radius:10px; font-size:.75rem; }
.newsletter button { padding:.7rem .9rem; border:none; border-radius:10px; background:var(--gradient-accent); color:#fff; font-weight:600; font-size:.75rem; cursor:pointer; }
.footer-bottom { text-align:center; padding:1.5rem 1rem 2.5rem; font-size:.7rem; letter-spacing:.6px; color:#778089; }

/* Utilities */
.hidden { display:none !important; }
.text-center { text-align:center; }
.mt-0 { margin-top:0 !important; }

@media (max-width:860px){
  .nav-links { display:none; }
  .nav-toggle { display:flex; }
  .mobile-panel.open { display:block; }
  .hero { padding:3.75rem 1.35rem 4.25rem; }
  .hero h1 { font-size:clamp(2.05rem,8vw,3.05rem); }
}

/* Added classes from Tailwind -> plain CSS migration (player, gallery, sponsor, contact refinements) */
.player-card-top { position:relative; display:flex; justify-content:space-between; align-items:flex-start; margin:0 0 .75rem; padding:1rem 1.1rem 0; }
.player-number { position:absolute; top:10px; left:10px; background:#111; color:#fff; font-size:.55rem; padding:.4rem .55rem; border-radius:10px; letter-spacing:1px; font-weight:600; }
.role-badge { margin-left:auto; background:var(--color-border-dark); color:var(--color-text-soft); font-size:.55rem; padding:.4rem .55rem; border-radius:10px; font-weight:600; letter-spacing:1px; }
.player-name { font-size:.95rem; font-weight:600; letter-spacing:.5px; margin:.6rem 1.1rem .25rem; }
.player-meta { font-size:.6rem; letter-spacing:1px; font-weight:600; text-transform:uppercase; color:var(--color-text-soft); margin:0 1.1rem 1rem; }
.player-photo { border-radius:14px; }
.player-card-glow { position:absolute; inset:0; background:radial-gradient(circle at 28% 24%, rgba(255,184,72,.22), transparent 70%); opacity:0; transition:.45s; pointer-events:none; }
.player-card:hover .player-card-glow { opacity:1; }

/* Gallery refined */
.gallery-item { display:flex; flex-direction:column; justify-content:flex-end; }
.gallery-img { position:absolute; inset:0; display:grid; place-items:center; font-size:.6rem; font-weight:600; color:#5c6470; letter-spacing:.8px; }
.gallery-caption { position:relative; z-index:2; background:linear-gradient(to top, rgba(17,23,28,.85), rgba(17,23,28,0)); color:#fff; font-size:.65rem; font-weight:500; padding:.65rem .55rem .55rem; opacity:0; transition:.4s; }
.gallery-item:hover .gallery-caption { opacity:1; }

/* Sponsors refined */
.sponsor-grid { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.sponsor-card { align-items:center; text-align:center; padding:1.35rem 1.35rem 1.6rem; gap:.35rem; border-radius:24px; overflow:hidden; }
.sponsor-glow { position:absolute; inset:0; background:radial-gradient(circle at 30% 18%, rgba(255,180,70,.22), transparent 70%); opacity:0; transition:.45s; pointer-events:none; }
.sponsor-card:hover .sponsor-glow { opacity:1; }
.sponsor-logo { width:100%; border-radius:18px; }
.sponsor-name { font-size:.95rem; font-weight:600; letter-spacing:.5px; margin:.2rem 0 .2rem; }
.sponsor-meta { font-size:.6rem; letter-spacing:1px; font-weight:600; text-transform:uppercase; color:var(--color-text-soft); margin:0 0 .4rem; }
.sponsor-link { font-size:.7rem; font-weight:600; letter-spacing:.7px; text-transform:uppercase; color:var(--color-accent); text-decoration:none; }
.sponsor-link:hover { text-decoration:underline; }

/* Contact refined */
.contact-form { display:flex; flex-direction:column; gap:1.25rem; background:var(--color-surface); border:1px solid var(--color-border); padding:1.65rem 1.75rem 1.9rem; border-radius:28px; box-shadow:var(--shadow-sm); }
.field-grid { display:grid; gap:1.1rem; }
@media (min-width:640px){ .field-grid { grid-template-columns:1fr 1fr; } }
.form-footer { display:flex; flex-direction:column; gap:1rem; }
@media (min-width:680px){ .form-footer { flex-direction:row; align-items:center; justify-content:space-between; } }
.small-muted { font-size:.6rem; letter-spacing:1px; font-weight:600; text-transform:uppercase; color:var(--color-text-soft); }
.contact-aside { display:flex; flex-direction:column; gap:1.4rem; }
.aside-box h2 { font-size:1rem; font-weight:600; letter-spacing:.5px; margin:0; }
.aside-text { font-size:.75rem; line-height:1.5; color:var(--color-text-soft); margin:0; }
.aside-links { display:flex; flex-wrap:wrap; gap:.75rem; }
.aside-links a { font-size:.65rem; font-weight:600; letter-spacing:.8px; text-transform:uppercase; color:var(--color-accent); text-decoration:none; }
.aside-links a:hover { text-decoration:underline; }