/* ==== Brand tokens (SweetBun : rose + violet) ==== */
:root{
  --brand:#d6246e;        /* rose principal — texte blanc OK (4.8:1) */
  --brand-deep:#a3175a;   /* rose profond, survol */
  --brand-bright:#ff5fa8; /* rose vif, éclats sur fond sombre */
  --brand-soft:#fde7f3;   /* teinte rose claire */
  --violet:#7c3aed;       /* violet principal — texte blanc OK (5.7:1) */
  --violet-deep:#4c1d95;  /* violet profond */
  --violet-bright:#a78bfa;/* violet vif, éclats sur fond sombre */
  --violet-soft:#efe9ff;  /* teinte violette claire */
  --accent:#a855f7;       /* accent (violet-mauve), avec parcimonie */
  --ink:#1d1030;          /* texte sur clair (violet très sombre) */
  --night:#130a22;        /* surfaces sombres (nuit violette) */
  --paper:#fcf8ff;        /* surfaces claires (blanc lavande) */
  --white:#ffffff;
  --muted:#6b5a80;        /* texte secondaire */
  --gradient:linear-gradient(135deg,#d6246e 0%,#a033c8 52%,#7c3aed 100%); /* dégradé signature rose → violet */
}
/* ==== fin des tokens ==== */

/* =====================================================================
   sweetbun-ai.net — "Dating-app gallery" (gallery / magazine lineage)
   Every colour below is derived from the tokens above.
   ===================================================================== */

/* ---------- Theme (semantic aliases) ---------- */
:root{
  color-scheme: light;
  /* light surfaces */
  --bg: var(--paper);
  --surface: var(--white);
  --surface-pink: var(--brand-soft);
  --surface-violet: var(--violet-soft);
  --text: var(--ink);
  --text-soft: color-mix(in srgb, var(--ink) 80%, var(--muted));
  --text-muted: var(--muted);
  --link: var(--brand-deep);
  --line: color-mix(in srgb, var(--violet-deep) 13%, transparent);
  --line-strong: color-mix(in srgb, var(--violet-deep) 26%, transparent);
  --focus: var(--violet);
  /* dark surfaces */
  --dark-bg: var(--night);
  --dark-text: var(--white);
  --dark-soft: color-mix(in srgb, var(--white) 80%, var(--night));
  --dark-focus: var(--violet-bright);
  /* glows & shadows */
  --glow-pink: color-mix(in srgb, var(--brand-bright) 42%, transparent);
  --glow-violet: color-mix(in srgb, var(--violet-bright) 46%, transparent);
  --shadow-soft: 0 22px 50px -30px color-mix(in srgb, var(--violet-deep) 50%, transparent);
  --shadow-card: 0 34px 60px -30px color-mix(in srgb, var(--violet-deep) 70%, transparent), 0 12px 26px -16px color-mix(in srgb, var(--brand-deep) 45%, transparent);
  --shadow-cta: 0 14px 30px -12px color-mix(in srgb, var(--brand) 75%, transparent), 0 8px 22px -10px color-mix(in srgb, var(--violet) 65%, transparent);
  --shadow-cta-hover: 0 20px 44px -12px color-mix(in srgb, var(--brand) 85%, transparent), 0 10px 30px -8px color-mix(in srgb, var(--violet) 75%, transparent);

  /* type */
  --font-display: "Bricolage Grotesque", "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-brand: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --lh-display: 1;
  --lh-head: 1.08;
  --lh-body: 1.7;
  --ls-display: -0.018em;
  --ls-head: -0.02em;
  --ls-label: 0.14em;
  --upper: uppercase;

  /* layout */
  --dx: 1; /* flips horizontal offsets / tilts in RTL */
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --max: 84rem;
  --radius-xl: clamp(1.5rem, 3.2vw, 2.75rem);
  --radius-lg: 1.75rem;
  --radius-md: 1.125rem;
  --radius-pill: 999px;
  --brand-row: 4.5rem;
}

[dir="rtl"]{ --dx: -1; }
[dir="rtl"] .arrow{ transform: scaleX(-1); }

/* ---------- Script-specific stacks & tuning ---------- */
:lang(ar){ --font-display: "Noto Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro", sans-serif; --font-body: "Noto Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro", sans-serif; }
:lang(fa){ --font-display: "Vazirmatn", "Noto Sans Arabic", Tahoma, "Segoe UI", sans-serif; --font-body: "Vazirmatn", "Noto Sans Arabic", Tahoma, "Segoe UI", sans-serif; }
:lang(he){ --font-display: "Noto Sans Hebrew", "Arial Hebrew", "Segoe UI", Arial, sans-serif; --font-body: "Noto Sans Hebrew", "Arial Hebrew", "Segoe UI", Arial, sans-serif; }
:lang(ja){ --font-display: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif; --font-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif; }
:lang(ko){ --font-display: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; --font-body: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; }
:lang(zh-Hans){ --font-display: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; --font-body: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; }
:lang(zh-Hant){ --font-display: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif; --font-body: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif; }
:lang(th){ --font-display: Thonburi, Tahoma, "Noto Sans Thai", "Leelawadee UI", sans-serif; --font-body: Thonburi, Tahoma, "Noto Sans Thai", "Leelawadee UI", sans-serif; }

:lang(ar), :lang(fa), :lang(he), :lang(ja), :lang(ko), :lang(zh-Hans), :lang(zh-Hant), :lang(th){
  --ls-display: 0;
  --ls-head: 0;
  --ls-label: 0;
  --upper: none;
  --lh-display: 1.3;
  --lh-head: 1.35;
  --lh-body: 1.9;
}

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

html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 5.5rem;
}
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior: smooth; }
}

