/*==========================================================================
Reset + typographic base
========================================================================== */

*,
*::before,
*::after{ box-sizing: border-box;}

html{
-webkit-text-size-adjust:100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--nav-h) + 1rem);
}

@media (prefers-reduced-motion:reduce) {
html{ scroll-behavior: auto; }
}

body{
margin: 0;
background:var(--c-void);
color:var(--c-ink);
font-family:var(--f-body);
font-size:var(--fs-body);
line-height: 1.7;
font-synthesis-weight: none;
 -webkit-font-smoothing: antialiased;
overflow-x: hidden;
}

h1,h2, h3, h4{
font-family: var(--f-display);
 line-height: 1.05;
margin: 0 0 var(--sp-3);
letter-spacing: -0.03em;
font-weight: 800;
text-wrap:balance;
}

h1{ font-size:var(--fs-hero);}
h2 { font-size: var(--fs-h2); }
h3 { font-size:var(--fs-h3);letter-spacing: -0.015em; }

p{ margin: 0 0 var(--sp-2); }

a{color: var(--c-cyan); text-decoration:none; }
a:hover{ text-decoration: underline; }

img {
max-width:100%;
height: auto;
display:block;
}

ul{ margin: 0; padding: 0; list-style: none; }

strong {color: var(--c-ink); font-weight: 700; }

/* Accessibility: visible keyboard focus everywhere */
:focus-visible {
outline: 3px solid var(--c-lime);
outline-offset:3px;
border-radius: var(--r-sm);
}

.skip-link{
position:absolute;
left:var(--sp-2);
 top:-100px;
 z-index: 200;
background: var(--c-lime);
color:var(--c-on-lime);
padding: var(--sp-1) var(--sp-3);
border-radius:var(--r-pill);
font-weight:700;
transition: top var(--t-fast) var(--e-out);
}

.skip-link:focus {top:var(--sp-2); text-decoration:none;}

.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;
}

/* --- Shared layout primitives --- */
.wrap{
width: 100%;
max-width: var(--maxw);
margin-inline: auto;
padding-inline:var(--sp-3);
}

.section {padding-block: var(--sp-section); }

.eyebrow {
display:inline-flex;
align-items: center;
 gap:var(--sp-1);
font-family: var(--f-mono);
font-size: var(--fs-micro);
letter-spacing: 0.22em;
text-transform: uppercase;
color:var(--c-lime);
margin-bottom: var(--sp-2);
}

.eyebrow::before{
content:"";
 width: 22px;
height: 2px;
background: var(--c-lime);
}

.lead {
font-size: var(--fs-lead);
color: var(--c-ink-soft);
 max-width:62ch;
}

/* --- Buttons ---*/
.btn {
--btn-bg: var(--c-lime);
 --btn-fg:var(--c-on-lime);
 display:inline-flex;
align-items: center;
 gap:var(--sp-1);
padding:0.9rem 1.75rem;
 background:var(--btn-bg);
color:var(--btn-fg);
 font-weight: 700;
 font-size: var(--fs-small);
letter-spacing: 0.04em;
text-transform:uppercase;
border: 2px solid var(--btn-bg);
border-radius:var(--r-pill);
cursor: pointer;
 transition: transform var(--t-fast) var(--e-out),
box-shadow var(--t-base) var(--e-out),
background var(--t-fast) linear;
}

.btn:hover{
text-decoration: none;
transform:translateY(-3px);
box-shadow: var(--glow-lime);
}

.btn:active {transform: translateY(-1px); }

.btn--ghost {
--btn-bg: transparent;
--btn-fg: var(--c-ink);
 border-color: var(--c-line);
}

.btn--ghost:hover{
 border-color: var(--c-lime);
 color:var(--c-lime);
box-shadow: none;
}

@media (prefers-reduced-motion: reduce){
 .btn:hover { transform: none; }
}