/* ============================================================================
 * ZIVOX — public website styles
 * ==========================================================================*/

/* ---------- Header ---------- */
.zx-header {
  position: sticky; top: 0; z-index: 60;
  padding: 12px 0 0;
}
.zx-bar {
  display: flex; align-items: center; gap: 14px;
  height: 62px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255, 255, 255, .9);
}
@media (min-width: 640px) { .zx-bar { padding: 0 20px; } }
.zx-brand {
  display: flex; align-items: center; gap: 9px;
  font-family: 'Sora', sans-serif;
  font-size: 18px; font-weight: 800;
  letter-spacing: .06em;
  color: var(--ink);
  flex: none;
}
.zx-brand:hover { color: var(--ink); }
.zx-nav { display: none; flex: 1; justify-content: center; gap: 2px; }
@media (min-width: 1180px) { .zx-nav { display: flex; } }
.zx-nav a, .zx-nav .nav-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 11px; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: var(--ink-2);
  background: none; border: 0;
  transition: color .18s var(--ease), background .18s var(--ease);
  white-space: nowrap;
}
.zx-nav a:hover, .zx-nav .nav-trigger:hover { color: var(--brand-ink); background: rgba(29, 111, 242, .07); }
.zx-nav a[aria-current="page"], .zx-nav .is-active {
  color: var(--brand-ink); background: rgba(29, 111, 242, .08);
}
.zx-nav .nav-trigger svg { transition: transform .2s var(--ease); }
.zx-nav .nav-item.open .nav-trigger svg { transform: rotate(180deg); }
.nav-item { position: relative; }
.nav-menu {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%);
  min-width: 280px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--sh-4);
  display: none;
  z-index: 70;
}
.nav-menu.two { min-width: 560px; display: none; grid-template-columns: 1fr 1fr; gap: 2px; }
.nav-item.open .nav-menu { display: block; }
.nav-item.open .nav-menu.two { display: grid; }
.nav-menu a {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 10px; border-radius: 12px;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  line-height: 1.35;
}
.nav-menu a:hover { background: rgba(29, 111, 242, .07); }
.nav-menu a small { display: block; font-size: 12px; color: var(--faint); font-weight: 500; margin-top: 1px; }
.nav-menu .ico { width: 30px; height: 30px; border-radius: 9px; }
.nav-menu .ico svg { width: 15px; height: 15px; }
.zx-actions { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.zx-actions .hide-sm { display: none; }
@media (min-width: 640px) { .zx-actions .hide-sm { display: inline-flex; } }
.zx-actions .hide-md { display: none; }
@media (min-width: 760px) { .zx-actions .hide-md { display: inline-flex; } }
.burger { display: inline-flex; }
@media (min-width: 1180px) { .burger { display: none; } }

.mobile-menu {
  display: none;
  max-width: 1240px; margin: 8px auto 0;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--sh-4);
}
.mobile-menu.open {
  display: block;
  /* ROOT CAUSE of "the hamburger does not work" on small phones.
     `.zx-header` is `position: sticky; top: 0`, so the header — and this menu
     inside it — stays pinned to the top of the screen. Scrolling the page
     therefore cannot reveal anything below the fold: the menu moves with the
     viewport. At 550px tall starting at y≈76, its bottom lands at 626px, which
     is 58px past a 320x568 phone. The last links (Contact, Download
     Certificate, Start a Project) were permanently untappable even though the
     toggle itself fired correctly.
     Bounding the open menu to the viewport and letting it scroll internally
     makes every link reachable while leaving the visual design untouched. */
  max-height: calc(100vh - 88px);
  max-height: calc(100dvh - 88px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.mobile-menu a, .mobile-menu summary {
  display: flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 0 12px;
  border-radius: 11px;
  font-size: 14.5px; font-weight: 600; color: var(--ink);
  cursor: pointer;
}
.mobile-menu a:hover { background: rgba(29, 111, 242, .07); }
.mobile-menu details > summary { list-style: none; justify-content: space-between; }
.mobile-menu details > summary::-webkit-details-marker { display: none; }
.mobile-menu details[open] > summary { color: var(--brand-ink); }
.mobile-menu .sub { padding: 2px 0 8px 14px; border-left: 2px solid rgba(29, 111, 242, .2); margin: 0 0 4px 12px; }
.mobile-menu .sub a { min-height: 40px; font-size: 13.5px; font-weight: 500; color: var(--muted); }
.mobile-menu .mcta { display: grid; gap: 8px; padding: 10px 6px 4px; }

/* ---------- Layout ---------- */
.page-hero {
  padding: 48px 0 40px;
}
@media (min-width: 980px) { .page-hero { padding: 72px 0 56px; } }
.split { display: grid; gap: 32px; align-items: center; }
@media (min-width: 980px) { .split { grid-template-columns: 1.05fr .95fr; gap: 48px; } }
.split.wide-left { grid-template-columns: 1fr; }
@media (min-width: 980px) { .split.wide-left { grid-template-columns: 1.25fr .75fr; } }

/* ---------- Hero (home) ---------- */
.hero { padding: 40px 0 24px; }
@media (min-width: 980px) { .hero { padding: 64px 0 40px; } }
.hero h1 { margin: 18px 0 20px; }
.hero-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.hero-scene {
  position: relative;
  perspective: 1200px;
  min-height: 340px;
  display: grid;
  place-items: center;
}
.hero-card {
  width: 100%;
  max-width: 420px;
  border-radius: 22px;
  background: var(--glass-2);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--sh-4);
  padding: 22px;
  transform: rotateX(8deg) rotateY(-14deg) rotate(-1deg);
  transition: transform .6s var(--ease);
}
.hero-scene:hover .hero-card { transform: rotateX(2deg) rotateY(-4deg) rotate(0deg); }
.hero-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.hero-row:last-of-type { border-bottom: 0; }
.hero-row .rlabel { flex: 1; font-weight: 600; color: var(--ink-2); }
.progress { height: 7px; border-radius: 4px; background: rgba(20, 40, 90, .08); overflow: hidden; margin-top: 12px; }
.progress > i { display: block; height: 100%; background: var(--grad); border-radius: 4px; }
.float-chip {
  position: absolute;
  padding: 9px 13px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--sh-3);
  font-size: 12.5px; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; gap: 7px;
  animation: zx-float 7s ease-in-out infinite;
}
.float-chip.c1 { top: 6%; left: -2%; }
.float-chip.c2 { bottom: 10%; right: -2%; animation-delay: -3.5s; }
@keyframes zx-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(-10px * var(--depth))); }
}

