/* AI Blog Kit global design system and responsive components. */

:root {
  --bg:#f7f8fc;
  --surface:#fff;
  --surface2:#f0f3ff;
  --surface3:#e7ebfb;
  --text:#14162b;
  --muted:#626984;
  --primary:#6658f5;
  --primary2:#8d5cf6;
  --accent:#19b99a;
  --border:#dde1ef;
  --success:#138a70;
  --danger:#c9475c;
  --warning:#a96700;
  --shadow:0 16px 45px rgba(37,42,77,.12);
  --radius:18px;
  --radius-lg:28px;
  --max:1180px;
  --font:Arial,Helvetica,"Segoe UI",Tahoma,sans-serif
}

[data-theme="dark"] {
  --bg:#0e1020;
  --surface:#16192c;
  --surface2:#1e223b;
  --surface3:#292e4b;
  --text:#f6f7ff;
  --muted:#aab0cc;
  --border:#303550;
  --shadow:0 18px 50px rgba(0,0,0,.32)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:16px;
  line-height:1.65;
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  overflow-x:hidden
}

body.modal-open {
  overflow:hidden
}

a {
  color:inherit;
  text-decoration:none
}

img,svg {
  max-width:100%;
  height:auto
}

button,input,select,textarea {
  font-family:inherit;
  font-size:inherit;
  line-height:inherit
}

button {
  cursor:pointer
}

:focus-visible {
  outline:3px solid rgba(102,88,245,.42);
  outline-offset:3px
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.skip-link {
  position:fixed;
  left:16px;
  top:-60px;
  z-index:9999;
  padding:10px 16px;
  background:var(--primary);
  color:#fff;
  border-radius:8px
}

.skip-link:focus {
  top:16px
}

.container {
  width:min(calc(100% - 36px),var(--max));
  margin:auto
}

.narrow {
  width:min(calc(100% - 36px),820px);
  margin:auto
}

.section {
  padding:88px 0
}

.section-sm {
  padding:56px 0
}

.section-head {
  max-width:740px;
  margin:0 auto 42px;
  text-align:center
}

.section-head.left {
  text-align:left;
  margin-left:0
}

.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--primary);
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:850
}

.eyebrow:before {
  content:"";
  width:24px;
  height:2px;
  background:currentColor
}

h1,h2,h3,h4 {
  line-height:1.15;
  letter-spacing:-.025em;
  margin:0 0 16px
}

h1 {
  font-size:clamp(2.5rem,6vw,5.1rem)
}

h2 {
  font-size:clamp(2rem,4vw,3.35rem)
}

h3 {
  font-size:clamp(1.18rem,2vw,1.5rem)
}

p {
  margin:0 0 18px
}

.lead {
  font-size:clamp(1.05rem,1.8vw,1.24rem);
  color:var(--muted)
}

.muted {
  color:var(--muted)
}

.gradient-text {
  background:linear-gradient(120deg,var(--primary),var(--primary2),var(--accent));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
}

.announcement {
  background:#14162b;
  color:#fff;
  font-size:.88rem
}

.announcement .container {
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center
}

.announcement a {
  color:#d8d4ff;
  font-weight:800
}

.site-header {
  position:sticky;
  top:0;
  z-index:1000;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border)
}

.nav-wrap {
  display:flex;
  align-items:center;
  min-height:76px;
  gap:24px
}

.logo {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:1.18rem;
  font-weight:900;
  letter-spacing:-.04em;
  flex-shrink:0
}

.logo-mark {
  width:36px;
  height:36px;
  border-radius:11px;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  box-shadow:0 8px 18px rgba(102,88,245,.28)
}

.logo-mark svg {
  width:22px
}

.primary-nav {
  display:flex;
  align-items:center;
  gap:5px;
  margin-left:auto
}

.primary-nav>a,.nav-dropdown>button {
  border:0;
  background:transparent;
  color:var(--muted);
  padding:10px 12px;
  border-radius:10px;
  font-weight:750
}

.primary-nav>a:hover,.primary-nav>a.active,.nav-dropdown>button:hover {
  color:var(--text);
  background:var(--surface2)
}

.nav-dropdown {
  position:relative
}

.dropdown-menu {
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  width:250px;
  padding:10px;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:16px;
  box-shadow:var(--shadow);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:.2s
}

