:root {
  color-scheme: dark;
  --ink: #080b1d;
  --ink-soft: #10152f;
  --paper: #f7f8ff;
  --muted: #abb5d7;
  --line: rgba(198, 210, 255, 0.17);
  --cyan: #38e9ff;
  --blue: #4c84ff;
  --violet: #a34cff;
  --pink: #ff4fe1;
  --lime: #b7ff5a;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--ink); color: var(--paper); margin: 0; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }

.page-shell { overflow: hidden; }
.site-header,
.hero,
.result-panel,
.how-it-works,
.styles-section,
.privacy-section,
footer {
  margin-inline: auto;
  width: min(1180px, calc(100% - 48px));
}

.site-header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  min-height: 78px;
  position: relative;
  z-index: 2;
}

.brand { align-items: center; display: inline-flex; font-size: 1.05rem; font-weight: 800; gap: 10px; letter-spacing: .09em; text-decoration: none; }
.brand-mark { background: linear-gradient(135deg, var(--cyan), var(--blue) 48%, var(--violet)); border-radius: 8px; display: grid; height: 29px; overflow: hidden; padding: 5px; transform: skewY(-7deg); width: 29px; }
.brand-mark i { background: rgba(8, 11, 29, .9); border-radius: 2px; display: block; }
.brand-mark i:last-child { clip-path: polygon(0 0, 100% 50%, 0 100%); transform: translateX(3px); }
.site-header nav { display: flex; gap: 24px; margin-left: auto; }
.site-header nav a { color: var(--muted); font-size: .82rem; font-weight: 700; text-decoration: none; }
.site-header nav a:hover { color: var(--paper); }

