/* Cybereum · surface-art-direction.css
   Surface-specific art direction layered over the durable 2030 tokens.
   Purpose: make product, reasoning and technical surfaces read as one governed
   operating infrastructure — not a collection of SaaS cards.

   This sheet is bootstrapped from site-theme.js before page bundles parse.
   Selectors are intentionally scoped and slightly more specific than legacy
   page rules so we can modernize composition without rewriting proven page
   behavior or motion choreography. */

/* --------------------------------------------------------------------------
   Editorial surfaces · Technology / Research / About / Assessment
   -------------------------------------------------------------------------- */
.cyb-page.cyb-page{
  --cyb-editorial-measure:76ch;
}
.cyb-page .hero.hero{
  min-height:min(78svh,820px);
  display:grid;
  align-items:end;
  padding:calc(var(--cyb-nav-h) + clamp(5rem,9vw,8.5rem)) 0 clamp(5rem,8vw,7rem);
  background:
    radial-gradient(44% 54% at 84% 22%,color-mix(in srgb,var(--cyb-accent-deep) 18%,transparent),transparent 74%),
    linear-gradient(180deg,color-mix(in srgb,var(--cyb-bg-2) 8%,transparent),transparent 66%);
}
.cyb-page .hero.hero::before{
  inset:0;
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--cyb-line) 42%,transparent) 1px,transparent 1px) 0 0/96px 96px,
    linear-gradient(color-mix(in srgb,var(--cyb-line) 42%,transparent) 1px,transparent 1px) 0 0/96px 96px;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 82%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 82%);
  opacity:.34;
}
.cyb-page .hero.hero::after{
  width:min(var(--cyb-max),calc(100% - 2*var(--cyb-gutter)));
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--cyb-line-strong) 72%,transparent) 16%,color-mix(in srgb,var(--cyb-line-strong) 72%,transparent) 84%,transparent);
}
.cyb-page .hero.hero h1{
  font-family:var(--cyb-editorial);
  font-size:clamp(2rem,3.5vw,3.5rem);
  line-height:1.14;
  letter-spacing:var(--cyb-tracking-display);
  max-width:16.16em;
  margin:1.1rem 0 1.8rem;
}
.cyb-page .hero.hero .lede{
  max-width:var(--cyb-editorial-measure);
  font-size:clamp(1.08rem,.92rem + .55vw,1.36rem);
  line-height:1.72;
  color:color-mix(in srgb,var(--cyb-fg-2) 88%,var(--cyb-fg-3));
}
.cyb-page .section.section{
  padding:clamp(5rem,8vw,8rem) 0;
  border-top-color:color-mix(in srgb,var(--cyb-line) 66%,transparent);
}
.cyb-page .section.section h2{
  max-width:21.87em;
  font-size:clamp(1.5rem,2.2vw,2rem);
  line-height:1.26;
  letter-spacing:var(--cyb-tracking-display);
}
.cyb-page .section-intro.section-intro{
  max-width:var(--cyb-editorial-measure);
  line-height:1.75;
}
.cyb-page .grid.grid{
  gap:0;
  border:1px solid color-mix(in srgb,var(--cyb-line-strong) 58%,transparent);
  border-radius:var(--cyb-radius-md);
  overflow:hidden;
  background:color-mix(in srgb,var(--cyb-line-strong) 45%,transparent);
  box-shadow:var(--cyb-shadow-1);
}
.cyb-page .grid.grid .card.card{
  min-height:220px;
  border:0;
  border-radius:0;
  background:color-mix(in srgb,var(--cyb-bg-2) 95%,var(--cyb-bg));
  box-shadow:none;
  padding:clamp(1.65rem,2.5vw,2.35rem);
}
.cyb-page .grid.grid .card.card + .card.card{
  border-left:1px solid color-mix(in srgb,var(--cyb-line-strong) 48%,transparent);
}
.cyb-page .grid.grid .card.card::before{
  inset:0 auto auto 0;
  width:44px;
  height:1px;
  opacity:.72;
  background:var(--cyb-accent);
}
.cyb-page .grid.grid .card.card:hover{
  transform:none;
  background:color-mix(in srgb,var(--cyb-accent) 3.5%,var(--cyb-bg-2));
  box-shadow:none;
}
.cyb-page .rail.rail{
  grid-template-columns:minmax(150px,.28fr) minmax(0,1fr);
  padding:clamp(1.55rem,3vw,2.4rem) 0;
  border-color:color-mix(in srgb,var(--cyb-line-strong) 48%,transparent);
}
.cyb-page .rail.rail .label{
  letter-spacing:.2em;
  color:color-mix(in srgb,var(--cyb-accent) 72%,var(--cyb-fg-3));
}
.cyb-page .process.process{
  border-bottom-color:color-mix(in srgb,var(--cyb-line-strong) 52%,transparent);
}
.cyb-page .step.step{
  grid-template-columns:92px minmax(0,1fr);
  padding:clamp(1.7rem,3vw,2.5rem) 0;
  border-top-color:color-mix(in srgb,var(--cyb-line-strong) 52%,transparent);
}
.cyb-page .step.step::before{
  width:52px;height:52px;border-radius:var(--cyb-radius-sm);
  border-color:color-mix(in srgb,var(--cyb-accent) 24%,var(--cyb-line));
  background:color-mix(in srgb,var(--cyb-accent) 3%,var(--cyb-bg-2));
  box-shadow:none;
}
.cyb-page .quote.quote{
  font-size:clamp(1.05rem,1.55vw,1.5rem);
  max-width:32em;
}