.nav-dropdown.open .dropdown-menu {
  opacity:1;
  visibility:visible;
  transform:none
}

.dropdown-menu a {
  display:block;
  padding:10px 12px;
  border-radius:10px;
  color:var(--muted)
}

.dropdown-menu a:hover {
  background:var(--surface2);
  color:var(--text)
}

.nav-actions {
  display:flex;
  align-items:center;
  gap:9px
}

.icon-btn {
  width:42px;
  height:42px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  border-radius:12px;
  display:grid;
  place-items:center
}

.mobile-toggle {
  display:none
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  padding:11px 18px;
  border-radius:12px;
  border:1px solid transparent;
  font-weight:850;
  transition:.2s
}

.btn:hover {
  transform:translateY(-2px)
}

.btn-primary {
  color:#fff;
  background:linear-gradient(120deg,var(--primary),var(--primary2));
  box-shadow:0 10px 24px rgba(102,88,245,.24)
}

.btn-secondary {
  background:var(--surface);
  border-color:var(--border);
  color:var(--text)
}

.btn-ghost {
  background:transparent;
  color:var(--primary)
}

.btn-sm {
  min-height:38px;
  padding:8px 13px;
  font-size:.9rem
}

.btn-block {
  width:100%
}

.hero {
  position:relative;
  padding:86px 0 72px;
  overflow:hidden
}

.hero:before {
  content:"";
  position:absolute;
  width:680px;
  height:680px;
  border-radius:50%;
  right:-280px;
  top:-300px;
  background:radial-gradient(circle,rgba(102,88,245,.2),transparent 68%)
}

.hero-grid {
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:54px
}

.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:28px 0 22px
}

.hero-note {
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  color:var(--muted);
  font-size:.92rem
}

.hero-note span:before {
  content:"✓";
  color:var(--success);
  margin-right:7px;
  font-weight:900
}

.app-window {
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  overflow:hidden
}

.window-bar {
  display:flex;
  align-items:center;
  gap:7px;
  height:48px;
  padding:0 18px;
  border-bottom:1px solid var(--border);
  background:var(--surface2)
}

.window-dot {
  width:10px;
  height:10px;
  border-radius:50%;
  background:#ff6f7d
}

.window-dot:nth-child(2) {
  background:#ffbe55
}

.window-dot:nth-child(3) {
  background:#43c98b
}

.window-title {
  margin-left:8px;
  color:var(--muted);
  font-size:.84rem
}

.mock-editor {
  padding:22px;
  display:grid;
  grid-template-columns:145px 1fr;
  gap:18px;
  min-height:410px
}

.mock-side {
  padding:12px;
  border-radius:14px;
  background:var(--surface2)
}

.mock-side div {
  height:11px;
  margin:13px 0;
  border-radius:10px;
  background:var(--surface3)
}

.mock-side div:nth-child(2),.mock-side div:nth-child(5) {
  width:70%
}

.mock-main {
  display:flex;
  flex-direction:column;
  gap:14px
}

.mock-line {
  height:11px;
  border-radius:10px;
  background:var(--surface3)
}

.w90 {
  width:90%
}

.w70 {
  width:70%
}

.w50 {
  width:50%
}

.mock-score {
  width:88px;
  height:88px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:1.3rem;
  color:var(--success);
  background:conic-gradient(var(--accent) 0 86%,var(--surface3) 86%);
  position:relative
}

.mock-score:after {
  content:"";
  position:absolute;
  inset:9px;
  background:var(--surface);
  border-radius:50%
}

.mock-score span {
  z-index:1
}

.floating-card {
  position:absolute;
  padding:14px 16px;
  border-radius:14px;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  font-size:.9rem;
  font-weight:800
}

.floating-card.one {
  left:-26px;
  bottom:42px
}

.floating-card.two {
  right:-24px;
  top:55px
}

.trust-strip {
  padding:24px 0;
  border-block:1px solid var(--border);
  background:var(--surface)
}

.stat-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  text-align:center
}

.stat strong {
  display:block;
  font-size:1.55rem
}

.stat span {
  color:var(--muted);
  font-size:.9rem
}

.grid-2 {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:26px
}

.grid-3 {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px
}

.grid-4 {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px
}

.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:52px
}

.card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:26px;
  box-shadow:0 8px 24px rgba(37,42,77,.07)
}

