/* AI Software Development: public website. Tokens live in base.css. */
.wrap { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 40px; }

/* ---- Header ---- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  height: 84px; display: flex; align-items: center;
  background: linear-gradient(180deg, rgba(3, 12, 20, 0.75), rgba(3, 12, 20, 0));
  transition: background-color .25s ease, border-color .25s ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled { background: rgba(3, 12, 20, 0.94); border-bottom-color: var(--border); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s6); }
.site-nav { display: flex; align-items: center; gap: 30px; }
.site-nav a:not(.btn) {
  color: var(--text); text-decoration: none; font-size: 15px; font-weight: 500;
  min-height: 44px; display: inline-flex; align-items: center; position: relative;
}
.site-nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px;
  background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.site-nav a:not(.btn):hover::after, .site-nav a:not(.btn):focus-visible::after { transform: scaleX(1); }
.site-nav__cta { margin-left: 10px; border-radius: 999px; padding: 8px 20px; min-height: 42px; }
.nav-toggle, .site-nav__close {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: rgba(7, 27, 41, 0.7); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer;
}
.nav-scrim { position: fixed; inset: 0; background: rgba(1, 6, 11, 0.6); z-index: 40; }
/* The phone drawer lives inside the fixed header (its own stacking context at 30), so with the scrim at 40
   the open menu was dimmed and could not be tapped. While the drawer is open the header rides above the
   scrim (and the EVA launcher at 35). Found by the final Jason's-eyes pass, 2026-10-13. */
.site-header:has(.site-nav.is-open) { z-index: 60; }

/* ---- Hero ---- */
.hero {
  position: relative; min-height: 760px; height: min(100vh, 840px);
  display: flex; align-items: center; background: var(--bg);
}
.hero__scene { z-index: 0; }
.hero > picture { z-index: 1; }
.hero__img { object-position: 65% center; }
.hero__globe {
  position: absolute; z-index: 2; right: 9%; top: 50%; transform: translateY(-46%);
  width: min(38vw, 520px); aspect-ratio: 1;
}
.hero.has-art .hero__globe { display: none; }
.hero__globe .globe { width: 100%; height: 100%; }
.hero__shade {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 12, 20, 0.92) 0%, rgba(3, 12, 20, 0.72) 30%, rgba(3, 12, 20, 0.15) 55%, rgba(3, 12, 20, 0) 70%),
    linear-gradient(0deg, var(--bg) 0%, rgba(3, 12, 20, 0) 22%);
}
.hero__content { position: relative; z-index: 4; padding-top: 60px; }
.hero__content > * { max-width: 46%; }
.hero__title {
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
  font-size: clamp(40px, 5.6vw, 80px); line-height: 1.02; letter-spacing: -0.015em;
  margin: 22px 0 20px; max-width: 48% !important;
}
.hero__title span { display: block; white-space: nowrap; }
.hero__title em { font-style: normal; color: var(--cyan); text-shadow: 0 0 28px rgba(52, 200, 244, 0.45); }
.hero__lede { font-size: 19px; color: var(--text); max-width: 46%; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; max-width: none !important; }
.hero__ctas .btn { min-width: 168px; }


