:root {
  color-scheme: dark;
  --bg: #090f17;
  --surface: #101925;
  --surface-raised: #142031;
  --line: #293c50;
  --line-bright: #3b5b78;
  --text: #edf5fc;
  --muted: #91a9be;
  --gold: #f4d557;
  --gold-deep: #d5ad38;
  --blue: #55b6e9;
  --cyan: #55d6e5;
  --green: #63dc92;
  --shadow: 0 24px 70px rgba(0, 0, 0, .35);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { min-width: 320px; margin: 0; color: var(--text); background: radial-gradient(circle at 50% -10%, #1a2d41 0, transparent 32rem), var(--bg); }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background-image: radial-gradient(rgba(171, 211, 242, .42) .55px, transparent .65px), radial-gradient(rgba(244, 213, 87, .25) .5px, transparent .7px); background-position: 0 0, 78px 61px; background-size: 129px 129px, 211px 211px; opacity: .34; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 3px solid rgba(85, 214, 229, .85); outline-offset: 4px; }
.shell { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.section { padding: 112px 0; }
.section-anchor { scroll-margin-top: 80px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 10px 13px; transform: translateY(-150%); border-radius: 7px; color: #081018; background: var(--gold); font-weight: 800; }.skip-link:focus { transform: translateY(0); }

.site-header { position: sticky; z-index: 20; top: 0; border-bottom: 1px solid transparent; background: rgba(9, 15, 23, .72); backdrop-filter: blur(18px); transition: border-color .2s, background .2s; }
.site-header.scrolled { border-color: rgba(57, 81, 106, .75); background: rgba(9, 15, 23, .92); }
.header-inner { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 14px; font-weight: 900; letter-spacing: .14em; white-space: nowrap; }.brand img { width: 39px; height: 39px; object-fit: contain; filter: drop-shadow(0 0 14px rgba(244, 213, 87, .16)); }.site-footer .brand img { width: 31px; height: 31px; }
.site-nav { display: flex; align-items: center; gap: 8px; }.site-nav a { padding: 9px 12px; border-radius: 7px; color: #adc0d0; font-size: 13px; font-weight: 750; transition: color .16s, background .16s; }.site-nav a:hover, .site-nav a.active { color: var(--gold); background: rgba(39, 58, 77, .52); }.site-nav .nav-discord { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; border: 1px solid #3b5872; color: #d8eafa; }.site-nav .nav-discord:hover { border-color: #6794b9; color: #fff; background: #182a3c; }
.nav-toggle { display: none; width: 42px; height: 38px; padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }.nav-toggle i { display: block; width: 100%; height: 2px; margin: 4px 0; background: #bed0df; }

.hero { position: relative; min-height: 690px; overflow: hidden; padding: 95px 0 84px; }.hero-stars { position: absolute; inset: 0; pointer-events: none; opacity: .85; background: radial-gradient(ellipse at 74% 31%, rgba(47, 120, 164, .2), transparent 28%), radial-gradient(ellipse at 23% 67%, rgba(244, 213, 87, .09), transparent 26%); }.hero::after { content: ""; position: absolute; right: -22%; bottom: 2%; width: 57vw; height: 57vw; max-width: 760px; max-height: 760px; border: 1px solid rgba(86, 152, 196, .13); border-radius: 50%; box-shadow: 0 0 0 45px rgba(86, 152, 196, .025), 0 0 0 110px rgba(86, 152, 196, .02); }
.hero-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .84fr) minmax(500px, 1.16fr); gap: clamp(42px, 8vw, 110px); align-items: center; }.hero-copy { padding-bottom: 22px; }.eyebrow { margin: 0 0 13px; color: var(--gold); font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px rgba(99, 220, 146, .7); }
h1, h2, h3, p { margin-top: 0; } h1, h2, h3 { letter-spacing: -.035em; } h1 { max-width: 650px; margin-bottom: 22px; font-size: clamp(43px, 5.3vw, 76px); line-height: .98; } h1 em, .final-cta em { color: var(--gold); font-style: normal; }.hero-lede { max-width: 520px; margin-bottom: 29px; color: #acc1d3; font-size: 16px; line-height: 1.75; }.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }.button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 10px; padding: 11px 16px; border: 1px solid transparent; border-radius: 7px; font-size: 13px; font-weight: 850; transition: transform .16s, border-color .16s, background .16s, box-shadow .16s; }.button:hover { transform: translateY(-2px); }.button.primary { color: #14150f; background: linear-gradient(135deg, #ffe16c, #e9bd39); box-shadow: 0 8px 25px rgba(218, 177, 50, .19); }.button.primary:hover { box-shadow: 0 11px 30px rgba(218, 177, 50, .3); }.button.ghost { border-color: #3d5c76; color: #d9e9f5; background: rgba(17, 31, 45, .74); }.button.ghost:hover { border-color: #6d9abe; background: #172a3c; }.hero-signals { display: flex; flex-wrap: wrap; gap: 23px; margin: 38px 0 0; }.hero-signals div { position: relative; padding-right: 23px; }.hero-signals div:not(:last-child)::after { position: absolute; top: 4px; right: 0; width: 1px; height: 30px; content: ""; background: var(--line); }.hero-signals dt { color: #eaf4fc; font-size: 12px; font-weight: 850; }.hero-signals dd { margin: 5px 0 0; color: #829bb2; font-size: 11px; }

.hero-product { position: relative; }.product-glow { position: absolute; z-index: -1; top: 14%; right: 7%; width: 72%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(78, 170, 225, .27), rgba(49, 106, 163, .08) 45%, transparent 70%); filter: blur(15px); }.product-frame { position: relative; overflow: hidden; border: 1px solid #38546f; border-radius: 12px; background: linear-gradient(145deg, #142333, #0b131e); box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.06); }.product-frame::before { position: absolute; inset: 0; content: ""; background-image: linear-gradient(rgba(101, 142, 171, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(101, 142, 171, .1) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); opacity: .6; }.product-frame--hero { aspect-ratio: 16 / 10; transform: perspective(1300px) rotateY(-5deg) rotateX(2deg); }.window-chrome { position: relative; z-index: 1; display: flex; height: 37px; align-items: center; gap: 6px; padding: 0 13px; border-bottom: 1px solid #324a62; color: #8fa8bd; background: #101c29; font-size: 10px; }.window-chrome span { width: 7px; height: 7px; border-radius: 50%; background: #45617a; }.window-chrome span:first-child { background: #f0c85a; }.window-chrome b { margin-left: 5px; font-weight: 750; }.placeholder-core { position: absolute; inset: 37px 0 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 30px; text-align: center; }.product-frame:not(.product-frame--hero) .placeholder-core { inset: 0; }.placeholder-icon { display: grid; width: 47px; height: 47px; place-items: center; border: 1px solid #6082a1; border-radius: 50%; color: var(--gold); font-size: 25px; }.placeholder-core strong { color: #e6f1f9; font-size: 12px; letter-spacing: .13em; }.placeholder-core small { color: #96b1c7; font-size: 12px; }.asset-note { margin: 13px 0 0; color: #7790a5; font-size: 11px; text-align: right; }

.trust-strip { border-top: 1px solid rgba(53, 82, 108, .7); border-bottom: 1px solid rgba(53, 82, 108, .7); background: rgba(13, 24, 36, .64); }.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); }.trust-grid p { display: flex; min-height: 70px; align-items: center; justify-content: center; gap: 11px; margin: 0; color: #b7c9d8; font-size: 12px; font-weight: 750; }.trust-grid p + p { border-left: 1px solid rgba(53, 82, 108, .7); }.trust-grid span { color: var(--gold); font-size: 10px; letter-spacing: .1em; }
.intro-grid { display: grid; grid-template-columns: .9fr 1fr; gap: 12%; align-items: start; }.intro h2, .section-heading h2, .workflow-copy h2, .band-grid h2 { max-width: 700px; margin: 0; font-size: clamp(31px, 3.4vw, 47px); line-height: 1.08; }.intro-grid > div:last-child { padding-top: 38px; }.intro-grid p:not(.eyebrow), .section-heading > p:not(.eyebrow), .workflow-copy > p:not(.eyebrow), .band-grid p:not(.eyebrow) { color: var(--muted); font-size: 15px; line-height: 1.72; }.intro-grid p:last-child { margin-bottom: 0; }
.section-heading { max-width: 685px; margin-bottom: 42px; }.section-heading h2 { margin-bottom: 17px; }.section-heading > p:not(.eyebrow) { margin: 0; }.highlight-grid, .feature-category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }.highlight-card, .category-card { min-height: 230px; padding: 25px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(145deg, rgba(20, 33, 48, .96), rgba(13, 23, 34, .96)); box-shadow: inset 0 1px rgba(255,255,255,.035); transition: transform .2s, border-color .2s, background .2s; }.highlight-card:hover, .category-card:hover { transform: translateY(-4px); border-color: #537b9e; background: linear-gradient(145deg, #17293c, #101c29); }.card-icon { display: grid; width: 39px; height: 39px; place-items: center; margin-bottom: 32px; border: 1px solid #426783; border-radius: 9px; color: var(--gold); background: #14283a; font-size: 18px; }.highlight-card h3, .category-card h3 { margin-bottom: 9px; font-size: 18px; }.highlight-card p, .category-card p { margin: 0; color: #94acbf; font-size: 13px; line-height: 1.62; }
.showcase-stack { padding-top: 26px; }.showcase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, .72fr); gap: clamp(40px, 8vw, 105px); align-items: center; padding: 79px 0; }.showcase + .showcase { border-top: 1px solid rgba(48, 72, 94, .6); }.showcase.reverse { grid-template-columns: minmax(330px, .72fr) minmax(0, 1fr); }.showcase.reverse .showcase-copy { order: 2; }.showcase-copy h2 { max-width: 430px; margin-bottom: 15px; font-size: clamp(27px, 3vw, 40px); line-height: 1.08; }.showcase-copy p:not(.eyebrow) { max-width: 465px; color: #94adbf; font-size: 15px; line-height: 1.72; }.showcase-points { display: grid; gap: 9px; padding: 0; margin: 24px 0 0; list-style: none; }.showcase-points li { display: flex; gap: 10px; color: #c4d5e2; font-size: 13px; line-height: 1.45; }.showcase-points li::before { color: var(--gold); content: "◆"; font-size: 8px; line-height: 1.9; }.product-frame--showcase { aspect-ratio: 16 / 10; }.showcase .asset-note { text-align: left; }
.workflow-section { padding-top: 65px; padding-bottom: 65px; background: linear-gradient(90deg, rgba(16, 34, 49, .55), rgba(11, 17, 26, .1)); border-top: 1px solid rgba(55, 84, 109, .65); border-bottom: 1px solid rgba(55, 84, 109, .65); }.workflow-layout { display: grid; grid-template-columns: .85fr 1fr; gap: 12%; align-items: center; }.workflow-copy h2 { margin-bottom: 16px; font-size: clamp(29px, 3.3vw, 43px); }.text-link { display: inline-flex; gap: 8px; margin-top: 9px; color: var(--gold); font-size: 13px; font-weight: 850; }.text-link span { transition: transform .16s; }.text-link:hover span { transform: translateX(4px); }.workflow-steps { display: grid; gap: 20px; padding: 0; margin: 0; list-style: none; }.workflow-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 15px; }.workflow-steps span { color: var(--gold); font-size: 11px; font-weight: 900; letter-spacing: .1em; }.workflow-steps strong { display: block; margin-bottom: 4px; color: #e5f0f7; font-size: 15px; }.workflow-steps p { margin: 0; color: #90a9bc; font-size: 13px; line-height: 1.55; }
.features-page { padding-top: 130px; }.feature-category-grid { grid-template-columns: repeat(2, 1fr); }.category-card { min-height: 270px; }.category-card .card-icon { margin-bottom: 24px; }.category-card ul { display: flex; flex-wrap: wrap; gap: 7px; padding: 0; margin: 19px 0 0; list-style: none; }.category-card li { padding: 6px 8px; border: 1px solid #30465b; border-radius: 5px; color: #b9cede; background: rgba(12, 24, 36, .56); font-size: 10px; font-weight: 700; }
.feature-band { padding-top: 48px; }.band-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 9%; align-items: center; padding: 42px; border: 1px solid #3a5670; border-radius: 12px; background: radial-gradient(circle at 18% 45%, rgba(68, 139, 190, .15), transparent 34%), #101d2a; }.product-frame--wide { aspect-ratio: 16 / 9; }.band-grid h2 { margin-bottom: 15px; font-size: clamp(28px, 3vw, 41px); }
.community { padding-top: 68px; padding-bottom: 68px; }.community-card { display: flex; align-items: center; justify-content: space-between; gap: 36px; padding: 42px; border: 1px solid #405f7a; border-radius: 12px; background: radial-gradient(circle at 90% 50%, rgba(87, 180, 233, .15), transparent 36%), linear-gradient(135deg, #152a3d, #101a27); }.community-card h2 { margin-bottom: 10px; font-size: clamp(29px, 3.2vw, 43px); }.community-card p:not(.eyebrow) { max-width: 640px; margin: 0; color: #a6bfd0; line-height: 1.68; }.community-card .button { flex: 0 0 auto; }.final-cta { padding: 82px 0 94px; text-align: center; }.final-cta-inner { padding: 45px 20px; border-top: 1px solid #2d485f; border-bottom: 1px solid #2d485f; }.final-cta h2 { margin: 0 0 25px; font-size: clamp(35px, 4.6vw, 64px); }.final-cta .hero-actions { justify-content: center; }.site-footer { padding: 28px 0; border-top: 1px solid #263c50; background: rgba(7, 12, 18, .65); }.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 22px; }.footer-inner > p { margin: 0; color: #748da2; font-size: 12px; }.footer-inner nav { display: flex; gap: 17px; }.footer-inner nav a { color: #9db3c5; font-size: 12px; font-weight: 700; }.footer-inner nav a:hover { color: var(--gold); }

.reveal { opacity: 0; transform: translateY(19px); transition: opacity .6s ease, transform .6s ease; }.reveal.in-view { opacity: 1; transform: none; }.delay-1 { transition-delay: .12s; }
@media (max-width: 900px) { .hero-layout, .showcase, .showcase.reverse, .workflow-layout, .band-grid { grid-template-columns: 1fr; }.hero { min-height: auto; padding-top: 75px; }.hero-copy { padding-bottom: 12px; }.hero-product { max-width: 690px; margin: 0 auto; }.showcase.reverse .showcase-copy { order: initial; }.showcase { gap: 30px; padding: 60px 0; }.showcase.reverse .product-wrap { order: 2; }.intro-grid { grid-template-columns: 1fr; gap: 34px; }.intro-grid > div:last-child { padding-top: 0; }.workflow-layout { gap: 46px; }.feature-band { padding-top: 20px; }.band-grid { gap: 35px; }.highlight-grid { grid-template-columns: repeat(2, 1fr); }.site-nav { gap: 2px; } }
@media (max-width: 650px) { .shell { width: min(100% - 32px, 1160px); }.header-inner { min-height: 64px; }.brand { font-size: 12px; }.brand img { width: 33px; height: 33px; }.nav-toggle { display: block; }.site-nav { position: absolute; top: calc(100% + 1px); right: 16px; left: 16px; display: none; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: #101a27; box-shadow: var(--shadow); }.site-nav.open { display: grid; }.site-nav a { padding: 12px; }.site-nav .nav-discord { margin: 3px 0 0; }.hero { padding: 57px 0 62px; }.hero-layout { gap: 40px; } h1 { font-size: clamp(40px, 12vw, 57px); }.hero-lede { font-size: 15px; }.hero-signals { gap: 14px; }.hero-signals div { padding-right: 14px; }.hero-product .product-frame--hero { transform: none; }.trust-grid { grid-template-columns: 1fr; }.trust-grid p { min-height: 48px; justify-content: flex-start; padding: 0 3px; }.trust-grid p + p { border-top: 1px solid rgba(53, 82, 108, .7); border-left: 0; }.section { padding: 73px 0; }.highlight-grid, .feature-category-grid { grid-template-columns: 1fr; }.highlight-card { min-height: 0; }.highlight-card .card-icon { margin-bottom: 20px; }.intro h2, .section-heading h2, .workflow-copy h2, .band-grid h2 { font-size: 31px; }.section-heading { margin-bottom: 31px; }.showcase { padding: 48px 0; }.showcase-copy h2 { font-size: 30px; }.workflow-section { padding: 58px 0; }.feature-category-grid { gap: 12px; }.category-card { min-height: 0; }.band-grid, .community-card { padding: 26px; }.community-card, .footer-inner { align-items: flex-start; flex-direction: column; }.community-card .button { width: 100%; }.footer-inner { gap: 16px; }.footer-inner nav { flex-wrap: wrap; }.final-cta { padding: 59px 0 70px; }.asset-note { text-align: left; } }

/* Purchase section: intentionally uses the existing panel, gold accent, and
   restrained glow language instead of a separate SaaS-pricing treatment. */
.hero-trial-note { margin: 12px 0 0; color: #8fa6b9; font-size: 11px; font-weight: 650; }
.pricing { position: relative; overflow: hidden; padding-top: 123px; padding-bottom: 120px; }.pricing::before { position: absolute; inset: 16% 0; z-index: -1; content: ""; background: radial-gradient(ellipse at 67% 50%, rgba(244, 213, 87, .105), transparent 31%), radial-gradient(ellipse at 38% 63%, rgba(64, 149, 204, .12), transparent 37%); }.pricing-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, .72fr); gap: clamp(42px, 10vw, 150px); align-items: center; }.pricing-intro h2 { max-width: 510px; margin-bottom: 18px; font-size: clamp(32px, 4vw, 52px); line-height: 1.05; }.pricing-intro > p:not(.eyebrow):not(.pricing-trial-note) { max-width: 520px; margin-bottom: 0; color: var(--muted); font-size: 16px; line-height: 1.72; }.pricing-trial-link { display: inline-flex; padding: 0; border: 0; background: transparent; cursor: pointer; }.pricing-trial-note { margin: 8px 0 0; color: #8199ae; font-size: 11px; }
.pricing-card { position: relative; isolation: isolate; overflow: hidden; width: min(100%, 432px); justify-self: end; padding: 31px; border: 1px solid #547793; border-radius: 12px; background: linear-gradient(145deg, rgba(24, 42, 59, .98), rgba(12, 23, 34, .98)); box-shadow: 0 24px 75px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .08); }.pricing-card::before { position: absolute; inset: 0; z-index: -1; content: ""; border: 1px solid rgba(244, 213, 87, .28); border-radius: inherit; mask: linear-gradient(#000, transparent 30%); }.pricing-orbit { position: absolute; z-index: -1; top: -164px; right: -127px; width: 362px; height: 362px; border: 1px solid rgba(244, 213, 87, .22); border-radius: 50%; box-shadow: 0 0 0 35px rgba(244, 213, 87, .025), 0 0 70px rgba(244, 213, 87, .08); }.launch-badge { display: inline-flex; margin: 0 0 23px; padding: 7px 10px; border: 1px solid rgba(244, 213, 87, .62); border-radius: 6px; color: #fff0a0; background: rgba(101, 77, 15, .22); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }.pricing-card h3 { margin-bottom: 3px; color: #f4f8fc; font-size: 29px; }.access-period { margin: 0; color: #a9c0d1; font-size: 14px; font-weight: 700; }.price-line { display: flex; align-items: flex-end; gap: 15px; margin: 27px 0 25px; }.old-price { position: relative; top: -7px; color: #849bac; font-size: 16px; font-weight: 750; text-decoration: line-through; text-decoration-color: #d46d6d; text-decoration-thickness: 1.5px; }.price-line > div { display: flex; align-items: baseline; gap: 7px; }.price-line strong { color: var(--gold); font-size: clamp(53px, 6vw, 66px); line-height: .78; letter-spacing: -.065em; text-shadow: 0 0 28px rgba(244, 213, 87, .18); }.price-line div span { color: #a6bdcf; font-size: 12px; font-weight: 750; }.pricing-includes { display: grid; gap: 10px; padding: 0 0 24px; margin: 0; border-bottom: 1px solid rgba(70, 104, 130, .67); list-style: none; }.pricing-includes li { display: flex; gap: 10px; color: #bad0df; font-size: 12px; line-height: 1.42; }.pricing-includes li::before { color: var(--gold); content: "✓"; font-size: 14px; font-weight: 900; }.purchase-button { width: 100%; margin-top: 22px; font-size: 14px; }.purchase-button:disabled { cursor: wait; opacity: .72; transform: none; }.payment-reassurance { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 14px 0 0; color: #a7c1d2; font-size: 11px; font-weight: 700; }.payment-reassurance span { color: var(--cyan); font-size: 16px; }.renewal-note { margin: 7px 0 0; color: #839caf; font-size: 10px; font-weight: 700; text-align: center; }.purchase-status { display: none; margin: 16px 0 0; padding: 10px 11px; border: 1px solid #486276; border-radius: 7px; color: #c1d6e5; background: rgba(11, 24, 35, .8); font-size: 11px; line-height: 1.5; text-align: center; }.purchase-status:not(:empty) { display: block; }.pricing-card[data-purchase-state="loading"] .purchase-status { color: #ccecf7; border-color: #4c8eb5; }.pricing-card[data-purchase-state="success"] .purchase-status { color: #d4f3d9; border-color: rgba(99, 220, 146, .65); background: rgba(34, 88, 57, .24); }.pricing-card[data-purchase-state="cancelled"] .purchase-status { color: #f5e6ab; border-color: rgba(244, 213, 87, .5); background: rgba(89, 71, 21, .21); }.pricing-card[data-purchase-state="error"] .purchase-status { color: #ffbac0; border-color: rgba(211, 95, 107, .65); background: rgba(100, 31, 42, .22); }
.product-frame--hero { aspect-ratio: 16 / 9; transform: none; }
.product-screenshot { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
.product-frame--showcase.product-frame--image { aspect-ratio: auto; }
.product-frame--showcase.product-frame--image::before { z-index: 0; }
.product-frame--showcase.product-frame--image .product-screenshot { width: 100%; max-width: 100%; height: auto; }

/* Landing hero: use a wider canvas so the product view and message retain their intended breathing room. */
.hero { min-height: 0; padding-top: clamp(88px, 10vh, 136px); padding-bottom: clamp(114px, 10vw, 156px); }
.hero .hero-layout { width: min(1540px, calc(100% - 56px)); grid-template-columns: minmax(390px, 36fr) minmax(620px, 64fr); gap: clamp(26px, 2.4vw, 42px); }
.hero-copy { padding-bottom: 0; }
.hero h1 { max-width: 560px; margin-bottom: 25px; font-size: clamp(46px, 4.3vw, 67px); line-height: 1.04; text-transform: uppercase; }
.hero .hero-lede { max-width: 500px; margin-bottom: 36px; font-size: 18px; line-height: 1.76; }
.hero .button { min-height: 59px; padding: 14px 20px; font-size: 15px; }
.hero .hero-trial-note { margin-top: 13px; font-size: 12px; }
.hero .hero-signals { gap: 0; margin-top: 57px; }
.hero .hero-signals div { display: grid; grid-template-columns: 35px 1fr; column-gap: 10px; min-width: 0; padding: 0 23px; }
.hero .hero-signals div:first-child { padding-left: 0; }
.hero .hero-signals dt, .hero .hero-signals dd { grid-column: 2; }
.hero .hero-signals dt { align-self: end; font-size: 13px; }
.hero .hero-signals dd { margin-top: 3px; font-size: 11px; }
.hero-signal-icon { grid-row: 1 / span 2; display: grid; width: 30px; height: 30px; place-items: center; align-self: center; font-size: 26px; line-height: 1; }
.hero-signal-icon--rocket { color: var(--cyan); transform: rotate(-20deg); }.hero-signal-icon--combat { color: var(--gold); }.hero-signal-icon--gates { color: #a980f1; }
.hero .product-frame--hero { aspect-ratio: 1466 / 943; border-color: rgba(100, 150, 190, .52); box-shadow: 0 18px 50px rgba(0, 0, 0, .28), inset 0 1px rgba(191, 221, 242, .08); transform: none; }
.hero .product-screenshot { object-fit: contain; }

@media (max-width: 900px) { .hero .hero-layout { width: min(1160px, calc(100% - 48px)); grid-template-columns: 1fr; }.hero .hero-product { max-width: 760px; }.hero .hero-signals { gap: 14px; }.hero .hero-signals div { padding: 0 14px; } .pricing-layout { grid-template-columns: 1fr; gap: 43px; }.pricing-card { justify-self: start; } }
@media (max-width: 650px) { .pricing { padding-top: 73px; padding-bottom: 73px; }.pricing-card { width: 100%; padding: 25px; }.pricing-card h3 { font-size: 27px; }.price-line { gap: 11px; margin: 24px 0 22px; }.price-line strong { font-size: 57px; }.pricing-includes { gap: 9px; }.purchase-button { min-height: 49px; } }

@media (max-width: 650px) { .hero { min-height: auto; padding-top: 57px; }.hero .hero-layout { width: min(100% - 32px, 1160px); gap: 40px; }.hero h1 { font-size: clamp(41px, 12vw, 57px); }.hero .hero-lede { font-size: 15px; }.hero .hero-actions { gap: 10px; }.hero .button { min-height: 50px; padding: 11px 15px; font-size: 13px; }.hero .hero-signals { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 38px; }.hero .hero-signals div, .hero .hero-signals div:first-child { padding: 0; }.hero .hero-signals div:not(:last-child)::after { display: none; } }

/* Restrained purple/gold nebula lighting for the product surface. */
.hero-stars { overflow: hidden; opacity: 1; background:
  radial-gradient(circle at 61% 26%, rgba(255, 220, 120, .42) 0 1px, transparent 1.7px),
  radial-gradient(circle at 71% 16%, rgba(202, 173, 255, .28) 0 1px, transparent 1.6px),
  radial-gradient(circle at 78% 31%, rgba(255, 255, 255, .28) 0 .8px, transparent 1.5px),
  radial-gradient(circle at 87% 22%, rgba(201, 174, 255, .23) 0 1px, transparent 1.6px),
  radial-gradient(circle at 91% 58%, rgba(255, 221, 132, .2) 0 .8px, transparent 1.4px),
  radial-gradient(circle at 68% 76%, rgba(218, 193, 255, .2) 0 .8px, transparent 1.5px),
  radial-gradient(circle at 82% 87%, rgba(255, 255, 255, .2) 0 .7px, transparent 1.4px),
  radial-gradient(ellipse 42% 57% at 79% 53%, rgba(79, 29, 142, .22), transparent 72%),
  radial-gradient(ellipse 29% 45% at 66% 34%, rgba(236, 169, 57, .17), transparent 70%),
  radial-gradient(ellipse 36% 35% at 72% 76%, rgba(111, 43, 174, .16), transparent 74%);
}
.hero-stars::before, .hero-stars::after { position: absolute; pointer-events: none; content: ""; border-radius: 50%; mix-blend-mode: screen; }
.hero-stars::before { top: 7%; left: 34%; width: 58%; height: 76%; transform: rotate(-18deg); background: radial-gradient(ellipse at 25% 50%, rgba(255, 205, 77, .2), transparent 48%), radial-gradient(ellipse at 62% 52%, rgba(188, 72, 184, .12), transparent 58%); filter: blur(58px); opacity: .72; }
.hero-stars::after { top: 4%; right: -8%; width: 67%; height: 111%; transform: rotate(17deg); background: radial-gradient(ellipse at 44% 38%, rgba(92, 37, 157, .25), transparent 58%), radial-gradient(ellipse at 66% 71%, rgba(57, 22, 113, .23), transparent 62%), radial-gradient(ellipse at 17% 28%, rgba(255, 196, 66, .12), transparent 48%); filter: blur(72px); opacity: .8; }
.hero::after { content: none; }

@media (max-width: 900px) { .hero-stars::before { left: 30%; width: 74%; opacity: .5; filter: blur(48px); }.hero-stars::after { right: -18%; width: 88%; opacity: .52; filter: blur(58px); } }
@media (max-width: 650px) { .hero-stars { opacity: .72; }.hero-stars::before { top: 25%; left: 28%; width: 82%; height: 60%; opacity: .4; filter: blur(42px); }.hero-stars::after { top: 18%; right: -25%; width: 100%; height: 78%; opacity: .38; filter: blur(48px); } }

/* Below-hero systems: calmer space between the page's cinematic moments. */
.intro { position: relative; padding: 96px 0; background: radial-gradient(ellipse 52% 90% at 72% 42%, rgba(55, 130, 168, .055), transparent 72%); }
.intro h2, .feature-overview h2, .features-page h2, .workflow-copy h2, .gate-showcase h2, .pricing-intro h2 { text-transform: uppercase; }
.feature-overview { padding-top: 96px; padding-bottom: 92px; }
.section-heading > p:not(.eyebrow) { max-width: 560px; }
.highlight-card, .category-card { position: relative; overflow: hidden; background: linear-gradient(145deg, rgba(19, 32, 47, .94), rgba(10, 18, 28, .94)); }
.highlight-card::before, .category-card::before { position: absolute; inset: 0; pointer-events: none; content: ""; border-top: 1px solid rgba(151, 191, 218, .11); border-radius: inherit; }
.highlight-card:hover, .category-card:hover { border-color: rgba(90, 145, 184, .8); background: linear-gradient(145deg, rgba(23, 40, 57, .98), rgba(11, 21, 32, .98)); }
.system-number { position: absolute; top: 20px; right: 21px; color: rgba(144, 169, 190, .48); font-size: 10px; font-weight: 900; letter-spacing: .15em; }
.highlight-card .card-icon, .category-card .card-icon { margin-bottom: 22px; border-color: rgba(85, 137, 173, .72); background: rgba(17, 39, 56, .72); }
.highlight-card:nth-child(2) .card-icon, .category-card:nth-child(2) .card-icon { color: #6fd8f0; border-color: rgba(88, 194, 225, .55); }
.highlight-card:nth-child(3) .card-icon, .category-card:nth-child(4) .card-icon, .category-card:nth-child(7) .card-icon { color: #be8af2; border-color: rgba(163, 103, 214, .55); }
.highlight-card:nth-child(4) .card-icon, .category-card:nth-child(3) .card-icon { color: #f09a8c; border-color: rgba(195, 93, 102, .5); }
.category-card li { padding: 4px 6px; border-color: rgba(61, 87, 107, .66); color: #9eb7c8; background: rgba(10, 20, 30, .38); font-size: 9px; opacity: .82; }

.showcase-stack { padding-top: 8px; padding-bottom: 88px; }
.showcase { position: relative; isolation: isolate; padding-top: 70px; padding-bottom: 70px; }
.showcase::before { position: absolute; z-index: -1; top: 7%; bottom: 7%; width: 54%; pointer-events: none; content: ""; filter: blur(38px); opacity: .48; }
.showcase--command::before { right: -6%; background: radial-gradient(ellipse, rgba(58, 138, 181, .16), transparent 69%); }
.showcase--combat::before { left: -7%; background: radial-gradient(ellipse, rgba(154, 56, 90, .14), rgba(95, 43, 143, .1) 42%, transparent 70%); }
.showcase--timetable::before { right: -5%; background: radial-gradient(ellipse, rgba(117, 63, 179, .16), transparent 69%); }
.showcase--safety::before { left: -5%; background: radial-gradient(ellipse, rgba(47, 140, 165, .1), rgba(148, 54, 67, .09) 48%, transparent 70%); }
.showcase .product-frame { border-color: rgba(82, 130, 164, .64); box-shadow: 0 18px 48px rgba(0, 0, 0, .26), inset 0 1px rgba(197, 226, 244, .06); }

.workflow-section { padding-top: 76px; padding-bottom: 76px; background: linear-gradient(90deg, rgba(20, 40, 57, .42), rgba(9, 15, 23, .08)); }
.features-page { padding-top: 106px; padding-bottom: 96px; }
.category-card { min-height: 248px; }.category-card .card-icon { margin-bottom: 18px; }

.feature-band { position: relative; overflow: hidden; padding-top: 94px; padding-bottom: 94px; }
.gate-showcase { position: relative; isolation: isolate; padding: 34px 0; border: 0; border-radius: 0; background: transparent; }
.gate-showcase::before { position: absolute; z-index: -1; top: -20%; bottom: -22%; left: -9%; width: 66%; pointer-events: none; content: ""; background: radial-gradient(ellipse at 45% 48%, rgba(116, 56, 180, .24), rgba(76, 33, 125, .13) 40%, transparent 72%); filter: blur(46px); }
.gate-showcase .product-frame { border-color: rgba(132, 87, 184, .65); box-shadow: 0 20px 55px rgba(0, 0, 0, .32), inset 0 1px rgba(219, 191, 255, .08); }
.gate-showcase .text-link { margin-top: 15px; }

.pricing { isolation: isolate; min-height: 0; padding: 116px 0; }
.pricing::before { z-index: 0; inset: 13% 0; background: radial-gradient(ellipse at 73% 50%, rgba(122, 56, 177, .21), transparent 33%), radial-gradient(ellipse at 35% 56%, rgba(240, 190, 59, .16), transparent 31%); }
.pricing-layout { position: relative; z-index: 1; }

@media (max-width: 900px) { .intro, .feature-overview, .features-page { padding-top: 78px; padding-bottom: 78px; }.showcase-stack { padding-bottom: 68px; }.showcase { padding-top: 58px; padding-bottom: 58px; }.feature-band { padding-top: 72px; padding-bottom: 72px; }.gate-showcase { padding: 20px 0; }.pricing { padding-top: 82px; padding-bottom: 82px; } }
@media (max-width: 650px) { .intro, .feature-overview, .features-page { padding-top: 68px; padding-bottom: 68px; }.highlight-card .card-icon, .category-card .card-icon { margin-bottom: 17px; }.showcase { padding-top: 48px; padding-bottom: 48px; }.showcase::before { width: 100%; opacity: .3; }.feature-band { padding-top: 62px; padding-bottom: 62px; }.gate-showcase::before { left: -27%; width: 120%; opacity: .55; }.pricing { padding-top: 72px; padding-bottom: 72px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

@media (max-width: 900px) { .hero { padding-bottom: clamp(88px, 10vw, 114px); } }
@media (max-width: 650px) { .hero { padding-bottom: 78px; } }

/* One conversion-led close: product action first, community second. */
.community-final { position: relative; isolation: isolate; overflow: hidden; padding: 108px 0 88px; }
.community-final::before { position: absolute; z-index: 0; inset: 0; pointer-events: none; content: ""; background: radial-gradient(ellipse 29% 58% at 42% 41%, rgba(241, 198, 69, .1), transparent 74%), radial-gradient(ellipse 35% 64% at 63% 56%, rgba(121, 59, 174, .11), transparent 76%); }
.final-cta-inner { position: relative; z-index: 1; padding: 0 20px; border: 0; }
.final-cta-main { text-align: center; }.final-cta-main h2 { margin-bottom: 16px; }.final-cta-lede { max-width: 560px; margin: 0 auto 28px; color: #a9c0d1; font-size: 16px; line-height: 1.7; }.final-cta-main .hero-actions { justify-content: center; }.final-trial-note { margin: 12px 0 0; color: #8fa6b9; font-size: 11px; font-weight: 650; }
.community-callout { display: flex; max-width: 880px; align-items: center; justify-content: space-between; gap: 28px; padding: 30px 38px; margin: 62px auto 0; border: 1px solid rgba(105, 126, 187, .54); border-radius: 10px; background: radial-gradient(ellipse at 88% 50%, rgba(91, 56, 147, .17), transparent 42%), radial-gradient(ellipse at 10% 0%, rgba(190, 155, 66, .06), transparent 34%), rgba(12, 24, 38, .9); box-shadow: 0 14px 38px rgba(34, 17, 61, .12), inset 0 1px rgba(188, 205, 242, .05); text-align: left; }.community-callout .eyebrow { margin-bottom: 6px; color: #f2d65c; }.community-callout h3 { margin: 0 0 5px; color: #edf5fc; font-size: 18px; }.community-callout p:not(.eyebrow) { max-width: 550px; margin: 0; color: #9eb5c7; font-size: 13px; line-height: 1.55; }.community-discord { flex: 0 0 auto; min-height: 38px; padding: 8px 14px; border-color: rgba(145, 101, 203, .76); color: #fff; background: linear-gradient(135deg, #7054e6, #5b36d8); box-shadow: 0 7px 18px rgba(77, 48, 181, .24); font-size: 12px; }.community-discord:hover { border-color: rgba(194, 161, 255, .92); background: linear-gradient(135deg, #7a5eef, #6540dd); }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }.discord-icon { display: block; width: 1em; height: 1em; flex: 0 0 auto; }.community-callout { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; }.discord-emblem { display: grid; width: 62px; height: 62px; place-items: center; border: 0; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #5f49c7, #4633aa); box-shadow: 0 8px 18px rgba(39, 25, 94, .28); }.discord-emblem .discord-icon { width: 32px; height: 32px; }.nav-discord .discord-icon, .community-discord .discord-icon { width: 18px; height: 18px; transform: translateY(.5px); }.footer-inner nav a:last-child { display: inline-flex; align-items: center; gap: 5px; }.footer-inner nav a:last-child .discord-icon { width: 14px; height: 14px; transform: translateY(.5px); }

@media (max-width: 900px) { .pricing { min-height: 0; padding: 106px 0; }.community-final { padding-top: 92px; padding-bottom: 78px; } }
@media (max-width: 650px) { .pricing { min-height: 0; padding: 78px 0; }.community-final { padding-top: 78px; padding-bottom: 68px; }.final-cta-inner { padding: 0 12px; }.final-cta-lede { font-size: 15px; }.community-callout { grid-template-columns: 54px minmax(0, 1fr); align-items: flex-start; gap: 18px; padding: 22px; margin-top: 48px; }.discord-emblem { width: 54px; height: 54px; }.discord-emblem .discord-icon { width: 28px; height: 28px; }.community-callout .button { grid-column: 1 / -1; width: 100%; } }

/* Shared mission briefings mark the shift from command systems to the next move. */
.mission-briefing { position: relative; overflow: hidden; padding: 64px 0; margin: 120px 0; border-top: 1px solid rgba(55, 84, 109, .65); border-bottom: 1px solid rgba(55, 84, 109, .65); background: radial-gradient(ellipse at 76% 50%, rgba(48, 120, 157, .09), transparent 43%), linear-gradient(90deg, rgba(16, 34, 49, .52), rgba(11, 17, 26, .16)); }
.mission-briefing--launch { background: radial-gradient(ellipse at 19% 52%, rgba(44, 124, 155, .1), transparent 42%), linear-gradient(90deg, rgba(15, 31, 46, .54), rgba(9, 15, 23, .12)); }
.mission-briefing-layout { display: grid; grid-template-columns: .85fr 1fr; gap: 12%; align-items: center; }
.mission-briefing-copy h2 { max-width: 700px; margin: 0 0 16px; font-size: clamp(29px, 3.3vw, 43px); line-height: 1.08; text-transform: uppercase; }
.mission-briefing-copy > p:not(.eyebrow), .mission-briefing-side p { color: var(--muted); font-size: 15px; line-height: 1.72; }.mission-briefing-copy > p:last-child { max-width: 485px; margin-bottom: 0; }
.mission-briefing-side { padding-left: 34px; border-left: 1px solid rgba(65, 98, 124, .7); }.mission-side-label { margin: 0 0 10px; color: var(--cyan) !important; font-size: 10px !important; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }.mission-briefing-side strong { display: block; margin-bottom: 9px; color: #edf5fc; font-size: 20px; line-height: 1.18; }.mission-briefing-side p:last-child { max-width: 390px; margin: 0; }
.showcase-stack { padding-bottom: 0; }.showcase--gates { border-bottom: 1px solid rgba(48, 72, 94, .6); }.showcase--gates::before { left: -6%; right: auto; width: 58%; background: radial-gradient(ellipse, rgba(116, 56, 180, .2), rgba(74, 32, 120, .1) 42%, transparent 70%); }.showcase--gates .product-frame { border-color: rgba(132, 87, 184, .65); box-shadow: 0 20px 55px rgba(0, 0, 0, .32), inset 0 1px rgba(219, 191, 255, .08); }

@media (max-width: 900px) { .mission-briefing { padding: 64px 0; margin: 100px 0; }.mission-briefing-layout { grid-template-columns: 1fr; gap: 46px; }.mission-briefing-side { padding-left: 0; border-left: 0; } }
@media (max-width: 650px) { .mission-briefing { padding: 56px 0; margin: 72px 0; }.mission-briefing-layout { gap: 34px; }.mission-briefing-copy h2 { font-size: 31px; }.mission-briefing-copy > p:not(.eyebrow), .mission-briefing-side p { font-size: 14px; } }

/* Command-system modules: richer identity without leaving the established card language. */
.highlight-grid { gap: 18px; }
.highlight-card { display: flex; min-height: 268px; flex-direction: column; isolation: isolate; overflow: hidden; padding: 25px 26px 20px; border-color: rgb(var(--feature-accent) / .46); background: radial-gradient(circle at 100% 0, rgb(var(--feature-accent) / .11), transparent 37%), linear-gradient(145deg, rgba(18, 32, 47, .98), rgba(9, 17, 27, .98)); box-shadow: inset 0 1px rgb(255 255 255 / .045), 0 12px 30px rgb(0 0 0 / .1); cursor: pointer; transition: transform .26s ease-out, border-color .26s ease-out, box-shadow .26s ease-out, background .26s ease-out, opacity .55s ease-out; }
.highlight-card::before { position: absolute; inset: 0; z-index: 0; pointer-events: none; content: ""; border: 1px solid rgb(var(--feature-accent) / .1); border-radius: inherit; background-image: linear-gradient(rgb(119 151 175 / .065) 1px, transparent 1px), linear-gradient(90deg, rgb(119 151 175 / .065) 1px, transparent 1px); background-position: 0 0; background-size: 30px 30px; mask-image: linear-gradient(135deg, transparent 0, #000 34%, #000 100%); opacity: .46; transition: opacity .3s ease-out, background-position .6s ease-out; }
.highlight-card::after { position: absolute; z-index: 0; top: -102px; right: -74px; width: 212px; height: 212px; pointer-events: none; content: ""; border: 1px solid rgb(var(--feature-accent) / .32); border-radius: 50%; box-shadow: 0 0 0 42px rgb(var(--feature-accent) / .025); opacity: .72; transition: transform .65s ease-out, opacity .3s ease-out; }
.highlight-card > * { position: relative; z-index: 1; }.highlight-grid .highlight-card .card-icon { width: 54px; height: 54px; margin-bottom: 17px; border-color: rgb(var(--feature-accent) / .72); border-radius: 14px; color: rgb(var(--feature-accent)); background: rgb(var(--feature-accent) / .085); box-shadow: inset 0 1px rgb(255 255 255 / .06), 0 0 18px rgb(var(--feature-accent) / .08); font-size: 24px; transition: box-shadow .26s ease-out, background .26s ease-out; }.highlight-card h3 { margin-bottom: 8px; color: #f1f7fc; font-size: 20px; }.highlight-card > p { max-width: 300px; color: #a5bed0; }
.highlight-card .system-number { top: 21px; right: 23px; color: rgb(var(--feature-accent) / .46); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10px; letter-spacing: .16em; transition: color .26s ease-out; }
.feature-card-footer { margin-top: auto; padding-top: 17px; }.feature-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; }.feature-tags li { padding: 5px 7px; border: 1px solid rgb(var(--feature-accent) / .24); border-radius: 6px; color: #b7ccda; background: rgb(8 18 28 / .46); cursor: default; font-size: 9px; font-weight: 750; line-height: 1; white-space: nowrap; }
@keyframes system-card-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.highlight-grid .highlight-card.in-view { animation: system-card-enter .48s ease-out backwards; }.highlight-grid .highlight-card:nth-child(2).in-view { animation-delay: .07s; }.highlight-grid .highlight-card:nth-child(3).in-view { animation-delay: .14s; }.highlight-grid .highlight-card:nth-child(4).in-view { animation-delay: .21s; }.highlight-grid .highlight-card:nth-child(5).in-view { animation-delay: .28s; }.highlight-grid .highlight-card:nth-child(6).in-view { animation-delay: .35s; }
@media (hover: hover) { .highlight-card:hover { transform: translateY(-4px); border-color: rgb(var(--feature-accent) / .82); background: radial-gradient(circle at 100% 0, rgb(var(--feature-accent) / .18), transparent 40%), linear-gradient(145deg, rgba(22, 39, 57, .99), rgba(10, 20, 31, .99)); box-shadow: 0 17px 34px rgb(0 0 0 / .25), 0 0 21px rgb(var(--feature-accent) / .1), inset 0 1px rgb(255 255 255 / .07); }.highlight-card:hover::before { background-position: 4px 4px; opacity: .68; }.highlight-card:hover::after { opacity: 1; transform: translate(-5px, 4px) rotate(4deg); }.highlight-grid .highlight-card:hover .card-icon { background: rgb(var(--feature-accent) / .13); box-shadow: 0 0 22px rgb(var(--feature-accent) / .2), inset 0 1px rgb(255 255 255 / .08); }.highlight-card:hover .system-number { color: rgb(var(--feature-accent) / .9); } }
.showcase--gates { border-bottom: 0; }
@media (max-width: 900px) { .highlight-grid { gap: 15px; }.highlight-card { min-height: 260px; } }
@media (max-width: 650px) { .highlight-card { min-height: 250px; padding: 23px; }.highlight-grid .highlight-card .card-icon { width: 50px; height: 50px; }.feature-tags li { font-size: 9px; } }
@media (prefers-reduced-motion: reduce) { .highlight-grid .highlight-card.in-view { animation: none; } }

.checkout-email { display: grid; gap: 7px; margin-top: 20px; color: #bed2e0; font-size: 11px; font-weight: 800; }.checkout-email input { width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 13px; border: 1px solid #48657e; border-radius: 7px; outline: none; color: #eef8ff; background: rgba(7, 17, 27, .78); font: inherit; }.checkout-email input::placeholder { color: #7892a7; }.checkout-email input:focus-visible { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(244, 213, 87, .16); }

/* Licence confirmation is a browser page, so it can provide a real copy action. */
.licence-key-panel { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px; margin:22px 0 0; border:1px solid #547793; border-radius:9px; background:#07111b; }.licence-key-panel > div { min-width:0; }.licence-key-label { display:block; margin-bottom:7px; color:#9db7ca; font-size:10px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }.licence-key-panel pre { overflow-wrap:anywhere; margin:0; color:#fff0a0; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:16px; font-weight:800; letter-spacing:.06em; white-space:pre-wrap; }.licence-key-panel .button { flex:0 0 auto; min-width:108px; }.licence-key-panel .button:focus-visible { outline-color:rgba(244,213,87,.9); }
@media (max-width:650px) { .licence-key-panel { align-items:stretch; flex-direction:column; }.licence-key-panel .button { width:100%; } }

/* The timetable UI is the Automation showcase: give it the majority of the
   row and keep its original screenshot ratio instead of treating it as a
   small illustrative panel. */
.showcase--command, .showcase.showcase--special-keys { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); gap: clamp(40px, 5vw, 72px); }
.showcase.showcase--gates, .showcase.showcase--resources { grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); gap: clamp(40px, 5vw, 72px); }
@media (max-width:900px) { .showcase--command, .showcase.showcase--special-keys, .showcase.showcase--gates, .showcase.showcase--resources { grid-template-columns: 1fr; gap: 30px; } }

/* Product screenshots open at their natural logical size, capped to the
   viewport so the interface stays inspectable without touching the layout. */
.showcase-image-trigger { display: block; padding: 0; appearance: none; cursor: pointer; font: inherit; text-align: inherit; }.showcase-image-trigger:focus-visible { outline: 3px solid rgba(85, 214, 229, .85); outline-offset: 4px; }
.showcase-lightbox { width: min(1155px, calc(100vw - 64px)); max-width: none; max-height: none; padding: 0; border: 0; overflow: visible; background: transparent; }.showcase-lightbox::backdrop { background: rgba(3, 8, 14, .84); backdrop-filter: blur(7px); }.showcase-lightbox-image { display: block; width: auto; max-width: 100%; max-height: calc(100vh - 64px); height: auto; border: 1px solid rgba(100, 150, 190, .56); border-radius: 12px; box-shadow: 0 26px 80px rgba(0, 0, 0, .52); }.showcase-lightbox-close { position: absolute; z-index: 1; top: 10px; right: 10px; display: grid; width: 34px; height: 34px; place-items: center; padding: 0; border: 1px solid rgba(149, 183, 211, .62); border-radius: 50%; color: #eff7ff; background: rgba(8, 17, 27, .82); cursor: pointer; font-size: 23px; line-height: 1; }.showcase-lightbox-close:hover { border-color: #d6eaf8; background: #14263a; }.showcase-lightbox-close:focus-visible { outline: 3px solid rgba(85, 214, 229, .85); outline-offset: 3px; }
@media (max-width:650px) { .showcase-lightbox { width: calc(100vw - 32px); }.showcase-lightbox-image { max-height: calc(100vh - 92px); border-radius: 9px; }.showcase-lightbox-close { top: 8px; right: 8px; } }

/* Keep the divider quiet and let each product story breathe on both sides. */
.showcase { padding-block: 100px; }
@media (max-width:900px) { .showcase { padding-block: 76px; } }
@media (max-width:650px) { .showcase { padding-block: 58px; } }
.purchase-button:not(:disabled) { cursor: pointer; }

/* Download is the primary navigation action; Discord remains the secondary route. */
.site-nav { gap: 14px; }
.site-nav .nav-download { display: inline-flex; align-items: center; gap: 9px; margin-left: 10px; padding-right: 17px; padding-left: 17px; border: 1px solid #edca4c; color: #16170f; background: linear-gradient(135deg, #ffe16c, #e9bd39); box-shadow: 0 6px 16px rgba(218, 177, 50, .16); }
.site-nav .download-icon { width: 19px; height: 19px; flex: 0 0 auto; }
.site-nav .nav-discord { margin-left: 2px; }
.site-nav .nav-download:hover { color: #11130d; border-color: #ffe88d; background: linear-gradient(135deg, #ffea80, #f0c741); transform: translateY(-1px); box-shadow: 0 9px 21px rgba(218, 177, 50, .24); }
@media (max-width: 900px) { .site-nav { gap: 4px; }.site-nav .nav-download { margin-left: 0; } }