/* Homepage-only styles. style.css stays the shared base (header, buttons,
   form, legal pages); this file layers the hero field, product panel,
   principles physics, numbers row and the dark handoff on top. */

:root {
  /* Eltria cobalt — the company's own accent: not Vetraya's pine,
     not the old purple. Product mockups below wear PINE because they
     depict the product. (2026-08-31) */
  --indigo: #2B59FF;
  --indigo-2: #5B9BFF;
  --ink: #080b11;
}

body { overflow-x: hidden; }
header { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* reveal primitives */
.rv { opacity: 0; transform: translateY(18px); }
.h-word { display: inline-block; transform: translateY(105%); opacity: 0; }

/* ---------- hero with flow field ---------- */
.hero { position: relative; min-height: 88vh; display: grid; place-items: center; padding: 4rem 0 5rem; overflow: hidden; }
#field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 45%, rgba(255,255,255,.0), rgba(255,255,255,.55) 60%, #fff 100%);
}
.hero .wrap { position: relative; z-index: 2; text-align: center; }
.hero h1 { font-size: clamp(2.6rem, 7.2vw, 5.2rem); line-height: 1; letter-spacing: -.04em; margin: 1rem auto 1.4rem; max-width: 15ch; }
.hero h1 .hl { color: var(--indigo); }
.hero .sub { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--muted); max-width: 44ch; margin: 0 auto 2rem; }
.hero .cta { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.btn.mag { will-change: transform; }

/* ---------- product panel ---------- */
.product { padding: 3rem 0 5rem; }
.panel {
  position: relative; overflow: hidden; border-radius: 28px; background: var(--lilac);
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 2rem; align-items: center; padding: clamp(1.6rem, 4vw, 3.2rem);
}
.panel::before {
  content: ""; position: absolute; inset: -30%; pointer-events: none;
  background: radial-gradient(40% 40% at 70% 40%, rgba(43,89,255,.18), transparent 70%);
}
.panel > * { position: relative; }
.panel .tag { display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--indigo); background: #fff; padding: .4rem .8rem; border-radius: 999px; margin-bottom: 1.1rem; }
.panel h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); letter-spacing: -.035em; line-height: 1.05; }
.panel p { color: #3f4250; margin: 1rem 0 1.2rem; max-width: 46ch; }
.panel .pills { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.panel .pills span { background: #fff; border-radius: 999px; padding: .38rem .8rem; font-size: .85rem; font-weight: 600; }

.stage-col { display: grid; place-items: center; perspective: 1200px; min-height: 420px; }
.vcard {
  position: relative; width: min(300px, 78vw); aspect-ratio: 9/13; border-radius: 26px; padding: 22px; color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
  background: radial-gradient(120% 90% at 20% 0%, #12685A 0%, #2AAE9C 60%, #0D0D0D 135%);
  box-shadow: 0 40px 80px -30px rgba(8,11,17,.55);
  transform-style: preserve-3d; will-change: transform;
}
.vcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(13,13,13,0) 35%, rgba(13,13,13,.9)); pointer-events: none; }
.vcard > * { position: relative; z-index: 1; }
.vcard .k { font-size: .68rem; letter-spacing: .2em; opacity: .8; margin-bottom: auto; }
.vcard .n { font-size: 2rem; line-height: .98; letter-spacing: -.03em; font-weight: 700; }
.vcard .t { font-size: .9rem; opacity: .9; margin: .55rem 0 .8rem; }
.vcard .c { display: flex; gap: .35rem; flex-wrap: wrap; }
.vcard .c span { font-size: .7rem; padding: .28rem .6rem; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); }
.vcard .w { position: absolute; top: 20px; right: 22px; font-weight: 700; font-size: .8rem; letter-spacing: -.02em; }
.vcard.back { position: absolute; z-index: 0; opacity: .55; filter: saturate(.8); }
.vcard.back.b1 { transform: rotate(-9deg) translate(-70px, 14px) scale(.9); background: radial-gradient(120% 90% at 20% 0%, #0E5F6B 0%, #2AAE9C 60%, #0D0D0D 135%); }
.vcard.back.b2 { transform: rotate(8deg) translate(72px, 20px) scale(.9); background: radial-gradient(120% 90% at 20% 0%, #D9A441 0%, #2AAE9C 60%, #0D0D0D 135%); }

@media (max-width: 860px) {
  .panel { grid-template-columns: 1fr; }
  .stage-col { min-height: 380px; margin-top: .5rem; }
}

/* ---------- numbers ---------- */
.numbers { padding: 1rem 0 4rem; }
.numbers .row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.6rem 0; }
.numbers .n { font-size: clamp(2rem, 4.5vw, 3.2rem); letter-spacing: -.04em; line-height: 1; font-weight: 700; }
.numbers .l { color: var(--muted); font-size: .9rem; margin-top: .35rem; }
@media (max-width: 720px) { .numbers .row { grid-template-columns: repeat(2, 1fr); row-gap: 1.6rem; } }

/* ---------- principles ---------- */
.values { padding: 3rem 0 5rem; }
.values h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); letter-spacing: -.035em; margin-bottom: 1.6rem; max-width: 20ch; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.cardv {
  border-radius: 22px; padding: 1.5rem; min-height: 230px; display: flex; flex-direction: column; gap: .6rem;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.cardv:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 30px 50px -30px rgba(8,11,17,.35); }
.cardv .ico { width: 36px; height: 36px; border-radius: 10px; background: var(--ink); color: #fff; display: grid; place-items: center; margin-bottom: auto; }
.cardv h3 { font-size: 1.1rem; letter-spacing: -.02em; }
.cardv p { color: #3f4250; font-size: .95rem; }
.cardv.mint { background: var(--mint); } .cardv.sky { background: var(--sky); } .cardv.blush { background: var(--blush); } .cardv.lilac { background: var(--lilac); }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cards { grid-template-columns: 1fr; } }

/* ---------- contact ---------- */
.contact-sec { position: relative; padding: 2rem 0 6rem; }
.contact-sec .form-card { background: var(--soft); box-shadow: 0 30px 60px -40px rgba(8,11,17,.25); }

/* ---------- dark handoff ---------- */
.foot { position: relative; overflow: hidden; }
#dark { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.foot .cta-block, .foot .base { position: relative; }
.foot .cta-block .brands { display: block; text-align: center; margin-top: 1.4rem; color: #a8afbd; font-size: .95rem; }
.foot .cta-block .brands a { color: #fff; text-decoration: none; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .rv, .h-word { opacity: 1; transform: none; }
  .cardv:hover { transform: none; }
}

/* ================= chapters: the page changes mood ================= */
body { transition: background-color .7s cubic-bezier(.2,.7,.2,1), color .7s cubic-bezier(.2,.7,.2,1); }
body[data-chapter="lilac"] { background: #E8EDFF; }
body[data-chapter="ink"] { background: #080b11; color: #fff; }
body[data-chapter="ink"] .values h2, body[data-chapter="ink"] .how h2 { color: #fff; }
body[data-chapter="ink"] header { background: rgba(8,11,17,.7); }
body[data-chapter="ink"] header .wordmark, body[data-chapter="ink"] header nav a:not(.btn) { color: #fff; }
body[data-chapter="ink"] header .btn { background: #fff; color: #080b11; }
body[data-chapter="ink"] .menu-btn span { background: #fff; }
header, header .wordmark, header nav a { transition: background-color .7s, color .7s; }
.hero, .product { position: relative; z-index: 1; }
.hero::after { display: none; }
.hero { background: transparent; }
#field { opacity: .9; }

/* ================= how: pinned chapter ================= */
.how-track { height: 300vh; }
.how-sticky { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 2rem; width: min(var(--max), 92vw); margin: 0 auto; }
.how-copy { position: relative; min-height: 280px; }
.step { position: absolute; inset: 0; opacity: 0; transform: translateY(24px); pointer-events: none; }
.step .num { color: var(--indigo); font-weight: 700; letter-spacing: .2em; font-size: .8rem; margin-bottom: .8rem; }
.step h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); letter-spacing: -.035em; line-height: 1.04; margin-bottom: .9rem; }
.step p { color: var(--muted); max-width: 40ch; font-size: 1.05rem; }
.how-stage { position: relative; display: grid; place-items: center; min-height: 460px; perspective: 1200px; }
.hcard {
  position: absolute; width: min(320px, 80vw); aspect-ratio: 9/13; border-radius: 26px; padding: 24px; color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
  background: #0d0d0d; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 40px 80px -30px rgba(8,11,17,.55);
  opacity: 0; transform: scale(.96) translateY(10px);
}
.hcard.arch { background: radial-gradient(120% 90% at 20% 0%, #12685A 0%, #2AAE9C 60%, #0D0D0D 135%); }
.hcard.arch::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(13,13,13,0) 35%, rgba(13,13,13,.9)); }
.hcard > * { position: relative; z-index: 1; }
.hcard .k { font-size: .68rem; letter-spacing: .2em; opacity: .75; margin-bottom: auto; }
.hcard .rows { display: grid; gap: .6rem; }
.hcard .r { display: flex; align-items: center; gap: .7rem; padding: .8rem .9rem; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(42,174,156,.55); }
.hcard .r i { width: 10px; height: 10px; border-radius: 50%; background: #10B981; }
.hcard .r b { font-weight: 600; font-size: .95rem; }
.hcard .r em { margin-left: auto; font-style: normal; font-size: .72rem; opacity: .6; }
.hcard .big { font-size: 4.4rem; line-height: 1; letter-spacing: -.05em; font-weight: 700; }
.hcard .sm { opacity: .7; font-size: .85rem; margin: .3rem 0 1rem; }
.hcard .bars { display: grid; gap: .45rem; }
.hcard .bars i { display: block; height: 6px; border-radius: 6px; background: rgba(255,255,255,.12); position: relative; overflow: hidden; }
.hcard .bars i::after { content: ""; position: absolute; inset: 0; width: var(--w); background: linear-gradient(90deg, #12685A, #2AAE9C); transform-origin: left; transform: scaleX(0); transition: transform 1s cubic-bezier(.2,.7,.2,1) .2s; }
.hcard.on .bars i::after { transform: scaleX(1); }
.hcard .n { font-size: 2.3rem; line-height: .98; letter-spacing: -.03em; font-weight: 700; }
.hcard .t { font-size: .95rem; opacity: .9; margin: .55rem 0 .8rem; }
.hcard .c { display: flex; gap: .35rem; flex-wrap: wrap; }
.hcard .c span { font-size: .72rem; padding: .3rem .6rem; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); }
@media (max-width: 860px) {
  .how-sticky { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding-top: 5rem; gap: 1rem; }
  .how-copy { min-height: 220px; }
  .how-stage { min-height: 360px; }
  .hcard { width: min(250px, 70vw); padding: 18px; }
  .hcard .big { font-size: 3.4rem; }
}

/* ================= stats: one per screen ================= */
.stats { padding: 6vh 0 10vh; }
.stat { min-height: 88vh; display: grid; align-items: center; }
.stat .rule { height: 1px; background: rgba(255,255,255,.2); transform-origin: left; transform: scaleX(0); margin-bottom: 1.6rem; }
.stat .big { font-size: clamp(6rem, 22vw, 15rem); line-height: .9; letter-spacing: -.06em; font-weight: 700; color: #fff; }
.stat .big span { font-size: .45em; letter-spacing: 0; color: var(--indigo-2); }
.stat .l { font-size: clamp(1.2rem, 2.6vw, 1.8rem); color: #a8afbd; margin-top: 1rem; max-width: 30ch; letter-spacing: -.01em; }

/* product card: scroll rotation wrapper */
.spin { transform-style: preserve-3d; will-change: transform; }

/* values on ink */
body[data-chapter="ink"] .values { color: #080b11; }
body[data-chapter="ink"] .values h2 { color: #fff; }
body[data-chapter="lilac"] .panel { background: #fff; transition: background-color .7s; }
.panel { transition: background-color .7s; }

/* ================= one type scale for the whole page ================= */
:root {
  --t-display: clamp(2.7rem, 8vw, 5.4rem);   /* hero */
  --t-h2: clamp(2rem, 4.2vw, 3rem);           /* every section title */
  --t-stat: clamp(5.5rem, 20vw, 14rem);       /* the three numbers */
  --t-body: 1.05rem;
}
.hero h1 { font-size: var(--t-display); }
.panel h2, .step h2, .values h2, .form-card h2, .foot .cta-block h2 { font-size: var(--t-h2); letter-spacing: -.035em; line-height: 1.05; }
.stat .big { font-size: var(--t-stat); }
.hero .sub, .panel p, .step p, .form-card .form-sub, .foot .cta-block p { font-size: var(--t-body); line-height: 1.55; }
.stat .l { font-size: clamp(1.1rem, 2.2vw, 1.5rem); }

/* ================= edges: header and footer flush with content ================= */
@media (max-width: 720px) {
  .wrap { padding: 0 1.1rem; }
  header .wrap { padding: 0 1.1rem; }
  .menu-btn { margin-right: -.35rem; }          /* icon's visual edge, not its hit box, sits on the margin */
  .foot .base .wrap { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .foot .base a { margin-right: 1.2rem; }
  .foot .base a:last-child { margin-right: 0; }
}
.foot .base .wrap > div:last-child { display: flex; gap: 1.2rem; }
.foot .base a { margin-right: 0; }
.foot .cta-block { padding: 6rem 1.1rem 4rem; }