/* Homepage landing (palette A · black & gold). Colours come from the shared
   --haoya-* tokens; only landing-specific glow tokens are defined here. */
.landing-page {
  --landing-glow: light-dark(#ffd60a59, #ffb3002e);
  --landing-glow-strong: light-dark(#ffd60a80, #ffc4004d);
  --landing-spot: light-dark(#ffd60a2e, #ffb30024);
  --landing-blob-1: light-dark(#ffe16a80, #ffa8141f);
  --landing-blob-2: light-dark(#ffc46b4d, #ffd60a12);
  --landing-grid-line: light-dark(#0000000a, #ffffff0a);
  --landing-code-bg: #0c0c0e;
  --landing-heading: linear-gradient(100deg, light-dark(#c98f00, #ffe14d), light-dark(#e86a00, #ff9500));
  --landing-bar: linear-gradient(90deg, #ffd60a, #ff9f0a);
}
.landing-page .public-header { position: relative; z-index: 2; }
.landing { flex: 1; overflow-x: clip; }
.landing-wrap { width: min(100%, 1200px); margin-inline: auto; padding-inline: 32px; }
.landing [id] { scroll-margin-top: 24px; }

/* grain for depth */
.landing-page::after { content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* buttons */
.landing-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 26px; border: 1px solid transparent; border-radius: 12px; font-size: 16px; font-weight: 650; white-space: nowrap; transition: transform .15s, background .15s, border-color .15s, box-shadow .2s; }
.landing-btn:active { transform: translateY(1px); }
.landing-btn-brand { background: var(--haoya-brand); color: var(--haoya-on-brand); box-shadow: 0 6px 24px var(--landing-glow); }
.landing-btn-brand:hover { background: var(--haoya-brand-hover); box-shadow: 0 8px 32px var(--landing-glow-strong); }
.landing-btn-ghost { border-color: var(--haoya-border-control); background: var(--haoya-surface); color: var(--haoya-text); }
.landing-btn-ghost:hover { border-color: var(--haoya-text); }
.landing-arrow { transition: transform .2s; }
.landing-btn:hover .landing-arrow { transform: translateX(3px); }
:root[dir=rtl] .landing-arrow { transform: scaleX(-1); }

/* hero */
.landing-hero { position: relative; isolation: isolate; padding: 48px 0 32px; }
.landing-hero-bg { position: absolute; inset: -120px 0 0; z-index: -1; overflow: hidden; pointer-events: none; }
.landing-hero-bg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 38% at 62% 0%, var(--landing-glow-strong), transparent 70%); }
.landing-hero-bg::after { content: ""; position: absolute; top: 0; left: 15%; right: 15%; height: 1px; background: linear-gradient(90deg, transparent, var(--haoya-brand), transparent); opacity: .6; }
.landing-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--landing-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--landing-grid-line) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 30%, transparent 75%); }
.landing-blob { position: absolute; border-radius: 50%; filter: blur(80px); animation: landing-drift 18s ease-in-out infinite alternate; }
.landing-blob-1 { width: 520px; height: 520px; top: -40px; right: 6%; background: var(--landing-blob-1); }
.landing-blob-2 { width: 380px; height: 380px; top: 320px; left: -60px; background: var(--landing-blob-2); animation-delay: -6s; }
@keyframes landing-drift { to { transform: translate(-60px, 50px) scale(1.12); } }

.landing-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.landing-hero-grid > *, .landing-code-grid > * { min-width: 0; }
.landing-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border: 1px solid var(--haoya-border); border-radius: 999px; background: var(--haoya-surface); box-shadow: var(--haoya-shadow); color: var(--haoya-text-muted); font-size: 13px; font-weight: 600; }
.landing-badge:hover { color: var(--haoya-text); }
.landing-badge b { padding: 2px 8px; border-radius: 999px; background: var(--haoya-text); color: var(--haoya-bg); font-size: 11px; }
.landing-title { margin: 24px 0 22px; font-size: clamp(42px, 6.2vw, 80px); line-height: 1.06; letter-spacing: -.045em; font-weight: 800; }
.landing-title > span { display: block; }
.landing-highlight { width: fit-content; background: var(--landing-heading); -webkit-background-clip: text; background-clip: text; color: transparent; padding-inline-end: .04em; }
.landing-lead { max-width: 560px; margin: 0 0 34px; color: var(--haoya-text-muted); font-size: 19px; line-height: 1.7; }
.landing-cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.landing-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 28px 0 0; padding: 0; list-style: none; color: var(--haoya-text-muted); font-size: 13px; }
.landing-trust li { display: inline-flex; align-items: center; gap: 6px; }
.landing-trust li::before { content: ""; width: 15px; height: 15px; background: var(--haoya-success); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 10 3.5 3.5L15 7'/%3E%3C/svg%3E") center/contain no-repeat; }

.landing-stage { position: relative; justify-self: center; width: 100%; max-width: 480px; aspect-ratio: 1; }
.landing-ring { position: absolute; inset: 8%; border: 1px dashed var(--haoya-border-control); border-radius: 50%; opacity: .45; animation: landing-spin 60s linear infinite; }
.landing-ring-2 { inset: 22%; border-style: solid; border-color: var(--haoya-border); opacity: .8; animation-duration: 40s; animation-direction: reverse; }
.landing-halo { position: absolute; inset: 24%; border-radius: 50%; background: radial-gradient(circle, var(--landing-glow-strong), transparent 68%); filter: blur(10px); animation: landing-pulse 4s ease-in-out infinite; }
@keyframes landing-spin { to { transform: rotate(360deg); } }
@keyframes landing-pulse { 50% { transform: scale(1.12); opacity: .7; } }
.landing-mascot { position: absolute; left: 50%; top: 50%; width: 46%; height: auto; transform: translate(-50%, -54%); filter: drop-shadow(0 24px 30px #0003); animation: landing-bob 5s ease-in-out infinite; }
@keyframes landing-bob { 50% { transform: translate(-50%, -59%) rotate(-2deg); } }
.landing-chip { position: absolute; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--haoya-border); border-radius: 14px; background: var(--haoya-surface); box-shadow: var(--haoya-shadow); font-size: 13px; font-weight: 650; white-space: nowrap; animation: landing-float 6s ease-in-out infinite; }
.landing-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--haoya-brand)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--haoya-brand)) 25%, transparent); }
.landing-chip small { color: var(--haoya-text-muted); font-family: var(--haoya-mono); font-size: 11px; font-weight: 500; }
.landing-dot-green { --c: #80d8b9; } .landing-dot-blue { --c: #9ccce0; } .landing-dot-red { --c: #f2a49d; }
.landing-chip-1 { top: 10%; left: -2%; }
.landing-chip-2 { top: 20%; right: -4%; animation-delay: -1.5s; }
.landing-chip-3 { bottom: 22%; left: -6%; animation-delay: -3s; }
.landing-chip-4 { bottom: 9%; right: 2%; animation-delay: -4.5s; }
@keyframes landing-float { 50% { transform: translateY(-12px); } }

/* ask (existing chat, kept) */
.landing-ask { width: min(100% - 64px, 780px); margin: 56px auto 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.landing-ask-label { margin: 0 0 12px; color: var(--haoya-text-muted); font-size: 13px; }
.landing-ask .chat-shell { width: 100%; text-align: start; }
.landing-ask .chat-panel { border: 1px solid var(--haoya-border); border-radius: 22px 22px 0 0; border-bottom: 0; background: var(--haoya-surface); }
.landing-ask .composer { position: relative; }
.landing-ask .composer::before { content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; background: conic-gradient(from var(--landing-angle, 0deg), transparent 0 70%, var(--haoya-brand) 85%, transparent); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: landing-rotate 4s linear infinite; pointer-events: none; }
@property --landing-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes landing-rotate { to { --landing-angle: 360deg; } }
.landing-ask .composer:focus-within::before, body.chat-active .landing-ask .composer::before { opacity: 0; }
.landing-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.landing-suggestions button { padding: 7px 14px; border: 1px solid var(--haoya-border); border-radius: 999px; background: transparent; color: var(--haoya-text-muted); font-size: 13px; transition: color .15s, border-color .15s, background .15s; }
.landing-suggestions button:hover { border-color: var(--haoya-border-control); background: var(--haoya-surface-muted); color: var(--haoya-text); }
body.chat-active .landing-suggestions { display: none; }
.landing .home-latest-update { margin-top: 28px; }

/* models marquee */
.landing-models { padding: 56px 0 24px; }
.landing-models-title { margin: 0 0 22px; text-align: center; color: var(--haoya-text-muted); font-size: 14px; }
.landing-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.landing-track { display: flex; gap: 14px; width: max-content; animation: landing-scroll 38s linear infinite; }
.landing-track-reverse { margin-top: 14px; animation-direction: reverse; animation-duration: 46s; }
.landing-marquee:hover .landing-track { animation-play-state: paused; }
@keyframes landing-scroll { to { transform: translateX(-50%); } }
.landing-model { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid var(--haoya-border); border-radius: 14px; background: var(--haoya-surface); font-size: 14px; font-weight: 600; white-space: nowrap; }
.landing-model b { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--haoya-surface-muted); color: var(--haoya-brand-text); font-size: 12px; font-weight: 800; }
.landing-model small { color: var(--haoya-text-muted); font-size: 12px; font-weight: 500; }

/* sections */
.landing-section { padding: 100px 0; }
.landing-section-head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.landing-eyebrow { margin: 0; color: var(--haoya-brand-text); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.landing-h2 { margin: 12px 0 16px; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.12; letter-spacing: -.035em; font-weight: 800; }
.landing-h2 > span { display: block; }
.landing-section-lead { margin: 0; color: var(--haoya-text-muted); font-size: 17px; line-height: 1.75; }

/* code */
.landing-code-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: center; }
.landing-diff { margin-top: 28px; overflow: hidden; border: 1px solid var(--haoya-border); border-radius: 14px; background: var(--haoya-surface); font-family: var(--haoya-mono); font-size: 13px; }
.landing-diff div { padding: 10px 16px; overflow-wrap: anywhere; }
.landing-diff-del { background: color-mix(in srgb, var(--haoya-danger) 10%, var(--haoya-surface)); color: var(--haoya-danger); text-decoration: line-through; }
.landing-diff-add { background: var(--haoya-brand-soft); color: var(--haoya-brand-text); font-weight: 700; }
.landing-points { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.landing-points li { display: flex; gap: 12px; font-size: 15px; line-height: 1.6; }
.landing-points li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 6px; background: var(--haoya-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23111113' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 10 3.5 3.5L15 7'/%3E%3C/svg%3E") center/14px no-repeat; }
.landing-terminal { position: relative; min-width: 0; overflow: hidden; border-radius: 18px; background: var(--landing-code-bg); color: #f8f8f2; box-shadow: 0 30px 80px light-dark(#24252333, #0009), 0 0 0 1px light-dark(#00000010, #ffffff14); }
.landing-terminal::after { content: ""; position: absolute; inset: auto -20% -60% 40%; height: 120%; background: radial-gradient(circle, #ffe36722, transparent 60%); pointer-events: none; }
.landing-term-top { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid #ffffff14; }
.landing-dots { display: flex; gap: 7px; }
.landing-dots i { width: 11px; height: 11px; border-radius: 50%; }
.landing-dots i:nth-child(1) { background: #ff5f57; } .landing-dots i:nth-child(2) { background: #febc2e; } .landing-dots i:nth-child(3) { background: #28c840; }
.landing-tabs { display: flex; gap: 2px; }
.landing-tabs button { padding: 6px 12px; border: 0; border-radius: 8px; background: transparent; color: #bdbdbd; font-size: 13px; font-weight: 600; }
.landing-tabs button[aria-selected=true] { background: #ffffff14; color: #ffe367; }
.landing-copy { flex: none; margin-inline-start: auto; padding: 6px 10px; border: 1px solid #ffffff26; border-radius: 8px; background: transparent; color: #bdbdbd; font-size: 12px; white-space: nowrap; }
.landing-copy:hover { border-color: #ffffff55; color: #fff; }
.landing-copy.copied::after { content: " ✓"; color: #80d8b9; }
.landing-code { min-height: 330px; margin: 0; padding: 22px 24px 26px; overflow-x: auto; font-family: var(--haoya-mono); font-size: 13.5px; line-height: 1.75; white-space: pre; }
.landing-code .k { color: #ff9e64; } .landing-code .s { color: #ffe367; } .landing-code .c { color: #7d7f76; } .landing-code .f { color: #80d8b9; } .landing-code .p { color: #9ccce0; }
.landing-caret { display: inline-block; width: 8px; height: 1.1em; background: #ffe367; vertical-align: -3px; animation: landing-blink 1s steps(1) infinite; }
@keyframes landing-blink { 50% { opacity: 0; } }

/* features */
.landing-features { padding-top: 20px; }
.landing-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.landing-card { position: relative; grid-column: span 2; overflow: hidden; padding: 28px; border: 1px solid var(--haoya-border); border-radius: 22px; background: linear-gradient(180deg, var(--haoya-surface), var(--haoya-bg)); transition: transform .25s, border-color .25s; }
.landing-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), var(--landing-spot), transparent 45%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.landing-card:hover { transform: translateY(-4px); border-color: var(--haoya-border-control); }
.landing-card:hover::before { opacity: 1; }
.landing-card > * { position: relative; }
.landing-card-wide { grid-column: span 3; }
.landing-card-big { grid-column: span 4; }
.landing-card-icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 22px; border: 1px solid var(--haoya-border); border-radius: 14px; background: var(--haoya-surface-muted); color: var(--haoya-brand-text); }
.landing-card-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.landing-card h3 { margin: 0 0 10px; font-size: 20px; letter-spacing: -.02em; }
.landing-card p { margin: 0; color: var(--haoya-text-muted); font-size: 14.5px; line-height: 1.7; }
.landing-sample { justify-self: start; padding: 2px 8px; border: 1px dashed var(--haoya-border-control); border-radius: 6px; color: var(--haoya-text-muted); font-family: inherit; font-size: 11px; }
.landing-meter { display: grid; gap: 10px; margin-top: 22px; }
.landing-meter-row { display: grid; grid-template-columns: 86px 1fr 60px; gap: 10px; align-items: center; color: var(--haoya-text-muted); font-family: var(--haoya-mono); font-size: 12px; }
.landing-bar { height: 8px; overflow: hidden; border-radius: 4px; background: var(--haoya-surface-muted); }
.landing-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--landing-bar); transform-origin: left; }
/* No inline style attributes: the Home CSP is style-src 'self'. */
.landing-bar i[data-w="78"] { width: 78%; } .landing-bar i[data-w="54"] { width: 54%; } .landing-bar i[data-w="31"] { width: 31%; } .landing-bar i[data-w="18"] { width: 18%; }
.landing-log { display: grid; gap: 8px; margin-top: 20px; font-family: var(--haoya-mono); font-size: 12px; }
.landing-log div { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--haoya-surface-muted); color: var(--haoya-text-muted); }
.landing-log b { color: var(--haoya-success); }
.landing-log div span:last-child { margin-inline-start: auto; color: var(--haoya-text); white-space: nowrap; }
.landing-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.landing-tags span { padding: 4px 10px; border-radius: 8px; background: var(--haoya-surface-muted); color: var(--haoya-text-muted); font-family: var(--haoya-mono); font-size: 12px; }

/* stats */
.landing-stats { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border: 1px solid var(--haoya-border); border-radius: 24px; background: var(--haoya-surface); }
.landing-stat { padding: 36px 28px; border-inline-end: 1px solid var(--haoya-border); }
.landing-stat:last-child { border-inline-end: 0; }
.landing-stat strong { display: block; font-size: clamp(34px, 4vw, 50px); font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.landing-stat strong em { margin-inline-start: 4px; color: var(--haoya-brand-text); font-style: normal; }
.landing-stat > span { color: var(--haoya-text-muted); font-size: 14px; }

/* steps */
.landing-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: landing-step; }
.landing-steps::before { content: ""; position: absolute; top: 27px; left: 12%; right: 12%; height: 2px; background: repeating-linear-gradient(90deg, var(--haoya-border-control) 0 6px, transparent 6px 12px); opacity: .5; }
.landing-steps li { position: relative; padding: 0 8px; text-align: center; }
.landing-steps li::before { counter-increment: landing-step; content: counter(landing-step, decimal-leading-zero); display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 20px; border: 1px solid var(--haoya-border-control); border-radius: 18px; background: var(--haoya-surface); color: var(--haoya-brand-text); font-size: 17px; font-weight: 800; box-shadow: 0 0 0 8px var(--haoya-bg), 0 10px 30px var(--landing-spot); }
.landing-steps h3 { margin: 0 0 8px; font-size: 18px; }
.landing-steps p { margin: 0; color: var(--haoya-text-muted); font-size: 14px; line-height: 1.7; }

/* final */
.landing-final { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px; margin: 20px 0 100px; padding: 72px 56px; overflow: hidden; border: 1px solid #ffffff14; border-radius: 32px; background: radial-gradient(340px circle at 84% 50%, #ffc40047, transparent 70%), radial-gradient(420px circle at 0% 120%, #ff9f0a14, transparent 65%), #0b0b0d; color: #fafafa; }
.landing-final::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(#ffffff14 1.5px, transparent 1.5px); background-size: 22px 22px; mask-image: linear-gradient(90deg, transparent 30%, #000); }
.landing-final > * { position: relative; }
.landing-final .landing-h2 { margin: 0 0 14px; color: #fff; }
.landing-final p { max-width: 520px; margin: 0 0 30px; color: #fafafa; opacity: .75; font-size: 17px; line-height: 1.7; }
.landing-btn-line { border-color: #ffffff40; color: #fff; }
.landing-btn-line:hover { border-color: #fff; }
.landing-final img { width: 220px; height: auto; transform: rotate(6deg); filter: drop-shadow(0 20px 30px #0003); animation: landing-bob-2 5s ease-in-out infinite; }
@keyframes landing-bob-2 { 50% { transform: rotate(2deg) translateY(-10px); } }

/* reveal (only when JS is running, so content never stays hidden) */
.landing-js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }
.landing-js .reveal.in { opacity: 1; transform: none; }
[data-delay="1"] { --d: .08s; } [data-delay="2"] { --d: .16s; } [data-delay="3"] { --d: .24s; } [data-delay="4"] { --d: .32s; }
.landing-js .landing-bar i { transform: scaleX(0); transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.landing-js .in .landing-bar i { transform: scaleX(1); }

/* responsive */
@media (max-width: 960px) {
  .landing-hero-grid, .landing-code-grid { grid-template-columns: 1fr; }
  .landing-stage { order: -1; max-width: 380px; }
  .landing-hero-copy { text-align: center; }
  .landing-lead { margin-inline: auto; }
  .landing-cta-row, .landing-trust { justify-content: center; }
  .landing-title > span, .landing-highlight { margin-inline: auto; }
  .landing-bento { grid-template-columns: 1fr 1fr; }
  .landing-card, .landing-card-wide { grid-column: span 1; }
  .landing-card-big { grid-column: span 2; }
  .landing-stats { grid-template-columns: 1fr 1fr; }
  .landing-stat:nth-child(2) { border-inline-end: 0; }
  .landing-stat:nth-child(-n+2) { border-bottom: 1px solid var(--haoya-border); }
  .landing-steps { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .landing-steps::before { display: none; }
  .landing-final { grid-template-columns: 1fr; padding: 56px 28px; text-align: center; }
  .landing-final p { margin-inline: auto; }
  .landing-final .landing-cta-row { justify-content: center; }
  .landing-final img { order: -1; width: 150px; margin: 0 auto; }
}
@media (max-width: 600px) {
  .landing-wrap { padding-inline: 16px; }
  .landing-hero { padding-top: 16px; }
  .landing-stage { max-width: 300px; }
  .landing-chip { padding: 7px 10px; font-size: 11px; }
  .landing-chip small { display: none; }
  .landing-chip-1, .landing-chip-3 { left: 0; }
  .landing-chip-2 { right: 0; }
  .landing-lead { font-size: 16px; }
  .landing-cta-row .landing-btn { flex: 1 1 100%; white-space: normal; text-align: center; }
  .landing-title { overflow-wrap: break-word; hyphens: auto; }
  .landing-ask { width: calc(100% - 32px); margin-top: 40px; }
  .landing-section { padding: 72px 0; }
  .landing-bento, .landing-stats, .landing-steps { grid-template-columns: 1fr; }
  .landing-card-big { grid-column: span 1; }
  .landing-stat { border-inline-end: 0 !important; border-bottom: 1px solid var(--haoya-border); }
  .landing-stat:last-child { border-bottom: 0; }
  .landing-term-top { gap: 10px; padding-inline: 12px; }
  .landing-dots { display: none; }
  .landing-tabs button { padding-inline: 9px; }
  .landing-code { min-height: 300px; padding: 18px; font-size: 12px; }
  .landing-final { margin-bottom: 72px; border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-page *, .landing-page *::before, .landing-page *::after { animation: none !important; }
  .landing-js .reveal { opacity: 1; transform: none; transition: none; }
  .landing-js .landing-bar i { transform: none; transition: none; }
}