:root {
    color-scheme: dark;
    --cp-bg: #08090b;
    --cp-panel: #121318;
    --cp-panel-2: #17191f;
    --cp-panel-3: #1e2028;
    --cp-line: #30323b;
    --cp-line-soft: #25272f;
    --cp-text: #f7f7f8;
    --cp-muted: #a4a7b0;
    --cp-purple: #a78bfa;
    --cp-pink: #f472b6;
    --cp-cyan: #67e8f9;
    --cp-gradient: linear-gradient(120deg, var(--cp-purple), var(--cp-pink) 52%, var(--cp-cyan));
    --cp-max: 1380px;
    --cp-radius: 24px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; min-width: 320px; background: var(--cp-bg); color: var(--cp-text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.6; }
body::before { position: fixed; inset: 0; z-index: -2; content: ""; pointer-events: none; background: radial-gradient(circle at 82% 8%, rgba(139, 92, 246, .12), transparent 28rem), radial-gradient(circle at 8% 38%, rgba(34, 211, 238, .07), transparent 24rem); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, select, input[type="file"] { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--cp-cyan); outline-offset: 3px; }
img, video, svg { display: block; max-width: 100%; }
svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.cp-skip { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 10px 16px; background: #fff; color: #07080a; border-radius: 0 0 12px 12px; font-weight: 800; }
.cp-skip:focus { top: 0; }

.cp-header { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; min-height: 72px; padding: 12px max(24px, calc((100vw - var(--cp-max)) / 2)); border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(8, 9, 11, .88); backdrop-filter: blur(18px); }
.cp-header.is-scrolled { box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.cp-brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; font-size: 20px; font-weight: 850; letter-spacing: -.03em; }
.cp-brand img { width: 36px; height: 36px; flex: 0 0 auto; }
.cp-nav { display: flex; align-items: center; justify-self: center; justify-content: center; gap: 3px; min-width: 0; padding: 4px; border: 1px solid var(--cp-line); border-radius: 14px; background: #15171b; box-shadow: 0 10px 28px rgba(0,0,0,.2); }
.cp-nav > a, .cp-trends > summary { min-height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; color: #aeb1b9; border-radius: 10px; font-size: 14px; font-weight: 700; white-space: nowrap; transition: color .18s ease, background .18s ease, box-shadow .18s ease; }
.cp-nav > a > svg, .cp-trends > summary > svg { width: 17px; height: 17px; flex: 0 0 auto; }
.cp-trends > summary > .cp-chevron { width: 14px; height: 14px; }
.cp-nav > a.cp-nav-active { color: #fff; background: #2a2634; box-shadow: inset 0 0 0 1px rgba(167,139,250,.14); }
.cp-trends.cp-nav-active > summary { color: #fff; background: #2a2634; box-shadow: inset 0 0 0 1px rgba(167,139,250,.14); }
.cp-nav > a:hover, .cp-trends > summary:hover, .cp-trends[open] > summary { color: #c4b5fd; background: #24202e; box-shadow: inset 0 0 0 1px rgba(167,139,250,.24); }
.cp-trends { position: relative; }
.cp-trends > summary { list-style: none; cursor: pointer; }
.cp-trends > summary::-webkit-details-marker { display: none; }
.cp-trends > summary svg { width: 16px; height: 16px; }
.cp-trends > div { position: absolute; top: calc(100% + 10px); left: 0; display: grid; width: 230px; padding: 8px; border: 1px solid var(--cp-line); border-radius: 16px; background: #15171c; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.cp-trends > div a { padding: 10px 12px; border-radius: 10px; color: #d7d8dd; font-size: 14px; font-weight: 700; }
.cp-trends > div a:hover { background: #242630; color: #fff; }
.cp-header-actions { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 750; }
.cp-balance { display: inline-flex; align-items: center; gap: 7px; color: #c9cbd2; white-space: nowrap; }
.cp-balance svg { width: 19px; height: 19px; }
.cp-register, .cp-primary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 18px; border-radius: 13px; background: #f7f7f8; color: #090a0d; font-weight: 850; }
.cp-register:hover, .cp-primary-button:hover { background: var(--cp-cyan); }
.cp-menu-button, .cp-nav > a.cp-mobile-only { display: none; }

.cp-home { overflow: clip; }
.cp-hero { width: min(var(--cp-max), calc(100% - 48px)); margin: 0 auto; padding: 76px 0 44px; }
.cp-hero-copy { max-width: 900px; margin: 0 auto 38px; text-align: center; }
.cp-kicker { display: inline-block; color: var(--cp-cyan); font-size: 12px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.cp-hero-copy h1 { margin: 12px 0 18px; font-size: clamp(48px, 6.2vw, 92px); line-height: .96; letter-spacing: -.065em; }
.cp-hero-copy p { max-width: 780px; margin: 0 auto; color: #b6b8c0; font-size: clamp(18px, 2vw, 22px); line-height: 1.55; }
.cp-model-rail { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 25px; }
.cp-model-rail, .cp-stage-thumbs { scrollbar-width: none; }
.cp-model-rail::-webkit-scrollbar, .cp-stage-thumbs::-webkit-scrollbar { display: none; }
.cp-model-rail span { padding: 7px 11px; border: 1px solid var(--cp-line); border-radius: 999px; color: #d0d2d9; background: rgba(255,255,255,.025); font-size: 12px; font-weight: 750; }

.cp-studio { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 18px; padding: 18px; border: 1px solid var(--cp-line); border-radius: 30px; background: #0e0f13; box-shadow: 0 36px 100px rgba(0,0,0,.42); }
.cp-generator, .cp-stage { min-width: 0; border: 1px solid var(--cp-line); border-radius: var(--cp-radius); background: var(--cp-panel); }
.cp-generator { padding: 24px; }
.cp-generator > header { padding-bottom: 18px; border-bottom: 1px solid var(--cp-line-soft); }
.cp-generator h2 { margin: 5px 0 4px; font-size: 27px; letter-spacing: -.04em; line-height: 1.12; }
.cp-generator header p { margin: 0; color: var(--cp-muted); font-size: 13px; }
.cp-mode-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 18px 0; padding: 5px; border: 1px solid var(--cp-line); border-radius: 14px; background: #0c0d10; }
.cp-mode-tabs button { min-width: 0; min-height: 40px; padding: 8px; border: 0; border-radius: 10px; background: transparent; color: #8f929c; font-size: 12px; font-weight: 800; }
.cp-mode-tabs button.is-active { color: #090a0c; background: #f5f5f7; }
.cp-model-select, .cp-prompt, .cp-setting-grid label { display: grid; gap: 7px; min-width: 0; color: #e9eaed; font-size: 12px; font-weight: 800; }
.cp-model-select select, .cp-setting-grid select { width: 100%; min-width: 0; height: 44px; padding: 0 38px 0 12px; color: #fff; border: 1px solid var(--cp-line); border-radius: 12px; background: #0c0d10; }
.cp-upload { position: relative; display: grid; place-items: center; min-height: 132px; margin: 16px 0; padding: 18px; border: 1px dashed #454852; border-radius: 16px; color: #d9dbe1; background: #0d0e12; text-align: center; overflow: hidden; }
.cp-upload input { position: absolute; inset: 0; opacity: 0; }
.cp-upload-icon { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 6px; border-radius: 12px; background: rgba(167,139,250,.14); color: var(--cp-purple); }
.cp-upload-icon svg { width: 20px; height: 20px; }
.cp-upload small { color: #898c95; font-weight: 600; }
.cp-upload img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cp-upload.has-preview::after { position: absolute; right: 10px; bottom: 10px; content: "Replace"; padding: 6px 9px; border-radius: 9px; color: #fff; background: rgba(0,0,0,.78); font-size: 11px; font-weight: 800; }
.cp-prompt textarea { min-height: 112px; resize: vertical; padding: 12px 14px; color: #fff; border: 1px solid var(--cp-line); border-radius: 14px; background: #0c0d10; line-height: 1.5; }
.cp-prompt textarea::placeholder { color: #696c75; }
.cp-prompt small { color: #777a84; font-weight: 600; text-align: right; }
.cp-setting-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 15px; }
.cp-check { display: flex; align-items: flex-start; gap: 9px; margin: 15px 0; color: #a9abb3; font-size: 12px; }
.cp-check input { flex: 0 0 auto; margin-top: 4px; accent-color: var(--cp-purple); }
.cp-generator-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--cp-line-soft); }
.cp-generator-action > div { display: grid; }
.cp-generator-action > div strong { font-size: 13px; }
.cp-generator-action > div span { color: #7f828c; font-size: 11px; }
.cp-generator-action button { display: inline-flex; align-items: center; gap: 7px; min-height: 46px; padding: 10px 16px; border: 0; border-radius: 13px; background: var(--cp-gradient); color: #08090b; font-weight: 900; }
.cp-generator-action button svg { width: 18px; height: 18px; stroke-width: 2.4; }
.cp-generator-status { min-height: 24px; margin: 10px 0 0; color: #838690; font-size: 12px; }
.cp-generator-status.is-success { color: var(--cp-cyan); }

.cp-stage { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 12px; overflow: hidden; }
.cp-stage-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 5px 10px; color: #b9bbc4; font-size: 12px; }
.cp-stage-top > div { display: flex; align-items: center; gap: 8px; }
.cp-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cp-cyan); box-shadow: 0 0 16px var(--cp-cyan); }
.cp-stage-video { position: relative; min-width: 0; min-height: 520px; margin: 0; border-radius: 18px; background: #050506; overflow: hidden; }
.cp-stage-video video { width: 100%; height: 100%; object-fit: cover; }
.cp-stage-play { position: absolute; z-index: 3; top: 14px; right: 14px; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: #fff; background: rgba(8,9,11,.74); backdrop-filter: blur(8px); }
.cp-stage-play svg { width: 22px; height: 22px; }
.cp-stage-play .cp-pause-path { display: none; }
.cp-stage-play.is-playing .cp-play-path { display: none; }
.cp-stage-play.is-playing .cp-pause-path { display: block; }
.cp-stage-video figcaption { position: absolute; inset: auto 0 0; display: grid; padding: 70px 20px 18px; background: linear-gradient(transparent, rgba(0,0,0,.9)); }
.cp-stage-video figcaption span { font-size: 18px; font-weight: 850; }
.cp-stage-video figcaption small { color: #bbbcc2; }
.cp-stage-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-top: 10px; }
.cp-stage-thumbs button { position: relative; min-width: 0; aspect-ratio: 16 / 9; padding: 0; border: 1px solid var(--cp-line); border-radius: 11px; background: #090a0c; overflow: hidden; }
.cp-stage-thumbs button.is-active { border-color: var(--cp-cyan); box-shadow: 0 0 0 2px rgba(103,232,249,.16); }
.cp-stage-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.cp-stage-thumbs span { position: absolute; right: 5px; bottom: 5px; padding: 2px 6px; border-radius: 6px; color: #fff; background: rgba(0,0,0,.78); font-size: 9px; font-weight: 800; }

.cp-section { width: min(1220px, calc(100% - 48px)); margin: 0 auto; padding: 96px 0 0; }
.cp-section-heading { max-width: 760px; margin-bottom: 30px; }
.cp-section-heading h2 { margin: 8px 0 12px; font-size: clamp(34px, 4.4vw, 58px); line-height: 1.02; letter-spacing: -.055em; }
.cp-section-heading p { margin: 0; color: var(--cp-muted); font-size: 17px; }
.cp-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 40px; max-width: none; }
.cp-heading-row > div { max-width: 710px; }
.cp-heading-row > p { max-width: 390px; }
.cp-two-by-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cp-two-by-two article, .cp-three-grid article, .cp-policy-grid section { min-width: 0; padding: 28px; border: 1px solid var(--cp-line); border-radius: 22px; background: var(--cp-panel); }
.cp-two-by-two article > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #22242c; color: var(--cp-cyan); font-size: 12px; font-weight: 900; }
.cp-two-by-two h3, .cp-three-grid h3 { margin: 18px 0 8px; font-size: 22px; line-height: 1.2; letter-spacing: -.035em; }
.cp-two-by-two p, .cp-three-grid p, .cp-policy-grid p { margin: 0; color: var(--cp-muted); }

.cp-video-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-flow: dense; grid-auto-rows: 4px; gap: 10px; align-items: start; }
.cp-video-card { position: relative; min-width: 0; min-height: 72px; margin: 0; border: 1px solid var(--cp-line); border-radius: 18px; background: var(--cp-panel); overflow: hidden; isolation: isolate; transform: translateZ(0); }
.cp-video-media { position: relative; width: 100%; aspect-ratio: var(--media-ratio); background: #050506; overflow: hidden; }
.cp-video-poster, .cp-video-card video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cp-video-poster { position: relative; z-index: 1; }
.cp-video-card video { position: absolute; z-index: 2; inset: 0; opacity: 0; transition: opacity .18s ease; }
.cp-video-card.is-playing video { opacity: 1; }
.cp-video-card.is-playing .cp-video-poster { visibility: hidden; }
.cp-video-card::after { position: absolute; z-index: 3; right: 10px; bottom: 10px; width: 8px; height: 8px; content: ""; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; background: var(--cp-cyan); opacity: .65; transition: opacity .18s, transform .18s; }
.cp-video-card.is-playing::after { opacity: 1; transform: scale(1.12); }
.cp-video-card figcaption { display: grid; gap: 2px; padding: 14px 15px 16px; }
.cp-video-card figcaption strong { font-size: 14px; }
.cp-video-card figcaption span { color: #858892; font-size: 12px; }
.cp-video-card.is-playing { border-color: rgba(103,232,249,.55); }
@media (hover: hover) and (pointer: fine) { .cp-video-card { transition: border-color .18s, box-shadow .18s, transform .18s; } .cp-video-card:hover { border-color: rgba(103,232,249,.58); box-shadow: 0 14px 30px rgba(0,0,0,.3); transform: translateY(-2px); } }

.cp-three-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cp-three-grid article > svg { width: 42px; height: 42px; padding: 9px; border-radius: 12px; color: var(--cp-purple); background: rgba(167,139,250,.12); }
.cp-three-grid article a { display: inline-flex; margin-top: 18px; color: var(--cp-cyan); font-size: 13px; font-weight: 800; }

.cp-workflows { display: grid; gap: 20px; }
.cp-split-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, .88fr); gap: 56px; align-items: center; min-height: 540px; padding: 46px; border: 1px solid var(--cp-line); border-radius: 28px; background: linear-gradient(145deg, #15161b, #0f1014); }
.cp-split-feature.is-reversed > div { order: 2; }
.cp-split-feature.is-reversed figure { order: 1; }
.cp-split-feature h2 { margin: 8px 0 15px; font-size: clamp(34px, 4vw, 54px); line-height: 1.02; letter-spacing: -.055em; }
.cp-split-feature p { color: var(--cp-muted); font-size: 17px; }
.cp-split-feature ul { display: grid; gap: 8px; padding: 0; list-style: none; color: #d4d5da; }
.cp-split-feature li { position: relative; padding-left: 20px; }
.cp-split-feature li::before { position: absolute; left: 0; top: .65em; width: 7px; height: 7px; content: ""; border-radius: 50%; background: var(--cp-cyan); }
.cp-split-feature a, .cp-text-link { display: inline-flex; margin-top: 12px; color: var(--cp-cyan); font-weight: 800; }
.cp-split-feature figure { min-width: 0; margin: 0; aspect-ratio: 4 / 3; border-radius: 22px; background: #050506; overflow: hidden; }
.cp-split-feature figure img { width: 100%; height: 100%; object-fit: cover; }
.cp-split-feature.is-reversed figure { aspect-ratio: 3 / 4; max-height: 460px; }

.cp-image-tools article { background: linear-gradient(150deg, rgba(167,139,250,.11), rgba(18,19,24,.96) 48%); }
.cp-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cp-two-column > article { min-width: 0; padding: 36px; border: 1px solid var(--cp-line); border-radius: 24px; background: var(--cp-panel); }
.cp-two-column h2 { margin: 9px 0 16px; font-size: 34px; line-height: 1.08; letter-spacing: -.04em; }
.cp-two-column p { color: var(--cp-muted); }
.cp-two-column dl { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 0; margin: 24px 0 0; }
.cp-two-column dt, .cp-two-column dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--cp-line-soft); }
.cp-two-column dt { color: #fff; font-weight: 800; }
.cp-two-column dd { color: var(--cp-muted); }

.cp-pricing { width: min(1220px, calc(100% - 48px)); margin: 0 auto; padding: 96px 0 0; }
.cp-page-shell .cp-pricing { width: 100%; padding-top: 0; }
.cp-pricing-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; width: min(620px, 100%); margin: 0 auto 22px; padding: 5px; border: 1px solid var(--cp-line); border-radius: 14px; background: #0c0d10; }
.cp-pricing-tabs button { min-height: 44px; padding: 7px 10px; border: 0; border-radius: 10px; color: #aeb0b8; background: transparent; font-size: 13px; font-weight: 850; }
.cp-pricing-tabs button span { display: block; color: var(--cp-cyan); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.cp-pricing-tabs button[aria-selected="true"] { color: #08090b; background: #f5f5f6; }
.cp-pricing-tabs button[aria-selected="true"] span { color: #5740a6; }
.cp-pricing-panel { min-width: 0; }
.cp-pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cp-pricing-grid article { position: relative; min-width: 0; padding: 28px; border: 1px solid var(--cp-line); border-radius: 22px; background: var(--cp-panel); }
.cp-pricing-grid article.is-featured { border-color: var(--cp-purple); background: linear-gradient(155deg, rgba(167,139,250,.15), #15161b 54%); }
.cp-pricing-grid article > span { color: var(--cp-cyan); font-size: 11px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.cp-plan-badges { display: flex; flex-wrap: wrap; gap: 6px; min-height: 25px; margin-bottom: 10px; }
.cp-plan-badges span, .cp-plan-badges em { display: inline-flex; align-items: center; padding: 4px 7px; border-radius: 999px; font-size: 9px; font-style: normal; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.cp-plan-badges span { color: #09090b; background: var(--cp-purple); }
.cp-plan-badges em { color: #c4b5fd; border: 1px solid rgba(167,139,250,.4); background: rgba(167,139,250,.1); }
.cp-pricing-grid h3 { margin: 8px 0 0; font-size: 22px; }
.cp-plan-description { min-height: 52px; color: var(--cp-muted); }
.cp-plan-was { margin: 12px 0 -14px; color: #747780; font-size: 12px; text-decoration: line-through; }
.cp-price { display: flex; align-items: baseline; gap: 4px; min-height: 56px; margin: 18px 0 2px; font-size: 42px; font-weight: 900; letter-spacing: -.05em; }
.cp-price sup { color: var(--cp-cyan); font-size: 18px; }
.cp-price small { color: var(--cp-muted); font-size: 13px; font-weight: 650; }
.cp-plan-billing { margin: 0 0 14px; color: #858892; font-size: 12px; }
.cp-pricing-grid dl { display: grid; gap: 8px; margin: 0 0 16px; }
.cp-pricing-grid dl div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 7px; padding: 10px 12px; border: 1px solid var(--cp-line-soft); border-radius: 12px; background: #0d0e12; }
.cp-pricing-grid dt { color: var(--cp-cyan); font-size: 18px; font-weight: 900; }
.cp-pricing-grid dd { margin: 0; color: #a5a8b1; font-size: 12px; }
.cp-pricing-grid ul { display: grid; gap: 9px; min-height: 144px; padding-left: 19px; color: #c1c3ca; }
.cp-pricing-grid article > a { display: flex; justify-content: center; min-height: 44px; margin-top: 22px; padding: 10px 14px; border: 1px solid #e8e9eb; border-radius: 12px; color: #0a0b0d; background: #f5f5f6; font-weight: 850; }
.cp-credit-plans { padding: 28px; border: 1px solid var(--cp-line); border-radius: 22px; background: var(--cp-panel); }
.cp-credit-plans__heading { margin-bottom: 16px; text-align: center; }
.cp-credit-plans__heading p { margin: 0; color: #f5f2fa; font-size: clamp(1.35rem,3vw,2rem); font-weight: 900; }
.cp-credit-plans__heading strong { color: var(--cp-purple); }
.cp-credit-selector { padding: 14px; border: 2px solid var(--cp-purple); border-radius: 9px; background: #151518; box-shadow: inset 0 0 36px rgba(167,139,250,.045); }
.cp-credit-selector > h3 { margin: 0 0 12px; color: #fff; font-size: 1rem; }
.cp-credit-selector__list { display: grid; gap: 8px; }
.cp-credit-option { display: grid; grid-template-columns: minmax(110px,auto) auto minmax(0,1fr); align-items: center; gap: 8px; min-width: 0; min-height: 43px; padding: 8px 12px; border: 1px solid transparent; border-radius: 7px; color: #fff; background: #28282d; text-align: left; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.cp-credit-option:hover { border-color: var(--cp-purple); background: #303037; transform: translateY(-1px); }
.cp-credit-option.is-selected { border-color: var(--cp-purple); background: linear-gradient(90deg,rgba(167,139,250,.14),#28282d 48%); box-shadow: 0 0 0 1px rgba(167,139,250,.24); }
.cp-credit-option__amount { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.cp-credit-option__amount i { width: 17px; height: 17px; flex: 0 0 auto; border-radius: 50%; background: radial-gradient(circle at 35% 30%,#fff 0 8%,#c4b5fd 22%,#8b5cf6 55%,#4c1d95 100%); box-shadow: 0 0 10px rgba(139,92,246,.4); }
.cp-credit-option__amount strong { font-size: 1.02rem; }
.cp-credit-option__badge { width: fit-content; padding: 3px 6px; border: 1px solid var(--cp-purple); border-radius: 3px; color: #09090b; background: var(--cp-purple); font-size: .6rem; font-weight: 900; text-transform: uppercase; }
.cp-credit-option__price { grid-column: 3; display: flex; justify-content: flex-end; align-items: baseline; gap: 5px; min-width: 0; white-space: nowrap; }
.cp-credit-option__price del { color: #929298; font-size: .64rem; }
.cp-credit-option__price strong { font-size: .78rem; }
.cp-credit-selector__validity { margin: 12px 0 0; color: #92929b; font-size: .75rem; font-style: italic; }
.cp-credit-plans__scope { margin: 17px 0 8px; color: #e6e3ea; font-size: .78rem; text-align: center; }
.cp-credit-buy { display: flex; align-items: center; justify-content: center; gap: 8px; width: min(320px,100%); min-height: 44px; margin: 0 auto; border: 0; border-radius: 9px; color: #fff; background: var(--cp-purple); box-shadow: 0 12px 30px rgba(139,92,246,.18); font-weight: 900; }
.cp-credit-buy:hover { color: #09090b; background: #c4b5fd; transform: translateY(-1px); }
.cp-credit-buy svg { width: 20px; height: 20px; }
.cp-credit-plans__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px 22px; margin: 17px 0 0; padding: 0; color: #8f8f99; font-size: .7rem; list-style: none; }
.cp-credit-plans__trust li::before { margin-right: 5px; content: "✓"; color: var(--cp-purple); font-weight: 900; }
.cp-pricing-note { margin: 14px 0 0; color: #7f828b; font-size: 12px; text-align: center; }

.cp-faq { padding-bottom: 110px; }
.cp-faq > div { border-top: 1px solid var(--cp-line); }
.cp-faq details { border-bottom: 1px solid var(--cp-line); }
.cp-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 4px; list-style: none; cursor: pointer; font-size: 18px; font-weight: 800; }
.cp-faq summary::-webkit-details-marker { display: none; }
.cp-faq summary svg { width: 22px; height: 22px; flex: 0 0 auto; transition: transform .2s ease; }
.cp-faq details[open] summary svg { transform: rotate(45deg); }
.cp-faq details p { max-width: 850px; margin: -6px 0 24px; color: var(--cp-muted); }

.cp-page-shell { width: min(1040px, calc(100% - 48px)); min-height: 70vh; margin: 0 auto; padding: 40px 0 100px; }
.cp-breadcrumb ol { display: flex; gap: 9px; padding: 0; list-style: none; color: #81848d; font-size: 13px; }
.cp-breadcrumb li + li::before { content: "/"; margin-right: 9px; }
.cp-breadcrumb a { color: var(--cp-cyan); }
.cp-page-heading { max-width: 860px; padding: 58px 0 42px; }
.cp-page-heading h1 { margin: 10px 0 18px; font-size: clamp(46px, 7vw, 78px); line-height: .98; letter-spacing: -.06em; }
.cp-page-heading p { color: var(--cp-muted); font-size: 19px; }
.cp-policy-grid { display: grid; gap: 14px; }
.cp-policy-grid h2 { margin: 0 0 9px; font-size: 24px; letter-spacing: -.035em; }
.cp-not-found { display: grid; place-items: center; min-height: 68vh; padding: 80px 24px; text-align: center; }
.cp-not-found h1 { max-width: 760px; margin: 10px 0 14px; font-size: clamp(48px, 7vw, 82px); line-height: 1; letter-spacing: -.06em; }
.cp-not-found p { max-width: 620px; margin: 0; color: var(--cp-muted); font-size: 18px; }
.cp-not-found > div { display: flex; gap: 10px; margin-top: 26px; }
.cp-secondary-button { display: inline-flex; align-items: center; min-height: 42px; padding: 10px 18px; border: 1px solid var(--cp-line); border-radius: 13px; font-weight: 800; }

.cp-image-page { width: min(1220px, calc(100% - 48px)); }
.cp-image-studio { display: grid; grid-template-columns: minmax(0,.84fr) minmax(0,1.16fr); gap: 18px; padding: 18px; border: 1px solid var(--cp-line); border-radius: 28px; background: #0e0f13; }
.cp-image-generator { display: grid; align-content: start; gap: 16px; min-width: 0; padding: 26px; border: 1px solid var(--cp-line); border-radius: 22px; background: var(--cp-panel); }
.cp-image-generator header { padding-bottom: 16px; border-bottom: 1px solid var(--cp-line-soft); }
.cp-image-generator h2 { margin: 5px 0; font-size: 28px; line-height: 1.1; }
.cp-image-generator header p, .cp-image-generator > p { margin: 0; color: var(--cp-muted); font-size: 13px; }
.cp-image-generator > label { display: grid; gap: 7px; font-size: 12px; font-weight: 800; }
.cp-image-generator select { height: 44px; padding: 0 12px; border: 1px solid var(--cp-line); border-radius: 12px; color: #fff; background: #0c0d10; }
.cp-image-upload { position: relative; place-items: center; min-height: 150px; padding: 18px; border: 1px dashed #454852; border-radius: 16px; background: #0d0e12; text-align: center; overflow: hidden; }
.cp-image-upload input { position: absolute; inset: 0; opacity: 0; }
.cp-image-upload svg { width: 28px; height: 28px; color: var(--cp-purple); }
.cp-image-upload small { color: #858892; }
.cp-image-upload img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cp-image-upload.has-preview::after { position: absolute; right: 10px; bottom: 10px; content: "Replace"; padding: 5px 8px; border-radius: 8px; background: rgba(0,0,0,.8); color: #fff; font-size: 10px; }
.cp-image-submit { min-height: 48px; border: 0; border-radius: 13px; color: #09090b; background: var(--cp-gradient); font-weight: 900; }
.cp-image-example-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-auto-flow: dense; gap: 10px; min-width: 0; }
.cp-image-example-grid figure { min-width: 0; margin: 0; aspect-ratio: var(--image-ratio); border: 1px solid var(--cp-line); border-radius: 16px; background: #07080a; overflow: hidden; }
.cp-image-example-grid figure:nth-child(3n+1) { grid-row: span 2; }
.cp-image-example-grid img { width: 100%; height: 100%; object-fit: cover; }
.cp-image-guide { padding-top: 70px; }
.cp-trend-sections { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.cp-trend-sections section { padding: 28px; border: 1px solid var(--cp-line); border-radius: 22px; background: var(--cp-panel); }
.cp-trend-sections section > span { color: var(--cp-cyan); font-size: 12px; font-weight: 900; }
.cp-trend-sections h2 { margin: 14px 0 9px; font-size: 24px; line-height: 1.15; }
.cp-trend-sections p { margin: 0; color: var(--cp-muted); }
.cp-trend-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.cp-trend-actions a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 15px; border: 1px solid var(--cp-line); border-radius: 12px; background: var(--cp-panel); font-weight: 800; }
.cp-trend-actions a:hover { color: var(--cp-purple); border-color: var(--cp-purple); }
.cp-trend-actions svg { width: 18px; height: 18px; }

.cp-footer { border-top: 1px solid var(--cp-line); background: #0b0c0f; }
.cp-footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; width: min(var(--cp-max), calc(100% - 48px)); margin: 0 auto; padding: 56px 0 44px; }
.cp-footer-intro p { max-width: 390px; color: #858892; }
.cp-footer nav { display: grid; align-content: start; gap: 9px; }
.cp-footer nav strong { margin-bottom: 5px; }
.cp-footer nav a { color: #90939c; font-size: 14px; }
.cp-footer nav a:hover { color: #fff; }
.cp-footer-bottom { display: flex; justify-content: space-between; gap: 20px; width: min(var(--cp-max), calc(100% - 48px)); margin: 0 auto; padding: 18px 0 28px; border-top: 1px solid var(--cp-line-soft); color: #6f727c; font-size: 12px; }
.cp-toast { position: fixed; right: 20px; bottom: 20px; z-index: 80; max-width: min(380px, calc(100% - 40px)); padding: 13px 16px; border: 1px solid rgba(103,232,249,.5); border-radius: 14px; background: #17191f; box-shadow: 0 20px 50px rgba(0,0,0,.5); color: #eefcff; font-size: 13px; font-weight: 700; }

@media (max-width: 1100px) {
    .cp-header { padding-inline: 20px; }
    .cp-nav { justify-content: flex-start; }
    .cp-nav > a, .cp-trends > summary { padding-inline: 9px; }
    .cp-balance { display: none; }
    .cp-studio { grid-template-columns: 1fr; }
    .cp-stage-video { min-height: 620px; }
    .cp-setting-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cp-video-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cp-split-feature { grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr); gap: 34px; padding: 34px; }
}

@media (max-width: 820px) {
    .cp-header { grid-template-columns: auto auto; justify-content: space-between; min-height: 66px; }
    .cp-menu-button { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--cp-line); border-radius: 12px; color: #fff; background: var(--cp-panel); }
    .cp-menu-button svg { width: 22px; height: 22px; }
    .cp-nav { position: absolute; top: 66px; left: 12px; right: 12px; display: none; align-items: stretch; margin: 0; padding: 10px; border: 1px solid var(--cp-line); border-radius: 16px; background: #121318; box-shadow: 0 18px 50px rgba(0,0,0,.55); }
    .cp-nav.is-open { display: grid; }
    .cp-nav > a, .cp-trends > summary { justify-content: space-between; }
    .cp-trends > div { position: static; width: 100%; margin-top: 4px; box-shadow: none; }
    .cp-mobile-only { display: inline-flex !important; }
    .cp-header-actions { display: none; }
    .cp-hero { width: min(100% - 32px, var(--cp-max)); padding-top: 54px; }
    .cp-stage-video { min-height: 500px; }
    .cp-section, .cp-pricing { width: min(100% - 32px, 1220px); padding-top: 76px; }
    .cp-heading-row { display: block; }
    .cp-heading-row > p { max-width: none; margin-top: 12px; }
    .cp-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .cp-three-grid, .cp-pricing-grid { grid-template-columns: 1fr; }
    .cp-pricing-grid ul { min-height: 0; }
    .cp-split-feature, .cp-split-feature.is-reversed { grid-template-columns: 1fr; min-height: 0; }
    .cp-split-feature.is-reversed > div, .cp-split-feature.is-reversed figure { order: initial; }
    .cp-split-feature figure, .cp-split-feature.is-reversed figure { max-height: none; aspect-ratio: 16 / 10; }
    .cp-image-studio { grid-template-columns: 1fr; }
    .cp-trend-sections { grid-template-columns: 1fr; }
    .cp-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cp-footer-intro { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    html { scroll-padding-top: 76px; }
    .cp-header { padding-inline: 14px; }
    .cp-brand { font-size: 18px; }
    .cp-hero { width: min(100% - 24px, var(--cp-max)); padding: 42px 0 22px; }
    .cp-hero-copy { margin-bottom: 26px; }
    .cp-hero-copy h1 { font-size: clamp(44px, 14vw, 62px); }
    .cp-hero-copy p { font-size: 16px; }
    .cp-model-rail { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
    .cp-model-rail span { flex: 0 0 auto; }
    .cp-studio { gap: 10px; padding: 8px; border-radius: 21px; }
    .cp-generator { padding: 18px; border-radius: 17px; }
    .cp-generator h2 { font-size: 23px; }
    .cp-mode-tabs { grid-template-columns: 1fr; }
    .cp-mode-tabs button { min-height: 38px; }
    .cp-setting-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cp-generator-action { align-items: stretch; flex-direction: column; }
    .cp-generator-action button { justify-content: center; width: 100%; }
    .cp-stage { border-radius: 17px; }
    .cp-stage-video { min-height: 440px; }
    .cp-stage-thumbs { grid-template-columns: repeat(4, 92px); overflow-x: auto; }
    .cp-section, .cp-pricing { width: min(100% - 24px, 1220px); padding-top: 64px; }
    .cp-section-heading h2 { font-size: 36px; }
    .cp-two-by-two, .cp-two-column { grid-template-columns: 1fr; }
    .cp-video-grid { gap: 7px; }
    .cp-two-by-two article, .cp-three-grid article { padding: 22px; }
    .cp-pricing-tabs button { padding-inline: 5px; font-size: 11px; }
    .cp-credit-plans { padding: 18px; }
    .cp-credit-selector { padding: 10px; }
    .cp-credit-option { grid-template-columns: minmax(88px,auto) minmax(0,1fr); gap: 6px; padding: 8px; }
    .cp-credit-option__badge { justify-self: start; }
    .cp-credit-option__price { grid-column: 2; justify-content: flex-end; }
    .cp-split-feature { gap: 26px; padding: 23px; border-radius: 22px; }
    .cp-split-feature h2 { font-size: 34px; }
    .cp-split-feature p { font-size: 15px; }
    .cp-two-column > article { padding: 24px; }
    .cp-two-column h2 { font-size: 30px; }
    .cp-two-column dl { grid-template-columns: 78px minmax(0, 1fr); }
    .cp-faq summary { font-size: 16px; }
    .cp-page-shell { width: min(100% - 24px, 1040px); padding-bottom: 72px; }
    .cp-page-heading { padding: 40px 0 28px; }
    .cp-page-heading h1 { font-size: 46px; }
    .cp-image-page { width: min(100% - 24px, 1220px); }
    .cp-image-studio { padding: 8px; border-radius: 20px; }
    .cp-image-generator { padding: 20px; }
    .cp-image-example-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
    .cp-policy-grid section { padding: 22px; }
    .cp-not-found > div { align-items: stretch; flex-direction: column; width: 100%; }
    .cp-footer-grid { grid-template-columns: 1fr; width: min(100% - 28px, var(--cp-max)); gap: 28px; }
    .cp-footer-intro { grid-column: auto; }
    .cp-footer-bottom { align-items: flex-start; flex-direction: column; width: min(100% - 28px, var(--cp-max)); }
}

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