/* ============================================================
   Ragnarok AI — 1:1 rebuild of deslopify.framer.website
   Design canvas: 1200 x 8661, lavender #F3F3F9 on white body
   ============================================================ */

:root {
  --ink: #201f32;
  --ink-heading: #1f1f32;
  --gray: #4d5564;
  --blue: #262ef2;
  --blue-soft: #6e73fa;
  --line: #e3e2e5;
  --bg: #ffffff; /* v2 direction: pure white page */
  --card-gray: #e4e4f0;
  --fill: #e5eaff;
  --sans: var(--font-sans);
  --grotesk: var(--font-sans); /* body sans everywhere per client */
  --serif: "Lora", var(--font-cn);
  --jakarta: var(--font-display); /* v2 hero direction */
  --hero-navy: #263850;

  /* button primitives */
  --control-dark-900: #201f32;
  --control-dark-800: #29283d;
  --control-gray-50: #ffffff;
  --control-gray-100: #f1f2f6;
  --control-gray-200: #e7e8ee;
  --control-gray-300: #d8dae4;
  --control-gray-600: #686f80;

  /* button semantics */
  --control-solid-bg: var(--control-dark-900);
  --control-solid-bg-hover: var(--control-dark-800);
  --control-solid-fg: #fff;
  --control-outline-bg: var(--control-gray-50);
  --control-outline-bg-hover: #f8f8fb;
  --control-outline-border: var(--control-gray-300);
  --control-outline-fg: var(--hero-navy);
  --control-muted-bg: var(--control-gray-100);
  --control-muted-bg-hover: var(--control-gray-200);
  --control-muted-fg: var(--control-gray-600);
  --control-focus: #646af4;
  --control-focus-ring: #646af47a;

  /* button component tokens */
  --button-height: 52px;
  --button-padding-x: 26px;
  --button-gap: 16px;
  --button-radius: 999px;
  --button-font-size: var(--fs-lead);
  --button-font-weight: 500;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; -webkit-user-drag: none; user-select: none; }
a { text-decoration: none; color: inherit; }
button { font: inherit; border: 0; background: none; cursor: pointer; }
[hidden] { display: none !important; }

.canvas {
  position: relative;
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 0;
  background: var(--bg);
  overflow: visible;
}
/* uniform vertical rhythm: 200px between sections */
.hero-zone, .why-us, .showcase, .hiw, .bento,
.unfold { margin-bottom: 200px; }

/* eyebrow tag — template style: ⟪ icon Label ⟫ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-lead);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink);
  white-space: nowrap;
}
.tag::before, .tag::after {
  content: '';
  width: 10px;
  height: 13px;
  flex-shrink: 0;
  image-rendering: pixelated;
  background-size: 100% 100%;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10.012 13.188" overflow="visible"><path d="M 3.164 13.188 L 0 6.314 L 3.01 0 L 4.116 0 L 1.162 6.314 L 4.27 13.188 Z M 8.906 13.188 L 5.742 6.314 L 8.752 0 L 9.858 0 L 6.904 6.314 L 10.012 13.188 Z" fill="rgba(31,38,50,0.4)"/></svg>');
}
.tag::after { transform: scaleX(-1); }
.tag img {
  width: 24px;
  height: 24px;
  margin-right: -4px; /* icon-to-text gap is 8px in the template, brackets get 12px */
}
h2 .blue { color: var(--blue); }

/* ---------- shared: badge with ⟪ ⟫ brackets ---------- */
.badge {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min-content;
  white-space: nowrap;
}
.bracket {
  width: 10px;
  height: 13px;
  flex-shrink: 0;
  image-rendering: pixelated;
  background-size: 100% 100%;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10.012 13.188" overflow="visible"><path d="M 3.164 13.188 L 0 6.314 L 3.01 0 L 4.116 0 L 1.162 6.314 L 4.27 13.188 Z M 8.906 13.188 L 5.742 6.314 L 8.752 0 L 9.858 0 L 6.904 6.314 L 10.012 13.188 Z" fill="rgba(31,38,50,0.4)"/></svg>');
}
.bracket.flip { transform: scaleX(-1); }
.badge-body {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--grotesk);
  font-size: var(--fs-lead);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink);
}
.badge-body img { width: 24px; height: 24px; }

