/* Theme tokens (adjusted muted text brightness) */
:root {
  --color-bg:#0f1014;
  --color-surface:#171a21;
  --color-surface-alt:#1f242c;
  --color-border:#2b313b;
  --color-border-soft:#b9c4d3;
  --color-text:#f4f6fa;
  --color-text-muted:#b9c4d3; /* was #9aa4b4 - lightened for readability */
  --color-accent:#ff8a3c;
  --color-accent-alt:#ffb347;
  --color-accent-rgb:255,138,60;
  --color-focus:rgba(255,138,60,.38);
  --color-positive:#4ccd7b;
  --color-warning:#ffc85a;
  --color-danger:#ff625d;
  --radius-xs:4px; --radius-sm:6px; --radius:12px; --radius-lg:18px;
  --shadow-sm:0 2px 6px -1px rgba(0,0,0,.5);
  --shadow:0 6px 28px -8px rgba(0,0,0,.55);
  --gradient-accent:linear-gradient(135deg,var(--color-accent),var(--color-accent-alt));
  --font-stack: system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;
  --hero-overlay: linear-gradient(140deg,rgba(15,16,20,.85) 0%,rgba(15,16,20,.60) 55%,rgba(15,16,20,.85) 100%);
}

html,body { background:var(--color-bg); color:var(--color-text); font-family:var(--font-stack); -webkit-font-smoothing:antialiased; }
body { margin:0; }

.container { max-width:1180px; margin:0 auto; padding:0 1.25rem; }
.chips { display:flex; flex-wrap:wrap; gap:.6rem; }
.chips span { background:var(--color-surface-alt); border:1px solid var(--color-border); padding:.45rem .8rem; font-size:.65rem; letter-spacing:.06em; border-radius:999px; text-transform:uppercase; color:var(--color-text-muted); }
.section-kicker { margin:0 0 .75rem; font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--color-accent-alt); }
.section-title { font-size:1.55rem; font-weight:650; letter-spacing:.5px; margin:0 0 1.2rem; }
.section-lead { max-width:760px; margin:0; color:var(--color-text-muted); font-size:.97rem; line-height:1.6; }

