/* ==========================================================================
   Editorial hero presentation
   --------------------------------------------------------------------------
   The 3D scan is the subject, not a framed preview. On wide screens it sits
   behind a broken-grid headline, while proof points and actions anchor the
   corners. Text remains readable without blocking the interactive scan.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Hero CTA border beam.
   ---------------------------------------------------------------------------
   Same rotating-conic-gradient-ring technique as `.concept-why::after`
   (hero.css) and `.concept-frame-beam` (viewer.css) — the glow already used
   around the #why-us section that houses the 3D viewer. A dedicated
   `@property` rather than reusing `--why-beam-angle`, so this animation and
   that one never fight over the same registered value.

   Colour is copper (--accent-light/--accent-hover), not the reference's
   acid/blue: those two are this button's own established accent from the
   CTA repaint earlier in this pass, and acid/blue would read as an unrelated
   palette bleeding onto a copper button. Same motion, this button's colour.
   --------------------------------------------------------------------------- */
@property --hero-cta-beam-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.concept-page .concept-hero-actions .concept-primary-action::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  width: auto;
  height: auto;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--hero-cta-beam-angle),
    transparent 0deg 260deg,
    color-mix(in srgb, var(--accent-light) 16%, transparent) 278deg,
    var(--accent-light) 300deg,
    var(--accent-hover) 320deg,
    transparent 344deg
  );
  transform: none;
  pointer-events: none;
  -webkit-mask:
    linear-gradient(var(--palette-black) 0 0) content-box,
    linear-gradient(var(--palette-black) 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: concept-hero-cta-beam 7s linear infinite;
}

@keyframes concept-hero-cta-beam {
  to {
    --hero-cta-beam-angle: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .concept-page .concept-hero-actions .concept-primary-action::after {
    animation: none;
  }
}

/* The brand lockup and the product line share the header's first grid cell:
   the header itself is a 3-column grid, so a fourth child would wrap. */
.concept-brand-group {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.4vw, 26px);
  min-width: 0;
}

.concept-header-eyebrow {
  margin-bottom: 0;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .concept-header-eyebrow {
    display: none;
  }
}

