/* HP Design v4 "Amatista" — light "product panel" studio, full width (Apple / OnePlus inspired). Tokens per docs/design/direction.md */
@view-transition { navigation: auto; }

:root {
  --bg: oklch(97.2% 0.002 286);          /* #f5f5f7 */
  --panel: oklch(100% 0 0);
  --ink: oklch(21% 0.005 286);           /* #1d1d1f */
  --muted: oklch(50% 0.007 286);         /* ≥ 4.8:1 on --bg */
  --line: oklch(21% 0.005 286 / .1);
  /* Amatista brand line (docs/design/brand-line.md, option A) */
  --green: #1fbf75;                      /* fills, rhombi, accent line: ink text on it 8.2:1, never white text (2.4:1) */
  --green-dk: #12945a;                   /* hover fill: ink text 5.1:1 */
  --green-tx: #0e7a4a;                   /* green TEXT on light: 4.9:1 on --bg, 5.4:1 on white (#12945a is only 3.9:1) */
  --am3: #7448b8; --am4: #a37be0; --am5: #d6c2f5;
  --accent-line: linear-gradient(90deg, var(--green), var(--green-dk) 40%, var(--am3));
  --night: #0b0b0d;
  --on-night: oklch(96% 0.002 286);
  --muted-night: oklch(72% 0.006 286);
  /* iridescent tints — decoration only, never text */
  --tint-am: oklch(94% 0.03 300);        /* am5, softened */
  --tint-green: oklch(95% 0.035 160);

  --f: 'Geist', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --t-hero: clamp(2.4rem, 4.6vw, 5rem);
  --t-h2: clamp(1.9rem, 3.2vw, 3.2rem);
  --t-h3: clamp(1.35rem, 1.7vw, 1.8rem);
  --t-sub: clamp(1.05rem, 1.25vw, 1.35rem);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --gutter: clamp(10px, 1vw, 16px);
  --pad: clamp(20px, 4vw, 72px);         /* inner horizontal padding of full-width panels */
  --r-ctl: 10px; --r-card: 24px; --r-pill: 999px;

  --ease: cubic-bezier(.25, .46, .45, .94);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --d-micro: 160ms; --d-ui: 280ms; --d-in: 700ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.5 var(--f); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video, canvas { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--green-tx); outline-offset: 3px; border-radius: var(--r-ctl); }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.025em; margin: 0; }

/* ---------- Header + floating pill nav (liquid glass) ---------- */
.top { position: sticky; top: 0; z-index: 20; }
.top__in { position: relative; height: 68px; padding: 0 var(--pad); display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.brand { display: flex; align-items: center; gap: var(--s2); padding: 4px var(--s4) 4px 4px; border-radius: var(--r-pill); text-decoration: none; font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; }
.brand { padding: 4px var(--s4) 4px var(--s3); gap: var(--s3); }
.brand__sig { width: auto; height: 34px; }
.brand__word { font-size: .78rem; font-weight: 500; letter-spacing: .32em; }
.glass { background: oklch(100% 0 0 / .66); backdrop-filter: saturate(1.8) blur(22px); -webkit-backdrop-filter: saturate(1.8) blur(22px); border: 1px solid oklch(100% 0 0 / .7); box-shadow: 0 1px 0 oklch(100% 0 0 / .8) inset, 0 10px 30px -12px oklch(20% 0.02 286 / .25); }
.pill { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 2px; padding: 4px; border-radius: var(--r-pill); view-transition-name: pill; }
.pill a { position: relative; display: grid; place-items: center; min-height: 38px; padding: 0 var(--s4); border-radius: var(--r-pill); font-size: .9rem; font-weight: 500; text-decoration: none; color: oklch(21% 0.005 286 / .72); transition: color var(--d-micro) var(--ease); }
.pill a:hover { color: var(--ink); }
.pill a[aria-current='page'] { color: var(--panel); }
.pill__ind { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--ink); view-transition-name: pill-ind; }
.pill__icon { display: none; }
.top__end { display: flex; gap: var(--s2); align-items: center; margin-left: auto; }
.lang { min-height: 38px; padding: 0 var(--s4); border-radius: var(--r-pill); color: var(--ink); font: 500 .82rem var(--f); cursor: pointer; }
.lang:hover { background: oklch(100% 0 0 / .9); }
::view-transition-group(pill-ind) { animation-duration: 520ms; animation-timing-function: var(--ease-out); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 44px; padding: 0 22px; border-radius: var(--r-pill); font: 500 1rem var(--f); text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background-color var(--d-micro) var(--ease), color var(--d-micro) var(--ease), transform var(--d-micro) var(--ease), box-shadow var(--d-ui) var(--ease); }
.btn:active { transform: scale(.97); }
.btn--fill { background: var(--green); color: var(--night); font-weight: 600; }
.btn--fill:hover { background: var(--green-dk); box-shadow: 0 10px 28px -10px oklch(62% 0.15 155 / .7); }
.btn--line { border-color: var(--green-tx); color: var(--green-tx); background: transparent; }
.btn--line:hover { background: var(--green); border-color: var(--green); color: var(--night); }
.btn--sm { min-height: 36px; padding: 0 var(--s4); font-size: .88rem; }
.btn--lg { min-height: 52px; padding: 0 var(--s6); font-size: 1.05rem; }
.night .btn--line { border-color: var(--on-night); color: var(--on-night); }
.night .btn--line:hover { background: var(--on-night); color: var(--night); }
.link { color: var(--green-tx); text-decoration: none; font-size: 1.05rem; font-weight: 500; white-space: nowrap; }
.link:hover { text-decoration: underline; }
.link::after { content: ' ›'; }
.ctas { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; }

