:root{
  --gold:#ffc107;
  --gold-soft:#ffd95a;
  --ink:#090d16;
  --white:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{background:#090d16;color:#fff}
.portal-page{min-height:100vh;overflow-x:hidden;position:relative}
.portal-bg{position:fixed;inset:0;overflow:hidden;background:
  radial-gradient(circle at 15% 10%,rgba(255,193,7,.18),transparent 28%),
  radial-gradient(circle at 90% 85%,rgba(70,100,255,.16),transparent 30%),
  linear-gradient(135deg,#070b12 0%,#111827 48%,#080c14 100%);
}
.portal-grid{position:absolute;inset:0;opacity:.22;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to bottom,transparent,black 18%,black 80%,transparent)}
.portal-orb{position:absolute;border-radius:50%;filter:blur(4px);pointer-events:none}
.portal-orb-one{width:480px;height:480px;right:-150px;top:-170px;background:radial-gradient(circle,rgba(255,193,7,.17),transparent 68%);animation:floatOne 12s ease-in-out infinite}
.portal-orb-two{width:420px;height:420px;left:-180px;bottom:-190px;background:radial-gradient(circle,rgba(74,102,255,.14),transparent 68%);animation:floatTwo 14s ease-in-out infinite}
@keyframes floatOne{50%{transform:translate(-30px,35px) scale(1.08)}}
@keyframes floatTwo{50%{transform:translate(35px,-25px) scale(1.06)}}
.portal-shell{position:relative;z-index:1;width:min(1420px,calc(100% - 48px));margin:auto;min-height:100vh;padding:30px 0 24px;display:flex;flex-direction:column}
.portal-header{display:flex;align-items:center;justify-content:space-between;gap:20px}
.portal-brand{color:#fff;text-decoration:none;display:inline-flex;flex-direction:column;line-height:1}
.portal-brand-name{font-size:clamp(1.25rem,2vw,1.7rem);font-weight:900;letter-spacing:.06em}
.portal-brand-name span{color:var(--gold)}
.portal-brand-tagline{font-size:.58rem;letter-spacing:.24em;color:rgba(255,255,255,.55);margin-top:8px;font-weight:600}
.portal-header-note{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.58);font-weight:700}
.portal-header-note i{color:var(--gold);margin-right:7px}
.portal-intro{text-align:center;max-width:840px;margin:clamp(55px,8vh,100px) auto 42px}
.portal-kicker{font-size:.68rem;font-weight:800;letter-spacing:.22em;color:var(--gold);display:flex;justify-content:center;align-items:center;gap:14px;margin-bottom:18px}
.portal-kicker span{width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.portal-kicker span:last-child{background:linear-gradient(90deg,var(--gold),transparent)}
.portal-intro h1{font-size:clamp(3rem,6vw,6.5rem);line-height:.95;letter-spacing:-.065em;margin:0;font-weight:900}
.portal-intro h1 em{font-style:normal;color:var(--gold)}
.portal-intro p{max-width:720px;margin:25px auto 0;color:rgba(255,255,255,.68);font-size:clamp(.95rem,1.5vw,1.08rem);line-height:1.7}
.portal-choices{display:grid;grid-template-columns:1.12fr 1fr 1fr;gap:18px;align-items:stretch}
.portal-card{min-height:440px;position:relative;overflow:hidden;border-radius:28px;border:1px solid rgba(255,255,255,.13);background:#151b28;text-decoration:none;color:#fff;isolation:isolate;box-shadow:0 25px 70px rgba(0,0,0,.24);opacity:0;transform:translateY(24px);animation:cardIn .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--delay)}
@keyframes cardIn{to{opacity:1;transform:none}}
.portal-card::after{content:"";position:absolute;inset:0;border-radius:28px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);pointer-events:none;z-index:5}
.portal-card-image{position:absolute;inset:0;background-position:center;background-size:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.portal-card-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,9,15,.05) 20%,rgba(6,9,15,.28) 42%,rgba(6,9,15,.96) 100%);z-index:1}
.portal-card-content{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:28px 28px 26px;display:grid;grid-template-columns:auto 1fr auto;gap:17px;align-items:end}
.portal-card-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(255,193,7,.15);border:1px solid rgba(255,193,7,.35);color:var(--gold);font-size:1.05rem;align-self:start}
.portal-card-eyebrow{font-size:.62rem;letter-spacing:.16em;font-weight:800;color:rgba(255,255,255,.64)}
.portal-card h2{font-size:clamp(1.35rem,2.3vw,2rem);margin:7px 0 8px;font-weight:850;letter-spacing:-.035em}
.portal-card p{font-size:.86rem;line-height:1.55;color:rgba(255,255,255,.72);margin:0;max-width:470px}
.portal-arrow{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#101522;transition:.35s;flex:0 0 auto}
.portal-card:hover{transform:translateY(-8px);border-color:rgba(255,193,7,.45);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.portal-card:hover .portal-card-image{transform:scale(1.07)}
.portal-card:hover .portal-arrow{background:var(--gold);transform:rotate(-8deg) scale(1.06)}
.portal-footer{margin-top:auto;padding-top:28px;display:flex;align-items:center;justify-content:center;gap:16px;color:rgba(255,255,255,.42);font-size:.67rem;text-transform:uppercase;letter-spacing:.14em}
.portal-footer-line{width:36px;height:1px;background:rgba(255,255,255,.2)}
@media(max-width:1050px){
  .portal-choices{grid-template-columns:1fr;max-width:720px;margin:auto;width:100%}
  .portal-card{min-height:330px}
  .portal-card-main{min-height:370px}
}
@media(max-width:700px){
  .portal-shell{width:min(100% - 28px,680px);padding-top:22px}
  .portal-header-note{display:none}
  .portal-intro{margin:60px auto 30px}
  .portal-intro h1{font-size:clamp(2.65rem,14vw,4.2rem)}
  .portal-intro p{font-size:.9rem}
  .portal-kicker{font-size:.58rem;gap:8px}
  .portal-kicker span{width:22px}
  .portal-card,.portal-card-main{min-height:300px;border-radius:22px}
  .portal-card-content{padding:22px;grid-template-columns:auto 1fr auto;gap:12px}
  .portal-card-icon{width:40px;height:40px;border-radius:12px;font-size:.9rem}
  .portal-card p{font-size:.78rem}
  .portal-arrow{width:36px;height:36px}
  .portal-footer{font-size:.56rem;padding-bottom:6px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}