/* elements carrying their own lang (html, language links) pick their script stack */
[lang]{ font-family: var(--font-body); }

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

img, svg{ display: block; max-inline-size: 100%; }
img{ block-size: auto; }

button{ font: inherit; color: inherit; }

a{ color: var(--link); text-underline-offset: .18em; }

h1, h2, h3{
  font-family: var(--font-display);
  overflow-wrap: anywhere;
  hyphens: auto;
  text-wrap: balance;
}

p, li, td, th, figcaption{ overflow-wrap: break-word; }
:lang(ja) :is(h1, h2, h3){ word-break: auto-phrase; }
:lang(ko) :is(h1, h2, h3){ word-break: keep-all; }

.visually-hidden{
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.skip{
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: -6rem;
  z-index: 100;
  padding: .75rem 1.25rem;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
  transition: inset-block-start .2s;
}
.skip:focus{ inset-block-start: 1rem; }
.skip:focus-visible{ outline-color: var(--dark-focus); }

.arrow{ display: inline-block; }

/* ---------- Shared bits ---------- */
.kicker{
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: var(--ls-label);
  text-transform: var(--upper);
  color: var(--brand-deep);
}
.kicker::before{
  content: "";
  flex: none;
  inline-size: 2rem;
  block-size: 3px;
  border-radius: 3px;
  background: var(--gradient);
}
.kicker--light{ color: var(--brand-bright); }

/* ---------- CTA (pill + gradient + glow) ---------- */
.cta{ cursor: pointer; }

button.cta{
  appearance: none;
  border: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  max-inline-size: 100%;
  min-block-size: 3rem;
  padding-block: .55rem;
  padding-inline: 1.5rem .55rem;
  border-radius: var(--radius-pill);
  background: var(--gradient);
  background-size: 170% 170%;
  background-position: 0% 50%;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
  text-wrap: balance;
  box-shadow: var(--shadow-cta);
  transition: transform .25s ease, box-shadow .25s ease, background-position .5s ease;
}
button.cta:hover{
  transform: translateY(-2px);
  background-position: 100% 50%;
  box-shadow: var(--shadow-cta-hover);
}
button.cta:active{ transform: translateY(0) scale(.98); }

.cta__label{ min-inline-size: 0; }

.cta__icon{
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 2.1rem;
  block-size: 2.1rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--white) 22%, transparent);
  font-size: .95rem;
  line-height: 1;
  font-variant-emoji: text;
  transition: transform .25s ease;
}
button.cta:hover .cta__icon{ transform: scale(1.12); }

.cta--lg{
  min-block-size: 3.75rem;
  padding-inline: 1.9rem .6rem;
  font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
}
.cta--lg .cta__icon{ inline-size: 2.65rem; block-size: 2.65rem; font-size: 1.1rem; }

.cta--nav{
  min-block-size: 2.6rem;
  padding-block: .4rem;
  padding-inline: 1.1rem .4rem;
  font-size: .9rem;
  gap: .55rem;
}
.cta--nav .cta__icon{ inline-size: 1.8rem; block-size: 1.8rem; font-size: .85rem; }

button.cta--light{
  background: var(--white);
  color: var(--violet-deep);
  box-shadow: 0 16px 34px -14px color-mix(in srgb, var(--night) 70%, transparent);
}
button.cta--light:hover{ box-shadow: 0 22px 40px -14px color-mix(in srgb, var(--night) 80%, transparent); }
.cta--light .cta__icon{ background: var(--gradient); color: var(--white); }

button.cta--panel{ margin-block-start: 2.25rem; }
.cta__sub{
  flex: none;
  display: inline-flex;
  align-items: center;
  min-block-size: 2.1rem;
  padding: .3rem .95rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--white) 22%, transparent);
  font-size: .9rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- Topline (masthead dateline) ---------- */
.topline{
  background: var(--night);
  color: var(--dark-text);
}
.topline__inner{
  max-inline-size: var(--max);
  margin: 0 auto;
  padding: .55rem var(--gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .15rem .9rem;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--ls-label);
  text-transform: var(--upper);
  text-align: center;
}
.topline__heart{ color: var(--brand-bright); font-variant-emoji: text; }

/* ---------- Header ---------- */
.masthead{
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 97%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  backdrop-filter: saturate(1.5) blur(16px);
  border-block-end: 1px solid var(--line-strong);
  box-shadow: 0 12px 28px -24px color-mix(in srgb, var(--violet-deep) 55%, transparent);
}

