/* ============================================================================
   Iterutech.com — "Deep Nile" design system, implemented as a static site.
   Recreated pixel-for-pixel from the Claude Design handoff bundle
   (iteru-tech-navigation-redesign). Tokens, components and motion are ported
   verbatim from the Iterutech Design System ("Deep Nile") — do not substitute.
   ============================================================================ */

/* ---------------------------------------------------------------- TOKENS --- */
/* Deep Nile color system — FINAL values from brief v3.1. Do not substitute.   */
:root {
  /* Ink scale — text and structure */
  --ink-900: #131A17;
  --ink-700: #2B3531;
  --ink-500: #5C6762;
  --ink-300: #9CA59F;
  --hairline: #DED9CC;

  /* Nile family — the brand color */
  --nile-800: #0A332D;
  --nile-700: #0E463E;
  --nile-500: #2F6F62;
  --mist-100: #E2EDE8;

  /* Surfaces */
  --paper: #F7F5F0;
  --card: #FFFFFF;
  --stone: #ECE7DC;
  --ink-band: #131A17;

  /* Semantic — forms only */
  --success: #1E7A5A;
  --error: #B5402F;
  --warning: #A8762B;
  --info: var(--nile-500);

  /* Semantic aliases */
  --text-display: var(--ink-900);
  --text-body: var(--ink-700);
  --text-secondary: var(--ink-500);
  --text-muted: var(--ink-300);
  --text-on-nile: var(--paper);
  --text-on-mist: var(--nile-800);

  --surface-page: var(--paper);
  --surface-card: var(--card);
  --surface-alt: var(--stone);
  --surface-band: var(--nile-800);
  --surface-footer: var(--ink-band);

  --accent: var(--nile-700);
  --accent-soft: var(--mist-100);
  --link: var(--nile-700);
  --rule: var(--hairline);

  --border-hairline: 1px solid var(--hairline);
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--nile-500);

  /* Type */
  --font-display: 'Alexandria', sans-serif;
  --font-body: 'IBM Plex Sans Arabic', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --text-hero: clamp(40px, 7.5vw, 112px);
  --text-h1: clamp(36px, 5vw, 64px);
  --text-h2: clamp(28px, 3.5vw, 44px);
  --text-h3: clamp(22px, 2.5vw, 28px);
  --text-h4: 20px;

  --text-body-lg: 19px;
  --text-body-md: 16px;
  --text-body-sm: 14px;

  --text-mono-md: 14px;
  --text-mono-sm: 12px;
  --text-metric: clamp(40px, 4vw, 56px);

  --leading-display: 1.08;
  --leading-heading: 1.25;
  --leading-body: 1.7;

  --weight-display: 600;
  --weight-display-medium: 500;
  --weight-display-bold: 700;
  --weight-body: 400;
  --weight-body-medium: 500;

  --tracking-eyebrow: 0.18em;
  --tracking-display: -0.01em;

  /* Spacing / layout */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --space-section: clamp(96px, 10vw, 160px);
  --space-section-mobile: 96px;
  --content-max: 1200px;
  --grid-gutter: 32px;
  --page-margin: clamp(24px, 5vw, 80px);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-pill: 999px;
  --hairline-width: 1px;

  --shadow-card: 0 1px 2px rgba(19, 26, 23, 0.04);
  --shadow-lift: 0 8px 24px rgba(19, 26, 23, 0.08);

  /* Motion — one easing family, choreography not decoration */
  --ease-iteru: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-micro: 200ms;
  --duration-reveal: 600ms;
  --duration-hero: 1200ms;
  --reveal-rise: 20px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-micro: 0ms;
    --duration-reveal: 0ms;
    --duration-hero: 0ms;
    --reveal-rise: 0px;
  }
}

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

html, body { margin: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-body);
  font-weight: var(--weight-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-heading);
  color: var(--text-display);
}
h1 { font-size: var(--text-h1); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--text-h2); letter-spacing: var(--tracking-display); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }

img, svg { max-width: 100%; display: block; }
hr { border: 0; border-top: var(--border-hairline); margin: 0; }
::selection { background: var(--mist-100); color: var(--nile-800); }
a { color: var(--link); text-decoration: none; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------- BUTTONS --- */
/* Ported verbatim from the design system's Button component. */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: 500; font-size: 15px; line-height: 1;
  border-radius: var(--radius-sm); cursor: pointer; text-decoration: none;
  transition: color var(--duration-micro) var(--ease-iteru),
              border-color var(--duration-micro) var(--ease-iteru),
              background var(--duration-micro) var(--ease-iteru);
  border: 1px solid transparent; white-space: nowrap;
}
.btn:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.btn--md { height: 48px; padding: 0 28px; }
.btn--sm { height: 38px; padding: 0 18px; font-size: 14px; }
.btn--primary { background: var(--nile-700); color: var(--paper); }
.btn--primary::before {
  content: ""; position: absolute; inset: 0; background: var(--nile-800);
  transform: translateX(-101%); transition: transform 480ms var(--ease-iteru);
}
.btn--primary:hover::before { transform: translateX(0); }
.btn--primary > * { position: relative; }
.btn--secondary { background: transparent; color: var(--ink-900); border-color: var(--ink-700); }
.btn--secondary:hover { border-color: var(--ink-900); background: rgba(19, 26, 23, 0.04); }
.btn--ghost { background: transparent; color: var(--nile-700); padding-left: 0; padding-right: 0; border: 0; }
.btn--ghost:hover { color: var(--nile-800); }
.btn--ghost .btn__label {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 320ms var(--ease-iteru); padding-bottom: 2px;
}
.btn--ghost:hover .btn__label { background-size: 100% 1px; }
.btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.btn__icon { display: inline-flex; flex: none; }

/* ----------------------------------------------------------------- BADGE --- */
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 500; font-size: 12.5px;
  background: var(--mist-100); color: var(--nile-800);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 5px 11px; line-height: 1;
}
.badge__dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.badge--live .badge__dot { background: var(--success); }
.badge--soon .badge__dot { background: var(--ink-300); }

/* --------------------------------------------------------------- EYEBROW --- */
.eyebrow { display: flex; align-items: baseline; gap: 16px; }
.eyebrow__mono {
  font-family: var(--font-mono); font-size: var(--text-mono-sm);
  letter-spacing: var(--tracking-eyebrow); color: var(--nile-500); white-space: nowrap;
}
.eyebrow__title { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--ink-900); }
.eyebrow--dark .eyebrow__mono { color: var(--mist-100); }
.eyebrow--dark .eyebrow__title { color: var(--paper); }

/* --------------------------------------------------------- WORDMARK/GLYPH --- */
.wordmark { display: flex; align-items: center; gap: 9px; margin-inline-end: 8px; text-decoration: none; }
.wordmark__glyph { flex: none; }
.wordmark__text {
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  letter-spacing: -0.015em; color: var(--ink-900);
}
.wordmark__text .tech { color: var(--nile-700); }

/* ------------------------------------------------------------------- NAV --- */
.nav { background: var(--card); border-bottom: 1px solid var(--hairline); position: relative; z-index: 50; }
.nav__inner {
  max-width: var(--content-max); margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px); height: 64px;
  display: flex; align-items: center; gap: 28px;
}
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-link {
  font-family: var(--font-body); font-weight: 500; font-size: 14.5px;
  color: var(--ink-500); padding: 8px 2px; border-bottom: 1.5px solid transparent;
  text-decoration: none; transition: color var(--duration-micro) var(--ease-iteru);
}
.nav-link:hover { color: var(--ink-900); }
.nav-link--active { color: var(--nile-700); border-bottom-color: var(--nile-700); }

