/*
=========================================================
ITZEEZ AI — COMING SOON
CSS VERSION: 1.0.0
=========================================================

CACHE BUSTING:

Whenever this CSS file is changed after publishing,
increase the version number inside BOTH HTML files.

Example:

style.css?v=1.0.0

becomes:

style.css?v=1.0.1

This forces browsers to request the new CSS file.
=========================================================
*/


/* =====================================================
   VARIABLES
===================================================== */

:root {

  --bg: #07090d;

  --text: #f3f5f7;

  --line: rgba(255, 255, 255, 0.08);

  --line-strong: rgba(255, 153, 0, 0.35);

  --orange: #ff9900;

  --page-pad: clamp(20px, 4vw, 52px);

  --header-height: 92px;

}


/* =====================================================
   RESET
===================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}


html {

  min-width: 320px;

  background: var(--bg);

  color-scheme: dark;

}


body {

  margin: 0;

  min-height: 100vh;

  overflow-x: hidden;

  color: var(--text);

  background:

    linear-gradient(
      rgba(255, 255, 255, 0.016) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.016) 1px,
      transparent 1px
    ),

    radial-gradient(
      circle at 50% 45%,
      rgba(255, 153, 0, 0.035),
      transparent 34%
    ),

    var(--bg);

  background-size:
    64px 64px,
    64px 64px,
    auto,
    auto;

  font-family:
    "IBM Plex Mono",
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    Menlo,
    monospace;

  -webkit-font-smoothing: antialiased;

  text-rendering: optimizeLegibility;

}


a {

  color: inherit;

  text-decoration: none;

}


/* =====================================================
   SITE
===================================================== */

.site-shell {

  position: relative;

  min-height: 100svh;

  isolation: isolate;

}


.site-shell::before {

  content: "";

  position: fixed;

  inset: 0;

  z-index: -1;

  pointer-events: none;

  background:

    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.025),
      transparent 14%
    ),

    radial-gradient(
      circle at center,
      transparent 44%,
      rgba(0, 0, 0, 0.28) 100%
    );

}


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

.site-header {

  position: fixed;

  inset:
    0
    0
    auto
    0;

  z-index: 10;

  height: var(--header-height);

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding:
    0
    var(--page-pad);

}


/* =====================================================
   LOGO
===================================================== */

.brand {

  display: inline-flex;

  align-items: baseline;

  font-size:
    clamp(
      1.25rem,
      2vw,
      1.75rem
    );

  font-weight: 700;

  letter-spacing: 0.055em;

  white-space: nowrap;

}


.brand-accent {

  margin-left: 0.65em;

  color: var(--orange);

}

/* =====================================================
   NAVIGATION
===================================================== */

.nav-link {

  position: relative;

  padding: 10px 0;

  color: #e4e7ea;

  font-size:
    clamp(
      0.9rem,
      1.2vw,
      1.05rem
    );

  transition:
    color 160ms ease;

}


.nav-link::after {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  bottom: 3px;

  height: 1px;

  background: var(--orange);

  transform: scaleX(0);

  transform-origin: right;

  transition:
    transform 180ms ease;

}


.nav-link:hover,
.nav-link:focus-visible,
.nav-link.active {

  color: var(--orange);

}


.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link.active::after {

  transform: scaleX(1);

  transform-origin: left;

}


/* =====================================================
   ACCESSIBILITY
===================================================== */

.nav-link:focus-visible,
.brand:focus-visible,
.contact-email:focus-visible {

  outline:
    1px solid
    var(--orange);

  outline-offset: 6px;

}


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

.hero {

  position: relative;

  min-height: 100svh;

  display: grid;

  place-items: center;

  padding:

    calc(
      var(--header-height) + 30px
    )

    var(--page-pad)

    48px;

}


/* =====================================================
   WAR ROOM FRAME
===================================================== */

.tech-frame {

  position: absolute;

  inset:

    calc(
      var(--header-height) + 30px
    )

    var(--page-pad)

    36px;

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

  pointer-events: none;

}


.tech-frame::before {

  content: "";

  position: absolute;

  inset: 12px;

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

}


/* =====================================================
   FRAME CORNERS
===================================================== */

.corner {

  position: absolute;

  width: 34px;

  height: 34px;

}


.corner::before,
.corner::after {

  content: "";

  position: absolute;

  background:
    var(--line-strong);

}


.corner::before {

  width: 34px;

  height: 1px;

}


.corner::after {

  width: 1px;

  height: 34px;

}