.masthead__brand{
  max-inline-size: var(--max);
  margin-inline: auto;
  min-block-size: 4rem;
  padding: .55rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.wordmark{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  flex: none;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius-pill);
}
.wordmark img{
  inline-size: 2.4rem;
  block-size: 2.4rem;
  border-radius: 50%;
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--brand) 60%, transparent);
}
.wordmark__text{
  font-family: var(--font-brand);
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--ls-display);
}
.wordmark__sweet{
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bar-switch{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-block-size: 2.75rem;
  padding-block: .35rem;
  padding-inline: 1rem .35rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.bar-switch__icon{
  position: relative;
  flex: none;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  background: var(--gradient);
}
.bar-switch__icon i{
  position: absolute;
  inset-inline-start: 28%;
  inline-size: 44%;
  block-size: 2px;
  border-radius: 2px;
  background: var(--white);
  transition: transform .25s ease, inset-block-start .25s ease;
}
.bar-switch__icon i:first-child{ inset-block-start: calc(50% - 4px); }
.bar-switch__icon i:last-child{ inset-block-start: calc(50% + 2px); }
.bar-switch[aria-expanded="true"] .bar-switch__icon i:first-child{ inset-block-start: calc(50% - 1px); transform: rotate(45deg); }
.bar-switch[aria-expanded="true"] .bar-switch__icon i:last-child{ inset-block-start: calc(50% - 1px); transform: rotate(-45deg); }

/* mobile / tablet: dropdown panel toggled by #BarSwitch */
.gallery-bar{
  display: none;
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  max-block-size: calc(100vh - 4.5rem);
  max-block-size: calc(100dvh - 4.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem var(--gutter) 1.5rem;
  background: var(--paper);
  border-block-end: 1px solid var(--line);
  box-shadow: 0 30px 50px -30px color-mix(in srgb, var(--violet-deep) 45%, transparent);
}
.gallery-bar.open{
  display: grid;
  gap: 1rem;
}

.sections{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}
.sections a{
  display: flex;
  align-items: baseline;
  gap: .85rem;
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background-color .2s, border-color .2s;
}
.sections a:hover{ background: var(--surface-pink); border-color: transparent; }
.sections__num{
  flex: none;
  font-family: var(--font-display);
  font-weight: 800;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gallery-bar__tools{
  display: grid;
  gap: .75rem;
}
.gallery-bar__tools .cta--nav{ inline-size: 100%; min-block-size: 3rem; }

/* language switcher */
.lang-switch{ position: relative; }
.lang-switch summary{
  list-style: none;
  display: flex;
  align-items: center;
  gap: .5rem;
  min-block-size: 2.6rem;
  padding: .45rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}
.lang-switch summary::-webkit-details-marker{ display: none; }
.lang-switch summary::after{
  content: "";
  flex: none;
  inline-size: .45rem;
  block-size: .45rem;
  margin-inline-start: auto;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: translateY(-2px) rotate(calc(var(--dx) * 45deg));
  transition: transform .2s;
}
.lang-switch[open] summary::after{ transform: translateY(2px) rotate(calc(var(--dx) * 225deg)); }
.lang-switch summary:hover{ border-color: var(--brand); }
.lang-switch__globe{ flex: none; color: var(--brand); }
.lang-switch__current{ min-inline-size: 0; }

.lang-switch__list{
  list-style: none;
  margin: .5rem 0 0;
  padding: .5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .2rem;
  max-block-size: min(45vh, 22rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.lang-switch__list a{
  display: block;
  padding: .5rem .75rem;
  border-radius: .75rem;
  color: var(--ink);
  font-size: .9rem;
  line-height: 1.3;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.lang-switch__list a:hover{ background: var(--surface-pink); }
.lang-switch__list a[aria-current="page"]{
  background: var(--gradient);
  color: var(--white);
  font-weight: 700;
}

/* desktop header: big centred masthead that scrolls away + sticky section strip */
@media (min-width: 75rem){
  html{ scroll-padding-top: 6.5rem; }

  .masthead{ top: calc(-1 * var(--brand-row)); }

  .masthead__brand{
    block-size: var(--brand-row);
    min-block-size: 0;
    padding-block: 0;
    justify-content: center;
    gap: 1.5rem;
  }
  .masthead__brand::before,
  .masthead__brand::after{
    content: "";
    flex: 1;
    block-size: 1px;
    background: linear-gradient(calc(var(--dx) * 90deg), transparent, var(--line-strong) 70%, var(--brand));
  }
  .masthead__brand::after{
    background: linear-gradient(calc(var(--dx) * -90deg), transparent, var(--line-strong) 70%, var(--violet));
  }
  .wordmark img{ inline-size: 2.9rem; block-size: 2.9rem; }
  .wordmark__text{ font-size: 2.35rem; }

  .bar-switch{ display: none; }

  .gallery-bar,
  .gallery-bar.open{
    position: static;
    display: grid;
    /* chapters take the flexible space but never less than their longest word; tools keep their own column */
    grid-template-columns: minmax(min-content, 1fr) auto;
    align-items: center;
    column-gap: 1.25rem;
    max-inline-size: 112rem;
    max-block-size: none;
    margin-inline: auto;
    padding: 0 var(--gutter);
    overflow: visible;
    background: transparent;
    border: 0;
    border-block-start: 1px solid var(--line);
    box-shadow: none;
  }

  .sections{
    display: flex;
    align-self: stretch;
    gap: 0;
  }
  /* flex-basis = one-line width, so long titles get proportionally more room;
     the automatic minimum (longest word) keeps every label inside its own box */
  .sections li{
    display: flex;
    flex: 1 1 auto;
  }
  .sections a{
    position: relative;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: .05rem;
    padding: .5rem .75rem;
    border: 0;
    border-inline-start: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    font-size: .78rem;
    line-height: 1.3;
    overflow-wrap: break-word;
  }
  .sections__title{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  .sections li:first-child a{ border-inline-start: 0; padding-inline-start: 0; }
  .sections a::after{
    content: "";
    position: absolute;
    inset-inline: .75rem;
    inset-block-end: -1px;
    block-size: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--gradient);
    transform: scaleX(0);
    transition: transform .25s ease;
  }
  .sections li:first-child a::after{ inset-inline-start: 0; }
  .sections a:hover{ background: transparent; color: var(--brand-deep); }
  .sections a:hover::after{ transform: scaleX(1); }
  .sections__num{ font-size: .72rem; line-height: 1.2; letter-spacing: .06em; }

  .gallery-bar__tools{
    display: flex;
    align-items: center;
    gap: .65rem;
    padding-block: .6rem;
  }
  .gallery-bar__tools .cta--nav{ inline-size: auto; min-block-size: 2.6rem; white-space: nowrap; }

  /* the language switcher lives in the masthead row (top corner), leaving the pinned bar to the chapters + CTA */
  .lang-switch{
    position: absolute;
    inset-block-start: calc(var(--brand-row) / 2);
    inset-inline-end: max(var(--gutter), (100% - var(--max)) / 2 + var(--gutter));
    z-index: 60;
    transform: translateY(-50%);
  }
  .lang-switch summary{ background: var(--paper); }

  .lang-switch__list{
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: calc(100% + .6rem);
    z-index: 70;
    inline-size: min(24rem, calc(100vw - 2rem));
    max-block-size: min(70vh, 26rem);
    margin: 0;
    box-shadow: var(--shadow-card);
  }
}

/* ---------- Hero ---------- */
.hero{
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(2rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5.5rem);
}
.hero::before,
.hero::after{
  content: "";
  position: absolute;
  z-index: -1;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}
.hero::before{
  inline-size: min(44rem, 90vw);
  inset-block-start: -10rem;
  inset-inline-end: -8rem;
  background: radial-gradient(circle, var(--glow-violet), transparent 68%);
}
.hero::after{
  inline-size: min(40rem, 85vw);
  inset-block-end: -12rem;
  inset-inline-start: -10rem;
  background: radial-gradient(circle, var(--glow-pink), transparent 68%);
}

.hero__inner{
  max-inline-size: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
/* on small screens the profile deck slides in between the CTA and the intro */
.hero__copy{ display: contents; }
.hero__eyebrow{ order: 1; }
.hero__title{ order: 2; }
.hero__action{ order: 3; }
.hero__stage{ order: 4; }
.hero__intro{ order: 5; }

.hero__eyebrow{
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.25rem;
  padding-block: .45rem;
  padding-inline: .75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--white) 80%, transparent);
  box-shadow: var(--shadow-soft);
  color: var(--brand-deep);
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: var(--ls-label);
  text-transform: var(--upper);
}

.pulse{
  position: relative;
  flex: none;
  inline-size: .6rem;
  block-size: .6rem;
  border-radius: 50%;
  background: var(--brand-bright);
  animation: online 2.2s ease-out infinite;
}

.hero__title{
  margin: 0 0 1.75rem;
  max-inline-size: 15em;
  font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.35rem);
  font-weight: 800;
  font-stretch: 94%;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--ink);
  background: linear-gradient(105deg, var(--ink) 0%, var(--ink) 38%, var(--violet-deep) 62%, var(--brand) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero__action{ margin-block-end: 2rem; }

.hero__intro{
  max-inline-size: 36rem;
  color: var(--text-soft);
}
.hero__intro p{ margin: 0 0 1rem; }
.hero__intro p:last-child{ margin-block-end: 0; }
.hero__intro strong{ color: var(--ink); font-weight: 700; }

.hero__stage{
  position: relative;
  margin-block-end: 2rem;
}

/* profile cards = the 3 portrait CTAs */
.deck{
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  margin-inline: calc(-1 * var(--gutter));
  padding: 1.25rem var(--gutter) 1.75rem;
  scrollbar-width: thin;
  scrollbar-color: var(--brand) transparent;
}

.profile{
  position: relative;
  flex: 0 0 min(74%, 17rem);
  margin: 0;
  aspect-ratio: 421 / 600;
  overflow: hidden;
  isolation: isolate;
  border-radius: 1.75rem;
  background: var(--night);
  box-shadow: var(--shadow-card);
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
}
.profile:nth-child(1){ transform: rotate(calc(var(--dx) * -2deg)); }
.profile:nth-child(2){ transform: rotate(calc(var(--dx) * 1.5deg)) translateY(.5rem); }
.profile:nth-child(3){ transform: rotate(calc(var(--dx) * -1deg)); }

.profile img{
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}
.profile::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--night) 92%, transparent) 0%, color-mix(in srgb, var(--violet-deep) 45%, transparent) 34%, transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--night) 40%, transparent) 0%, transparent 22%);
  pointer-events: none;
}
.profile::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 3px;
  background: var(--gradient);
  -webkit-mask: linear-gradient(var(--white) 0 0) content-box, linear-gradient(var(--white) 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(var(--white) 0 0) content-box exclude, linear-gradient(var(--white) 0 0);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.profile:hover::before,
.profile:focus-visible::before{ opacity: 1; }
.profile:hover img,
.profile:focus-visible img{ transform: scale(1.05); }
.profile:hover,
.profile:focus-visible{
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 0 40px 70px -30px color-mix(in srgb, var(--brand-deep) 75%, transparent), 0 16px 30px -18px color-mix(in srgb, var(--violet) 60%, transparent);
}
.profile:focus-visible{ outline-offset: 5px; }

.profile__bars{
  position: absolute;
  inset-block-start: .8rem;
  inset-inline: .9rem;
  z-index: 2;
  display: flex;
  gap: .3rem;
}
.profile__bars i{
  flex: 1;
  block-size: 3px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--white) 40%, transparent);
}
.profile:nth-child(1) .profile__bars i:nth-child(1),
.profile:nth-child(2) .profile__bars i:nth-child(2),
.profile:nth-child(3) .profile__bars i:nth-child(3){ background: var(--white); }

