/* ============================================================
   STYLE.CSS — Growtual core stylesheet
   Design tokens, reset, typography, navigation, footer-agnostic
   shared primitives (sections, cards, buttons, page-hero, stats,
   reveal-on-scroll), loader, and custom cursor.
   ============================================================ */

/* ---------- DESIGN TOKENS ---------- */
:root{
  --void:#050e0a;
  --deep:#071510;
  --dark:#0a1f16;
  --emerald:#1a9b5e;
  --teal:#00c896;
  --lime:#aaee22;
  --sky:#1a7abf;
  --white:#ffffff;
  --muted:#c3cdd6;
  --glass:rgba(7,16,12,0.62);
  --glass-border:rgba(0,200,150,0.16);
  --gborder:rgba(0,200,150,0.14);
  --glow-emerald:rgba(26,155,94,0.35);
  --glow-teal:rgba(0,200,150,0.3);
  --glow-lime:rgba(170,238,34,0.25);

  --font-display:'Orbitron', sans-serif;
  --font-body:'Inter', sans-serif;
}

/* ---------- RESET ---------- */
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  background:var(--void);
  color:var(--white);
  font-family:var(--font-body);
  overflow-x:hidden;
  line-height:1.5;
  font-size:16px;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
ul{ list-style:none; }
button{ font-family:inherit; }
.page-content{ position:relative; z-index:1; }

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; letter-spacing:.3px; }

/* ---------- CUSTOM CURSOR ---------- */
#cursor{
  width:12px; height:12px; border-radius:50%;
  background:var(--lime);
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .2s, height .2s, opacity .2s;
  box-shadow:0 0 18px var(--lime), 0 0 36px var(--teal);
  mix-blend-mode:screen;
}
#cursor-ring{
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(0,200,150,0.45);
  position:fixed; top:0; left:0; pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%);
  transition:transform .15s ease-out, width .3s, height .3s, border-color .3s;
}
@media (max-width:900px){
  #cursor, #cursor-ring{ display:none; }
  body{ cursor:auto; }
}

/* ---------- PAGE LOADER ---------- */
#page-loader{
  position:fixed; inset:0; z-index:10000;
  background:var(--void);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.4rem;
  transition:opacity .6s ease, visibility .6s ease;
}
#page-loader.loaded{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-logo{
  width:64px; height:64px; object-fit:contain;
  filter:drop-shadow(0 0 18px var(--teal));
  animation:loaderPulse 1.4s ease-in-out infinite;
}
@keyframes loaderPulse{ 0%,100%{ transform:scale(1); opacity:.85; } 50%{ transform:scale(1.08); opacity:1; } }
.loader-bar{
  width:180px; height:3px; border-radius:3px;
  background:rgba(0,200,150,0.15);
  overflow:hidden; position:relative;
}
.loader-bar::after{
  content:''; position:absolute; top:0; left:-40%; width:40%; height:100%;
  background:linear-gradient(90deg, transparent, var(--teal), var(--lime), transparent);
  animation:loaderSweep 1.1s ease-in-out infinite;
}
@keyframes loaderSweep{ to{ left:120%; } }

