/* =========================================================
   JAYAN LABS
   GLOBAL FROSTED GLASS STYLESHEET
   HOME + PROJECTS + MIST TAB
========================================================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
  min-height: 100%;
  background: #080a0f;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

  color: #e9eef7;

  background:
    radial-gradient(
      circle at 50% -12%,
      rgba(78, 63, 150, 0.22),
      transparent 34%
    ),
    radial-gradient(
      circle at 5% 42%,
      rgba(55, 110, 180, 0.065),
      transparent 28%
    ),
    radial-gradient(
      circle at 95% 72%,
      rgba(170, 70, 45, 0.05),
      transparent 30%
    ),
    #080a0f;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html,
body {
  width: 100%;
}

body.is-transitioning {
  pointer-events: none;
}

body.page-exit {
  opacity: 0;
  transform: translateY(-5px) scale(0.998);
}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid rgba(125, 168, 255, 0.65);
  outline-offset: 3px;
}

::selection {
  background: rgba(117, 145, 255, 0.28);
  color: #fff;
}


/* =========================================================
   BACKGROUND
========================================================= */

.background-layer {
  position: fixed;
  inset: 0;
  z-index: -20;
  pointer-events: none;
}

.background-layer::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      ellipse at center,
      transparent 38%,
      rgba(0, 0, 0, 0.28) 100%
    );
}

.ambient {
  position: fixed;

  width: 320px;
  height: 320px;

  border-radius: 50%;

  filter: blur(105px);

  opacity: 0.065;

  pointer-events: none;

  z-index: -10;

  animation:
    ambientFloat
    18s
    ease-in-out
    infinite
    alternate;
}

.ambient-one {
  top: 5%;
  left: -130px;
  background: #4285f4;
}

.ambient-two {
  top: 35%;
  right: -150px;
  background: #9b51e0;
  animation-delay: -6s;
}

.ambient-three {
  bottom: -150px;
  left: 42%;
  background: #ea4335;
  animation-delay: -11s;
}

@keyframes ambientFloat {
  from {
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }

  to {
    transform:
      translate3d(26px, -28px, 0)
      scale(1.08);
  }
}

.grain {
  position: fixed;
  inset: 0;

  z-index: 100;

  pointer-events: none;

  opacity: 0.014;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.8'/%3E%3C/svg%3E");
}


/* =========================================================
   HEADER
========================================================= */

.site-header {
  position: fixed;

  top: 0;
  left: 0;
  right: 0;

  z-index: 10000;

  padding:
    15px 24px;
}

.nav-glass {
  position: relative;

  width:
    min(1180px, 100%);

  height:
    62px;

  margin:
    0 auto;

  padding:
    7px 9px 7px 14px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  border:
    1px solid rgba(255, 255, 255, 0.085);

  border-radius:
    20px;

  background:
    linear-gradient(
      145deg,
      rgba(24, 29, 40, 0.84),
      rgba(10, 14, 21, 0.76)
    );

  backdrop-filter:
    blur(30px)
    saturate(155%);

  -webkit-backdrop-filter:
    blur(30px)
    saturate(155%);

  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);

  overflow:
    visible;

  animation:
    headerIn
    0.7s
    cubic-bezier(0.2, 0.8, 0.2, 1)
    both;
}

.nav-glass::before {
  content: "";

  position: absolute;

  top: 0;
  left: 8%;

  width: 84%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.26),
      transparent
    );
}

.nav-glass::after {
  content: "";

  position: absolute;

  top: -65px;
  left: -80px;

  width: 220px;
  height: 80px;

  border-radius: 50%;

  background:
    rgba(95, 145, 255, 0.065);

  filter:
    blur(25px);

  pointer-events:
    none;

  animation:
    navReflection
    10s
    ease-in-out
    infinite;
}

@keyframes headerIn {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes navReflection {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.2;
  }

  50% {
    transform: translateX(720px);
    opacity: 0.7;
  }
}


/* =========================================================
   BRAND
========================================================= */

.brand {
  display: flex;
  align-items: center;
  gap: 9px;

  flex-shrink: 0;

  color: #f1f5fb;

  font-size: 15px;
  font-weight: 650;

  letter-spacing: -0.4px;

  transition:
    transform 0.25s ease;
}

.brand:hover {
  transform:
    translateY(-1px);
}

.brand-orb {
  position: relative;

  width: 25px;
  height: 25px;

  display: flex;

  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  border-radius: 9px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.13),
      rgba(255, 255, 255, 0.025)
    );

  border:
    1px solid rgba(255, 255, 255, 0.09);

  overflow:
    hidden;
}

.brand-orb.small {
  width: 22px;
  height: 22px;
}

.brand-orb::before {
  content: "";

  position: absolute;

  width: 12px;
  height: 12px;

  border-radius: 50%;

  background:
    conic-gradient(
      #4285f4,
      #9b51e0,
      #ea4335,
      #fbbc05,
      #4285f4
    );

  filter:
    blur(3px);

  animation:
    orbSpin
    5s
    linear
    infinite;
}

.brand-orb span {
  position: relative;
  z-index: 2;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.88);

  box-shadow:
    0 0 10px rgba(170, 200, 255, 0.75);

  animation:
    orbPulse
    2.4s
    ease-in-out
    infinite;
}

@keyframes orbSpin {
  to {
    transform:
      rotate(360deg);
  }
}

@keyframes orbPulse {
  0%,
  100% {
    transform:
      scale(0.9);
    opacity:
      0.7;
  }

  50% {
    transform:
      scale(1.17);
    opacity:
      1;
  }
}


/* =========================================================
   NAV
========================================================= */

.main-nav {
  display:
    flex;

  align-items:
    center;

  gap:
    4px;

  margin-left:
    auto;

  margin-right:
    18px;
}

.nav-link {
  position:
    relative;

  padding:
    9px 12px;

  border-radius:
    10px;

  color:
    #8b98ab;

  font-size:
    11px;

  font-weight:
    550;

  transition:
    color 0.25s ease,
    background 0.25s ease,
    transform 0.25s ease;
}

.nav-link:hover {
  color:
    #edf2fa;

  background:
    rgba(255, 255, 255, 0.045);

  transform:
    translateY(-2px);
}

.nav-link.active {
  color:
    #edf2fa;

  background:
    rgba(255, 255, 255, 0.05);
}

.nav-link.active::after {
  content:
    "";

  position:
    absolute;

  left:
    50%;

  bottom:
    3px;

  width:
    3px;

  height:
    3px;

  transform:
    translateX(-50%);

  border-radius:
    50%;

  background:
    #8ab4ff;

  box-shadow:
    0 0 8px rgba(138, 180, 255, 0.7);
}


/* =========================================================
   NAV ACTIONS
========================================================= */

.nav-actions {
  position:
    relative;

  z-index:
    10001;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}

.nav-icon-btn {
  display:
    none !important;
}

.nav-cta {
  display:
    none !important;
}

.mobile-menu-btn {
  display:
    none;

  width:
    35px;

  height:
    35px;

  border:
    1px solid rgba(255, 255, 255, 0.07);

  border-radius:
    11px;

  background:
    rgba(255, 255, 255, 0.035);

  color:
    #c9d3e2;

  cursor:
    pointer;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.25s ease;
}

.mobile-menu-btn:hover {
  background:
    rgba(255, 255, 255, 0.07);

  border-color:
    rgba(255, 255, 255, 0.13);

  transform:
    translateY(-1px);
}

.mobile-menu-btn span {
  display:
    block;

  width:
    14px;

  height:
    1.5px;

  margin:
    3px auto;

  border-radius:
    99px;

  background:
    currentColor;
}


/* =========================================================
   HERO
   FIXED CENTERED LAYOUT
========================================================= */

.hero-section {
  position:
    relative;

  width:
    min(
      1180px,
      calc(100% - 48px)
    );

  min-height:
    100vh;

  margin:
    0 auto;

  padding:
    155px 0 82px;

  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1.08fr
    )
    minmax(
      400px,
      0.92fr
    );

  align-items:
    center;

  column-gap:
    clamp(
      45px,
      5vw,
      80px
    );

  overflow:
    visible;
}

.hero-content {
  position:
    relative;

  z-index:
    2;

  width:
    100%;

  max-width:
    680px;

  min-width:
    0;

  padding:
    8px 0;

  animation:
    heroIn
    0.8s
    cubic-bezier(
      0.2,
      0.8,
      0.2,
      1
    )
    both;
}

@keyframes heroIn {
  from {
    opacity:
      0;

    transform:
      translateY(20px);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0);
  }
}


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

.hero-orbit {
  position:
    absolute;

  border:
    1px solid rgba(
      130,
      160,
      255,
      0.045
    );

  border-radius:
    50%;

  pointer-events:
    none;

  z-index:
    0;

  animation:
    orbitFloat
    11s
    ease-in-out
    infinite;
}

.orbit-a {
  width:
    560px;

  height:
    560px;

  left:
    -460px;

  top:
    20%;
}

.orbit-b {
  width:
    480px;

  height:
    480px;

  right:
    -370px;

  bottom:
    5%;

  animation-delay:
    -5s;
}

@keyframes orbitFloat {
  0%,
  100% {
    transform:
      rotate(0)
      scale(1);

    opacity:
      0.5;
  }

  50% {
    transform:
      rotate(8deg)
      scale(1.04);

    opacity:
      0.9;
  }
}


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

.eyebrow {
  width:
    fit-content;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  margin-bottom:
    21px;

  padding:
    6px 9px;

  border:
    1px solid rgba(
      255,
      255,
      255,
      0.07
    );

  border-radius:
    999px;

  background:
    rgba(
      255,
      255,
      255,
      0.025
    );

  color:
    #7d8ba2;

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    1.5px;
}

.eyebrow::before {
  content:
    "";

  width:
    5px;

  height:
    5px;

  flex:
    0 0 5px;

  border-radius:
    50%;

  background:
    #7da8ff;

  box-shadow:
    0 0 9px rgba(
      125,
      168,
      255,
      0.8
    );
}

.hero-title {
  display:
    block;

  width:
    100%;

  max-width:
    680px;

  margin:
    0 0 25px;

  padding:
    0;

  color:
    #f2f5fb;

  font-size:
    clamp(
      52px,
      5.35vw,
      72px
    );

  line-height:
    1.04;

  font-weight:
    620;

  letter-spacing:
    -1.3px;

  word-spacing:
    0;

  white-space:
    normal;

  overflow:
    visible;

  overflow-wrap:
    normal;

  word-break:
    normal;

  font-kerning:
    normal;

  font-variant-ligatures:
    normal;

  text-rendering:
    optimizeLegibility;
}

