:root {

  --cream:
    #f4f1ea;

  --surface:
    #fbfaf7;

  --white:
    #ffffff;

  --ink:
    #122029;

  --ink-soft:
    #71808a;

  --line:
    rgba(20, 35, 45, .09);

  --fortinet:
    #d71920;

  --blue:
    #2868e8;

  --green:
    #168c69;

  --amber:
    #d48618;

  --violet:
    #704aea;

  --login:
    #0c1b25;

  --login-card:
    #15232e;

  --shadow:
    0 28px 75px
    rgba(25, 34, 41, .075);

}


* {
  box-sizing:
    border-box;
}


html,
body {
  margin:
    0;

  min-height:
    100%;
}


body {

  min-height:
    100vh;

  background:
    var(--login);

  color:
    var(--ink);

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  -webkit-font-smoothing:
    antialiased;

}


body.portal-active {

  background:
    radial-gradient(
      circle at 80% -10%,
      rgba(40,104,232,.085),
      transparent 31%
    ),
    radial-gradient(
      circle at -5% 25%,
      rgba(215,25,32,.045),
      transparent 27%
    ),
    var(--cream);

}


button,
input {
  font:
    inherit;
}


button {
  cursor:
    pointer;
}


a {
  color:
    inherit;

  text-decoration:
    none;
}


.hidden {
  display:
    none !important;
}


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


/*
 * ======================================================
 * LOGIN
 * ======================================================
 */

.login-view {

  min-height:
    100vh;

  display:
    grid;

  place-items:
    center;

  padding:
    55px 20px;

  background:
    radial-gradient(
      circle at 82% 24%,
      rgba(255,255,255,.035),
      transparent 32%
    ),
    #0b1a24;

}


.login-card {

  width:
    min(600px, 100%);

  padding:
    65px 64px 55px;

  border:
    1px solid rgba(255,255,255,.19);

  background:
    rgba(21,35,46,.72);

  backdrop-filter:
    blur(16px);

  color:
    white;

}


.eyp04-mark {

  width:
    72px;

  height:
    72px;

  display:
    grid;

  place-items:
    center;

  background:
    white;

  color:
    #15222b;

  font-size:
    18px;

  font-weight:
    950;

  letter-spacing:
    -.04em;

}


.eyebrow {

  margin-top:
    55px;

  color:
    #cf953d;

  font-size:
    11px;

  font-weight:
    900;

  letter-spacing:
    .18em;

}


.login-card h1 {

  margin:
    14px 0 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(60px, 6vw, 82px);

  line-height:
    .92;

  font-weight:
    500;

  letter-spacing:
    -.055em;

}


.intro {

  max-width:
    470px;

  margin:
    38px 0 0;

  color:
    rgba(255,255,255,.62);

  font-size:
    14px;

  line-height:
    1.65;

}


#login-form {

  margin-top:
    45px;

}


#login-form label {

  display:
    block;

  margin-top:
    23px;

  color:
    rgba(255,255,255,.64);

  font-size:
    9px;

  font-weight:
    900;

  letter-spacing:
    .15em;

  text-transform:
    uppercase;

}


#login-form input {

  width:
    100%;

  height:
    62px;

  margin-top:
    10px;

  padding:
    0 18px;

  outline:
    none;

  border:
    1px solid rgba(255,255,255,.28);

  background:
    rgba(255,255,255,.045);

  color:
    white;

  transition:
    border-color .3s ease,
    background .3s ease;

}


#login-form input:focus {

  border-color:
    #c48b38;

  background:
    rgba(255,255,255,.065);

}


.error-message {

  min-height:
    38px;

  padding-top:
    14px;

  color:
    #ff9b96;

  font-size:
    11px;

}


.primary-button {

  width:
    100%;

  height:
    64px;

  border:
    0;

  background:
    white;

  color:
    #101b22;

  font-size:
    10px;

  font-weight:
    950;

  letter-spacing:
    .18em;

  text-transform:
    uppercase;

  transition:
    transform .25s ease,
    background .25s ease;

}


.primary-button:hover {

  transform:
    translateY(-2px);

  background:
    #f4f4f2;

}


.login-footer {

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  margin-top:
    48px;

}