/* ---------- Panels ---------- */
main { display: grid; gap: var(--gutter); padding: 0 var(--gutter) var(--gutter); }
.panel { position: relative; overflow: hidden; border-radius: var(--r-card); background: var(--panel); text-align: center; padding: var(--s8) var(--pad) 0; isolation: isolate; }
.panel--pad { padding-bottom: var(--s8); }
.panel__eyebrow { margin: 0 0 var(--s3); font-size: .8rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--green-tx); }
.panel__title { font-size: var(--t-h2); line-height: 1.06; }
/* brand signature: short green->amethyst line under section titles */
.panel__title::after, .page-head h1::after { content: ''; display: block; width: 56px; height: 4px; margin: var(--s4) auto 0; border-radius: 2px; background: var(--accent-line); }
.row-head .panel__title::after, .split .panel__title::after, .brand-cta .panel__title::after, .tile .panel__title::after { margin-left: 0; }
.panel__sub { margin: var(--s3) auto var(--s5); max-width: 44ch; font-size: var(--t-sub); color: var(--muted); }
.panel__media { margin: var(--s6) auto 0; }
.panel__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* Amethyst panel: black + crystals on the right, dark gradient behind the copy, green->amethyst 4px line */
.night { color: var(--on-night); background: linear-gradient(90deg, var(--night) 0%, rgb(11 11 13 / .88) 32%, rgb(11 11 13 / 0) 68%), url(../img/brand/amatista-nebula.jpg) right center / cover no-repeat, var(--night); }
.night::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--accent-line); }
.night .panel__sub { color: var(--muted-night); }
.night .panel__eyebrow { color: var(--green); }
.night__logo { width: 168px; height: auto; margin: 0 0 var(--s5); }
.night > .night__logo { margin-inline: auto; }
/* Home amethyst CTA: copy on the dark left, crystals visible on the right */
/* Closing panel: its own image (crystals bottom-left, visible nebula), copy on the RIGHT — not a repeat of the hero */
.brand-cta { display: flex; align-items: center; justify-content: flex-end; min-height: clamp(440px, 38vw, 600px); padding: var(--s9) var(--pad); text-align: left;
  background: linear-gradient(270deg, var(--night) 0%, rgb(11 11 13 / .78) 30%, rgb(11 11 13 / 0) 60%), url(../img/brand/amatista-cta.jpg) left center / cover no-repeat, var(--night); }
.brand-cta__copy { max-width: 520px; }
.brand-cta .panel__sub { margin-inline: 0; }
.brand-cta .ctas { justify-content: flex-start; }
.tint-am { background: linear-gradient(180deg, var(--panel) 0%, var(--tint-am) 100%); }
.tint-green { background: linear-gradient(180deg, var(--panel) 0%, var(--tint-green) 100%); }
/* Rhombus marks: green on section eyebrows, amethyst in lists */
.panel__eyebrow::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 10px; background: var(--green); transform: rotate(45deg); vertical-align: .12em; }

