/* CreaCrate Apps — the studio shell is monochrome; every app brings its own
   colour through --accent. Adding an app means adding data, never CSS.
   Local assets only: system typefaces, no imports, no network. */

:root {
  --ink:#0f1226;
  --ink-2:#171c3c;
  --paper:#eef0fb;
  --muted:#9aa0c4;
  --edge:rgba(255,255,255,.12);
  --edge-soft:rgba(255,255,255,.07);
  --surface:rgba(255,255,255,.045);
  --surface-lift:rgba(255,255,255,.09);
  --accent:#8f9bff;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:92px; -webkit-text-size-adjust:100%; }

body {
  margin:0;
  min-height:100vh;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  color:var(--paper);
  background-color:var(--ink);
  background-image:linear-gradient(180deg,var(--ink-2) 0%,var(--ink) 640px);
  background-repeat:no-repeat;
}

h1,h2,h3,p,ul,dl { margin-top:0; }
a { color:inherit; text-underline-offset:4px; }
img,svg { max-width:100%; }
:focus-visible { outline:3px solid var(--paper); outline-offset:4px; border-radius:6px; }

.wrap { width:min(1180px,calc(100% - 56px)); margin-inline:auto; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

.skip-link {
  position:fixed; z-index:20; top:-120px; left:18px;
  padding:12px 18px; border-radius:12px;
  background:var(--paper); color:var(--ink); font-weight:700; text-decoration:none;
}
.skip-link:focus { top:14px; }

/* ---- header ----------------------------------------------------------- */

.site-header {
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-block:14px;
  background:rgba(15,18,38,.72);
  border-bottom:1px solid var(--edge-soft);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}
.site-header.wrap { width:100%; padding-inline:max(28px,calc((100% - 1180px) / 2)); }

.brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand img { width:32px; height:32px; object-fit:contain; filter:invert(1); }
.brand span { font-size:16px; font-weight:700; letter-spacing:-.02em; }
.brand-small { font-weight:400; color:var(--muted); }

.site-header nav { display:flex; align-items:center; gap:6px; }
.site-header nav a {
  padding:8px 15px; border-radius:999px;
  font-size:14px; font-weight:600; text-decoration:none;
  border:1px solid transparent;
}
.site-header nav a:hover { background:var(--surface-lift); border-color:var(--edge); }
.site-header nav a.lang-switch { border-color:var(--edge); }

/* ---- opening ---------------------------------------------------------- */

.hero { padding-block:clamp(60px,9vw,112px) clamp(38px,5vw,58px); }
.hero h1 {
  max-width:16ch;
  font-size:clamp(2.6rem,6.8vw,5.2rem);
  font-weight:800; letter-spacing:-.045em; line-height:.98;
  margin:0 0 26px;
}
.hero p { max-width:56ch; font-size:clamp(1.05rem,1.7vw,1.3rem); color:var(--muted); margin:0; }

/* ---- catalogue: one row per release, alternating -------------------- */

.catalogue { display:grid; gap:22px; }

.entry {
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  background:var(--surface);
  border:1px solid var(--edge);
  border-radius:30px;
  overflow:hidden;
}
.entry-art { position:relative; order:1; min-height:340px; background:var(--accent); overflow:hidden; }
.entry-art::before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(158deg,rgba(15,18,38,.70),rgba(15,18,38,.94));
}
.entry-art > * { position:relative; z-index:1; height:100%; }
.entry-body { order:2; display:flex; flex-direction:column; padding:clamp(28px,3.4vw,46px); }
.entry:nth-child(even) .entry-art { order:2; }
.entry:nth-child(even) .entry-body { order:1; }

.entry-head { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.entry h3 { font-size:clamp(1.9rem,3.4vw,2.9rem); font-weight:800; letter-spacing:-.04em; line-height:1; margin:0; }
.entry-category { font-size:13px; color:var(--muted); margin:10px 0 22px; }
.entry-tagline { font-size:clamp(1.15rem,1.8vw,1.4rem); font-weight:600; line-height:1.3; letter-spacing:-.02em; margin:0 0 14px; }
.entry-text { font-size:1rem; color:var(--muted); max-width:48ch; margin:0 0 32px; }
.entry-action { margin-top:auto; }

/* Status reads by treatment, not by hue, so any accent works. */
.status { flex-shrink:0; padding:6px 13px; border-radius:999px; font-size:12px; font-weight:700; }
.available { background:var(--accent); color:var(--ink); }
.upcoming { border:1px solid var(--edge); color:var(--muted); }

.button {
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 24px; border-radius:14px;
  background:var(--accent); color:var(--ink);
  font-size:.98rem; font-weight:700; text-decoration:none;
}
.button:hover { background:var(--paper); }
.text-link { font-weight:600; font-size:.98rem; text-decoration:none; border-bottom:2px solid var(--accent); padding-bottom:3px; }
.text-link:hover { color:var(--accent); }

/* Fallback art for an app that has no bespoke illustration yet. */
.entry-mark { display:grid; place-items:center; padding:40px; text-align:center; }
.entry-mark span {
  font-size:clamp(2rem,4vw,3.2rem); font-weight:800; letter-spacing:-.05em;
  color:var(--accent); opacity:.9;
}

/* ---- app art ---------------------------------------------------------- */

figure { margin:0; }
figcaption { margin-top:16px; font-size:11px; color:var(--muted); }

.voice-scene { display:flex; flex-direction:column; justify-content:center; padding:clamp(28px,3vw,42px); }
.voice-quote {
  font-size:clamp(1.25rem,2.1vw,1.7rem); font-weight:600; line-height:1.28;
  letter-spacing:-.025em; margin:0 0 20px; max-width:20ch;
}
.voice-wave { display:flex; align-items:flex-end; gap:4px; height:30px; margin-bottom:22px; }
.voice-wave i { flex:1; max-width:7px; border-radius:3px; background:var(--accent); opacity:.85; }
.voice-wave i:nth-child(4n+1) { height:34%; }
.voice-wave i:nth-child(4n+2) { height:78%; }
.voice-wave i:nth-child(4n+3) { height:50%; }
.voice-wave i:nth-child(4n) { height:100%; }
.voice-wave i:nth-child(7n) { height:22%; opacity:.5; }

.voice-results { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.voice-results li {
  display:flex; align-items:center; gap:12px;
  padding:12px 15px; border-radius:14px;
  background:rgba(15,18,38,.5); border:1px solid var(--edge-soft);
  font-size:.92rem;
}
.voice-check { color:var(--accent); }
.voice-kind { margin-left:auto; flex-shrink:0; font-size:11px; font-weight:700; color:var(--muted); }

.run-scene { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:clamp(24px,3vw,36px); }
.run-phone {
  position:relative; width:186px; height:min(300px,54vw);
  border:4px solid rgba(10,12,28,.85); border-radius:28px;
  background:#0c0e20; overflow:hidden;
  box-shadow:0 22px 44px rgba(6,8,20,.55);
}
.run-hud {
  position:absolute; inset:0 0 auto 0; z-index:3;
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 12px; font-size:10px; font-weight:800;
  background:linear-gradient(180deg,rgba(12,14,32,.96),rgba(12,14,32,0));
}
.run-likes { color:var(--accent); }
.run-viewport { position:absolute; inset:0; overflow:hidden; }
.run-track { animation:run-scroll 9s linear infinite; }
@keyframes run-scroll { from { transform:translateY(0); } to { transform:translateY(-50%); } }
.run-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; padding:12px; }
.run-tiles i { display:block; height:34px; border-radius:11px; background:rgba(255,255,255,.09); border:1px solid var(--edge-soft); }
.run-tiles i:nth-child(3n+1) { background:var(--accent); opacity:.65; }
.run-tiles i:nth-child(5n+2) { background:rgba(255,255,255,.22); }
.run-alert {
  position:absolute; z-index:2; top:56%; left:9px; right:9px;
  padding:9px 11px; border-radius:12px;
  background:var(--accent); color:var(--ink);
  font-size:10px; font-weight:700; transform:rotate(-4deg);
  box-shadow:0 10px 20px rgba(6,8,20,.55);
}
.run-figure { position:absolute; z-index:2; bottom:32px; left:calc(50% - 11px); width:22px; }
.run-figure::before {
  content:""; display:block; width:13px; height:13px; margin:0 auto 4px;
  border-radius:50%; background:var(--paper);
}
.run-figure::after {
  content:""; display:block; width:22px; height:22px;
  border-radius:11px 11px 5px 5px; background:var(--paper);
}

/* ---- studio ----------------------------------------------------------- */

.studio {
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
  margin-top:22px; padding:clamp(28px,3vw,40px);
  background:var(--surface); border:1px solid var(--edge); border-radius:30px;
}
.studio h2 { font-size:clamp(1.4rem,2.3vw,2rem); font-weight:700; letter-spacing:-.035em; margin:0 0 12px; }
.studio p { max-width:54ch; color:var(--muted); font-size:.98rem; margin:0; }

/* ---- footer ----------------------------------------------------------- */

.site-footer { padding-block:64px 52px; display:flex; flex-direction:column; align-items:center; gap:22px; }
.site-footer nav {
  display:flex; flex-wrap:wrap; justify-content:center; gap:4px;
  padding:7px; border-radius:24px;
  background:var(--surface); border:1px solid var(--edge);
}
.site-footer nav a { padding:10px 18px; border-radius:18px; font-size:14px; font-weight:600; text-decoration:none; }
.site-footer nav a:hover { background:var(--surface-lift); }
.footer-brand { text-decoration:none; text-align:center; font-size:13px; font-weight:700; }
.footer-brand span { display:block; margin-top:4px; font-size:12px; font-weight:400; color:var(--muted); }

/* ---- inner pages ------------------------------------------------------ */

.legal-page,.detail-page,.document { padding-block:44px 20px; }
.legal-page,.document { max-width:820px; }
.back-link { display:inline-block; margin-bottom:32px; font-size:14px; font-weight:600; color:var(--muted); text-decoration:none; }
.back-link:hover { color:var(--paper); }
.legal-page h1,.detail-page h1,.document h1 {
  font-size:clamp(2.2rem,4.8vw,3.6rem); font-weight:800; letter-spacing:-.045em; line-height:1.02; margin:0 0 20px;
}
.legal-page > p { color:var(--muted); max-width:62ch; }
.legal-intro { font-size:1.1rem; }

.legal-app { margin-top:28px; padding:clamp(24px,2.6vw,32px); background:var(--surface); border:1px solid var(--edge); border-radius:26px; }
.legal-app h2 { font-size:1.2rem; font-weight:700; letter-spacing:-.02em; margin:0 0 8px; }
.legal-app > p { color:var(--muted); font-size:.94rem; max-width:60ch; }
.legal-app h2 + h2 { margin-top:28px; }

.legal-links { list-style:none; margin:18px 0 0; padding:0; border:1px solid var(--edge-soft); border-radius:18px; overflow:hidden; }
.legal-links li + li { border-top:1px solid var(--edge-soft); }
.legal-links a {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 18px; font-size:.96rem; font-weight:600; text-decoration:none;
  background:rgba(15,18,38,.35);
}
.legal-links a:hover { background:var(--surface-lift); }
.legal-links span { color:var(--muted); flex-shrink:0; }
.legal-links .legal-doc { color:var(--paper); }

dl { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.7fr); margin:18px 0 0; font-size:.95rem; }
dt { padding:13px 0; color:var(--muted); border-top:1px solid var(--edge-soft); }
dd { padding:13px 0; margin:0; border-top:1px solid var(--edge-soft); overflow-wrap:anywhere; }

/* ---- app detail ------------------------------------------------------- */

.detail-head { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.detail-head h1 { margin:0; }
.detail-category { color:var(--muted); font-size:.96rem; margin:0 0 32px; }
.detail-lead {
  font-size:clamp(1.5rem,3.1vw,2.3rem); font-weight:700; letter-spacing:-.035em; line-height:1.12;
  margin:0 0 44px; max-width:19ch;
}
.detail-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:56px; align-items:start; }
.detail-grid p { color:var(--muted); max-width:62ch; }
.detail-grid > .run-scene {
  position:relative; min-height:440px; border-radius:26px; overflow:hidden;
  background:var(--accent); border:1px solid var(--edge);
}
.detail-grid > .run-scene::before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(158deg,rgba(15,18,38,.70),rgba(15,18,38,.94));
}
.detail-grid > .run-scene > * { position:relative; z-index:1; }
.release-note { margin-top:36px; padding:26px 28px; background:var(--surface); border:1px solid var(--edge); border-radius:24px; }
.release-note h2 { font-size:1.1rem; font-weight:700; margin:0 0 8px; }
.release-note p { margin:0; font-size:.94rem; }

