/* ===================================================================
   RAKVIH — Design tokens
=================================================================== */
:root{
  --olive:#505824;
  --olive-light:#7c8a3a;
  --gold:#FFCF0F;
  --gold-dim:#c9a30c;
  --bg:#080907;
  --bg2:#0c0e09;
  --secondary:#11130D;
  --surface:#181B13;
  --surface-2:#1f2317;
  --text:#F5F3E8;
  --muted:#A6A79A;
  --gold-glow:rgba(255,207,15,0.20);
  --line:rgba(245,243,232,0.10);

  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Manrope', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --ease:cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:auto;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer;}
::selection{background:var(--gold);color:#080907;}

.accent{color:var(--gold);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

/* ===================================================================
   Typography
=================================================================== */
.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.22em;
  color:var(--gold);
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:.6rem;
  margin:0 0 1rem;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold);}
.eyebrow .line{width:28px;height:1px;background:var(--gold);display:inline-block; transform-origin:left; transition:transform .6s var(--ease) .1s;}
.eyebrow.reveal .line{transform:scaleX(0);}
.eyebrow.reveal.is-visible .line{transform:scaleX(1);}
.eyebrow.center{justify-content:center;}
.eyebrow.small{font-size:.66rem;margin-bottom:.9rem;}

.display-xl{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.6rem, 6.4vw, 5.4rem);
  line-height:1.03;
  letter-spacing:-.01em;
  margin:0 0 1rem;
}
.display-xl .line{display:inline-block;}
.display-lg{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.1rem, 4.4vw, 3.4rem);
  line-height:1.08;
  margin:0 0 .9rem;
}
.display-final{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.6rem,8vw,6rem);
  letter-spacing:.02em;
  margin:1.6rem 0 .4rem;
}
.center{text-align:center;}
.lede{font-size:1.08rem;color:var(--muted);max-width:46ch;margin:0 0 1.4rem;}

/* ===================================================================
   Background layers
=================================================================== */
#webgl{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; display:block;
  background:radial-gradient(ellipse at 50% 20%, #0f1209 0%, var(--bg) 60%, #050502 100%);
}
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,.55) 100%);
}
body.no-webgl{
  background:radial-gradient(ellipse at 50% 10%, #12160c 0%, var(--bg) 55%, #050502 100%) fixed;
}

/* ===================================================================
   Preloader
=================================================================== */
#preloader{
  position:fixed; inset:0; z-index:999; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2rem;
  transition:opacity .9s var(--ease), visibility .9s;
}
#preloader.hidden{opacity:0; visibility:hidden; pointer-events:none;}
.loader-mark{position:relative; width:120px; height:120px; display:flex; align-items:center; justify-content:center;}
.loader-ring{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg);}
.loader-ring circle{fill:none; stroke:var(--gold); stroke-width:1.4; stroke-linecap:round; stroke-dasharray:276; stroke-dashoffset:276; opacity:.8; animation:loaderspin 1.8s var(--ease) infinite;}
@keyframes loaderspin{ 0%{stroke-dashoffset:276;} 50%{stroke-dashoffset:40;} 100%{stroke-dashoffset:276;} }
.loader-word{font-family:var(--font-display); font-weight:700; letter-spacing:.08em; font-size:.95rem; color:var(--text);}
.loader-status{display:flex; flex-direction:column; align-items:center; gap:.5rem; font-family:var(--font-mono);}
#loaderPct{color:var(--gold); font-size:1.1rem;}
.loader-caption{font-size:.66rem; letter-spacing:.24em; color:var(--muted);}