/* Products dropdown */
.nav-dd { position: relative; }
.nav-dd__btn {
  display: flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer;
  font-family: var(--font-body); font-weight: 500; font-size: 14.5px; color: var(--ink-500); padding: 8px 0;
  transition: color var(--duration-micro) var(--ease-iteru);
}
.nav-dd:hover .nav-dd__btn { color: var(--ink-900); }
.nav-dd__menu {
  position: absolute; inset-inline-start: 0; top: 100%;
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift); padding: 8px; width: 280px;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 180ms var(--ease-iteru), transform 180ms var(--ease-iteru), visibility 180ms;
}
.nav-dd:hover .nav-dd__menu, .nav-dd:focus-within .nav-dd__menu { opacity: 1; visibility: visible; transform: none; }
.nav-dd__item { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--radius-sm); color: inherit; transition: background var(--duration-micro) var(--ease-iteru); }
.nav-dd__item:hover { background: var(--paper); }
.nav-dd__icon { color: var(--nile-500); display: inline-flex; flex: none; }
.nav-dd__text { display: flex; flex-direction: column; gap: 2px; }
.nav-dd__text b { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--ink-900); }
.nav-dd__text small { font-size: 12.5px; color: var(--ink-500); }

.nav-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 16px; }

/* Branded HorusEye portal pill (product colors inside a neutral Mist container) */
.nav-portal {
  display: inline-flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 14px 0 16px; background: var(--mist-100);
  border-radius: var(--radius-pill); text-decoration: none; color: var(--nile-700);
  transition: background var(--duration-micro) var(--ease-iteru);
}
.nav-portal:hover { background: #D6E7E0; }
.nav-portal__logo { height: 17px; width: auto; display: block; }
.nav-portal--sm { height: 34px; padding: 0 12px 0 14px; }
.nav-portal--sm .nav-portal__logo { height: 15px; }

/* Mobile hamburger */
.nav-burger {
  display: none; margin-inline-start: auto; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--ink-900);
}

/* Mobile full-screen sheet */
.nav-sheet { position: fixed; inset: 0; z-index: 100; background: var(--paper); display: none; flex-direction: column; }
.nav-sheet.is-open { display: flex; }
.nav-sheet__top { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--hairline); flex: none; }
.nav-sheet__close { background: none; border: 0; cursor: pointer; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--ink-900); }
.nav-sheet__body { flex: 1; overflow-y: auto; padding: 16px 16px 24px; display: flex; flex-direction: column; }
.nav-sheet__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--nile-500); padding: 12px 0 4px; }
.nav-sheet__link {
  font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--ink-900);
  padding: 14px 0; border-bottom: 1px solid var(--hairline); display: block; min-height: 44px; box-sizing: border-box;
}
.nav-sheet__portal { justify-content: center; min-height: 48px; margin-bottom: 8px; }
.nav-sheet__foot { margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.nav-sheet__cta { justify-content: center; min-height: 52px; }

/* ----------------------------------------------------------- FLOATING NAV --- */
.float-nav {
  position: fixed; top: 14px; inset-inline-start: 0; inset-inline-end: 0;
  display: flex; justify-content: center; z-index: 90; pointer-events: none;
}
.float-nav.is-on { pointer-events: auto; }
.float-nav__island {
  display: flex; align-items: center; gap: 20px; background: var(--card);
  border: 1px solid var(--hairline); border-radius: var(--radius-pill);
  padding: 7px 9px; padding-inline-start: 18px; box-shadow: var(--shadow-lift);
  opacity: 0; transform: translateY(-14px);
  transition: opacity 260ms var(--ease-iteru), transform 320ms var(--ease-iteru);
  will-change: opacity, transform;
}
.float-nav.is-on .float-nav__island {
  opacity: 1; transform: none;
  transition: opacity 420ms var(--ease-iteru), transform 560ms var(--ease-iteru);
}
.float-nav__links { display: flex; align-items: center; gap: 18px; }
.float-nav__links a {
  font-family: var(--font-body); font-weight: 500; font-size: 13.5px;
  color: var(--ink-500); padding: 6px 2px; white-space: nowrap;
  transition: color var(--duration-micro) var(--ease-iteru);
}
.float-nav__links a:hover, .float-nav__links a.is-active { color: var(--nile-700); }
.float-nav__divider { width: 1px; height: 22px; background: var(--hairline); }
.float-nav__actions { display: flex; align-items: center; gap: 10px; }

/* -------------------------------------------------------------- SECTIONS --- */
main { position: relative; }
.section {
  max-width: var(--content-max); margin: 0 auto;
  padding: clamp(80px, 10vw, 140px) 32px 0; position: relative; z-index: 1;
}
.section__head { border-top: 1px solid var(--hairline); padding-top: 24px; margin-bottom: 48px; }
.section--pb { padding-bottom: clamp(80px, 10vw, 140px); }

/* Hero */
.hero {
  max-width: var(--content-max); margin: 0 auto;
  padding: clamp(72px, 9vw, 130px) 32px 24px; position: relative; z-index: 1;
}
.hero__in { display: flex; flex-direction: column; gap: 28px; max-width: 980px; }
.hero__eyebrow { align-self: flex-start; }
.hero__title {
  font-size: var(--text-hero); line-height: var(--leading-display);
  letter-spacing: var(--tracking-display); font-weight: 600; text-wrap: balance; margin: 0;
}
.hero__sub { margin: 0; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.7; color: var(--ink-500); max-width: 52ch; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Grids */
.products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 24px; align-items: stretch; }
.solutions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; }
.why-col { padding-inline: 40px; border-inline-end: 1px solid var(--hairline); }
.why-col:first-child { padding-inline-start: 0; }
.why-col:last-child { padding-inline-end: 0; border-inline-end: 0; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 48px; }