/* ---------- NAVBAR ---------- */
#navbar{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:1.1rem 2.5rem;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(5,14,10,0.55);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--glass-border);
  transition:background .3s, padding .3s, border-color .3s;
}
#navbar.scrolled{
  background:rgba(5,14,10,0.88);
  padding:.8rem 2.5rem;
  border-color:rgba(0,200,150,0.22);
}
.nav-brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.nav-brand img{ width:40px; height:40px; object-fit:contain; filter:drop-shadow(0 0 10px var(--glow-teal)); flex-shrink:0; }
.nav-brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.nav-brand-name{
  font-family:var(--font-display); font-weight:900; font-size:1.05rem; letter-spacing:1.5px;
  background:linear-gradient(135deg,var(--teal),var(--lime));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.nav-brand-tagline{ font-size:.62rem; color:var(--muted); letter-spacing:1px; text-transform:uppercase; }

.nav-links{ display:flex; align-items:center; gap:1.9rem; }
.nav-links > li{ position:relative; }
.nav-links a{
  color:var(--muted); text-decoration:none; font-size:.78rem; font-weight:500;
  letter-spacing:1.3px; text-transform:uppercase; transition:color .3s;
  display:inline-flex; align-items:center; gap:.3rem;
}
.nav-links a:hover, .nav-links a.active{ color:var(--teal); }
.nav-links .arrow{ font-size:.6rem; }

.nav-dropdown{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(-6px);
  background:rgba(7,21,16,0.97); border:1px solid var(--glass-border); border-radius:12px;
  padding:.6rem; width:240px; opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  backdrop-filter:blur(16px);
  box-shadow:0 20px 50px rgba(0,0,0,0.5);
}
.nav-links > li:hover .nav-dropdown{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.nav-dropdown a{
  display:flex; align-items:center; gap:.6rem; padding:.55rem .7rem; border-radius:8px;
  font-size:.74rem; letter-spacing:.5px; text-transform:none; color:var(--white);
}
.nav-dropdown a:hover{ background:rgba(0,200,150,0.08); color:var(--teal); }
.dd-icon{ font-size:.95rem; }

.nav-cta{
  padding:.6rem 1.5rem; border:1px solid var(--emerald); color:var(--teal);
  border-radius:6px; font-size:.74rem; font-weight:600; letter-spacing:1.4px; text-transform:uppercase;
  text-decoration:none; transition:all .3s; background:transparent; white-space:nowrap;
}
.nav-cta:hover{ background:linear-gradient(135deg,var(--emerald),var(--teal)); color:#02110a; border-color:transparent; box-shadow:0 0 28px var(--glow-teal); }

.nav-burger{ display:none; flex-direction:column; gap:5px; cursor:pointer; padding:.4rem; }
.nav-burger span{ width:24px; height:2px; background:var(--white); border-radius:2px; transition:.3s; }

#mobile-nav{
  position:fixed; inset:0; z-index:1100; background:rgba(4,10,8,0.98);
  backdrop-filter:blur(10px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.6rem;
  transform:translateY(-100%); transition:transform .4s ease;
}
#mobile-nav.open{ transform:translateY(0); }
.mob-close{ position:absolute; top:1.6rem; right:1.8rem; background:none; border:none; color:var(--white); font-size:1.4rem; cursor:pointer; }
.mob-links{ display:flex; flex-direction:column; align-items:center; gap:1.5rem; }
.mob-links a{
  color:var(--white); text-decoration:none; font-family:var(--font-display); font-size:1.3rem;
  letter-spacing:1px; font-weight:600;
}
.mob-links a:hover{ color:var(--teal); }
.mob-sub{ display:flex; flex-direction:column; gap:.8rem; margin-top:1rem; align-items:center; }

@media (max-width:900px){
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .nav-burger{ display:flex; }
  #navbar{ padding:1rem 1.4rem; }
}

/* ---------- SHARED SECTION / TYPE PRIMITIVES ---------- */
.section{ max-width:1200px; margin:0 auto; padding:6rem 2.5rem; position:relative; z-index:2; }
.text-center{ text-align:center; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.72rem; letter-spacing:3px; text-transform:uppercase;
  color:var(--teal); margin-bottom:1rem; font-weight:600;
}
.eyebrow::before{ content:''; width:18px; height:1px; background:var(--teal); display:inline-block; }

.section-title{
  font-size:clamp(1.8rem,3.4vw,2.6rem); font-weight:800; line-height:1.18; margin-bottom:1rem;
}
.section-lead{ color:var(--muted); font-size:1rem; line-height:1.8; max-width:640px; }
.text-center .section-lead{ margin:0 auto; }

.grad-tl{
  background:linear-gradient(135deg,var(--teal),var(--lime));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.grad-bl{
  background:linear-gradient(135deg,var(--sky),var(--teal));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* Generic glass card used widely (gcard) */
.gcard{
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:18px;
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
  position:relative;
}
.gcard:hover{
  transform:translateY(-6px);
  border-color:rgba(0,200,150,0.4);
  background:rgba(0,200,150,0.045);
  box-shadow:0 24px 60px rgba(0,0,0,0.35), 0 0 40px rgba(0,200,150,0.08);
}

.glow-divider{
  height:1px; max-width:1200px; margin:0 auto;
  background:linear-gradient(90deg, transparent, rgba(0,200,150,0.3), rgba(170,238,34,0.2), transparent);
}

/* ---------- BUTTONS ---------- */
.btn-primary, .btn-outline{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.95rem 1.9rem; border-radius:8px;
  font-size:.78rem; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
  text-decoration:none; cursor:pointer; border:none; transition:all .3s ease;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg,var(--emerald),var(--teal));
  color:#02160e;
  box-shadow:0 0 0 rgba(0,200,150,0);
}
.btn-primary span{ position:relative; }
.btn-primary:hover{ box-shadow:0 8px 30px rgba(0,200,150,0.35), 0 0 40px var(--glow-teal); transform:translateY(-2px); }
.btn-outline{
  background:transparent; color:var(--teal); border:1px solid rgba(0,200,150,0.4);
}
.btn-outline:hover{ background:rgba(0,200,150,0.08); border-color:var(--teal); transform:translateY(-2px); }

/* ---------- PAGE HERO (inner pages) ---------- */
.page-hero{ padding:9.5rem 2.5rem 3.5rem; position:relative; z-index:2; }
.page-hero-inner{ max-width:780px; margin:0 auto; }
.page-hero h1{ font-size:clamp(2.1rem,4.4vw,3.2rem); line-height:1.18; margin-bottom:1.1rem; }
.page-hero p{ color:var(--muted); font-size:1.02rem; line-height:1.8; max-width:600px; }
.page-hero.text-center p{ margin:0 auto; }
.page-hero .eyebrow{ display:inline-flex; }

/* ---------- STATS BAR (home) ---------- */
.stats-bar{
  position:relative; z-index:2; max-width:1200px; margin:-3.5rem auto 0;
  padding:0 2.5rem;
}
.stats-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem;
  background:rgba(6,18,13,0.75); border:1px solid var(--glass-border); border-radius:18px;
  padding:2rem 1.5rem; backdrop-filter:blur(20px);
}
.stat-item{ display:flex; align-items:center; gap:.9rem; justify-content:center; }
.stat-icon{ font-size:1.6rem; filter:drop-shadow(0 0 8px var(--teal)); }
.stat-num{ font-family:var(--font-display); font-size:1.5rem; font-weight:900; color:var(--white); display:block; }
.stat-label{ font-size:.74rem; color:var(--muted); letter-spacing:.5px; display:block; }

@media (max-width:900px){
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .stats-grid{ grid-template-columns:1fr; gap:1.4rem; }
  .stat-item{ justify-content:flex-start; }
}

/* ---------- REVEAL ON SCROLL ---------- */
.rv{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.rv.in-view{ opacity:1; transform:translateY(0); }
.rv-d1{ transition-delay:.1s; }
.rv-d2{ transition-delay:.2s; }
.rv-d3{ transition-delay:.3s; }
.rv-d4{ transition-delay:.4s; }
@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1; transform:none; transition:none; }
}

/* ---------- GENERIC GRID HELPERS ---------- */
.pill{
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(0,200,150,0.07); border:1px solid rgba(0,200,150,0.22);
  border-radius:50px; padding:.4rem 1rem; font-size:.78rem; color:var(--teal);
}

@keyframes blink{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }

/* Selection */
::selection{ background:rgba(0,200,150,0.3); color:var(--white); }

.founder-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.founder-photo-frame {
    box-shadow: 0 0 30px rgba(0, 200, 150, 0.25);
}