.card.hover {
  transition:.22s
}

.card.hover:hover {
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--primary) 40%,var(--border))
}

.icon-box {
  width:48px;
  height:48px;
  border-radius:14px;
  display:grid;
  place-items:center;
  color:var(--primary);
  background:var(--surface2);
  margin-bottom:18px;
  font-weight:900
}

.feature-list {
  list-style:none;
  padding:0;
  margin:0
}

.feature-list li {
  padding:7px 0 7px 28px;
  position:relative;
  color:var(--muted)
}

.feature-list li:before {
  content:"✓";
  position:absolute;
  left:0;
  color:var(--success);
  font-weight:900
}

.step {
  position:relative;
  padding-left:74px
}

.step-number {
  position:absolute;
  left:0;
  top:0;
  width:52px;
  height:52px;
  border-radius:16px;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  font-weight:900
}

.content-tags {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px
}

.content-tags span {
  padding:9px 14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--muted);
  font-weight:750
}

.check-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-top:24px
}

.check-item {
  display:flex;
  gap:10px;
  padding:14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px
}

.check-item b {
  color:var(--success)
}

.dashboard-shot {
  padding:18px;
  background:linear-gradient(145deg,var(--surface2),var(--surface));
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow)
}

.dashboard-shot-inner {
  display:grid;
  grid-template-columns:105px 1fr;
  min-height:410px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--surface)
}

.shot-sidebar {
  background:#171a31;
  padding:18px 12px
}

.shot-sidebar .bar {
  height:9px;
  margin:14px 0;
  border-radius:8px;
  background:#343954
}

.shot-content {
  padding:24px
}

.shot-cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px
}

.shot-card {
  height:78px;
  border-radius:12px;
  background:var(--surface2)
}

.shot-chart {
  height:170px;
  margin-top:18px;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(102,88,245,.22),transparent),repeating-linear-gradient(0deg,var(--surface2),var(--surface2) 1px,transparent 1px,transparent 32px);
  position:relative
}

.shot-chart:after {
  content:"";
  position:absolute;
  inset:45px 20px 40px;
  border-bottom:4px solid var(--primary);
  transform:skewY(-7deg)
}

.shot-table div {
  height:10px;
  margin:14px 0;
  border-radius:8px;
  background:var(--surface3)
}

.testimonial-wrap {
  overflow:hidden
}

.testimonial-track {
  display:flex;
  transition:transform .45s
}

.testimonial {
  min-width:100%;
  text-align:center;
  padding:20px max(16px,8vw)
}

.testimonial blockquote {
  font-size:clamp(1.2rem,2.5vw,1.75rem);
  line-height:1.5;
  margin:0 0 24px
}

.slider-controls {
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:20px
}

.slider-dot {
  width:10px;
  height:10px;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--border)
}

.slider-dot.active {
  background:var(--primary);
  transform:scale(1.2)
}

.pricing-toggle {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:28px 0 38px
}

.switch {
  width:58px;
  height:32px;
  border:0;
  border-radius:999px;
  background:var(--surface3);
  padding:4px
}

.switch span {
  display:block;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--primary);
  transition:.2s
}

.switch.annual span {
  transform:translateX(26px)
}

.save-badge {
  color:var(--success);
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  padding:4px 8px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:850
}

.pricing-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px
}

.price-card {
  position:relative;
  display:flex;
  flex-direction:column
}

.price-card.recommended {
  border:2px solid var(--primary);
  transform:translateY(-10px)
}

.recommend-badge {
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  background:var(--primary);
  color:#fff;
  padding:5px 12px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:850
}

.price {
  font-size:2.7rem;
  font-weight:900;
  letter-spacing:-.05em;
  margin:16px 0 4px
}

.price small {
  font-size:.88rem;
  font-weight:600;
  color:var(--muted);
  letter-spacing:0
}

.price-card .feature-list {
  margin:18px 0 26px;
  flex:1
}

.comparison-scroll {
  overflow:auto
}

.comparison-table {
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden
}

.comparison-table th,.comparison-table td {
  padding:16px;
  border-bottom:1px solid var(--border);
  text-align:left
}

.comparison-table th {
  background:var(--surface2)
}

.comparison-table tr:last-child td {
  border-bottom:0
}

