/* ==========================================================
   FiXi — Official Website
   Revision 81
   ========================================================== */

:root {
  --blue: #2997ff;
  --blue-bright: #60b8ff;
  --blue-light: #eaf5ff;

  --black: #050505;
  --black-soft: #0a0b0d;

  --white: #ffffff;
  --surface: #f5f5f7;

  --text: #101114;
  --muted: #6e6e73;

  --line: rgba(0, 0, 0, 0.08);
  --line-dark: rgba(255, 255, 255, 0.11);

  --header-h: 64px;

  --radius: 26px;
  --radius-large: 36px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}


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

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;

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

  color: var(--text);
  background: var(--white);

  line-height: 1.5;

  overflow-x: hidden;
}

body.menu-lock {
  overflow: hidden;
}

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

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

button,
input,
textarea,
select {
  font: inherit;
}

button {
  color: inherit;
}

p {
  margin-top: 0;
}

.site-container {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}


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

h1,
h2,
h3 {
  margin-top: 0;

  font-weight: 700;

  letter-spacing: -0.045em;
}

.display {
  margin-bottom: 24px;

  font-size:
    clamp(
      3.8rem,
      7vw,
      7rem
    );

  line-height: 0.94;
}

.title-xl {
  margin-bottom: 22px;

  font-size:
    clamp(
      3rem,
      5.5vw,
      5.5rem
    );

  line-height: 0.98;
}

.title-lg {
  margin-bottom: 18px;

  font-size:
    clamp(
      2.25rem,
      4vw,
      4rem
    );

  line-height: 1;
}

.title-md {
  margin-bottom: 14px;

  font-size:
    clamp(
      1.65rem,
      2.8vw,
      2.5rem
    );

  line-height: 1.05;
}

.lead {
  max-width: 760px;

  color: var(--muted);

  font-size:
    clamp(
      1.12rem,
      1.8vw,
      1.4rem
    );

  line-height: 1.5;
}

.kicker {
  margin-bottom: 13px;

  color: var(--blue);

  font-size: 0.76rem;
  font-weight: 750;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}

.blue {
  color: var(--blue);
}

.dark-copy {
  color:
    rgba(
      255,
      255,
      255,
      0.58
    );
}


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

.site-header {
  position: sticky;

  top: 0;

  z-index: 1000;

  height: var(--header-h);

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

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

  -webkit-backdrop-filter:
    blur(24px)
    saturate(180%);

  backdrop-filter:
    blur(24px)
    saturate(180%);
}

.nav-shell {
  position: relative;

  display: flex;
  align-items: center;

  height: var(--header-h);
}


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

.brand {
  display: flex;
  align-items: center;

  height: var(--header-h);

  margin-left: -10px;
}

.brand-logo {
  width: auto;
  height: 82px;

  object-fit: contain;

  transition:
    transform 0.25s ease;
}

.brand:hover .brand-logo {
  transform:
    scale(1.02);
}


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

.desktop-nav {
  position: relative;

  display: flex;
  align-items: center;

  gap: 32px;

  height: 100%;

  margin:
    0
    0
    0
    auto;

  padding: 0;

  list-style: none;
}

.desktop-nav li {
  list-style: none;
}

.desktop-nav a {
  color: #242426;

  font-size: 0.92rem;
  font-weight: 520;

  transition:
    color 0.2s ease;
}

.desktop-nav a:hover,
.desktop-nav a.active {
  color: var(--blue);
}

.nav-indicator {
  position: absolute;

  bottom: 9px;
  left: 0;

  width: 0;
  height: 2px;

  border-radius: 999px;

  background: var(--blue);

  opacity: 0;

  pointer-events: none;

  transition:
    left
      0.34s
      var(--ease),

    width
      0.34s
      var(--ease),

    opacity
      0.18s
      ease;
}


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

.dot-menu-button,
.mobile-menu {
  display: none;
}


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

.home-hero {
  width: 100%;

  background: #000;

  overflow: hidden;
}

.hero-desktop {
  display: block;

  width: 100%;

  height:
    calc(
      100svh -
      var(--header-h)
    );

  object-fit: contain;

  background: #000;
}

.hero-mobile {
  display: none;
}


/* ==========================================================
   GENERAL
   ========================================================== */

.section {
  padding:
    clamp(
      64px,
      5.5vw,
      88px
    )
    0;
}

.section-surface {
  background: var(--surface);
}

.section-black {
  background: var(--black);
  color: white;
}

.center {
  text-align: center;
}

.center .lead {
  margin-inline: auto;
}


/* ==========================================================
   STATEMENT
   ========================================================== */

