/* TAXSIYA · Landing (design system oficial) — usa tokens de ds-tokens.css */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
section { position: relative; }
img, svg { display: block; }
.ic { width: 22px; height: 22px; stroke-width: 1.9; vertical-align: middle; }
.ic-sm { width: 18px; height: 18px; }
.ic-lg { width: 28px; height: 28px; stroke-width: 1.8; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-body); font-weight: 600; font-size: 1rem; padding: 13px 22px; border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer; text-decoration: none; line-height: 1; transition: transform var(--dur-fast) var(--ease-out), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); white-space: nowrap; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--brand-red); color: #fff; box-shadow: var(--sh-red); }
.btn-primary:hover { background: var(--brand-red-hover); color:#fff; transform: translateY(-1px); }
.btn-ghost { background: var(--surface); color: var(--fg); border-color: var(--border-2); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--fg-3); color: var(--fg); }
.btn-ink { background: var(--ink-800); color:#fff; }
.btn-ink:hover { background: var(--ink-900); color:#fff; transform: translateY(-1px); }
.btn-sm { padding: 9px 15px; font-size: .9rem; border-radius: var(--r-sm); }

/* nav */
.nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); display: flex; align-items: center; background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--border); transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); }
.nav.scrolled { box-shadow: var(--sh-sm); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; }
/* LOGO: regla de marca — colores originales SIEMPRE, nunca filter/desaturación.
   En vez del filter del prototipo, va sobre píldora blanca para que conserve sus
   colores en claro y oscuro. */