/* ===================================================================
   Nav
=================================================================== */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.3rem clamp(1.2rem,4vw,3rem);
  backdrop-filter:blur(6px);
  background:linear-gradient(to bottom, rgba(8,9,7,.55), transparent);
}
body.menu-open .nav-connect{opacity:0; pointer-events:none;}
body.menu-open .nav-brand{opacity:0; pointer-events:none;}
.nav-connect, .nav-brand{transition:opacity .3s var(--ease);}
.nav-brand{display:flex; align-items:center; gap:.7rem;}
.brand-text{font-family:var(--font-display); font-weight:700; font-size:.92rem; letter-spacing:.05em; display:flex; flex-direction:column; line-height:1.1;}
.brand-text em{font-style:normal; font-family:var(--font-mono); font-size:.55rem; letter-spacing:.14em; color:var(--muted); font-weight:400;}
.nav-connect{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--gold); color:var(--gold); padding:.65rem 1.3rem; border-radius:999px;
  display:flex; align-items:center; gap:.5rem; transition:background .3s var(--ease), color .3s var(--ease);
  white-space:nowrap;
}
.nav-connect:hover{background:var(--gold); color:#080907;}
.menu-toggle{
  width:44px; height:44px; border:1px solid var(--line); border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  z-index:200;
}
.menu-toggle span{width:16px; height:1.4px; background:var(--text); transition:transform .35s var(--ease), opacity .35s;}
.menu-toggle.open span:nth-child(1){transform:translateY(3.2px) rotate(45deg);}
.menu-toggle.open span:nth-child(2){transform:translateY(-3.2px) rotate(-45deg);}

.full-menu{
  position:fixed; inset:0; z-index:150; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  clip-path:circle(0% at calc(100% - 3rem) 3rem);
  transition:clip-path .6s var(--ease);
  pointer-events:none;
}
.full-menu.open{clip-path:circle(150% at calc(100% - 3rem) 3rem); pointer-events:auto;}
.full-menu-inner{width:min(460px,86vw); max-height:82vh; overflow-y:auto;}
.full-menu ol{list-style:none; margin:0; padding:0;}
.full-menu li{border-top:1px solid var(--line);}
.full-menu li:last-child{border-bottom:1px solid var(--line);}
.full-menu a{
  display:flex; align-items:center; gap:1.1rem; padding:.7rem .15rem;
  font-family:var(--font-display); font-size:clamp(1rem,2.2vw,1.35rem); font-weight:600;
  color:var(--text); transition:color .3s, padding-left .3s var(--ease);
}
.full-menu a::before{content:attr(data-num); font-family:var(--font-mono); font-size:.62rem; color:var(--gold);}
.full-menu a:hover{color:var(--gold); padding-left:.8rem;}
.full-menu-foot{
  margin-top:1.4rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.06em; color:var(--muted);
}

.scroll-rail{position:fixed; right:1.1rem; top:14%; bottom:14%; width:2px; background:var(--line); z-index:100; border-radius:2px;}
.scroll-rail-fill{position:absolute; top:0; left:0; width:100%; height:0%; background:var(--gold); box-shadow:0 0 10px var(--gold); border-radius:2px;}
@media (max-width:760px){ .scroll-rail{display:none;} }

/* ===================================================================
   Layout / panel base
=================================================================== */
main{position:relative; z-index:2;}
.panel{
  position:relative;
  min-height:auto;
  padding:clamp(3.5rem,6vw,5rem) clamp(1.4rem,6vw,4rem) clamp(3rem,5vw,4rem);
  display:flex; flex-direction:column; justify-content:center;
}
.hero-panel{min-height:100vh;}
@media (max-height:560px) and (max-width:900px){
  /* short/landscape phones: don't force a full 100vh — let content breathe */
  .hero-panel{min-height:auto; padding-top:6.5rem; padding-bottom:2.5rem;}
  .scroll-cue{display:none;}
}
@media (max-width:420px){
  .brand-text em{display:none;} /* drop the "SOLUTIONS PVT. LTD." sub-line on very small phones */
  .site-nav{padding:1rem 1rem;}
  .nav-connect{padding:.55rem 1rem; font-size:.66rem;}
}

/* buttons */
.btn{
  position:relative; overflow:hidden;
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.09em; text-transform:uppercase;
  padding:.95rem 1.7rem; border-radius:999px; display:inline-flex; align-items:center; gap:.6rem;
  transition:transform .35s var(--ease), background .35s, color .35s, border-color .35s;
}
.btn::before{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg); transition:left .6s var(--ease); pointer-events:none;
}
.btn:hover::before{left:120%;}
.btn:hover{transform:translateY(-2px);}
.btn-gold{background:var(--gold); color:#080907; font-weight:600;}
.btn-gold:hover{background:#fff2b0;}
.btn-ghost{border:1px solid var(--line); color:var(--text);}
.btn-ghost:hover{border-color:var(--text);}
.btn-line{border:1px solid var(--gold); color:var(--gold);}
.btn-line:hover{background:var(--gold); color:#080907;}

/* ambient cursor glow */
#cursorGlow{
  position:fixed; top:0; left:0; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, var(--gold-glow) 0%, transparent 70%);
  pointer-events:none; z-index:40; mix-blend-mode:screen; will-change:transform;
}

/* ===================================================================
   HERO
=================================================================== */
.hero-panel{padding-top:clamp(5.5rem,9vw,7rem);}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:2rem; flex:1;}
.hero-actions{display:flex; flex-wrap:wrap; gap:1rem;}
.hero-portrait{position:relative; justify-self:center; width:min(360px,72vw); aspect-ratio:1/1;}
.portrait-ring{position:absolute; inset:-8%; border:1px solid var(--gold-glow); border-radius:50%; animation:spin 30s linear infinite;}
.portrait-ring::before{content:''; position:absolute; inset:12%; border:1px solid rgba(245,243,232,.08); border-radius:50%;}
@keyframes spin{to{transform:rotate(360deg);}}
.portrait-img{
  width:100%; height:100%; object-fit:cover; border-radius:50%;
  filter:grayscale(.15) contrast(1.05);
  box-shadow:0 0 0 1px var(--line), 0 30px 80px -20px rgba(0,0,0,.7), 0 0 90px -10px var(--gold-glow);
}
.node{
  position:absolute; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em;
  color:var(--gold); background:rgba(8,9,7,.7); border:1px solid var(--gold-glow);
  padding:.4rem .7rem; border-radius:999px; backdrop-filter:blur(4px);
  animation:float 6s ease-in-out infinite;
}
.node-a{top:6%; right:-4%;}
.node-b{bottom:10%; left:-8%; animation-delay:-3s;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}

