/* ============================================================
   PADIAM — public site
   Ported from docs/web-template/fusion. Structure and motion kept;
   hue, chrome and copy are this product's own.
   ============================================================ */

:root {
  /* ── Chrome is NEARLY GREY, and that is the rule ──────────────────────────
     Same discipline as the dashboard, and the same measurements behind it.
     Fusion's four surface greys are EXACTLY neutral (OKLCh chroma 0.0) while its
     accent carries 190. That gap IS the mechanism: an accent lands because
     nothing else on the screen is coloured. Tinting the surfaces toward the
     brand hue removes the contrast the brand depends on — tried on the
     dashboard, shipped, and visibly wrong within a second of looking at it.

     These hold h=341.7 (the brand hue) at chroma ~5, so the greys read warm
     rather than dead, without competing. Values are shared with the dashboard's
     dark mode so the site and the product are recognisably one system. */
  --bg:        #0E0C0D;
  --bg-deep:   #080607;
  --panel:     #171416;
  --panel-2:   #211D1F;
  --line:      rgba(255, 255, 255, 0.08);
  --line-2:    rgba(255, 255, 255, 0.16);

  --text:      #F6F3F4;
  --dim:       #BDBABC;
  --faint:     #706D6F;

  /* Burgundy #7E0B2E is the brand, but at 1.8:1 on this ground it is invisible.
     #DF3A6C is the first step at the same hue clearing 4.5:1 — the dashboard's
     dark accent, unchanged. The deep brand value survives as gradient washes,
     where it is a surface rather than a signal. */
  --accent:      #DF3A6C;
  --accent-soft: #F47BA0;
  --accent-deep: #7E0B2E;

  --font: 'Geist', -apple-system, system-ui, sans-serif;
  --mono-f: 'Geist Mono', ui-monospace, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Fusion's opposition, which is what makes it read as set rather than typed:
     the machine voice is spaced out and quiet, the human voice condensed and loud. */
  --track-meta: 0.16em;
  --track-tight: -0.035em;
}

/* Single-theme by intent. A dark instrument panel is the whole visual argument
   here; a light variant would be a different site, not the same one inverted. */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; background: none; border: 0; color: inherit; cursor: pointer; }
::selection { background: var(--accent); color: #fff; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.mono {
  font-family: var(--mono-f);
  font-size: 10px;
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--faint);
}

h1, h2, h3 { font-weight: 500; letter-spacing: var(--track-tight); line-height: 1.02; text-wrap: balance; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 400;
  background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
  font-size: 13px;
}
.skip:focus { left: 0; }

/* ---------- boot ---------- */
/* Names the subsystems it is about to describe. Deliberately NOT fake telemetry —
   "8 devices connected" would be a fabrication, and on a measurement company's
   own site that is the one kind of decoration that costs credibility. */
