/* Karvilo's violet mark anchors a restrained, quick interface. */
:root {
  --blue:#5545db; --blue-hover:#4534c3; --ink:#25233a; --ink-deep:#171526;
  --muted:#656477; --line:#e7e5ef; --surface:#f6f5fa;
  --tint:#f0edf9; --tint-soft:#faf9fd; --glow:#b8aaf5;
  --ease:cubic-bezier(.22,.8,.22,1); --ease-exit:cubic-bezier(.4,0,1,1);
}
body { background:var(--paper); }
::selection { background:var(--tint); color:var(--ink); }
.site-header { background:#fffffff2; border-color:var(--line); }
.brand-ai { color:var(--accent-light); border-color:color-mix(in srgb,var(--blue) 35%,white); background:var(--tint); }
.hero { background:linear-gradient(180deg,#fff 0%,var(--tint-soft) 50%,var(--tint) 100%); }
.hero-halo { background:radial-gradient(ellipse,color-mix(in srgb,var(--glow) 24%,transparent),transparent 68%); }
.hero h1 { letter-spacing:-.062em; }
.hero-lead,.hero-caption { color:var(--muted); }
.button { border-radius:12px; transition:transform 180ms var(--ease),background 180ms,border-color 180ms,box-shadow 220ms; }
.button.primary { box-shadow:0 3px 8px color-mix(in srgb,var(--blue) 13%,transparent),inset 0 1px 0 #ffffff26; }
.button.primary:hover { box-shadow:0 7px 18px color-mix(in srgb,var(--blue) 20%,transparent),inset 0 1px 0 #ffffff26; }
.button:active { transform:translateY(0) scale(.985); transition-duration:90ms; }
.button.secondary { border-color:var(--line); }
.button.secondary:hover { background:var(--tint-soft); border-color:color-mix(in srgb,var(--blue) 30%,white); }
.button.nav-button:hover { background:var(--blue-hover); }
.main-nav>a { position:relative; }
.main-nav>a::after { content:''; position:absolute; height:2px; left:0; right:0; bottom:-9px; border-radius:2px; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform 200ms var(--ease); }
.main-nav>a:hover::after,.main-nav>a[aria-current=page]::after { transform:scaleX(1); }
.workspace-image-link { border-color:color-mix(in srgb,var(--blue) 17%,white); border-radius:20px; box-shadow:0 25px 70px -32px #25203f66,0 2px 8px #25203f0d; }
.stage-caption a,.inline-link,.module-link i { color:var(--accent-light); }
.inline-link>span,.module-link i,.explore-arrow,.button-arrow { display:inline-block; transition:transform 200ms var(--ease); }
.inline-link:hover>span,.module-link:hover i { transform:translate(2px,-2px); }
.button:hover .button-arrow { transform:translate(2px,2px); }
.feature-explorer { background:var(--tint-soft); border-color:var(--line); box-shadow:0 16px 45px -35px #28223866; }
.explorer-nav { background:var(--ink-deep); }
.explorer-nav button { border-radius:11px; transition:background 180ms,color 180ms,transform 180ms var(--ease); }
.explorer-nav button[aria-selected=true],.explorer-nav button[aria-selected=true]:hover { background:var(--blue); border-color:#ffffff21; box-shadow:0 4px 12px #0002; }
.explorer-nav button[aria-selected=true] .explore-arrow { transform:translate(2px,-2px); }
.explorer-panels article.is-entering,.demo-panel.is-entering,.tour-display article.is-entering { animation:public-panel-in 180ms var(--ease) both; }
.module-link,.business-card,.commerce-cards article,.catalog-card,.plan-card,.scope-grid article { border-color:var(--line); transition:transform 230ms var(--ease),box-shadow 230ms,border-color 230ms,background 230ms; }
.module-link:hover { background:#fff; border-color:color-mix(in srgb,var(--blue) 32%,white); transform:translateY(-2px); box-shadow:0 5px 16px #28223808; }
@media(hover:hover) {
  .business-card:hover,.commerce-cards article:hover,.plan-card:hover { transform:translateY(-4px); box-shadow:0 16px 35px -24px #27203955; border-color:color-mix(in srgb,var(--blue) 28%,white); }
}
.business-band,.trust-band { background:var(--surface); border-color:var(--line); }
.business-chips span,.page-facts span,.karv-prompts span { color:var(--muted); border-color:var(--line); background:var(--tint-soft); }
.karv-guide { background:linear-gradient(135deg,var(--tint),var(--tint-soft)); border-color:var(--line); }
.guide-row { border-color:var(--line); }
.guide-row p,.guide-row>span,.karv-guide .fine-print { color:var(--muted); }
.closing { background:var(--ink-deep); box-shadow:0 20px 45px -32px #231c4966; }
.closing .eyebrow { color:#c6bef4; }
.faq-list details { border-color:var(--line); }
.faq-list summary { transition:color 150ms; }
.faq-list summary:hover,.faq-list details[open] summary { color:var(--accent-light); }
.faq-list summary span { transition:transform 250ms var(--ease); }
.faq-list details p { color:var(--muted); }
.faq-list details[data-closing] summary span { transform:none; }
.motion-ready [data-reveal] { transition:opacity 180ms ease; transform:none; }
.motion-ready [data-reveal].is-visible { transform:none; }
.appearance-control { position:relative; display:flex; align-items:center; }
.appearance-toggle { width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:12px; transition:background 160ms,border-color 160ms,transform 160ms; }
.appearance-toggle:hover,.appearance-toggle[aria-expanded=true] { background:var(--tint); border-color:color-mix(in srgb,var(--blue) 25%,white); }
.appearance-toggle:active { transform:scale(.96); }
.appearance-panel { position:absolute; right:0; top:calc(100% + 14px); z-index:50; width:290px; border:1px solid var(--line); border-radius:18px; padding:20px; background:#fff; box-shadow:0 18px 50px -16px #2521393d,0 3px 12px #25213908; opacity:0; visibility:hidden; transform:translateY(-6px) scale(.98); transform-origin:top right; transition:opacity 160ms,transform 200ms var(--ease),visibility 200ms; }
.appearance-panel.is-open { opacity:1; visibility:visible; transform:none; }
.appearance-panel h2 { font-size:1rem; letter-spacing:-.025em; }
.appearance-panel>p { font-size:.75rem; color:var(--muted); margin-top:3px; }
.appearance-panel fieldset { border:0; padding:0; margin:18px 0 0; }
.appearance-panel legend { font-size:.75rem; color:var(--muted); margin-bottom:8px; }
.appearance-options { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.appearance-options label { position:relative; display:flex; align-items:center; gap:7px; padding:10px; min-height:43px; border:1px solid var(--line); border-radius:9px; cursor:pointer; font-size:.8125rem; transition:background 160ms,border-color 160ms; }
.appearance-options label:has(input:checked) { border-color:var(--blue); background:var(--tint-soft); }
.appearance-options input { accent-color:var(--blue); margin:0; }
.appearance-swatch { width:9px; height:9px; border-radius:50%; background:var(--color); }
.header-actions { gap:18px; }
@keyframes public-panel-in{from{opacity:0}to{opacity:1}}
@media(max-width:1000px) { .header-inner { gap:18px; } .header-actions { gap:12px; } .main-nav { gap:18px; } }
@media(max-width:650px) {
  .header-inner { gap:12px; }
  .header-actions { display:flex; margin-left:auto; order:2; }
  .header-actions>.signin,.header-actions>.nav-button { display:none; }
  .menu-toggle { order:3; margin-left:0; }
  .appearance-toggle { width:36px; height:36px; }
  .appearance-panel { right:-50px; top:calc(100% + 16px); max-width:calc(100vw - 28px); }
  .main-nav { display:flex; flex-direction:column; visibility:hidden; opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity 180ms,transform 220ms var(--ease),visibility 220ms; border-color:var(--line); box-shadow:0 16px 25px -20px #28223850; }
  .main-nav.is-open { visibility:visible; opacity:1; transform:none; pointer-events:auto; }
  .main-nav>a::after { display:none; }
  .main-nav>a { border-radius:8px; transition:background 140ms,color 140ms; }
  .main-nav>a:hover { background:var(--tint-soft); }
  .menu-toggle span { transition:transform 220ms var(--ease); }
  .workspace-image-link { border-radius:12px; }
}
@view-transition { navigation:auto; }
::view-transition-old(root) { animation:public-page-out 120ms ease both; }
::view-transition-new(root) { animation:public-page-in 180ms var(--ease) both; }
@keyframes public-page-out { to { opacity:0; } }
@keyframes public-page-in { from { opacity:0; } }
:root[data-motion=reduced] *, :root[data-motion=reduced] *::before, :root[data-motion=reduced] *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
:root[data-motion=reduced] [data-reveal] { opacity:1!important; transform:none!important; }
:root[data-motion=reduced] ::view-transition-old(root),:root[data-motion=reduced] ::view-transition-new(root) { animation:none; }
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .motion-ready [data-reveal] { opacity:1; transform:none; }
  ::view-transition-old(root),::view-transition-new(root) { animation:none; }
}
@media print { .appearance-control { display:none; } }
