:root {
  /* Colors */
  --c-bg:            #120215;
  --c-text:          #ffffff;
  --c-accent:        #a264ff;
  --c-overlay:       rgba(24, 0, 35, 0.56);

  /* Fluid type — value at 1920px = the Figma value */
  --fs-h1:           clamp(26px, 2.083vw, 40px);   /* 40px  */
  --fs-body:         clamp(16px, 1.25vw, 24px);    /* 24px  */
  --fs-logo:         clamp(22px, 1.687vw, 32.4px); /* 32.4px */
  --fs-logo-sub:     clamp(16px, 1.261vw, 24.2px); /* 24.2px */

  /* Fluid spacing */
  --gap-inner:       clamp(12px, 1.042vw, 20px);   /* 20px  */
  --gap-block:       clamp(48px, 5.208vw, 100px);  /* 100px */
  --pad-page:        clamp(20px, 11.458vw, 220px); /* 220px */
  --pad-header:      clamp(20px, 5.208vw, 100px);  /* 100px */
  --pad-top:         clamp(24px, 3.125vw, 60px);   /* 60px  */
  --pad-bottom:      clamp(80px, 11.979vw, 230px); /* 230px */

  --shadow-text:     0 4px 2.25px rgba(0, 0, 0, 0.25);
}

/* ---------- 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: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 400;
  overflow-x: hidden;
}

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

h1, h2, p { margin: 0; }

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

/* ---------- 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;
}

/* Noise/bokeh backdrop — sticky in the mockup, so it stays put while scrolling.
   bg.jpg: "Christmas Lights Bokeh Effect (Unsplash).jpg", Wikimedia Commons, CC0 (public domain),
   colour-graded to the violet palette and darkened. */
.page__bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: url("/assets/images/bg.jpg?v=2");
  background-size: cover;
  background-position: center top;
  filter: blur(3.9px);
  transform: scale(1.03);    /* hides the soft edge created by the blur */
  pointer-events: none;
}

.page__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(18, 2, 21, 0) 71.693%, rgb(18, 2, 21) 100%),
    linear-gradient(90deg, var(--c-overlay) 0%, var(--c-overlay) 100%);
}

/* ---------- Decorative neon suits ----------
   decor/*.png: neon renders of the CC0 "Playing Card Suit - Swiss-French" club/diamond/heart/spade
   shapes (Wikimedia Commons); "-2" files and spade-1 carry the original 22–33% baked-in opacity. */
.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);
  opacity: var(--op, 1);
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  filter: blur(var(--blur, 0px));
  object-fit: cover;
}

/* x/y are the centre of the shape as a % of the 1920×2083 artboard */
.decor__item--cross-1    { --x: 0.68%;  --y: 18.17%; --w: 21.88%; --ar: 420 / 427;             --rot: -43.68deg; }
.decor__item--cross-2    { --x: 78.52%; --y: 12.78%; --w: 15.96%; --ar: 306.433 / 311.519;     --rot: -0.9deg;  --blur: 9.55px; --op: 0.22; }
.decor__item--diamonds-1 { --x: 100.3%; --y: 26.50%; --w: 27.40%; --ar: 526 / 616; }
.decor__item--diamonds-2 { --x: 13.74%; --y: 86.69%; --w: 13.19%; --ar: 253.196 / 296.476;     --rot: 13.43deg; --blur: 2.5px;  --op: 0.33; }
.decor__item--hearts-1   { --x: 2.07%;  --y: 47.22%; --w: 15.21%; --ar: 292.064 / 285.672;     --rot: 32.42deg; }
.decor__item--hearts-2   { --x: 90.85%; --y: 58.35%; --w: 14.00%; --ar: 268.708 / 262.828;     --rot: 0.43deg;  --blur: 2.5px;  --op: 0.33; }
.decor__item--spade-1    { --x: 93.13%; --y: 88.96%; --w: 24.79%; --ar: 476 / 514;                                              --op: 0.33; }
.decor__item--spade-2    { --x: 26.77%; --y: 36.16%; --w: 6.61%;  --ar: 127.002 / 137.112;     --rot: -25.7deg; --blur: 4.5px;  --op: 0.33; }

/* ---------- Header ---------- */
.header {
  padding: var(--pad-top) var(--pad-header) 0;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 1.068vw, 20.5px);
  min-height: clamp(57px, 4.805vw, 92.25px); /* logo lockup box from the mockup */
  vertical-align: top;
  /* the text lockup used to leave its baseline gap under the box (1.5px → 0 at 1920px); keep it */
  margin-bottom: clamp(0px, 3.74px - 0.1948vw, 1.5px);
}

/* Logo = one per-domain image (assets/images/logo/<host-without-dots>.png),
   sized to the lockup box of the mockup; any other logo is contained in the same box. */
.logo img {
  display: block;
  height: clamp(57px, 4.805vw, 92.25px);
  width: auto;
  max-width: min(640px, calc(100vw - 2 * var(--pad-header)));
  object-fit: contain;
  object-position: left center;
}

/* 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-size: var(--fs-logo); font-weight: 700; white-space: nowrap; }

/* ---------- Content ---------- */
.content {
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  padding-inline: var(--pad-page);
  padding-top: var(--gap-block);
  display: flex;
  flex-direction: column;
  gap: var(--gap-block);
}

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

.block--conclusion {
  max-width: 880px;
  margin-inline: auto;
  width: 100%;
  text-shadow: none;         /* the mockup drops the shadow on this block */
}

.block__title {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.21;
}

.block__title--h1 {
  font-size: var(--fs-h1);
  line-height: 1.22;
}

.block__text {
  font-size: var(--fs-body);
  line-height: 1.21;
  text-align: justify;
  overflow-wrap: break-word;
}

/* ---------- Adaptive tweaks ---------- */

/* Tablet and below: looser leading and ragged-right keep the copy readable
   once the columns get narrow. */
@media (max-width: 900px) {
  .block__text {
    text-align: left;
    line-height: 1.55;
  }

  .block__title { line-height: 1.35; }

  .decor { opacity: 0.8; }
}

@media (max-width: 600px) {
  :root {
    --fs-h1:   clamp(24px, 6.4vw, 30px);
    --fs-body: clamp(15px, 4.2vw, 18px);
  }

  .decor__item--cross-1,
  .decor__item--hearts-1 { --w: 46%; }

  .decor__item--diamonds-1 { --w: 56%; }
  .decor__item--spade-1    { --w: 52%; }

  /* the shapes sit under the copy on narrow screens — keep them subtle */
  .decor { opacity: 0.5; }
}

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