:root { --brand: #ff8a1f; --brand-dark: #d95e00; --ink: #11131a; --muted: #6f7280; --surface: #f5f3ef; --bs-primary: var(--brand); --bs-primary-rgb: 255,138,31; --bs-link-color: var(--brand-dark); --bs-link-hover-color: #a94700; --bs-focus-ring-color: rgba(255,138,31,.35); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { color: var(--ink); background: #fff; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; }
.navbar { background: rgba(17,19,26,.82); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255,255,255,.09); }
.navbar-brand, .navbar-brand:hover, .nav-link, .nav-link:hover { color: #fff; }
.navbar-toggler { border-color: rgba(255,255,255,.3); filter: invert(1); }
.brand-mark { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 10px; overflow: hidden; }.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.btn-primary { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-color: #201207; --bs-btn-hover-bg: #ff9d42; --bs-btn-hover-border-color: #ff9d42; --bs-btn-active-bg: var(--brand-dark); --bs-btn-active-border-color: var(--brand-dark); --bs-btn-disabled-bg: #d86e10; --bs-btn-disabled-border-color: #d86e10; font-weight: 700; }
.hero { min-height: 760px; padding-top: 76px; color: #fff; background: radial-gradient(circle at 75% 30%,rgba(255,138,31,.24),transparent 28%), linear-gradient(145deg,#0d0e14,#1d2029 65%,#101117); overflow: hidden; }
.hero h1 { font-size: clamp(3.4rem,7vw,6.6rem); line-height: .94; letter-spacing: -.065em; font-weight: 800; }.hero h1 span { color: var(--brand); }.hero .lead { max-width: 660px; color: #c8cad2; font-size: 1.3rem; }
.eyebrow { display: inline-block; color: var(--brand); text-transform: uppercase; font-size: .78rem; font-weight: 800; letter-spacing: .15em; margin-bottom: 1.25rem; }.compat { color: #9ea1ad; font-size: .92rem; }
.app-screenshot { width: min(690px, 100%); filter: drop-shadow(0 35px 55px rgba(0,0,0,.46)); }
.app-screenshot img { display: block; width: 100%; height: auto; border: 1px solid rgba(255,255,255,.22); border-radius: 20px; }
.app-icon { width: 74px; height: 74px; display: grid; place-items: center; border-radius: 21px; overflow: hidden; box-shadow: 0 14px 30px rgba(255,112,0,.25); }.app-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.section { padding: 110px 0; }.section-heading { max-width: 650px; }.section-heading h2,.section-dark h2,.download-card h2 { font-size: clamp(2.35rem,4vw,4rem); letter-spacing: -.045em; font-weight: 800; }.section-heading p { color: var(--muted); font-size: 1.15rem; }
.feature-card { position: relative; padding: 34px; border: 1px solid #e6e3dc; border-radius: 22px; background: var(--surface); }.feature-card h3 { font-size: 1.35rem; font-weight: 750; }.feature-card p { color: var(--muted); margin-bottom: 0; }.step { position: absolute; right: 25px; top: 22px; color: #cbc6bd; font-weight: 800; }.feature-icon { color: var(--brand-dark); font-size: 1.8rem; margin-bottom: 35px; }
.section-dark { color: #fff; background: var(--ink); }.section-dark .lead { color: #bfc1ca; }.check-list li { display: flex; gap: 18px; padding: 20px 0; border-bottom: 1px solid #30333d; }.check-list i { color: var(--brand); font-size: 1.25rem; margin-top: 4px; }.check-list strong,.check-list span { display: block; }.check-list span { color: #aeb1bb; margin-top: 3px; }
.download-card { max-width: 770px; padding: 65px 30px; border-radius: 30px; background: var(--surface); }.download-card .app-icon { margin-bottom: 24px; }.download-card p { color: var(--muted); font-size: 1.15rem; }.download-card small { color: var(--muted); }
.site-footer { color: #aeb1bb; background: #0b0c10; }.site-footer a { color: #fff; text-decoration: none; }.code-credit { margin-left: auto; }
@media (max-width: 991px) { .navbar-collapse { padding: 18px 0; }.hero { min-height: auto; }.app-screenshot { width: 100%; max-width: 720px; margin-inline: auto; transform: none; }.section { padding: 80px 0; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }