:root {
  --ink: #101c35;
  --muted: #67748d;
  --line: #e7ebf3;
  --blue: #2167f5;
  --blue-deep: #174fcb;
  --purple: #7255ec;
  --surface: #f5f8ff;
  --white: #fff;
  --radius: 30px;
  --shadow: 0 30px 80px rgba(38, 73, 135, .14);
}

* { box-sizing: border-box; }
html { width: 100%; max-width: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; overflow-x: hidden; }
body { width: 100%; max-width: 100%; margin: 0; color: var(--ink); background: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; }
.section-shell, .section-block, .nav-wrap, .site-footer { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }

.site-header { position: fixed; z-index: 1000; inset: 0 0 auto; height: 78px; border-bottom: 1px solid transparent; transition: .25s ease; }
.site-header.scrolled { height: 68px; background: rgba(255,255,255,.86); border-color: rgba(225,230,240,.85); box-shadow: 0 12px 40px rgba(19,44,91,.06); backdrop-filter: blur(18px); }
.nav-wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.brand { width: 128px; height: 44px; display: flex; align-items: center; gap: 3px; position: relative; color: #15254b; overflow: visible; }
.brand strong { font-size: 27px; line-height: 1; font-weight: 900; font-style: italic; letter-spacing: -.11em; white-space: nowrap; }
.brand strong > span { display: inline-block; margin: 0 2px 0 5px; color: #2866ed; transform: skew(-8deg); }
.brand-mark { position: absolute; left: -3px; top: 3px; color: #7359ef; font-size: 12px; font-style: normal; }
.site-nav { display: flex; align-items: center; gap: 34px; font-size: 14px; font-weight: 600; color: #435069; }
.site-nav > a:not(.nav-cta) { position: relative; padding: 24px 0; }
.site-nav > a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 16px; height: 2px; background: var(--blue); transition: right .25s ease; }
.site-nav > a:not(.nav-cta):hover { color: var(--blue); }
.site-nav > a:not(.nav-cta):hover::after { right: 0; }
.nav-cta { padding: 11px 21px; color: white; background: var(--ink); border-radius: 999px; box-shadow: 0 8px 20px rgba(16,28,53,.14); transition: .2s ease; }
.nav-cta:hover { transform: translateY(-2px); background: var(--blue); }
.menu-button { display: none; width: 42px; height: 42px; padding: 11px 9px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; }
.menu-button span { display: block; width: 22px; height: 2px; margin: 4px auto; border-radius: 9px; background: var(--ink); transition: .25s ease; }

.hero { min-width: 0; min-height: 820px; padding-top: 156px; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; position: relative; }
.hero::before { content: ""; position: absolute; z-index: -2; width: 620px; height: 620px; right: -230px; top: 90px; border-radius: 50%; background: radial-gradient(circle, rgba(45,121,255,.12), transparent 68%); }
.hero-copy { position: relative; z-index: 5; padding-bottom: 44px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px; padding: 8px 14px 8px 9px; background: #f2f6ff; border: 1px solid #e3ebff; border-radius: 999px; color: #4e638a; font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.eyebrow span { width: 22px; height: 22px; border-radius: 50%; background: var(--blue); box-shadow: inset 0 0 0 6px rgba(255,255,255,.85), 0 0 0 4px rgba(33,103,245,.1); }
.hero h1 { margin: 0; font-size: clamp(54px, 5.35vw, 78px); line-height: 1.11; letter-spacing: -.055em; font-weight: 800; }
.hero h1 em { position: relative; color: var(--blue); font-style: normal; }
.hero h1 em::after { content: ""; position: absolute; left: 2px; right: -5px; bottom: -7px; height: 9px; border-radius: 50%; background: rgba(61,133,255,.22); transform: rotate(-1deg); }
.hero-copy > p { max-width: 530px; margin: 30px 0 34px; color: var(--muted); font-size: 18px; line-height: 1.9; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 26px; border-radius: 14px; font-size: 15px; font-weight: 700; transition: .22s ease; }
.button:hover { transform: translateY(-3px); }
.button-primary { color: #fff; background: linear-gradient(135deg, #2677ff, #1755df); box-shadow: 0 15px 35px rgba(33,103,245,.28); }
.button-primary span, .button-light span { font-size: 20px; }
.button-ghost { background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(28,55,104,.07); }
.play-dot { display: grid; place-items: center; width: 26px; height: 26px; padding-left: 2px; color: var(--blue); background: #eef4ff; border-radius: 50%; font-size: 9px; }
.hero-proof { display: flex; align-items: center; gap: 20px; margin-top: 44px; }
.hero-proof div { display: flex; flex-direction: column; gap: 4px; }
.hero-proof strong { font-size: 20px; }
.hero-proof span { color: #8893a8; font-size: 12px; }
.hero-proof i { width: 1px; height: 32px; background: var(--line); }

.hero-visual { min-width: 0; min-height: 650px; position: relative; display: flex; align-items: center; justify-content: center; perspective: 1500px; }
.hero-visual::before { content: ""; position: absolute; width: 470px; height: 470px; border-radius: 50%; background: linear-gradient(145deg, #dfeaff, #f7faff); box-shadow: inset 0 0 0 1px #edf2fb; }
.hero-visual::after { content: ""; position: absolute; width: 570px; height: 570px; border: 1px solid rgba(70,128,240,.14); border-radius: 50%; }
.ambient { position: absolute; z-index: 0; border-radius: 50%; filter: blur(2px); animation: float 5s ease-in-out infinite; }
.ambient-one { width: 36px; height: 36px; top: 90px; right: 60px; background: linear-gradient(135deg, #87b8ff, #486ff5); box-shadow: 0 12px 30px rgba(56,108,233,.25); }
.ambient-two { width: 17px; height: 17px; left: 70px; bottom: 120px; background: #ffbd66; animation-delay: -2s; }
.phone { position: relative; overflow: hidden; background: #fff; border: 7px solid #10172a; border-radius: 38px; box-shadow: var(--shadow); }
.phone img { width: 100%; height: 100%; object-fit: cover; }
.phone-island { position: absolute; z-index: 2; width: 32%; height: 23px; left: 34%; top: 10px; border-radius: 15px; background: #10172a; }
.phone-main { z-index: 3; width: 272px; height: 591px; transform: rotate(-2deg); box-shadow: 0 38px 100px rgba(31,73,149,.25); }
.phone-back { position: absolute; z-index: 2; width: 216px; height: 470px; opacity: .96; }
.phone-left { left: 15px; transform: rotate(-10deg) translateY(20px); }
.phone-right { right: 12px; transform: rotate(9deg) translateY(25px); }
.phone-back::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.35), transparent 38%); pointer-events: none; }
.floating-chip { position: absolute; z-index: 5; display: flex; align-items: center; gap: 10px; min-width: 142px; padding: 12px 15px; background: rgba(255,255,255,.93); border: 1px solid rgba(223,231,245,.9); border-radius: 16px; box-shadow: 0 18px 45px rgba(42,72,128,.17); backdrop-filter: blur(14px); animation: float 4s ease-in-out infinite; }
.floating-chip b { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #4b94ff, #2d61ec); font-size: 18px; }
.floating-chip span { font-size: 13px; font-weight: 750; line-height: 1.3; }
.floating-chip small { color: #9ba5b7; font-size: 10px; font-weight: 500; }
.chip-growth { left: 0; top: 120px; }
.chip-ai { right: -5px; bottom: 102px; animation-delay: -1.6s; }
.chip-ai b { background: linear-gradient(135deg, #8d6cf4, #5456dd); }
@keyframes float { 50% { transform: translateY(-10px); } }

.trust-strip { border-block: 1px solid #eef1f6; background: #fbfcff; overflow: hidden; }
.trust-track { min-height: 78px; width: min(1050px, calc(100% - 40px)); margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 30px; color: #7c879b; font-size: 14px; font-weight: 650; }
.trust-track span { white-space: nowrap; }
.trust-track i { margin-right: 9px; color: #4c84f5; font-style: normal; }

.section-block { padding-block: 130px; }
.section-heading { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; margin-bottom: 58px; }
.section-kicker { display: block; margin-bottom: 18px; color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .17em; }
.section-heading h2, .experience-intro h2, .workflow-heading h2, .about h2, .download h2 { margin: 0; font-size: clamp(38px, 4.2vw, 58px); line-height: 1.18; letter-spacing: -.045em; }
.section-heading > p, .experience-intro > p { max-width: 440px; margin: 0 0 8px; color: var(--muted); font-size: 16px; line-height: 1.8; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.feature-card { min-height: 365px; padding: 26px; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.8); border-radius: 28px; transition: transform .28s ease, box-shadow .28s ease; }
.feature-card:hover { transform: translateY(-8px); box-shadow: 0 26px 60px rgba(32,75,148,.12); }
.feature-card::after { content: ""; position: absolute; width: 180px; height: 180px; right: -72px; bottom: -80px; border: 1px solid rgba(75,112,190,.11); border-radius: 50%; box-shadow: 0 0 0 30px rgba(255,255,255,.12), 0 0 0 60px rgba(255,255,255,.1); }
.feature-blue { background: linear-gradient(150deg, #eef5ff, #e4edff); }
.feature-purple { background: linear-gradient(150deg, #f2efff, #eae7ff); }
.feature-orange { background: linear-gradient(150deg, #fff4e8, #ffead9); }
.feature-mint { background: linear-gradient(150deg, #eafbf8, #dcf5ef); }
.feature-index { position: absolute; top: 24px; right: 25px; color: rgba(45,73,126,.38); font-size: 12px; font-weight: 750; }
.feature-icon { width: 54px; height: 54px; margin: 36px 0 40px; display: grid; place-items: center; position: relative; color: #fff; background: linear-gradient(145deg, #4a91ff, #2f63ed); border-radius: 17px; box-shadow: 0 10px 24px rgba(47,99,237,.23); font-size: 27px; }
.feature-purple .feature-icon { background: linear-gradient(145deg, #9772f8, #694ce0); }
.feature-orange .feature-icon { background: linear-gradient(145deg, #ff9b58, #f0793e); }
.feature-mint .feature-icon { background: linear-gradient(145deg, #56ceb6, #27ae93); }
.icon-bars { display: flex; align-items: end; justify-content: center; gap: 4px; }
.icon-bars i { width: 5px; border-radius: 4px; background: #fff; }
.icon-bars i:nth-child(1) { height: 15px; }.icon-bars i:nth-child(2) { height: 27px; }.icon-bars i:nth-child(3) { height: 21px; }
.icon-search::before { content: ""; width: 19px; height: 19px; border: 3px solid #fff; border-radius: 50%; transform: translate(-2px,-2px); }
.icon-search::after { content: ""; position: absolute; width: 13px; height: 3px; background: #fff; border-radius: 2px; transform: rotate(45deg) translate(10px, 7px); }
.icon-book::before, .icon-book::after { content: ""; position: absolute; width: 18px; height: 26px; top: 14px; border: 2px solid #fff; }
.icon-book::before { left: 8px; border-radius: 4px 0 0 4px; transform: skewY(7deg); }
.icon-book::after { right: 8px; border-radius: 0 4px 4px 0; transform: skewY(-7deg); }
.feature-card h3 { margin: 0 0 14px; font-size: 23px; }
.feature-card p { margin: 0; color: #657188; font-size: 14px; line-height: 1.8; }
.feature-tag { position: absolute; z-index: 2; left: 26px; bottom: 25px; color: #63728e; font-size: 11px; font-weight: 700; letter-spacing: .05em; }

.experience { min-width: 0; position: relative; overflow-x: clip; }
.experience::before { content: ""; position: absolute; z-index: -2; top: 0; left: 50%; width: 100vw; height: 100%; transform: translateX(-50%); background: #f7f9fd; }
.experience-intro { display: grid; grid-template-columns: 1fr 1fr; align-items: end; margin-bottom: 60px; }
.experience-intro .section-kicker { grid-column: 1 / -1; }
.showcase-list { display: grid; gap: 28px; }
.showcase { min-height: 650px; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; overflow: hidden; border-radius: 36px; background: #fff; box-shadow: 0 20px 60px rgba(36,68,122,.07); }
.showcase-copy { padding: 74px 36px 64px 70px; display: flex; flex-direction: column; justify-content: center; }
.showcase .number { margin-bottom: 24px; color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .13em; }
.showcase h3 { margin: 0 0 24px; font-size: clamp(34px, 3.6vw, 50px); line-height: 1.22; letter-spacing: -.04em; }
.showcase-copy > p { max-width: 450px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.9; }
.showcase ul { display: grid; gap: 14px; margin: 30px 0 0; padding: 0; list-style: none; color: #42506b; font-size: 14px; }
.showcase li span { display: inline-grid; place-items: center; width: 21px; height: 21px; margin-right: 10px; color: #fff; background: var(--blue); border-radius: 50%; font-size: 11px; }
.showcase-phone-wrap { position: relative; min-height: 650px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; background: linear-gradient(150deg, #dceaff, #f0f5ff); }
.showcase-phone-wrap::before, .showcase-phone-wrap::after { content: ""; position: absolute; border: 1px solid rgba(55,107,214,.14); border-radius: 50%; }
.showcase-phone-wrap::before { width: 480px; height: 480px; top: 70px; }
.showcase-phone-wrap::after { width: 620px; height: 620px; top: 0; }
.showcase-glow { position: absolute; bottom: -90px; width: 420px; height: 260px; border-radius: 50%; background: rgba(37,103,246,.26); filter: blur(80px); }
.showcase-phone { z-index: 2; width: 302px; height: 657px; transform: translateY(96px); border-width: 8px; border-radius: 42px; box-shadow: 0 35px 75px rgba(30,69,138,.27); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.showcase:hover .showcase-phone { transform: translateY(78px); }
.showcase-creative { direction: rtl; }
.showcase-creative > * { direction: ltr; }
.showcase-creative .showcase-phone-wrap { background: linear-gradient(150deg, #e9e2ff, #f5f1ff); }
.showcase-creative .showcase-glow { background: rgba(116,84,230,.25); }
.showcase-creative .number { color: var(--purple); }
.mini-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.mini-tools span { padding: 10px 14px; color: #5e52a9; background: #f1effd; border: 1px solid #e8e2ff; border-radius: 10px; font-size: 12px; font-weight: 700; }
.showcase-learn .showcase-phone-wrap { background: linear-gradient(150deg, #fff0dc, #fff8ee); }
.showcase-learn .showcase-glow { background: rgba(245,151,57,.24); }
.showcase-learn .number { color: #ea841d; }
.quote-card { max-width: 420px; margin-top: 32px; padding: 20px 22px; display: flex; gap: 14px; align-items: flex-start; color: #7d5b33; background: #fff8ed; border: 1px solid #ffecd0; border-radius: 16px; font-size: 14px; line-height: 1.7; }
.quote-card b { color: #f2a24e; font-size: 28px; line-height: 1; }

.workflow-panel { padding: 80px 74px; color: #fff; background: radial-gradient(circle at 78% 20%, #2958a9 0, transparent 31%), linear-gradient(135deg, #111d35, #172b51); border-radius: 38px; box-shadow: 0 28px 70px rgba(17,37,76,.18); }
.workflow-heading { max-width: 650px; }
.workflow-heading .section-kicker { color: #77a8ff; }
.workflow-heading > p { max-width: 560px; margin: 24px 0 0; color: #aebbd3; font-size: 16px; line-height: 1.8; }
.workflow-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 72px; }
.step { position: relative; padding-right: 25px; }
.step b { display: grid; place-items: center; width: 42px; height: 42px; position: relative; z-index: 2; color: #fff; background: #2f70ee; border: 6px solid #264574; border-radius: 50%; font-size: 13px; }
.step-line { position: absolute; z-index: 1; top: 20px; left: 42px; right: 0; height: 1px; background: linear-gradient(90deg, #4f82dd, rgba(99,131,191,.25)); }
.step h3 { margin: 28px 0 10px; font-size: 18px; }
.step p { max-width: 170px; margin: 0; color: #92a2be; font-size: 13px; line-height: 1.7; }

.about { padding-top: 0; }
.about-card { min-height: 500px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 36px; }
.about-copy { padding: 70px; display: flex; flex-direction: column; justify-content: center; }
.about-copy p { max-width: 500px; margin: 28px 0 0; color: var(--muted); font-size: 16px; line-height: 2; }
.about-words { position: relative; overflow: hidden; background: linear-gradient(145deg, #edf4ff, #dfeaff); }
.about-words::before { content: "达人馆"; position: absolute; right: -20px; bottom: -55px; color: rgba(33,103,245,.06); font-size: 170px; font-weight: 900; white-space: nowrap; }
.about-words span { position: absolute; display: grid; place-items: center; color: #fff; border-radius: 50%; font-weight: 750; box-shadow: 0 18px 35px rgba(32,86,190,.18); animation: float 5s ease-in-out infinite; }
.about-words span:nth-child(1) { width: 132px; height: 132px; left: 14%; top: 15%; background: #246cf2; font-size: 25px; }
.about-words span:nth-child(2) { width: 100px; height: 100px; right: 17%; top: 12%; background: #8064e9; animation-delay: -1s; }
.about-words span:nth-child(3) { width: 92px; height: 92px; left: 42%; top: 45%; background: #42bda5; animation-delay: -2s; }
.about-words span:nth-child(4) { width: 78px; height: 78px; left: 12%; bottom: 10%; background: #ff9c52; animation-delay: -3s; }
.about-words span:nth-child(5) { width: 120px; height: 120px; right: 8%; bottom: 6%; background: #183963; font-size: 22px; animation-delay: -2.4s; }

.download { padding-top: 0; }
.download-card { min-height: 410px; padding: 72px 76px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; color: #fff; background: linear-gradient(135deg, #216cf5 0%, #325cdc 48%, #7455df 100%); border-radius: 38px; box-shadow: 0 30px 70px rgba(41,88,209,.25); }
.download-card::before { content: "✦"; position: absolute; right: 22%; top: 11%; color: rgba(255,255,255,.18); font-size: 55px; }
.download-orb { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); }
.orb-one { width: 360px; height: 360px; right: -130px; top: -180px; box-shadow: 0 0 0 45px rgba(255,255,255,.035), 0 0 0 90px rgba(255,255,255,.025); }
.orb-two { width: 210px; height: 210px; left: -110px; bottom: -100px; }
.download-copy { position: relative; z-index: 2; }
.download-label { display: inline-block; margin-bottom: 20px; padding: 7px 12px; color: #dce7ff; background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.15); border-radius: 999px; font-size: 12px; font-weight: 700; }
.download-copy > p { margin: 22px 0; color: #d9e3ff; font-size: 15px; }
.platforms { display: flex; flex-wrap: wrap; gap: 14px; color: #eaf0ff; font-size: 11px; }
.platforms span { padding-right: 14px; border-right: 1px solid rgba(255,255,255,.25); }
.platforms span:last-child { border: 0; }
.button-light { position: relative; z-index: 2; min-width: 160px; color: #214fb9; background: #fff; box-shadow: 0 18px 40px rgba(19,36,95,.18); }

.site-footer { padding: 28px 0 36px; }
.footer-main { min-height: 100px; display: grid; grid-template-columns: 170px 1fr auto; align-items: center; border-bottom: 1px solid var(--line); }
.footer-brand { width: 115px; }
.footer-main p { color: #8993a5; font-size: 13px; }
.footer-links { display: flex; gap: 28px; color: #647086; font-size: 13px; font-weight: 600; }
.footer-links a:hover { color: var(--blue); }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 26px; color: #a0a8b6; font-size: 11px; }
.footer-bottom a { transition: color .2s ease; }
.footer-bottom a:hover { color: var(--blue); }

.reveal { opacity: 0; transform: translateY(25px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.feature-grid .reveal:nth-child(2) { transition-delay: .08s; }.feature-grid .reveal:nth-child(3) { transition-delay: .16s; }.feature-grid .reveal:nth-child(4) { transition-delay: .24s; }

@media (max-width: 1080px) {
  .hero { grid-template-columns: .9fr 1.1fr; }
  .phone-main { width: 244px; height: 530px; }
  .phone-back { width: 184px; height: 400px; }
  .hero-visual::before { width: 420px; height: 420px; }.hero-visual::after { width: 510px; height: 510px; }
  .floating-chip { transform: scale(.9); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-card { min-height: 320px; }
  .feature-icon { margin: 24px 0 30px; }
  .showcase-copy { padding-left: 48px; }
  .workflow-panel { padding: 70px 50px; }
}

@media (max-width: 820px) {
  .section-shell, .section-block, .nav-wrap, .site-footer { width: min(100% - 32px, 680px); }
  .site-header, .site-header.scrolled { height: 64px; }
  .brand { width: 108px; }.brand strong { font-size: 24px; }
  .menu-button { display: block; position: relative; z-index: 1002; }
  .menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .site-nav { position: fixed; z-index: 1001; inset: 0; padding: 120px 32px 40px; display: flex; flex-direction: column; align-items: stretch; gap: 0; background: rgba(255,255,255,.98); visibility: hidden; opacity: 0; transform: translateY(-12px); transition: .25s ease; }
  .site-nav.open { visibility: visible; opacity: 1; transform: none; }
  .site-nav > a:not(.nav-cta) { padding: 18px 4px; border-bottom: 1px solid var(--line); font-size: 20px; }
  .site-nav > a:not(.nav-cta)::after { display: none; }
  .nav-cta { margin-top: 24px; padding: 17px; text-align: center; font-size: 16px; }
  .hero { min-height: auto; padding-top: 116px; display: block; text-align: center; }
  .hero::before { width: 380px; height: 380px; right: -190px; }
  .hero-copy { padding-bottom: 22px; }
  .hero h1 { font-size: clamp(45px, 11vw, 68px); }
  .hero-copy > p { margin-inline: auto; font-size: 16px; }
  .hero-actions, .hero-proof { justify-content: center; }
  .hero-visual { min-height: 590px; transform: scale(.92); margin: -10px 0 0; }
  .phone-left { left: 4%; }.phone-right { right: 4%; }
  .chip-growth { left: 4%; }.chip-ai { right: 4%; }
  .trust-track { overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .trust-track::-webkit-scrollbar { display: none; }
  .section-block { padding-block: 92px; }
  .section-heading, .experience-intro { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .showcase { grid-template-columns: 1fr; }
  .showcase-copy { padding: 55px 45px; }
  .showcase-phone-wrap { min-height: 570px; }
  .showcase-creative { direction: ltr; }
  .workflow-steps { grid-template-columns: repeat(2, 1fr); gap: 45px 0; }
  .workflow-steps .step:nth-child(2) .step-line { display: none; }
  .about-card { grid-template-columns: 1fr; }
  .about-copy { padding: 56px 44px; }
  .about-words { min-height: 430px; }
  .download-card { padding: 60px 45px; align-items: flex-start; flex-direction: column; gap: 38px; }
  .footer-main { grid-template-columns: 140px 1fr; }
  .footer-main p { text-align: right; }.footer-links { grid-column: 1 / -1; padding: 20px 0; }
}

@media (max-width: 560px) {
  .section-shell, .section-block, .nav-wrap, .site-footer { width: calc(100% - 28px); }
  .hero { padding-top: 104px; }
  .eyebrow { font-size: 10px; }
  .hero h1 { font-size: 42px; letter-spacing: -.06em; }
  .hero-copy > p { margin: 24px 4px 28px; font-size: 14px; line-height: 1.8; }
  .hero-actions .button { min-height: 50px; padding-inline: 20px; font-size: 13px; }
  .hero-proof { gap: 13px; margin-top: 34px; }.hero-proof strong { font-size: 17px; }.hero-proof span { font-size: 9px; }.hero-proof i { height: 28px; }
  .hero-visual { min-height: 530px; width: 100%; margin: -16px 0 0; transform: scale(.78); }
  .hero-visual::before { width: 430px; height: 430px; }.hero-visual::after { width: 540px; height: 540px; }
  .phone-main { width: 250px; height: 543px; }.phone-back { width: 188px; height: 409px; }
  .phone-left { left: -1%; }.phone-right { right: -1%; }
  .floating-chip { display: none; }
  .trust-track { min-height: 64px; font-size: 12px; }
  .section-block { padding-block: 74px; }
  .section-kicker { margin-bottom: 12px; font-size: 9px; }
  .section-heading h2, .experience-intro h2, .workflow-heading h2, .about h2, .download h2 { font-size: 36px; }
  .section-heading > p, .experience-intro > p { font-size: 14px; }
  .section-heading { margin-bottom: 38px; }
  .feature-grid { grid-template-columns: 1fr; gap: 12px; }
  .feature-card { min-height: 265px; padding: 23px; }
  .feature-icon { width: 48px; height: 48px; margin: 20px 0 24px; }
  .feature-card h3 { font-size: 21px; }.feature-card p { max-width: 85%; }
  .experience-intro { margin-bottom: 38px; }
  .showcase-list { gap: 18px; }
  .showcase { min-height: 0; border-radius: 26px; }
  .showcase-copy { padding: 42px 25px; }
  .showcase h3 { margin-bottom: 18px; font-size: 34px; }
  .showcase-copy > p { font-size: 14px; line-height: 1.8; }
  .showcase-phone-wrap { min-height: 510px; }
  .showcase-phone { width: 252px; height: 548px; border-radius: 36px; transform: translateY(70px); }
  .showcase:hover .showcase-phone { transform: translateY(58px); }
  .workflow-panel { padding: 48px 25px; border-radius: 28px; }
  .workflow-heading > p { font-size: 14px; }
  .workflow-steps { margin-top: 48px; grid-template-columns: 1fr; gap: 30px; }
  .step { min-height: 62px; padding-left: 64px; }
  .step b { position: absolute; left: 0; top: 0; }
  .step-line { width: 1px; height: 32px; top: 42px; left: 21px; background: linear-gradient(#4f82dd, rgba(99,131,191,.25)); }
  .workflow-steps .step:nth-child(2) .step-line { display: block; }
  .step h3 { margin: 0 0 7px; }.step p { max-width: none; }
  .about { padding-top: 0; }
  .about-card { border-radius: 26px; }
  .about-copy { padding: 44px 25px; }.about-copy p { font-size: 14px; }
  .about-words { min-height: 340px; }
  .about-words span:nth-child(1) { width: 108px; height: 108px; font-size: 21px; }.about-words span:nth-child(5) { width: 95px; height: 95px; }
  .download { padding-top: 0; }
  .download-card { min-height: 480px; padding: 50px 26px; border-radius: 28px; }
  .platforms { gap: 9px; }.platforms span { padding-right: 9px; }
  .button-light { width: 100%; }
  .footer-main { grid-template-columns: 1fr; gap: 14px; padding: 30px 0; }
  .footer-main p { margin: 0; text-align: left; }.footer-links { padding: 7px 0 0; flex-wrap: wrap; gap: 18px; }
  .footer-bottom { gap: 10px; flex-direction: column; }
}

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

@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}