/* --------------------------------------------------------------- CARDS ----- */
.card { background: var(--card); border-radius: var(--radius-md); border: 1px solid var(--hairline); box-shadow: var(--shadow-card); transition: all var(--duration-micro) var(--ease-iteru); }
.card:hover { border-color: var(--ink-300); box-shadow: var(--shadow-lift); transform: translateY(-3px); }

.product-card { padding: 32px; display: flex; flex-direction: column; gap: 16px; height: 100%; }
.product-card__media { border: 1px solid var(--hairline); border-radius: var(--radius-sm); overflow: hidden; background: var(--paper); margin-bottom: 8px; }
.product-card__media img { display: block; width: 100%; height: auto; }
.product-card__media--lottie { display: flex; align-items: center; justify-content: center; }
.mandoob-lottie { width: 100%; height: 240px; }
.product-card__head { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.product-card__logo { height: 30px; width: auto; display: block; }
.product-card__name { font-size: var(--text-h3); }
.product-card__desc { margin: 0; font-size: var(--text-body-md); color: var(--ink-500); max-width: 46ch; text-align: start; }
.product-card__cta { margin-top: auto; padding-top: 8px; }

.service-card { padding: 32px; display: flex; flex-direction: column; gap: 14px; height: 100%; }
.service-card__icon { color: var(--nile-500); }
.service-card__title { font-size: 22px; line-height: 1.3; text-align: start; }
.service-card__desc { margin: 0; font-size: 15px; color: var(--ink-500); text-align: start; }
.service-card__cta { margin-top: auto; padding-top: 6px; }

/* Why / FeatureItem (top hairline intentionally dropped; columns carry vertical rules) */
.feature { display: flex; flex-direction: column; gap: 10px; }
.feature__index { display: flex; align-items: center; gap: 10px; color: var(--nile-500); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; }
.feature__title { font-size: 19px; font-weight: 600; }
.feature__desc { margin: 0; font-size: 15px; color: var(--ink-500); }

/* --------------------------------------------------------------- ABOUT BAND --- */
.band { position: relative; background: var(--nile-800); color: var(--paper); margin-top: clamp(80px, 10vw, 140px); }
.band__inner { max-width: var(--content-max); margin: 0 auto; padding: 96px 32px; display: flex; flex-direction: column; gap: 28px; position: relative; z-index: 1; }
.band__lead { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.6; color: var(--paper); max-width: 38ch; }
.btn--ghost.btn--on-dark { color: var(--mist-100); }
.btn--ghost.btn--on-dark:hover { color: var(--paper); }

/* --------------------------------------------------------------- CONTACT --- */
.contact__intro { margin: 0; font-size: 17px; color: var(--ink-700); }
.contact__email { font-family: var(--font-mono); font-size: 15px; color: var(--nile-700); direction: ltr; display: inline-block; margin-top: 10px; }
.contact-form { display: flex; flex-direction: column; gap: 16px; }

/* ----------------------------------------------------------------- FIELD --- */
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { font-family: var(--font-body); font-weight: 500; font-size: 14px; color: var(--ink-700); }
.field__input {
  font-family: var(--font-body); font-size: 15px; color: var(--ink-700); background: var(--card);
  border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 12px 14px; width: 100%;
  outline: none; box-shadow: none;
  transition: border-color var(--duration-micro) var(--ease-iteru), box-shadow var(--duration-micro) var(--ease-iteru);
  resize: vertical; box-sizing: border-box;
}
.field__input:focus { border-color: var(--nile-500); box-shadow: 0 0 0 3px var(--mist-100); }
textarea.field__input { min-height: 120px; }

/* ---------------------------------------------------------------- FOOTER --- */
.footer { background: var(--ink-band); color: var(--paper); }
.footer__inner { max-width: var(--content-max); margin: 0 auto; padding: 80px 32px 40px; display: flex; flex-direction: column; gap: 48px; }
.footer__wordmark { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); }
.footer__glyph { width: clamp(34px, 5vw, 62px); height: auto; flex: none; }
.footer__name { font-family: var(--font-display); font-weight: 700; font-size: clamp(48px, 8vw, 96px); letter-spacing: -0.02em; line-height: 1; color: var(--paper); }
.footer__name .tech { color: var(--nile-500); }
.footer__links { display: flex; flex-wrap: wrap; gap: 12px 28px; border-top: 1px solid rgba(247, 245, 240, 0.16); padding-top: 28px; }
.footer__links a { color: var(--ink-300); font-family: var(--font-body); font-weight: 400; font-size: 14px; transition: color var(--duration-micro) var(--ease-iteru); }
.footer__links a:hover { color: var(--paper); }
.footer__meta { display: flex; align-items: center; gap: 20px; justify-content: space-between; flex-wrap: wrap; }
.footer__copy { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--ink-300); direction: ltr; }
.footer__social { display: flex; align-items: center; gap: 16px; }
.footer__social a { color: var(--ink-300); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; transition: color var(--duration-micro) var(--ease-iteru); }
.footer__social a:hover { color: var(--paper); }