/* ---- Service strip ---- */
.services-strip { position: relative; z-index: 5; margin-top: -86px; padding-bottom: 24px; }
.services-strip__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.svc-card {
  display: grid; grid-template-columns: 44% 1fr; gap: 18px; align-items: center;
  padding: 12px; min-height: 132px;
  background: rgba(7, 27, 41, 0.86); border: 1px solid var(--border); border-radius: var(--r-lg);
  color: var(--text); text-decoration: none; backdrop-filter: blur(10px);
  transition: border-color .2s ease, transform .2s ease, background-color .2s ease;
}
.svc-card:hover { border-color: var(--outline-active); background: rgba(11, 35, 52, 0.92); }
.svc-card:hover .svc-card__go { transform: translateX(4px); color: var(--highlight); }
.svc-card__art { aspect-ratio: 16 / 10; border-radius: var(--r-md); border: 1px solid rgba(38, 115, 152, 0.5); }
.illo { background: radial-gradient(circle at 50% 40%, #0C3150, #061827 70%); display: flex; align-items: center; justify-content: center; }
.illo svg { width: 100%; height: 100%; }
.svc-card__title { font-size: 19px; font-weight: 600; margin-bottom: 6px; }
.svc-card__body p { color: var(--text-2); font-size: 14px; line-height: 1.45; }
.svc-card__go { margin-top: 12px; color: var(--cyan); transition: transform .2s ease; }

/* ---- Sections ---- */
.section { padding: 112px 0; position: relative; }
.section__title { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; margin-top: 14px; }
.detail { border-top: 1px solid rgba(23, 59, 81, 0.6); }
.detail--alt { background: linear-gradient(180deg, rgba(7, 27, 41, 0.55), rgba(3, 12, 20, 0)); }
.detail__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.detail__head .section__title { max-width: 14ch; }
.detail__lede { color: var(--text-2); font-size: 17px; max-width: 60ch; }
.feature-list { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 14px; }
.feature-list li {
  display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.feature-list .icon { color: var(--cyan); margin-top: 2px; }
.feature-list h3 { font-size: 17px; margin-bottom: 4px; }
.feature-list p { color: var(--text-2); font-size: 15px; }

.process { border-top: 1px solid rgba(23, 59, 81, 0.6); background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(21, 136, 208, 0.12), transparent 70%); }
.process__steps { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: step; }
.step {
  position: relative; padding: 26px 22px 24px; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--r-lg);
}
.step::before { content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 2px; background: linear-gradient(90deg, var(--cyan), transparent); }
.step__num { display: block; color: var(--muted); font-size: 12px; letter-spacing: 0.18em; margin-bottom: 18px; }
.step .icon { color: var(--cyan); margin-bottom: 14px; }
.step h3 { font-size: 20px; margin-bottom: 8px; }
.step p { color: var(--text-2); font-size: 15px; }

/* ---- Inquiry ---- */
.inquiry { border-top: 1px solid rgba(23, 59, 81, 0.6); }
.inquiry__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); }
.inquiry__form { padding: 28px; display: grid; gap: 18px; }
.form-note {
  display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-2);
  padding: 12px 14px; border-radius: var(--r-md); background: rgba(221, 184, 86, 0.08); border: 1px solid rgba(221, 184, 86, 0.35);
}
.form-note .icon { color: var(--warning); margin-top: 2px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 14px; font-weight: 500; }
.field .opt { color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 46px; padding: 11px 14px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--r-md); font-size: 15px;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--cyan); }
.field [aria-invalid="true"] { border-color: var(--danger); }
.field__hint { font-size: 12px; color: var(--muted); }
.field__error { font-size: 13px; color: var(--danger); min-height: 0; }
.field__error:empty { display: none; }
.form-actions { display: flex; justify-content: flex-end; }
.form-status { padding: 14px 16px; border-radius: var(--r-md); font-size: 15px; background: var(--raised); border: 1px solid var(--outline-active); }
.form-status strong { display: block; margin-bottom: 2px; }

