/* SENTINEL — V9 SITE INTEGRATION LAYER
 *
 * The dimensional grammar itself lives in `dimensional-v2.css` (CoderWeb
 * Skillpack V2) and is loaded before this file. Nothing here re-invents that
 * grammar; this layer only seats it inside the SENTINEL shell: world light,
 * type/presence balance, living-module surfaces, Kurumsal recomposition and
 * the light theme.
 */

/* ------------------------------------------------------- world tokens ---- */
body{--w-accent:#3C8DF0;--w-field:#04070C;--w-key:rgba(60,141,240,.16);--w-ink:#7FB2F5}
body[data-world="personal"]    {--w-accent:#8E7BF5;--w-field:#06060F;--w-key:rgba(142,123,245,.17);--w-ink:#B0A2FF}
body[data-world="family"]      {--w-accent:#F0A94E;--w-field:#0B0806;--w-key:rgba(240,169,78,.15);--w-ink:#F5C384}
body[data-world="senior"]      {--w-accent:#54C79B;--w-field:#040B08;--w-key:rgba(84,199,155,.14);--w-ink:#8BDCBB}
body[data-world="organization"]{--w-accent:#3C8DF0;--w-field:#04070C;--w-key:rgba(60,141,240,.16);--w-ink:#7FB2F5}

/* ------------------------------------------------------- hero container -- */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(96% 78% at 70% 30%, var(--w-key), transparent 62%),
    linear-gradient(180deg, var(--w-field) 0%, transparent 40%),
    linear-gradient(0deg, var(--w-field) 0%, transparent 26%)}
.hero .wrap{position:relative;z-index:6}
.hero h1{max-width:min(44vw,660px);letter-spacing:-.03em}
.hero .lede{max-width:min(33vw,500px)}

/* The stage is the right-hand spatial column. The copy owns the left. */
.stage{position:absolute;top:0;right:0;bottom:0;left:38%;z-index:1;
  pointer-events:auto;contain:layout paint}
.face-base{width:100%;height:100%;object-fit:cover;object-position:50% 34%;
  user-select:none;-webkit-user-drag:none}
/* dissolve the plate's left edge into the field so it reads as depth, not a card */
.subject-shell{-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 13%,#000 34%);
                       mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 13%,#000 34%)}

/* ------------------------------------------------- living module surfaces  */
.module-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.4vw,22px);
  margin-top:clamp(26px,3vw,44px)}
.module{position:relative;padding:0 0 18px;border:1px solid rgba(255,255,255,.08);
  border-radius:14px;overflow:hidden;background:rgba(255,255,255,.014);
  transition:border-color .3s ease,background .3s ease}
.module:focus-visible{outline:2px solid var(--w-accent);outline-offset:3px}
.module-art{position:relative;aspect-ratio:520/235;overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.06)}
.module-art img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.22,.61,.36,1),filter .4s ease;
  filter:saturate(.82) brightness(.82)}
/* the scan bar is the visible proof that a module is working, and it only
   travels while the card is active — never as a standing animation */
.module-scan{position:absolute;left:-30%;top:0;bottom:0;width:26%;opacity:0;
  background:linear-gradient(90deg,transparent,
    color-mix(in srgb, var(--w-accent) 34%, transparent),transparent)}
.module h3{margin:16px 18px 6px;font-size:1.02rem}
.module p{margin:0 18px;font-size:.86rem;line-height:1.55;opacity:.72}
.meter{display:flex;gap:5px;margin:14px 18px 0}
.meter i{height:3px;flex:1;border-radius:2px;background:rgba(255,255,255,.10);
  transition:background .3s ease,transform .3s ease}

/* IDLE — low energy, one quiet indicator */
.module[data-activity="IDLE"] .meter i:first-child{
  background:color-mix(in srgb, var(--w-accent) 34%, transparent)}
/* HEARTBEAT — infrequent timer pulse, finite */
.module[data-activity="HEARTBEAT"] .meter i:nth-child(-n+2){
  background:color-mix(in srgb, var(--w-accent) 62%, transparent)}