.hero-title span {
  display:
    block;

  width:
    100%;

  margin-top:
    4px;

  white-space:
    nowrap;

  line-height:
    1.04;

  letter-spacing:
    -1.3px;

  background:
    linear-gradient(
      120deg,
      #f3f5fa,
      #9db9ff,
      #b28cff,
      #edf0f7
    );

  background-size:
    180% 100%;

  -webkit-background-clip:
    text;

  background-clip:
    text;

  color:
    transparent;

  animation:
    titleShimmer
    8s
    ease-in-out
    infinite;
}

@keyframes titleShimmer {
  0%,
  100% {
    background-position:
      0 50%;
  }

  50% {
    background-position:
      100% 50%;
  }
}

.hero-description {
  display:
    block;

  width:
    100%;

  max-width:
    570px;

  margin:
    0 0 28px;

  color:
    #7e8ca2;

  font-size:
    13px;

  line-height:
    1.8;

  overflow:
    visible;

  overflow-wrap:
    normal;

  word-break:
    normal;
}

.hero-actions {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    10px;

  margin-bottom:
    18px;
}

.hero-status {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  color:
    #526077;

  font-size:
    9px;
}

.status-pulse {
  width:
    6px;

  height:
    6px;

  flex:
    0 0 6px;

  border-radius:
    50%;

  background:
    #39c76a;

  box-shadow:
    0 0 9px rgba(
      57,
      199,
      106,
      0.65
    );

  animation:
    statusPulse
    1.7s
    ease-in-out
    infinite;
}

@keyframes statusPulse {
  0%,
  100% {
    transform:
      scale(0.85);

    opacity:
      0.65;
  }

  50% {
    transform:
      scale(1.15);

    opacity:
      1;
  }
}

.hero-status-dot {
  padding:
    4px 6px;

  border:
    1px solid rgba(
      57,
      199,
      106,
      0.12
    );

  border-radius:
    999px;

  color:
    #79d79a;

  background:
    rgba(
      57,
      199,
      106,
      0.05
    );

  font-size:
    6px;

  font-weight:
    700;

  letter-spacing:
    0.8px;
}


/* =========================================================
   HERO SPOTLIGHT CARD
========================================================= */

.hero-spotlight {
  position:
    relative;

  z-index:
    2;

  width:
    100%;

  max-width:
    455px;

  margin:
    0 auto;

  padding:
    27px;

  border:
    1px solid rgba(
      255,
      255,
      255,
      0.085
    );

  border-radius:
    26px;

  background:
    linear-gradient(
      145deg,
      rgba(
        255,
        255,
        255,
        0.055
      ),
      rgba(
        255,
        255,
        255,
        0.012
      )
    );

  box-shadow:
    inset 0 1px 0 rgba(
      255,
      255,
      255,
      0.065
    ),
    0 24px 65px rgba(
      0,
      0,
      0,
      0.22
    );

  overflow:
    hidden;

  animation:
    spotlightFloat
    7s
    ease-in-out
    infinite;
}

.hero-spotlight::after {
  content:
    "";

  position:
    absolute;

  inset:
    auto -20% -55% 20%;

  height:
    170px;

  background:
    radial-gradient(
      circle,
      rgba(
        92,
        126,
        255,
        0.09
      ),
      transparent 70%
    );

  filter:
    blur(20px);

  pointer-events:
    none;
}

@keyframes spotlightFloat {
  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-7px);
  }
}

.spotlight-glow {
  position:
    absolute;

  width:
    250px;

  height:
    180px;

  right:
    -90px;

  top:
    -120px;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(
        91,
        132,
        255,
        0.18
      ),
      transparent 68%
    );

  filter:
    blur(25px);

  pointer-events:
    none;

  animation:
    spotlightGlow
    5s
    ease-in-out
    infinite
    alternate;
}

@keyframes spotlightGlow {
  from {
    transform:
      scale(0.9);

    opacity:
      0.45;
  }

  to {
    transform:
      scale(1.1);

    opacity:
      1;
  }
}

.spotlight-topline {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;
}

.spotlight-live {
  padding:
    5px 8px;

  border:
    1px solid rgba(
      52,
      211,
      153,
      0.10
    );

  border-radius:
    999px;

  background:
    rgba(
      52,
      211,
      153,
      0.055
    );

  color:
    #82d3a2;

  font-size:
    7px;

  font-weight:
    700;

  letter-spacing:
    0.8px;
}

.spotlight-icon {
  width:
    54px;

  height:
    54px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin:
    22px 0 17px;

  border:
    1px solid rgba(
      255,
      255,
      255,
      0.075
    );

  border-radius:
    17px;

  background:
    rgba(
      255,
      255,
      255,
      0.035
    );

  box-shadow:
    0 12px 25px rgba(
      0,
      0,
      0,
      0.18
    );
}

.spotlight-icon .brand-orb {
  width:
    31px;

  height:
    31px;
}

.spotlight-icon .brand-orb::before {
  width:
    15px;

  height:
    15px;
}

.spotlight-icon .brand-orb span {
  width:
    8px;

  height:
    8px;
}

.hero-spotlight h2 {
  position:
    relative;

  max-width:
    365px;

  color:
    #edf2f9;

  font-size:
    clamp(
      27px,
      3vw,
      34px
    );

  line-height:
    1.08;

  letter-spacing:
    -1.1px;

  word-break:
    normal;

  overflow-wrap:
    normal;
}

.hero-spotlight p {
  position:
    relative;

  margin-top:
    13px;

  color:
    #728096;

  font-size:
    10px;

  line-height:
    1.8;
}

.spotlight-points {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  margin-top:
    22px;
}

.spotlight-point {
  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  padding:
    10px 11px;

  border:
    1px solid rgba(
      255,
      255,
      255,
      0.045
    );

  border-radius:
    13px;

  background:
    rgba(
      255,
      255,
      255,
      0.018
    );

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease;
}

.spotlight-point:hover {
  transform:
    translateX(4px);

  background:
    rgba(
      255,
      255,
      255,
      0.04
    );

  border-color:
    rgba(
      255,
      255,
      255,
      0.09
    );
}

.spotlight-point-number {
  color:
    #7083aa;

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    1px;

  flex:
    0 0 auto;
}

.spotlight-point strong,
.spotlight-point small {
  display:
    block;
}

.spotlight-point strong {
  color:
    #dce5f2;

  font-size:
    10px;

  font-weight:
    650;
}

.spotlight-point small {
  margin-top:
    2px;

  color:
    #64738a;

  font-size:
    8px;
}

.spotlight-link {
  position:
    relative;

  margin-top:
    18px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    11px 12px;

  border:
    1px solid rgba(
      255,
      255,
      255,
      0.07
    );

  border-radius:
    12px;

  color:
    #c1d2f0;

  background:
    rgba(
      255,
      255,
      255,
      0.025
    );

  font-size:
    9px;

  font-weight:
    650;

  transition:
    transform 0.25s ease,
    background 0.25s ease;
}

.spotlight-link:hover {
  transform:
    translateY(-2px);

  background:
    rgba(
      255,
      255,
      255,
      0.055
    );
}


/* =========================================================
   VALUE STRIP
========================================================= */

.value-strip-section {
  width:
    min(
      1050px,
      calc(100% - 48px)
    );

  margin:
    0 auto;

  padding:
    4px 0 70px;
}

.value-strip {
  display:
    grid;

  grid-template-columns:
    1fr auto 1fr auto 1fr;

  align-items:
    center;

  padding:
    16px 18px;

  border:
    1px solid rgba(
      255,
      255,
      255,
      0.065
    );

  border-radius:
    19px;

  background:
    rgba(
      255,
      255,
      255,
      0.025
    );

  box-shadow:
    inset 0 1px 0 rgba(
      255,
      255,
      255,
      0.04
    );
}

.value-item {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  min-width:
    0;
}

.value-item strong,
.value-item small {
  display:
    block;
}

.value-item strong {
  color:
    #dfe7f4;

  font-size:
    10px;

  font-weight:
    650;
}

.value-item small {
  margin-top:
    3px;

  color:
    #65748b;

  font-size:
    8px;
}

.value-icon {
  width:
    30px;

  height:
    30px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-shrink:
    0;

  border-radius:
    10px;

  font-size:
    12px;
}

.value-icon.blue {
  color:
    #8ab0ff;

  background:
    rgba(
      66,
      133,
      244,
      0.10
    );
}

.value-icon.purple {
  color:
    #c295ff;

  background:
    rgba(
      155,
      81,
      224,
      0.10
    );
}

.value-icon.cyan {
  color:
    #72ddff;

  background:
    rgba(
      56,
      189,
      248,
      0.10
    );
}

.value-divider {
  width:
    1px;

  height:
    30px;

  background:
    rgba(
      255,
      255,
      255,
      0.06
    );
}


/* =========================================================
   FEATURED
========================================================= */

.featured-section {
  width:
    min(
      1180px,
      calc(100% - 48px)
    );

  margin:
    0 auto;

  padding:
    55px 0 90px;
}

.featured-heading {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    25px;

  margin-bottom:
    24px;
}

.featured-heading h2 {
  margin-top:
    9px;

  color:
    #edf2f8;

  font-size:
    clamp(
      32px,
      4.5vw,
      52px
    );

  line-height:
    1.05;

  letter-spacing:
    -1.8px;

  word-break:
    normal;
}

.featured-heading p {
  margin-top:
    9px;

  color:
    #707e93;

  font-size:
    11px;

  line-height:
    1.7;
}

.featured-project-card {
  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      0.94fr
    )
    minmax(
      0,
      1.06fr
    );

  gap:
    25px;

  padding:
    23px;

  border:
    1px solid rgba(
      255,
      255,
      255,
      0.075
    );

  border-radius:
    25px;

  background:
    linear-gradient(
      145deg,
      rgba(
        255,
        255,
        255,
        0.045
      ),
      rgba(
        255,
        255,
        255,
        0.012
      )
    );

  box-shadow:
    inset 0 1px 0 rgba(
      255,
      255,
      255,
      0.045
    ),
    0 22px 60px rgba(
      0,
      0,
      0,
      0.20
    );

  overflow:
    hidden;
}

.featured-project-copy {
  padding:
    20px 12px 20px 8px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  min-width:
    0;
}

.featured-project-label {
  color:
    #708099;

  font-size:
    7px;

  font-weight:
    750;

  letter-spacing:
    1.4px;
}