.corner-tl {

  top: -1px;

  left: -1px;

}


.corner-tr {

  top: -1px;

  right: -1px;

  transform:
    rotate(90deg);

}


.corner-bl {

  bottom: -1px;

  left: -1px;

  transform:
    rotate(-90deg);

}


.corner-br {

  bottom: -1px;

  right: -1px;

  transform:
    rotate(180deg);

}


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

.hero-content,
.contact-content {

  position: relative;

  z-index: 1;

  width:
    min(
      100%,
      1000px
    );

  text-align: center;

}


.hero h1 {

  margin: 0;

  font-size:
    clamp(
      2rem,
      5vw,
      5.2rem
    );

  line-height: 1.06;

  font-weight: 500;

  letter-spacing: -0.045em;

}


.hero h1 span {

  display: block;

}

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

.hero-highlight {

  color: var(--orange);

  background:

    linear-gradient(
      90deg,
      #ff9900 0%,
      #ffb340 38%,
      #ffffff 50%,
      #ffb340 62%,
      #ff9900 100%
    );

  background-size: 220% auto;

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  text-shadow:

    0 0 24px
    rgba(255, 153, 0, 0.12);

  animation:
    inference-scan
    3s
    linear
    infinite;

}


@keyframes inference-scan {

  0% {
    background-position: 200% center;
  }

  100% {
    background-position: -20% center;
  }

}


/* =====================================================
   ORANGE SIGNAL LINE
===================================================== */

.signal-line {

  display: flex;

  align-items: center;

  justify-content: center;

  width:
    min(
      220px,
      42vw
    );

  height: 18px;

  margin:

    clamp(
      28px,
      5vh,
      52px
    )

    auto

    0;

}


.signal-line::before,
.signal-line::after {

  content: "";

  flex: 1;

  height: 1px;

  background:

    linear-gradient(
      90deg,
      transparent,
      var(--orange)
    );

}


.signal-line::after {

  background:

    linear-gradient(
      90deg,
      var(--orange),
      transparent
    );

}


.signal-line span {

  width: 8px;

  height: 8px;

  margin:
    0
    8px;

  background:
    var(--orange);

  box-shadow:

    0
    0
    18px
    rgba(255, 153, 0, 0.65);

}


/* =====================================================
   BETA LAUNCH
===================================================== */

.launch-date {

  margin:

    clamp(
      22px,
      3.5vh,
      34px
    )

    0

    0;

  color:
    var(--orange);

  font-size:

    clamp(
      1rem,
      2vw,
      1.6rem
    );

  line-height: 1.4;

  letter-spacing: -0.02em;

}


/* =====================================================
   CONTACT PAGE
===================================================== */

.contact-content {

  width:
    min(
      100%,
      760px
    );

}


.contact-copy {

  margin: 0;

  font-size:

    clamp(
      1.15rem,
      2.5vw,
      2rem
    );

  line-height: 1.55;

}


.contact-email {

  display: inline-block;

  margin-top: 24px;

  color:
    var(--orange);

  font-size:

    clamp(
      1.25rem,
      3vw,
      2.35rem
    );

  line-height: 1.2;

  transition:

    opacity 160ms ease,

    transform 160ms ease;

}


.contact-email:hover {

  opacity: 0.86;

  transform:
    translateY(-1px);

}


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

@media (max-width: 700px) {

  :root {

    --header-height: 76px;

    --page-pad: 20px;

  }


  body {

    background-size:

      42px 42px,

      42px 42px,

      auto,

      auto;

  }


  .hero {

    padding-top:

      calc(
        var(--header-height) + 18px
      );

    padding-bottom: 28px;

  }


  .tech-frame {

    inset:

      calc(
        var(--header-height) + 18px
      )

      var(--page-pad)

      20px;

  }


  .hero h1 {

    font-size:

      clamp(
        2rem,
        10vw,
        3.35rem
      );

    line-height: 1.08;

  }


  .launch-date {

    padding-inline: 14px;

  }

}


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

@media (max-width: 420px) {

  .brand {

    font-size: 1.1rem;

  }


  .nav-link {

    font-size: 0.85rem;

  }


  .hero h1 {

    font-size:

      clamp(
        1.85rem,
        9.4vw,
        2.6rem
      );

  }


  .tech-frame::before {

    inset: 8px;

  }

}


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

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

  *,
  *::before,
  *::after {

    scroll-behavior: auto !important;

    transition: none !important;

  }

}