/* Fonts are self-hosted: no visitor data goes to a font CDN (FR-027a). SIL Open Font License, see fonts/LICENSE.txt. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2"); }

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--sf-bg), 0 0 0 0.25rem var(--sf-accent);
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
.license-key { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .05em; }
.price { font-size: 2.5rem; font-weight: 700; }

/* Theme: same look as the portfolio (light, Inter, blue accent) */
:root {
  --sf-bg: #fbfbfe; --sf-fg: #111827; --sf-card: #ffffff; --sf-border: #e2e8f0; --sf-muted: #f1f5f9;
  --sf-muted-fg: #64748b; --sf-accent: #2563eb; --sf-accent-subtle: #eff6ff;
  --bs-body-bg: var(--sf-bg); --bs-body-color: var(--sf-fg); --bs-border-color: var(--sf-border);
  --bs-secondary-color: var(--sf-muted-fg); --bs-tertiary-bg: var(--sf-muted);
  --bs-link-color: #2563eb; --bs-link-hover-color: #1d4ed8; --bs-link-color-rgb: 37, 99, 235; --bs-link-hover-color-rgb: 29, 78, 216;
  --bs-font-sans-serif: "Inter", system-ui, sans-serif; --bs-font-monospace: "JetBrains Mono", ui-monospace, monospace;
}
body { background: var(--sf-bg); color: var(--sf-fg); -webkit-font-smoothing: antialiased; }
h1, h2, h3, .h1, .h2, .h3 { letter-spacing: -.025em; }
.card { --bs-card-bg: var(--sf-card); --bs-card-border-color: var(--sf-border); --bs-card-border-radius: 1rem; }
.btn { border-radius: .75rem; font-weight: 600; }
.btn-primary { --bs-btn-bg: #0f172a; --bs-btn-color: #fff; --bs-btn-border-color: #0f172a; --bs-btn-hover-bg: #1e293b;
  --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #1e293b; --bs-btn-active-bg: #334155;
  --bs-btn-active-color: #fff; --bs-btn-active-border-color: #334155; }
.btn-outline-secondary { --bs-btn-color: var(--sf-fg); --bs-btn-border-color: var(--sf-border); --bs-btn-hover-bg: var(--sf-muted);
  --bs-btn-hover-color: var(--sf-fg); --bs-btn-hover-border-color: var(--sf-border); }
.text-muted { color: var(--sf-muted-fg) !important; }

.sf-nav { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid rgba(226, 232, 240, .7);
  background: rgba(251, 251, 254, .8); backdrop-filter: blur(12px); }
.sf-nav .nav-link { color: var(--sf-muted-fg); font-size: .9rem; font-weight: 500; }
.sf-nav .nav-link:hover { color: var(--sf-fg); }
.sf-brand { font-weight: 700; letter-spacing: -.02em; color: var(--sf-fg) !important; display: flex; align-items: center; gap: .6rem; }
.sf-brand-mark { display: block; flex-shrink: 0; }
.sf-brand-forge { color: #E8622C; }
.sf-brand-tag { font-family: var(--bs-font-monospace); font-size: .7rem; font-weight: 400; color: var(--sf-muted-fg);
  padding: .1rem .5rem; border: 1px solid var(--sf-border); border-radius: 999px; background: rgba(241, 245, 249, .6); }
.sf-footer { border-top: 1px solid var(--sf-border); background: rgba(255, 255, 255, .5); padding: 2.5rem 0; color: var(--sf-muted-fg); font-size: .9rem; }
.sf-footer a { color: var(--sf-muted-fg); text-decoration: none; }
.sf-footer a:hover { color: var(--sf-fg); }

/* Home page */
.sf-hero { position: relative; isolation: isolate; padding: 6rem 0 5rem; border-bottom: 1px solid var(--sf-border); }
.sf-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background-image: linear-gradient(var(--sf-border) 1px, transparent 1px), linear-gradient(90deg, var(--sf-border) 1px, transparent 1px);
  background-size: 48px 48px; opacity: .6;
  -webkit-mask-image: radial-gradient(ellipse at 40% 30%, #000 15%, transparent 70%); mask-image: radial-gradient(ellipse at 40% 30%, #000 15%, transparent 70%); }
.sf-hero::after { content: ""; position: absolute; top: -10rem; left: 10%; width: 40rem; max-width: 90%; height: 30rem; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, rgba(37, 99, 235, .12), transparent); }
.sf-hero h1 { font-size: clamp(2.25rem, 6vw, 4.5rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; max-width: 16ch; }
.sf-eyebrow { display: inline-flex; font-family: var(--bs-font-monospace); font-size: .75rem; padding: .35rem .9rem; border-radius: 999px;
  border: 1px solid var(--sf-border); background: rgba(255, 255, 255, .8); margin-bottom: 2rem; }
.sf-lead { font-size: 1.2rem; line-height: 1.7; color: var(--sf-muted-fg); max-width: 42rem; margin: 1.5rem 0 2.5rem; }
.sf-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.sf-actions .btn { padding: .85rem 1.75rem; font-size: .9rem; }
.sf-section { padding: 4.5rem 0; }
.sf-kicker { font-family: var(--bs-font-monospace); font-size: .75rem; text-transform: uppercase; letter-spacing: .15em; color: var(--sf-accent); font-weight: 600; }
.sf-section-title { font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 700; margin: .5rem 0 2rem; }
.sf-card { background: var(--sf-card); border: 1px solid var(--sf-border); border-radius: 1rem; padding: 2rem;
  display: flex; flex-direction: column; align-items: flex-start; transition: border-color .3s, box-shadow .3s; }
.sf-card:hover { border-color: rgba(37, 99, 235, .5); box-shadow: 0 20px 25px -5px rgba(15, 23, 42, .08); }
.sf-card h3 { font-size: 1.4rem; font-weight: 700; margin: 1rem 0 .5rem; }
.sf-card p { color: var(--sf-muted-fg); flex-grow: 1; line-height: 1.7; }
.sf-card-soon { border-style: dashed; }
.sf-tag { font-family: var(--bs-font-monospace); font-size: .7rem; font-weight: 600; padding: .2rem .65rem; border-radius: 999px;
  background: var(--sf-accent-subtle); color: #2563eb; }
.sf-link { font-weight: 600; font-size: .9rem; text-decoration: none; color: var(--sf-fg); }
.sf-link:hover { color: var(--sf-accent); }
.sf-soon { font-family: var(--bs-font-monospace); font-size: .8rem; color: var(--sf-muted-fg); }
.sf-features { border-top: 1px solid var(--sf-border); }
.sf-features p { color: var(--sf-muted-fg); }
@media (max-width: 575px) { .sf-hero { padding: 4rem 0 3rem; } }

/* Language switch */
.sf-lang { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--sf-border); border-radius: 999px; background: var(--sf-muted); }
.sf-lang-option { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .65rem; border-radius: 999px;
  font-family: var(--bs-font-monospace); font-size: .72rem; font-weight: 600; color: var(--sf-muted-fg); text-decoration: none; transition: background .2s, color .2s; }
.sf-lang-option:hover { color: var(--sf-fg); }
.sf-lang-option.active { background: var(--sf-card); color: var(--sf-fg); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); pointer-events: none; }
.sf-flag { width: 18px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(15, 23, 42, .1); flex-shrink: 0; }
.sf-lang-option:not(.active) .sf-flag { filter: saturate(.6); opacity: .8; }

/* Hero animation */
.sf-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.sf-hero > :not(canvas) { position: relative; }
.sf-hero h1, .sf-lead { text-shadow: 0 0 24px var(--sf-bg), 0 0 8px var(--sf-bg); }
.sf-actions .btn-outline-secondary { background: var(--sf-card); }
.sf-tag-alt { background: #fdf4ff; color: #a21caf; }

/* Product diagrams (inline SVG, styled here: the CSP allows no inline styles) */
.sf-diagram { margin: 1rem 0 1.75rem; }
.sf-diagram svg { display: block; width: 100%; height: auto; font-family: var(--bs-font-sans-serif); }
.sf-diagram .zone { fill: var(--sf-accent-subtle); stroke: #bfdbfe; stroke-dasharray: 6 4; }
.sf-diagram .zone-ext { fill: var(--sf-muted); stroke: #cbd5e1; stroke-dasharray: 6 4; }
.sf-diagram .zone-label { font-family: var(--bs-font-monospace); font-size: 10px; font-weight: 600; letter-spacing: .08em; fill: var(--sf-accent); }
.sf-diagram .node { fill: var(--sf-card); stroke: var(--sf-border); }
.sf-diagram .node-sf { fill: #0f172a; stroke: #0f172a; }
.sf-diagram .t { font-size: 12px; font-weight: 600; fill: var(--sf-fg); text-anchor: middle; }
.sf-diagram .t-s { font-size: 10.5px; fill: var(--sf-muted-fg); text-anchor: middle; }
.sf-diagram .t-inv { fill: #fff; }
.sf-diagram .t-inv-s { fill: #cbd5e1; }
.sf-diagram .mono { font-family: var(--bs-font-monospace); font-size: 12px; fill: var(--sf-fg); }
.sf-diagram .flow { fill: none; stroke: var(--sf-accent); stroke-width: 2; }
.sf-diagram .flow-safe { stroke: #16a34a; }
.sf-diagram .check { fill: none; stroke: var(--sf-muted-fg); stroke-width: 1.5; stroke-dasharray: 3 4; }
.sf-diagram .sample { fill: #fef2f2; stroke: #fecaca; }
.sf-diagram .sample-safe { fill: #f0fdf4; stroke: #bbf7d0; }
.sf-diagram .start { text-anchor: start; }
@media (max-width: 575.98px) { .sf-diagram { overflow-x: auto; } .sf-diagram svg { min-width: 540px; } }