/* ==============================================
   GrowthForce® — Coming Soon (1728px artboard)
   px → vw: (px / 1728) × 100
   ============================================== */

@font-face {
  font-family: "MONTECH";
  src: url("fonts/MONTECHV01-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MONTECH";
  src: url("fonts/MONTECHV01-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

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

:root {
  --black: #000000;
  --white: #ffffff;
  --card-border-color: #d9d9d9;
  --brand-yellow: #ffc941;

  --font-montech: "MONTECH", system-ui, sans-serif;
  --font-dm: "DM Sans", system-ui, sans-serif;

  --grid-columns: 12;
  --grid-padding: 2.893vw; /* 50px */
  --grid-gap: 1.736vw; /* 30px */
  --logo-card-gap: 4.63vw; /* 80px */
  --grid-inner-width: calc(100vw - (var(--grid-padding) * 2));

  --card-width: 17.766vw;
  --card-min-height: 7.986vw; /* 138px */
  --card-padding-x: 1.157vw; /* 20px */
  --card-padding-y: 1.042vw; /* 18px */
  --card-border-width: max(1px, 0.058vw); /* 1px */
  --card-corner-width: 0.521vw; /* 9px */
  --card-corner-height: 0.492vw; /* 8.5px */
  /* side-corner.svg vertex (2, 1.23071) in 18×17 viewBox */
  --card-corner-vertex-x: calc(2 / 18 * var(--card-corner-width));
  --card-corner-vertex-y: calc(1.23071 / 17 * var(--card-corner-height));

  --title-size: 0.81vw; /* 14px */
  --tagline-size: 0.694vw; /* 12px */
  --cta-label-size: 0.521vw; /* 9px */
  --cta-width: 6.076vw; /* 105px */
  --cta-height: 1.62vw; /* 28px */
  --icon-size: 0.81vw; /* 14px */

  --corner-width: 1.042vw; /* 18px */
  --corner-height: 0.984vw; /* 17px */

  --logo-width: 11.796vw;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100svh;
  font-family: var(--font-dm);
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-user-select: none;
  user-select: none;
}

.liquid-glass-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.coming-soon {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}

/* --- Hero logomark (viewport center) --- */

.hero-mark {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: flex;
  justify-content: center;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

/* --- Viewport corner brackets --- */

.viewport-frame {
  pointer-events: none;
  position: fixed;
  inset: var(--grid-padding);
  z-index: 2;
}

.viewport-frame__corner {
  position: absolute;
  width: var(--corner-width);
  height: var(--corner-height);
  background: url("assets/side-corner.svg") no-repeat;
  background-size: contain;
}

.viewport-frame__corner--tl {
  top: 0;
  left: 0;
  background-position: left top;
  transform-origin: left top;
}

.viewport-frame__corner--tr {
  top: 0;
  right: 0;
  background-position: right top;
  transform-origin: right top;
  transform: rotate(90deg);
}

.viewport-frame__corner--br {
  right: 0;
  bottom: 0;
  background-position: right bottom;
  transform-origin: right bottom;
  transform: rotate(180deg);
}

.viewport-frame__corner--bl {
  bottom: 0;
  left: 0;
  background-position: left bottom;
  transform-origin: left bottom;
  transform: rotate(-90deg);
}

/* --- Status card (follows cursor from center) --- */

.status-card {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: var(--card-width);
  min-height: var(--card-min-height);
  will-change: transform;
  transform: translate(-50%, -50%);
}

.hero-mark__logo {
  width: var(--logo-width);
  height: auto;
}

.status-card__frame {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 1;
}

.status-card__corner {
  position: absolute;
  width: var(--card-corner-width);
  height: var(--card-corner-height);
  background: url("assets/side-corner.svg") no-repeat left top;
  background-size: 100% 100%;
  transform-origin: var(--card-corner-vertex-x) var(--card-corner-vertex-y);
}

.status-card__corner--tl {
  top: calc(-1 * var(--card-corner-vertex-y));
  left: calc(-1 * var(--card-corner-vertex-x));
}

.status-card__corner--tr {
  top: calc(-1 * var(--card-corner-vertex-y));
  right: calc(var(--card-corner-vertex-x) - var(--card-corner-width));
  transform: scaleX(-1);
}

.status-card__corner--bl {
  bottom: calc(var(--card-corner-vertex-y) - var(--card-corner-height));
  left: calc(-1 * var(--card-corner-vertex-x));
  transform: scaleY(-1);
}

.status-card__corner--br {
  right: calc(var(--card-corner-vertex-x) - var(--card-corner-width));
  bottom: calc(var(--card-corner-vertex-y) - var(--card-corner-height));
  transform: scale(-1, -1);
}

.status-card__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  align-items: start;
  width: 100%;
  min-height: var(--card-min-height);
  padding: var(--card-padding-y) var(--card-padding-x);
  border: var(--card-border-width) solid var(--card-border-color);
  background: transparent;
  isolation: isolate;
}

.status-card__glass {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(10px) saturate(185%) brightness(1.12);
  backdrop-filter: blur(10px) saturate(185%) brightness(1.12);
}

.status-card__glass::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.48) 0%,
    rgba(255, 255, 255, 0.12) 38%,
    rgba(255, 255, 255, 0.06) 52%,
    rgba(255, 255, 255, 0.22) 100%
  );
  mix-blend-mode: soft-light;
  opacity: 0.9;
}