.statement {
  padding:
    clamp(
      68px,
      6vw,
      94px
    )
    0;
}

.statement-inner {
  max-width: 1050px;
}

.statement .display {
  max-width: 1000px;
}

.statement .lead {
  max-width: 680px;

  margin-top: 28px;
}


/* ==========================================================
   STORY
   ========================================================== */

.story {
  padding:
    clamp(
      72px,
      6.5vw,
      96px
    )
    0;

  background: var(--black);

  color: white;
}

.story-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1.1fr);

  gap:
    clamp(
      48px,
      6vw,
      82px
    );

  align-items: center;
}

.story-copy {
  max-width: 520px;
}

.story-step {
  padding: 23px 0;

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

.story-step:first-of-type {
  border-top:
    1px solid
    var(--line-dark);
}

.story-number {
  display: block;

  margin-bottom: 7px;

  color: var(--blue);

  font-size: 0.73rem;
  font-weight: 750;

  letter-spacing: 0.11em;
}

.story-step h3 {
  margin-bottom: 6px;

  font-size:
    clamp(
      1.65rem,
      2.4vw,
      2.3rem
    );
}

.story-step p {
  margin-bottom: 0;

  color:
    rgba(
      255,
      255,
      255,
      0.55
    );
}


/* ==========================================================
   LIVE SCAN
   ========================================================== */

.scan-demo {
  position: relative;

  isolation: isolate;

  min-height: 540px;

  padding: 28px;

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

  border-radius: 38px;

  background:
    radial-gradient(
      circle at 50% 46%,
      rgba(41, 151, 255, 0.16),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      #08101b,
      #020305 70%
    );

  overflow: hidden;

  box-shadow:
    0 34px 90px
    rgba(
      0,
      0,
      0,
      0.38
    );
}


/* LIVE SCAN label */

.scan-label {
  position: relative;

  z-index: 7;

  display: flex;
  align-items: center;

  gap: 10px;

  color:
    rgba(
      255,
      255,
      255,
      0.82
    );

  font-size: 0.79rem;
  font-weight: 720;

  letter-spacing: 0.11em;
}

.live-dot {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #45a6ff;

  box-shadow:
    0 0 14px
    #2997ff;
}


/* scan grid / frame */

.scan-frame {
  position: absolute;

  z-index: 1;

  inset:
    84px
    56px
    68px;

  border:
    1px solid
    rgba(
      41,
      151,
      255,
      0.72
    );

  background:
    linear-gradient(
      rgba(
        41,
        151,
        255,
        0.045
      )
      1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(
        41,
        151,
        255,
        0.045
      )
      1px,
      transparent 1px
    );

  background-size:
    36px 36px;

  box-shadow:
    inset
    0 0 50px
    rgba(
      41,
      151,
      255,
      0.035
    );
}


/* ==========================================================
   COFFEE MACHINE
   IMPORTANT:
   BELOW scan effect
   ========================================================== */

.scan-object {
  position: absolute;

  z-index: 2;

  top: 52%;
  left: 50%;

  width: auto;

  height:
    min(
      82%,
      455px
    );

  max-width: 80%;

  object-fit: contain;
  object-position: center;

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

  filter:
    contrast(1.04)
    saturate(0.98)

    drop-shadow(
      0 26px 36px
      rgba(
        0,
        0,
        0,
        0.52
      )
    )

    drop-shadow(
      0 0 34px
      rgba(
        41,
        151,
        255,
        0.10
      )
    );

  pointer-events: none;
  user-select: none;
}


/* ==========================================================
   REAL SCAN EFFECT
   THIS IS ABOVE THE PHOTO
   ========================================================== */

.scan-line {
  position: absolute;

  z-index: 5;

  left: 8%;
  right: 8%;

  top: 22%;

  height: 2px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(
        96,
        184,
        255,
        0.30
      )
      7%,
      #68c4ff 24%,
      #b8e7ff 50%,
      #68c4ff 76%,
      rgba(
        96,
        184,
        255,
        0.30
      )
      93%,
      transparent 100%
    );

  box-shadow:
    0 0 5px
    rgba(
      129,
      211,
      255,
      0.95
    ),

    0 0 18px
    rgba(
      41,
      151,
      255,
      0.95
    ),

    0 0 42px
    rgba(
      41,
      151,
      255,
      0.54
    ),

    0 0 80px
    rgba(
      41,
      151,
      255,
      0.20
    );

  mix-blend-mode: screen;

  pointer-events: none;

  animation:
    scanMove
    3.8s
    cubic-bezier(
      0.45,
      0.05,
      0.55,
      0.95
    )
    infinite;
}


/* blue illuminated area immediately ABOVE the line */

