/* EVOLVE OS - internal hub. Dark editorial-luxe shell, per-business accent. */
:root{
  --bg:#0E0E11; --bg-2:#14141A; --panel:#17171D; --panel-2:#1D1D24;
  --fg:#ECEAE3; --muted:#9C988C; --faint:#6E6A60;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.05);
  --accent:#E6C36B; --accent-ink:#0E0E11;
  --serif:"Fraunces",Georgia,serif; --sans:"Hanken Grotesk",system-ui,sans-serif; --mono:"Space Mono",monospace;
  --r:14px;
}
/* per-business accents */
body.b-hq{--accent:#E7C873}
body.b-estates{--accent:#C9A24B}
body.b-studio{--accent:#C0EE59}
body.b-university{--accent:#E2A23A}
body.b-agentic{--accent:#3FE0D2}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--fg); font-family:var(--sans);
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
  min-height:100vh; position:relative; overflow-x:hidden;
}
/* atmosphere: accent glow + grain */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60vw 50vh at 78% -8%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%),
    radial-gradient(40vw 40vh at 8% 108%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap{position:relative; z-index:1; max-width:1120px; margin:0 auto; padding:0 28px}

/* top bar */
.bar{display:flex; align-items:center; justify-content:space-between; padding:26px 0 0; gap:18px}
.brandmark{font-family:var(--serif); font-weight:600; font-size:19px; letter-spacing:-.01em; display:flex; align-items:center; gap:10px}
.brandmark .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent)}
.crumbs{font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
.crumbs a{color:var(--muted); text-decoration:none} .crumbs a:hover{color:var(--accent)}

/* hero */
.hero{padding:64px 0 30px; max-width:760px; animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.kicker{font-family:var(--mono); font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--accent); margin-bottom:20px}
.hero h1{font-family:var(--serif); font-weight:560; font-size:clamp(38px,6.4vw,76px); line-height:.98; letter-spacing:-.025em; font-optical-sizing:auto}
.hero h1 em{font-style:italic; color:var(--accent)}
.hero p{margin-top:20px; font-size:18px; color:var(--muted); max-width:60ch}
.hr{height:1px; background:var(--line); margin:34px 0; border:0}

/* section label */
.slabel{font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); display:flex; align-items:center; gap:12px; margin:38px 0 18px}
.slabel::after{content:""; flex:1; height:1px; background:var(--line-2)}

/* card grid */
.grid{display:grid; gap:16px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.grid.c2,.grid.c3{grid-template-columns:1fr}}

.card{
  position:relative; display:flex; flex-direction:column; gap:8px;
  background:linear-gradient(180deg,var(--panel),var(--bg-2)); border:1px solid var(--line);
  border-radius:var(--r); padding:22px 22px 20px; text-decoration:none; color:var(--fg);
  transition:border-color .25s, transform .25s, box-shadow .25s; overflow:hidden;
}
.card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); transform:scaleY(0); transform-origin:top; transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.card:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent); transform:translateY(-3px); box-shadow:0 18px 50px -28px color-mix(in srgb,var(--accent) 60%,transparent)}
.card:hover::before{transform:scaleY(1)}
.card .ct{font-family:var(--serif); font-size:21px; font-weight:540; letter-spacing:-.01em; display:flex; align-items:center; gap:10px}
.card .cd{font-size:14px; color:var(--muted); line-height:1.45}
.card .tag{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
.card .go{margin-top:auto; padding-top:12px; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); opacity:.85}
.card.restricted .ct::after{content:"RESTRICTED"; font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; color:#E0796A; border:1px solid #E0796A55; padding:2px 6px; border-radius:6px; margin-left:2px}

/* door list (root) */
.doors{display:grid; gap:14px; margin-top:8px}
.door{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px; padding:24px 26px;
  background:linear-gradient(180deg,var(--panel),var(--bg-2)); border:1px solid var(--line); border-radius:var(--r);
  text-decoration:none; color:var(--fg); transition:.25s; position:relative; overflow:hidden}
.door:hover{border-color:color-mix(in srgb,var(--da) 60%,transparent); transform:translateX(4px); box-shadow:0 18px 50px -30px var(--da)}
.door .idx{font-family:var(--mono); font-size:12px; color:var(--faint)}
.door .name{font-family:var(--serif); font-size:clamp(22px,3vw,30px); font-weight:540; letter-spacing:-.02em}
.door .sub{font-size:14px; color:var(--muted); margin-top:3px}
.door .swatch{width:11px;height:11px;border-radius:50%;background:var(--da);box-shadow:0 0 16px var(--da)}
.door .enter{font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--da); white-space:nowrap}

/* footer / access note */
.note{display:flex; gap:14px; align-items:flex-start; margin:42px 0 18px; padding:20px 22px; border:1px dashed var(--line); border-radius:var(--r); background:rgba(255,255,255,.015)}
.note .k{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); white-space:nowrap; padding-top:2px}
.note p{font-size:13.5px; color:var(--muted); line-height:1.55}
footer{padding:30px 0 56px; color:var(--faint); font-size:12.5px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; border-top:1px solid var(--line-2); margin-top:30px}
footer a{color:var(--muted); text-decoration:none} footer a:hover{color:var(--accent)}

/* footer tools bar */
.tools{display:flex; flex-wrap:wrap; gap:10px; margin-top:4px}
.tools a{display:inline-flex; align-items:center; gap:8px; padding:10px 15px; border:1px solid var(--line); border-radius:11px;
  background:rgba(255,255,255,.02); color:var(--fg); text-decoration:none; font-size:13.5px; transition:.2s}
.tools a::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.85; box-shadow:0 0 8px var(--accent)}
.tools a:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent); background:color-mix(in srgb,var(--accent) 9%,transparent); transform:translateY(-2px)}

/* staggered reveal */
.reveal{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
.reveal:nth-child(1){animation-delay:.04s}.reveal:nth-child(2){animation-delay:.10s}
.reveal:nth-child(3){animation-delay:.16s}.reveal:nth-child(4){animation-delay:.22s}
.reveal:nth-child(5){animation-delay:.28s}.reveal:nth-child(6){animation-delay:.34s}
@keyframes rise{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}