:root {
  --bg: #15161a;
  --panel: #202126;
  --line: #36383f;
  --text: #f7f7f8;
  --muted: #9b9ea5;
  --orange: #ff681d;
  --purple: #9b78df;
  --green: #63d6a0;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; max-width: 100%; margin: 0; overflow-x: hidden; }

body {
  color: var(--text);
  background: radial-gradient(circle at 50% -20%, #33263d 0, rgba(51,38,61,.12) 35%, transparent 55%), var(--bg);
  font-family: Arial, Helvetica, sans-serif;
}

html.intro-active-root, body.intro-active { height: 100%; overflow: hidden; }

.portal-intro {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 50% 48%, rgba(155,120,223,.18), transparent 28%),
    radial-gradient(circle at 15% 85%, rgba(255,104,29,.16), transparent 32%),
    radial-gradient(circle at 88% 18%, rgba(99,214,160,.1), transparent 30%),
    #111216;
  isolation: isolate;
  opacity: 1;
  visibility: visible;
  transition: opacity .68s ease, visibility .68s ease;
}

.portal-intro.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.portal-intro.is-handing-off .intro-tagline,.portal-intro.is-handing-off .intro-progress { opacity:0 !important; transform:translateY(-8px); transition:opacity .28s ease,transform .28s ease; }
.portal-intro.is-handing-off .intro-atmosphere { opacity:.22; transform:scale(1.04); transition:opacity .8s ease,transform .8s ease; }
.intro-atmosphere { position: absolute; inset: 0; pointer-events: none; }
.intro-orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; transform: translate(-50%,-50%); }
.intro-orbit::after { content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 22px rgba(255,104,29,.8); }
.intro-orbit-one { width: min(72vw,720px); aspect-ratio: 1; animation: intro-orbit 7s linear infinite; }
.intro-orbit-one::after { top: 17%; right: 14%; }
.intro-orbit-two { width: min(48vw,480px); aspect-ratio: 1; border-color: rgba(155,120,223,.18); animation: intro-orbit-reverse 5.5s linear infinite; }
.intro-orbit-two::after { bottom: 4%; left: 35%; width: 7px; height: 7px; background: var(--purple); box-shadow: 0 0 20px rgba(155,120,223,.9); }
.intro-spark { position: absolute; width: 8px; height: 8px; border-radius: 2px; opacity: 0; transform: rotate(45deg); animation: intro-spark 2.4s ease-in-out infinite; }
.intro-spark-one { left: 23%; top: 29%; background: var(--purple); animation-delay: .35s; }
.intro-spark-two { right: 20%; top: 66%; background: var(--green); animation-delay: 1.1s; }
.intro-spark-three { right: 28%; top: 22%; background: var(--orange); animation-delay: 1.65s; }