@media (min-width: 961px) {
  .concept-page .concept-hero {
    position: relative;
    isolation: isolate;
    display: block;
    /* Matches the header's own full-bleed width. The base rule caps the hero
       at --concept-max (1440px), which pushed the headline, the lead card and
       the proof plaques ~10% inward while the header stayed at the page edge,
       so nothing in the hero lined up with the logo above it. */
    width: 100%;
    max-width: none;
    min-height: max(120svh, 1140px);
    padding-top: 112px;
    padding-bottom: 64px;
    overflow: visible;
  }

  .concept-page .concept-hero::before {
    display: block;
    z-index: 0;
    inset: 10% 8% 6% 20%;
    border-radius: 50%;
    background:
      radial-gradient(circle at 40% 46%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 42%),
      radial-gradient(circle at 68% 54%, color-mix(in srgb, var(--coral) 13%, transparent), transparent 38%);
    filter: blur(52px);
    opacity: .72;
    pointer-events: none;
  }

  .concept-page .concept-hero-copy {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto minmax(112px, 1fr);
    gap: 0 clamp(18px, 2vw, 34px);
    width: 100%;
    max-width: none;
    /* This box is the containing block for the lead card and the action bar,
       which both anchor to its bottom edge. At the old height they landed at
       ~65% of the viewport, colliding with the last lines of the headline.

       `100svh` was measured from y=0, but this box starts 112px down (the
       section's own padding-top), so a 100svh-tall box always ended 112px
       past the actual viewport bottom — and dragged the lead card and the
       action bar with it. Subtracting the offset lands the box, and them,
       back inside the fold. */
    min-height: clamp(760px, calc(100svh - 112px), 1040px);
    padding: 0;
    pointer-events: none;
  }

  .concept-page .concept-hero h1 {
    position: relative;
    z-index: 3;
    grid-row: 2;
    grid-column: 1 / -1;
    max-width: none;
    margin: clamp(26px, 4vh, 48px) 0 0;
    color: var(--ink);
    font-size: clamp(52px, 4vw, 84px);
    line-height: .84;
    letter-spacing: -.04em;
    text-wrap: balance;
    text-shadow:
      0 1px 1px color-mix(in srgb, var(--paper-bright) 88%, transparent),
      0 0 22px color-mix(in srgb, var(--paper) 72%, transparent);
    pointer-events: none;
  }

  /* Sized in `em` so the column scales with the type and can never clip the
     longest word ("интерактивного" ≈ 7em). The indent and width keep the
     block clear of the apartment render, which starts around 39% of the
     viewport — the old 21vw indent pushed it straight over the image. */
  /* Flush with the headline rather than indented, and sized in `em` so the
     column scales with the type. 13.6em is what holds the reference's four
     lines — it clears the longest pair ("интерактивного программного", ~12.4em)
     while staying short enough to push "интерактивного" onto line 2. No <br>
     in the copy, so the wrap survives all three locales. */
  .concept-page .concept-hero h1 em {
    display: block;
    width: 14.4em;
    max-width: 100%;
    margin: clamp(22px, 2.6vh, 34px) 0 0;
    color: color-mix(in srgb, var(--accent-light) 55%, var(--palette-sand-linen));
    font-size: .78em;
    font-style: normal;
    line-height: 1.14;
    letter-spacing: -.02em;
    /* Not the h1's inherited `balance`: balancing equalises line lengths and
       ignores the column width entirely, which pinned "интерактивного" alone
       on line 2 at every width from 13 to 17em. `pretty` fills greedily again,
       and the reference's four lines then hold anywhere in 14.1–15.4em. */
    text-wrap: pretty;
    text-shadow: 0 2px 18px color-mix(in srgb, var(--palette-black) 52%, transparent);
  }

  /* The copper rule sits between the headline and the second line, so it has
     to be the em's ::before — the em is the last child, so an ::after on the
     h1 would land under the whole block instead of between the two. */
  .concept-page .concept-hero h1 em::before {
    content: "";
    display: block;
    width: 72px;
    height: 2px;
    margin-bottom: clamp(20px, 2.4vh, 32px);
    background: var(--accent-light);
  }

  html[data-theme="light"] .concept-page .concept-hero h1 em,
  [data-theme="dark"] .concept-page .concept-hero h1 em {
    color: color-mix(in srgb, var(--accent-light) 55%, var(--palette-sand-linen));
  }

  html[lang="ru"] .concept-page .concept-hero h1,
  :lang(ru) .concept-page .concept-hero h1 {
    font-size: clamp(46px, 3.5vw, 74px);
    line-height: .88;
    letter-spacing: -.04em;
  }

  html[lang="ru"] .concept-page .concept-hero h1 em,
  :lang(ru) .concept-page .concept-hero h1 em {
    line-height: 1.04;
  }

  /* Horizontal plate tied to the text column: drawing on the left, hairline
     divider, copy on the right. The fill is copper over a dark translucent
     base rather than the flat --coral it used to be, so it reads as part of
     the same drafting language as the blueprint instead of a loose orange
     rectangle. It sets its own light text colour, so the dark base is safe in
     both themes. */
  .concept-page .concept-hero-lead {
    position: absolute;
    z-index: 4;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: clamp(16px, 1.4vw, 26px);
    width: min(44%, 760px);
    max-width: none;
    margin: 0;
    padding: clamp(22px, 1.8vw, 32px);
    border: 1px solid var(--accent-border);
    border-radius: 14px;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--accent-primary) 32%, transparent), color-mix(in srgb, var(--accent-primary) 15%, transparent)),
      color-mix(in srgb, var(--palette-forest-abyss) 74%, transparent);
    color: color-mix(in srgb, var(--palette-soft-ivory-bright) 92%, transparent);
    font-size: clamp(15px, 1.02vw, 18px);
    line-height: 1.55;
    box-shadow: var(--card-shadow);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    /* Lets the icon and the copy lift off the plate while it tilts. */
    transform-style: preserve-3d;
    /* .concept-hero-copy is pointer-events: none so the scan stays draggable
       through it; the tilt needs this card to opt back in. */
    pointer-events: auto;
    transition:
      border-color 180ms var(--concept-ease-out),
      background-color 180ms var(--concept-ease-out),
      box-shadow 180ms var(--concept-ease-out);
  }

  .concept-page .concept-hero-lead:hover {
    border-color: color-mix(in srgb, var(--accent-hover) 72%, transparent);
    box-shadow: var(--card-shadow-hover);
  }

  .concept-page .concept-hero-actions {
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: 0;
    justify-content: flex-start;
    margin: 0;
    padding: 14px;
    background: color-mix(in srgb, var(--paper) 86%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    pointer-events: auto;
  }

  .concept-page .concept-hero-actions .concept-primary-action {
    position: relative;
    isolation: isolate;
  }

  /* Anchored to the start of the content grid, above the headline, instead of
     floating over the render in the right-hand columns. */
  .concept-page .concept-hero-facts {
    z-index: 5;
    grid-row: 1;
    grid-column: 1 / span 8;
    align-self: start;
    justify-self: start;
    width: min(100%, 480px);
    /* Equal width, but capped to keep the facts subordinate to the headline.
       The first equal-column pass filled eight grid tracks and turned these
       compact proof points into three 382px feature cards on FHD. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    margin: 0;
    gap: 8px;
  }

  /* The stack keeps these from reading as navigation, while the restrained
     dimensions restore their role as supporting proof rather than features. */
  .concept-page .concept-hero-facts article {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    min-height: 82px;
    height: auto;
    padding: 11px 14px 13px;
    border: 1px solid var(--line);
    border-radius: 9px;
    /* Theme-aware rather than a fixed dark tint: the labels inherit --ink, so
       a permanently dark panel would put dark text on dark in the light theme.
       On the dark theme this resolves to Forest Surface — the reference's
       translucent dark plaque. */
    background: color-mix(in srgb, var(--paper-bright) 84%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .concept-page .concept-hero-facts .ph {
    width: auto;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--accent-light);
    font-size: 22px;
  }

  .concept-page .concept-hero-facts span {
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
  }

  .concept-page .concept-hero-visual,
  html[data-theme="light"] .concept-page .concept-hero-visual,
  [data-theme="dark"] .concept-page .concept-hero-visual {
    --scan-scale: .96;
    /* 880px was reached at ~1913px viewport width and then held flat. Past
       that, container width kept growing (right:0/left:40%) while height
       didn't, so the container's aspect ratio drifted past the raster's own
       1.5:1 and object-fit: contain started letterboxing left/right instead
       of the building actually growing — the empty margins on 2K/QHD
       screens. Raising the cap to 1180px moves that plateau out to ~2565px
       viewport width, past 2K. Uncapped would overshoot on ultrawide/4K. */
    --scan-figure-h: clamp(700px, 46vw, 1180px);
    position: absolute;
    z-index: 2;
    top: 112px;
    /* Anchored so the rendered apartment starts right of the headline column
       (which now ends at ~33% of the viewport) instead of running under it.
       The height keeps the whole building inside the first screen. */
    /* Flush to the viewport edge, with --scan-scale raised to .96: the render
       is width-constrained here (the box is 1.31:1 against the raster's 1.5),
       so width is the only axis that can grow it — extra height would just add
       letterboxing. Together these give ~13% more building. */
    right: 0%;
    /* 40%, not 36%: the second headline line now runs to ~14.4em and the
       building's first visible pixels sit 5.2% into the raster, so this is
       what keeps clearance between the copy and the render. */
    left: 40%;
    justify-self: stretch;
    width: auto;
    max-width: none;
    height: var(--scan-figure-h);
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .concept-page .concept-hero-visual::after {
    display: none;
  }

  /* The glow's fade has to finish INSIDE this box, and the old mask did not.
     `radial-gradient(ellipse at 56% 50%, ...)` with no size defaults to
     farthest-corner: centred at 56%, the farthest side is the left one, so
     rx works out to 0.56 × √2 = 0.792 of the width. The right edge sits only
     0.44 of the width away — 55.6% of that radius — but the old stops did not
     reach `transparent` until 76%. So the glow was still ~64% opaque exactly
     where the element ended, and the box boundary cut it into a dead-straight
     vertical line. That was the "срез" the whole time: not the raster, not
     the point cloud, not the clip-path — this fallback's own edge. It read as
     a glow seam because that is literally what it was.

     Sizing the ellipse explicitly fixes it. rx = 44% and ry = 50% put
     `transparent 100%` exactly on the nearest edge, so every side of the box
     is reached at zero opacity: right at 1.00 × rx, left at 1.27 × rx (past
     the ellipse entirely), top and bottom at 1.00 × ry.

     `no-repeat` matters too: the mask image is sized to the border box, and
     the default `repeat` tiles it, so the blur's overflow could pick the
     gradient up again outside the box. */
  .concept-page .concept-hero-visual .concept-shader-fallback,
  .concept-page .concept-hero-visual .concept-shader-root {
    inset: 2% 7% 4% 13%;
    filter: blur(54px) saturate(.82);
    -webkit-mask-image: radial-gradient(ellipse 44% 50% at 56% 50%, var(--palette-black) 0 24%, transparent 100%);
    mask-image: radial-gradient(ellipse 44% 50% at 56% 50%, var(--palette-black) 0 24%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

}

/* ---------------------------------------------------------------------------
   Drafting plane under the apartment.
   ---------------------------------------------------------------------------
   Vector so it survives the perspective transform for free and stays a few KB
   of markup instead of another raster request. It sits at z-index 1: above the
   shader glow (0), below the scan and its point cloud (2), so it reads as a
   surface the building rests on and never competes with it.

   The page is `overflow-x: clip` (hero.css) and the mobile hero is
   `overflow: hidden`, so the deliberate horizontal bleed cannot reach the
   document scrollbar at any width.
   --------------------------------------------------------------------------- */
.concept-hero-blueprint {
  position: absolute;
  z-index: 1;
  bottom: -8%;
  left: 50%;
  width: 172%;
  height: auto;
  color: var(--accent-light);
  opacity: .42;
  transform:
    translateX(-50%)
    perspective(1100px)
    rotateX(60deg)
    rotateZ(-7deg);
  transform-origin: 50% 100%;
  pointer-events: none;
}

@media (min-width: 961px) {
  .concept-hero-blueprint {
    bottom: 4%;
    left: calc(50% - 120px);
  }
}

/* Slow enough to register as drift rather than motion — one full pass takes
   two minutes. CSS, not JS, so it survives a CDN outage and adds no loop. */
.concept-hero-blueprint-spin {
  animation: concept-blueprint-spin 120s linear infinite;
}

.concept-hero-blueprint-flow {
  animation: concept-blueprint-flow 34s linear infinite;
}

@keyframes concept-blueprint-spin {
  to {
    stroke-dashoffset: -520;
  }
}

@keyframes concept-blueprint-flow {
  to {
    stroke-dashoffset: -320;
  }
}

@media (prefers-reduced-motion: reduce) {
  .concept-hero-blueprint-spin,
  .concept-hero-blueprint-flow {
    animation: none;
  }
}

/* --- Hero lead card internals ------------------------------------------- */
.concept-page .concept-hero-lead-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--accent-light);
}

.concept-page .concept-hero-lead-icon svg {
  display: block;
  width: clamp(64px, 4.8vw, 84px);
  height: auto;
}

.concept-page .concept-hero-lead-text {
  min-width: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  text-wrap: pretty;
}

@media (min-width: 961px) {
  .concept-page .concept-hero-lead-icon {
    padding-inline-end: clamp(16px, 1.4vw, 26px);
    border-inline-end: 1px solid var(--accent-border);
  }

  /* Lifted off the plate so the tilt has parallax instead of moving as one
     flat slab. Matches the 18px the brief calls for. */
  .concept-page .concept-hero-lead-icon,
  .concept-page .concept-hero-lead-text {
    transform: translateZ(18px);
  }
}

/* Both the point-cloud overlay and the scan-line reveal were removed from
   this figure — it is a plain letterboxed image now. This single rule
   replaces the three that used to divide the job between the scan-reveal
   wrapper span (position + centering) and the `[data-section-scan]` variant
   (only-when-armed absolute positioning); the figure carries both directly
   since nothing else needs to key off those attributes anymore. */
.concept-page .concept-hero-scan {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

/* Tried `align-items: start` on the grid cell first, and it did nothing —
   worth recording why. The <img> box already fills the cell at 100%/100%
   (only `transform: scale(.96)` shrinks it, symmetrically, contributing a
   mere ~18px), so there was no leftover space for grid alignment to place.
   The actual ~117px gap is `object-fit: contain`'s own internal letterboxing
   — the raster is 1.5:1 inside a box nearer 1.3:1 at this width, so contain
   pads the difference *inside the element's rendering*, split top/bottom by
   the default `object-position: 50% 50%`. That padding is invisible (alpha)
   but still pushes the visible roofline down with it. Moving the anchor to
   the top edge puts the whole pad below the building instead. */
@media (min-width: 961px) {
  .concept-page .concept-hero-scan img {
    object-position: 50% 0%;
  }
}

/* The bottom edge needs nothing: it stopped being visible once the point
   cloud and the scan reveal came off this figure, so it was never the
   raster. Only the right edge still shows a seam — the source keeps its
   alpha opaque to within ~2% of that side (the left and top carry a baked-in
   organic dissolve instead) and runs a bright rim-light down the roofline
   right up to the cut. */

/* The source already contains the complete apartment and its own atmospheric
   canvas. Still only ever ONE mask layer here: Chromium can resolve a
   composed WebKit mask stack to a fully transparent image.

   `mix-blend-mode: screen` is dropped on purpose, and it is what caused the
   visible rectangle around the render. The raster is a real alpha cutout —
   46% of its pixels are fully transparent — but the RGB *under* that
   transparency is not black: measured luminance averages 70–107 along the
   edges and peaks over 200. Screen blending lifts those hidden values back
   into the composite, so the image's bounding box showed up as a lighter
   panel with hard vertical and horizontal edges. Normal compositing honours
   the cutout and the edges disappear.

   The right-edge fade has to be a mask rather than a painted scrim. A scrim
   was tried first and is wrong here: it fills with a flat colour, but the
   backdrop is not flat — page clouds, the hero radial and the blueprint all
   sit behind this figure — so the fill read as its own rectangle with hard
   left and top sides. A mask removes pixels instead, letting the real
   backdrop through, so no new edge can appear. 6% is deliberately just past
   the ~2% where the building's own content ends, enough to take the
   rim-light with it without eating into the balcony detail.

   Horizontal only, and the element box is the content box on this axis: the
   figure stays narrower than the raster's 1.5:1 up to ~2950px viewport, so
   `contain` is width-constrained and the mask lands exactly on the render's
   own edge rather than on empty letterboxed space. */
.concept-page .concept-hero-scan img {
  animation: none;
  will-change: auto;
  mix-blend-mode: normal;
  -webkit-mask-image: linear-gradient(to left, transparent 0%, var(--palette-black) 6%);
  mask-image: linear-gradient(to left, transparent 0%, var(--palette-black) 6%);
}

@media (min-width: 961px) and (max-width: 1180px) {
  .concept-page .concept-hero h1 {
    font-size: clamp(50px, 5.4vw, 66px);
  }

  html[lang="ru"] .concept-page .concept-hero h1,
  :lang(ru) .concept-page .concept-hero h1 {
    font-size: clamp(44px, 4.6vw, 56px);
  }

  /* The column keeps its 14.4em so the four-line break survives; the type
     shrinks instead, which is what makes those 14.4em fit beside the render
     at this width. Narrowing the column instead fragmented the copy to six
     lines. The render also moves right — the old 11% left edge ran the
     apartment straight under the headline. */
  .concept-page .concept-hero h1 em {
    font-size: .66em;
  }

  .concept-page .concept-hero-facts {
    grid-column: 1 / span 9;
  }

  .concept-page .concept-hero-lead {
    width: min(46%, 460px);
  }

  .concept-page .concept-hero-visual,
  html[data-theme="light"] .concept-page .concept-hero-visual,
  [data-theme="dark"] .concept-page .concept-hero-visual {
    right: -6%;
    left: 46%;
  }

  .concept-hero-blueprint {
    width: 140%;
    opacity: .24;
  }
}

@media (min-width: 621px) and (max-width: 960px) {
  .concept-page .concept-hero-facts {
    width: min(100%, 480px);
  }
}

/* The workflow is a distinct chapter, not the tail of the business board. */
.concept-page .concept-workflow {
  box-sizing: border-box;
  width: min(calc(100% - (2 * var(--pad))), var(--concept-max));
  max-width: var(--concept-max);
  margin: 18px auto 0;
  overflow: clip;
  border: 1px solid color-mix(in srgb, var(--palette-forest-deep) 14%, transparent);
  border-radius: 18px;
}

[data-theme="dark"] .concept-page .concept-workflow {
  border-color: color-mix(in srgb, var(--palette-soft-ivory-bright) 14%, transparent);
}

@media (max-width: 960px) {
  .concept-page .concept-workflow {
    margin-top: 10px;
  }

  .concept-page .concept-hero {
    display: block;
    min-height: auto;
    overflow: hidden;
  }

  .concept-page .concept-hero-copy {
    display: block;
    min-height: 0;
  }

  .concept-page .concept-hero h1 em,
  html[lang="ru"] .concept-page .concept-hero h1 em,
  :lang(ru) .concept-page .concept-hero h1 em {
    width: auto;
    margin-left: 0;
    font-style: italic;
  }

  .concept-page .concept-hero-visual,
  html[data-theme="light"] .concept-page .concept-hero-visual,
  [data-theme="dark"] .concept-page .concept-hero-visual {
    position: relative;
    right: auto;
    left: auto;
    overflow: hidden;
    border: 0;
    background: transparent;
    box-shadow: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .concept-page .concept-hero-visual::after {
    display: none;
  }

  /* Copy first, render below — the copy block is already the hero's first
     child, so the stack only needs the absolute positioning released. */
  .concept-page .concept-hero-lead,
  .concept-page .concept-hero-actions {
    position: static;
    width: auto;
    max-width: none;
  }

  /* Vertical: the divider becomes a horizontal rule under the drawing. */
  .concept-page .concept-hero-lead {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-top: 26px;
    padding: 20px;
    border: 1px solid var(--accent-border);
    border-radius: 14px;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--accent-primary) 32%, transparent), color-mix(in srgb, var(--accent-primary) 15%, transparent)),
      color-mix(in srgb, var(--palette-forest-abyss) 74%, transparent);
    color: color-mix(in srgb, var(--palette-soft-ivory-bright) 92%, transparent);
  }

  .concept-page .concept-hero-lead-icon {
    padding-block-end: 14px;
    border-block-end: 1px solid var(--accent-border);
    /* Stretches so the rule spans the card rather than just the drawing. */
    justify-self: stretch;
    width: 100%;
    place-items: center start;
  }

  .concept-page .concept-hero h1 em::before {
    margin-bottom: 18px;
  }

  /* Present but recessive: no perspective tilt to fight the stacked layout,
     and low enough that it never competes with the render above it. */
  .concept-hero-blueprint {
    bottom: 6%;
    width: 150%;
    opacity: .16;
    transform: translateX(-50%);
  }
}

/* ---------------------------------------------------------------------------
   Light theme legibility.
   ---------------------------------------------------------------------------
   The copper accents are tuned for Forest Deep. On Soft Ivory the same values
   collapse: the headline's second line measured 1.85:1 and the plaque icons
   2.43:1, both well under their thresholds. Everything here swaps the light
   copper for the deep one, which brings the display line to 3.77:1 (AA large,
   and it is 40px+) and the icons to 4.31:1 (AA non-text). Placed outside the
   breakpoint blocks so it holds at every width.
   --------------------------------------------------------------------------- */
html[data-theme="light"] .concept-page .concept-hero h1 em {
  color: var(--accent-primary);
  text-shadow: none;
}

html[data-theme="light"] .concept-page .concept-hero h1 em::before {
  background: var(--accent-primary);
}

html[data-theme="light"] .concept-page .concept-hero-facts .ph {
  color: var(--accent-primary);
}

html[data-theme="light"] .concept-page .concept-hero-facts article {
  border-color: color-mix(in srgb, var(--accent-primary) 26%, transparent);
}

html[data-theme="light"] .concept-page .concept-hero-facts span {
  color: var(--ink);
}

/* Ivory reflects far more than Forest Deep, so the same opacity reads as a
   harsher drawing here; the deep copper at lower alpha matches its weight. */
html[data-theme="light"] .concept-hero-blueprint {
  color: var(--accent-primary);
  opacity: .26;
}

@media (max-width: 620px) {
  .concept-page .concept-workflow {
    width: calc(100% - 24px);
    margin-top: 10px;
    border-radius: 16px;
  }

  /* One row that scrolls sideways instead of three cramped columns. */
  .concept-page .concept-hero-facts {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(178px, 1fr);
    grid-template-columns: none;
    gap: 10px;
    margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .concept-page .concept-hero-facts article {
    scroll-snap-align: start;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
  }

  .concept-page .concept-hero-facts article + article {
    padding-left: 12px;
    border-left: 1px solid var(--line);
  }
}

/* ==========================================================================
   Product proof plaques — compact depth, not miniature navigation.
   ========================================================================== */
.concept-page .concept-hero-facts article {
  --fact-accent: var(--accent-light);
  --fact-glow: color-mix(in srgb, var(--fact-accent) 16%, transparent);
  transform-style: preserve-3d;
  will-change: transform;
  border-color: color-mix(in srgb, var(--fact-accent) 25%, var(--line));
  border-radius: 10px;
  background:
    radial-gradient(circle at 108% -18%, var(--fact-glow), transparent 58%),
    color-mix(in srgb, var(--paper-bright) 88%, transparent);
  box-shadow: 0 13px 28px -24px color-mix(in srgb, var(--palette-forest-deep) 48%, transparent);
  transition:
    border-color 320ms var(--concept-ease-out),
    box-shadow 320ms var(--concept-ease-out);
}

.concept-page .concept-hero-facts article:nth-child(2) {
  --fact-accent: var(--accent-light);
}

.concept-page .concept-hero-facts article:nth-child(3) {
  --fact-accent: var(--acid);
}

.concept-page .concept-hero-facts article::before {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 18px;
  height: 18px;
  border-top: 1px solid color-mix(in srgb, var(--fact-accent) 72%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--fact-accent) 72%, transparent);
  content: "";
  opacity: .72;
  pointer-events: none;
}

.concept-page .concept-hero-facts article:hover {
  border-color: color-mix(in srgb, var(--fact-accent) 58%, var(--line));
  box-shadow: 0 20px 38px -28px color-mix(in srgb, var(--fact-accent) 62%, transparent);
}

.concept-page .concept-hero-facts .ph {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--fact-accent) 34%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--fact-accent) 10%, transparent);
  color: var(--fact-accent);
  font-size: 18px;
  transform: translateZ(20px);
}