.module[data-activity="HEARTBEAT"] .module-scan{animation:mod-scan 720ms ease-out}
/* PROXIMITY — pointer or focus raises the energy, then it returns */
.module[data-activity="PROXIMITY"]{border-color:color-mix(in srgb, var(--w-accent) 42%, transparent);
  background:color-mix(in srgb, var(--w-accent) 5%, transparent)}
.module[data-activity="PROXIMITY"] .module-art img{transform:scale(1.035);
  filter:saturate(1.06) brightness(1.02)}
.module[data-activity="PROXIMITY"] .meter i{
  background:color-mix(in srgb, var(--w-accent) 78%, transparent)}
.module[data-activity="PROXIMITY"] .meter i:nth-child(2){transform:scaleY(1.9)}
.module[data-activity="PROXIMITY"] .meter i:nth-child(3){transform:scaleY(1.4)}
.module[data-activity="PROXIMITY"] .module-scan{animation:mod-scan 1100ms ease-out}
@keyframes mod-scan{
  0%{opacity:0;transform:translateX(0)}
  18%{opacity:.9}
  100%{opacity:0;transform:translateX(520%)}
}

/* ------------------------------------------------ Kurumsal capability rail */
/* P3: the old empty right-side balance is replaced by two real capability
   cards carrying the Founder's exact wording. */
.cap-rail{display:grid;gap:14px;align-content:start}
.cap-card{position:relative;padding:20px 22px;border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(160deg,rgba(60,141,240,.07),transparent 62%)}
.cap-card .cap-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;
  margin-bottom:14px;border:1px solid color-mix(in srgb, var(--w-accent) 38%, transparent);
  color:var(--w-ink)}
.cap-card .cap-ico svg{width:24px;height:24px}
.cap-card h3{margin:0 0 8px;font-size:1.05rem}
.cap-card p{margin:0;font-size:.88rem;line-height:1.6;opacity:.76}

