/* =========================================================================
   Rooky — public site "flair" layer
   Per-section color identities, ambient motion, console preview, imagery.
   ========================================================================= */

/* ---------- section scaffolding ---------- */
.section{position:relative;overflow:hidden}
.section > .wrap{position:relative;z-index:2}

/* ---------- ambient orbs ---------- */
.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.42;pointer-events:none;z-index:0;will-change:transform}
.orb.o1{width:460px;height:460px;top:-120px;right:-100px;animation:orbDrift 16s ease-in-out infinite alternate}
.orb.o2{width:320px;height:320px;bottom:-90px;left:-80px;animation:orbDrift 21s ease-in-out infinite alternate-reverse}
@keyframes orbDrift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-40px,46px,0) scale(1.12)}
}
[data-theme="light"] .orb{opacity:.22}
@media(prefers-reduced-motion:reduce){.orb{animation:none}}

/* ---------- per-section identities ---------- */
/* philosophy — warm amber/rose */
#philosophy{--acc:#F5B544;--acc2:#F4717F}
#philosophy .orb.o1{background:radial-gradient(circle,var(--acc),transparent 70%)}
#philosophy .orb.o2{background:radial-gradient(circle,var(--acc2),transparent 70%)}
#philosophy .eyebrow{color:var(--acc)}
#philosophy .eyebrow::before{background:var(--acc)}
#philosophy .li-n{color:var(--acc)}
#philosophy .loop-quote .hl{background:linear-gradient(110deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
#philosophy .loop-item:hover{transform:translateX(7px);border-color:color-mix(in srgb,var(--acc) 36%,var(--hair))}

/* third path — violet */
#path{--acc:#8B5CF6;--acc2:#60A5FA}
#path .orb.o1{background:radial-gradient(circle,var(--acc),transparent 70%)}
#path .eyebrow.accent{color:var(--acc)}
#path .eyebrow.accent::before{background:var(--acc)}
#path .pcard.hero-path{border-color:color-mix(in srgb,var(--acc) 45%,var(--hair));
  box-shadow:0 30px 80px -50px color-mix(in srgb,var(--acc) 60%,transparent)}
#path .pcard.hero-path .ptag{color:var(--acc)}
#path .pcard:hover{transform:translateY(-4px)}

/* approach — teal/cyan band */
#approach{--acc:#22D3EE;--acc2:#10B981;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--acc) 4.5%,transparent) 28%,color-mix(in srgb,var(--acc2) 3.5%,transparent) 70%,transparent)}
#approach .orb.o1{background:radial-gradient(circle,var(--acc),transparent 70%)}
#approach .orb.o2{background:radial-gradient(circle,var(--acc2),transparent 70%)}
#approach .eyebrow.accent{color:var(--acc)}
#approach .eyebrow.accent::before{background:var(--acc)}
#approach .tinted.v{background:linear-gradient(110deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
#approach .prin:nth-child(3n+1) .pi{background:color-mix(in srgb,var(--acc) 13%,transparent);color:var(--acc)}
#approach .prin:nth-child(3n+2) .pi{background:color-mix(in srgb,var(--acc2) 13%,transparent);color:var(--acc2)}
#approach .prin:nth-child(3n) .pi{background:color-mix(in srgb,#8B5CF6 13%,transparent);color:#8B5CF6}
#approach .prin:hover .pi{transform:scale(1.12) rotate(-5deg)}
#approach .prin .pi{transition:transform .35s var(--ease)}
#approach .prin:hover{border-color:color-mix(in srgb,var(--acc) 30%,var(--hair))}

/* transparency — green */
#transparency{--acc:#10B981;--acc2:#22D3EE}
#transparency .orb.o1{background:radial-gradient(circle,var(--acc),transparent 70%)}
#transparency .eyebrow.accent{color:var(--acc)}
#transparency .eyebrow.accent::before{background:var(--acc)}
#transparency .locked-card{transition:border-color .3s,transform .3s}
#transparency .locked-card:hover{border-color:color-mix(in srgb,var(--acc) 32%,var(--hair));transform:translateY(-3px)}
#transparency .lockchip{color:var(--acc)}

/* console — magenta/violet full band */
#console{--acc:#C084FC;--acc2:#60A5FA;
  border-top:1px solid var(--hair-soft);border-bottom:1px solid var(--hair-soft);
  background:
    radial-gradient(70% 60% at 80% 0%,color-mix(in srgb,var(--acc) 7%,transparent),transparent 70%),
    radial-gradient(60% 60% at 10% 100%,color-mix(in srgb,var(--acc2) 6%,transparent),transparent 70%),
    var(--bg-2)}
#console .orb.o1{background:radial-gradient(circle,var(--acc),transparent 70%)}
#console .eyebrow.accent{color:var(--acc)}
#console .eyebrow.accent::before{background:var(--acc)}
.tinted.m{background:linear-gradient(110deg,#C084FC,#60A5FA);-webkit-background-clip:text;background-clip:text;color:transparent}

/* trust — rose */
#trust{--acc:#F4717F}
#trust .orb.o1{background:radial-gradient(circle,var(--acc),transparent 70%)}
#trust .eyebrow.accent{color:var(--acc)}
#trust .eyebrow.accent::before{background:var(--acc)}
#trust .trust-card{transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
#trust .trust-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--acc) 30%,var(--hair));
  box-shadow:0 22px 50px -32px color-mix(in srgb,var(--acc) 50%,transparent)}

/* audience — amber */
#audience{--acc:#F5B544}
#audience .orb.o2{background:radial-gradient(circle,var(--acc),transparent 70%)}
#audience .eyebrow{color:var(--acc)}
#audience .eyebrow::before{background:var(--acc)}
#audience .fit{transition:transform .3s var(--ease),border-color .3s}
#audience .fit:hover{transform:translateY(-3px)}
#audience .fit.yes:hover{border-color:color-mix(in srgb,var(--up) 35%,var(--hair))}
#audience .fit.no:hover{border-color:color-mix(in srgb,var(--down) 30%,var(--hair))}

/* ---------- image band ---------- */
.imgband{padding:0 0 clamp(60px,8vw,96px)}
.imgband .wrap{position:relative}
.imgband image-slot{display:block;width:100%;height:clamp(240px,38vw,420px)}
.imgband .band-cap{position:absolute;left:clamp(28px,4vw,52px);bottom:clamp(22px,3vw,40px);z-index:3;max-width:30ch;
  font-family:var(--disp);font-weight:600;font-size:clamp(20px,2.8vw,30px);letter-spacing:-0.02em;color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,0.55);pointer-events:none}
