/* BAPLIE.ai public homepage. Static, no scripts. Colours follow the app's Day palette (src/app/tokens.css). */

@font-face { font-family: 'Archivo Variable'; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url('fonts/archivo-latin-wght-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url('fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); }

:root {
  color-scheme: light;
  --ink: #14202b;
  --ink2: #526170;
  --ink3: #5e6b77;
  --line: #d4dbe1;
  --line2: #e3e8ec;
  --bg: #f4f6f8;
  --accent: #2f6fde;
  --night: #0d161f;
  --orange: #e0531f;
  --blue: #2a78d6;
  --green: #1baf7a;
  --font-sans: 'Archivo Variable', 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Barlow Condensed', 'Archivo Narrow', 'Arial Narrow', sans-serif;
  --wrap: 1080px;
  --gutter: clamp(16px, 4vw, 32px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--font-sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: 16px; top: -64px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; text-decoration: none; transition: top 0.15s; }
.skip:focus { top: 12px; }

.display { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.005em; line-height: 0.95; text-wrap: balance; }
.lede { font-size: clamp(18px, 2vw, 21px); line-height: 1.55; color: var(--ink2); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 28px; border-radius: 10px; border: 1.5px solid var(--ink); background: var(--ink); color: #fff; font: 600 16px/1 var(--font-sans); text-decoration: none; cursor: pointer; transition: transform 0.12s, box-shadow 0.12s, background 0.12s; }
.btn:hover { background: #22323f; box-shadow: 0 6px 18px rgba(15, 29, 43, 0.22); transform: translateY(-1px); }
.btn:active { transform: none; box-shadow: none; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn.small { min-height: 40px; padding: 0 20px; font-size: 15px; }
.btn.light { background: #fff; color: var(--ink); border-color: #fff; }
.btn.light:hover { background: #eef3f9; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35); }

/* header */
.top { position: sticky; top: 0; z-index: 50; background: rgba(244, 246, 248, 0.88); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line2); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; font: 700 25px/1 var(--font-display); letter-spacing: 0.01em; }
.mark { width: 28px; height: 22px; display: grid; grid-template: 1fr 1fr / 1fr 1fr; gap: 3px; }
.mark i { border-radius: 2px; }
.mark i:nth-child(1) { background: var(--orange); }
.mark i:nth-child(2) { background: var(--blue); }
.mark i:nth-child(3) { background: var(--green); grid-column: 1 / 3; }

/* hero */
.hero { padding: clamp(72px, 12vw, 152px) 0 clamp(64px, 9vw, 112px); background: radial-gradient(1200px 520px at 50% -8%, #e4edfb 0%, rgba(228, 237, 251, 0) 70%), var(--bg); }
.hero-copy { max-width: 820px; margin-inline: auto; text-align: center; }
.hero h1 { font-size: clamp(50px, 9.2vw, 104px); }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lede { max-width: 560px; margin: 24px auto 0; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; }
.fine { margin-top: 18px; font-size: 14px; color: var(--ink3); }

/* features */
.sec { padding: 0 0 clamp(64px, 9vw, 112px); }
.feat { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; }
.feat li { padding: 26px 0; border-top: 1px solid var(--line); }
.feat h3 { font: 700 26px/1.05 var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; }
.feat p { margin-top: 8px; font-size: 16px; color: var(--ink2); }
@media (max-width: 760px) { .feat { grid-template-columns: 1fr; } }

/* closing call */
.close { background: var(--night); color: #fff; text-align: center; padding: clamp(64px, 9vw, 104px) 0 0; overflow: hidden; }
.close h1, .close h2 { font-size: clamp(40px, 7vw, 72px); }
.close .quay { display: block; width: 100%; height: clamp(96px, 14vw, 150px); margin-top: clamp(48px, 7vw, 80px); opacity: 0.9; }
.close .quay-fade { position: relative; }
.close .quay-fade::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 60%; background: linear-gradient(to bottom, var(--night), rgba(13, 22, 31, 0)); z-index: 1; pointer-events: none; }

/* footer */
.foot { background: #080e14; color: #a9b7c4; padding: 36px 0 44px; font-size: 14px; line-height: 1.6; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 16px 48px; justify-content: space-between; align-items: center; }
.foot .brand { color: #fff; font-size: 22px; }

/* One screen: the dark area runs from under the top bar to the bottom of any viewport */
html, body { height: 100%; }
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: #080e14; }
body > main { flex: 1 0 auto; display: flex; flex-direction: column; }
body > main > .close { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 0; }
.foot { padding-bottom: calc(44px + env(safe-area-inset-bottom)); }