/* ------------------------------------------------------------- FAB / CTA --- */
.fab {
  position: fixed; inset-inline-end: clamp(16px, 2.6vw, 28px); inset-block-end: clamp(16px, 2.6vw, 28px);
  z-index: 80; display: inline-flex; align-items: center; gap: 11px; height: 56px; padding: 0 24px;
  background: var(--nile-700); color: var(--paper); border-radius: 999px;
  box-shadow: 0 12px 34px -10px rgba(10, 51, 45, 0.5), 0 3px 10px -2px rgba(19, 26, 23, 0.22);
  font-family: var(--font-body); font-weight: 500; font-size: 15px; line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: transform 0.35s var(--ease-iteru), background 0.35s var(--ease-iteru),
              box-shadow 0.35s var(--ease-iteru), opacity 0.35s var(--ease-iteru);
}
.fab:hover {
  background: var(--nile-800); transform: translateY(-3px);
  box-shadow: 0 18px 46px -12px rgba(10, 51, 45, 0.55), 0 4px 12px -2px rgba(19, 26, 23, 0.28);
}
.fab.is-hidden { opacity: 0; pointer-events: none; }

/* ----------------------------------------------------- PORTAL HAND-OFF --- */
.portal-go {
  position: fixed; inset: 0; z-index: 200; display: none; opacity: 0;
  align-items: center; justify-content: center; background: rgba(19, 26, 23, 0.46);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  transition: opacity 0.35s var(--ease-iteru);
}
.portal-go.is-open { display: flex; }
.portal-go__card {
  background: var(--card); border: 1px solid var(--hairline); border-radius: 18px;
  box-shadow: 0 26px 64px -18px rgba(19, 26, 23, 0.45); padding: 40px 46px;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  transform: translateY(10px) scale(0.985); transition: transform 0.4s var(--ease-iteru);
}
.portal-go__lockup { height: 30px; width: auto; display: block; }
.portal-go__status { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 14.5px; color: var(--ink-700); }
.portal-go__spin { display: inline-flex; width: 16px; height: 16px; }
.portal-go__spin svg { animation: itu-spin 0.8s linear infinite; }
.portal-go__track { width: 224px; height: 2px; background: var(--hairline); border-radius: 2px; overflow: hidden; }
.portal-go__bar { height: 100%; width: 6%; background: var(--nile-700); border-radius: 2px; transition: width 1s var(--ease-iteru); }
.portal-go__url { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--ink-300); }
@keyframes itu-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------- THE ITERU CURRENT --- */
/* The site's single signature motion element — a braided Nile river drawing
   itself down the page on scroll. Desktop (>=1240px) only. */
