/* FlexQ landing — Ember Neon ported to the web. Zero deps, system + bundled-free fonts. */
:root {
    --bg: oklch(0.09 0.012 60);
    --surface-1: oklch(0.15 0.012 60);
    --surface-2: oklch(0.2 0.014 62);
    --fg: oklch(0.96 0.005 60);
    --fg-muted: oklch(0.78 0.008 60);
    --fg-faint: oklch(0.56 0.008 60);
    --accent: oklch(0.8 0.15 70);
    --neon: oklch(0.87 0.21 78);
    --neon-mid: oklch(0.8 0.18 72);
    --glow-sm: 0 0 2px oklch(0.87 0.21 78 / 0.9), 0 0 8px oklch(0.8 0.18 72 / 0.5);
    --glow: 0 0 2px oklch(0.87 0.21 78 / 0.9), 0 0 10px oklch(0.8 0.18 72 / 0.6), 0 0 28px oklch(0.8 0.18 72 / 0.25);
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
    background:
        radial-gradient(110% 60% at 50% -10%, oklch(0.16 0.04 62 / 0.8), transparent 60%),
        radial-gradient(80% 50% at 85% 110%, oklch(0.14 0.05 70 / 0.5), transparent 55%),
        var(--bg);
    color: var(--fg);
    font: 400 17px/1.6 'Avenir Next', 'Helvetica Neue', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
.mono { font-family: 'SF Mono', ui-monospace, Menlo, monospace; font-size: 0.85em; letter-spacing: 0.04em; }
.dim { color: var(--fg-faint); }
em { font-style: normal; color: var(--neon); text-shadow: 0 0 14px oklch(0.8 0.18 72 / 0.45); }
a { color: var(--accent); text-decoration: none; }

/* ambient layers */
#dust { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(120% 95% at 50% 40%, transparent 55%, oklch(0.04 0.01 60 / 0.55) 100%); }
body::after { /* scanline — the product's fingerprint */
    content: ''; position: fixed; inset: 0; z-index: 60; pointer-events: none;
    background: repeating-linear-gradient(transparent 0 2px, oklch(0 0 0 / 0.045) 2px 3px); }
main, .nav, .footer { position: relative; z-index: 2; }

/* nav */
.nav { display: flex; justify-content: space-between; align-items: center; max-width: 1080px; margin: 0 auto; padding: 22px 24px; }
.nav-brand { display: flex; align-items: center; gap: 10px; }
.nav-brand img { border-radius: 7px; }
.wordmark { font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 14px; color: var(--neon);
    text-shadow: 0 0 1px oklch(0.96 0.05 70 / 0.9), 0 0 10px oklch(0.8 0.15 70 / 0.5); }
.nav-links { display: flex; gap: 26px; font-size: 14px; }
.nav-links a { color: var(--fg-muted); transition: color 0.2s, text-shadow 0.2s; }
.nav-links a:hover { color: var(--neon); text-shadow: 0 0 10px oklch(0.8 0.18 72 / 0.5); }
.lang-switch { border: 1px solid oklch(0.8 0.15 70 / 0.3); border-radius: 8px; padding: 3px 10px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }

/* hero */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 56px;
    max-width: 1080px; margin: 0 auto; padding: 88px 24px 96px; position: relative; }
