/* ==============================
   DROPOUTS TURF — OFFICIAL SITE
   Dark Arena · Bold · Electric
============================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --g1:#0b2e14;--g2:#145a27;--g3:#1f8a3c;--g4:#2db857;--g5:#48d96e;
  --black:#060c07;--dark:#0d1a10;--card:#0f1f12;--white:#ffffff;
  --off:#e8f5eb;--muted:#6a9c76;--gold:#f5c500;--gold2:#ffdf40;--r:18px;
}
html { scroll-behavior: smooth; }
body { font-family:'Rajdhani',sans-serif; background:var(--black); color:var(--white); overflow-x:hidden; cursor:none; }
a { text-decoration:none; color:inherit; }
img { display:block; max-width:100%; }

/* CURSOR */
.cursor { width:14px;height:14px;background:var(--g4);border-radius:50%;position:fixed;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:transform .1s,background .2s,width .2s,height .2s;mix-blend-mode:screen; }
.cursor-trail { width:36px;height:36px;border:2px solid rgba(45,184,87,.4);border-radius:50%;position:fixed;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:left .12s ease,top .12s ease; }
@media (pointer:coarse) { .cursor,.cursor-trail{display:none} body{cursor:auto} }

/* LAYOUT */
.wrap { max-width:1140px;margin:0 auto;padding:0 28px; }
.eyebrow { font-family:'Teko',sans-serif;font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;color:var(--g4);margin-bottom:10px; }
.eyebrow.center { text-align:center; }
.eyebrow.gold { color:var(--gold); }
h2 { font-family:'Anton',sans-serif;font-size:clamp(2.6rem,5.5vw,4rem);line-height:.95;letter-spacing:.02em;color:var(--dark); }
h2.white { color:var(--white); }
h2.center { text-align:center; }

/* BUTTONS */
.btn-green { display:inline-flex;align-items:center;gap:8px;background:var(--g3);color:var(--white);font-family:'Teko',sans-serif;font-size:1.1rem;letter-spacing:.1em;text-transform:uppercase;padding:14px 32px;border-radius:50px;border:2px solid var(--g4);transition:all .2s; }
.btn-green:hover { background:var(--g4);color:var(--black);transform:translateY(-3px);box-shadow:0 10px 32px rgba(45,184,87,.35); }
.btn-gold { display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:var(--black);font-family:'Teko',sans-serif;font-size:1.15rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:14px 36px;border-radius:50px;transition:all .22s; }
.btn-gold:hover { background:var(--gold2);transform:translateY(-3px);box-shadow:0 10px 32px rgba(245,197,0,.4); }
.btn-green.mt { margin-top:16px; }

/* REVEAL */
.reveal { opacity:0;transform:translateY(36px);transition:opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity:1;transform:translateY(0); }

/* NAVBAR */
#navbar { 
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 32px; /* 👈 changed from 10px */
  background:rgba(6,12,7,0);
  border-bottom:1px solid rgba(45,184,87,0);
  transition:background .4s,border-color .4s,backdrop-filter .4s;
}

