@import url('./desktop-showcase.css');
@import url('./ae-film.css');
/* Local homepage art direction. Product routes and application assets are independent. */
.home { --demo-bg:#eeedf3; --demo-surface:#f8f7fa; --demo-bubble:#fff; --demo-ink:#302e3a; --demo-muted:#787281; --demo-line:#dedce7; }
[data-theme=dark] .home { --demo-bg:#24232d; --demo-surface:#302e3a; --demo-bubble:#383541; --demo-ink:#f2effb; --demo-muted:#aba5ba; --demo-line:#45404f; }
.home .hero { grid-template-columns:1.1fr 1fr; gap:30px; min-height:760px; padding-top:56px; padding-bottom:66px; }
.home .hero h1 { font-size:clamp(44px,4.65vw,64px); line-height:1.13; letter-spacing:-.06em; }
.home .hero h1>span { display:inline-block; position:relative; }
.home .hero h1>span:after { content:''; display:block; position:absolute; bottom:-9px; left:2px; width:96%; height:7px; border-top:2px solid var(--brand); border-radius:50%; transform:rotate(-2deg); opacity:.5; }
.home .hero-description { margin-top:30px; font-size:17px; line-height:1.8; }
.home .availability { min-height:35px; font-size:12px; padding-inline:13px; background:transparent; }
.home .hero-buttons { margin-top:31px; gap:23px; }
.home .hero-buttons .button { min-height:58px; padding-inline:26px; border-radius:15px; box-shadow:0 7px 20px -12px #605ce9aa; }
.home .browser-note { font-size:12px; margin-top:22px; }
.home .hero-art { height:596px; transform:none; }
.home .art-orbit { width:440px; height:440px; border-radius:42% 58% 50% 50% / 51% 42% 58% 49%; transform:translate(-50%,-45%) rotate(-12deg); }
.home .art-orbit:after { inset:-24px; border-color:color-mix(in srgb,var(--brand) 19%,transparent); }
.home .device { width:294px; height:550px; border:5px solid var(--demo-line); border-radius:39px; transform:rotate(3deg); background:var(--demo-bg); color:var(--demo-ink); box-shadow:0 34px 55px -28px #1b173d55,0 0 0 1px var(--line); }
.home .device-top,.home .demo-chat-header { background:var(--demo-surface); border-color:var(--demo-line); }
.home .camera-dot { background:var(--demo-muted); }
.home .demo-chat-header { height:69px; }
.home .demo-chat-header b { font-size:10.5px; }
.home .demo-chat-header small { color:var(--demo-muted); font-size:7.5px; }
.home .demo-chat { gap:12px; padding-top:16px; }
.home .demo-day { background:var(--demo-surface); color:var(--demo-muted); }
.home .chat-bubble { font-size:12px; padding:11px 12px 8px; box-shadow:0 1px 0 var(--demo-line); }
.home .incoming { background:var(--demo-bubble); }
.home .chat-bubble b { color:#9c89e7; font-size:10px; }
.home .chat-bubble time { color:var(--demo-muted); font-size:8px; }
.home .outgoing { background:#635ce6; }
.home .outgoing time { color:#dedbff; }
.home .demo-event { background:var(--demo-surface); border-color:var(--demo-line); padding-block:13px; }
.home .demo-event small,.home .demo-event span:not(.demo-event-icon):not(.event-arrow),.home .typing { color:var(--demo-muted); }
.home .demo-event-icon { background:color-mix(in srgb,#8176db 18%,var(--demo-surface)); color:#a092e8; }
.home .demo-input { background:var(--demo-bubble); color:var(--demo-muted); padding-block:9px; }
.home .floating-note { top:31px; left:-5px; padding:14px 17px; box-shadow:0 12px 26px -18px #17132855; }
.home .floating-brand { bottom:74px; left:-14px; }
.home .floating-brand img { width:82px; height:82px; border-radius:25px; }
.home .art-star { top:45px; right:4px; font-size:73px; }
.home .art-caption { bottom:-3px; font-size:10px; }
.home .features { padding-top:20px; padding-bottom:86px; }
.home .section-heading h2 { font-size:38px; }
.home .section-heading>p { font-size:14px; }
.home .features-grid { gap:26px; border:0; }
.home .features-grid article,.home .features-grid article+article { padding:0; border:0; min-width:0; }
.home .feature-top { margin:25px 0 16px; }
.home .feature-top>span { font-size:10px; letter-spacing:.08em; }
.home .feature-top .icon { width:20px; height:20px; }
.home .features-grid h3 { font-size:25px; margin-bottom:12px; }
.home .features-grid p { font-size:14px; line-height:1.85; max-width:320px; min-height:103px; }
.home .feature-detail { font-size:11px; border-top:1px solid var(--line); padding-top:19px; margin-top:21px; }
.feature-visual { height:213px; border-radius:22px; background:var(--soft); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.visual-chat { background:color-mix(in srgb,var(--lavender) 80%,var(--bg)); }
.sample-message { position:absolute; left:20px; top:54px; display:flex; align-items:center; gap:10px; font-size:12px; }
.sample-message>span { background:var(--surface); padding:13px 15px; border-radius:14px 14px 14px 3px; box-shadow:0 4px 13px -10px #17132855; }
.sample-avatar { width:31px; height:31px; border-radius:50%; background:#a79bdb; position:relative; overflow:hidden; }
.sample-avatar:after { content:''; position:absolute; width:28px; height:34px; background:#d7cff4; top:9px; left:13px; border-radius:50%; transform:rotate(32deg); }
.sample-reply { background:#635ce6; color:white; left:auto; right:23px; top:109px; padding:14px 16px; border-radius:14px 14px 3px 14px; gap:15px; transform:rotate(-3deg); }
.sample-reply>span { padding:0; background:none; box-shadow:none; font-size:10px; color:#dcd7ff; }
.sample-reaction { position:absolute; top:151px; right:38px; border:3px solid var(--lavender); border-radius:18px; padding:3px 10px; background:var(--surface); font-size:17px; }
.sample-reaction b { font-size:11px; font-weight:500; margin-left:4px; }
.visual-people { background:color-mix(in srgb,#bbd1c6 17%,var(--bg)); }
.people-portrait { position:absolute; width:61px; height:69px; border:4px solid var(--bg); border-radius:21px; overflow:hidden; z-index:1; background:#b6acd8; }
.people-portrait i { display:block; position:absolute; width:53px; height:64px; top:17px; left:20px; background:#e5ddfa; border-radius:50%; transform:rotate(30deg); }
.portrait-one { left:49px; top:75px; transform:rotate(-13deg); }
.portrait-two { left:130px; top:66px; background:#77a9a4; transform:rotate(5deg); }
.portrait-two i { background:#b6ddd2; left:-17px; top:3px; }
.portrait-three { right:24px; top:90px; background:#c4a177; transform:rotate(15deg); }
.portrait-three i { background:#f1d7a6; top:28px; left:6px; }
.connection-line { position:absolute; top:93px; left:60px; right:38px; height:54px; border:1px dashed color-mix(in srgb,var(--brand) 40%,transparent); border-radius:50%; transform:rotate(7deg); }
.interest { position:absolute; z-index:2; font-size:10px; background:var(--surface); color:var(--muted); padding:7px 12px; border-radius:20px; border:1px solid color-mix(in srgb,var(--line) 65%,transparent); }
.interest-coffee { top:36px; left:30px; transform:rotate(-8deg); }
.interest-walk { bottom:26px; left:102px; transform:rotate(4deg); }
.interest-film { top:42px; right:34px; transform:rotate(9deg); }
.visual-event { background:color-mix(in srgb,#d7be9e 16%,var(--bg)); }
.sample-ticket { position:relative; display:flex; align-items:center; gap:13px; width:calc(100% - 40px); background:var(--surface); padding:22px 15px; border-radius:14px; transform:rotate(-5deg); box-shadow:0 9px 25px -20px #29203677; }
.ticket-date { display:flex; flex-direction:column; text-align:center; font-size:8px; color:var(--muted); border-right:1px dashed var(--line); padding-right:13px; }
.ticket-date b { font:700 26px/1.2 Manrope,sans-serif; color:var(--brand); }
.ticket-category { display:block; font-size:8px; color:var(--muted); margin-bottom:5px; }
.sample-ticket strong { display:block; font-size:11px; }
.ticket-location { display:flex; gap:4px; align-items:center; font-size:8px; color:var(--muted); margin-top:7px; }
.ticket-location .icon { width:10px; height:10px; }
.ticket-corner { position:absolute; top:12px; right:10px; color:var(--brand); }
.ticket-corner .icon { width:12px; height:12px; }
.ticket-confirmation { position:absolute; right:26px; bottom:36px; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:9px 14px; font-size:10px; transform:rotate(5deg); }
.ticket-confirmation>span { color:#6d997d; margin-right:7px; }
.home .manifesto { position:relative; margin-bottom:92px; border-radius:26px; background:var(--lavender); border:1px solid color-mix(in srgb,var(--brand) 12%,transparent); padding-block:45px; }
.home .manifesto h2 { font-size:31px; }
.home .manifesto p { font-size:14px; }
.home .news-section { padding-bottom:90px; }
.home .story-art { height:280px; border-radius:22px; }
.home .news-card h3 { margin-top:14px; font-size:25px; letter-spacing:-.035em; }
.home .news-card p { font-size:14px; }
.home .news-meta { font-size:11px; }
.home .download-teaser { border-radius:26px; padding-block:44px; }
.home .download-teaser h2 { font-size:27px; }
.home .download-teaser p { font-size:13px; }
@media(max-width:1100px) {
  .home .hero { gap:10px; min-height:690px; padding-top:38px; }
  .home .hero h1 { font-size:49px; }
  .home .hero-description { font-size:16px; }
  .home .hero-art { transform:scale(.9); }
  .home .hero-buttons { gap:15px; }
  .home .hero-buttons .button { font-size:13px; padding-inline:21px; }
  .home .features-grid { gap:22px; }
  .home .features-grid h3 { font-size:23px; }
  .home .features-grid p { min-height:130px; }
  .sample-message { font-size:10px; gap:6px; left:12px; }
  .sample-message>span { padding:12px; }
  .sample-reply { left:auto; right:16px; }
  .sample-reply>span { padding:0; }
  .portrait-one { left:17px; }
  .portrait-two { left:calc(50% - 30px); }
  .portrait-three { right:15px; }
  .sample-ticket { width:calc(100% - 22px); gap:8px; padding-inline:10px; }
  .ticket-date { padding-right:8px; }
  .sample-ticket strong { font-size:10px; }
  .home .manifesto h2 { font-size:27px; }
}
@media(max-width:850px) and (min-width:701px) {
  .home .hero h1 { font-size:42px; }
  .home .hero-art { transform:scale(.77); margin-inline:-24px; }
  .home .hero-buttons { align-items:flex-start; gap:7px; }
  .home .feature-visual { height:180px; }
  .home .features-grid { gap:17px; }
  .home .features-grid h3 { font-size:20px; }
  .home .features-grid p { font-size:13px; min-height:145px; }
  .sample-avatar { display:none; }
  .sample-message { left:10px; top:42px; }
  .sample-reply { left:auto; right:10px; top:95px; }
  .sample-reaction { top:135px; right:22px; }
  .people-portrait { width:48px; height:58px; border-radius:18px; }
  .portrait-two { left:calc(50% - 24px); }
  .interest { font-size:8px; padding:6px 8px; }
  .interest-coffee { left:12px; top:32px; }
  .interest-film { right:15px; top:27px; }
  .interest-walk { bottom:15px; left:50px; }
  .ticket-date { display:none; }
  .ticket-confirmation { right:15px; bottom:24px; }
  .home .manifesto h2 { font-size:25px; }
}
@media(max-width:700px) {
  .home .hero { display:flex; gap:0; padding-top:38px; padding-bottom:30px; min-height:0; }
  .home .hero h1 { font-size:clamp(37px,7.8vw,54px); margin-top:24px; line-height:1.16; }
  .home .hero h1>span:after { bottom:-6px; }
  .home .hero-description { font-size:16px; margin-top:28px; }
  .home .hero-buttons { flex-direction:row; align-items:center; gap:18px; margin-top:28px; }
  .home .hero-buttons .button { min-height:54px; font-size:13px; padding-inline:20px; }
  .home .browser-note { font-size:11px; margin-top:18px; }
  .home .hero-art { transform:none; margin-top:38px; height:591px; max-width:440px; overflow:clip; }
  .home .art-caption { bottom:0; }
  .home .art-orbit { width:300px; height:340px; max-width:85%; }
  .home .art-orbit:after { inset:-14px; }
  .home .device { width:283px; height:543px; transform:rotate(2deg); }
  .home .floating-note { top:23px; left:0; padding:12px 14px; font-size:10px; }
  .home .floating-brand { bottom:60px; left:0; }
  .home .floating-brand img { width:67px; height:67px; border-radius:21px; }
  .home .floating-brand>span { font-size:11px; padding:10px 12px; }
  .home .art-star { right:0; top:72px; font-size:60px; }
  .home .features { padding-top:22px; padding-bottom:54px; }
  .home .section-heading h2 { font-size:31px; }
  .home .section-heading>p { font-size:14px; }
  .home .features-grid { grid-template-columns:1fr; gap:34px; }
  .home .feature-visual { height:220px; }
  .home .feature-top { margin-top:20px; margin-bottom:13px; }
  .home .feature-top .icon { position:static; width:21px; height:21px; }
  .home .features-grid h3 { font-size:25px; }
  .home .features-grid p { font-size:14px; min-height:0; max-width:100%; }
  .home .feature-detail { margin-top:19px; padding-top:15px; }
  .sample-message { font-size:12px; left:24px; top:55px; gap:10px; }
  .sample-reply { left:auto; right:24px; top:113px; }
  .sample-message>span { padding:14px; }
  .sample-reply>span { padding:0; }
  .sample-reaction { top:155px; }
  .portrait-one { left:calc(50% - 109px); }
  .portrait-two { left:calc(50% - 25px); }
  .portrait-three { right:calc(50% - 124px); }
  .interest-coffee { left:calc(50% - 117px); }
  .interest-walk { left:calc(50% - 28px); }
  .interest-film { right:calc(50% - 109px); }
  .sample-ticket { width:calc(100% - 48px); max-width:330px; gap:13px; padding:23px 15px; }
  .sample-ticket strong { font-size:12px; }
  .ticket-date { padding-right:13px; }
  .ticket-confirmation { right:25px; bottom:34px; }
  .home .manifesto { margin-bottom:64px; padding-block:28px; }
  .home .manifesto h2 { font-size:26px; }
  .home .manifesto p { font-size:14px; }
  .home .round-link { position:absolute; right:25px; top:36px; margin:0; }
  .home .manifesto-mark { height:95px; }
  .home .manifesto-mark>img { width:108px; height:108px; }
  .home .story-art { height:252px; }
  .home .news-section { padding-bottom:56px; }
  .home .news-card h3 { font-size:24px; }
  .home .download-teaser { padding:28px 24px; }
  .home .download-teaser h2 { font-size:25px; }
}
@media(max-width:370px) {
  .home .hero h1 { font-size:35px; }
  .home .hero-description { font-size:15px; }
  .home .hero-buttons { gap:13px; }
  .home .hero-buttons .button { padding-inline:15px; font-size:12px; gap:10px; }
  .home .hero-art { height:550px; }
  .home .device { width:268px; height:530px; transform:rotate(2deg) scale(.95); }
  .home .demo-chat { gap:10px; }
  .home .floating-brand { bottom:46px; }
  .home .floating-brand img { width:58px; height:58px; border-radius:18px; }
  .home .floating-note { top:12px; }
  .home .floating-brand>span { font-size:10px; padding:8px; }
  .home .section-heading h2 { font-size:28px; }
  .sample-message { left:15px; font-size:11px; }
  .sample-reply { left:auto; right:15px; }
  .sample-ticket { width:calc(100% - 26px); gap:10px; }
  .sample-ticket strong { font-size:11px; }
}

/* Product-led motion: local demo scenes, restrained depth and tactile controls. */
.home .hero { position:relative; isolation:isolate; }
.home .hero:before { content:''; position:absolute; inset:10% 0 5% 28%; pointer-events:none; z-index:-1; background:radial-gradient(ellipse at 72% 45%,color-mix(in srgb,var(--brand) 10%,transparent),transparent 65%); }
.hero-stage { min-width:0; position:relative; width:100%; }
.home .hero-stage .hero-art { height:580px; }
.demo-controls { display:flex; justify-content:center; align-items:center; gap:10px; margin:18px 0 0; }
.demo-scenarios { display:flex; padding:5px; border-radius:50px; border:1px solid var(--line); background:var(--surface); box-shadow:0 9px 22px -18px #26203c40; }
.demo-scenarios button { display:flex; align-items:center; justify-content:center; gap:6px; padding:0 13px; min-height:38px; border:0; border-radius:30px; background:transparent; font-size:11px; color:var(--muted); transition:background .22s,color .22s,box-shadow .22s; }
.demo-scenarios button:hover { color:var(--ink); background:var(--soft); }
.demo-scenarios button[aria-pressed=true] { background:var(--lavender); color:var(--brand); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 10%,transparent); }
.scene-dot { width:4px; height:4px; background:currentColor; border-radius:50%; opacity:0; transform:scale(0); transition:opacity .2s,transform .2s; }
.demo-scenarios button[aria-pressed=true] .scene-dot { opacity:1; transform:scale(1); }
.motion-toggle { display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--muted); transition:background .2s,color .2s,transform .2s; }
.motion-toggle:hover { background:var(--lavender); color:var(--brand); transform:scale(1.06); }
.motion-toggle .icon { width:16px; height:16px; }
.motion-toggle .play-icon { display:none; }
.motion-toggle[aria-pressed=true] .play-icon { display:block; }
.motion-toggle[aria-pressed=true] .pause-icon { display:none; }
.demo-caption { display:block; text-align:center; font-size:9px; line-height:1.8; color:var(--muted); margin-top:13px; }
.home .button { position:relative; overflow:hidden; background:linear-gradient(145deg,#736cf4,#5b53df); box-shadow:inset 0 1px 0 #ffffff36,0 7px 15px -10px #322e9280; transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,filter .25s; }
.home .button:before { content:''; position:absolute; inset:0; background:linear-gradient(110deg,transparent 25%,#ffffff13 50%,transparent 75%); transform:translateX(-120%); transition:transform .7s; pointer-events:none; }
.home .button:hover { transform:translateY(-3px); filter:brightness(1.08); box-shadow:inset 0 1px 0 #ffffff45,0 13px 22px -12px #5c51dbb3; }
.home .button:hover:before { transform:translateX(120%); }
.home .button:active { transform:translateY(0) scale(.98); }
.home .button .icon { transition:transform .25s cubic-bezier(.16,1,.3,1); }
.home .button:hover .icon { transform:translate(2px,-2px); }
.home .desktop-nav a { position:relative; padding-block:10px; }
.home .desktop-nav a:after { content:''; position:absolute; left:0; right:0; bottom:1px; height:2px; border-radius:2px; background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.home .desktop-nav a:hover:after { transform:scaleX(1); }
.home .hero-copy { animation:copy-enter .9s cubic-bezier(.16,1,.3,1) both; }
.home .device { animation:device-enter 1.2s cubic-bezier(.16,1,.3,1) both; }
.home .floating-note { animation:note-drift 7s ease-in-out infinite; }
.home .floating-brand { animation:brand-drift 6s ease-in-out infinite; }
.home .art-star { animation:star-turn 18s linear infinite; }
.home .typing i { animation:typing-hop 1.5s ease-in-out infinite; }
.home .typing i:nth-child(2) { animation-delay:.16s; }
.home .typing i:nth-child(3) { animation-delay:.32s; }
.home .hero h1>span:after { transform-origin:left; animation:underline-enter 1.1s .35s cubic-bezier(.16,1,.3,1) both; }
.home[data-motion=paused] *, .home[data-motion=paused] *:after { animation-play-state:paused!important; }
.home.intro-complete .device,.home.intro-complete .hero-copy,.home.intro-complete .hero h1>span:after { animation:none; }
.reveal-item { transition:opacity .75s var(--reveal-delay,0ms),transform .75s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms); }
.reveal-pending { opacity:0; transform:translateY(28px); }
.home .feature-visual { transition:background .3s; }
.feature-visual>span,.feature-visual>div { transition:transform .45s cubic-bezier(.16,1,.3,1); }
@media(hover:hover) and (pointer:fine) {
  .home .features-grid article:hover .sample-reply { transform:translate(-4px,-5px) rotate(-5deg); }
  .home .features-grid article:hover .sample-reaction { transform:translateY(-3px) rotate(7deg); }
  .home .features-grid article:hover .portrait-one { transform:translate(-3px,-5px) rotate(-17deg); }
  .home .features-grid article:hover .portrait-two { transform:translateY(-8px) rotate(0); }
  .home .features-grid article:hover .portrait-three { transform:translate(4px,-4px) rotate(18deg); }
  .home .features-grid article:hover .sample-ticket { transform:translateY(-5px) rotate(-3deg); }
  .home .features-grid article:hover .ticket-confirmation { transform:translateY(4px) rotate(7deg); }
  .home .news-card .story-art { transition:box-shadow .3s; }
  .home .news-card:hover .story-art { box-shadow:0 15px 35px -25px #40326770; }
  .home .mini-browser,.home .sticker-outline { transition:transform .4s cubic-bezier(.16,1,.3,1); }
  .home .news-card:hover .mini-browser { transform:translateY(-6px) rotate(-2deg); }
  .home .news-card:hover .sticker-outline.one { transform:translateY(3px) rotate(-23deg); }
  .home .news-card:hover .sticker-outline.two { transform:translateY(-27px) rotate(3deg); }
}
.home .download-teaser { background:#6058df; color:#fff; border:1px solid #8c83f0; position:relative; isolation:isolate; overflow:hidden; padding-block:52px; }
.home .download-teaser:after { content:''; position:absolute; right:-75px; bottom:-145px; width:380px; height:380px; border:1px solid #ffffff18; border-radius:50%; z-index:-1; box-shadow:0 0 0 55px #ffffff05,0 0 0 110px #ffffff04; }
.home .download-teaser .eyebrow { color:#e0dcff; }
.home .download-teaser p { color:#e0dcff; }
.home .download-mark>img { background:#ffffff12; border:1px solid #ffffff25; border-radius:24px; }
.home .download-teaser .button { background:#fff; color:#5048c5; box-shadow:0 7px 15px -10px #21195a90; }
.home .download-teaser .text-link { color:#f1efff; }
@keyframes copy-enter { from {opacity:0; transform:translateY(18px)} to {opacity:1; transform:translateY(0)} }
@keyframes device-enter { from {opacity:0; transform:translateY(32px) rotate(7deg) scale(.97)} to {opacity:1; transform:translateY(0) rotate(3deg) scale(1)} }
@keyframes note-drift { 0%,100% {transform:translateY(0) rotate(-5deg)} 50% {transform:translateY(-7px) rotate(-3deg)} }
@keyframes brand-drift { 0%,100% {transform:translateY(0) rotate(-8deg)} 50% {transform:translateY(6px) rotate(-5deg)} }
@keyframes star-turn { from {transform:rotate(12deg)} to {transform:rotate(192deg)} }
@keyframes typing-hop { 0%,55%,100% {transform:translateY(0); opacity:.45} 25% {transform:translateY(-3px); opacity:1} }
@keyframes underline-enter { from {opacity:0; transform:rotate(-2deg) scaleX(0)} to {opacity:.5; transform:rotate(-2deg) scaleX(1)} }
@media(max-width:1100px) and (min-width:701px) {
  .home .hero-stage .hero-art { height:550px; transform:scale(.9); transform-origin:center; }
  .demo-controls { margin-top:-4px; }
  .demo-caption { font-size:8px; }
}
@media(max-width:850px) and (min-width:701px) {
  .home .hero-stage .hero-art { transform:scale(.77); height:535px; }
  .demo-controls { margin-top:-35px; gap:6px; }
  .demo-scenarios { padding:4px; }
  .demo-scenarios button { font-size:10px; padding-inline:10px; min-height:35px; gap:4px; }
  .motion-toggle { width:38px; height:38px; }
}
@media(max-width:700px) {
  .home .hero:before { inset:35% 0 0; }
  .home .hero-stage .hero-art { height:590px; transform:none; }
  .demo-controls { gap:9px; margin-top:2px; }
  .demo-scenarios button { min-height:40px; padding-inline:12px; }
  .demo-caption { font-size:8px; margin-top:11px; }
  .home .download-teaser { padding-block:32px; }
  .home .hero-buttons .text-link { flex-shrink:0; }
  .home .hero-buttons .button { gap:13px; }
}
@media(max-width:370px) {
  .home .hero-stage .hero-art { height:550px; }
  .demo-scenarios { padding:4px; }
  .demo-scenarios button { font-size:10px; padding-inline:9px; gap:4px; }
  .motion-toggle { width:38px; height:38px; flex-shrink:0; }
  .home .hero-buttons { gap:12px; }
  .home .hero-buttons .button { padding-inline:13px; gap:8px; }
  .home .hero-buttons .text-link { font-size:9px; gap:4px; }
  .home .demo-chat { gap:8px; }
  .home .chat-bubble { font-size:11px; }
  .home .device { animation:none; }
}
@media(prefers-reduced-motion:reduce) {
  .home *, .home *:after, .home *:before { animation:none!important; transition:none!important; }
  .reveal-pending { opacity:1; transform:none; }
  .home .button:hover,.motion-toggle:hover { transform:none; }
}

/* A lightweight CSS device frame inspired by iPhone 18 Pro, not an Apple asset. */
.home .hero-stage .hero-art { height:650px; }
.home .device { width:292px; height:610px; flex-shrink:0; padding:5px; border:1px solid #94959b; border-radius:45px; overflow:visible; background:linear-gradient(105deg,#a4a5ac 0%,#eeeff3 8%,#bec0c7 20%,#f8f9fb 49%,#a8aab2 78%,#f4f5f8 94%,#92949c 100%); box-shadow:0 1px 0 1px #fafbff99,inset 0 0 0 1px #fff9,0 28px 45px -20px #12101b55,9px 13px 18px -16px #17132299; }
.device-screen { width:100%; height:100%; overflow:hidden; position:relative; border:4px solid #101014; border-radius:39px; background:var(--demo-bg); color:var(--demo-ink); }
.home .device-top { height:41px; padding:0 19px; background:var(--demo-surface); position:relative; }
.home .device-top>b { font-size:10px; font-weight:650; padding-left:3px; }
.dynamic-island { display:block; position:absolute; left:50%; top:9px; transform:translateX(-50%); width:65px; height:19px; border-radius:15px; background:#08080b; box-shadow:inset 0 1px 1px #ffffff0d; }
.dynamic-island i { position:absolute; width:5px; height:5px; right:8px; top:7px; border-radius:50%; background:radial-gradient(circle at 65% 30%,#1d2542,#0e1019 60%); box-shadow:0 0 0 1px #15151d; }
.phone-status { display:flex; align-items:center; gap:4px; color:var(--demo-ink); }
.phone-status svg { width:10px; height:9px; }
.phone-battery { width:17px; height:8px; border-radius:2px; border:1px solid currentColor; padding:1px; position:relative; opacity:.9; }
.phone-battery:after { content:''; position:absolute; width:1.5px; height:3px; background:currentColor; right:-3px; top:1.5px; border-radius:0 1px 1px 0; opacity:.5; }
.phone-battery i { display:block; width:83%; height:100%; background:currentColor; border-radius:1px; }
.phone-side { position:absolute; width:3px; background:linear-gradient(90deg,#7b7d84,#e3e5eb 45%,#9698a0); box-shadow:0 0 0 .5px #7c7d8555; border-radius:2px; }
.phone-action { left:-3px; top:76px; height:17px; }
.phone-volume-up { left:-3px; top:116px; height:35px; }
.phone-volume-down { left:-3px; top:161px; height:35px; }
.phone-power { right:-3px; top:131px; height:49px; }
.phone-camera { right:-3px; top:359px; height:30px; width:2px; }
.phone-home-indicator { position:absolute; bottom:7px; left:50%; transform:translateX(-50%); width:88px; height:3px; background:var(--demo-ink); opacity:.8; border-radius:5px; }
.home .demo-chat-header { height:66px; }
.home .demo-chat { padding-top:18px; gap:15px; }
.home .demo-input { bottom:23px; left:8px; right:8px; }
.home .floating-note { top:0; left:-14px; }
.home .floating-brand { bottom:77px; }
.home .art-star { top:65px; }
@media(max-width:1100px) and (min-width:701px) {
  .home .hero-stage .hero-art { height:605px; transform:scale(.9); }
  .demo-controls { margin-top:0; }
}
@media(max-width:850px) and (min-width:701px) {
  .home .hero-stage .hero-art { height:575px; transform:scale(.77); }
  .home .hero-stage .art-orbit { width:340px; height:370px; }
  .demo-controls { margin-top:-31px; }
}
@media(max-width:700px) {
  .home .hero-stage .hero-art { height:650px; transform:none; }
  .home .device { width:284px; height:592px; border-radius:44px; }
  .home .device-screen { border-radius:38px; }
  .home .demo-chat { gap:13px; }
  .home .floating-note { top:7px; left:0; }
  .home .floating-brand { bottom:65px; }
  .home .art-star { top:80px; }
}
@media(max-width:370px) {
  .home .hero-stage .hero-art { height:605px; }
  .home .device { width:266px; height:555px; padding:4px; border-radius:40px; transform:rotate(2deg) scale(.97); }
  .home .device-screen { border-radius:35px; }
  .home .device-top { padding-inline:14px; }
  .home .dynamic-island { width:59px; height:18px; }
  .home .demo-chat { gap:10px; padding-top:14px; }
  .home .demo-chat-header { gap:6px; padding-inline:7px; }
  .home .demo-chat-header b { font-size:9px; }
  .home .floating-note { top:7px; }
  .home .floating-brand { bottom:54px; }
  .home .demo-input { gap:6px; }
  .home .demo-input>span:not(.demo-send) { font-size:8px; }
}

/* A closer look at everyday expression, between discovery and product news. */
.expression-section { padding-bottom:96px; }
.expression-surface { display:grid; grid-template-columns:1.05fr 1fr; min-height:450px; border:1px solid var(--line); border-radius:30px; background:var(--surface); overflow:hidden; }
.expression-copy { padding:48px 40px; align-self:center; }
.expression-copy h2 { margin-top:16px; font-size:35px; line-height:1.3; letter-spacing:-.05em; }
.expression-copy h2>span { color:var(--brand); }
.expression-copy>p { color:var(--muted); font-size:14px; line-height:1.85; margin-top:22px; max-width:380px; min-height:102px; }
.expression-choices { display:flex; flex-wrap:wrap; gap:7px; margin-top:22px; }
.expression-choices button { display:flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:0 13px; border:1px solid transparent; border-radius:12px; background:var(--soft); color:var(--muted); font-size:12px; transition:background .2s,color .2s,border-color .2s,transform .2s; }
.expression-choices button .icon { width:16px; height:16px; }
.expression-choices button:hover { color:var(--brand); transform:translateY(-2px); }
.expression-choices button[aria-pressed=true] { background:var(--lavender); border-color:color-mix(in srgb,var(--brand) 30%,transparent); color:var(--brand); }
.expression-note { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:10px; margin-top:18px; }
.expression-note .icon { width:13px; height:13px; }
.expression-preview { position:relative; min-width:0; display:grid; align-items:center; background:var(--lavender); isolation:isolate; }
.expression-preview:before { content:''; position:absolute; inset:20px; border:1px solid color-mix(in srgb,var(--brand) 10%,transparent); border-radius:50%; transform:rotate(-12deg); z-index:-1; }
.expression-panel { position:relative; height:400px; min-width:0; }
.expression-chat-note { position:absolute; top:44px; left:28px; padding:13px 17px; color:var(--muted); font-size:11px; border:1px solid var(--line); background:var(--surface); border-radius:15px 15px 15px 3px; transform:rotate(-4deg); }
.expression-sticker { display:grid; place-items:center; position:absolute; left:50%; top:94px; width:172px; height:177px; border-radius:44px; background:#7770ed; border:7px solid #fff; transform:translateX(-50%) rotate(9deg); box-shadow:0 16px 32px -22px #3f316577,0 2px 0 #dcd8ef; }
.expression-sticker img { width:151px; height:151px; }
.expression-pack-label { position:absolute; top:275px; left:50%; transform:translateX(-50%) rotate(-5deg); background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:10px 14px; font-size:10px; display:flex; align-items:center; gap:8px; white-space:nowrap; }
.expression-mini-message { position:absolute; bottom:32px; right:27px; padding:13px 16px; background:#635ce6; color:white; font-size:11px; border-radius:15px 15px 3px 15px; }
.expression-mini-message>span { margin-left:12px; color:#d8d2ff; font-size:9px; }
.voice-sample { position:absolute; left:50%; top:150px; transform:translateX(-50%) rotate(-4deg); display:flex; align-items:center; gap:15px; background:#635ce6; color:#fff; padding:23px 20px 18px; border-radius:24px 24px 5px 24px; width:285px; max-width:calc(100% - 40px); box-shadow:0 16px 28px -24px #3c2a8366; }
.voice-symbol { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; border:1px solid #ffffff35; background:#ffffff12; flex-shrink:0; }
.voice-symbol .icon { width:20px; height:20px; }
.voice-sample>div { flex:1; min-width:0; }
.voice-wave { display:block; width:100%; height:47px; }
.voice-wave line { transform-box:fill-box; transform-origin:center; }
.voice-meta { display:flex; justify-content:space-between; color:#e5e0ff; font-size:8px; margin-top:3px; }
.voice-answer { position:absolute; top:282px; left:30px; padding:15px; color:var(--ink); background:var(--surface); border-radius:15px 15px 15px 3px; font-size:11px; transform:rotate(3deg); }
.expression-demo-label { position:absolute; bottom:28px; width:100%; text-align:center; font-size:9px; color:var(--muted); }
.reaction-message { position:absolute; left:50%; top:120px; transform:translateX(-50%) rotate(-3deg); width:272px; max-width:calc(100% - 42px); padding:21px 23px 16px; background:var(--surface); border:1px solid var(--line); border-radius:20px 20px 20px 5px; }
.reaction-message>span { font-size:10px; color:var(--brand); display:block; margin-bottom:9px; }
.reaction-message>strong { font-size:14px; line-height:1.5; font-weight:500; }
.reaction-message>small { display:block; text-align:right; font-size:8px; color:var(--muted); margin-top:9px; }
.reaction-samples { display:flex; justify-content:center; gap:8px; position:absolute; top:237px; left:0; right:0; }
.reaction-samples>span { display:flex; align-items:center; gap:9px; font-size:25px; padding:9px 15px; background:var(--surface); border:1px solid var(--line); border-radius:20px; }
.reaction-samples>span:first-child { background:var(--surface); border-color:var(--brand); transform:rotate(-6deg); }
.reaction-samples>span:nth-child(2) { transform:translateY(9px) rotate(3deg); }
.reaction-samples>span:nth-child(3) { transform:rotate(8deg); }
.reaction-samples b { font-size:12px; font-weight:500; color:var(--brand); }
.reaction-caption { display:block; position:absolute; bottom:47px; width:100%; text-align:center; color:var(--muted); font-size:11px; }
.home .news-card>a { height:100%; display:flex; flex-direction:column; }
.home .news-card p { flex:1; }
.news-read { display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:12px; font-weight:600; color:var(--muted); margin-top:24px; padding-top:18px; border-top:1px solid var(--line); transition:color .2s; }
.news-read>span { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--line); border-radius:50%; transition:background .2s,border-color .2s,color .2s,transform .2s; }
.news-read .icon { width:16px; height:16px; }
.home .news-card>a:hover .news-read { color:var(--brand); }
.home .news-card>a:hover .news-read>span { background:var(--brand-bright); border-color:var(--brand-bright); color:#fff; transform:translateX(3px); }
.home .site-footer { padding-top:16px; }
.home .footer-top { padding-top:20px; padding-bottom:35px; }
.home .footer-top .brand { font-size:34px; gap:9px; }
.home .footer-top .brand img { width:48px; height:48px; }
.home .footer-top p { font-size:12px; }
.home .footer-top nav a,.home .footer-web { font-size:13px; }
.home .footer-bottom { font-size:11px; padding-top:24px; padding-bottom:10px; }
@media(max-width:1100px) {
  .expression-copy { padding:35px 28px; }
  .expression-copy h2 { font-size:31px; }
  .expression-choices { gap:6px; }
  .expression-choices button { font-size:11px; padding-inline:11px; }
}
@media(max-width:900px) {
  .expression-surface { grid-template-columns:1fr; }
  .expression-copy { padding:36px; }
  .expression-copy h2 { font-size:34px; }
  .expression-copy>p { min-height:0; max-width:560px; }
  .expression-preview { border-top:1px solid var(--line); }
  .expression-preview:before { inset:24px calc(50% - 175px); }
  .expression-panel { height:355px; width:100%; max-width:540px; margin:auto; }
  .expression-chat-note { top:27px; left:35px; }
  .expression-sticker { top:70px; }
  .expression-pack-label { top:249px; }
  .expression-mini-message { bottom:22px; right:35px; }
  .voice-sample { top:117px; }
  .voice-answer { top:242px; }
  .expression-demo-label { bottom:20px; }
  .reaction-message { top:78px; }
  .reaction-samples { top:201px; }
  .reaction-caption { bottom:39px; }
}
@media(max-width:700px) {
  .expression-section { padding-bottom:61px; }
  .expression-surface { border-radius:23px; }
  .expression-copy { padding:27px 24px; }
  .expression-copy h2 { font-size:29px; margin-top:13px; }
  .expression-copy>p { font-size:14px; margin-top:18px; }
  .expression-choices { margin-top:21px; }
  .expression-choices button { font-size:11px; gap:6px; padding-inline:11px; min-height:44px; }
  .expression-choices button .icon { width:15px; height:15px; }
  .expression-note { font-size:9px; margin-top:15px; }
  .expression-panel { height:345px; }
  .expression-chat-note { top:26px; left:20px; padding:11px 13px; font-size:10px; max-width:calc(100% - 40px); }
  .expression-sticker { top:79px; width:156px; height:160px; border-radius:39px; border-width:6px; }
  .expression-sticker img { width:139px; height:139px; }
  .expression-pack-label { top:240px; font-size:9px; }
  .expression-mini-message { right:20px; bottom:18px; font-size:10px; }
  .voice-sample { width:270px; padding:19px 15px 15px; gap:12px; }
  .voice-answer { left:20px; top:234px; font-size:10px; }
  .reaction-message { font-size:13px; top:80px; padding:20px; }
  .reaction-message>strong { font-size:13px; }
  .reaction-samples { gap:7px; top:194px; }
  .reaction-samples>span { padding:8px 13px; font-size:23px; gap:7px; }
  .reaction-caption { bottom:42px; font-size:10px; }
  .home .news-card h3 { font-size:23px; }
  .news-read { margin-top:19px; padding-top:13px; font-size:11px; }
  .home .footer-top .brand { font-size:28px; }
  .home .footer-top .brand img { width:39px; height:39px; }
  .home .footer-top p { font-size:11px; }
  .home .footer-top nav a,.home .footer-web { font-size:12px; }
  .home .footer-bottom { font-size:10px; }
}
@media(max-width:370px) {
  .expression-copy { padding:25px 20px; }
  .expression-copy h2 { font-size:27px; }
  .expression-choices { gap:7px; }
  .expression-panel { height:335px; }
  .expression-mini-message { right:13px; font-size:9px; padding-inline:12px; }
  .voice-symbol { width:32px; height:32px; }
  .voice-sample { gap:9px; max-width:calc(100% - 26px); }
  .voice-answer { left:13px; font-size:9px; padding:13px; }
  .reaction-message { max-width:calc(100% - 26px); padding-inline:15px; }
  .reaction-samples>span { font-size:21px; padding-inline:10px; }
}
@media(prefers-reduced-motion:reduce) {
  .expression-choices button:hover { transform:none; }
}

/* A visible scene timeline that follows the same playback position as the demo. */
.home .demo-scenarios { gap:3px; padding:5px; }
.home .demo-scenarios button { position:relative; overflow:hidden; gap:7px; min-height:44px; padding:0 13px; font-size:11px; }
.home .demo-scenarios button>.icon { width:15px; height:15px; opacity:.75; transition:opacity .2s,transform .25s; }
.home .demo-scenarios button[aria-pressed=true]>.icon { opacity:1; }
.home .demo-scenarios button:hover>.icon { transform:translateY(-1px); }
.scene-progress { position:absolute; left:12px; right:12px; bottom:5px; height:2px; background:var(--brand); opacity:0; border-radius:2px; transform:scaleX(0); transform-origin:left; }
.home .demo-scenarios button[aria-pressed=true] .scene-progress { opacity:.6; }
.home .motion-toggle { width:44px; height:44px; flex-shrink:0; }
.demo-disclaimer { display:block; color:var(--muted); font-size:8px; text-align:center; margin-top:5px; opacity:.85; }
.home .demo-caption { font-size:9px; }
.home .demo-scenarios:focus-within { border-color:color-mix(in srgb,var(--brand) 42%,var(--line)); }
@media(max-width:850px) and (min-width:701px) {
  .home .demo-controls { gap:7px; }
  .home .demo-scenarios { padding:4px; gap:0; }
  .home .demo-scenarios button { font-size:10px; padding-inline:9px; gap:5px; }
  .home .demo-scenarios button>.icon { width:13px; height:13px; }
  .home .demo-caption { font-size:8px; }
}
@media(max-width:700px) {
  .home .hero { padding-top:30px; }
  .home .hero h1 { font-size:clamp(32px,8.3vw,48px); }
  .home .hero-description { margin-top:22px; font-size:15px; }
  .home .hero-buttons { margin-top:24px; }
  .home .hero-art { margin-top:26px; }
  .home .demo-controls { gap:8px; }
  .home .demo-scenarios { flex:1; max-width:287px; }
  .home .demo-scenarios button { flex:1; padding-inline:10px; gap:6px; font-size:11px; }
  .home .demo-caption { font-size:8px; }
}
@media(max-width:370px) {
  .home .hero h1 { font-size:32px; }
  .home .demo-controls { gap:6px; }
  .home .demo-scenarios { padding:4px; gap:0; }
  .home .demo-scenarios button { padding-inline:7px; gap:4px; font-size:10px; }
  .home .demo-scenarios button>.icon { width:12px; height:12px; }
  .scene-progress { left:8px; right:8px; }
  .home .demo-caption { font-size:7.5px; }
  .demo-disclaimer { font-size:7px; }
}
@media(prefers-reduced-motion:reduce) {
  .scene-progress { display:none; }
  .home .demo-scenarios button:hover>.icon { transform:none; }
}

/* Device depth is applied to its own rig, keeping the controls stationary. */
.device-rig { position:relative; width:292px; height:610px; flex-shrink:0; transform:perspective(1100px) rotateX(var(--depth-x,0deg)) rotateY(var(--depth-y,0deg)); transform-style:preserve-3d; transition:transform .45s cubic-bezier(.16,1,.3,1); }
.home .device-screen:after { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(220px circle at var(--light-x,50%) var(--light-y,35%),#ffffff08,transparent 75%); }
.home .hero-copy { top:-18px; }
.home .features { padding-bottom:74px; }
.expression-section { padding-bottom:82px; }
.home .news-section { padding-bottom:80px; }
.home .download-teaser { margin-bottom:66px; }
[data-theme=dark] .home .web-art { background:#302d43; }
[data-theme=dark] .home .sticker-art { background:#373139; }
[data-theme=dark] .home .mini-browser { background:#25232f; border-color:#514b65; box-shadow:0 16px 34px -18px #100e2280; }
[data-theme=dark] .home .mini-browser>div { border-color:#413c50; }
[data-theme=dark] .home .mini-browser i { background:#645c76; }
[data-theme=dark] .home .mini-browser>div span { color:#aaa2ba; }
[data-theme=dark] .home .mini-browser strong { color:#b7a9f5; }
[data-theme=dark] .home .art-spark { color:#9f91d1; }
[data-theme=dark] .home .sticker-outline { border-color:#e0dbea; box-shadow:0 9px 20px #08061138; }
[data-theme=dark] .home .art-doodle { color:#b4a5b7; }
@media(hover:hover) and (pointer:fine) {
  .home .hero-art:hover .device-rig { will-change:transform; }
}
@media(max-width:700px) {
  .device-rig { width:284px; height:592px; }
  .home .hero-copy { top:0; }
  .home .features { padding-bottom:48px; }
  .expression-section { padding-bottom:56px; }
  .home .news-section { padding-bottom:52px; }
  .home .download-teaser { margin-bottom:48px; }
}
@media(max-width:370px) {
  .device-rig { width:266px; height:555px; }
}
@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse) {
  .device-rig { transform:none; transition:none; }
  .home .device-screen:after { display:none; }
}