/* =============================================================================
   aguna.app, October 2026 rebuild.                          (/css/site-2026b.css)
   King, 10 Oct: "our website looks super sloppy, touch it up properly, pull every
   Emil Kowalski and Jakub Krehel ui skill and design system pattern, also check my
   Leon Lin bookmark". Built from those skills:
   - one navy canvas, cream words, gold only as the one primary button fill and
     short gold-ink headline words (contrast measured: gold ink fails on cream)
   - Manrope for every word and number, Archivo Black for the wordmark only
   - no glow, no pointer effects, no tilt, no marquee, no serif, no fake stats
   - motion: one staged hero entrance and a once-only reveal per section, ease-out,
     transform and opacity only, all of it off under reduced motion
   ============================================================================= */

@font-face { font-family: 'Manrope'; src: url('/fonts2026/manrope-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/fonts2026/manrope-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/fonts2026/manrope-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/fonts2026/manrope-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/fonts2026/manrope-latin-800-normal.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Archivo Black'; src: url('/fonts2026/archivo-black-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --navy: #0F2547;
  --canvas: #0B1C38;
  --raised: #12284D;
  --cream: #FAF6EC;
  --muted: #A9B4C7;
  --line: oklch(1 0 0 / 0.08);
  --line-strong: oklch(1 0 0 / 0.13);
  --gold-fill: linear-gradient(in oklab 180deg, #F3E0A0 0%, #D5B660 52%, #B6943D 100%);
  --gold-ink: linear-gradient(in oklab 180deg, #FBEBB8 0%, #E8CB7A 38%, #CBA84E 66%, #A9852F 100%);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --radius-card: 24px;
  --nav-h: 68px;
  --font: 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-padding-top: calc(var(--nav-h) + 16px); background: var(--canvas); }
body {
  margin: 0; background: var(--canvas); color: var(--cream);
  font-family: var(--font); font-size: 1rem; line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

.skip { position: absolute; left: 16px; top: -48px; padding: 10px 14px; border-radius: 10px; background: var(--cream); color: var(--navy); font-weight: 700; z-index: 100; text-decoration: none; }
.skip:focus-visible { top: 12px; }
:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; border-radius: 8px; }

.wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }
.ink { background: var(--gold-ink); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---- nav: the only translucent surface (fixed chrome) ---- */
.nav {
  position: sticky; top: 0; z-index: 50; height: var(--nav-h);
  background: oklch(0.2 0.05 260 / 0.82);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
@media (prefers-reduced-transparency: reduce) { .nav { background: var(--canvas); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.nav .wrap { height: 100%; display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.brand span { font-family: 'Archivo Black', var(--font); font-size: 1.125rem; letter-spacing: 0.06em; color: var(--cream); }
.nav nav { margin-left: auto; }
.nav ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nav ul a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; font-weight: 600; font-size: 0.9375rem; color: var(--muted); border-radius: 10px; transition: color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .nav ul a:hover { color: var(--cream); } }
@media (max-width: 760px) { .nav nav { display: none; } .nav .btn { margin-left: auto; } }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
  font: 700 1rem/1 var(--font); white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: scale 150ms ease-out, background-color 150ms ease;
}
.btn:not(:disabled):active { scale: 0.96; }
.btn-gold { background: var(--gold-fill); color: var(--navy); box-shadow: 0 6px 16px oklch(0.12 0.05 260 / 0.45), inset 0 1px 0 oklch(1 0 0 / 0.55); }
.nav .btn { min-height: 40px; padding: 0 16px; font-size: 0.9375rem; }
.link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--cream); text-decoration: underline; text-decoration-color: oklch(1 0 0 / 0.3); text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .link:hover { text-decoration-color: var(--cream); } }

/* ---- hero ---- */
.hero { padding: 72px 0 96px; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(2.5rem, 5.4vw, 4.25rem); line-height: 1.04; }
.hero .sub { margin-top: 20px; max-width: 34ch; font-size: 1.1875rem; line-height: 1.55; color: var(--muted); }
.hero .actions { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.hero .fine { margin-top: 16px; font-size: 0.875rem; color: var(--muted); }
.hero-phones { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 0; min-height: 520px; }
.hero-phones img { width: min(280px, 42vw); filter: drop-shadow(0 30px 40px oklch(0.1 0.05 260 / 0.55)); }
.hero-phones img + img { margin-left: -56px; margin-bottom: 48px; }
@media (max-width: 860px) {
  .hero { padding: 40px 0 64px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 40px; }
  .hero-phones { min-height: 0; }
  .hero-phones img { width: min(240px, 46vw); }
}

/* ---- sections ---- */
.sec { padding: 112px 0; border-top: 1px solid var(--line); }
.sec h2 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; }
.sec .lede { margin-top: 16px; max-width: 58ch; font-size: 1.125rem; color: var(--muted); }
@media (max-width: 760px) { .sec { padding: 72px 0; } }

/* goals: text and two phones side by side */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split .phones { display: flex; justify-content: center; gap: 20px; }
.split .phones img { width: min(250px, 40vw); filter: drop-shadow(0 24px 32px oklch(0.1 0.05 260 / 0.5)); }
.facts { margin: 32px 0 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.facts li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.facts img { width: 44px; height: 44px; }
.facts b { display: block; font-weight: 700; color: var(--cream); }
.facts span { color: var(--muted); font-size: 0.9875rem; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 40px; } }

/* in the gym: bento, one cell per job */
.bento { margin-top: 48px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.cell {
  position: relative; overflow: hidden; border-radius: var(--radius-card); padding: 28px;
  background: var(--raised); border: 1px solid transparent; box-shadow: 0 0 0 1px var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
.cell h3 { font-size: 1.375rem; line-height: 1.2; }
.cell p { color: var(--muted); font-size: 0.9875rem; max-width: 40ch; }
.cell .ico { width: 48px; height: 48px; }
.cell.wide { grid-column: span 4; }
.cell.mid { grid-column: span 3; }
.cell.narrow { grid-column: span 2; }
.cell.tall { grid-row: span 2; }
.cell .shot { margin-top: auto; align-self: center; width: min(240px, 100%); margin-bottom: -96px; filter: drop-shadow(0 20px 28px oklch(0.08 0.05 260 / 0.55)); }
@media (max-width: 960px) { .bento { grid-template-columns: 1fr 1fr; } .cell.wide, .cell.mid, .cell.narrow { grid-column: span 2; } .cell.tall { grid-row: auto; } }
@media (max-width: 560px) { .cell { padding: 22px; } }

/* meals: one full-width row of phones */
.row-phones { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.row-phones figure { margin: 0; display: grid; gap: 16px; justify-items: center; text-align: center; }
.row-phones img { width: min(260px, 100%); filter: drop-shadow(0 24px 32px oklch(0.1 0.05 260 / 0.5)); }
.row-phones figcaption b { display: block; font-weight: 700; }
.row-phones figcaption span { color: var(--muted); font-size: 0.9375rem; }
@media (max-width: 860px) { .row-phones { grid-template-columns: 1fr; gap: 48px; } }

/* progress: phone left, numbers right */
.split.flip > :first-child { order: 2; }
@media (max-width: 860px) { .split.flip > :first-child { order: 0; } }
.stats { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stat { padding: 20px; border-radius: 18px; background: var(--raised); box-shadow: 0 0 0 1px var(--line); border: 1px solid transparent; }
.stat b { display: block; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: 0.9375rem; }

/* pricing */
.plans { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 840px; }
.plan { padding: 28px; border-radius: var(--radius-card); background: var(--raised); box-shadow: 0 0 0 1px var(--line); border: 1px solid transparent; }
.plan.best { box-shadow: 0 0 0 1px var(--line-strong); background: #163061; }
.plan .tag { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.plan .price { margin-top: 10px; font-size: 2.5rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.plan .per { color: var(--muted); }
.included { margin: 32px 0 0; padding: 0; list-style: none; columns: 2; column-gap: 40px; max-width: 840px; }
.included li { break-inside: avoid; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
@media (max-width: 680px) { .plans { grid-template-columns: 1fr; } .included { columns: 1; } }

/* faq: a plain list, one hairline per question */
.faq { margin-top: 40px; max-width: 760px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center; min-height: 56px; padding: 14px 0; font-weight: 700; font-size: 1.0625rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: 0 0 12px; height: 12px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); rotate: 45deg; translate: 0 -3px; transition: rotate 200ms var(--ease-out); }
.faq details[open] summary::after { rotate: 225deg; translate: 0 3px; }
.faq p { padding: 0 0 20px; color: var(--muted); max-width: 64ch; }

/* final call */
.final { padding: 120px 0; text-align: center; border-top: 1px solid var(--line); }
.final h2 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.1; }
.final p { margin: 16px auto 0; max-width: 46ch; color: var(--muted); font-size: 1.125rem; }
.final .btn { margin-top: 32px; }

/* footer */
.foot { padding: 40px 0 56px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9375rem; }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px 40px; align-items: center; }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
@media (hover: hover) and (pointer: fine) { .foot a:hover { color: var(--cream); } }
.guides { margin-top: 16px; width: 100%; display: flex; flex-wrap: wrap; gap: 0 20px; }

/* ---- motion: one staged hero entrance, one reveal per section, both once ---- */
@media (prefers-reduced-motion: no-preference) {
  .js .stage > * { opacity: 0; translate: 0 12px; filter: blur(4px); animation: enter 600ms var(--ease-out) both; }
  .js .stage > :nth-child(2) { animation-delay: 100ms; }
  .js .stage > :nth-child(3) { animation-delay: 200ms; }
  .js .stage > :nth-child(4) { animation-delay: 300ms; }
  .js .hero-phones img { opacity: 0; translate: 0 24px; animation: enter 800ms var(--ease-out) 250ms both; }
  .js .hero-phones img + img { animation-delay: 380ms; }
  .js .reveal { opacity: 0; translate: 0 16px; transition: opacity 600ms var(--ease-out), translate 600ms var(--ease-out); }
  .js .reveal.in { opacity: 1; translate: 0 0; }
}
@keyframes enter { to { opacity: 1; translate: 0 0; filter: blur(0); } }

/* small print */
.fine-note { margin-top: 20px; font-size: 0.875rem; color: var(--muted); }
.legal { width: 100%; margin: 8px 0 0; font-size: 0.8125rem; }
.row-phones figcaption .link { display: flex; justify-content: center; margin-top: 4px; }

/* In-text links to the guides (SEO: keyword anchors from the strongest page). */
.lede a { color: var(--cream); text-decoration: underline; text-decoration-color: oklch(1 0 0 / 0.3); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .lede a:hover { text-decoration-color: var(--cream); } }