.hero::before { content: ''; position: absolute; inset: -40px 0 30%; z-index: -1;
    background-image: linear-gradient(oklch(0.8 0.17 72 / 0.07) 1px, transparent 1px),
        linear-gradient(90deg, oklch(0.8 0.17 72 / 0.07) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(75% 80% at 50% 30%, #000 30%, transparent 75%);
    mask-image: radial-gradient(75% 80% at 50% 30%, #000 30%, transparent 75%); }
.kicker { font-family: ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: 0.16em; color: var(--accent); margin-bottom: 18px; }
h1 { font-size: clamp(40px, 6vw, 64px); line-height: 1.04; letter-spacing: -0.02em; font-weight: 700; }
.hero-sub { margin: 26px auto 0; font-size: 19px; line-height: 1.65; color: var(--fg-muted); max-width: 56ch; }
.glass-sub { padding: 18px 26px; border-radius: 16px; border: 1px solid oklch(0.8 0.15 70 / 0.14);
    background: linear-gradient(oklch(0.14 0.014 62 / 0.5), oklch(0.11 0.012 60 / 0.5)); backdrop-filter: blur(6px); }
.hl { color: var(--neon); font-weight: 600; text-shadow: 0 0 12px oklch(0.8 0.18 72 / 0.4); white-space: nowrap; }
.cta-row { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; justify-content: center; }
.cta-row.center { justify-content: center; }
.btn { display: inline-block; padding: 13px 26px; border-radius: 12px; font-weight: 600; font-size: 15px; transition: transform 0.2s var(--ease), box-shadow 0.25s; }
.btn-primary { background: linear-gradient(180deg, oklch(0.84 0.16 72), oklch(0.74 0.15 68)); color: oklch(0.2 0.04 70);
    box-shadow: var(--glow-sm), inset 0 1px 0 oklch(1 0 0 / 0.25); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--glow), inset 0 1px 0 oklch(1 0 0 / 0.25); }
.btn-ghost { border: 1px solid oklch(0.8 0.15 70 / 0.35); color: var(--fg-muted); }
.btn-ghost:hover { border-color: oklch(0.8 0.15 70 / 0.7); color: var(--fg); box-shadow: var(--glow-sm); }
.hero-fine { margin-top: 18px; font-size: 13px; color: var(--fg-faint); }

/* hero deck — two product cards, auto-shuffling */
.hero-shot { perspective: 1200px; justify-self: center; }

.hero-shot { position: relative; min-height: 540px; width: min(560px, 92vw); }
.hero-shot .card { position: absolute; left: 50%; top: 0; border-radius: 14px;
    transition: transform 0.8s var(--ease), filter 0.8s, opacity 0.8s, z-index 0s 0.4s;
    box-shadow: 0 0 0 1px oklch(0.8 0.18 72 / 0.4), 0 0 24px oklch(0.8 0.18 72 / 0.25), 0 36px 70px oklch(0 0 0 / 0.55); }
.hero-shot .card-front { width: 68%; z-index: 2; opacity: 1; filter: brightness(1);
    transform: translateX(-72%) rotateX(calc(var(--rx, 10) * 1deg)) rotate(-4deg); transform-origin: 50% 0; }
.hero-shot .card-back { width: 60%; z-index: 1; opacity: 0.92; filter: brightness(0.78);
    transform: translateX(-18%) translateY(5%) rotateX(calc(var(--rx, 10) * 1deg)) rotate(7deg); transform-origin: 50% 0; }
.hero-shot .card-back:hover { transform: translateX(-12%) translateY(3%) rotateX(calc(var(--rx, 10) * 1deg)) rotate(8deg); filter: brightness(0.95); }

/* open source section */
.oss { max-width: 1080px; margin: 0 auto; padding: clamp(56px, 9vw, 96px) 24px; position: relative; }
.oss-inner { max-width: 640px; position: relative; z-index: 1; }
.oss::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: url('/assets/bg-opensource.webp') right center / contain no-repeat; opacity: 0.8; mix-blend-mode: screen; }
.oss-sub { margin-top: 20px; color: var(--fg-muted); font-size: 17px; }

/* section divider */
.hairline { height: 1px; max-width: 1080px; margin: 0 auto;
    background: linear-gradient(90deg, transparent, oklch(0.87 0.21 78 / 0.55) 30%, oklch(0.8 0.15 70 / 0.2) 70%, transparent);
    box-shadow: 0 0 8px oklch(0.8 0.18 72 / 0.35); }

/* features bento */
.features { max-width: 1080px; margin: 0 auto; padding: clamp(56px, 9vw, 96px) 24px; }
h2 { font-size: clamp(28px, 4vw, 42px); line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 48px; }
.bento { display: flex; flex-direction: column; gap: 26px; }
.tile { position: relative; overflow: hidden; padding: 26px; border-radius: 16px; border: 1px solid oklch(0.8 0.15 70 / 0.16);
    background:
        radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), oklch(0.8 0.17 72 / 0.07), transparent 65%),
        linear-gradient(90deg, var(--tile-bg, #19140e) 44%, color-mix(in oklab, var(--tile-bg, #19140e) 72%, transparent) 62%, transparent 88%),
        var(--tile-art, none) right center / cover no-repeat var(--tile-bg, #19140e);
    backdrop-filter: blur(8px);
    transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s; }
.tile:hover { transform: translateY(-4px); border-color: oklch(0.8 0.17 72 / 0.45); box-shadow: 0 0 18px oklch(0.8 0.18 72 / 0.18), 0 18px 40px oklch(0 0 0 / 0.4); }
.tile { width: 100%; }
.tile h3 { font-size: 18px; margin-bottom: 10px; color: var(--neon); font-weight: 650; }
.tile p { font-size: 15px; color: var(--fg-muted); }
.tile-img { position: absolute; right: -30px; bottom: -90px; width: 270px; border-radius: 12px; opacity: 0.85;
    box-shadow: 0 0 0 1px oklch(0.8 0.18 72 / 0.3), 0 18px 50px oklch(0 0 0 / 0.5); transform: rotate(-4deg); }
.tile-wide:has(.tile-img) { min-height: 230px; }
.tile-wide:has(.tile-img) p { max-width: 55%; }

/* install */
.install { max-width: 760px; margin: 0 auto; padding: clamp(56px, 9vw, 96px) 24px clamp(72px, 11vw, 120px); text-align: center; }
.steps { list-style: none; padding: 0; margin: 40px 0; display: flex; flex-direction: column; gap: 18px; text-align: left; }
.steps li { display: flex; gap: 18px; align-items: baseline; padding: 18px 22px; border-radius: 14px;
    border: 1px solid oklch(0.8 0.15 70 / 0.14); background: oklch(0.14 0.012 60 / 0.7); color: var(--fg-muted); }
.step-n { font-family: ui-monospace, Menlo, monospace; color: var(--neon); font-size: 13px; letter-spacing: 0.1em;
    text-shadow: 0 0 8px oklch(0.8 0.18 72 / 0.5); flex-shrink: 0; }

/* footer */
.footer-social { display: flex; gap: 18px; align-items: center; }
.footer-social a { color: var(--fg-faint); transition: color 0.2s, filter 0.2s; }
.footer-social a:hover { color: var(--neon); filter: drop-shadow(0 0 6px oklch(0.8 0.18 72 / 0.6)); }

.footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; max-width: 1080px; margin: 0 auto; padding: 28px 24px 40px;
    border-top: 1px solid oklch(0.8 0.15 70 / 0.12); font-size: 12px; }

/* full-width low strip (local data) */
.tile-strip { min-height: 0; display: flex; align-items: center; padding: 20px 26px; }
.tile-strip .footnote { margin-top: 10px; font-size: 12.5px; color: var(--fg-faint); }

/* per-tile art */
.t-invisible { --tile-art: url('/assets/bg2-invisible.webp'); --tile-bg: #17120c; }
.t-keys { --tile-art: url('/assets/bg2-keys.webp'); --tile-bg: #130e08; }
.t-codebase { --tile-art: url('/assets/bg2-codebase.webp'); --tile-bg: #17120c; }
.t-recall { --tile-art: url('/assets/bg2-recall.webp'); --tile-bg: #140f09; }
.tile { min-height: 170px; padding: 30px 34px; }
.tile p { max-width: 60ch; }

/* tide — plates breathe at staggered phases */
@keyframes tide { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
/* tiles slide in from alternating sides, then float gently; the one nearest the
   viewport center lights up (focus changes light only — animation owns transform) */
@keyframes float-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
html.js .bento .tile { opacity: 0; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), border-color 0.5s, box-shadow 0.5s, background-color 0.5s; }
html.js .bento .tile:nth-child(odd) { transform: translateX(-64px); }
html.js .bento .tile:nth-child(even) { transform: translateX(64px); }
html.js .bento .tile.in { opacity: 0.6; transform: translateX(0); animation: float-soft 7s ease-in-out 1.1s infinite; }
html.js .bento .tile.in:nth-child(even) { animation-duration: 8.6s; animation-delay: 1.4s; }
html.js .bento .tile.in.focus { opacity: 1; border-color: oklch(0.8 0.17 72 / 0.55);
    box-shadow: 0 0 26px oklch(0.8 0.18 72 / 0.24), 0 18px 44px oklch(0 0 0 / 0.45); }

/* liquid CTA — SVG turbulence ripple on hover */
.btn-primary:hover { filter: url(#liquid); }

/* reveal on scroll */
html.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
html.js .reveal.in { opacity: 1; transform: none; }

@media (max-width: 880px) {
    .hero { grid-template-columns: 1fr; padding-top: 40px; text-align: center; }
    .hero-sub { margin-inline: auto; }
    .cta-row { justify-content: center; }
    .bento { grid-template-columns: 1fr; }
    .tile-wide { grid-column: span 1; }
    .tile-wide:has(.tile-img) p { max-width: 100%; }
    .tile-img { display: none; }
    .hero-shot .shot-b { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .tile.in { animation: none; }
    .hero-shot img { transform: none; }
    html { scroll-behavior: auto; }
}