/* ---- Footer ---- */
.site-footer { border-top: 1px solid var(--border); padding: 36px 0; background: #020910; }
.site-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.brand--footer .brand__mark { width: 32px; height: 32px; }
.brand--footer .brand__name { font-size: 16px; }
.site-footer__nav { display: flex; gap: 24px; flex-wrap: wrap; }
.site-footer__nav a { color: var(--text-2); text-decoration: none; font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; }
.site-footer__nav a:hover { color: var(--highlight); }
.site-footer__legal { color: var(--muted); font-size: 13px; }

/* ---- 1024 ---- */
@media (max-width: 1180px) {
  .wrap { padding: 0 32px; }
  .site-nav { gap: 22px; }
  .hero__content > *, .hero__lede { max-width: 54%; }
  .hero__title { max-width: 56% !important; }
  .hero__globe { right: 3%; width: min(42vw, 460px); }
  .svc-card { grid-template-columns: 1fr; gap: 12px; }
  .svc-card__art { aspect-ratio: 16 / 8; }
  .detail__grid, .inquiry__grid { gap: 40px; }
}

/* ---- 1020: the menu becomes the drawer (Products and Partners joined the menu, 2026-10-14; at
   861-1020px the six items and the button no longer fit beside the name on one line) ---- */
@media (max-width: 1020px) {
  .nav-toggle, .site-nav__close { display: inline-flex; }
  .site-nav {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(320px, 86vw);
    flex-direction: column; align-items: stretch; gap: 4px; padding: 20px 24px;
    background: var(--sidebar); border-left: 1px solid var(--border);
    transform: translateX(100%); visibility: hidden; transition: transform .28s ease, visibility 0s linear .28s;
  }
  .site-nav.is-open { transform: none; visibility: visible; transition: transform .28s ease; }
  .site-nav__close { align-self: flex-end; margin-bottom: 12px; }
  .site-nav a:not(.btn) { font-size: 17px; padding: 6px 0; border-bottom: 1px solid rgba(23, 59, 81, 0.6); }
  .site-nav__cta { margin: 18px 0 0; }
}

/* ---- 768: drawer navigation ---- */
@media (max-width: 860px) {
  .nav-toggle, .site-nav__close { display: inline-flex; }
  .site-nav {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(320px, 86vw);
    flex-direction: column; align-items: stretch; gap: 4px; padding: 20px 24px;
    background: var(--sidebar); border-left: 1px solid var(--border);
    transform: translateX(100%); visibility: hidden; transition: transform .28s ease, visibility 0s linear .28s;
  }
  .site-nav.is-open { transform: none; visibility: visible; transition: transform .28s ease; }
  .site-nav__close { align-self: flex-end; margin-bottom: 12px; }
  .site-nav a:not(.btn) { font-size: 17px; padding: 6px 0; border-bottom: 1px solid rgba(23, 59, 81, 0.6); }
  .site-nav__cta { margin: 18px 0 0; }
  .hero { --art-h: 640px; min-height: 0; height: auto; display: block; padding: 0 0 40px; }
  .hero > picture { inset: 0 0 auto 0; height: var(--art-h); }
  .hero__img { object-position: 70% 20%; }
  .hero__shade { background: linear-gradient(0deg, var(--bg) 0%, var(--bg) calc(100% - var(--art-h)), rgba(3, 12, 20, 0.6) calc(100% - var(--art-h) + 150px), rgba(3, 12, 20, 0) calc(100% - var(--art-h) + 280px)); }
  .hero__content { padding-top: calc(var(--art-h) - 90px); }
  .hero__content > *, .hero__lede, .hero__title { max-width: 100% !important; }
  .hero__globe { right: 4%; top: 120px; transform: none; width: 60vw; }
  .services-strip { margin-top: 0; }
  .services-strip__grid { grid-template-columns: 1fr; }
  .svc-card { grid-template-columns: 40% 1fr; gap: 16px; }
  .detail__grid, .inquiry__grid { grid-template-columns: 1fr; gap: 28px; }
  .detail__head .section__title { max-width: none; }
  .process__steps { grid-template-columns: 1fr 1fr; }
  .section { padding: 80px 0; }
}

/* ---- 390–430 phones ---- */
@media (max-width: 520px) {
  .wrap { padding: 0 16px; }
  .site-header { height: 72px; }
  .brand__mark { width: 34px; height: 34px; }
  .brand__name { font-size: 16px; }
  .hero { --art-h: 470px; padding-bottom: 36px; }
  .hero__content { padding-top: 400px; }
  .hero__globe { top: 90px; width: 80vw; }
  .hero__title { font-size: clamp(36px, 11vw, 46px); margin: 16px 0 14px; }
  .hero__title span { white-space: normal; }
  .hero__lede { font-size: 16px; }
  .hero__ctas { flex-direction: column; gap: 12px; margin-top: 26px; }
  .hero__ctas .btn { width: 100%; }
  .hero__globe { width: 86vw; right: -18%; top: 14%; }
  .eyebrow { font-size: 11px; letter-spacing: 0.16em; }
  .svc-card { grid-template-columns: 38% 1fr; gap: 14px; min-height: 0; }
  .svc-card__art { aspect-ratio: 4 / 3; }
  .svc-card__title { font-size: 17px; }
  .process__steps { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .inquiry__form { padding: 20px 16px; }
  .form-actions .btn { width: 100%; }
  .section { padding: 64px 0; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; }
  .site-footer__nav { row-gap: 0; column-gap: 20px; }
}

/* Honeypot: off screen and hidden from assistive tech; a person never fills it. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---- Ultra-wide (his 3440x1440, 2026-10-14) ----
   Full-bleed cover art on a 4:1 hero scaled the picture to 3440 wide, so EVA's head was cut off at the
   top and she stood outside the content column. Past 2200px the art keeps its 1920-like crop in a
   2000px box centred on the page and fades into the background at both edges. The glow canvas and
   the in-scene opener use the same box, so EVA's layers still land on her own pixels (js/eva.js
   measures the image's own box). Pinned by tests/aisd-ultrawide.test.ts. */
@media (min-width: 2200px) {
  .hero > picture, .hero > .eva-glow--hero {
    left: 50%; right: auto; width: 2000px; margin-left: -1000px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 92%, transparent 100%);
  }
  .hero .eva-meet { right: calc(50% - 1000px + 440px); }
}