/* ---------- Hero: compact amethyst panel, crystals in the corner (js/nebula.js); CSS .night background is the fallback ---------- */
.hero { position: relative; overflow: hidden; border-radius: var(--r-card); min-height: clamp(420px, 38vw, 540px); display: flex; align-items: center; padding: var(--s7) var(--pad); isolation: isolate; }
.hero-fx { position: absolute; inset: 0; z-index: -1; cursor: crosshair; touch-action: pan-y; }
.hero-fx canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero.night h1 em, .hero.night .hero__sub, .hero.night .hero__hint { color: var(--muted-night); }
.hero__copy { max-width: 560px; text-align: left; pointer-events: none; }
.hero__copy a, .hero__copy button { pointer-events: auto; }
/* white brand lockup inside the hero: signature + HP DESIGN | kicker */
.hero__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 0 var(--s5); }
.hero__brand img { width: auto; height: 46px; }
.hero__word { color: var(--on-night); font-size: .95rem; font-weight: 500; letter-spacing: .32em; }
.hero__kicker { padding-left: 14px; border-left: 1px solid oklch(100% 0 0 / .28); color: var(--green); font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.hero h1 { font-size: clamp(2.1rem, 3.3vw, 3.5rem); line-height: 1.05; }
.hero h1 em { font-style: normal; color: var(--muted); }
.hero__sub { margin: var(--s4) 0 var(--s5); max-width: 46ch; font-size: var(--t-sub); color: var(--muted); }
.hero .ctas { justify-content: flex-start; }
.hero__hint { margin: var(--s4) 0 0; font-size: .85rem; color: var(--muted); }
.hero__hint::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: var(--s2); background: var(--am3); transform: rotate(45deg); vertical-align: 1px; }

/* ---------- Tiles (4-up on wide screens) ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.tile { padding: var(--s7) var(--s5) 0; display: flex; flex-direction: column; }
.tile .panel__title { font-size: var(--t-h3); }
.tile .panel__sub { font-size: 1rem; margin-bottom: var(--s4); }
.tile .ctas { gap: var(--s2); }
.tile .panel__media { margin-top: auto; padding-top: var(--s5); }
.tile .panel__media img { aspect-ratio: 4 / 3; mix-blend-mode: multiply; transition: transform 900ms var(--ease-out); }
.tile:hover .panel__media img { transform: scale(1.04) translateY(-6px); }

/* ---------- Split panel (copy + visual) ---------- */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s7); align-items: center; text-align: left; padding: var(--s8) var(--pad); }
.split .panel__sub { margin-inline: 0; }
.reveal { --x: 50%; --y: 50%; --r: 0px; position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; cursor: crosshair; touch-action: pan-y; }
.reveal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reveal__top { clip-path: circle(var(--r) at var(--x) var(--y)); }
.reveal__ring { position: absolute; left: 0; top: 0; pointer-events: none; transform: translate(var(--x), var(--y)); }
.reveal__ring::after { content: ''; position: absolute; width: calc(var(--r) * 2); height: calc(var(--r) * 2); left: calc(var(--r) * -1); top: calc(var(--r) * -1); border-radius: 50%; border: 1.5px solid oklch(100% 0 0 / .9); box-shadow: 0 0 0 6px oklch(100% 0 0 / .12); }

/* ---------- Work teaser ---------- */
.work-teaser { text-align: left; padding-bottom: var(--s7); }
.row-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s5); flex-wrap: wrap; margin-bottom: var(--s6); }
.row-head .panel__title { max-width: 22ch; }
.rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }

/* ---------- Page header (inner pages) ---------- */
.page-head { padding: var(--s7) 0 var(--s6); }
.page-head h1 { font-size: var(--t-hero); line-height: 1.04; }
.page-head p { margin: var(--s4) auto 0; max-width: 60ch; font-size: var(--t-sub); color: var(--muted); }

/* Segmented control */
.seg { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 2px; padding: 4px; border-radius: 22px; background: oklch(21% 0.005 286 / .06); margin: 0 auto var(--s6); max-width: 100%; }
.seg button { min-height: 38px; padding: 0 var(--s4); border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink); font: 500 .92rem var(--f); cursor: pointer; white-space: nowrap; transition: background-color var(--d-ui) var(--ease), box-shadow var(--d-ui) var(--ease); }
.seg button:hover { background: oklch(100% 0 0 / .6); }
.seg button[aria-pressed='true'], .seg button[aria-selected='true'] { background: var(--panel); box-shadow: 0 1px 4px oklch(0% 0 0 / .12); }