.boot {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg-deep);
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-end;
  padding: 48px;
  transition: opacity 0.6s, visibility 0.6s;
}
.boot.is-done { opacity: 0; visibility: hidden; }
.boot__lines {
  font-family: var(--mono-f); font-size: 11px;
  letter-spacing: 0.08em; color: var(--dim);
  margin-bottom: 22px; min-height: 104px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.boot__lines div { opacity: 0; animation: bootIn 0.25s forwards; }
.boot__lines .ok { color: var(--accent); }
@keyframes bootIn { to { opacity: 1; } }
.boot__bar { width: min(320px, 60vw); height: 2px; background: rgba(255,255,255,0.1); overflow: hidden; }
.boot__bar span { display: block; height: 100%; width: 0%; background: var(--accent); transition: width 0.2s linear; }

/* ---------- canvas + grain + cursor ---------- */
#field { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* Static, unlike fusion's animated grain. A perpetual fullscreen animation on a
   page people read is battery spent on texture; at rest it costs nothing and
   reads the same. */
.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
.cursor {
  position: fixed; z-index: 300; pointer-events: none;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(223, 58, 108, 0.8);
  transform: translate(-50%, -50%);
  transition: width 0.25s, height 0.25s, opacity 0.3s;
  opacity: 0; mix-blend-mode: screen;
}
.cursor.is-on { opacity: 1; }
.cursor.is-big { width: 42px; height: 42px; opacity: 0.55; }
@media (pointer: coarse) { .cursor { display: none; } }

/* ---------- nav + hud ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 40px;
  background: linear-gradient(rgba(14,12,13,0.9), rgba(14,12,13,0));
}
/* Brand lockup. Both SVGs are generated into index.html by
   docs/padiam_new_brand/build_brand_assets.py; these rules only size them.

   The mark is PORTRAIT (231:371, updated 2026-08-09). It used to be a square tile with a border-radius, so the
   old `width: 26px; height: 26px; border-radius: 7px` would now squash the new mark and
   round off its corners. Height is the dimension that matters in a lockup, and the widths
   below are the exports' own aspect ratios rather than round numbers.

   Wordmark height is mark height x 0.50674 — measured from the designer's logo_with_text
   export, not chosen, so this reproduces their lockup. The gap is their 0.2476 of the mark
   height (26 x 0.2476 = 6.4px), which is why it is not the 10px it was. */
.nav__logo { display: flex; align-items: center; gap: 6.4px; }
.nav__mark { height: 26px; width: 16.2px;  flex: none; }
.nav__word { height: 13.2px; width: 58.9px; flex: none; }
.nav__route { display: flex; align-items: center; gap: 10px; color: var(--dim); }
.nav__route #routeLabel { color: var(--accent); transition: opacity 0.3s; }
.nav__route-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 10px var(--accent);
  animation: pulse 2.2s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.nav__cta {
  font-size: 12.5px; font-weight: 500;
  padding: 9px 18px; border-radius: 999px;
  background: var(--accent); color: #fff;
  box-shadow: 0 6px 20px rgba(223, 58, 108, 0.28);
  transition: transform 0.3s var(--ease), background 0.25s;
}
.nav__cta:hover { transform: translateY(-2px); background: var(--accent-soft); color: #1a0710; }

.hud-edge { position: fixed; z-index: 100; top: 50%; display: flex; gap: 34px; writing-mode: vertical-rl; }
.hud-edge--l { left: 16px; transform: translateY(-50%) rotate(180deg); }
.hud-edge--r { right: 16px; transform: translateY(-50%); }

main { position: relative; z-index: 1; }
section { position: relative; }

.sec-head { display: flex; gap: 30px; margin-bottom: 26px; }
.sec-head span:first-child { color: var(--accent); }
.sec-title { font-size: clamp(34px, 4.4vw, 56px); margin-bottom: 48px; }

/* ---------- hero ---------- */
.hero {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 120px 40px 90px;
  max-width: 1200px; margin: 0 auto;
}
.hero__kicker { margin-bottom: 30px; }
.hero__kicker em { font-style: normal; color: var(--accent); }
.hero__title { font-size: clamp(52px, 10.5vw, 150px); margin-bottom: 34px; }
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line span { display: block; transform: translateY(110%); transition: transform 1.1s var(--ease); }
body.is-ready .hero__title .line span { transform: translateY(0); }
body.is-ready .hero__title .line:nth-child(2) span { transition-delay: 0.12s; }
.hero__sub {
  max-width: 52ch; color: var(--dim); font-size: 16.5px;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1s var(--ease) 0.5s, transform 1s var(--ease) 0.5s;
}
body.is-ready .hero__sub { opacity: 1; transform: none; }
.hero__hint { position: absolute; bottom: 40px; left: 40px; display: flex; align-items: center; gap: 16px; }
.hero__hint-line { width: 60px; height: 1px; background: var(--faint); position: relative; overflow: hidden; }
.hero__hint-line::after {
  content: ""; position: absolute; inset: 0; background: var(--accent);
  transform: translateX(-100%); animation: hintSlide 2s var(--ease) infinite;
}
@keyframes hintSlide { 0% { transform: translateX(-100%); } 60%,100% { transform: translateX(100%); } }

/* Legend for the canvas. The animation makes a CLAIM — that most viewing lands
   outside any monitored list — so it is labelled rather than left as ambience. */
.hero__legend {
  position: absolute; right: 40px; bottom: 40px;
  display: flex; flex-direction: column; gap: 7px; align-items: flex-end;
  opacity: 0; transition: opacity 1s var(--ease) 1.1s;
}
body.is-ready .hero__legend { opacity: 1; }
.hero__legend div { display: flex; align-items: center; gap: 8px; }
.hero__legend i { width: 7px; height: 7px; border-radius: 50%; flex: none; display: block; }
/* Not a key — the reading of the picture. Separated by a rule and accented so it is read as
   the conclusion rather than mistaken for a third unlabelled series. */
.hero__legend-note {
  margin-top: 3px; padding-top: 8px;
  border-top: 1px solid var(--line);
  color: var(--accent-soft);
  text-transform: none; letter-spacing: 0.02em; font-size: 10.5px;
  max-width: 30ch; text-align: right;
}

/* ---------- manifesto ---------- */
.manifesto { max-width: 980px; margin: 0 auto; padding: 20vh 40px; }
.manifesto__text {
  font-size: clamp(25px, 3.6vw, 46px);
  font-weight: 500; letter-spacing: -0.03em; line-height: 1.22;
}
.manifesto__text .w { color: var(--faint); transition: color 0.35s; }
.manifesto__text .w.lit { color: var(--text); }
.manifesto__text .w.hot { color: var(--accent); }

/* ---------- method : sticky stacked cards ---------- */
.method { max-width: 1100px; margin: 0 auto; padding: 12vh 40px 10vh; }
.method__stack { display: grid; gap: 22px; }
.pcard {
  position: sticky;
  top: calc(14vh + var(--i) * 40px);
  background: linear-gradient(160deg, var(--panel-2), var(--panel) 55%);
  border-radius: 18px;
  box-shadow: 0 0 0 1px var(--line) inset, 0 -20px 60px rgba(0,0,0,0.45);
  padding: 30px 34px 34px;
  min-height: 246px;
  overflow: hidden;
}
.pcard__top { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 38px; }
.pcard__top span:first-child { color: var(--accent); }
.pcard h3 { font-size: clamp(23px, 2.9vw, 34px); margin-bottom: 12px; }
.pcard p { color: var(--dim); max-width: 56ch; font-size: 14.5px; }
.pcard p + p { margin-top: 12px; color: var(--faint); }
.pcard p b { color: var(--text); font-weight: 500; }
.pcard__glyph {
  position: absolute; right: 30px; bottom: 26px;
  width: 78px; color: var(--accent); opacity: 0.8;
  filter: drop-shadow(0 0 10px rgba(223, 58, 108, 0.35));
}

/* ---------- marquee ---------- */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 18px 0; background: var(--bg-deep);
}
.marquee__track {
  display: flex; gap: 38px; width: max-content;
  animation: marquee 34s linear infinite;
  font-size: 12px; font-weight: 500; letter-spacing: 0.22em;
  color: var(--dim); font-family: var(--mono-f); text-transform: uppercase;
}
.marquee__track i { color: var(--accent); font-style: normal; }
@keyframes marquee { to { transform: translateX(-33.333%); } }

/* ---------- questions ---------- */
.ask {
  max-width: 1100px; margin: 0 auto; padding: 15vh 40px;
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px 60px;
}
.ask .sec-head, .ask .sec-title { grid-column: 1 / -1; }
.ask__list { display: flex; flex-direction: column; }
.qrow {
  display: flex; align-items: center; gap: 22px;
  padding: 20px 6px; border-top: 1px solid var(--line);
  text-align: left; width: 100%;
  transition: padding 0.35s var(--ease);
}
.ask__list .qrow:last-child { border-bottom: 1px solid var(--line); }
.qrow__num { color: var(--faint); flex: none; }
.qrow__name {
  font-size: clamp(18px, 2.3vw, 27px); font-weight: 500; letter-spacing: -0.02em;
  color: var(--dim); transition: color 0.3s;
}
.qrow__tag { margin-left: auto; opacity: 0; transition: opacity 0.3s; flex: none; }
.qrow:hover .qrow__name { color: var(--text); }
.qrow.is-active { padding-left: 18px; }
.qrow.is-active .qrow__num { color: var(--accent); }
.qrow.is-active .qrow__name { color: var(--text); }
.qrow.is-active .qrow__tag { opacity: 1; color: var(--accent); }

.ask__panel {
  position: relative; background: var(--panel); border-radius: 16px;
  box-shadow: 0 0 0 1px var(--line) inset; min-height: 330px; overflow: hidden;
}
.qpanel {
  position: absolute; inset: 0; padding: 26px 28px;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  pointer-events: none;
}
.qpanel.is-on { opacity: 1; transform: none; pointer-events: auto; }
.qpanel__route { color: var(--accent); margin-bottom: 22px; }
.qpanel ul { margin-bottom: 20px; }
.qpanel ul li {
  font-family: var(--mono-f); font-size: 11.5px; letter-spacing: 0.06em;
  color: var(--dim); padding: 8px 0; border-bottom: 1px solid var(--line); display: flex;
}
.qpanel ul li::before {
  content: "◆"; color: var(--accent); font-size: 8px; margin-right: 12px; align-self: center;
}
.qpanel p { color: var(--faint); font-size: 13.5px; }

/* ---------- contrast pair ---------- */
.pair { max-width: 1100px; margin: 0 auto; padding: 8vh 40px 13vh; }
.pair__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 28px; }
.pcell {
  background: var(--panel); border-radius: 18px;
  box-shadow: 0 0 0 1px var(--line) inset;
  padding: 32px; display: flex; flex-direction: column; gap: 16px;
}
.pcell--accent {
  background: linear-gradient(160deg, #2A0A15, var(--panel) 72%);
  box-shadow: 0 0 0 1px rgba(223, 58, 108, 0.3) inset;
}
.pcell__mark { font-size: 11px; color: var(--accent); font-family: var(--mono-f); letter-spacing: var(--track-meta); text-transform: uppercase; }
.pcell h3 { font-size: clamp(19px, 2.1vw, 25px); }
.pcell p { color: var(--dim); font-size: 14.5px; line-height: 1.55; }
.pcell p em { font-style: normal; color: var(--text); }
.pcell footer { margin-top: auto; }

/* ---------- contact ---------- */
.signal {
  text-align: center; padding: 16vh 40px;
  background:
    radial-gradient(ellipse 55% 45% at 50% 108%, rgba(223, 58, 108, 0.15), transparent),
    var(--bg-deep);
  border-top: 1px solid var(--line);
}
.signal .sec-head { justify-content: center; }
.signal__title { font-size: clamp(42px, 7.5vw, 104px); margin-bottom: 22px; }
.signal__note { color: var(--dim); max-width: 46ch; margin: 0 auto 40px; font-size: 15px; }
.signal__mail {
  display: inline-flex; align-items: baseline; gap: 14px;
  font-size: clamp(16px, 2.2vw, 24px); font-weight: 500; letter-spacing: -0.01em;
  padding: 18px 30px; border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--line) inset;
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
}
.signal__mail:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(223, 58, 108, 0.5) inset, 0 22px 44px rgba(0,0,0,0.5);
}
.signal__pre { color: var(--accent); font-size: 12px; }
.signal__arrow { color: var(--accent); transition: transform 0.3s var(--ease); }
.signal__mail:hover .signal__arrow { transform: translateX(6px); }

/* ---------- footer ---------- */
.footer {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 24px 40px; background: var(--bg-deep); border-top: 1px solid var(--line);
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hud-edge { display: none; }
  .nav { padding: 16px 22px; }
  .nav__route { display: none; }
  .hero, .manifesto, .method, .ask, .pair, .signal { padding-left: 22px; padding-right: 22px; }
  .hero__hint { left: 22px; }
  .hero__legend { display: none; }
  .ask { grid-template-columns: 1fr; }
  .ask__panel { min-height: 300px; }
  .pair__grid { grid-template-columns: 1fr; }
  .pcard { position: static; }
  .pcard__glyph { display: none; }
  .footer { flex-direction: column; padding: 22px; }
  .sec-head { flex-wrap: wrap; gap: 12px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .hero__title .line span, .hero__sub, .hero__legend { transform: none; opacity: 1; }
  .manifesto__text .w { color: var(--text); }
  .manifesto__text .w.hot { color: var(--accent); }
}