.profile__like{
  position: absolute;
  inset-block-start: 1.6rem;
  inset-inline-end: .9rem;
  z-index: 2;
  display: grid;
  place-items: center;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  border-radius: 50%;
  background: var(--white);
  color: var(--brand);
  font-size: 1.15rem;
  line-height: 1;
  font-variant-emoji: text;
  box-shadow: 0 10px 20px -8px color-mix(in srgb, var(--brand-deep) 70%, transparent);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), background-color .3s, color .3s;
}
.profile:hover .profile__like,
.profile:focus-visible .profile__like{
  transform: scale(1.15);
  background: var(--brand);
  color: var(--white);
}

.profile__meta{
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 2;
  display: grid;
  gap: .35rem;
  padding: 1rem 1.15rem 1.2rem;
  color: var(--white);
  text-align: start;
}
.profile__name{
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.2rem + .6vw, 1.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: var(--ls-head);
  overflow-wrap: anywhere;
}
.profile__online{
  flex: none;
  inline-size: .7rem;
  block-size: .7rem;
  border-radius: 50%;
  background: var(--brand-bright);
  animation: online 2.2s ease-out infinite;
}
.profile:nth-child(2) .profile__online{ animation-delay: .7s; }
.profile:nth-child(3) .profile__online{ animation-delay: 1.4s; }
.profile__caption{
  font-size: .86rem;
  font-weight: 500;
  line-height: 1.35;
  color: color-mix(in srgb, var(--white) 90%, transparent);
}