/* ---------- Internship announcement ---------- */
.announce {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, #fff 0%, #f6f4ff 52%, #eef3ff 100%);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--sh-4);
  padding: clamp(26px, 4vw, 44px);
}
.announce-grid { display: grid; gap: 30px; align-items: center; }
@media (min-width: 900px) { .announce-grid { grid-template-columns: 1.15fr .85fr; gap: 44px; } }
.announce h2 { margin: 12px 0 14px; }
.announce-feats { display: grid; gap: 8px; margin-top: 20px; }
@media (min-width: 620px) { .announce-feats { grid-template-columns: repeat(3, 1fr); gap: 10px; } }
.announce-feats div {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); line-height: 1.45;
}
.announce-feats svg { width: 16px; height: 16px; flex: none; color: var(--brand); margin-top: 1px; }
.announce-art { position: relative; perspective: 900px; display: grid; place-items: center; }
.announce-cert {
  width: 100%;
  transform: rotateY(-12deg) rotateX(6deg) rotate(-2deg);
  transition: transform .6s var(--ease);
  border-radius: 10px;
  box-shadow: 0 40px 70px -30px rgba(30, 50, 120, .45);
}
.announce-art:hover .announce-cert { transform: rotateY(-4deg) rotateX(2deg); }
.announce-seal {
  position: absolute; bottom: -4%; right: 2%;
  width: 68px; height: 68px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  background: conic-gradient(from 140deg, #1d6ff2, #8b5cf6, #0ea5e9, #1d6ff2);
  box-shadow: var(--sh-3);
  border: 3px solid #fff;
}
.announce-seal svg { width: 26px; height: 26px; }

/* ---------- Cards ---------- */
.svc-card { position: relative; display: flex; flex-direction: column; }
.svc-card .no {
  position: absolute; top: 18px; right: 20px;
  font-family: 'Sora', sans-serif; font-size: 12px; font-weight: 700;
  color: var(--faint); letter-spacing: .08em;
}
.svc-card h3 { margin: 16px 0 8px; font-size: 17px; }
.svc-card p { font-size: 13.5px; color: var(--muted); line-height: 1.62; margin: 0 0 16px; flex: 1; }
.svc-card .more { font-size: 13px; font-weight: 700; color: var(--brand-ink); display: inline-flex; align-items: center; gap: 5px; }
.svc-card:hover .more svg { transform: translateX(3px); }
.svc-card .more svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }

.mini-card { padding: 18px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1); }
.mini-card h4 { margin: 10px 0 5px; font-size: 14.5px; }
.mini-card p { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.55; }

