:root {
  /* Colors — deep ocean / aurora palette */
  --c-bg:            #04101a;
  --c-text:          #eaf6ff;
  --c-muted:         rgba(234, 246, 255, 0.78);
  --c-accent:        #67e8f9;   /* cyan  */
  --c-accent-2:      #a78bfa;   /* violet — echoes the logo arrow */
  --c-accent-3:      #5eead4;   /* mint  */
  --c-overlay:       rgba(3, 12, 22, 0.46);
  --c-glass:         rgba(255, 255, 255, 0.055);
  --c-glass-border:  rgba(255, 255, 255, 0.14);

  /* Type */
  --ff-display:      "Syne", "Segoe UI", Arial, sans-serif;
  --ff-body:         "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-h1:           clamp(32px, 3.4vw, 64px);
  --fs-h2:           clamp(22px, 1.65vw, 32px);
  --fs-body:         clamp(16px, 1.05vw, 20px);
  --fs-label:        clamp(11px, 0.72vw, 13px);
  --fs-logo:         clamp(22px, 1.687vw, 32.4px);

  /* Spacing */
  --gap-inner:       clamp(12px, 1vw, 20px);
  --gap-block:       clamp(44px, 4.6vw, 88px);
  --pad-page:        clamp(20px, 6vw, 120px);
  --pad-header:      clamp(20px, 5.208vw, 100px);
  --pad-top:         clamp(22px, 2.6vw, 48px);
  --pad-bottom:      clamp(80px, 10vw, 200px);
  --content-w:       1080px;

  --shadow-text:     0 2px 18px rgba(2, 10, 20, 0.55);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--c-bg);
  color: var(--c-text);
  font-family: var(--ff-body);
  font-weight: 400;
  overflow-x: hidden;
}

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

h1, h2, p { margin: 0; }

a { color: inherit; text-decoration: none; }

::selection { background: rgba(103, 232, 249, 0.35); color: #fff; }

/* ---------- Page shell ---------- */
.page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;          /* clips the decor shapes that bleed off-canvas */
  padding-bottom: var(--pad-bottom);
  isolation: isolate;
}

/* thin aurora line along the very top edge */
.page::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 2;
  background: linear-gradient(90deg, var(--c-accent-3), var(--c-accent) 45%, var(--c-accent-2));
  opacity: .9;
}

/* Fixed abstract backdrop — stays put while the page scrolls over it (parallax).
   bg.jpg is generated procedurally (navy → teal aurora ribbons). */
.page__bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: url("/assets/images/bg.jpg?v=3");
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

/* film grain — a repeating tile so it stays crisp at any size */
.page__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/images/grain.png") repeat;
  background-size: 256px 256px;
  opacity: .32;
  mix-blend-mode: overlay;
}

/* tint + bottom fade so the copy always sits on something dark enough */
.page__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 50% 38%, rgba(3, 12, 22, 0.28) 0%, rgba(3, 12, 22, 0) 100%),
    linear-gradient(180deg, rgba(4, 16, 26, 0) 60%, rgb(4, 16, 26) 100%),
    linear-gradient(90deg, var(--c-overlay) 0%, var(--c-overlay) 100%);
}

/* ---------- Abstract decor (sides) ---------- */
.decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.decor__item {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: auto;
  aspect-ratio: var(--ar, 1);
  opacity: var(--op, 1);
  transform: translate(-50%, calc(-50% + var(--py, 0px))) rotate(var(--rot, 0deg));
  filter: blur(var(--blur, 0px)) drop-shadow(0 30px 60px rgba(0, 0, 0, 0.35));
  will-change: transform;
}

/* x/y = centre of the shape as a % of the page; --py is driven by assets/js/parallax.js */
.decor__item--ring   { --x: 90%;  --y: 16%; --w: 24%;  --rot: 14deg;  }
.decor__item--blob   { --x: 3%;   --y: 26%; --w: 19%;  --rot: -18deg; --op: .95; }
.decor__item--wave   { --x: 88%;  --y: 46%; --w: 46%;  --ar: 900 / 500; --rot: -8deg; --op: .9; }
.decor__item--dots   { --x: 15%;  --y: 62%; --w: 28%;  --op: .55; }
.decor__item--orb    { --x: 93%;  --y: 78%; --w: 20%;  --op: .9; }
.decor__item--arcs   { --x: 3%;   --y: 92%; --w: 30%;  --op: .8; }
.decor__item--mini-1 { --x: 32%;  --y: 12%; --w: 5%;   --rot: 40deg;  --blur: 2px; --op: .5; }
.decor__item--mini-2 { --x: 70%;  --y: 70%; --w: 7%;   --rot: -30deg; --blur: 3px; --op: .35; }

/* ---------- Header ---------- */
.header {
  padding: var(--pad-top) var(--pad-header) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 1.068vw, 20.5px);
  min-height: clamp(50px, 4.2vw, 80px);
  vertical-align: top;
}