.hero-stats{
  display:flex; flex-wrap:wrap; gap:clamp(1.4rem,3vw,2.4rem); margin-top:clamp(1.6rem,3.6vw,2.4rem);
  padding-top:1.8rem; border-top:1px solid var(--line);
}
.hero-stats div{display:flex; flex-direction:column; gap:.2rem;}
.hero-stats strong{font-family:var(--font-display); font-size:1.6rem; color:var(--gold);}
.hero-stats span{font-size:.78rem; color:var(--muted); max-width:22ch;}

.scroll-cue{
  position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.2em; color:var(--muted);
}
.scroll-cue i{width:1px; height:38px; background:linear-gradient(var(--gold), transparent); position:relative; overflow:hidden;}
.scroll-cue i::after{content:''; position:absolute; top:-38px; left:0; width:100%; height:100%; background:var(--gold); animation:scrolldown 2s var(--ease) infinite;}
@keyframes scrolldown{ to{ top:38px; } }

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; text-align:left;}
  .hero-portrait{order:-1; width:min(280px,60vw); margin-bottom:1rem;}
}

/* ===================================================================
   CONCEPT
=================================================================== */
.concept-triplet{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); margin-bottom:1.8rem;
}
.concept-triplet > div{background:var(--secondary); padding:2.2rem 1.6rem;}
.concept-triplet .num{font-family:var(--font-mono); color:var(--gold); font-size:.75rem;}
.concept-triplet h3{font-family:var(--font-display); font-size:clamp(1.3rem,2.6vw,1.9rem); margin:.6rem 0 0;}
.concept-body{display:grid; grid-template-columns:1fr 1fr; gap:1.8rem; max-width:1100px;}
.concept-body p{color:var(--muted); font-size:1.02rem;}
@media (max-width:760px){ .concept-triplet{grid-template-columns:1fr;} .concept-body{grid-template-columns:1fr;} }

/* ===================================================================
   ABOUT + EXPERTISE WHEEL
=================================================================== */
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:2rem; max-width:1100px; margin-bottom:2.8rem;}
.about-grid p{color:var(--muted);}
@media (max-width:760px){ .about-grid{grid-template-columns:1fr;} }

.expertise-wheel{position:relative; max-width:760px; margin:0 auto; aspect-ratio:1/1; width:min(760px,92vw);}
.wheel-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:34%; aspect-ratio:1/1; border-radius:50%; border:1px solid var(--gold);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.15rem;
  background:radial-gradient(circle, rgba(255,207,15,.08), transparent 70%);
}
.wheel-name{font-family:var(--font-display); font-weight:700; color:var(--gold); font-size:clamp(1.1rem,2.4vw,1.5rem);}
.wheel-role,.wheel-sub{font-family:var(--font-mono); font-size:.6rem; color:var(--muted); letter-spacing:.06em;}
.wheel-nodes{position:absolute; inset:0;}
.wheel-line{
  --angle: calc(var(--i) * 36deg);
  position:absolute; top:50%; left:50%; height:1px; width:0;
  background:linear-gradient(to right, var(--gold), transparent);
  transform-origin:left center; transform:rotate(var(--angle));
  transition:width 1.1s var(--ease); opacity:.45; pointer-events:none;
}
#expertise.lines-drawn .wheel-line{width:min(300px,36vw);}
.wnode{
  --angle: calc(var(--i) * 36deg);
  position:absolute; top:50%; left:50%; width:148px;
  transform:rotate(var(--angle)) translate(min(300px,36vw)) rotate(calc(var(--angle) * -1));
  font-family:var(--font-mono); font-size:.68rem; color:var(--text); line-height:1.35;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:.85rem .9rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem;
  text-align:center; transition:border-color .3s, transform .4s var(--ease);
}
.wnode:hover{border-color:var(--gold); transform:rotate(var(--angle)) translate(min(300px,36vw)) rotate(calc(var(--angle) * -1)) scale(1.06);}
.wn-num{display:block; color:var(--gold); font-size:.62rem;}
@media (max-width:760px){
  .expertise-wheel{aspect-ratio:auto; width:100%;}
  .wheel-line{display:none;}
  .wheel-center{position:static; transform:none; width:100%; aspect-ratio:auto; border:none; padding:1rem 0 2rem; background:none;}
  .wheel-nodes{position:static; display:grid; grid-template-columns:1fr 1fr; gap:.8rem;}
  .wnode{position:static; transform:none !important; width:auto;}
}

/* ===================================================================
   BUSINESS JOURNEY
=================================================================== */
.journey-path{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0;
  max-width:1100px; margin:0 auto;
}
.jp-stage{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.9rem 1.4rem; border:1px solid var(--line); border-radius:999px; margin:.35rem;
  color:var(--muted); position:relative;
}
.jp-stage:not(:last-child)::after{content:'→'; margin-left:1rem; color:var(--gold-dim);}
.jp-stage.jp-final{color:var(--gold); border-color:var(--gold);}
.journey-note{text-align:center; color:var(--muted); font-size:.85rem; max-width:60ch; margin:1.6rem auto 0;}

/* ===================================================================
   ECOSYSTEM INTRO
=================================================================== */
.ecointro-lede{text-align:center; max-width:60ch; margin:0 auto 2rem; color:var(--muted);}
.ecointro-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); max-width:1200px; margin:0 auto;}
.eco-card{background:var(--secondary); padding:2rem 1.5rem; transition:background .3s;}
.eco-card:hover{background:var(--surface);}
.eco-card span{font-family:var(--font-mono); color:var(--gold); font-size:.7rem;}
.eco-card h3{font-family:var(--font-display); font-size:1.2rem; margin:.7rem 0 .5rem;}
.eco-card p{color:var(--muted); font-size:.82rem; margin:0;}
@media (max-width:900px){ .ecointro-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .ecointro-grid{grid-template-columns:1fr;} }