.faq-list {
  max-width:860px;
  margin:auto
}

.faq-item {
  border-bottom:1px solid var(--border)
}

.faq-question {
  width:100%;
  display:flex;
  justify-content:space-between;
  gap:20px;
  text-align:left;
  color:var(--text);
  background:transparent;
  border:0;
  padding:22px 2px;
  font-weight:850
}

.faq-question span:last-child {
  font-size:1.3rem;
  transition:.2s
}

.faq-answer {
  display:grid;
  grid-template-rows:0fr;
  transition:.25s
}

.faq-answer>div {
  overflow:hidden
}

.faq-answer p {
  color:var(--muted);
  padding:0 30px 22px 0;
  margin:0
}

.faq-item.open .faq-answer {
  grid-template-rows:1fr
}

.faq-item.open .faq-question span:last-child {
  transform:rotate(45deg)
}

.cta-box {
  position:relative;
  overflow:hidden;
  padding:52px;
  border-radius:var(--radius-lg);
  color:#fff;
  background:linear-gradient(130deg,#2c245c,var(--primary),#146f69)
}

.cta-box:after {
  content:"";
  position:absolute;
  width:300px;
  height:300px;
  border:60px solid rgba(255,255,255,.08);
  border-radius:50%;
  right:-100px;
  top:-150px
}

.cta-box>* {
  position:relative;
  z-index:1
}

.cta-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px
}

.cta-box .btn-secondary {
  background:#fff;
  color:#272247
}

.page-hero {
  padding:76px 0 58px;
  text-align:center;
  background:linear-gradient(180deg,var(--surface2),transparent)
}

.page-hero h1 {
  font-size:clamp(2.3rem,5vw,4.2rem)
}

.breadcrumbs {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  color:var(--muted);
  font-size:.9rem;
  margin-bottom:18px
}

.generator-shell {
  display:grid;
  grid-template-columns:380px 1fr;
  gap:24px;
  align-items:start
}

.form-card,.output-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:0 8px 24px rgba(37,42,77,.07)
}

.form-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px
}

.form-group {
  display:flex;
  flex-direction:column;
  gap:7px
}

.form-group.full {
  grid-column:1/-1
}

label {
  font-weight:760;
  font-size:.92rem
}

input,select,textarea {
  width:100%;
  border:1px solid var(--border);
  color:var(--text);
  background:var(--bg);
  border-radius:11px;
  padding:11px 13px;
  transition:.2s
}

input:focus,select:focus,textarea:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(102,88,245,.13);
  outline:0
}

textarea {
  min-height:110px;
  resize:vertical
}

.field-hint {
  color:var(--muted);
  font-size:.8rem
}

.error-text {
  color:var(--danger);
  font-size:.84rem;
  min-height:1.2em
}

.form-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px
}

.output-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border)
}

.output-actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}

.output-content {
  min-height:460px;
  padding:24px 4px
}

.output-content.empty {
  display:grid;
  place-items:center;
  text-align:center;
  color:var(--muted)
}

.output-content h1 {
  font-size:2.05rem
}

.output-content h2 {
  font-size:1.45rem;
  margin-top:28px
}

.output-content h3 {
  font-size:1.15rem;
  margin-top:22px
}

.output-meta {
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding-top:14px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:.85rem
}

.loader {
  display:inline-flex;
  align-items:center;
  gap:9px
}

.loader:before {
  content:"";
  width:18px;
  height:18px;
  border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .75s linear infinite
}

@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}

.range-row {
  display:flex;
  align-items:center;
  gap:12px
}

.range-row input {
  padding:0
}

.range-value {
  min-width:36px;
  color:var(--primary);
  font-weight:800
}

.tool-intro {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-bottom:26px
}

.tool-tip {
  padding:18px;
  border-radius:14px;
  background:color-mix(in srgb,var(--accent) 10%,var(--surface));
  border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border))
}

.blog-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px
}

.blog-card {
  overflow:hidden;
  padding:0
}