/* Logo = one per-domain image (assets/images/logo/<host-without-dots>.png) */
.logo img {
  display: block;
  height: clamp(50px, 4.2vw, 80px);
  width: auto;
  max-width: min(640px, calc(100vw - 2 * var(--pad-header)));
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 6px 24px rgba(2, 10, 20, 0.6));
}

/* Placeholder wordmark (only until a per-domain logo file is dropped in) */
.brand-mark { display: inline-flex; align-items: center; gap: clamp(10px, 1.068vw, 20.5px); }
.brand-emblem { width: clamp(52px, 4.377vw, 84px); height: clamp(52px, 4.377vw, 84px); flex: none; }
.brand-name { font-family: var(--ff-display); font-size: var(--fs-logo); font-weight: 700; white-space: nowrap; }

.header__tag {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-muted);
  padding: 10px 16px;
  border: 1px solid var(--c-glass-border);
  border-radius: 999px;
  background: var(--c-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  white-space: nowrap;
}

/* ---------- Content ---------- */
.content {
  width: 100%;
  max-width: calc(var(--content-w) + 2 * var(--pad-page));
  margin-inline: auto;
  padding-inline: var(--pad-page);
  padding-top: clamp(56px, 7vw, 120px);
  display: flex;
  flex-direction: column;
  gap: var(--gap-block);
  counter-reset: section;
}

.block {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inner);
  text-shadow: var(--shadow-text);
  position: relative;
}

/* numbered badge + accent rule on every section after the intro */
.block:not(.block--intro):not(.block--conclusion) {
  counter-increment: section;
  padding-left: clamp(22px, 2.4vw, 44px);
  border-left: 1px solid var(--c-glass-border);
}

.block:not(.block--intro):not(.block--conclusion)::before {
  content: "0" counter(section);
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -10%);
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: var(--fs-label);
  letter-spacing: .14em;
  color: #04101a;
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent-3));
  padding: 6px 8px;
  border-radius: 8px;
  text-shadow: none;
  box-shadow: 0 0 0 4px rgba(4, 16, 26, 0.65), 0 0 28px rgba(103, 232, 249, 0.35);
}

.block--intro {
  max-width: 920px;
}

.block--intro::after {
  content: "";
  width: clamp(64px, 7vw, 120px);
  height: 2px;
  margin-top: var(--gap-inner);
  background: linear-gradient(90deg, var(--c-accent), var(--c-accent-2));
  border-radius: 2px;
}

.block__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.block__title--h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.025em;
  background: linear-gradient(100deg, #ffffff 0%, #d9fbff 45%, var(--c-accent) 75%, var(--c-accent-2) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 10px 30px rgba(2, 10, 20, 0.55));
}

.block__text {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--c-muted);
  text-align: left;
  overflow-wrap: break-word;
  max-width: 72ch;
}

.block--intro .block__text {
  font-size: calc(var(--fs-body) * 1.12);
  color: var(--c-text);
}

/* Conclusion = frosted glass card */
.block--conclusion {
  margin-top: clamp(8px, 1.5vw, 24px);
  padding: clamp(24px, 3vw, 48px);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
  border: 1px solid var(--c-glass-border);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  text-shadow: none;
  overflow: hidden;
}

.block--conclusion::before {
  content: "";
  position: absolute;
  inset: auto -20% -60% auto;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(103, 232, 249, 0.28), rgba(103, 232, 249, 0) 70%);
  pointer-events: none;
}

.block--conclusion .block__title {
  color: var(--c-accent-3);
}

.block--conclusion .block__text { max-width: none; }

/* ---------- Adaptive tweaks ---------- */
@media (max-width: 900px) {
  .header__tag { display: none; }
  .decor { opacity: 0.85; }
  .decor__item--wave { --w: 80%; --x: 92%; }
  .decor__item--ring { --w: 40%; --x: 96%; }
  .decor__item--blob { --w: 38%; --x: 2%; }
  .decor__item--orb  { --w: 34%; }
  .decor__item--arcs { --w: 50%; }
  .decor__item--dots { --w: 44%; }
}

@media (max-width: 600px) {
  :root {
    --fs-h1:   clamp(28px, 8vw, 36px);
    --fs-h2:   clamp(20px, 5.6vw, 24px);
    --fs-body: clamp(15px, 4.2vw, 17px);
  }
  .block:not(.block--intro):not(.block--conclusion) { padding-left: 16px; }
  .block:not(.block--intro):not(.block--conclusion)::before {
    position: static;
    transform: none;
    align-self: flex-start;
    margin-bottom: -4px;
  }
  .decor__item--ring { --x: 104%; --y: 30%; }
  .decor__item--blob { --x: -4%; }
  .block--conclusion { border-radius: 20px; }
  /* the shapes sit under the copy on narrow screens — keep them subtle */
  .decor { opacity: 0.55; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  .decor__item { --py: 0px !important; }
}