.hero { position:relative; padding:3.9rem 0 10.8rem; text-align:center; overflow:hidden; min-height:min(72vw, 780px); display:flex; align-items:flex-start; justify-content:center; }
.hero__media { position:absolute; inset:0; background:var(--hero-overlay), var(--hero-image, radial-gradient(circle at 25% 25%, rgba(255,138,60,.35), transparent 65%)); background-size:cover; background-position:center; filter:saturate(105%); }
.hero__grain { position:absolute; inset:0; mix-blend-mode:overlay; opacity:.25; background-image:repeating-radial-gradient(circle at 10% 10%, rgba(255,255,255,.05) 0 2px, transparent 2px 6px); }
.hero__inner { position:relative; max-width:880px; margin:0 auto; padding-top:clamp(1.25rem, 7vw, 4.75rem); }
.hero__badge { display:inline-block; background:var(--gradient-accent); color:#121317; font-weight:600; padding:.45rem .9rem; border-radius:999px; font-size:.7rem; letter-spacing:.14em; box-shadow:0 4px 18px -6px rgba(var(--color-accent-rgb),.55); }
.hero__title { font-size: clamp(2.35rem, 5.2vw, 3.6rem); font-weight:700; margin:1.05rem 0 .85rem; line-height:1.05; }
.hero__lead { max-width:760px; margin:0 auto 1.25rem; color:var(--color-text-muted); font-size:1.06rem; line-height:1.55; }
.hero__pills { display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin:0 0 2.05rem; }
.hero__pills span { padding:.55rem .9rem; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(15,16,20,.48); backdrop-filter:blur(7px); font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--color-text); }
.hero__ctas { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.hero__ctas--left { justify-content:flex-start; }

.btn { --pad-y:.85rem; --pad-x:1.55rem; position:relative; display:inline-flex; align-items:center; gap:.55rem; padding:var(--pad-y) var(--pad-x); font-weight:600; font-size:.95rem; border-radius:var(--radius); text-decoration:none; cursor:pointer; border:1px solid transparent; transition:.18s ease; letter-spacing:.3px; }
.app-theme .btn--primary, .btn--primary { background:var(--gradient-accent); color:#121317; box-shadow:0 6px 28px -8px rgba(var(--color-accent-rgb),.55); }
.app-theme .btn--primary:hover, .btn--primary:hover { filter:brightness(1.06); }
.btn--ghost { background:rgba(255,255,255,.06); border-color:var(--color-border); color:#fff; }
.btn--ghost:hover { background:rgba(255,255,255,.12); }
/* Between primary and ghost: accent-coloured so it reads as an action worth
   taking, outlined rather than filled so it does not compete with the one
   primary button on the page. Colour, background and border are all stated
   rather than inherited — the layout repaints anchors it is not told about. */
.app-theme .btn--accent-outline, .btn--accent-outline { color:var(--color-accent); background:rgba(var(--color-accent-rgb),.10); border-color:rgba(var(--color-accent-rgb),.45); }
.app-theme .btn--accent-outline:hover, .btn--accent-outline:hover { background:rgba(var(--color-accent-rgb),.18); }
.btn:focus-visible { outline:0; box-shadow:0 0 0 3px var(--color-focus); }

.features { padding:0 0 2rem; }
.features--overlap { position:relative; z-index:2; margin-top:-7.5rem; }
.features__intro { max-width:760px; margin:0 auto 1.7rem; text-align:center; }
.features__grid { display:grid; gap:1.55rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.feature { background:rgba(23,26,33,.92); border:1px solid rgba(255,255,255,.08); padding:1.25rem 1.15rem 1.35rem; border-radius:var(--radius); position:relative; overflow:hidden; box-shadow:var(--shadow); backdrop-filter:blur(10px); }
.feature:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 15% 20%,rgba(var(--color-accent-rgb),.10),transparent 70%); opacity:.8; pointer-events:none; }
.feature__icon { width:2.9rem; height:2.9rem; display:flex; align-items:center; justify-content:center; background:var(--gradient-accent); color:#121317; border-radius:10px; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.9rem; box-shadow:0 4px 18px -6px rgba(var(--color-accent-rgb),.5); }
.feature h3 { font-size:1.04rem; margin:0 0 .42rem; font-weight:600; letter-spacing:.25px; }
.feature p { margin:0; font-size:.8rem; color:var(--color-text-muted); line-height:1.5; }

/* ── Products ─────────────────────────────────────────────────────────────
   The three things GammonBase actually is. This section carries the hero's
   overlap because it is what the page leads into — a visitor should meet the
   products before the feature list of any one of them. */
.products { padding:0 0 2.4rem; }
.products--overlap { position:relative; z-index:2; margin-top:-7.5rem; }
.products__intro { max-width:760px; margin:0 auto 1.7rem; text-align:center; }
.products__grid { display:grid; gap:1.55rem; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); align-items:stretch; }
.product { display:flex; flex-direction:column; background:rgba(23,26,33,.92); border:1px solid rgba(255,255,255,.08); padding:1.5rem 1.4rem 1.4rem; border-radius:var(--radius-lg); position:relative; overflow:hidden; box-shadow:var(--shadow); backdrop-filter:blur(10px); }
.product:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 15% 0%,rgba(var(--color-accent-rgb),.12),transparent 70%); pointer-events:none; }
.product > * { position:relative; }
.product h3 { font-size:1.18rem; margin:.8rem 0 .4rem; font-weight:650; letter-spacing:.25px; }
.product__lead { margin:0 0 1rem; font-size:.875rem; color:var(--color-text-muted); line-height:1.55; }
.product__points { list-style:none; margin:0 0 1.35rem; padding:0; display:grid; gap:.5rem; }
.product__points li { font-size:.82rem; color:var(--color-text-muted); line-height:1.45; padding-left:1.05rem; position:relative; }
.product__points li:before { content:"—"; position:absolute; left:0; color:var(--color-accent); }
/* Pins the button to the card's bottom edge whatever the text length, so a row
   of cards has its buttons on one line rather than stepped. */
