:root {
  --canvas: #f4f1fa;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-solid: #fbf9ff;
  --ink: #332f3a;
  --muted: #635f69;
  --line: rgba(93, 77, 116, 0.12);
  --orange: #ff9f2f;
  --orange-deep: #f07f13;
  --violet: #7c3aed;
  --pink: #db2777;
  --blue: #0ea5e9;
  --green: #10b981;
  --amber: #f59e0b;
  --shadow-card:
    16px 18px 38px rgba(103, 88, 133, 0.18),
    -12px -12px 28px rgba(255, 255, 255, 0.94),
    inset 6px 6px 14px rgba(124, 58, 237, 0.025),
    inset -6px -6px 14px rgba(255, 255, 255, 0.92);
  --shadow-card-hover:
    20px 26px 48px rgba(103, 88, 133, 0.23),
    -14px -14px 30px rgba(255, 255, 255, 0.98),
    inset 7px 7px 14px rgba(124, 58, 237, 0.035),
    inset -7px -7px 14px rgba(255, 255, 255, 1);
  --shadow-button:
    10px 12px 24px rgba(201, 112, 23, 0.28),
    -7px -7px 17px rgba(255, 255, 255, 0.58),
    inset 4px 4px 8px rgba(255, 255, 255, 0.38),
    inset -4px -4px 8px rgba(101, 49, 4, 0.12);
  --shadow-pressed:
    inset 8px 8px 16px rgba(188, 179, 204, 0.58),
    inset -8px -8px 17px rgba(255, 255, 255, 0.96),
    0 1px 0 rgba(255, 255, 255, 0.65),
    0 0 0 1px rgba(109, 92, 137, 0.05);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@font-face {
  font-family: "Instrument Sans Local";
  src: url("fonts/instrument-sans-latin.woff2") format("woff2");
  font-display: swap;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.86), transparent 35%),
    linear-gradient(145deg, #f7f3fb 0%, #f2eef8 48%, #f8f4fb 100%);
  font-family: "DM Sans", "Instrument Sans Local", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.22;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
  content: "";
  pointer-events: none;
}

button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, .brand, .eyebrow, .section-kicker, button, strong, b {
  font-family: "Nunito", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 4px solid rgba(124, 58, 237, 0.3);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 16px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: 18px;
  color: #fff;
  background: var(--violet);
  font-weight: 700;
  transform: translateY(-150%);
  transition: transform 180ms ease;
}

.skip-link:focus { transform: translateY(0); }