/* ===================================================================
   BUSINESS WORLD PANELS (Solutions / Education / Foundation / Events)
=================================================================== */
.world-panel{max-width:1200px; margin:0 auto; width:100%;}
.world-label{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.24em; color:var(--olive-light); margin-bottom:.9rem;}
.world-label.gold{color:var(--gold);}
.world-tagline{font-family:var(--font-mono); font-size:.85rem; letter-spacing:.08em; color:var(--gold); margin-bottom:1.1rem; text-transform:uppercase;}
.world-copy{max-width:60ch; color:var(--muted); font-size:1.02rem; margin-bottom:1.5rem;}
.tag-row{display:flex; flex-wrap:wrap; gap:.6rem;}
.tag-row span{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.05em; color:var(--text);
  border:1px solid var(--line); padding:.5rem 1rem; border-radius:999px;
}
.tag-row.small span{font-size:.62rem; padding:.4rem .8rem;}

.foundation-pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-bottom:1.6rem;}
.foundation-pillars > div{border:1px solid var(--line); border-radius:14px; padding:1.6rem; background:rgba(24,27,19,.4); transition:border-color .3s;}
.foundation-pillars > div:hover{border-color:var(--gold);}
.foundation-pillars .dot{display:block; width:8px; height:8px; border-radius:50%; background:var(--gold); margin-bottom:1rem; box-shadow:0 0 12px var(--gold);}
.foundation-pillars h4{font-family:var(--font-display); margin:0 0 .5rem; font-size:1.05rem;}
.foundation-pillars p{color:var(--muted); font-size:.85rem; margin:0;}
@media (max-width:760px){ .foundation-pillars{grid-template-columns:1fr;} }

.events-panel .display-xl{background:linear-gradient(120deg, var(--text), var(--gold) 60%); -webkit-background-clip:text; background-clip:text;}
.events-panel .display-xl .accent{-webkit-text-fill-color:var(--gold); background:none;}
.events-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem; margin-bottom:1.4rem;}
.events-grid div{
  font-family:var(--font-mono); font-size:.72rem; text-align:center; padding:1.1rem .5rem;
  border:1px solid var(--line); border-radius:12px; color:var(--text);
  transition:border-color .3s, transform .3s var(--ease);
}
.events-grid div:hover{border-color:var(--gold); transform:translateY(-4px);}
@media (max-width:760px){ .events-grid{grid-template-columns:repeat(2,1fr);} }
.events-words{display:flex; gap:2rem; flex-wrap:wrap;}
.events-words span{font-family:var(--font-display); font-size:1.3rem; letter-spacing:.03em; color:var(--muted);}
.events-words span:first-child{color:var(--gold);}

/* ===================================================================
   ECOSYSTEM MAP
=================================================================== */
.map-panel{align-items:center;}
.eco-map{position:relative; max-width:760px; margin:0 auto; width:100%;}
.map-center{
  width:150px; height:150px; border-radius:50%; margin:0 auto 1.6rem;
  border:1px solid var(--gold); display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1rem; text-align:center;
  background:radial-gradient(circle, rgba(255,207,15,.1), transparent 70%);
}
.map-center span{display:block; font-family:var(--font-mono); font-size:.6rem; color:var(--muted); margin-top:.4rem; font-weight:400;}
.map-ring{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.4rem;}
.map-vertical{
  font-family:var(--font-mono); font-size:.72rem; text-align:center; padding:1.4rem .6rem;
  border:1px solid var(--line); border-radius:14px; color:var(--text); background:var(--secondary);
  transition:border-color .3s;
}
.map-vertical:hover{border-color:var(--gold);}
@media (max-width:760px){ .map-ring{grid-template-columns:1fr 1fr;} }
.map-tags{display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin-bottom:1.4rem;}
.map-tags span{font-family:var(--font-mono); font-size:.66rem; padding:.5rem 1rem; border:1px solid var(--line); border-radius:999px; color:var(--muted);}
.map-statement{text-align:center; font-family:var(--font-display); font-size:1.5rem;}