.hero { display: grid; gap: 56px; grid-template-columns: minmax(0, .92fr) minmax(460px, 1.08fr); min-height: 700px; padding: 104px 0 92px; position: relative; }
.hero::before { background: radial-gradient(circle, rgba(76, 132, 255, .2), transparent 66%); content: ""; height: 580px; left: -310px; pointer-events: none; position: absolute; top: 20px; width: 580px; }
.hero-copy { align-self: center; position: relative; z-index: 1; }
.eyebrow { align-items: center; color: var(--cyan); display: flex; font-family: "DM Mono", ui-monospace, monospace; font-size: .7rem; font-weight: 500; gap: 9px; letter-spacing: .13em; margin: 0 0 19px; text-transform: uppercase; }
.eyebrow span { background: var(--cyan); border-radius: 50%; box-shadow: 0 0 18px var(--cyan); height: 7px; width: 7px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(3.4rem, 7.2vw, 6.7rem); letter-spacing: -.085em; line-height: .89; margin-bottom: 26px; }
h1 em { background: linear-gradient(100deg, var(--cyan), var(--blue), var(--violet), var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: Georgia, serif; font-weight: 400; letter-spacing: -.075em; }
.lede { color: var(--muted); font-size: 1.07rem; line-height: 1.68; margin-bottom: 30px; max-width: 565px; }

.url-form { display: flex; gap: 10px; max-width: 640px; }
.url-input-wrap { align-items: center; background: rgba(16, 21, 47, .82); border: 1px solid rgba(101, 156, 255, .55); border-radius: 14px; box-shadow: 0 0 0 4px rgba(56, 233, 255, .05), 0 8px 32px rgba(0, 0, 0, .22); display: flex; flex: 1; min-width: 0; padding: 0 15px; }
.url-input-wrap:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(56, 233, 255, .16), 0 0 28px rgba(56, 233, 255, .19); }
.url-icon { color: var(--cyan); font-family: "DM Mono", monospace; font-size: 1.2rem; margin-right: 10px; transform: rotate(45deg); }
.url-input-wrap input { background: transparent; border: 0; color: var(--paper); min-width: 0; outline: 0; padding: 17px 0; width: 100%; }
.url-input-wrap input::placeholder { color: #7f89ad; }
.primary-button { align-items: center; background: linear-gradient(110deg, #20dfff, #5674ff 53%, #a34cff); border: 0; border-radius: 14px; box-shadow: 0 12px 28px rgba(68, 105, 255, .31); color: white; display: inline-flex; flex: none; font-size: .86rem; font-weight: 800; gap: 10px; justify-content: center; min-height: 58px; padding: 0 20px; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; white-space: nowrap; }
.primary-button:hover { box-shadow: 0 16px 34px rgba(68, 105, 255, .47); transform: translateY(-2px); }
.primary-button:disabled { cursor: wait; filter: saturate(.55); opacity: .72; transform: none; }
.button-arrow { font-size: 1.25rem; }
.form-note, .guest-note { color: #818bad; font-size: .77rem; line-height: 1.5; margin-bottom: 0; }
.form-note { margin-top: 13px; }
.guest-note { color: #9da8ce; margin-top: 6px; min-height: 1.2em; }

.hero-visual { align-self: center; min-height: 480px; position: relative; }
.preview-card { backdrop-filter: blur(9px); background: linear-gradient(140deg, rgba(21, 29, 70, .9), rgba(9, 13, 34, .88)); border: 1px solid rgba(134, 177, 255, .45); border-radius: 20px; box-shadow: 0 32px 90px rgba(0, 0, 0, .4), 0 0 60px rgba(71, 91, 255, .18); left: 2%; overflow: hidden; padding: 14px; position: absolute; top: 10%; transform: rotate(-2.4deg); width: 95%; z-index: 1; }
.preview-topline { align-items: center; color: #cbd4f6; display: flex; font-family: "DM Mono", monospace; font-size: .65rem; gap: 8px; letter-spacing: .04em; margin-bottom: 11px; }
.preview-dot { background: #62f5aa; border-radius: 50%; box-shadow: 0 0 10px #62f5aa; height: 7px; width: 7px; }
.preview-live { color: #8896c4; font-size: .55rem; margin-left: auto; }
#video-canvas { background: #121b4a; border-radius: 10px; display: block; height: auto; width: 100%; }
.preview-controls { align-items: center; color: #c8d0ec; display: flex; font-family: "DM Mono", monospace; font-size: .58rem; gap: 10px; padding: 11px 2px 0; }
.play-icon { color: var(--cyan); font-size: .72rem; }
.progress-track { background: rgba(235, 242, 255, .2); border-radius: 99px; flex: 1; height: 3px; overflow: hidden; }
.progress-track i { background: linear-gradient(90deg, var(--cyan), var(--violet)); display: block; height: 100%; transform-origin: left; width: 26%; }
.glow { border-radius: 50%; filter: blur(2px); pointer-events: none; position: absolute; }
.glow-one { background: rgba(56, 233, 255, .25); height: 230px; right: -32px; top: -36px; width: 230px; }
.glow-two { background: rgba(190, 70, 255, .23); bottom: -26px; height: 270px; left: -86px; width: 270px; }
.orbital { border: 1px solid rgba(113, 176, 255, .32); border-radius: 50%; pointer-events: none; position: absolute; }
.orbital-one { height: 510px; right: -115px; top: -10px; width: 510px; }
.orbital-two { border-color: rgba(213, 92, 255, .3); bottom: -84px; height: 335px; left: -124px; width: 335px; }
.floating-chip { backdrop-filter: blur(6px); background: rgba(14, 20, 51, .82); border: 1px solid rgba(155, 177, 255, .27); border-radius: 99px; color: #d5dcf7; font-family: "DM Mono", monospace; font-size: .62rem; letter-spacing: .04em; margin: 0; padding: 10px 13px; position: absolute; z-index: 2; }
.chip-one { right: -4px; top: 2px; }
.chip-two { bottom: 33px; left: -24px; }

.result-panel { align-items: center; background: linear-gradient(110deg, rgba(25, 32, 78, .85), rgba(19, 15, 59, .85)); border: 1px solid rgba(120, 151, 255, .35); border-radius: 20px; display: flex; gap: 30px; justify-content: space-between; margin-bottom: 94px; padding: 31px; }
.result-panel[hidden] { display: none; }
.result-copy .eyebrow { margin-bottom: 10px; }
.result-copy h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); letter-spacing: -.06em; margin-bottom: 8px; }
.result-copy p:not(.eyebrow) { color: var(--muted); margin-bottom: 0; max-width: 570px; }
.result-actions { display: flex; flex: none; flex-wrap: wrap; gap: 10px; }
.download-link { min-height: 50px; }
.secondary-button { background: transparent; border: 1px solid rgba(166, 184, 244, .38); border-radius: 12px; color: var(--paper); font-size: .82rem; font-weight: 700; min-height: 50px; padding: 0 16px; }
.secondary-button:hover { border-color: var(--cyan); color: var(--cyan); }

.how-it-works { border-top: 1px solid var(--line); display: grid; gap: 72px; grid-template-columns: .85fr 1.15fr; padding: 110px 0; }
.section-intro h2, .styles-heading h2, .privacy-section h2 { font-size: clamp(2.3rem, 4.4vw, 4.5rem); letter-spacing: -.075em; line-height: .95; margin-bottom: 0; }
.steps-list { list-style: none; margin: 0; padding: 0; }
.steps-list li { border-top: 1px solid var(--line); display: flex; gap: 25px; padding: 25px 0; }
.steps-list li:last-child { border-bottom: 1px solid var(--line); }
.step-number { color: var(--cyan); font-family: "DM Mono", monospace; font-size: .75rem; padding-top: 4px; }
.steps-list h3 { font-size: 1.12rem; letter-spacing: -.03em; margin-bottom: 7px; }
.steps-list p { color: var(--muted); font-size: .9rem; line-height: 1.6; margin-bottom: 0; max-width: 500px; }

.styles-section { padding-bottom: 120px; }
.styles-heading { align-items: end; display: flex; gap: 40px; justify-content: space-between; margin-bottom: 38px; }
.styles-heading h2 { max-width: 740px; }
.style-grid { display: grid; gap: 13px; grid-template-columns: repeat(4, 1fr); }
.style-card { border: 1px solid var(--line); border-radius: 16px; min-height: 212px; overflow: hidden; padding: 22px; position: relative; }
.style-card::after { background: var(--card-glow); border-radius: 50%; content: ""; filter: blur(5px); height: 118px; position: absolute; right: -30px; top: -35px; width: 118px; }
.style-card span { color: var(--card-accent); font-family: "DM Mono", monospace; font-size: .66rem; position: relative; z-index: 1; }
.style-card h3 { bottom: 41px; font-size: 1.13rem; letter-spacing: -.04em; margin-bottom: 0; position: absolute; z-index: 1; }
.style-card p { bottom: 17px; color: var(--muted); font-size: .72rem; margin-bottom: 0; position: absolute; z-index: 1; }
.style-neon { --card-accent: var(--cyan); --card-glow: rgba(49, 221, 255, .42); background: linear-gradient(145deg, #102d61, #0e143c); }
.style-editorial { --card-accent: #f4e7c4; --card-glow: rgba(244, 231, 196, .28); background: linear-gradient(145deg, #3d4058, #171a28); }
.style-sunrise { --card-accent: #ffbf72; --card-glow: rgba(255, 87, 153, .42); background: linear-gradient(145deg, #492444, #1c1736); }
.style-signal { --card-accent: var(--lime); --card-glow: rgba(183, 255, 90, .3); background: linear-gradient(145deg, #184638, #101f2d); }

.privacy-section { align-items: center; background: #10152f; border: 1px solid var(--line); border-radius: 20px; display: grid; gap: 50px; grid-template-columns: 1fr 1fr; margin-bottom: 112px; padding: 54px; }
.privacy-section .eyebrow { margin-bottom: 12px; }
.privacy-section p:last-child { color: var(--muted); font-size: .98rem; line-height: 1.7; margin-bottom: 0; max-width: 490px; }
footer { border-top: 1px solid var(--line); color: #7f89ad; display: flex; font-family: "DM Mono", monospace; font-size: .64rem; justify-content: space-between; letter-spacing: .02em; padding: 24px 0 31px; }
.sr-only { height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; clip: rect(0, 0, 0, 0); white-space: nowrap; }

@media (max-width: 930px) {
  .hero { gap: 40px; grid-template-columns: 1fr; padding-top: 78px; }
  .hero-copy { max-width: 650px; }
  .hero-visual { margin: 8px auto 0; max-width: 630px; min-height: 450px; width: 100%; }
  .how-it-works { gap: 48px; grid-template-columns: 1fr; }
  .style-grid { grid-template-columns: repeat(2, 1fr); }
  .result-panel { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 620px) {
  .site-header, .hero, .result-panel, .how-it-works, .styles-section, .privacy-section, footer { width: calc(100% - 32px); }
  .site-header { min-height: 68px; }
  .site-header nav { gap: 15px; }
  .site-header nav a { font-size: .72rem; }
  .hero { min-height: auto; padding: 64px 0 71px; }
  h1 { font-size: clamp(3.2rem, 16.5vw, 5rem); }
  .lede { font-size: .96rem; }
  .url-form { flex-direction: column; }
  .primary-button { min-height: 55px; width: 100%; }
  .hero-visual { min-height: 305px; }
  .preview-card { border-radius: 14px; padding: 9px; top: 7%; }
  .floating-chip { font-size: .52rem; padding: 8px 10px; }
  .chip-one { right: -6px; top: -7px; }
  .chip-two { bottom: -5px; left: -5px; }
  .orbital-one { height: 340px; width: 340px; }
  .orbital-two { height: 235px; width: 235px; }
  .result-panel { margin-bottom: 66px; padding: 22px; }
  .result-actions { width: 100%; }
  .result-actions > * { flex: 1; }
  .how-it-works { gap: 35px; padding: 77px 0; }
  .styles-section { padding-bottom: 76px; }
  .styles-heading { display: block; margin-bottom: 27px; }
  .style-grid { gap: 10px; }
  .style-card { min-height: 178px; padding: 16px; }
  .style-card h3 { bottom: 35px; font-size: .95rem; }
  .style-card p { bottom: 14px; font-size: .62rem; line-height: 1.35; max-width: 120px; }
  .privacy-section { gap: 27px; grid-template-columns: 1fr; margin-bottom: 72px; padding: 30px 24px; }
  footer { flex-direction: column; gap: 8px; line-height: 1.5; }
}