/* ---------- Project cards ---------- */
.grid { list-style: none; margin: 0; padding: 0 0 var(--s8); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); grid-auto-flow: dense; gap: var(--s4); text-align: left; }
.grid > li[hidden] { display: none; }
.grid > .is-wide { grid-column: span 2; }
.card { position: relative; height: 100%; border-radius: 20px; background: var(--bg); overflow: hidden; transition: transform var(--d-ui) var(--ease), box-shadow var(--d-ui) var(--ease); }
.card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px oklch(20% 0.02 286 / .35); }
.card { box-shadow: inset 0 3px 0 var(--am3); }
.grid > .card:nth-child(3n+2), .rail > .card:nth-child(3n+2) { box-shadow: inset 0 3px 0 var(--green); }
.grid > .card:nth-child(3n), .rail > .card:nth-child(3n) { box-shadow: inset 0 3px 0 var(--night); }
.card__btn { all: unset; display: flex; flex-direction: column; width: 100%; height: 100%; cursor: pointer; }
.card__btn:focus-visible { outline: 2px solid var(--green-tx); outline-offset: -2px; border-radius: 20px; }
.card__media { position: relative; aspect-ratio: 27 / 16; overflow: hidden; background: var(--panel); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.card:hover .card__media img { transform: scale(1.04); }
.card__visit { position: absolute; top: var(--s3); right: var(--s3); z-index: 1; display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--s3); border-radius: var(--r-pill); background: rgb(11 11 13 / .82); color: var(--on-night); font-size: .78rem; font-weight: 600; text-decoration: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px oklch(100% 0 0 / .14); transition: background-color var(--d-micro) var(--ease), color var(--d-micro) var(--ease); }
.card__visit:hover { background: var(--green); color: var(--night); }
.card__visit:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.card__flag { position: absolute; top: var(--s3); left: var(--s3); padding: 2px var(--s2); border-radius: var(--r-pill); background: oklch(100% 0 0 / .85); font-size: .72rem; font-weight: 500; color: var(--muted); }
.card__body { padding: var(--s5); display: grid; gap: var(--s2); }
.card__name { font-weight: 600; font-size: 1.2rem; letter-spacing: -0.015em; }
.card__tag { color: var(--muted); font-size: .95rem; }
.card__points { margin: var(--s2) 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: .92rem; }
.card__points li::before, .pack li::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 10px; background: var(--am3); transform: rotate(45deg); vertical-align: .18em; }
.rail .card__points { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: var(--s2) 0 0; list-style: none; }
.chips li { padding: 2px var(--s3); border-radius: var(--r-pill); background: var(--panel); border: 1px solid var(--line); font-size: .78rem; font-weight: 500; }

/* ---------- Packages: animated stage + glowing cards ---------- */
.stage { padding-bottom: var(--s8); }
.stage__fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background-image: radial-gradient(oklch(21% 0.005 286 / .07) 1px, transparent 1px), radial-gradient(55% 60% at 100% 0%, oklch(55% 0.17 300 / .10), transparent 70%), radial-gradient(50% 55% at 0% 100%, oklch(65% 0.15 160 / .09), transparent 70%);
  background-size: 22px 22px, 100% 100%, 100% 100%; }

