:root {
  --ink: #11110f;
  --paper: #f5f2eb;
  --white: #fffefb;
  --muted: #6d6b63;
  --line: rgba(17,17,15,.12);
  --accent: #df5b38;
  --accent-2: #f6b96c;
  --accent-ink: #2a0d05;
  --soft: #f3d9cf;
  --shadow: 0 24px 70px rgba(22, 19, 14, .14);
  --radius: 26px;
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--font); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
.shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.eyebrow { margin: 0 0 12px; font-size: 12px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: 999px; background: var(--ink); color: white; font-weight: 800; cursor: pointer; transition: transform .2s, opacity .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.14); }
.button:active { transform: translateY(0); }
.button.secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.button.light { background: white; color: #111; }
.button.accent { background: var(--accent); color: var(--accent-ink); }
.button.block { width: 100%; }

/* showroom */
.showroom { overflow: hidden; min-height: 100vh; background: #10100e; color: #f8f5ee; }
.showroom .shell { position: relative; }
.show-nav { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.show-brand { display: flex; align-items: center; gap: 11px; font-weight: 850; letter-spacing: -.02em; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; font-family: Georgia, serif; font-style: italic; }
.show-tag { padding: 8px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: #c8c3b8; font-size: 12px; }
.show-hero { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 50px; align-items: center; min-height: 590px; padding: 72px 0 90px; }
.show-hero h1 { max-width: 780px; margin: 0; font: 500 clamp(54px, 7.5vw, 108px)/.9 Georgia, serif; letter-spacing: -.065em; }
.show-hero h1 em { color: #ff7a55; font-weight: 400; }
.show-hero p { max-width: 600px; margin: 30px 0 0; color: #c8c3b8; font-size: clamp(17px, 2vw, 21px); line-height: 1.55; }
.hero-orbit { position: relative; min-height: 410px; }
.orbit { position: absolute; inset: 10px 0 0; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; transform: rotate(-12deg); }
.orbit:nth-child(2) { inset: 70px 40px 0 -20px; transform: rotate(19deg); }
.orbit-word { position: absolute; display: grid; place-items: center; width: 130px; aspect-ratio: 1; border-radius: 50%; background: #ff7a55; color: #25100a; font-weight: 900; text-align: center; transform: rotate(8deg); }
.orbit-word.w1 { top: 16px; right: 12%; }
.orbit-word.w2 { bottom: 8%; left: 5%; background: #ece7db; }
.orbit-word.w3 { right: 5%; bottom: 2%; background: #bdded0; }
.scroll-cue { display: flex; gap: 10px; align-items: center; margin-top: 34px; color: #9f9b92; font-size: 13px; }
.scroll-cue span { display: grid; place-items:center; width: 34px; height:34px; border:1px solid rgba(255,255,255,.18); border-radius:50%; }
.show-intro { display: grid; grid-template-columns: .6fr 1.4fr; gap: 60px; padding: 100px 0 36px; border-top: 1px solid rgba(255,255,255,.11); }
.show-intro h2 { margin: 0; font: 500 clamp(34px, 5vw, 66px)/1 Georgia, serif; letter-spacing: -.045em; }
.show-intro p { margin: 0; max-width: 680px; color: #aaa69d; line-height: 1.7; }
.demo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; padding: 42px 0 120px; }
.demo-card { position:relative; min-height:520px; padding:30px; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:34px; background:#24231f; color:white; cursor:pointer; isolation:isolate; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.demo-card:hover { transform:translateY(-8px); box-shadow:0 28px 70px rgba(0,0,0,.32); }
.card-photo { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.8,.2,1), filter .45s; }
.demo-card:hover .card-photo { transform:scale(1.06); filter:saturate(1.1); }
.card-shade { position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(0,0,0,.05) 10%,rgba(0,0,0,.2) 45%,rgba(0,0,0,.9) 100%); }
.demo-card .num { display:inline-flex; padding:7px 10px; border:1px solid rgba(255,255,255,.42); border-radius:999px; background:rgba(12,12,10,.24); font-size:11px; font-weight:850; letter-spacing:.08em; backdrop-filter:blur(12px); }
.card-copy { position:absolute; z-index:2; right:30px; bottom:30px; left:30px; }
.demo-card h3 { max-width:470px; margin:0 0 12px; font:500 clamp(38px,5vw,64px)/.93 Georgia,serif; letter-spacing:-.055em; text-wrap:balance; }
.demo-card p { max-width:460px; margin:0; color:rgba(255,255,255,.76); line-height:1.5; }
.demo-card .arrow { position:absolute; right:26px; top:26px; display:grid; place-items:center; width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,.86); color:#111; font-size:22px; transition:transform .25s; }
.demo-card:hover .arrow { transform:rotate(45deg); }
.card-cta { display:inline-flex; align-items:center; gap:10px; margin-top:20px; padding-bottom:3px; border-bottom:1px solid rgba(255,255,255,.5); font-size:12px; font-weight:850; letter-spacing:.05em; text-transform:uppercase; }
.card-cta b { transition:transform .25s; }
.demo-card:hover .card-cta b { transform:translateX(5px); }
.show-footer { padding: 34px 0 44px; border-top:1px solid rgba(255,255,255,.11); color:#858178; font-size:13px; }

/* demo shell */
.demo-page { --accent:#df5b38; --accent-2:#ffcbbf; --accent-ink:#250d06; --paper:#f7f3ed; --ink:#171512; --soft:#efe6dc; min-height:100vh; background:var(--paper); color:var(--ink); }
.top-demo-note { position:relative; z-index:30; display:flex; align-items:center; justify-content:center; gap:8px; min-height:34px; padding:7px 16px; background:#111; color:#eee; font-size:11px; text-align:center; }
.top-demo-note strong { color:#fff; }
.demo-nav { position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--paper) 88%, transparent); border-bottom:1px solid var(--line); backdrop-filter: blur(18px); }
.demo-nav-in { display:flex; align-items:center; justify-content:space-between; height:72px; }
.demo-logo { display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:-.035em; }
.demo-logo i { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font:italic 700 19px Georgia,serif; }
.nav-actions { display:flex; gap:8px; }
.icon-button { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--line); border-radius:50%; background:transparent; cursor:pointer; }
.desktop-link { display:inline-flex; align-items:center; font-size:13px; font-weight:750; padding:0 10px; }
.demo-hero { display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center; min-height:660px; padding:68px 0 80px; }
.demo-hero h1 { margin:0; font:500 clamp(56px, 7vw, 99px)/.9 Georgia,serif; letter-spacing:-.065em; }
.demo-hero h1 em { color:var(--accent); font-weight:400; }
.demo-hero .lead { max-width:570px; margin:28px 0 34px; color:var(--muted); font-size:19px; line-height:1.55; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; }
.trust-row { display:flex; flex-wrap:wrap; gap:22px; margin-top:34px; color:var(--muted); font-size:12px; font-weight:750; }
.trust-row span::before { content:'✓'; display:inline-grid; place-items:center; width:18px; height:18px; margin-right:6px; border-radius:50%; background:var(--soft); color:var(--accent); }
.hero-visual { position:relative; min-height:540px; overflow:hidden; border-radius:36px; background:var(--soft); box-shadow:0 24px 80px rgba(24,18,11,.16); }
.hero-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:hero-breathe 12s ease-in-out infinite alternate; }
.hero-photo-shade { position:absolute; inset:0; background:linear-gradient(135deg,rgba(0,0,0,.02),rgba(0,0,0,.22)); }
.live-badge { position:absolute; z-index:3; top:20px; left:20px; display:flex; align-items:center; gap:8px; padding:10px 13px; border:1px solid rgba(255,255,255,.55); border-radius:999px; background:rgba(255,255,255,.82); color:#171512; font-size:11px; font-weight:850; backdrop-filter:blur(12px); }
.live-badge i { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent); animation:pulse 2s infinite; }
.phone-card { position:absolute; z-index:2; right:24px; bottom:24px; width:min(300px,calc(100% - 48px)); min-height:360px; padding:22px; border:1px solid rgba(255,255,255,.55); border-radius:34px; background:rgba(255,255,255,.88); box-shadow:var(--shadow); transform:rotate(2deg); backdrop-filter:blur(16px); transition:transform .35s; }
.hero-visual:hover .phone-card { transform:rotate(0deg) translateY(-5px); }
.phone-card .mini-top { display:flex; justify-content:space-between; align-items:center; font-size:11px; font-weight:800; }
.phone-card .mini-ui { height:185px; margin:20px 0; overflow:hidden; border-radius:22px; background:color-mix(in srgb,var(--soft) 75%,white); }
.phone-card h4 { margin:0 0 7px; font-size:19px; }
.phone-card p { margin:0; color:#777; font-size:12px; line-height:1.5; }
.sector-svg { display:block; overflow:visible; }
.sector-svg .art-line, .sector-svg .art-accent { fill:none; stroke:currentColor; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.sector-svg .art-accent { stroke:var(--accent); animation:art-glow 2.8s ease-in-out infinite; }
.sector-svg .art-dot { fill:var(--accent); animation:art-dot 2.1s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }

/* visual storytelling inside every demo */
.visual-story { padding:12px 0 98px; }
.story-head { display:grid; grid-template-columns:1fr .8fr; gap:40px; align-items:end; margin-bottom:32px; }
.story-head h2 { max-width:720px; margin:0; font:500 clamp(40px,5vw,68px)/.97 Georgia,serif; letter-spacing:-.05em; }
.story-head>p { max-width:530px; margin:0; color:var(--muted); line-height:1.65; }
.story-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.story-card { min-width:0; margin:0; overflow:hidden; border:1px solid var(--line); border-radius:28px; background:rgba(255,255,255,.54); box-shadow:0 15px 45px rgba(24,18,11,.06); }
.story-art { position:relative; display:grid; place-items:center; height:270px; overflow:hidden; background:var(--soft); }
.story-photo, .story-photo img { width:100%; height:100%; }
.story-photo { position:relative; overflow:hidden; }
.story-photo img { display:block; object-fit:cover; transition:transform .75s cubic-bezier(.2,.8,.2,1); }
.story-photo::after { content:""; position:absolute; inset:40% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.68)); }
.story-photo span { position:absolute; z-index:2; right:18px; bottom:18px; left:18px; color:white; font:500 22px/1.05 Georgia,serif; }
.story-card:hover .story-photo img { transform:scale(1.07); }
.story-illustration { position:relative; display:grid; place-items:center; width:100%; height:100%; overflow:hidden; background:radial-gradient(circle at 50% 48%,color-mix(in srgb,var(--accent) 32%,transparent),transparent 39%),var(--soft); }
.story-illustration::before,.story-illustration::after { content:""; position:absolute; width:220px; height:220px; border:1px solid color-mix(in srgb,var(--accent) 38%,transparent); border-radius:50%; animation:story-orbit 9s linear infinite; }
.story-illustration::after { width:145px; height:145px; border-style:dashed; animation-direction:reverse; animation-duration:13s; }
.story-illustration .sector-svg { position:relative; z-index:2; width:64%; max-height:175px; color:var(--ink); animation:art-float 4.2s ease-in-out infinite; }
.orbit-label { position:absolute; z-index:3; right:16px; bottom:14px; left:16px; font-size:9px; font-weight:900; letter-spacing:.15em; text-align:center; }
.sector-ui { position:relative; width:100%; height:100%; padding:24px; overflow:hidden; color:var(--ink); background:linear-gradient(145deg,color-mix(in srgb,var(--soft) 72%,white),white); }
.ui-kicker { display:block; margin-bottom:18px; color:var(--muted); font-size:8px; font-weight:900; letter-spacing:.16em; }
.avatar-row { display:flex; align-items:center; gap:12px; padding:12px; border-radius:16px; background:white; box-shadow:0 8px 24px rgba(0,0,0,.07); }
.avatar-row>i { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--accent),#f8cdbf); }
.avatar-row strong,.avatar-row small { display:block; }
.avatar-row small { margin-top:4px; color:var(--muted); font-size:10px; }
.ui-meter,.progress { height:7px; margin-top:20px; overflow:hidden; border-radius:99px; background:rgba(0,0,0,.08); }
.ui-meter b,.progress b { display:block; height:100%; border-radius:inherit; background:var(--accent); animation:meter 3s ease-in-out infinite alternate; }
.swatches { display:flex; gap:8px; margin-top:22px; }
.swatches i { width:28px; height:28px; border:4px solid white; border-radius:50%; background:#402719; box-shadow:0 4px 12px rgba(0,0,0,.12); }
.swatches i:nth-child(2){background:#9b552c}.swatches i:nth-child(3){background:#d8996a}.swatches i:nth-child(4){background:#ead1b8}
.garage-ui { color:#f4f4f1; background:linear-gradient(145deg,#12171b,#232b2f); }
.car-status { display:flex; align-items:flex-end; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.12); }
.car-status span { max-width:90px; color:rgba(255,255,255,.55); font-size:8px; font-weight:900; letter-spacing:.12em; }
.car-status strong { color:var(--accent); font:600 48px/1 Georgia,serif; }
.car-status small { font:700 14px/1 Inter,sans-serif; }
.diagnostic { display:grid; grid-template-columns:auto 1fr auto; gap:9px; align-items:center; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:10px; }
.diagnostic i { width:8px; height:8px; border-radius:50%; background:#7bd88f; box-shadow:0 0 12px #7bd88f; }
.diagnostic i.warn { background:var(--accent); box-shadow:0 0 12px var(--accent); }
.diagnostic b { color:rgba(255,255,255,.6); font-size:9px; }
.scan-line { position:absolute; right:0; bottom:22px; left:0; height:2px; background:linear-gradient(90deg,transparent,var(--accent),transparent); animation:scan 3.2s ease-in-out infinite; }
.week { display:flex; gap:7px; margin:6px 0 22px; }
.week i { display:grid; place-items:center; width:30px; height:30px; border-radius:10px; background:white; font-size:9px; font-style:normal; font-weight:900; }
.week i.active { background:var(--accent); }
.class-name { display:block; font:500 28px/1 Georgia,serif; }
.fitness-ui>small { display:block; margin-top:7px; color:var(--muted); }
.breath-ring { position:absolute; right:-28px; bottom:-38px; width:150px; height:150px; border:1px solid var(--accent); border-radius:50%; animation:breath 4s ease-in-out infinite; }
.breath-ring i { position:absolute; inset:28px; border:1px dashed var(--accent); border-radius:50%; }
.food-ui { color:#fff4df; background:linear-gradient(145deg,#32150d,#7b2f19); }
.food-ui .ui-kicker { color:#eeb870; }
.food-ui>strong { display:block; max-width:190px; font:500 29px/.98 Georgia,serif; }
.food-ui p { max-width:210px; color:rgba(255,255,255,.62); font-size:11px; line-height:1.45; }
.food-price { display:flex; align-items:center; justify-content:space-between; margin-top:22px; }
.food-price span { font:600 28px Georgia,serif; }
.food-price button { width:38px; height:38px; border:0; border-radius:50%; background:var(--accent); font-size:22px; }
.steam { position:absolute; right:34px; top:30px; display:flex; gap:8px; }
.steam i { width:7px; height:42px; border-left:2px solid rgba(255,255,255,.38); border-radius:50%; animation:steam 2.5s ease-in-out infinite; }
.steam i:nth-child(2){animation-delay:.5s}.steam i:nth-child(3){animation-delay:1s}
.home-ui { background:linear-gradient(145deg,#e9fbfd,#fff); }
.route { display:flex; align-items:center; margin:26px 0 22px; }
.route span { position:relative; flex:1; height:2px; margin:0 8px; overflow:hidden; background:rgba(0,0,0,.12); }
.route span::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--accent) 0 60%,transparent 60%); animation:route 3s ease-in-out infinite; }
.route i { display:grid; place-items:center; width:35px; height:35px; border-radius:50%; background:white; color:var(--accent); box-shadow:0 8px 20px rgba(17,80,90,.14); font-style:normal; }
.route .van { background:var(--accent); color:var(--accent-ink); animation:van 3s ease-in-out infinite; }
.home-ui>strong,.home-ui>small { display:block; }
.home-ui>strong { font:500 26px Georgia,serif; }
.home-ui>small { margin-top:7px; color:var(--muted); }
.progress b { width:64%; }
.dental-ui { background:linear-gradient(145deg,#edfffb,#fff); }
.smile-score { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; padding:14px; border-radius:16px; background:var(--accent); }
.smile-score strong { font:500 22px Georgia,serif; }
.smile-score i { font-size:30px; font-style:normal; animation:smile 2.8s ease-in-out infinite; }
.care-row { display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); font-size:10px; }
.care-row b { font-size:9px; letter-spacing:.08em; }
.story-card figcaption { display:flex; align-items:center; gap:12px; padding:18px 20px 20px; }
.story-card figcaption span { display:grid; place-items:center; width:31px; height:31px; flex:0 0 auto; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-size:9px; font-weight:900; }
.story-card figcaption strong { font-size:14px; }
.section { padding:92px 0; }
.section.soft { background:var(--soft); }
.section-head { display:grid; grid-template-columns:.8fr 1.2fr; gap:40px; align-items:end; margin-bottom:38px; }
.section-head h2 { margin:0; font:500 clamp(40px,5vw,68px)/.98 Georgia,serif; letter-spacing:-.05em; }
.section-head p { max-width:590px; margin:0; color:var(--muted); line-height:1.65; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.service { min-height:235px; padding:24px; border:1px solid var(--line); border-radius:26px; background:rgba(255,255,255,.5); }
.service .glyph { display:grid; place-items:center; width:48px; height:48px; margin-bottom:42px; border-radius:16px; background:var(--accent); color:var(--accent-ink); font-size:21px; }
.service h3 { margin:0 0 8px; font-size:20px; }
.service p { margin:0; color:var(--muted); font-size:14px; line-height:1.55; }
.service-price { display:flex; align-items:center; justify-content:space-between; margin-top:18px; font-weight:850; }
.service-price button { border:0; background:transparent; text-decoration:underline; cursor:pointer; }

/* action panel */
.action-wrap { display:grid; grid-template-columns:.72fr 1.28fr; gap:18px; align-items:start; }
.action-copy { position:sticky; top:112px; padding:34px; border-radius:30px; background:var(--ink); color:white; }
.action-copy h2 { margin:0 0 16px; font:500 45px/1 Georgia,serif; letter-spacing:-.045em; }
.action-copy p { color:rgba(255,255,255,.66); line-height:1.6; }
.action-copy .micro { display:block; margin-top:50px; color:rgba(255,255,255,.46); font-size:12px; }
.flow-card { min-height:540px; padding:34px; border:1px solid var(--line); border-radius:30px; background:var(--white); box-shadow:0 18px 60px rgba(28,20,10,.07); }
.flow-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; }
.flow-top h3 { margin:0; font-size:24px; letter-spacing:-.03em; }
.step-pill { padding:7px 10px; border-radius:999px; background:var(--soft); color:var(--muted); font-size:11px; font-weight:850; }
.choice-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.choice { display:flex; align-items:center; justify-content:space-between; min-height:68px; padding:15px 17px; border:1px solid var(--line); border-radius:17px; background:transparent; text-align:left; cursor:pointer; transition:.18s; }
.choice:hover, .choice.selected { border-color:var(--accent); background:var(--soft); }
.choice strong { display:block; font-size:14px; }
.choice small { display:block; margin-top:4px; color:var(--muted); }
.choice .dot { width:18px; height:18px; border:1px solid #aaa; border-radius:50%; }
.choice.selected .dot { border:5px solid var(--accent); }
.field-row { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:18px; }
.field { display:flex; flex-direction:column; gap:8px; }
.field label { font-size:12px; font-weight:800; }
.field input, .field select, .field textarea { width:100%; min-height:50px; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:white; outline:none; }
.field textarea { min-height:94px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.time-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:18px; }
.time { min-height:43px; border:1px solid var(--line); border-radius:12px; background:white; cursor:pointer; }
.time.selected { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:850; }
.range-wrap { margin:24px 0; }
.range-wrap input { width:100%; accent-color:var(--accent); }
.price-box { display:flex; align-items:center; justify-content:space-between; margin:22px 0; padding:19px; border-radius:18px; background:var(--soft); }
.price-box strong { font:600 30px Georgia,serif; }
.flow-actions { display:flex; gap:10px; margin-top:28px; }
.flow-actions .button { flex:1; }
.notice { margin:14px 0 0; color:var(--muted); font-size:11px; line-height:1.45; text-align:center; }
.menu-tabs { display:flex; gap:8px; overflow:auto; padding:0 0 12px; }
.menu-tab { white-space:nowrap; padding:10px 14px; border:1px solid var(--line); border-radius:999px; background:white; cursor:pointer; }
.menu-tab.active { background:var(--ink); color:white; }
.menu-list { display:grid; gap:9px; margin-top:8px; }
.menu-item { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; padding:15px; border:1px solid var(--line); border-radius:17px; }
.menu-item h4 { margin:0 0 4px; }
.menu-item p { margin:0; color:var(--muted); font-size:12px; }
.menu-item button { display:grid; place-items:center; width:36px; height:36px; border:0; border-radius:50%; background:var(--accent); cursor:pointer; font-weight:900; }
.cart-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; padding:14px 16px; border-radius:17px; background:var(--ink); color:white; }
.cart-bar button { border:0; background:var(--accent); padding:10px 15px; border-radius:999px; cursor:pointer; font-weight:850; }

.demo-contact { padding:70px 0; background:var(--ink); color:white; }
.contact-in { display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; }
.contact-in h2 { max-width:720px; margin:0; font:500 clamp(38px,5vw,68px)/1 Georgia,serif; letter-spacing:-.05em; }
.contact-in p { color:rgba(255,255,255,.58); }
.demo-footer { padding:30px 0 90px; background:var(--ink); color:rgba(255,255,255,.45); border-top:1px solid rgba(255,255,255,.1); font-size:12px; }
.demo-footer .shell { display:flex; align-items:center; justify-content:space-between; gap:20px; }

/* modal */
.modal-backdrop { position:fixed; inset:0; z-index:80; display:grid; place-items:end center; padding:20px; background:rgba(0,0,0,.54); backdrop-filter:blur(8px); animation:fade .2s; }
.modal { width:min(520px,100%); padding:28px; border-radius:28px; background:white; box-shadow:var(--shadow); animation:up .25s; }
.modal-icon { display:grid; place-items:center; width:54px; height:54px; margin-bottom:20px; border-radius:18px; background:var(--soft); font-size:24px; }
.modal h3 { margin:0 0 10px; font:500 31px/1.05 Georgia,serif; letter-spacing:-.035em; }
.modal p { margin:0 0 22px; color:#68645c; line-height:1.55; }
.modal .summary { margin:18px 0; padding:16px; border-radius:16px; background:#f4f1eb; font-size:13px; line-height:1.7; }
.modal-x { float:right; width:38px; height:38px; border:1px solid #ddd; border-radius:50%; background:white; cursor:pointer; }
.toast { position:fixed; z-index:100; left:50%; bottom:24px; transform:translate(-50%, 90px); padding:13px 18px; border-radius:999px; background:#111; color:white; font-size:13px; font-weight:750; opacity:0; transition:.25s; pointer-events:none; box-shadow:0 12px 40px rgba(0,0,0,.25); }
.toast.show { transform:translate(-50%,0); opacity:1; }
@keyframes fade { from { opacity:0; } }
@keyframes up { from { transform:translateY(20px); opacity:0; } }
@keyframes art-float { 0%,100% { translate:0 0; } 50% { translate:0 -8px; } }
@keyframes art-glow { 0%,100% { opacity:.62; filter:drop-shadow(0 0 0 transparent); } 50% { opacity:1; filter:drop-shadow(0 0 7px color-mix(in srgb,var(--accent) 65%,transparent)); } }
@keyframes art-dot { 0%,100% { opacity:.4; transform:scale(.72); } 50% { opacity:1; transform:scale(1.28); } }
@keyframes story-orbit { to { transform:rotate(360deg); } }
@keyframes hero-breathe { from { transform:scale(1); } to { transform:scale(1.055); } }
@keyframes pulse { 70% { box-shadow:0 0 0 10px transparent; } 100% { box-shadow:0 0 0 0 transparent; } }
@keyframes meter { from { width:42%; } to { width:84%; } }
@keyframes scan { 0%,100% { transform:translateY(-140px); opacity:0; } 40%,60% { opacity:1; } 50% { transform:translateY(0); } }
@keyframes breath { 0%,100% { transform:scale(.88); opacity:.45; } 50% { transform:scale(1.06); opacity:1; } }
@keyframes steam { 0%,100% { transform:translateY(8px) rotate(8deg); opacity:.15; } 50% { transform:translateY(-8px) rotate(-8deg); opacity:.7; } }
@keyframes route { 0% { transform:translateX(-60%); } 100% { transform:translateX(80%); } }
@keyframes van { 0%,100% { transform:translateX(-18px); } 50% { transform:translateX(4px); } }
@keyframes smile { 0%,100% { transform:rotate(-6deg); } 50% { transform:rotate(6deg) scale(1.08); } }

@media (max-width: 850px) {
  .show-hero, .demo-hero, .show-intro, .section-head, .story-head, .action-wrap, .contact-in { grid-template-columns:1fr; }
  .show-hero { padding-top:38px; }
  .hero-orbit { min-height:330px; }
  .show-intro { gap:22px; }
  .demo-grid { grid-template-columns:1fr; }
  .demo-card { min-height:390px; }
  .demo-hero { padding-top:46px; }
  .hero-visual { min-height:430px; }
  .service-grid { grid-template-columns:1fr 1fr; }
  .story-grid { grid-template-columns:1fr; }
  .story-art { height:280px; }
  .action-copy { position:relative; top:auto; }
  .contact-in .button { width:100%; }
}

@media (max-width: 560px) {
  .shell { width:min(100% - 24px, 1180px); }
  .show-nav { height:66px; }
  .show-tag { display:none; }
  .show-hero { min-height:auto; padding:52px 0 76px; }
  .show-hero h1 { font-size:61px; }
  .show-hero p { font-size:17px; }
  .hero-orbit { min-height:285px; margin-top:10px; }
  .orbit-word { width:102px; font-size:13px; }
  .show-intro { padding-top:74px; }
  .demo-grid { padding-bottom:80px; }
  .demo-card { min-height:360px; padding:24px; }
  .demo-card h3 { margin-top:80px; font-size:46px; }
  .top-demo-note { font-size:10px; }
  .desktop-link { display:none; }
  .demo-nav-in { height:64px; }
  .demo-hero { min-height:auto; padding:55px 0 66px; }
  .demo-hero h1 { font-size:58px; }
  .demo-hero .lead { font-size:17px; }
  .hero-actions .button { flex:1 1 100%; }
  .trust-row { gap:12px; }
  .hero-visual { min-height:390px; }
  .visual-story { padding:0 0 72px; }
  .story-head { gap:16px; margin-bottom:24px; }
  .story-art { height:225px; }
  .section { padding:72px 0; }
  .section-head { gap:18px; margin-bottom:28px; }
  .service-grid { grid-template-columns:1fr; }
  .service { min-height:200px; }
  .service .glyph { margin-bottom:28px; }
  .action-copy, .flow-card { padding:24px; border-radius:24px; }
  .action-copy h2 { font-size:39px; }
  .action-copy .micro { margin-top:30px; }
  .choice-grid, .field-row { grid-template-columns:1fr; }
  .time-grid { grid-template-columns:repeat(3,1fr); }
  .flow-actions { flex-direction:column; }
  .contact-in h2 { font-size:44px; }
  .demo-footer .shell { align-items:flex-start; flex-direction:column; }
  .modal-backdrop { padding:10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .sector-svg, .sector-svg *, .story-art::before, .story-art::after, .hero-photo, .live-badge i, .sector-ui *, .story-photo img { animation:none!important; }
}