/* ---- supplied legal documents read on a light sheet ------------------- */

.document-app { color:var(--muted); font-size:.96rem; margin:0 0 28px; }
.legal-body { padding:clamp(26px,3vw,42px); border-radius:26px; background:#f7f6ff; color:#221d40; font-size:1rem; line-height:1.7; }
.legal-body a { color:#4634a8; }
.legal-body h2 { font-size:1.35rem; letter-spacing:-.02em; margin:32px 0 10px; }
.legal-body h3 { font-size:1.1rem; margin:24px 0 8px; }
.legal-body > :first-child { margin-top:0; }
.legal-body ul { padding-left:1.3em; }
.legal-body li { margin-bottom:.4em; }
.legal-body .note { padding:14px 18px; border-radius:14px; background:#e9e5ff; font-weight:600; }
.legal-body table { width:100%; border-collapse:collapse; margin:14px 0 4px; font-size:.95rem; }
.legal-body th,.legal-body td { padding:10px 12px 10px 0; text-align:left; vertical-align:top; border-bottom:1px solid #dcd7f2; }
.legal-body th { font-size:.85rem; color:#4c4570; }
.detail-links { margin-top:26px; font-size:.95rem; }
.detail-links a { color:var(--paper); text-decoration-color:var(--accent); }

/* ---- narrow ----------------------------------------------------------- */

@media (max-width:900px) {
  .entry { grid-template-columns:1fr; }
  .entry-art,.entry:nth-child(even) .entry-art { order:1; min-height:300px; }
  .entry-body,.entry:nth-child(even) .entry-body { order:2; }
  .detail-grid { grid-template-columns:1fr; gap:34px; }
  .detail-grid > .run-scene { min-height:380px; }
}

@media (max-width:700px) {
  body { font-size:16px; }
  .wrap { width:calc(100% - 36px); }
  .site-header.wrap { padding-inline:18px; }
  .site-header { gap:10px; padding-block:10px; }
  .brand span { font-size:14px; }
  .brand img { width:28px; height:28px; }
  .site-header nav a { padding:7px 12px; font-size:13px; }
  .entry,.studio,.legal-app { border-radius:24px; }
  dl { grid-template-columns:1fr; }
  dt { padding-bottom:0; }
  dd { padding-top:4px; border-top:0; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .run-track { animation:none; }
}