/* ═══════════════════════════════════════════════
   NEPTIVUS — base.css
   Shared across all pages. Loaded via <link preload>.
   Critical above-fold styles stay inlined per page.
═══════════════════════════════════════════════ */

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

/* ── Design tokens ── */
:root{
  --black:       #000000;
  --white:       #ffffff;
  --green:       /*#00FF87;*/#39F288;
  --dark:        #0a0a0a;
  --dark-2:      #111111;
  --mid:         #888888;
  --faint:       #eeeeee;
  --light-bg:    #f6f6f6;

  /* Rules */
  --rule:        1px solid #000000;
  --rule-faint:  1px solid #eeeeee;
  --rule-dark:   1px solid rgba(255,255,255,.1);

  /* Typography */
  --font-display: 'DM Sans','Arial',sans-serif;
  --font-body:    'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* Type scale */
  --f-xl:  clamp(64px,12vw,160px);
  --f-lg:  clamp(40px,6vw,80px);
  --f-md:  clamp(28px,4vw,52px);
  --f-sm:  clamp(22px,3vw,36px);
  --f-eye: 12px;
  --f-body-lg: 18px;
  --f-body:    15px;
  --f-sm-body: 14px;
  --f-caption: 13px;

  /* Spacing */
  --sp-xs:  8px;
  --sp-sm:  16px;
  --sp-md:  24px;
  --sp-lg:  48px;
  --sp-xl:  80px;
  --sp-2xl: 120px;
}

/* ── Base body ── */
body{
  background:var(--white);
  color:var(--black);
  font-family:var(--font-body);
  font-weight:300;
  font-size:var(--f-body);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ── Layout container ── */
.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 var(--sp-lg);
}
@media(max-width:768px){.wrap{padding:0 var(--sp-md);}}

/* ── Sections ── */
.sec{padding:var(--sp-2xl) 0;}
@media(max-width:768px){.sec{padding:72px 0;}}

.sec-dark{background:var(--dark);color:var(--white);}
.sec-light{background:var(--light-bg);}

/* ── Display type ── */
.d{
  font-family:var(--font-display);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.03em;
  line-height:.92;
}
.d-xl{font-size:var(--f-xl);}
.d-lg{font-size:var(--f-lg);}
.d-md{font-size:var(--f-md);}
.d-sm{font-size:var(--f-sm);}
.d .g{color:var(--green);}

/* ── Eyebrow label ── */
.eye{
  font-family:var(--font-body);
  font-size:var(--f-eye);
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.eye-dark{color:rgba(255,255,255,.65);}

/* ── Rules ── */
hr{border:none;border-top:var(--rule);}
.hr-faint{border:none;border-top:var(--rule-faint);}
.hr-dark{border:none;border-top:var(--rule-dark);}

/* ── Green accent ── */
.g{color:var(--green);}

/* ── Screen reader only ── */
.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ── Spacing utilities ── */
.mb8{margin-bottom:8px;}
.mb16{margin-bottom:16px;}
.mb24{margin-bottom:24px;}
.mb32{margin-bottom:32px;}
.mb48{margin-bottom:48px;}
.mt16{margin-top:16px;}
.mt24{margin-top:24px;}
.mt32{margin-top:32px;}
.mt48{margin-top:48px;}

/* ── Scroll reveal animation ── */
.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .65s ease,transform .65s ease;
}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal:nth-child(2){transition-delay:.08s;}
.reveal:nth-child(3){transition-delay:.16s;}
.reveal:nth-child(4){transition-delay:.24s;}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}