/* ---------- shared: button system ---------- */
.ui-button {
  display: inline-flex;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  position: relative;
  color: var(--control-outline-fg);
  font-family: var(--sans);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .18s ease-out, background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.ui-button::after {
  content: '';
  width: 12px;
  height: 20px;
  flex: 0 0 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='20' viewBox='0 0 12 20'%3E%3Cpath d='M0 0h4v4h4v4h4v4H8v4H4v4H0v-4h4v-4h4V8H4V4H0z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='20' viewBox='0 0 12 20'%3E%3Cpath d='M0 0h4v4h4v4h4v4H8v4H4v4H0v-4h4v-4h4V8H4V4H0z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .18s ease-out;
}
.ui-button:hover { transform: translateY(-1px); }
.ui-button:hover::after { transform: translateX(2px); }
.ui-button:active { transform: translateY(0) scale(.98); }
.ui-button:focus-visible,
.ui-icon-button:focus-visible,
.ui-segmented__item:focus-visible {
  outline: 3px solid var(--control-focus-ring);
  outline-offset: 3px;
}
.ui-button:disabled,
.ui-button[aria-disabled="true"] { opacity: .46; pointer-events: none; cursor: not-allowed; }
.ui-button--solid {
  border-color: #343246;
  background: var(--control-solid-bg);
  color: var(--control-solid-fg);
  box-shadow: inset 0 1px 0 #ffffff4d, 0 10px 22px -18px #201f3299;
}
.ui-button--solid:hover { background: var(--control-solid-bg-hover); box-shadow: inset 0 1px 0 #ffffff5c, 0 12px 24px -18px #201f32b3; }
.ui-button--outline { border-color: var(--control-outline-border); background: var(--control-outline-bg); color: var(--control-outline-fg); }
.ui-button--outline:hover { border-color: #c2c5d1; background: var(--control-outline-bg-hover); }
.ui-button--muted { background: var(--control-muted-bg); color: var(--control-muted-fg); }
.ui-button--muted:hover { background: var(--control-muted-bg-hover); color: var(--hero-navy); }
.ui-button--back::after { order: -1; transform: scaleX(-1); }
.ui-button--back:hover::after { transform: scaleX(-1) translateX(2px); }
.ui-icon-button {
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  transition: transform .18s ease-out, background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.ui-icon-button:hover { transform: translateY(-1px); }
.ui-icon-button:active { transform: translateY(0) scale(.96); }
.ui-icon-button--solid { border-color: #343246; background: var(--control-solid-bg); color: var(--control-solid-fg); box-shadow: inset 0 1px 0 #ffffff4d; }
.ui-icon-button--outline { border-color: var(--control-outline-border); background: var(--control-outline-bg); color: var(--control-outline-fg); }
.ui-icon-button--muted { background: var(--control-muted-bg); color: var(--control-muted-fg); }
.ui-segmented {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--control-gray-300);
  border-radius: var(--button-radius);
  background: var(--control-muted-bg);
}
.ui-segmented__item {
  min-height: 40px;
  padding: 0 18px;
  border-radius: var(--button-radius);
  color: var(--control-muted-fg);
  font-size: var(--fs-body);
  font-weight: 600;
  transition: transform .18s ease-out, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.ui-segmented__item:hover { color: var(--hero-navy); }
.ui-segmented__item.active {
  background: var(--control-solid-bg);
  color: var(--control-solid-fg);
  box-shadow: inset 0 1px 0 #ffffff4d, 0 8px 18px -14px #201f32a3;
}
.btn-block { width: 100%; }

/* ============ NAV ============ */
/* ink bar, fixed; condenses (narrower, tighter) once you scroll */
.nav {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  /* lives outside the zoomed .canvas, so it sizes against the real viewport */
  width: min(980px, calc(100vw - 40px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  /* v2 direction: transparent bar over the hero sky, ink content */
  padding: 10px 0;
  background: transparent;
  border-radius: var(--radius);
  box-shadow: none;
  z-index: 100;
  transition:
    width .55s cubic-bezier(.22,1,.36,1),
    padding .55s cubic-bezier(.22,1,.36,1),
    top .4s cubic-bezier(.22,1,.36,1),
    background .35s,
    box-shadow .35s,
    border-radius .4s;
}
.nav-logo { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.tree-logo { color: var(--ink); }
.tree-logo svg { width: 28px; height: 28px; display: block; }
.nav-logo img {
  width: 36px;
  height: 36px;
  /* brand mark stays its native near-black on the light bar */
}
.nav-logo span {
  font-family: var(--jakarta);
  font-size: var(--fs-lead);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  transition: opacity .3s, max-width .5s cubic-bezier(.22,1,.36,1);
}
.nav-links { display: flex; align-items: center; }
.nav-links a {
  font-family: var(--jakarta);
  font-size: var(--fs-body);
  font-weight: 500;
  color: #5c6674;
  padding: 8px 14px;
  white-space: nowrap;
  transition: color .2s, padding .55s cubic-bezier(.22,1,.36,1);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.nav-cta {
  flex-shrink: 0;
  padding: 10px 20px;
  background: var(--ink);
  color: #fff;
  font-family: var(--jakarta);
  font-size: var(--fs-body);
  font-weight: 600;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), padding .55s cubic-bezier(.22,1,.36,1);
}
.nav-cta:hover { transform: scale(1.05); }
/* scrolled: condense into a frosted white pill so it reads on any section */
.nav.condensed {
  width: min(640px, calc(100vw - 40px));
  top: 12px;
  padding: 7px 8px 7px 14px;
  border-radius: var(--radius);
  background: #ffffffd6;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px -20px #201f3240;
}
.nav.condensed .nav-links a { padding: 8px 8px; }
.nav.condensed .nav-cta { padding: 8px 14px; }
/* condensed: mark only, wordmark collapses away */
.nav.condensed .nav-logo span { opacity: 0; max-width: 0; }

/* ============ CONTENT PAGES ============ */
.content-page { min-width: 0; }
.content-shell { width: min(1080px, calc(100% - 64px)); margin: 0 auto; padding: 156px 0 96px; }
.content-nav { background: #fffffff0; box-shadow: 0 18px 42px -28px #201f3266; }
.content-nav .nav-links a { position: relative; }
.content-nav .nav-links a[aria-current="page"]::after {
  content: '';
  position: absolute;
  right: 14px;
  bottom: 2px;
  left: 14px;
  height: 2px;
  border-radius: var(--radius);
  background: var(--blue);
}
.page-hero { max-width: 680px; padding-bottom: 42px; }
.page-hero > p:first-child {
  color: var(--blue);
  font-family: var(--jakarta);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .08em;
}
.page-hero h1 { margin: 12px 0 16px; color: var(--hero-navy); font-family: var(--jakarta); font-size: var(--fs-h1); letter-spacing: -.07em; line-height: 1; }
.page-hero > p:last-child { max-width: 520px; color: var(--gray); font-size: var(--fs-lead); line-height: 1.75; }
.works-page { background: linear-gradient(180deg, #fff 0%, #fbfbff 52%, #fff 100%); }
.works-page .content-shell { width: min(1280px, calc(100% - 64px)); padding-top: 136px; }
.works-summary { max-width: 650px; margin-bottom: 28px; color: var(--gray); font-size: var(--fs-lead); line-height: 1.75; }
.featured-tabs {
  max-width: 100%;
  margin-bottom: 30px;
  overflow-x: auto;
  scrollbar-width: none;
}
.featured-tabs::-webkit-scrollbar { display: none; }
.featured-tabs button { flex: 0 0 auto; }
.featured-projects { display: grid; min-height: 680px; align-content: start; gap: 24px; }
.featured-project {
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, .82fr) minmax(0, 1.38fr);
  overflow: hidden;
  border: 0;
  border-radius: var(--radius);
  background: linear-gradient(138deg, #fff 10%, #f7f7fd 100%);
  box-shadow: 0 12px 32px -28px #20233b73;
  cursor: pointer;
  transition: box-shadow .24s ease, transform .24s ease;
}
.featured-project:hover { box-shadow: 0 16px 36px -28px #20233b80; transform: translateY(-1px); }
.featured-project[hidden] { display: none; }
.featured-project-copy {
  display: flex;
  min-width: 0;
  padding: 54px 46px 48px;
  flex-direction: column;
  justify-content: center;
}
.featured-project-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  font-family: var(--jakarta);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .12em;
}
.featured-project-meta span { color: #818798; }
.featured-project-title-link { color: inherit; }
.featured-project-title-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.featured-project-title-link:focus-visible { outline: 0; }
.featured-project:has(.featured-project-title-link:focus-visible) { outline: 3px solid #27324a33; outline-offset: 4px; }
.featured-project h2 {
  margin: 28px 0 18px;
  color: var(--hero-navy);
  font-family: var(--jakarta);
  font-size: var(--fs-h2);
  letter-spacing: -.06em;
  line-height: 1.08;
  text-wrap: balance;
}
.featured-project-description { max-width: 39em; color: #676e80; font-size: var(--fs-lead); line-height: 1.8; }
.featured-project-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; list-style: none; }
.featured-project-tags li {
  padding: 7px 12px;
  border: 1px solid #e6e6f2;
  border-radius: 999px;
  background: #f7f7fc;
  color: #73798a;
  font-size: var(--fs-small);
  font-weight: 600;
}
.featured-project-actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.featured-case-button { margin: 0; }
.featured-project-gallery {
  display: grid;
  min-width: 0;
  padding: 28px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(340px, 1fr) 184px;
  gap: 14px;
  background:
    radial-gradient(circle at 30% 18%, #dfe8ff 0, transparent 34%),
    linear-gradient(150deg, #f4f4fc 0%, #ececf8 100%);
}
.featured-project-gallery figure {
  position: relative;
  overflow: hidden;
  min-width: 0;
  margin: 0;
  border: 1px solid #fff9;
  border-radius: var(--radius);
  background: #ebecf5;
  box-shadow: 0 18px 44px -32px #20233b;
}
.featured-project-gallery .featured-project-cover { grid-column: 1 / -1; }
.featured-project-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.featured-project-gallery img.image-unavailable { visibility: hidden; }
.featured-project-gallery figure.image-unavailable::after {
  content: '图片暂不可用';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #8a90a1;
  font-size: var(--fs-small);
}
.content-footer { display: flex; justify-content: center; gap: 22px; padding: 34px 32px 42px; border-top: 1px solid var(--line); color: var(--gray); font-size: var(--fs-body); }
.content-footer a:hover { color: var(--blue); }

@media (max-width: 767px) {
  .content-shell { width: 100%; padding: 112px 20px 64px; }
  .content-nav { width: calc(100% - 28px); padding: 7px 0; }
  .content-nav .nav-links { max-width: calc(100vw - 70px); }
  .content-nav .nav-links a { padding: 7px 8px; font-size: var(--fs-small); }
  .content-nav .nav-links a[aria-current="page"]::after { right: 8px; bottom: 0; left: 8px; }
  .page-hero { padding-bottom: 32px; }
  .page-hero h1 { font-size: var(--fs-h1); }
  .page-hero > p:last-child { font-size: var(--fs-lead); }
  .works-page .content-shell { width: 100%; padding-top: 112px; }
  .works-summary { margin-bottom: 24px; font-size: var(--fs-body); line-height: 1.72; }
  .featured-tabs { display: flex; width: 100%; margin-bottom: 20px; }
  .featured-tabs button { flex: 1 0 auto; min-width: 74px; padding-inline: 14px; font-size: var(--fs-small); }
  .featured-projects { min-height: 0; gap: 16px; }
  .featured-project { grid-template-columns: minmax(0, 1fr); border-radius: var(--radius); }
  .featured-project-copy { padding: 32px 22px 28px; }
  .featured-project h2 { margin: 20px 0 14px; font-size: var(--fs-h2); }
  .featured-project-description { font-size: var(--fs-body); line-height: 1.72; }
  .featured-project-tags { margin-top: 23px; }
  .featured-project-actions { margin-top: 28px; }
  .featured-project-gallery { padding: 14px; grid-template-rows: minmax(220px, 58vw) 118px; gap: 9px; }
  .featured-project-gallery figure { border-radius: var(--radius); }
  .content-footer { justify-content: flex-start; padding: 28px 20px 34px; }
}

/* ============ PROJECT DETAIL PAGES ============ */
.project-detail-page { background: linear-gradient(180deg, #fff 0%, #fafaff 60%, #fff 100%); }
.project-detail-page .content-shell { width: min(1180px, calc(100% - 64px)); padding-bottom: 112px; }
.project-back { width: max-content; }
.project-detail-hero { max-width: 900px; padding: 58px 0 54px; }
.project-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  color: #818798;
  font-family: var(--jakarta);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .12em;
}
.project-detail-hero h1 {
  max-width: 850px;
  margin: 26px 0 22px;
  color: var(--hero-navy);
  font-family: var(--jakarta);
  font-size: var(--fs-h1);
  letter-spacing: -.065em;
  line-height: 1.03;
}
.project-detail-lead { max-width: 700px; color: #646b7d; font-size: var(--fs-card-title); line-height: 1.8; }
.project-detail-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; list-style: none; }
.project-detail-tags li { padding: 7px 12px; border-radius: 999px; background: #f1f2f8; color: #757b8c; font-size: var(--fs-small); font-weight: 600; }
.project-detail-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.project-detail-cover {
  overflow: hidden;
  margin: 0;
  aspect-ratio: 5 / 3;
  border-radius: var(--radius);
  background: #f0f1f7;
  box-shadow: 0 18px 48px -40px #20233b80;
}
.project-detail-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.seerq-hero-board { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: #f6f3ec; isolation: isolate; box-shadow: 0 18px 48px -40px #20233b80; }
.seerq-hero-surface { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.seerq-hero-board .seerq-hero-surface { width: 100%; height: 100%; }
.seerq-hero-board::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.7) 51%, rgba(255,255,255,.08) 78%); pointer-events: none; }
.seerq-hero-copy { position: relative; z-index: 2; width: 58%; padding: 6.2% 0 4.6% 6%; font-family: var(--font-sans); }
.seerq-hero-eyebrow { margin: 0 0 1.1%; color: #ce8200; font-size: var(--fs-card-title); font-weight: 700; letter-spacing: .02em; }
.seerq-hero-copy h2 { margin: 0; color: #1d2129; font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 700; letter-spacing: -.09em; line-height: .98; }
.seerq-hero-tabs { display: flex; flex-wrap: wrap; gap: 1.2%; margin-top: 2.2%; }
.seerq-hero-tabs span { padding: .7em 1.65em; border-radius: 999px; background: rgba(255, 244, 212, .93); color: #655a4d; font-size: var(--fs-body); font-weight: 700; }
.seerq-hero-panel { width: 88%; margin-top: 5%; padding: 3.5% 4% 2.8%; border: 1px solid #fff; border-radius: var(--radius); background: linear-gradient(102deg, rgba(255,255,255,.5) 15%, rgba(255,255,255,0) 100%); box-shadow: 0 18px 45px rgba(77, 66, 40, .06); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.seerq-hero-panel h3 { margin: 0 0 1.5%; color: #20242c; font-size: clamp(18px, 1.25vw, 24px); }
.seerq-hero-panel p { margin: 0; color: #6d6d6c; font-size: clamp(13px, .83vw, 16px); line-height: 1.55; }
.seerq-hero-panel h3:nth-of-type(2) { margin-top: 3.4%; }
.seerq-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.seerq-hero-stats div { padding: 1.4em 1.2em 1.1em; border-radius: var(--radius); background: rgba(255,255,255,.76); }
.seerq-hero-stats strong { display: block; color: #d88c00; font-size: var(--fs-title); line-height: 1.1; }
.seerq-hero-stats span { display: block; margin-top: .75em; color: #77736d; font-size: var(--fs-small); }
.seerq-hero-cards { position: absolute; top: 0; right: 4%; bottom: 0; z-index: 1; display: grid; width: 40.6%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.35vw, 26px); overflow: hidden; background: transparent; pointer-events: none; }
.seerq-card-column { position: relative; height: 100%; background: transparent; }
.seerq-card-column--left { --seerq-track-top: -21.6%; --seerq-scroll-time: 24s; }
.seerq-card-column--right { --seerq-track-top: -4.3%; --seerq-scroll-time: 26s; }
.seerq-card-track { position: absolute; top: var(--seerq-track-top); right: 0; left: 0; animation: seerq-card-scroll var(--seerq-scroll-time) linear infinite; animation-play-state: paused; will-change: transform; }
.seerq-hero-board.is-motion-active .seerq-card-track { animation-play-state: running; }
.seerq-card-cycle { display: grid; gap: clamp(12px, 1.35vw, 26px); padding-bottom: clamp(12px, 1.35vw, 26px); }
.seerq-card { position: relative; width: 100%; height: auto; filter: drop-shadow(0 16px 20px rgba(75, 53, 20, .14)); }
.seerq-hero-board .seerq-card { width: 100%; height: auto; object-fit: contain; }
@keyframes seerq-card-scroll { to { transform: translate3d(0, -50%, 0); } }
.project-detail-overview {
  display: grid;
  padding: 96px 0 88px;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 48px 88px;
  align-items: start;
}
.project-detail-kicker { margin-bottom: 16px; color: #818798; font-family: var(--jakarta); font-size: var(--fs-caption); font-weight: 700; letter-spacing: .13em; }
.project-detail-overview h2,
.project-detail-section-head h2 { color: var(--hero-navy); font-family: var(--jakarta); font-size: var(--fs-h2); letter-spacing: -.055em; line-height: 1.12; }
.project-detail-overview > p { max-width: 580px; padding-top: 28px; color: #646b7d; font-size: var(--fs-lead); line-height: 1.9; }
.project-detail-overview-board { padding: 12px 0 96px; }
.project-detail-section-note { max-width: 640px; margin-top: 18px; color: #646b7d; font-size: var(--fs-lead); line-height: 1.8; }
.project-detail-longform { margin: 0; overflow: hidden; border-radius: var(--radius); background: #f6f5f0; box-shadow: 0 18px 48px -40px #20233b80; }
.project-detail-longform img { display: block; width: 100%; height: auto; }
.project-detail-longform figcaption { padding: 18px 24px 22px; color: #818798; font-size: var(--fs-small); letter-spacing: .02em; }
.project-detail-gallery { padding: 68px 0 0; border-top: 1px solid #ebeaf2; }
.project-detail-section-head { max-width: 680px; margin-bottom: 38px; }
.project-detail-media { display: grid; gap: 22px; }
.project-detail-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: #f0f1f7;
  box-shadow: 0 14px 42px -36px #20233b73;
}
.project-detail-media--compact {
  padding: 44px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  border-radius: var(--radius);
  background: linear-gradient(145deg, #f5f5fb, #eceefa);
}
.project-detail-media--compact img { height: min(680px, 64vw); object-fit: contain; }
.project-detail-end { display: flex; margin-top: 60px; justify-content: space-between; align-items: center; gap: 20px; }
.project-detail-end a { flex: 0 0 auto; }

@media (max-width: 767px) {
  .project-detail-page .content-shell { width: 100%; padding: 112px 20px 72px; }
  .project-detail-hero { padding: 34px 0 36px; }
  .project-detail-hero h1 { margin: 20px 0 16px; font-size: var(--fs-h1); }
  .project-detail-lead { font-size: var(--fs-lead); line-height: 1.72; }
  .project-detail-actions { margin-top: 28px; }
  .project-detail-cover { border-radius: var(--radius); }
  .project-detail-overview { padding: 62px 0 56px; grid-template-columns: 1fr; gap: 22px; }
  .project-detail-overview > p { padding-top: 0; font-size: var(--fs-lead); line-height: 1.78; }
  .seerq-hero-board { min-height: 760px; aspect-ratio: auto; border-radius: var(--radius); }
  .seerq-hero-surface { height: 100%; object-position: 64% center; }
  .seerq-hero-board::after { background: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.72) 52%, rgba(255,255,255,.12) 100%); }
  .seerq-hero-copy { width: auto; padding: 36px 20px 340px; }
  .seerq-hero-eyebrow { font-size: var(--fs-small); line-height: 1.5; }
  .seerq-hero-copy h2 { font-size: var(--fs-h1); }
  .seerq-hero-tabs { gap: 6px; margin-top: 20px; }
  .seerq-hero-tabs span { padding: 9px 13px; font-size: var(--fs-small); }
  .seerq-hero-panel { margin-top: 34px; padding: 24px 20px 18px; border-radius: var(--radius); }
  .seerq-hero-panel h3 { font-size: var(--fs-card-title); }
  .seerq-hero-panel p { font-size: var(--fs-body); line-height: 1.75; }
  .seerq-hero-stats { gap: 6px; }
  .seerq-hero-stats div { padding: 14px 8px 11px; }
  .seerq-hero-stats strong { font-size: var(--fs-card-title); }
  .seerq-hero-stats span { margin-top: 8px; font-size: var(--fs-caption); }
  .seerq-hero-cards { top: auto; right: 0; bottom: 0; left: 0; width: 100%; height: 310px; padding: 0 12px; gap: 8px; }
  .seerq-card-column--left { --seerq-track-top: -18%; }
  .seerq-card-column--right { --seerq-track-top: -2%; }
  .seerq-card-cycle { gap: 8px; padding-bottom: 8px; }
  .seerq-card { width: 100%; }
  .seerq-hero-board .seerq-card { width: 100%; height: auto; }
  .project-detail-gallery { padding-top: 48px; }
  .project-detail-section-head { margin-bottom: 26px; }
  .project-detail-media { gap: 12px; }
  .project-detail-media img { border-radius: var(--radius); }
  .project-detail-media--compact { padding: 14px; border-radius: var(--radius); gap: 10px; }
  .project-detail-media--compact img { height: 78vw; }
  .project-detail-end { margin-top: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .seerq-card-track { animation: none; transform: none; }
  .seerq-card-cycle[aria-hidden="true"] { display: none; }
}

/* ============ HERO ============ */
/* v2 direction: full-bleed soft-sky photo, left-aligned Plus Jakarta hero */
.hero-zone { position: relative; height: 1130px; }
.hero-zone::before {
  content: '';
  position: absolute;
  top: 0;
  height: 1130px;
  left: calc(50% - var(--vwz, 100vw) / 2);
  right: calc(50% - var(--vwz, 100vw) / 2);
  /* sun layers first (they paint on top of the sky photo, under content):
     iOS-Weather-style hot core + warm bloom + spectral halo + lens ghost */
  background: #fff;
  pointer-events: none;
}
/* ASCII paper plane behind the hero headline (from the template's CTA section) */
.ascii-plane {
  position: absolute;
  left: 50%;
  top: 96px;
  translate: -50% 0;
  width: 1000px;
  height: 562px;
  pointer-events: none;
  mask-image: radial-gradient(55% 55% at 50% 50%, #000 30%, #0000 100%);
  -webkit-mask-image: radial-gradient(55% 55% at 50% 50%, #000 30%, #0000 100%);
}
/* ASCII clouds flanking section headings (same pattern as .ascii-thumb in hiw) */
.head-clouds {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1200px;
  height: 0;
  translate: -50% -50%;
  pointer-events: none;
}
.ascii-cloud {
  position: absolute;
  width: 470px;
  height: 470px;
  top: -235px;
  mask-image: radial-gradient(50% 50%, #000 0%, #00000073 57.3%, #0000 100%);
  -webkit-mask-image: radial-gradient(50% 50%, #000 0%, #00000073 57.3%, #0000 100%);
}
.ascii-cloud.left { left: -190px; }
.ascii-cloud.right { right: -190px; scale: -1 1; }
.showcase-head, .bento-head { position: relative; }
.hero {
  position: absolute;
  top: 141px;
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  /* aligned with the fixed nav's logo; --heroPad is computed by the zoom-fit
     script (110px is the exact value for full-size desktop layouts) */
  padding-left: var(--heroPad, 110px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  text-align: left;
}
/* two-part announcement pill */
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 7px 20px 7px 7px;
  border-radius: 999px;
  background: #ffffff85;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 28px -14px #1b2a4a33;
}
.hero-pill-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 12px -4px #1b2a4a2e;
  font-family: var(--jakarta);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: -0.01em;
  color: var(--hero-navy);
}
.hero-pill-chip img { width: 20px; height: 20px; border-radius: var(--radius); }
.hero-pill-text {
  font-family: var(--jakarta);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #3d4c63;
}
.hero-pill-text .hpt-short { display: none; }
.hero-heading { width: 100%; position: relative; }
/* app-icon stickers flanking the headline (Claude left, App Store right) */
.hero-heading h1, .hero-heading .type-line { position: relative; z-index: 1; }
.hero-ico {
  position: absolute;
  width: 62px;
  height: 62px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  /* physically-plausible shadow: contact layer + geometric ramp of ever
     softer, farther, fainter diffuse layers (overhead light) */
  --shadow-ramp:
    0 1px 1px #0f0f360f,
    0 2px 2px #0f0f360d,
    0 4px 5px #0f0f360c,
    0 9px 10px #0f0f360b,
    0 18px 22px #0f0f360a,
    0 34px 42px #0f0f360a;
  box-shadow: var(--shadow-ramp);
  z-index: 0;
}
.hero-ico {
  border-radius: 21%; /* iOS squircle-ish; crops the official artwork */
  overflow: hidden;
}
.hero-ico img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* the App Store SVG carries its own rounded corners — oversize it a touch so
   the container's crop defines the shape instead */
.hero-ico-app img { scale: 1.06; }
.hero-ico-claude {
  left: -50px;
  top: -10px;
  rotate: -9deg;
}
.hero-ico-app {
  right: -50px;
  bottom: -4px;
  rotate: 9deg;
  /* extra bounce shadow tinted by the blue tile */
  box-shadow: var(--shadow-ramp), 0 12px 26px -10px #1470e93d;
}
.hero-heading { margin-top: 26px; }
/* H1 spec from reference: Plus Jakarta ExtraBold 64 / 115% / -4% */
.hero h1, .type-line {
  font-family: var(--jakarta);
  font-size: var(--fs-h1);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: var(--hero-navy);
}
.type-line {
  min-height: 74px;
  white-space: nowrap;
}
/* typed characters: pop in with a blur-settle, selection paints per-char */
.type-line .tch {
  display: inline-block;
  white-space: pre;
  padding: 5px 0 9px;
  margin: -5px 0 -9px;
  animation: tch-in .3s cubic-bezier(.2, .9, .3, 1.35) both;
}
@keyframes tch-in {
  from { opacity: 0; transform: translateY(16px) scale(1.35) rotate(4deg); filter: blur(7px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.type-line .tch.sel { background: #d7e8fb; }
/* editor caret: chunky rounded bar, blinks while idle, solid while working */
.type-cursor {
  display: inline-block;
  width: 9px;
  height: 64px;
  margin-left: 5px;
  border-radius: var(--radius);
  background: #4e9af1;
  vertical-align: -8px;
  animation: blink 1.1s steps(2) infinite;
}
.type-cursor.solid { animation: none; }
@keyframes blink { 50% { opacity: 0; } }
/* body spec from reference: Plus Jakarta Medium 18 / 26 / -1% */
.hero-sub {
  margin-top: 12px;
  font-family: var(--jakarta);
  font-size: var(--fs-card-title);
  font-weight: 500;
  line-height: 26px;
  letter-spacing: -0.01em;
  color: #515e76;
  max-width: 620px;
}
.hero .btn-dark {
  margin-top: 30px;
}

/* ============ HERO PHONE TICKER ============ */
.hero-ticker-wrap {
  --split: 49.5575%;
  position: absolute;
  /* 72px gap between the hero CTA and the ticker's overhanging pills */
  top: 577px;
  left: calc(50% - var(--vwz, 100vw) / 2);
  right: calc(50% - var(--vwz, 100vw) / 2);
  height: 536px;
}
.ticker-gray {
  pointer-events: none;
  clip-path: inset(-40px calc(100% - var(--split)) -40px 0);
  z-index: 1;
}
.ticker {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  overflow: clip;
  cursor: grab;
  user-select: none;
}
.ticker:active { cursor: grabbing; }
/* hero tickers: headroom inside the clip box so the edge pills' overhang
   AND the arc lift (edge cards rise ~64px on the curve) survive
   overflow: clip (-70 + 90 = the original 20px visual offset) */
.hero-ticker-wrap .ticker { top: -70px; padding-top: 90px; }
/* roomier spacing between hero cards (base track gap is 30px) */
.hero-ticker-wrap .ticker-track { gap: 46px; }
.ticker-track {
  display: flex;
  align-items: center;
  gap: 30px;
  width: max-content;
  will-change: transform;
}
.phone-card {
  position: relative;
  width: 251px;
  aspect-ratio: 0.527027;
  border-radius: 32px;
  background: #fff; /* v2 direction: white cards over the sky fade */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.phone-frame {
  width: 203px;
  aspect-ratio: 0.461095;
  border-radius: 24px;
  border: 3px solid #ededed;
  overflow: clip;
  box-shadow: 0 20px 40px -20px #0f0f3612;
}
.phone-frame img { width: 100%; height: 100%; object-fit: cover; }
/* 首页作品直接展示截图，去掉设备外侧白色卡片和描边。 */
.hero-ticker-wrap .phone-card {
  width: 232px;
  aspect-ratio: 406 / 880;
  background: transparent;
  border-radius: var(--radius-sm);
}
.hero-ticker-wrap .phone-frame {
  width: 100%;
  aspect-ratio: inherit;
  border: 0;
  border-radius: var(--radius-sm);
}
/* ============ WHY CHOOSE US + LOGOS ============ */
.why-us {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.logo-flips {
  width: 713px;
  height: 130px;
  display: flex;
  align-items: center;
}
.logo-flip {
  flex: 1;
  min-width: 0;
  /* clip window = exactly one logo, no padding — overflow clips at the padding
     box, so any padding here shows slices of the neighboring stack items */
  height: 56px;
  overflow: clip;
  display: flex;
  justify-content: center;
}
.logo-flip-stack {
  display: flex;
  flex-direction: column;
  width: 120px;
  flex-shrink: 0;
}
.logo-flip-stack img {
  width: 120px;
  height: 56px;
  object-fit: cover;
  flex-shrink: 0;
  margin-bottom: 10px;
}

/* ============ ASCII CANVASES ============ */
.ascii-gear {
  position: absolute;
  top: -233px;
  left: 50%;
  transform: translateX(-50%);
  width: 687px;
  height: 687px;
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 60%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 60%);
  z-index: 0;
}

/* Shared section heading treatment */
.bento-head { gap: 16px; }
.bento-head .tag,
.showcase-head .tag {
  background: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--jakarta);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--hero-navy);
  box-shadow: 0 8px 20px -10px #59232a24, 0 1px 2px #59232a14;
  gap: 0;
}
.bento-head .tag::before,
.bento-head .tag::after,
.showcase-head .tag::before,
.showcase-head .tag::after { content: none; }
.bento-head .tag img,
.showcase-head .tag img { display: none; }
.bento-head h2,
.showcase-head h2 {
  font-family: var(--jakarta);
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: var(--hero-navy);
}
.bento-head .blue,
.showcase-head .blue { color: var(--hero-navy); }
.showcase-head h2,
.about-head h2 {
  white-space: nowrap;
  font-size: var(--fs-h2);
}

/* ============ SHOWCASE (gallery toggle) ============ */
.showcase {
  position: relative;
  width: var(--vwz, 100vw);
  margin-left: calc((100% - var(--vwz, 100vw)) / 2);
  overflow-x: clip;
}
.showcase-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}
.showcase-head {
  width: 494px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  z-index: 2;
  text-align: center;
}
.showcase-head .blue { color: var(--hero-navy); } /* v2: both lines navy */
.showcase-body {
  width: 1281px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.pill-toggle {
  position: relative;
  backdrop-filter: blur(6px);
  z-index: 3;
}
.pill-thumb { display: none; }
.pill { position: relative; z-index: 1; }
.showcase-ticker-wrap {
  position: relative;
  width: var(--vwz, 100vw);
  height: 586px;
}
.showcase-ticker-wrap .ticker { top: 0; left: 0; right: 0; }
.shot-card {
  width: 290px;
  height: 518px;
  background: var(--card-gray);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.app-icons {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: max-content;
  height: 92px;
  background: transparent;
  border-radius: var(--radius);
  backdrop-filter: none;
  padding: 7.85px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8.74px;
  z-index: 2;
}
.app-icon {
  width: 59px;
  height: 59px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
}
.app-icon:hover {
  transform: translateY(-2px);
  background: transparent;
  box-shadow: none;
}
.app-icon:active { transform: translateY(-1px) scale(.94); }
.app-icon.sel { background: transparent; box-shadow: none; }
/* two icon docks — the pill toggle swaps which one shows */
.app-icons[data-mode="store"] { display: none; }
.showcase-ticker-wrap.mode-store .app-icons[data-mode="design"] { display: none; }
.showcase-ticker-wrap.mode-store .app-icons[data-mode="store"] { display: flex; }
.app-icon img {
  width: 59px; height: 59px;
  object-fit: cover;
  border-radius: 20px;
  opacity: .55;
  transition: opacity .35s;
}
.app-icon.sel img { opacity: 1; }
.app-icon:hover img { opacity: 1; }
.app-icon.pop { animation: icon-pop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes icon-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.14) translateY(-3px); }
  100% { transform: scale(1); }
}
/* project ticker layers: blur-crossfade between sets */
.showcase-ticker-wrap .ticker.proj {
  --tint: grayscale(0);
  opacity: 0;
  pointer-events: none;
  filter: blur(16px) var(--tint);
  transform: scale(1.05) translateY(12px);
  transition: opacity .5s cubic-bezier(.22,1,.36,1), filter .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);
}
.showcase-ticker-wrap .ticker.proj.active {
  opacity: 1;
  pointer-events: auto;
  filter: blur(0px) var(--tint);
  transform: none;
}
.showcase-caption {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.showcase-caption .bracket { margin-top: 0; }
.showcase-caption p {
  width: 337px;
  font-family: var(--grotesk);
  font-size: var(--fs-lead);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.4;
  text-align: center;
  color: var(--ink);
}

/* ============ HOW IT WORKS ============ */
.hiw {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 1020px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hiw-header {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding: 40px 40px 0;
  overflow: hidden;
}
.hiw-head-content {
  position: relative;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  z-index: 2;
}
.hiw-sub {
  width: 80%;
  font-size: var(--fs-card-title);
  font-weight: 300;
  line-height: 1.6em;
  color: var(--gray);
}
.steps-pointer {
  width: 71%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 2;
}
.step-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.step-tab-pill {
  padding: 8px 16px;
  font-family: var(--grotesk);
  font-size: var(--fs-lead);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 110%;
  color: var(--ink);
  opacity: .4;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: all .3s;
  background: transparent;
}
.step-tab.active .step-tab-pill {
  opacity: 1;
  background: #fff;
  border-color: var(--line);
}
.step-line {
  width: 1px;
  height: 85px;
  background: var(--line);
}
.steps-panel {
  width: 100%;
  display: flex;
  border: 1px solid var(--line);
}
.steps-left {
  flex: 1;
  height: 400px;
  overflow: clip;
  position: relative;
}
.steps-left-track {
  display: flex;
  flex-direction: column;
  transition: transform .7s cubic-bezier(.65,0,.35,1);
}
.step-content {
  position: relative;
  height: 400px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  overflow: hidden;
  flex-shrink: 0;
}
.step-content h3 {
  position: relative;
  z-index: 3;
  font-family: var(--grotesk);
  font-size: var(--fs-title);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink-heading);
}
.step-content p {
  position: relative;
  z-index: 3;
  font-size: var(--fs-lead);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--gray);
}
.step-progress {
  position: absolute;
  top: -1px; bottom: -1px; left: 0;
  width: 0%;
  background: var(--fill);
  z-index: 1;
}
.step-content.running .step-progress {
  animation: fillacross var(--step-dur, 6s) linear forwards;
}
@keyframes fillacross { from { width: 0%; } to { width: 100%; } }

.steps-right {
  flex: 1;
  height: 400px;
  border-left: 1px solid var(--line);
  position: relative;
  overflow: clip;
  background: var(--card-gray); /* match the ticker card backgrounds */
}
/* right panel slides between adjacent steps (same motion as the left track);
   JS swaps to a quick fade-cut only when a non-adjacent tab is clicked */
.steps-right-track {
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .7s cubic-bezier(.65,0,.35,1);
  will-change: transform;
}
.step-anim {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* step 1 visual: plan card */
.step-plan-card {
  width: 280px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 20px 30px -18px #004b760f, 0 2px 4px #003d760a;
}
.plan-lines { display: flex; flex-direction: column; gap: 10px; }
.plan-lines span {
  display: block;
  height: 10px;
  border-radius: var(--radius);
  background: var(--bg);
}
.plan-lines span:nth-child(2) { width: 80%; }
.plan-lines span:nth-child(3) { width: 60%; }

/* step 2 visual: orbit */
.orbit {
  position: relative;
  width: 360px;
  height: 360px;
}
.orbit-ring {
  position: absolute;
  border: 1px solid var(--line);
  border-radius: 50%;
}
.ring-1 { inset: 0; }
.ring-2 { inset: 45px; }
.ring-3 { inset: 90px; }
.orbit-set {
  position: absolute;
  animation: orbitspin 40s linear infinite;
}
.set-1, .set-2 { inset: 0; }
.set-3, .set-4 { inset: 45px; animation-duration: 32s; animation-direction: reverse; }
.set-5 { inset: 90px; animation-duration: 26s; }
@keyframes orbitspin { to { transform: rotate(360deg); } }
.orbit .tool {
  position: absolute;
  top: 50%; left: 50%;
  width: 28px; height: 28px;
  padding: 7px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 1px 1px #003d760a, 0 4px 6px #00537608, 0 0 0 1px #0161970a;
  transform: translate(-50%,-50%) rotate(var(--a)) translateX(calc(50cqw)) rotate(calc(-1 * var(--a)));
}
.orbit-set { container-type: size; }
.orbit .tool img { width: 14px; height: 14px; }
.orbit-logo {
  position: absolute;
  top: calc(50% - 30.5px);
  left: calc(50% - 30.5px);
  width: 61px; height: 61px;
  background: #fff;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 1px #003d760a, 0 6px 8px #00537608, 0 0 0 1px #0161970a;
}
.orbit-logo img { width: 36px; height: 36px; border-radius: var(--radius); }

/* step 3 visual: execution monitor */
.monitor {
  width: 349px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding-top: 11.46px;
  display: flex;
  flex-direction: column;
  gap: 7.64px;
  box-shadow: 0 20px 30px -18px #004b760f, 0 2px 4px #003d760a;
  overflow: hidden;
}
.monitor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
}
.monitor-title {
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
}
.monitor-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius);
  background: #fe00001a;
  font-size: var(--fs-small);
  line-height: 150%;
  color: red;
}
.dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: red;
  display: inline-block;
}
.dot.green { background: #0c9618; }
.monitor-line { height: 1px; background: var(--line); }
.monitor-table {
  padding: 0 8px;
  display: flex;
  flex-direction: column;
}
.m-row { display: flex; }
.m-row .m-cell {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  font-size: var(--fs-caption);
  line-height: 1.2;
  color: #201f3280;
}
.m-row.m-head .m-cell {
  padding: 5px 10px;
  font-weight: 500;
  color: var(--ink);
}
.m-ico { display: inline-flex; width: 10px; height: 10px; }
.m-ico.spin { animation: spin 1.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.monitor-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  font-size: var(--fs-small);
  line-height: 150%;
  color: #0c9618;
  background: #e5ffe9;
}

/* ---- step visuals v2: before+request → wobble build → after+testimonial ---- */
.sa-stage { position: absolute; inset: 0; }
.sa-phone {
  position: absolute;
  left: 50%;
  top: 26px;
  translate: -50% 0;
  width: 212px;
  height: calc(100% - 26px);
  /* natural iPhone silver bezel */
  border: 4px solid #dadade;
  border-bottom: 0;
  border-radius: 36px 36px 0 0;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px #f5f5f7, 0 30px 50px -30px #0f0f3640;
}
.sa-phone img { width: 100%; display: block; }
.sa1-box {
  position: absolute;
  left: 50%;
  bottom: 22px;
  translate: -50% 0;
  width: 296px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: 0 18px 34px -20px #0f0f3633, 0 2px 5px #003d760a;
}
.sa-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink);
  background: #fff;
}
.sa-chip svg { width: 16px; height: 16px; color: #8a8a98; }
.sa1-lines { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.sa1-lines span { height: 10px; border-radius: 999px; background: #ececf4; }
.sa1-lines span:last-child { width: 68%; }
/* step 2 — claude × app store wobble + slack-style change comments */
.sa2-tiles {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -58%;
  display: flex;
  align-items: center;
  gap: 16px;
}
.sa2-tile {
  width: 66px;
  height: 66px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 14px 26px -12px #0f0f3642, 0 2px 5px #0f0f361f;
  animation: sa-wobble 2.8s ease-in-out infinite;
}
.sa2-tile img { width: 100%; height: 100%; object-fit: cover; scale: 1.02; }
.sa2-app { animation-delay: -1.4s; }
.sa2-x { font-size: var(--fs-card-title); font-weight: 600; color: #b9bcd0; }
@keyframes sa-wobble {
  0%, 100% { transform: rotate(-5deg) translateY(2px); }
  50% { transform: rotate(5deg) translateY(-4px); }
}
.sa2-comment {
  position: absolute;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  width: 208px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px var(--radius) var(--radius) var(--radius);
  box-shadow: 0 14px 26px -16px #0f0f362e, 0 2px 4px #003d760a;
  opacity: 0;
  animation: sa-comment 6.6s ease-in-out infinite;
}
.sa2-comment i { width: 18px; height: 18px; border-radius: var(--radius); flex-shrink: 0; margin-top: 1px; }
.sa2-c1 i { background: #6e73fa; }
.sa2-c2 i { background: #f7b500; }
.sa2-c3 i { background: #20a684; }
.sa2-comment strong { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--ink-heading); }
.sa2-comment span { font-size: var(--fs-caption); color: var(--gray); }
.sa2-c1 { left: 26px; top: 34px; }
.sa2-c2 { right: 22px; top: 116px; animation-delay: 2.2s; }
.sa2-c3 { left: 40px; bottom: 40px; animation-delay: 4.4s; }
@keyframes sa-comment {
  0% { opacity: 0; translate: 0 10px; }
  6%, 58% { opacity: 1; translate: 0 0; }
  70%, 100% { opacity: 0; translate: 0 -6px; }
}
/* step 3 — after + testimonial */
.sa3-testi {
  position: absolute;
  left: 50%;
  bottom: 20px;
  translate: -50% 0;
  width: 312px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 14px;
  box-shadow: 0 18px 34px -20px #0f0f3633, 0 2px 5px #003d760a;
}
.sa3-head { display: flex; align-items: center; gap: 10px; }
.sa3-head img { width: 30px; height: 30px; border-radius: 50%; background: #e5eaff; }
.sa3-head div { display: flex; flex-direction: column; line-height: 1.25; }
.sa3-head strong { font-size: var(--fs-small); font-weight: 600; color: var(--ink-heading); }
.sa3-head span { font-size: var(--fs-caption); color: var(--gray); }
.sa3-head em { margin-left: auto; font-style: normal; font-size: var(--fs-small); letter-spacing: 1px; color: #f5a623; }
.sa3-testi p { margin-top: 9px; font-size: var(--fs-small); line-height: 1.45; color: var(--ink); }
.step-anim.active .sa1-box,
.step-anim.active .sa3-testi { animation: sa-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes sa-pop {
  0% { opacity: 0; translate: -50% 14px; }
  100% { opacity: 1; translate: -50% 0; }
}

/* ============ FEATURES BENTO ============ */
.bento {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 1100px;
}
.bento-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  margin-bottom: 56px;
}
.bento-head h2 {
  white-space: nowrap;
  /* v2 direction: Jakarta navy, matching the other redesigned section heads */
  font-family: var(--jakarta);
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: var(--hero-navy);
}
.bento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.bento-card {
  min-width: 0;
  height: 420px;
  background: #fff;
  border-radius: var(--radius);
  padding: 36px 36px 0;
  overflow: clip;
  position: relative;
  box-shadow: 0 0 0 1.60714px #0161970a, 0 40px 50px -30px #004b760f, 0 4px 8px #003d7608;
}
.bento-cap {
  margin: 2px auto 0;
  max-width: 82%;
  text-align: center;
  font-size: var(--fs-lead);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--gray);
}
.bento-cap strong { font-weight: 600; color: var(--ink-heading); }
.bento-stage {
  position: absolute;
  inset: 96px 0 78px;
}
.bento-pill {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 14px 28px -16px #0f0f3629, 0 2px 4px #003d760a;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink);
  z-index: 3;
}
.pill-ico { width: 19px; height: 19px; color: var(--ink); flex-shrink: 0; }
.pill-figma { width: 18px; height: 18px; }
.bento-pill-r {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  color: var(--gray);
}
.pill-chev { width: 12px; height: 12px; color: #a1a1b0; }
.bento-pill .spark { color: #5a52e0; font-size: var(--fs-body); }
.pill-purple { border-color: #6e73fa42; background: #fdfdff; }
.pill-purple, .pill-purple .bento-pill-r { color: #5a52e0; }
/* fanned screens */
.fan { position: absolute; inset: 0; }
.fan img {
  position: absolute;
  width: 150px;
  aspect-ratio: 0.461095;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius);
  border: 4px solid #fff;
  box-shadow: 0 24px 44px -20px #0f0f3633, 0 4px 10px #0f0f3614;
}
.fan .f1 { left: 56px; top: 46px; rotate: -13deg; }
.fan .f2 { right: 60px; top: 22px; rotate: 11deg; }
.fan .f3 { left: 50%; top: 58px; translate: -50% 0; rotate: -3deg; width: 168px; z-index: 2; }

/* --- bento v3: template's "Smart Organization Engine" folder grid +
   "Instant Workflow Generation" AI prompt card --- */
.b3-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}
/* ---- v2 bento: lavender veil, tall-left card + two stacked right cards ---- */
.bento { position: relative; }
.bento .head-clouds { display: none; }
.bento::before {
  content: '';
  position: absolute;
  top: -80px;
  bottom: -100px;
  left: calc(50% - var(--vwz, 100vw) / 2);
  right: calc(50% - var(--vwz, 100vw) / 2);
  /* bottom-anchored + oversized: the image's rough top edge crops away */
  background: url('assets/bento-bg.jpg') center bottom / 100% 118% no-repeat;
  pointer-events: none;
}
.bento-head, .bv2-grid { position: relative; z-index: 1; }
.bv2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 28px;
  width: 1040px;
  margin: 0 auto;
}
.bv2-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius);
  padding: 30px 32px;
  overflow: clip;
  box-shadow: 0 26px 48px -32px #2a1a5e21, 0 2px 6px #2a1a5e0a;
}
.bv2-tall { grid-row: 1 / 3; }
.bv2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--jakarta);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6f5bd9;
  margin-bottom: 14px;
}
.bv2-eyebrow svg { width: 15px; height: 15px; }
.bv2-h {
  font-family: var(--jakarta);
  font-size: var(--fs-title);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--hero-navy);
}
.bv2-tall .bv2-h { max-width: 400px; }
.bv2-side .bv2-eyebrow { margin: 0 auto 12px; }
.bv2-side .bv2-h { font-size: var(--fs-title); text-align: center; max-width: 330px; margin: 0 auto; }
.bv2-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.bv2-chips span {
  padding: 7px 14px;
  border-radius: 999px;
  background: #f1eff7;
  font-family: var(--jakarta);
  font-size: var(--fs-small);
  font-weight: 600;
  color: #43415e;
}
/* "just a screen for now": flush to the card's bottom edge, cropped by it */
.bv2-screen {
  margin-top: auto;
  padding-top: 26px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.bv2-screen img {
  position: relative;
  width: 318px;
  height: auto;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  box-shadow: 0 1px 2px rgba(35, 35, 35, 0.08);
  margin-bottom: -30px;
}
.bv2-system {
  margin: 28px auto 0;
  width: 100%;
  max-width: 310px;
}
.bv2-system img { width: 100%; height: auto; }
.bv2-system figcaption {
  margin-top: 12px;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--gray);
  text-align: center;
}
/* transplanted illustrations: breathing room, scaled down from full width */
.bv2-side .b3-folders {
  margin: 44px auto 0;
  position: relative;
  width: 82%;
  column-gap: 8px;
  row-gap: 10px;
}
.bv2-side .b3-prompt {
  margin: 34px auto 0;
  position: relative;
  width: 86%;
}
.bv2-side .b3-avatar { width: 74px; height: 74px; margin-bottom: -24px; }
/* folder watermark: solid white fill, no gray-stroke ghost, no breathe */
.bv2-side .b3-folder-r {
  filter: brightness(0) invert(1);
  opacity: 1;
  animation: none;
}
/* Portfolio illustrations use a small drop shadow without a diffuse halo. */
.bv2-screen { position: relative; }
.bv2-screen::before,
.bv2-side .b3-prompt::before,
.bv2-side .b3-avatar::before { content: none; }
.bv2-side .b3-folders::before {
  content: '';
  position: absolute;
  inset: -10% -8%;
  background: radial-gradient(62% 56% at 50% 46%, #b9a5ec38 0%, #c9b8f01c 55%, transparent 78%);
  filter: blur(26px);
  pointer-events: none;
}
.b3-card {
  position: relative;
  background: #e8e8f1; /* muted lavender panel fill (from reference mockup), flat */
  border-radius: var(--radius);
  padding: 38px 40px 44px;
  overflow: clip;
}
.b3-head h3 {
  font-size: var(--fs-title);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-heading);
  margin-bottom: 8px;
}
.b3-head p {
  font-size: var(--fs-lead);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--gray);
  max-width: 92%;
}
/* folder grid — fluid 4-up, symmetric inside the card padding */
.b3-folders {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: auto;
  column-gap: 10px;
  row-gap: 12px;
}
.b3-folder {
  position: relative;
  width: 100%;
  aspect-ratio: 533 / 729;
  background: url('assets/folder-shape.png') center / 100% 100% no-repeat;
}
.b3-folder-name {
  position: absolute;
  left: 10%;
  top: 7%;
  padding-left: 4px;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--fc);
}
.b3-folder-r {
  position: absolute;
  left: 50%;
  top: 48%;
  translate: -50% -50%;
  width: 56%;
  height: auto;
  opacity: 0.1; /* the new mark is near-black — fade it to a watermark */
  animation: mark-breathe 5.5s ease-in-out infinite;
  animation-delay: var(--fd, 0s);
}
/* ambient life: a wave drifts across the folder grid while each watermark
   breathes — staggered negative delays so everything starts mid-phase */
.b3-folder { animation: folder-float 5.5s ease-in-out infinite var(--fd, 0s); }
.b3-folder:nth-child(1) { --fd: 0s; }
.b3-folder:nth-child(2) { --fd: -0.7s; }
.b3-folder:nth-child(3) { --fd: -1.4s; }
.b3-folder:nth-child(4) { --fd: -2.1s; }
.b3-folder:nth-child(5) { --fd: -2.8s; }
.b3-folder:nth-child(6) { --fd: -3.5s; }
.b3-folder:nth-child(7) { --fd: -4.2s; }
.b3-folder:nth-child(8) { --fd: -4.9s; }
@keyframes folder-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}
@keyframes mark-breathe {
  0%, 100% { opacity: 0.09; scale: 1; rotate: 0deg; }
  50% { opacity: 0.17; scale: 1.12; rotate: -8deg; }
}
.b3-folder-count {
  position: absolute;
  right: 6%;
  bottom: 26%;
  padding: 3px 7px;
  font-size: var(--fs-caption);
  color: var(--ink);
  background: color-mix(in srgb, var(--fc) 13%, #fff);
  border-radius: var(--radius);
  white-space: nowrap;
}
/* AI prompt visual */
.b3-prompt {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.b3-avatar {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: linear-gradient(145deg, #575cf8, #3136f3);
  display: grid;
  place-items: center;
  margin-bottom: -30px;
}
.b3-avatar::before {
  content: '';
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  background: #ffffff8a;
  z-index: -1;
}
.b3-avatar { background: none; }
.b3-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.b3-promptbox {
  position: relative;
  z-index: 1;
  width: 100%;
  background: #fff;
  border: 1px solid #ececf2;
  border-radius: var(--radius);
  padding: 20px 20px 18px;
  box-shadow: 0 1px 2px rgba(35, 35, 35, 0.08);
}
.b3-ph {
  min-height: 54px;
  font-size: var(--fs-lead);
  letter-spacing: -0.005em;
  color: #8a8a98;
}
.b3-caret {
  display: inline-block;
  width: 1.5px;
  height: 15px;
  margin-left: 2px;
  background: var(--ink);
  vertical-align: -2px;
  animation: b3blink 1.1s steps(2) infinite;
}
@keyframes b3blink { 50% { opacity: 0; } }
.b3-prompt-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.b3-model {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-body);
  color: var(--ink);
}
.b3-model svg { width: 17px; height: 17px; color: var(--ink); }
.b3-actions { display: inline-flex; align-items: center; gap: 8px; }
.b3-attach, .b3-send {
  width: 40px;
  height: 40px;
}
.b3-attach svg { width: 18px; height: 18px; }
.b3-send svg { width: 15px; height: 15px; }
.b3-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  width: 100%;
}
.b3-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--fs-body);
  letter-spacing: -0.005em;
  color: var(--ink);
  box-shadow: 0 2px 5px #0f0f360a;
}
.b3-chip svg { width: 17px; height: 17px; color: #8a8a98; flex-shrink: 0; }

/* --- bento v2: Attio-style 2-column composition (record rows + empty-state cards
   + fake multiplayer cursors) --- */
.b2-grid {
  display: grid;
  /* minmax(0,…) so the art SVGs' intrinsic width can't unbalance the columns */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}
.b2-col { display: flex; flex-direction: column; gap: 24px; }
.b2-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.b2-row.is-selected {
  background: #edeffe;
  border: 1.5px solid var(--blue);
  padding: 21.5px;
}
.b2-ico {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: #f5f5f7;
  border: 1px solid #e7e7ec;
  border-radius: var(--radius);
  color: #8a8a98;
}
.b2-ico svg { width: 28px; height: 28px; }
.is-selected .b2-ico { background: #e2e5fd; border-color: #c9cdfa; color: var(--blue); }
.b2-row-txt { min-width: 0; }
.b2-row-txt strong {
  display: block;
  font-size: var(--fs-lead);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-heading);
  margin-bottom: 2px;
}
.b2-row-txt span { font-size: var(--fs-lead); letter-spacing: -0.005em; color: var(--gray); }
.b2-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #fafafc;
  border: 1px solid #ebebf2;
  border-radius: var(--radius);
  padding: 44px 40px;
}
.b2-art { color: var(--blue); max-width: 100%; height: auto; }
.b2-card h3 {
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-heading);
  margin: 26px 0 8px;
}
.b2-card p { font-size: var(--fs-lead); line-height: 1.5; letter-spacing: -0.005em; color: var(--gray); }
.b2-btn {
  margin-top: 26px;
}
/* fake multiplayer cursors */
.b2-cursor {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  pointer-events: none;
}
.b2-cursor svg { width: 20px; height: 20px; flex-shrink: 0; }
.b2-cursor em {
  font-style: normal;
  font-size: var(--fs-body);
  font-weight: 600;
  color: #fff;
  padding: 5px 11px;
  border-radius: var(--radius);
  white-space: nowrap;
}
.b2-cursor-yellow { left: -12px; bottom: -30px; flex-direction: row-reverse; }
.b2-cursor-yellow svg { color: #f7b500; translate: -3px -12px; scale: -1 1; }
.b2-cursor-yellow em { background: #f7b500; }
.b2-cursor-pink { right: 34px; bottom: -30px; }
.b2-cursor-pink svg { color: #f9549b; translate: -3px -12px; }
.b2-cursor-pink em { background: #f9549b; }
.bento-phone {
  position: absolute;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  width: 200px;
  aspect-ratio: 0.461095;
}
.event-pill {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 30px -16px #0f0f3626, 0 2px 4px #003d760a;
  white-space: nowrap;
  z-index: 2;
}
.event-pill img { width: 28px; height: 28px; border-radius: 50%; background: #e5eaff; }
.event-pill-txt { display: flex; flex-direction: column; }
.event-pill-txt strong { font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
.event-pill-txt span { font-size: var(--fs-small); color: var(--gray); margin-top: 1px; }
.event-pill.p1 { left: 22px; top: 62px; rotate: -2deg; }
.event-pill.p2 { right: 22px; top: 158px; rotate: 2deg; }
.ascii-vane {
  position: absolute;
  left: 50%;
  top: -8px;
  transform: translateX(-50%);
  width: 270px;
  height: 270px;
  mask-image: radial-gradient(60% 60% at 50% 45%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 45%, #000 40%, transparent 100%);
}
.track-note {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 168px;
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  background: #6e73fa12;
  border: 1px solid #6e73fa42;
  border-radius: var(--radius);
  z-index: 2;
}
.track-note .spark { color: #5a52e0; font-size: var(--fs-lead); line-height: 1.3; }
.track-note strong {
  display: block;
  font-size: var(--fs-body);
  font-weight: 600;
  color: #5a52e0;
  margin-bottom: 4px;
}
.track-note p { font-size: var(--fs-body); line-height: 1.5; color: #8a84d8; }

/* delivery timeline visual */
.delivery-visual {
  position: absolute;
  inset: 0 36px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.delivery-track {
  position: relative;
  height: 4px;
  background: #ececf1;
  border-radius: var(--radius);
}
.delivery-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: var(--radius);
  background: var(--blue-soft);
  animation: delivery-run 6s cubic-bezier(.22,1,.36,1) infinite;
}
@keyframes delivery-run {
  0% { width: 0; opacity: 1; }
  45% { width: 66.6%; opacity: 1; }
  78% { width: 66.6%; opacity: 1; }
  92% { width: 66.6%; opacity: 0; }
  100% { width: 0; opacity: 0; }
}
.delivery-track i {
  position: absolute;
  top: 50%;
  left: var(--x);
  width: 12px; height: 12px;
  transform: translate(-50%, -50%);
  background: #e3e2e5;
  border-radius: 50%;
}
.delivery-days {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  font-size: var(--fs-small);
  color: var(--gray);
}
.delivery-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 34px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink);
  box-shadow: 0 12px 24px -14px #0f0f3626, 0 2px 4px #003d760a;
}
/* figma file visual */
.figma-card {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 18px 30px -16px #0f0f3620, 0 2px 4px #003d760a;
}
.figma-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eff0f5;
}
.figma-logo { width: 30px; height: 30px; flex-shrink: 0; }
.figma-file-txt { display: flex; flex-direction: column; min-width: 0; }
.figma-file-txt strong { font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
.figma-file-txt span { font-size: var(--fs-small); color: var(--gray); margin-top: 1px; }
.figma-rows { margin-top: 6px; }
.figma-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
  border-radius: var(--radius);
  font-size: var(--fs-body);
  color: var(--gray);
}
.figma-row i {
  width: 12px; height: 12px;
  border: 1.5px solid #b9b9c9;
  border-radius: var(--radius);
  flex-shrink: 0;
}
.figma-row em {
  margin-left: auto;
  font-style: normal;
  font-size: var(--fs-small);
  font-weight: 500;
  color: #5a52e0;
  background: #6e73fa1a;
  padding: 2px 8px;
  border-radius: var(--radius);
}
.figma-row.hot {
  background: #6e73fa0d;
  color: var(--ink);
  font-weight: 500;
}
.figma-row.hot i { border-color: #6e73fa; }

/* ============ UNFOLD GALLERY (grid-scroll 1:1) ============ */
.unfold { height: calc(100vh + 1500px); }
.unfold-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.unfold-grid {
  position: relative;
  width: 1180px;
  height: 865px;
}
.u-tile {
  position: absolute;
  width: 220px;
  height: 275px;
  border-radius: var(--radius);
  overflow: hidden;
  opacity: 0;
  will-change: transform, opacity;
}
.u-tile img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.u-tile.u-hero { z-index: 2; }

/* ============ reveal-on-scroll ============ */
/* uses `translate` (not `transform`) so it composes with translateX(-50%) centering */
.reveal {
  opacity: 0;
  translate: 0 28px;
  transition: opacity .9s cubic-bezier(.22,1,.36,1), translate .9s cubic-bezier(.22,1,.36,1);
}
.reveal.in {
  opacity: 1;
  translate: 0 0;
}


/* ============ BURN-REVEAL FOOTER ============ */
.burnwrap {
  --band: min(100vh, 900px);
  height: calc(var(--band) + 700px);
  width: var(--vwz, 100vw);
  margin-left: calc((100% - var(--vwz, 100vw)) / 2);
}
.burn-sticky {
  position: sticky;
  top: calc(100vh - var(--band));
  height: var(--band);
  overflow: hidden;
}
#burn-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
.site-footer {
  position: absolute;
  inset: 0;
  background: var(--ink);
  overflow: hidden;
}
.ascii-footer {
  position: absolute;
  left: 50%;
  top: -30px;
  transform: translateX(-50%);
  width: 900px;
  height: 500px;
  mask-image: radial-gradient(70% 70% at 50% 45%, #000 35%, transparent 100%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000 35%, transparent 100%);
  pointer-events: none;
}
.footer-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 max(48px, calc((100% - 1100px) / 2)) 26px;
}
.footer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 64px;
}
.footer-mono {
  font-family: var(--serif);
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #63667e;
}
.footer-mono span { color: #fff; font-weight: 500; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.footer-col h5 {
  font-family: "DM Mono", monospace;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7d8098;
  margin-bottom: 16px;
}
.footer-col a {
  display: block;
  font-size: var(--fs-body);
  color: #c8cbdd;
  padding: 5px 0;
  transition: color .2s;
}
.footer-col a:hover { color: #fff; }
.footer-bottom {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid #ffffff14;
  font-family: "DM Mono", monospace;
  font-size: var(--fs-small);
  letter-spacing: .06em;
  color: #7d8098;
}


/* ============ RESPONSIVE ============ */
/* svh: pinned stages track the *small* viewport so mobile URL-bar show/hide
   never causes layout jumps mid-pin */
@supports (height: 100svh) {
  /* --vhz (set by fit() while the canvas is zoom-scaled) = real viewport height
     in zoomed-canvas units — plain svh would be multiplied by the zoom factor
     and shorten every pinned stage, riding the phone up instead of centering */
  .unfold-sticky { height: var(--vhz, 100svh); }
  .unfold { height: calc(var(--vhz, 100svh) + 1500px); }
  .burnwrap { --band: min(var(--vhz, 100svh), 900px); }
  .burn-sticky { top: calc(var(--vhz, 100svh) - var(--band)); }
}

/* reduced motion: kill the decorative loops; content stays fully visible */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; translate: 0 0; }
  .delivery-fill, .orbit-set, .screen-shimmer,
  .b3-caret, .type-cursor, .app-icon.pop, .sa2-tile,
  .b3-folder, .b3-folder-r {
    animation: none !important;
  }
  .sa2-comment { animation: none !important; opacity: 1 !important; }
}

/* ============ MOBILE (<768px) — real reflow, zoom off ============ */
/* ============ ABOUT: designer file card (scrapbook elements, our theme) ============ */
.about {
  position: relative;
  margin-bottom: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.about::before {
  content: '';
  position: absolute;
  top: -120px;
  bottom: -120px;
  left: calc(50% - var(--vwz, 100vw) / 2);
  right: calc(50% - var(--vwz, 100vw) / 2);
  background: url('assets/hero-sky.jpg') center / cover no-repeat;
  /* long ramps: the sky breathes in and out instead of edging in */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 300px, #000 calc(100% - 240px), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 300px, #000 calc(100% - 240px), transparent);
  pointer-events: none;
}
.about-bg {
  /* contained watercolor halo behind the card, not full-bleed: a soft
     circular fade — corners (and the generator watermark) dissolve away */
  position: absolute;
  top: 200px;
  left: 50%;
  translate: -50% 0;
  width: 1060px;
  height: 700px;
  object-fit: cover;
  -webkit-mask-image: radial-gradient(52% 52% at 50% 50%, #000 46%, transparent 74%);
  mask-image: radial-gradient(52% 52% at 50% 50%, #000 46%, transparent 74%);
  pointer-events: none;
}
.about-head, .about-stage { position: relative; z-index: 1; }
.about-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  margin-bottom: 72px;
}
.about-head .tag {
  background: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--jakarta);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--hero-navy);
  box-shadow: 0 8px 20px -10px #23315924, 0 1px 2px #23315914;
}
.about-head .tag::before, .about-head .tag::after { content: none; }
.about-head h2 {
  font-family: var(--jakarta);
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: var(--hero-navy);
}
.about-head .blue { color: var(--hero-navy); }
.about-stage {
  position: relative;
  width: 760px;
}
/* the paper file card */
.about-card {
  position: relative;
  width: 560px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e5e9f2;
  border-radius: var(--radius);
  padding: 62px 46px 44px;
  rotate: -1.2deg;
  box-shadow: 0 34px 64px -34px #23315942, 0 3px 10px #23315914;
  /* punched-hole strip: real transparent holes along the top (mask), the
     section's blue veil shows through them like the reference sheet */
  -webkit-mask-image:
    radial-gradient(circle 8px at 26px 20px, transparent 7.5px, #000 8px),
    linear-gradient(#000, #000);
  mask-image:
    radial-gradient(circle 8px at 26px 20px, transparent 7.5px, #000 8px),
    linear-gradient(#000, #000);
  -webkit-mask-size: 52px 40px, 100% calc(100% - 40px);
  mask-size: 52px 40px, 100% calc(100% - 40px);
  -webkit-mask-position: 0 0, 0 40px;
  mask-position: 0 0, 0 40px;
  -webkit-mask-repeat: repeat-x, no-repeat;
  mask-repeat: repeat-x, no-repeat;
}
/* crumpled-paper grain over the whole sheet */
.about-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.045;
  pointer-events: none;
}
.ac-top {
  text-align: center;
  font-family: var(--jakarta);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8a93a6;
  border-top: 1px solid #e2e6ef;
  border-bottom: 1px solid #e2e6ef;
  padding: 9px 0;
  margin-bottom: 26px;
}
.ac-field { margin-bottom: 22px; }
.ac-field label, .ac-col label {
  display: block;
  font-family: var(--jakarta);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9aa3b5;
  border-bottom: 1px solid #e2e6ef;
  padding-bottom: 4px;
  margin-bottom: 12px;
}
.ac-name {
  font-family: var(--jakarta);
  font-size: var(--fs-title);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #263850;
  text-align: center;
  padding: 2px 0 14px;
  border-bottom: 1px solid #e2e6ef;
}
.ac-blurb {
  font-family: var(--jakarta);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.65;
  color: #515e76;
  text-align: center;
  padding: 0 8px;
}
.ac-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 26px;
}
.ac-col ul { list-style: none; }
.ac-col li {
  font-family: var(--jakarta);
  font-size: var(--fs-small);
  font-weight: 600;
  color: #44506a;
  padding: 4px 0;
  border-bottom: 1px dashed #e4e8f1;
}
/* paperclip hooked over the card's top edge */
.about-clip {
  position: absolute;
  top: -26px;
  left: 118px;
  width: 34px;
  height: 70px;
  rotate: 8deg;
  filter: drop-shadow(0 3px 3px #2a251426);
  z-index: 2;
}
/* snapshot photos, taped on at angles */
.about-photo {
  position: absolute;
  background: #fff;
  padding: 10px 10px 14px;
  border-radius: var(--radius);
  box-shadow: 0 22px 44px -24px #2a251447, 0 2px 6px #2a25141c;
  z-index: 2;
}
.about-photo img { display: block; border-radius: var(--radius); }
.ap-1 { top: -34px; right: -10px; rotate: 5deg; }
.ap-1 img { width: 148px; height: 148px; object-fit: cover; }
.ap-2 { bottom: -46px; left: -26px; rotate: -7deg; }
.ap-2 img { width: 150px; height: 118px; object-fit: cover; object-position: top; }
.ap-3 { bottom: -40px; right: -20px; rotate: 6deg; }
.ap-3 img { width: 126px; height: 152px; object-fit: cover; object-position: top; }
.tape {
  position: absolute;
  top: -12px;
  left: 50%;
  translate: -50% 0;
  width: 86px;
  height: 26px;
  background: #ffffff70;
  border-left: 1px dashed #ffffffa6;
  border-right: 1px dashed #ffffffa6;
  box-shadow: 0 1px 3px #2a251418;
  backdrop-filter: blur(1px);
  rotate: -4deg;
  z-index: 3;
}
.tape-r { rotate: 5deg; }
/* doodle critters: line-art cousins of the jar marbles */
.about-doodle { position: absolute; opacity: 0.85; }
.ad-1 { width: 84px; top: -58px; left: -64px; rotate: -10deg; }
.ad-2 { width: 90px; bottom: -30px; right: -78px; rotate: 9deg; }
.ad-3 { width: 100px; top: 46%; right: -108px; rotate: -6deg; opacity: 0.6; }

/* ---- v2 footer: marble jar easter egg (content/bg design TBD) ---- */
/* reveal footer: fixed behind the page; .page-cover scrolls over it and its
   bottom margin (synced to footer height by JS) exposes it at the end */
.page-cover {
  position: relative;
  z-index: 2;
  background: var(--bg);
  margin-bottom: var(--footer-h, 780px);
}
.footer-v2 {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 90px 20px 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
/* blue sky veil behind the jar, same treatment as the section veils */
.footer-v2::before {
  content: '';
  position: absolute;
  top: -20px;
  bottom: 0;
  left: calc(50% - var(--vwz, 100vw) / 2);
  right: calc(50% - var(--vwz, 100vw) / 2);
  /* same sun as the hero: hot core + warm bloom + spectral halo + azure
     deepening, stacked over the shared sky photo */
  background:
    radial-gradient(430px 430px at 150px 105px, #ffffff 0%, #ffffff 12%, #fffffff2 21%, #ffffffb8 33%, #ffffff00 62%),
    radial-gradient(500px 500px at 150px 105px, #ffffff00 42%, #ffe2b447 56%, #ffb9c940 66%, #bcd9ff4d 76%, #ffffff00 90%),
    radial-gradient(640px 640px at 150px 105px, #fff3d24d 0%, #ffffff00 58%),
    radial-gradient(950px 950px at 150px 105px, #7fb2e600 24%, #7fb2e64a 52%, #86b4e42e 74%, #86b4e400 95%),
    url('assets/hero-sky.jpg') center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 90px, #000 calc(100% - 60px), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 90px, #000 calc(100% - 60px), transparent);
  pointer-events: none;
}
.footer-v2 > * { position: relative; z-index: 1; }
/* weather layer: above the scene, never blocks the jar or picker */
.rain-canvas {
  position: absolute !important;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.jar-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.jar-title {
  font-family: var(--jakarta);
  font-size: var(--fs-title);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--hero-navy);
}
.jar-sub {
  margin-top: 8px;
  font-family: var(--jakarta);
  font-size: var(--fs-body);
  font-weight: 500;
  color: #6b7385;
}
.jar-stage {
  position: relative;
  width: 377px;
  height: 356px;
  margin-top: 26px;
}
#jar-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
/* the user-designed Jar.svg, split around the canvas so marbles sit
   inside the glass: body + floor shadow behind, stroke/sheens/cap in front */
.jar-under, .jar-over {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* celebration layer: extends past the stage so confetti can fly free */
#jar-fx {
  position: absolute;
  inset: -160px -180px -30px;
  width: calc(100% + 360px);
  height: calc(100% + 190px);
  pointer-events: none;
  z-index: 5;
}
.jar-stage.party .jar-under,
.jar-stage.party #jar-canvas,
.jar-stage.party .jar-over {
  animation: jar-party 1s ease both;
  transform-origin: 50% 92%;
}
@keyframes jar-party {
  0% { transform: none; }
  18% { transform: rotate(-3.2deg) scale(1.025); }
  38% { transform: rotate(2.6deg) scale(1.015); }
  58% { transform: rotate(-1.7deg); }
  78% { transform: rotate(1deg); }
  100% { transform: none; }
}
.jar-picker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}
.jar-pick {
  width: 46px;
  height: 46px;
  padding: 7px;
  border-width: 2px;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), border-color .2s, background .2s;
}
.jar-pick img { width: 100%; height: 100%; display: block; }
.jar-pick:hover { transform: translateY(-3px) scale(1.08); }
.jar-pick.on { border-color: #343246; background: var(--control-solid-bg); transform: scale(1.08); box-shadow: inset 0 1px 0 #ffffff4d; }
.jar-drop {
  margin-top: 18px;
}
.jar-drop:disabled { opacity: .45; cursor: default; }
.jar-note {
  margin-top: 10px;
  font-family: var(--jakarta);
  font-size: var(--fs-small);
  font-weight: 500;
  color: #8a8fa3;
  min-height: 18px;
}
.fv2-copy {
  font-family: var(--jakarta);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: .06em;
  color: #a7adba;
}

/* every stretched veil fades in/out vertically — no hard box-edge cuts */
.bento::before {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 90px, #000 calc(100% - 90px), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 90px, #000 calc(100% - 90px), transparent);
}

@media (max-width: 767px) {
  .canvas { width: 100%; }
  .hero-zone, .why-us, .showcase, .hiw, .bento,
  .unfold { margin-bottom: 110px; }

  /* --- nav: compact scrollable links preserve route access on phones --- */
  .nav { width: calc(100% - 40px); top: 12px; }
  .nav.condensed { width: calc(100% - 40px); top: 8px; }
  .nav-links {
    display: flex;
    min-width: 0;
    max-width: calc(100vw - 84px);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { flex: 0 0 auto; padding: 7px 9px; font-size: var(--fs-small); }

  /* --- hero --- */
  .hero { top: 128px; width: calc(100% - 40px); padding-left: 0; }
  /* one line on mobile: shorter copy, no wrapping */
  .hero-pill { flex-wrap: nowrap; gap: 8px; white-space: nowrap; }
  .hero-pill-text { font-size: var(--fs-small); }
  .hero-pill-text .hpt-full { display: none; }
  .hero-pill-text .hpt-short { display: inline; }
  .hero-pill-chip { flex-shrink: 0; }
  .hero h1, .type-line { font-size: var(--fs-h1); }
  .hero-heading { margin-top: 20px; }
  .type-line { min-height: 44px; }
  .type-cursor { width: 6px; height: 38px; vertical-align: -5px; margin-left: 3px; }
  .hero-sub { font-size: var(--fs-lead); max-width: 100%; }
  .hero .btn-dark { margin-top: 22px; }
  .hero-zone { height: 830px; }
  .hero-ticker-wrap { top: 505px; height: 300px; }
  .hero-ticker-wrap .ticker-track,
  .showcase-ticker-wrap .ticker-track { gap: 14px; }
  .phone-card { width: min(34vw, 136px); border-radius: var(--radius); }
  .phone-frame { width: min(27vw, 108px); border-radius: var(--radius); border-width: 2px; }
  .hero-ticker-wrap .phone-card { width: min(34vw, 136px); }

  /* --- heading blocks --- */
  .head-clouds { display: none; }
  .showcase-head h2,
  .hiw-head-content h2, .bento-head h2 {
    font-size: var(--fs-h2);
  }
  .showcase-head h2, .about-head h2 { font-size: var(--fs-h2); }
  .tag { font-size: var(--fs-body); gap: 10px; }
  .tag img { width: 20px; height: 20px; margin-right: -3px; }

  /* --- why us: single row, smaller logos --- */
  .logo-flips { width: 100%; height: auto; }
  .logo-flip { flex: 1; height: 36px; }
  .logo-flip-stack { width: 78px; }
  .logo-flip-stack img { width: 78px; height: 36px; margin-bottom: 8px; }

  /* --- showcase --- */
  .showcase-head { width: calc(100% - 40px); }
  .showcase-body { width: 100%; gap: 24px; }
  .showcase-ticker-wrap { height: min(96vw, 400px); }
  .shot-card {
    width: min(46vw, 190px);
    height: auto;
    aspect-ratio: 290 / 518;
    border-radius: var(--radius);
  }
  .shot-card .phone-frame { width: 72%; border-radius: var(--radius); }
  .app-icons { scale: 0.85; transform-origin: bottom center; }

  /* --- bento --- */
  .bento { width: calc(100% - 40px); }
  .b3-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .b3-card { height: auto; padding: 28px 24px; }
  .bv2-grid { width: 100%; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 16px; }
  .bv2-tall { grid-row: auto; }
  .bv2-h { font-size: var(--fs-title); }
  .bv2-side .bv2-h { font-size: var(--fs-card-title); }
  .bv2-card { padding: 24px 20px; }
  .bv2-screen img { width: min(70vw, 260px); }
  .bv2-system { max-width: 280px; }
  .b3-head h3 { font-size: var(--fs-card-title); }
  .b3-head p { max-width: 100%; font-size: var(--fs-body); }
  /* symmetric on mobile: 3 fluid columns × 2 rows (folders 7-8 dropped),
     no right-edge bleed */
  .b3-folders {
    margin-top: 28px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: auto;
    column-gap: 10px;
    row-gap: 12px;
  }
  .b3-folder:nth-child(n+7) { display: none; }
  .b3-folder-name { font-size: var(--fs-caption); }
  .b3-folder-count { font-size: var(--fs-caption); padding: 2px 6px; }
  .b3-prompt { margin-top: 8px; }
  .b3-ph { font-size: var(--fs-body); min-height: 46px; }
  .b3-chips { gap: 8px; }
  .b3-chip { font-size: var(--fs-small); padding: 9px 12px; }

  /* --- unfold gallery: dropped entirely on mobile --- */
  .unfold { display: none; }

  /* --- about card --- */
  .about-stage { width: calc(100% - 8px); }
  .about-card { width: min(92%, 420px); padding: 54px 24px 30px; }
  .about-head h2 { font-size: var(--fs-h2); }
  .ac-name { font-size: var(--fs-title); }
  .ap-1 { top: -30px; right: -4px; }
  .ap-1 img { width: 96px; height: 96px; }
  .ap-2 { bottom: -34px; left: -6px; }
  .ap-2 img { width: 104px; height: 82px; }
  .ap-3 { bottom: -30px; right: -4px; }
  .ap-3 img { width: 88px; height: 106px; }
  .about-clip { left: 44px; }
  /* the fixed-width watercolor halo overflowed the viewport sideways, which
     made phones zoom the whole layout out to fit (the "broken" mobile view) */
  .about-bg { width: 100%; }
  /* taped photos + doodles hang off the card by design; past the viewport
     edge they'd re-trigger the zoom-out, so trim them at the section edge
     (x only — the vertical overhangs stay visible) */
  .about { overflow-x: clip; }
  /* same story: the confetti canvas extends 180px past each side of the jar,
     and the jar stage itself is 2px wider than the smallest phones */
  .jar-block { overflow-x: clip; }
  /* keep the 377:356 stage ratio, just smaller — full-width the jar dwarfed
     the phone screen and pushed the picker + button below the fold */
  .jar-stage { width: 260px; height: 245px; }
  .ad-1 { left: -6px; top: -64px; width: 62px; }
  .ad-2 { right: -8px; width: 66px; }
  .ad-3 { display: none; }

  /* --- footer --- */
  .burnwrap { height: calc(var(--band) + 500px); }
  .footer-inner { padding: 0 20px 20px; }
  .footer-head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 40px; }
  .footer-mono { font-size: var(--fs-title); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .footer-bottom { margin-top: 40px; }
  .ascii-footer { width: 140vw; height: 80vw; }
}

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 180;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-color: var(--control-outline-border);
  background: var(--control-outline-bg);
  color: var(--control-outline-fg);
  box-shadow: 0 14px 34px -18px #1f2e4f80;
  opacity: 0;
  visibility: hidden;
  translate: 0 10px;
  transition: opacity .2s ease, translate .2s ease, visibility .2s;
  backdrop-filter: blur(12px);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; translate: 0 0; }
.back-to-top:hover { border-color: #c2c5d1; background: var(--control-outline-bg-hover); translate: 0 -2px; }
.back-to-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 767px) {
  .back-to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: none; }
}

/* ============ AI LEARNING PAGE ============ */
.learning-page .learning-intro { max-width: 660px; padding-bottom: 64px; }
.learning-page .learning-intro > p:last-child { max-width: 34em; }
.learning-page .featured-article,
.learning-page .article-card {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 28px;
  border-top: 1px solid var(--line);
}
.learning-page .featured-article {
  padding: 44px 48px 48px;
  border: 1px solid #dfe2fb;
  background: linear-gradient(135deg, #f4f5ff 0%, #fff 68%);
}
.learning-page .article-list { margin-top: 76px; }
.learning-page .article-card { padding: 34px 0; }
.learning-page .article-card:last-child { border-bottom: 1px solid var(--line); }
.learning-page .article-index {
  padding-top: 4px;
  color: var(--blue-soft);
  font-family: var(--jakarta);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .08em;
}
.learning-page .article-content { min-width: 0; max-width: 58ch; }
.learning-page .article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  color: var(--gray);
  font-size: var(--fs-small);
  line-height: 1.4;
}
.learning-page .article-meta > span:first-child { color: var(--blue); font-weight: 700; }
.learning-page .article-meta time::before { content: '·'; margin-right: 12px; color: #a6a9b8; }
.learning-page .article-status {
  padding: 3px 8px;
  border: 1px solid #dfe2fb;
  color: #555ab0;
  font-size: var(--fs-small);
  font-weight: 600;
}
.learning-page .article-content h2 {
  margin: 14px 0 12px;
  color: var(--hero-navy);
  font-family: var(--jakarta);
  font-size: var(--fs-title);
  letter-spacing: -.05em;
  line-height: 1.24;
}
.learning-page .article-summary { color: var(--gray); font-size: var(--fs-lead); line-height: 1.8; }

@media (max-width: 767px) {
  .learning-page .learning-intro { padding-bottom: 46px; }
  .learning-page .featured-article,
  .learning-page .article-card { grid-template-columns: 42px minmax(0, 1fr); gap: 14px; }
  .learning-page .featured-article { padding: 28px 20px 30px; }
  .learning-page .article-list { margin-top: 52px; }
  .learning-page .article-card { padding: 28px 0; }
  .learning-page .article-index { font-size: var(--fs-small); }
  .learning-page .article-meta { gap: 6px 9px; font-size: var(--fs-small); }
  .learning-page .article-meta time::before { margin-right: 9px; }
  .learning-page .article-content h2 { margin: 11px 0 9px; font-size: var(--fs-title); letter-spacing: -.04em; }
  .learning-page .article-summary { font-size: var(--fs-body); line-height: 1.72; }
}