:root {
  --bg: #080914;
  --panel: #10111e;
  --panel-light: #151725;
  --text: #f8f7ff;
  --muted: #9b9bad;
  --purple: #8b75ff;
  --purple-light: #b3a5ff;
  --cyan: #5de1f4;
  --green: #65e0ae;
  --border: rgba(255, 255, 255, 0.09);
  --font: "Manrope", system-ui, sans-serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background:
    radial-gradient(circle at 49% 7%, rgba(112, 85, 255, 0.12), transparent 29rem),
    var(--bg);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.page-glow {
  position: fixed;
  z-index: -1;
  width: 32rem;
  height: 32rem;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.08;
  pointer-events: none;
}
.page-glow--one { top: 25%; left: -24rem; background: var(--purple); }
.page-glow--two { top: 68%; right: -25rem; background: var(--cyan); }

.site-header {
  width: min(1180px, calc(100% - 48px));
  height: 86px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 10;
}
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 19px; font-weight: 800; letter-spacing: -0.5px; }
.brand img { width: 34px; height: 34px; border-radius: 10px; }
.site-nav { display: flex; gap: 36px; color: #b2b1be; font-size: 13px; font-weight: 600; }
.site-nav a, footer a, .text-link { transition: color .2s ease; }
.site-nav a:hover, footer a:hover, .text-link:hover { color: white; }
.header-download {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  font-size: 12px;
  font-weight: 700;
  transition: .2s ease;
}
.header-download span { color: var(--purple-light); }
.header-download:hover { transform: translateY(-1px); background: rgba(255,255,255,.08); }

.hero {
  width: min(1180px, calc(100% - 48px));
  min-height: 650px;
  margin: 0 auto;
  padding: 74px 0 72px;
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  align-items: center;
  gap: 48px;
}
.hero-copy { position: relative; z-index: 2; }
.eyebrow, .section-label {
  color: #c2b9ff;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 9px 12px; background: rgba(139,117,255,.08); border: 1px solid rgba(139,117,255,.19); border-radius: 999px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #75e6ad; box-shadow: 0 0 0 5px rgba(117,230,173,.08), 0 0 12px #75e6ad; }
.hero h1 {
  margin: 23px 0 22px;
  font-size: clamp(55px, 5.6vw, 78px);
  line-height: .99;
  letter-spacing: -5px;
  font-weight: 800;
}
.hero h1 span, .section-heading h2 span, .download-copy h2 span {
  background: linear-gradient(105deg, #a999ff 5%, #7de0f2 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-subtitle { max-width: 510px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.75; }
.hero-actions { margin-top: 30px; display: flex; align-items: center; gap: 24px; }
.primary-button {
  min-width: 205px;
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 20px;
  border-radius: 13px;
  background: linear-gradient(135deg, #8d78ff, #7155ef);
  color: white;
  box-shadow: 0 15px 45px rgba(104, 76, 238, .3), inset 0 1px rgba(255,255,255,.28);
  transition: transform .2s ease, box-shadow .2s ease;
}
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 20px 55px rgba(104,76,238,.42), inset 0 1px rgba(255,255,255,.3); }
.primary-button svg { width: 21px; }
.primary-button span { display: flex; flex-direction: column; font-size: 14px; font-weight: 800; line-height: 1.2; }
.primary-button small { color: rgba(255,255,255,.72); font-size: 9px; font-weight: 600; letter-spacing: .2px; }
.text-link { display: flex; align-items: center; gap: 3px; color: #bab9c7; font-size: 12px; font-weight: 700; }
.text-link svg { width: 17px; transition: transform .2s ease; }
.text-link:hover svg { transform: translateX(3px); }
.download-meta { margin-top: 19px; display: flex; align-items: center; gap: 10px; color: #666777; font-size: 10px; font-weight: 600; }
.download-meta i { width: 3px; height: 3px; background: #464756; border-radius: 50%; }

.hero-visual { min-height: 500px; position: relative; display: grid; place-items: center; perspective: 1000px; }
.hero-visual::before {
  content: "";
  position: absolute;
  width: 410px;
  height: 410px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(116,86,243,.27), rgba(90,70,199,.06) 48%, transparent 71%);
  filter: blur(7px);
}
.orbit { position: absolute; border: 1px solid rgba(154,132,255,.15); border-radius: 50%; transform: rotate(-20deg); }
.orbit--one { width: 545px; height: 330px; }
.orbit--two { width: 410px; height: 545px; transform: rotate(56deg); opacity: .45; }
.app-card {
  width: 600px;
  height: 302px;
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 15px;
  background: #0d0e18;
  box-shadow: 0 45px 100px rgba(0,0,0,.55), 0 0 70px rgba(123,91,255,.11), inset 0 1px rgba(255,255,255,.05);
  transform: rotateY(-4deg) rotateX(2deg);
}
.app-card--real { background: #080a10; }
.app-card--real > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.window-bar { height: 41px; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #20212d; background: #11121e; }
.window-brand { display: flex; align-items: center; gap: 7px; font-size: 9px; font-weight: 700; color: #d6d4df; }
.window-brand img { width: 18px; height: 18px; border-radius: 5px; }
.window-controls { height: 100%; display: flex; align-items: center; gap: 15px; }
.window-controls span { width: 8px; height: 1px; background: #61616e; display: block; }
.window-controls span:nth-child(2) { height: 7px; background: transparent; border: 1px solid #61616e; }
.app-body { height: calc(100% - 41px); display: flex; }
.app-sidebar { width: 47px; padding: 11px 0 9px; display: flex; flex-direction: column; align-items: center; gap: 9px; border-right: 1px solid #1b1c28; background: #0f101a; }
.side-icon { width: 28px; height: 28px; display: grid; place-items: center; color: #686979; border-radius: 7px; }
.side-icon.active { color: #ae9dff; background: rgba(139,117,255,.13); }
.side-icon svg { width: 14px; }
.side-avatar { width: 21px; height: 21px; margin-top: auto; display: grid; place-items: center; background: linear-gradient(135deg,#68d4e8,#8062e8); border-radius: 6px; font-size: 8px; font-weight: 800; }
.editor { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.editor-tabs { height: 35px; display: flex; align-items: stretch; border-bottom: 1px solid #1b1c28; background: #0b0c15; }
.editor-tab { padding: 0 13px; display: flex; align-items: center; gap: 6px; color: #777886; font: 8px var(--mono); border-right: 1px solid #1b1c28; }
.editor-tab.active { color: #cccbd4; background: #10111b; border-top: 1px solid #856ef0; }
.editor-tab span { width: 5px; height: 5px; background: #917bfb; border-radius: 2px; }
.editor-tab b { color: #555665; font-size: 11px; margin-left: 9px; }
.new-tab { padding: 8px 12px; color: #60616e; font-size: 11px; }
.code-area { flex: 1; padding-top: 18px; color: #c3c2cb; background: linear-gradient(90deg, #0f101a, #10111b); font: 10px/24px var(--mono); }
.code-area > div { display: flex; }
.code-area em { width: 38px; margin-right: 14px; color: #414250; text-align: right; font-style: normal; user-select: none; }
.code-area code { color: #b9b8c2; }
.code-area b { color: #d28eef; font-weight: 400; }
.code-area u { color: #77d5ef; text-decoration: none; }
.code-area i { color: #a995ff; font-style: normal; }
.code-area strong { color: #a8d98e; font-weight: 400; }
.editor-footer { height: 25px; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; background: #131421; border-top: 1px solid #1c1d29; color: #595a68; font: 7px var(--mono); }
.connected { display: flex; align-items: center; gap: 5px; color: #68d6a4; }
.connected span { width: 5px; height: 5px; background: #65dca9; border-radius: 50%; box-shadow: 0 0 8px #65dca9; }
.float-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.13); border-radius: 12px; background: rgba(21,22,36,.83); box-shadow: 0 15px 35px rgba(0,0,0,.36); backdrop-filter: blur(13px); }
.float-card--status { right: -1px; top: 38px; }
.float-card--speed { left: 4px; bottom: 31px; }
.float-card b, .float-card span { display: block; }
.float-card b { margin-bottom: 2px; font-size: 9px; }
.float-card div > span { color: #777887; font-size: 7px; }
.check-icon, .bolt { width: 27px; height: 27px; display: grid !important; place-items: center; border-radius: 8px; }
.check-icon { color: #71dfae; background: rgba(82,211,157,.11); }
.check-icon svg { width: 14px; }
.bolt { color: #f0d46d; background: rgba(240,212,109,.1); font-size: 17px; }

.trust-bar { min-height: 76px; border-block: 1px solid var(--border); background: rgba(255,255,255,.015); display: flex; align-items: center; justify-content: center; gap: 62px; color: #777887; font-size: 10px; font-weight: 600; }
.trust-bar > span { color: #d8d7e0; font-weight: 800; }
.trust-bar div { display: flex; align-items: center; gap: 7px; }
.trust-bar svg { width: 15px; color: #7770bd; }

.section { width: min(1080px, calc(100% - 48px)); margin: 0 auto; padding: 126px 0; }
.section-heading { max-width: 610px; margin-bottom: 54px; }
.section-heading h2, .download-copy h2 { margin: 15px 0 18px; font-size: clamp(38px, 4vw, 54px); line-height: 1.08; letter-spacing: -2.8px; }
.section-heading p, .download-copy > p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.feature-card { min-height: 275px; padding: 30px; position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.013)); transition: transform .25s ease, border-color .25s ease; }
.feature-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.16); }
.feature-card h3 { margin: 44px 0 10px; font-size: 19px; letter-spacing: -.6px; }
.feature-card p { max-width: 390px; margin: 0; color: #8e8e9e; font-size: 12px; line-height: 1.7; }
.feature-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; }
.feature-icon svg { width: 19px; }
.feature-icon.purple { color: #aa96ff; background: rgba(139,117,255,.12); }
.feature-icon.cyan { color: #62dcef; background: rgba(93,225,244,.1); }
.feature-icon.green { color: #6ae0b0; background: rgba(101,224,174,.1); }
.feature-icon.pink { color: #ed91cf; background: rgba(237,145,207,.1); }
.accent-card { display: grid; grid-template-columns: 1fr 180px; align-items: center; }
.accent-card h3 { margin-top: 32px; }
.windows-mark { width: 128px; height: 128px; margin-left: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; transform: perspective(500px) rotateY(-14deg); filter: drop-shadow(0 0 24px rgba(139,117,255,.2)); }
.windows-mark span { background: linear-gradient(135deg, rgba(147,126,255,.55), rgba(74,190,218,.32)); }

.download-section { width: min(1180px, calc(100% - 48px)); }
.download-panel { min-height: 435px; padding: 55px 60px; position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 420px; align-items: center; gap: 65px; border: 1px solid rgba(139,117,255,.19); border-radius: 26px; background: radial-gradient(circle at 100% 0%, rgba(102,75,229,.2), transparent 43%), linear-gradient(135deg, #121321, #0e0f1a); box-shadow: 0 30px 90px rgba(0,0,0,.22); }
.download-panel::before { content: ""; position: absolute; inset: 0; opacity: .17; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(90deg, black, transparent 65%); }
.download-copy, .release-card { position: relative; z-index: 1; }
.download-copy h2 { font-size: 44px; }
.download-copy > p { max-width: 430px; }
.primary-button--large { margin-top: 27px; min-width: 228px; min-height: 61px; }
.download-help { margin-top: 14px !important; color: #666777 !important; font-size: 9px !important; }
.download-help a { color: #aba0e9; text-decoration: underline; text-underline-offset: 3px; }
.release-card { padding: 23px; border: 1px solid rgba(255,255,255,.11); border-radius: 18px; background: rgba(8,9,19,.56); box-shadow: 0 20px 50px rgba(0,0,0,.24); backdrop-filter: blur(10px); }
.release-top { padding-bottom: 20px; display: flex; align-items: center; border-bottom: 1px solid var(--border); }
.release-top img { width: 54px; height: 54px; margin-right: 13px; border-radius: 15px; box-shadow: 0 9px 25px rgba(75,54,191,.25); }
.release-top div { display: flex; flex-direction: column; }
.release-top div span { color: #777887; font-size: 8px; text-transform: uppercase; letter-spacing: .8px; }
.release-top strong { margin-top: 2px; font-size: 22px; }
.latest-pill { margin-left: auto; padding: 5px 9px; color: #78deb1; background: rgba(101,224,174,.1); border: 1px solid rgba(101,224,174,.16); border-radius: 999px; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }
.release-card dl { margin: 14px 0 12px; }
.release-card dl div { padding: 7px 2px; display: flex; justify-content: space-between; font-size: 10px; }
.release-card dt { color: #6f707e; }
.release-card dd { margin: 0; color: #c2c1cb; font-weight: 600; }
.checksum { padding: 11px 12px; border-radius: 9px; background: rgba(255,255,255,.035); }
.checksum > span { display: block; margin-bottom: 6px; color: #646573; font-size: 7px; text-transform: uppercase; letter-spacing: .6px; }
.checksum button { width: 100%; padding: 0; display: flex; align-items: center; justify-content: space-between; border: 0; color: #a5a4af; background: transparent; cursor: pointer; }
.checksum code { font: 8px var(--mono); }
.checksum svg { width: 13px; color: #757684; }

.faq { padding-top: 90px; }
.section-heading--compact { margin-bottom: 34px; }
.section-heading--compact h2 { margin-bottom: 0; }
.faq-list { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { padding: 24px 2px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; font-size: 14px; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { width: 20px; height: 20px; position: relative; }
.faq summary span::before, .faq summary span::after { content: ""; position: absolute; top: 10px; left: 5px; width: 11px; height: 1px; background: #777887; transition: transform .2s ease; }
.faq summary span::after { transform: rotate(90deg); }
.faq details[open] summary span::after { transform: rotate(0); }
.faq details p { max-width: 700px; margin: -5px 0 24px; color: #888897; font-size: 12px; line-height: 1.7; }
.faq details code { color: #c0b4ff; font-family: var(--mono); }

.final-cta { padding-top: 85px; padding-bottom: 120px; text-align: center; }
.final-cta > img { width: 74px; height: 74px; border-radius: 22px; box-shadow: 0 18px 55px rgba(95,68,233,.3); }
.final-cta h2 { margin: 22px 0 6px; font-size: 37px; letter-spacing: -2px; }
.final-cta p { margin: 0 0 24px; color: var(--muted); font-size: 13px; }

footer { width: min(1180px, calc(100% - 48px)); min-height: 92px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); color: #60616e; font-size: 9px; }
footer .brand { color: #c6c5ce; font-size: 14px; }
footer .brand img { width: 26px; height: 26px; border-radius: 8px; }
footer div { display: flex; gap: 24px; }

.toast { position: fixed; right: 24px; bottom: 24px; z-index: 20; padding: 11px 15px; display: flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: #181927; box-shadow: 0 12px 35px rgba(0,0,0,.35); font-size: 11px; font-weight: 700; opacity: 0; transform: translateY(15px); pointer-events: none; transition: .25s ease; }
.toast.visible { opacity: 1; transform: translateY(0); }
.toast svg { width: 15px; color: #68dbaa; }

.download-progress {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(5, 6, 13, .78);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.download-progress.visible { opacity: 1; visibility: visible; }
.download-progress__card {
  width: min(390px, 100%);
  padding: 28px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: #12131f;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.download-progress__top { display: flex; align-items: center; gap: 13px; }
.download-progress__top img { width: 46px; height: 46px; border-radius: 13px; }
.download-progress__top strong, .download-progress__top span { display: block; }
.download-progress__top strong { font-size: 14px; }
.download-progress__top span { margin-top: 3px; color: #858695; font-size: 10px; }
.download-progress__track { height: 6px; margin-top: 22px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.07); }
.download-progress__bar { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #765be7, #a18eff, #66d8ed); box-shadow: 0 0 13px rgba(139,117,255,.45); transition: width .25s ease; }
.download-progress__meta { margin-top: 9px; display: flex; justify-content: space-between; color: #6d6e7c; font: 8px var(--mono); }

.reveal { opacity: 0; transform: translateY(14px); animation: reveal .65s ease forwards; }
.reveal--delay-1 { animation-delay: .08s; }
.reveal--delay-2 { animation-delay: .16s; }
.reveal--delay-3 { animation-delay: .24s; }
.reveal--delay-4 { animation-delay: .32s; }
@keyframes reveal { to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1040px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: 60px; }
  .hero-copy { max-width: 700px; margin: 0 auto; }
  .hero-subtitle { margin-inline: auto; }
  .hero-actions, .download-meta { justify-content: center; }
  .hero-visual { margin-top: -5px; }
  .download-panel { grid-template-columns: 1fr 380px; padding: 48px 40px; gap: 35px; }
}

@media (max-width: 800px) {
  .site-header { width: min(100% - 32px, 1180px); height: 72px; }
  .site-nav { display: none; }
  .hero, .section, .download-section, footer { width: min(100% - 32px, 1180px); }
  .hero { padding-top: 50px; gap: 35px; }
  .hero h1 { letter-spacing: -3.5px; }
  .hero-visual { min-height: 420px; transform: scale(.86); margin: -20px -50px; }
  .trust-bar { padding: 22px 25px; flex-wrap: wrap; gap: 22px 35px; }
  .feature-grid { grid-template-columns: 1fr; }
  .download-panel { grid-template-columns: 1fr; padding: 42px 28px; }
  .download-copy { text-align: center; }
  .download-copy > p { margin-inline: auto; }
  .release-card { width: 100%; max-width: 430px; margin-inline: auto; }
}

@media (max-width: 560px) {
  .header-download { padding: 9px 12px; }
  .header-download span { display: none; }
  .hero { min-height: auto; padding: 48px 0 62px; }
  .hero h1 { margin-top: 20px; font-size: 47px; letter-spacing: -3px; }
  .hero-subtitle { font-size: 14px; }
  .hero-actions { flex-direction: column; gap: 16px; }
  .hero-visual { min-height: 330px; transform: scale(.62); margin: -60px -150px; }
  .trust-bar > span { width: 100%; text-align: center; }
  .section { padding: 90px 0; }
  .section-heading h2, .download-copy h2 { font-size: 38px; letter-spacing: -2px; }
  .feature-card { min-height: 250px; padding: 25px; }
  .accent-card { grid-template-columns: 1fr; }
  .windows-mark { width: 80px; height: 80px; position: absolute; right: 22px; bottom: 22px; opacity: .35; }
  .download-panel { padding-inline: 18px; border-radius: 20px; }
  .download-copy { padding-inline: 5px; }
  .release-card { padding: 17px; }
  .final-cta { padding-bottom: 90px; }
  footer { padding: 30px 0; flex-direction: column; gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}