:root { --ink:#17243a; --muted:#596679; --blue:#2465d6; --blue-dark:#194ba4; --line:#e3e8ef; --soft:#f6f8fb; --radius:14px; }
.offer-duration{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 28px;color:var(--ink)}
.offer-duration[hidden]{display:none}.offer-duration select{font:inherit;padding:10px 16px;background:#fff;color:var(--ink);border:1px solid #c9d2de;border-radius:8px}
.subscription-card{display:flex;flex-direction:column}.subscription-card ul{padding-left:20px;color:var(--muted);font-size:14px;margin:16px 0;line-height:1.8}
.subscription-card .offer-price{margin-top:auto;padding-top:20px;margin-bottom:18px}.offer-price strong{display:block;color:var(--ink);font-size:34px;line-height:1.2}.offer-price span{font-size:13px;color:var(--muted)}
.subscription-card .offer-link{color:#fff;font-size:14px;justify-content:center}.offer-note{text-align:center;max-width:850px;margin:24px auto 0;color:var(--muted);font-size:13px}.offer-note a{color:var(--blue)}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:130px; }
body { margin:0; background:#fff; color:var(--ink); font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:15px; line-height:1.7; -webkit-font-smoothing:antialiased; }
h1,h2,h3,p,figure { margin:0; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button,a,input,summary { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
img { display:block; max-width:100%; height:auto; }
svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.icon-library { position:absolute; width:0; height:0; overflow:hidden; }
:focus-visible { outline:3px solid #80aaf4; outline-offset:4px; }
::selection { background:#dce9ff; color:var(--ink); }
.container { width:min(1180px,calc(100% - 64px)); margin-inline:auto; }
.skip-link { position:fixed; left:20px; top:-80px; background:#fff; padding:12px 20px; z-index:3000; border:2px solid var(--blue); }
.skip-link:focus { top:12px; }
.header { position:sticky; top:0; z-index:100; border-bottom:1px solid #27272e; background:#0d0d0f; color:#f1f1f4; }
.promo-banner { height:30px; overflow:hidden; background:#19253a; color:#f5f7fc; font-size:12px; line-height:30px; letter-spacing:.15px; }
.promo-banner-track { display:flex; width:max-content; animation:promo-scroll 40s linear infinite; }
.promo-banner-group { display:flex; align-items:center; justify-content:space-around; gap:64px; min-width:100vw; padding-inline:32px; flex-shrink:0; }
.promo-banner-group span { white-space:nowrap; }
.promo-banner strong { color:#ff94a6; font-weight:700; }
.promo-banner:hover .promo-banner-track { animation-play-state:paused; }
@keyframes promo-scroll { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) {
  .promo-banner-track { animation:none; width:100%; }
  .promo-banner-group { width:100%; min-width:0; justify-content:center; padding-inline:12px; }
  .promo-banner-group + .promo-banner-group,.promo-banner-group span + span { display:none; }
}
.nav { min-height:86px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { display:flex; align-items:center; gap:11px; font-size:23px; font-weight:800; letter-spacing:-.7px; line-height:1.2; white-space:nowrap; }
.brand img { width:44px; height:44px; object-fit:contain; }
.brand-sub { display:block; margin-top:4px; font-size:11px; font-weight:500; letter-spacing:.2px; color:var(--muted); }
.header .brand-sub { color:#a1a1b0; }
.nav-links { display:flex; align-items:center; gap:12px; font-size:13px; font-weight:500; color:#b4b4c4; }
.nav-links>a { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border-radius:6px; }
.nav-links svg { width:15px; height:15px; }
.nav-links .discord-icon { width:18px; fill:currentColor; stroke:none; }
.nav-links .nav-discord { color:#99a5ff; }
.nav-links>a:not(.button):hover { color:#fff; background:#202026; }
.nav-links .nav-account { background:linear-gradient(135deg,#e94560,#c23152); color:#fff; border:0; padding:10px 15px; }
.nav-links .nav-account:hover { background:linear-gradient(135deg,#ff5a7e,#e94560); }
.footer a:hover { color:var(--blue); }
.button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:12px 19px; border:1px solid transparent; border-radius:8px; font-size:13px; font-weight:600; line-height:1.4; transition:background .15s,border-color .15s; text-align:center; }
.button svg { width:19px; height:19px; }
.button-primary { background:var(--blue); color:#fff; }
.button-primary:hover { background:var(--blue-dark); }
.button-outline { border-color:#d7dee8; background:#fff; color:var(--ink); }
.button-outline:hover { background:var(--soft); border-color:#b8c8df; }
.button-small { min-height:41px; padding:10px 15px; }
.menu-toggle { display:none; border:1px solid #35353e; border-radius:7px; padding:8px; background:#1b1b20; color:#f1f1f4; }
.hero { display:flex; flex-direction:column; align-items:center; gap:28px; padding-block:12px 32px; }
.presentation-video { position:relative; width:100%; overflow:hidden; border-radius:10px; background:#0b1120; aspect-ratio:2050/1080; box-shadow:0 16px 50px -30px #111a2e80; }
.presentation-video video { display:block; width:100%; height:100%; object-fit:contain; }
.video-start { position:absolute; left:50%; bottom:12%; transform:translateX(-50%); display:flex; align-items:center; gap:13px; padding:14px 22px; color:#fff; background:#c23152; border:1px solid #ff718a; border-radius:10px; text-align:left; box-shadow:0 6px 24px #0006; white-space:nowrap; }
.video-start:hover { background:#de365b; }
.video-start svg { width:30px; height:30px; fill:currentColor; stroke:none; }
.video-start span { font-size:15px; font-weight:700; line-height:1.5; }
.video-start small { display:block; font-size:11px; font-weight:400; color:#ffe1e7; }
.video-start[hidden],.video-message[hidden] { display:none; }
.video-message { text-align:center; font-size:13px; color:var(--muted); }
@media(max-width:600px) { .video-start { bottom:8%; padding:9px 12px; gap:8px; } .video-start span { font-size:12px; } .video-start small { font-size:9px; } .video-start svg { width:23px; height:23px; } }
.hero-copy { width:100%; max-width:800px; text-align:center; }
.hero-copy .eyebrow,.hero-actions { justify-content:center; }
.hero-copy .eyebrow { margin-bottom:12px; }
.hero-copy h1 { font-size:44px; }
.hero-under { width:100%; max-width:650px; text-align:center; }
.eyebrow { font-size:10px; font-weight:700; letter-spacing:1.6px; color:var(--blue); margin-bottom:16px; display:flex; align-items:center; gap:9px; }
.eyebrow-dot { width:6px; height:6px; border-radius:50%; background:var(--blue); }
h1 { font-size:clamp(36px,3.8vw,52px); line-height:1.13; letter-spacing:-2px; font-weight:800; }
h1 span { color:var(--blue); }
.hero-description { margin:12px auto 0; font-size:15px; line-height:1.85; color:var(--muted); max-width:650px; }
.hero-actions { display:flex; gap:10px; flex-wrap:wrap; }
.hero-note { font-size:11px; color:var(--muted); margin-top:12px; }
.hero-note span { margin-inline:7px; color:#a1aab6; }
.hero-carousel { width:100%; scroll-margin-top:20px; }
.carousel-top { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:0 0 12px; font-size:12px; font-weight:600; color:var(--muted); }
.carousel-top>div { display:flex; align-items:center; gap:9px; }
.carousel-controls { gap:16px!important; }
.carousel-controls>span { font-size:11px; font-variant-numeric:tabular-nums; }
.carousel-play { display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border:1px solid #d7dee8; border-radius:6px; background:#fff; color:var(--muted); font-size:11px; }
.carousel-play:hover { color:var(--blue); border-color:#acc4ef; }
.screenshot-next { display:block; width:100%; padding:0; border:0; background:transparent; cursor:pointer; }
.screenshot-next:focus-visible { outline-offset:-4px; }
.carousel-bottom { display:flex; justify-content:center; align-items:center; gap:20px; padding:14px 16px 0; }
.carousel-arrow { display:flex; align-items:center; justify-content:center; width:34px; height:34px; background:#fff; color:var(--muted); border:1px solid var(--line); border-radius:7px; flex-shrink:0; }
.carousel-arrow:hover { background:#edf3ff; color:var(--blue); }
.carousel-arrow svg { width:17px; height:17px; }
.carousel-hint { font-size:10px; color:var(--muted); text-align:center; padding:10px 15px 16px; }
.preview-mark { width:7px; height:7px; border-radius:50%; background:#44a280; }
.benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:34px; padding-block:25px 29px; border-top:1px solid var(--line); }
.benefits>div { display:flex; align-items:flex-start; gap:13px; font-size:12px; color:var(--muted); }
.benefits svg { color:var(--blue); margin-top:3px; width:22px; height:22px; }
.benefits strong { display:block; font-size:13px; color:var(--ink); font-weight:600; margin-bottom:2px; }
.section { padding-block:76px; }
.feature-section { background:var(--soft); border-block:1px solid #edf0f5; }
.section-heading { margin-bottom:34px; text-align:center; }
.section-heading .eyebrow { justify-content:center; margin-bottom:10px; }
h2 { font-size:clamp(26px,2.5vw,34px); font-weight:700; line-height:1.3; letter-spacing:-1px; }
.section-heading>p:last-child { color:var(--muted); margin-top:12px; font-size:14px; }
.feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.feature-card { padding:27px; background:#fff; border:1px solid var(--line); border-radius:12px; display:flex; flex-direction:column; align-items:flex-start; }
.feature-icon { display:flex; align-items:center; justify-content:center; width:43px; height:43px; border:1px solid #e1eaff; border-radius:10px; background:#f2f6ff; color:var(--blue); margin-bottom:18px; }
h3 { font-size:16px; line-height:1.5; font-weight:700; letter-spacing:-.3px; }
.feature-card p { margin-block:10px 20px; color:var(--muted); font-size:13px; line-height:1.85; }
.feature-card a,.steps a,.text-link { color:var(--blue); font-size:12px; font-weight:600; }
.feature-card a { margin-top:auto; }
.feature-card a:hover,.steps a:hover,.text-link:hover { text-decoration:underline; text-underline-offset:4px; }
.feature-card a span,.steps a span { margin-left:5px; }
.screenshot-tabs { display:flex; justify-content:center; flex-wrap:wrap; gap:6px; }
.screenshot-tabs button { border:1px solid transparent; border-radius:7px; background:#fff; padding:10px 19px; color:var(--muted); font-size:12px; font-weight:600; }
.screenshot-tabs button[aria-selected="true"] { color:var(--blue); background:#edf3ff; border-color:#d6e4ff; }
.screenshot-tabs button:hover { color:var(--blue); background:var(--soft); }
.screenshot-panel { width:100%; margin:auto; }
.screenshot-panel img { width:100%; height:clamp(180px,calc(100svh - 110px),760px); object-fit:contain; object-position:top; }
.screenshot-panel figcaption { padding:17px 24px 6px; min-height:84px; font-size:12px; color:var(--muted); text-align:center; }
.screenshot-panel figcaption strong { display:block; color:var(--ink); font-size:16px; margin-bottom:4px; }
.screenshot-panel figcaption span { display:block; }
.start-section { background:var(--soft); border-block:1px solid #edf0f5; }
.steps { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:50px; margin:0; padding:12px 0 0; counter-reset:step; }
.steps li { position:relative; padding-left:0; }
.steps li+li::before { content:""; position:absolute; width:1px; height:100%; background:var(--line); left:-25px; top:0; }
.step-number { color:var(--blue); font-size:24px; font-weight:700; display:block; margin-bottom:12px; letter-spacing:-1px; }
.steps p { font-size:13px; color:var(--muted); margin-block:9px 15px; }
.faq-section { display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; }
.faq-intro p:not(.eyebrow) { color:var(--muted); font-size:14px; margin-block:14px 17px; }
.faq-list details { border-bottom:1px solid var(--line); }
.faq-list details:first-child { border-top:1px solid var(--line); }
.faq-list summary { list-style:none; cursor:pointer; padding:19px 30px 19px 0; font-size:13px; font-weight:600; position:relative; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"+"; position:absolute; right:4px; top:15px; font-size:21px; font-weight:400; color:var(--muted); }
.faq-list details[open] summary::after { content:"−"; }
.faq-list details p { font-size:13px; color:var(--muted); padding:0 24px 19px 0; }
.faq-list details a { color:var(--blue); text-decoration:underline; }
.closing-section { padding-block:45px; }
.closing { border:1px solid #dce7fa; border-radius:16px; padding:38px 42px; display:flex; align-items:center; justify-content:space-between; gap:30px; background:#f3f7ff; }
.closing .eyebrow { margin-bottom:8px; }
.closing h2 { font-size:27px; }
.closing p:not(.eyebrow) { color:var(--muted); font-size:13px; margin-top:9px; }
.closing-actions { display:flex; align-items:center; flex-direction:column; gap:13px; flex-shrink:0; }
.footer { border-top:1px solid var(--line); padding-block:28px; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.footer .brand { font-size:18px; gap:8px; }
.footer .brand img { width:32px; height:32px; }
.footer p { font-size:11px; color:var(--muted); }
.footer-inner>div { display:flex; gap:24px; font-size:11px; color:var(--muted); }
.download-modal { position:fixed; inset:0; z-index:2000; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(23,36,58,.45); }
.download-modal.open { display:flex; }
body.modal-open { overflow:hidden; }
.download-dialog { width:min(480px,100%); max-height:calc(100dvh - 40px); overflow:auto; padding:30px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 24px 80px rgba(23,36,58,.2); }
.download-dialog h2 { font-size:24px; letter-spacing:-.5px; }
.download-dialog p { color:var(--muted); font-size:13px; margin-block:12px 20px; }
.download-dialog label { display:block; font-weight:600; font-size:13px; margin-bottom:8px; }
.download-dialog input { width:100%; padding:12px; border:1px solid #cad4e3; border-radius:7px; font-size:14px; color:var(--ink); background:#fff; }
.download-message { min-height:20px; margin-top:12px; font-size:12px; color:#b42318; overflow-wrap:anywhere; }
.download-dialog__actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
.download-dialog .button[disabled] { opacity:.6; cursor:wait; }
.download-help { display:inline-block; font-size:12px; color:var(--blue); margin-top:20px; }
@media(min-width:1600px) { .hero { padding-block:12px 40px; } }
@media(max-width:1000px) {
  .nav-links { gap:3px; font-size:12px; }
  .hero { gap:20px; }
  .hero-copy h1 { font-size:39px; }
  .hero-description { font-size:14px; }
  .hero-actions .button { font-size:12px; }
  .feature-card { padding:22px; }
  .faq-section { gap:40px; }
}
@media(max-width:800px) {
  .container { width:calc(100% - 40px); }
  .nav { min-height:74px; }
  .menu-toggle { display:flex; }
  .nav-links { display:none; position:absolute; left:0; right:0; top:74px; background:#0d0d0f; border-bottom:1px solid #27272e; padding:20px; align-items:stretch; gap:5px; }
  .nav-links.open { display:flex; flex-direction:column; }
  .nav-links>a { padding:10px; }
  .hero { padding-block:12px 30px; gap:20px; }
  .hero-copy { max-width:610px; }
  .hero-copy h1 { font-size:39px; }
  .hero-description { max-width:550px; font-size:15px; }
  .benefits { gap:20px; }
  .benefits>div { flex-direction:column; gap:8px; font-size:11px; }
  .benefits strong { font-size:12px; }
  .section { padding-block:55px; }
  .feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .steps { gap:30px; }
  .steps li+li::before { left:-15px; }
  .faq-section { grid-template-columns:1fr; gap:25px; }
  .screenshot-panel img { height:min(66vw,calc(100svh - 100px)); }
  .closing { padding:28px; }
  .closing h2 { font-size:24px; }
  .footer-inner { flex-wrap:wrap; }
}
@media(max-width:520px) {
  .container { width:calc(100% - 36px); }
  .brand { font-size:22px; }
  h1 { font-size:39px; letter-spacing:-1.5px; }
  .hero-description { font-size:14px; }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .hero-actions .button { font-size:13px; }
  .hero-note { font-size:10px; }
  .hero-note span { margin-inline:4px; }
  .carousel-top { padding:0 0 10px; font-size:10px; }
  .carousel-controls { gap:8px!important; }
  .carousel-play { padding:5px 7px; }
  .carousel-bottom { gap:8px; padding:12px 8px 0; }
  .benefits { grid-template-columns:1fr; gap:17px; padding-block:23px; }
  .benefits>div { flex-direction:row; font-size:12px; gap:13px; }
  .benefits strong { font-size:13px; }
  .feature-grid { grid-template-columns:1fr; gap:14px; }
  .feature-card { padding:24px; }
  .section-heading { text-align:left; margin-bottom:26px; }
  .section-heading .eyebrow { justify-content:flex-start; }
  .section-heading>p:last-child { font-size:13px; }
  h2 { font-size:27px; }
  .screenshot-tabs { gap:3px; }
  .screenshot-tabs button { padding:8px; font-size:10px; }
  .screenshot-panel img { height:min(66vw,calc(100svh - 100px)); }
  .screenshot-panel figcaption { padding:14px 12px 4px; min-height:97px; font-size:11px; }
  .screenshot-panel figcaption strong { font-size:14px; }
  .steps { grid-template-columns:1fr; gap:25px; }
  .steps li { padding-bottom:25px; border-bottom:1px solid var(--line); }
  .steps li:last-child { border-bottom:0; padding-bottom:0; }
  .steps li+li::before { display:none; }
  .step-number { font-size:22px; margin-bottom:8px; }
  .closing-section { padding-bottom:45px; }
  .closing { flex-direction:column; align-items:flex-start; padding:26px 23px; }
  .closing-actions { width:100%; align-items:stretch; text-align:center; }
  .footer-inner { flex-direction:column; gap:14px; }
  .footer-inner>div { gap:22px; }
  .download-dialog { padding:24px; }
  .download-dialog__actions { flex-direction:column-reverse; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } }

.video-page { max-width:1100px; margin:40px auto; padding:0 20px; }
.video-page h1 { margin:24px 0; font-size:clamp(24px,4vw,36px); }