:root{
  --obsidian:#142337;
  --gunmetal:#22364D;
  --slate:#314C68;
  --teal:#32C1BB;
  --copper:#DFA478;
  --silver:#E1EBF2;
  --silver-dim:#BCCBDA;
  --white:#F7FCFF;
  --panel:rgba(37,57,79,.96);
  --panel-2:rgba(26,43,61,.96);
  --line:rgba(201,228,238,.18);
  --shadow:0 18px 50px rgba(5,16,30,.20);
  --radius:22px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top right, rgba(50,193,187,.22), transparent 38%),
    radial-gradient(circle at top left, rgba(223,164,120,.12), transparent 30%),
    linear-gradient(180deg, #1B3046 0%, #17283D 44%, #122135 100%);
  color:var(--silver);
  min-height:100vh;
}
a{color:inherit}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
.hidden{display:none !important}
.eyebrow{
  display:inline-block;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size:.74rem;
  color:#60DDD3;
  margin-bottom:.7rem;
}
.muted{color:var(--silver-dim)}
.tiny{font-size:.86rem}
.btn{
  appearance:none;
  border:none;
  background:linear-gradient(125deg,#40D5C8,#28B5B0);
  color:#111;
  padding:.95rem 1.15rem;
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow:0 10px 24px rgba(21,173,166,.20);
}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{
  background:transparent;
  color:var(--silver);
  border:1px solid rgba(200,208,218,.18);
  box-shadow:none;
}
.btn.small{padding:.65rem .95rem;font-size:.9rem}
.demo-banner{
  display:flex;gap:1rem;align-items:center;justify-content:center;flex-wrap:wrap;
  padding:.9rem 1.2rem;
  background:linear-gradient(90deg, rgba(28,157,163,.32), rgba(97,129,152,.20));
  border-bottom:1px solid var(--line);
  font-size:.92rem;
}
.demo-banner strong{color:var(--white)}
.demo-banner a{color:var(--silver);text-decoration:none;border-bottom:1px solid rgba(200,208,218,.25)}
.site-header{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1rem 1.25rem;border-bottom:1px solid var(--line);position:sticky;top:0;backdrop-filter:blur(16px);z-index:20;
  background:rgba(21,37,55,.92);
}
.brand-block{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.brand-button{background:none;border:none;color:inherit;padding:0;display:flex;align-items:center;gap:.85rem}
.brand-text-wrap{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.brand-text{
  font-family: Georgia, "Times New Roman", serif;font-size:1.9rem;letter-spacing:.18em;color:var(--silver);
  text-shadow:0 0 16px rgba(200,208,218,.10), 0 0 34px rgba(196,106,45,.08);
}
.brand-sub{font-size:.72rem;letter-spacing:.44em;color:#76E2D9;margin-top:.28rem}
.working-name-pill{border:1px solid rgba(196,106,45,.25);color:#F6C39F;padding:.28rem .55rem;border-radius:999px;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}
.header-tools{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;justify-content:flex-end}
.role-switcher-wrap select{
  background:var(--panel);color:var(--silver);border:1px solid var(--line);border-radius:999px;padding:.7rem 1rem;
}
.app-shell{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:calc(100vh - 132px)}
.sidebar{border-right:1px solid var(--line);padding:1.2rem 1rem 1.4rem;background:rgba(30,49,69,.85)}
.sidebar-head{padding:.35rem .3rem 1rem}
.role-badge{display:inline-flex;padding:.32rem .72rem;border-radius:999px;background:rgba(50,193,187,.22);color:#B5F2E9;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;font-weight:700}
.sidebar-desc{margin:.9rem 0 0;color:var(--silver-dim);line-height:1.55}
.side-nav{display:flex;flex-direction:column;gap:.35rem}
.side-nav button{
  border:none;background:transparent;color:var(--silver);text-align:left;padding:.9rem 1rem;border-radius:14px;
  display:flex;justify-content:space-between;align-items:center;transition:background .2s ease, color .2s ease, transform .2s ease;
}
.side-nav button.active,.side-nav button:hover{background:rgba(45,117,132,.48);color:var(--white);transform:translateX(2px)}
.side-nav small{color:var(--silver-dim)}
.sidebar-foot{margin-top:1rem;padding:1rem;border-radius:18px;background:rgba(43,67,89,.90);border:1px solid var(--line);font-size:.9rem;color:var(--silver-dim);line-height:1.55}
.content-area{padding:1.3rem 1.35rem 2rem}
.app-notice{margin-bottom:1rem}
.notice-card{padding:1rem 1.1rem;border-radius:18px;background:rgba(34,129,139,.22);border:1px solid rgba(91,207,203,.30);color:var(--silver)}
.page-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-end;flex-wrap:wrap;margin-bottom:1.1rem}
.page-head h1,.page-head h2{margin:.15rem 0 .55rem;color:var(--white);font-family: Georgia, "Times New Roman", serif;line-height:1.02}
.page-head h1{font-size:clamp(2rem,3.4vw,3.4rem)}
.page-head p{margin:0;max-width:820px;line-height:1.68;color:var(--silver-dim)}
.grid{display:grid;gap:1rem}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{
  background:linear-gradient(145deg,rgba(43,66,89,.96),rgba(30,49,70,.96));
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.card-body{padding:1.15rem 1.15rem 1.2rem}
.card h3{margin:.2rem 0 .55rem;color:var(--white)}
.card p{margin:0;color:var(--silver-dim);line-height:1.62}
.card-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:1rem 0 1.25rem}
.stat{
  padding:1.1rem;border-radius:20px;background:rgba(42,65,88,.92);border:1px solid var(--line);box-shadow:var(--shadow)
}
.stat strong{display:block;font-size:2rem;color:var(--white)}
.stat span{color:var(--silver-dim)}
.hero{
  background:linear-gradient(125deg, #375471, #263E57 58%, #214952 120%);
  border:1px solid var(--line);border-radius:30px;padding:1.5rem;display:grid;grid-template-columns:1.2fr .8fr;gap:1rem;align-items:center;box-shadow:var(--shadow)
}
.hero h1{font-size:clamp(2.2rem,4vw,4rem);margin:.15rem 0 .85rem;color:var(--white);font-family:Georgia, "Times New Roman", serif;line-height:.98}
.hero p{max-width:760px;color:var(--silver-dim);line-height:1.75}
.hero-visual{
  min-height:320px;border-radius:26px;border:1px solid rgba(200,208,218,.10);
  background:
    radial-gradient(circle at 50% 38%, rgba(196,106,45,.42), transparent 22%),
    radial-gradient(circle at 50% 50%, rgba(15,107,104,.35), transparent 28%),
    linear-gradient(140deg,rgba(69,118,143,.7),rgba(27,49,67,.98));
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden
}
.hero-visual::before,.hero-visual::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(200,208,218,.08)}
.hero-visual::before{width:220px;height:220px}
.hero-visual::after{width:300px;height:300px}
.role-pill{display:inline-flex;gap:.35rem;align-items:center;padding:.38rem .72rem;border-radius:999px;background:rgba(223,164,120,.16);color:#F3CAB0;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em}
.list{display:grid;gap:.8rem}
.list-item{padding:1rem;border-radius:18px;background:rgba(36,54,76,.88);border:1px solid var(--line)}
.project-thumb{
  width:100%;height:180px;border-radius:18px;background:
  radial-gradient(circle at center, rgba(15,107,104,.28), transparent 22%),
  radial-gradient(circle at center, rgba(196,106,45,.45), transparent 16%),
  linear-gradient(145deg, rgba(59,95,117,.6), rgba(26,45,63,.96));
  border:1px solid rgba(200,208,218,.1);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
}
.project-thumb .mini-headphones{transform:scale(2.3)}
.tag{display:inline-flex;padding:.3rem .6rem;border-radius:999px;font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;background:rgba(30,111,126,.38);color:var(--silver)}
.tag.teal{background:rgba(50,193,187,.20);color:#B7F4EC}
.tag.copper{background:rgba(223,164,120,.16);color:#F5CDB2}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.field{display:flex;flex-direction:column;gap:.45rem;color:var(--silver);font-size:.95rem}
.field.full{grid-column:1/-1}
input,textarea,select{
  width:100%;background:rgba(23,40,58,.95);color:var(--silver);border:1px solid rgba(200,208,218,.12);
  border-radius:16px;padding:.92rem 1rem;outline:none;transition:border-color .2s ease, box-shadow .2s ease
}
textarea{min-height:140px;resize:vertical}
input:focus,textarea:focus,select:focus{border-color:rgba(66,212,206,.75);box-shadow:0 0 0 3px rgba(66,212,206,.17)}
.checks{display:grid;gap:.75rem;margin-top:.25rem}
.checkrow{display:flex;gap:.7rem;align-items:flex-start;padding:.85rem;border-radius:16px;border:1px solid var(--line);background:rgba(24,42,62,.80)}
.checkrow input{width:auto;margin-top:.2rem}
.profile-row{display:grid;grid-template-columns:180px minmax(0,1fr);gap:1rem;align-items:start}
.profile-row img{width:100%;border-radius:22px;display:block;border:1px solid var(--line)}
.role-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1rem 0}
.role-card{padding:1.1rem 1rem;border-radius:20px;border:1px solid var(--line);background:linear-gradient(145deg, #2D4962, #21374F);color:var(--silver);text-align:left}
.role-card:hover{border-color:rgba(15,107,104,.45);transform:translateY(-1px)}
.role-card strong{display:block;color:var(--white);font-size:1.05rem;margin-bottom:.35rem}
.founder-role{border-color:rgba(196,106,45,.28)}
.overlay{position:fixed;inset:0;background:rgba(11,23,37,.72);backdrop-filter:blur(10px);display:grid;place-items:center;padding:1rem;z-index:50}
.dialog{width:min(920px,100%);max-height:90vh;overflow:auto;border-radius:28px;background:linear-gradient(140deg, #304B66, #21364D);border:1px solid var(--line);box-shadow:var(--shadow);padding:1.35rem;position:relative}
.dialog h2{margin:.15rem 0 .75rem;color:var(--white)}
.dialog-close{position:absolute;top:.9rem;right:.9rem;border:none;background:rgba(255,255,255,.06);width:40px;height:40px;border-radius:50%;color:var(--silver);font-size:1.4rem}
.toast{position:fixed;right:1rem;bottom:1rem;padding:.9rem 1rem;border-radius:14px;background:rgba(22,39,57,.98);border:1px solid var(--line);box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translateY(12px);transition:all .25s ease;z-index:60;color:var(--silver)}
.toast.on{opacity:1;transform:translateY(0)}
.floating-player{position:fixed;left:1rem;bottom:1rem;z-index:40;background:rgba(17,20,27,.95);border:1px solid var(--line);border-radius:16px;padding:.4rem}
.intro-splash{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  background:
    radial-gradient(circle at center, rgba(34,50,71,.36), transparent 26%),
    radial-gradient(circle at center, rgba(15,107,104,.18), transparent 36%),
    linear-gradient(180deg, #1B3248 0%, #112237 100%);
  animation:splashOut 4.6s ease forwards;
}
.intro-stage{position:relative;width:min(800px,90vw);min-height:420px;display:grid;place-items:center;overflow:hidden}
/* Intro animation — detailed premium over-ear headphone illustration. */
.headphones-mark{position:relative;width:clamp(260px,43vw,420px);height:auto;aspect-ratio:560/520;display:grid;place-items:center;animation:dropIn .85s cubic-bezier(.2,.85,.2,1) forwards,buzz 1.2s ease-in-out .87s 2;transform-origin:center center;filter:drop-shadow(0 26px 38px rgba(2,15,27,.35))}
.headphones-mark img{width:100%;height:100%;object-fit:contain;display:block}
.intro-pulse{position:absolute;inset:auto 50% 52%;transform:translate(-50%,50%);border-radius:50%;border:1px solid rgba(15,107,104,.26);opacity:0}
.pulse-1{width:180px;height:180px;animation:pulseRing 1.05s ease-out 1.05s 3}
.pulse-2{width:250px;height:250px;animation:pulseRing 1.05s ease-out 1.3s 3}
.intro-wordmark{position:absolute;top:58%;left:50%;transform:translate(-50%,0);text-align:center;opacity:0;animation:wordFadeIn .7s ease .95s forwards}
.intro-ombra{margin:0;font-family:Georgia, "Times New Roman", serif;font-size:clamp(2.8rem,7vw,6.2rem);letter-spacing:.18em;color:var(--silver);text-shadow:0 0 22px rgba(200,208,218,.14), 0 0 30px rgba(196,106,45,.08);animation:ombreShimmer 1.15s linear 1.15s 2}
.intro-network{margin-top:.45rem;letter-spacing:.58em;color:var(--teal);font-size:clamp(.8rem,1.8vw,1.15rem);animation:tvStatic .95s steps(10,end) 1.2s 3}
@keyframes dropIn{0%{transform:translateY(-220px) scale(.78)}100%{transform:translateY(0) scale(1)}}
@keyframes buzz{0%,100%{transform:translateY(0) translateX(0)}20%{transform:translateY(0) translateX(-3px)}40%{transform:translateY(0) translateX(3px)}60%{transform:translateY(0) translateX(-2px)}80%{transform:translateY(0) translateX(2px)}}
@keyframes wavePulse{0%,100%{opacity:.7;transform:translateX(-50%) scaleX(.78)}50%{opacity:1;transform:translateX(-50%) scaleX(1.18)}}
@keyframes pulseRing{0%{opacity:.55;transform:translate(-50%,50%) scale(.7)}100%{opacity:0;transform:translate(-50%,50%) scale(1.45)}}
@keyframes wordFadeIn{from{opacity:0;transform:translate(-50%,-48px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes ombreShimmer{0%,100%{filter:brightness(1)}40%{filter:brightness(1.35)}55%{filter:brightness(1)}70%{filter:brightness(1.2)}}
@keyframes tvStatic{0%,100%{opacity:1;filter:contrast(100%)}25%{opacity:.75;filter:contrast(145%)}50%{opacity:.95;filter:contrast(80%)}75%{opacity:.8;filter:contrast(150%)}}
@keyframes splashOut{0%,75%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
.mini-headphones{position:relative;display:inline-block;width:28px;height:24px}
.mini-band{position:absolute;left:50%;top:0;transform:translateX(-50%);width:18px;height:12px;border:3px solid var(--silver);border-bottom:none;border-radius:22px 22px 0 0}
.mini-cup{position:absolute;bottom:4px;width:7px;height:12px;border-radius:6px;background:linear-gradient(180deg,var(--slate),var(--gunmetal));border:1px solid rgba(200,208,218,.22)}
.mini-cup.left{left:4px}.mini-cup.right{right:4px}
@media (max-width:1100px){
  .app-shell{grid-template-columns:1fr}
  .sidebar{border-right:none;border-bottom:1px solid var(--line)}
}
@media (max-width:860px){
  .hero,.grid.three,.grid.four,.grid.two,.profile-row,.role-grid,.form-grid,.stat-grid{grid-template-columns:1fr}
  .site-header{align-items:flex-start;flex-wrap:wrap}
  .header-tools{width:100%;justify-content:flex-start}
  .content-area{padding:1rem}
  .hero-visual{min-height:220px}
}

@media (max-width: 600px) {
 .site-header {padding:.8rem;align-items:center;}
 .brand-text {font-size:1.45rem;}
 .brand-sub {font-size:.6rem;}
 .working-name-pill {font-size:.65rem;}
 .header-tools {gap:.45rem;}
 .header-tools .btn {padding:.5rem .75rem;font-size:.74rem;}
 .sidebar {padding:.6rem .75rem;}
 .sidebar-head {padding:.3rem;}
 .side-nav {flex-direction:row;overflow-x:auto;gap:.4rem;scrollbar-width:thin;}
 .side-nav button {flex-shrink:0;white-space:nowrap;padding:.7rem .78rem;}
 .sidebar-foot {display:none;}
 .hero {padding:1.1rem;}
 .intro-stage{min-height:380px;}
 .headphones-mark{transform-origin:center;}
 .intro-wordmark {top:62%;}
 .intro-ombra{letter-spacing:.13em;}
 .intro-network{letter-spacing:.37em;}
 .role-dialog {max-height:87vh;}
 .role-grid{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce) {
 .intro-splash{animation:splashOut .8s forwards;}
 .headphones-mark,.intro-wordmark,.intro-pulse,.intro-network,.intro-ombra,.inner-wave{animation:none!important;}
 .intro-wordmark{opacity:1;transform:translate(-50%,0);}
 .headphones-mark{transform:none;}
 .intro-pulse{display:none;}
}
/* Critical responsive fix: prevent horizontal navigation's intrinsic width from widening the entire mobile grid. */
@media (max-width: 1100px) {
 .app-shell { grid-template-columns: minmax(0, 1fr); width: 100%; }
 .sidebar, .content-area, .side-nav { min-width: 0; max-width: 100%; }
 .side-nav { overflow-x: auto; }
}

/* Dark Signal Amplified — refined brand icon + brighter hierarchy */
.brand-symbol{width:42px;height:42px;object-fit:contain;display:block;filter:drop-shadow(0 2px 12px rgba(34,199,196,.18))}
.brand-text{color:#ECF6FA;text-shadow:0 2px 22px rgba(115,216,215,.18)}
.brand-button{min-width:0}
.brand-button:hover .brand-symbol{transform:rotate(-7deg) scale(1.035)}
.brand-symbol{transition:transform .28s ease}
.hero-visual{background:radial-gradient(circle at 50% 49%,rgba(64,197,193,.23),transparent 48%),linear-gradient(130deg,#315773,#1B394E)}
.hero-premium-headphones{width:min(100%,300px);height:auto;position:relative;z-index:1;filter:drop-shadow(0 18px 28px rgba(2,17,28,.4))}
.project-visual-mark{width:98px;height:98px;object-fit:contain;filter:drop-shadow(0 9px 20px rgba(11,41,55,.4))}
.btn{color:#08252B}
.btn.ghost{border-color:rgba(212,232,242,.32);background:rgba(12,31,48,.18);color:#EDF6FC}
.btn.ghost:hover{border-color:rgba(75,219,212,.7);background:rgba(45,188,181,.16)}
.side-nav button.active,.side-nav button:hover{background:rgba(54,146,153,.44)}
.eyebrow{color:#83EDE4}
.working-name-pill{border-color:rgba(238,179,134,.42);background:rgba(223,164,120,.08)}
.card,.stat{border-color:rgba(185,220,233,.20)}
.card p,.page-head p,.hero p{color:#C6D5E2}
.intro-splash{background:radial-gradient(circle at center,rgba(43,128,144,.32),transparent 48%),linear-gradient(180deg,#1E364E,#0F2235)}
.intro-stage{min-height:min(600px,85vh)}
.intro-pulse{border-color:rgba(59,218,207,.45)}
.intro-wordmark{top:70%}
.intro-ombra{color:#EAF6FC;text-shadow:0 2px 30px rgba(158,217,228,.25);letter-spacing:.16em}
.intro-network{color:#71E8DD;text-shadow:0 0 18px rgba(43,198,189,.3)}
.intro-pulse.pulse-1{width:220px;height:220px}
.intro-pulse.pulse-2{width:310px;height:310px}
@media(max-width:600px){
  .brand-symbol{width:35px;height:35px}
  .intro-stage{min-height: min(530px,88vh)}
  .headphones-mark{width:min(80vw,330px)}
  .intro-wordmark{top:70%}
  .hero-premium-headphones{width:min(85%,240px)}
}
@media(prefers-reduced-motion:reduce){
  .headphones-mark{animation:none!important}
}

/* ──────────────────────────────────────────────────────────────────────────
   OMBRA V4 · Resonance visual system, inspired by the approved concept board
   This is a complete progressive visual layer over the functional V3.2 demo.
   No changes to live ONYX resources or registration bindings.
─────────────────────────────────────────────────────────────────────────── */
:root{
  --obsidian:#071624;
  --gunmetal:#122b42;
  --slate:#244861;
  --teal:#2CC2D5;
  --copper:#C98F6B;
  --silver:#E6EDF3;
  --silver-dim:#B7CCDC;
  --white:#FAFCFF;
  --panel:rgba(21,49,71,.95);
  --panel-2:rgba(13,34,54,.95);
  --line:rgba(113,180,210,.20);
  --shadow:0 22px 65px rgba(2,13,25,.32);
  --radius:20px;
}
body{
  background:
   radial-gradient(circle at 80% -15%,rgba(39,132,164,.16) 0%,transparent 45%),
   radial-gradient(circle at -12% 32%,rgba(156,90,64,.12),transparent 38%),
   linear-gradient(155deg,#10273d 0%,#071928 58%,#092037 100%);
  color:var(--silver);
}
.demo-banner{background:linear-gradient(100deg,rgba(13,46,67,.98),rgba(17,56,72,.95));border-bottom:1px solid rgba(79,182,209,.20);font-size:.83rem}
.demo-banner strong{letter-spacing:.10em;font-size:.73rem;color:#9ADFF0}
.demo-banner a{color:#E6B592;text-underline-offset:4px}
.site-header{background:rgba(6,22,37,.97);border-bottom:1px solid rgba(81,150,182,.25);padding:.95rem clamp(1rem,3vw,2.5rem)}
.brand-button{gap:.75rem}.brand-symbol{width:49px;height:49px;filter:drop-shadow(0 0 13px rgba(32,179,218,.18))}
.brand-text{font-family: 'Trebuchet MS',Arial,sans-serif;font-size:1.7rem;font-weight:600;letter-spacing:.19em;line-height:1.05;background:linear-gradient(115deg,#f3faff,#97b9cd 37%,#d8e6f0 52%,#dfaa88 78%,#f0f4f8);background-size:230% auto;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.brand-sub{color:#80b8ca;letter-spacing:.46em;font-size:.63rem;margin-top:.38rem}
.working-name-pill{border-color:rgba(186,129,100,.35);color:#ddad91}
.btn{background:linear-gradient(112deg,#38d7e5,#20a8cb);color:#041825;box-shadow:0 12px 28px rgba(10,125,164,.18);border:1px solid rgba(139,240,250,.40)}
.btn.ghost{border:1px solid rgba(152,193,216,.27);color:#eaf5f9;background:rgba(12,36,58,.42)}
.btn.ghost:hover,.btn:hover{box-shadow:0 0 22px rgba(35,187,216,.19);border-color:rgba(113,208,227,.58)}
.role-switcher-wrap select{background:#102c44;border-color:rgba(113,180,210,.28)}
.sidebar{background:linear-gradient(180deg,rgba(13,37,58,.92),rgba(9,27,45,.96));border-right-color:var(--line)}
.sidebar-foot{background:linear-gradient(145deg,rgba(28,56,78,.92),rgba(10,32,51,.95))}
.side-nav button.active,.side-nav button:hover{background:linear-gradient(90deg,rgba(25,102,127,.50),rgba(24,70,92,.18));border-left:2px solid #42cada}
.content-area{padding:clamp(1rem,2.2vw,2rem)}
.notice-card{padding:.8rem 1.05rem;font-size:.88rem;background:linear-gradient(90deg,rgba(29,118,142,.16),rgba(47,89,117,.10));border-color:rgba(74,182,206,.24)}
.page-head h1,.page-head h2{font-family:'Trebuchet MS',Arial,sans-serif;letter-spacing:-.025em;font-weight:600;line-height:1.06}
.page-head h1{font-size:clamp(2rem,3.6vw,3.4rem)}
.eyebrow{color:#72d4e5;font-size:.70rem;letter-spacing:.28em}
.card{background:linear-gradient(146deg,rgba(32,65,88,.97),rgba(14,38,59,.98));border-color:rgba(117,170,199,.22);box-shadow:0 13px 44px rgba(2,14,26,.18)}
.card h3{font-weight:650;letter-spacing:-.025em}.card p{color:#c1d4df}.card-body{padding:1.25rem}
.stat{background:linear-gradient(150deg,#234761,#133149);border-color:rgba(121,169,199,.25)}
.stat strong{background:linear-gradient(135deg,#e8f8ff,#76cde1);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:1.85rem}
.tag{background:rgba(35,110,140,.25)}.tag.teal{background:rgba(27,142,166,.26);color:#A5EBF5}.tag.copper{background:rgba(160,97,70,.26);color:#FFC8A6}
.hero{grid-template-columns:minmax(0,1.05fr) minmax(290px,.95fr);background:linear-gradient(112deg,#203f59 0%,#123149 58%,#0b273d 100%);border-color:rgba(114,179,203,.29);padding:clamp(1.25rem,3vw,2.5rem);min-height:360px;overflow:hidden}
.hero h1{font-family:'Trebuchet MS',Arial,sans-serif;font-weight:700;line-height:1.04;letter-spacing:-.04em;font-size:clamp(2.2rem,4.2vw,4.4rem)}
.hero .role-pill{font-size:.69rem;letter-spacing:.14em;background:rgba(158,95,67,.19);color:#F2B18F;border:1px solid rgba(195,137,99,.28)}
.hero-visual{min-height:315px;align-self:stretch;background:
  linear-gradient(90deg,rgba(12,34,54,.03),rgba(8,24,40,.15)),
  url('assets/ombra-night-world.webp') center 42%/cover no-repeat,
  linear-gradient(145deg,#214560,#0b2238);
  border:1px solid rgba(166,203,226,.26);box-shadow:inset 0 0 65px rgba(7,20,34,.25)}
.hero-visual::before{width:250px;height:250px;border-color:rgba(62,199,231,.28);left:20px;bottom:-80px}
.hero-visual::after{width:130px;height:130px;border-color:rgba(216,145,104,.45);top:-35px;right:-45px}
.hero-visual .hero-premium-headphones{display:none}
.hero-world-label{position:absolute;z-index:2;left:16px;bottom:15px;right:16px;padding:10px 12px;border-radius:10px;background:rgba(6,24,40,.70);border:1px solid rgba(150,195,215,.25);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#d7e9f3}
.project-thumb{background:radial-gradient(circle at 46% 42%,rgba(48,159,190,.35),transparent 40%),linear-gradient(145deg,#254961,#10263c)}
.project-visual-mark{width:120px;height:120px;filter:drop-shadow(0 8px 17px rgba(0,0,0,.32))}
.role-card{position:relative;isolation:isolate;min-height:230px;display:flex;flex-direction:column;gap:.38rem;padding:1.15rem;background:linear-gradient(160deg,#24526b,#0b2136);border:1px solid rgba(119,170,198,.32);transition:transform .25s ease,border-color .25s ease,background .25s ease}
.role-card:hover{background:linear-gradient(150deg,#2b6480,#123249);border-color:#50cbdf;transform:translateY(-4px)}
.role-card strong{font-family:'Trebuchet MS',Arial,sans-serif;letter-spacing:.04em;font-size:1.15rem}
.role-card span:not(.role-number):not(.role-visual){line-height:1.5;font-size:.9rem;color:#c5dce8}
.role-number{font-size:.69rem;letter-spacing:.19em;color:#A2DBE9;margin-bottom:.2rem}
.role-visual{display:flex;align-items:center;justify-content:center;width:100%;height:90px;border-radius:13px;margin-bottom:.4rem;overflow:hidden;border:1px solid rgba(179,215,233,.16)}
.role-visual span{font-size:2.8rem;line-height:1;color:#d3f7fc;filter:drop-shadow(0 0 14px rgba(64,221,240,.36))}
.role-fan{background:radial-gradient(circle at 50% 140%,#5d5bd0 0%,transparent 70%),linear-gradient(145deg,#132c59,#18334c)}
.role-creator{background:radial-gradient(circle at 50% 100%,rgba(210,132,81,.55),transparent 70%),linear-gradient(145deg,#23344b,#3b2b30)}
.role-provider{background:radial-gradient(circle at 50% 120%,rgba(22,173,187,.48),transparent 73%),linear-gradient(145deg,#10263b,#0e4354)}
.role-founder{background:radial-gradient(circle at 50% 115%,rgba(96,162,197,.55),transparent 72%),linear-gradient(145deg,#18263f,#2d3f54)}
.overlay{background:rgba(3,17,29,.80);backdrop-filter:blur(12px)}
.dialog{background:linear-gradient(135deg,#1d4059,#0b263d 80%);border:1px solid rgba(126,186,211,.36);padding:clamp(1.2rem,3vw,2rem)}
.dialog h2{font-family:'Trebuchet MS',Arial,sans-serif;letter-spacing:-.02em;font-size:clamp(1.4rem,3vw,2rem);max-width:800px}

/* Premium four-second cinematic sonic intro. Visual vibrations only: no surprise autoplay audio. */
.intro-splash{
  isolation:isolate;overflow:hidden;
  background:radial-gradient(ellipse at 50% 55%,#173d59 0%,#071e31 36%,#030e1a 83%);
  animation:ombraCurtain 4.55s cubic-bezier(.68,.05,.23,1) forwards;
}
.intro-atmosphere{position:absolute;inset:-15%;pointer-events:none;background:
 radial-gradient(circle at 50% 60%,rgba(33,177,220,.14),transparent 28%),
 repeating-linear-gradient(90deg,transparent 0,transparent 95px,rgba(117,203,223,.018) 96px,transparent 97px);
 animation:atmosphereMove 4.3s ease-in-out both}
.intro-stage{width:min(900px,100vw);height:min(720px,100vh);min-height:440px;overflow:visible;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15px 20px;position:relative}
.intro-station{position:absolute;left:50%;top:50%;transform:translate(-50%,-47%);width:min(560px,90vw);aspect-ratio:1;display:grid;place-items:center;pointer-events:none}
.station-disc{position:absolute;border-radius:50%;border:1px solid rgba(114,186,213,.19);box-shadow:0 0 35px rgba(26,110,163,.07)}
.station-1{width:75%;height:75%;border-color:rgba(44,175,214,.19)}
.station-2{width:92%;height:92%;border-color:rgba(208,150,114,.20)}
.station-3{width:112%;height:112%;border-color:rgba(95,170,204,.10)}
.headphones-mark.premium-intro-headphones{position:relative;width:clamp(280px,35vw,420px);height:auto;aspect-ratio:560/520;z-index:3;margin:0 0 -4px;transform-origin:50% 68%;filter:drop-shadow(0 25px 32px rgba(0,8,20,.58));animation:headphoneFall .82s cubic-bezier(.15,.78,.3,1.25) both,headphoneBass .22s linear 1.13s 10}
.headphones-mark.premium-intro-headphones > img:first-child{width:100%;height:100%;object-fit:contain;display:block}
.headphones-mark .intro-lens{position:absolute;left:50%;top:46%;width:31%;height:31%;transform:translate(-50%,-50%) scale(.5);object-fit:contain;opacity:0;animation:resonanceReveal .55s ease-out 2.4s forwards,opticSpin 2.3s ease-in-out 2.8s forwards;filter:drop-shadow(0 0 18px rgba(73,192,229,.38))}
.intro-pulse{position:absolute;left:50%;top:44%;bottom:auto;right:auto;inset:unset;transform:translate(-50%,-50%);border:2px solid rgba(47,187,226,.44);box-shadow:0 0 18px rgba(34,151,215,.16);z-index:1;opacity:0}
.pulse-1{width:190px;height:190px;animation:sonicPulse .90s ease-out 1.12s 3}
.pulse-2{width:230px;height:230px;animation:sonicPulse .90s ease-out 1.37s 3}
.pulse-3{width:270px;height:270px;animation:sonicPulse .90s ease-out 1.58s 2}
.intro-wordmark{position:relative;top:auto;left:auto;transform:none;z-index:4;margin-top:-7px;opacity:0;text-align:center;animation:brandArrive .7s cubic-bezier(.16,.8,.22,1) 1.13s forwards}
.intro-ombra{font-family:'Trebuchet MS',Arial,sans-serif;font-weight:650;letter-spacing:.16em;font-size:clamp(2.8rem,8vw,6.2rem);margin:0;background:linear-gradient(110deg,#5b849c,#ebf4f9 20%,#bbd0dd 40%,#dfa47f 57%,#edf8ff 72%,#507f9c 100%);background-size:260% auto;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;animation:cinemaSilverSweep 1.6s ease-in-out 1.45s 2}
.intro-network{position:relative;margin-top:.17rem;letter-spacing:.62em;padding-left:.62em;font-size:clamp(.78rem,2vw,1.15rem);color:#bcdce9;text-shadow:0 0 11px rgba(69,187,219,.25);animation:tvSignal .12s steps(3,end) 1.8s 12}
.intro-network::after{content:attr(data-word);position:absolute;left:0;right:0;top:0;transform:translateX(-2px);opacity:0;color:#d9f2fa;mix-blend-mode:screen;animation:signalGhost .25s steps(2,end) 1.8s 7}
.intro-frequency{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);height:32px;display:flex;gap:7px;align-items:center;opacity:0;animation:frequencyFade .9s ease 1.3s forwards}
.intro-frequency span{display:block;width:3px;height:8px;border-radius:99px;background:linear-gradient(#8de6f7,#258ba9);animation:equalize .54s ease-in-out alternate infinite}
.intro-frequency span:nth-child(2n){animation-delay:-.2s;height:18px}.intro-frequency span:nth-child(3n){animation-delay:-.37s;height:29px}.intro-frequency span:nth-child(5n){animation-duration:.29s}
.intro-footnote{position:absolute;bottom:2%;left:0;right:0;text-align:center;letter-spacing:.23em;color:#8ab9cb;font-size:clamp(.54rem,1.6vw,.72rem);opacity:0;animation:frequencyFade .8s ease 2.15s forwards}
@keyframes headphoneFall{0%{transform:translateY(-125vh) scale(.76) rotate(-9deg);opacity:.8}76%{transform:translateY(12px) scale(1.045) rotate(1deg);opacity:1}100%{transform:translateY(0) scale(1);opacity:1}}
@keyframes headphoneBass{0%,100%{transform:translate(0,0) rotate(0deg)}25%{transform:translate(-2px,1px) rotate(-.4deg)}50%{transform:translate(2px,-1px) rotate(.4deg)}75%{transform:translate(-1px,-1px) rotate(-.2deg)}}
@keyframes resonanceReveal{from{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(-45deg)}to{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}}
@keyframes opticSpin{0%{filter:drop-shadow(0 0 8px rgba(73,192,229,.14))}60%{filter:drop-shadow(0 0 27px rgba(73,192,229,.68))}100%{filter:drop-shadow(0 0 12px rgba(73,192,229,.18))}}
@keyframes sonicPulse{0%{opacity:.5;transform:translate(-50%,-50%) scale(.55)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.0)}}
@keyframes brandArrive{from{transform:translateY(-35px) scale(.96);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes cinemaSilverSweep{0%{background-position:180% center}100%{background-position:-25% center}}
@keyframes tvSignal{0%,100%{opacity:1;filter:brightness(1)}33%{opacity:.78;filter:brightness(1.4)}66%{opacity:.92;filter:brightness(.92)}}
@keyframes signalGhost{0%,100%{opacity:0}50%{opacity:.45}}
@keyframes equalize{from{transform:scaleY(.35)}to{transform:scaleY(1.3)}}
@keyframes frequencyFade{from{opacity:0}to{opacity:.7}}
@keyframes atmosphereMove{0%{transform:scale(.92);opacity:.3}100%{transform:scale(1.1);opacity:.8}}
@keyframes ombraCurtain{0%,72%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@media(max-width:850px){
 .hero{grid-template-columns:1fr}.hero-visual{min-height:290px}
 .role-card{min-height:225px}
 .brand-text{font-size:1.38rem}.brand-symbol{width:42px;height:42px}
}
@media(max-width:600px){
 .intro-stage{min-height:100dvh;height:100dvh;justify-content:center;padding:12px}
 .headphones-mark.premium-intro-headphones{width:min(92vw,360px)}
 .intro-wordmark{margin-top:-10px}
 .intro-ombra{font-size:clamp(2.9rem,11.5vw,5.4rem)}
 .intro-network{letter-spacing:.40em;padding-left:.4em}
 .intro-footnote{padding:0 18px;line-height:1.5}
 .role-card{min-height:210px}
 .hero{padding:1.2rem}.hero-visual{min-height:220px}
 .role-visual{height:78px}
 .demo-banner{font-size:.75rem}
}
@media(prefers-reduced-motion:reduce){
 .intro-splash{animation-duration:.18s;animation-delay:0s}
 .intro-splash *{animation:none!important}
 .headphones-mark.premium-intro-headphones{transform:none}
 .intro-wordmark{opacity:1}
 .intro-frequency,.intro-footnote{opacity:.8}
 .headphones-mark .intro-lens{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

/* V5 integrated entry gate */
.registration-wall{z-index:92;background:radial-gradient(circle at 50% 18%,rgba(41,134,153,.32),rgba(4,15,27,.97) 65%);backdrop-filter:blur(20px)}
.registration-dialog{width:min(550px,100%);padding:clamp(22px,4vw,40px);border:1px solid rgba(87,179,193,.32);box-shadow:0 28px 110px #000a}
.registration-dialog h2{font:normal clamp(2rem,5vw,3.25rem)/1.08 Georgia,serif;color:#e7f2fa;margin:.4rem 0 1rem}
.registration-dialog p{line-height:1.65}
.registration-logo{display:flex;align-items:center;justify-content:center;gap:.7rem;margin:.1rem 0 1.2rem}
.registration-logo img{width:62px;height:62px;object-fit:contain}
.registration-logo span{font:normal 1.65rem Georgia,serif;color:#e1e7eb;letter-spacing:.18em}
.registration-logo small{display:block;text-align:center;font:600 .65rem sans-serif;letter-spacing:.4em;color:#58c3d1;margin-top:.2rem}
.registration-hint{background:#18354a;color:#d1e4ee;border:1px solid rgba(79,182,209,.28);border-radius:15px;padding:.8rem;font-size:.84rem}
.registration-dialog form{display:grid;gap:.6rem;margin-top:1.1rem}
.registration-dialog form>label:not(.registration-checkbox){font-size:.75rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#b9dbe5;margin-top:.4rem}
.registration-dialog input:not([type=checkbox]){background:#0b1c2d;color:#eff7fc;border:1px solid rgba(98,185,202,.32)}
.registration-checkbox{display:flex;align-items:flex-start;gap:.7rem;font-size:.83rem;line-height:1.55;margin:.5rem 0 .8rem;color:#cedde8}
.registration-checkbox input{margin:.23rem 0 0;width:auto;flex-shrink:0;accent-color:#2eb5bb}
.registration-status{color:#ffce9e;font-size:.85rem;min-height:1.3em;margin:0}
.registration-dialog .btn{width:100%;border-radius:14px;background:linear-gradient(100deg,#2bc0c5,#27839f);color:#051c25}
.registration-dialog a{color:#9ed9df}
.honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important}
body.gate-open{overflow:hidden}
@media(max-width:600px){.registration-wall{align-items:start;overflow-y:auto;padding:12px}.registration-dialog{max-height:none;padding:20px}.registration-logo img{width:46px;height:46px}}


/* ==========================================================
   V5.1 BLACK SIGNAL — final theme overrides
   Near-black base, steel-blue depth, teal actions, copper detail.
   ========================================================== */
:root{
  --obsidian:#070A0F;--gunmetal:#0E1620;--slate:#172738;
  --teal:#42D0C8;--copper:#C78D63;--silver:#E9EEF3;
  --silver-dim:#B6C3CF;--white:#F7F8FA;
  --panel:#101C28;--panel-2:#101923;
  --line:rgba(185,205,220,.16);
  --shadow:0 20px 46px rgba(0,0,0,.26);
}
body{background:radial-gradient(ellipse at 85% 7%,rgba(21,70,80,.15),transparent 30%),linear-gradient(180deg,#090E14,#070A0F 55%,#07090C);color:var(--silver)}
.demo-banner{background:#101923;border-bottom:1px solid rgba(83,176,184,.18);font-size:.76rem;min-height:35px;padding:.45rem .9rem;gap:.75rem;letter-spacing:0}
.demo-banner strong{color:#B9D9DC;letter-spacing:.09em;font-size:.68rem}
.demo-banner span{color:#A4B2BD}
.demo-banner a{color:#8DE7DF}
.site-header{background:rgba(7,10,15,.97);border-color:var(--line);padding:.82rem clamp(1rem,2.5vw,2rem)}
.working-name-pill{color:#DDB091;border-color:rgba(210,158,118,.3);background:rgba(199,141,99,.07)}
.header-tools .btn,.header-tools select{border-radius:11px}
.app-shell{background:#080D13}
.sidebar{background:linear-gradient(180deg,#0D151F,#091119);border-right:1px solid var(--line)}
.sidebar-head{padding:.3rem .35rem .6rem}
.sidebar-desc{font-size:.86rem;line-height:1.45;margin:.6rem 0 0}
.sidebar-foot{display:none}
.side-nav button{color:#C6D0D8;border-radius:12px;padding:.83rem .9rem}
.side-nav button.active,.side-nav button:hover{background:rgba(47,132,146,.2);box-shadow:inset 3px 0 #42D0C8;color:#F4F7F9;transform:none}
.content-area{background:radial-gradient(circle at top right,rgba(24,67,87,.17),transparent 31%),#080D13;padding:1.5rem clamp(1rem,2vw,2.4rem) 2rem}
.app-notice{margin-bottom:1rem}
.notice-card{border:1px solid rgba(87,151,163,.18);background:rgba(18,42,51,.39);color:#AEBFCB;font-size:.78rem;padding:.62rem .9rem;border-radius:10px}
.notice-card strong{color:#C7E3E7}
.page-head h1,.page-head h2{color:#F0F2F4;font-family:'Trebuchet MS',Arial,sans-serif;font-size:clamp(1.95rem,3.2vw,3.2rem);font-weight:700;letter-spacing:-.035em}
.page-head p{color:#AEC0CE;max-width:680px;line-height:1.6}
.eyebrow{color:#5DE0D5;font-size:.68rem;letter-spacing:.22em}
.card,.stat{background:linear-gradient(150deg,rgba(23,38,53,.97),rgba(13,23,34,.98));border:1px solid rgba(157,187,207,.17);box-shadow:0 12px 38px rgba(0,0,0,.16)}
.card h3{color:#EEF3F6;font-size:1.04rem}
.card p,.page-head p,.hero p{color:#B9C8D3}
.card .card-actions{margin-top:auto;padding-top:1rem}
.card-body{display:flex;flex-direction:column;gap:.55rem}
.card-body p{flex:1}
.stat strong{color:#EEF3F6}
.stat span{color:#9CAFBC}
.stat-grid{gap:.8rem}
.stat{padding:.9rem 1rem}
.stat strong{font-size:1.55rem}
.hero{background:linear-gradient(135deg,#172635,#0C1620 65%);border:1px solid rgba(149,180,205,.19)}
.hero-visual{background:linear-gradient(140deg,#14293A,#0B1521)}
.hero-world-label{background:rgba(5,10,16,.68)}
.btn{background:linear-gradient(115deg,#4AD8D0,#2CB6AE);color:#051518;border:1px solid rgba(101,237,224,.36);box-shadow:none;font-weight:750}
.btn:hover{background:linear-gradient(115deg,#6AE3DD,#3FCBC2);box-shadow:0 9px 26px rgba(41,174,174,.18)}
.btn.ghost{border:1px solid rgba(169,197,214,.28);color:#E2EDF3;background:rgba(12,25,36,.34)}
.btn.ghost:hover{border-color:rgba(68,207,200,.55);background:#1C3541}
.tag.copper,.role-pill{background:rgba(199,141,99,.13);color:#E3B28E;border-color:rgba(199,141,99,.19)}
.role-badge{background:rgba(58,160,169,.15);color:#81DDD9}
input,select,textarea{color:#EAF1F7;background:#0B1520;border:1px solid rgba(155,197,210,.22)}
input:focus,textarea:focus,select:focus{border-color:#39BEB9;box-shadow:0 0 0 3px rgba(57,190,185,.15)}
.checkrow{background:#101D28;border-color:var(--line)}

/* A short, quiet registration wall instead of an explainer page */
.registration-wall{background:radial-gradient(circle at 50% 15%,rgba(25,70,82,.18),transparent 48%),rgba(2,5,9,.98)}
.registration-dialog{width:min(450px,100%);padding:clamp(24px,3vw,33px);background:linear-gradient(160deg,#111D28,#090F16 77%);border:1px solid rgba(135,179,197,.25);border-radius:22px;box-shadow:0 30px 100px #000b}
.registration-logo{margin:0 0 1.2rem;gap:.6rem}
.registration-logo img{width:45px;height:45px}
.registration-logo span{font-size:1.35rem;letter-spacing:.2em}
.registration-logo small{color:#5DDCD3;font-size:.59rem;letter-spacing:.36em}
.registration-dialog .eyebrow{display:block;text-align:center;margin:0 0 .55rem;color:#75BCBE;font-size:.64rem}
.registration-dialog h2{color:#F1F4F6;font-family:'Trebuchet MS',Arial,sans-serif;font-size:clamp(2rem,4vw,2.5rem);font-weight:700;letter-spacing:-.05em;line-height:1.05;text-align:center;margin:.2rem 0 .7rem}
.registration-lead{text-align:center;color:#B5C5D0;font-size:.94rem;line-height:1.55;margin:0 0 1rem}
.registration-dialog form{gap:.6rem;margin-top:1rem}
.registration-dialog form>label:not(.registration-checkbox){font-size:.71rem;color:#C5D6DE;letter-spacing:.08em}
.registration-dialog input:not([type=checkbox]){background:#0A121B;color:#F1F5F7;border:1px solid rgba(150,193,203,.26);border-radius:12px;padding:.83rem 1rem;box-shadow:none}
.registration-dialog input::placeholder{color:#8798A7}
.registration-checkbox{color:#CBD6DC;font-size:.81rem;margin:.4rem 0 .55rem}
.registration-checkbox input{accent-color:#42D0C8}
.registration-dialog .btn{width:100%;background:linear-gradient(112deg,#45D4CB,#25AFA8);color:#061A1C;border:1px solid rgba(115,222,214,.44);font-size:.96rem;padding:.92rem;border-radius:12px}
.registration-status{color:#FFCCA8;font-size:.78rem;min-height:0;margin:.1rem 0 0}
.registration-status:empty{display:none}
.registration-footer{font-size:.71rem;text-align:center;color:#90A3B0;line-height:1.5;margin:1rem 0 .55rem}
.registration-footer a{color:#9ADFD7;text-decoration:underline;text-underline-offset:3px}
.registration-more{border-top:1px solid rgba(171,200,214,.12);padding-top:.65rem;color:#9BACB7;text-align:center;font-size:.75rem}
.registration-more summary{cursor:pointer;list-style:none;color:#A9C6CC;text-decoration:underline;text-decoration-color:rgba(158,203,205,.4);text-underline-offset:4px}
.registration-more summary::-webkit-details-marker{display:none}
.registration-more p{line-height:1.5;text-align:left;margin:.5rem 0}
.registration-demo-mark{text-align:center;font-size:.61rem;letter-spacing:.18em;color:#6C818F;margin-top:.9rem}

/* 3 clear and comparable profile choices */
.overlay{background:rgba(1,4,8,.82)}
.role-dialog{background:linear-gradient(155deg,#131F2A,#0B111A);border:1px solid rgba(127,178,197,.25);width:min(820px,100%);padding:clamp(1.5rem,3vw,2.2rem)}
.role-dialog h2{font-family:'Trebuchet MS',Arial,sans-serif;font-size:clamp(1.7rem,4vw,2.6rem);letter-spacing:-.035em;margin:0 0 .5rem}
.role-dialog .eyebrow{margin:0 0 .65rem}
.role-intro{color:#B8C7D2;margin:0 0 1.1rem;font-size:.95rem}
.role-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:.8rem}
.role-card{min-height:235px;display:flex;flex-direction:column;gap:.44rem;padding:1.05rem;background:linear-gradient(155deg,#192E3D,#111E2B);border:1px solid rgba(151,192,214,.19);border-radius:16px;box-shadow:none;color:#E0ECF0}
.role-card:hover{background:linear-gradient(155deg,#213C4A,#13252E);border-color:#4AD7CF;transform:translateY(-2px)}
.role-card strong{color:#F0F5F6;font-size:1.25rem;font-family:'Trebuchet MS',Arial,sans-serif;letter-spacing:-.02em}
.role-card span:not(.role-visual):not(.role-card-cta){color:#B5C5CF;font-size:.85rem}
.role-visual{height:86px;margin-bottom:.1rem;border-radius:12px}
.role-card .role-card-cta{display:flex;margin-top:auto;align-items:center;justify-content:space-between;border-top:1px solid rgba(174,204,214,.18);padding-top:.73rem;color:#80E1D9!important;font-size:.77rem!important;font-weight:750;letter-spacing:.02em}
.role-card-cta b{font-size:1.15rem}
.role-legal{font-size:.73rem;color:#8DA3B2;line-height:1.5;margin:.8rem 0 0}
@media(max-width:850px){.role-grid{grid-template-columns:1fr}.role-card{min-height:160px}.role-visual{height:52px;max-width:100%}}
@media(max-width:600px){.registration-dialog{padding:23px 20px}.registration-logo img{width:40px;height:40px}.role-card{min-height:142px}.role-dialog{max-height:92vh}.role-grid{gap:.55rem}}