.featured-project-copy h3 {
  margin-top:
    12px;

  color:
    #edf3fa;

  font-size:
    clamp(
      34px,
      4vw,
      48px
    );

  line-height:
    1.05;

  letter-spacing:
    -1.3px;

  font-kerning:
    normal;

  word-break:
    normal;

  overflow-wrap:
    normal;
}

.featured-project-copy h3 span {
  display:
    block;

  background:
    linear-gradient(
      120deg,
      #95b3ff,
      #c090ff,
      #edf1f7
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

  color:
    transparent;
}

.featured-project-copy > p {
  margin-top:
    15px;

  max-width:
    490px;

  color:
    #718096;

  font-size:
    11px;

  line-height:
    1.85;
}

.featured-actions {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    9px;

  margin-top:
    20px;
}

.featured-project-visual {
  min-width:
    0;

  min-height:
    470px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    7px;

  border:
    1px solid rgba(
      255,
      255,
      255,
      0.055
    );

  border-radius:
    21px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(
        92,
        116,
        225,
        0.08
      ),
      transparent 52%
    ),
    rgba(
      255,
      255,
      255,
      0.018
    );
}

.featured-project-visual .hero-window {
  width:
    100%;

  min-height:
    455px;
}


/* =========================================================
   HERO WINDOW / MIST PREVIEW
========================================================= */

.hero-window {
  position:
    relative;

  width:
    100%;

  min-height:
    455px;

  padding:
    8px;

  border:
    1px solid rgba(
      255,
      255,
      255,
      0.10
    );

  border-radius:
    24px;

  background:
    linear-gradient(
      145deg,
      rgba(
        28,
        34,
        47,
        0.86
      ),
      rgba(
        8,
        12,
        18,
        0.86
      )
    );

  box-shadow:
    -20px 30px 70px rgba(
      0,
      0,
      0,
      0.34
    ),
    inset 0 1px 0 rgba(
      255,
      255,
      255,
      0.08
    );

  overflow:
    hidden;
}

.window-top {
  height:
    35px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    0 10px;
}

.window-controls {
  display:
    flex;

  gap:
    6px;
}

.window-dot {
  width:
    9px;

  height:
    9px;

  border-radius:
    50%;
}

.window-dot.red {
  background:
    #ff5f57;
}

.window-dot.yellow {
  background:
    #febc2e;
}

.window-dot.green {
  background:
    #28c840;
}

.window-address {
  color:
    #4f5c70;

  font-size:
    8px;
}

.window-placeholder {
  width:
    30px;
}

.mist-preview-shell {
  min-height:
    410px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;
}

.mist-preview-clock-section {
  text-align:
    center;

  margin-bottom:
    18px;
}

.mist-preview-greeting {
  color:
    #64718a;

  font-size:
    8px;

  margin-bottom:
    5px;
}

.mist-preview-clock {
  color:
    #9ab3ff;

  font-size:
    33px;

  line-height:
    1;

  font-weight:
    650;
}

.mist-preview-date {
  margin-top:
    6px;

  color:
    #586782;

  font-size:
    8px;
}


/* =========================================================
   SEARCH PREVIEW
========================================================= */

.mist-preview-search-shell {
  position:
    relative;

  width:
    min(
      510px,
      100%
    );

  height:
    47px;

  border-radius:
    999px;
}

.mist-preview-search-fluid {
  position:
    absolute;

  inset:
    0;

  border-radius:
    inherit;

  overflow:
    hidden;
}

.mist-preview-search-fluid::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      90deg,
      #4285f4,
      #9b51e0,
      #ea4335,
      #fbbc05,
      #4285f4
    );

  filter:
    blur(7px);

  opacity:
    0.45;

  animation:
    searchFlow
    5s
    linear
    infinite;
}

@keyframes searchFlow {
  from {
    transform:
      translateX(-45%);
  }

  to {
    transform:
      translateX(45%);
  }
}

.preview-fluid {
  position:
    absolute;

  width:
    115px;

  height:
    6px;

  border-radius:
    999px;

  filter:
    blur(4px);
}

.preview-fluid.blue {
  top:
    -2px;

  left:
    -100px;

  background:
    #4285f4;

  animation:
    previewTop
    5s
    linear
    infinite;
}

.preview-fluid.purple {
  top:
    -2px;

  right:
    -100px;

  background:
    #b061ff;

  animation:
    previewRight
    6s
    linear
    infinite;
}

.preview-fluid.red {
  bottom:
    -2px;

  right:
    -100px;

  background:
    #ea4335;

  animation:
    previewBottom
    5.5s
    linear
    infinite;
}

.preview-fluid.cyan {
  bottom:
    -2px;

  left:
    -100px;

  background:
    #48cdff;

  animation:
    previewBottomReverse
    6.5s
    linear
    infinite;
}

@keyframes previewTop {
  to {
    transform:
      translateX(620px);
  }
}

@keyframes previewRight {
  to {
    transform:
      translateY(130px)
      rotate(90deg);
  }
}

@keyframes previewBottom {
  to {
    transform:
      translateX(-620px)
      rotate(180deg);
  }
}

@keyframes previewBottomReverse {
  to {
    transform:
      translateX(620px)
      rotate(180deg);
  }
}

.mist-preview-search {
  position:
    relative;

  width:
    100%;

  height:
    45px;

  display:
    flex;

  align-items:
    center;

  border-radius:
    inherit;

  background:
    linear-gradient(
      180deg,
      rgba(
        18,
        22,
        32,
        0.98
      ),
      rgba(
        9,
        12,
        19,
        0.98
      )
    );

  border:
    1px solid rgba(
      255,
      255,
      255,
      0.075
    );

  box-shadow:
    0 12px 30px rgba(
      0,
      0,
      0,
      0.30
    );

  overflow:
    hidden;
}

.mist-preview-search-icon {
  width:
    38px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 38px;
}

.mist-preview-search-icon svg {
  width:
    16px;

  height:
    16px;

  fill:
    #71809a;
}

.mist-preview-placeholder {
  flex:
    1;

  min-width:
    0;

  color:
    #61708a;

  font-size:
    8px;

  white-space:
    nowrap;

  overflow:
    hidden;

  text-overflow:
    ellipsis;
}

.mist-preview-search-action {
  width:
    30px;

  height:
    30px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin-right:
    2px;

  flex-shrink:
    0;

  border-radius:
    50%;

  background:
    rgba(
      255,
      255,
      255,
      0.035
    );
}

.mist-preview-search-action svg {
  width:
    13px;

  height:
    13px;

  fill:
    currentColor;
}

.mist-preview-search-action.mic {
  color:
    #7197d8;
}

.mist-preview-search-action.lens {
  margin-right:
    5px;

  color:
    #ff766a;
}


/* =========================================================
   PREVIEW SHORTCUTS
========================================================= */

.mist-preview-shortcuts {
  display:
    flex;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    7px;

  margin-top:
    12px;
}

.mist-preview-shortcut {
  width:
    95px;

  height:
    78px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  border:
    1px solid rgba(
      255,
      255,
      255,
      0.07
    );

  border-radius:
    14px;

  background:
    rgba(
      255,
      255,
      255,
      0.035
    );

  color:
    #bec9d9;

  transition:
    transform 0.25s ease,
    background 0.25s ease;
}

.mist-preview-shortcut:hover {
  transform:
    translateY(-4px);

  background:
    rgba(
      255,
      255,
      255,
      0.06
    );
}

.mist-preview-shortcut > span {
  font-size:
    8px;
}

.shortcut-demo-icon {
  width:
    32px;

  height:
    32px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    10px;
}

.shortcut-demo-icon.youtube {
  background:
    #ff0033;

  color:
    #fff;
}

.shortcut-demo-icon.youtube svg {
  width:
    19px;

  height:
    19px;
}

.shortcut-demo-icon.gmail {
  background:
    linear-gradient(
      135deg,
      #ea4335,
      #fbbc05
    );

  color:
    #fff;
}

.shortcut-demo-icon.gmail svg {
  width:
    19px;

  height:
    19px;
}

.shortcut-demo-icon.github {
  background:
    rgba(
      255,
      255,
      255,
      0.06
    );
}

.shortcut-demo-icon.github svg {
  width:
    19px;

  height:
    19px;

  fill:
    #fff;
}

.shortcut-demo-icon.add {
  color:
    #38bdf8;

  background:
    rgba(
      56,
      189,
      248,
      0.09
    );

  font-size:
    20px;
}


/* =========================================================
   COMMON SECTIONS
========================================================= */

.section-kicker {
  color:
    #65738a;

  font-size:
    8px;

  font-weight:
    750;

  letter-spacing:
    1.7px;
}

.mist-tab-content {
  width:
    min(
      760px,
      calc(100% - 48px)
    );

  margin:
    0 auto 80px;
}

.mist-tab-content h2 {
  margin-top:
    10px;

  color:
    #edf2f8;

  font-size:
    clamp(
      28px,
      4vw,
      40px
    );

  line-height:
    1.08;

  letter-spacing:
    -1.5px;

  overflow:
    visible;

  overflow-wrap:
    normal;
}

.mist-tab-content p {
  margin-top:
    17px;

  color:
    #718096;

  font-size:
    12px;

  line-height:
    1.9;

  overflow:
    visible;

  overflow-wrap:
    break-word;
}


/* =========================================================
   FEATURE SECTION
========================================================= */

.mist-feature-section {
  width:
    min(
      1050px,
      calc(100% - 48px)
    );

  margin:
    0 auto 80px;
}

.simple-header {
  margin-bottom:
    24px;
}

.simple-header h2 {
  margin-top:
    10px;

  color:
    #edf2f9;

  font-size:
    clamp(
      30px,
      4vw,
      42px
    );

  line-height:
    1.05;

  letter-spacing:
    -1.7px;
}

.mist-feature-grid {
  display:
    grid;

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

  gap:
    13px;
}

.glass-card {
  position:
    relative;

  min-width:
    0;

  min-height:
    235px;

  padding:
    20px;

  border:
    1px solid rgba(
      255,
      255,
      255,
      0.065
    );

  border-radius:
    20px;

  background:
    linear-gradient(
      145deg,
      rgba(
        255,
        255,
        255,
        0.045
      ),
      rgba(
        255,
        255,
        255,
        0.012
      )
    );

  box-shadow:
    inset 0 1px 0 rgba(
      255,
      255,
      255,
      0.04
    );

  overflow:
    hidden;

  transition:
    transform 0.35s
      cubic-bezier(
        0.2,
        0.8,
        0.2,
        1
      ),
    border-color 0.3s ease,
    box-shadow 0.35s ease;
}