#navbar.scrolled { background:rgba(6,12,7,.92);border-color:rgba(45,184,87,.15);backdrop-filter:blur(16px); }
.nav-logo img {
  height: clamp(60px, 6vw, 100px);
  object-fit: contain;
  transition: transform .3s ease, filter .3s ease;
}
.nav-logo img:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 0 12px rgba(45,184,87,.6));
}
.nav-links { list-style:none;display:flex;align-items:center;gap:36px; }
.nav-links a { font-family:'Teko',sans-serif;font-size:1.05rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);transition:color .2s;position:relative; }
.nav-links a::after { content:'';position:absolute;bottom:-3px;left:0;right:0;height:2px;background:var(--g4);transform:scaleX(0);transition:transform .2s; }
.nav-links a:hover { color:var(--white); }
.nav-links a:hover::after { transform:scaleX(1); }
.nav-book { background:var(--g3)!important;color:var(--white)!important;padding:8px 22px;border-radius:50px;border:1px solid var(--g4); }
.nav-book::after { display:none; }
.nav-book:hover { background:var(--g4)!important;color:var(--black)!important; }
.hamburger { display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px; }
.hamburger span { display:block;width:26px;height:2px;background:#fff;border-radius:2px;transition:all .3s; }

/* HERO */
.hero { position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(ellipse at 50% 60%,#124d22 0%,#071610 60%,#030806 100%); }
#particles-canvas { position:absolute;inset:0;pointer-events:none;z-index:0; }
.hero-field-lines { position:absolute;inset:0;z-index:1;background:radial-gradient(circle 120px at 50% 50%,transparent 118px,rgba(255,255,255,.06) 120px,transparent 122px),radial-gradient(circle 55px at 50% 98%,transparent 53px,rgba(255,255,255,.04) 55px,transparent 57px),radial-gradient(circle 55px at 50% 2%,transparent 53px,rgba(255,255,255,.04) 55px,transparent 57px),linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.07) 50%,transparent 50.2%),repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 8%,transparent 8% 16%); }
.hero-center-circle { position:absolute;width:12px;height:12px;background:rgba(255,255,255,.25);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;box-shadow:0 0 20px rgba(45,184,87,.6); }
.hero-content { position:relative;z-index:3;text-align:center;padding:120px 24px 60px;display:flex;flex-direction:column;align-items:center; }
.hero-logo-wrap {
  margin-bottom: 32px;
  position: relative;
  animation: logoFloat 4s ease-in-out infinite;
  display: flex;
  justify-content: center;
}
.hero-logo-wrap::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  height: 150%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(45,184,87,.25), transparent 70%);
  filter: blur(50px);
  z-index: 1;
  animation: glowPulse 3s ease-in-out infinite;
}
/* HERO LOGO */
.hero-logo-wrap img {
  height: clamp(180px, 22vw, 340px);
  object-fit: contain;
  position: relative;
  z-index: 2;
  filter:
    drop-shadow(0 0 20px rgba(45,184,87,.6))
    drop-shadow(0 0 40px rgba(45,184,87,.4))
    drop-shadow(0 0 80px rgba(45,184,87,.25));

  animation: logoPulse 2.8s ease-in-out infinite;
}
.hero-tags { display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:28px;animation:fadeUp .8s .15s ease both; }
.tag { font-family:'Teko',sans-serif;font-size:.85rem;letter-spacing:.15em;text-transform:uppercase;background:rgba(45,184,87,.12);border:1px solid rgba(45,184,87,.3);color:var(--g5);padding:5px 16px;border-radius:50px; }
.hero-headline { display:flex;flex-direction:column;align-items:center;line-height:.9;margin-bottom:32px;animation:fadeUp .8s .25s ease both; }
.hero-headline .vasai { font-family:'Teko',sans-serif;font-size:clamp(1.6rem,5vw,3rem);letter-spacing:.35em;color:rgba(255,255,255,.3);text-transform:uppercase; }
.hero-headline .biggest { font-family:'Anton',sans-serif;font-size:clamp(5rem,18vw,14rem);color:var(--white);letter-spacing:.04em;text-shadow:0 0 80px rgba(45,184,87,.25),0 4px 0 rgba(0,0,0,.5); }
.hero-headline .turf-word { font-family:'Anton',sans-serif;font-size:clamp(3rem,11vw,8.5rem);color:var(--g4);letter-spacing:.08em;text-shadow:0 0 60px rgba(45,184,87,.5); }
.offer-strip { display:inline-flex;align-items:center;gap:12px;background:linear-gradient(135deg,#b88c00,#f5c500,#ffe566,#f5c500);background-size:200% auto;color:var(--black);font-family:'Teko',sans-serif;font-size:1.25rem;font-weight:600;letter-spacing:.06em;padding:12px 32px;border-radius:50px;margin-bottom:36px;animation:shimmer 3s linear infinite,fadeUp .8s .4s ease both;animation-fill-mode:both; }
.fire { font-size:1.2rem; }
.hero-btns { display:flex;gap:16px;flex-wrap:wrap;justify-content:center;animation:fadeUp .8s .5s ease both; }
.btn-hero-primary { font-family:'Teko',sans-serif;font-size:1.15rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--g3);color:var(--white);padding:14px 36px;border-radius:50px;border:2px solid var(--g4);transition:all .22s; }
.btn-hero-primary:hover { background:var(--g4);color:var(--black);transform:translateY(-3px);box-shadow:0 12px 36px rgba(45,184,87,.4); }
.btn-hero-ghost { font-family:'Teko',sans-serif;font-size:1.1rem;letter-spacing:.1em;text-transform:uppercase;background:transparent;color:rgba(255,255,255,.6);padding:14px 28px;border-radius:50px;border:2px solid rgba(255,255,255,.2);transition:all .22s; }
.btn-hero-ghost:hover { border-color:var(--g4);color:var(--g4);transform:translateY(-3px); }
.hero-scroll-hint { position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font-family:'Teko',sans-serif;font-size:.7rem;letter-spacing:.3em;color:rgba(255,255,255,.25);z-index:4;animation:bounce 2.5s ease-in-out infinite; }

@keyframes logoIn { from{opacity:0;transform:scale(.7) translateY(20px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes shimmer { to{background-position:200% center} }
@keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }
@keyframes logoFloat {0%, 100% { transform: translateY(0); }50% { transform: translateY(-12px); }}
@keyframes logoPulse {0%, 100% {transform: scale(1);}50% {transform: scale(1.06);}}
@keyframes glowPulse {
  0%, 100% {
    opacity: .6;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
  }
}

/* TICKER */
.ticker-bar { background:var(--g2);border-top:2px solid var(--g4);border-bottom:2px solid var(--g4);overflow:hidden;padding:13px 0; }
.ticker-inner { display:flex;gap:48px;width:max-content;animation:tick 28s linear infinite; }
.ticker-inner span { font-family:'Teko',sans-serif;font-size:1rem;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;color:rgba(255,255,255,.85); }
.ticker-inner .dot { color:var(--gold);font-size:.6rem;align-self:center; }
@keyframes tick { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ABOUT */
.about { background:#f2f9f4;color:#0d1a10;padding:110px 0;position:relative;overflow:hidden; }
.about-bg-text { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Anton',sans-serif;font-size:clamp(8rem,22vw,22rem);line-height:.85;color:rgba(27,107,47,.06);white-space:nowrap;pointer-events:none;text-align:center; }
.about .wrap { display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;position:relative;z-index:1; }
.about-left h2 { color:var(--g1);margin-bottom:20px; }
.about-left p { color:#3d6b49;font-size:1.05rem;line-height:1.7;margin-bottom:28px; }
.about-left p strong { color:var(--g1); }
.check-list { list-style:none;margin-bottom:36px;display:flex;flex-direction:column;gap:12px; }
.check-list li { font-family:'Rajdhani',sans-serif;font-size:1.05rem;font-weight:600;color:#1a3d22;display:flex;align-items:center;gap:10px; }
.chk { display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:var(--g3);color:white;border-radius:50%;font-size:.85rem;flex-shrink:0; }
.stat-board { background:linear-gradient(145deg,var(--g1),var(--g2));border-radius:24px;padding:48px 40px;box-shadow:0 24px 60px rgba(0,0,0,.25),0 0 0 1px rgba(45,184,87,.2);display:flex;flex-direction:column; }
.stat-item { padding:24px 0; }
.stat-num { font-family:'Anton',sans-serif;font-size:clamp(3rem,5vw,4.5rem);color:var(--white);line-height:1;margin-bottom:6px; }
.stat-num.price { color:var(--gold); }
.stat-label { font-family:'Teko',sans-serif;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45); }
.stat-divider { height:1px;background:rgba(255,255,255,.1); }
.fifa-badge { display:flex;align-items:center;gap:12px;margin-top:20px;background:rgba(245,197,0,.1);border:1px solid rgba(245,197,0,.3);border-radius:12px;padding:16px 20px; }
.fifa-icon { font-size:1.8rem; }
.fifa-badge span:last-child { font-family:'Teko',sans-serif;font-size:1rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);line-height:1.3; }

/* SPORTS */
.sports { background:var(--black);padding:110px 0; }
.sports .wrap>h2 { margin-bottom:52px; }
.sports-cards { display:grid;grid-template-columns:1fr 1fr;gap:28px; }
.sport-card { background:var(--c,#1b6b2f);border-radius:24px;padding:52px 40px;position:relative;overflow:hidden;border:1px solid rgba(45,184,87,.15);transition:transform .3s,box-shadow .3s; }
.sport-card:hover { transform:translateY(-8px);box-shadow:0 28px 56px rgba(0,0,0,.5),0 0 0 1px rgba(45,184,87,.3); }
.sport-bg-icon { position:absolute;top:-10px;right:-20px;font-size:8rem;opacity:.08;pointer-events:none;filter:grayscale(1); }
.sport-emoji { font-size:3rem;margin-bottom:20px; }
.sport-card h3 { font-family:'Anton',sans-serif;font-size:2.6rem;color:var(--white);margin-bottom:14px;letter-spacing:.02em; }
.sport-card p { color:rgba(255,255,255,.6);font-size:1rem;line-height:1.65;margin-bottom:24px; }
.available-now { font-family:'Teko',sans-serif;font-size:.85rem;letter-spacing:.15em;text-transform:uppercase;color:var(--g5); }

/* COMING SOON */
.soon { background:linear-gradient(180deg,#080f09,#0d1a10);padding:110px 0; }
.soon .wrap>h2 { margin-bottom:12px; }
.sub-desc { color:rgba(255,255,255,.45);font-size:1.05rem;line-height:1.6;max-width:520px;margin:0 auto 60px; }
.soon-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:20px; }
.soon-card { background:rgba(255,255,255,.03);border:1px solid rgba(45,184,87,.15);border-radius:var(--r);padding:36px 24px;transition:all .3s;transition-delay:var(--d,0s);position:relative; }
.soon-card:hover { background:rgba(45,184,87,.07);border-color:rgba(45,184,87,.35);transform:translateY(-6px); }
.soon-num { font-family:'Anton',sans-serif;font-size:4rem;letter-spacing:.04em;color:rgba(255,255,255,.05);line-height:1;margin-bottom:-10px; }
.soon-icon { font-size:2.5rem;margin-bottom:16px; }
.soon-card h4 { font-family:'Teko',sans-serif;font-size:1.25rem;letter-spacing:.08em;text-transform:uppercase;color:var(--g4);margin-bottom:10px; }
.soon-card p { font-size:.9rem;color:rgba(255,255,255,.45);line-height:1.55;margin-bottom:20px; }
.soon-tag { display:inline-block;font-family:'Teko',sans-serif;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);background:rgba(245,197,0,.1);border:1px solid rgba(245,197,0,.25);padding:4px 12px;border-radius:50px; }

/* OFFER */
.offer { background:radial-gradient(ellipse at 20% 50%,#0f3d1c,#060c07 65%);padding:110px 0;position:relative;overflow:hidden; }
.offer::before { content:'';position:absolute;top:50%;left:10%;transform:translateY(-50%);width:500px;height:500px;background:radial-gradient(circle,rgba(245,197,0,.08),transparent 70%);pointer-events:none; }
.offer-wrap { display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;position:relative;z-index:1; }
.offer-h2 { font-size:clamp(2.4rem,5vw,3.8rem);margin-bottom:8px; }
.price-big { font-family:'Anton',sans-serif;font-size:clamp(5rem,10vw,8rem);color:var(--gold);line-height:.9;margin-bottom:24px;text-shadow:0 0 60px rgba(245,197,0,.4); }
.per-hr { font-size:.4em;color:rgba(255,255,255,.4); }
.offer-p { color:rgba(255,255,255,.55);font-size:1.05rem;line-height:1.65;margin-bottom:32px; }
.offer-p strong { color:var(--white); }
.countdown-box { background:rgba(255,255,255,.04);border:1px solid rgba(45,184,87,.2);border-radius:24px;padding:48px 36px;text-align:center; }
.cd-label { font-family:'Teko',sans-serif;font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:28px; }
.cd-clocks { display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap; }
.cd-unit { display:flex;flex-direction:column;align-items:center;background:rgba(0,0,0,.4);border:1px solid rgba(45,184,87,.2);border-radius:14px;padding:18px 18px 14px;min-width:76px; }
.cd-unit span { font-family:'Anton',sans-serif;font-size:3rem;color:var(--white);line-height:1; }
.cd-unit label { font-family:'Teko',sans-serif;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-top:6px; }
.cd-sep { font-family:'Anton',sans-serif;font-size:2rem;color:rgba(255,255,255,.2);padding-bottom:12px; }

/* CONTACT */
.contact { background:#f2f9f4;color:#0d1a10;padding:110px 0; }
.contact .wrap>h2 { color:var(--g1);margin-bottom:56px; }
.contact-grid { display:grid;grid-template-columns:1fr 1.3fr;gap:56px;align-items:start; }
.contact-details { display:flex;flex-direction:column;gap:28px; }
.c-item { display:flex;align-items:flex-start;gap:16px; }
.c-icon { font-size:1.5rem;margin-top:2px;flex-shrink:0; }
.c-text strong { display:block;font-family:'Teko',sans-serif;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:#5a8a65;margin-bottom:4px; }
.c-text a,.c-text span { font-size:1rem;color:#1a3a22;line-height:1.55; }
.c-text a:hover { color:var(--g3); }
.contact-map iframe { border-radius:20px;box-shadow:0 16px 48px rgba(0,0,0,.15); }

/* FOOTER */
.footer { background:var(--black);border-top:1px solid rgba(45,184,87,.1);padding:52px 0 40px; }
.footer-inner { display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center; }
.footer-logo { height:56px;object-fit:contain;margin:0 auto; }
.footer-copy { font-family:'Rajdhani',sans-serif;color:rgba(255,255,255,.3);font-size:.9rem;line-height:1.7; }
.footer-copy span { color:rgba(255,255,255,.18); }
.footer-socials { display:flex;gap:28px; }
.footer-socials a { font-family:'Teko',sans-serif;font-size:.85rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.3);transition:color .2s; }
.footer-socials a:hover { color:var(--g4); }

/* RESPONSIVE */
@media (max-width:900px) { .about .wrap,.offer-wrap,.contact-grid{grid-template-columns:1fr;gap:44px} .sports-cards{grid-template-columns:1fr} .soon-grid{grid-template-columns:1fr 1fr} }
@media (max-width:640px) {
  .hero-logo-wrap img {
    height: clamp(160px, 40vw, 260px);
  }
}