.imgband .band-tag{position:absolute;right:clamp(28px,4vw,52px);bottom:clamp(22px,3vw,40px);z-index:3;
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.75);pointer-events:none}

/* image-slot fallback chrome (empty state should look intentional) */
.imgband image-slot,.cg-card.shot image-slot{
  border:1px solid var(--hair-soft);border-radius:22px;
  background:
    radial-gradient(70% 80% at 20% 0%,color-mix(in srgb,var(--blue) 9%,transparent),transparent 70%),
    radial-gradient(60% 70% at 90% 100%,color-mix(in srgb,var(--violet) 9%,transparent),transparent 70%),
    var(--panel-2)}
.cg-card.shot image-slot{border-radius:14px}

/* ---------- console preview grid ---------- */
.console-grid{display:grid;grid-template-columns:1fr 1fr 1.3fr;grid-template-rows:auto auto;gap:14px;margin-top:38px;align-items:start}
.cg-card.shot{align-self:stretch}
.cg-card{background:var(--panel);border:1px solid var(--hair-soft);border-radius:var(--radius-sm);padding:18px 18px 16px;
  transition:border-color .3s,transform .3s}
.cg-card:hover{border-color:color-mix(in srgb,var(--acc) 28%,var(--hair));transform:translateY(-2px)}
.cg-card .mono-label{margin-bottom:12px}
.cg-big{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:700;font-size:22px;letter-spacing:0.02em;color:var(--up)}
.cg-big i{width:9px;height:9px;border-radius:50%;background:var(--up);box-shadow:0 0 0 5px color-mix(in srgb,var(--up) 18%,transparent);animation:cgPulse 2s ease-in-out infinite}
@keyframes cgPulse{50%{box-shadow:0 0 0 9px transparent}}
.cg-rows{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.cg-rows span{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.cg-rows span i{width:13px;height:13px;border-radius:4px;background:var(--up-soft);color:var(--up);display:inline-flex;align-items:center;justify-content:center;font-size:8.5px;font-style:normal;flex-shrink:0}
.cg-modes{display:flex;gap:6px;margin-top:4px}
.cg-modes span{flex:1;text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:0.08em;padding:9px 4px;border-radius:8px;border:1px solid var(--hair);color:var(--ink-4)}
.cg-modes span.on{color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 45%,var(--hair));background:color-mix(in srgb,var(--cyan) 9%,transparent)}
.cg-modes span.lk{display:flex;align-items:center;justify-content:center;gap:5px}
.cg-note{margin-top:12px;font-size:11.5px;line-height:1.5;color:var(--ink-4)}
.cg-card.records{grid-column:1 / span 2}
.cg-rec{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--hair-soft);
  transition:transform .45s var(--ease)}
.cg-rec.fresh{transform:translateY(-7px)}
.cg-rec:first-of-type{border-top:none}
.cg-rec .t{font-family:var(--mono);font-size:10.5px;color:var(--ink-4);font-variant-numeric:tabular-nums;flex-shrink:0}
.cg-rec .tag{font-family:var(--mono);font-size:9.5px;letter-spacing:0.07em;padding:2.5px 8px;border-radius:5px;flex-shrink:0}
.cg-rec .tag.ok{color:var(--up);background:var(--up-soft)}
.cg-rec .tag.no{color:var(--warn);background:color-mix(in srgb,var(--warn) 13%,transparent)}
.cg-rec .rdct{flex:1;height:8px}
.cg-card.shot{grid-row:1 / span 2;grid-column:3;display:flex;flex-direction:column}
.cg-card.shot image-slot{flex:1;display:block;width:100%;min-height:240px;margin-top:10px}
.cg-bars{display:flex;align-items:flex-end;gap:5px;height:64px;margin-top:8px}
.cg-bars i{flex:1;height:100%;border-radius:3px 3px 0 0;background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 70%,transparent),color-mix(in srgb,var(--acc) 18%,transparent));animation:barBreathe 2.6s ease-in-out infinite}
.cg-bars i:nth-child(2){animation-delay:.3s}.cg-bars i:nth-child(3){animation-delay:.6s}.cg-bars i:nth-child(4){animation-delay:.9s}
.cg-bars i:nth-child(5){animation-delay:1.2s}.cg-bars i:nth-child(6){animation-delay:1.5s}.cg-bars i:nth-child(7){animation-delay:1.8s}
@keyframes barBreathe{0%,100%{transform:scaleY(0.55)}50%{transform:scaleY(1)}}
.cg-bars i{transform-origin:bottom}
@media(prefers-reduced-motion:reduce){.cg-bars i,.cg-big i{animation:none}.cg-rec{transition:none}}
@media(max-width:920px){
  .console-grid{grid-template-columns:1fr 1fr}
  .cg-card.shot{grid-row:auto;grid-column:1 / -1}
  .cg-card.records{grid-column:1 / -1}
}
@media(max-width:560px){.console-grid{grid-template-columns:1fr}}