.glass-card::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    -140px;

  width:
    85px;

  height:
    100%;

  transform:
    skewX(-18deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        255,
        255,
        255,
        0.08
      ),
      transparent
    );

  transition:
    left 0.7s ease;
}

.glass-card:hover::before {
  left:
    120%;
}

.glass-card:hover {
  transform:
    translateY(-7px);

  border-color:
    rgba(
      255,
      255,
      255,
      0.12
    );

  box-shadow:
    0 22px 50px rgba(
      0,
      0,
      0,
      0.20
    ),
    inset 0 1px 0 rgba(
      255,
      255,
      255,
      0.06
    );
}

.glass-card h3 {
  margin-top:
    9px;

  color:
    #e7edf7;

  font-size:
    18px;

  letter-spacing:
    -0.45px;
}

.glass-card p {
  margin-top:
    10px;

  color:
    #6d7b91;

  font-size:
    10px;

  line-height:
    1.75;
}

.card-icon {
  width:
    42px;

  height:
    42px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    13px;

  transition:
    transform 0.35s ease;
}

.glass-card:hover .card-icon {
  transform:
    scale(1.08)
    rotate(-4deg);
}

.card-icon svg {
  width:
    18px;

  height:
    18px;

  fill:
    currentColor;
}

.card-icon.blue {
  color:
    #82adff;

  background:
    rgba(
      66,
      133,
      244,
      0.10
    );
}

.card-icon.purple {
  color:
    #c18cff;

  background:
    rgba(
      155,
      81,
      224,
      0.10
    );
}

.card-icon.cyan {
  color:
    #67ddff;

  background:
    rgba(
      56,
      189,
      248,
      0.10
    );
}

.card-icon.orange {
  color:
    #ff9a77;

  background:
    rgba(
      234,
      67,
      53,
      0.09
    );
}

.card-icon.green {
  color:
    #67e8a4;

  background:
    rgba(
      52,
      211,
      153,
      0.09
    );
}

.card-icon.pink {
  color:
    #ff8db4;

  background:
    rgba(
      236,
      72,
      153,
      0.09
    );
}


/* =========================================================
   DOWNLOAD
========================================================= */

.mist-download-section {
  width:
    min(
      1050px,
      calc(100% - 48px)
    );

  margin:
    0 auto 80px;
}

.mist-download-card {
  position:
    relative;

  padding:
    46px 34px;

  text-align:
    center;

  border:
    1px solid rgba(
      255,
      255,
      255,
      0.085
    );

  border-radius:
    24px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(
        89,
        112,
        213,
        0.15
      ),
      transparent 50%
    ),
    linear-gradient(
      145deg,
      rgba(
        255,
        255,
        255,
        0.05
      ),
      rgba(
        255,
        255,
        255,
        0.012
      )
    );

  overflow:
    hidden;

  box-shadow:
    inset 0 1px 0 rgba(
      255,
      255,
      255,
      0.055
    ),
    0 20px 50px rgba(
      0,
      0,
      0,
      0.20
    );

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.mist-download-card:hover {
  transform:
    translateY(-5px);

  box-shadow:
    0 28px 65px rgba(
      0,
      0,
      0,
      0.25
    );
}

.mist-download-card h2 {
  margin-top:
    11px;

  color:
    #edf3fa;

  font-size:
    clamp(
      30px,
      4vw,
      44px
    );

  line-height:
    1.05;

  letter-spacing:
    -1.7px;
}

.mist-download-card p {
  max-width:
    550px;

  margin:
    14px auto 24px;

  color:
    #718096;

  font-size:
    11px;

  line-height:
    1.8;
}


/* =========================================================
   PROJECTS PAGE
========================================================= */

.subpage-section {
  width:
    100%;

  min-height:
    100vh;

  padding:
    145px 24px 90px;
}

.subpage-inner {
  width:
    min(
      1180px,
      100%
    );

  margin:
    0 auto;
}

.subpage-heading {
  width:
    min(
      760px,
      100%
    );

  margin:
    0 auto 48px;

  text-align:
    center;
}

.subpage-heading h1 {
  margin-top:
    10px;

  font-size:
    clamp(
      48px,
      7vw,
      78px
    );

  line-height:
    1.05;

  letter-spacing:
    -1.5px;

  font-weight:
    620;

  background:
    linear-gradient(
      120deg,
      #f3f5fa,
      #9db9ff,
      #c091ff,
      #edf0f7
    );

  background-size:
    180% 100%;

  -webkit-background-clip:
    text;

  background-clip:
    text;

  color:
    transparent;

  animation:
    subpageShimmer
    8s
    ease-in-out
    infinite;
}

@keyframes subpageShimmer {
  0%,
  100% {
    background-position:
      0 50%;
  }

  50% {
    background-position:
      100% 50%;
  }
}

.subpage-heading p {
  width:
    min(
      650px,
      100%
    );

  margin:
    18px auto 0;

  color:
    #707e93;

  font-size:
    12px;

  line-height:
    1.8;
}

.projects-grid {
  width:
    100%;

  display:
    grid;

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

  gap:
    16px;

  align-items:
    stretch;
}

.project-card {
  position:
    relative;

  min-width:
    0;

  min-height:
    100%;

  display:
    flex;

  flex-direction:
    column;

  overflow:
    hidden;

  border:
    1px solid rgba(
      255,
      255,
      255,
      0.075
    );

  border-radius:
    23px;

  background:
    linear-gradient(
      145deg,
      rgba(
        255,
        255,
        255,
        0.045
      ),
      rgba(
        255,
        255,
        255,
        0.012
      )
    );

  box-shadow:
    inset 0 1px 0 rgba(
      255,
      255,
      255,
      0.045
    ),
    0 18px 45px rgba(
      0,
      0,
      0,
      0.18
    );

  transition:
    transform 0.35s
      cubic-bezier(
        0.2,
        0.8,
        0.2,
        1
      ),
    border-color 0.3s ease,
    box-shadow 0.35s ease;
}

.project-card:hover {
  transform:
    translateY(-7px);

  border-color:
    rgba(
      255,
      255,
      255,
      0.14
    );

  box-shadow:
    0 28px 65px rgba(
      0,
      0,
      0,
      0.27
    ),
    inset 0 1px 0 rgba(
      255,
      255,
      255,
      0.07
    );
}

.project-image-wrap,
.coming-soon-visual {
  height:
    205px;

  flex:
    0 0 auto;

  overflow:
    hidden;

  background:
    #0b0f16;
}

.mist-project-preview {
  position:
    absolute;

  inset:
    12px;

  overflow:
    hidden;

  border:
    1px solid rgba(
      255,
      255,
      255,
      0.10
    );

  border-radius:
    17px;

  background:
    radial-gradient(
      circle at 50% -20%,
      rgba(
        82,
        65,
        155,
        0.18
      ),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      #111620,
      #080b11
    );

  box-shadow:
    inset 0 1px 0 rgba(
      255,
      255,
      255,
      0.06
    ),
    0 12px 28px rgba(
      0,
      0,
      0,
      0.30
    );

  transition:
    transform 0.5s
      cubic-bezier(
        0.2,
        0.8,
        0.2,
        1
      );
}

.project-card:hover .mist-project-preview {
  transform:
    scale(1.025);
}

.mini-window-bar {
  height:
    28px;

  display:
    flex;

  align-items:
    center;

  gap:
    5px;

  padding:
    0 9px;

  border-bottom:
    1px solid rgba(
      255,
      255,
      255,
      0.05
    );

  background:
    rgba(
      255,
      255,
      255,
      0.025
    );
}

.mini-dot {
  width:
    7px;

  height:
    7px;

  border-radius:
    50%;
}

.mini-dot.red {
  background:
    #ff5f57;
}

.mini-dot.yellow {
  background:
    #febc2e;
}

.mini-dot.green {
  background:
    #28c840;
}

.mini-window-content {
  height:
    calc(
      100% - 28px
    );

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  padding:
    16px;
}

.mini-clock {
  color:
    #9ab3ff;

  font-size:
    28px;

  line-height:
    1;

  font-weight:
    650;
}

.mini-search {
  position:
    relative;

  width:
    min(
      270px,
      90%
    );

  height:
    27px;

  margin-top:
    12px;

  display:
    flex;

  align-items:
    center;

  border:
    1px solid rgba(
      255,
      255,
      255,
      0.075
    );

  border-radius:
    999px;

  background:
    #0c1017;

  overflow:
    hidden;
}

.mini-search span {
  width:
    9px;

  height:
    9px;

  margin-left:
    10px;

  border:
    1.5px solid #64748b;

  border-radius:
    50%;

  position:
    relative;
}

.mini-search span::after {
  content:
    "";

  position:
    absolute;

  width:
    4px;

  height:
    1.5px;

  right:
    -3px;

  bottom:
    -1px;

  transform:
    rotate(45deg);

  background:
    #64748b;
}

.mini-search div {
  flex:
    1;

  height:
    5px;

  margin:
    0 10px;

  border-radius:
    999px;

  background:
    rgba(
      255,
      255,
      255,
      0.05
    );
}

.mini-search i,
.mini-search b {
  width:
    18px;

  height:
    18px;

  margin-right:
    3px;

  border-radius:
    50%;

  background:
    rgba(
      255,
      255,
      255,
      0.035
    );
}

.mini-search i {
  border:
    1px solid rgba(
      110,
      145,
      255,
      0.20
    );
}

.mini-search b {
  border:
    1px solid rgba(
      255,
      110,
      100,
      0.16
    );
}

.mini-shortcuts {
  display:
    flex;

  justify-content:
    center;

  gap:
    7px;

  margin-top:
    11px;
}

.mini-shortcuts span {
  width:
    29px;

  height:
    25px;

  border:
    1px solid rgba(
      255,
      255,
      255,
      0.065
    );

  border-radius:
    8px;

  background:
    rgba(
      255,
      255,
      255,
      0.035
    );
}

.project-details {
  flex:
    1 1 auto;

  min-height:
    250px;

  padding:
    18px;

  display:
    flex;

  flex-direction:
    column;
}

.project-topline {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;
}

.card-label {
  color:
    #718099;

  font-size:
    7px;

  font-weight:
    750;

  letter-spacing:
    1.4px;
}

