/* ===== Console.Matrix landing — Matrix-style hyper-modern theme ===== */
:root{
    --bg:#040706;
    --bg-2:#070d09;
    --ink:#d6ffe1;
    --ink-dim:#7fb592;
    --green:#00ff85;
    --green-2:#00b85b;
    --green-soft:rgba(0,255,133,.12);
    --green-glow:rgba(0,255,133,.45);
    --red:#ff4060;
    --yellow:#ffd166;
    --line:rgba(0,255,133,.22);
    --line-soft:rgba(0,255,133,.10);
    --card:rgba(8,18,12,.66);
    --card-2:rgba(10,22,15,.85);
    --radius:14px;
    --mono:"JetBrains Mono","Cascadia Mono",Consolas,Menlo,monospace;
    --display:"Orbitron","JetBrains Mono",sans-serif;
    /* Matrix rain palette — overridden by light theme below */
    --rain-bg:#040706;
    --rain-fade:rgba(4,7,6,0.16);
    --rain-head:#E8FFE8;
    --rain-a:#00ff85;
    --rain-b:#00b85b;
}

/* ===== Light theme: warm cream, charcoal ink, zero green ===== */
/* Designed as a flat editorial monochrome — Substack/Notion vibe — so
   nothing reads as a faded dark theme. Accents collapse onto the ink
   colour; what was neon green becomes the headline weight and that's it. */