.concept-page .concept-hero-facts span {
  position: relative;
  z-index: 2;
  color: var(--ink);
  transform: translateZ(12px);
}

/* ==========================================================================
   Workflow cards — each stage carries its own spatial signal.
   ========================================================================== */
.concept-page .concept-workflow-track article {
  --workflow-visual-line: color-mix(in srgb, var(--blue) 58%, transparent);
  --workflow-visual-accent: var(--coral);
  min-height: 210px;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
}

.concept-page .concept-workflow-track article:nth-of-type(2) {
  --workflow-visual-line: color-mix(in srgb, var(--coral) 68%, transparent);
  --workflow-visual-accent: var(--blue);
}

.concept-page .concept-workflow-track article:nth-of-type(3) {
  --workflow-visual-line: color-mix(in srgb, var(--ink-on-bright) 54%, transparent);
  --workflow-visual-accent: var(--coral);
}

.concept-page .concept-workflow-track article > span,
.concept-page .concept-workflow-track h3,
.concept-page .concept-workflow-track p {
  position: relative;
  z-index: 3;
}

.concept-page .concept-workflow-track article > span {
  transform: translateZ(22px);
}

.concept-page .concept-workflow-track h3 {
  max-width: 62%;
  transform: translateZ(15px);
}

.concept-page .concept-workflow-track p {
  max-width: 60%;
  transform: translateZ(8px);
}