.blog-cover {
  min-height:190px;
  padding:24px;
  display:flex;
  align-items:flex-end;
  color:#fff;
  background:linear-gradient(135deg,#362d86,#6b5cf5 60%,#1eaa93)
}

.blog-cover.alt {
  background:linear-gradient(135deg,#1c5d5a,#18a387 60%,#79ddcc)
}

.blog-cover.warm {
  background:linear-gradient(135deg,#7c3d68,#b45986 60%,#efaa69)
}

.blog-body {
  padding:24px
}

.meta {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  color:var(--muted);
  font-size:.85rem;
  margin-bottom:12px
}

.article-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:44px;
  align-items:start
}

.article-body {
  font-size:1.05rem
}

.article-body h2 {
  font-size:2rem;
  margin-top:42px
}

.article-body h3 {
  margin-top:28px
}

.article-body blockquote {
  border-left:4px solid var(--primary);
  margin:30px 0;
  padding:18px 24px;
  background:var(--surface2);
  border-radius:0 14px 14px 0
}

.article-sidebar {
  position:sticky;
  top:110px
}

.toc a {
  display:block;
  padding:7px 0;
  color:var(--muted)
}

.toc a:hover {
  color:var(--primary)
}

.author-box {
  display:flex;
  gap:18px;
  align-items:center;
  margin-top:42px
}

.avatar {
  width:58px;
  height:58px;
  flex:0 0 auto;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  font-weight:900
}

.contact-grid {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:30px
}

.contact-method {
  display:flex;
  gap:14px;
  margin:20px 0
}

.contact-method .icon-box {
  width:42px;
  height:42px;
  margin:0;
  flex-shrink:0
}

.auth-page {
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:56px 18px;
  background:radial-gradient(circle at 20% 10%,rgba(102,88,245,.2),transparent 35%),radial-gradient(circle at 90% 70%,rgba(25,185,154,.16),transparent 35%)
}

.auth-card {
  width:min(100%,500px);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:34px;
  box-shadow:var(--shadow)
}

.auth-card .logo {
  justify-content:center;
  margin-bottom:26px
}

.password-wrap {
  position:relative
}

.password-wrap input {
  padding-right:58px
}

.password-toggle {
  position:absolute;
  right:7px;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:34px;
  border:0;
  border-radius:8px;
  color:var(--muted);
  background:transparent
}

.form-message {
  display:none;
  margin-top:14px;
  padding:12px 14px;
  border-radius:10px
}

.form-message.show {
  display:block
}

.form-message.success {
  color:var(--success);
  background:color-mix(in srgb,var(--accent) 12%,transparent)
}

.form-message.error {
  color:var(--danger);
  background:color-mix(in srgb,var(--danger) 10%,transparent)
}

.legal {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:clamp(24px,5vw,54px);
  box-shadow:0 8px 24px rgba(37,42,77,.07)
}

.legal h2 {
  margin-top:38px;
  font-size:1.8rem
}

.legal h3 {
  margin-top:26px
}

.legal li {
  margin:8px 0
}

.notice {
  padding:16px 18px;
  border-radius:12px;
  background:var(--surface2);
  border-left:4px solid var(--primary)
}

.modal {
  position:fixed;
  inset:0;
  z-index:2000;
  display:none;
  place-items:center;
  padding:18px;
  background:rgba(9,10,24,.72)
}

.modal.open {
  display:grid
}

.modal-dialog {
  width:min(100%,560px);
  max-height:90vh;
  overflow:auto;
  background:var(--surface);
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:var(--shadow)
}

.modal-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:22px 24px;
  border-bottom:1px solid var(--border)
}

.modal-body {
  padding:24px
}

.modal-close {
  width:38px;
  height:38px;
  border:0;
  border-radius:10px;
  background:var(--surface2);
  color:var(--text);
  font-size:1.3rem
}

.toast-region {
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:3000;
  display:flex;
  flex-direction:column;
  gap:10px
}

.toast {
  min-width:280px;
  max-width:360px;
  padding:14px 16px;
  border-radius:12px;
  color:#fff;
  background:#20243a;
  box-shadow:var(--shadow)
}

.toast.success {
  background:var(--success)
}

.toast.error {
  background:var(--danger)
}

.cookie-banner {
  position:fixed;
  left:18px;
  bottom:18px;
  z-index:1900;
  width:min(calc(100% - 36px),460px);
  padding:20px;
  border-radius:16px;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  display:none
}

.cookie-banner.show {
  display:block
}

.cookie-actions {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:14px
}

.back-top {
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:1500;
  width:46px;
  height:46px;
  border:0;
  border-radius:14px;
  color:#fff;
  background:var(--primary);
  box-shadow:var(--shadow);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:.2s
}

.back-top.show {
  opacity:1;
  visibility:visible;
  transform:none
}

.site-footer {
  background:#111326;
  color:#e8eaff;
  margin-top:78px
}

.footer-top {
  display:grid;
  grid-template-columns:1.3fr repeat(4,1fr);
  gap:30px;
  padding:62px 0 44px
}

.site-footer .logo {
  color:#fff
}

.footer-copy {
  color:#aeb4ce;
  max-width:330px;
  margin-top:18px
}

.footer-col h3 {
  font-size:1rem;
  color:#fff;
  margin-bottom:16px
}

.footer-col a {
  display:block;
  color:#aeb4ce;
  padding:5px 0
}

.footer-col a:hover {
  color:#fff
}

.socials {
  display:flex;
  gap:9px;
  margin-top:18px
}

.socials a,
.socials span {
  width:38px;
  height:38px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:#1f233c;
  color:#fff
}

.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  padding:20px 0;
  border-top:1px solid #2a2e47;
  color:#9aa1bd;
  font-size:.87rem
}