@keyframes online{
  0%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-bright) 75%, transparent); }
  70%{ box-shadow: 0 0 0 .6rem color-mix(in srgb, var(--brand-bright) 0%, transparent); }
  100%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-bright) 0%, transparent); }
}

/* collage caption = "match" badge */
.hero__badge{
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  max-inline-size: 100%;
  margin: 0;
  padding-block: .55rem;
  padding-inline: .55rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--white) 92%, transparent);
  box-shadow: var(--shadow-card);
}
.hero__badge-heart{
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  border-radius: 50%;
  background: var(--gradient);
  color: var(--white);
  font-size: 1.1rem;
  line-height: 1;
  font-variant-emoji: text;
  box-shadow: var(--shadow-cta);
}
.hero__badge-text{
  display: grid;
  min-inline-size: 0;
  line-height: 1.25;
}
.hero__badge-text strong{
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
}
.hero__badge-text span{
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: var(--upper);
  color: var(--brand-deep);
}

/* tablet: fanned deck */
@media (min-width: 48rem){
  .hero__stage{
    display: grid;
    justify-items: center;
    margin-block-end: 2.5rem;
  }
  .deck{
    justify-content: center;
    gap: 0;
    overflow: visible;
    margin-inline: 0;
    padding: 2rem 1rem 2.5rem;
  }
  .profile{ --overlap: 2.5rem; flex: 0 0 clamp(12rem, 26vw, 15.5rem); }
  .profile + .profile{ margin-inline-start: calc(-1 * var(--overlap)); }
  .profile:nth-child(1) .profile__meta{ padding-inline-end: calc(var(--overlap) + 1.25rem); }
  .profile:nth-child(1) .profile__like{ inset-inline-end: auto; inset-inline-start: .9rem; }
  .profile:nth-child(3) .profile__meta{
    padding-inline-start: calc(var(--overlap) + 1.25rem);
    justify-items: end;
    text-align: end;
  }
  .profile:nth-child(1){ z-index: 1; transform: rotate(calc(var(--dx) * -8deg)) translateY(1.25rem); }
  .profile:nth-child(2){ z-index: 2; transform: translateY(-.5rem) scale(1.04); }
  .profile:nth-child(3){ z-index: 1; transform: rotate(calc(var(--dx) * 8deg)) translateY(1.25rem); }
  .profile:hover,
  .profile:focus-visible{
    z-index: 4;
    transform: rotate(0deg) translateY(-1rem) scale(1.06);
  }
  .hero__badge{ position: relative; z-index: 5; margin-block-start: -.25rem; transform: rotate(calc(var(--dx) * -2deg)); }
}

/* desktop: copy | deck side by side */
@media (min-width: 64rem){
  .hero__inner{
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 4.5rem);
    align-items: center;
  }
  .hero__copy{ display: block; }
  .hero__stage{ order: 0; margin-block-end: 0; }
  .profile{ flex-basis: clamp(11.5rem, 15vw, 15.5rem); }
}