.status-card__glass::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.22),
    inset 1px 0 0 rgba(255, 255, 255, 0.18),
    inset -1px 0 0 rgba(255, 255, 255, 0.18);
  pointer-events: none;
}

@supports (backdrop-filter: url("#liquid-glass-disrupt")) {
  .status-card__glass {
    -webkit-backdrop-filter: blur(5px) saturate(195%) brightness(1.1)
      url("#liquid-glass-disrupt");
    backdrop-filter: blur(5px) saturate(195%) brightness(1.1)
      url("#liquid-glass-disrupt");
  }
}

.status-card__title,
.status-card__icon,
.status-card__tagline,
.status-card__cta {
  position: relative;
  z-index: 1;
}

.status-card__title {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  font-family: var(--font-montech);
  font-weight: 600;
  font-size: var(--title-size);
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.status-card__title sup {
  font-size: 0.55em;
  vertical-align: super;
  line-height: 0;
}

.status-card__icon {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  width: var(--icon-size);
  height: var(--icon-size);
}

.status-card__tagline {
  grid-column: 1;
  grid-row: 3;
  align-self: end;
  font-family: var(--font-dm);
  font-weight: 500;
  font-size: var(--tagline-size);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.status-card__cta {
  grid-column: 2;
  grid-row: 3;
  position: relative;
  display: grid;
  place-items: center;
  justify-self: end;
  align-self: end;
  width: var(--cta-width);
  height: var(--cta-height);
}

.status-card__cta-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.status-card__cta-label {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-montech);
  font-weight: 600;
  font-size: var(--cta-label-size);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--black);
  pointer-events: none;
}

/* --- Tablet (≤1024px) — desktop px held at 1024: (px / 1024) × 100 --- */

@media (max-width: 1024px) {
  :root {
    --grid-padding: 4.883vw; /* 50px */
    --grid-gap: 2.93vw; /* 30px */
    --logo-card-gap: 7.813vw; /* 80px */

    --card-width: 29.98vw; /* 307px @ 1024 — same as desktop */
    --card-min-height: 13.477vw; /* 138px */
    --card-padding-x: 1.953vw; /* 20px */
    --card-padding-y: 1.758vw; /* 18px */
    --card-border-width: max(1px, 0.098vw);
    --card-corner-width: 0.879vw; /* 9px */
    --card-corner-height: 0.83vw; /* 8.5px */

    --title-size: 1.367vw; /* 14px */
    --tagline-size: 1.172vw; /* 12px */
    --cta-label-size: 0.879vw; /* 9px */
    --cta-width: 10.254vw; /* 105px */
    --cta-height: 2.734vw; /* 28px */
    --icon-size: 1.367vw; /* 14px */

    --corner-width: 1.758vw; /* 18px */
    --corner-height: 1.66vw; /* 17px */

    --logo-width: 19.906vw; /* 204px */
  }

  .hero-mark {
    transform: translate(-50%, -50%);
  }

  .status-card {
    top: auto;
    left: 50%;
    bottom: 15svh;
    transform: translateX(-50%);
    will-change: auto;
  }
}

/* --- Mobile (≤650px) — scale container up from desktop px @ 650 --- */

@media (max-width: 650px) {
  :root {
    --mobile-card-scale: 1.4;

    --grid-padding: 7.692vw; /* 50px */
    --grid-gap: 4.615vw; /* 30px */
    --logo-card-gap: 12.308vw; /* 80px */

    --card-width: calc(47.231vw * var(--mobile-card-scale)); /* 307px → ~430px @ 650 */
    --card-min-height: calc(21.231vw * var(--mobile-card-scale));
    --card-padding-x: calc(3.077vw * var(--mobile-card-scale));
    --card-padding-y: calc(2.769vw * var(--mobile-card-scale));
    --card-border-width: max(1px, calc(0.154vw * var(--mobile-card-scale)));
    --card-corner-width: calc(1.385vw * var(--mobile-card-scale));
    --card-corner-height: calc(1.308vw * var(--mobile-card-scale));

    --title-size: calc(2.154vw * var(--mobile-card-scale));
    --tagline-size: calc(1.846vw * var(--mobile-card-scale));
    --cta-label-size: calc(1.385vw * var(--mobile-card-scale));
    --cta-width: calc(16.154vw * var(--mobile-card-scale));
    --cta-height: calc(4.308vw * var(--mobile-card-scale));
    --icon-size: calc(2.154vw * var(--mobile-card-scale));

    --corner-width: 2.769vw; /* 18px */
    --corner-height: 2.615vw; /* 17px */

    --logo-width: min(31.385vw, 78vw);
  }
}