/* ===================================================================
   LEADERSHIP PHILOSOPHY
=================================================================== */
.philosophy-list{max-width:900px; margin:0 auto 1.8rem;}
.phil-row{display:grid; grid-template-columns:60px 1fr; gap:1rem; padding:1.4rem 0; border-top:1px solid var(--line); align-items:baseline;}
.phil-row:last-child{border-bottom:1px solid var(--line);}
.phil-row .num{font-family:var(--font-mono); color:var(--gold); font-size:.8rem;}
.phil-row h3{font-family:var(--font-display); font-size:clamp(1.6rem,3.6vw,2.4rem); margin:0 0 .6rem; grid-column:1/-1;}
.phil-row p{color:var(--muted); margin:0; grid-column:1/-1; max-width:60ch;}
.philosophy-foot{display:grid; grid-template-columns:1fr 1fr; gap:2rem; max-width:1100px; margin:0 auto;}
.philosophy-foot p{color:var(--muted); font-size:.92rem;}
@media (max-width:760px){ .philosophy-foot{grid-template-columns:1fr;} }

/* ===================================================================
   VISION
=================================================================== */
.vision-copy{max-width:70ch; margin:0 auto 2.4rem; text-align:center; color:var(--muted); font-size:1.05rem;}
.vision-words{display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem; margin-bottom:1.5rem;}
.vision-words span{font-family:var(--font-mono); font-size:.75rem; letter-spacing:.05em; padding:.65rem 1.2rem; border:1px solid var(--gold-glow); border-radius:999px; color:var(--gold);}
.vision-connect{text-align:center; font-family:var(--font-display); font-size:clamp(1.2rem,3vw,1.8rem); color:var(--text);}

/* ===================================================================
   CREDENTIALS
=================================================================== */
.cred-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); max-width:1200px; margin:0 auto 2.8rem;}
.cred-card{background:var(--secondary); padding:1.8rem 1.4rem; transition:background .3s;}
.cred-card:hover{background:var(--surface-2);}
.cred-tag{font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em; color:var(--gold); display:block; margin-bottom:.8rem;}
.cred-card h4{font-family:var(--font-display); font-size:1rem; margin:0 0 .6rem;}
.cred-card p{color:var(--muted); font-size:.78rem; margin:0;}
@media (max-width:900px){ .cred-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .cred-grid{grid-template-columns:1fr;} }

.cert-hint{color:var(--muted); font-size:.85rem; margin:0 0 2rem;}
.cert-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; max-width:1200px; margin:0 auto;}
.cert-card{
  perspective:900px; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:14px;
  overflow:hidden; transition:border-color .3s;
}
.cert-card:hover{border-color:var(--gold);}
.cert-card img{width:100%; aspect-ratio:16/11; object-fit:cover; transition:transform .5s var(--ease);}

/* PDF certificates can't render inside <img> — this styled placeholder
   (icon + "PDF" tag) stands in for the thumbnail instead. Clicking still
   opens the real file, just in a new tab rather than the image lightbox. */
.cert-pdf-thumb{
  width:100%; aspect-ratio:16/11; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem; background:radial-gradient(circle at 50% 30%, rgba(255,207,15,.08), transparent 70%);
  transition:transform .5s var(--ease);
}
.cert-card:hover .cert-pdf-thumb{transform:scale(1.03);}
.cert-pdf-thumb svg{width:38px; height:38px; stroke:var(--gold);}
.cert-pdf-thumb span{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; color:var(--gold); border:1px solid var(--gold-glow); padding:.3rem .7rem; border-radius:999px;}
.cert-card:hover img{transform:scale(1.04) rotateX(2deg) rotateY(-2deg);}
.cert-meta{padding:1rem 1.1rem;}
.cert-meta strong{display:block; font-family:var(--font-display); font-size:.92rem; margin-bottom:.3rem;}
.cert-meta span{font-family:var(--font-mono); font-size:.64rem; color:var(--muted);}
@media (max-width:900px){ .cert-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .cert-grid{grid-template-columns:1fr;} }

