*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--teal:#00D9B8;--violet:#A080F0;--gold:#E8B840;--bg:#050A0F;--white:#EEF3FF;--muted:#6B7F99;--display:'Syne',sans-serif;--body:'DM Sans',sans-serif}
html,body{height:100%;overflow:hidden}
body{background:var(--bg);color:var(--white);font-family:var(--body);-webkit-font-smoothing:antialiased}
body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;z-index:9999;opacity:.5}
.topbar{position:fixed;top:0;left:0;right:0;z-index:200;padding:20px 48px;display:flex;align-items:center;justify-content:space-between;animation:fadeInDown .7s cubic-bezier(.16,1,.3,1) .3s both}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-mark{width:38px;height:38px;border-radius:10px;overflow:hidden;flex-shrink:0;border:1px solid rgba(0,217,184,.3)}
.logo-mark img{width:100%;height:100%;object-fit:cover;mix-blend-mode:lighten}
.logo-text{font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:.1em;text-transform:uppercase;background:linear-gradient(135deg,var(--teal),var(--violet));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.topbar-right{display:flex;align-items:center;gap:12px}
.lang-toggle{display:flex;gap:3px;background:rgba(238,243,255,.06);border:1px solid rgba(238,243,255,.1);border-radius:30px;padding:3px 5px}
.lang-btn{font-family:var(--display);font-weight:700;font-size:.68rem;letter-spacing:.1em;padding:4px 10px;border-radius:20px;border:none;color:var(--muted);background:transparent;cursor:pointer;transition:all .25s}
.lang-btn.active{background:var(--teal);color:#020A08}
.back-btn{font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:8px 16px;border-radius:20px;border:1px solid rgba(238,243,255,.1);color:var(--muted);text-decoration:none;transition:all .25s}
.back-btn:hover{border-color:rgba(0,217,184,.35);color:var(--teal)}
/* PORTALS */
.portals{display:grid;grid-template-columns:repeat(3,1fr);height:100vh}
.portal{position:relative;overflow:hidden;cursor:pointer;text-decoration:none;color:inherit}
.portal::after{content:'';position:absolute;top:0;right:0;bottom:0;width:1px;background:rgba(238,243,255,.07);z-index:10}
.portal:last-child::after{display:none}
.portal-bg{position:absolute;inset:-8%;background-size:cover;background-position:center;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.portal:hover .portal-bg{transform:scale(1.08)}
/* STRONG gradient for legibility */
.portal-grad-base{position:absolute;inset:0;background:linear-gradient(to top,rgba(5,10,15,1) 0%,rgba(5,10,15,.75) 35%,rgba(5,10,15,.4) 65%,rgba(5,10,15,.25) 100%);z-index:1}
.portal-grad-color{position:absolute;inset:0;opacity:0;transition:opacity .5s;z-index:2}
.p1 .portal-grad-color{background:linear-gradient(135deg,rgba(0,217,184,.18),transparent)}
.p2 .portal-grad-color{background:linear-gradient(135deg,rgba(160,128,240,.18),transparent)}
.p3 .portal-grad-color{background:linear-gradient(135deg,rgba(232,184,64,.18),transparent)}
.portal:hover .portal-grad-color{opacity:1}
.portal-bg-images{
  position:absolute;inset:0;z-index:0;
}
.p1 .portal-bg{background-image:url('https://images.unsplash.com/photo-1497366216548-37526070297c?w=1000&q=80')}
.p2 .portal-bg{background-image:url('https://images.unsplash.com/photo-1434030216411-0b793f4b4173?w=1000&q=80')}
.p3 .portal-bg{background-image:url('https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1000&q=80')}
/* VERTICAL label (collapsed state) */
.portal-vert{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-90deg);font-family:var(--display);font-weight:800;font-size:.85rem;letter-spacing:.25em;text-transform:uppercase;color:rgba(238,243,255,.2);white-space:nowrap;z-index:10;pointer-events:none;transition:opacity .3s}
.portal:hover .portal-vert{opacity:0}
/* CONTENT */
.portal-content{position:absolute;bottom:0;left:0;right:0;padding:44px 36px;z-index:10}
.portal-num{font-family:var(--display);font-size:.62rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:8px;opacity:.7;transition:opacity .3s}
.portal:hover .portal-num{opacity:1}
.portal-num::before{content:'';width:22px;height:1px}
.p1 .portal-num{color:var(--teal)}.p1 .portal-num::before{background:var(--teal)}
.p2 .portal-num{color:var(--violet)}.p2 .portal-num::before{background:var(--violet)}
.p3 .portal-num{color:var(--gold)}.p3 .portal-num::before{background:var(--gold)}
.portal-title{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,2.5vw,2.2rem);letter-spacing:-.02em;line-height:1.1;margin-bottom:6px;color:var(--white);transform:translateY(4px);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.portal:hover .portal-title{transform:translateY(0)}
.portal-subtitle{font-size:.82rem;color:rgba(238,243,255,.5);font-weight:300;line-height:1.6;max-width:280px;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s cubic-bezier(.16,1,.3,1),opacity .4s .08s;margin-bottom:0}
.portal:hover .portal-subtitle{max-height:72px;opacity:1;margin-bottom:18px}
.portal-pills{display:flex;flex-wrap:wrap;gap:5px;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s .05s cubic-bezier(.16,1,.3,1),opacity .4s .12s;margin-bottom:0}
.portal:hover .portal-pills{max-height:50px;opacity:1;margin-bottom:18px}
.pp{font-size:.6rem;font-family:var(--display);font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:3px 9px;border-radius:20px;backdrop-filter:blur(8px)}
.p1 .pp{background:rgba(0,217,184,.15);border:1px solid rgba(0,217,184,.3);color:var(--teal)}
.p2 .pp{background:rgba(160,128,240,.15);border:1px solid rgba(160,128,240,.3);color:var(--violet)}
.p3 .pp{background:rgba(232,184,64,.15);border:1px solid rgba(232,184,64,.3);color:var(--gold)}
.portal-cta{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-weight:700;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;padding:11px 20px;border-radius:30px;border:1.5px solid;backdrop-filter:blur(8px);opacity:0;transform:translateY(6px);transition:all .4s cubic-bezier(.16,1,.3,1)}
.portal:hover .portal-cta{opacity:1;transform:translateY(0)}
.p1 .portal-cta{border-color:var(--teal);color:var(--teal);background:rgba(0,217,184,.1)}
.p1:hover .portal-cta{background:var(--teal);color:#020A08;box-shadow:0 0 28px rgba(0,217,184,.4)}
.p2 .portal-cta{border-color:var(--violet);color:var(--violet);background:rgba(160,128,240,.1)}
.p2:hover .portal-cta{background:var(--violet);color:#fff;box-shadow:0 0 28px rgba(160,128,240,.4)}
.p3 .portal-cta{border-color:var(--gold);color:var(--gold);background:rgba(232,184,64,.1)}
.p3:hover .portal-cta{background:var(--gold);color:#020A08;box-shadow:0 0 28px rgba(232,184,64,.35)}
.cta-arrow{transition:transform .3s}.portal:hover .cta-arrow{transform:translateX(4px)}
/* TOP BADGE */
.portal-badge{position:absolute;top:76px;left:36px;z-index:10;font-size:.6rem;font-family:var(--display);font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 11px;border-radius:20px;backdrop-filter:blur(10px);opacity:0;transform:translateY(-4px);transition:opacity .4s .1s,transform .4s .1s}
.portal:hover .portal-badge{opacity:1;transform:translateY(0)}
.p1 .portal-badge{background:rgba(0,217,184,.12);border:1px solid rgba(0,217,184,.28);color:var(--teal)}
.p2 .portal-badge{background:rgba(160,128,240,.12);border:1px solid rgba(160,128,240,.28);color:var(--violet)}
.p3 .portal-badge{background:rgba(232,184,64,.12);border:1px solid rgba(232,184,64,.28);color:var(--gold)}
/* WELCOME */
.welcome{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;text-align:center;pointer-events:none;transition:opacity .35s;animation:fadeIn .8s cubic-bezier(.16,1,.3,1) .7s both}
@keyframes fadeIn{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
.portals:hover .welcome{opacity:0}
.wt{font-family:var(--display);font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin-bottom:8px}
.wh{font-family:var(--display);font-weight:800;font-size:clamp(1rem,2vw,1.5rem);color:rgba(238,243,255,.5);letter-spacing:-.01em;margin:0}
@media(max-width:768px){
  html,body{overflow:auto}
  .portals{grid-template-columns:1fr;height:auto;min-height:100vh}
  .portal{height:38vh;min-height:260px}
  .portal-vert{display:none}
  .portal-subtitle,.portal-pills{max-height:60px;opacity:1;margin-bottom:14px}
  .portal-cta{opacity:1;transform:none}
  .welcome{display:none}
  .topbar{padding:14px 20px}
  .portal::after{top:auto;right:0;bottom:0;width:100%;height:1px}
}