.scan-line::before {
  content: "";

  position: absolute;

  z-index: -1;

  left: 0;
  right: 0;

  bottom: 0;

  height: 105px;

  background:
    linear-gradient(
      180deg,
      rgba(
        41,
        151,
        255,
        0
      )
      0%,

      rgba(
        41,
        151,
        255,
        0.015
      )
      26%,

      rgba(
        41,
        151,
        255,
        0.06
      )
      58%,

      rgba(
        70,
        174,
        255,
        0.22
      )
      100%
    );

  filter:
    blur(1px);

  opacity: 0.95;
}


/* core light */

.scan-line::after {
  content: "";

  position: absolute;

  left: 12%;
  right: 12%;

  top: -3px;

  height: 8px;

  border-radius: 50%;

  background:
    rgba(
      94,
      196,
      255,
      0.48
    );

  filter:
    blur(7px);

  opacity: 0.85;
}


@keyframes scanMove {

  0% {
    top: 22%;

    opacity: 0.28;
  }

  7% {
    opacity: 1;
  }

  50% {
    top: 75%;

    opacity: 1;
  }

  93% {
    opacity: 1;
  }

  100% {
    top: 22%;

    opacity: 0.28;
  }

}


/* result */

.scan-result {
  position: absolute;

  z-index: 7;

  right: 22px;
  bottom: 22px;

  padding:
    15px
    18px;

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

  border-radius: 18px;

  background:
    rgba(
      7,
      9,
      14,
      0.84
    );

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

  backdrop-filter:
    blur(20px);

  color: white;

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

.scan-result strong {
  display: block;

  margin-bottom: 3px;

  font-size: 0.98rem;
}

.scan-result span {
  color:
    rgba(
      255,
      255,
      255,
      0.53
    );

  font-size: 0.81rem;
}


/* ==========================================================
   BENTO
   ========================================================== */

.bento-section {
  padding:
    clamp(
      72px,
      6.5vw,
      96px
    )
    0;
}

.bento-heading {
  max-width: 900px;

  margin-bottom: 52px;
}

.bento {
  display: grid;

  grid-template-columns:
    repeat(12, 1fr);

  gap: 18px;
}

.bento-card {
  position: relative;

  min-height: 300px;

  padding: 34px;

  border-radius: 32px;

  background: var(--surface);

  overflow: hidden;
}

.bento-card.large {
  grid-column:
    span 7;
}

.bento-card.medium {
  grid-column:
    span 5;
}

.bento-card.half {
  grid-column:
    span 6;
}

.bento-card.dark {
  background: #090a0c;

  color: white;
}

.bento-card.blue-card {
  background:
    linear-gradient(
      145deg,
      #e2f1ff,
      #f5faff
    );
}

.bento-card h3 {
  max-width: 460px;

  margin-bottom: 15px;

  font-size:
    clamp(
      1.9rem,
      3vw,
      3rem
    );

  line-height: 1;
}

.bento-card p {
  max-width: 480px;

  color: var(--muted);

  font-size: 1rem;
}

.bento-card.dark p {
  color:
    rgba(
      255,
      255,
      255,
      0.54
    );
}

.big-symbol {
  position: absolute;

  right: 26px;
  bottom: 0;

  color:
    rgba(
      41,
      151,
      255,
      0.17
    );

  font-size: 9rem;
  font-weight: 750;

  line-height: 1;
}


/* ==========================================================
   TRUST
   ========================================================== */

.trust-section {
  padding:
    clamp(
      72px,
      6.5vw,
      96px
    )
    0;

  text-align: center;
}

.trust-section .site-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.trust-section .title-xl {
  max-width: 1100px;

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

.trust-section .lead {
  max-width: 820px;

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


/* ==========================================================
   MANIFESTO
   ========================================================== */

.manifesto {
  display: flex;
  align-items: center;

  min-height: 0;

  padding:
    clamp(
      82px,
      7vw,
      110px
    )
    0;

  background: #000;

  color: white;
}

.manifesto h2 {
  max-width: 1100px;

  margin: 0;

  font-size:
    clamp(
      3.4rem,
      6.5vw,
      6.7rem
    );

  line-height: 0.95;

  letter-spacing: -0.055em;
}

.manifesto p {
  max-width: 620px;

  margin-top: 30px;
  margin-bottom: 0;

  color:
    rgba(
      255,
      255,
      255,
      0.52
    );

  font-size:
    clamp(
      1.08rem,
      1.8vw,
      1.35rem
    );
}


/* ==========================================================
   FINAL CTA
   ========================================================== */

.final-cta {
  padding:
    clamp(
      68px,
      6vw,
      92px
    )
    0;

  text-align: center;
}

.final-cta .site-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.final-cta .title-xl {
  max-width: 900px;

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

.final-cta .lead {
  margin-left: auto;
  margin-right: auto;
}


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

.button-row {
  display: flex;
  flex-wrap: wrap;

  gap: 12px;

  margin-top: 30px;
}

.final-cta .button-row,
.center .button-row {
  justify-content: center;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 48px;

  padding:
    11px
    21px;

  border:
    1px solid
    transparent;

  border-radius: 999px;

  background: var(--blue);
  color: white;

  font-size: 0.94rem;
  font-weight: 620;

  cursor: pointer;

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

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

  filter:
    brightness(1.04);
}

.button-secondary {
  border-color:
    rgba(
      41,
      151,
      255,
      0.24
    );

  background: transparent;
  color: var(--blue);
}


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

.page-hero {
  padding:
    clamp(
      68px,
      6vw,
      94px
    )
    0
    58px;

  text-align: center;
}

.page-hero.dark {
  background: #000;

  color: white;
}

.page-hero .site-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-hero .display {
  max-width: 1120px;

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

  text-wrap: balance;
}

.page-hero .lead {
  max-width: 760px;

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

  text-wrap: balance;
}


/* ==========================================================
   PRODUCT FEATURES
   ========================================================== */

.feature-split {
  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1.1fr);

  gap:
    clamp(
      48px,
      6vw,
      80px
    );

  align-items: center;

  padding:
    clamp(
      48px,
      5vw,
      70px
    )
    0;
}

.feature-split.reverse {
  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(0, 0.9fr);
}

.feature-split.reverse
.feature-copy {
  order: 2;
}

.feature-copy {
  max-width: 530px;
}

.feature-copy p {
  color: var(--muted);

  font-size: 1.07rem;
}

.feature-visual {
  position: relative;

  isolation: isolate;

  min-height: 390px;

  border-radius: 32px;

  background:
    linear-gradient(
      145deg,
      #f5f5f7,
      #e9ebef
    );

  overflow: hidden;
}

.feature-visual.dark {
  background:
    radial-gradient(
      circle at center,
      #142438,
      #050608 70%
    );
}


/* ==========================================================
   PRODUCT SCAN
   ========================================================== */

.visual-scan-box {
  position: absolute;

  z-index: 1;

  inset: 48px;

  border:
    1px solid
    rgba(
      41,
      151,
      255,
      0.65
    );

  background:
    linear-gradient(
      rgba(
        41,
        151,
        255,
        0.035
      )
      1px,
      transparent
      1px
    ),

    linear-gradient(
      90deg,
      rgba(
        41,
        151,
        255,
        0.035
      )
      1px,
      transparent
      1px
    );

  background-size:
    30px 30px;

  box-shadow:
    0 0 42px
    rgba(
      41,
      151,
      255,
      0.08
    );
}

.feature-scan-object {
  position: absolute;

  z-index: 2;

  top: 51%;
  left: 50%;

  width: auto;
  height: 82%;

  max-width: 80%;

  object-fit: contain;

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

  filter:
    contrast(1.04)
    saturate(0.98)

    drop-shadow(
      0 18px 30px
      rgba(
        0,
        0,
        0,
        0.40
      )
    );

  pointer-events: none;
}


/* ==========================================================
   DIAGNOSIS
   ========================================================== */

.diagnosis-stack {
  position: absolute;

  top: 50%;
  left: 50%;

  width:
    min(
      78%,
      420px
    );

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

.diagnosis-card {
  margin: 10px 0;

  padding:
    18px
    20px;

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

  border-radius: 18px;

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

  box-shadow:
    0 14px 40px
    rgba(
      0,
      0,
      0,
      0.07
    );

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

  backdrop-filter:
    blur(15px);
}

.diagnosis-card strong {
  display: block;

  margin-bottom: 3px;
}

.diagnosis-card span {
  color: var(--muted);

  font-size: 0.87rem;
}

.diagnosis-card:nth-child(2) {
  transform:
    translateX(25px);
}


/* ==========================================================
   AR
   ========================================================== */

.ar-target {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 190px;
  height: 190px;

  border:
    1px solid
    rgba(
      41,
      151,
      255,
      0.5
    );

  border-radius: 50%;

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

  box-shadow:
    0 0 80px
    rgba(
      41,
      151,
      255,
      0.15
    );
}

.ar-target::before,
.ar-target::after {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  background: var(--blue);

  opacity: 0.75;

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

.ar-target::before {
  width: 270px;
  height: 1px;
}

.ar-target::after {
  width: 1px;
  height: 270px;
}

.ar-center {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 18px;
  height: 18px;

  border-radius: 50%;

  background: var(--blue);

  box-shadow:
    0 0 25px
    var(--blue);

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


/* ==========================================================
   TECH
   ========================================================== */

.tech-grid {
  display: grid;

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

  gap: 18px;
}

.tech-block {
  position: relative;

  min-height: 270px;

  padding: 32px;

  border-radius: 30px;

  background: var(--surface);

  overflow: hidden;
}

.tech-block.dark {
  background: #08090b;

  color: white;
}

.tech-block h3 {
  max-width: 470px;

  font-size: 1.9rem;
}

.tech-block p {
  max-width: 480px;

  color: var(--muted);
}

.tech-block.dark p {
  color:
    rgba(
      255,
      255,
      255,
      0.54
    );
}

.tech-decoration {
  position: absolute;

  right: -20px;
  bottom: -40px;

  width: 180px;
  height: 180px;

  border-radius: 50%;

  border:
    1px solid
    rgba(
      41,
      151,
      255,
      0.3
    );

  box-shadow:
    0 0 70px
    rgba(
      41,
      151,
      255,
      0.12
    );
}


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

.contact-layout {
  display: grid;

  grid-template-columns:
    0.85fr
    1.15fr;

  gap:
    clamp(
      50px,
      7vw,
      90px
    );

  align-items: start;
}

.contact-side {
  position: sticky;

  top: 105px;
}

.contact-reason {
  padding: 20px 0;

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

.contact-reason:first-of-type {
  border-top:
    1px solid
    var(--line);
}

.contact-reason strong {
  display: block;

  margin-bottom: 3px;
}

.contact-reason span {
  color: var(--muted);
}

.contact-form {
  display: grid;

  gap: 17px;

  padding: 34px;

  border-radius: 30px;

  background: var(--surface);
}

.field label {
  display: block;

  margin-bottom: 7px;

  font-size: 0.87rem;
  font-weight: 620;
}

.field input,
.field textarea,
.field select {
  width: 100%;

  padding:
    14px
    15px;

  border:
    1px solid
    rgba(
      0,
      0,
      0,
      0.1
    );

  border-radius: 14px;

  outline: none;

  background: white;

  font-size: 16px;

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

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--blue);

  box-shadow:
    0 0 0 4px
    rgba(
      41,
      151,
      255,
      0.1
    );
}

.field textarea {
  resize: vertical;
}


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

.site-footer {
  padding: 42px 0;

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

  color: var(--muted);

  font-size: 0.87rem;
}

.footer-row {
  display: flex;
  justify-content: space-between;

  gap: 20px;
}


/* ==========================================================
   REVEAL
   ========================================================== */

.motion-ready .reveal {
  opacity: 0;

  transform:
    translateY(22px);

  transition:
    opacity
      0.7s
      var(--ease),

    transform
      0.7s
      var(--ease);
}

.motion-ready
.reveal.visible {
  opacity: 1;

  transform:
    translateY(0);
}


/* ==========================================================
   iPAD
   ========================================================== */

@media
(min-width: 701px)
and
(max-width: 1000px) {

  .site-container {
    width:
      min(
        94%,
        920px
      );
  }

  .brand-logo {
    height: 76px;
  }

  .desktop-nav {
    gap: 21px;
  }

  .desktop-nav a {
    font-size: 0.88rem;
  }

  .story-grid {
    gap: 45px;
  }

  .scan-demo {
    min-height: 470px;
  }

  .scan-object {
    height: 78%;
  }

  .bento-card.large,
  .bento-card.medium,
  .bento-card.half {
    grid-column:
      span 6;
  }

  .feature-split {
    gap: 45px;
  }

  .feature-visual {
    min-height: 350px;
  }

}


/* ==========================================================
   iPHONE
   ========================================================== */

@media
(max-width: 700px) {

  :root {
    --header-h: 60px;
  }


  /* ========================================================
     BASE
     ======================================================== */

  .site-container {
    width:
      calc(
        100% -
        34px
      );
  }

  .display {
    font-size:
      clamp(
        3rem,
        14vw,
        4.3rem
      );
  }

  .title-xl {
    font-size:
      clamp(
        2.65rem,
        11vw,
        3.85rem
      );
  }

  .title-lg {
    font-size:
      clamp(
        2.1rem,
        9.5vw,
        3rem
      );
  }

  .lead {
    font-size: 1.06rem;
  }


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

  .brand-logo {
    height: 70px;
  }

  .desktop-nav {
    display: none;
  }


  /* ========================================================
     9 DOT MENU
     APP-LIKE
     ======================================================== */

  .dot-menu-button {
    position: relative;

    z-index: 1100;

    display: block;

    width: 46px;
    height: 46px;

    margin-left: auto;

    padding: 0;

    border: 0;

    border-radius: 16px;

    background:
      rgba(
        239,
        239,
        241,
        0.96
      );

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

    cursor: pointer;

    overflow: visible;

    -webkit-tap-highlight-color:
      transparent;
  }


  .dot-menu-button span {
    --x: 0px;
    --y: 0px;

    --scatter-x: 0px;
    --scatter-y: 0px;
    --menu-x: 0px;
    --menu-y: 0px;

    position: absolute;

    left: 50%;
    top: 50%;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #171719;

    transform:
      translate(
        -50%,
        -50%
      )
      translate(
        var(--x),
        var(--y)
      );
  }


  /* normal 3 × 3 */

  .dot-menu-button
  span:nth-child(1) {
    --x: -10px;
    --y: -10px;
    --scatter-x: -18px;
    --scatter-y: -13px;
    --menu-x: calc(-100vw + 64px);
    --menu-y: -6px;
  }

  .dot-menu-button
  span:nth-child(2) {
    --x: 0px;
    --y: -10px;
    --scatter-x: -5px;
    --scatter-y: -19px;
    --menu-x: calc(-50vw + 40px);
    --menu-y: -6px;
  }

  .dot-menu-button
  span:nth-child(3) {
    --x: 10px;
    --y: -10px;
    --scatter-x: 15px;
    --scatter-y: -15px;
    --menu-x: 16px;
    --menu-y: -6px;
  }

  .dot-menu-button
  span:nth-child(4) {
    --x: -10px;
    --y: 0px;
    --scatter-x: -21px;
    --scatter-y: 1px;
    --menu-x: calc(-100vw + 64px);
    --menu-y: calc(50dvh - 30px);
  }

  .dot-menu-button
  span:nth-child(5) {
    --x: 0px;
    --y: 0px;
    --scatter-x: -3px;
    --scatter-y: 3px;
    --menu-x: calc(-50vw + 40px);
    --menu-y: calc(50dvh - 30px);
  }

  .dot-menu-button
  span:nth-child(6) {
    --x: 10px;
    --y: 0px;
    --scatter-x: 19px;
    --scatter-y: 2px;
    --menu-x: 16px;
    --menu-y: calc(50dvh - 30px);
  }

  .dot-menu-button
  span:nth-child(7) {
    --x: -10px;
    --y: 10px;
    --scatter-x: -16px;
    --scatter-y: 16px;
    --menu-x: calc(-100vw + 64px);
    --menu-y: calc(100dvh - 54px);
  }

  .dot-menu-button
  span:nth-child(8) {
    --x: 0px;
    --y: 10px;
    --scatter-x: 2px;
    --scatter-y: 20px;
    --menu-x: calc(-50vw + 40px);
    --menu-y: calc(100dvh - 54px);
  }

  .dot-menu-button
  span:nth-child(9) {
    --x: 10px;
    --y: 10px;
    --scatter-x: 18px;
    --scatter-y: 15px;
    --menu-x: 16px;
    --menu-y: calc(100dvh - 54px);
  }


  @keyframes dotsScatter {

    0% {
      opacity: 1;

      transform:
        translate(-50%, -50%)
        translate(var(--x), var(--y))
        scale(1);
    }

    100% {
      opacity: 1;

      transform:
        translate(-50%, -50%)
        translate(var(--menu-x), var(--menu-y))
        scale(1);
    }

  }


  @keyframes dotsGather {

    0% {
      opacity: 1;

      transform:
        translate(-50%, -50%)
        translate(var(--menu-x), var(--menu-y))
        scale(1);
    }

    100% {
      opacity: 1;

      transform:
        translate(-50%, -50%)
        translate(var(--x), var(--y))
        scale(1);
    }

  }


  @keyframes dotBackgroundOut {

    0% {
      background:
        rgba(
          239,
          239,
          241,
          0.96
        );

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

      transform:
        scale(1);
    }

    55% {
      background:
        rgba(
          239,
          239,
          241,
          0.80
        );

      transform:
        scale(0.94);
    }

    100% {
      background:
        rgba(
          7,
          7,
          8,
          0
        );

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

      transform:
        scale(0.88);
    }

  }


  @keyframes dotBackgroundIn {

    0% {
      background:
        rgba(
          7,
          7,
          8,
          0
        );

      transform:
        scale(0.88);
    }

    45% {
      background:
        rgba(
          239,
          239,
          241,
          0.42
        );

      transform:
        scale(0.94);
    }

    100% {
      background:
        rgba(
          239,
          239,
          241,
          0.96
        );

      transform:
        scale(1);
    }

  }


  .dot-menu-button
  .dot-delay-1 {
    animation-delay: 0ms;
  }

  .dot-menu-button
  .dot-delay-2 {
    animation-delay: 15ms;
  }

  .dot-menu-button
  .dot-delay-3 {
    animation-delay: 30ms;
  }


  .dot-menu-button.dots-scattering {
    animation:
      dotBackgroundOut
      0.30s
      var(--ease)
      both;
  }


  .dot-menu-button.dots-scattering
  span {
    animation:
      dotsScatter
      0.665s
      cubic-bezier(0.22, 1, 0.36, 1)
      both;
  }




  .dot-menu-button.dots-gathering {
    animation:
      dotBackgroundIn
      0.34s
      var(--ease)
      both;
  }


  .dot-menu-button.dots-gathering
  span {
    animation:
      dotsGather
      0.40s
      cubic-bezier(0.22, 1, 0.36, 1)
      both;
  }




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

  .mobile-menu {
    position: fixed;

    inset: 0;

    z-index: 3000;

    display: block;

    width: 100%;
    height: 100dvh;

    background:
      rgba(
        7,
        7,
        8,
        0.985
      );

    color: white;

    visibility: hidden;

    pointer-events: none;

    -webkit-clip-path:
      circle(
        0px
        at
        calc(100% - 40px)
        30px
      );

    clip-path:
      circle(
        0px
        at
        calc(100% - 40px)
        30px
      );

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

    backdrop-filter:
      blur(20px);

    transition:
      -webkit-clip-path
        0.52s
        var(--ease),

      clip-path
        0.52s
        var(--ease),

      visibility
        0s
        linear
        0.52s;
  }


  .mobile-menu.open {
    visibility: visible;

    pointer-events: auto;

    -webkit-clip-path:
      circle(
        150vmax
        at
        calc(100% - 40px)
        30px
      );

    clip-path:
      circle(
        150vmax
        at
        calc(100% - 40px)
        30px
      );

    transition:
      -webkit-clip-path
        0.58s
        var(--ease),

      clip-path
        0.58s
        var(--ease),

      visibility
        0s;
  }


  .mobile-menu-inner {
    min-height: 100dvh;

    padding:
      max(
        21px,
        env(
          safe-area-inset-top
        )
      )
      22px

      calc(
        32px +
        env(
          safe-area-inset-bottom
        )
      );

    opacity: 0;

    transform:
      translateY(12px)
      scale(0.985);

    transition:
      opacity
        0.24s
        ease,

      transform
        0.36s
        var(--ease);
  }


  .mobile-menu.open
  .mobile-menu-inner {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);

    transition-delay:
      0.14s;
  }


  .mobile-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 46px;

    margin-bottom: 42px;
  }


  .mobile-menu-brand {
    font-size: 1.1rem;
    font-weight: 690;

    letter-spacing: -0.035em;
  }


  .mobile-menu-close {
    padding:
      8px
      0
      8px
      20px;

    border: 0;

    background: transparent;

    color:
      rgba(
        255,
        255,
        255,
        0.72
      );

    font-size: 0.88rem;

    cursor: pointer;
  }


  .mobile-menu-label {
    margin-bottom: 21px;

    color:
      rgba(
        255,
        255,
        255,
        0.28
      );

    font-size: 0.71rem;
    font-weight: 650;

    letter-spacing: 0.14em;

    text-transform: uppercase;
  }


  .mobile-menu-links {
    display: grid;
  }


  .mobile-menu-link {
    position: relative;

    padding:
      15px
      0;

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

    color:
      rgba(
        255,
        255,
        255,
        0.84
      );

    font-size:
      clamp(
        1.75rem,
        8.5vw,
        2.4rem
      );

    font-weight: 640;

    letter-spacing: -0.045em;

    opacity: 0;

    transform:
      translateY(11px);

    transition:
      opacity
        0.25s
        ease,

      transform
        0.31s
        var(--ease);
  }


  .mobile-menu-link:first-child {
    border-top:
      1px solid
      rgba(
        255,
        255,
        255,
        0.11
      );
  }


  .mobile-menu-link::after {
    content: "↗";

    position: absolute;

    top: 50%;
    right: 0;

    color:
      rgba(
        255,
        255,
        255,
        0.25
      );

    font-size: 0.95rem;

    transform:
      translateY(-50%);
  }


  .mobile-menu-link.active {
    color: var(--blue);
  }


  .mobile-menu.open
  .mobile-menu-link {
    opacity: 1;

    transform:
      translateY(0);
  }


  .mobile-menu.open
  .mobile-menu-link:nth-child(1) {
    transition-delay: 0.18s;
  }

  .mobile-menu.open
  .mobile-menu-link:nth-child(2) {
    transition-delay: 0.22s;
  }

  .mobile-menu.open
  .mobile-menu-link:nth-child(3) {
    transition-delay: 0.26s;
  }

  .mobile-menu.open
  .mobile-menu-link:nth-child(4) {
    transition-delay: 0.30s;
  }


  .mobile-menu-bottom {
    margin-top: 40px;

    color:
      rgba(
        255,
        255,
        255,
        0.25
      );

    font-size: 0.77rem;
  }


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

  .hero-desktop {
    display: none;
  }

  .hero-mobile {
    display: block;

    width: 100%;
    height: auto;

    background: #000;
  }

  .hero-desktop.mobile-fallback {
    display: block;

    width: 100%;
    height: auto;
  }


  /* ========================================================
     SPACING
     ======================================================== */

  .section {
    padding: 44px 0;
  }

  .statement {
    padding:
      54px
      0
      60px;
  }

  .statement .lead {
    margin-top: 22px;
  }

  .story {
    padding: 54px 0;
  }

  .story-grid {
    grid-template-columns:
      1fr;

    gap: 32px;
  }

  .story-copy {
    max-width: none;
  }


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

  .scan-demo {
    min-height: 480px;

    padding: 23px;

    border-radius: 30px;
  }

  .scan-frame {
    inset:
      74px
      27px
      64px;
  }

  .scan-object {
    top: 52%;

    height: 74%;

    max-width: 88%;
  }

  .scan-line {
    left: 6%;
    right: 6%;
  }

  .scan-line::before {
    height: 82px;
  }

  .scan-result {
    right: 14px;
    bottom: 14px;

    padding:
      14px
      16px;
  }


  /* ========================================================
     BENTO
     ======================================================== */

  .bento-section {
    padding: 56px 0;
  }

  .bento-heading {
    margin-bottom: 38px;
  }

  .bento {
    grid-template-columns:
      1fr;

    gap: 13px;
  }

  .bento-card.large,
  .bento-card.medium,
  .bento-card.half {
    grid-column: auto;
  }

  .bento-card {
    min-height: 250px;

    padding: 26px;

    border-radius: 26px;
  }


  /* ========================================================
     TRUST
     ======================================================== */

  .trust-section {
    padding: 58px 0;
  }


  /* ========================================================
     MANIFESTO
     ======================================================== */

  .manifesto {
    min-height: 0;

    padding: 62px 0;
  }

  .manifesto h2 {
    font-size:
      clamp(
        3rem,
        13vw,
        4.5rem
      );
  }


  /* ========================================================
     FINAL
     ======================================================== */

  .final-cta {
    padding: 58px 0;
  }


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

  .button-row {
    flex-direction: column;

    width: 100%;
  }

  .button {
    width: 100%;

    min-height: 50px;
  }


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

  .page-hero {
    padding:
      54px
      0
      40px;
  }


  /* ========================================================
     FEATURES
     ======================================================== */

  .feature-split,
  .feature-split.reverse {
    grid-template-columns:
      1fr;

    gap: 26px;

    padding: 42px 0;
  }

  .feature-split.reverse
  .feature-copy {
    order: 0;
  }

  .feature-visual {
    min-height: 330px;

    border-radius: 26px;
  }

  .feature-scan-object {
    height: 80%;

    max-width: 86%;
  }

  .feature-visual
  .scan-line {
    left: 8%;
    right: 8%;
  }


  /* ========================================================
     TECH
     ======================================================== */

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

  .tech-block {
    min-height: 235px;

    padding: 26px;

    border-radius: 26px;
  }


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

  .contact-layout {
    grid-template-columns:
      1fr;

    gap: 40px;
  }

  .contact-side {
    position: static;
  }

  .contact-form {
    padding: 23px;

    border-radius: 25px;
  }


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

  .site-footer {
    padding: 34px 0;
  }

  .footer-row {
    flex-direction: column;

    gap: 5px;
  }

}


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

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

  *,
  *::before,
  *::after {
    animation: none !important;

    transition: none !important;
  }

}

/* =========================
   GUIDA AR MOBILE — FIX
   ========================= */

@media (max-width: 700px) {
  .guide-ar-visual {
    height: 430px;
    aspect-ratio: auto;
    border-radius: 26px;
    overflow: hidden;
  }

  .guide-ar-image {
    width: 100%;
    height: 100%;
    max-width: none;
    padding: 0;
    object-fit: cover;
    object-position: center 42%;
    transform: scale(1.08);
    transform-origin: center;
  }
}