/* ---------- Feature ribbon ---------- */
.ribbon-band{
  overflow-x: clip;
  padding-block: clamp(1.25rem, 3vw, 2.5rem);
}
.ribbon{
  position: relative;
  margin-inline: -2rem;
  padding: 1.15rem calc(var(--gutter) + 2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 2.5rem;
  background: var(--gradient);
  color: var(--white);
  transform: rotate(calc(var(--dx) * -1.25deg));
  box-shadow: 0 24px 50px -24px color-mix(in srgb, var(--violet) 80%, transparent);
}
.ribbon::before{
  content: "";
  position: absolute;
  inset: .4rem 0;
  border-block: 1px dashed color-mix(in srgb, var(--white) 35%, transparent);
  pointer-events: none;
}
.ribbon__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .4rem 1.6rem;
  font-family: var(--font-display);
  font-size: clamp(1rem, .85rem + .7vw, 1.4rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: calc(var(--ls-label) / 2);
  text-transform: var(--upper);
  text-align: center;
}
.ribbon__list li{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.ribbon__list li::before{
  content: "♥";
  font-size: .8em;
  color: color-mix(in srgb, var(--white) 75%, transparent);
  font-variant-emoji: text;
}
.ribbon .cta{ position: relative; }

/* ---------- Contents board (editorial grid) ---------- */
.contents{
  max-inline-size: var(--max);
  margin-inline: auto;
  padding: clamp(3rem, 7vw, 6rem) var(--gutter) clamp(3rem, 6vw, 5rem);
}
.contents__head{
  display: grid;
  justify-items: start;
  gap: .9rem;
  max-inline-size: 50rem;
  margin-block-end: clamp(2rem, 4vw, 3rem);
}
.contents__title{
  margin: 0;
  font-size: clamp(2rem, 1.2rem + 3.3vw, 3.75rem);
  font-weight: 800;
  font-stretch: 92%;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-display);
  color: var(--ink);
}
.contents__grid{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1rem;
}
.contents__grid li{ display: flex; }
.contents__grid a{
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1.4rem 1.4rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  color: var(--ink);
  text-decoration: none;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, border-color .3s;
}
.contents__grid li:nth-child(even) a{ background: linear-gradient(160deg, var(--surface) 55%, var(--surface-violet)); }
.contents__grid li:nth-child(odd) a{ background: linear-gradient(160deg, var(--surface) 55%, var(--surface-pink)); }
.contents__num{
  font-family: var(--font-brand);
  font-size: 2.9rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: calc(var(--ls-display) * 1.5);
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.contents__label{
  flex: 1;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.contents__go{
  align-self: flex-end;
  display: grid;
  place-items: center;
  inline-size: 2.4rem;
  block-size: 2.4rem;
  border-radius: 50%;
  background: var(--surface-pink);
  color: var(--brand-deep);
  font-weight: 700;
  transition: background-color .3s, color .3s, translate .3s;
}
.contents__grid a:hover,
.contents__grid a:focus-visible{
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--brand) 35%, transparent);
  box-shadow: var(--shadow-card);
}
.contents__grid a:hover .contents__go,
.contents__grid a:focus-visible .contents__go{
  background: var(--gradient);
  color: var(--white);
  translate: calc(var(--dx) * 4px) 0;
}

@media (min-width: 40rem) and (max-width: 74.99rem){
  .contents__grid{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .contents__grid li{ grid-column: span 2; }
  .contents__grid li:nth-child(n+4){ grid-column: span 3; }
}
@media (max-width: 39.99rem){
  .contents__grid{ gap: .65rem; }
  .contents__grid a{
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding-block: 1rem;
    padding-inline: 1.1rem 1rem;
    border-radius: var(--radius-md);
  }
  .contents__num{ flex: none; font-size: 2rem; min-inline-size: 2.6rem; }
  .contents__label{ font-size: 1.02rem; }
  .contents__go{ align-self: center; flex: none; inline-size: 2.1rem; block-size: 2.1rem; }
}

/* ---------- Chapters: alternating tinted panels ---------- */
.chapters{
  max-inline-size: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(3rem, 7vw, 6rem);
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.chapter{
  position: relative;
  isolation: isolate;
  overflow: clip;
  border-radius: var(--radius-xl);
  padding: clamp(1.75rem, 5vw, 4.5rem) clamp(1.25rem, 5vw, 4.5rem);
}
.chapter::before,
.chapter::after{
  content: "";
  position: absolute;
  z-index: -1;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(50px);
}
.chapter::before{
  inline-size: min(30rem, 80vw);
  inset-block-start: -10rem;
  inset-inline-end: -8rem;
}
.chapter::after{
  inline-size: min(22rem, 60vw);
  inset-block-end: -8rem;
  inset-inline-start: -6rem;
  background: radial-gradient(circle, color-mix(in srgb, var(--white) 75%, transparent), transparent 70%);
}
.chapter--pink{
  --tone: var(--brand-deep);
  --hl: color-mix(in srgb, var(--violet-bright) 32%, transparent);
  background: var(--surface-pink);
}
.chapter--pink::before{ background: radial-gradient(circle, color-mix(in srgb, var(--brand-bright) 30%, transparent), transparent 70%); }
.chapter--violet{
  --tone: var(--violet-deep);
  --hl: color-mix(in srgb, var(--brand-bright) 28%, transparent);
  background: var(--surface-violet);
}
.chapter--violet::before{ background: radial-gradient(circle, color-mix(in srgb, var(--violet-bright) 40%, transparent), transparent 70%); }

.chapter__layout{
  display: grid;
  gap: 1rem;
}
.chapter__aside{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.25rem;
}
.chapter__num{
  font-family: var(--font-brand);
  font-size: clamp(4.25rem, 2.5rem + 8vw, 10rem);
  font-weight: 800;
  line-height: .85;
  letter-spacing: calc(var(--ls-display) * 1.4);
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-block-end: .05em;
}
.chapter__stamp{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--white) 75%, transparent);
  color: var(--tone);
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: var(--ls-label);
  text-transform: var(--upper);
}
.chapter__stamp::before{
  content: "♥";
  color: var(--brand);
  font-size: .95em;
  letter-spacing: 0;
  font-variant-emoji: text;
}
.chapter__main{ min-inline-size: 0; }
.chapter__title{
  margin: 0 0 1.5rem;
  max-inline-size: 24ch;
  font-size: clamp(1.85rem, 1.1rem + 2.9vw, 3.4rem);
  font-weight: 800;
  font-stretch: 92%;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  color: var(--ink);
}

@media (min-width: 64rem){
  .chapter__layout{
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 4.5rem);
    align-items: start;
  }
  .chapter__aside{
    position: sticky;
    top: 7.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

/* ---------- Prose (chapter bodies) ---------- */
.prose{
  max-inline-size: 44rem;
  color: var(--text-soft);
  font-size: clamp(1rem, .96rem + .2vw, 1.1rem);
}
.prose > p{ margin: 0 0 1.1em; }
.prose > p:first-child{
  font-size: 1.14em;
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink);
}
.prose strong{
  color: var(--ink);
  font-weight: 700;
  background: linear-gradient(transparent 62%, var(--hl, color-mix(in srgb, var(--violet-bright) 30%, transparent)) 62%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.prose h3{
  margin: 2.25em 0 .8em;
  font-size: clamp(1.25rem, 1.05rem + .75vw, 1.6rem);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: var(--ls-head);
  color: var(--ink);
}
.prose h3::before{
  content: "";
  display: block;
  inline-size: 2.5rem;
  block-size: 4px;
  margin-block-end: .8rem;
  border-radius: 4px;
  background: var(--gradient);
}
.prose ul{
  list-style: none;
  margin: 1.5rem 0 1.75rem;
  padding: .4rem 0;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.prose li{
  position: relative;
  padding-block: .8rem;
  padding-inline: 3rem 1.25rem;
  line-height: 1.5;
}
.prose li + li{ border-block-start: 1px solid var(--line); }
.prose li::before{
  content: "♥";
  position: absolute;
  inset-inline-start: 1.25rem;
  inset-block-start: .8rem;
  color: var(--brand);
  font-size: .95em;
  font-variant-emoji: text;
}
.prose li strong{ background: none; }

.table-scroll{
  margin: 1.75rem 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  scrollbar-width: thin;
  scrollbar-color: var(--brand) transparent;
}
.prose table{
  inline-size: 100%;
  min-inline-size: 30rem;
  border-collapse: collapse;
  font-size: .95rem;
  line-height: 1.45;
}
.prose th{
  padding: .95rem 1.1rem;
  background: var(--gradient);
  background-size: 300% 100%;
  color: var(--white);
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: calc(var(--ls-label) / 2);
  text-transform: var(--upper);
  text-align: start;
  vertical-align: bottom;
}
.prose th:nth-child(1){ background-position: 0% 50%; }
.prose th:nth-child(2){ background-position: 50% 50%; }
.prose th:nth-child(3){ background-position: 100% 50%; }
.prose td{
  padding: .95rem 1.1rem;
  border-block-start: 1px solid var(--line);
  color: var(--text-soft);
  text-align: start;
  vertical-align: top;
}
@media (max-width: 39.99rem){
  .prose table{ min-inline-size: 0; font-size: .86rem; }
  .prose th{ padding: .8rem .7rem; font-size: .7rem; }
  .prose td{ padding: .8rem .7rem; hyphens: auto; }
}
.prose tr:nth-child(odd) td{ background: color-mix(in srgb, var(--violet-soft) 55%, transparent); }
.prose td:first-child{ color: var(--ink); font-weight: 700; }

/* ---------- FAQ as a chat thread ---------- */
.chapter--faq .prose{
  max-inline-size: 52rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.chapter--faq .prose > h3{
  align-self: flex-end;
  max-inline-size: min(90%, 38rem);
  margin: 1.75rem 0 .3rem;
  padding: .9rem 1.3rem;
  border-radius: 1.5rem;
  border-end-end-radius: .4rem;
  background: var(--gradient);
  color: var(--white);
  font-size: clamp(1.02rem, .98rem + .3vw, 1.2rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  box-shadow: var(--shadow-cta);
}
.chapter--faq .prose > h3:first-child{ margin-block-start: 0; }
.chapter--faq .prose > h3::before{ content: none; }
.chapter--faq .prose > p{
  align-self: flex-start;
  max-inline-size: min(94%, 42rem);
  margin: 0;
  padding: .95rem 1.25rem;
  border-radius: 1.5rem;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  color: var(--text-soft);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
}
.chapter--faq .prose > p:not(:has(+ p)){ border-end-start-radius: .4rem; }
.chapter--faq .prose strong{ background: linear-gradient(transparent 62%, color-mix(in srgb, var(--brand-bright) 26%, transparent) 62%); }

/* ---------- Closing (dark romantic band) ---------- */
.closing{
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(4rem, 10vw, 8rem) var(--gutter);
  background: var(--dark-bg);
  color: var(--dark-text);
  text-align: center;
}
.closing::before,
.closing::after{
  content: "";
  position: absolute;
  z-index: -1;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}
.closing::before{
  inline-size: min(42rem, 95vw);
  inset-block-start: -14rem;
  inset-inline-start: -10rem;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 55%, transparent), transparent 68%);
}
.closing::after{
  inline-size: min(46rem, 95vw);
  inset-block-end: -16rem;
  inset-inline-end: -10rem;
  background: radial-gradient(circle, color-mix(in srgb, var(--violet) 60%, transparent), transparent 68%);
}
.closing__inner{
  position: relative;
  max-inline-size: 58rem;
  margin-inline: auto;
  display: grid;
  justify-items: center;
  gap: 1.5rem;
}
.closing__avatars{
  display: flex;
  align-items: center;
  margin-block-end: .5rem;
}
.closing__avatars img{
  inline-size: 3.6rem;
  block-size: 3.6rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 15%;
  border: 3px solid var(--night);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-bright) 70%, transparent);
}
.closing__avatars img + img,
.closing__avatars-heart{ margin-inline-start: -.9rem; }
.closing__avatars-heart{
  display: grid;
  place-items: center;
  inline-size: 3.6rem;
  block-size: 3.6rem;
  border-radius: 50%;
  border: 3px solid var(--night);
  background: var(--gradient);
  color: var(--white);
  font-size: 1.35rem;
  line-height: 1;
  font-variant-emoji: text;
}
.closing__title{
  margin: 0;
  max-inline-size: 18em;
  font-size: clamp(2.2rem, 1.2rem + 4.4vw, 4.75rem);
  font-weight: 800;
  font-stretch: 90%;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--white);
}
.closing .cta{ margin-block-start: .75rem; }
.cta--glow{ animation: glow 3.2s ease-in-out infinite; }
.closing :focus-visible{ outline-color: var(--dark-focus); }

.closing__hearts i{
  position: absolute;
  z-index: -1;
  font-style: normal;
  line-height: 1;
  color: var(--brand-bright);
  font-variant-emoji: text;
  opacity: .5;
  animation: float 7s ease-in-out infinite;
}
.closing__hearts i:nth-child(1){ inset-block-start: 14%; inset-inline-start: 8%; font-size: 2.2rem; }
.closing__hearts i:nth-child(2){ inset-block-start: 24%; inset-inline-end: 10%; font-size: 1.4rem; color: var(--violet-bright); animation-delay: -2s; }
.closing__hearts i:nth-child(3){ inset-block-end: 16%; inset-inline-start: 14%; font-size: 1.1rem; color: var(--violet-bright); animation-delay: -4s; }
.closing__hearts i:nth-child(4){ inset-block-end: 22%; inset-inline-end: 7%; font-size: 2.6rem; animation-delay: -1s; opacity: .35; }
.closing__hearts i:nth-child(5){ inset-block-start: 8%; inset-inline-end: 34%; font-size: .9rem; animation-delay: -5s; }

@keyframes float{
  0%, 100%{ transform: translateY(0) rotate(-8deg); }
  50%{ transform: translateY(-14px) rotate(8deg); }
}
@keyframes glow{
  0%, 100%{ box-shadow: var(--shadow-cta); }
  50%{ box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand-bright) 18%, transparent), 0 18px 50px -10px color-mix(in srgb, var(--brand-bright) 70%, transparent); }
}

