:root {
  color-scheme: dark;
  --bg: #0b0d12;
  --surface: #11141c;
  --surface-raised: #151923;
  --border: rgba(255, 255, 255, .085);
  --text: #f4f5f7;
  --muted: #a0a5b2;
  --subtle: #6f7583;
  --orange: #ff784e;
  --pink: #e972df;
  --purple: #9d83ff;
  --green: #55d7a3;
  --blue: #68a9ff;
  font-family: "Be Vietnam Pro", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--bg); color: var(--text); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.page-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(100px); pointer-events: none; }
.page-glow-one { width: 460px; height: 460px; top: 75px; left: -260px; background: rgba(218, 91, 83, .12); }
.page-glow-two { width: 420px; height: 420px; top: 310px; right: -270px; background: rgba(120, 82, 240, .11); }
.section-wrap, .site-header { width: min(1160px, calc(100% - 64px)); margin-inline: auto; }
.site-header { height: 82px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.06); }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 25px "Space Grotesk", sans-serif; letter-spacing: -1.6px; }
.brand-period { color: var(--orange); }
.brand-logo { width: 31px; height: 31px; display: block; border-radius: 8px; object-fit: cover; }
.main-nav { display: flex; height: 100%; align-items: center; gap: 34px; color: #b6bac4; font-size: 13px; }
.main-nav a { transition: color .2s ease; }
.main-nav a:hover, .back-top:hover { color: #fff; }
.main-nav .nav-cta { padding: 11px 16px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); }
.nav-cta span { padding-left: 8px; color: var(--orange); }
.menu-toggle { display: none; }
.hero { min-height: 660px; position: relative; display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 25px; padding-top: 14px; padding-bottom: 75px; }
.hero-copy { position: relative; z-index: 1; padding-bottom: 8px; }
.eyebrow, .section-kicker, .feature-index { font-size: 10px; font-weight: 700; letter-spacing: 1.8px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 30px; color: #d1d3da; background: rgba(255,255,255,.025); }
.eyebrow-dot, .status-pill i { width: 7px; height: 7px; border-radius: 50%; background: #6be1aa; box-shadow: 0 0 11px rgba(107,225,170,.75); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: "Space Grotesk", "Be Vietnam Pro", sans-serif; }
h1 { margin: 27px 0 20px; font-size: clamp(42px, 5.2vw, 66px); line-height: 1.13; letter-spacing: -3.9px; }
.gradient-text { color: transparent; background: linear-gradient(100deg, #ff9465 5%, #f27bb3 53%, #a68aff 100%); background-clip: text; -webkit-background-clip: text; }
.hero-description { max-width: 490px; margin-bottom: 27px; color: #aeb2bd; font-size: 15px; line-height: 1.9; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { min-height: 47px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0 19px; border: 1px solid transparent; border-radius: 8px; font-size: 12px; font-weight: 700; transition: transform .2s, border-color .2s, filter .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #171016; background: linear-gradient(105deg, #ff9a60, #f184aa 70%, #be91fd); box-shadow: 0 8px 24px rgba(228,112,122,.18); }
.button-primary:hover { filter: brightness(1.08); }
.button-primary span { font-size: 15px; }
.button-quiet { border-color: var(--border); color: #e5e6eb; background: rgba(255,255,255,.025); }
.button-quiet:hover { border-color: rgba(255,255,255,.23); }
.button-download-hero { position: relative; isolation: isolate; border-color: rgba(105,224,153,.48); background: linear-gradient(110deg, rgba(71,191,124,.16), rgba(112,220,144,.13)); box-shadow: 0 0 20px rgba(79,220,137,.2), inset 0 0 14px rgba(255,255,255,.035); animation: download-pulse 2.4s ease-in-out infinite; }
.button-download-hero::before { position: absolute; z-index: -1; inset: -5px; border-radius: 12px; background: rgba(75,220,133,.25); content: ""; filter: blur(13px); opacity: .55; animation: download-glow 2.4s ease-in-out infinite; }
.button-download-hero:hover { border-color: rgba(143,255,182,.82); background: linear-gradient(110deg, rgba(71,191,124,.25), rgba(112,220,144,.22)); box-shadow: 0 0 29px rgba(79,220,137,.34), inset 0 0 14px rgba(255,255,255,.06); }
@keyframes download-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.055); } }
@keyframes download-glow { 0%, 100% { opacity: .35; transform: scale(.94); } 50% { opacity: .8; transform: scale(1.08); } }
.play-icon { font-size: 9px; color: #f398a8; }
.hero-proof { display: flex; align-items: center; gap: 13px; margin-top: 34px; }
.proof-avatars { display: flex; }
.proof-avatars span { width: 29px; height: 29px; display: grid; place-items: center; margin-left: -5px; border: 2px solid var(--bg); border-radius: 50%; background: #323346; color: #f8c1a2; font-size: 11px; }
.proof-avatars span:first-child { margin-left: 0; background: #5a3f55; }
.proof-avatars span:last-child { background: #44406b; }
.hero-proof p { margin: 0; font-size: 10px; line-height: 1.65; }
.hero-proof strong { color: #e4e5e9; font-size: 11px; }
.hero-proof p span { color: var(--subtle); }
.hero-visual { min-width: 0; position: relative; display: grid; place-items: center; min-height: 440px; }
.visual-orbit { position: absolute; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; transform: rotate(-22deg); }
.orbit-large { width: 510px; height: 320px; }
.orbit-small { width: 430px; height: 260px; transform: rotate(32deg); border-color: rgba(236,127,171,.1); }
.visual-card { width: min(100%, 520px); position: relative; z-index: 1; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 13px; background: #11141b; box-shadow: 0 34px 100px rgba(0,0,0,.55), 0 0 70px rgba(142,96,180,.12); transform: perspective(1200px) rotateY(-5deg) rotateX(2deg); }
.visual-topbar { height: 39px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; border-bottom: 1px solid rgba(255,255,255,.07); color: #6e7481; font: 600 8px "Space Grotesk", sans-serif; letter-spacing: 1.5px; }
.visual-topbar b { color: #6be1aa; font-size: 8px; }
.window-dots { display: flex; gap: 4px; }
.window-dots i { width: 6px; height: 6px; border-radius: 50%; background: #ed6d71; }
.window-dots i:nth-child(2) { background: #f3bf62; }
.window-dots i:nth-child(3) { background: #63c783; }
.topbar-menu { font-size: 17px; letter-spacing: 1px; }
.visual-content { min-height: 313px; display: flex; }
.visual-sidebar { width: 42px; display: flex; flex: 0 0 42px; flex-direction: column; align-items: center; gap: 17px; padding: 13px 0; border-right: 1px solid rgba(255,255,255,.07); color: #717583; font-size: 12px; }
.sidebar-logo { width: 20px; height: 20px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 6px; background: linear-gradient(145deg, #fc9569, #bc76c7); color: #20141d; font: 700 11px "Space Grotesk", sans-serif; }
.side-active { color: #f398a8; }
.visual-workspace { min-width: 0; flex: 1; padding: 17px 16px 12px; }
.workspace-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.workspace-heading small, .timeline-label, .visual-footer { color: #767b88; font: 600 8px "Space Grotesk", sans-serif; letter-spacing: 1px; }
.workspace-heading h3 { margin: 4px 0 0; font-size: 15px; letter-spacing: -.4px; }
.status-pill { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid rgba(107,225,170,.14); border-radius: 15px; color: #90d4b4; font-size: 8px; }
.status-pill i { width: 5px; height: 5px; }
.video-preview { height: 133px; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 6px; background: linear-gradient(180deg, #435272 0%, #ac8791 45%, #edaa79 66%, #4e5164 67%, #222a38 100%); }
.preview-sun { width: 41px; height: 41px; position: absolute; top: 22px; left: 55%; border-radius: 50%; background: #ffc894; filter: blur(1px); box-shadow: 0 0 36px #ffc894; }
.preview-hill { position: absolute; right: -5%; bottom: 8px; width: 70%; height: 75px; border-radius: 50% 50% 0 0; transform: rotate(-9deg); background: linear-gradient(130deg, #53516a, #222b38); }
.hill-one { left: -7%; right: auto; bottom: -24px; width: 76%; height: 91px; transform: rotate(9deg); background: linear-gradient(150deg, #716477, #333342); }
.hill-two { right: -23%; bottom: -40px; height: 105px; }
.preview-play { width: 28px; height: 28px; position: absolute; top: 45px; left: calc(50% - 14px); display: grid; place-items: center; padding-left: 2px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; background: rgba(16,19,29,.38); color: white; font-size: 9px; backdrop-filter: blur(4px); }
.preview-caption { position: absolute; right: 8px; bottom: 27px; left: 8px; color: #fff; text-align: center; text-shadow: 0 2px 8px #171722; font-size: 9px; font-weight: 700; }
.preview-time { position: absolute; right: 8px; bottom: 7px; color: #fff; font: 600 8px "Space Grotesk", sans-serif; }
.preview-time i { color: rgba(255,255,255,.6); font-style: normal; }
.timeline-label { display: flex; justify-content: space-between; margin: 12px 0 6px; font-size: 7px; }
.timeline { display: grid; gap: 4px; }
.timeline-clip { height: 17px; overflow: hidden; padding: 3px 6px; border-radius: 3px; font: 500 7px "Be Vietnam Pro", sans-serif; }
.clip-video { width: 82%; color: #b8ccfa; background: linear-gradient(90deg, rgba(97,132,211,.4), rgba(97,132,211,.12)); }
.clip-voice { width: 67%; margin-left: 10%; color: #e5b2fc; background: linear-gradient(90deg, rgba(176,112,218,.37), rgba(176,112,218,.1)); }
.clip-subtitle { width: 90%; margin-left: 3%; color: #93e0c0; background: linear-gradient(90deg, rgba(94,201,152,.35), rgba(94,201,152,.1)); }
.visual-footer { display: flex; justify-content: space-between; margin-top: 12px; font-size: 7px; letter-spacing: 0; }
.visual-footer span:last-child { color: #79c5a1; }
.float-tag { position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.13); border-radius: 8px; background: rgba(22,24,33,.87); box-shadow: 0 10px 32px rgba(0,0,0,.35); color: #e6e6ec; font-size: 9px; backdrop-filter: blur(8px); }
.float-tag span { color: #f29aaa; font-size: 13px; }
.tag-subtitle { top: 59px; right: -2px; }
.tag-audio { bottom: 56px; left: 1px; }
.tag-audio span { color: #78ddb0; }
.visual-spark { position: absolute; z-index: 2; color: #ffc076; }
.spark-one { top: 75px; left: 24px; font-size: 21px; }
.spark-two { right: 9px; bottom: 80px; color: #ca98ff; font-size: 15px; }
.scroll-cue { position: absolute; bottom: 23px; left: 0; display: flex; align-items: center; gap: 9px; color: #777d89; font-size: 9px; letter-spacing: .7px; }
.scroll-cue span { width: 15px; height: 23px; position: relative; border: 1px solid #555b68; border-radius: 10px; }
.scroll-cue span::after { width: 2px; height: 5px; position: absolute; top: 4px; left: 6px; border-radius: 2px; background: #f08ba1; content: ""; animation: scroll-dot 1.6s ease infinite; }
@keyframes scroll-dot { to { transform: translateY(7px); opacity: 0; } }
.feature-section { padding-top: 73px; padding-bottom: 111px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 37px; }
.section-kicker { margin-bottom: 13px; color: #ee9b80; }
.section-heading h2, .workflow-copy h2 { margin: 0; font-size: clamp(32px, 4vw, 45px); line-height: 1.23; letter-spacing: -2px; }
.muted-heading { color: #9da2ae; }
.section-intro { max-width: 335px; margin: 0 0 4px; color: #969ba7; font-size: 12px; line-height: 1.85; }
.feature-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 13px; }
.feature-card { min-height: 236px; position: relative; overflow: hidden; grid-column: span 2; padding: 20px 20px 18px; border: 1px solid var(--border); border-radius: 11px; background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); transition: transform .25s, border-color .25s, background .25s; }
.feature-card:hover { transform: translateY(-4px); border-color: rgba(241,146,164,.28); background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); }
.feature-card-large, .feature-card-wide { grid-column: span 3; }
.feature-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.feature-icon { width: 33px; height: 33px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 9px; font-size: 15px; }
.icon-orange { color: #ff9970; background: rgba(255,128,83,.08); }
.icon-purple { color: #b39bff; background: rgba(157,131,255,.08); }
.icon-green { color: #65dcae; background: rgba(85,215,163,.08); }
.icon-blue { color: #78b4ff; background: rgba(104,169,255,.08); }
.icon-yellow { color: #f2c875; background: rgba(242,200,117,.08); }
.feature-index { color: #626875; font-size: 8px; letter-spacing: 1.2px; }
.feature-card h3 { max-width: 310px; margin: 0 0 9px; font-size: 17px; letter-spacing: -.65px; }
.feature-card p { max-width: 365px; margin: 0; color: #9298a5; font-size: 10px; line-height: 1.85; }
.platform-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; }
.platform-pills span { padding: 5px 8px; border: 1px solid rgba(255,255,255,.08); border-radius: 20px; color: #a9adba; font-size: 8px; }
.download-decoration { width: 118px; height: 104px; position: absolute; right: 9px; bottom: -23px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.07); border-radius: 50% 50% 0 0; background: radial-gradient(ellipse at center bottom, rgba(237,115,143,.21), transparent 65%); }
.download-decoration span { color: rgba(249,164,140,.65); font: 500 65px "Space Grotesk", sans-serif; }
.download-decoration i { width: 5px; height: 5px; position: absolute; top: 17px; left: 24px; border-radius: 50%; background: #f6a17b; }
.download-decoration i:nth-child(2) { top: 44px; left: 9px; width: 3px; height: 3px; }
.download-decoration i:nth-child(3) { top: 21px; left: 83px; width: 3px; height: 3px; }
.subtitle-decoration { position: absolute; right: 14px; bottom: 18px; display: grid; gap: 6px; padding: 9px 11px; border: 1px solid rgba(255,255,255,.08); border-radius: 6px; background: rgba(10,12,18,.7); transform: rotate(-3deg); }
.subtitle-decoration span { color: #e8dcff; font-size: 9px; }
.subtitle-decoration i { color: #9893a7; font-size: 7px; font-style: normal; }
.waveform-decoration { height: 35px; position: absolute; right: 15px; bottom: 22px; left: 15px; display: flex; align-items: center; justify-content: flex-end; gap: 3px; opacity: .76; }
.waveform-decoration i { width: 3px; height: var(--bar, 15px); border-radius: 3px; background: linear-gradient(180deg, #88e5bd, #56aa9f); }
.waveform-decoration i:nth-child(3n) { --bar: 25px; }.waveform-decoration i:nth-child(3n + 1) { --bar: 11px; }.waveform-decoration i:nth-child(4n) { --bar: 30px; }
.feature-card:nth-child(3) p { max-width: 290px; }
.edit-decoration { position: absolute; right: 14px; bottom: 12px; width: 125px; height: 80px; display: flex; align-items: center; justify-content: center; }
.edit-frame { width: 47px; height: 34px; position: absolute; border: 1px solid rgba(120,180,255,.44); border-radius: 4px; background: rgba(104,169,255,.12); transform: rotate(-10deg); }
.frame-two { margin-left: 34px; transform: rotate(7deg); background: rgba(187,128,255,.13); border-color: rgba(187,128,255,.5); }
.frame-three { margin-left: 67px; transform: rotate(-5deg); background: rgba(97,220,177,.11); border-color: rgba(97,220,177,.45); }
.edit-decoration b { position: absolute; color: #ddd0ff; font-size: 18px; }
.feature-card-seo { background: linear-gradient(120deg, rgba(242,200,117,.035), rgba(255,255,255,.012)); }
.seo-decoration { position: absolute; right: 16px; bottom: 16px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; max-width: 205px; }
.seo-decoration span { padding: 5px 8px; border: 1px solid rgba(242,200,117,.16); border-radius: 12px; background: rgba(242,200,117,.05); color: #d5c194; font-size: 7px; }
.seo-decoration i { position: absolute; top: -25px; right: 44px; color: #f1c676; font-size: 17px; font-style: normal; }
.workflow-section { position: relative; overflow: hidden; padding: 88px 0; border-block: 1px solid rgba(255,255,255,.055); background: radial-gradient(ellipse at 75% 48%, rgba(87,62,119,.13), transparent 47%), #0e1016; }
.workflow-wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 95px; align-items: center; }
.workflow-copy h2 { margin-bottom: 20px; }
.workflow-copy > p:not(.section-kicker) { max-width: 405px; margin-bottom: 23px; color: #999eaa; font-size: 12px; line-height: 1.9; }
.text-link { color: #f3a0a4; font-size: 11px; font-weight: 700; }
.text-link span { padding-left: 6px; }
.workflow-steps { position: relative; display: grid; gap: 9px; }
.workflow-step { min-height: 72px; position: relative; z-index: 1; display: grid; grid-template-columns: 27px 38px 1fr 19px; gap: 11px; align-items: center; padding: 11px 13px; border: 1px solid rgba(255,255,255,.075); border-radius: 9px; background: rgba(20,22,31,.88); }
.step-number { color: #626875; font: 600 9px "Space Grotesk", sans-serif; }
.step-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(235,143,161,.17); border-radius: 8px; background: rgba(235,143,161,.07); color: #ee9aaa; font-size: 14px; }
.workflow-step:nth-child(2) .step-icon { color: #8ec6ff; border-color: rgba(104,169,255,.18); background: rgba(104,169,255,.07); }
.workflow-step:nth-child(3) .step-icon { color: #bb9eff; border-color: rgba(157,131,255,.18); background: rgba(157,131,255,.07); }
.workflow-step:nth-child(4) .step-icon { color: #70dcb0; border-color: rgba(85,215,163,.18); background: rgba(85,215,163,.07); }
.workflow-step h3 { margin: 0 0 4px; font-size: 11px; letter-spacing: -.2px; }
.workflow-step p { margin: 0; color: #848a97; font-size: 9px; }
.step-check { color: #70dcb0; font-size: 12px; }
.workflow-connector { position: absolute; z-index: 0; top: 48px; bottom: 49px; left: 39px; width: 1px; background: linear-gradient(#e890a4, #8d93e4, #6ad7aa); opacity: .35; }
.tutorial-section { padding-top: 104px; padding-bottom: 101px; }
.tutorial-heading { margin-bottom: 32px; }
.tutorial-heading h2 { font-size: clamp(29px, 3.4vw, 39px); }
.tutorial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tutorial-card { overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.video-frame { aspect-ratio: 16 / 9; display: grid; place-items: center; position: relative; overflow: hidden; background: radial-gradient(ellipse at 55% 70%, rgba(210,104,126,.23), transparent 45%), linear-gradient(145deg, #222331, #11131a 70%); }
.video-frame::before, .video-frame::after { width: 220px; height: 220px; position: absolute; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; content: ""; }
.video-frame::after { width: 155px; height: 155px; }
.video-placeholder { width: 45px; height: 45px; z-index: 1; display: grid; place-items: center; padding-left: 3px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(234,126,151,.18); color: #ffc1bb; font-size: 13px; }
.video-placeholder-label { position: absolute; z-index: 1; bottom: 17px; left: 17px; color: #999eab; font-size: 9px; }
.video-frame iframe { width: 100%; height: 100%; position: absolute; inset: 0; border: 0; }
.tutorial-copy { padding: 15px 16px 17px; }
.tutorial-copy span { color: #ec9b83; font-size: 8px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; }
.tutorial-copy h3 { margin: 7px 0 5px; font-size: 13px; }
.tutorial-copy p { margin: 0; color: #9095a2; font-size: 9px; line-height: 1.7; }
.no-tutorials { grid-column: 1 / -1; padding: 22px; border: 1px dashed rgba(255,255,255,.15); border-radius: 10px; color: #a5aab6; text-align: center; font-size: 11px; line-height: 1.8; }
.no-tutorials code { color: #f0a18e; }
.closing-section { padding-bottom: 75px; }
.closing-card { min-height: 285px; position: relative; overflow: hidden; display: flex; align-items: center; padding: 40px 53px; border: 1px solid rgba(234,143,157,.19); border-radius: 14px; background: linear-gradient(110deg, #211921, #181720 52%, #171727); }
.closing-orb { width: 440px; height: 440px; position: absolute; top: -270px; right: 70px; border-radius: 50%; background: rgba(170,99,151,.21); filter: blur(80px); }
.closing-content { position: relative; z-index: 1; }
.closing-content .section-kicker { margin-bottom: 12px; }
.closing-content h2 { margin: 0 0 10px; font-size: clamp(25px, 3.1vw, 34px); line-height: 1.3; letter-spacing: -1.3px; }
.closing-content > p:not(.section-kicker) { margin-bottom: 18px; color: #a6a3af; font-size: 10px; }
.closing-content .button { min-height: 40px; font-size: 10px; }
.closing-art { width: 280px; height: 280px; position: absolute; top: 50%; right: 53px; display: grid; place-items: center; transform: translateY(-50%); }
.closing-ring { position: absolute; border: 1px solid rgba(248,157,178,.2); border-radius: 50%; transform: rotate(-30deg) scaleY(.48); }
.ring-a { width: 265px; height: 235px; }
.ring-b { width: 215px; height: 195px; transform: rotate(35deg) scaleY(.53); border-color: rgba(175,143,250,.24); }
.ring-c { width: 160px; height: 160px; transform: rotate(-68deg) scaleY(.63); border-color: rgba(248,197,129,.2); }
.closing-play { width: 74px; height: 74px; z-index: 1; display: grid; place-items: center; padding-left: 5px; border: 1px solid rgba(255,255,255,.19); border-radius: 50%; background: linear-gradient(145deg, rgba(255,148,115,.8), rgba(198,114,208,.77)); color: #241723; font-size: 19px; box-shadow: 0 0 52px rgba(226,119,160,.3); }
.closing-star { position: absolute; top: 44px; right: 37px; color: #f7c27e; font-size: 23px; }
.site-footer { min-height: 85px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid rgba(255,255,255,.07); }
.footer-brand { font-size: 19px; }
.footer-brand .brand-logo { width: 27px; height: 27px; border-radius: 7px; }
.site-footer > p, .site-footer small, .back-top { margin: 0; color: #777d89; font-size: 9px; }
.back-top { transition: color .2s; }
.product-section { padding-top: 74px; padding-bottom: 86px; }
.product-section .section-intro code, .no-tutorials code { color: #f0a18e; font-family: ui-monospace, Consolas, monospace; font-size: .92em; }
.catalog-count { margin: -10px 0 25px; color: #888e9b; font-size: 10px; }
.product-grid { display: grid; gap: 42px; }
.product-group { scroll-margin-top: 100px; }
.product-group-heading { display: flex; align-items: baseline; gap: 12px; margin-bottom: 15px; }
.product-group-heading h3 { margin: 0; font-size: 19px; }
.product-group-heading span { color: #838997; font-size: 10px; }
.product-group-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 15px; }
.product-card { min-width: 0; position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 13px; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background-color .22s ease; }
.product-card-workflow { border-color: rgba(157,131,255,.2); background: linear-gradient(125deg, rgba(117,91,199,.105), rgba(255,255,255,.018) 65%); }
.product-card-tool { border-color: rgba(104,169,255,.19); background: linear-gradient(125deg, rgba(72,132,198,.095), rgba(255,255,255,.018) 65%); }
.product-card-workflow:hover, .product-card-workflow:focus-within { z-index: 2; transform: translateY(-4px) scale(1.008); border-color: rgba(178,155,255,.72); background: linear-gradient(125deg, rgba(130,100,221,.19), rgba(255,255,255,.035) 70%); box-shadow: 0 12px 34px rgba(114,83,206,.2), 0 0 22px rgba(157,131,255,.13); }
.product-card-tool:hover, .product-card-tool:focus-within { z-index: 2; transform: translateY(-4px) scale(1.008); border-color: rgba(119,185,255,.72); background: linear-gradient(125deg, rgba(72,142,220,.18), rgba(255,255,255,.035) 70%); box-shadow: 0 12px 34px rgba(58,128,207,.19), 0 0 22px rgba(104,169,255,.13); }
.product-card-featured { grid-column: 1 / -1; }
.product-media-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 18px 18px 0; }
.product-media-item { min-width: 0; }
.product-media-box { aspect-ratio: 16 / 9; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 9px; background: #171923; }
.product-media-box img, .product-media-box iframe { width: 100%; height: 100%; position: absolute; inset: 0; border: 0; }
.product-media-box img { padding: 5px; object-fit: contain; background: #0b0d12; }
.product-media-box iframe { object-fit: cover; }
.product-media-label { display: block; margin: 0 0 8px 2px; color: #aeb3c0; font-size: 9px; font-weight: 700; }
.product-media-empty { display: grid; place-items: center; color: #959ba8; font: 700 20px "Space Grotesk", sans-serif; }
.video-preview-link { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(5,6,10,.18); }
.video-preview-link span { width: 50px; height: 50px; display: grid; place-items: center; padding-left: 3px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; background: rgba(12,13,18,.65); color: #fff; font-size: 15px; box-shadow: 0 4px 24px rgba(0,0,0,.4); }
.product-media-hint { position: absolute; z-index: 2; right: 10px; bottom: 8px; left: 10px; color: #f0e7e6; text-align: center; text-shadow: 0 1px 5px #000; font-size: 8px; line-height: 1.5; pointer-events: none; }
.product-content { padding: 24px 34px 29px; }
.product-content .section-kicker { margin-bottom: 10px; font-size: 8px; }
.product-content h3 { margin: 0 0 12px; font-size: 24px; letter-spacing: -.8px; }
.product-description { max-width: 570px; margin-bottom: 19px; color: #a5aab5; font-size: 11px; line-height: 1.9; }
.product-features { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.product-features li { position: relative; padding-left: 20px; color: #d5d7dd; font-size: 10px; line-height: 1.65; }
.product-features li::before { position: absolute; top: 0; left: 0; color: #77d9ae; content: "✓"; font-weight: 700; }
.platform-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 19px; }
.platform-badge { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px 4px 5px; border: 1px solid rgba(255,255,255,.09); border-radius: 7px; background: rgba(255,255,255,.035); color: #d4d7df; font-size: 9px; }
.platform-logo { width: 23px; height: 23px; display: grid; flex: 0 0 23px; place-items: center; border-radius: 6px; color: white; font: 700 15px Arial, sans-serif; }
.platform-tiktok { background: #111; color: #fff; text-shadow: -1px 0 #25f4ee, 1px 0 #fe2c55; }
.platform-douyin { background: #111; color: #fff; }
.platform-xiaohongshu { background: #ff2442; font-size: 7px; }
.platform-facebook { background: #1877f2; font-size: 19px; }
.platform-instagram { background: linear-gradient(135deg, #7b39c6, #ed3e83 58%, #ffb24a); font-size: 21px; }
.platform-youtube { background: #ff0033; font-size: 10px; }
.platform-pinterest { background: #bd081c; font-family: Georgia, serif; font-size: 17px; }
.product-number { position: absolute; top: 12px; right: 15px; color: rgba(255,255,255,.31); font: 600 9px "Space Grotesk", sans-serif; letter-spacing: 1px; }
.load-message { margin: 0; padding: 22px; border: 1px dashed rgba(255,255,255,.15); border-radius: 10px; color: #a5aab6; text-align: center; font-size: 11px; line-height: 1.8; }
.load-message-error { border-color: rgba(255,110,110,.35); color: #ffaaaa; }
.guides-section { padding-top: 34px; padding-bottom: 84px; scroll-margin-top: 90px; }
.guides-section .section-heading { margin-bottom: 24px; }
.guides-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.guide-card { min-width: 0; position: relative; padding: 22px; overflow: hidden; border: 1px solid rgba(85,215,163,.2); border-radius: 12px; background: linear-gradient(135deg, rgba(55,143,113,.13), rgba(255,255,255,.025) 75%); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.guide-card:hover, .guide-card:focus-within { transform: translateY(-4px); border-color: rgba(105,231,179,.62); box-shadow: 0 12px 30px rgba(42,163,119,.14); }
.guide-number { position: absolute; top: 16px; right: 18px; color: rgba(255,255,255,.34); font: 600 10px "Space Grotesk", sans-serif; }
.guide-icon { width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 18px; border: 1px solid rgba(85,215,163,.27); border-radius: 9px; background: rgba(85,215,163,.1); color: #79e2b3; font-size: 17px; }
.guide-card h3 { margin: 0 0 9px; font-size: 16px; }
.guide-card p { min-height: 34px; margin: 0 0 17px; color: #a5b5ae; font-size: 10px; line-height: 1.7; }
.guide-action { color: #82e4b7; font-size: 10px; font-weight: 700; }
.guide-card-link { position: absolute; inset: 0; border-radius: inherit; }
.guide-card:has(.guide-card-link):hover .guide-action { color: #b8ffda; }
.guide-card-unavailable { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.018); }
.guide-card-unavailable .guide-action { color: #8c929e; }
.download-section { padding-bottom: 93px; }
.download-card { min-height: 187px; position: relative; display: grid; grid-template-columns: 62px 1fr auto; gap: 23px; align-items: center; padding: 30px 34px; overflow: hidden; border: 1px solid rgba(234,143,157,.2); border-radius: 13px; background: radial-gradient(ellipse at 5% 50%, rgba(255,143,105,.12), transparent 44%), linear-gradient(110deg, #1b1920, #171821); }
.download-mark { width: 55px; height: 55px; display: grid; place-items: center; border: 1px solid rgba(244,158,145,.23); border-radius: 13px; background: rgba(235,140,137,.08); color: #f3a18c; font: 400 31px "Space Grotesk", sans-serif; }
.download-copy .section-kicker { margin-bottom: 8px; font-size: 8px; }
.download-copy h2 { margin: 0 0 8px; font: 600 22px "Space Grotesk", sans-serif; letter-spacing: -.5px; }
.download-copy > p:last-child { max-width: 460px; margin: 0; color: #999eaa; font-size: 10px; line-height: 1.7; }
.download-actions { max-width: 285px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.download-actions .button { min-height: 42px; padding: 0 15px; font-size: 10px; }
.download-actions .button-primary { position: relative; isolation: isolate; border-color: rgba(105,224,153,.48); background: linear-gradient(110deg, #48c17b, #72dc90); color: #08170e; box-shadow: 0 0 18px rgba(79,220,137,.28); animation: download-pulse 2.4s ease-in-out infinite; }
.download-actions .button-primary::before { position: absolute; z-index: -1; inset: -5px; border-radius: 12px; background: rgba(75,220,133,.3); content: ""; filter: blur(13px); opacity: .5; animation: download-glow 2.4s ease-in-out infinite; }
.download-actions .button-primary:hover { border-color: rgba(143,255,182,.82); background: linear-gradient(110deg, #55d88c, #8af0a5); box-shadow: 0 0 28px rgba(79,220,137,.42); }
.button-download-mirror { min-height: 38px; border-color: var(--border); color: #c6c9d1; background: rgba(255,255,255,.035); }
.button-disabled { color: #aaaeba; border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.045); cursor: not-allowed; }
.button-disabled:hover { transform: none; }
@media (min-width: 1300px) {
  .hero { min-height: 700px; }
}
@media (max-width: 900px) {
  .section-wrap, .site-header { width: min(100% - 44px, 760px); }
  .hero { min-height: unset; grid-template-columns: 1fr; gap: 7px; padding-top: 77px; padding-bottom: 73px; }
  .hero-copy { max-width: 600px; }
  .hero-visual { min-height: 430px; margin-top: 12px; }
  .scroll-cue { bottom: 22px; }
  .workflow-wrap { grid-template-columns: 1fr 1fr; gap: 35px; }
  .closing-art { right: 3px; opacity: .72; }
  .product-content { padding: 22px 24px 26px; }
  .download-card { grid-template-columns: 55px 1fr; }
  .download-actions { grid-column: 2; justify-content: flex-start; max-width: none; }
}
@media (max-width: 640px) {
  .section-wrap, .site-header { width: calc(100% - 36px); }
  .site-header { height: 68px; }
  .brand { font-size: 23px; }
  .menu-toggle { width: 38px; height: 38px; display: grid; align-content: center; justify-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 8px; background: transparent; }
  .menu-toggle span { width: 15px; height: 1px; background: #eee; }
  .main-nav { height: auto; position: absolute; z-index: 5; top: 59px; right: 18px; left: 18px; display: none; align-items: stretch; gap: 0; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: #151720; box-shadow: 0 15px 40px rgba(0,0,0,.45); }
  .main-nav.is-open { display: grid; }
  .main-nav a { padding: 12px; }
  .main-nav .nav-cta { margin-top: 5px; }
  .hero { padding-top: 64px; padding-bottom: 60px; }
  h1 { margin-top: 22px; font-size: clamp(40px, 11vw, 58px); letter-spacing: -2.8px; }
  .hero-description { font-size: 13px; }
  .hero-proof { margin-top: 27px; }
  .hero-visual { min-height: 330px; margin-top: 3px; }
  .visual-card { width: 100%; transform: none; }
  .visual-content { min-height: 265px; }
  .visual-workspace { padding: 12px 10px 10px; }
  .video-preview { height: 105px; }
  .preview-play { top: 32px; }
  .preview-sun { width: 34px; height: 34px; top: 16px; }
  .visual-sidebar { width: 34px; flex-basis: 34px; gap: 14px; }
  .tag-subtitle { top: 14px; right: -4px; }
  .tag-audio { bottom: 24px; left: -4px; }
  .float-tag { padding: 8px 9px; font-size: 8px; }
  .orbit-large { width: 340px; height: 250px; }
  .orbit-small { width: 300px; height: 200px; }
  .scroll-cue { bottom: 15px; }
  .feature-section { padding-top: 58px; padding-bottom: 73px; }
  .section-heading { display: block; margin-bottom: 26px; }
  .section-heading h2, .workflow-copy h2 { font-size: 34px; letter-spacing: -1.6px; }
  .section-intro { margin-top: 13px; }
  .feature-grid { grid-template-columns: 1fr; gap: 10px; }
  .feature-card, .feature-card-large, .feature-card-wide { min-height: 212px; grid-column: auto; }
  .feature-card-large { min-height: 229px; }
  .workflow-section { padding: 66px 0; }
  .workflow-wrap { grid-template-columns: 1fr; gap: 30px; }
  .workflow-step { grid-template-columns: 22px 34px 1fr 16px; gap: 8px; padding-inline: 9px; }
  .workflow-step p { max-width: 240px; line-height: 1.5; }
  .workflow-connector { left: 30px; }
  .product-section { padding-top: 58px; padding-bottom: 65px; }
  .guides-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-group-grid { grid-template-columns: 1fr; gap: 10px; }
  .product-card-featured { grid-column: auto; }
  .product-media-pair { grid-template-columns: 1fr; gap: 10px; padding: 12px 12px 0; }
  .product-content { padding: 22px 19px 24px; }
  .product-content h3 { font-size: 21px; }
  .product-number { top: 12px; right: 12px; }
  .guides-section { padding-top: 20px; padding-bottom: 64px; }
  .guides-grid { grid-template-columns: 1fr; }
  .guide-card { padding: 19px; }
  .download-section { padding-bottom: 69px; }
  .download-card { grid-template-columns: 44px 1fr; gap: 14px; padding: 23px 18px; }
  .download-mark { width: 42px; height: 42px; border-radius: 10px; font-size: 25px; }
  .download-copy h2 { font-size: 19px; }
  .download-copy > p:last-child { font-size: 9px; }
  .download-actions { grid-column: 1 / -1; }
  .closing-section { padding-bottom: 47px; }
  .closing-card { min-height: 360px; align-items: flex-start; padding: 32px 23px; }
  .closing-content { max-width: 320px; }
  .closing-content h2 { font-size: 27px; }
  .closing-content > p:not(.section-kicker) { max-width: 290px; line-height: 1.7; }
  .closing-art { width: 200px; height: 200px; top: auto; right: -15px; bottom: -79px; transform: none; opacity: .42; }
  .ring-a { width: 210px; height: 180px; }
  .ring-b { width: 174px; height: 155px; }
  .ring-c { width: 130px; height: 130px; }
  .closing-play { width: 55px; height: 55px; font-size: 14px; }
  .closing-star { top: 15px; right: 30px; }
  .site-footer { min-height: 110px; display: grid; grid-template-columns: 1fr auto; padding-block: 19px; }
  .site-footer > p { grid-row: 2; }
  .back-top { justify-self: end; }
  .site-footer small { grid-column: 2; grid-row: 2; justify-self: end; }
}
@media (prefers-reduced-motion: reduce) {
  .button-download-hero, .button-download-hero::before, .download-actions .button-primary, .download-actions .button-primary::before { animation: none; }
  .product-card { transition: none; }
  .product-card:hover, .product-card:focus-within { transform: none; }
  .guide-card { transition: none; }
  .guide-card:hover, .guide-card:focus-within { transform: none; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}