.login-footer span {

  color:
    rgba(255,255,255,.28);

  font-size:
    8px;

  font-weight:
    950;

  letter-spacing:
    .16em;

}


.login-footer img {

  width:
    85px;

  filter:
    brightness(0)
    invert(1);

  opacity:
    .78;

}


/*
 * ======================================================
 * PORTAL
 * ======================================================
 */

.portal-view {

  min-height:
    100vh;

}


.topbar {

  min-height:
    88px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;

  padding:
    0 max(
      30px,
      calc((100vw - 1440px) / 2)
    );

  border-bottom:
    1px solid var(--line);

  background:
    rgba(248,246,240,.80);

  backdrop-filter:
    blur(18px);

  position:
    sticky;

  top:
    0;

  z-index:
    300;

}


.brand-area {

  display:
    flex;

  align-items:
    center;

  gap:
    17px;

}


.portal-eyp04 {

  height:
    45px;

  display:
    grid;

  place-items:
    center;

  padding:
    0 16px;

  border-radius:
    13px;

  background:
    var(--ink);

  color:
    white;

  font-size:
    14px;

  font-weight:
    950;

  letter-spacing:
    -.03em;

}


.brand-copy {

  display:
    grid;

  gap:
    4px;

}


.brand-copy strong {

  font-size:
    9px;

  font-weight:
    950;

  letter-spacing:
    .15em;

}


.brand-copy span {

  color:
    #849097;

  font-size:
    9px;

  font-weight:
    650;

}


.topbar-right {

  display:
    flex;

  align-items:
    center;

  gap:
    28px;

}


.powered {

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

}


.powered span {

  color:
    #8d989e;

  font-size:
    7px;

  font-weight:
    950;

  letter-spacing:
    .15em;

}


.powered img {

  width:
    91px;

  height:
    auto;

}


.user-area {

  display:
    flex;

  align-items:
    center;

  gap:
    15px;

  padding-left:
    23px;

  border-left:
    1px solid var(--line);

}


.user-copy {

  display:
    grid;

  gap:
    2px;

  text-align:
    right;

}


.user-copy strong {

  font-size:
    10px;

  font-weight:
    900;

}


.user-copy span {

  color:
    #8b979e;

  font-size:
    7px;

  font-weight:
    900;

  letter-spacing:
    .12em;

}


.logout-button {

  height:
    36px;

  padding:
    0 13px;

  border:
    1px solid var(--line);

  border-radius:
    10px;

  background:
    rgba(255,255,255,.58);

  color:
    #63717a;

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    .08em;

}


.portal-content {

  width:
    min(
      1440px,
      calc(100% - 70px)
    );

  margin:
    0 auto;

  padding-bottom:
    55px;

}


/*
 * ======================================================
 * HERO
 * ======================================================
 */

.hero {

  min-height:
    410px;

  display:
    grid;

  grid-template-columns:
    minmax(0,1fr)
    390px;

  align-items:
    center;

  gap:
    70px;

  padding:
    58px 0 53px;

}


.hero-kicker {

  color:
    var(--fortinet);

  font-size:
    8px;

  font-weight:
    950;

  letter-spacing:
    .17em;

}


.hero h2 {

  max-width:
    860px;

  margin:
    14px 0 0;

  font-size:
    clamp(
      45px,
      5vw,
      72px
    );

  line-height:
    .96;

  font-weight:
    950;

  letter-spacing:
    -.058em;

}


.hero h2 span {

  color:
    #7c888f;

}


.hero p {

  max-width:
    710px;

  margin:
    25px 0 0;

  color:
    var(--ink-soft);

  font-size:
    14px;

  line-height:
    1.65;

}


.hero-status {

  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  margin-top:
    30px;

}


.hero-status > div {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

}


.hero-status i {

  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    var(--green);

  box-shadow:
    0 0 0 6px
    rgba(22,140,105,.08);

}


.hero-status span,
.hero-status small {

  color:
    #718089;

  font-size:
    7px;

  font-weight:
    950;

  letter-spacing:
    .13em;

}


.hero-status-separator {

  width:
    1px;

  height:
    19px;

  background:
    var(--line);

}


.hero-visual {

  position:
    relative;

  width:
    320px;

  height:
    320px;

  display:
    grid;

  place-items:
    center;

  justify-self:
    center;

}


