/* KidLogic Loft — Appmonto family shell, local and dependency-free. */
:root, :root[data-theme="light"] {
  --bg: #FBF7EF; --bg-tint: #F3EBDD; --surface: #FFFFFF;
  --ink: #302A21; --ink-soft: #6E6252; --ink-faint: #8A7A65;
  --line: #E4D8C5; --accent: #A56728; --accent-strong: #7C4B1D;
  --accent-soft: #F3DFC2; --sage: #5F7965; --blue: #55738A;
  --shadow: 0 1px 2px rgba(48,42,33,.04), 0 12px 32px rgba(90,67,35,.08);
  --radius: 20px; --radius-lg: 28px; --maxw: 1080px;
}
:root[data-theme="dark"] {
  --bg: #201D19; --bg-tint: #29251F; --surface: #2D2923;
  --ink: #F5EFE5; --ink-soft: #C3B8A8; --ink-faint: #9E9180;
  --line: #433B31; --accent: #E2AD6E; --accent-strong: #F0C58F;
  --accent-soft: #443522; --sage: #9DB3A0; --blue: #9CB7C9;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 14px 36px rgba(0,0,0,.28);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.62 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 10px 16px; background: var(--surface); }
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { line-height: 1.12; letter-spacing: -.025em; }
h1 { font-size: clamp(2.55rem,6vw,4.6rem); max-width: 12ch; margin-bottom: 22px; }
h2 { font-size: clamp(1.9rem,4vw,2.8rem); margin-bottom: 12px; }
h3 { font-size: 1.22rem; margin-bottom: 10px; }
.lead { color: var(--ink-soft); font-size: clamp(1.05rem,2vw,1.22rem); }
.eyebrow { margin-bottom: 12px; color: var(--accent-strong); font-size: .76rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }

.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); background: color-mix(in srgb,var(--bg) 86%,transparent); backdrop-filter: saturate(140%) blur(12px); }
.header-inner { min-height: 64px; display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 760; letter-spacing: -.01em; white-space: nowrap; }
.brand-mark { width: 26px; height: 26px; border: 1px solid color-mix(in srgb,var(--accent) 60%,var(--line)); border-radius: 8px; background: linear-gradient(145deg,var(--accent-soft),transparent), var(--surface); position: relative; }
.brand-mark::after { content:""; position:absolute; width:7px; height:7px; border-radius:50%; background:var(--accent); inset:9px; }
.primary-nav { display: flex; gap: 25px; margin-left: auto; }
.primary-nav a,.footer-links a { color: var(--ink-soft); text-decoration: none; font-size: .9rem; }
.primary-nav a:hover,.footer-links a:hover { color: var(--ink); }
.header-tools { display: flex; align-items: center; gap: 8px; }
.lang-switch { display:inline-flex; gap:2px; padding:3px; border:1px solid var(--line); border-radius:999px; background:color-mix(in srgb,var(--surface) 75%,transparent); }
.lang-switch a { min-width:32px; min-height:28px; display:grid; place-items:center; border-radius:999px; color:var(--ink-faint); text-decoration:none; font-size:.69rem; font-weight:750; }
.lang-switch a[aria-current="page"] { color:var(--ink); background:var(--surface); box-shadow:var(--shadow); }
.theme-toggle { width:36px; height:36px; padding:0; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:color-mix(in srgb,var(--surface) 75%,transparent); color:var(--ink-soft); cursor:pointer; }
.theme-toggle:hover { color:var(--ink); border-color:var(--accent); }
.theme-toggle svg { width:17px; height:17px; }
.theme-toggle__moon { display:none; }
[data-theme="dark"] .theme-toggle__sun { display:none; }
[data-theme="dark"] .theme-toggle__moon { display:block; }

section { padding-block: clamp(58px,8vw,96px); }
.hero { padding-top: clamp(64px,9vw,108px); overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:1.03fr .97fr; gap:clamp(36px,7vw,84px); align-items:center; }
.hero-copy .lead { max-width:37rem; }
.button-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.button { display:inline-flex; padding:11px 20px; border:1px solid transparent; border-radius:999px; font-size:.92rem; font-weight:700; text-decoration:none; }
.button--primary { background:var(--accent); color:#fff; }
[data-theme="dark"] .button--primary { color:#24180c; }
.button--ghost { border-color:var(--line); background:var(--surface); }
.hero-art { margin:0; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); padding:10px; box-shadow:var(--shadow); transform:rotate(1deg); }
.hero-art img { width:100%; border-radius:calc(var(--radius-lg) - 8px); aspect-ratio:1024/500; object-fit:cover; }
.hero-art figcaption { padding:9px 8px 1px; color:var(--ink-faint); font-size:.78rem; }
.trust-bar { margin:64px 0 0; padding:20px 24px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }
.trust-bar div { border-left:2px solid var(--accent-soft); padding-left:14px; }
.trust-bar dt { color:var(--ink-faint); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.trust-bar dd { margin:2px 0 0; font-weight:750; }
.section-head { max-width:680px; margin-bottom:42px; }
.section-head .lead { margin-bottom:0; }
.section-tint { background:var(--bg-tint); border-block:1px solid var(--line); }
.product-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.product-card { min-height:230px; display:flex; flex-direction:column; align-items:flex-start; padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); text-decoration:none; }
.product-card--featured { grid-column:1/-1; min-height:260px; display:grid; grid-template-columns:120px 1fr; gap:28px; align-items:center; }
.product-icon { width:112px; height:112px; border-radius:26px; box-shadow:var(--shadow); }
.product-symbol { width:48px; height:48px; margin-bottom:24px; border-radius:14px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-strong); }
.product-symbol svg { width:25px; height:25px; }
.product-card p { color:var(--ink-soft); max-width:42rem; }
.status { display:inline-flex; margin-bottom:12px; padding:5px 10px; border:1px solid var(--line); border-radius:999px; color:var(--ink-faint); font-size:.72rem; font-weight:700; }
.status--live { color:var(--sage); border-color:color-mix(in srgb,var(--sage) 38%,var(--line)); }
.text-link { color:var(--accent-strong); font-weight:700; text-decoration:none; }
.principles-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.principle-card { padding-top:3px; }
.principle-card p { color:var(--ink-soft); margin:0; }
.line-icon { display:block; width:24px; height:2px; margin-bottom:17px; border-radius:2px; background:var(--accent); }
.about-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:72px; }
.about-copy { max-width:42rem; color:var(--ink-soft); font-size:1.06rem; }
.site-footer { border-top:1px solid var(--line); padding-block:42px; }
.footer-grid { display:flex; flex-wrap:wrap; align-items:center; gap:20px 30px; }
.footer-links { display:flex; flex-wrap:wrap; gap:14px 22px; margin-left:auto; }
.site-footer small { width:100%; color:var(--ink-faint); font-size:.82rem; }

