:root{
  --bg:            #10131A;
  --bg-soft:       #14171F;
  --surface:       #171B24;
  --surface-hover: #1D222D;
  --border:        #262B36;
  --text:          #EDEDEF;
  --text-muted:    #9AA0AC;
  --text-faint:    #5C6270;

  --accent:        #F46157;
  --accent-dim:    #5C2822;
  --accent-2:      #4CD3C2;
  --accent-2-dim:  #245952;

  --font-display: "Chillax", sans-serif;
  --font-body: "Public Sans", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --max-w: 1240px;
  --gutter: clamp(16px, 4.2vw, 40px);
  --radius: 14px;
}

@font-face {
    font-family: "Chillax";
    src: url("../fonts/Chillax-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:0;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.015) 0px,
    rgba(255,255,255,0.015) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode:overlay;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }

.wrap{
  max-width:var(--max-w);
  margin:0 auto;
  padding-inline:var(--gutter);
  width:100%;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent-2);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 18px;
}
.eyebrow::before{
  content:"";
  width:7px; height:7px;
  background:var(--accent);
  border-radius:1px;
  display:inline-block;
  box-shadow:0 0 8px var(--accent);
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-0.01em;
  margin:0;
  color:var(--text);
}

/* =========================================================
   SECTION SHELL (shared across sections)
   ========================================================= */
section{ padding:88px 0; border-top:1px solid var(--border); }
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:48px;
  flex-wrap:wrap;
}
.section-head h2{
  font-size:clamp(26px, 3.2vw, 38px);
  max-width:18ch;
}
.section-head .hint{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--text-faint);
  white-space:nowrap;
}

.two-column{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:56px;
}