/* ------------------------------------------------------ reveal + a11y ---- */
.sp-reveal{opacity:0;transform:translate(0,20px)}
.sp-reveal[data-revealed="true"]{opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.sp-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.band{--band-y:clamp(64px,9vw,116px)}

/* ------------------------------------------------------------- mobile ---- */
/* Recomposed, never scaled: the visual owns the top band, the headline starts
   after it, CTA stays >=42px and nothing overflows. */
@media (max-width:900px){
  .stage{left:0;bottom:auto;height:46vh;min-height:300px}
  .face-base{object-position:50% 26%}
  .subject-shell{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 58%,transparent 94%);
                         mask-image:linear-gradient(180deg,#000 0,#000 58%,transparent 94%)}
  .hero .wrap{padding-top:calc(46vh - 34px)}
  .hero h1,.hero .lede{max-width:none}
  .hero .btn-row .btn{min-height:46px}
  .module-grid{grid-template-columns:1fr 1fr;gap:12px}
  .module h3{font-size:.94rem;margin:12px 14px 5px}
  .module p{font-size:.8rem;margin:0 14px}
}
@media (max-width:420px){
  .module-grid{grid-template-columns:1fr}
  .hero .wrap{padding-top:calc(42vh - 26px)}
}

/* -------------------------------------------------------------- light ---- */
html[data-theme="light"] .hero::before{
  background:
    radial-gradient(96% 78% at 70% 30%, color-mix(in srgb, var(--w-accent) 12%, transparent), transparent 62%),
    linear-gradient(180deg,#F6F8FB 0%, transparent 42%),
    linear-gradient(0deg,#F6F8FB 0%, transparent 26%)}
html[data-theme="light"] .face-base{filter:brightness(1.04) contrast(.95)}
html[data-theme="light"] .module{border-color:rgba(11,14,20,.12);background:rgba(11,14,20,.015)}
html[data-theme="light"] .module-art img{filter:saturate(.9) brightness(.94)}
html[data-theme="light"] .cap-card{border-color:rgba(11,14,20,.12);
  background:linear-gradient(160deg,color-mix(in srgb, var(--w-accent) 8%, transparent),transparent 62%)}
html[data-theme="light"] .meter i{background:rgba(11,14,20,.10)}

/* ---------------------------------------------------------- safety nets -- */
html:not(.js) .stage{opacity:.6}
html:not(.js) .sp-reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .module-scan{animation:none!important;opacity:0!important}
  .module-art img{transition:none}
  .sp-reveal{opacity:1!important;transform:none!important;transition:none!important}
}
html[data-tier="low"] .stage{display:block}
html[data-motion="on"] [data-reveal]{will-change:auto}

/* =============================== SKILLPACK LAYOUT SEATING (site override) ==
 * The skillpack authors `.stage` as a flow block sized to its own lab page.
 * Inside the SENTINEL hero it has to become the right-hand spatial column and
 * fill it, otherwise the presence reads as a floating card rather than as a
 * breach in the page. Only geometry is overridden; the depth grammar, the
 * state machine and every motion value stay exactly as the skillpack ships. */
.hero .stage{position:absolute;top:0;right:0;bottom:0;left:36%;
  height:auto;min-height:0;margin:0;perspective:1200px}
.hero .subject-shell{position:absolute;left:0;top:0;width:100%;height:100%;
  display:block}
.hero .subject{position:absolute;inset:0;width:100%;aspect-ratio:auto;
  filter:drop-shadow(0 30px 44px rgba(0,0,0,.5))}
.hero .face-base{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:52% 32%}
.hero .environment{inset:0}

/* The hero fact strip sits under the presence, so the stage stops above it and
   the strip keeps its own dark ground. */
.hero .assurance{position:relative;z-index:7;margin-top:clamp(34px,4.5vw,70px);
  padding-top:clamp(24px,2.6vw,38px);border-top:1px solid rgba(255,255,255,.10)}
/* the stage stops exactly where the fact rail begins, so the presence is never
   read through live copy */
.hero-universal .stage{bottom:46%}
.hero-world .stage{bottom:30%}

@media (max-width:900px){
  .hero .stage{left:0;bottom:auto;height:44vh;min-height:290px}
  .hero .subject-shell{left:0;width:100%}
  .hero .face-base{object-position:52% 24%}
  .hero-universal .stage,.hero-world .stage{bottom:auto}
}

/* The fact rail is a sibling of the hero copy, so it cannot be pushed below the
   stage with positioning alone. It is instead constrained to the copy column:
   four cards become a 2x2 block on the left, and the presence keeps the right
   column clear. This is the same left-mass / right-presence split the Founder
   reference uses. */
.hero .assurance{max-width:min(41vw,580px);grid-template-columns:1fr 1fr!important;
  gap:clamp(14px,1.6vw,24px) clamp(18px,2vw,30px)}
.hero-universal .stage{bottom:0}
.hero-world .stage{bottom:0}
@media (max-width:1100px){ .hero .assurance{max-width:none;grid-template-columns:1fr 1fr!important} }
@media (max-width:900px){ .hero .assurance{grid-template-columns:1fr!important;max-width:none} }

/* The assurance rail lives in its own full-width .wrap, so max-width alone does
   not hold it in the copy column. It is given an explicit width and pushed to
   the left so the presence keeps the right half of the hero. */
.hero .assurance{width:min(41vw,580px);margin-right:auto}
@media (max-width:1100px){ .hero .assurance{width:auto} }
.hero .assurance{width:min(41vw,580px)!important;max-width:min(41vw,580px)!important;
  margin-right:auto!important;box-sizing:border-box}
@media (max-width:1100px){ .hero .assurance{width:auto!important;max-width:none!important} }
.hero .assurance{margin-left:0!important}

/* The hero is a two-column grid and the assurance rail sits in its own .wrap,
   which lands in column 2 — the same column the presence stage occupies. That
   is the real cause of the overlap, not the rail's own width. Moving the wrap
   into column 1 puts the rail under the copy where it belongs. */
.hero .wrap:has(> .assurance){grid-column:1/2!important;width:auto!important}
@media (max-width:1100px){ .hero .wrap:has(> .assurance){grid-column:1/-1!important} }

/* ============================ PERFORMANCE SEATING (P8) =====================
 * The skillpack's lab stage is ~620px wide. Seated into the hero it becomes
 * ~900px, and three of its effects scale superlinearly at that size:
 *   filter:blur(8px) on .contact-light      — full-height blurred layer
 *   filter:drop-shadow(...) on .subject     — shadow over a photographic plate
 *   transform-style:preserve-3d             — 3D context for static children
 * Measured cost of leaving them: opening 44.78ms, pointer 61.21ms against a
 * 20ms budget. The depth reads identically without them because the recession,
 * occlusion and contact light are already carried by the artwork itself. */
.hero .contact-light{filter:none;opacity:.34;
  background:linear-gradient(90deg,rgba(123,230,255,.30),rgba(124,230,255,0))}
.hero .subject{filter:none}
.hero .environment,.hero .subject-shell{transform-style:flat}
.hero .cavity{transform:none}
/* the near-plane fragments keep their clip-path silhouettes but drop the
   per-fragment shadow, which was compositing over the whole plate */
.hero .fragment{box-shadow:none}
/* Second pass: the remaining cost is the cavity/aperture clip-path pair being
   repainted at hero scale on every breach transition, and the far-field's
   layered gradients. Both are static once SETTLED_PRESENCE is reached, so they
   are frozen there and the transition is narrowed to opacity only. */
.hero .cavity,.hero .aperture{transition:opacity .6s ease!important;transform:none!important}
.hero .far-field{background:linear-gradient(90deg,rgba(28,55,68,.22),transparent 40%)}
[data-breach-state="SETTLED_PRESENCE"] .cavity,
[data-breach-state="SETTLED_PRESENCE"] .aperture,
[data-breach-state="SETTLED_PRESENCE"] .far-field{transition:none!important}
.hero .trail-layer{contain:layout paint}

/* ======================= PERFORMANCE PASS 3 (V10, P2) ======================
 * Measured remaining cost, by painted area rather than by guesswork:
 *   IMG 1440x1213 filter:saturate/contrast   — a full-viewport filtered raster
 *   .cavity 673x1067 clip-path + inset shadow — two expensive ops on one layer
 *   .far-field 829x1019 clip-path
 *   .foreground-signal 741x93 box-shadow
 *   header backdrop-filter
 * Each is replaced by a cheaper construction that renders the same picture.
 * The canonical woman is NOT removed or shrunk to buy any of this. */

/* The route atmosphere behind the hero is already graded into the artwork, so
   the runtime filter on the full-viewport raster is redundant work. */
.hero img:not(.face-base){filter:none}

/* The cavity's inset shadow was the single most expensive declaration on the
   page: a 673x1067 layer carrying both a clip-path and a large inset blur.
   A gradient reproduces the same falloff with no blur pass. */
.hero .cavity{box-shadow:none;
  background:radial-gradient(ellipse at 60% 45%,rgba(127,226,255,.16),
    rgba(24,74,95,.07) 28%,rgba(0,0,0,.72) 62%,rgba(0,0,0,.9) 100%),
    linear-gradient(145deg,#0d2430,#020507 70%)}

/* The far-field's clip-path silhouette is invisible under the plate at hero
   scale — it sits entirely behind the artwork. */
.hero .far-field{clip-path:none;opacity:.5}

/* The signal line keeps its glow via a gradient rather than a blurred shadow. */
.hero .foreground-signal{box-shadow:none}
.hero .foreground-signal:before,.hero .foreground-signal:after{box-shadow:none}

/* backdrop-filter on a sticky full-width header repaints on every scroll frame;
   an opaque surface reads the same and costs nothing. */
.site-head{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  background:color-mix(in srgb, var(--w-field) 92%, transparent)}
html[data-theme="light"] .site-head{background:rgba(246,248,251,.96)}

/* V6: the right-edge fragment spilled 8px past a 390px viewport */
@media (max-width:760px){.hero .fragment.f1{right:0}}

/* V6: dimensional-v2.css (lab sheet) makes every .hero a two-column grid.
   Legal/404 heroes have a single .wrap child and were squeezed into the
   280px first column (h1 ~411px wide at 1440). HASAT keeps its stage but
   stacks below 980px so the copy never falls into a 200px column. */
.hero.hero-world:not(:has(> .stage)){display:block}
@media (max-width:980px){
  .hero.hero-world{grid-template-columns:minmax(0,1fr)}
}

/* V6: the lab sheet paints <body> near-black, so HASAT's plain (paper) bands
   showed paper-coloured text on a dark plate (1.1:1). Give them their surface. */
.hasat .band:not(.ink){background:var(--paper);color:var(--t-on-paper)}