/* Existing app and privacy content uses these shared document components. */
.page { width:100%; max-width:1080px; margin:auto; padding:28px 24px 56px; }
.topbar { position:sticky; top:0; z-index:40; min-height:64px; display:flex; align-items:center; gap:18px; padding:8px 0; background:color-mix(in srgb,var(--bg) 90%,transparent); backdrop-filter:blur(10px); }
.back-link { margin-right:auto; color:var(--ink-soft); font-weight:700; text-decoration:none; }
.card,.page>.hero,.faq-item,.feat-card,.footer { border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); }
.page>.hero { overflow:hidden; margin-bottom:32px; }
.banner { width:100%; aspect-ratio:1024/500; object-fit:cover; }
.hero-body,.card { padding:clamp(24px,5vw,48px); }
.app-meta { display:flex; align-items:center; gap:20px; margin-bottom:22px; }
.app-icon-img { width:80px; height:80px; border-radius:20px; box-shadow:var(--shadow); }
.app-name { margin:0 0 4px; font-size:clamp(1.5rem,4vw,2.2rem); }.app-by,.updated,.shots-note { color:var(--ink-faint); }
.app-tags,.cta-row { display:flex; flex-wrap:wrap; gap:8px; margin-block:18px; }.tag { padding:5px 11px; border:1px solid var(--line); border-radius:999px; font-size:.75rem; font-weight:700; }.tag--green{color:var(--sage)}.tag--blue{color:var(--blue)}.tag--warm{color:var(--accent-strong)}
.btn-play { display:inline-flex; align-items:center; gap:10px; padding:12px 19px; border-radius:14px; background:var(--ink); color:var(--bg); text-decoration:none; font-weight:700; }.btn-play-text{display:flex;flex-direction:column;line-height:1.15}.btn-play-sub{font-size:.63rem;text-transform:uppercase}.live-badge{display:inline-flex;align-items:center;gap:6px;color:var(--sage);font-weight:700}.live-dot{width:7px;height:7px;border-radius:50%;background:var(--sage)}
.sec-label { margin:34px 0 12px; color:var(--accent-strong); font-size:.74rem; font-weight:750; letter-spacing:.12em; text-transform:uppercase; }
.shots { display:flex; gap:16px; overflow-x:auto; padding-bottom:10px; scroll-snap-type:x proximity; }.shots a{flex:0 0 clamp(190px,23vw,235px);border-radius:18px;overflow:hidden;scroll-snap-align:start;box-shadow:var(--shadow)}.shots img{width:100%}
.features { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }.feat-card,.faq-item{padding:22px}.feat-icon{font-size:0}.feat-icon::after{content:"";display:block;width:22px;height:2px;background:var(--accent);margin-bottom:13px}.feat-title,.faq-q{font-weight:750}.feat-text,.faq-a,.card p,.card li{color:var(--ink-soft)}
.faq{display:grid;gap:10px}.footer{margin-top:32px;padding:22px;display:flex;flex-wrap:wrap;gap:12px 24px}.footer-links{display:flex;gap:16px;margin-left:auto}.footer-link,.footer-studio-link,.card a{color:var(--accent-strong)}.footer-studio{width:100%;color:var(--ink-faint);font-size:.82rem}
.card { max-width:780px; margin:24px auto; }.card h2{margin-top:32px;font-size:1.35rem}.card-note{padding-top:18px;border-top:1px solid var(--line)}

@media (max-width:760px){.header-inner{flex-wrap:wrap;gap:10px 14px;padding-block:10px}.header-tools{margin-left:auto}.primary-nav{order:3;width:100%;margin:0;overflow-x:auto}.hero-grid,.about-grid{grid-template-columns:1fr}.hero-art{transform:none}.trust-bar{grid-template-columns:repeat(2,1fr);margin-top:42px}.principles-grid{grid-template-columns:1fr}.product-grid{grid-template-columns:1fr}.product-card--featured{grid-column:auto;grid-template-columns:84px 1fr}.product-icon{width:80px;height:80px}.about-grid{gap:12px}.footer-links{width:100%;margin:0}.features{grid-template-columns:1fr}}
@media (max-width:520px){.container,.page{padding-inline:18px}.lang-switch a{min-width:28px}.brand{font-size:.92rem}.primary-nav{gap:18px}.trust-bar{padding:18px}.product-card--featured{display:flex}.hero-body,.card{padding:24px 20px}.app-icon-img{width:64px;height:64px}.shots a{flex-basis:66vw}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}