.orbit {

  position:
    absolute;

  border-radius:
    50%;

  border:
    1px solid
    rgba(40,104,232,.12);

}


.orbit-a {
  inset:
    7px;
}


.orbit-b {

  inset:
    46px;

  border-color:
    rgba(215,25,32,.11);

}


.orbit-c {

  inset:
    84px;

  border-color:
    rgba(22,140,105,.10);

}


.hero-core {

  width:
    128px;

  height:
    128px;

  display:
    grid;

  align-content:
    center;

  justify-items:
    center;

  border-radius:
    38px;

  background:
    linear-gradient(
      145deg,
      #263943,
      #101a1f
    );

  color:
    white;

  box-shadow:
    0 27px 60px
    rgba(15,25,30,.18);

}


.hero-core small {

  color:
    rgba(255,255,255,.48);

  font-size:
    6px;

  font-weight:
    950;

  letter-spacing:
    .17em;

}


.hero-core strong {

  margin-top:
    4px;

  font-size:
    26px;

  font-weight:
    950;

  letter-spacing:
    -.06em;

}


.orbit-node {

  position:
    absolute;

  width:
    10px;

  height:
    10px;

  border-radius:
    50%;

}


.node-a {

  right:
    42px;

  top:
    54px;

  background:
    var(--blue);

  box-shadow:
    0 0 0 7px
    rgba(40,104,232,.07);

}


.node-b {

  left:
    55px;

  bottom:
    51px;

  background:
    var(--fortinet);

  box-shadow:
    0 0 0 7px
    rgba(215,25,32,.06);

}


.node-c {

  right:
    76px;

  bottom:
    28px;

  background:
    var(--green);

  box-shadow:
    0 0 0 7px
    rgba(22,140,105,.06);

}


/*
 * ======================================================
 * GROUPS
 * ======================================================
 */

.experience-group {

  padding:
    34px 0 43px;

  border-top:
    1px solid var(--line);

}


.group-header {

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    30px;

  margin-bottom:
    23px;

}


.group-title {

  display:
    flex;

  align-items:
    center;

  gap:
    14px;

}


.group-number {

  width:
    39px;

  height:
    39px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    12px;

  font-size:
    9px;

  font-weight:
    950;

}


.group-number.blue {

  background:
    rgba(40,104,232,.07);

  color:
    var(--blue);

}


.group-number.red {

  background:
    rgba(215,25,32,.06);

  color:
    var(--fortinet);

}


.group-number.amber {

  background:
    rgba(212,134,24,.09);

  color:
    var(--amber);

}


.group-title small {

  color:
    #87939a;

  font-size:
    7px;

  font-weight:
    950;

  letter-spacing:
    .16em;

}


.group-title h3 {

  margin:
    4px 0 0;

  font-size:
    21px;

  font-weight:
    950;

  letter-spacing:
    -.035em;

}


.group-header > p {

  max-width:
    430px;

  margin:
    0;

  color:
    #89949a;

  font-size:
    9px;

  line-height:
    1.5;

  text-align:
    right;

}


/*
 * ======================================================
 * CARDS
 * ======================================================
 */

.cards-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:
    18px;

}


.launch-card {

  min-height:
    315px;

  display:
    flex;

  flex-direction:
    column;

  padding:
    24px;

  border:
    1px solid var(--line);

  border-radius:
    28px;

  background:
    rgba(255,255,255,.70);

  box-shadow:
    0 13px 35px
    rgba(23,35,43,.03);

  transition:
    transform .45s
    cubic-bezier(.16,1,.3,1),
    box-shadow .45s ease,
    border-color .45s ease,
    background .45s ease;

}


.launch-card:hover {

  transform:
    translateY(-6px);

  border-color:
    rgba(40,104,232,.15);

  background:
    rgba(255,255,255,.95);

  box-shadow:
    var(--shadow);

}


.oneai-card {

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.93),
      rgba(246,249,250,.77)
    );

}


.card-head {

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

}


.oneai-icon {

  width:
    68px;

  height:
    68px;

  display:
    grid;

  align-content:
    center;

  justify-items:
    center;

  border-radius:
    20px;

  background:
    linear-gradient(
      145deg,
      #243741,
      #0e181d
    );

  color:
    white;

  box-shadow:
    0 16px 31px
    rgba(13,23,29,.15);

}


