.identity-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;border:0;background:transparent;overflow:visible;box-shadow:none}
.identity-philosophy h2 em{background:none;text-decoration:none;font-style:normal;color:var(--purple);font-weight:700}
.identity-philosophy h2 b{font-weight:700}
.identity-h-l{color:var(--logo-l)}.identity-h-u{color:var(--logo-u)}.identity-h-c{color:var(--gold-deep)}
.identity-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.identity-card{position:relative;border:1px solid rgba(102,8,116,.12);background:var(--surface);border-radius:20px;outline:none;transition:transform .3s ease,box-shadow .3s ease}
.identity-card:hover,.identity-card:focus-visible{transform:translateY(-2px);box-shadow:0 10px 28px rgba(102,8,116,.1)}
.identity-card:focus-visible{outline:2px solid var(--identity-c);outline-offset:3px}
.identity-card.identity-card-si{background:var(--purple-soft,var(--purple-soft))}
.identity-card .identity-letter{color:var(--identity-c);font-weight:700}
/* Card art */
.identity-card-art{display:block;width:min(100%,168px);height:auto;aspect-ratio:80/56;color:var(--identity-c);fill:var(--identity-c);margin-bottom:10px;overflow:visible}
.identity-card:hover .identity-card-art,.identity-card:focus-visible .identity-card-art{filter:drop-shadow(0 0 4px rgba(226,202,91,.45))}
@keyframes ia-run{to{stroke-dashoffset:-100}}
/* Card scenes are drawn per frame by identity-motion.js; these rules only set paint */
.ia-p{fill:var(--logo-l)}.ia-g{fill:var(--gold-deep)}
.ia-l-step{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ia-l-dot{fill:var(--gold-deep)}
.ia-u-track{fill:none;stroke-width:1.4;stroke-linecap:round}
.ia-u-dot{fill:var(--logo-u)}.ia-u-dot.ia-g{fill:var(--gold-deep)}
.ia-u-halo{fill:var(--gold)}.ia-u-core{fill:var(--purple)}
.ia-si-arm{fill:none;stroke-linecap:butt}
.ia-u-guide{fill:none;stroke:var(--logo-u);stroke-width:.6;stroke-dasharray:1.3 2.627;opacity:.35}
.ia-c-node{fill:var(--logo-l)}.ia-c-gold{fill:var(--gold-deep)}
.ia-si-node{fill:var(--purple)}.ia-si-node.top{fill:var(--gold-deep)}
.ia-si-dot{fill:var(--gold-deep)}
.ia-c-edge{fill:none;stroke:var(--mist);stroke-width:.9;stroke-linecap:round}
.ia-c-core{fill:var(--gold-deep)}
.ia-glow{fill:var(--gold)}
/* Orbital background */
.hero-art .orbit-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.ofx-glow{transform-box:fill-box;transform-origin:center;animation:ofx-breathe 6s ease-in-out infinite}
@keyframes ofx-breathe{0%,100%{transform:scale(.9);opacity:.7}50%{transform:scale(1.06);opacity:1}}
.ofx-ring{fill:none;stroke:var(--purple);stroke-opacity:.08;stroke-dasharray:2 6}
.ofx-trail{fill:none;stroke:var(--mist);stroke-width:2;stroke-linecap:round;stroke-dasharray:18 82;opacity:.55;animation:ia-run 11s linear infinite}
.ofx-b{stroke:var(--gold);stroke-width:2.4;stroke-dasharray:12 88;opacity:.8;animation-duration:9s;animation-direction:reverse}
.ofx-c{stroke:var(--purple);stroke-width:1.6;stroke-dasharray:6 94;opacity:.4;animation-duration:6.5s}
.ofx-motes circle{fill:var(--line-strong);transform-box:fill-box;transform-origin:center;animation:ofx-mote 5s ease-in-out infinite}
.ofx-motes circle:nth-child(2n){fill:var(--gold);animation-delay:-1.7s}.ofx-motes circle:nth-child(3){animation-delay:-3.1s}
@keyframes ofx-mote{0%,100%{transform:translateY(0);opacity:.25}50%{transform:translateY(-8px);opacity:.9}}
/* Fusion stage */
.identity-fusion{margin:56px 0;padding:32px 24px;border-radius:28px;background:linear-gradient(180deg,var(--surface),var(--purple-soft,var(--purple-soft)));border:1px solid rgba(102,8,116,.1);text-align:center}
.identity-stage{position:relative;max-width:560px;margin:24px auto 8px;padding-bottom:56px;overflow:hidden;border-radius:20px}
.identity-morph{display:block;width:100%;height:auto;overflow:visible}
.identity-final{position:absolute;left:0;right:0;top:0;bottom:0;opacity:0;pointer-events:none}
.identity-final-logo{position:absolute;top:0;left:50%;transform:translateX(-50%);width:38.375%;aspect-ratio:54.8/49.65;display:block}
.identity-final-logo svg{display:block;width:100%;height:100%}
.identity-final-word{position:absolute;bottom:8px;left:50%;transform:translate(-50%,6px);font-size:22px;opacity:0;transition:opacity .4s ease,transform .4s ease}
.identity-final.is-in .identity-final-word{opacity:1;transform:translate(-50%,0)}
.identity-sample{position:absolute;width:1px;height:1px;visibility:hidden;overflow:hidden;left:0;top:0}
.identity-controls{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.identity-controls button:disabled{opacity:.5;cursor:default}
.approved-logo-stage .identity-fusion{margin:0}
/* Motion inside the home orbital illustration */
.hero-art .identity-hero{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(94%,330px);margin:0;padding:0;background:none;border:0;border-radius:0;z-index:1}
.identity-hero .identity-stage{width:100%;max-width:none;margin:0;padding:0;border-radius:0;overflow:visible}
.identity-hero .identity-morph{width:100%;height:auto}
.identity-hero .identity-controls{position:absolute;left:50%;top:calc(100% + 18px);transform:translateX(-50%);margin:0;gap:6px;flex-wrap:nowrap;opacity:0;transition:opacity .18s}
.hero-art:hover .identity-controls,.identity-hero:has(:focus-visible) .identity-controls{opacity:1}

@media (max-width:860px){.identity-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.identity-cards{gap:10px}.identity-fusion{padding:24px 12px;margin:40px 0}.identity-card-art{width:min(100%,150px)}.identity-final-word{font-size:18px}.identity-stage{padding-bottom:48px}}
@media(max-width:440px){.hero-art .identity-hero{width:min(94%,290px)}}
@media(hover:none){.identity-hero .identity-controls{opacity:0;pointer-events:none;transition:opacity .2s}.identity-hero.controls-on .identity-controls,.identity-hero:has(:focus-visible) .identity-controls{opacity:1;pointer-events:auto}}
@media (prefers-reduced-motion:reduce){
  .orbit-fx *{animation:none!important}
  .identity-card,.identity-final-word{transition:none}
  .identity-hero .identity-controls{display:none}
}

/* Orbit system: rings and satellites share one SVG space */
.hero-art{position:relative;isolation:isolate}
.hero-art>.orbit,.hero-art .orb-dot{display:none}
.ofx-ring{fill:none;stroke:var(--logo-l);stroke-opacity:.22;stroke-width:1.1;stroke-dasharray:none}
.ofx-dash{stroke-dasharray:2 6;stroke-opacity:.18}
.ofx-faint{stroke-opacity:.12}
.ofx-trail{stroke-dasharray:14 86}
.ofx-sat{fill:var(--gold);stroke:var(--surface);stroke-width:1.5}
.ofx-sat-p{fill:var(--mist)}
.ofx-halo{fill:var(--gold);opacity:.28;transform-box:fill-box;transform-origin:center;animation:ofx-halo 2.4s ease-in-out infinite}
@keyframes ofx-halo{0%,100%{transform:scale(.8);opacity:.2}50%{transform:scale(1.25);opacity:.4}}
@property --ofx-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.hero-art::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:3;background:conic-gradient(from var(--ofx-a),transparent 0 62%,rgba(155,106,168,.7) 76%,var(--gold) 86%,transparent 96%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ofx-border 9s linear infinite}
@keyframes ofx-border{to{--ofx-a:360deg}}
@media (prefers-reduced-motion:reduce){.hero-art::after{animation:none}}
.identity-hero .identity-stage{filter:drop-shadow(0 10px 18px rgba(102,8,116,.14))}

/* Hero mark: larger, floats gently */
.hero-art .identity-hero{width:min(96%,470px)}
@media(max-width:440px){.hero-art .identity-hero{width:min(96%,330px)}}
.identity-hero .identity-stage{animation:id-float 6s ease-in-out infinite}
@keyframes id-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.identity-final-logo{position:absolute}
/* Player controls on the brand page: quiet round icon buttons */
.identity-fusion .identity-controls{gap:10px}
.icon-btn{width:36px;height:36px;display:inline-grid;place-items:center;border-radius:50%;border:1px solid var(--purple-line,var(--purple-line));background:color-mix(in srgb,var(--surface) 70%,transparent);color:var(--purple);padding:0;transition:background .16s,border-color .16s,transform .16s,box-shadow .16s}
.icon-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon-btn[aria-pressed=true] svg{fill:currentColor;stroke:none}
.icon-btn:hover{background:var(--purple-soft);border-color:var(--line-strong);transform:translateY(-1px);box-shadow:0 6px 14px #6608741a}
.icon-btn:disabled{opacity:.4;transform:none;box-shadow:none}
@media(prefers-reduced-motion:reduce){.identity-hero .identity-stage{animation:none}}

/* Hero player controls: icon buttons; on hover-capable screens they appear on hover/focus, on touch screens they stay visible and grow to a finger-sized target */
.identity-hero .identity-controls{top:calc(100% + 14px);gap:10px}
@media(hover:none),(pointer:coarse){.icon-btn{width:40px;height:40px}.icon-btn svg{width:18px;height:18px}.icon-btn:hover{transform:none;box-shadow:none}}

/* Lusic UI template: cards use the shared card radius */
.identity-card{border-radius:var(--radius)}