.concept-page .concept-workflow-card-visual {
  position: absolute;
  z-index: 1;
  right: -3%;
  bottom: -20%;
  width: 48%;
  height: 132%;
  margin: 0;
  color: var(--workflow-visual-line);
  opacity: .62;
  transform: translateZ(2px) scale(.98);
  transform-origin: 62% 62%;
  transition:
    opacity 520ms var(--concept-ease-out),
    transform 700ms var(--concept-ease-out);
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 35%, #000 100%);
  mask-image: linear-gradient(100deg, transparent 0%, #000 35%, #000 100%);
  pointer-events: none;
}

.concept-page .concept-workflow-track article:hover .concept-workflow-card-visual {
  opacity: .84;
  transform: translateZ(4px) scale(1.015);
}

.concept-page .concept-workflow-card-visual svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.concept-page .concept-workflow-card-visual svg * {
  vector-effect: non-scaling-stroke;
}

.concept-page .concept-workflow-plan {
  top: auto;
  left: auto;
  width: 52%;
  height: 130%;
  margin: 0;
  color: var(--workflow-visual-line);
}

.concept-page .concept-workflow-plan::before {
  inset: 8% 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%);
  mask-image: linear-gradient(90deg, transparent, #000 28%);
}

.concept-page .concept-workflow-plan .concept-plan-sheet {
  top: 19%;
  left: 47%;
  width: 84%;
  background: color-mix(in srgb, var(--paper-bright) 52%, transparent);
  box-shadow:
    10px 10px 0 color-mix(in srgb, currentColor 6%, transparent),
    0 20px 40px color-mix(in srgb, var(--palette-forest-deep) 10%, transparent);
}

.concept-page .concept-workflow-plan .concept-plan-rise {
  right: 0;
  bottom: 12%;
  width: 25%;
}

.workflow-visual-grid {
  fill: none;
  stroke: var(--workflow-visual-line);
  stroke-width: 1;
  opacity: .2;
}

.workflow-model-wire,
.workflow-browser-frame,
.workflow-browser-plan {
  fill: color-mix(in srgb, var(--workflow-visual-line) 6%, transparent);
  stroke: var(--workflow-visual-line);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.workflow-scan-line,
.workflow-browser-data,
.workflow-live-mark {
  fill: none;
  stroke: var(--workflow-visual-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.workflow-checkpoints circle,
.workflow-browser-data circle {
  fill: var(--paper-bright);
  stroke: var(--workflow-visual-accent);
  stroke-width: 2;
}

.workflow-checkpoints circle:last-child,
.workflow-browser-data circle:last-child {
  fill: var(--workflow-visual-accent);
}

.workflow-qa-panel {
  fill: color-mix(in srgb, var(--workflow-visual-accent) 8%, transparent);
  stroke: var(--workflow-visual-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.workflow-browser-frame > circle {
  fill: var(--workflow-visual-line);
  stroke: none;
}

.workflow-cursor {
  fill: color-mix(in srgb, var(--workflow-visual-accent) 20%, var(--paper-bright));
  stroke: var(--workflow-visual-accent);
  stroke-linejoin: round;
  stroke-width: 1.8;
}

[data-theme="dark"] .concept-page .concept-workflow-plan .concept-plan-sheet {
  background: color-mix(in srgb, var(--palette-forest-surface) 58%, transparent);
}

@media (min-width: 1400px) {
  .concept-page .concept-workflow-track article,
  .concept-page .concept-workflow-track article:nth-of-type(2),
  .concept-page .concept-workflow-track article:nth-of-type(3) {
    min-height: 304px;
  }

  .concept-page .concept-workflow-track h3,
  .concept-page .concept-workflow-track p {
    max-width: 100%;
  }

  .concept-page .concept-workflow-card-visual,
  .concept-page .concept-workflow-plan {
    right: -8%;
    bottom: -18%;
    width: 92%;
    height: 69%;
    opacity: .42;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 100%);
  }

  .concept-page .concept-workflow-plan .concept-plan-sheet {
    top: 4%;
    left: 48%;
    width: 78%;
  }
}

@media (max-width: 620px) {
  .concept-page .concept-workflow-track article,
  .concept-page .concept-workflow-track article:nth-of-type(2),
  .concept-page .concept-workflow-track article:nth-of-type(3) {
    min-height: 288px;
  }

  .concept-page .concept-workflow-track h3,
  .concept-page .concept-workflow-track p {
    max-width: 78%;
  }

  .concept-page .concept-workflow-card-visual,
  .concept-page .concept-workflow-plan {
    right: -10%;
    bottom: -17%;
    width: 68%;
    height: 82%;
    opacity: .34;
  }
}

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .concept-page .concept-hero-facts .ph,
  .concept-page .concept-hero-facts span,
  .concept-page .concept-workflow-track article > span,
  .concept-page .concept-workflow-track h3,
  .concept-page .concept-workflow-track p,
  .concept-page .concept-workflow-card-visual {
    transform: none;
  }

  .concept-page .concept-workflow-card-visual {
    transition: none;
  }
}