/* Theme tokens (adjusted muted text brightness) */
:root {
  --color-bg:#0f1014;
  --color-surface:#171a21;
  --color-surface-alt:#1f242c;
  --color-border:#2b313b;
  --color-border-soft:#303642;
  --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-title { font-size:1.55rem; font-weight:650; letter-spacing:.5px; margin:0 0 1.2rem; }

.hero { position:relative; padding:5.2rem 0 4.2rem; text-align:center; overflow:hidden; }
.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; }
.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 2.05rem; color:var(--color-text-muted); font-size:1.06rem; line-height:1.48; }
.hero__ctas { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

.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; }
.btn--primary { background:var(--gradient-accent); color:#121317; box-shadow:0 6px 28px -8px rgba(var(--color-accent-rgb),.55); }
.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); }
.btn:focus-visible { outline:0; box-shadow:0 0 0 3px var(--color-focus); }

.features { padding:3.2rem 0 2rem; }
.features__grid { display:grid; gap:1.55rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.feature { background:var(--color-surface); border:1px solid var(--color-border); padding:1.25rem 1.15rem 1.35rem; border-radius:var(--radius); position:relative; overflow:hidden; box-shadow:var(--shadow-sm); }
.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:1.4rem; 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; }

.arch { padding:2.8rem 0 2.4rem; }
.arch__flow { list-style:none; padding:0; margin:0; display:grid; gap:1rem; }
.arch__flow li { background:var(--color-surface); border:1px solid var(--color-border); padding:.95rem 1.1rem .95rem 1.1rem; border-radius:var(--radius); font-size:.8rem; line-height:1.45; position:relative; }
.arch__flow li strong { color:var(--color-text); }

.try { padding:2.8rem 0 2.2rem; }
.try__panel { background:var(--color-surface); border:1px solid var(--color-border); padding:1.65rem 1.6rem 2.1rem; border-radius:var(--radius); max-width:640px; 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-surface-alt); border:1px solid var(--color-border); 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.8rem 0 3.5rem; }
.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:4.3rem 0 3.5rem; }
  .hero__title { font-size: clamp(2.15rem, 7vw, 3rem); }
  .hero__ctas { justify-content:flex-start; }
  .try__panel { padding:1.4rem 1.25rem 1.7rem; }
}