:root{
  --primary:#49c6ff;
  --primary-strong:#199fe0;
  --bg:#070b10;
  --panel:#0d131b;
  --panel2:#111a24;
  --text:#f7fbff;
  --muted:#a9b5c1;
  --line:#1b2936;
  --radius:20px;
  --shadow:0 24px 70px rgba(0,0,0,.34);
  --font-body:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-heading:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 80% 0%,rgba(73,198,255,.10),transparent 30%),
    linear-gradient(180deg,#060a0f 0%,#070b10 100%);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.5;
}
img{max-width:100%}
button,input,textarea{font:inherit}
.site-shell{max-width:1500px;margin:0 auto;min-height:100vh}
.section-wrap{margin-left:28px;margin-right:28px}

/* Navigation */
.topbar{
  position:sticky;top:0;z-index:50;
  display:grid;grid-template-columns:auto 1fr auto auto;
  align-items:center;gap:24px;
  padding:17px 28px;
  background:rgba(7,11,16,.86);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.05)
}
.brand{font-family:var(--font-heading);font-size:1.42rem;font-weight:900;letter-spacing:.015em;color:var(--text);text-decoration:none}
.brand .accent{color:var(--primary)}
.nav{display:flex;justify-content:center;gap:28px}
.nav a{color:#d8e3ec;text-decoration:none;font-size:.94rem;font-weight:700}
.nav a:hover{color:var(--primary)}
.top-cta,.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:11px;text-decoration:none;font-weight:850;transition:.2s ease}
.top-cta{padding:11px 17px;background:var(--primary);color:#03111a}
.top-cta:hover,.btn-primary:hover{transform:translateY(-1px);filter:brightness(1.08)}
.menu-toggle{display:none;background:none;border:0;color:var(--primary);font-size:1.5rem;cursor:pointer}

/* Hero: photo intentionally overlaps the text zone and is faded into the dark background. */
.hero{
  position:relative;
  min-height:540px;
  margin-top:26px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:26px;
  background:linear-gradient(135deg,#091019 0%,#0a121b 48%,#071019 100%);
  box-shadow:var(--shadow)
}
.hero-copy{
  position:relative;z-index:4;
  width:min(64%,860px);
  min-height:540px;
  padding:62px 54px;
  display:flex;flex-direction:column;justify-content:center
}
.eyebrow{color:var(--primary);font-size:.78rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase;margin-bottom:10px}
.hero h1,.section-title{font-family:var(--font-heading);font-weight:900;letter-spacing:.015em;text-transform:uppercase}
.hero h1{
  font-size:clamp(3rem,4.55vw,4.95rem);
  line-height:.9;
  margin:0 0 16px;
  max-width:none;
  text-wrap:balance
}
.hero h1 .highlight{color:var(--primary)}

@media(min-width:1180px){
  .hero h1{white-space:nowrap;text-wrap:nowrap}
}
.hero-subtitle{font-weight:850;font-size:1.13rem;margin-bottom:14px;max-width:720px}
.hero-description{color:#c6d2dc;font-size:1.02rem;max-width:710px}
.hero-actions{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.btn{padding:13px 18px;border:1px solid #2b4356;color:white;background:#0c151e;cursor:pointer}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#03111a}
.btn-secondary:hover{border-color:var(--primary);color:var(--primary)}
.hero-media{
  position:absolute;z-index:1;
  inset:0 0 0 auto;
  width:64%;
  overflow:hidden;
  background:#081019
}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;will-change:transform}
.hero-media::before{
  content:"";position:absolute;z-index:2;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,
      #091019 0%,
      rgba(9,16,25,.98) 9%,
      rgba(9,16,25,.88) 20%,
      rgba(9,16,25,.62) 32%,
      rgba(9,16,25,.26) 45%,
      rgba(9,16,25,.05) 58%,
      transparent 70%),
    linear-gradient(0deg,rgba(5,9,13,.50) 0%,rgba(5,9,13,.06) 46%,rgba(5,9,13,.12) 100%)
}
.hero-media::after{
  content:"";position:absolute;z-index:2;inset:0;pointer-events:none;
  box-shadow:inset 0 0 90px rgba(5,9,13,.28)
}

.highlights{display:grid;grid-template-columns:repeat(3,1fr);margin-top:16px;border:1px solid var(--line);border-radius:18px;background:#0b1219;overflow:hidden}
.highlight-card{display:flex;align-items:center;gap:16px;padding:24px 26px;border-right:1px solid var(--line)}
.highlight-card:last-child{border-right:0}
.icon{width:31px;height:31px;color:var(--primary);flex:0 0 auto}
.highlight-card strong{display:block;font-size:1.32rem}
.highlight-card span{display:block;color:var(--muted);font-size:.86rem}

/* General sections */
.content-section{padding:84px 0 0}
.section-head{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:end;margin-bottom:30px}
.section-title{font-size:clamp(2.15rem,3.65vw,4.15rem);margin:0;line-height:.94}
.section-intro{color:#c0ccd6;max-width:850px;margin:0}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.timeline-card,.service-card,.project-card,.online-tournament-card,.partner-card,.stat-card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:16px;overflow:hidden}

/* IMPORTANT: every editable photo lives in its own fixed crop viewport. Scaling can never cover text below it. */
/* Keep the generic crop frame relative, but HERO must stay absolutely positioned
   on desktop. The generic .media-frame rule used to override .hero-media and push
   the hero image below the clipped hero container, making it appear blank. */
.media-frame{position:relative;overflow:hidden;background:#09131d;isolation:isolate}
.hero .hero-media.media-frame{
  position:absolute;
  inset:0 0 0 auto;
  width:64%;
}
.media-frame>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;will-change:transform}
.timeline-media{aspect-ratio:3/2}
.project-media{aspect-ratio:1.28/1}
.timeline-body{padding:16px}
.timeline-year{font-size:.82rem;color:var(--primary);font-weight:900}
.timeline-card h3{margin:4px 0 7px;font-size:1.08rem}
.timeline-card p{margin:0;color:var(--muted);font-size:.86rem}

.community-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:18px}
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.service-card{padding:20px}
.service-card .icon{margin-bottom:18px}
.service-card h3{margin:0 0 7px;font-size:1rem}
.service-card p{color:var(--muted);font-size:.84rem;margin:0}
.community-image{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);min-height:430px;background:#09131d}
.community-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;will-change:transform}
.community-image::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,8,12,.72),transparent 58%);pointer-events:none}
.community-caption{position:absolute;z-index:2;left:22px;bottom:20px;font-size:1.5rem;font-weight:900;text-transform:uppercase;max-width:330px;text-shadow:0 3px 18px #000}

.projects-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.project-body{padding:15px}
.project-body h3{margin:0 0 8px;font-size:.96rem}
.project-role{color:var(--muted);font-size:.8rem}

/* Project reach + online tournament additions (v7). Existing component styles remain unchanged. */
.reach-block{margin-top:14px;padding-top:12px;border-top:1px solid rgba(73,198,255,.16);display:grid;gap:7px}
.reach-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end;color:#91a3b2;font-size:.72rem;line-height:1.28}
.reach-row strong{color:#e8f5fc;font-size:.78rem;text-align:right;white-space:nowrap}

.online-tournaments-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.online-tournament-card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:16px;overflow:hidden}
.online-tournament-media{aspect-ratio:1.28/1}
.online-tournament-body{padding:15px}
.online-tournament-body h3{margin:0 0 8px;font-size:.96rem}
.online-tournament-body p{margin:0;color:var(--muted);font-size:.8rem;line-height:1.46;min-height:3.5em}

.partners-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.partner-card{padding:20px}
.partner-logo-wrap{height:86px;display:flex;align-items:center;margin-bottom:16px}
.partner-logo-wrap img{max-width:100%;max-height:74px}
.partner-card h3{margin:0 0 7px}
.partner-card p{color:var(--muted);font-size:.82rem;margin:0}
.partner-note{margin-top:14px;color:#6f8292;font-size:.72rem}

.stats-grid{display:grid;grid-template-columns:1.45fr 1fr 1fr 1fr;gap:12px}
.stat-card{display:flex;align-items:center;gap:20px;padding:24px}
.stat-card img{width:112px;height:58px;object-fit:contain}
.stat-main{font-size:1.25rem;font-weight:900}
.stat-details{color:var(--muted);font-size:.84rem;margin-top:3px}

.brands-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
.brands-copy{padding:34px;border:1px solid var(--line);background:linear-gradient(180deg,#0d151e,#0b1118);border-radius:18px}
.brands-copy .section-title{font-size:clamp(2rem,3vw,3.4rem)}
.brands-copy p{color:#c2ced8;max-width:760px}
.brand-offers{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:24px}
.offer{display:flex;gap:12px;align-items:center;color:#e4edf4;font-weight:700}
.brands-photo{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);min-height:430px;background:#09131d}
.brands-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;will-change:transform}
.brands-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,9,13,.18),transparent 52%);pointer-events:none}

.contact-card{background:linear-gradient(125deg,rgba(73,198,255,.12),rgba(11,18,25,.95) 38%,#091018);border:1px solid rgba(73,198,255,.45);border-radius:20px;padding:38px;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center}
.contact-card .section-title{font-size:clamp(2rem,3.1vw,3.6rem)}
.contact-card p{color:#bcc9d3;max-width:720px}
.contact-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.contact-email{color:var(--primary);font-weight:850;text-decoration:none}
.socials{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.socials a{display:inline-flex;padding:8px 11px;border:1px solid #213344;border-radius:9px;color:#d6e3ec;text-decoration:none;font-size:.82rem;font-weight:750}
.socials a:hover{border-color:var(--primary);color:var(--primary)}
.footer{margin-top:28px;margin-bottom:28px;padding:22px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;color:#7f8f9e;font-size:.82rem}
.footer .brand{font-size:1rem}
.reveal{opacity:0;transform:translateY(12px);transition:.55s ease}
.reveal.visible{opacity:1;transform:none}

/* Tablet */
@media(max-width:1100px){
  .nav{display:none}
  .menu-toggle{display:block}
  .topbar.open .nav{display:flex;position:absolute;top:68px;left:16px;right:16px;flex-direction:column;background:#0d141c;border:1px solid var(--line);border-radius:14px;padding:18px;gap:14px;box-shadow:var(--shadow)}
  .hero-copy{width:70%;padding-left:40px;padding-right:34px}
  .hero-media{width:66%}
  .timeline{grid-template-columns:repeat(2,1fr)}
  .projects-grid{grid-template-columns:repeat(2,1fr)}
  .online-tournaments-grid{grid-template-columns:repeat(2,1fr)}
  .partners-grid{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:1fr}
  .community-layout,.brands-layout{grid-template-columns:1fr}
  .services{grid-template-columns:repeat(2,1fr)}
}

/* Mobile: image first, copy overlaps a soft bottom fade. */
@media(max-width:820px){
  .section-wrap{margin-left:14px;margin-right:14px}
  .topbar{padding:13px 14px;gap:10px}
  .top-cta{display:none}
  .hero{margin-top:14px;display:flex;flex-direction:column;min-height:0;border-radius:20px}
  .hero .hero-media.media-frame{position:relative;inset:auto;width:100%;height:360px;order:1}
  .hero-media::before{background:linear-gradient(0deg,#091019 0%,rgba(9,16,25,.94) 17%,rgba(9,16,25,.62) 35%,rgba(9,16,25,.12) 64%,transparent 78%)}
  .hero-media::after{box-shadow:inset 0 0 55px rgba(5,9,13,.20)}
  .hero-copy{order:2;width:100%;min-height:0;margin-top:-118px;padding:0 24px 34px;z-index:4}
  .hero h1{font-size:clamp(3rem,13vw,4.35rem);max-width:620px;line-height:.9}
  .hero-subtitle{font-size:1rem}
  .hero-description{font-size:.96rem}
  .highlights{grid-template-columns:repeat(3,1fr)}
  .highlight-card{padding:17px 12px;gap:10px;border-right:1px solid var(--line);border-bottom:0;align-items:flex-start}
  .highlight-card:last-child{border-right:0}
  .highlight-card .icon{width:24px;height:24px}
  .highlight-card strong{font-size:1.02rem}
  .highlight-card span{font-size:.71rem;line-height:1.25}
  .content-section{padding-top:60px}
  .section-head{grid-template-columns:1fr;gap:12px}
  .section-title{font-size:clamp(2.35rem,12vw,3.6rem)}
  .community-image{min-height:300px}
  .contact-card{grid-template-columns:1fr;padding:26px}
  .contact-actions{justify-content:flex-start}
  .footer{flex-direction:column}
  .brand-offers{grid-template-columns:1fr}
  .brands-photo{min-height:330px}

  /* horizontal snap keeps photo cards at the intended ratio on phones */
  .timeline,.projects-grid,.online-tournaments-grid{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:min(82vw,340px);
    grid-template-columns:none;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:inline mandatory;
    padding-bottom:8px;
    scrollbar-width:none
  }
  .timeline::-webkit-scrollbar,.projects-grid::-webkit-scrollbar,.online-tournaments-grid::-webkit-scrollbar{display:none}
  .timeline-card,.project-card,.online-tournament-card{scroll-snap-align:start}
  .partners-grid{grid-template-columns:repeat(2,1fr)}
  .services{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:480px){
  .hero .hero-media.media-frame{height:310px}
  .hero-copy{margin-top:-100px;padding-left:18px;padding-right:18px}
  .hero h1{font-size:clamp(2.85rem,14vw,3.85rem)}
  .hero-actions{gap:9px}
  .btn{padding:12px 14px}
  .highlights{border-radius:14px}
  .highlight-card{padding:14px 9px;gap:7px;flex-direction:column}
  .highlight-card strong{font-size:.95rem}
  .partners-grid{grid-template-columns:1fr}
  .services{grid-template-columns:1fr 1fr;gap:9px}
  .service-card{padding:15px}
  .service-card .icon{margin-bottom:10px;width:26px;height:26px}
  .stat-card{padding:19px;gap:14px}
  .stat-card img{width:92px}
}

@media print{
  body{background:#fff;color:#111}
  .topbar,.hero-actions,.menu-toggle,.top-cta,.contact-actions,.socials{display:none!important}
  .site-shell{max-width:none}
  .hero,.timeline-card,.service-card,.project-card,.online-tournament-card,.partner-card,.stat-card,.brands-copy,.brands-photo,.contact-card,.highlights{box-shadow:none;break-inside:avoid}
  .content-section{padding-top:30px}
  .section-wrap{margin:0 16px}
  .footer{color:#444}
  .hero{min-height:430px}
  .hero-copy{min-height:430px;padding:26px}
}