/* GPT Raven — public site.
   The app's own look: the neutral dark of the chat it hosts, monospace for what runs,
   the app's status colours, and the violet of its icon as the one accent. System
   fonts, as in the app — nothing is loaded from anyone else's servers. */

:root {
    --bg:        #121214;
    --panel:     #1f1f23;
    --panel-2:   #26262b;
    --line:      #35353c;
    --text:      #ececef;
    --muted:     #a0a0a8;
    --faint:     #6e6e76;
    --accent:    #a28fdf;
    --accent-2:  #7a63c0;
    --ok:        #3fb950;
    --run:       #64b5f6;
    --wait:      #e3b341;
    --bad:       #f48771;
    --radius:    16px;
    --maxw:      1160px;
    --font:      -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, "Helvetica Neue", sans-serif;
    --mono:      ui-monospace, "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.015em; margin: 0; font-weight: 650; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: 24px; }

/* ---------- backdrop: the app's window, screen-sized, tilted and out of focus ---------- */
.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; --scroll: 0; --bd-scale: 1.6; }
.backdrop::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(to bottom, rgba(18, 18, 20, 0.8), rgba(18, 18, 20, 0.74) 45%, rgba(18, 18, 20, 0.86));
}
.bd-shift { position: absolute; inset: 0; perspective: 1800px; transform: translate3d(0, calc(var(--scroll) * -0.04px), 0); }
.bd-plane {
    position: absolute; left: 50%; top: 50%; width: 1200px; height: 800px;
    transform: translate(-50%, -50%) rotateX(11deg) rotateY(-7deg) rotateZ(-2.5deg) scale(var(--bd-scale));
    filter: blur(5px);
}
.bd-win {
    width: 1200px; height: 800px; display: flex; flex-direction: column;
    border-radius: 20px; overflow: hidden; background: #242428; border: 1px solid #34343b;
    font: 15px/1.5 -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, sans-serif; color: #d6d6db;
}
.bd-title { height: 34px; flex: none; display: flex; gap: 8px; align-items: center; padding: 0 16px; background: #1e1e22; border-bottom: 1px solid #303036; }
.bd-title i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.bd-title i:nth-child(2) { background: #febc2e; }
.bd-title i:nth-child(3) { background: #28c840; }
.bd-title b { margin-left: 10px; font-size: 13px; color: #b5b5bb; }
.bd-main { flex: 1; display: flex; min-height: 0; }
.bd-side { width: 260px; flex: none; background: #1b1b1f; border-right: 1px solid #2d2d33; padding: 16px 12px; }
.bd-side-head { font-weight: 650; font-size: 17px; padding: 2px 10px 12px; color: #ececef; }
.bd-item { padding: 7px 10px; border-radius: 9px; font-size: 14.5px; color: #c9c9ce; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-item.on { background: #2c2c32; }
.bd-label { font-size: 13px; color: #7a7a82; padding: 14px 10px 6px; }
.bd-chat { flex: 1; display: flex; flex-direction: column; padding: 28px 0 18px; min-width: 0; }
.bd-thread { width: 680px; margin: 0 auto; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; overflow: hidden; }
.bd-user { align-self: flex-end; max-width: 75%; background: #36363d; padding: 10px 16px; border-radius: 20px; color: #ececef; }
.bd-bot { color: #d9d9de; }
.bd-cmd { border: 1px solid #3f3f47; border-radius: 14px; overflow: hidden; background: #1c1c20; }
.bd-cmd-head { display: flex; align-items: center; gap: 4px; padding: 8px 12px; background: #29292f; font-size: 13px; color: #a3a3aa; }
.bd-cmd-head .raven { color: #b3a2ea; font-weight: 600; }
.bd-cmd-head .host { color: #ececef; font-weight: 600; }
.bd-cmd-head .chip { margin-left: auto; color: #3fb950; font-weight: 600; font-size: 12px; }
.bd-cmd pre { margin: 0; padding: 10px 14px; font: 13.5px/1.55 ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; color: #e2e2e6; white-space: pre-wrap; }
.bd-pills { width: 720px; margin: 12px auto 8px; display: flex; gap: 8px; font-size: 13px; }
.bd-pills span { padding: 3px 12px; border: 1px solid #45454d; border-radius: 999px; background: #2a2a30; }
.bd-pills .gap { flex: 1; border: 0; background: none; padding: 0; }
.bd-composer { width: 720px; margin: 0 auto; flex: none; border-radius: 28px; background: #34343a; padding: 13px 20px; color: #85858c; }
.bd-term { flex: none; height: 150px; background: #161618; border-top: 1px solid #2d2d33; padding: 12px 22px; font: 13px/1.6 ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; color: #cfcfd4; }
.bd-term .cmd { color: #b3a2ea; }
.bd-term .ok { color: #3fb950; }
.bd-term .dim { color: #7a7a82; }

/* ---------- buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 46px; padding-inline: 22px; border-radius: 999px;
    font-weight: 600; font-size: 15.5px; border: 1px solid transparent; cursor: pointer;
    transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
    background: linear-gradient(135deg, #9580d6, var(--accent-2));
    color: #fff;
    box-shadow: 0 6px 18px -12px rgba(149, 128, 214, 0.6);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -10px rgba(149, 128, 214, 0.65); }
.btn-ghost { background: rgba(255,255,255,0.03); border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm { height: 38px; font-size: 14.5px; padding-inline: 17px; }

/* ---------- nav ---------- */
.nav {
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(14px);
    background: color-mix(in srgb, var(--bg) 75%, transparent);
    border-bottom: 1px solid transparent;
    transition: border-color .3s ease;
}
.nav.scrolled { border-bottom-color: var(--line); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 650; font-size: 17.5px; letter-spacing: -0.01em; }
.brand .mark { width: 30px; height: 30px; display: block; }

/* ---------- hero ---------- */
.hero { position: relative; padding: 56px 0 30px; overflow: hidden; }
.glow {
    position: absolute; inset: -30% -10% auto -10%; height: 620px; z-index: 0; pointer-events: none;
    background:
        radial-gradient(38% 50% at 30% 30%, rgba(162, 143, 223, 0.16), transparent 70%),
        radial-gradient(40% 55% at 75% 20%, rgba(122, 99, 192, 0.12), transparent 70%);
    filter: blur(40px);
    animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-3%, 4%, 0) scale(1.05); }
}
.hero-stack { position: relative; z-index: 1; text-align: center; }
/* Plain and modest: one line that says what the app does, not a slogan. */
.hero h1 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; max-width: 820px; margin-inline: auto; }
.hero .lede { max-width: 600px; margin: 12px auto 0; font-size: 15.5px; color: var(--muted); }

/* ---------- sections ---------- */
section { position: relative; }
.band { padding-block: 100px; }
/* Section headings stand centred, like the one at the top. */
.section-head { max-width: 680px; margin: 0 auto 44px; text-align: center; }
.section-head h2 { font-size: clamp(24px, 3vw, 32px); }
.section-head p { margin-top: 12px; font-size: 16px; color: var(--muted); }
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }

/* features */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card {
    background: linear-gradient(180deg, var(--panel), var(--panel-2));
    border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;
    transition: border-color .2s ease, transform .2s ease;
}
.card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); transform: translateY(-3px); }
/* The icon and the title share one line, so a card is short and not stretched. */
.card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.card .ic {
    flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
    background: rgba(162, 143, 223, 0.1); border: 1px solid rgba(162, 143, 223, 0.25); color: var(--accent);
}
.card h3 { font-size: 18px; margin: 0; }
.card p { margin: 0; font-size: 15px; color: var(--muted); }

/* downloads: one row per platform — icon, name and detail, version on the right */
.section-head.get-head { display: flex; align-items: center; justify-content: center; gap: 14px; max-width: none; margin-bottom: 28px; }
.get-mark { width: 36px; height: 36px; flex: none; }
.platforms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.plat {
    /* The name holds the middle of the tile, a touch above centre; its detail hangs
       under it in the lower half instead of pushing the name up to share the height. */
    display: grid; grid-template-columns: 28px 1fr auto; grid-template-rows: 0.8fr auto 1fr;
    column-gap: 14px; align-items: center;
    padding: 10px 18px; border-radius: 14px;
    border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel), var(--panel-2));
    transition: border-color .2s ease, background .2s ease;
}
.plat .os { grid-row: 1 / 4; width: 26px; height: 26px; color: var(--text); }
/* The platform is what is read; its detail sits under it, smaller and close. */
.plat .name { grid-column: 2; grid-row: 2; align-self: baseline; font-weight: 600; font-size: 17px; line-height: 1.2; }
.plat .name .kind { margin-left: 7px; font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--muted); opacity: .8; }
.plat .sub { grid-column: 2; grid-row: 3; align-self: start; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.25; opacity: .85; }
/* The version sits on the name's line: that line is the one read, the detail under it is secondary. */
.plat .meta { grid-column: 3; grid-row: 2; align-self: baseline; color: var(--faint); font-family: var(--mono); font-size: 11.5px; white-space: nowrap; }
a.plat[href] { cursor: pointer; }
a.plat[href] .meta { color: var(--accent); }
a.plat[href]:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: rgba(162, 143, 223, 0.06); }
.plat.soon { opacity: 0.45; }
.plat.tomb { filter: grayscale(1); opacity: 0.45; }
.plat.tomb .name { color: var(--muted); }
.dl-empty { color: var(--muted); font-size: 15px; margin-top: 14px; }

/* legal pages */
.legal { max-width: 760px; padding-block: 60px 90px; }
.legal h1 { font-size: clamp(28px, 4vw, 38px); margin-bottom: 8px; }
.legal .updated { color: var(--faint); font-size: 14px; margin: 0 0 32px; }
.legal h2 { font-size: 20px; margin: 32px 0 10px; }
.legal h3 { font-size: 16.5px; margin: 20px 0 8px; }
.legal p, .legal li { color: var(--muted); font-size: 16px; }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; }
.legal a { color: var(--accent); }
.legal a:hover { text-decoration: underline; }
.legal strong { color: var(--text); font-weight: 600; }
.legal .note { border-left: 2px solid var(--line); padding-left: 14px; }

/* footer */
footer { border-top: 1px solid var(--line); padding-block: 42px; color: var(--muted); }
.foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.foot .brand { color: var(--text); }
.foot-legal { display: flex; gap: 22px; font-size: 14px; }
.foot-legal a:hover { color: var(--text); }
.foot .fine { font-size: 13px; color: var(--faint); width: 100%; }

/* reveal on scroll */
.reveal { opacity: .24; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 900px) {
    .platforms { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    body { font-size: 16px; }
    .grid { grid-template-columns: 1fr; }
    .platforms { grid-template-columns: 1fr; }
    .band { padding-block: 72px; }
    .foot { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    .glow { animation: none; }
    .reveal { transition: none; opacity: 1; transform: none; }
    html { scroll-behavior: auto; }
}