/* ===================================================================
   Global theme
=================================================================== */
:root{
  --bg:#0b1220;              /* page background */
  --card:rgba(20,26,41,.60); /* frosted cards */
  --text:#e6ebff;            /* primary text */
  --sub:#b8c0d9;             /* secondary text */
  --accent:#ffd38a;          /* golden accent */
  --link:#9ae6ff;            /* link color */
  --border:rgba(255,255,255,.12);
  --radius:18px;
  --maxw:1200px;
}

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

.font-serif{ font-family:"DM Serif Display", Georgia, serif; }
a{ color:var(--link); text-decoration:underline; text-underline-offset:4px; }

/* ===================================================================
   Layout & containers
=================================================================== */
.container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.section{ padding:80px 0; position:relative; z-index:1; } /* ensure content sits above canvas */
.kicker{ letter-spacing:.18em; text-transform:uppercase; color:var(--accent); font-size:12px; margin:0 0 8px; }
h1,h2,h3{ margin:0; line-height:1.15; }
h2{ font-size:34px; }
p{ color:var(--sub); margin:12px 0 0; line-height:1.7; }

/* ===================================================================
   DNA CANVAS — make sure it shows up
   - The canvas lives inside .page-wrap as <canvas class="dna-backdrop">
   - We pin it to the edges and place it behind content
=================================================================== */
.page-wrap{
  position:relative;
  /* Give the wrapper some minimum height so the canvas is visible even on short pages */
  min-height: 60vh;
  isolation:isolate; /* create a new stacking context for safety */
}
.dna-backdrop{
  position:absolute;
  inset:0;            /* top:0 right:0 bottom:0 left:0 */
  display:block;
  width:100%;
  height:100%;
  min-height:420px;   /* safety: ensures canvas never collapses */
  z-index:-1;         /* behind content */
  pointer-events:none;/* not clickable */
  opacity:.95;        /* subtle glow—animation code handles color/gradient */
  /* If you ever want a static fallback color while JS loads, uncomment:
  background: radial-gradient(1200px 600px at 30% 0%, rgba(34,211,238,.08), transparent 60%),
              radial-gradient(1200px 600px at 90% 100%, rgba(251,191,36,.08), transparent 60%);
  */
}
.overlay-soft{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(11,18,32,0) 0%, rgba(11,18,32,.35) 70%);
}

/* ===================================================================
   Cards, buttons
=================================================================== */
.card{ background:var(--card); backdrop-filter:blur(8px); border:1px solid var(--border); border-radius:var(--radius); }
.card .pad{ padding:26px; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  border-radius:999px; padding:12px 20px; text-decoration:none; font-weight:600;
  cursor:pointer;
}
.btn-primary{ background:rgba(251,191,36,.92); color:#1a1a1a; }
.btn-ghost{ border:1px solid rgba(255,255,255,.2); color:#fff; background:transparent; }

/* ===================================================================
   Navigation
=================================================================== */
.nav-wrap{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(10px);
  background:rgba(11,18,32,.60);
}
.nav{ display:flex; align-items:flex-end; justify-content:space-between; padding:14px 0; }
.menu{ display:flex; gap:20px; }
.menu a{ color:#cbd6f5; font-size:14px; text-decoration:none; }
.menu a.active{ color:#fff; }

/* ===================================================================
   Hero
=================================================================== */
header.hero{ position:relative; overflow:hidden; }
.bg-grad{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse at top left, rgba(45,212,191,.12), transparent 40%),
    radial-gradient(ellipse at bottom right, rgba(251,191,36,.10), transparent 40%);
}
.blob{
  position:absolute; left:50%; top:-140px; width:1000px; height:380px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,#2dd4bf,#22d3ee,#34d399);
  filter:blur(80px); opacity:.35; border-radius:1000px; pointer-events:none;
}
.hero-inner{ padding:80px 0; }
h1.hero-title{ font-size:40px; line-height:1.05; }
@media(min-width:900px){ h1.hero-title{ font-size:64px; } }

/* ===================================================================
   Figure (image + text grid)
=================================================================== */
.figure{ display:grid; gap:20px; grid-template-columns:1fr; align-items:center; }
.figure img{ width:100%; height:auto; border-radius:16px; border:1px solid var(--border); }
@media(min-width:900px){ .figure{ grid-template-columns:1fr 1.2fr; } }

/* =====================================================*