/* ---------- Feature panel (CULTTER.AI) ---------- */
.feature-panel {
  display: grid; gap: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--glass-edge);
  box-shadow: var(--sh-3);
  background: #fff;
}
@media (min-width: 900px) { .feature-panel { grid-template-columns: 1.05fr .95fr; } }
.feature-panel .fp-left { padding: clamp(24px, 4vw, 40px); }
.feature-panel .fp-right { padding: clamp(24px, 4vw, 40px); background: var(--grad-soft); border-top: 1px solid var(--line-2); }
@media (min-width: 900px) { .feature-panel .fp-right { border-top: 0; border-left: 1px solid var(--line-2); } }
.cap-row { display: flex; gap: 11px; padding: 11px 0; border-bottom: 1px solid rgba(20, 40, 90, .07); }
.cap-row:last-child { border-bottom: 0; }
.cap-row .ico { width: 32px; height: 32px; border-radius: 9px; }

/* ---------- Process steps ---------- */
.step-card { position: relative; padding-top: 8px; }
.step-num {
  font-family: 'Sora', sans-serif; font-size: 34px; font-weight: 800;
  line-height: 1; letter-spacing: -.04em;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.step-card h4 { margin: 10px 0 6px; font-size: 15px; }
.step-card p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.6; }

/* ---------- FAQ accordion ---------- */
.faq { display: grid; gap: 10px; }
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  overflow: hidden;
  transition: box-shadow .2s var(--ease);
}
.faq details[open] { box-shadow: var(--sh-2); background: rgba(255, 255, 255, .85); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px; cursor: pointer; list-style: none;
  font-size: 14.5px; font-weight: 600; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { flex: none; width: 20px; height: 20px; position: relative; transition: transform .2s var(--ease); color: var(--brand); }
.faq summary .pm::before, .faq summary .pm::after {
  content: ''; position: absolute; background: currentColor; border-radius: 2px;
}
.faq summary .pm::before { left: 4px; right: 4px; top: 9px; height: 2px; }
.faq summary .pm::after { top: 4px; bottom: 4px; left: 9px; width: 2px; }
.faq details[open] summary .pm { transform: rotate(45deg); }
.faq .faq-body { padding: 0 18px 16px; font-size: 13.5px; color: var(--muted); line-height: 1.7; }

/* ---------- Portfolio ---------- */
.pf-card { overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.pf-thumb {
  aspect-ratio: 16/10;
  background: linear-gradient(140deg, #e8efff, #f2ecff 55%, #e8f7fd);
  position: relative;
  display: grid; place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line-2);
}
.pf-thumb .pf-mock {
  width: 76%; border-radius: 10px;
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--sh-2);
  padding: 10px;
  transform: rotate(-1.5deg);
}
.pf-mock .mline { height: 6px; border-radius: 3px; background: rgba(20, 40, 90, .1); margin-bottom: 5px; }
.pf-mock .mline.w60 { width: 60%; }
.pf-mock .mline.w40 { width: 40%; background: linear-gradient(90deg, #1d6ff2, #8b5cf6); }
.pf-mock .mblock { height: 34px; border-radius: 6px; background: rgba(20, 40, 90, .06); margin: 8px 0; }
.pf-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.pf-body h3 { font-size: 16px; margin: 8px 0 6px; }
.pf-body p { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0 0 14px; flex: 1; }

/* ---------- Contact strip ---------- */
.contact-strip { display: grid; gap: 12px; }
@media (min-width: 760px) { .contact-strip { grid-template-columns: repeat(3, 1fr); } }
.contact-strip a {
  display: flex; align-items: center; gap: 13px;
  padding: 18px; border-radius: var(--r);
  background: #fff; border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  color: var(--ink);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.contact-strip a:hover { transform: translateY(-3px); box-shadow: var(--sh-3); color: var(--ink); }
.contact-strip .cs-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 700; }
.contact-strip .cs-value { font-size: 14px; font-weight: 600; color: var(--ink); }

/* ---------- Verify page ---------- */
.verify-search {
  display: flex; gap: 8px; padding: 8px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--sh-2);
  max-width: 620px; margin: 0 auto;
}
.verify-search input {
  flex: 1; min-width: 0;
  border: 0; background: transparent; outline: none;
  padding: 0 14px; font-size: 15px;
  font-family: 'JetBrains Mono', monospace; font-weight: 500;
  letter-spacing: .04em;
}
.verify-result { max-width: 1120px; margin: 0 auto; }
.status-banner {
  display: flex; gap: 14px; align-items: center;
  padding: 16px 18px; border-radius: var(--r);
  margin-bottom: 18px;
}
.status-banner .st { font-size: 16px; font-weight: 700; }
.status-banner .sd { font-size: 13px; opacity: .85; line-height: 1.5; }
.status-banner.ok { background: var(--ok-bg); border: 1px solid #c5ebd4; color: #0f5a2f; }
.status-banner.bad { background: var(--bad-bg); border: 1px solid #f5cccd; color: #861b20; }
.status-banner.neu { background: var(--neu-bg); border: 1px solid var(--line); color: #374151; }

/* ---------- Legal article ---------- */
.legal-wrap { display: grid; gap: 32px; }
@media (min-width: 1000px) { .legal-wrap { grid-template-columns: 260px 1fr; gap: 44px; align-items: start; } }
/* Below the two-column breakpoint the grid track is `auto`, so any child with
   a wide min-content box widens the whole track — a legal table did exactly
   that and pushed the sticky TOC off-screen. Let children shrink, and give the
   tables their own scroll container instead of stretching the layout. */
.legal-wrap > * { min-width: 0; }
@media (max-width: 999px) {
  .legal-toc { position: static; top: auto; }
  .legal-body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}
.legal-toc { position: sticky; top: 96px; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.legal-toc a { display: block; padding: 7px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.legal-toc a:hover { background: rgba(29, 111, 242, .07); color: var(--brand-ink); }
.legal-body { font-size: 15.5px; line-height: 1.75; color: var(--ink-2); }
.legal-body h2 { font-size: 22px; margin: 34px 0 12px; }
.legal-body h3 { font-size: 16.5px; margin: 24px 0 8px; }
.legal-body p { margin: 0 0 14px; }
.legal-body ul, .legal-body ol { margin: 0 0 16px; padding-left: 1.2em; }
.legal-body li { margin-bottom: 7px; }
.legal-body a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 2px; }
.legal-body > p:first-child {
  background: #f0f5ff; border: 1px solid #d6e3ff; color: #1e3a7a;
  border-radius: var(--r); padding: 14px 16px; font-size: 14px;
}
.legal-body table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 0 0 18px; }
.legal-body th, .legal-body td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; }
.legal-body th { background: rgba(246, 248, 252, .8); font-weight: 700; }

/* ---------- Footer ---------- */
.zx-footer {
  margin-top: 40px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .92));
  border-top: 1px solid var(--line);
  padding: 48px 0 26px;
}
.footer-grid { display: grid; gap: 30px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .footer-grid { grid-template-columns: 1.5fr repeat(5, 1fr); gap: 26px; } }
.footer-brand p { font-size: 13px; color: var(--muted); line-height: 1.7; margin: 12px 0; max-width: 34ch; }
.footer-col h4 {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--faint); font-weight: 700; margin: 0 0 12px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-col a { font-size: 13px; color: var(--muted); }
.footer-col a:hover { color: var(--brand-ink); }
.footer-contact { display: grid; gap: 7px; font-size: 13px; color: var(--muted); margin-top: 12px; }
.footer-contact a { color: var(--muted); }
.footer-contact a:hover { color: var(--brand-ink); }
.footer-bottom {
  margin-top: 34px; padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--faint);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 14px; }
.footer-bottom a { color: var(--faint); }
.footer-bottom a:hover { color: var(--brand-ink); }

/* ---------- Responsive tweaks ---------- */
@media (max-width: 979px) {
  .hero-scene { min-height: 0; margin-top: 12px; }
  .hero-card { transform: none; }
  .float-chip { display: none; }
  .announce-art { display: none; }
}
@media (max-width: 640px) {
  .zx-bar { height: 56px; }
  .hero h1 { font-size: clamp(30px, 8.6vw, 44px); }
}

/* ---------- Official logo (single source: /assets/logo.png) ----------
   The mark is a square badge containing its own wordmark + tagline,
   so it is never paired with a separate text label and never
   stretched. Fixed square box + object-fit keeps the original
   proportions at every breakpoint. */
.zx-brand { gap: 0; }
.zx-logo {
  display: block;
  flex: none;
  width: 46px;
  height: 46px;
  max-width: 100%;
  object-fit: contain;
}
.zx-logo-lg { width: 64px; height: 64px; }
@media (max-width: 359px) {
  .zx-logo { width: 38px; height: 38px; }
  .zx-logo-lg { width: 54px; height: 54px; }

  /* `.btn` sets `height: 44px` and `white-space: nowrap`, which is correct for
     short labels but forces a single unbreakable line. On a 320px viewport a
     long label such as "Send a speculative application" (careers page) then
     pushed the button to 265px + page padding and made the whole document
     10px wider than the screen — a real horizontal scrollbar and a nudged
     layout. Letting only the label wrap keeps the button height stable via
     min-height, so no other button changes size.
     `.btn-icon` is a separate class and is intentionally not affected. */
  .btn {
    height: auto;
    min-height: var(--btn-h);
    padding: 10px 16px;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }
}
.footer-brand .zx-brand { margin-bottom: 2px; }