.oneai-icon small {

  color:
    rgba(255,255,255,.49);

  font-size:
    5px;

  font-weight:
    950;

  letter-spacing:
    .17em;

}


.oneai-icon strong {

  margin-top:
    2px;

  font-size:
    18px;

  font-weight:
    950;

  letter-spacing:
    -.055em;

}


.product-icon {

  width:
    68px;

  height:
    68px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    20px;

}


.product-icon svg {

  width:
    37px;

  height:
    37px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    2.4;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

}


.files-icon {

  color:
    var(--blue);

  background:
    rgba(40,104,232,.065);

}


.remote-icon {

  color:
    var(--violet);

  background:
    rgba(112,74,234,.065);

}


.badge {

  padding:
    8px 10px;

  border-radius:
    999px;

  font-size:
    6.5px;

  font-weight:
    950;

  letter-spacing:
    .13em;

}


.badge.corporate {

  color:
    var(--green);

  background:
    rgba(22,140,105,.07);

}


.badge.live {

  color:
    var(--fortinet);

  background:
    rgba(215,25,32,.06);

}


.badge.presenter {

  color:
    var(--violet);

  background:
    rgba(112,74,234,.07);

}


.architecture-icon {

  position:
    relative;

  width:
    68px;

  height:
    68px;

  border-radius:
    20px;

  background:
    rgba(215,25,32,.045);

}


.architecture-node {

  position:
    absolute;

  z-index:
    3;

  width:
    13px;

  height:
    13px;

  border-radius:
    50%;

}


.node-red {

  left:
    13px;

  top:
    15px;

  background:
    var(--fortinet);

  box-shadow:
    0 0 0 6px
    rgba(215,25,32,.06);

}


.node-blue {

  right:
    13px;

  top:
    26px;

  background:
    var(--blue);

  box-shadow:
    0 0 0 6px
    rgba(40,104,232,.06);

}


.node-green {

  left:
    28px;

  bottom:
    11px;

  background:
    var(--green);

  box-shadow:
    0 0 0 6px
    rgba(22,140,105,.06);

}


.architecture-line {

  position:
    absolute;

  z-index:
    2;

  height:
    1px;

  background:
    rgba(80,98,109,.24);

  transform-origin:
    left center;

}


.line-one {

  left:
    21px;

  top:
    23px;

  width:
    33px;

  transform:
    rotate(20deg);

}


.line-two {

  left:
    34px;

  top:
    37px;

  width:
    26px;

  transform:
    rotate(118deg);

}


.card-body {

  margin-top:
    33px;

}


.card-kicker {

  color:
    #89949a;

  font-size:
    6.5px;

  font-weight:
    950;

  letter-spacing:
    .16em;

}


.card-body h4 {

  margin:
    7px 0 0;

  font-size:
    29px;

  font-weight:
    950;

  letter-spacing:
    -.05em;

}


.card-body p {

  max-width:
    500px;

  margin:
    12px 0 0;

  color:
    var(--ink-soft);

  font-size:
    10px;

  line-height:
    1.58;

}


.card-footer {

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    18px;

  margin-top:
    auto;

  padding-top:
    28px;

}


.card-footer > span {

  color:
    #909a9f;

  font-size:
    7.5px;

  font-weight:
    700;

}


.card-footer strong {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  color:
    var(--ink);

  font-size:
    7.5px;

  font-weight:
    950;

  letter-spacing:
    .10em;

}


.card-footer i {

  font-size:
    15px;

  font-style:
    normal;

  transition:
    transform .35s ease;

}


.launch-card:hover
.card-footer i {

  transform:
    translate(
      3px,
      -2px
    );

}


/*
 * ======================================================
 * EXTERNAL
 * ======================================================
 */

.external-card {

  min-height:
    155px;

  display:
    grid;

  grid-template-columns:
    68px
    minmax(0,1.3fr)
    minmax(240px,.85fr)
    auto;

  align-items:
    center;

  gap:
    25px;

  padding:
    24px 27px;

  border:
    1px solid
    rgba(212,134,24,.18);

  border-radius:
    27px;

  background:
    linear-gradient(
      135deg,
      rgba(255,248,233,.88),
      rgba(255,255,255,.70)
    );

  transition:
    transform .45s
    cubic-bezier(.16,1,.3,1),
    box-shadow .45s ease,
    border-color .45s ease;

}