.lightbox{
  position:fixed; inset:0; z-index:500; background:rgba(3,4,2,.94);
  display:flex; align-items:center; justify-content:center; padding:4vh 4vw;
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease);
}
.lightbox.open{opacity:1; pointer-events:auto;}
.lightbox img{max-width:min(1100px,92vw); max-height:88vh; border-radius:10px; box-shadow:0 40px 100px rgba(0,0,0,.6);}
.lightbox-close{position:absolute; top:2rem; right:2rem; font-size:2rem; color:var(--text); width:48px; height:48px; border:1px solid var(--line); border-radius:50%;}

/* ===================================================================
   CONTACT
=================================================================== */
.contact-lede{text-align:center; max-width:60ch; margin:0 auto 2rem; color:var(--muted);}
.contact-grid{display:grid; grid-template-columns:1.3fr .9fr; gap:3rem; max-width:1200px; margin:0 auto; width:100%;}
.contact-form{display:flex; flex-direction:column; gap:1.1rem;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem;}
.contact-form label{
  display:flex; flex-direction:column; gap:.5rem; font-family:var(--font-mono); font-size:.68rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}
.contact-form label span{color:var(--gold);}
.contact-form input, .contact-form textarea{
  background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:.9rem 1rem;
  color:var(--text); font-family:var(--font-body); font-size:.95rem; resize:vertical;
  transition:border-color .3s;
}
.contact-form input:focus, .contact-form textarea:focus{outline:none; border-color:var(--gold);}
.contact-form button{align-self:flex-start; margin-top:.5rem;}
.contact-side{border:1px solid var(--line); border-radius:16px; padding:2rem; background:rgba(24,27,19,.4); height:fit-content;}
.side-link{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line);}
.side-link strong{font-family:var(--font-display); font-size:.95rem;}
.side-link span{font-family:var(--font-mono); font-size:.68rem; color:var(--muted);}
.side-link i{color:var(--gold);}
.contact-side hr{border:none; border-top:1px solid var(--line); margin:1.6rem 0;}
.side-copy{color:var(--muted); font-size:.85rem; margin-bottom:1.2rem;}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr;} .form-row{grid-template-columns:1fr;} }

/* ===================================================================
   FINAL
=================================================================== */
.final-panel{
  position:relative; min-height:80vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:6rem 1.5rem; gap:.4rem;
}
.final-logo{width:56px; height:auto; opacity:.9; margin-bottom:.5rem;}
.final-role{font-family:var(--font-mono); font-size:.78rem; letter-spacing:.12em; color:var(--muted); text-transform:uppercase;}
.final-phil{font-family:var(--font-display); font-size:clamp(1rem,2.4vw,1.4rem); color:var(--text); margin-top:1.6rem;}
.final-line{font-family:var(--font-mono); font-size:.75rem; letter-spacing:.16em; color:var(--gold); text-transform:uppercase; margin-top:.6rem;}
.final-copy{font-size:.72rem; color:var(--muted); margin-top:3rem;}

/* ===================================================================
   Reveal-on-scroll (JS toggles .is-visible, then strips classes)
=================================================================== */
.reveal{opacity:0; transform:translateY(24px); filter:blur(6px); transition:opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease);}
.reveal.is-visible{opacity:1; transform:none; filter:blur(0);}
.reveal-fade{opacity:0; transition:opacity .7s var(--ease);}
.reveal-fade.is-visible{opacity:1;}

/* headings get a slightly more cinematic entrance: fade + rise + a soft
   scale-settle, a touch slower than body text so it reads as deliberate */
.reveal-heading{opacity:0; transform:translateY(34px) scale(.97); filter:blur(8px); transition:opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease);}
.reveal-heading.is-visible{opacity:1; transform:none; filter:blur(0);}