.project-status {
  padding:
    5px 8px;

  border:
    1px solid rgba(
      52,
      211,
      153,
      0.10
    );

  border-radius:
    999px;

  background:
    rgba(
      52,
      211,
      153,
      0.055
    );

  color:
    #82d3a2;

  font-size:
    7px;

  font-weight:
    700;
}

.project-details h3 {
  margin-top:
    11px;

  color:
    #edf2f8;

  font-size:
    22px;

  line-height:
    1.1;

  letter-spacing:
    -0.7px;
}

.project-details p {
  margin-top:
    10px;

  color:
    #718096;

  font-size:
    10px;

  line-height:
    1.75;
}

.project-features {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    6px;

  margin-top:
    14px;
}

.project-features span {
  padding:
    6px 8px;

  border:
    1px solid rgba(
      255,
      255,
      255,
      0.06
    );

  border-radius:
    999px;

  background:
    rgba(
      255,
      255,
      255,
      0.028
    );

  color:
    #8694a9;

  font-size:
    7px;

  line-height:
    1;

  white-space:
    nowrap;
}

.project-actions {
  display:
    flex;

  gap:
    8px;

  margin-top:
    auto;

  padding-top:
    17px;
}

.project-actions a {
  min-height:
    34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 11px;

  border:
    1px solid rgba(
      255,
      255,
      255,
      0.08
    );

  border-radius:
    10px;

  background:
    rgba(
      255,
      255,
      255,
      0.035
    );

  color:
    #a8b6ca;

  font-size:
    8px;

  font-weight:
    650;

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
}

.project-actions a:hover {
  transform:
    translateY(-3px);

  color:
    #fff;

  background:
    rgba(
      255,
      255,
      255,
      0.075
    );

  border-color:
    rgba(
      255,
      255,
      255,
      0.12
    );
}

.project-actions .primary-project-link {
  color:
    #eef4ff;

  background:
    linear-gradient(
      135deg,
      rgba(
        79,
        134,
        247,
        0.78
      ),
      rgba(
        118,
        82,
        216,
        0.74
      )
    );
}


/* =========================================================
   COMING SOON
========================================================= */

.coming-soon-card {
  min-height:
    455px;
}

.coming-soon-visual {
  height:
    205px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  position:
    relative;

  background:
    radial-gradient(
      circle at center,
      rgba(
        101,
        128,
        180,
        0.09
      ),
      transparent 55%
    ),
    linear-gradient(
      145deg,
      #111620,
      #090c12
    );

  border-bottom:
    1px solid rgba(
      255,
      255,
      255,
      0.05
    );
}

.coming-soon-visual::before {
  content:
    "";

  position:
    absolute;

  width:
    180px;

  height:
    180px;

  border-radius:
    50%;

  background:
    conic-gradient(
      transparent,
      rgba(
        110,
        150,
        255,
        0.12
      ),
      transparent,
      rgba(
        180,
        110,
        255,
        0.10
      ),
      transparent
    );

  filter:
    blur(18px);

  animation:
    comingRotate
    7s
    linear
    infinite;
}

@keyframes comingRotate {
  to {
    transform:
      rotate(360deg);
  }
}

.coming-soon-visual span {
  position:
    relative;

  z-index:
    2;

  width:
    54px;

  height:
    54px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid rgba(
      255,
      255,
      255,
      0.08
    );

  border-radius:
    17px;

  background:
    rgba(
      255,
      255,
      255,
      0.035
    );

  color:
    #65748b;

  font-size:
    22px;
}


/* =========================================================
   MIST TAB PAGE
========================================================= */

.mist-tab-page {
  width:
    100%;

  min-height:
    100vh;

  padding:
    138px 24px 90px;
}

.mist-tab-heading {
  width:
    min(
      860px,
      100%
    );

  margin:
    0 auto;

  text-align:
    center;
}

.mist-tab-heading h1 {
  margin-top:
    10px;

  color:
    #f0f4fa;

  font-size:
    clamp(
      52px,
      8vw,
      84px
    );

  line-height:
    1.04;

  letter-spacing:
    -1.6px;

  font-weight:
    620;

  background:
    linear-gradient(
      120deg,
      #f5f7fb,
      #9db9ff,
      #c091ff,
      #edf1f7
    );

  background-size:
    180% 100%;

  -webkit-background-clip:
    text;

  background-clip:
    text;

  color:
    transparent;

  animation:
    titleShimmer
    8s
    ease-in-out
    infinite;
}

.mist-tab-heading > p {
  width:
    min(
      620px,
      100%
    );

  margin:
    20px auto 0;

  color:
    #76849a;

  font-size:
    13px;

  line-height:
    1.8;
}

.mist-tab-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  margin-top:
    28px;
}

.mist-project-live-status {
  margin-top:
    15px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    6px 9px;

  border:
    1px solid rgba(
      57,
      199,
      106,
      0.10
    );

  border-radius:
    999px;

  background:
    rgba(
      57,
      199,
      106,
      0.045
    );

  color:
    #709681;

  font-size:
    7px;

  font-weight:
    650;
}


/* =========================================================
   LARGE MIST PREVIEW
========================================================= */

.mist-tab-large-preview {
  position:
    relative;

  width:
    min(
      1050px,
      100%
    );

  min-height:
    555px;

  margin:
    70px auto 80px;

  padding:
    9px;

  border:
    1px solid rgba(
      255,
      255,
      255,
      0.10
    );

  border-radius:
    28px;

  background:
    linear-gradient(
      145deg,
      rgba(
        30,
        36,
        50,
        0.90
      ),
      rgba(
        8,
        12,
        18,
        0.88
      )
    );

  box-shadow:
    0 35px 100px rgba(
      0,
      0,
      0,
      0.38
    ),
    inset 0 1px 0 rgba(
      255,
      255,
      255,
      0.08
    );

  overflow:
    hidden;
}

.large-window-top {
  height:
    38px;

  display:
    grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items:
    center;

  padding:
    0 13px;

  border-bottom:
    1px solid rgba(
      255,
      255,
      255,
      0.05
    );

  color:
    #536075;

  font-size:
    8px;
}

.large-window-top .window-controls {
  justify-self:
    start;
}

.large-window-status {
  justify-self:
    end;

  width:
    auto !important;

  color:
    #6c8c7b;

  font-size:
    7px;

  letter-spacing:
    0.8px;
}

.large-mist-content {
  width:
    100%;

  min-height:
    505px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  padding:
    45px 20px;
}

.large-clock {
  color:
    #9ab3ff;

  font-size:
    clamp(
      55px,
      8vw,
      82px
    );

  line-height:
    1;

  font-weight:
    650;

  letter-spacing:
    -2px;

  text-shadow:
    0 0 40px rgba(
      100,
      145,
      255,
      0.14
    );
}

.large-date {
  margin-top:
    10px;

  color:
    #61708a;

  font-size:
    11px;
}

.large-search {
  position:
    relative;

  width:
    min(
      650px,
      100%
    );

  height:
    62px;

  margin-top:
    35px;

  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  padding:
    0 20px;

  border:
    1px solid rgba(
      255,
      255,
      255,
      0.08
    );

  border-radius:
    999px;

  background:
    linear-gradient(
      180deg,
      rgba(
        17,
        21,
        31,
        0.98
      ),
      rgba(
        9,
        12,
        18,
        0.98
      )
    );

  box-shadow:
    0 20px 50px rgba(
      0,
      0,
      0,
      0.32
    ),
    inset 0 1px 0 rgba(
      255,
      255,
      255,
      0.045
    );

  overflow:
    hidden;

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.large-search:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(
      255,
      255,
      255,
      0.13
    );

  box-shadow:
    0 25px 60px rgba(
      0,
      0,
      0,
      0.36
    );
}

.large-search-glow {
  position:
    absolute;

  top:
    -10px;

  left:
    10%;

  width:
    80%;

  height:
    4px;

  border-radius:
    999px;

  background:
    linear-gradient(
      90deg,
      #4285f4,
      #9b51e0,
      #ea4335,
      #fbbc05,
      #4285f4
    );

  filter:
    blur(6px);

  opacity:
    0.7;

  animation:
    largeSearchFlow
    6s
    linear
    infinite;
}

@keyframes largeSearchFlow {
  from {
    transform:
      translateX(-28%);
  }

  to {
    transform:
      translateX(28%);
  }
}

.large-search > svg {
  width:
    21px;

  height:
    21px;

  flex-shrink:
    0;

  fill:
    #6d7d95;
}

.large-search > span {
  min-width:
    0;

  color:
    #5f6f86;

  font-size:
    12px;

  overflow:
    hidden;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}

.large-shortcuts {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    12px;

  margin-top:
    22px;
}

.large-shortcuts > div {
  min-width:
    120px;

  min-height:
    95px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  border:
    1px solid rgba(
      255,
      255,
      255,
      0.065
    );

  border-radius:
    16px;

  background:
    linear-gradient(
      145deg,
      rgba(
        255,
        255,
        255,
        0.055
      ),
      rgba(
        255,
        255,
        255,
        0.015
      )
    );

  color:
    #adb9ca;

  font-size:
    9px;

  transition:
    transform 0.3s ease,
    border-color 0.25s ease,
    background 0.25s ease;
}

.large-shortcuts > div:hover {
  transform:
    translateY(-6px)
    scale(1.025);

  border-color:
    rgba(
      255,
      255,
      255,
      0.12
    );

  background:
    rgba(
      255,
      255,
      255,
      0.075
    );
}


/* =========================================================
   ABOUT
========================================================= */

.about-section {
  width:
    min(
      1050px,
      calc(100% - 48px)
    );

  margin:
    0 auto;

  padding:
    100px 0 95px;

  position:
    relative;
}

.about-section::before {
  content:
    "";

  position:
    absolute;

  top:
    20px;

  left:
    50%;

  width:
    650px;

  height:
    320px;

  transform:
    translateX(-50%);

  border-radius:
    50%;

  background:
    radial-gradient(
      ellipse,
      rgba(
        89,
        112,
        213,
        0.055
      ),
      transparent 68%
    );

  filter:
    blur(25px);

  pointer-events:
    none;
}

.about-header {
  position:
    relative;

  z-index:
    2;

  max-width:
    760px;

  margin:
    0 auto 40px;

  text-align:
    center;
}

.about-header h2 {
  margin-top:
    11px;

  color:
    #edf2f9;

  font-size:
    clamp(
      34px,
      5vw,
      50px
    );

  line-height:
    1.05;

  letter-spacing:
    -1.8px;
}