.itu-current-wrap { position: absolute; top: 0; left: 0; right: 0; bottom: -46px; pointer-events: none; z-index: 1; }
.itu-current { position: absolute; top: 0; bottom: 0; height: 100%; pointer-events: none; z-index: 0; }
@keyframes itu-flow { from { stroke-dashoffset: 2; } to { stroke-dashoffset: 0; } }

/* ----------------------------------------------------------- PRICING PAGE --- */
.pricing { max-width: var(--content-max); margin: 0 auto; padding: clamp(64px, 8vw, 110px) 32px clamp(80px, 10vw, 140px); display: flex; flex-direction: column; gap: 56px; }
.pricing__head { display: flex; flex-direction: column; gap: 24px; max-width: 820px; }
.pricing__title { margin: 0; font-size: clamp(42px, 6vw, 84px); line-height: var(--leading-display); letter-spacing: var(--tracking-display); font-weight: 600; color: var(--ink-900); text-wrap: balance; }
.pricing__sub { margin: 0; font-size: 17.5px; line-height: 1.7; color: var(--ink-500); max-width: 54ch; }
.plan { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-wrap: wrap; }
.plan__aside { flex: 1 1 320px; background: var(--mist-100); padding: clamp(36px, 4vw, 52px); display: flex; flex-direction: column; gap: 26px; justify-content: space-between; }
.plan__aside-top { display: flex; flex-direction: column; gap: 26px; }
.plan__brandrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.plan__lockup { height: 28px; width: auto; display: block; }
.plan__pitch { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2vw, 25px); line-height: 1.5; color: var(--nile-800); max-width: 24ch; text-wrap: balance; }
.plan__pricebox { display: flex; flex-direction: column; gap: 22px; }
.plan__price { display: flex; align-items: baseline; gap: 12px; }
.plan__amount { font-family: var(--font-mono); font-size: clamp(40px, 4vw, 52px); line-height: 1; color: var(--nile-800); }
.plan__period { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--nile-500); }
.plan__cta-wrap { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.plan__signup {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 28px;
  background: var(--nile-700); color: var(--paper); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-weight: 500; font-size: 15.5px; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: background 0.25s var(--ease-iteru);
}
.plan__signup:hover { background: var(--nile-800); }
.plan__note { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--nile-500); text-align: center; }
.plan__features { flex: 2 1 460px; padding: clamp(36px, 4vw, 52px); display: flex; flex-direction: column; gap: 24px; }
.plan__features-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--ink-500); }
.plan__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px 36px; }
.plan__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink-700); line-height: 1.55; }
.plan__list svg { flex: none; margin-top: 2px; }

/* --------------------------------------------------------------- REVEALS --- */
[data-reveal] { will-change: opacity, transform; }

/* ------------------------------------------------------------ RESPONSIVE --- */
@media (max-width: 1239px) {
  .itu-current-wrap, .itu-current { display: none !important; }
}
@media (max-width: 1023px) {
  .nav-links, .nav-actions { display: none; }
  .nav-burger { display: flex; }
  .float-nav { display: none !important; }
}
@media (max-width: 700px) {
  .section { padding-left: 24px; padding-right: 24px; }
  .hero { padding-left: 24px; padding-right: 24px; }
  .why-col { padding-inline: 0; border-inline-end: 0; border-top: 1px solid var(--hairline); padding-top: 24px; }
  .why-col:first-child { padding-top: 0; border-top: 0; }
  .product-card, .service-card { padding: 24px; }
}