.intro-stage { position: relative; z-index: 2; width: min(1120px, calc(100% - 64px)); display: flex; flex-direction: column; align-items: center; text-align: center; }
.intro-lockup { width:100%; display:flex; align-items:center; justify-content:center; gap:52px; }
.intro-brand { display:flex; flex-direction:column; align-items:flex-start; opacity:0; transform:translateX(-38px); animation:intro-brand-in .78s cubic-bezier(.2,.8,.2,1) .32s forwards; }
.intro-logo { width:min(590px,51vw); height:auto; }
.intro-brand p { margin:25px 0 0 4px; color:rgba(255,255,255,.74); font-size:13px; font-weight:900; letter-spacing:.48em; }
.intro-divider { width:1px; height:184px; flex:0 0 auto; background:rgba(255,255,255,.18); transform:scaleY(0); animation:intro-divider-in .65s cubic-bezier(.2,.8,.2,1) .72s forwards; }
.intro-mark { position: relative; width: 220px; height: 220px; flex:0 0 auto; display: grid; place-items: center; opacity: 0; transform: translateX(38px) scale(.82); animation: intro-mark-in .82s cubic-bezier(.2,.9,.25,1.15) .64s forwards; }
.intro-ring { position: absolute; inset: 0; border-radius: 50%; background:conic-gradient(from -28deg,transparent 0 7%,var(--purple) 9%,var(--orange) 25%,var(--green) 39%,transparent 42% 58%,var(--purple) 62%,var(--orange) 76%,var(--green) 90%,transparent 93%); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px)); mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px)); animation:intro-ring 2.8s cubic-bezier(.45,.05,.2,1) .2s both,intro-ring-loop 7s linear 3s infinite; }
.intro-ring::before { content:""; position:absolute; border-radius:50%; }
.intro-ring::before { inset:20px; border:1px solid rgba(255,255,255,.12); }
.intro-core { position:relative; width: 142px; height: 142px; display:flex; align-items:center; justify-content:center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, rgba(155,120,223,.42), rgba(255,104,29,.15)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.13), 0 24px 65px rgba(0,0,0,.35); font-size: 48px; font-weight: 900; letter-spacing: -.06em; }
.intro-degree { position:relative; top:-.58em; margin-left:.05em; color:var(--orange); font-size:.52em; line-height:1; letter-spacing:0; text-shadow:0 0 15px rgba(255,104,29,.95); transform-origin:center; animation:intro-degree-pulse 1.8s ease-in-out infinite; }
.intro-tagline { margin: 46px 0 0; color: #b7bac2; font-size: 14px; line-height: 1.5; opacity: 0; transform: translateY(10px); animation: intro-copy-in .55s ease 1.38s forwards; }
.intro-progress { width: min(310px, 70vw); height: 2px; margin-top: 24px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.09); opacity: 0; animation: intro-copy-in .3s ease 1.55s forwards; }
.intro-progress span { display:block; width:100%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--purple),var(--orange),var(--green)); transform:scaleX(0); transform-origin:left; animation:intro-progress 2s cubic-bezier(.2,.65,.2,1) 1.55s forwards; }
.intro-controls { position:absolute; z-index:3; right:clamp(18px,4vw,54px); bottom:clamp(18px,4vw,42px); display:flex; align-items:center; gap:9px; }
.intro-skip,.intro-sound { display:flex; align-items:center; gap:9px; padding:11px 14px; border:1px solid rgba(255,255,255,.14); border-radius:999px; color:#bfc1c7; background:rgba(255,255,255,.055); backdrop-filter:blur(12px); font:inherit; font-size:10px; font-weight:900; letter-spacing:.08em; cursor:pointer; transition:.22s ease; }
.intro-skip:hover,.intro-skip:focus-visible,.intro-sound:hover,.intro-sound:focus-visible { color:#fff; border-color:rgba(255,104,29,.55); background:rgba(255,104,29,.14); transform:translateY(-2px); outline:none; }
.intro-skip span { color:var(--orange); font-size:16px; }
.intro-sound span { width:18px; height:18px; display:grid; place-items:center; border-radius:50%; color:#201728; background:var(--purple); font-size:12px; }
.intro-sound.is-on { color:#e8fff4; border-color:rgba(99,214,160,.46); background:rgba(99,214,160,.11); }
.intro-sound.is-on span { color:#102019; background:var(--green); }

@keyframes intro-orbit { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes intro-orbit-reverse { to { transform:translate(-50%,-50%) rotate(-360deg); } }
@keyframes intro-ring { 0% { transform:rotate(-170deg) scale(.78); opacity:0; } 35% { opacity:1; } 100% { transform:rotate(190deg) scale(1); opacity:1; } }
@keyframes intro-ring-loop { from { transform:rotate(190deg) scale(1); } to { transform:rotate(550deg) scale(1); } }
@keyframes intro-brand-in { to { opacity:1; transform:none; } }
@keyframes intro-divider-in { to { transform:scaleY(1); } }
@keyframes intro-mark-in { to { opacity:1; transform:none; } }
@keyframes intro-copy-in { to { opacity:1; transform:none; } }
@keyframes intro-progress { to { transform:scaleX(1); } }
@keyframes intro-spark { 0%,100% { opacity:0; transform:translateY(8px) rotate(45deg) scale(.5); } 45%,60% { opacity:.9; transform:translateY(0) rotate(45deg) scale(1); } }
@keyframes intro-degree-pulse { 0%,100% { opacity:.55; transform:scale(.82); } 50% { opacity:1; transform:scale(1.14); } }

.portal-shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 16px;
  padding: 24px clamp(34px, 6vw, 92px) 18px;
  overflow: visible;
}
.portal-shell::before { content:""; position:fixed; z-index:-2; inset:-24vmax; pointer-events:none; opacity:.2; background:repeating-radial-gradient(ellipse at 50% 46%, transparent 0 13.4%, rgba(155,120,223,.42) 13.55% 13.68%, transparent 13.85% 22.5%, rgba(255,104,29,.35) 22.65% 22.76%, transparent 22.95% 32%, rgba(99,214,160,.24) 32.15% 32.25%, transparent 32.45%); transform:rotate(-12deg); animation:portal-orbit-wallpaper 32s linear infinite; }
.portal-shell::after { content:""; position:fixed; z-index:-3; inset:0; pointer-events:none; background:radial-gradient(circle at 52% 42%,rgba(39,28,53,.72),transparent 42%),linear-gradient(145deg,#18191d,#0f1013); }

/* Entrada cinematografica do painel: o fundo chega primeiro e o conteudo entra em camadas. */
.portal-shell.is-entering .portal-header,
.portal-shell.is-entering .hero-copy,
.portal-shell.is-entering .access-card,
.portal-shell.is-entering footer {
  opacity: 0;
  transform: translateY(24px) scale(.985);
  filter: blur(8px);
}
.portal-shell.is-entering.is-ready .portal-header { animation: portal-layer-in .62s cubic-bezier(.2,.8,.2,1) .05s both; }
.portal-shell.is-entering.is-ready .hero-copy { animation: portal-layer-in .68s cubic-bezier(.2,.8,.2,1) .16s both; }
.portal-shell.is-entering.is-ready .access-card { animation: portal-card-in .72s cubic-bezier(.18,.82,.2,1) both; }
.portal-shell.is-entering.is-ready .access-card:nth-child(1) { animation-delay: .28s; }
.portal-shell.is-entering.is-ready .access-card:nth-child(2) { animation-delay: .38s; }
.portal-shell.is-entering.is-ready .access-card:nth-child(3) { animation-delay: .48s; }
.portal-shell.is-entering.is-ready .access-card:nth-child(4) { animation-delay: .58s; }
.portal-shell.is-entering.is-ready footer { animation: portal-layer-in .62s cubic-bezier(.2,.8,.2,1) .7s both; }
@keyframes portal-layer-in { to { opacity:1; transform:none; filter:none; } }
@keyframes portal-card-in {
  0% { opacity:0; transform:translateY(32px) scale(.975); filter:blur(10px); }
  72% { opacity:1; transform:translateY(-3px) scale(1.004); filter:blur(0); }
  100% { opacity:1; transform:none; filter:none; }
}

.portal-shell > *, .portal-header > *, .hero-copy, .access-grid, .access-card, .card-copy, footer > * { min-width: 0; }

.portal-header { display: flex; align-items: center; justify-content: space-between; }
.brand-360 { display:flex; align-items:center; gap:13px; color:#fff; text-decoration:none; }
.brand-360 > span { display:flex; flex-direction:column; align-items:flex-start; }
.brand-360 img { display:block; width:188px; height:auto; }
.brand-360 small { margin:5px 0 0 1px; color:#a9acb2; font-size:6px; font-weight:900; letter-spacing:.3em; }
.brand-360 b { position:relative; width:43px; height:43px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.15); border-radius:50%; background:rgba(38,31,49,.78); font-size:13px; }
.brand-360 b::before { content:""; position:absolute; inset:-9px; border-radius:50%; background:conic-gradient(from -28deg,transparent 0 7%,var(--purple) 9%,var(--orange) 25%,var(--green) 39%,transparent 42% 58%,var(--purple) 62%,var(--orange) 76%,var(--green) 90%,transparent 93%); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px)); animation:gate-brand-orbit 7s linear infinite; }
.brand-360 sup { position:relative; top:-.55em; color:var(--orange); font-size:.68em; text-shadow:0 0 9px rgba(255,104,29,.9); }

.tool-transition { position:fixed; z-index:500; inset:0; display:grid; place-items:center; align-content:center; gap:34px; pointer-events:none; visibility:hidden; opacity:0; overflow:hidden; background:radial-gradient(circle at center,rgba(43,31,56,.98),#111216 62%); transition:opacity .18s ease,visibility 0s linear .2s; }
.tool-transition.is-active { visibility:visible; opacity:1; transition:opacity .18s ease; }
.tool-transition.is-revealing { animation: portal-transition-out .78s cubic-bezier(.55,0,.25,1) both; }
.tool-transition-orbits { position:relative; width:min(78vw,540px); min-height:150px; display:grid; place-items:center; }
.tool-transition-lockup { display:flex; align-items:center; justify-content:center; gap:22px; transform:scale(.55); opacity:0; animation:tool-core-in .5s .1s cubic-bezier(.2,.8,.2,1) forwards; filter:drop-shadow(0 0 30px rgba(155,120,223,.32)); }
.tool-transition-wordmark { width:min(52vw,330px); height:auto; display:block; }
.tool-transition-360 { position:relative; width:78px; height:78px; flex:0 0 78px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.16); border-radius:50%; color:#fff; background:rgba(38,31,49,.9); box-shadow:0 0 30px rgba(155,120,223,.35); font-size:20px; font-weight:900; }
.tool-transition-360::before { content:""; position:absolute; inset:-14px; border-radius:50%; background:conic-gradient(from -28deg,transparent 0 7%,var(--purple) 9%,var(--orange) 25%,var(--green) 39%,transparent 42% 58%,var(--purple) 62%,var(--orange) 76%,var(--green) 90%,transparent 93%); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px)); mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px)); animation:gate-brand-orbit 1.5s cubic-bezier(.2,.75,.25,1) both; }
.tool-transition-360 sup { position:relative; top:-.6em; margin-left:.04em; color:var(--orange); font-size:.62em; text-shadow:0 0 9px rgba(255,104,29,.9); }
.tool-transition strong { color:#e9e6ee; font-size:12px; letter-spacing:.14em; text-transform:uppercase; opacity:0; animation:tool-label-in .35s .25s ease forwards; }
.is-changing-tool .portal-shell > * { animation:tool-content-away .54s cubic-bezier(.4,0,.6,1) forwards; }
@keyframes tool-core-in { to { transform:scale(1); opacity:1; } }
@keyframes tool-label-in { to { opacity:1; transform:none; } from { opacity:0; transform:translateY(8px); } }
@keyframes tool-content-away { to { opacity:0; transform:scale(.92); filter:blur(8px); } }
@keyframes portal-transition-out {
  0%,42% { visibility:visible; opacity:1; }
  100% { visibility:hidden; opacity:0; transform:scale(1.035); }
}
@keyframes portal-orbit-wallpaper { to { transform:rotate(348deg); } }
.header-label { display: flex; align-items: center; gap: 9px; color: #a9acb2; font-size: 11px; font-weight: 900; letter-spacing: .18em; }
.header-label span { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 6px rgba(99,214,160,.09); }

.hero-copy { text-align: center; }
.hero-copy > p { margin: 2px 0 8px; color: var(--orange); font-size: 12px; font-weight: 900; letter-spacing: .22em; }
.hero-copy h1 { margin: 0; font-size: clamp(40px, 4vw, 60px); line-height: .94; letter-spacing: -.055em; }
.hero-copy .greeting-question { display: inline-block; margin-top: .12em; }
.hero-copy > span { display: block; max-width: 670px; margin: 14px auto 0; color: #aaaeb5; font-size: 14px; line-height: 1.5; }

.access-grid {
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-self: start;
  justify-self: center;
}

.access-card {
  position: relative;
  min-height: 315px;
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  color: inherit;
  background: #202126;
  text-decoration: none;
  isolation: isolate;
  box-shadow: 0 24px 65px rgba(0,0,0,.3);
  transition: .25s ease;
}

button.access-card { width:100%; padding:0; font:inherit; text-align:left; }

.access-card:hover { transform: translateY(-5px); border-color: #595c65; box-shadow: 0 30px 75px rgba(0,0,0,.42); }
.access-card::after { content: ""; position: absolute; z-index: 3; top: 0; right: 0; bottom: 0; width: 52px; pointer-events: none; background: linear-gradient(to right, transparent, rgba(27,28,32,.96)); }
.proposals-card::after { background: linear-gradient(to right, transparent, rgba(33,28,26,.96)); }
.copilot-card::after { background: linear-gradient(to right, transparent, rgba(31,28,38,.96)); }
.demands-card::after { background: linear-gradient(to right, transparent, rgba(27,34,31,.96)); }
.card-glow { position: absolute; inset: 0; z-index: -2; }
.finance-card .card-glow { background: radial-gradient(circle at 72% 50%, rgba(156,124,218,.35), transparent 42%), linear-gradient(135deg,#252129,#1b1c20); }
.proposals-card .card-glow { background: radial-gradient(circle at 74% 47%, rgba(255,104,29,.3), transparent 43%), linear-gradient(135deg,#28211e,#1b1c20); }
.copilot-card .card-glow { background: radial-gradient(circle at 77% 46%, rgba(155,120,223,.29), transparent 43%), linear-gradient(135deg,#26212d,#1b1c20); }
.demands-card .card-glow { background: radial-gradient(circle at 77% 47%, rgba(99,214,160,.25), transparent 44%), linear-gradient(135deg,#202a26,#1b1c20); }

.card-copy {
  position: relative;
  z-index: 2;
  width: 46%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px 0 28px 34px;
}

.card-copy small { color: #b4b0bd; font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.finance-card .card-copy small { color: #c9b9ed; }
.proposals-card .card-copy small { color: #ffb48d; }
.copilot-card .card-copy small { color: #cab9ec; }
.demands-card .card-copy small { color: #9be5c3; }
.card-labels { width:100%; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.card-labels > span { padding:6px 9px; border:1px solid rgba(255,255,255,.14); border-radius:999px; color:#d7d8dc; background:rgba(255,255,255,.055); font-size:8px; font-weight:900; letter-spacing:.13em; }
.card-copy h2 { margin: 12px 0 13px; font-size: 36px; line-height: .94; letter-spacing: -.04em; }
.card-copy p { max-width: 188px; margin: 0; color: #b1b4ba; font-size: 12px; line-height: 1.55; }
.card-copy b { display: flex; align-items: center; gap: 10px; margin-top: auto; font-size: 10px; letter-spacing: .08em; }
.card-copy b i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font-size: 14px; font-style: normal; }
.card-copy b i svg, .person-card small i svg { width: 14px; height: 14px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.finance-card b i { color: #fff; background: var(--purple); }
.proposals-card b i { color: #fff; background: var(--orange); }
.copilot-card b i { color: #fff; background: var(--purple); }
.demands-card b i { color: #102019; background: var(--green); }
.disabled-action i svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.card-art { position: absolute; z-index: 1; right: 0; bottom: 0; width: clamp(340px, 82%, 500px); height: 100%; object-fit: contain; object-position: right bottom; mix-blend-mode: screen; filter: saturate(1.08) contrast(1.02); -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 17%, #000 34%, #000 93%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 17%, #000 34%, #000 93%, transparent 100%); }
.finance-card .card-art {
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
  -webkit-mask-image: linear-gradient(to right,transparent 0%,rgba(0,0,0,.4) 17%,#000 34%,#000 100%);
  mask-image: linear-gradient(to right,transparent 0%,rgba(0,0,0,.4) 17%,#000 34%,#000 100%);
}
.finance-card .card-copy p { max-width: 165px; }
.proposals-card .card-art { right: 0; width: clamp(340px, 82%, 500px); }
.copilot-card .card-art,
.demands-card .card-art { right:1.5%; width:min(59%, 650px); }

.access-card.is-disabled { cursor:not-allowed; border-style:dashed; box-shadow:0 18px 50px rgba(0,0,0,.22); }
.access-card.is-disabled:hover { transform:none; border-color:#454750; box-shadow:0 18px 50px rgba(0,0,0,.22); }
.access-card.is-disabled .card-art { opacity:.64; filter:saturate(.42) contrast(.94); }
.access-card.is-disabled .card-copy { opacity:.86; }
.access-card.is-preview-enabled { cursor:pointer; border-style:solid; }
.access-card.is-preview-enabled:hover { transform:translateY(-5px); border-color:#76658c; box-shadow:0 30px 75px rgba(0,0,0,.42),0 0 0 1px rgba(155,120,223,.12); }
.access-card.is-preview-enabled .card-art { opacity:1; filter:saturate(1.04) contrast(1.02); }
.access-card.is-preview-enabled .card-copy { opacity:1; }

.preview-modal[hidden] { display:none; }
.preview-modal { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:24px; }
.preview-backdrop { position:absolute; inset:0; width:100%; border:0; background:rgba(8,9,12,.82); backdrop-filter:blur(12px); cursor:pointer; }
.preview-dialog { position:relative; width:min(980px,100%); max-height:min(820px,calc(100vh - 48px)); overflow:auto; border:1px solid #4a4d56; border-radius:28px; background:linear-gradient(145deg,#26232c,#191a1e 68%); box-shadow:0 40px 110px rgba(0,0,0,.68); animation:preview-in .3s cubic-bezier(.2,.8,.2,1); }
.preview-close { position:sticky; z-index:4; top:16px; float:right; width:42px; height:42px; display:grid; place-items:center; margin:16px 16px -58px 0; border:1px solid #4b4d56; border-radius:50%; color:#fff; background:#292a30; font-size:25px; line-height:1; cursor:pointer; }
.preview-close:hover { border-color:#8c78ac; background:#393143; }
.preview-hero { min-height:260px; display:flex; align-items:flex-end; position:relative; overflow:hidden; padding:42px 42px 38px; border-radius:28px 28px 0 0; background:radial-gradient(circle at 82% 38%,rgba(155,120,223,.34),transparent 38%),linear-gradient(135deg,#2a2433,#1d1d22); }
.preview-hero.demands { background:radial-gradient(circle at 82% 38%,rgba(99,214,160,.25),transparent 40%),linear-gradient(135deg,#202c27,#1d1d22); }
.preview-hero img { position:absolute; right:-1%; bottom:-12%; width:min(54%,510px); max-height:115%; object-fit:contain; opacity:.8; -webkit-mask-image:linear-gradient(to right,transparent,#000 25%,#000); mask-image:linear-gradient(to right,transparent,#000 25%,#000); }
.preview-heading { position:relative; z-index:2; max-width:55%; }
.preview-heading small { color:#c7b6e7; font-size:10px; font-weight:900; letter-spacing:.18em; }
.preview-heading h2 { margin:12px 0 14px; font-size:clamp(38px,6vw,66px); line-height:.92; letter-spacing:-.055em; }
.preview-heading p { max-width:520px; margin:0; color:#c0c2c8; font-size:14px; line-height:1.55; }
.preview-body { padding:32px 42px 42px; }
.preview-intro { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:22px; }
.preview-intro h3 { margin:0; font-size:22px; }
.preview-badge { padding:8px 11px; border:1px solid rgba(155,120,223,.38); border-radius:999px; color:#cab9ec; background:rgba(155,120,223,.1); font-size:9px; font-weight:900; letter-spacing:.12em; white-space:nowrap; }
.preview-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.preview-feature { min-height:155px; padding:19px; border:1px solid #3b3d45; border-radius:18px; background:#24252a; }
.preview-feature i { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; color:#fff; background:#6f4db4; font-style:normal; font-weight:900; }
.preview-feature:nth-child(2) i { background:#d85311; }
.preview-feature:nth-child(3) i { color:#11231a; background:#63d6a0; }
.preview-feature strong { display:block; margin:14px 0 7px; font-size:15px; }
.preview-feature p { margin:0; color:#aeb1b7; font-size:12px; line-height:1.5; }
.preview-screen { margin-top:16px; padding:18px; border:1px solid #3d4048; border-radius:18px; background:#17181c; }
.preview-screen-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; color:#c8c9ce; font-size:10px; font-weight:900; letter-spacing:.1em; }
.preview-screen-head span { color:#63d6a0; }
.preview-led { display:grid; gap:8px; }
.preview-led div { padding:13px 15px; border-left:3px solid #9b78df; border-radius:7px; color:#e8e8eb; background:#222029; font-size:13px; }
.preview-led div:nth-child(2) { border-color:#ff681d; }
.preview-led div:nth-child(3) { border-color:#63d6a0; }
.construction-state { min-height:430px; display:grid; place-items:center; padding:54px; text-align:center; }
.construction-state i { width:72px; height:72px; display:grid; place-items:center; margin:0 auto 22px; border-radius:22px; color:#261b31; background:#b79ae8; font-size:34px; font-style:normal; }
.construction-state small { color:#bda9e2; font-size:10px; font-weight:900; letter-spacing:.18em; }
.construction-state h2 { margin:12px 0 14px; font-size:clamp(34px,6vw,58px); line-height:.95; letter-spacing:-.045em; }
.construction-state p { max-width:530px; margin:0 auto; color:#b3b5bb; font-size:14px; line-height:1.6; }
body.modal-open { overflow:hidden; }
@keyframes preview-in { from { opacity:0; transform:translateY(20px) scale(.98); } to { opacity:1; transform:none; } }

footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 2px; color: #8d9096; }
footer > div { display: flex; align-items: center; gap: 11px; }
footer > div > span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px dashed #555861; border-radius: 10px; color: #ad9fd0; font-size: 18px; }
footer p { margin: 0; font-size: 10px; line-height: 1.45; }
footer p strong { color: #c8cad0; }
footer > small { font-size: 8px; font-weight: 900; letter-spacing: .15em; }

.is-hidden { display: none !important; }

.identity-gate {
  position:relative;
  isolation:isolate;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px clamp(34px, 6vw, 92px) 26px;
  background:
    radial-gradient(circle at 18% 74%, rgba(127, 79, 219, .16), transparent 30%),
    radial-gradient(circle at 83% 68%, rgba(255, 104, 29, .13), transparent 30%);
}
.identity-gate.is-leaving { animation: identity-gate-away .46s cubic-bezier(.4,0,.6,1) both; pointer-events:none; }
@keyframes identity-gate-away { to { opacity:0; transform:scale(.975); filter:blur(9px); } }
.identity-gate > :not(.gate-orbit-field) { position:relative; z-index:1; }
.gate-orbit-field { position:absolute; z-index:0; inset:72px 0 0; overflow:hidden; pointer-events:none; opacity:.92; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 89%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 89%,transparent 100%); }
.gate-orbit-field i { position:absolute; left:50%; top:56%; border-radius:50%; transform:translate(-50%,-50%); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px)); mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px)); }
.gate-orbit-field i::after { content:""; position:absolute; width:11px; height:11px; top:9%; right:22%; border-radius:50%; background:currentColor; box-shadow:0 0 25px currentColor; }
.gate-orbit-field i:nth-child(1) { width:min(1180px,96vw); aspect-ratio:1; color:var(--orange); background:conic-gradient(from 22deg,transparent 0 8%,rgba(255,104,29,.5) 12%,rgba(155,120,223,.3) 28%,transparent 34% 66%,rgba(99,214,160,.28) 72%,transparent 84%); animation:gate-orbit-spin 28s linear infinite; }
.gate-orbit-field i:nth-child(2) { width:min(880px,74vw); aspect-ratio:1; color:var(--purple); background:conic-gradient(from 185deg,transparent 0 12%,rgba(155,120,223,.52) 18%,rgba(255,104,29,.26) 34%,transparent 41% 72%,rgba(99,214,160,.28) 79%,transparent 90%); animation:gate-orbit-spin-reverse 22s linear infinite; }
.gate-orbit-field i:nth-child(3) { width:min(600px,52vw); aspect-ratio:1; color:var(--green); background:conic-gradient(from 310deg,transparent 0 15%,rgba(99,214,160,.48) 21%,rgba(155,120,223,.3) 38%,transparent 48% 76%,rgba(255,104,29,.28) 84%,transparent 94%); animation:gate-orbit-spin 17s linear infinite; }
.gate-orbit-field span { position:absolute; width:10px; height:10px; border-radius:50%; box-shadow:0 0 25px currentColor; animation:gate-orbit-pulse 2.8s ease-in-out infinite; }
.gate-orbit-field span:nth-of-type(1) { left:16%; top:47%; color:var(--purple); background:currentColor; }
.gate-orbit-field span:nth-of-type(2) { right:14%; top:66%; color:var(--orange); background:currentColor; animation-delay:1.1s; }

.gate-header { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.gate-brand { display:flex; align-items:center; gap:13px; opacity:0; transition:opacity .16s ease; }
.gate-brand.is-visible { opacity:1; }
.gate-brand > div { display:flex; flex-direction:column; align-items:flex-start; }
.gate-brand img { width:182px; height:auto; display:block; }
.gate-brand small { margin:6px 0 0 1px; color:#a9acb2; font-size:6px; font-weight:900; letter-spacing:.34em; }
.gate-brand b { position:relative; width:46px; height:46px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.13); border-radius:50%; color:#fff; background:linear-gradient(145deg,rgba(155,120,223,.42),rgba(255,104,29,.15)); font-size:14px; letter-spacing:-.04em; box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 8px 20px rgba(0,0,0,.25); }
.gate-brand b::before { content:""; position:absolute; inset:-11px; border-radius:50%; background:conic-gradient(from -28deg,transparent 0 7%,var(--purple) 9%,var(--orange) 25%,var(--green) 39%,transparent 42% 58%,var(--purple) 62%,var(--orange) 76%,var(--green) 90%,transparent 93%); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px)); animation:gate-brand-orbit 7s linear infinite; }
.gate-degree { position:relative; top:-.56em; margin-left:.05em; color:var(--orange); font-size:.68em; line-height:1; letter-spacing:0; text-shadow:0 0 11px rgba(255,104,29,.95); transform-origin:center; animation:intro-degree-pulse 1.8s ease-in-out infinite; }

@keyframes gate-orbit-spin { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes gate-orbit-spin-reverse { to { transform:translate(-50%,-50%) rotate(-360deg); } }
@keyframes gate-brand-orbit { to { transform:rotate(360deg); } }
@keyframes gate-orbit-pulse { 0%,100% { opacity:.45; transform:scale(.75); } 50% { opacity:1; transform:scale(1.15); } }
.gate-copy { margin-top: 38px; text-align: center; }
.gate-copy > p { margin: 0 0 11px; color: var(--orange); font-size: 12px; font-weight: 900; letter-spacing: .22em; }
.gate-copy h1 { margin: 0; font-size: clamp(42px, 4.5vw, 64px); line-height: 1; letter-spacing: -.055em; }
.gate-copy > span { display: block; max-width: 650px; margin: 16px auto 0; color: #aaaeb5; font-size: 14px; line-height: 1.5; }

.people-grid {
  width: min(930px, 100%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}

.person-card {
  appearance: none;
  min-width: 0;
  padding: 16px 16px 18px;
  border: 1px solid #373940;
  border-radius: 25px;
  color: var(--text);
  background: linear-gradient(160deg, rgba(41, 42, 48, .98), rgba(26, 27, 31, .98));
  box-shadow: 0 22px 60px rgba(0, 0, 0, .28);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.person-card:hover { transform: translateY(-6px); border-color: #71627f; box-shadow: 0 30px 68px rgba(0,0,0,.42), 0 0 0 1px rgba(255,104,29,.16); }
.person-card.selected { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(255,104,29,.2),0 24px 62px rgba(0,0,0,.34); }
.person-photo { display: block; height: 230px; overflow: hidden; border-radius: 18px; background: #23242a; }
.person-photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 28%; transition: transform .35s ease; }
.person-card:hover .person-photo img { transform: scale(1.025); }
.person-card strong { display: block; margin: 15px 4px 10px; font-size: 25px; letter-spacing: -.025em; }
.person-card small { display: flex; align-items: center; justify-content: space-between; margin: 0 4px; color: #b6b8bf; font-size: 9px; font-weight: 900; letter-spacing: .09em; }
.person-card small i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--orange); font-size: 14px; font-style: normal; }
.person-card:nth-child(2) small i { background: var(--purple); }
.person-card:nth-child(3) small i { background: #588ecf; }
.gate-note { display: flex; align-items: center; gap: 8px; margin-top: 22px; color: #8f9299; font-size: 11px; }
.gate-note span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #11231a; background: var(--green); font-size: 12px; font-weight: 900; }
.portal-password-box { width:min(520px,100%); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:12px; align-items:end; margin-top:22px; padding:15px; border:1px solid #444650; border-radius:17px; background:#202126; box-shadow:0 18px 50px rgba(0,0,0,.28); }
.portal-password-box[hidden] { display:none; }
.portal-selected-profile { display:flex; align-items:center; gap:11px; min-width:0; }
.portal-selected-profile img { width:52px; height:52px; border-radius:12px; object-fit:cover; object-position:center 24%; }
.portal-selected-profile span,.portal-selected-profile strong { display:block; }
.portal-selected-profile span { color:#92959c; font-size:8px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.portal-selected-profile strong { margin-top:4px; font-size:16px; }
.portal-password-box label { display:block; color:#a7aab1; font-size:9px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.portal-password-box input { width:100%; height:43px; margin-top:7px; padding:0 12px; border:1px solid #43454d; border-radius:10px; outline:none; color:#fff; background:#292a30; font:inherit; font-size:13px; }
.portal-password-box input:focus { border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,104,29,.12); }
.portal-enter-button { grid-column:1/-1; min-height:44px; display:flex; align-items:center; justify-content:center; gap:10px; border:0; border-radius:11px; color:#fff; background:linear-gradient(135deg,var(--orange),#e64d00); font-size:11px; font-weight:900; cursor:pointer; }
.portal-enter-button span { font-size:16px; }
.portal-login-error { grid-column:1/-1; min-height:14px; margin:0; color:#ff9b9e; font-size:10px; text-align:center; }

.active-person {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 7px 5px 5px;
  border: 1px solid #3b3d45;
  border-radius: 14px;
  color: var(--text);
  background: #222329;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.active-person > img { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; object-position: center 24%; }
.active-person span { min-width: 112px; }
.active-person span small { display: block; color: #94979e; font-size: 7px; font-weight: 900; letter-spacing: .13em; }
.active-person span strong { display: block; margin-top: 3px; font-size: 13px; }
.active-person > i { padding: 7px 9px; border-radius: 8px; color: #c8badf; background: #312a3b; font-size: 9px; font-style: normal; font-weight: 900; text-transform: uppercase; }

@media (max-width: 850px) {
  .portal-shell { padding: 24px 18px; }
  .brand-360 img { width:158px; }
  .header-label { display: none; }
  .access-grid { grid-template-columns: 1fr; }
  .access-card { min-height: 360px; }
  .card-copy { width: 56%; padding-left: 24px; }
  .card-art { right: -9%; }
  .finance-card .card-art { right: 0; width: 100%; height: 100%; object-position: right center; }
  .copilot-card .card-art, .demands-card .card-art { right:-2%; width:70%; }
  footer { align-items: flex-start; flex-direction: column; }
  .identity-gate { padding: 24px 18px; }
  .gate-brand img { width:148px; }
  .gate-brand b { width:40px; height:40px; font-size:12px; }
  .gate-brand b::before { inset:-9px; }
  .people-grid { grid-template-columns: 1fr; max-width: 420px; }
  .person-photo { height: 250px; }
  .portal-password-box { grid-template-columns:1fr; }
  .portal-enter-button,.portal-login-error { grid-column:auto; }
  .preview-grid { grid-template-columns:1fr; }
  .preview-heading { max-width:62%; }
}

@media (max-width: 520px) {
  .intro-stage { width:calc(100% - 32px); }
  .intro-lockup { flex-direction:column; gap:22px; }
  .intro-brand { align-items:center; transform:translateY(24px); }
  .intro-logo { width:min(320px,82vw); }
  .intro-brand p { margin-top:15px; font-size:9px; letter-spacing:.42em; }
  .intro-divider { width:190px; height:1px; transform:scaleX(0); animation-name:intro-divider-mobile-in; }
  .intro-mark { width:142px; height:142px; transform:translateY(24px) scale(.82); }
  .intro-core { width:92px; height:92px; font-size:31px; }
  .intro-ring::before { inset:13px; }
  .intro-degree { top:-.58em; }
  .intro-tagline { max-width:280px; margin-top:28px; font-size:12px; }
  .intro-orbit-one { width:150vw; }
  .intro-orbit-two { width:92vw; }
  .intro-controls { right:50%; bottom:18px; width:max-content; max-width:calc(100% - 24px); transform:translateX(50%); }
  .intro-skip,.intro-sound { padding:10px 12px; font-size:8px; white-space:nowrap; }
  .intro-skip:hover,.intro-skip:focus-visible,.intro-sound:hover,.intro-sound:focus-visible { transform:translateY(-2px); }
  .portal-shell { gap:14px; padding:18px 16px 16px; }
  .portal-header { gap:10px; }
  .brand-360 { gap:9px; }
  .brand-360 img { width:126px; }
  .brand-360 b { width:36px; height:36px; font-size:11px; }
  .active-person { min-width:0; gap:7px; padding:4px; }
  .active-person > img { width:36px; height:36px; }
  .active-person span { min-width:0; }
  .active-person span small { font-size:6px; letter-spacing:.08em; }
  .active-person span strong { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
  .active-person > i { display:none; }
  .hero-copy h1 { max-width:100%; font-size:36px; line-height:.98; overflow-wrap:anywhere; }
  .hero-copy .greeting-question { display:block; }
  .hero-copy > span { margin-top:11px; font-size:12px; }
  .access-grid { width:100%; gap:16px; }
  .access-card { width:100%; min-height:340px; border-radius:22px; }
  .card-copy { width:62%; padding:24px 0 24px 22px; }
  .card-copy h2 { font-size:32px; overflow-wrap:anywhere; }
  .card-copy p { max-width:160px; font-size:11px; }
  .card-copy b { max-width:100%; gap:7px; overflow-wrap:anywhere; }
  .card-art { right:-12%; max-width:100%; }
  .finance-card .card-art { right:-7%; width:108%; }
  .proposals-card .card-art { right:0; width:100%; transform:translateX(10%) scale(.88); transform-origin:right bottom; }
  .copilot-card .card-art, .demands-card .card-art { right:-18%; width:105%; transform:scale(.82); transform-origin:right bottom; }
  footer, footer > div { max-width:100%; }
  footer p, footer small { overflow-wrap:anywhere; }
  .identity-gate { padding:18px 16px 24px; overflow-x:hidden; }
  .gate-brand { gap:9px; }
  .gate-brand img { width:116px; }
  .gate-brand small { font-size:5px; letter-spacing:.25em; }
  .gate-brand b { width:34px; height:34px; font-size:10px; }
  .gate-brand b::before { inset:-8px; }
  .gate-brand b::after { width:6px; height:6px; top:-4px; }
  .gate-orbit-field { inset:68px -62% 0; opacity:1; }
  .gate-orbit-field i:nth-child(1) { width:180vw; }
  .gate-orbit-field i:nth-child(2) { width:137vw; }
  .gate-orbit-field i:nth-child(3) { width:96vw; }
  .gate-copy { margin-top:26px; }
  .gate-copy h1 { font-size:38px; overflow-wrap:anywhere; }
  .person-card, .portal-password-box { width:100%; max-width:100%; }
  .preview-modal { padding:0; }
  .preview-dialog { width:100%; max-height:100vh; min-height:100vh; border:0; border-radius:0; }
  .preview-hero { min-height:390px; align-items:flex-start; padding:72px 22px 28px; border-radius:0; }
  .preview-hero img { right:-20%; bottom:-3%; width:100%; max-height:72%; }
  .preview-heading { max-width:82%; }
  .preview-heading h2 { font-size:43px; }
  .preview-heading p { font-size:12px; }
  .preview-body { padding:25px 22px 32px; }
  .preview-intro { align-items:flex-start; flex-direction:column; }
  .construction-state { min-height:100vh; padding:34px 24px; }
}

@keyframes intro-divider-mobile-in { to { transform:scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .portal-intro *, .portal-intro *::before, .portal-intro *::after { animation-duration:.01ms !important; animation-delay:0ms !important; animation-iteration-count:1 !important; }
  .portal-intro { transition-duration:.15s; }
  .identity-gate,.portal-shell,.portal-shell *,.tool-transition,.tool-transition * { animation-duration:.01ms !important; animation-delay:0ms !important; transition-duration:.01ms !important; }
  .portal-shell.is-entering .portal-header,.portal-shell.is-entering .hero-copy,.portal-shell.is-entering .access-card,.portal-shell.is-entering footer { opacity:1; transform:none; filter:none; }
}