/* ---------- Footer ---------- */
.site-footer{
  overflow: clip;
  padding: clamp(3rem, 6vw, 4.5rem) var(--gutter) 0;
  background: var(--bg);
  color: var(--text-soft);
}
.site-footer__inner{
  max-inline-size: var(--max);
  margin-inline: auto;
  display: grid;
  gap: 1.5rem 3rem;
  align-items: start;
}
.site-footer__brand{ display: grid; justify-items: start; gap: .6rem; }
.site-footer__tagline{
  margin: 0;
  font-family: var(--font-display);
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: var(--ls-label);
  text-transform: var(--upper);
  color: var(--muted);
}
.site-footer__independent{
  margin: 0;
  max-inline-size: 42rem;
  font-size: .98rem;
  line-height: 1.65;
}
.site-footer__top{
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s, color .2s;
}
.site-footer__top:hover{ border-color: var(--brand); color: var(--brand-deep); }

.site-footer__langs{
  max-inline-size: var(--max);
  margin: 2.5rem auto 0;
  padding-block-start: 2rem;
  border-block-start: 1px solid var(--line);
}
.site-footer__langs-title{
  margin: 0 0 1rem;
  font-size: .8rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: var(--ls-label);
  text-transform: var(--upper);
  color: var(--ink);
}
.site-footer__langs ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.site-footer__langs a{
  display: inline-block;
  padding: .32rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-soft);
  font-size: .84rem;
  line-height: 1.4;
  text-decoration: none;
  transition: border-color .2s, color .2s;
}
.site-footer__langs a:hover{ border-color: var(--brand); color: var(--brand-deep); }
.site-footer__langs a[aria-current="page"]{
  border-color: transparent;
  background: var(--gradient);
  color: var(--white);
  font-weight: 700;
}
.site-footer__legal{
  max-inline-size: var(--max);
  margin: 2rem auto 0;
  font-size: .84rem;
  color: var(--muted);
}
.site-footer__mark{
  margin: 1.5rem 0 0;
  font-family: var(--font-brand);
  font-size: clamp(4rem, 18.5vw, 17rem);
  font-weight: 800;
  line-height: .78;
  letter-spacing: calc(var(--ls-display) * 2.2);
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 26%, transparent), color-mix(in srgb, var(--violet) 8%, transparent) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
}

@media (min-width: 64rem){
  .site-footer__inner{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) auto; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .pulse, .profile__online, .cta--glow, .closing__hearts i{ animation: none; }
}