.external-card:hover {

  transform:
    translateY(-5px);

  border-color:
    rgba(212,134,24,.34);

  box-shadow:
    0 25px 65px
    rgba(118,76,14,.08);

}


.external-alert {

  width:
    57px;

  height:
    57px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    18px;

  background:
    var(--amber);

  color:
    white;

  font-size:
    24px;

  font-weight:
    950;

  box-shadow:
    0 14px 29px
    rgba(212,134,24,.18);

}


.external-main > span {

  color:
    var(--amber);

  font-size:
    6.5px;

  font-weight:
    950;

  letter-spacing:
    .15em;

}


.external-main h4 {

  margin:
    4px 0 0;

  font-size:
    24px;

  font-weight:
    950;

  letter-spacing:
    -.045em;

}


.external-main p {

  max-width:
    540px;

  margin:
    7px 0 0;

  color:
    #7f898f;

  font-size:
    9px;

  line-height:
    1.5;

}


.external-meta {

  padding-left:
    24px;

  border-left:
    1px solid
    rgba(212,134,24,.14);

}


.external-meta small {

  display:
    block;

  color:
    #a19786;

  font-size:
    6px;

  font-weight:
    950;

  letter-spacing:
    .14em;

}


.external-meta strong {

  display:
    block;

  margin-top:
    6px;

  color:
    #544b3f;

  font-size:
    9px;

}


.external-open {

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  color:
    #695440;

  font-size:
    7px;

  font-weight:
    950;

  letter-spacing:
    .10em;

}


.external-open span {

  font-size:
    16px;

}


/*
 * ======================================================
 * FOOTER
 * ======================================================
 */

.portal-footer {

  min-height:
    96px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    25px;

  margin-top:
    24px;

  border-top:
    1px solid var(--line);

}


.portal-footer > div {

  display:
    flex;

  align-items:
    baseline;

  gap:
    9px;

}


.portal-footer strong {

  font-size:
    11px;

  font-weight:
    950;

}


.portal-footer span,
.portal-footer p {

  color:
    #929ca1;

  font-size:
    6.5px;

  font-weight:
    900;

  letter-spacing:
    .13em;

}


/*
 * ======================================================
 * RESPONSIVE
 * ======================================================
 */

@media (
  max-width: 1050px
) {

  .portal-content {

    width:
      calc(100% - 40px);

  }


  .hero {

    grid-template-columns:
      1fr;

    min-height:
      auto;

  }


  .hero-visual {

    display:
      none;

  }


  .powered {

    display:
      none;

  }


  .external-card {

    grid-template-columns:
      60px
      1fr;

  }


  .external-meta,
  .external-open {

    grid-column:
      2;

  }


  .external-meta {

    padding-left:
      0;

    border-left:
      0;

  }

}


@media (
  max-width: 760px
) {

  .topbar {

    min-height:
      76px;

    padding:
      0 15px;

  }


  .brand-copy span {

    display:
      none;

  }


  .brand-copy strong {

    font-size:
      7px;

  }


  .user-copy {

    display:
      none;

  }


  .user-area {

    padding-left:
      0;

    border-left:
      0;

  }


  .portal-content {

    width:
      calc(100% - 28px);

  }


  .hero {

    padding:
      45px 0 37px;

  }


  .hero h2 {

    font-size:
      42px;

  }


  .hero p {

    font-size:
      12px;

  }


  .group-header {

    align-items:
      flex-start;

  }


  .group-header > p {

    display:
      none;

  }


  .cards-grid {

    grid-template-columns:
      1fr;

  }


  .launch-card {

    min-height:
      290px;

  }


  .external-card {

    grid-template-columns:
      50px
      1fr;

    gap:
      17px;

    padding:
      20px;

  }


  .external-alert {

    width:
      48px;

    height:
      48px;

  }


  .external-meta,
  .external-open {

    grid-column:
      1 / -1;

  }


  .portal-footer {

    align-items:
      flex-start;

    flex-direction:
      column;

    justify-content:
      center;

    gap:
      7px;

  }

}