.product__action { margin-top:auto; }
.product .btn { width:100%; justify-content:center; }

/* Status belongs to the PRODUCT, not to the site. One of these ships today and
   the others do not, and a single ALPHA PREVIEW badge over the whole page was
   telling people the signed, notarized desktop build was not ready yet. */
.product__status { display:inline-flex; align-items:center; font-size:.63rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:.32rem .68rem; border-radius:999px; border:1px solid; }
.product__status--available { color:var(--color-positive); background:rgba(76,205,123,.10); border-color:rgba(76,205,123,.40); }
.product__status--preview { color:var(--color-accent-alt); background:rgba(var(--color-accent-rgb),.10); border-color:rgba(var(--color-accent-rgb),.40); }
.product__status--building { color:var(--color-text-muted); background:rgba(255,255,255,.05); border-color:var(--color-border); }

.arch { padding:3rem 0 2.4rem; }
.arch__flow { list-style:none; padding:0; margin:0; display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.arch__flow li { background:var(--color-surface); border:1px solid var(--color-border); padding:1.1rem 1.15rem 1.1rem 1.15rem; border-radius:var(--radius); font-size:.82rem; line-height:1.55; position:relative; }
.arch__flow li strong { color:var(--color-text); }

.try { padding:2.8rem 0 2.2rem; }
.try__panel { background:linear-gradient(160deg,rgba(23,26,33,.98),rgba(18,21,28,.94)); border:1px solid var(--color-border); padding:1.65rem 1.6rem 2.1rem; border-radius:var(--radius); max-width:760px; margin:0 auto; box-shadow:var(--shadow-sm); }
.form-row { display:flex; flex-direction:column; gap:.45rem; margin-bottom:1.05rem; }
.form-row--inline { flex-direction:row; align-items:center; gap:1rem; }
label { font-size:.7rem; letter-spacing:.15em; font-weight:600; text-transform:uppercase; color:var(--color-text-muted); }
input { background:var(--color-input-bg,#b9c4d3); border:1px solid var(--color-input-border,#4a5568); border-radius:var(--radius-sm); padding:.7rem .75rem; font-size:.9rem; color:#fff; width:100%; font-family:inherit; letter-spacing:.5px; }
input:focus { outline:none; box-shadow:0 0 0 3px var(--color-focus); border-color:var(--color-accent); }
.status { font-size:.75rem; color:var(--color-text-muted); }
.result { margin-top:1rem; background:#10141c; border:1px solid #262c33; padding:1rem; border-radius:var(--radius); max-height:340px; overflow:auto; font-size:.72rem; line-height:1.25; }
.error { margin-top:1rem; color:var(--color-danger); font-size:.78rem; font-weight:600; letter-spacing:.3px; }

.stack { padding:2.4rem 0 3.2rem; }
.site-footer { text-align:center; padding:2.4rem 0 3rem; font-size:.68rem; letter-spacing:.1em; color:var(--color-text-muted); text-transform:uppercase; }

@media (max-width: 760px) {
  .hero { text-align:left; padding:3.4rem 0 7rem; min-height:auto; }
  .hero__inner { margin:0; padding-top:1rem; }
  .hero__title { font-size: clamp(2.15rem, 7vw, 3rem); }
  .hero__lead { margin:0 0 1.25rem; }
  .hero__pills { justify-content:flex-start; margin:0 0 1.6rem; }
  .hero__ctas { justify-content:flex-start; }
  .features--overlap { margin-top:-4.75rem; }
  .features__intro { margin:0 0 1.5rem; text-align:left; }
  .try__panel { padding:1.4rem 1.25rem 1.7rem; }
}