/* --------------------------------------------------------------------------
   Dyēŭs · reasoning should look like an instrument of authority
   -------------------------------------------------------------------------- */
body[data-shell-hero="dark"] .hero.hero{
  min-height:min(88svh,860px);
  padding-block:calc(var(--cyb-nav-h) + clamp(4.5rem,8vw,7rem)) clamp(4.5rem,7vw,6.5rem);
  background:
    radial-gradient(50% 70% at 78% 48%,color-mix(in srgb,var(--cyb-graph) 24%,transparent),transparent 72%),
    linear-gradient(155deg,#0b1d31 0%,#07111d 52%,#04080e 100%);
}
body[data-shell-hero="dark"] .hero.hero::after{
  background:linear-gradient(96deg,#04080e 24%,rgba(4,8,14,.82) 46%,rgba(4,8,14,.08) 73%);
}
body[data-shell-hero="dark"] .hero.hero h1{
  font-size:clamp(2rem,3.5vw,3.5rem);
  line-height:1.14;
  letter-spacing:var(--cyb-tracking-display);
  max-width:17.11em;
}
body[data-shell-hero="dark"] .hero.hero .lede{
  line-height:1.75;
  max-width:56ch;
  color:color-mix(in srgb,var(--cyb-mist) 88%,#6e9cc4);
}
body[data-shell-hero="dark"] .hero-field.hero-field{
  left:76%;
  width:min(82vh,780px);
  filter:saturate(.9) contrast(1.02);
  opacity:.92;
}
body[data-shell-hero="dark"] .domains.domains{
  border-top-color:color-mix(in srgb,var(--cyb-cyan) 16%,transparent);
}
body[data-shell-hero="dark"] .domains.domains button{
  padding:.7rem 1rem .7rem 0;
  letter-spacing:.14em;
  color:#7899b7;
}
body[data-shell-hero="dark"] .domains.domains button.on,
body[data-shell-hero="dark"] .domains.domains button:hover{
  color:var(--cyb-glow);
  border-bottom-color:color-mix(in srgb,var(--cyb-cyan) 68%,transparent);
}
body[data-shell-hero="dark"] .section.section{
  padding-block:clamp(4.25rem,7vw,6.8rem);
}
body[data-shell-hero="dark"] .section-head.section-head{
  gap:1.15rem;
  margin-bottom:clamp(2.25rem,4vw,3.75rem);
}
body[data-shell-hero="dark"] .section-head.section-head h2{
  letter-spacing:var(--cyb-tracking-display);
  line-height:1.06;
}
body[data-shell-hero="dark"] .layer.layer{
  grid-template-columns:minmax(150px,.3fr) minmax(0,1.2fr) minmax(180px,.5fr);
  padding-block:clamp(1.55rem,2.8vw,2.4rem);
  border-bottom-color:color-mix(in srgb,var(--cyb-line-strong) 48%,transparent);
}
body[data-shell-hero="dark"] .loop.loop{
  gap:0;
  background:color-mix(in srgb,var(--cyb-line-strong) 42%,transparent);
  border-color:color-mix(in srgb,var(--cyb-line-strong) 52%,transparent);
  border-radius:var(--cyb-radius-md);
  overflow:hidden;
}
body[data-shell-hero="dark"] .loop.loop .step.step{
  min-height:190px;
  padding:1.65rem;
  background:color-mix(in srgb,var(--cyb-bg-2) 94%,var(--cyb-bg));
}
body[data-shell-hero="dark"] .readout.readout,
body[data-shell-hero="dark"] .plate.plate{
  border-color:color-mix(in srgb,var(--cyb-line-strong) 56%,transparent);
  border-radius:var(--cyb-radius-md);
  overflow:hidden;
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--cyb-cyan) 2%,transparent),transparent 36%),
    color-mix(in srgb,var(--cyb-bg-2) 95%,var(--cyb-bg));
  box-shadow:var(--cyb-shadow-1);
}
body[data-shell-hero="dark"] .dycore.dycore{
  border-color:color-mix(in srgb,var(--cyb-cyan) 20%,transparent);
  border-radius:var(--cyb-radius-md);
  background:
    radial-gradient(ellipse 68% 58% at 50% 44%,color-mix(in srgb,var(--cyb-graph) 23%,transparent),transparent 72%),
    linear-gradient(165deg,#0b1b2d 0%,#07111d 56%,#04080e 100%);
  box-shadow:0 40px 110px -80px #000, inset 0 1px 0 rgba(255,255,255,.025);
}
body[data-shell-hero="dark"] .dycore.dycore #terminal-log{
  background:color-mix(in srgb,#04080e 80%,transparent);
  border-color:color-mix(in srgb,var(--cyb-cyan) 12%,transparent);
}
body[data-shell-hero="dark"] .dycore.dycore .toggle-btn{
  border-radius:var(--cyb-radius-sm);
  letter-spacing:.14em;
}
body[data-shell-hero="dark"] .dycore.dycore .toggle-btn.active{
  background:color-mix(in srgb,var(--cyb-cyan) 7%,transparent);
  border-color:color-mix(in srgb,var(--cyb-cyan) 20%,transparent);
}

/* --------------------------------------------------------------------------
   Product imagery · screenshots behave like evidence windows, not mockups
   -------------------------------------------------------------------------- */
body .peek-grid.peek-grid{
  gap:clamp(1rem,2vw,1.6rem);
  max-width:1180px;
}
body .frame.frame{
  border-color:color-mix(in srgb,var(--cyb-line-strong) 54%,transparent);
}
body .frame.frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
body .frame.frame .frame-bar{
  min-height:34px;
  padding:.5rem .75rem;
  background:color-mix(in srgb,var(--cyb-bg) 74%,transparent);
  border-bottom-color:color-mix(in srgb,var(--cyb-line-strong) 42%,transparent);
}
body .frame.frame .frame-bar span{
  width:5px;height:5px;background:color-mix(in srgb,var(--cyb-fg-3) 44%,transparent);
}
body .frame.frame .frame-bar i{
  font-size:var(--cyb-label-min);
  letter-spacing:var(--cyb-tracking-label);
  color:var(--cyb-fg-3);
}
body .frame.frame img{
  filter:saturate(.86) contrast(1.025);
  transition:filter var(--cyb-slow) var(--cyb-ease-emphasis),transform var(--cyb-slow) var(--cyb-ease-emphasis);
}
@media(hover:hover) and (pointer:fine){
  body .frame.frame:hover{transform:none;border-color:color-mix(in srgb,var(--cyb-accent) 20%,var(--cyb-line));box-shadow:0 32px 88px -68px rgba(0,0,0,.96)}
  body .frame.frame:hover img{transform:none;filter:saturate(.96) contrast(1.03)}}
body .shot.shot{
  border-radius:var(--cyb-radius-sm);
  border-color:color-mix(in srgb,var(--cyb-line-strong) 52%,transparent);
  box-shadow:0 24px 64px -54px rgba(0,0,0,.88);
}
body .shot.shot div{
  background:linear-gradient(to top,rgba(4,8,14,.97),rgba(4,8,14,.62) 48%,transparent 82%);
}
body .video.video{
  border-radius:var(--cyb-radius-md);
  border-color:color-mix(in srgb,var(--cyb-line-strong) 54%,transparent);
  box-shadow:0 32px 84px -66px rgba(0,0,0,.92);
}
body .video.video > img{filter:saturate(.82) brightness(.82) contrast(1.03)}
body .video.video .play .icon{
  width:64px;height:64px;padding:19px;
  background:color-mix(in srgb,var(--cyb-accent) 92%,#fff);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--cyb-accent) 46%,transparent),0 18px 44px -24px #000;
}

/* Light-mode product evidence stays clean and documentary. */
:root[data-theme="light"] body .frame.frame,
:root[data-theme="light"] body .shot.shot,
:root[data-theme="light"] body .video.video{
  box-shadow:0 24px 70px -54px rgba(23,49,75,.34);
}
:root[data-theme="light"] body .frame.frame img{filter:saturate(.9) contrast(1.015)}

@media(max-width:900px){
  .cyb-page .hero.hero{min-height:auto;padding-top:calc(var(--cyb-nav-h) + 4.5rem)}
  .cyb-page .hero.hero h1{font-size:clamp(1.8rem,6.6vw,2.7rem)}
  .cyb-page .grid.grid{grid-template-columns:1fr}
  .cyb-page .grid.grid .card.card + .card.card{border-left:0;border-top:1px solid color-mix(in srgb,var(--cyb-line-strong) 48%,transparent)}
  body[data-shell-hero="dark"] .hero-field.hero-field{left:auto;width:min(90vw,540px);opacity:.86}
  body[data-shell-hero="dark"] .layer.layer{grid-template-columns:1fr;gap:.65rem}}
@media(max-width:560px){
  .cyb-page .section.section{padding:4.5rem 0}
  .cyb-page .grid.grid{border-radius:10px}
  body[data-shell-hero="dark"] .dycore.dycore,
  body[data-shell-hero="dark"] .readout.readout,
  body[data-shell-hero="dark"] .plate.plate{border-radius:var(--cyb-radius-sm)}}
@media(prefers-reduced-motion:reduce){
  body .frame.frame img{transition:none!important}}
@media(prefers-contrast:more){
  .cyb-page .grid.grid,
  body[data-shell-hero="dark"] .dycore.dycore,
  body .frame.frame{border-color:var(--cyb-line-strong)}}