/* Starvale — the app sites' editorial rhythm as a star chart: ink on paper by day, a night sky after dark. */
:root { color-scheme: light dark; --paper:#f5f4ef; --ink:#151b2e; --muted:#5c6377; --line:#dfded5; --card:#fdfcf9; --soft:#eceae2; --accent:#8a5a06; --star:#d2941a; --glow:#e2e5f5; --nav:rgb(245 244 239 / 88%); --panel:#151b2e; --panel-ink:#f1f2f8; --panel-line:#151b2e; --shadow:rgb(21 27 46 / 14%); --serif:"Iowan Old Style","Palatino Linotype",Georgia,serif; }
@media (prefers-color-scheme: dark) {
  :root { --paper:#0b1020; --ink:#eef0f8; --muted:#a2aac2; --line:#232b47; --card:#10172d; --soft:#151c36; --accent:#f0c466; --star:#f0c466; --glow:#1a2350; --nav:rgb(11 16 32 / 84%); --panel:#131a35; --panel-ink:#eef0f8; --panel-line:#2a3357; --shadow:rgb(0 0 0 / 45%); }
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:110px; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img,svg { display:block; max-width:100%; }
img { height:auto; }
h1,h2,h3,p,ul { margin:0; }
ul { padding:0; list-style:none; }
p { text-wrap:pretty; }
a { color:inherit; text-decoration:none; }
a { -webkit-tap-highlight-color:transparent; }
a:focus-visible { outline:3px solid var(--accent); outline-offset:5px; border-radius:5px; }
::selection { background:#f0c466; color:#151b2e; }
em { font-family:var(--serif); font-weight:400; }
.wrap { width:min(1200px,calc(100% - 80px)); margin-inline:auto; }
.skip-link { position:fixed; top:10px; left:20px; z-index:30; transform:translateY(-150%); padding:14px 20px; background:var(--ink); color:var(--paper); border-radius:10px; }
.skip-link:focus { transform:translateY(0); }

.nav { position:sticky; top:16px; z-index:10; margin-top:16px; }
.nav-inner { width:min(1280px,calc(100% - 48px)); margin:auto; padding:12px 22px 12px 18px; display:flex; align-items:center; gap:28px; background:var(--nav); border:1px solid var(--line); border-radius:20px; box-shadow:0 4px 24px rgb(21 27 46 / 5%); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.brand { display:inline-flex; align-items:center; gap:9px; font-size:21px; font-weight:650; letter-spacing:-.7px; white-space:nowrap; }
.mark-star,.spark { fill:var(--star); }
.mark-vale { fill:none; stroke:var(--ink); stroke-width:2.4; stroke-linecap:round; }
.nav-links { display:flex; align-items:center; gap:28px; margin-left:auto; font-size:13px; font-weight:550; }
.nav-links a { padding-block:10px; }
.nav-links a:hover,.site-footer a:hover,.text-link:hover { color:var(--accent); }

.hero { position:relative; isolation:isolate; padding-top:84px; }
.hero-glow { position:absolute; z-index:-1; inset:6% 0 -4%; background:radial-gradient(closest-side ellipse at 50% 56%,var(--glow) 0%,transparent 100%); pointer-events:none; }
.hero-copy { text-align:center; }
.eyebrow,.kicker { font-size:11px; font-weight:650; letter-spacing:.085em; line-height:1.6; }
.eyebrow { display:inline-flex; gap:9px; align-items:center; padding:8px 14px; background:var(--paper); border:1px solid var(--line); border-radius:30px; text-transform:uppercase; }
.status-dot { width:6px; height:6px; border-radius:50%; background:var(--star); }
.hero h1 { margin:25px auto 23px; font-size:clamp(52px,8.2vw,112px); font-weight:600; line-height:1.03; letter-spacing:-.065em; text-wrap:balance; }
.hero h1 em { letter-spacing:-.05em; color:var(--accent); }
.lede { font-size:clamp(18px,1.7vw,22px); line-height:1.55; max-width:620px; margin:auto; color:var(--muted); }

/* The star chart: each app a star on the valley line, linking to its card. */
.chart { margin-top:44px; }
.chart svg { width:100%; height:auto; overflow:visible; }
.chart-compact { display:none; max-width:460px; margin-inline:auto; }
.ridge { fill:none; stroke:var(--ink); stroke-opacity:.3; stroke-width:1.5; stroke-dasharray:1.5 8; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.dust circle { fill:var(--ink); opacity:.3; }
.dust .spark { opacity:.75; }
.star-icon { filter:drop-shadow(0 8px 14px var(--shadow)); transform-box:fill-box; transform-origin:center; transition:transform .25s ease; }
.star:hover .star-icon,.star:focus-visible .star-icon { transform:translateY(-5px) scale(1.05); }
.star:focus-visible { outline:none; }
.star:focus-visible .star-label { fill:var(--accent); text-decoration:underline; }
.star-label { fill:var(--ink); font-size:15px; font-weight:600; letter-spacing:-.01em; text-anchor:middle; }
.chart-compact .star-label { font-size:12.5px; }
.star-note { fill:var(--muted); font-size:10px; font-weight:650; letter-spacing:.1em; text-anchor:middle; }
.chart-compact .star-note { font-size:9px; }
.slot rect { fill:none; stroke:var(--muted); stroke-width:1.5; stroke-dasharray:4 6; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.slot .star-label { fill:var(--muted); font-weight:550; }
@media (prefers-color-scheme: dark) {
  .dust circle { fill:#fff; opacity:.5; }
  .ridge { stroke-opacity:.38; }
}
@keyframes twinkle { 50% { opacity:.12; } }
.dust .tw1 { animation:twinkle 5.5s ease-in-out infinite; }
.dust .tw2 { animation:twinkle 7s ease-in-out 1.6s infinite; }
.dust .tw3 { animation:twinkle 9s ease-in-out 3.1s infinite; }

.section-space { padding-block:120px 20px; }
.section-head { max-width:720px; margin-bottom:56px; }
.kicker { color:var(--accent); }
.section-head h2,.approach h2 { margin:14px 0 18px; font-size:clamp(40px,5vw,64px); font-weight:600; line-height:1.06; letter-spacing:-.05em; }
.section-head h2 em { color:var(--accent); letter-spacing:-.04em; }
.section-head p:not(.kicker) { font-size:18px; line-height:1.6; color:var(--muted); }

.app-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.app { display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:28px; overflow:hidden; scroll-margin-top:110px; transition:border-color .2s; }
.app:hover { border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); }
.app-stage { display:block; aspect-ratio:16/9; background:var(--soft); border-bottom:1px solid var(--line); overflow:hidden; }
.app-stage picture { display:block; height:100%; }
.app-stage img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.app-stage .anchor-top { object-position:top; }
.app:hover .app-stage img { transform:scale(1.025); }
.app-body { display:flex; flex-direction:column; gap:14px; flex:1; padding:28px 30px 30px; }
.app-head { display:flex; align-items:center; gap:14px; }
.app-head img,.soon-head img { width:56px; height:56px; filter:drop-shadow(0 4px 8px var(--shadow)); }
.app h3,.soon-card h3 { font-size:24px; font-weight:650; letter-spacing:-.035em; line-height:1.15; }
.app-platforms { font-size:12px; font-weight:600; letter-spacing:.03em; color:var(--muted); }
.app-head .app-platforms { margin-top:3px; }
.app-motto { font-family:var(--serif); font-size:23px; line-height:1.25; letter-spacing:-.02em; }
.app-summary { flex:1; font-size:16px; line-height:1.6; color:var(--muted); }
.app-links { display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; margin-top:8px; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:16px; padding:14px 20px; border:1px solid var(--ink); border-radius:12px; font-size:14px; font-weight:600; line-height:1.3; transition:transform .2s; }
.primary { background:var(--ink); color:var(--paper); box-shadow:0 5px 14px rgb(21 27 46 / 12%); }
.button:hover { transform:translateY(-2px); }
.text-link { padding-block:12px; font-size:14px; font-weight:600; }

.soon-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.soon-card { display:flex; flex-direction:column; gap:12px; padding:28px; background:var(--card); border:1px solid var(--line); border-radius:24px; scroll-margin-top:110px; }
.soon-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:6px; }
.pill { padding:6px 11px; border:1px solid var(--line); border-radius:30px; font-size:11px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); white-space:nowrap; }
.soon-card .app-motto { font-size:20px; }
.soon-card .app-summary { font-size:15px; }
.soon-card.more { justify-content:center; background:none; border-style:dashed; border-color:color-mix(in srgb,var(--muted) 55%,transparent); }
.soon-card.more svg { margin-bottom:6px; }
.soon-card.more .app-summary { flex:0; }

.approach { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr); gap:56px; padding:56px; background:var(--panel); color:var(--panel-ink); border:1px solid var(--panel-line); border-radius:32px; }
.approach .kicker,.approach h2 em { color:#f0c466; }
.approach h2 { margin-bottom:0; }
.approach-list { display:grid; gap:22px; align-content:center; }
.approach-list li { font-size:17px; line-height:1.6; color:color-mix(in srgb,var(--panel-ink) 76%,transparent); }
.approach-list strong { display:block; margin-bottom:2px; color:var(--panel-ink); font-weight:650; }

.site-footer { margin-top:120px; padding:34px 0 46px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); }
.site-footer .wrap { display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; }
.footer-brand { font-weight:650; color:var(--ink); font-size:16px; }
.site-footer nav { display:flex; flex-wrap:wrap; gap:0 22px; margin-left:auto; }
.site-footer nav a { padding-block:10px; }

.not-found { text-align:center; padding-block:140px 40px; }
.not-found svg { margin:0 auto 26px; }
.not-found h1 { font-size:clamp(44px,6vw,76px); font-weight:600; letter-spacing:-.055em; line-height:1.05; margin-bottom:22px; }
.not-found .button { margin-top:32px; }

.reveal { opacity:1; transform:none; }
.js .reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease,transform .7s ease,border-color .2s; }
.js .reveal.shown { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .js .reveal { opacity:1; transform:none; transition:none; }
  .button,.star-icon,.app-stage img { transition:none; }
  .dust .tw1,.dust .tw2,.dust .tw3 { animation:none; }
  .star:hover .star-icon,.app:hover .app-stage img { transform:none; }
}

@media (max-width: 1060px) {
  .soon-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .chart-wide { display:none; }
  .chart-compact { display:block; }
}
@media (max-width: 860px) {
  .wrap { width:calc(100% - 48px); }
  .nav-links { gap:20px; }
  .app-grid { grid-template-columns:1fr; }
  .approach { grid-template-columns:1fr; gap:28px; padding:32px; }
  .section-space { padding-block:84px 10px; }
  .section-head { margin-bottom:40px; }
  .site-footer nav { margin-left:0; width:100%; }
}
@media (max-width: 520px) {
  .wrap { width:calc(100% - 32px); }
  .nav-inner { width:calc(100% - 24px); gap:12px; padding:10px 14px 10px 12px; }
  .brand { font-size:18px; }
  .nav-links { gap:16px; font-size:12px; }
  .nav-links a[href="#approach"] { display:none; }
  .hero { padding-top:60px; }
  .soon-grid { grid-template-columns:1fr; }
  .app-body { padding:22px 22px 24px; }
  .approach { padding:24px; border-radius:24px; }
  .app,.soon-card { border-radius:22px; }
}