.nav-logo { display: flex; align-items: center; }
.logo-pill { display:inline-flex; align-items:center; background:#fff; border-radius: var(--r-sm); padding: 5px 10px; box-shadow: var(--sh-xs); }
.nav-logo-img { height: 32px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a { color: var(--fg-2); font-weight: 500; font-size: .95rem; padding: 8px 14px; border-radius: var(--r-sm); transition: color var(--dur) var(--ease), background var(--dur) var(--ease); }
.nav-links a:hover { color: var(--fg); background: var(--surface-2); }
.nav-right { display: flex; align-items: center; gap: 10px; }
.theme-toggle { width: 40px; height: 40px; border-radius: var(--r-sm); border: 1px solid var(--border-2); background: var(--surface); color: var(--fg-2); display: grid; place-items: center; cursor: pointer; transition: all var(--dur) var(--ease); }
.theme-toggle:hover { color: var(--fg); border-color: var(--fg-3); }
.nav-burger { display: none; width: 42px; height: 42px; border:1px solid var(--border-2); background:var(--surface); border-radius:var(--r-sm); cursor:pointer; align-items:center; justify-content:center; color:var(--fg); }
/* menú móvil desplegable */
.mobile-menu { display:none; position:fixed; inset: var(--nav-h) 0 auto 0; z-index:49; background: var(--surface); border-bottom:1px solid var(--border); box-shadow: var(--sh-md); padding: 12px 24px 20px; }
.mobile-menu.open { display:block; }
.mobile-menu a { display:block; color: var(--fg); font-weight:600; font-size:1.05rem; padding: 12px 4px; border-bottom:1px solid var(--border); }
.mobile-menu a:last-child { border-bottom:0; }

/* hero shared */
.hero { padding: clamp(48px, 6vw, 96px) 0 clamp(56px, 7vw, 104px); }
.hero h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -0.03em; margin: 0 0 18px; color: var(--fg); text-wrap: balance; }
.hero h1 .accent { color: var(--brand-red); }
.hero .sub { font-size: var(--fs-lead); color: var(--fg-2); margin: 0 0 30px; max-width: 30ch; line-height: 1.5; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.ministats { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.ministat { display: flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 600; color: var(--fg-2); }
.ministat .ic { color: var(--green); }
.ministats .dot { width:6px;height:6px;border-radius:50%; background: var(--border-2); align-self:center; }
.heroA .grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero-art { position: relative; }
.kicker { display:inline-flex; align-items:center; gap:9px; padding:6px; border-radius:var(--r-pill); background: color-mix(in srgb, var(--surface) 70%, transparent); border:1px solid var(--border); box-shadow: var(--sh-xs); backdrop-filter: blur(8px); margin-bottom:22px; font-size:.84rem; font-weight:600; color:var(--fg-2); }
.kicker .new { display:inline-flex; align-items:center; gap:6px; background: var(--ink-800); color:#fff; font-weight:700; font-size:.74rem; letter-spacing:.02em; padding:5px 11px; border-radius:var(--r-pill); }
.kicker .new .ic { color: var(--yellow); }
.kicker .txt { padding-right:10px; }
:root[data-theme="dark"] .kicker { background: rgba(255,255,255,0.05); }

/* map mock */
.mapcard { position: relative; border-radius: var(--r-xl); overflow: hidden; background: linear-gradient(0deg, rgba(21,32,57,0.04), rgba(21,32,57,0.04)), var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-lg); aspect-ratio: 4 / 4.4; }
.mapcard .roads { position:absolute; inset:0; background-image: linear-gradient(var(--border) 1.5px, transparent 1.5px), linear-gradient(90deg, var(--border) 1.5px, transparent 1.5px), linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 96px 96px, 96px 96px, 32px 32px, 32px 32px; background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px; opacity: .9; }
.mapcard .river { position:absolute; left:-8%; top:18%; width:120%; height:64px; transform: rotate(-9deg); background: linear-gradient(90deg, color-mix(in srgb,var(--info) 16%, transparent), color-mix(in srgb,var(--info) 9%, transparent)); border-radius: 40px; }
.taxi-dot { position:absolute; width:34px; height:34px; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow: var(--sh-md); border:1px solid var(--border); color: var(--ink-800); }
.taxi-dot.free { color: var(--brand-red); }
.taxi-dot .ic { width:18px;height:18px; }
.pulse { position:absolute; width:18px;height:18px;border-radius:50%; background: var(--brand-red); box-shadow: 0 0 0 0 var(--brand-red-ring); animation: pulse 2.2s var(--ease-out) infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(253,38,36,.45);} 70%{box-shadow:0 0 0 22px rgba(253,38,36,0);} 100%{box-shadow:0 0 0 0 rgba(253,38,36,0);} }
.price-chip { position:absolute; left:18px; bottom:18px; right:18px; background: var(--surface); border:1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-md); padding: 14px 16px; display:flex; align-items:center; gap:14px; }
.price-chip .av { width:42px;height:42px;border-radius:12px; background: var(--ink-800); color:#fff; display:grid;place-items:center; }
.price-chip .meta { flex:1; }
.price-chip .meta b { font-weight:700; color:var(--fg); display:block; font-size:.95rem; }
.price-chip .meta span { font-size:.8rem; color: var(--fg-3); }
.price-chip .price { font-family:var(--font-display); font-weight:800; font-size:1.15rem; color: var(--fg); text-align:right; }
.price-chip .price small { display:block; font-family:var(--font-body); font-weight:500; font-size:.68rem; color:var(--fg-3); text-align:right; }
.map-ai { position:absolute; top:16px; left:16px; right:16px; z-index:3; display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:var(--r-md); background: color-mix(in srgb, var(--surface) 80%, transparent); border:1px solid var(--border); box-shadow: var(--sh-sm); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); }
.map-ai .orb { width:32px; height:32px; border-radius:10px; flex:none; display:grid; place-items:center; color:#fff; background: linear-gradient(135deg, #FF5A57, #FD2624); box-shadow: 0 4px 12px rgba(253,38,36,.32); }
.map-ai .orb .ic { width:17px; height:17px; }
.map-ai .l b { font-size:.82rem; font-weight:700; color:var(--fg); display:block; line-height:1.2; }
.map-ai .l span { font-size:.72rem; color:var(--fg-3); }
.map-ai .live { margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:.68rem; font-weight:700; color:var(--green-ink); }
.map-ai .live .pip { width:7px;height:7px;border-radius:50%; background:var(--green); animation:pulse 2.2s var(--ease-out) infinite; }
:root[data-theme="dark"] .map-ai { background: rgba(19,28,51,.7); }
:root[data-theme="dark"] .map-ai .live { color:#4ADE80; }

/* generic section heading */
.sec { padding: clamp(56px, 7vw, 104px) 0; }
.sec-head { max-width: 640px; margin: 0 auto clamp(32px,4vw,52px); text-align: center; }
.eyebrow { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-red); }
.sec-head .eyebrow { display:block; margin-bottom: 12px; }
.sec-head h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h2); letter-spacing:-0.02em; line-height: var(--lh-snug); margin: 0 0 14px; color: var(--fg); text-wrap: balance; }
.sec-head p { font-size: var(--fs-lead); color: var(--fg-2); margin: 0; line-height: 1.5; }