.ambient {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.ambient__blob { position: absolute; border-radius: 50%; filter: blur(76px); opacity: 0.12; }
.ambient__blob--violet { top: -16vh; left: -12vw; width: 58vw; height: 58vw; background: #8b5cf6; animation: blob-float 12s ease-in-out infinite; }
.ambient__blob--pink { top: 26vh; right: -18vw; width: 52vw; height: 52vw; background: #ec4899; animation: blob-float-alt 15s ease-in-out infinite; }
.ambient__blob--blue { top: 112vh; left: -18vw; width: 48vw; height: 48vw; background: #0ea5e9; animation: blob-float 17s ease-in-out -4s infinite; }
.ambient__blob--orange { top: 245vh; right: -14vw; width: 56vw; height: 56vw; background: #ff9f2f; animation: blob-float-alt 14s ease-in-out -6s infinite; }

.site-header {
  position: sticky;
  top: 14px;
  z-index: 100;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  width: min(1180px, calc(100% - 36px));
  min-height: 76px;
  margin: 14px auto 0;
  padding: 10px 12px 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 30px;
  background: rgba(250, 248, 253, 0.76);
  box-shadow:
    12px 14px 30px rgba(102, 88, 127, 0.13),
    -9px -9px 24px rgba(255, 255, 255, 0.94),
    inset 5px 5px 10px rgba(124, 58, 237, 0.018),
    inset -5px -5px 10px rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(24px) saturate(1.25);
  transition: width 300ms var(--ease-out), background 300ms ease, box-shadow 300ms ease;
}

.site-header.is-scrolled { width: min(1060px, calc(100% - 36px)); background: rgba(250, 248, 253, 0.9); box-shadow: 14px 18px 34px rgba(102, 88, 127, 0.18), -8px -8px 22px rgba(255, 255, 255, 0.94), inset 4px 4px 10px rgba(124, 58, 237, 0.018), inset -4px -4px 10px rgba(255, 255, 255, 0.9); }

.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 900; letter-spacing: -0.03em; }
.brand__mark { display: grid; width: 46px; height: 46px; flex: 0 0 46px; padding: 4px; place-items: center; border-radius: 16px; background: #ffae45; box-shadow: 5px 6px 12px rgba(220, 124, 20, 0.24), -3px -3px 8px rgba(255, 255, 255, 0.9), inset 3px 3px 6px rgba(255, 255, 255, 0.38), inset -3px -3px 6px rgba(145, 76, 7, 0.12); }
.brand__mark img { width: 100%; height: 100%; border-radius: 12px; }

.primary-nav { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 34px); }
.primary-nav a { position: relative; padding: 12px 0; color: var(--muted); font-size: 14px; font-weight: 700; }
.primary-nav a::after { position: absolute; right: 0; bottom: 6px; left: 0; height: 3px; border-radius: 999px; background: var(--orange); content: ""; transform: scaleX(0); transition: transform 240ms var(--ease-out); }
.primary-nav a:hover { color: var(--ink); }
.primary-nav a:hover::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 8px; }
.language-toggle, .menu-toggle { display: grid; min-width: 46px; height: 46px; padding: 0 10px; place-items: center; border: 0; border-radius: 17px; background: #f0ecf5; cursor: pointer; box-shadow: var(--shadow-pressed); font-size: 12px; font-weight: 900; }
.menu-toggle { position: relative; display: none; }
.menu-toggle span { position: absolute; top: 50%; left: 50%; display: block; width: 18px; height: 2px; border-radius: 99px; background: var(--ink); transition: transform 220ms ease; }
.menu-toggle span:first-child { transform: translate(-50%, -4px); }
.menu-toggle span:last-child { transform: translate(-50%, 4px); }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }

.clay-button {
  display: inline-flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 24px;
  border: 0;
  border-radius: 21px;
  font-weight: 900;
  transition: transform 220ms var(--ease-out), box-shadow 220ms ease, background 220ms ease;
}

.clay-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; }
.clay-button--small { min-height: 48px; padding: 0 17px; border-radius: 17px; color: #fff; background: linear-gradient(145deg, #ffb14d, #f58a1c); box-shadow: 7px 8px 16px rgba(218, 123, 22, 0.26), -5px -5px 12px rgba(255, 255, 255, 0.68), inset 3px 3px 7px rgba(255, 255, 255, 0.38), inset -3px -3px 7px rgba(115, 55, 4, 0.13); font-size: 13px; }
.clay-button--small svg { width: 17px; height: 17px; }
.clay-button--primary { color: #fff; background: linear-gradient(145deg, #ffb54f 0%, #f18416 100%); box-shadow: var(--shadow-button); }
.clay-button--secondary { color: var(--ink); background: rgba(255, 255, 255, 0.72); box-shadow: 10px 11px 22px rgba(114, 98, 142, 0.15), -8px -8px 18px rgba(255, 255, 255, 0.95), inset 4px 4px 9px rgba(124, 58, 237, 0.025), inset -4px -4px 9px rgba(255, 255, 255, 0.92); }
.clay-button:active, .clay-press:active { transform: scale(0.92); box-shadow: var(--shadow-pressed); }

.hero {
  display: grid;
  grid-template-columns: minmax(340px, 0.82fr) minmax(530px, 1.18fr);
  gap: clamp(46px, 6vw, 88px);
  align-items: center;
  width: min(1240px, calc(100% - 48px));
  min-height: calc(100svh - 105px);
  margin: 0 auto;
  padding: 86px 0 96px;
}

.hero__copy { position: relative; z-index: 2; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; color: var(--violet); font-size: 13px; font-weight: 900; letter-spacing: 0.09em; text-transform: uppercase; }
.eyebrow__dot { display: block; width: 12px; height: 12px; border: 3px solid rgba(255, 255, 255, 0.8); border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14), 3px 4px 7px rgba(16, 130, 94, 0.24); animation: pulse-dot 2.4s ease-in-out infinite; }
.hero h1 { margin: 0; font-size: clamp(56px, 6.4vw, 94px); font-weight: 900; letter-spacing: -0.065em; line-height: 0.98; }
.hero h1 span, .hero h1 em { display: block; white-space: nowrap; }
.hero h1 em { color: var(--orange-deep); font-style: normal; background: linear-gradient(110deg, #f58a1c 8%, #e75769 54%, #8b4ce8 95%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero__lede { max-width: 610px; margin: 28px 0 0; color: var(--muted); font-size: clamp(17px, 1.45vw, 20px); font-weight: 500; line-height: 1.75; }
.hero__actions { display: flex; gap: 14px; margin-top: 34px; }
.hero__meta { display: flex; align-items: center; gap: 9px; margin: 24px 0 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.hero__meta > span:first-child { color: var(--green); font-size: 10px; text-shadow: 0 0 10px rgba(16, 185, 129, 0.42); }

.reveal-item { opacity: 0; transform: translateY(22px); animation: hero-reveal 780ms var(--ease-out) forwards; }
.hero__copy .reveal-item:nth-child(1) { animation-delay: 100ms; }
.hero__copy .reveal-item:nth-child(2) { animation-delay: 180ms; }
.hero__copy .reveal-item:nth-child(3) { animation-delay: 260ms; }
.hero__copy .reveal-item:nth-child(4) { animation-delay: 340ms; }
.hero__copy .reveal-item:nth-child(5) { animation-delay: 420ms; }
.hero-stage.reveal-item { animation-delay: 260ms; }

.hero-stage { position: relative; min-width: 0; perspective: 1200px; }
.hero-stage__halo { position: absolute; inset: 9% 2% 1% 6%; border-radius: 44% 56% 48% 52% / 55% 42% 58% 45%; background: linear-gradient(145deg, rgba(255, 190, 103, 0.52), rgba(220, 190, 255, 0.5)); box-shadow: 24px 28px 60px rgba(149, 110, 183, 0.2), -20px -20px 54px rgba(255, 255, 255, 0.8), inset 16px 16px 32px rgba(255, 255, 255, 0.32), inset -18px -18px 34px rgba(129, 79, 157, 0.12); transform: rotate(-3deg); }

.product-clay { position: relative; z-index: 3; width: 91%; margin: 10% 0 8% 7%; padding: 13px; border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 35px; background: rgba(253, 251, 255, 0.76); box-shadow: 26px 30px 58px rgba(97, 75, 130, 0.24), -18px -18px 38px rgba(255, 255, 255, 0.94), inset 8px 8px 18px rgba(124, 58, 237, 0.03), inset -8px -8px 18px rgba(255, 255, 255, 0.96); backdrop-filter: blur(20px); transform: rotateY(-4deg) rotateX(2deg); transition: transform 450ms var(--ease-out); }
.product-clay__topbar, .product-clay__footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 48px; padding: 0 10px; color: var(--muted); font-size: 11px; font-weight: 700; }
.product-clay__topbar > span, .product-clay__footer > span { display: flex; align-items: center; justify-content: center; gap: 7px; }
.product-clay__topbar > span i, .product-clay__footer > span i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12); }
.product-clay__topbar > b { justify-self: end; color: var(--violet); font-size: 10px; letter-spacing: 0.06em; }
.window-dots { display: flex; gap: 5px; }
.window-dots i { width: 8px; height: 8px; border-radius: 50%; background: #dcd4e7; box-shadow: inset 1px 1px 2px rgba(94, 72, 126, 0.18), 1px 1px 1px #fff; }
.window-dots i:first-child { background: #ff9c87; }
.window-dots i:nth-child(2) { background: #ffc95a; }
.window-dots i:nth-child(3) { background: #66d49a; }
.product-clay__screen { overflow: hidden; padding: 7px; border-radius: 24px; background: #171514; box-shadow: inset 8px 9px 16px rgba(0, 0, 0, 0.52), inset -4px -4px 10px rgba(255, 255, 255, 0.05), 0 0 0 1px rgba(31, 25, 40, 0.1), 0 4px 0 rgba(255, 255, 255, 0.8); }
.product-clay__screen img { width: 100%; border-radius: 18px; }
.product-clay__footer { min-height: 54px; grid-template-columns: 1fr auto; }
.product-clay__footer > span { justify-content: flex-start; }
.product-clay__footer strong { color: var(--ink); font-size: 11px; }

.clay-orb { position: absolute; z-index: 5; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 50%; color: #fff; box-shadow: 14px 17px 28px rgba(98, 76, 124, 0.25), -9px -9px 20px rgba(255, 255, 255, 0.68), inset 6px 6px 12px rgba(255, 255, 255, 0.42), inset -7px -7px 14px rgba(70, 24, 106, 0.15); }
.clay-orb span { font-family: "Nunito", sans-serif; font-size: 22px; font-weight: 900; }
.clay-orb small { margin-top: -6px; font-size: 9px; font-weight: 800; }
.clay-orb--script { top: 0; right: 10%; width: 86px; height: 86px; background: linear-gradient(145deg, #b99afd, #7c3aed); animation: clay-float 8s ease-in-out infinite; }
.clay-orb--frame { right: -1%; bottom: 13%; width: 74px; height: 74px; background: linear-gradient(145deg, #5cc7f6, #0b93d1); animation: clay-float-alt 10s ease-in-out -2s infinite; }
.clay-orb--voice { bottom: -1%; left: 18%; width: 68px; height: 68px; background: linear-gradient(145deg, #f586b5, #ce216e); animation: clay-float 9s ease-in-out -5s infinite; }

.floating-note { position: absolute; z-index: 6; display: flex; align-items: center; gap: 8px; border: 1px solid rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.8); box-shadow: 10px 12px 24px rgba(102, 81, 130, 0.17), -7px -7px 18px rgba(255, 255, 255, 0.94), inset 4px 4px 8px rgba(124, 58, 237, 0.02), inset -4px -4px 8px rgba(255, 255, 255, 0.9); backdrop-filter: blur(15px); }
.floating-note--top { top: 24%; left: -4%; min-width: 105px; padding: 12px 15px; border-radius: 22px; transform: rotate(-7deg); }
.floating-note--top span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 12px; color: #fff; background: var(--orange); box-shadow: 4px 5px 10px rgba(221, 124, 17, 0.25), inset 2px 2px 5px rgba(255, 255, 255, 0.34); font-family: "Nunito", sans-serif; font-weight: 900; }
.floating-note small { color: var(--muted); font-size: 10px; font-weight: 800; }
.floating-note--bottom { right: 6%; bottom: 1%; padding: 13px 16px; border-radius: 22px; transform: rotate(5deg); }
.floating-note--bottom > i { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.13); }
.floating-note--bottom strong { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 9px; color: #fff; background: var(--green); font-size: 12px; }

.workflow-ribbon { display: flex; width: min(1120px, calc(100% - 48px)); min-height: 72px; align-items: center; justify-content: center; gap: clamp(10px, 2vw, 24px); margin: -22px auto 0; padding: 12px 28px; overflow: auto; border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 27px; color: var(--muted); background: rgba(255, 255, 255, 0.58); box-shadow: var(--shadow-card); backdrop-filter: blur(18px); scrollbar-width: none; }
.workflow-ribbon::-webkit-scrollbar { display: none; }
.workflow-ribbon span { white-space: nowrap; font-family: "Nunito", sans-serif; font-size: 13px; font-weight: 900; }
.workflow-ribbon i { color: #bdafcd; font-style: normal; }
.workflow-ribbon .workflow-ribbon__mode { padding: 9px 13px; border-radius: 14px; color: var(--violet); background: #eee9f4; box-shadow: var(--shadow-pressed); font-size: 11px; letter-spacing: 0.04em; }
.workflow-ribbon span:last-child { color: var(--orange-deep); }

.section { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 150px 0 20px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 60px; margin-bottom: 58px; }
.section-heading > div { max-width: 720px; }
.section-heading > p { max-width: 400px; margin: 0 0 8px; color: var(--muted); font-size: 17px; line-height: 1.72; }
.section-kicker { margin: 0 0 14px; color: var(--violet); font-size: 13px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.section h2 { margin: 0; font-size: clamp(42px, 5vw, 66px); font-weight: 900; letter-spacing: -0.048em; line-height: 1.06; }
.bento-section h2 { font-size: clamp(42px, 4.5vw, 60px); }
.section h3 { margin: 0; font-size: 27px; font-weight: 900; letter-spacing: -0.028em; line-height: 1.16; }

[data-reveal] { opacity: 0; transform: translateY(26px) scale(0.985); transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0) scale(1); }

.clay-card { border: 1px solid rgba(255, 255, 255, 0.76); border-radius: 34px; background: var(--surface); box-shadow: var(--shadow-card); backdrop-filter: blur(22px) saturate(1.12); }
.bento-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px; }
.bento-card { position: relative; min-width: 0; overflow: hidden; padding: 30px; transition: transform 480ms var(--ease-out), box-shadow 480ms ease; }
.bento-card--project { grid-column: span 8; min-height: 580px; }
.bento-card--retry { grid-column: span 4; min-height: 580px; background: linear-gradient(145deg, rgba(255, 246, 251, 0.85), rgba(249, 236, 247, 0.76)); }
.bento-card--routes { grid-column: span 5; min-height: 365px; background: linear-gradient(145deg, rgba(243, 249, 255, 0.86), rgba(235, 245, 253, 0.74)); }
.bento-card--desktop { grid-column: span 7; display: grid; grid-template-columns: 180px 1fr; gap: 32px; align-items: center; min-height: 365px; background: linear-gradient(145deg, rgba(255, 251, 244, 0.88), rgba(253, 242, 224, 0.76)); }
.card-heading { display: flex; gap: 17px; align-items: center; }
.card-heading > div { min-width: 0; }
.card-heading p, .card-label { margin: 0 0 4px; color: var(--violet); font-family: "Nunito", sans-serif; font-size: 12px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.bento-card > p { color: var(--muted); font-size: 15px; line-height: 1.68; }
.bento-card--project > p { max-width: 600px; margin: 18px 0 24px 67px; }
.icon-orb { display: grid; width: 50px; height: 50px; flex: 0 0 50px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.58); border-radius: 17px; color: #fff; box-shadow: 7px 8px 15px rgba(75, 61, 95, 0.18), -5px -5px 12px rgba(255, 255, 255, 0.84), inset 3px 3px 7px rgba(255, 255, 255, 0.4), inset -3px -3px 7px rgba(38, 12, 77, 0.16); }
.icon-orb svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.icon-orb--violet { background: linear-gradient(145deg, #af8ef8, #7430dd); }
.icon-orb--pink { background: linear-gradient(145deg, #f487b6, #d62675); }
.icon-orb--blue { background: linear-gradient(145deg, #62cafa, #078bc6); }

.bento-product { position: relative; margin: 0 0 -55px 18px; padding: 10px; overflow: hidden; border-radius: 26px 26px 0 0; background: #181513; box-shadow: 18px 20px 36px rgba(76, 61, 96, 0.25), -10px -10px 24px rgba(255, 255, 255, 0.9), inset 5px 5px 10px rgba(255, 255, 255, 0.05), inset -5px -5px 10px rgba(0, 0, 0, 0.32); transform: rotate(-1.2deg); }
.bento-product img { width: 100%; border-radius: 18px 18px 0 0; }
.bento-product figcaption { display: flex; align-items: center; justify-content: space-between; padding: 15px 14px 7px; color: #ddd8d1; font-size: 11px; }
.bento-product figcaption span { color: #f8a03b; }

.bento-card--retry > .icon-orb { margin-left: auto; }
.retry-visual { position: relative; width: 210px; height: 230px; margin: 12px auto 0; }
.retry-visual > span { position: absolute; display: grid; width: 145px; height: 185px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 36px; color: rgba(255, 255, 255, 0.9); box-shadow: 13px 15px 25px rgba(118, 66, 105, 0.21), -7px -7px 18px rgba(255, 255, 255, 0.8), inset 6px 6px 12px rgba(255, 255, 255, 0.36), inset -6px -6px 12px rgba(89, 23, 70, 0.12); font-family: "Nunito", sans-serif; font-size: 38px; font-weight: 900; }
.retry-visual__back { top: 0; left: 0; background: linear-gradient(145deg, #fcc9dd, #e575a9); transform: rotate(-12deg); }
.retry-visual__middle { top: 13px; right: 0; background: linear-gradient(145deg, #cebafa, #9771eb); transform: rotate(10deg); }
.retry-visual__front { bottom: 0; left: 34px; background: linear-gradient(145deg, #ffbd6c, #f38b29); transform: rotate(-2deg); }
.retry-visual__front i { position: absolute; right: 15px; bottom: 14px; display: grid; width: 41px; height: 41px; place-items: center; border-radius: 15px; background: rgba(255, 255, 255, 0.35); box-shadow: inset 3px 3px 7px rgba(129, 68, 12, 0.13), inset -3px -3px 7px rgba(255, 255, 255, 0.4); font-size: 18px; font-style: normal; }
.bento-card--retry h3 { margin-top: 18px; }
.bento-card--retry > p { margin: 12px 0 0; }

.bento-card--routes h3 { max-width: 380px; margin-top: 24px; }
.bento-card--routes > p { max-width: 410px; }
.route-pills { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.route-pills span { min-width: 76px; padding: 13px 16px; border-radius: 17px; color: var(--ink); background: #edf4fa; box-shadow: var(--shadow-pressed); font-family: "Nunito", sans-serif; font-size: 12px; font-weight: 900; text-align: center; }
.route-pills span:nth-child(2) { color: var(--pink); }
.route-pills span:nth-child(3) { color: var(--blue); }
.route-pills span:nth-child(4) { color: var(--green); }

.desktop-ring { position: relative; display: grid; width: 180px; height: 180px; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #fff5e4, #f2d4a7); box-shadow: 16px 18px 30px rgba(170, 113, 46, 0.18), -10px -10px 24px rgba(255, 255, 255, 0.94), inset 8px 8px 16px rgba(255, 255, 255, 0.44), inset -8px -8px 16px rgba(169, 105, 30, 0.1); }
.desktop-ring::before, .desktop-ring::after { position: absolute; border-radius: 50%; content: ""; }
.desktop-ring::before { inset: 23px; border: 2px dashed rgba(240, 127, 19, 0.28); animation: spin 28s linear infinite; }
.desktop-ring::after { width: 12px; height: 12px; top: 28px; right: 39px; background: var(--pink); box-shadow: -69px 87px 0 var(--blue), -93px 14px 0 var(--violet); }
.desktop-ring > span { position: relative; z-index: 2; display: grid; width: 84px; height: 84px; padding: 8px; place-items: center; border-radius: 28px; background: #ffae45; box-shadow: 10px 12px 21px rgba(197, 107, 19, 0.23), -7px -7px 16px rgba(255, 255, 255, 0.84), inset 4px 4px 8px rgba(255, 255, 255, 0.36), inset -4px -4px 8px rgba(137, 72, 8, 0.13); }
.desktop-ring img { border-radius: 20px; }
.bento-card--desktop > div:nth-child(2) > p:last-child { margin: 14px 0 0; color: var(--muted); line-height: 1.7; }
.platform-pills { grid-column: 2; display: flex; gap: 9px; align-self: start; margin-top: -14px; }
.platform-pills span { padding: 9px 13px; border-radius: 13px; color: #8c5a1b; background: rgba(255, 255, 255, 0.5); box-shadow: inset 4px 4px 8px rgba(192, 139, 68, 0.11), inset -4px -4px 8px rgba(255, 255, 255, 0.7); font-size: 11px; font-weight: 800; }

.omni-section { padding-top: 180px; scroll-margin-top: 92px; }
.omni-section .section-kicker { color: var(--orange-deep); }
.omni-heading { display: grid; grid-template-columns: minmax(390px, 0.95fr) minmax(360px, 0.78fr); gap: clamp(55px, 8vw, 112px); align-items: end; margin-bottom: 56px; }
.omni-heading__copy > p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.72; }
.omni-signals { display: flex; gap: 12px; margin-top: 25px; flex-wrap: wrap; }
.omni-signals > span { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 13px; border: 1px solid rgba(255, 255, 255, 0.68); border-radius: 15px; color: #775025; background: rgba(255, 250, 243, 0.68); box-shadow: 6px 7px 13px rgba(142, 94, 40, 0.1), -4px -4px 11px rgba(255, 255, 255, 0.85), inset 2px 2px 5px rgba(255, 255, 255, 0.33), inset -2px -2px 5px rgba(142, 82, 20, 0.05); font-size: 11px; font-weight: 800; }
.omni-signals i { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(255, 159, 47, 0.13); }

.omni-console { position: relative; display: grid; grid-template-columns: minmax(270px, 0.34fr) minmax(0, 0.66fr); gap: 24px; padding: 25px; overflow: hidden; border-radius: 48px; background: linear-gradient(145deg, rgba(255, 250, 244, 0.9), rgba(246, 232, 215, 0.82)); box-shadow: 28px 31px 58px rgba(130, 93, 61, 0.2), -20px -20px 44px rgba(255, 255, 255, 0.97), inset 10px 10px 22px rgba(255, 159, 47, 0.025), inset -10px -10px 22px rgba(255, 255, 255, 0.9); }
.omni-console__shape { position: absolute; border-radius: 50%; pointer-events: none; }
.omni-console__shape--one { top: -150px; right: 10%; width: 310px; height: 310px; background: rgba(252, 178, 92, 0.2); box-shadow: inset 24px 24px 48px rgba(255, 255, 255, 0.24), inset -24px -24px 48px rgba(156, 87, 16, 0.05); }
.omni-console__shape--two { bottom: -105px; left: 15%; width: 220px; height: 220px; background: rgba(185, 154, 246, 0.16); box-shadow: inset 20px 20px 38px rgba(255, 255, 255, 0.22), inset -20px -20px 38px rgba(76, 35, 141, 0.05); }
.omni-steps { position: relative; z-index: 2; display: grid; gap: 13px; align-content: center; padding: 14px 0; }
.omni-steps::before { position: absolute; top: 21%; bottom: 21%; left: 50px; z-index: -1; width: 3px; border-radius: 999px; background: linear-gradient(var(--orange), #e8bdd2 54%, var(--violet)); box-shadow: 2px 3px 7px rgba(159, 102, 42, 0.15), -1px -1px 4px rgba(255, 255, 255, 0.7); content: ""; opacity: 0.42; }
.omni-steps button { position: relative; display: grid; min-width: 0; min-height: 112px; grid-template-columns: 30px 50px minmax(0, 1fr) 28px; gap: 12px; align-items: center; padding: 15px 15px 15px 12px; border: 1px solid rgba(255, 255, 255, 0.52); border-radius: 27px; color: var(--muted); background: rgba(255, 255, 255, 0.34); cursor: pointer; text-align: left; box-shadow: inset 5px 5px 11px rgba(190, 164, 137, 0.14), inset -5px -5px 11px rgba(255, 255, 255, 0.58); transition: transform 260ms var(--ease-out), box-shadow 260ms ease, color 260ms ease, background 260ms ease; }
.omni-steps button.is-active { color: var(--ink); background: rgba(255, 255, 255, 0.82); box-shadow: 12px 14px 25px rgba(136, 92, 48, 0.18), -8px -8px 20px rgba(255, 255, 255, 0.9), inset 4px 4px 9px rgba(255, 159, 47, 0.035), inset -4px -4px 9px rgba(255, 255, 255, 0.88); transform: translateX(7px); }
.omni-step__number { position: relative; z-index: 2; color: #a47645; font-family: "Nunito", sans-serif; font-size: 10px; font-weight: 900; letter-spacing: 0.05em; }
.omni-step__icon { position: relative; z-index: 2; display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 17px; color: #a46c2b; background: linear-gradient(145deg, #ffe3bc, #f4b55f); box-shadow: 6px 7px 13px rgba(171, 102, 27, 0.18), -4px -4px 10px rgba(255, 255, 255, 0.78), inset 3px 3px 6px rgba(255, 255, 255, 0.4), inset -3px -3px 6px rgba(126, 67, 9, 0.1); }
.omni-steps button:nth-child(2) .omni-step__icon { color: #7d3c88; background: linear-gradient(145deg, #f3c8e2, #db80b3); }
.omni-steps button:nth-child(3) .omni-step__icon { color: #245c89; background: linear-gradient(145deg, #bce8fb, #66bde7); }
.omni-step__icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }
.omni-step__copy { min-width: 0; }
.omni-step__copy strong, .omni-step__copy small { display: block; }
.omni-step__copy strong { color: var(--ink); font-size: 16px; }
.omni-step__copy small { margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.omni-step__state { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 10px; color: #9d7a52; background: #efe1d1; box-shadow: var(--shadow-pressed); font-size: 12px; font-style: normal; font-weight: 900; }
.omni-steps button.is-active .omni-step__state { color: #fff; background: linear-gradient(145deg, #ffb44f, #ef8318); box-shadow: 4px 5px 9px rgba(188, 101, 18, 0.22), inset 2px 2px 4px rgba(255, 255, 255, 0.35); }

.omni-stage { position: relative; z-index: 2; min-width: 0; padding: 20px; border-radius: 35px; background: #e9e3e7; box-shadow: var(--shadow-pressed); }
.omni-stage__meta { display: flex; align-items: center; justify-content: space-between; min-height: 36px; margin-bottom: 12px; padding: 0 5px; color: var(--muted); font-size: 10px; font-weight: 700; }
.omni-stage__meta > span { display: flex; align-items: center; gap: 8px; }
.omni-stage__meta i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.11); animation: pulse-dot 2.4s ease-in-out infinite; }
.omni-stage__meta strong { color: var(--orange-deep); font-size: 11px; letter-spacing: 0.04em; }
.omni-product { margin: 0; }
.omni-product__frame { overflow: hidden; padding: 7px; border-radius: 27px; background: #171513; box-shadow: 15px 18px 34px rgba(85, 66, 87, 0.24), -9px -9px 23px rgba(255, 255, 255, 0.72), inset 5px 5px 10px rgba(255, 255, 255, 0.04), inset -5px -5px 10px rgba(0, 0, 0, 0.36); transition: opacity 180ms ease, transform 240ms var(--ease-out); }
.omni-product__frame .mini-window-bar { color: #918b84; }
.omni-product__frame img { width: 100%; border-radius: 18px; transition: opacity 180ms ease; }
.omni-product.is-changing .omni-product__frame { opacity: 0.34; transform: scale(0.987); }
.omni-product figcaption { padding: 24px 5px 7px; transition: opacity 180ms ease, transform 220ms var(--ease-out); }
.omni-product.is-changing figcaption { opacity: 0; transform: translateY(7px); }
.omni-product figcaption .step-badge { margin-bottom: 15px; color: var(--orange-deep); }
.omni-product figcaption h3 { max-width: 620px; font-size: clamp(25px, 2.5vw, 36px); }
.omni-product figcaption p { max-width: 680px; margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.62; }
.omni-io { display: grid; grid-template-columns: 1fr auto 1fr; gap: 13px; align-items: center; margin-top: 18px; }
.omni-io p { display: grid; gap: 3px; min-height: 66px; align-content: center; margin: 0; padding: 10px 14px; border-radius: 20px; background: #e4dde3; box-shadow: var(--shadow-pressed); }
.omni-io p > span { color: var(--muted); font-size: 9px; font-weight: 700; }
.omni-io p > strong { color: var(--ink); font-size: 12px; }
.omni-io > i { color: var(--orange-deep); font-style: normal; font-weight: 900; }

.mode-contrast { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 28px; padding: 20px 26px; border-radius: 26px; color: var(--muted); background: rgba(255, 255, 255, 0.48); box-shadow: var(--shadow-card); }
.mode-contrast > p { display: flex; max-width: 470px; align-items: center; gap: 12px; margin: 0; }
.mode-contrast > p > span { display: grid; gap: 2px; }
.mode-contrast strong { color: var(--ink); font-size: 13px; }
.mode-contrast small { font-size: 11px; line-height: 1.45; }
.mode-contrast > span { color: #c1b4c9; }
.mode-contrast__dot { width: 13px; height: 13px; flex: 0 0 13px; border: 3px solid rgba(255, 255, 255, 0.72); border-radius: 50%; }
.mode-contrast__dot--orange { background: var(--orange); box-shadow: 0 0 0 4px rgba(255, 159, 47, 0.13); }
.mode-contrast__dot--violet { background: var(--violet); box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12); }

.section-heading--center { display: grid; max-width: 760px; justify-items: center; margin-right: auto; margin-left: auto; text-align: center; }
.section-heading--center > p { max-width: 630px; margin: -30px auto 0; }
.workflow-section { padding-top: 170px; }
.workflow-console { overflow: hidden; padding: 13px; border-radius: 42px; }
.workflow-tabs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; padding: 8px 8px 16px; }
.workflow-tabs button { min-width: 0; min-height: 66px; padding: 8px; border: 0; border-radius: 20px; color: var(--muted); background: transparent; cursor: pointer; transition: color 220ms ease, transform 220ms var(--ease-out), background 220ms ease, box-shadow 220ms ease; }
.workflow-tabs button b, .workflow-tabs button span { display: block; }
.workflow-tabs button b { margin-bottom: 2px; color: #b3a8bf; font-size: 9px; letter-spacing: 0.08em; }
.workflow-tabs button span { font-size: 13px; }
.workflow-tabs button.is-active { color: #fff; background: linear-gradient(145deg, #aa83f6, #7633df); box-shadow: 8px 9px 18px rgba(111, 56, 194, 0.27), -5px -5px 13px rgba(255, 255, 255, 0.8), inset 3px 3px 7px rgba(255, 255, 255, 0.34), inset -3px -3px 7px rgba(43, 10, 99, 0.16); transform: translateY(-2px); }
.workflow-tabs button.is-active b { color: rgba(255, 255, 255, 0.72); }
.workflow-panel { display: grid; grid-template-columns: minmax(250px, 0.68fr) minmax(0, 1.32fr); gap: 44px; align-items: center; min-height: 520px; padding: 48px 42px; border-radius: 32px; background: #ece8f2; box-shadow: var(--shadow-pressed); }
.workflow-panel__copy { transition: opacity 160ms ease, transform 200ms var(--ease-out); }
.workflow-panel.is-changing .workflow-panel__copy { opacity: 0; transform: translateY(8px); }
.step-badge { display: inline-block; margin-bottom: 22px; padding: 10px 13px; border-radius: 13px; color: var(--violet); background: rgba(255, 255, 255, 0.58); box-shadow: 5px 6px 11px rgba(107, 92, 129, 0.12), -4px -4px 10px rgba(255, 255, 255, 0.78), inset 2px 2px 5px rgba(124, 58, 237, 0.03), inset -2px -2px 5px rgba(255, 255, 255, 0.8); font-family: "Nunito", sans-serif; font-size: 10px; font-weight: 900; letter-spacing: 0.08em; }
.workflow-panel__copy h3 { font-size: clamp(30px, 3.2vw, 46px); }
.workflow-panel__copy > p { margin: 18px 0 24px; color: var(--muted); font-size: 16px; line-height: 1.75; }
.step-proof { display: flex; gap: 9px; align-items: center; color: #45765f; font-size: 12px; font-weight: 700; }
.step-proof > span:first-child { display: grid; width: 25px; height: 25px; flex: 0 0 25px; place-items: center; border-radius: 9px; color: #fff; background: var(--green); box-shadow: 4px 5px 9px rgba(16, 145, 101, 0.22), inset 2px 2px 4px rgba(255, 255, 255, 0.34); }
.workflow-panel__media { margin: 0; overflow: hidden; padding: 8px; border-radius: 27px; background: #161513; box-shadow: 18px 21px 39px rgba(77, 64, 94, 0.26), -12px -12px 28px rgba(255, 255, 255, 0.8), inset 5px 5px 10px rgba(255, 255, 255, 0.04), inset -5px -5px 10px rgba(0, 0, 0, 0.36); transition: opacity 180ms ease, transform 230ms var(--ease-out); }
.workflow-panel.is-changing .workflow-panel__media { opacity: 0.35; transform: scale(0.985); }
.mini-window-bar { display: flex; align-items: center; height: 42px; gap: 5px; padding: 0 10px; color: #a6a29c; font-size: 9px; }
.mini-window-bar i { width: 7px; height: 7px; border-radius: 50%; background: #5d5852; }
.mini-window-bar i:first-child { background: #f18774; }
.mini-window-bar i:nth-child(2) { background: #e8b94e; }
.mini-window-bar i:nth-child(3) { background: #55b77c; }
.mini-window-bar span { margin-left: auto; }
.workflow-panel__media img { width: 100%; border-radius: 18px; }

.models-section { display: grid; grid-template-columns: minmax(320px, 0.78fr) minmax(500px, 1.22fr); gap: 74px; align-items: center; padding-top: 170px; }
.models-copy > p:not(.section-kicker) { max-width: 500px; margin: 25px 0 0; color: var(--muted); font-size: 17px; line-height: 1.72; }
.model-selector { display: grid; gap: 9px; margin-top: 35px; }
.model-selector button { display: grid; grid-template-columns: 47px 1fr; gap: 14px; align-items: center; padding: 11px 15px; border: 0; border-radius: 20px; color: var(--muted); background: transparent; cursor: pointer; text-align: left; transition: background 240ms ease, box-shadow 240ms ease, color 240ms ease, transform 240ms var(--ease-out); }
.model-selector button:hover { transform: translateX(4px); }
.model-selector button.is-active { color: var(--ink); background: rgba(255, 255, 255, 0.64); box-shadow: 9px 10px 20px rgba(104, 89, 129, 0.13), -7px -7px 17px rgba(255, 255, 255, 0.87), inset 4px 4px 8px rgba(124, 58, 237, 0.02), inset -4px -4px 8px rgba(255, 255, 255, 0.82); }
.model-selector button > span:last-child { display: grid; gap: 2px; }
.model-selector b { font-size: 15px; }
.model-selector small { color: var(--muted); font-size: 11px; }
.model-dot { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 15px; color: #fff; box-shadow: 5px 6px 11px rgba(80, 62, 102, 0.2), -3px -3px 8px rgba(255, 255, 255, 0.76), inset 2px 2px 5px rgba(255, 255, 255, 0.4), inset -2px -2px 5px rgba(32, 8, 68, 0.15); font-family: "Nunito", sans-serif; font-size: 12px; font-weight: 900; }
.model-dot--violet { background: linear-gradient(145deg, #af8ef9, #7430df); }
.model-dot--pink { background: linear-gradient(145deg, #f185b4, #d22673); }
.model-dot--blue { background: linear-gradient(145deg, #63caf8, #078cc8); }
.model-dot--green { background: linear-gradient(145deg, #5ed5a9, #0c9c71); }

.model-stage { position: relative; min-width: 0; padding: 26px; overflow: hidden; border-radius: 45px; }
.model-stage__blob { position: absolute; top: -80px; right: -70px; width: 230px; height: 230px; border-radius: 50%; background: rgba(124, 58, 237, 0.13); filter: blur(8px); box-shadow: inset 22px 22px 42px rgba(255, 255, 255, 0.25), inset -20px -20px 40px rgba(75, 29, 134, 0.08); }
.model-stage__status { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; padding: 0 4px; }
.model-stage__status > span { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; font-weight: 700; }
.model-stage__status i { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.12); }
.model-stage__status strong { color: var(--violet); font-size: 13px; }
.config-window { position: relative; z-index: 2; margin: 0; overflow: hidden; padding: 8px; border-radius: 28px; background: #e4dfea; box-shadow: var(--shadow-pressed); }
.config-window__bar { display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 0 10px; color: #746c7d; font-size: 9px; }
.config-window__bar > div { display: flex; gap: 5px; }
.config-window__bar i { width: 7px; height: 7px; border-radius: 50%; background: #c5bacf; }
.config-window img { border-radius: 19px; }
.model-stage__description { position: relative; z-index: 2; margin: 20px 3px 1px; color: var(--muted); font-size: 13px; line-height: 1.65; }

.finish-section { display: grid; grid-template-columns: minmax(440px, 0.98fr) minmax(350px, 0.78fr); gap: 100px; align-items: center; padding-top: 190px; }
.finish-stage { position: relative; min-height: 680px; }
.finish-stage::before { position: absolute; inset: 6% 1% 3% 6%; border-radius: 45% 55% 52% 48% / 40% 48% 52% 60%; background: linear-gradient(145deg, #f8d2e6, #c7b6f3); box-shadow: 24px 28px 56px rgba(115, 82, 143, 0.2), -18px -18px 40px rgba(255, 255, 255, 0.86), inset 14px 14px 28px rgba(255, 255, 255, 0.34), inset -16px -16px 30px rgba(91, 48, 126, 0.1); content: ""; transform: rotate(-6deg); }
.finish-shape { position: absolute; z-index: 3; border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 10px 12px 22px rgba(91, 73, 112, 0.21), -6px -6px 16px rgba(255, 255, 255, 0.7), inset 4px 4px 9px rgba(255, 255, 255, 0.38), inset -4px -4px 9px rgba(64, 21, 99, 0.11); }
.finish-shape--one { top: 1%; left: 2%; width: 92px; height: 92px; border-radius: 31px; background: linear-gradient(145deg, #63cdf8, #0f9bda); transform: rotate(18deg); animation: clay-float 10s ease-in-out infinite; }
.finish-shape--two { right: 1%; bottom: 13%; width: 78px; height: 78px; border-radius: 50%; background: linear-gradient(145deg, #70dfb6, #10a676); animation: clay-float-alt 8s ease-in-out -3s infinite; }
.phone-clay { position: absolute; top: 5%; left: 50%; z-index: 2; width: min(61%, 330px); padding: 13px; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 50px; background: #fbf8ff; box-shadow: 25px 29px 52px rgba(86, 64, 112, 0.28), -17px -17px 36px rgba(255, 255, 255, 0.9), inset 7px 7px 14px rgba(124, 58, 237, 0.025), inset -7px -7px 14px rgba(255, 255, 255, 0.94); transform: translateX(-50%) rotate(4deg); }
.phone-clay__speaker { position: absolute; top: 24px; left: 50%; z-index: 2; width: 66px; height: 17px; border-radius: 999px; background: #171513; box-shadow: inset 3px 3px 6px #000, inset -2px -2px 5px #403b36; transform: translateX(-50%); }
.phone-clay video { width: 100%; aspect-ratio: 9 / 15.6; object-fit: cover; border-radius: 38px; background: #151310; }
.phone-clay__badge { position: absolute; bottom: 28px; left: 50%; display: flex; align-items: center; gap: 7px; padding: 9px 13px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 16px; color: #fff; background: rgba(23, 21, 19, 0.66); backdrop-filter: blur(12px); font-size: 10px; font-weight: 700; transform: translateX(-50%); }
.phone-clay__badge i { width: 7px; height: 7px; border-radius: 50%; background: #55e19a; box-shadow: 0 0 8px #55e19a; }
.finish-sticker { position: absolute; right: 1%; top: 15%; z-index: 4; display: flex; width: 135px; height: 135px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.58); border-radius: 50%; color: #fff; background: linear-gradient(145deg, #ffbd6c, #f28b2c); box-shadow: 16px 18px 30px rgba(184, 101, 23, 0.26), -10px -10px 24px rgba(255, 255, 255, 0.82), inset 6px 6px 12px rgba(255, 255, 255, 0.4), inset -6px -6px 12px rgba(127, 59, 7, 0.15); transform: rotate(9deg); }
.finish-sticker span { display: grid; width: 35px; height: 35px; place-items: center; margin-bottom: 6px; border-radius: 13px; background: rgba(255, 255, 255, 0.3); font-weight: 900; }
.finish-sticker small { font-family: "Nunito", sans-serif; font-size: 11px; font-weight: 900; line-height: 1.25; text-align: center; }
.finish-copy > p:not(.section-kicker) { margin: 26px 0 0; color: var(--muted); font-size: 17px; line-height: 1.75; }
.finish-copy ul { display: grid; gap: 13px; margin: 30px 0 34px; padding: 0; list-style: none; }
.finish-copy li { display: flex; align-items: center; gap: 11px; color: var(--ink); font-size: 14px; font-weight: 700; }
.finish-copy li > span:first-child { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(145deg, #5ed9ab, #0ea878); box-shadow: 4px 5px 9px rgba(16, 148, 104, 0.23), -3px -3px 7px rgba(255, 255, 255, 0.8), inset 2px 2px 4px rgba(255, 255, 255, 0.34); font-size: 11px; }

.faq-section { display: grid; grid-template-columns: minmax(300px, 0.72fr) minmax(480px, 1.1fr); gap: 88px; align-items: start; padding-top: 170px; }
.faq-heading > p:last-child { max-width: 430px; margin: 24px 0 0; color: var(--muted); font-size: 16px; line-height: 1.72; }
.faq-list { display: grid; gap: 14px; }
.faq-list details { overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 25px; background: rgba(255, 255, 255, 0.62); box-shadow: 11px 13px 25px rgba(105, 90, 130, 0.13), -8px -8px 20px rgba(255, 255, 255, 0.86), inset 4px 4px 9px rgba(124, 58, 237, 0.02), inset -4px -4px 9px rgba(255, 255, 255, 0.8); }
.faq-list summary { display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; cursor: pointer; font-family: "Nunito", "PingFang SC", sans-serif; font-size: 16px; font-weight: 900; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary i { position: relative; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 12px; background: #ece8f2; box-shadow: var(--shadow-pressed); }
.faq-list summary i::before, .faq-list summary i::after { position: absolute; top: 50%; left: 50%; width: 13px; height: 2px; border-radius: 99px; background: var(--violet); content: ""; transform: translate(-50%, -50%); transition: transform 220ms ease; }
.faq-list summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-list details[open] summary i::after { transform: translate(-50%, -50%) rotate(0); }
.faq-list details[open] { background: rgba(255, 255, 255, 0.78); }
.faq-list details p { margin: -6px 64px 0 22px; padding: 0 0 24px; color: var(--muted); font-size: 14px; line-height: 1.7; }

.download-section { width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding: 170px 0 70px; }
.download-shell { position: relative; display: grid; grid-template-columns: minmax(350px, 0.82fr) minmax(460px, 1fr); gap: 80px; align-items: center; padding: 74px; overflow: hidden; border-radius: 55px; background: linear-gradient(145deg, rgba(251, 248, 255, 0.9), rgba(239, 231, 249, 0.86)); box-shadow: 30px 32px 60px rgba(98, 80, 125, 0.2), -22px -22px 48px rgba(255, 255, 255, 0.98), inset 10px 10px 22px rgba(124, 58, 237, 0.03), inset -10px -10px 22px rgba(255, 255, 255, 0.9); }
.download-shell__intro, .download-options { position: relative; z-index: 2; }
.download-logo { display: grid; width: 88px; height: 88px; margin-bottom: 25px; padding: 7px; place-items: center; border-radius: 29px; background: #ffac40; box-shadow: 12px 14px 24px rgba(199, 111, 20, 0.26), -8px -8px 18px rgba(255, 255, 255, 0.9), inset 5px 5px 10px rgba(255, 255, 255, 0.38), inset -5px -5px 10px rgba(131, 67, 6, 0.13); }
.download-logo img { border-radius: 21px; }
.download-shell h2 { font-size: clamp(43px, 4.8vw, 63px); }
.download-shell__intro > p:last-child { margin: 23px 0 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.download-options { display: grid; gap: 12px; }
.download-options > a { display: grid; grid-template-columns: 50px 1fr auto 34px; gap: 15px; align-items: center; min-height: 82px; padding: 12px 16px; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 25px; background: rgba(255, 255, 255, 0.66); box-shadow: 10px 12px 22px rgba(103, 89, 127, 0.13), -7px -7px 17px rgba(255, 255, 255, 0.88), inset 4px 4px 8px rgba(124, 58, 237, 0.02), inset -4px -4px 8px rgba(255, 255, 255, 0.84); transition: transform 240ms var(--ease-out), box-shadow 240ms ease; }
.platform-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 16px; color: #fff; background: linear-gradient(145deg, #ae8bf7, #7532dc); box-shadow: 5px 6px 11px rgba(82, 43, 142, 0.22), inset 3px 3px 6px rgba(255, 255, 255, 0.35), inset -3px -3px 6px rgba(43, 9, 93, 0.16); font-size: 17px; font-weight: 900; }
.download-options > a:nth-child(2) .platform-icon { background: linear-gradient(145deg, #f482b1, #cf246f); }
.download-options > a:nth-child(3) .platform-icon { background: linear-gradient(145deg, #5dcbf8, #088dc8); }
.download-options > a > span:nth-child(2) { display: grid; gap: 2px; }
.download-options strong { font-size: 16px; }
.download-options small { color: var(--muted); font-size: 11px; }
.download-options > a > b { color: var(--muted); font-size: 10px; letter-spacing: 0.08em; }
.download-options > a > i { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 11px; color: var(--violet); background: #eee9f4; box-shadow: var(--shadow-pressed); font-style: normal; font-weight: 900; }
.download-options > p { margin: 10px 5px 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.download-options > p a { color: var(--violet); font-weight: 800; }
.download-decoration { position: absolute; border-radius: 50%; opacity: 0.52; }
.download-decoration--one { top: -120px; right: 30%; width: 270px; height: 270px; background: #f7cbe0; box-shadow: inset 25px 25px 45px rgba(255, 255, 255, 0.3), inset -22px -22px 44px rgba(145, 66, 104, 0.08); }
.download-decoration--two { bottom: -180px; left: 28%; width: 310px; height: 310px; background: #c5b4ef; box-shadow: inset 25px 25px 45px rgba(255, 255, 255, 0.32), inset -22px -22px 44px rgba(70, 31, 126, 0.08); }

.site-footer { display: grid; grid-template-columns: 1fr auto; gap: 36px; width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 42px 0 46px; border-top: 1px solid rgba(94, 79, 119, 0.12); }
.site-footer__brand p { margin: 13px 0 0; color: var(--muted); font-size: 13px; }
.site-footer__links { display: flex; gap: 28px; align-items: center; color: var(--muted); font-size: 13px; font-weight: 700; }
.site-footer__links a:hover { color: var(--violet); }
.site-footer__meta { grid-column: 1 / -1; margin: 0; color: #91899a; font-size: 11px; }
.site-footer__meta span { margin: 0 4px; }

@media (hover: hover) and (pointer: fine) {
  .clay-button:hover { transform: translateY(-4px); }
  .clay-button--primary:hover { box-shadow: 14px 17px 30px rgba(201, 112, 23, 0.33), -8px -8px 18px rgba(255, 255, 255, 0.64), inset 4px 4px 8px rgba(255, 255, 255, 0.4), inset -4px -4px 8px rgba(101, 49, 4, 0.12); }
  .clay-button--secondary:hover { box-shadow: 14px 16px 30px rgba(114, 98, 142, 0.2), -9px -9px 20px rgba(255, 255, 255, 1), inset 4px 4px 9px rgba(124, 58, 237, 0.025), inset -4px -4px 9px rgba(255, 255, 255, 0.94); }
  .bento-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-card-hover); }
  .omni-steps button:not(.is-active):hover { color: var(--ink); background: rgba(255, 255, 255, 0.6); transform: translateX(4px); }
  .download-options > a:hover { transform: translateY(-4px); box-shadow: 14px 17px 29px rgba(103, 89, 127, 0.18), -8px -8px 19px rgba(255, 255, 255, 0.94), inset 4px 4px 8px rgba(124, 58, 237, 0.02), inset -4px -4px 8px rgba(255, 255, 255, 0.88); }
}

@keyframes hero-reveal { to { opacity: 1; transform: translateY(0); } }
@keyframes blob-float { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 50% { transform: translate3d(4vw, -3vh, 0) rotate(7deg); } }
@keyframes blob-float-alt { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 50% { transform: translate3d(-3vw, 4vh, 0) rotate(-6deg); } }
@keyframes clay-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-17px) rotate(3deg); } }
@keyframes clay-float-alt { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-13px) rotate(-3deg); } }
@keyframes pulse-dot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1080px) {
  .primary-nav { gap: 18px; }
  .primary-nav a { font-size: 12px; }
  .hero { grid-template-columns: minmax(300px, 0.78fr) minmax(440px, 1.1fr); gap: 38px; }
  .floating-note--top { left: -1%; }
  .models-section { gap: 48px; }
  .finish-section { gap: 60px; }
  .download-shell { gap: 52px; padding: 58px; }
}

@media (max-width: 900px) {
  .site-header { grid-template-columns: auto 1fr auto; }
  .primary-nav { position: absolute; top: calc(100% + 10px); right: 0; left: 0; display: grid; gap: 0; padding: 12px; border: 1px solid rgba(255, 255, 255, 0.78); border-radius: 25px; background: rgba(249, 247, 252, 0.94); box-shadow: var(--shadow-card); backdrop-filter: blur(22px); opacity: 0; pointer-events: none; transform: translateY(-10px) scale(0.98); transition: opacity 220ms ease, transform 240ms var(--ease-out); }
  .primary-nav.is-open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
  .primary-nav a { padding: 14px 16px; border-radius: 15px; font-size: 14px; }
  .primary-nav a:hover { background: #eeeaf3; }
  .primary-nav a::after { display: none; }
  .header-actions { grid-column: 3; }
  .menu-toggle { display: grid; }
  .hero { grid-template-columns: 1fr; gap: 64px; padding: 94px 0 112px; }
  .hero__copy { max-width: 700px; text-align: center; justify-self: center; }
  .hero__lede { margin-right: auto; margin-left: auto; }
  .hero__actions, .hero__meta { justify-content: center; }
  .hero-stage { width: min(100%, 740px); justify-self: center; }
  .section-heading { display: grid; gap: 22px; }
  .section-heading > p { max-width: 600px; }
  .bento-card--project, .bento-card--desktop { grid-column: span 12; }
  .bento-card--retry, .bento-card--routes { grid-column: span 6; }
  .omni-heading { grid-template-columns: 1fr; gap: 23px; }
  .omni-heading__copy { max-width: 680px; }
  .omni-console { grid-template-columns: 1fr; }
  .omni-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: initial; padding: 0; }
  .omni-steps::before { display: none; }
  .omni-steps button { min-height: 142px; grid-template-columns: 28px 48px 1fr; grid-template-rows: auto auto; align-content: center; }
  .omni-steps button.is-active { transform: translateY(-5px); }
  .omni-step__number { grid-row: 1 / 3; }
  .omni-step__icon { grid-row: 1 / 3; }
  .omni-step__state { position: absolute; top: 12px; right: 12px; }
  .workflow-tabs { overflow-x: auto; grid-template-columns: repeat(7, minmax(92px, 1fr)); scrollbar-width: none; }
  .workflow-tabs::-webkit-scrollbar { display: none; }
  .workflow-panel { grid-template-columns: 1fr; gap: 32px; }
  .workflow-panel__copy { max-width: 650px; }
  .models-section, .finish-section, .faq-section, .download-shell { grid-template-columns: 1fr; }
  .models-copy { max-width: 720px; }
  .model-selector { grid-template-columns: 1fr 1fr; }
  .model-stage { width: min(100%, 760px); }
  .finish-stage { width: min(100%, 650px); justify-self: center; }
  .finish-copy { max-width: 700px; }
  .faq-section { gap: 50px; }
  .download-shell { gap: 50px; }
  .download-shell__intro { max-width: 680px; }
}

@media (max-width: 640px) {
  .site-header { top: 8px; width: calc(100% - 20px); min-height: 64px; margin-top: 8px; padding: 8px 8px 8px 12px; border-radius: 24px; }
  .site-header.is-scrolled { width: calc(100% - 20px); }
  .brand { gap: 8px; font-size: 17px; }
  .brand__mark { width: 40px; height: 40px; flex-basis: 40px; border-radius: 14px; }
  .language-toggle, .menu-toggle { min-width: 42px; height: 42px; border-radius: 15px; }
  .header-download { display: none; }
  .hero { width: calc(100% - 32px); min-height: 0; padding: 92px 0 95px; }
  .hero h1 { font-size: clamp(50px, 16vw, 70px); line-height: 1.02; }
  .hero h1 span, .hero h1 em { white-space: normal; }
  .hero__lede { font-size: 16px; line-height: 1.72; }
  .hero__actions { display: grid; gap: 12px; }
  .clay-button { width: 100%; min-height: 57px; }
  .hero__meta { font-size: 11px; }
  .product-clay { width: 96%; margin-left: 2%; padding: 8px; border-radius: 25px; transform: none; }
  .product-clay__topbar { min-height: 39px; }
  .product-clay__topbar > span { display: none; }
  .product-clay__topbar > b { grid-column: 3; }
  .product-clay__screen { padding: 4px; border-radius: 17px; }
  .product-clay__screen img { border-radius: 13px; }
  .product-clay__footer { min-height: 46px; padding: 0 5px; font-size: 9px; }
  .product-clay__footer strong { font-size: 9px; }
  .hero-stage__halo { inset: 5% -2% 0; }
  .hero-stage, .workflow-section, .finish-stage { overflow: clip; overflow-clip-margin: 18px; }
  .clay-orb--script { right: 4%; width: 62px; height: 62px; }
  .clay-orb--frame { right: -3%; width: 55px; height: 55px; }
  .clay-orb--voice { left: 8%; width: 52px; height: 52px; }
  .clay-orb span { font-size: 16px; }
  .clay-orb small { font-size: 7px; }
  .floating-note--top { top: 30%; left: -4%; min-width: 74px; padding: 8px 9px; border-radius: 15px; }
  .floating-note--top span { width: 25px; height: 25px; border-radius: 9px; font-size: 11px; }
  .floating-note--bottom { right: 2%; bottom: -4%; padding: 9px 10px; border-radius: 15px; }
  .floating-note small { font-size: 8px; }
  .workflow-ribbon { width: calc(100% - 32px); justify-content: flex-start; margin-top: 0; padding: 11px 20px; border-radius: 23px; }
  .section, .download-section, .site-footer { width: calc(100% - 32px); }
  .section { padding-top: 110px; }
  .section h2 { font-size: clamp(38px, 11.8vw, 54px); }
  .section-heading { margin-bottom: 38px; }
  .section-heading > p { font-size: 15px; }
  .bento-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
  .bento-card--project, .bento-card--retry, .bento-card--routes, .bento-card--desktop { grid-column: auto; min-height: 0; }
  .bento-card { padding: 23px; border-radius: 29px; }
  .bento-card--project > p { margin-left: 0; }
  .bento-product { margin-right: -8px; margin-bottom: -38px; margin-left: 0; }
  .bento-card--retry { padding-bottom: 28px; }
  .retry-visual { transform: scale(0.88); margin-top: -1px; margin-bottom: -10px; }
  .bento-card--desktop { grid-template-columns: 112px 1fr; gap: 19px; }
  .desktop-ring { width: 112px; height: 112px; }
  .desktop-ring::before { inset: 15px; }
  .desktop-ring::after { top: 14px; right: 21px; width: 8px; height: 8px; box-shadow: -44px 57px 0 var(--blue), -58px 10px 0 var(--violet); }
  .desktop-ring > span { width: 62px; height: 62px; border-radius: 21px; }
  .platform-pills { grid-column: 1 / -1; margin-top: 0; }
  .omni-section { padding-top: 125px; }
  .omni-heading { margin-bottom: 38px; }
  .omni-heading__copy > p { font-size: 15px; }
  .omni-signals { gap: 9px; margin-top: 19px; }
  .omni-console { gap: 14px; margin-right: -2px; margin-left: -2px; padding: 12px; border-radius: 33px; }
  .omni-console__shape--one { top: -90px; right: -75px; width: 210px; height: 210px; }
  .omni-steps { grid-template-columns: 1fr; gap: 10px; padding: 3px; }
  .omni-steps::before { display: block; top: 19%; bottom: 19%; left: 42px; }
  .omni-steps button { min-height: 94px; grid-template-columns: 24px 44px minmax(0, 1fr) 26px; grid-template-rows: auto; gap: 9px; padding: 11px 12px 11px 9px; border-radius: 23px; }
  .omni-steps button.is-active { transform: translateX(4px); }
  .omni-step__number, .omni-step__icon { grid-row: auto; }
  .omni-step__icon { width: 43px; height: 43px; border-radius: 15px; }
  .omni-step__state { position: static; width: 25px; height: 25px; }
  .omni-step__copy strong { font-size: 15px; }
  .omni-stage { padding: 12px; border-radius: 27px; }
  .omni-stage__meta { min-height: 32px; }
  .omni-product__frame { padding: 5px; border-radius: 20px; }
  .omni-product__frame img { border-radius: 13px; }
  .omni-product figcaption { padding: 19px 3px 5px; }
  .omni-product figcaption h3 { font-size: 27px; }
  .omni-io { grid-template-columns: 1fr; justify-items: stretch; }
  .omni-io > i { justify-self: center; transform: rotate(90deg); }
  .mode-contrast { display: grid; gap: 15px; justify-content: stretch; padding: 19px; }
  .mode-contrast > span { display: none; }
  .mode-contrast > p { max-width: none; }
  .section-heading--center > p { margin-top: -6px; }
  .workflow-console { margin-right: -4px; margin-left: -4px; padding: 8px; border-radius: 30px; }
  .workflow-tabs { padding: 7px 6px 12px; }
  .workflow-tabs button { min-height: 57px; border-radius: 17px; }
  .workflow-panel { min-height: 0; padding: 28px 18px 20px; border-radius: 24px; }
  .workflow-panel__copy h3 { font-size: 32px; }
  .workflow-panel__copy > p { font-size: 14px; }
  .workflow-panel__media { padding: 5px; border-radius: 20px; }
  .mini-window-bar { height: 32px; }
  .workflow-panel__media img { border-radius: 13px; }
  .models-section { gap: 42px; }
  .model-selector { grid-template-columns: 1fr; }
  .model-stage { padding: 17px; border-radius: 32px; }
  .config-window { padding: 5px; border-radius: 21px; }
  .config-window__bar { min-height: 35px; }
  .config-window img { border-radius: 14px; }
  .finish-section { gap: 45px; }
  .finish-stage { min-height: 560px; }
  .phone-clay { width: min(64%, 280px); padding: 10px; border-radius: 40px; }
  .phone-clay video { border-radius: 31px; }
  .finish-sticker { right: -2%; width: 105px; height: 105px; }
  .finish-shape--one { width: 66px; height: 66px; border-radius: 23px; }
  .finish-shape--two { width: 57px; height: 57px; }
  .finish-copy .clay-button { width: auto; }
  .faq-section { gap: 38px; }
  .faq-list summary { min-height: 76px; padding: 17px; font-size: 15px; }
  .faq-list details p { margin-right: 22px; margin-left: 17px; }
  .download-section { padding-top: 110px; }
  .download-shell { padding: 30px 20px; border-radius: 38px; }
  .download-logo { width: 72px; height: 72px; border-radius: 24px; }
  .download-shell h2 { font-size: 42px; }
  .download-options > a { grid-template-columns: 46px 1fr auto 31px; gap: 10px; min-height: 76px; padding: 10px; border-radius: 22px; }
  .platform-icon { width: 42px; height: 42px; border-radius: 14px; }
  .download-options > a > b { display: none; }
  .site-footer { grid-template-columns: 1fr; padding-top: 34px; }
  .site-footer__links { justify-content: flex-start; gap: 20px; flex-wrap: wrap; }
  .site-footer__meta { grid-column: 1; }
}

@media (max-width: 360px) {
  .brand > span:last-child { display: none; }
  .bento-card--desktop { grid-template-columns: 1fr; }
  .platform-pills { grid-column: 1; }
  .finish-stage { min-height: 500px; }
  .finish-sticker { width: 90px; height: 90px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
  [data-reveal], .reveal-item { opacity: 1; transform: none; }
}