:root{
  --bg:#000;
  --text:#fff;
  --muted:#8f8f8f;
  --line:rgba(255,255,255,.14);
  --line-strong:rgba(255,255,255,.32);
  --font:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --max:1380px;
}

*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{
  margin:0;
  min-height:100svh;
  color:var(--text);
  background:#000;
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
}
a,button{font:inherit}
a{color:inherit}
::selection{background:#fff;color:#000}

.portal-bg{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 82% 10%,rgba(255,255,255,.04),transparent 26rem),
    linear-gradient(180deg,#030303,#000 66%);
}
.portal-bg::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.22;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,#000,transparent 88%);
}

.portal-topbar{
  width:min(calc(100% - 64px),var(--max));
  height:92px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.portal-brand{
  display:flex;
  align-items:center;
  gap:16px;
  text-decoration:none;
}
.portal-mark{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid var(--line-strong);
  font-weight:600;
  letter-spacing:.03em;
}
.portal-breadcrumb{
  color:#7f7f7f;
  font-size:10px;
  font-weight:500;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.portal-home-link{
  color:#aaa;
  font-size:10px;
  letter-spacing:.16em;
  text-decoration:none;
  text-transform:uppercase;
}
.portal-home-link:hover{color:#fff}

.portal-shell{
  width:min(calc(100% - 64px),var(--max));
  margin:0 auto;
  padding:74px 0 100px;
}
.portal-hero{
  min-height:340px;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:70px;
  align-items:end;
  padding-bottom:72px;
  border-bottom:1px solid var(--line);
}
.portal-kicker{
  margin:0 0 16px;
  color:#777;
  font-size:10px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.portal-title{
  margin:0;
  font-size:clamp(82px,10vw,156px);
  line-height:.76;
  letter-spacing:.01em;
  font-weight:600;
  text-transform:uppercase;
}
.portal-title-outline{
  color:transparent;
  -webkit-text-stroke:1.4px rgba(255,255,255,.88);
}
.portal-intro{
  max-width:520px;
  margin:0 0 8px auto;
  color:#9a9a9a;
  font-size:16px;
  font-weight:500;
  line-height:1.65;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.portal-summary{
  display:flex;
  gap:34px;
  margin-top:26px;
}
.portal-summary div{
  min-width:100px;
  border-top:1px solid var(--line);
  padding-top:10px;
}
.portal-summary small,
.portal-summary strong{
  display:block;
  text-transform:uppercase;
}
.portal-summary small{
  color:#626262;
  font-size:8px;
  letter-spacing:.17em;
}
.portal-summary strong{
  margin-top:5px;
  color:#d2d2d2;
  font-size:10px;
  font-weight:500;
  letter-spacing:.10em;
}

.portal-section{
  padding-top:74px;
}
.portal-section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:28px;
}
.portal-section-label{
  margin:0;
  color:#777;
  font-size:10px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.portal-section-count{
  color:#555;
  font-size:9px;
  letter-spacing:.14em;
}

.app-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.app-card{
  min-height:235px;
  padding:22px;
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--line);
  background:rgba(5,5,5,.82);
  text-decoration:none;
  transition:transform .23s ease,border-color .23s ease,background .23s ease;
}
.app-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.022),transparent 42%);
}
.app-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.42);
  background:#080808;
}
.app-top{
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:flex-start;
  position:relative;
  z-index:2;
}
.app-icon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.16);
}
.app-icon svg{
  width:29px;
  height:29px;
  fill:none;
  stroke:#fff;
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.app-status{
  padding:6px 8px;
  border:1px solid rgba(255,255,255,.09);
  color:#757575;
  font-size:8px;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.app-copy{
  margin-top:auto;
  padding-top:44px;
  position:relative;
  z-index:2;
}
.app-copy h2{
  margin:0;
  font-size:30px;
  line-height:.96;
  font-weight:600;
  letter-spacing:.025em;
  text-transform:uppercase;
}
.app-copy p{
  max-width:360px;
  margin:11px 0 0;
  color:#858585;
  font-size:12px;
  font-weight:500;
  line-height:1.65;
  letter-spacing:.075em;
  text-transform:uppercase;
}
.app-arrow{
  position:absolute;
  right:20px;
  bottom:18px;
  z-index:2;
  color:#fff;
  font-size:16px;
  opacity:.48;
  transition:transform .2s ease,opacity .2s ease;
}
.app-card:hover .app-arrow{transform:translate(2px,-2px);opacity:1}

.portal-footer{
  width:min(calc(100% - 64px),var(--max));
  margin:0 auto;
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  border-top:1px solid var(--line);
  color:#595959;
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.portal-toast{
  position:fixed;
  z-index:50;
  left:50%;
  bottom:26px;
  transform:translate(-50%,18px);
  padding:11px 14px;
  border:1px solid rgba(255,255,255,.18);
  color:#d7d7d7;
  background:rgba(0,0,0,.94);
  font-size:11px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:0;
  visibility:hidden;
  transition:.2s ease;
}
.portal-toast.is-visible{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}

@media(max-width:980px){
  .portal-hero{grid-template-columns:1fr;gap:36px}
  .portal-intro{margin-left:0}
  .app-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  .portal-topbar,.portal-shell,.portal-footer{width:min(calc(100% - 30px),var(--max))}
  .portal-breadcrumb{display:none}
  .portal-shell{padding-top:54px}
  .portal-hero{min-height:0;padding-bottom:54px}
  .portal-title{font-size:clamp(70px,20vw,112px)}
  .portal-summary{flex-wrap:wrap;gap:18px}
  .app-grid{grid-template-columns:1fr}
  .app-card{min-height:210px}
  .portal-footer{padding:22px 0;align-items:flex-start;flex-direction:column}
}