/* app cards */
.apps { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }
.appcard { background: var(--surface); border:1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--sh-md); padding: 34px 32px; display:flex; flex-direction: column; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease); }
.appcard:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.appcard.driver { background: var(--ink-800); border-color: var(--ink-700); color: var(--fg-on-dark); }
.appcard .badge-tag { align-self:flex-start; display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:.78rem; letter-spacing:.02em; padding:6px 12px; border-radius:var(--r-pill); margin-bottom: 18px; }
.appcard .badge-tag.free { background: var(--green-soft); color: var(--green-ink); }
.appcard.driver .badge-tag { background: rgba(245,201,70,0.16); color: var(--yellow); }
.appcard h3 { font-family: var(--font-display); font-weight:800; font-size: 1.7rem; letter-spacing:-0.02em; margin: 0 0 6px; }
.appcard .who { font-size:.95rem; color: var(--fg-3); margin: 0 0 22px; }
.appcard.driver .who { color: var(--fg-on-dark-2); }
.appcard .feats { list-style:none; margin: 0 0 26px; padding: 0; display:flex; flex-direction:column; gap: 14px; flex: 1; }
.appcard .feats li { display:flex; gap: 12px; align-items: flex-start; font-size:.98rem; line-height:1.45; }
.appcard .feats .ico { flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background: var(--brand-red-soft); color: var(--brand-red); margin-top:1px; }
.appcard.driver .feats .ico { background: rgba(253,38,36,0.18); color: #FF6361; }
.appcard .feats b { font-weight:600; color: inherit; }
.appcard .feats span { color: var(--fg-2); }
.appcard.driver .feats span { color: var(--fg-on-dark-2); }
.appcard .price-line { font-size:.9rem; color: var(--fg-3); margin: 0 0 16px; }
.appcard.driver .price-line { color: var(--fg-on-dark-2); }
.appcard .price-line b { color: var(--fg); } .appcard.driver .price-line b { color:#fff; }
.store-badges { display:flex; gap: 12px; flex-wrap: wrap; }
.store-badges a { display:inline-flex; transition: transform var(--dur-fast) var(--ease-out); }
.store-badges a:hover { transform: translateY(-2px); }
.store-badges img { height:46px; width:auto; display:block; }

/* steps */
.steps { display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.step { background: var(--surface); border:1px solid var(--border); border-radius: var(--r-lg); padding: 30px 26px; position:relative; box-shadow: var(--sh-sm); }
.step .n { font-family: var(--font-display); font-weight:800; font-size: 1rem; width:40px;height:40px;border-radius:12px; background: var(--ink-800); color:#fff; display:grid; place-items:center; margin-bottom: 18px; }
.step .si { position:absolute; top: 28px; right: 26px; color: var(--brand-red); opacity:.9; }
.step h4 { font-family: var(--font-display); font-weight:700; font-size: 1.2rem; margin: 0 0 8px; color: var(--fg); letter-spacing:-0.01em; }
.step p { margin: 0; color: var(--fg-2); font-size: .97rem; line-height: 1.5; }

/* trust */
.trust { background: var(--ink-900); color: var(--fg-on-dark); }
.trust .sec-head h2 { color:#fff; }
.trust .sec-head p { color: var(--fg-on-dark-2); }
.trust .sec-head .eyebrow { color:#FF6361; }
.trust-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-bottom: 36px; }
.trust-item { background: rgba(255,255,255,0.04); border:1px solid var(--border-ink); border-radius: var(--r-lg); padding: 26px 22px; }
.trust-item .ico { width:46px;height:46px;border-radius:13px; background: rgba(253,38,36,0.16); color:#FF6361; display:grid;place-items:center; margin-bottom: 16px; }
.trust-item.y .ico { background: rgba(245,201,70,0.16); color: var(--yellow); }
.trust-item.g .ico { background: rgba(34,197,94,0.16); color: #4ADE80; }
.trust-item h4 { font-family: var(--font-display); font-weight:700; font-size: 1.1rem; margin: 0 0 6px; color:#fff; }
.trust-item p { margin: 0; font-size:.92rem; color: var(--fg-on-dark-2); line-height:1.5; }
.disclaimer { display:flex; gap:14px; align-items:flex-start; background: rgba(255,255,255,0.04); border:1px solid var(--border-ink); border-radius: var(--r-lg); padding: 20px 22px; }
.disclaimer .ic { color: var(--yellow); flex:none; margin-top:2px; }
.disclaimer p { margin:0; color: var(--fg-on-dark-2); font-size:.95rem; line-height:1.55; }
.disclaimer b { color:#fff; }

/* diferenciador (conservado: TAXSIYA vs otras apps) */
.diff-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.diff-col { border-radius: var(--r-xl); padding: 30px 28px; border:1px solid var(--border); }
.diff-col.us { background: var(--surface); box-shadow: var(--sh-md); }
.diff-col.them { background: var(--surface-2); }
.diff-col h3 { font-family: var(--font-display); font-weight:800; font-size:1.3rem; letter-spacing:-0.01em; margin:0 0 18px; }
.diff-col.us h3 { color: var(--brand-red); }
.diff-col.them h3 { color: var(--fg-3); }
.diff-col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.diff-col li { display:flex; gap:11px; align-items:flex-start; font-size:.97rem; line-height:1.45; color: var(--fg-2); }
.diff-col li .ic { flex:none; margin-top:1px; }
.diff-col.us li .ic { color: var(--green); }
.diff-col.them li .ic { color: var(--fg-3); }
.legal-note { background: var(--brand-red-soft); border:1px solid var(--brand-red-ring); border-left:4px solid var(--brand-red); border-radius: var(--r-md); padding: 18px 22px; font-size:.9rem; line-height:1.6; color: var(--fg-2); }
:root[data-theme="dark"] .legal-note { background: rgba(253,38,36,0.10); }
.legal-note strong { color: var(--fg); }

/* AI assistant section */
.ai-sec { position:relative; overflow:hidden; background: var(--ink-900); color:#fff; padding: clamp(64px,8vw,120px) 0; }
.ai-mesh { position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(45% 55% at 18% 22%, rgba(253,38,36,0.20), transparent 60%), radial-gradient(40% 50% at 82% 18%, rgba(37,111,219,0.18), transparent 60%), radial-gradient(50% 60% at 70% 90%, rgba(245,201,70,0.10), transparent 60%); }
.ai-grid-bg { position:absolute; inset:0; z-index:0; opacity:.5; background-image: linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:46px 46px; -webkit-mask-image: radial-gradient(120% 80% at 50% 30%, #000 30%, transparent 75%); mask-image: radial-gradient(120% 80% at 50% 30%, #000 30%, transparent 75%); }
.ai-sec .wrap { position:relative; z-index:1; }
.ai-layout { display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:center; }
.ai-copy .pill { display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border-radius:var(--r-pill); background: rgba(255,255,255,0.06); border:1px solid var(--border-ink); color:#fff; font-weight:700; font-size:.78rem; margin-bottom:22px; }
.ai-copy .pill .ic { color: var(--yellow); }
.ai-copy h2 { font-family:var(--font-display); font-weight:800; font-size:var(--fs-h2); letter-spacing:-.02em; line-height:1.1; margin:0 0 16px; text-wrap:balance; }
.ai-copy h2 .grad { background:linear-gradient(100deg,#FF6361,#FFB199); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ai-copy p { color: var(--fg-on-dark-2); font-size:var(--fs-lead); line-height:1.55; margin:0 0 26px; max-width:44ch; }
.ai-feats { display:flex; flex-direction:column; gap:14px; margin:0 0 30px; padding:0; list-style:none; }
.ai-feats li { display:flex; gap:12px; align-items:center; font-size:1rem; color:#E7ECF5; }
.ai-feats .ico { width:36px;height:36px;border-radius:11px; flex:none; display:grid;place-items:center; background:rgba(255,255,255,.06); border:1px solid var(--border-ink); color:#FF8583; }
.ai-chat { position:relative; border-radius:var(--r-xl); overflow:hidden; background: rgba(255,255,255,0.05); border:1px solid var(--border-ink); box-shadow: 0 30px 80px rgba(0,0,0,.5); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); }
.ai-chat-head { display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--border-ink); }
.ai-chat-head .orb { width:40px;height:40px;border-radius:13px; display:grid;place-items:center; color:#fff; background: linear-gradient(135deg,#FF5A57,#FD2624); box-shadow:0 6px 18px rgba(253,38,36,.4); flex:none; }
.ai-chat-head b { font-size:1rem; font-weight:700; color:#fff; display:block; }
.ai-chat-head span { font-size:.78rem; color:var(--fg-on-dark-2); display:inline-flex; align-items:center; gap:5px; }
.ai-chat-head .pip { width:7px;height:7px;border-radius:50%; background:var(--green); }
.ai-chat-body { padding:20px; display:flex; flex-direction:column; gap:12px; }
.ai-b { max-width:82%; padding:12px 15px; border-radius:16px; font-size:.92rem; line-height:1.45; }
.ai-b.them { align-self:flex-start; background: rgba(255,255,255,0.08); color:#F1F4FA; border-bottom-left-radius:5px; border:1px solid var(--border-ink); }
.ai-b.me { align-self:flex-end; background: var(--brand-red); color:#fff; border-bottom-right-radius:5px; }
.ai-b .src { display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:.72rem; color:var(--fg-on-dark-2); }
.ai-typing { align-self:flex-start; display:flex; gap:4px; padding:13px 16px; background:rgba(255,255,255,0.08); border:1px solid var(--border-ink); border-radius:16px; border-bottom-left-radius:5px; }
.ai-typing i { width:7px;height:7px;border-radius:50%; background:#9aa6bf; animation:blink 1.4s infinite; }
.ai-typing i:nth-child(2){ animation-delay:.2s; } .ai-typing i:nth-child(3){ animation-delay:.4s; }
@keyframes blink { 0%,60%,100%{ opacity:.25; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-2px); } }
.ai-chat-input { display:flex; align-items:center; gap:10px; padding:14px 16px; border-top:1px solid var(--border-ink); }
.ai-chat-input .f { flex:1; background:rgba(255,255,255,0.07); border:1px solid var(--border-ink); border-radius:var(--r-pill); padding:11px 16px; font-size:.88rem; color:var(--fg-on-dark-2); }
.ai-chat-input .send { width:42px;height:42px;border-radius:50%; flex:none; display:grid;place-items:center; color:#fff; border:none; cursor:pointer; background:linear-gradient(135deg,#FF5A57,#FD2624); }

/* footer */
.footer { background: var(--surface); border-top:1px solid var(--border); padding: clamp(48px,6vw,72px) 0 32px; }
.footer-top { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.footer-brand .logo-pill { margin-bottom: 16px; }
.footer-brand p { color: var(--fg-3); font-size:.92rem; max-width: 30ch; line-height:1.55; margin:0; }
.footer-col h5 { font-family: var(--font-display); font-weight:700; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color: var(--fg-3); margin: 0 0 16px; }
.footer-col a { display:block; color: var(--fg-2); font-size:.94rem; padding: 6px 0; transition: color var(--dur) var(--ease); }
.footer-col a:hover { color: var(--brand-red); }
.footer-legal { border-top:1px solid var(--border); padding-top: 24px; display:flex; flex-wrap:wrap; gap: 8px 18px; justify-content: space-between; align-items:center; }
.footer-legal p { margin:0; font-size:.82rem; color: var(--fg-3); }

/* scroll reveal — SOLO con JS (sin JS el contenido es visible: robustez + SEO + a11y) */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* responsive */
@media (max-width: 920px) {
  .heroA .grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-art { max-width: 420px; margin: 0 auto; width:100%; }
  .apps { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .diff-grid { grid-template-columns: 1fr; }
  .ai-layout { grid-template-columns:1fr; gap:36px; }
  .ai-chat { max-width:440px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; }
  .nav-links { display: none; }
  .nav-burger { display: flex; }
}
@media (max-width: 540px) {
  .wrap { padding: 0 18px; }
  .hero h1 { font-size: clamp(2.2rem, 7vw, 2.8rem); }
  .trust-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-legal { flex-direction: column; align-items: flex-start; }
  .hero-ctas .btn { flex: 1 1 auto; justify-content: center; }
}