.packs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s4); text-align: left; }
.packs > .pack { flex: 1 1 280px; max-width: 380px; }
/* Home bundles: 4-up, image on top */
.bundles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); text-align: left; }
.bundle { padding-top: var(--s4); }
.bundle__media { margin: 0 calc(var(--s5) * -1 + 8px) var(--s2); border-radius: 14px; overflow: hidden; background: var(--panel); }
.bundle__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; mix-blend-mode: multiply; transition: transform 900ms var(--ease-out); }
.bundle:hover .bundle__media img { transform: scale(1.05); }
.bundle .pack__badge { position: absolute; top: var(--s5); right: var(--s5); }
.addons { margin-top: var(--s7); }
.addons__title { font-size: 1.1rem; font-weight: 600; margin-bottom: var(--s4); }
.addons__row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); }
.addon { display: inline-flex; align-items: center; gap: var(--s3); min-height: 52px; padding: 0 var(--s3) 0 var(--s5); border-radius: var(--r-pill); border: 1px solid oklch(100% 0 0 / .9); background: oklch(100% 0 0 / .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--ink); font: 500 .95rem var(--f); cursor: pointer; box-shadow: 0 10px 30px -20px oklch(20% 0.02 286 / .5); transition: transform var(--d-micro) var(--ease), box-shadow var(--d-ui) var(--ease); }
.addon:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -18px oklch(45% 0.15 300 / .5); }
.addon__price { color: var(--muted); font-size: .85rem; }
.addon__plus { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--panel); font-size: 1rem; }
.addon[aria-pressed='true'] .addon__plus { background: var(--green); color: var(--night); }
.pack {
  --mx: 50%; --my: 50%; --glow: 0;
  position: relative; display: flex; flex-direction: column; gap: var(--s4); padding: var(--s6) var(--s5);
  border-radius: 20px; background: oklch(100% 0 0 / .72); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid oklch(100% 0 0 / .9); box-shadow: 0 1px 0 oklch(100% 0 0) inset, 0 16px 40px -28px oklch(20% 0.02 286 / .45);
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform var(--d-ui) var(--ease), box-shadow var(--d-ui) var(--ease);
}
.pack::before { /* spotlight that follows the cursor */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(420px circle at var(--mx) var(--my), oklch(88% 0.09 300 / .55), oklch(92% 0.08 160 / .3) 40%, transparent 70%);
  opacity: var(--glow); transition: opacity var(--d-ui) var(--ease);
}
.pack::after { /* glowing border where the cursor is */
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx) var(--my), oklch(55% 0.17 300), oklch(70% 0.17 158) 45%, transparent 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: var(--glow); transition: opacity var(--d-ui) var(--ease);
}
.pack { border-top: 3px solid var(--am3); }
.pack:nth-child(3n+2) { border-top-color: var(--green); }
.pack:nth-child(3n) { border-top-color: var(--night); }
.pack:hover { --glow: 1; box-shadow: 0 1px 0 oklch(100% 0 0) inset, 0 30px 60px -30px oklch(45% 0.15 300 / .45); }
.pack--featured, .pack--featured:nth-child(n) { background: var(--night); color: var(--on-night); border-color: oklch(100% 0 0 / .08); border-top-color: var(--green); box-shadow: inset 5px 0 0 var(--green), 0 30px 60px -30px oklch(30% 0.12 300 / .6); }
.pack--featured::before { background: radial-gradient(420px circle at var(--mx) var(--my), oklch(45% 0.17 300 / .45), transparent 70%); }
.pack.pack--featured .pack__price { color: var(--green); }
.pack.pack--featured .pack__price small, .pack.pack--featured ul { color: var(--muted-night); }
.pack.pack--featured li::before { background: var(--am4); }
.pack--featured .pack__badge { background: var(--green); color: var(--night); }
.pack--featured .pack__badge::before { background: var(--night); }
.pack--featured .toggle { background: transparent; color: var(--on-night); border-color: oklch(100% 0 0 / .3); }
.pack--featured .toggle[aria-pressed='true'] { background: var(--on-night); color: var(--night); }
.pack__badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 3px var(--s3); border-radius: var(--r-pill); background: var(--night); color: var(--on-night); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.pack__badge::before { content: ''; width: 6px; height: 6px; background: var(--green); transform: rotate(45deg); }
.pack h3 { font-size: 1.35rem; }
.pack__tag { margin: -8px 0 0; color: var(--muted); font-size: .95rem; line-height: 1.35; }
.pack.pack--featured .pack__tag { color: var(--muted-night); }
.pack__price { margin: 0; display: flex; align-items: baseline; gap: 6px; font-size: 2.5rem; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pack__price small { font-size: .85rem; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.pack ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); color: var(--muted); font-size: .95rem; }
.pack__actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--s2); }
.toggle { min-height: 36px; padding: 0 var(--s4); border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: 500 .88rem var(--f); cursor: pointer; transition: background-color var(--d-micro) var(--ease), color var(--d-micro) var(--ease); }
.toggle[aria-pressed='true'] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.pack.is-in { animation: rise 520ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.note { max-width: 70ch; margin: var(--s6) auto 0; color: var(--muted); font-size: .9rem; }

/* ---------- Software ---------- */
.soft { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s5); text-align: left; padding-bottom: var(--s8); align-items: start; }
.soft__side { display: grid; gap: var(--s4); }
.soft__list { display: grid; gap: var(--s2); }
.soft__q { all: unset; box-sizing: border-box; display: flex; gap: var(--s4); align-items: center; width: 100%; min-height: 72px; padding: var(--s4) var(--s5); border-radius: 16px; background: var(--bg); font-weight: 500; cursor: pointer; transition: background-color var(--d-micro) var(--ease), box-shadow var(--d-micro) var(--ease), transform var(--d-micro) var(--ease); }
.soft__q:hover { background: oklch(94% 0.003 286); transform: translateX(4px); }
.soft__q[aria-selected='true'] { background: var(--panel); box-shadow: 0 0 0 1.5px var(--green-tx), inset 4px 0 0 var(--green); }
.soft__q:focus-visible { outline: 2px solid var(--green-tx); outline-offset: 2px; }
.soft__q span { color: var(--green-tx); font-variant-numeric: tabular-nums; }
.soft__other { padding: var(--s5); border-radius: 16px; background: var(--bg); color: var(--muted); display: grid; gap: var(--s3); justify-items: start; }
.soft__other p { margin: 0; }
.soft__panel { position: sticky; top: 84px; border-radius: 20px; overflow: hidden; background: var(--bg); }
.soft__panel img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; mix-blend-mode: multiply; }
.soft__body { padding: var(--s5) var(--s6) var(--s6); display: grid; gap: var(--s3); }
.soft__body p { margin: 0; }
.soft__body .lead { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; }
.soft__body .muted { color: var(--muted); font-size: .92rem; }
.soft__panel.is-swap > * { animation: rise 420ms var(--ease-out) both; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); list-style: none; margin: 0; padding: var(--s6) 0 var(--s8); text-align: left; counter-reset: s; }
.step { padding: var(--s6) var(--s5); border-radius: 18px; background: rgb(11 11 13 / .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid oklch(100% 0 0 / .12); border-left: 4px solid var(--green); counter-increment: s; }
.step:nth-child(2) { border-left-color: var(--am4); }
.step::before { content: counter(s); display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: var(--s5); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: var(--green); color: var(--night); font-weight: 700; }
.step:nth-child(2)::before { background: var(--am4); }
.step h3 { font-size: 1.3rem; margin-bottom: var(--s2); }
.step p { margin: 0; color: var(--muted-night); }

/* ---------- FAQ ---------- */
.faq { max-width: 900px; margin: 0 auto; padding-bottom: var(--s8); text-align: left; display: grid; gap: var(--s2); }
.faq details { border-radius: 16px; background: var(--bg); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); min-height: 60px; padding: var(--s4) var(--s5); cursor: pointer; list-style: none; font-weight: 500; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.5rem; font-weight: 300; color: var(--green-tx); transition: transform var(--d-ui) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 var(--s5) var(--s5); color: var(--muted); }
.packs-other { margin: var(--s6) auto 0; color: var(--muted); }

