@font-face { font-family:Inter; src:url('assets/inter-400.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Space Grotesk'; src:url('assets/space-grotesk-400.ttf') format('truetype'); font-weight:400; font-display:swap; }
:root { color-scheme:dark; --ink:#f3f4f6; --body:#bbc0c9; --muted:#969eab; --paper:#0b0c0f; --fog:#15171d; --line:#2a2f38; --ember:#ff682c; --peach:#1b1e25; --green:#193429; --green-ink:#a1d5b6; --focus:#ff976e; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:1.5rem; }
body { margin:0; background:var(--paper); color:var(--ink); font:1rem/1.6 Inter,Arial,sans-serif; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
[hidden] { display:none !important; }
a { color:inherit; text-underline-offset:5px; }
a,button,summary { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
button { font:inherit; cursor:pointer; }
button:disabled { cursor:default; }
h1,h2,h3,.brand { font-family:'Space Grotesk',Arial,sans-serif; font-weight:400; letter-spacing:-.035em; line-height:1.12; text-wrap:balance; }
h1 { font-size:clamp(2rem,4.4vw,3.75rem); margin:1.25rem 0 0; }
h2 { font-size:clamp(2rem,3.5vw,3.1rem); margin:0 0 1.5rem; }
h3 { font-size:1.4rem; margin:0 0 .75rem; }
p { margin:0 0 1rem; }
strong,b { font-weight:600; }
img { display:block; max-width:100%; }
.container { max-width:1240px; padding-inline:2rem; margin-inline:auto; }
.small { font-size:.8125rem; line-height:1.55; color:var(--muted); }
.skip { position:absolute; left:1rem; top:-100px; background:var(--fog); z-index:10; padding:.6rem; }
.skip:focus { top:.8rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.review-notice { text-align:center; background:#251b16; color:#ffc4a8; padding:.5rem 1rem; font-size:.6875rem; border-bottom:1px solid #503022; }
.site-header { border-bottom:1px solid var(--line); }
.header-inner { min-height:84px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 2rem; padding-block:1rem; }
.brand { display:inline-flex; align-items:center; gap:.5rem; font-size:2rem; text-decoration:none; letter-spacing:-.065em; flex-shrink:0; }
.site-header nav { display:flex; flex-wrap:wrap; align-items:center; gap:2rem; font-size:.875rem; }
.site-header nav a { min-height:44px; display:inline-flex; align-items:center; text-decoration:none; }
.site-header nav a:hover { text-decoration:underline; }
.nav-cta { padding:.5rem 1rem; border:1px solid var(--ember); background:var(--ember); color:#201107; border-radius:100px; }
.hero { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); align-items:center; gap:3.5rem; padding-block:4.5rem 4rem; }
.hero-content { min-width:0; }
.hero-heading { max-width:580px; }
.hero h1 { font-size:clamp(2.35rem,3.7vw,3.25rem); line-height:1.1; }
.hero h1 span { display:block; }
.intro-label { display:flex; align-items:center; gap:.5rem; font-size:.875rem; color:var(--body); }
.ember-dot { background:var(--ember); width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.hero-aside { max-width:520px; margin-top:1.5rem; }
.hero-copy { font-size:1.0625rem; line-height:1.65; color:var(--body); text-wrap:pretty; }
.hero-aside>p:not(.hero-copy) { color:var(--body); }
.hero-actions { display:flex; gap:1.5rem; flex-wrap:wrap; align-items:center; margin:1.5rem 0 1rem; }
.button { min-height:46px; display:inline-flex; justify-content:center; align-items:center; gap:.5rem; padding:.8rem 1.2rem; border:1px solid var(--ember); border-radius:100px; text-decoration:none; font-size:.875rem; line-height:1.4; }
.primary { background:var(--ember); color:#201107; }
.primary:hover:not(:disabled) { background:#ff8655; }
.text-link { font-size:.875rem; display:inline-flex; min-height:44px; gap:.5rem; align-items:center; text-decoration:none; }
.text-link:hover { text-decoration:underline; }
.text-link span { font-size:1.25rem; color:var(--focus); }
.demo-section { background:#101218; padding:4rem 0 3rem; border-block:1px solid var(--line); }
.demo-heading { display:grid; grid-template-columns:1.2fr 1fr; align-items:start; gap:4rem; padding-bottom:2rem; }
.demo-heading h2 { margin-bottom:0; max-width:20ch; }
.section-label { color:var(--body); font-size:.875rem; margin-bottom:1rem; }
.demo-intro { max-width:440px; }
.demo-intro>p:first-child { font-size:.9375rem; }
.disclosure { font-size:.8125rem; color:var(--body); margin-bottom:0; }
.playback-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-bottom:1rem; }
.playback-toolbar p { margin:0; font-size:.8125rem; color:var(--body); }
.playback-controls { display:flex; flex-wrap:wrap; gap:.5rem; }
.playback-controls button { border:1px solid #4b525f; border-radius:100px; background:var(--fog); min-height:44px; padding:.5rem .85rem; font-size:.8125rem; color:var(--ink); }
.playback-controls #demo-pause { background:var(--ember); border-color:var(--ember); color:#201107; min-width:125px; }
.playback-controls button:disabled,.playback-controls button[aria-disabled=true] { color:var(--muted); cursor:default; }
.story-progress { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.6rem; padding:0; margin:0 0 1.25rem; list-style:none; }
.story-progress li { border-top:3px solid #424854; padding-top:.65rem; font-size:.8125rem; color:var(--muted); }
.story-progress li span { margin-right:.45rem; }
.story-progress li[aria-current=step] { border-color:var(--ember); color:var(--ink); font-weight:600; }
.story-progress li[data-complete=true] { border-color:#698777; }
.demo-context { display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .8rem; margin-bottom:.75rem; color:var(--muted); font-size:.75rem; }
.demo-context strong { color:var(--ink); font-weight:400; }
.demo-stage { display:grid; background:#15171d; border:1px solid #333844; border-radius:18px; box-shadow:0 24px 60px #0003; }
.demo-scene { grid-area:1/1; display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:2.5rem; padding:2rem; align-items:center; min-width:0; }
.demo-scene[aria-hidden=true] { visibility:hidden; pointer-events:none; }
.demo-scene[aria-hidden=false] { visibility:visible; animation:scene-in .35s ease-out both; }
.scene-copy { min-width:0; }
.scene-number { font-size:.8125rem; color:var(--focus); margin-bottom:1rem; }
.scene-copy h3 { font-size:clamp(1.65rem,2.4vw,2.2rem); line-height:1.14; max-width:20ch; }
.scene-copy>p:not(.scene-number) { color:var(--body); font-size:.9375rem; max-width:38ch; }
.scene-bridge { display:block; font-size:.8125rem; color:var(--green-ink); border-top:1px solid var(--line); margin-top:1.5rem; padding-top:1rem; max-width:38ch; }
.scene-surface { min-width:0; align-self:stretch; background:#fff; border:1px solid #d6d9d3; border-radius:8px; }
.surface-header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem; padding:.85rem 1.1rem; border-bottom:1px solid #d6d9d3; background:#f9faf7; border-radius:8px 8px 0 0; }
.surface-brand { display:flex; align-items:center; gap:.5rem; font-family:'Space Grotesk',sans-serif; font-size:1.125rem; }
.channel-label { font-size:.75rem; padding:.2rem .5rem; background:var(--fog); color:var(--body); border-radius:4px; }
.surface-body { padding:1.25rem; }
.surface-title { font-family:'Space Grotesk',sans-serif; font-size:1.25rem; line-height:1.35; margin:.8rem 0 1rem; }
.chat-surface { background:#edf3e9; }
.chat-surface .channel-label { background:var(--green); color:var(--green-ink); }
.conversation { display:flex; flex-direction:column; gap:1rem; }
.message { padding:.85rem 1rem; font-size:.875rem; line-height:1.5; border-radius:7px; max-width:95%; }
.message p:last-child { margin-bottom:0; }
.message.owner { background:#d4ead5; align-self:flex-end; border-top-right-radius:0; }
.message.assistant { background:white; align-self:flex-start; border:1px solid #d9e2d5; border-top-left-radius:0; }
.scene-fields { margin:.5rem 0 0; }
.scene-fields>div { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.15rem .75rem; padding:.6rem 0; border-bottom:1px solid #e4e4e0; font-size:.875rem; }
.scene-fields dt { color:var(--body); }
.scene-fields dd { margin:0; }
.scene-fields .field-highlight { background:#fff0e7; padding:.65rem; margin-top:.4rem; border:none; }
.human-confirmation { font-size:.875rem; color:var(--green-ink); margin:1rem 0 .5rem; }
.scene-note { font-size:.75rem; color:var(--muted); line-height:1.5; margin:1rem 0 0; }
.conversation>.scene-note { margin:0; }
.status { display:inline-block; background:#fff0ce; color:#6c4812; font-size:.75rem; padding:.3rem .6rem; border-radius:4px; }
.status.success { color:var(--green-ink); background:var(--green); }
.scene-amount { font:2.5rem/1.2 'Space Grotesk',sans-serif; margin:0 0 1rem; }
.state-pair { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.state-pair span { background:var(--fog); font-size:.75rem; padding:.3rem .5rem; border-radius:4px; }
.replenishment-context { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin:1rem 0 0; }
.replenishment-context>div { padding:.85rem; background:var(--fog); border-radius:5px; }
.replenishment-context>div:last-child { background:var(--green); }
.replenishment-context span { display:block; font-size:.75rem; color:var(--body); }
.replenishment-context strong { display:block; font:1.75rem/1.4 'Space Grotesk',sans-serif; margin-top:.25rem; }
.recommendation-title { font:1.75rem/1.25 'Space Grotesk',sans-serif; margin:1.5rem 0 1rem; max-width:24ch; }
.recommendation-question { padding-top:1rem; margin:1.5rem 0 0; border-top:1px solid var(--line); color:var(--body); font-size:.875rem; }
.task-confirmation { background:var(--fog); padding:.7rem .8rem; border-radius:6px; font-size:.8125rem; }
.playback-footer { display:flex; flex-wrap:wrap; gap:.3rem 2rem; justify-content:space-between; padding-top:1rem; font-size:.75rem; color:var(--body); }
.playback-footer p { margin:0; }
.playback-footer>span { color:var(--muted); }
.demo-static { padding:2rem; background:white; border:1px solid var(--line); border-radius:10px; }
.demo-static li { padding-block:.4rem; }
@keyframes scene-in { from { opacity:0; } to { opacity:1; } }
.section { padding-block:5.5rem; }
.section-heading { display:grid; grid-template-columns:1.45fr 1fr; gap:4rem; align-items:end; margin-bottom:2.25rem; }
.section-heading h2 { margin:0; }
.section-heading>p { color:var(--body); margin:0; max-width:380px; }
.value-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3rem; }
.value { border-top:1px solid var(--line); padding-top:1.5rem; }
.value-mark { color:var(--focus); width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:var(--peach); border-radius:6px; font-size:1.5rem; margin-bottom:1.25rem; }
.value h3 { font-size:1.7rem; }
.value p { color:var(--body); }
.value-question { display:block; font-size:.875rem; margin-top:1.2rem; }
.scope-note { color:var(--muted); margin-top:2rem; font-size:.875rem; }
.channels-section { padding:4rem 0; background:#12151b; border-block:1px solid var(--line); }
.channels-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:5rem; }
.channels-lead { font-size:1.1rem; color:var(--body); max-width:450px; }
.channel-details article { position:relative; padding-left:6rem; margin-bottom:2rem; }
.channel-details h3 { font-size:1.25rem; }
.channel-details p { color:var(--body); font-size:.9375rem; }
.channel-details .channel-planned { font-size:.8125rem; color:var(--muted); }
.channel-index { position:absolute; left:0; top:.1rem; background:#41291e; color:#ffc6ad; font-size:.75rem; padding:.3rem .6rem; border-radius:4px; }
.whatsapp-label { background:var(--green); color:var(--green-ink); }
.audience-section { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:4rem; border-bottom:1px solid var(--line); }
.audience-section>div>p { color:var(--body); }
.audience-lead { font-size:1.125rem; }
.audience-situations { background:var(--peach); border-radius:10px; padding:2rem; }
.audience-situations ul { padding-left:1.1rem; margin:1.25rem 0; }
.audience-situations li { padding:0 0 1rem .25rem; }
.start-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:0; margin:2.5rem 0 0; list-style:none; gap:2rem; }
.start-steps li { display:flex; gap:1rem; }
.step-index { background:var(--peach); color:var(--focus); font-family:'Space Grotesk'; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; flex-shrink:0; font-size:1.2rem; }
.start-steps h3 { font-size:1.2rem; }
.start-steps p { margin:0; color:var(--body); font-size:.9375rem; }
.faq-section { display:grid; grid-template-columns:1fr 1.6fr; gap:4rem; padding-bottom:5.5rem; }
.faq-section h2 { font-size:2.1rem; }
.faq-list details { border-top:1px solid var(--line); }
.faq-list details:last-child { border-bottom:1px solid var(--line); }
.faq-list summary { padding:1.15rem 0; cursor:pointer; min-height:48px; font-size:1rem; }
.faq-list p { color:var(--body); font-size:.9375rem; padding-right:1rem; }
.contact-section { background:#15171d; padding:4rem 0; border-top:1px solid var(--line); }
.contact-grid { display:grid; grid-template-columns:1.25fr 1fr; gap:5rem; align-items:center; }
.contact-grid>div:first-child>p:last-child { color:var(--body); max-width:390px; }
.contact-card { padding:2rem; background:#f4f5f7; border-radius:16px; }
.contact-card h3 { font-size:1.5rem; }
.contact-card>p { color:var(--body); }
.contact-card .button { width:100%; margin-top:.5rem; }
.contact-card .button:disabled { background:#d7dce2; color:#424954; border-color:#bbc1c9; }
#contact-status { margin-top:.85rem; margin-bottom:0; color:var(--muted); }
.site-footer { padding-block:2.5rem; display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.site-footer p { font-size:.8125rem; color:var(--muted); margin:0; }
.site-footer>div { display:flex; flex-direction:column; font-size:.75rem; }
.site-footer>div a { display:inline-flex; align-items:center; min-height:44px; }
.scene-surface,.hero-workspace,.hero-phone,.demo-static,.contact-card {
  color-scheme:light; --ink:#20242a; --body:#4d5865; --muted:#616c78; --line:#dce1e6;
  --fog:#f0f3f6; --green:#e5f5e9; --green-ink:#286345; --focus:#a54018; color:var(--ink);
}
.hero-product { min-width:0; margin:0; padding-top:.5rem; }
.hero-product figcaption { font-size:.8125rem; color:var(--ink); margin:0 0 1rem; }
.hero-product figcaption span { display:block; font-size:.6875rem; color:var(--muted); margin-top:.25rem; }
.hero-workspace { background:#fafbfc; border:1px solid #ced5de; border-radius:15px; margin-left:1.5rem; box-shadow:0 8px 70px #ff682c16,0 18px 48px #0006; }
.workspace-chrome { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.8rem 1rem; background:#edf0f4; border-bottom:1px solid #dce1e6; border-radius:14px 14px 0 0; font-size:.75rem; color:var(--body); }
.workspace-chrome .surface-brand { font-size:.9375rem; color:var(--ink); }
.workspace-content { padding:1.25rem 1.25rem 2.5rem; }
.workspace-title { display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap; font-size:.8125rem; }
.workspace-title .status { font-size:.6875rem; }
.workspace-advice { margin:1.1rem 0; font-family:'Space Grotesk',sans-serif; font-size:1.4rem; line-height:1.3; color:var(--ink); }
.workspace-evidence { padding:.8rem; border-left:2px solid var(--ember); background:#fff1e9; }
.workspace-evidence>span { font-size:.6875rem; color:#9b3b16; }
.workspace-evidence p { margin:.35rem 0 0; font-size:.8125rem; color:var(--body); }
.workspace-link { border-top:1px solid var(--line); margin-top:1rem; padding-top:.75rem; color:var(--body); font-size:.6875rem; }
.hero-phone { position:relative; width:min(310px,85%); margin:-1.25rem 0 0; background:#e9efe9; border:1px solid #4d7466; border-radius:16px; box-shadow:0 16px 40px #0006; }
.phone-header { display:flex; gap:.6rem; align-items:center; padding:.7rem 1rem; color:#fff; background:#215847; border-radius:15px 15px 0 0; }
.phone-avatar { width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:50%; }
.phone-header strong { font-size:.875rem; font-weight:400; }
.phone-header div>span { display:block; font-size:.6875rem; color:#d0e2da; }
.phone-chat { display:grid; gap:.55rem; padding:.75rem; font-size:.75rem; line-height:1.5; }
.phone-message { padding:.65rem .8rem; border-radius:9px; max-width:94%; }
.phone-message.sent { background:#d4edd2; justify-self:end; }
.phone-message.received { background:white; justify-self:start; }
.phone-message.received span { display:block; font-size:.6875rem; color:var(--body); margin-top:.4rem; }
@media (max-width:1000px) {
  .hero { gap:2rem; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .hero h1 { font-size:clamp(2.2rem,3.7vw,3.25rem); }
  .workspace-content { padding:1rem 1rem 2rem; }
  .demo-heading,.section-heading,.channels-grid,.contact-grid,.audience-section { gap:2.5rem; }
  .demo-scene { gap:1.5rem; padding:1.5rem; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); }
  .surface-body { padding:1rem; }
}
@media (max-width:760px) {
  .container { padding-inline:1.25rem; }
  .header-inner { min-height:85px; gap:1rem; }
  .site-header nav { gap:.8rem; }
  .site-header nav>a:nth-child(2) { display:none; }
  .nav-cta { padding:.5rem .65rem; font-size:.8125rem; }
  .hero { grid-template-columns:1fr; padding-block:2.5rem 3rem; gap:2.25rem; }
  .hero h1 { font-size:clamp(2.15rem,6.5vw,3.25rem); max-width:20ch; }
  .hero-heading,.hero-aside { max-width:580px; }
  .hero-product { width:100%; max-width:570px; justify-self:center; }
  .hero-workspace { margin-left:1rem; }
  .hero-phone { width:min(310px,90%); }
  .hero-aside { margin-top:1.5rem; }
  .hero-copy { font-size:1.0625rem; }
  .hero-actions { gap:.5rem; }
  .hero-actions .text-link { font-size:.8125rem; }
  .demo-heading { grid-template-columns:1fr; gap:1.2rem; }
  .demo-intro { max-width:600px; }
  .demo-section { padding-block:2rem; }
  .playback-toolbar { flex-wrap:wrap; gap:.75rem; }
  .story-progress { gap:.35rem; }
  .story-progress li { font-size:.6875rem; }
  .story-progress li span { display:block; margin:0; }
  .demo-scene { grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr; gap:1.1rem; padding:1.25rem; align-items:start; }
  .scene-copy h3 { font-size:1.625rem; max-width:28ch; margin-bottom:.6rem; }
  .scene-number { margin-bottom:.5rem; }
  .scene-copy>p:not(.scene-number) { margin:0; max-width:50ch; font-size:.875rem; }
  .scene-bridge { display:none; }
  .scene-surface { align-self:stretch; }
  .replenishment-context strong { font-size:1.5rem; }
  .section { padding-block:3.5rem; }
  .section-heading { grid-template-columns:1fr; gap:1.2rem; }
  .section-heading>p { max-width:600px; }
  .value-grid { gap:1.5rem; grid-template-columns:1fr; }
  .value { display:block; }
  .value-mark { grid-row:span 3; margin:0; }
  .value h3 { font-size:1.5rem; }
  .value p { margin-bottom:.75rem; }
  .value-question { margin-top:.6rem; grid-column:2; }
  .channels-grid,.contact-grid,.audience-section { grid-template-columns:1fr; gap:2rem; }
  .channels-section,.contact-section { padding-block:3rem; }
  .audience-situations { padding:1.5rem; }
  .start-steps { grid-template-columns:1fr; gap:1.25rem; margin-top:1.5rem; }
  .faq-section { grid-template-columns:1fr; gap:1rem; padding-bottom:3.5rem; }
  .contact-card { padding:1.5rem; }
  .site-footer { align-items:flex-start; flex-wrap:wrap; gap:1.25rem; }
}
@media (max-width:390px) {
  .container { padding-inline:1rem; }
  .brand { font-size:1.65rem; gap:.35rem; }
  .brand img { width:26px; }
  .site-header nav { gap:.4rem; }
  .site-header nav>a:first-child { display:none; }
  .nav-cta { max-width:148px; }
  .demo-scene { padding:1rem; }
  .surface-header { padding:.7rem; }
  .surface-body { padding:.8rem; }
  .message { max-width:100%; padding:.7rem; }
  .replenishment-context { gap:.5rem; }
  .replenishment-context>div { padding:.6rem; }
  .replenishment-context strong { font-size:1.3rem; }
  .channel-details article { padding-left:0; }
  .channel-index { position:static; display:inline-block; margin-bottom:.65rem; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .demo-scene { animation:none !important; } }
@media print { .demo-player { display:none !important; } #demo-static { display:block !important; } nav { display:none; } .container { padding-inline:0; } .hero,.section { padding-block:1.5rem; } }