.about-header p {
  max-width:
    650px;

  margin:
    17px auto 0;

  color:
    #718096;

  font-size:
    12px;

  line-height:
    1.85;
}

.about-layout {
  position:
    relative;

  z-index:
    2;

  display:
    grid;

  grid-template-columns:
    1.2fr 0.8fr;

  gap:
    15px;
}

.about-story {
  min-height:
    340px;

  padding:
    27px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;
}

.about-story-top {
  display:
    flex;

  align-items:
    center;

  gap:
    15px;
}

.about-avatar {
  position:
    relative;

  width:
    58px;

  height:
    58px;

  flex-shrink:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    18px;

  background:
    rgba(
      255,
      255,
      255,
      0.05
    );

  border:
    1px solid rgba(
      255,
      255,
      255,
      0.09
    );

  overflow:
    hidden;
}

.about-avatar::before {
  content:
    "";

  position:
    absolute;

  width:
    30px;

  height:
    30px;

  border-radius:
    50%;

  background:
    conic-gradient(
      #4285f4,
      #9b51e0,
      #ea4335,
      #fbbc05,
      #4285f4
    );

  filter:
    blur(6px);

  animation:
    orbSpin
    5s
    linear
    infinite;
}

.about-avatar span {
  position:
    relative;

  z-index:
    2;

  color:
    #fff;

  font-size:
    17px;

  font-weight:
    700;
}

.about-small-label {
  color:
    #65738a;

  font-size:
    7px;

  font-weight:
    750;

  letter-spacing:
    1.4px;
}

.about-story h3 {
  margin-top:
    6px;

  color:
    #eaf0f8;

  font-size:
    21px;

  line-height:
    1.1;

  letter-spacing:
    -0.8px;
}

.about-story > p {
  margin-top:
    19px;

  color:
    #718096;

  font-size:
    11px;

  line-height:
    1.85;
}

.about-signature {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  margin-top:
    21px;

  color:
    #56657a;

  font-size:
    9px;
}

.about-signature span {
  width:
    22px;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      #6e8fe5,
      transparent
    );
}

.about-signature em {
  font-style:
    normal;
}


/* =========================================================
   SOCIAL
========================================================= */

.about-socials {
  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;
}

