/* ============ Base / Reset / Variables ============ */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  color-scheme: only light;
 
  --gold-solid:#c9a227;
  --white:#ffffff;
  --blue:#4957d0;
  --gold:rgba(252, 227, 3, 0.5);
  --body-text:#2a2a2a;
  --font-heading:'Plus Jakarta Sans',sans-serif;
  --font-body:'Inter',sans-serif;
    --section-border:rgba(58, 6, 247, 0.14);

  /* legacy aliases: keep sections not yet rebuilt from breaking mid-redesign */
  --cream:var(--white);
  --teal:var(--blue);--teal-dark:var(--blue);--teal-mid:var(--blue);
  --teal-light:rgba(58,18,201,0.08);
  --ink:var(--body-text);--ink-soft:var(--body-text);--ink-muted:#6b6b64;
  --serif:var(--font-heading);--sans:var(--font-body);
}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:var(--font-body);font-size:17px;line-height:1.7;color:var(--body-text);background:linear-gradient(180deg,#ffffff 0%,#f8f9ff 100%);overflow-x:hidden;-webkit-font-smoothing:antialiased}

h1,h2,h3{font-family:var(--font-heading);color:var(--blue);line-height:1.15}
h1{font-size:clamp(2.75rem,6vw,4.5rem);font-weight:700;line-height:1.05}
h2{font-size:clamp(2rem,4vw,3rem);font-weight:700}
h3{font-size:clamp(1.375rem,3vw,1.75rem);font-weight:600}

p{max-width:70ch}

.subheading{font-size:1.15rem;font-weight:600}
.label{font-size:0.8rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em}
.small-text{font-size:0.95rem;font-weight:400}

button,.btn-primary,.btn-ghost{font-family:var(--font-body);font-size:1rem;font-weight:600}

section{
  position:relative;
  padding:clamp(4.25rem,7vw,6rem) 0;
}

section + section{
  border-top:1px solid var(--section-border);
}
section + section::before{
  content:'';
  position:absolute;
  top:-1px;
  left:50%;
  width:clamp(92px,20vw,140px);
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(58,6,247,0.45),transparent);
  transform:translateX(-50%);
}

section[id]{scroll-margin-top:90px}

.bullet-list{list-style:none;display:flex;flex-direction:column;gap:0.6rem}
.bullet-list li{position:relative;padding-left:1.5rem;font-size:0.98rem;line-height:1.6}
.bullet-list li::before{content:'';position:absolute;left:0;top:0.5em;width:8px;height:8px;background:var(--body-text);border-radius:2px;transform:rotate(45deg)}

.scroll-toggle{position:fixed;bottom:28px;right:28px;width:46px;height:46px;border-radius:50%;background:var(--gold);color:var(--blue);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:150;box-shadow:0 6px 18px rgba(58,18,201,0.18)}
.scroll-toggle svg{width:22px;height:22px}
.scroll-toggle{animation:scrollBounceDown 1.8s ease-in-out infinite}
.scroll-toggle.at-bottom{animation:scrollBounceUp 1.8s ease-in-out infinite}
@keyframes scrollBounceDown{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes scrollBounceUp{0%,100%{transform:translateY(0) rotate(180deg)}50%{transform:translateY(5px) rotate(180deg)}}

body.dark-mode{
  --white:#15100c;
  --body-text:#e8e6e0;
  --card-bg:#1e1912;
  background:#15100c;
  --section-border:rgba(255,255,255,0.14);
}
body.dark-mode .work-step:hover{
  background:var(--card-bg);
  border-color:var(--blue);
}

body.dark-mode .work-step{box-shadow:none;border-color:rgba(255,255,255,0.08)}
body.dark-mode .work-step:hover{box-shadow:0 0 24px rgba(66,20,235,0.35)}

h1,h2,h3,.nav-name,.section-label,.bullet-list li::before,.hero-cta,.stat-num,.theme-toggle svg,.comein-text,.connect-text{forced-color-adjust:none;}