[data-theme="light"]{
    --bg:#f4ede0;
    --bg-2:#ede4d2;
    --ink:#0d0d0d;
    --ink-dim:#4a4a4a;
    --green:#0d0d0d;
    --green-2:#0d0d0d;
    --green-soft:rgba(0,0,0,.05);
    --green-glow:rgba(0,0,0,.16);
    --red:#9a1a2a;
    --yellow:#7a5200;
    --line:rgba(0,0,0,.18);
    --line-soft:rgba(0,0,0,.09);
    --card:rgba(255,250,240,.78);
    --card-2:rgba(255,250,240,.92);
    /* Matrix rain: dark drops on cream. fade at 0.04 keeps long jet-black
       trails (vs the 0.16 used in dark mode) so the rain reads as bold,
       not as ghosted grey. head/a/b stay near-black for max contrast. */
    --rain-bg:#f4ede0;
    --rain-fade:rgba(244,237,224,0.04);
    --rain-head:#000000;
    --rain-a:#0d0d0d;
    --rain-b:#262626;
}
[data-theme="light"] body{ background:var(--bg); color:var(--ink); }
[data-theme="light"] .scanline{
    background:repeating-linear-gradient(to bottom,
        rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,
        rgba(0,0,0,.07) 3px,rgba(0,0,0,0) 4px);
    mix-blend-mode:multiply;opacity:.4;
}
[data-theme="light"] .vignette{
    background:radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.08) 75%, rgba(0,0,0,.18) 100%);
}
[data-theme="light"] .topbar{
    background:rgba(239,232,216,.78);
    border-bottom:1px solid var(--line);
}
[data-theme="light"] .brand,
[data-theme="light"] .hero-stats b,
[data-theme="light"] .term-body .g,
[data-theme="light"] .mock-side li.active,
[data-theme="light"] .mock-tele b.g,
[data-theme="light"] .dl-card b,
[data-theme="light"] .foot-prompt .cursor,
[data-theme="light"] .term-body .cur,
[data-theme="light"] .badge-dot,
[data-theme="light"] .section-title .prompt,
[data-theme="light"] summary::before,
[data-theme="light"] .scroll-hint span{
    color:#0a0a0a;text-shadow:none;background-color:transparent;border-color:#0a0a0a;
}
[data-theme="light"] .badge-dot{ background:#0a0a0a; box-shadow:none; }
[data-theme="light"] .term-body .cur,
[data-theme="light"] .foot-prompt .cursor{ background:#0a0a0a; box-shadow:none; }
[data-theme="light"] .mock-tele .bar i{ background:#0a0a0a; box-shadow:none; }
[data-theme="light"] .btn-primary{
    background:linear-gradient(180deg,#1a1a1a,#000);
    color:#efe8d8; box-shadow:0 0 0 1px rgba(0,0,0,.18);
}
[data-theme="light"] .btn-primary:hover{ box-shadow:0 4px 18px rgba(0,0,0,.25); }
[data-theme="light"] .btn-ghost{ background:rgba(255,250,240,.55); color:#0a0a0a; }
[data-theme="light"] .ghost{ background:rgba(255,250,240,.55); color:#0a0a0a; }
[data-theme="light"] .ghost:hover,
[data-theme="light"] .btn-ghost:hover,
[data-theme="light"] a:hover,
[data-theme="light"] .nav a:hover,
[data-theme="light"] .card:hover,
[data-theme="light"] .dl-card:hover{ color:#0a0a0a;border-color:#0a0a0a;text-shadow:none;box-shadow:0 6px 22px rgba(0,0,0,.12); }
[data-theme="light"] .term,
[data-theme="light"] .mock-window{
    background:linear-gradient(180deg,#fbf6e8,#f3ecd8);
    box-shadow:0 0 0 1px rgba(0,0,0,.08), 0 18px 40px rgba(0,0,0,.12);
}
[data-theme="light"] .term-bar,
[data-theme="light"] .mock-bar{ background:linear-gradient(180deg,rgba(0,0,0,.05),transparent); }
[data-theme="light"] .term-body{ color:#0a0a0a; }
[data-theme="light"] .term-body .dim{ color:#4a4a4a; }
[data-theme="light"] .term-body .y{ color:#7a5200; }
[data-theme="light"] .msg.ai{ background:rgba(0,0,0,.04); color:#0a0a0a; }
[data-theme="light"] .msg.user{ background:rgba(0,0,0,.06); color:#0a0a0a; }
[data-theme="light"] .mock-side li.active{ background:rgba(0,0,0,.08); }
[data-theme="light"] .ct-field input,
[data-theme="light"] .ct-field textarea{
    background:#fbf6e8; color:#0a0a0a; border:1px solid var(--line);
}
[data-theme="light"] .ct-field input:focus,
[data-theme="light"] .ct-field textarea:focus{
    border-color:#0a0a0a; box-shadow:0 0 0 3px rgba(0,0,0,.10);
}
[data-theme="light"] .ct-field input:-webkit-autofill,
[data-theme="light"] .ct-field textarea:-webkit-autofill{
    -webkit-text-fill-color:#0a0a0a !important;
    -webkit-box-shadow:0 0 0 1000px #fbf6e8 inset !important;
    box-shadow:0 0 0 1000px #fbf6e8 inset !important;
    caret-color:#0a0a0a;
}
[data-theme="light"] ::selection{ background:#0a0a0a; color:#efe8d8; }
[data-theme="light"] .hamburger{ color:#0a0a0a; border-color:var(--line); }
[data-theme="light"] .hamburger span{ background:#0a0a0a; box-shadow:none; }
[data-theme="light"] .nav{ background:rgba(239,232,216,.96); }

/* ===== Theme toggle: layered Unicode symbol (◐ over ●) =====
   Two transparent <span>s stacked at the same coordinates.
   ●  (U+25CF) paints a full grey filled circle (the "right half").
   ◐  (U+25D0) paints only its left half black; right half is transparent
      so the grey ● shows through. Net result: half-black / half-grey
      circle that's a single native font glyph, no rectangle artifact. */
.theme-toggle{
    width:32px;height:32px;background:transparent;border:none;padding:0;
    cursor:pointer;flex-shrink:0;outline:none;
    position:relative;display:inline-grid;place-items:center;
    transition:transform .12s ease, filter .15s ease;
    line-height:1;
}
.theme-toggle span{
    position:absolute;inset:0;display:grid;place-items:center;
    font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols 2",sans-serif;
    font-size:30px;line-height:1;
}
.theme-toggle .ttg-grey  { color:#A0A0A0; }
.theme-toggle .ttg-black { color:#000000; }
.theme-toggle:hover { transform:scale(1.08); filter:drop-shadow(0 0 6px var(--green-glow)); }
.theme-toggle:focus-visible { filter:drop-shadow(0 0 4px var(--green-glow)); }
[data-theme="light"] .theme-toggle:hover { filter:drop-shadow(0 0 6px rgba(0,0,0,.25)); }
@media (pointer: coarse){
    .theme-toggle { width:40px;height:40px; }
    .theme-toggle span { font-size:36px; }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
    font-family:var(--mono);
    color:var(--ink);
    background:var(--bg);
    line-height:1.55;
    overflow-x:hidden;
    min-height:100vh;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;transition:color .15s ease}
a:hover{color:var(--green)}
img{max-width:100%;display:block}
button,select,input{font:inherit;color:inherit}
::selection{background:var(--green);color:#000}

/* ====== Background layers ====== */
#rain{
    position:fixed;inset:0;width:100vw;height:100vh;
    z-index:-3;display:block;background:var(--bg);
    pointer-events:none;
    opacity:.3;
}
.scanline{
    position:fixed;inset:0;z-index:-2;pointer-events:none;
    background:repeating-linear-gradient(to bottom,
        rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,
        rgba(0,0,0,.18) 3px,rgba(0,0,0,0) 4px);
    mix-blend-mode:multiply;opacity:.55;
    animation:scan 7s linear infinite;
}
@keyframes scan{0%{background-position:0 0}100%{background-position:0 80px}}
.vignette{
    position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.55) 75%, rgba(0,0,0,.85) 100%);
}

/* ====== Top bar ====== */
.topbar{
    position:sticky;top:0;z-index:50;
    display:flex;align-items:center;gap:24px;
    padding:14px 28px;
    background:rgba(4,7,6,.55);
    backdrop-filter:blur(12px) saturate(140%);
    -webkit-backdrop-filter:blur(12px) saturate(140%);
    border-bottom:1px solid var(--line);
}
.brand{
    display:flex;align-items:center;gap:10px;
    font-family:var(--display);font-weight:900;letter-spacing:.18em;
    color:var(--green);text-shadow:0 0 12px var(--green-glow);
    font-size:15px;
}
.brand-prompt{color:var(--ink-dim);}
.brand-text{font-size:14px}
.brand .dot{color:var(--green-2)}

.nav{display:flex;gap:26px;margin-left:18px;flex:1}
.nav a{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
.nav a:hover{color:var(--green);text-shadow:0 0 10px var(--green-glow)}

.top-actions{display:flex;align-items:center;gap:10px}
.ghost{
    background:transparent;border:1px solid var(--line);color:var(--ink-dim);
    padding:7px 12px;border-radius:8px;cursor:pointer;font-size:12px;letter-spacing:.1em;
}
.ghost:hover{border-color:var(--green);color:var(--green)}
.btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:9px 16px;border-radius:8px;font-size:13px;letter-spacing:.1em;
    border:1px solid transparent;cursor:pointer;text-transform:uppercase;
    transition:transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn .arrow{transition:transform .12s ease}
.btn:hover .arrow{transform:translateX(3px)}
.btn-primary{
    background:linear-gradient(180deg,#0aff90,#00b85b);
    color:#021008;font-weight:700;
    box-shadow:0 0 22px var(--green-glow), inset 0 0 0 1px rgba(255,255,255,.15);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 0 32px var(--green-glow)}
.btn-ghost{
    border-color:var(--line);color:var(--ink);background:rgba(0,0,0,.4)
}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}
.btn.big{padding:14px 22px;font-size:14px}

@media (max-width:880px){
    .nav{display:none}
    .topbar{padding:12px 16px;gap:12px}
    .brand-text{font-size:13px}
}

/* ====== Sections common ====== */
section{padding:96px 28px;position:relative;max-width:1200px;margin:0 auto}
.section-title{
    font-family:var(--display);font-weight:900;letter-spacing:.14em;
    font-size:clamp(28px,4vw,46px);margin:0 0 8px;color:var(--ink);
    text-shadow:0 0 12px rgba(0,255,133,.25);
}
.section-title .prompt{color:var(--green);margin-right:14px;text-shadow:0 0 12px var(--green-glow)}
.section-lead{margin:0 0 44px;color:var(--ink-dim);font-size:15px;max-width:720px}

/* ====== Hero ====== */
.hero{padding-top:60px;padding-bottom:80px}
.hero-grid{
    display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;
}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr;gap:40px}}

.badge{
    display:inline-flex;align-items:center;gap:8px;
    padding:6px 12px;border:1px solid var(--line);border-radius:999px;
    font-size:11px;letter-spacing:.18em;color:var(--ink-dim);
    background:rgba(0,255,133,.04);
}
.badge-dot{
    width:8px;height:8px;border-radius:50%;background:var(--green);
    box-shadow:0 0 10px var(--green-glow);
    animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.hero-title{
    font-family:var(--display);font-weight:900;letter-spacing:.06em;
    font-size:clamp(40px,7vw,84px);line-height:.98;margin:18px 0 18px;
    text-transform:uppercase;
}
.hero-sub-title{
    display:block;font-family:var(--mono);font-weight:400;letter-spacing:.06em;
    font-size:clamp(15px,1.6vw,20px);color:var(--ink-dim);text-transform:none;
    margin-top:14px;
}

.hero-lead{font-size:16px;max-width:560px;color:#bce6c8;margin:0 0 28px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:36px}
.hero-stats{
    display:flex;gap:36px;list-style:none;margin:0;padding:0;flex-wrap:wrap;
    border-top:1px dashed var(--line-soft);padding-top:22px;max-width:560px
}
.hero-stats li{display:flex;flex-direction:column}
.hero-stats b{font-family:var(--display);font-size:28px;color:var(--green);text-shadow:0 0 12px var(--green-glow)}
.hero-stats span{font-size:11px;letter-spacing:.18em;color:var(--ink-dim);text-transform:uppercase}

/* Glitch title */
.glitch{position:relative;display:inline-block;color:var(--ink)}
.glitch::before,.glitch::after{
    content:attr(data-text);position:absolute;left:0;top:0;width:100%;height:100%;
    overflow:hidden;clip-path:inset(0 0 0 0);
}
.glitch::before{color:var(--green);transform:translate(-2px,0);mix-blend-mode:screen;animation:gl1 4s infinite linear}
.glitch::after{color:#00d4ff;transform:translate(2px,0);mix-blend-mode:screen;animation:gl2 5s infinite linear}
@keyframes gl1{
    0%,100%{clip-path:inset(0 0 90% 0)}
    20%{clip-path:inset(40% 0 40% 0)}
    40%{clip-path:inset(80% 0 5% 0)}
    60%{clip-path:inset(20% 0 60% 0)}
    80%{clip-path:inset(60% 0 20% 0)}
}
@keyframes gl2{
    0%,100%{clip-path:inset(80% 0 5% 0)}
    25%{clip-path:inset(20% 0 60% 0)}
    50%{clip-path:inset(60% 0 30% 0)}
    75%{clip-path:inset(10% 0 80% 0)}
}

/* Terminal mock */
.hero-terminal{position:relative}
.term{
    position:relative;border:1px solid var(--line);border-radius:var(--radius);
    background:linear-gradient(180deg,rgba(6,12,9,.95),rgba(4,8,6,.95));
    overflow:hidden;box-shadow:
        0 0 0 1px rgba(0,255,133,.10),
        0 30px 80px rgba(0,0,0,.7),
        0 0 100px rgba(0,255,133,.15);
}
.term-bar{
    display:flex;align-items:center;gap:8px;
    padding:10px 14px;border-bottom:1px solid var(--line-soft);
    background:linear-gradient(180deg,rgba(0,255,133,.06),transparent);
}
.term-bar i{width:11px;height:11px;border-radius:50%;display:inline-block}
.term-bar .r{background:#ff5f57}
.term-bar .y{background:#febc2e}
.term-bar .g{background:#28c840}
.term-title{margin-left:auto;color:var(--ink-dim);font-size:12px;letter-spacing:.06em}
.term-body{
    margin:0;padding:18px 22px;font-family:var(--mono);font-size:13px;
    min-height:300px;white-space:pre-wrap;color:#c9ffd9;
}
.term-body .g{color:var(--green);text-shadow:0 0 10px var(--green-glow)}
.term-body .dim{color:var(--ink-dim)}
.term-body .y{color:var(--yellow)}
.term-body .cur{
    display:inline-block;width:9px;height:16px;background:var(--green);vertical-align:-2px;
    margin-left:2px;animation:blink 1s steps(2) infinite;box-shadow:0 0 10px var(--green-glow);
}
@keyframes blink{50%{opacity:0}}

.hero-glow{
    position:absolute;inset:-10% -10% -10% -10%;z-index:-1;
    background:radial-gradient(closest-side, rgba(0,255,133,.18), transparent 70%);
    filter:blur(20px);pointer-events:none;
}

/* Scroll hint */
.scroll-hint{
    position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
    display:flex;flex-direction:column;gap:4px;
}
.scroll-hint span{
    width:14px;height:14px;border-right:1px solid var(--green);border-bottom:1px solid var(--green);
    transform:rotate(45deg);opacity:.4;animation:fall 1.6s infinite;
}
.scroll-hint span:nth-child(2){animation-delay:.2s}
.scroll-hint span:nth-child(3){animation-delay:.4s}
@keyframes fall{0%{opacity:0;transform:rotate(45deg) translate(-6px,-6px)}50%{opacity:1}100%{opacity:0;transform:rotate(45deg) translate(6px,6px)}}

/* ====== Cards ====== */
.cards{
    display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}

.card{
    position:relative;padding:24px;border-radius:var(--radius);
    background:var(--card);border:1px solid var(--line-soft);
    transition:transform .15s ease, border-color .15s ease, box-shadow .2s ease;
    overflow:hidden;
}
.card::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(135deg, rgba(0,255,133,.08), transparent 40%);
    opacity:0;transition:opacity .2s ease;
}
.card:hover{transform:translateY(-3px);border-color:var(--green);box-shadow:0 12px 40px rgba(0,255,133,.15)}
.card:hover::before{opacity:1}
.card-icon{
    width:44px;height:44px;border-radius:10px;display:grid;place-items:center;
    background:linear-gradient(180deg,rgba(0,255,133,.18),rgba(0,255,133,.04));
    border:1px solid var(--line);color:var(--green);margin-bottom:14px;
    box-shadow:0 0 14px rgba(0,255,133,.18);
}
.card-icon svg{width:22px;height:22px}
.card h3{margin:0 0 6px;font-family:var(--display);letter-spacing:.06em;font-size:18px;color:var(--ink)}
.card p{margin:0;color:var(--ink-dim);font-size:14px}

/* ====== Showcase ====== */
.show-grid{display:grid;grid-template-columns:1fr;gap:28px;align-items:stretch;max-width:980px;margin:0 auto}
.show-grid > *{min-width:0}

.mock-window{
    border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
    background:linear-gradient(180deg,rgba(6,12,9,.95),rgba(4,8,6,.95));
    box-shadow:0 30px 80px rgba(0,0,0,.7), 0 0 80px rgba(0,255,133,.12);
}
.mock-bar{
    display:flex;align-items:center;gap:8px;padding:10px 14px;
    border-bottom:1px solid var(--line-soft);
    background:linear-gradient(180deg,rgba(0,255,133,.06),transparent);
}
.mock-bar i{width:11px;height:11px;border-radius:50%}
.mock-bar .r{background:#ff5f57}.mock-bar .y{background:#febc2e}.mock-bar .g{background:#28c840}
.mock-bar span{margin-left:auto;color:var(--ink-dim);font-size:12px}

.mock-body{
    display:grid;grid-template-columns:160px 1fr 180px;min-height:340px;
}
@media (max-width:680px){
    .mock-body{grid-template-columns:1fr}
    .mock-side,.mock-tele{display:none}
}
.mock-side,.mock-tele{padding:14px;border-right:1px solid var(--line-soft);background:rgba(0,0,0,.25)}
.mock-tele{border-right:none;border-left:1px solid var(--line-soft)}
.mock-side h4,.mock-tele h4{
    margin:0 0 12px;font-family:var(--display);font-size:11px;letter-spacing:.18em;
    color:var(--ink-dim);text-transform:uppercase
}
.mock-side ul{list-style:none;padding:0;margin:0;font-size:13px}
.mock-side li{padding:6px 8px;border-radius:6px;color:var(--ink-dim);cursor:default}
.mock-side li.active{background:var(--green-soft);color:var(--green);text-shadow:0 0 10px var(--green-glow)}
.mock-side li.dim{color:var(--ink-dim);opacity:.6;margin-top:8px;border-top:1px dashed var(--line-soft);padding-top:8px}
.mock-tele div{display:flex;justify-content:space-between;font-size:12px;padding:5px 0;border-bottom:1px dashed var(--line-soft)}
.mock-tele span{color:var(--ink-dim)}
.mock-tele b{color:var(--ink)}
.mock-tele b.g{color:var(--green);text-shadow:0 0 8px var(--green-glow)}
.mock-tele .bar{height:5px;background:rgba(0,255,133,.1);border-radius:3px;margin-top:14px;overflow:hidden}
.mock-tele .bar i{display:block;height:100%;background:linear-gradient(90deg,#00ff85,#00d4ff);box-shadow:0 0 10px var(--green-glow);width:0%}

.mock-chat{padding:16px 18px;display:flex;flex-direction:column;gap:10px;font-size:13px;overflow:hidden}
.msg{padding:8px 12px;border-radius:8px;max-width:90%}
.msg.user{align-self:flex-end;background:rgba(0,255,133,.08);color:var(--green);border:1px solid var(--line)}
.msg.ai{background:rgba(255,255,255,.03);color:#d3ffe1;border:1px solid var(--line-soft);white-space:pre-wrap;min-height:200px}

.show-shot{position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:rgba(0,0,0,.3);height:100%;display:flex}
.show-shot img{width:100%;height:100%;display:block;object-fit:cover;object-position:top;filter:hue-rotate(-10deg) saturate(1.05)}
@media (max-width:980px){.show-shot{height:auto}.show-shot img{height:auto;object-fit:contain}}
.shot-cap{
    position:absolute;left:14px;bottom:14px;font-size:12px;color:var(--green);
    background:rgba(0,0,0,.7);padding:6px 10px;border:1px solid var(--line);border-radius:6px;
    text-shadow:0 0 8px var(--green-glow)
}

/* ====== Download ====== */
.dl-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
@media (max-width:900px){.dl-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.dl-grid{grid-template-columns:1fr}}

.dl-card{
    display:flex;flex-direction:column;align-items:flex-start;gap:8px;
    padding:22px;border-radius:var(--radius);
    background:var(--card-2);border:1px solid var(--line-soft);
    transition:transform .15s ease, border-color .15s ease, box-shadow .2s ease;
    position:relative;overflow:hidden;color:var(--ink);
}
.dl-card::after{
    content:"";position:absolute;inset:0;border-radius:var(--radius);
    background:radial-gradient(circle at top right, rgba(0,255,133,.12), transparent 60%);
    opacity:0;transition:opacity .2s ease;pointer-events:none;
}
.dl-card:hover{transform:translateY(-3px);border-color:var(--green);box-shadow:0 14px 40px rgba(0,255,133,.18)}
.dl-card:hover::after{opacity:1}
.dl-os{
    width:54px;height:54px;border-radius:12px;display:grid;place-items:center;
    background:linear-gradient(180deg,rgba(0,255,133,.16),rgba(0,255,133,.04));
    border:1px solid var(--line);color:var(--green);
    box-shadow:0 0 14px rgba(0,255,133,.22);
}
.dl-os svg{width:30px;height:30px}
.dl-card h3{margin:6px 0 0;font-family:var(--display);letter-spacing:.08em;color:var(--ink)}
.dl-card span{color:var(--ink-dim);font-size:12px;letter-spacing:.05em}
.dl-card b{color:var(--green);font-size:13px;letter-spacing:.1em;margin-top:8px;text-shadow:0 0 8px var(--green-glow)}
.dl-source{cursor:default}
.dl-source b a{color:var(--green)}
.dl-foot{margin-top:24px;color:var(--ink-dim);font-size:13px}

/* ====== FAQ ====== */
.faq-list{display:flex;flex-direction:column;gap:10px;max-width:820px}
details{
    border:1px solid var(--line-soft);border-radius:10px;background:var(--card);
    padding:14px 18px;transition:border-color .15s ease;
}
details[open]{border-color:var(--green)}
summary{cursor:pointer;font-family:var(--display);letter-spacing:.06em;font-size:15px;color:var(--ink);list-style:none}
summary::before{content:"▸ ";color:var(--green);transition:transform .15s ease;display:inline-block}
details[open] summary::before{transform:rotate(90deg)}
details p{margin:10px 0 0;color:var(--ink-dim);font-size:14px}

/* ====== Footer ====== */
.foot{
    margin-top:60px;padding:60px 28px 28px;border-top:1px solid var(--line);
    background:linear-gradient(180deg,transparent, rgba(0,255,133,.04));
    max-width:1200px;margin-left:auto;margin-right:auto;
}
.foot-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:24px;margin-bottom:30px}
@media (max-width:780px){.foot-cols{grid-template-columns:1fr 1fr}}
.foot-cols h5{font-family:var(--display);letter-spacing:.14em;font-size:12px;color:var(--ink-dim);margin:0 0 10px;text-transform:uppercase}
.foot-cols a{display:block;font-size:13px;color:var(--ink);margin-bottom:6px}
.foot-cols a:hover{color:var(--green)}
.foot-cols p{color:var(--ink-dim);font-size:13px;margin:8px 0 0;max-width:340px}
.foot-line{
    display:flex;justify-content:space-between;align-items:center;
    border-top:1px dashed var(--line-soft);padding-top:18px;
    color:var(--ink-dim);font-size:12px;letter-spacing:.06em
}
.foot-prompt .cursor{display:inline-block;width:8px;height:14px;background:var(--green);vertical-align:-2px;animation:blink 1s steps(2) infinite}

/* ===== Responsive tweaks ===== */
@media (max-width:520px){
    section{padding:64px 18px}
    .hero{padding-top:36px}
    .hero-stats{gap:24px}
}

/* ============================================================
   Mobile-first overhaul: viewport quirks, touch, safe-area,
   hamburger nav, hover-only-on-real-hover, reduced motion.
   ============================================================ */

/* iOS / dynamic-toolbar viewport: use dvh where supported */
@supports (height: 100dvh) {
    #rain { height: 100dvh; }
    .scanline, .vignette { height: 100dvh; }
}

/* Safe-area insets for iPhone notch / Dynamic Island / Android cutouts */
.topbar{
    padding-top:max(14px, env(safe-area-inset-top));
    padding-left:max(28px, env(safe-area-inset-left));
    padding-right:max(28px, env(safe-area-inset-right));
}
.foot{
    padding-bottom:max(28px, env(safe-area-inset-bottom));
    padding-left:max(28px, env(safe-area-inset-left));
    padding-right:max(28px, env(safe-area-inset-right));
}
section{
    padding-left:max(28px, env(safe-area-inset-left));
    padding-right:max(28px, env(safe-area-inset-right));
}

/* All hover effects only on devices that truly hover (mouse/trackpad).
   On touch this prevents stuck-hover after tap. */
@media (hover: none) {
    .nav a:hover,.ghost:hover,.btn-ghost:hover,
    .card:hover,.dl-card:hover,
    .topbar a:hover { color:inherit; border-color:inherit; box-shadow:none; transform:none; background-color:inherit }
    .card:hover{transform:none}
    .dl-card:hover{transform:none}
    .btn-primary:hover{transform:none}
    .card:active,.dl-card:active{transform:scale(.99)}
}

/* Touch-target sizing: at least 44×44 logical px on tap surfaces */
@media (pointer: coarse) {
    .btn{min-height:44px}
    .ghost{min-height:40px}
    .nav a{padding:14px 0}
    details summary{padding:6px 0}
    .dl-card{min-height:140px}
}

/* ===== Hamburger button ===== */
.hamburger{
    display:none;
    width:40px;height:40px;border-radius:8px;
    background:transparent;border:1px solid var(--line);color:var(--green);
    align-items:center;justify-content:center;flex-direction:column;gap:5px;
    cursor:pointer;padding:0;
}
.hamburger span{
    display:block;width:18px;height:2px;background:var(--green);border-radius:2px;
    transition:transform .25s ease, opacity .2s ease;
    box-shadow:0 0 6px var(--green-glow);
}
body.menu-open .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .hamburger span:nth-child(2){opacity:0}
body.menu-open .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Stop body scroll while overlay nav is open */
body.menu-open{overflow:hidden}

/* ===== Tablet & phone breakpoints ===== */

/* tablet portrait: hide nav, show hamburger */
@media (max-width:880px){
    .topbar{gap:10px;padding:12px 14px}
    .top-actions{gap:6px;margin-left:auto}
    .cta-top{display:none} /* hero CTA carries the action on small screens */
    .hamburger{display:inline-flex}
    .nav{
        position:fixed;inset:0;z-index:60;
        flex-direction:column;align-items:stretch;justify-content:center;gap:0;
        margin:0;padding:max(72px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
        background:rgba(4,7,6,.95);backdrop-filter:blur(18px) saturate(140%);
        -webkit-backdrop-filter:blur(18px) saturate(140%);
        opacity:0;visibility:hidden;
        transition:opacity .25s ease, visibility 0s .25s;
        border-bottom:1px solid var(--line);
    }
    body.menu-open .nav{opacity:1;visibility:visible;transition:opacity .25s ease}
    .nav a{
        font-size:20px;letter-spacing:.12em;color:var(--ink);
        padding:18px 8px;border-bottom:1px dashed var(--line-soft);
        text-align:center;
    }
    .nav a:last-child{border-bottom:none}
    .nav::before{
        content:"ﾈ console.matrix";
        display:block;font-family:var(--display);letter-spacing:.18em;
        color:var(--green);text-align:center;font-size:13px;
        margin-bottom:24px;text-shadow:0 0 10px var(--green-glow);
    }
}

/* small phones */
@media (max-width:560px){
    .topbar{padding:10px 12px}
    .brand-text{font-size:12px;letter-spacing:.14em}
    .top-actions{gap:6px}
    #langPicker{padding:6px 8px;font-size:11px}
    .btn-primary{padding:8px 12px;font-size:12px}
    section{padding:56px 16px}
    .hero{padding-top:24px;padding-bottom:48px}
    .hero-grid{gap:30px}
    .hero-stats{gap:18px;padding-top:16px}
    .hero-stats b{font-size:22px}
    .hero-cta .btn{flex:1 1 auto;justify-content:center}
    .hero-terminal{margin:0 -8px}
    .term-body{padding:14px 14px;font-size:12px;min-height:240px}

    .section-title{font-size:clamp(24px,7vw,32px)}
    .section-title .prompt{margin-right:10px}
    .section-lead{margin-bottom:30px;font-size:14px}

    .cards{gap:14px}
    .card{padding:18px}
    .card h3{font-size:16px}

    .dl-grid{gap:12px}
    .dl-card{
        padding:16px 18px;
        display:grid;
        grid-template-columns:46px 1fr auto;
        grid-template-rows:auto auto;
        column-gap:14px;row-gap:2px;
        align-items:center;
        position:relative;
        min-height:72px;
    }
    .dl-card .dl-os{grid-row:1 / 3;grid-column:1;width:46px;height:46px;align-self:center}
    .dl-card h3{grid-column:2;grid-row:1;margin:0;font-size:15px;align-self:end}
    .dl-card span{grid-column:2;grid-row:2;font-size:11px;align-self:start}
    .dl-card b{grid-column:3;grid-row:1 / 3;align-self:center;font-size:12px;white-space:nowrap}

    .foot-line{flex-direction:column;gap:10px;text-align:center}
    .foot-cols{gap:18px}
}

/* ultra-narrow (≤360 — old iPhones, foldables shut, etc.) */
@media (max-width:360px){
    .brand-text{display:none}
    .topbar{padding:10px 10px}
    .hero-title{font-size:34px}
    .term{margin:0 -10px}
}

/* ===== Landscape phone — keep hero compact ===== */
@media (max-height:520px) and (orientation: landscape){
    .hero{padding:22px 28px 30px}
    .hero-grid{grid-template-columns:1.1fr 1fr;gap:22px}
    .hero-title{font-size:clamp(28px,5vh,46px);margin:6px 0 10px}
    .hero-lead{font-size:13px;margin-bottom:14px}
    .hero-cta{margin-bottom:10px;gap:8px}
    .hero-stats{padding-top:8px;gap:18px;border-top-style:solid}
    .hero-stats b{font-size:18px}
    .badge{padding:4px 10px;font-size:10px}
    .term-body{min-height:160px;font-size:11px;padding:10px 12px}
    .scroll-hint{display:none}
    section{padding:56px 28px}
    .topbar{padding:8px 14px}
    .brand-text{font-size:11px}
    .scanline{display:none} /* reduce GPU load on landscape phones */
}

/* ===== Showcase: tighter cell on narrow screens ===== */
@media (max-width:680px){
    .show-grid{gap:16px}
    .mock-window{margin:0 -4px}
    .mock-chat{padding:14px;font-size:12px}
    .show-shot img{max-height:64vh;object-fit:cover;object-position:top}
    .shot-cap{font-size:11px;left:10px;bottom:10px;padding:5px 8px}
}

/* between phone & tablet — telemetry panel narrower */
@media (min-width:681px) and (max-width:900px){
    .mock-body{grid-template-columns:140px 1fr 150px}
    .mock-side h4,.mock-tele h4{font-size:10px}
}

/* ===== Reduced motion: respect user preference ===== */
@media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
        animation-duration:.001ms !important;animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
    }
    .glitch::before,.glitch::after{display:none}
    .scanline{display:none}
    .scroll-hint{display:none}
    .badge-dot{animation:none}
    #rain{opacity:.4}
}

/* ===== Allow long compound words to wrap (RU/DE edge cases) ===== */
/* No hyphens:auto — Russian dictionary breaks short titles like
   "Связаться" into "Свя-/заться". Use plain overflow-wrap so we only
   break inside a word as a last resort, without adding a hyphen. */
.hero-title,.section-title,summary{
    overflow-wrap:break-word; hyphens:manual;
}
/* Section labels are short single words — keep them on one line. */
.section-title > span{ white-space:nowrap; }
.card h3,.dl-card h3{ overflow-wrap:normal;word-break:keep-all }
.glitch{ max-width:100%; overflow-wrap:break-word; hyphens:manual; }

/* ===== Grid overflow fix: children may otherwise widen tracks ===== */
.hero-grid > *, .show-grid > *, .dl-grid > *, .cards > *,
.foot-cols > *, .mock-body > * {
    min-width:0;
}

/* ===== Tiny screens: tighter title ===== */
@media (max-width:400px){
    .hero-title{font-size:clamp(28px,9vw,38px)}
    .hero-sub-title{font-size:13px;margin-top:10px}
    .hero-lead{font-size:14px}
}
@media (max-width:340px){
    .hero-title{font-size:clamp(24px,9vw,32px);letter-spacing:.04em}
    .hero-stats b{font-size:18px}
    .hero-stats span{font-size:10px}
    .badge{font-size:10px;padding:4px 9px}
}

/* ===== Anti-overflow guard ===== */
html,body{max-width:100vw;overflow-x:hidden}
.term,.mock-window{max-width:100%}
.term-body,.mock-chat{overflow-x:auto;max-width:100%}
img{height:auto}

/* Long unbreakable strings (URLs, model ids like
   `qwen2.5-1.5b-instruct-q4_k_m.gguf`, long emails, RU/DE compounds) used
   to push card / form / footer edges past the viewport on phones. Force
   a soft break inside any prose element. Headings keep their tighter rule
   from the block above so they don't get hyphen-style splits. */
.card p, .dl-card span, details p, details summary,
.ct-field span, .ct-field input, .ct-field textarea,
.foot-cols a, .foot-cols p, .hero-lead, .section-lead,
.shot-cap, .badge, .msg, .term-body {
    overflow-wrap:anywhere;
    word-break:break-word;
    min-width:0;
}
/* Mailto / long external links in the footer, plus any explicit URL
   inside FAQ answers — let them wrap mid-string on tiny screens. */
.foot-cols a[href^="mailto:"],
.foot-cols a[href^="http"],
details p a {
    overflow-wrap:anywhere;
    word-break:break-all;
}

/* hero-terminal contains the glow so it doesn't widen ancestors */
.hero-terminal{position:relative;overflow:hidden;border-radius:14px}

/* ===== Reveal animation (opt-in via .reveal class; safe-by-default) ===== */
.reveal{
    opacity:0;transform:translateY(14px);
    transition:opacity .55s ease, transform .55s ease;
    will-change:opacity, transform;
}
.reveal.is-in{opacity:1;transform:none}
/* Hard fallback: if transition never completes / IO fails / pageshow w/ bfcache, force visible after 2s */
@media (prefers-reduced-motion: reduce){
    .reveal{opacity:1 !important;transform:none !important}
}

/* ===== Contact form ===== */
/* Match the same outer rhythm as #features / #showcase / #download
   (max-width:1200px, padding:96px 28px) so the section title and form
   line up flush-left on wide screens instead of drifting to centre. */
.contact{
    /* inherits section{padding:96px 28px;max-width:1200px;margin:0 auto} */
}
.ct-form{
    display:flex;
    flex-direction:column;
    gap:18px;
    margin-top:20px;
    padding:28px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--card);
    backdrop-filter:blur(6px);
    box-shadow:0 0 0 1px var(--line-soft) inset, 0 0 60px -20px var(--green-glow);
    /* Keep form readable; flush-left under the section title. */
    max-width:920px;
}
.ct-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}
@media (max-width:640px){
    .ct-row{grid-template-columns:1fr}
}
.ct-field{
    display:flex;
    flex-direction:column;
    gap:6px;
    font-family:'JetBrains Mono','Share Tech Mono',monospace;
}
.ct-field > span{
    color:var(--ink-dim);
    font-size:.82rem;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.ct-field input,
.ct-field textarea{
    background:#040706;
    color:var(--ink);
    border:1px solid var(--line);
    border-radius:8px;
    padding:10px 12px;
    font:inherit;
    outline:none;
    transition:border-color .12s ease, box-shadow .12s ease;
    resize:vertical;
}
.ct-field input:focus,
.ct-field textarea:focus{
    border-color:var(--green);
    box-shadow:0 0 0 3px var(--green-soft);
}
/* === Kill Chrome / Edge / Safari autofill yellow-white background === */
.ct-field input:-webkit-autofill,
.ct-field textarea:-webkit-autofill,
.ct-field input:-webkit-autofill:hover,
.ct-field input:-webkit-autofill:focus,
.ct-field input:-webkit-autofill:active{
    -webkit-text-fill-color:var(--ink) !important;
    -webkit-box-shadow:0 0 0 1000px #040706 inset !important;
    box-shadow:0 0 0 1000px #040706 inset !important;
    caret-color:var(--green);
    transition:background-color 9999s ease-in-out 0s;
}
.ct-msg textarea{
    min-height:120px;
    line-height:1.5;
}
.ct-hp{
    position:absolute;
    left:-9999px;
    width:1px; height:1px;
    opacity:0;
    pointer-events:none;
}
.ct-foot{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
}
.ct-status{
    color:var(--ink-dim);
    font-family:'JetBrains Mono',monospace;
    font-size:.85rem;
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:1.4em;
}
.ct-status.ok{color:var(--green);text-shadow:0 0 8px var(--green-glow)}
.ct-status.err{color:var(--red)}
/* Spinner used while sending */
.ct-status .spin{
    width:14px;height:14px;border-radius:50%;
    border:2px solid var(--line);border-top-color:var(--green);
    animation:ct-spin .7s linear infinite;
    box-shadow:0 0 6px var(--green-glow);
}
@keyframes ct-spin{to{transform:rotate(360deg)}}
.ct-form.busy button{opacity:.7;pointer-events:none}
.ct-form.busy input,
.ct-form.busy textarea{opacity:.7;pointer-events:none}

/* ===== High-DPI tap-friendly form controls ===== */
select,input,textarea{
    font-size:max(13px, 1em); /* prevents iOS auto-zoom on focus */
}

/* ===== Print: hide effects, light theme ===== */
@media print{
    #rain,.scanline,.vignette,.scroll-hint,.hero-glow,.hamburger,.btn-primary{display:none !important}
    body{background:#fff;color:#111}
    .card,.dl-card,.term,.mock-window{background:#fff;border-color:#ccc;box-shadow:none}
    a{color:#0a7c3a}
}