.social-card {
  position:
    relative;

  min-height:
    100px;

  padding:
    18px;

  display:
    flex;

  align-items:
    center;

  gap:
    13px;

  border:
    1px solid rgba(
      255,
      255,
      255,
      0.065
    );

  border-radius:
    18px;

  background:
    linear-gradient(
      145deg,
      rgba(
        255,
        255,
        255,
        0.045
      ),
      rgba(
        255,
        255,
        255,
        0.012
      )
    );

  overflow:
    hidden;

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.social-card::before {
  content:
    "";

  position:
    absolute;

  width:
    150px;

  height:
    150px;

  right:
    -85px;

  top:
    -95px;

  border-radius:
    50%;

  opacity:
    0.15;

  filter:
    blur(25px);

  transition:
    transform 0.4s ease;
}

.social-card:hover {
  transform:
    translateX(4px)
    translateY(-3px);

  border-color:
    rgba(
      255,
      255,
      255,
      0.12
    );

  box-shadow:
    0 15px 35px rgba(
      0,
      0,
      0,
      0.18
    );
}

.social-card:hover::before {
  transform:
    scale(1.35);
}

.social-card.instagram::before {
  background:
    linear-gradient(
      135deg,
      #f9ce34,
      #ee2a7b,
      #6228d7
    );
}

.social-card.youtube::before {
  background:
    #ff0033;
}

.social-card.github::before {
  background:
    #fff;
}

.social-icon {
  width:
    42px;

  height:
    42px;

  flex-shrink:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    13px;

  background:
    rgba(
      255,
      255,
      255,
      0.055
    );

  border:
    1px solid rgba(
      255,
      255,
      255,
      0.065
    );

  transition:
    transform 0.3s ease;
}

.social-card:hover .social-icon {
  transform:
    scale(1.08)
    rotate(-4deg);
}

.social-icon svg {
  width:
    19px;

  height:
    19px;

  fill:
    currentColor;
}

.social-card.instagram .social-icon {
  color:
    #f19abf;
}

.social-card.youtube .social-icon {
  color:
    #ff6479;
}

.social-card.github .social-icon {
  color:
    #d8e0eb;
}

.social-text {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}

.social-text span {
  color:
    #e6edf6;

  font-size:
    12px;

  font-weight:
    650;
}

.social-text small {
  color:
    #69788e;

  font-size:
    8px;
}

.social-arrow {
  margin-left:
    auto;

  color:
    #5d6d82;

  font-size:
    16px;

  transition:
    transform 0.25s ease,
    color 0.25s ease;
}

.social-card:hover .social-arrow {
  color:
    #9ab4e6;

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

.about-bottom-line {
  margin-top:
    28px;

  padding-top:
    17px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  border-top:
    1px solid rgba(
      255,
      255,
      255,
      0.045
    );

  color:
    #536278;

  font-size:
    9px;
}

.about-bottom-line a {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  color:
    #8299bd;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.about-bottom-line a:hover {
  color:
    #d8e4f6;

  transform:
    translateX(2px);
}


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

.site-footer {
  width:
    min(
      1180px,
      calc(100% - 48px)
    );

  margin:
    0 auto;

  padding:
    23px 0 27px;

  display:
    grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items:
    center;

  gap:
    20px;

  border-top:
    1px solid rgba(
      255,
      255,
      255,
      0.045
    );

  color:
    #4f5c6f;

  font-size:
    8px;
}

.footer-brand {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  color:
    #9aa7bb;

  font-size:
    10px;

  font-weight:
    600;
}

.footer-links {
  display:
    flex;

  justify-content:
    center;

  gap:
    16px;
}

.footer-links a {
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.footer-links a:hover {
  color:
    #dbe4f2;

  transform:
    translateY(-1px);
}

.footer-copy {
  text-align:
    right;
}


/* =========================================================
   TOAST
========================================================= */

.toast {
  position:
    fixed;

  left:
    50%;

  bottom:
    24px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    10px 14px;

  border:
    1px solid rgba(
      255,
      255,
      255,
      0.08
    );

  border-radius:
    999px;

  background:
    rgba(
      18,
      23,
      33,
      0.92
    );

  color:
    #dbe4f2;

  font-size:
    9px;

  opacity:
    0;

  pointer-events:
    none;

  transform:
    translate(
      -50%,
      20px
    );

  z-index:
    2000;

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);

  transition:
    opacity 0.3s ease,
    transform 0.35s ease;
}

.toast.show {
  opacity:
    1;

  transform:
    translate(
      -50%,
      0
    );
}

.toast-dot {
  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    #7da8ff;

  box-shadow:
    0 0 9px rgba(
      125,
      168,
      255,
      0.65
    );
}


/* =========================================================
   MOBILE NAV
========================================================= */

@media (max-width: 900px) {

  .site-header {
    padding:
      12px 14px;
  }

  .nav-glass {
    height:
      58px;

    padding:
      7px 8px 7px 11px;
  }

  .main-nav {
    position:
      absolute;

    top:
      67px;

    left:
      14px;

    right:
      14px;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      4px;

    padding:
      9px;

    border:
      1px solid rgba(
        255,
        255,
        255,
        0.08
      );

    border-radius:
      18px;

    background:
      rgba(
        16,
        21,
        30,
        0.97
      );

    box-shadow:
      0 25px 60px rgba(
        0,
        0,
        0,
        0.25
      );

    opacity:
      0;

    visibility:
      hidden;

    pointer-events:
      none;

    transform:
      translateY(-8px)
      scale(0.98);

    transition:
      opacity 0.25s ease,
      transform 0.25s ease,
      visibility 0.25s ease;
  }

  .main-nav.open {
    opacity:
      1;

    visibility:
      visible;

    pointer-events:
      auto;

    transform:
      translateY(0)
      scale(1);
  }

  .nav-link {
    padding:
      12px;

    text-align:
      center;
  }

  .mobile-menu-btn {
    display:
      block;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .hero-section {
    width:
      min(
        900px,
        calc(100% - 40px)
      );

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

    column-gap:
      35px;
  }

  .hero-title {
    font-size:
      clamp(
        46px,
        5vw,
        64px
      );
  }

  .hero-title span {
    white-space:
      normal;
  }

  .hero-spotlight {
    max-width:
      430px;
  }

  .featured-project-card {
    grid-template-columns:
      minmax(
        0,
        0.95fr
      )
      minmax(
        0,
        1.05fr
      );
  }

}


/* =========================================================
   TABLET SINGLE-COLUMN
========================================================= */

@media (max-width: 900px) {

  .hero-section {
    width:
      min(
        720px,
        calc(100% - 32px)
      );

    min-height:
      auto;

    padding:
      125px 0 60px;

    grid-template-columns:
      1fr;

    row-gap:
      38px;
  }

  .hero-content {
    width:
      100%;

    max-width:
      720px;

    margin:
      0 auto;

    text-align:
      center;
  }

  .eyebrow {
    margin-left:
      auto;

    margin-right:
      auto;
  }

  .hero-title {
    max-width:
      720px;

    margin-left:
      auto;

    margin-right:
      auto;

    font-size:
      clamp(
        46px,
        7vw,
        64px
      );
  }

  .hero-description {
    margin-left:
      auto;

    margin-right:
      auto;

    max-width:
      610px;
  }

  .hero-actions {
    justify-content:
      center;
  }

  .hero-status {
    justify-content:
      center;
  }

  .hero-spotlight {
    width:
      min(
        640px,
        100%
      );

    max-width:
      640px;

    margin:
      0 auto;
  }

  .featured-project-card {
    grid-template-columns:
      1fr;
  }

  .featured-project-visual {
    order:
      2;
  }

  .projects-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .mist-feature-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .about-layout {
    grid-template-columns:
      1fr;
  }

}


/* =========================================================
   VALUE TABLET
========================================================= */

@media (max-width: 900px) {

  .value-strip {
    grid-template-columns:
      1fr;

    gap:
      12px;
  }

  .value-divider {
    display:
      none;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .hero-section {
    width:
      calc(
        100% - 28px
      );

    padding:
      105px 0 45px;

    row-gap:
      30px;
  }

  .hero-title {
    width:
      100%;

    max-width:
      100%;

    font-size:
      clamp(
        38px,
        11.5vw,
        54px
      );

    line-height:
      1.06;

    letter-spacing:
      -0.85px;
  }

  .hero-title span {
    width:
      100%;

    white-space:
      normal;

    letter-spacing:
      -0.85px;

    line-height:
      1.06;
  }

  .hero-description {
    max-width:
      100%;

    font-size:
      10px;

    line-height:
      1.75;
  }

  .hero-actions {
    flex-direction:
      column;

    width:
      100%;
  }

  .hero-actions a {
    width:
      100%;
  }

  .hero-spotlight {
    width:
      100%;

    max-width:
      100%;

    padding:
      21px;
  }

  .hero-spotlight h2 {
    max-width:
      100%;

    font-size:
      28px;

    line-height:
      1.08;

    letter-spacing:
      -0.7px;
  }

  .hero-spotlight p {
    font-size:
      9px;

    line-height:
      1.75;
  }

  .projects-grid {
    grid-template-columns:
      1fr;
  }

  .mist-feature-grid {
    grid-template-columns:
      1fr;
  }

  .featured-section {
    width:
      calc(
        100% - 32px
      );

    padding:
      45px 0 65px;
  }

  .featured-heading {
    flex-direction:
      column;

    align-items:
      flex-start;
  }

  .featured-project-card {
    padding:
      14px;

    border-radius:
      20px;
  }

  .featured-project-copy {
    padding:
      15px 9px;
  }

  .featured-project-copy h3 {
    font-size:
      clamp(
        32px,
        9vw,
        42px
      );

    line-height:
      1.05;

    letter-spacing:
      -1px;
  }

  .featured-actions {
    flex-direction:
      column;
  }

  .featured-actions a {
    width:
      100%;
  }

  .featured-project-visual {
    min-height:
      390px;
  }

  .featured-project-visual .hero-window {
    min-height:
      380px;
  }

  .mist-preview-shell {
    min-height:
      350px;
  }

  .mist-preview-shortcut {
    width:
      72px;

    height:
      68px;
  }

  .subpage-section {
    padding:
      102px 16px 60px;
  }

  .subpage-heading {
    margin-bottom:
      34px;
  }

  .subpage-heading h1,
  .mist-tab-heading h1 {
    font-size:
      clamp(
        40px,
        12vw,
        52px
      );

    line-height:
      1.05;

    letter-spacing:
      -1px;
  }

  .subpage-heading p,
  .mist-tab-heading > p {
    font-size:
      11px;
  }

  .project-image-wrap,
  .coming-soon-visual {
    height:
      190px;
  }

  .project-details {
    min-height:
      auto;
  }

  .mist-tab-page {
    padding:
      102px 16px 60px;
  }

  .mist-tab-actions {
    flex-direction:
      column;

    width:
      100%;
  }

  .mist-tab-actions a {
    width:
      100%;
  }

  .mist-tab-large-preview {
    min-height:
      410px;

    margin:
      45px auto 60px;

    border-radius:
      21px;
  }

  .large-mist-content {
    min-height:
      360px;

    padding:
      25px 12px;
  }

  .large-clock {
    font-size:
      50px;

    letter-spacing:
      -1px;
  }

  .large-search {
    height:
      54px;

    padding:
      0 14px;

    margin-top:
      25px;
  }

  .large-search > span {
    font-size:
      9px;
  }

  .large-shortcuts {
    gap:
      7px;

    width:
      100%;
  }

  .large-shortcuts > div {
    min-width:
      74px;

    min-height:
      72px;

    font-size:
      7px;
  }

  .shortcut-demo-icon {
    width:
      31px;

    height:
      31px;
  }

  .mist-tab-content,
  .mist-feature-section,
  .mist-download-section {
    width:
      calc(
        100% - 32px
      );
  }

  .about-section {
    width:
      calc(
        100% - 32px
      );

    padding:
      70px 0 60px;
  }

  .about-header h2 {
    font-size:
      38px;

    letter-spacing:
      -1.7px;
  }

  .about-story {
    padding:
      21px;

    min-height:
      auto;
  }

  .about-story-top {
    align-items:
      flex-start;
  }

  .social-card {
    min-height:
      88px;
  }

  .about-bottom-line {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      12px;
  }

  .site-footer {
    width:
      calc(
        100% - 32px
      );

    grid-template-columns:
      1fr;

    justify-items:
      center;

    gap:
      12px;
  }

  .footer-copy {
    text-align:
      center;
  }

}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 430px) {

  .site-header {
    padding:
      9px;
  }

  .nav-glass {
    height:
      56px;

    padding-left:
      10px;

    padding-right:
      7px;
  }

  .brand {
    gap:
      7px;

    font-size:
      13px;
  }

  .brand-orb {
    width:
      23px;

    height:
      23px;
  }

  .hero-section {
    width:
      calc(
        100% - 20px
      );

    padding-top:
      95px;
  }

  .hero-title {
    font-size:
      clamp(
        34px,
        11.5vw,
        47px
      );

    line-height:
      1.06;

    letter-spacing:
      -0.7px;
  }

  .hero-title span {
    letter-spacing:
      -0.7px;

    margin-top:
      4px;
  }

  .hero-description {
    font-size:
      9.5px;
  }

  .hero-spotlight {
    padding:
      18px;
  }

  .featured-project-copy h3 {
    font-size:
      34px;

    line-height:
      1.04;

    letter-spacing:
      -1px;
  }

  .hero-window {
    min-height:
      340px;
  }

  .mist-preview-shell {
    min-height:
      290px;
  }

  .mist-preview-shortcuts {
    gap:
      5px;
  }

  .mist-preview-shortcut {
    width:
      64px;

    height:
      61px;
  }

  .large-shortcuts > div {
    min-width:
      66px;
  }

}


/* =========================================================
   EXTRA SAFETY
========================================================= */

/*
   These rules make absolutely sure the old effects
   cannot come back even if an older script is cached.
*/

.jayan-cursor-glow,
.jayan-scroll-progress {
  display:
    none !important;

  opacity:
    0 !important;

  visibility:
    hidden !important;

  pointer-events:
    none !important;
}

.jayan-pointer-target::after {
  display:
    none !important;

  opacity:
    0 !important;
}

.nav-icon-btn,
#theme-btn {
  display:
    none !important;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
  prefers-reduced-motion: reduce
) {

  *,
  *::before,
  *::after {
    animation-duration:
      0.001ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.001ms !important;

    scroll-behavior:
      auto !important;
  }

}

/* =========================================================
   JAYAN LABS — FINAL SAFE OVERRIDES
   Removes unwanted effects without replacing the original CSS
========================================================= */


/* =========================================================
   REMOVE LIGHT / DARK THEME BUTTON
========================================================= */

#theme-btn,
.nav-icon-btn {
  display: none !important;
}


/* =========================================================
   REMOVE OLD CURSOR GLOW
========================================================= */

.jayan-cursor-glow {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* =========================================================
   REMOVE POINTER FOLLOW LIGHTING
========================================================= */

.jayan-pointer-target::after {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.jayan-pointer-target {
  --pointer-x: 50%;
  --pointer-y: 50%;
}


/* =========================================================
   REMOVE SCROLL PROGRESS LINE
========================================================= */

.jayan-scroll-progress {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}


/* =========================================================
   KEEP PROFILE CARD OUTSIDE NAVBAR CLIPPING
========================================================= */

.nav-glass {
  overflow: visible !important;
}

.site-profile-wrap {
  position: relative;
  z-index: 10020;
}


/* =========================================================
   HERO — SAFE CENTERED LAYOUT
========================================================= */

.hero-section {
  width: min(
    1180px,
    calc(100% - 48px)
  );

  margin: 0 auto;

  display: grid;

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

  align-items: center;

  gap: clamp(
    40px,
    5vw,
    75px
  );

  overflow: visible;
}


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

.hero-content {
  width: 100%;
  min-width: 0;
  max-width: 690px;
}


/* =========================================================
   HERO TITLE FIX
========================================================= */

.hero-title {
  width: 100%;

  max-width: 690px;

  margin-bottom: 26px;

  line-height: 1.04;

  letter-spacing: -1.6px;

  overflow: visible;

  word-break: normal;

  overflow-wrap: normal;
}

.hero-title span {
  display: block;

  width: 100%;

  margin-top: 4px;

  line-height: 1.04;

  letter-spacing: -1.6px;

  white-space: nowrap;
}


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

.hero-description {
  width: 100%;

  max-width: 570px;

  margin-bottom: 30px;

  line-height: 1.8;

  overflow: visible;
}


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

.hero-actions {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 10px;
}

.hero-actions .primary-btn,
.hero-actions .secondary-btn {
  display: inline-flex !important;

  min-height: 44px;

  align-items: center;
  justify-content: center;

  text-decoration: none !important;
}


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

.hero-status {
  display: flex;

  align-items: center;

  gap: 8px;
}


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

.hero-spotlight {
  width: 100%;

  max-width: 455px;

  margin: 0 auto;

  min-width: 0;
}


/* =========================================================
   FEATURED BUTTON SAFETY
========================================================= */

.featured-actions {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 9px;
}

.featured-actions .primary-btn,
.featured-actions .secondary-btn {
  display: inline-flex !important;

  align-items: center;
  justify-content: center;

  text-decoration: none !important;
}


/* =========================================================
   PROJECT BUTTON SAFETY
========================================================= */

.project-actions {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 8px;
}

.primary-project-link {
  display: inline-flex !important;

  align-items: center;
  justify-content: center;

  text-decoration: none !important;
}


/* =========================================================
   MIST TAB ACTIONS
========================================================= */

.mist-tab-actions {
  display: flex;

  align-items: center;
  justify-content: center;

  flex-wrap: wrap;

  gap: 10px;
}

.mist-tab-actions .primary-btn,
.mist-tab-actions .secondary-btn {
  display: inline-flex !important;

  align-items: center;
  justify-content: center;
}


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

@media (max-width: 1000px) {

  .hero-section {
    width: min(
      720px,
      calc(100% - 32px)
    );

    grid-template-columns: 1fr;

    min-height: auto;

    padding:
      120px 0 55px;

    gap: 40px;
  }


  .hero-content {
    width: 100%;

    max-width: 700px;

    margin: 0 auto;

    text-align: center;
  }


  .eyebrow {
    margin:
      0 auto 20px;
  }


  .hero-title {
    width: 100%;

    max-width: 700px;

    margin-left: auto;
    margin-right: auto;

    letter-spacing: -1.3px;
  }


  .hero-title span {
    white-space: normal;

    letter-spacing: -1.3px;
  }


  .hero-description {
    margin-left: auto;
    margin-right: auto;
  }


  .hero-actions {
    justify-content: center;
  }


  .hero-status {
    justify-content: center;
  }


  .hero-spotlight {
    width: min(
      600px,
      100%
    );

    max-width: 600px;

    margin: 0 auto;
  }


  .featured-project-card {
    grid-template-columns: 1fr;
  }


  .featured-project-visual {
    order: 2;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .hero-section {
    width:
      calc(100% - 28px);

    padding:
      105px 0 45px;

    gap:
      30px;
  }


  .hero-title {
    width: 100%;

    max-width: 100%;

    font-size:
      clamp(
        38px,
        11.5vw,
        54px
      );

    line-height:
      1.06;

    letter-spacing:
      -0.8px;
  }


  .hero-title span {
    white-space:
      normal;

    line-height:
      1.06;

    letter-spacing:
      -0.8px;
  }


  .hero-description {
    max-width:
      100%;

    font-size:
      10px;
  }


  .hero-actions {
    width:
      100%;

    flex-direction:
      column;
  }


  .hero-actions a {
    width:
      100%;
  }


  .hero-spotlight {
    width:
      100%;

    max-width:
      100%;
  }


  .featured-actions {
    flex-direction:
      column;

    width:
      100%;
  }


  .featured-actions a {
    width:
      100%;
  }


  .mist-tab-actions {
    flex-direction:
      column;

    width:
      100%;
  }


  .mist-tab-actions a {
    width:
      100%;
  }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 430px) {

  .hero-section {
    width:
      calc(100% - 20px);

    padding-top:
      95px;
  }


  .hero-title {
    font-size:
      clamp(
        34px,
        11.5vw,
        47px
      );

    letter-spacing:
      -0.65px;
  }


  .hero-title span {
    letter-spacing:
      -0.65px;
  }

}


/* =========================================================
   FINAL OVERRIDES FOR OLD GENERATED ELEMENTS
========================================================= */

.jayan-cursor-glow,
.jayan-scroll-progress {
  display:
    none !important;

  opacity:
    0 !important;

  visibility:
    hidden !important;

  pointer-events:
    none !important;
}

.jayan-pointer-target::after {
  display:
    none !important;
}

#theme-btn {
  display:
    none !important;
}
/* =========================================================
   JAYAN LABS — FINAL BUTTON RESTORATION
   DO NOT REMOVE
========================================================= */


/* =========================================================
   PRIMARY + SECONDARY BUTTON
========================================================= */

.hero-actions .primary-btn,
.hero-actions .secondary-btn,
.featured-actions .primary-btn,
.featured-actions .secondary-btn,
.mist-tab-actions .primary-btn,
.mist-tab-actions .secondary-btn,
.mist-download-section .primary-btn,
.primary-project-link {
  position: relative !important;

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 8px !important;

  min-height: 44px !important;

  padding: 0 16px !important;

  border-radius: 13px !important;

  box-sizing: border-box !important;

  text-decoration: none !important;

  white-space: nowrap !important;

  overflow: hidden !important;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif !important;

  font-size: 11px !important;
  font-weight: 650 !important;

  line-height: 1 !important;

  transform: translateZ(0);

  cursor: pointer !important;
}


/* =========================================================
   PRIMARY
========================================================= */

.hero-actions .primary-btn,
.featured-actions .primary-btn,
.mist-tab-actions .primary-btn,
.mist-download-section .primary-btn {
  color: #ffffff !important;

  background:
    linear-gradient(
      135deg,
      #4f86f7,
      #7652d8
    ) !important;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.10
    ) !important;

  box-shadow:
    0 12px 30px
    rgba(
      74,
      100,
      200,
      0.20
    ) !important;
}


/* =========================================================
   SECONDARY
========================================================= */

.hero-actions .secondary-btn,
.featured-actions .secondary-btn,
.mist-tab-actions .secondary-btn {
  color:
    #a0adbf !important;

  background:
    rgba(
      255,
      255,
      255,
      0.025
    ) !important;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.08
    ) !important;

  box-shadow:
    none !important;
}


/* =========================================================
   PROJECT BUTTON
========================================================= */

.primary-project-link {
  color:
    #eef4ff !important;

  background:
    linear-gradient(
      135deg,
      rgba(
        79,
        134,
        247,
        0.88
      ),
      rgba(
        118,
        82,
        216,
        0.84
      )
    ) !important;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.09
    ) !important;

  box-shadow:
    0 10px 25px
    rgba(
      74,
      100,
      200,
      0.15
    ) !important;
}


/* =========================================================
   BUTTON TEXT
========================================================= */

.hero-actions .primary-btn > span,
.hero-actions .secondary-btn > span,
.featured-actions .primary-btn > span,
.featured-actions .secondary-btn > span,
.mist-tab-actions .primary-btn > span,
.mist-tab-actions .secondary-btn > span {
  position:
    relative !important;

  z-index:
    3 !important;

  display:
    inline-block !important;

  color:
    inherit !important;

  font-size:
    inherit !important;

  font-weight:
    inherit !important;

  line-height:
    1 !important;
}


/* =========================================================
   BUTTON SVG
   THIS FIXES THE BLACK TRIANGLE
========================================================= */

.hero-actions .primary-btn svg,
.hero-actions .secondary-btn svg,
.featured-actions .primary-btn svg,
.featured-actions .secondary-btn svg,
.mist-tab-actions .primary-btn svg,
.mist-tab-actions .secondary-btn svg,
.mist-download-section .primary-btn svg {
  position:
    relative !important;

  z-index:
    3 !important;

  display:
    block !important;

  width:
    14px !important;

  height:
    14px !important;

  min-width:
    14px !important;

  min-height:
    14px !important;

  flex:
    0 0 14px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  fill:
    none !important;

  background:
    transparent !important;

  stroke:
    currentColor !important;

  stroke-width:
    1.8 !important;

  stroke-linecap:
    round !important;

  stroke-linejoin:
    round !important;

  overflow:
    visible !important;
}


/* =========================================================
   REMOVE ANY UNKNOWN SVG FILL
========================================================= */

.primary-btn svg path,
.secondary-btn svg path {
  fill:
    none !important;

  stroke:
    currentColor !important;

  stroke-width:
    1.8 !important;

  stroke-linecap:
    round !important;

  stroke-linejoin:
    round !important;
}


/* =========================================================
   HOVER
========================================================= */

.hero-actions .primary-btn:hover,
.featured-actions .primary-btn:hover,
.mist-tab-actions .primary-btn:hover,
.mist-download-section .primary-btn:hover {
  color:
    #ffffff !important;

  transform:
    translateY(-3px)
    scale(1.015) !important;

  box-shadow:
    0 18px 42px
    rgba(
      74,
      100,
      200,
      0.30
    ) !important;
}


.hero-actions .secondary-btn:hover,
.featured-actions .secondary-btn:hover,
.mist-tab-actions .secondary-btn:hover {
  color:
    #edf2f9 !important;

  background:
    rgba(
      255,
      255,
      255,
      0.055
    ) !important;

  transform:
    translateY(-2px) !important;
}


.primary-project-link:hover {
  color:
    #ffffff !important;

  transform:
    translateY(-3px) !important;

  background:
    linear-gradient(
      135deg,
      rgba(
        79,
        134,
        247,
        0.98
      ),
      rgba(
        118,
        82,
        216,
        0.95
      )
    ) !important;
}


/* =========================================================
   SHINE — SAFE
========================================================= */

.hero-actions .primary-btn::before,
.hero-actions .secondary-btn::before,
.featured-actions .primary-btn::before,
.featured-actions .secondary-btn::before,
.mist-tab-actions .primary-btn::before,
.mist-tab-actions .secondary-btn::before,
.mist-download-section .primary-btn::before {
  content:
    "" !important;

  position:
    absolute !important;

  top:
    -140% !important;

  left:
    -35% !important;

  width:
    32% !important;

  height:
    330% !important;

  transform:
    rotate(20deg) !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        255,
        255,
        255,
        0.18
      ),
      transparent
    ) !important;

  pointer-events:
    none !important;

  transition:
    left 0.7s ease !important;

  z-index:
    2 !important;
}