/* ---------- Modal ---------- */
.modal { width: min(960px, calc(100% - 2 * var(--s4))); max-height: calc(100vh - 2 * var(--s5)); padding: 0; border: 0; border-radius: var(--r-card); background: var(--panel); color: var(--ink); overflow: auto; box-shadow: 0 40px 120px -20px oklch(0% 0 0 / .35); }
.modal::backdrop { background: oklch(97% 0.002 286 / .6); backdrop-filter: blur(14px); }
.modal[open] { animation: rise 420ms var(--ease-out) both; }
.modal__close { position: absolute; top: var(--s3); right: var(--s3); z-index: 1; width: 40px; height: 40px; border-radius: 50%; border: 0; background: oklch(100% 0 0 / .85); color: var(--ink); cursor: pointer; font-size: 1rem; box-shadow: 0 2px 8px oklch(0% 0 0 / .15); }
.modal__media img { width: 100%; aspect-ratio: 27 / 16; object-fit: cover; }
.modal__body { padding: var(--s6); display: grid; gap: var(--s3); }
.modal__body h2 { font-size: 2rem; }
.modal__body > p { margin: 0; color: var(--muted); max-width: 70ch; }
.modal__body .card__points { font-size: 1rem; }

/* ---------- Quote dock ---------- */
.dock { position: fixed; left: 50%; bottom: var(--s4); z-index: 15; display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s2) var(--s2) var(--s5); border-radius: var(--r-pill); max-width: calc(100% - 2 * var(--s4)); transform: translateX(-50%); background: oklch(100% 0 0 / .72); backdrop-filter: saturate(1.8) blur(20px); -webkit-backdrop-filter: saturate(1.8) blur(20px); border: 1px solid var(--line); box-shadow: 0 20px 50px -20px oklch(0% 0 0 / .3); animation: dock-in 420ms var(--ease-out) both; }
.dock[hidden] { display: none; }
@keyframes dock-in { from { opacity: 0; transform: translate(-50%, 24px); } }
.dock__info { display: grid; line-height: 1.25; }
.dock { background: rgb(11 11 13 / .88); color: var(--on-night); border-color: oklch(100% 0 0 / .1); }
.dock .btn--line { border-color: oklch(100% 0 0 / .4); color: var(--on-night); }
.dock__count { font-size: .75rem; color: var(--muted-night); }
.dock__total { font-weight: 600; }

