:root {
  --ink: #0f172a;
  --muted: #64748b;
  --paper: #f1f5f9;
  --white: #fff;
  --line: #cbd5e1;
  --cyan: #00c6ff;
  --blue: #3b82f6;
  --purple: #7c3aed;
  --green: #00c6ff;
  --green-dark: #3b82f6;
  --lime: #00c6ff;
  --navy: #0f172a;
  --shadow: 0 22px 70px rgba(15, 23, 42, .14);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
.shell { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }

.site-header {
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid rgba(203, 213, 225, .78);
  background: rgba(241, 245, 249, .88);
  backdrop-filter: blur(16px);
}
.nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 21px; font-weight: 850; letter-spacing: -.5px; }
.brand-logo { width: 43px; height: 43px; display: block; object-fit: contain; flex: 0 0 auto; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: white; background: linear-gradient(135deg, var(--cyan) 0%, var(--blue) 50%, var(--purple) 100%); box-shadow: 0 8px 22px rgba(59, 130, 246, .28); }
.brand-mark svg { width: 20px; }
.nav-links { display: flex; align-items: center; gap: 30px; font-size: 14px; font-weight: 700; }
.nav-links a:not(.button):hover, .nav-links a.active { color: var(--green-dark); }
.menu-button { display: none; border: 0; background: transparent; padding: 8px; cursor: pointer; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border: 1px solid transparent; border-radius: 13px; font-weight: 800; font-size: 14px; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #fff; background: linear-gradient(135deg, var(--blue), var(--purple)); box-shadow: 0 12px 30px rgba(59, 130, 246, .25); }
.button-primary:hover { box-shadow: 0 15px 34px rgba(124, 58, 237, .3); }
.button-dark { color: #fff; background: var(--ink); }
.button-light { border-color: var(--line); background: #fff; }
.button-disabled { color: #62716c; background: #e8efeb; cursor: not-allowed; }
.button-disabled:hover { transform: none; }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font-size: 12px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--purple)); }
.hero { position: relative; overflow: hidden; padding: 96px 0 82px; background: radial-gradient(circle at 76% 25%, rgba(0, 198, 255, .18), transparent 27%), radial-gradient(circle at 88% 55%, rgba(124, 58, 237, .12), transparent 28%), linear-gradient(180deg, #fff 0%, var(--paper) 100%); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 70px; }
.hero h1, .page-hero h1 { margin: 16px 0 20px; max-width: 760px; font-size: clamp(43px, 6vw, 72px); line-height: 1.03; letter-spacing: -.055em; }
.hero h1 span { color: var(--blue); background: linear-gradient(135deg, var(--cyan), var(--blue) 48%, var(--purple)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-copy { max-width: 610px; color: var(--muted); font-size: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.plugin-download.disabled { opacity: .62; cursor: wait; pointer-events: auto; }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.hero-note { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 28px; color: #71807a; font-size: 13px; font-weight: 650; }
.hero-note span::before { content: "✓"; margin-right: 6px; color: var(--blue); font-weight: 900; }

.visual { position: relative; min-height: 480px; }
.visual-frame { position: absolute; inset: 30px 0 0 40px; overflow: hidden; border: 8px solid #fff; border-radius: 30px; background: linear-gradient(145deg, #dbeafe 0 42%, #93c5fd 42% 44%, #ede9fe 44% 72%, #c4b5fd 72%); box-shadow: var(--shadow); }
.visual-frame::before { content: ""; position: absolute; left: 12%; bottom: 0; width: 76%; height: 48%; clip-path: polygon(8% 28%, 48% 5%, 93% 30%, 100% 100%, 0 100%); background: linear-gradient(145deg, #334155, #0f172a); }
.visual-frame::after { content: ""; position: absolute; left: 24%; top: 14%; width: 48%; height: 37%; border: 13px solid #f8fafc; background: linear-gradient(135deg, #38bdf8, #8b5cf6); box-shadow: 0 20px 30px rgba(15, 23, 42, .2); }
.visual-pill { position: absolute; z-index: 3; padding: 11px 15px; border: 1px solid rgba(255,255,255,.8); border-radius: 14px; background: rgba(255,255,255,.9); box-shadow: 0 12px 30px rgba(20,50,40,.12); backdrop-filter: blur(8px); font-size: 12px; font-weight: 800; }
.visual-pill strong { display: block; color: var(--blue); font-size: 18px; }
.visual-pill.one { top: 6px; right: 14px; }
.visual-pill.two { bottom: 14px; left: 0; }
.visual-label { position: absolute; z-index: 4; left: 112px; bottom: 34px; color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.trust-strip { padding: 25px 0; border-block: 1px solid var(--line); background: #fff; }
.trust-items { display: flex; justify-content: center; flex-wrap: wrap; gap: 38px; color: #66766f; font-size: 13px; font-weight: 800; }
.trust-items b { color: var(--ink); }

.section { padding: 92px 0; }
.section-dark { color: #f6fbf8; background: var(--navy); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 40px; }
.section-head h2 { margin: 8px 0 0; max-width: 720px; font-size: clamp(32px, 4vw, 50px); line-height: 1.08; letter-spacing: -.04em; }
.section-head p { max-width: 440px; margin: 0; color: var(--muted); }
.section-dark .section-head p { color: #aec0b9; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature-card { min-height: 230px; padding: 28px; border: 1px solid #dbe3ed; border-radius: var(--radius); background: #fff; transition: transform .25s ease, box-shadow .25s ease; }
.feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.feature-card h3 { margin: 20px 0 8px; font-size: 19px; letter-spacing: -.02em; }
.feature-card p { margin: 0; color: var(--muted); font-size: 14px; }
.icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: var(--blue); background: linear-gradient(135deg, rgba(0,198,255,.12), rgba(124,58,237,.1)); font-size: 20px; }

.workflow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); background: rgba(255,255,255,.12); }
.workflow article { min-height: 235px; padding: 30px; background: var(--navy); }
.step-number { color: var(--lime); font-size: 13px; font-weight: 900; letter-spacing: .12em; }
.workflow h3 { margin: 46px 0 10px; font-size: 20px; }
.workflow p { margin: 0; color: #afc0ba; font-size: 14px; }

.tutorial-section { background: linear-gradient(180deg, #fff 0%, #f1f5f9 100%); }
.tutorial-heading { align-items: center; }
.tutorial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.tutorial-card { overflow: hidden; border: 1px solid #dbe3ed; border-radius: 24px; background: #fff; box-shadow: 0 16px 45px rgba(15,23,42,.08); transition: transform .25s ease, box-shadow .25s ease; }
.tutorial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tutorial-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: radial-gradient(circle at 18% 15%,rgba(0,198,255,.3),transparent 32%),radial-gradient(circle at 85% 85%,rgba(124,58,237,.35),transparent 38%),#0f172a; }
.tutorial-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tutorial-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; color: #fff; text-align: center; }
.tutorial-placeholder::after { content: "FRender"; position: absolute; right: 18px; bottom: 12px; color: rgba(255,255,255,.28); font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.tutorial-placeholder strong { font-size: 17px; }
.tutorial-placeholder small { color: #cbd5e1; }
.tutorial-play { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 5px; padding-left: 4px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; color: #fff; background: linear-gradient(135deg,var(--cyan),var(--blue) 50%,var(--purple)); box-shadow: 0 12px 35px rgba(59,130,246,.4); font-size: 20px; }
.tutorial-content { padding: 25px 28px 28px; }
.tutorial-number { color: var(--blue); font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.tutorial-content h3 { margin: 7px 0 8px; font-size: 21px; letter-spacing: -.025em; }
.tutorial-content p { margin: 0; color: var(--muted); font-size: 14px; }

.prompt-hero { padding-bottom: 58px; }
.prompt-hero h1 { max-width: 900px; }
.prompt-library { padding: 52px 0 96px; }
.prompt-toolbar { position: sticky; top: 88px; z-index: 10; display: flex; align-items: end; justify-content: space-between; gap: 22px; margin-bottom: 22px; padding: 14px; border: 1px solid rgba(203,213,225,.9); border-radius: 18px; background: rgba(255,255,255,.94); box-shadow: 0 12px 32px rgba(15,23,42,.08); backdrop-filter: blur(14px); }
.prompt-tabs { display: flex; flex-wrap: wrap; gap: 7px; }
.prompt-tabs button { min-height: 40px; padding: 0 15px; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--muted); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.prompt-tabs button.active { border-color: transparent; color: #fff; background: linear-gradient(135deg,var(--blue),var(--purple)); box-shadow: 0 8px 20px rgba(59,130,246,.2); }
.prompt-search { display: grid; gap: 5px; width: min(330px,100%); color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.prompt-search input { width: 100%; min-height: 42px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: #fff; text-transform: none; letter-spacing: 0; }
.prompt-search input:focus { outline: 3px solid rgba(59,130,246,.16); border-color: var(--blue); }
.prompt-tip { margin-bottom: 25px; padding: 15px 18px; border-left: 4px solid var(--cyan); border-radius: 10px; color: #475569; background: #ecfeff; font-size: 14px; }
.prompt-tip code { padding: 2px 5px; border-radius: 5px; color: #5b21b6; background: #ede9fe; }
.prompt-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.prompt-card { min-width: 0; padding: 25px; border: 1px solid #dbe3ed; border-radius: 20px; background: #fff; box-shadow: 0 10px 30px rgba(15,23,42,.06); }
.prompt-card[hidden] { display: none; }
.prompt-card-head { display: flex; align-items: start; justify-content: space-between; gap: 15px; }
.prompt-card-head span { color: var(--blue); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.prompt-card-head h2 { margin: 3px 0 0; font-size: 21px; line-height: 1.2; }
.prompt-card-head button { flex: 0 0 auto; min-height: 36px; padding: 0 12px; border: 1px solid #bfdbfe; border-radius: 10px; color: #2563eb; background: #eff6ff; font: inherit; font-size: 12px; font-weight: 850; cursor: pointer; }
.prompt-card-head button:hover,.prompt-card-head button.copied { color: #fff; border-color: transparent; background: linear-gradient(135deg,var(--blue),var(--purple)); }
.prompt-card > p { margin: 12px 0 15px; color: var(--muted); font-size: 13px; }
.prompt-card pre { max-height: 260px; overflow: auto; margin: 0; padding: 16px; border: 1px solid #e2e8f0; border-radius: 12px; color: #334155; background: #f8fafc; font: 13px/1.65 Inter,ui-sans-serif,system-ui,sans-serif; white-space: pre-wrap; word-break: break-word; }
.prompt-empty { padding: 55px 20px; border: 1px dashed var(--line); border-radius: 18px; color: var(--muted); background: #fff; text-align: center; }
.copy-toast { position: fixed; z-index: 100; right: 24px; bottom: 24px; padding: 12px 17px; border-radius: 12px; color: #fff; background: #0f172a; box-shadow: var(--shadow); font-size: 13px; font-weight: 800; }

.provider-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.provider { padding: 24px; border: 1px solid #dbe3ed; border-radius: 18px; background: #fff; }
.provider-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.provider h3 { margin: 0; }
.tag { padding: 5px 9px; border-radius: 99px; color: var(--blue); background: #eff6ff; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.provider p { margin-bottom: 0; color: var(--muted); font-size: 13px; }

.cta { padding: 34px 0 90px; }
.cta-box { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 50px; overflow: hidden; border-radius: 28px; color: #fff; background: radial-gradient(circle at 88% 10%, rgba(0,198,255,.28), transparent 28%), radial-gradient(circle at 70% 100%, rgba(124,58,237,.24), transparent 35%), var(--ink); }
.cta-box h2 { max-width: 650px; margin: 0; font-size: clamp(30px, 4vw, 46px); line-height: 1.1; letter-spacing: -.04em; }
.cta-box p { margin: 12px 0 0; color: #b5c6bf; }

.page-hero { padding: 86px 0 60px; text-align: center; background: radial-gradient(circle at 42% 0, rgba(0,198,255,.18), transparent 34%), radial-gradient(circle at 62% 5%, rgba(124,58,237,.13), transparent 34%); }
.page-hero h1 { margin-inline: auto; font-size: clamp(42px, 6vw, 64px); }
.page-hero p { max-width: 700px; margin: 0 auto; color: var(--muted); font-size: 17px; }

.billing-toggle { display: inline-flex; gap: 5px; margin-top: 28px; padding: 5px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.billing-toggle button { padding: 9px 14px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 800; cursor: pointer; }
.billing-toggle .selected { color: #fff; background: var(--ink); }
.account-status { min-height: 24px; margin-top: 18px; color: var(--muted); font-size: 13px; font-weight: 700; }
.account-button { min-height: 40px; padding-inline: 15px; }
.account-button.is-authenticated { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--blue), var(--purple)); }
.nav-links [data-site-account].is-authenticated { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pricing-wrap { padding: 20px 0 96px; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 18px; }
.price-card { position: relative; display: flex; flex-direction: column; padding: 30px; border: 1px solid var(--line); border-radius: 24px; background: #fff; }
.price-card.popular { color: #fff; border-color: var(--ink); background: var(--ink); box-shadow: var(--shadow); transform: translateY(-8px); }
.popular-label { position: absolute; top: 0; right: 24px; padding: 7px 12px; border-radius: 0 0 10px 10px; color: #fff; background: linear-gradient(135deg, var(--cyan), var(--blue) 50%, var(--purple)); font-size: 10px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.plan-audience { min-height: 22px; color: var(--muted); font-size: 12px; font-weight: 750; }
.popular .plan-audience { color: #b5c6bf; }
.price-card h2 { margin: 10px 0 3px; font-size: 28px; }
.credit-number { margin: 12px 0 2px; font-size: 24px; font-weight: 900; }
.credit-caption { color: var(--muted); font-size: 12px; }
.popular .credit-caption { color: #b5c6bf; }
.render-equivalent { display: grid; gap: 8px; margin-top: 17px; padding: 14px; border: 1px solid #dbeafe; border-radius: 13px; background: #f8fbff; }
.render-equivalent > strong { color: var(--blue); font-size: 12px; }
.render-equivalent div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.render-equivalent span { color: var(--muted); }
.render-equivalent b { color: var(--ink); }
.render-equivalent small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.render-equivalent .hd-render-count { align-items: end; }
.render-equivalent .hd-render-count b { font-size: 18px; white-space: nowrap; }
.popular .render-equivalent { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.07); }
.popular .render-equivalent > strong, .popular .render-equivalent b { color: #fff; }
.popular .render-equivalent span { color: #cbd5e1; }
.popular .render-equivalent small { color: #b5c6bf; }
.monthly-price { margin: 27px 0 4px; font-size: 36px; font-weight: 950; letter-spacing: -.04em; }
.monthly-price small { font-size: 13px; font-weight: 700; letter-spacing: 0; }
.term-list { display: grid; gap: 9px; margin: 23px 0 28px; }
.term { width: 100%; display: flex; justify-content: space-between; gap: 15px; padding: 10px; border: 1px solid transparent; border-top-color: var(--line); border-radius: 10px; background: transparent; font-size: 12px; cursor: pointer; }
.term:hover, .term.active { border-color: var(--blue); background: rgba(59,130,246,.07); }
.popular .term { border-color: rgba(255,255,255,.13); }
.term span { color: var(--muted); }
.popular .term span { color: #b5c6bf; }
.term strong { text-align: right; }
.term em { display: block; color: var(--blue); font-style: normal; font-weight: 850; }
.popular .term em { color: var(--cyan); }
.selected-term { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin-top: 18px; padding: 13px; border-radius: 12px; color: var(--ink); background: #eff6ff; font-size: 12px; }
.selected-term strong { font-size: 14px; }
.selected-term span { color: var(--muted); text-align: right; }
.popular .selected-term { color: #fff; background: rgba(255,255,255,.09); }
.popular .selected-term span { color: #cbd5e1; }
.term-benefit { display: grid; gap: 5px; margin-top: 10px; padding: 11px 13px; border-radius: 11px; color: #334155; background: #f1f5f9; font-size: 11px; line-height: 1.45; }
.term-benefit strong { color: var(--ink); }
.popular .term-benefit { color: #cbd5e1; background: rgba(255,255,255,.07); }
.popular .term-benefit strong { color: #fff; }
.price-card .button { width: 100%; margin-top: auto; }
.pricing-loading, .pricing-login-required { grid-column: 1 / -1; min-height: 220px; display: grid; place-items: center; gap: 16px; padding: 40px; border: 1px solid var(--line); border-radius: 24px; text-align: center; background: #fff; }
.pricing-message { display: none; margin-bottom: 18px; padding: 13px 16px; border-radius: 12px; font-size: 13px; font-weight: 700; }
.pricing-message:not(:empty) { display: block; }
.pricing-message.info { color: #1e40af; background: #dbeafe; }
.pricing-message.success { color: #166534; background: #dcfce7; }
.pricing-message.error { color: #991b1b; background: #fee2e2; }
.pricing-notes { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 36px; }
.pricing-note { padding: 19px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.65); font-size: 13px; }
.render-estimate-note { margin: 20px 0 0; padding: 14px 17px; border-radius: 13px; color: var(--muted); background: #eef2ff; font-size: 12px; line-height: 1.6; }
.render-estimate-note strong { color: var(--navy); }
.hd-pricing-highlight { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 24px; }
.hd-pricing-highlight div { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 15px 17px; border: 1px solid #dbeafe; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(59,130,246,.06); }
.hd-pricing-highlight span { color: var(--muted); font-size: 12px; font-weight: 750; }
.hd-pricing-highlight strong { color: var(--blue); font-size: 14px; white-space: nowrap; }

.render-stage { padding: 50px 0 100px; }
.render-layout { display: grid; grid-template-columns: 1fr .72fr; gap: 22px; }
.render-panel { padding: 30px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: 0 18px 50px rgba(20,50,40,.07); }
.dropzone { min-height: 330px; display: grid; place-items: center; padding: 30px; border: 2px dashed #cbd5e1; border-radius: 18px; text-align: center; background: #f8fafc; }
.drop-icon { width: 66px; height: 66px; display: grid; place-items: center; margin: 0 auto 16px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, var(--cyan), var(--blue), var(--purple)); font-size: 26px; box-shadow: 0 12px 28px rgba(59,130,246,.25); }
.dropzone h2 { margin: 0; font-size: 22px; }
.dropzone p { max-width: 410px; margin: 8px auto 20px; color: var(--muted); font-size: 14px; }
.form-preview { display: grid; gap: 18px; }
.form-preview label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 850; }
.fake-input { min-height: 48px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; color: #89958f; background: #f8faf9; font-size: 13px; }
.fake-input.large { min-height: 104px; }
.coming-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 99px; color: #6b5400; background: #fff2bd; font-size: 11px; font-weight: 900; }
.wait-card { margin-top: 22px; padding: 24px; border-radius: 18px; color: #fff; background: radial-gradient(circle at 100% 0, rgba(124,58,237,.25), transparent 45%), var(--navy); }
.wait-card h3 { margin: 0 0 8px; }
.wait-card p { margin: 0; color: #b5c6bf; font-size: 13px; }

.modal-open { overflow: hidden; }
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(15,23,42,.68); backdrop-filter: blur(7px); }
.modal-backdrop[hidden] { display: none; }
.login-modal { position: relative; width: min(430px, 100%); padding: 32px; border-radius: 24px; background: #fff; box-shadow: 0 28px 90px rgba(15,23,42,.34); }
.login-modal h2 { margin: 12px 0 5px; font-size: 27px; }
.login-modal > p { margin: 0 0 22px; color: var(--muted); font-size: 13px; }
.login-modal label { display: block; margin-top: 14px; font-size: 12px; font-weight: 850; }
.login-modal input { width: 100%; margin-top: 7px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 11px; outline: none; }
.login-modal input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,.14); }
.login-modal form .button { width: 100%; margin-top: 8px; }
.modal-close { position: absolute; top: 13px; right: 15px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--paper); cursor: pointer; font-size: 23px; line-height: 1; }
.form-error { min-height: 28px; padding-top: 8px; color: #b91c1c; font-size: 12px; }
.remember-row { display: flex !important; align-items: center; gap: 8px; font-weight: 700 !important; cursor: pointer; }
.remember-row input { width: 17px; height: 17px; margin: 0; }
.login-divider { display: flex; align-items: center; gap: 12px; margin: 17px 0; color: var(--muted); font-size: 11px; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.google-login { min-height: 44px; display: grid; place-items: center; overflow: hidden; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 18px 0 8px; padding: 4px; border-radius: 12px; background: var(--paper); }
.auth-tabs button { padding: 10px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; font-weight: 850; }
.auth-tabs button.active { color: #fff; background: linear-gradient(135deg, var(--blue), var(--purple)); }
.auth-text-button { width: 100%; margin-top: 10px; padding: 7px; border: 0; color: var(--blue); background: transparent; cursor: pointer; font-weight: 800; }
.otp-notice { margin-top: 16px; padding: 13px; border-radius: 11px; color: #1e40af; background: #dbeafe; font-size: 12px; line-height: 1.55; }
.otp-input { text-align: center; font-size: 22px; font-weight: 900; letter-spacing: .35em; }
.form-success { min-height: 24px; padding-top: 6px; color: #15803d; font-size: 12px; }
.payment-modal { position: relative; width: min(720px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 32px; border-radius: 24px; background: #fff; box-shadow: 0 28px 90px rgba(15,23,42,.34); }
.payment-modal h2 { margin: 12px 0 5px; font-size: 28px; }
.payment-instruction { margin: 0 0 22px; color: var(--muted); font-size: 14px; }
.payment-layout { display: grid; grid-template-columns: 260px 1fr; align-items: center; gap: 26px; }
.payment-qr { width: 260px; min-height: 260px; display: grid; place-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.payment-qr img, .payment-qr canvas { display: block; max-width: 100%; height: auto; }
.payment-summary { display: grid; gap: 11px; }
.payment-summary > div { display: flex; justify-content: space-between; gap: 18px; padding-bottom: 10px; border-bottom: 1px solid #e2e8f0; }
.payment-summary span { color: var(--muted); font-size: 12px; }
.payment-summary strong { text-align: right; font-size: 13px; }
.payment-summary .payment-amount { color: var(--blue); font-size: 22px; }
.payment-id { max-width: 190px; overflow-wrap: anywhere; }
.payment-status { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 22px; padding: 13px; border-radius: 12px; font-size: 13px; font-weight: 850; }
.payment-status.waiting { color: #1e40af; background: #dbeafe; }
.payment-status.success { color: #166534; background: #dcfce7; }
.payment-status.error { color: #991b1b; background: #fee2e2; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px currentColor; opacity: .55; }
.payment-status.waiting .status-dot { animation: payment-pulse 1.3s ease-in-out infinite; }
.payment-note { margin: 13px 0 0; color: var(--muted); text-align: center; font-size: 11px; }
@keyframes payment-pulse { 50% { opacity: .2; transform: scale(.8); } }
.profile-hero { padding-bottom: 48px; }
.profile-hero h1 { font-size: clamp(38px, 5vw, 56px); }
.profile-wrap { min-height: 420px; padding: 42px 0 90px; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.profile-card { padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 16px 45px rgba(15,23,42,.07); }
.profile-card > span { color: var(--blue); font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.profile-card h2 { margin: 10px 0 3px; font-size: 27px; }
.profile-card p { margin: 0 0 18px; color: var(--muted); }
.profile-credit { margin-top: 28px; color: var(--blue); font-size: 43px; font-weight: 950; letter-spacing: -.04em; }
.profile-credit small { font-size: 14px; letter-spacing: 0; }
.profile-card dl { display: grid; gap: 10px; margin: 22px 0 0; }
.profile-card dl div { display: flex; justify-content: space-between; gap: 20px; padding-top: 10px; border-top: 1px solid #e2e8f0; }
.profile-card dt { color: var(--muted); font-size: 12px; }
.profile-card dd { margin: 0; font-size: 13px; font-weight: 850; }
.profile-empty { padding: 55px; border: 1px solid var(--line); border-radius: 22px; text-align: center; background: #fff; }
.profile-empty h2 { margin-top: 0; }
.profile-empty p { color: var(--muted); }
.profile-logout { margin-top: 20px; }
.account-menu { position:relative; }
.account-menu-trigger { display:flex; align-items:center; gap:9px; max-width:250px; cursor:pointer; }
.account-avatar { display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; border-radius:50%; color:#fff; background:linear-gradient(135deg,var(--cyan),var(--blue) 50%,var(--purple)); font-size:12px; font-weight:900; }
.account-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-chevron { flex:0 0 7px; width:7px; height:7px; margin:-4px 2px 0 4px; border-right:1.8px solid #64748b; border-bottom:1.8px solid #64748b; transform:rotate(45deg); transform-origin:center; transition:transform .18s ease,border-color .18s ease; }
.account-menu:hover .account-chevron,.account-menu:focus-within .account-chevron,.account-menu.is-open .account-chevron { border-color:var(--blue); transform:translateY(4px) rotate(225deg); }
.account-dropdown { position:absolute; z-index:50; top:calc(100% + 10px); right:0; width:285px; padding:8px; visibility:hidden; opacity:0; transform:translateY(-6px); pointer-events:none; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 20px 50px rgba(15,23,42,.18); transition:opacity .16s ease,transform .16s ease,visibility .16s; }
.account-menu:hover .account-dropdown,.account-menu:focus-within .account-dropdown,.account-menu.is-open .account-dropdown { visibility:visible; opacity:1; transform:translateY(0); pointer-events:auto; }
.account-dropdown a,.account-dropdown button { display:flex; align-items:center; gap:12px; width:100%; padding:12px; border:0; border-radius:11px; color:var(--navy); background:transparent; text-align:left; text-decoration:none; cursor:pointer; font:inherit; }
.account-dropdown a:hover { background:#eff6ff; }
.account-dropdown button:hover { background:#fff1f2; color:#be123c; }
.account-dropdown > * > span:first-child { display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; border-radius:10px; background:#f1f5f9; }
.account-dropdown button > span:first-child { color:#be123c; background:#fff1f2; }
.account-dropdown strong,.account-dropdown small { display:block; }
.account-dropdown strong { font-size:13px; }
.account-dropdown small { margin-top:2px; color:var(--muted); font-size:11px; font-weight:500; }
.history-card { margin-top:20px; padding:26px; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:0 16px 45px rgba(15,23,42,.07); }
.history-head { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:20px; }
.history-head span { color:var(--blue); font-size:11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.history-head h1,.history-head h2 { margin:5px 0 0; }
.history-head > strong { color:var(--blue); font-size:20px; }
.history-table-wrap { overflow:auto; }
.history-table { width:100%; border-collapse:collapse; min-width:650px; }
.history-table th,.history-table td { padding:12px 10px; border-bottom:1px solid #e2e8f0; text-align:left; font-size:13px; }
.history-table th { color:var(--muted); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.history-table td small { display:block; color:var(--muted); }
.history-amount { font-weight:900; }.history-amount.credit { color:#15803d; }.history-amount.debit { color:#b91c1c; }
.history-empty { padding:38px; color:var(--muted); text-align:center; }
.account-history-page { min-height:calc(100vh - 72px); padding:45px 0 90px; background:var(--paper); }
.policy-page { padding: 48px 0 96px; background: var(--paper); }
.policy-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: start; gap: 28px; }
.policy-nav { position: sticky; top: 92px; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.policy-nav strong { display: block; margin-bottom: 12px; color: var(--navy); }
.policy-nav a { display: block; padding: 7px 0; color: var(--muted); font-size: 13px; }
.policy-nav a:hover { color: var(--blue); }
.policy-content { padding: 34px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: 0 16px 45px rgba(15,23,42,.06); }
.policy-content section + section { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--line); }
.policy-content h2 { margin: 0 0 13px; font-size: 23px; }
.policy-content h3 { margin: 20px 0 8px; font-size: 16px; }
.policy-content p, .policy-content li { color: var(--muted); line-height: 1.75; }
.policy-content ul { padding-left: 21px; }
.policy-notice { margin: 20px 0; padding: 18px 20px; border-left: 4px solid var(--purple); border-radius: 12px; color: var(--navy); background: #f5f3ff; }
.policy-meta { color: var(--muted); font-size: 13px; }
.checkout-secure { color: var(--muted); font-size: 12px; font-weight: 800; }
.checkout-page { min-height: calc(100vh - 72px); display: grid; place-items: center; padding: 38px 20px; background: radial-gradient(circle at 45% 0,rgba(0,198,255,.17),transparent 35%),var(--paper); }
.checkout-card { width: min(700px,100%); padding: 34px; border: 1px solid var(--line); border-radius: 25px; background:#fff; box-shadow:var(--shadow); }
.checkout-card h1 { margin:12px 0 4px; font-size:32px; }
.checkout-card > p { color:var(--muted); }
.checkout-body { display:grid; grid-template-columns:260px 1fr; align-items:center; gap:26px; margin-top:24px; }
.checkout-details { display:grid; gap:12px; }
.checkout-details div { display:flex; justify-content:space-between; gap:18px; padding-bottom:10px; border-bottom:1px solid #e2e8f0; }
.checkout-details span { color:var(--muted); font-size:12px; }
.checkout-details strong { text-align:right; }

.site-footer { padding: 48px 0 28px; color: #cbd5e1; background: #0f172a; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 50px; }
.site-footer .brand { color: #fff; }
.site-footer .brand-logo { width: 48px; height: 48px; }
.footer-copy { max-width: 380px; font-size: 13px; }
.footer-title { color: #fff; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; }
.footer-links { display: grid; gap: 8px; margin-top: 14px; font-size: 13px; }
.footer-links a:hover { color: var(--lime); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 38px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); font-size: 11px; }

@media (max-width: 900px) {
  .hero-grid, .render-layout { grid-template-columns: 1fr; }
  .visual { min-height: 420px; }
  .feature-grid, .pricing-grid { grid-template-columns: 1fr 1fr; }
  .workflow { grid-template-columns: 1fr 1fr; }
  .provider-row { grid-template-columns: 1fr; }
  .tutorial-grid { grid-template-columns: 1fr; }
  .prompt-grid { grid-template-columns: 1fr; }
  .price-card.popular { transform: none; }
  .pricing-grid .price-card:last-child { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .shell { width: min(100% - 28px, 1160px); }
  .site-header { position: relative; }
  .menu-button { display: block; }
  .nav-links { display: none; position: absolute; inset: 72px 14px auto; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
  .nav-links.is-open { display: grid; }
  .account-menu,.account-menu-trigger { width:100%; max-width:none; }
  .account-dropdown { position:static; display:none; width:auto; margin-top:8px; visibility:visible; opacity:1; transform:none; pointer-events:auto; box-shadow:none; }
  .account-menu.is-open .account-dropdown { display:block; }
  .hero { padding-top: 64px; }
  .hero h1, .page-hero h1 { font-size: 43px; }
  .visual { min-height: 330px; }
  .visual-frame { inset: 20px 0 0 20px; }
  .visual-pill.two { left: 0; }
  .feature-grid, .pricing-grid, .pricing-notes, .hd-pricing-highlight { grid-template-columns: 1fr; }
  .pricing-grid .price-card:last-child { grid-column: auto; }
  .workflow { grid-template-columns: 1fr; }
  .prompt-toolbar { position: static; align-items: stretch; flex-direction: column; }
  .prompt-search { width: 100%; }
  .prompt-tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .prompt-card { padding: 20px; }
  .prompt-card-head { align-items: stretch; flex-direction: column; }
  .prompt-card-head button { align-self: flex-start; }
  .section-head, .cta-box { align-items: flex-start; flex-direction: column; }
  .section { padding: 70px 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .footer-bottom { flex-direction: column; }
  .billing-toggle { display: grid; grid-template-columns: 1fr 1fr; }
  .payment-modal { padding: 24px 18px; }
  .payment-layout { grid-template-columns: 1fr; }
  .payment-qr { width: min(260px, 100%); margin-inline: auto; }
  .profile-grid { grid-template-columns: 1fr; }
  .policy-layout { grid-template-columns: 1fr; }
  .policy-nav { position: static; }
  .checkout-body { grid-template-columns:1fr; }
  .checkout-card { padding:24px 18px; }
}
.password-reset-page{min-height:calc(100vh - 190px);display:grid;place-items:center;padding:72px 20px;background:radial-gradient(circle at 15% 15%,rgba(0,198,255,.12),transparent 30%),radial-gradient(circle at 85% 20%,rgba(124,58,237,.12),transparent 32%),#f8fafc}.password-reset-card{width:min(100%,540px);padding:42px;border:1px solid #dbe4f0;border-radius:28px;background:#fff;box-shadow:0 24px 70px rgba(15,23,42,.12)}.password-reset-card h1{margin:10px 0 8px;font-size:clamp(30px,5vw,44px);color:#0f172a}.password-reset-description{margin:0 0 26px;color:#64748b}.password-reset-card form{display:grid;gap:16px}.password-reset-card label{display:grid;gap:8px;font-weight:700;color:#1e293b}.password-reset-card input{width:100%;box-sizing:border-box;padding:13px 15px;border:1px solid #cbd5e1;border-radius:12px;background:#fff;color:#0f172a;font:inherit}.password-reset-card input:focus{outline:3px solid rgba(59,130,246,.18);border-color:#3b82f6}.password-reset-card .button{width:100%;justify-content:center}.password-reset-progress{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0;margin:0 0 28px;list-style:none}.password-reset-progress li{display:grid;justify-items:center;gap:6px;color:#94a3b8;font-size:12px;text-align:center}.password-reset-progress li span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e2e8f0;color:#64748b;font-weight:800}.password-reset-progress li.active span,.password-reset-progress li.done span{color:#fff;background:linear-gradient(135deg,#00c6ff,#3b82f6 50%,#7c3aed)}.password-reset-progress li.active{color:#3b82f6;font-weight:700}.password-reset-progress li.done{color:#64748b}.password-reset-complete{text-align:center}.password-reset-check{display:grid;place-items:center;width:68px;height:68px;margin:0 auto 18px;border-radius:50%;color:#fff;background:linear-gradient(135deg,#00c6ff,#3b82f6 50%,#7c3aed);font-size:34px;font-weight:900}.password-reset-complete h2{margin:0 0 10px}.password-reset-complete p{margin:0 0 24px;color:#64748b}.password-reset-help{margin:24px 0 0;text-align:center;color:#64748b;font-size:14px}.password-reset-help a{color:#3b82f6}.form-success{color:#15803d;font-size:14px}.form-error{min-height:20px;color:#dc2626;font-size:14px}@media(max-width:600px){.password-reset-page{padding:36px 14px}.password-reset-card{padding:28px 20px;border-radius:20px}}