.hero-actions .primary-btn:hover::before,
.hero-actions .secondary-btn:hover::before,
.featured-actions .primary-btn:hover::before,
.featured-actions .secondary-btn:hover::before,
.mist-tab-actions .primary-btn:hover::before,
.mist-tab-actions .secondary-btn:hover::before,
.mist-download-section .primary-btn:hover::before {
  left:
    120% !important;
}


/* =========================================================
   MAKE SURE AN OLD GENERIC SVG RULE CANNOT BREAK BUTTONS
========================================================= */

.hero-actions a svg,
.featured-actions a svg,
.mist-tab-actions a svg,
.mist-download-section a svg {
  pointer-events:
    none !important;
}


/* =========================================================
   REMOVE THE OLD CURSOR EFFECT
========================================================= */

.jayan-cursor-glow {
  display:
    none !important;

  opacity:
    0 !important;

  visibility:
    hidden !important;

  pointer-events:
    none !important;
}


/* =========================================================
   REMOVE POINTER FOLLOW EFFECT
========================================================= */

.jayan-pointer-target::after {
  display:
    none !important;

  opacity:
    0 !important;

  visibility:
    hidden !important;
}


/* =========================================================
   REMOVE SCROLL PROGRESS BAR
========================================================= */

.jayan-scroll-progress {
  display:
    none !important;

  width:
    0 !important;

  height:
    0 !important;

  opacity:
    0 !important;

  visibility:
    hidden !important;

  pointer-events:
    none !important;
}


/* =========================================================
   REMOVE THEME BUTTON
========================================================= */

#theme-btn,
.nav-icon-btn {
  display:
    none !important;
}


/* =========================================================
   KEEP PROFILE CARD ABOVE CONTENT
========================================================= */

.nav-glass {
  overflow:
    visible !important;
}

.site-profile-wrap {
  position:
    relative !important;

  z-index:
    10020 !important;
}


/* =========================================================
   MOBILE BUTTONS
========================================================= */

@media (max-width: 700px) {

  .hero-actions,
  .featured-actions,
  .mist-tab-actions {
    width:
      100% !important;

    flex-direction:
      column !important;
  }


  .hero-actions .primary-btn,
  .hero-actions .secondary-btn,
  .featured-actions .primary-btn,
  .featured-actions .secondary-btn,
  .mist-tab-actions .primary-btn,
  .mist-tab-actions .secondary-btn,
  .mist-download-section .primary-btn {
    width:
      100% !important;

    min-height:
      46px !important;
  }

}