/* ---------- Next-page link + footer ---------- */
.next { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s6) var(--pad); border-radius: var(--r-card); background: var(--panel); text-decoration: none; transition: transform var(--d-ui) var(--ease), box-shadow var(--d-ui) var(--ease); }
.next:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -24px oklch(0% 0 0 / .3); }
.next { position: relative; overflow: hidden; background: var(--night); color: var(--on-night); }
.next::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent-line); }
.next small { display: block; color: var(--muted-night); font-size: .9rem; }
.next strong { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.025em; }
.next__arrow { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--green); color: var(--night); font-size: 1.3rem; transition: transform var(--d-ui) var(--ease-out); }
.next:hover .next__arrow { transform: translateX(6px); }
.foot { padding: var(--s6) var(--pad) var(--s8); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s5); font-size: .82rem; color: var(--muted); }
.foot__brand { display: grid; gap: var(--s2); }
.foot__brand img { width: 220px; height: auto; margin-bottom: var(--s2); }
.foot nav { display: flex; gap: var(--s4); flex-wrap: wrap; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Scroll reveals + page transitions ---------- */
.fx { opacity: 0; transform: translateY(24px); transition: opacity var(--d-in) var(--ease-out), transform var(--d-in) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.fx.is-in { opacity: 1; transform: none; }
::view-transition-old(root) { animation: vt-out 260ms var(--ease) both; }
::view-transition-new(root) { animation: vt-in 420ms var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: scale(.985); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .tiles, .rail, .bundles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .split, .soft { grid-template-columns: minmax(0, 1fr); }
  .soft__panel { position: static; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .grid > .is-wide { grid-column: auto; }
  .hero { align-items: flex-start; min-height: 0; padding-top: var(--s6); padding-bottom: min(74vw, 480px); }
  .night { background: linear-gradient(180deg, var(--night) 0%, rgb(11 11 13 / .9) 45%, rgb(11 11 13 / .35) 100%), url(../img/brand/amatista-nebula.jpg) 80% bottom / cover no-repeat, var(--night); }
  .brand-cta { justify-content: flex-start; background: linear-gradient(180deg, var(--night) 0%, rgb(11 11 13 / .88) 50%, rgb(11 11 13 / .2) 100%), url(../img/brand/amatista-cta.jpg) 15% bottom / cover no-repeat, var(--night); }
}
@media (max-width: 760px) {
  .pill { position: fixed; left: 50%; top: auto; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: calc(100% - 24px); max-width: 440px; justify-content: space-between; }
  .pill a { flex: 1 1 0; min-height: 52px; padding: 4px 2px; font-size: .68rem; gap: 2px; }
  .pill__icon { display: block; width: 20px; height: 20px; }
  body { padding-bottom: 84px; }
  .dock { bottom: 84px; border-radius: 20px; flex-wrap: wrap; justify-content: space-between; padding: var(--s3); }
  .dock__info { flex: 1 1 100%; }
  .dock .btn { flex: 1 1 0; }
  .top__in { height: 60px; }
  .top .btn--fill { display: none; }
  .brand { padding-right: var(--s3); }
  .tiles, .bundles { grid-template-columns: minmax(0, 1fr); }
  .brand__word { display: none; }
  .rail { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .rail > * { scroll-snap-align: start; }
  .seg { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .hero .ctas .btn, .brand-cta .ctas .btn { width: 100%; }
  .hero__brand { gap: 10px; }
  .hero__brand img { height: 36px; }
  .hero__word { font-size: .85rem; letter-spacing: .24em; }
  .hero__kicker { flex-basis: 100%; padding-left: 0; border-left: 0; }
  .next { padding: var(--s5); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .fx { opacity: 1; transform: none; }
  .pack { transform: none !important; }
}