.footer-bottom-links {
  display:flex;
  flex-wrap:wrap;
  gap:16px
}

.not-found {
  min-height:70vh;
  display:grid;
  place-items:center;
  text-align:center;
  padding:80px 18px
}

.not-found-code {
  font-size:clamp(5rem,18vw,12rem);
  font-weight:950;
  line-height:1;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  -webkit-background-clip:text;
  color:transparent
}

@media(max-width:1050px) {
  .pricing-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .price-card.recommended {
    transform:none
  }
  .grid-4 {
    grid-template-columns:repeat(2,1fr)
  }
  .footer-top {
    grid-template-columns:1.4fr repeat(2,1fr)
  }
}

@media(max-width:900px) {
  .mobile-toggle {
    display:grid
  }
  .primary-nav {
    position:fixed;
    inset:76px 18px auto;
    max-height:calc(100vh - 100px);
    overflow:auto;
    display:none;
    flex-direction:column;
    align-items:stretch;
    padding:16px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:var(--shadow)
  }
  .primary-nav.open {
    display:flex
  }
  .primary-nav>a,.nav-dropdown>button {
    width:100%;
    text-align:left
  }
  .dropdown-menu {
    position:static;
    width:100%;
    box-shadow:none;
    display:none;
    opacity:1;
    visibility:visible;
    transform:none;
    margin-top:4px
  }
  .nav-dropdown.open .dropdown-menu {
    display:block
  }
  .nav-actions .btn-secondary {
    display:none
  }
  .hero-grid,.split,.contact-grid,.article-layout {
    grid-template-columns:1fr
  }
  .generator-shell {
    grid-template-columns:1fr
  }
  .article-sidebar {
    position:static;
    order:-1
  }
  .blog-grid,.grid-3 {
    grid-template-columns:repeat(2,1fr)
  }
}

@media(max-width:680px) {
  .section {
    padding:66px 0
  }
  .nav-wrap {
    gap:10px
  }
  .nav-actions {
    margin-left:auto
  }
  .nav-actions .btn-primary {
    display:none
  }
  .hero {
    padding-top:58px
  }
  .mock-editor {
    grid-template-columns:1fr
  }
  .mock-side,.floating-card {
    display:none
  }
  .stat-grid,.grid-2,.grid-3,.grid-4,.pricing-grid,.blog-grid,.form-grid,.tool-intro {
    grid-template-columns:1fr
  }
  .form-group.full {
    grid-column:auto
  }
  .footer-top {
    grid-template-columns:1fr 1fr
  }
  .footer-brand {
    grid-column:1/-1
  }
  .footer-bottom {
    flex-direction:column;
    align-items:flex-start
  }
  .cta-box {
    padding:36px 24px
  }
  .check-grid {
    grid-template-columns:1fr
  }
  .output-head {
    align-items:flex-start;
    flex-direction:column
  }
  .output-meta {
    flex-direction:column
  }
  .dashboard-shot-inner {
    grid-template-columns:72px 1fr
  }
  .shot-cards {
    grid-template-columns:1fr
  }
  .shot-card:nth-child(n+2) {
    display:none
  }
  .comparison-table {
    min-width:700px
  }
}

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