* { box-sizing: border-box; }
:root {
  color-scheme: light dark;
  --bg: #fbf8f4;
  --surface: rgba(255,255,255,.88);
  --surface-strong: #fffaf5;
  --text: #1f1733;
  --muted: #625979;
  --border: rgba(92,46,125,.16);
  --primary: #5c2e7d;
  --primary-dark: #472161;
  --accent: #8f5780;
  --warm: #e1b48f;
  --shadow: 0 22px 70px rgba(74,41,97,.14);
}
@media (prefers-color-scheme: dark) { :root { --bg:#120d19; --surface:rgba(35,26,43,.92); --surface-strong:#2b1f36; --text:#fff9ff; --muted:#d6cde0; --border:rgba(255,255,255,.15); --primary:#ead9f6; --primary-dark:#fff7ff; --accent:#edccbd; --warm:#d99a73; --shadow:0 22px 70px rgba(0,0,0,.42); } }
html, body { min-height:100%; margin:0; }
body { color:var(--text); background: radial-gradient(circle at top left, rgba(92,46,125,.20), transparent 34%), radial-gradient(circle at bottom right, rgba(225,180,143,.26), transparent 32%), var(--bg); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.62; }
a { color:inherit; text-decoration:none; } a:hover { text-decoration:underline; }
.page { padding:28px 0 52px; }.container { width:min(1120px, calc(100% - 32px)); margin:0 auto; }
.topbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; margin-bottom:20px; }.brand { display:inline-flex; align-items:center; gap:10px; font-weight:800; }.brand img { width:38px; height:38px; border-radius:9px; }
.nav { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:14px; }.nav a, .language-switch { color:var(--muted); font-size:14px; font-weight:700; }.language-switch { display:inline-flex; align-items:center; gap:8px; }.language-switch select { height:34px; border:1px solid var(--border); border-radius:8px; background:var(--surface-strong); color:var(--text); font:inherit; }
.hero { min-height:calc(100vh - 116px); display:grid; grid-template-columns:minmax(0,1.05fr) minmax(310px,420px); align-items:center; gap:44px; }.kicker { width:fit-content; margin:0 0 14px; padding:7px 11px; border:1px solid var(--border); border-radius:999px; color:var(--primary); background:var(--surface); font-size:13px; font-weight:800; text-transform:uppercase; }
h1,h2 { margin:0 0 12px; line-height:1.1; letter-spacing:0; } h1 { font-size:clamp(40px,7vw,72px); } h2 { font-size:30px; }.lead { max-width:680px; margin:0; color:var(--muted); font-size:20px; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }.button { min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:0 18px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text); font-weight:800; box-shadow:0 10px 28px rgba(74,41,97,.10); }.button.primary { color:#fff; border-color:transparent; background:linear-gradient(135deg,#5c2e7d,#8f5780 62%,#e1b48f); }.button.compact { width:max-content; }.store-icon { width:20px; height:20px; flex:0 0 auto; }
.product-panel, .section, .feature { background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow); backdrop-filter:blur(18px); }.product-panel { position:relative; overflow:hidden; padding:24px; display:grid; gap:16px; }.product-panel::before { content:""; position:absolute; inset:-40% -20% auto auto; width:260px; height:260px; border-radius:999px; background:radial-gradient(circle, rgba(225,180,143,.36), transparent 68%); pointer-events:none; }.panel-top { position:relative; display:flex; align-items:center; gap:14px; }.app-icon-large { width:76px; height:76px; border-radius:18px; box-shadow:0 18px 42px rgba(74,41,97,.24); }.panel-eyebrow { display:block; color:var(--muted); font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }.panel-top strong { display:block; font-size:24px; line-height:1.1; }.video-card { position:relative; min-height:132px; padding:18px; border:1px solid var(--border); border-radius:16px; background:linear-gradient(135deg, rgba(31,23,51,.96), rgba(92,46,125,.86)); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.18); }.video-card strong { display:block; font-size:18px; }.video-card p { margin:4px 0 0; color:rgba(255,255,255,.74); font-size:13px; }.timeline { position:absolute; left:18px; right:18px; bottom:18px; height:10px; border-radius:999px; background:rgba(255,255,255,.22); overflow:hidden; }.timeline::before { content:""; display:block; width:64%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#fff,#e1b48f); }.timeline-marker { position:absolute; bottom:11px; width:2px; height:24px; border-radius:2px; background:#fff; box-shadow:0 0 0 5px rgba(255,255,255,.12); }.timeline-marker:nth-of-type(1) { left:31%; }.timeline-marker:nth-of-type(2) { left:58%; }.frame-strip { display:flex; flex-wrap:wrap; gap:8px; }.frame-strip span { padding:7px 10px; border-radius:999px; background:rgba(92,46,125,.10); color:var(--primary-dark); font-weight:800; font-size:13px; }.still-grid { width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.still-grid span { position:relative; aspect-ratio:1.34; border-radius:12px; overflow:hidden; background:linear-gradient(135deg, rgba(92,46,125,.34), rgba(225,180,143,.50)); border:1px solid rgba(255,255,255,.28); }.still-grid span::before { content:""; position:absolute; inset:10px 10px auto; height:34%; border-radius:9px; background:rgba(255,255,255,.30); }.still-grid span::after { content:attr(data-label); position:absolute; left:9px; right:9px; bottom:8px; color:#fff; font-size:11px; font-weight:900; text-shadow:0 1px 8px rgba(31,23,51,.45); }.workflow-list { display:grid; gap:9px; }.workflow-list span { display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:12px; background:rgba(92,46,125,.08); color:var(--muted); font-size:13px; font-weight:800; }.workflow-list span::before { content:""; width:8px; height:8px; border-radius:999px; background:linear-gradient(135deg,var(--primary),var(--warm)); flex:0 0 auto; }
.section { margin-top:22px; padding:28px; }.section p, li { color:var(--muted); }.feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:18px; }.feature-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }.feature { padding:18px; box-shadow:none; }.feature strong { display:block; margin-bottom:6px; }.feature p { margin:0; }.split { display:flex; align-items:center; justify-content:space-between; gap:18px; }.footer { margin-top:28px; color:var(--muted); font-size:14px; }
@media (max-width:760px) { .hero { min-height:auto; grid-template-columns:1fr; padding-top:18px; } .product-panel { order:-1; } .feature-grid, .feature-grid.two { grid-template-columns:1fr; } .split { align-items:flex-start; flex-direction:column; } }