:root {
  --bg: #080a0e;
  --bg-soft: #10141b;
  --text: #f6f5f2;
  --muted: #a6acb6;
  --faint: #717783;
  --line: rgba(255,255,255,.16);
  --line-soft: rgba(255,255,255,.09);
  --glass: rgba(30,34,42,.54);
  --glass-strong: rgba(28,31,38,.72);
  --glass-light: rgba(255,255,255,.09);
  --accent: #ff967c;
  --accent-deep: #ee705e;
  --green: #78e6af;
  --amber: #f6c76d;
  --blue: #9fbcff;
  --radius-lg: 28px;
  --radius-md: 18px;
  --shadow: 0 28px 90px rgba(0,0,0,.28);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); overflow-x: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip-link { position: fixed; left: 18px; top: 12px; z-index: 40; padding: 9px 13px; border-radius: 10px; color: #171313; background: var(--accent); transform: translateY(-180%); transition: transform .18s ease; }
.skip-link:focus { transform: translateY(0); outline: 2px solid #fff; outline-offset: 2px; }

.ambient { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.ambient-a {
  background:
    linear-gradient(180deg, rgba(7,9,13,.78) 0%, rgba(9,11,15,.58) 44%, rgba(9,11,15,.82) 100%),
    radial-gradient(60% 55% at 82% 12%, rgba(190,111,75,.34), transparent 62%),
    radial-gradient(42% 50% at 5% 32%, rgba(32,62,92,.34), transparent 68%),
    url('/assets/ambient.jpg') center / cover,
    linear-gradient(125deg, #080a0e 0%, #11151b 48%, #1b1719 100%);
  filter: blur(10px) saturate(1.06);
  transform: scale(1.025);
}
.ambient-b {
  opacity: .42;
  background:
    radial-gradient(45% 25% at 70% 42%, rgba(221,145,95,.14), transparent 65%),
    radial-gradient(35% 30% at 15% 73%, rgba(70,109,141,.12), transparent 70%);
  filter: blur(36px);
}
.grain { position: fixed; inset: 0; pointer-events:none; z-index: 20; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.site-shell { position: relative; z-index: 1; }

.site-shell { width: min(1440px, calc(100% - 48px)); margin: 0 auto; padding-bottom: 84px; }
.topbar { position: sticky; top: 0; z-index: 15; display:flex; align-items:center; justify-content:space-between; padding: 20px 0 14px; backdrop-filter: blur(18px) saturate(125%); background: linear-gradient(180deg, rgba(8,10,14,.92), rgba(8,10,14,.58), transparent); }
.brand { display:flex; align-items:center; gap: 10px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif; font-size: 20px; font-weight: 600; letter-spacing: -.04em; white-space: nowrap; }
.brand-mark { width: 25px; height: 25px; border-radius: 8px 4px 8px 4px; transform: rotate(45deg); background: linear-gradient(135deg, #fbf5e9 0%, #f6b887 37%, #d44b3c 66%, #6c55ff 100%); box-shadow: 0 8px 24px rgba(244,126,94,.28), inset 0 1px 1px rgba(255,255,255,.65); }
.brand-mark span { display:block; width:100%; height:100%; transform: rotate(-45deg); }
.nav { display:flex; align-items:center; gap: 4px; margin-left: 26px; }
.nav a, .nav button { border: 0; background: transparent; color: #c6c9cf; padding: 9px 13px; border-radius: 12px; font-size: 14px; transition: color .2s, background .2s; }
.nav a:hover, .nav button:hover, .nav a.active { color: var(--text); background: rgba(255,255,255,.07); }
.nav a.active { box-shadow: inset 0 -1px var(--accent); }
.nav .more { display:inline-flex; align-items:center; gap: 6px; }
.nav .more svg { width: 13px; }
.mobile-nav-toggle { display:none; align-items:center; justify-content:center; width:42px; height:42px; padding:0; border:1px solid rgba(255,255,255,.16); border-radius:13px; color:#e7e8eb; background:rgba(255,255,255,.055); }
.mobile-nav-toggle:hover { background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.28); }
.mobile-nav-toggle:focus-visible { outline:2px solid rgba(255,150,124,.85); outline-offset:2px; }
.mobile-nav-icon { font-size:19px; line-height:1; }
.top-actions { display:flex; gap: 10px; align-items:center; }
.locale-control { display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:0 10px; border:1px solid rgba(255,255,255,.14); border-radius:999px; color:var(--muted); background:rgba(255,255,255,.045); font-size:12px; }
.locale-control select { max-width:88px; border:0; outline:0; background:transparent; color:#e8eaed; cursor:pointer; font-size:12px; }
.locale-control option { color:#16191f; background:#f5f5f5; }
.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; }
.button { border: 1px solid var(--line); background: rgba(255,255,255,.045); border-radius: 999px; padding: 10px 17px; color: #e7e7e4; transition: transform .2s, background .2s, border-color .2s; }
.button:hover { transform: translateY(-1px); background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); }
.button.accent { color: #1a1210; background: var(--accent); border-color: transparent; font-weight: 600; box-shadow: 0 9px 26px rgba(255,125,103,.17); }
.button.accent:hover { background: #ffab96; }

.intentbar { display:flex; justify-content:center; gap: 4px; margin: 2px auto 0; padding: 4px; width: fit-content; max-width: 100%; overflow:auto; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; background: rgba(20,23,30,.34); backdrop-filter: blur(20px) saturate(130%); }
.intentbar a { padding: 9px 16px; font-size: 13px; color: #afb4be; white-space: nowrap; border-radius: 999px; }
.intentbar a:hover, .intentbar a.active { color: #fff; background: rgba(255,255,255,.1); box-shadow: inset 0 -1px var(--accent); }

.hero { text-align:center; padding: 74px 0 34px; }
.eyebrow { color: var(--accent); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; }
.hero h1 { max-width: 860px; margin: 12px auto 12px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif; font-size: clamp(46px, 6vw, 76px); line-height: .98; letter-spacing: -.075em; font-weight: 600; }
.hero h1 span { color: var(--accent); }
.hero p { max-width: 700px; margin: 0 auto; color: #c0c4cb; font-size: 18px; line-height: 1.55; }

.glass { border: 1px solid var(--line); background: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.025) 42%, rgba(255,255,255,.06)); box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.08); backdrop-filter: blur(26px) saturate(132%); -webkit-backdrop-filter: blur(26px) saturate(132%); }
.glass-soft { border: 1px solid var(--line-soft); background: rgba(24,27,34,.48); box-shadow: 0 18px 60px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.045); backdrop-filter: blur(18px) saturate(125%); -webkit-backdrop-filter: blur(18px) saturate(125%); }
.surface { border-radius: var(--radius-lg); }
.composer { width: min(1150px, 100%); margin: 0 auto; padding: 12px; text-align:left; }
.composer-top { display:flex; align-items:center; gap: 8px; padding: 4px 6px 12px; border-bottom: 1px solid var(--line-soft); }
.tab { display:inline-flex; align-items:center; gap: 8px; border: 1px solid transparent; background: transparent; color: #b6bbc5; border-radius: 13px; padding: 11px 16px; font-size: 14px; }
.tab:hover { color: #fff; background: rgba(255,255,255,.06); }
.tab.active { color: #fff; background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.13); box-shadow: inset 0 1px rgba(255,255,255,.12); }
.tab svg, .icon { width: 17px; height: 17px; flex: 0 0 auto; }
.promptbox { min-height: 148px; margin: 12px 0; padding: 19px 20px; border-radius: 18px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(135deg, rgba(10,12,16,.36), rgba(255,255,255,.04)); box-shadow: inset 0 1px rgba(255,255,255,.06); }
.promptbox textarea { width:100%; min-height: 108px; resize: vertical; border: 0; outline: 0; background: transparent; color: #fff; font-size: 17px; line-height: 1.5; }
.promptbox textarea::placeholder { color: #9299a5; }
.composer-bottom { display:flex; align-items:center; gap: 9px; flex-wrap:wrap; }
.composer-bottom > .button.accent { margin-left:auto; }
.control { display:inline-flex; align-items:center; gap: 9px; min-height: 44px; padding: 9px 13px; border-radius: 13px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.055); color: #d9dce0; font-size: 13px; }
.control:hover { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.22); }
.control.grow { flex: 1; }
.control select { appearance:none; border:0; outline:0; background:transparent; min-width: 76px; color: inherit; }
.spacer { flex:1; }
.status { display:inline-flex; align-items:center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(112,229,172,.12); border: 1px solid rgba(112,229,172,.28); color: #b3f0ce; font-size: 12px; }
.status::before { content:""; width: 7px; height: 7px; border-radius:50%; background: var(--green); box-shadow: 0 0 12px rgba(120,230,175,.7); }

.section { margin-top: 70px; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap: 20px; margin-bottom: 18px; }
.section-head h2 { margin:0; font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif; font-size: 25px; letter-spacing: -.045em; }
.section-head p { margin: 0; color: var(--muted); font-size: 14px; }
.link { color:#e3e5e8; font-size: 14px; }
.link:hover { color: var(--accent); }

.model-rail { display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; }
.model-card { display:flex; align-items:center; gap: 10px; padding: 13px; border-radius: 16px; min-width:0; }
.model-card strong { display:block; font-size: 13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.model-card small { display:block; color:var(--faint); font-size: 11px; margin-top: 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.model-logo { width:32px; height:32px; display:grid; place-items:center; border-radius: 11px; color:#101115; background: linear-gradient(135deg, #fae7bf, #ec8e63); font-weight:700; }
.model-card:nth-child(2) .model-logo { background:linear-gradient(135deg,#fff,#b2b8ff); }
.model-card:nth-child(3) .model-logo { background:linear-gradient(135deg,#f2d3ff,#8b67ff); }
.model-card:nth-child(4) .model-logo { background:linear-gradient(135deg,#d9f7e3,#51c7a5); }
.model-card:nth-child(5) .model-logo { background:linear-gradient(135deg,#d7eaff,#65a8fa); }
.model-card:nth-child(6) .model-logo { background:linear-gradient(135deg,#ffe6a1,#f4a44d); }

.gallery { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.gallery.gallery-count-6 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.gallery-card { overflow:hidden; border-radius: 20px; }
.gallery-card img { display:block; width:100%; aspect-ratio: 1.2; object-fit:cover; filter:saturate(.9); }
.gallery-meta { display:flex; justify-content:space-between; gap: 8px; padding: 12px 14px; color:#c8ccd2; font-size: 12px; }
.chip { border-radius:999px; padding: 5px 9px; border:1px solid rgba(255,255,255,.14); color:#b9bec6; background:rgba(255,255,255,.055); }

.feature-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.feature { padding: 24px; border-radius: 20px; }
.feature .feature-icon { width: 42px; height: 42px; display:grid; place-items:center; border:1px solid var(--line); border-radius: 14px; color: var(--accent); margin-bottom: 16px; }
.feature h3 { margin:0 0 8px; font-size:17px; }
.feature p { margin:0; color:var(--muted); line-height:1.55; font-size:14px; }

.generation-result { display:grid; grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr); gap:20px; margin:24px auto 0; padding:14px; border-radius:22px; overflow:hidden; }
.generation-result-media { position:relative; min-height:220px; border-radius:16px; overflow:hidden; background:rgba(0,0,0,.2); }
.generation-result-media img { display:block; width:100%; height:100%; min-height:220px; object-fit:cover; }
.generation-result-body { display:flex; flex-direction:column; justify-content:center; min-width:0; padding:6px 8px 6px 0; }
.generation-result-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.generation-result-head h2 { margin:8px 0 0; font-size:clamp(20px,2.4vw,30px); line-height:1.08; letter-spacing:-.045em; overflow-wrap:anywhere; }
.generation-result-body p { margin:15px 0 0; color:var(--muted); line-height:1.5; font-size:13px; }
.generation-result-meta { display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:14px; color:var(--faint); font-size:11px; }
.generation-result-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:20px; }
.generation-result-actions .button { white-space:nowrap; }
.creation-history-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.creation-history-grid.creation-history-count-1 { grid-template-columns:minmax(0, 1fr); }
.creation-history-grid.creation-history-count-2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.creation-history-card { display:grid; grid-template-columns:88px minmax(0,1fr); gap:11px; padding:9px; border-radius:16px; min-width:0; }
.creation-history-card img { width:88px; height:74px; border-radius:11px; object-fit:cover; }
.creation-history-card > div { display:flex; flex-direction:column; align-items:flex-start; min-width:0; gap:4px; }
.creation-history-card strong { display:block; width:100%; color:#e5e7ea; font-size:12px; line-height:1.35; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.creation-history-card span { color:var(--faint); font-size:11px; }
.creation-history-card .small-button { margin-top:auto; }

/* Product-first homepage blocks. These sections echo a mature creation suite:
   show the output, explain the modes, then give the visitor a reason to trust
   the workspace before asking them to choose a plan. */
.showcase-section { margin-top: 76px; }
.showcase-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:14px; align-items:stretch; }
.showcase-card { overflow:hidden; border-radius:22px; min-width:0; height:100%; display:flex; flex-direction:column; }
.showcase-card.featured { border-color:rgba(255,255,255,.16); }
.showcase-card .media-wrap { height:clamp(280px, 27vw, 390px); aspect-ratio:auto; flex:0 0 auto; }
.showcase-card .media-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
.showcase-caption { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:62px; padding:14px 15px; color:#e6e8eb; font-size:13px; }
.showcase-caption strong { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.showcase-caption .small-button { white-space:nowrap; }
.home-stat-strip { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; }
.home-stat-strip article { min-height:98px; padding:18px 19px; border-radius:18px; display:flex; flex-direction:column; justify-content:space-between; }
.home-stat-strip strong { font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif; font-size:27px; line-height:1; letter-spacing:-.055em; color:#fff; }
.home-stat-strip span { color:var(--muted); font-size:12px; }
.category-showcase-grid { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:12px; }
.category-card { position:relative; display:flex; flex-direction:column; gap:13px; min-width:0; padding:10px; border-radius:21px; transition:transform .22s ease, border-color .22s ease, background .22s ease; }
.category-card:hover { transform:translateY(-4px); border-color:rgba(255,255,255,.23); background-color:rgba(255,255,255,.07); }
.category-card-image { position:relative; overflow:hidden; border-radius:15px; aspect-ratio:1.22; }
.category-card-image img { width:100%; height:100%; display:block; object-fit:cover; filter:saturate(.88); }
.category-card-image::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(4,6,9,.56)); pointer-events:none; }
.category-card-image > span { position:absolute; left:10px; bottom:9px; z-index:1; width:31px; height:31px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.22); border-radius:10px; color:#fff; background:rgba(8,10,14,.48); backdrop-filter:blur(14px); }
.category-card h3 { margin:0 2px 4px; font-size:16px; letter-spacing:-.025em; }
.category-card p { margin:0 2px; color:var(--muted); font-size:12px; line-height:1.45; }
.category-arrow { position:absolute; right:17px; bottom:19px; color:#ccd1d8; opacity:.7; }
.category-arrow .icon { width:15px; height:15px; }
.process-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
.process-step { position:relative; min-height:176px; padding:21px; border-radius:20px; }
.process-number { display:inline-flex; align-items:center; justify-content:center; width:38px; height:26px; border:1px solid rgba(255,255,255,.16); border-radius:999px; color:var(--accent); font:600 11px/1 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif; letter-spacing:.08em; }
.process-step h3 { margin:30px 0 7px; font-size:17px; letter-spacing:-.025em; }
.process-step p { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.testimonials { margin-top:80px; }
.testimonial-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
.testimonial { min-height:190px; padding:22px; border-radius:20px; display:flex; flex-direction:column; }
.quote-mark { color:var(--accent); font-family:Georgia,serif; font-size:38px; line-height:.8; margin-bottom:14px; }
.testimonial p { margin:0 0 20px; color:#dfe2e6; line-height:1.55; font-size:14px; }
.testimonial strong { margin-top:auto; font-size:13px; }
.testimonial span { margin-top:4px; color:var(--faint); font-size:12px; }
.noscript-fallback { width:min(760px, calc(100% - 36px)); margin:100px auto; padding:34px; border:1px solid var(--line); border-radius:26px; background:rgba(20,24,30,.78); box-shadow:var(--shadow); }
.noscript-fallback h1 { margin:10px 0; font:600 clamp(38px,7vw,68px)/1 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif; letter-spacing:-.06em; }
.noscript-fallback p { color:var(--muted); line-height:1.6; }
.noscript-fallback nav { display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.noscript-fallback nav a { padding:10px 13px; border:1px solid var(--line); border-radius:12px; color:#e4e6e9; background:rgba(255,255,255,.06); }

.faq { display:grid; grid-template-columns: repeat(2,1fr); gap: 10px; align-items:start; }
.faq details { padding: 15px 18px; border-radius: 15px; }
.faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap: 18px; color:#e5e7ea; font-size:14px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--muted); }
.faq details[open] summary::after { content:"−"; }
.faq p { margin: 12px 0 0; color:var(--muted); font-size:13px; line-height:1.55; }

.page { padding-bottom: 20px; }
.page-hero { padding: 56px 0 26px; text-align:center; }
.breadcrumbs { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:18px; color:var(--faint); font-size:12px; line-height:1.4; }
.breadcrumbs a { color:var(--muted); }
.breadcrumbs a:hover { color:var(--text); }
.breadcrumbs span[aria-current="page"] { color:#d8dbe0; max-width:42vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.page-hero h1 { margin: 10px auto 10px; max-width: 940px; font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif; font-size: clamp(38px,5vw,66px); line-height: 1.02; letter-spacing: -.065em; }
.page-hero p { max-width: 720px; margin: 0 auto; color: var(--muted); font-size:16px; line-height:1.55; }
.page-hero .meta { display:inline-flex; align-items:center; gap:8px; margin-top: 14px; font-size:12px; color:var(--amber); border:1px solid rgba(246,199,109,.35); border-radius:999px; padding:7px 11px; background:rgba(246,199,109,.1); }

.two-col { display:grid; grid-template-columns: 1.45fr .8fr; gap: 16px; }
.panel { padding: 22px; border-radius: 22px; }
.panel h2 { margin:0 0 13px; font-size:20px; letter-spacing:-.03em; }
.panel h3 { margin:0 0 7px; font-size:16px; }
.panel p { color:var(--muted); margin:0; line-height:1.55; font-size:14px; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; min-width: 650px; }
th { text-align:left; color:#9fa6b1; font-weight:500; padding: 12px 10px; border-bottom:1px solid var(--line); }
td { padding: 13px 10px; border-bottom:1px solid var(--line-soft); color:#dcdfe3; }
tr:last-child td { border-bottom:0; }
.rank { width:32px; height:32px; display:inline-grid; place-items:center; border-radius:10px; background:rgba(255,255,255,.08); color:#fff; margin-right:8px; }
.bar { height:7px; width:100px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; }
.bar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),#ffd0a0); }

.filter-row { display:flex; gap: 10px; flex-wrap:wrap; align-items:center; }
.filter-row .filter { border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); border-radius:999px; padding:10px 14px; color:#c3c8cf; font-size:13px; }
.filter-row .filter.active, .filter-row .filter:hover { background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.24); }
.search { min-width: 260px; flex:1; }
.search input { width:100%; border:0; outline:0; background:transparent; color:#fff; }
.search input::placeholder { color:#89909c; }

.compare-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.compare-card { padding: 18px; border-radius: 22px; }
.compare-head { display:flex; align-items:center; justify-content:space-between; gap: 12px; }
.compare-head strong { font-size:18px; }
.compare-head small { color:var(--muted); }
.compare-media { margin: 16px 0; display:grid; grid-template-columns:1fr 1fr; gap: 8px; }
.compare-media img { width:100%; aspect-ratio: 1.32; object-fit:cover; border-radius:14px; }
.verdicts { display:flex; flex-wrap:wrap; gap:7px; }
.verdict { padding:7px 10px; border:1px solid rgba(255,255,255,.12); border-radius:999px; color:#cbd0d7; font-size:12px; background:rgba(255,255,255,.05); }

.cards { display:grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.alt-card { overflow:hidden; border-radius:20px; }
.alt-card img { width:100%; aspect-ratio:1.45; object-fit:cover; }
.alt-body { padding:16px; }
.alt-body h3 { margin:0 0 5px; font-size:17px; }
.alt-body p { margin:0 0 12px; color:var(--muted); font-size:13px; line-height:1.45; }
.alt-meta { display:flex; justify-content:space-between; gap:8px; color:#afb5be; font-size:12px; margin-bottom: 13px; }

.steps { display:grid; grid-template-columns: repeat(3,1fr); gap:12px; }
.step { padding:18px; border-radius:18px; }
.step-number { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.1); color:#fff; margin-bottom:15px; }
.step h3 { margin:0 0 7px; font-size:16px; }
.step p { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }

.policy-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:12px; }
.policy { padding:20px; border-radius:18px; }
.policy .policy-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:14px; background:rgba(255,255,255,.08); color:var(--green); margin-bottom:14px; }
.policy h3 { margin:0 0 7px; }
.policy p { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }

.prompt-layout { display:grid; grid-template-columns: 1.55fr .8fr; gap:16px; align-items:start; }
.prompt-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:12px; }
.prompt-card { overflow:hidden; border-radius:18px; }
.prompt-card img { width:100%; aspect-ratio:1.1; object-fit:cover; display:block; }
.prompt-card-body { padding:11px 12px; }
.prompt-card-body p { margin:0 0 10px; color:#d9dce1; font-size:12px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.prompt-actions { display:flex; gap:7px; }
.small-button { border:1px solid var(--line); background:rgba(255,255,255,.055); border-radius:10px; padding:7px 9px; font-size:11px; color:#c9cdd4; }
.small-button:hover { background:rgba(255,255,255,.12); color:#fff; }
.drawer { position:sticky; top:92px; padding:18px; border-radius:22px; }
.drawer img { width:100%; border-radius:14px; aspect-ratio:1.15; object-fit:cover; }
.drawer h3 { margin:14px 0 7px; }
.drawer .prompt-copy { padding:12px; margin:12px 0; border-radius:13px; background:rgba(0,0,0,.17); color:#c7ccd3; font-size:12px; line-height:1.5; }

.chat-layout { display:grid; grid-template-columns: 1fr 270px; gap: 14px; }
.chat { min-height: 535px; padding:18px; border-radius:24px; display:flex; flex-direction:column; }
.message { max-width: 73%; padding:14px 16px; border-radius:18px; color:#e9ebed; line-height:1.55; font-size:14px; margin-bottom:12px; }
.message.assistant { align-self:flex-start; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); }
.message.user { align-self:flex-end; background:rgba(255,150,124,.16); border:1px solid rgba(255,150,124,.22); }
.chat-spacer { flex:1; }
.chat-input { display:flex; align-items:center; gap:8px; padding:8px; border:1px solid var(--line); border-radius:16px; background:rgba(5,7,9,.2); }
.chat-input input { flex:1; border:0; outline:0; background:transparent; padding:8px; }
.context { padding:18px; border-radius:22px; }
.context h3 { margin:0 0 16px; }
.context-row { display:flex; gap:10px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line-soft); color:#cdd1d6; font-size:13px; }
.context-row:last-child { border-bottom:0; }
.context-icon { width:30px; height:30px; display:grid; place-items:center; border-radius:10px; background:rgba(255,255,255,.08); }

.footer { position:relative; margin-top: 104px; padding:34px 0 0; border-top:1px solid var(--line-soft); color:var(--faint); font-size:12px; }
.static-renderer-footer { width:min(1220px, calc(100% - 36px)); margin-left:auto; margin-right:auto; }
.footer-main { display:grid; grid-template-columns:minmax(190px,.8fr) minmax(0,2.8fr); gap:56px; padding-bottom:38px; }
.footer-brand-block { min-width:0; }
.footer-brand { display:inline-flex; font-size:18px; color:#edf0f3; }
.footer-brand-block p { max-width:250px; margin:16px 0 18px; color:var(--muted); font-size:13px; line-height:1.55; }
.footer-status { display:flex; align-items:center; gap:7px; flex-wrap:wrap; color:var(--muted); font-size:11px; }
.footer-status .status-dot { width:7px; height:7px; margin:0; }
.footer-status a { color:#c9f1d9; margin-left:3px; }
.footer-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:28px; }
.footer-column { display:flex; flex-direction:column; align-items:flex-start; gap:10px; min-width:0; }
.footer-column h3 { margin:0 0 5px; color:#f0f1f2; font-size:12px; font-weight:600; letter-spacing:.01em; }
.footer-column a { color:var(--muted); line-height:1.35; transition:color .2s; }
.footer-column a:hover, .footer-status a:hover, .footer-links a:hover { color:#fff; }
.footer-column p { margin:0 0 5px; color:var(--muted); line-height:1.5; }
.footer-badge { display:inline-flex; margin-left:4px; padding:2px 5px; border:1px solid rgba(255,255,255,.12); border-radius:999px; color:var(--faint); font-size:9px; }
.app-badge { display:flex; align-items:center; gap:9px; width:100%; max-width:156px; padding:9px 11px; border:1px solid rgba(255,255,255,.12); border-radius:12px; background:rgba(255,255,255,.045); color:#e7e9ed !important; }
.app-badge:hover { border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.09); }
.app-badge-icon { display:grid; place-items:center; width:23px; height:23px; border-radius:7px; background:rgba(255,255,255,.1); color:#fff; font-size:14px; }
.app-badge span:last-child { display:flex; flex-direction:column; gap:2px; line-height:1.15; }
.app-badge small { color:var(--faint); font-size:9px; }
.footer-follow-button { margin-top:2px; padding:8px 11px; font-size:11px; }
.footer-socials { display:flex; flex-wrap:wrap; gap:10px; margin-top:3px; }
.footer-socials a { display:grid; place-items:center; width:30px; height:30px; border:1px solid rgba(255,255,255,.12); border-radius:50%; background:rgba(255,255,255,.045); font-size:10px; color:#c8cdd5; }
.footer-social-placeholder { display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:0 9px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(255,255,255,.035); color:var(--faint); font-size:10px; cursor:default; user-select:none; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 0 4px; border-top:1px solid var(--line-soft); }
.footer-links { display:flex; gap:18px; flex-wrap:wrap; }
.support-float { position:fixed; right:22px; bottom:24px; z-index:18; display:flex; flex-direction:column; gap:8px; }
.support-float-button { width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.18); border-radius:14px; color:#f4f5f6; background:rgba(22,26,33,.62); box-shadow:0 14px 34px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.12); backdrop-filter:blur(18px) saturate(135%); -webkit-backdrop-filter:blur(18px) saturate(135%); font-size:17px; transition:transform .2s, background .2s, border-color .2s; }
.support-float-button:hover { transform:translateY(-2px); border-color:rgba(255,255,255,.32); background:rgba(35,40,50,.78); }
.support-backdrop { position:fixed; inset:0; z-index:40; display:grid; place-items:end end; padding:24px 76px 24px 24px; background:rgba(2,4,8,.28); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s, visibility .2s; }
.support-backdrop.open { opacity:1; visibility:visible; pointer-events:auto; }
.support-panel { width:min(420px, calc(100vw - 32px)); max-height:min(700px, calc(100vh - 48px)); overflow:auto; padding:22px; border-radius:24px; transform:translateY(12px); transition:transform .2s; }
.support-backdrop.open .support-panel { transform:none; }
.support-panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.support-panel-head h2 { margin:7px 0 0; font-size:24px; letter-spacing:-.04em; }
.support-tabs { display:flex; gap:7px; margin:22px 0 16px; }
.support-tabs .filter { flex:1; border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:9px 12px; color:#c3c8cf; background:rgba(255,255,255,.05); font-size:12px; }
.support-tabs .filter.active { border-color:rgba(255,255,255,.24); color:#fff; background:rgba(255,255,255,.12); }
.support-view p { margin:0 0 14px; color:var(--muted); font-size:13px; line-height:1.55; }
.support-quick-links { display:grid; gap:8px; margin-bottom:18px; }
.support-quick-link { padding:12px 13px; border:1px solid var(--line-soft); border-radius:13px; color:#dfe2e6; background:rgba(255,255,255,.045); text-align:left; font-size:13px; }
.support-quick-link:hover { border-color:var(--line); background:rgba(255,255,255,.085); }
.support-field { display:grid; gap:7px; margin-top:13px; color:#cfd3d9; font-size:12px; }
.support-field input, .support-field select, .support-field textarea { width:100%; padding:10px 11px; border:1px solid rgba(255,255,255,.13); border-radius:12px; outline:0; background:rgba(7,9,13,.3); color:#f1f2f3; font-size:13px; }
.support-field textarea { resize:vertical; min-height:86px; }
.support-field input:focus, .support-field select:focus, .support-field textarea:focus { border-color:rgba(255,150,124,.58); box-shadow:0 0 0 3px rgba(255,150,124,.1); }
.support-panel-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
.support-answer { min-height:18px; margin-top:14px; color:#b8efce; font-size:12px; line-height:1.45; }

.toast { position:fixed; left:50%; bottom:26px; transform:translate(-50%, 20px); opacity:0; pointer-events:none; transition:.25s; z-index:30; padding:12px 16px; border-radius:999px; background:rgba(20,24,30,.86); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(18px); font-size:13px; box-shadow:0 18px 50px rgba(0,0,0,.35); }
.toast.show { transform:translate(-50%,0); opacity:1; }

/* Intent-specific content blocks keep utility pages distinct while sharing
   the same quiet glass material. */
.stat-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
.stat-card { min-height:112px; padding:20px; border-radius:18px; display:flex; flex-direction:column; justify-content:space-between; }
.stat-value { font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif; font-size:32px; letter-spacing:-.06em; color:#fff; }
.stat-label { color:var(--muted); font-size:12px; }
.pricing-cards .plan-card { position:relative; min-height:224px; display:flex; flex-direction:column; align-items:flex-start; gap:9px; }
.plan-card.featured { border-color:rgba(255,150,124,.42); background:linear-gradient(135deg, rgba(255,150,124,.14), rgba(255,255,255,.035) 45%, rgba(255,255,255,.06)); }
.plan-card .button { margin-top:auto; }
.plan-price { font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif; font-size:34px; letter-spacing:-.06em; }
.plan-badge { color:#ffd1c5; border-color:rgba(255,150,124,.35); background:rgba(255,150,124,.12); }
.code-block { margin:16px 0; padding:16px; border:1px solid rgba(255,255,255,.10); border-radius:14px; overflow:auto; color:#d9e6ff; background:rgba(4,7,11,.42); font:12px/1.65 "SFMono-Regular",Consolas,monospace; white-space:pre-wrap; }
.endpoint-list { display:grid; gap:0; }
.endpoint-list > div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--line-soft); }
.endpoint-list > div:last-child { border-bottom:0; }
.endpoint-list code { color:#ffd1c5; font:12px "SFMono-Regular",Consolas,monospace; }
.endpoint-list span { color:var(--muted); font-size:12px; text-align:right; }
.guide-steps { grid-template-columns:repeat(4, minmax(0,1fr)); }

@media (max-width: 1100px) {
  .nav { gap:0; margin-left: 10px; }
  .nav a, .nav button { padding:8px 8px; font-size:13px; }
  .model-rail { grid-template-columns: repeat(3,1fr); }
  .cards { grid-template-columns: repeat(2,1fr); }
  .prompt-layout { grid-template-columns:1fr; }
  .drawer { position:static; }
}
@media (max-width: 780px) {
  .site-shell { width: min(100% - 28px, 620px); }
  .topbar { flex-wrap:wrap; gap:12px; }
  .mobile-nav-toggle { display:inline-flex; }
  .nav { display:none; order:3; width:100%; overflow:auto; margin:0; padding-bottom:3px; }
  .topbar.mobile-nav-open .nav { display:flex; flex-wrap:wrap; overflow:visible; }
  .nav a, .nav button { white-space:nowrap; }
  .intentbar { justify-content:flex-start; width:100%; border-radius:16px; }
  .hero { padding-top:48px; }
  .hero h1 { font-size:48px; }
  .hero p { font-size:16px; }
  .page-hero { padding-top:40px; }
  .page-hero h1 { font-size:42px; }
  .composer { padding:9px; }
  .composer-top { overflow:auto; }
  .composer-bottom .spacer { display:none; }
  .composer-bottom .button.accent { width:100%; }
  .model-rail, .gallery, .feature-grid, .faq, .two-col, .compare-grid, .cards, .steps, .policy-grid, .chat-layout { grid-template-columns:1fr; }
  .section { margin-top: 52px; }
  .section-head { align-items:start; flex-direction:column; gap:8px; }
  .prompt-grid { grid-template-columns:repeat(2,1fr); }
  .footer { flex-direction:column; }
}

/* Liquid Glass refinement
   Keep the scene visible through each surface, then add a quiet edge highlight
   and a separate solid action color. This follows the reference material's
   hierarchy instead of turning every control into a glossy capsule. */
:root {
  --glass-edge-hi: rgba(255,255,255,.20);
  --glass-edge-lo: rgba(255,255,255,.075);
  --glass-shadow: 0 20px 60px rgba(0,0,0,.22);
}

.topbar {
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  backdrop-filter: blur(20px) saturate(125%);
}

.glass,
.glass-soft {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  -webkit-backdrop-filter: blur(24px) saturate(138%);
  backdrop-filter: blur(24px) saturate(138%);
}

.glass {
  border-color: var(--glass-edge-lo);
  border-top-color: var(--glass-edge-hi);
  border-bottom-color: rgba(255,255,255,.06);
  background:
    linear-gradient(120deg, rgba(255,255,255,.105), rgba(255,255,255,.028) 38%, rgba(255,255,255,.065)),
    rgba(18,21,28,.48);
  box-shadow: var(--glass-shadow), inset 0 1px rgba(255,255,255,.11), inset 0 -1px rgba(0,0,0,.18);
}

.glass-soft {
  border-color: rgba(255,255,255,.095);
  border-top-color: rgba(255,255,255,.15);
  background:
    linear-gradient(120deg, rgba(255,255,255,.07), rgba(255,255,255,.018) 44%, rgba(255,255,255,.04)),
    rgba(21,24,31,.40);
  box-shadow: 0 16px 48px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.065);
}

/* The inner border is intentionally low contrast; the material is defined by
   the background seen through it and by blur, not by a chrome outline. */
.composer {
  max-width: 1220px;
  padding: 15px;
  border-radius: 26px;
}
.promptbox {
  margin: 14px 0;
  min-height: 154px;
  border-color: rgba(255,255,255,.105);
  background:
    linear-gradient(135deg, rgba(6,8,12,.28), rgba(255,255,255,.035) 52%, rgba(6,8,12,.16)),
    rgba(10,12,16,.24);
  -webkit-backdrop-filter: blur(21px) saturate(125%);
  backdrop-filter: blur(21px) saturate(125%);
  box-shadow: inset 0 1px rgba(255,255,255,.075), inset 0 -1px rgba(0,0,0,.16);
}
.promptbox textarea { font-size: 16px; }
.promptbox textarea:focus { outline: none; }

.control,
.small-button,
.filter {
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.control:focus-visible,
.small-button:focus-visible,
.filter:focus-visible,
.button:focus-visible,
.tab:focus-visible,
.nav a:focus-visible,
.intentbar a:focus-visible {
  outline: 2px solid rgba(255,150,124,.85);
  outline-offset: 2px;
}

.intentbar {
  scrollbar-width: none;
  -webkit-backdrop-filter: blur(22px) saturate(138%);
  backdrop-filter: blur(22px) saturate(138%);
}
.intentbar::-webkit-scrollbar { display: none; }

.hero h1 {
  max-width: 900px;
  font-size: clamp(42px, 5.2vw, 70px);
  line-height: 1.01;
}
.page-hero h1 {
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.04;
}
.hero p,
.page-hero p { max-width: 680px; }

/* Gallery badges were emitted by app.js but had no positioning rules, leaving
   them in the document flow below each image. */
.media-wrap { position: relative; overflow: hidden; background: rgba(0,0,0,.14); }
.media-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.12), transparent 40%, rgba(0,0,0,.2));
}
.media-badge {
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  color: #f4f5f6;
  background: rgba(9,11,15,.44);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  font-size: 11px;
  line-height: 1;
}
.media-wrap img { position: relative; z-index: 0; }

/* `.table-wrap` also carries the glass class on ranking/comparison pages;
   restore horizontal scrolling after the material's clipping edge. */
.table-wrap { overflow: auto; }

.muted { color: var(--muted); }
.benchmark-note { margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

.status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.status-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 86px;
  padding: 16px 18px;
  border-radius: 18px;
}
.status-card strong { display: block; font-size: 14px; }
.status-card p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--faint); }
.status-dot.online { background: var(--green); box-shadow: 0 0 14px rgba(120,230,175,.7); }
.status-label { color: #b7efd0; font-size: 11px; white-space: nowrap; }

.button.accent {
  background: linear-gradient(180deg, #ffa78f, #ff8d76);
  box-shadow: 0 10px 28px rgba(255,125,103,.15), inset 0 1px rgba(255,255,255,.28);
}
.button.accent:hover { box-shadow: 0 12px 30px rgba(255,125,103,.22), inset 0 1px rgba(255,255,255,.3); }

@media (max-width: 960px) {
  .site-shell { width: min(100% - 36px, 860px); }
  .topbar { flex-wrap: wrap; gap: 10px; }
  .brand { margin-right: auto; }
  .nav { order: 3; width: 100%; margin: 0; overflow-x: auto; justify-content: flex-start; }
  .nav a { white-space: nowrap; }
  .top-actions { margin-left: auto; }
  .model-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery.gallery-count-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .guide-steps { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .showcase-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
  .showcase-card .media-wrap { height:clamp(250px, 30vw, 330px); }
  .showcase-card.featured { transform:none; }
  /* Keep five category cards visually balanced at the 3-column breakpoint:
     the second row is a centered pair instead of two cards stranded at the
     left edge. Six tracks preserve the same card width as the first row. */
  .category-showcase-grid { grid-template-columns:repeat(6, minmax(0, 1fr)); }
  .category-showcase-grid .category-card { grid-column:span 2; }
  .category-showcase-grid .category-card:nth-child(4) { grid-column:2 / span 2; margin-top:2px; }
  .category-showcase-grid .category-card:nth-child(5) { grid-column:4 / span 2; margin-top:2px; }
  .process-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
  .testimonial-grid { grid-template-columns:1fr 1fr; }
  .testimonial-grid .testimonial:last-child { grid-column:1 / -1; }
  .footer-main { grid-template-columns:1fr; gap:30px; }
  /* Five footer columns otherwise become a stranded 3+2 grid at this
     width. Six tracks keep the second row centered while preserving equal
     column widths for the first row. */
  .footer-grid { grid-template-columns:repeat(6, minmax(0,1fr)); gap:24px 18px; }
  .footer-grid .footer-column { grid-column:span 2; }
  .footer-grid .footer-column:nth-child(4) { grid-column:2 / span 2; }
  .footer-grid .footer-column:nth-child(5) { grid-column:4 / span 2; }
}

@media (max-width: 620px) {
  .site-shell { width: calc(100% - 28px); padding-bottom: 56px; }
  .topbar { padding-top: 14px; }
  .brand { font-size: 18px; }
  .brand-mark { width: 22px; height: 22px; }
  .top-actions .button:not(.accent) { display: none; }
  .nav a { padding: 8px 10px; font-size: 12px; }
  .intentbar { margin-top: 4px; justify-content: flex-start; border-radius: 15px; }
  .intentbar a { padding: 8px 12px; font-size: 12px; }
  .hero { padding-top: 44px; }
  .hero h1 { font-size: clamp(38px, 12vw, 54px); letter-spacing: -.065em; }
  .page-hero { padding-top: 34px; }
  .page-hero h1 { font-size: clamp(34px, 10vw, 48px); }
  .hero p, .page-hero p { font-size: 15px; }
  .composer { padding: 10px; border-radius: 22px; }
  .composer-top { padding-left: 2px; padding-right: 2px; }
  .tab { padding: 9px 11px; font-size: 12px; }
  .promptbox { min-height: 132px; padding: 15px; }
  .promptbox textarea { min-height: 92px; font-size: 15px; }
  .composer-bottom { gap: 7px; }
  .composer-bottom .control { flex: 1 1 calc(50% - 7px); justify-content: center; }
  .composer-bottom .button.accent { width: 100%; min-height: 46px; }
  .composer-bottom > .button.accent { margin-left:0; }
  .model-rail, .gallery { grid-template-columns: 1fr 1fr; gap: 9px; }
  .gallery.gallery-count-6 { grid-template-columns: 1fr 1fr; }
  .stat-grid, .guide-steps { grid-template-columns:1fr 1fr; }
  .model-card { padding: 10px; gap: 8px; }
  .model-logo { width: 28px; height: 28px; border-radius: 9px; }
  .gallery-card { border-radius: 16px; }
  .gallery-meta { padding: 9px 10px; font-size: 11px; }
  .gallery-meta .small-button { padding: 6px 8px; }
  .feature { padding: 19px; }
  .status-grid { grid-template-columns: 1fr; }
  .status-card { min-height: 74px; padding: 14px 15px; }
  .footer { margin-top: 64px; }
  .footer-main { padding-bottom:28px; }
  .footer-grid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px 16px; }
  .footer-grid .footer-column { grid-column:auto; }
  .footer-column.footer-follow { grid-column:1 / -1; }
  .footer-bottom { align-items:flex-start; flex-direction:column; gap:12px; }
  .support-float { right:14px; bottom:14px; gap:6px; }
  .support-float-button { width:38px; height:38px; border-radius:12px; }
  .support-backdrop { place-items:end center; padding:14px; }
  .support-panel { width:100%; max-height:calc(100vh - 28px); padding:18px; border-radius:20px; }
  .showcase-grid { grid-template-columns:1fr; }
  .showcase-card .media-wrap { height:auto; aspect-ratio:1.16; }
  .showcase-card.featured { transform:none; }
  .category-showcase-grid, .testimonial-grid { grid-template-columns:1fr 1fr; }
  .category-showcase-grid .category-card { grid-column:auto; }
  .category-showcase-grid .category-card:nth-child(5) { grid-column:1 / -1; width:min(100%, 260px); justify-self:center; }
  .process-grid { grid-template-columns:1fr; }
  .testimonial-grid .testimonial:last-child { grid-column:auto; }
  .home-stat-strip { grid-template-columns:1fr 1fr; }
  .generation-result { grid-template-columns:1fr; gap:12px; padding:10px; }
  .generation-result-media, .generation-result-media img { min-height:190px; }
  .generation-result-body { padding:4px 4px 7px; }
  .generation-result-head { flex-direction:column; gap:9px; }
  .generation-result-actions { align-items:stretch; }
  .generation-result-actions .button, .generation-result-actions .small-button { flex:1 1 calc(50% - 8px); text-align:center; }
  .creation-history-grid { grid-template-columns:1fr; }
}

@media (max-width: 430px) {
  .category-showcase-grid, .testimonial-grid, .home-stat-strip { grid-template-columns:1fr; }
  .category-showcase-grid .category-card:nth-child(5) { grid-column:auto; width:auto; }
}

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

.status-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.status-card { display:flex; align-items:flex-start; gap:12px; padding:18px; border-radius:18px; }
.status-card strong { display:block; font-size:15px; }
.status-card p { margin:5px 0 0; color:var(--muted); font-size:12px; line-height:1.45; }
.status-dot { flex:0 0 auto; width:10px; height:10px; margin-top:4px; border-radius:50%; background:var(--faint); box-shadow:none; }
.status-dot.online { background:var(--green); box-shadow:0 0 14px rgba(120,230,175,.65); }
.status-label { margin-left:auto; color:#b3f0ce; font-size:11px; white-space:nowrap; }
@media (max-width: 960px) { .status-grid { grid-template-columns:1fr; } }

.support-ticket-history { margin-top:18px; padding-top:14px; border-top:1px solid var(--line-soft); }
.support-ticket-history h3 { margin:0 0 9px; font-size:13px; }
.support-ticket-history p { margin:0; color:var(--faint); font-size:12px; line-height:1.5; }
.support-ticket-row { display:grid; grid-template-columns:auto 1fr; gap:4px 8px; width:100%; padding:9px 0; border:0; border-bottom:1px solid var(--line-soft); color:inherit; background:transparent; text-align:left; cursor:pointer; }
.support-ticket-row:last-child { border-bottom:0; }
.support-ticket-row:hover, .support-ticket-row:focus-visible { color:var(--text); background:rgba(255,255,255,.045); outline:0; }
.support-ticket-row strong { font:12px "SFMono-Regular", Consolas, monospace; color:#ffd1c5; }
.support-ticket-row span { color:#cfd3d9; font-size:12px; }
.support-ticket-row small { grid-column:2; color:var(--faint); font-size:11px; }

/* Intent-led SEO navigation: grouped links keep discovery useful without crowding the primary nav. */
.seo-cluster { margin-top: 82px; }
.seo-cluster-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.seo-cluster-group { padding: 18px; border: 1px solid rgba(255,255,255,.10); border-radius: 20px; background: rgba(17,20,27,.28); backdrop-filter: blur(18px) saturate(120%); }
.seo-cluster-group h3 { margin: 0 0 10px; font-size: 13px; color: var(--faint); letter-spacing: .02em; text-transform: uppercase; }
.seo-cluster-group ul, .more-directory ul { list-style: none; padding: 0; margin: 0; }
.seo-cluster-group li + li, .more-directory li + li { margin-top: 2px; }
.seo-cluster-group a, .more-directory li a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 9px; color: var(--muted); border-radius: 10px; font-size: 13px; }
.seo-cluster-group a:hover, .seo-cluster-group a.active, .more-directory li a:hover { color: var(--text); background: rgba(255,255,255,.07); }
.seo-cluster-group a .icon, .more-directory li a .icon { width: 14px; height: 14px; opacity: .6; }
.more-directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.more-directory .panel { margin: 0; }
.more-directory h2 { margin: 0 0 14px; font-size: 21px; }
.feature-list { margin: 0; padding-left: 20px; color: var(--muted); line-height: 1.8; }
.intent-map-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.intent-map-grid article { padding:18px; border-radius:20px; }
.intent-map-grid h3 { margin:0 0 10px; font-size:16px; }
.intent-map-grid ul { list-style:none; padding:0; margin:0; }
.intent-map-grid li + li { margin-top:3px; }
.intent-map-grid a { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 9px; color:var(--muted); border-radius:10px; font-size:13px; }
.intent-map-grid a:hover { color:var(--text); background:rgba(255,255,255,.07); }
.intent-map-grid a .icon { width:14px; height:14px; opacity:.6; }
@media (max-width: 960px) { .seo-cluster-grid { grid-template-columns: 1fr 1fr; } .more-directory { grid-template-columns: 1fr 1fr; } }
@media (max-width: 960px) { .intent-map-grid { grid-template-columns:1fr 1fr; } }
@media (max-width: 620px) { .seo-cluster { margin-top: 54px; } .seo-cluster-grid, .more-directory, .intent-map-grid { grid-template-columns: 1fr; } .seo-cluster-group { padding: 15px; } }

/* Build-time document content: visible to crawlers and no-JS visitors, then
   replaced by the interactive app after app.js has initialized. */
.static-seo-shell { max-width: 1220px; margin: 0 auto; padding: 96px 0 36px; }
.static-seo-inner { max-width: 980px; margin: 0 auto; }
.static-seo-shell h1 { max-width: 900px; margin: 12px 0 14px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif; font-size: clamp(42px, 6vw, 78px); line-height: .98; letter-spacing: -.065em; }
.static-seo-lede { max-width: 680px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.static-seo-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(260px,.85fr); gap: 14px; margin-top: 36px; }
.static-seo-grid article { padding: 22px; border-radius: 22px; }
.static-seo-grid h2 { margin: 0 0 10px; font-size: 20px; letter-spacing: -.035em; }
.static-seo-grid p { margin: 0; color: var(--muted); line-height: 1.65; }
.static-seo-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 20px; }
.static-seo-links { list-style: none; padding: 0; margin: 0; }
.static-seo-links li + li { margin-top: 4px; }
.static-seo-links a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 11px; border-radius: 11px; color: var(--muted); }
.static-seo-links a:hover { color: var(--text); background: rgba(255,255,255,.07); }
.static-seo-links a span { color: var(--faint); }
.static-seo-note { margin: 22px 0 0; color: var(--faint); font-size: 12px; }
.static-seo-outline { margin-top: 14px; padding: 22px; border-radius: 22px; }
.static-seo-outline h2 { margin: 0 0 12px; font-size: 20px; letter-spacing: -.035em; }
.static-seo-outline ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; list-style: none; padding: 0; margin: 0; }
.static-seo-outline li { padding: 12px 13px; border: 1px solid var(--line-soft); border-radius: 14px; color: var(--muted); line-height: 1.55; }
html.js-ready .static-seo-shell { display: none; }
@media (max-width: 700px) {
  .static-seo-shell { padding: 58px 0 26px; }
  .static-seo-grid { grid-template-columns: 1fr; }
  .static-seo-shell h1 { font-size: clamp(38px, 12vw, 58px); }
  .static-seo-outline ul { grid-template-columns: 1fr; }
}

/* Server-rendered representative bodies. app.js replaces this fragment once
   JavaScript starts, while no-JS visitors and crawlers get the same page job,
   controls and related links in a readable layout. */
.static-body { width: min(1220px, calc(100% - 36px)); margin: 0 auto; padding: 112px 0 72px; }
.static-body-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 34px; }
.static-body-header h1 { max-width: 820px; margin: 10px 0 12px; font: 600 clamp(42px, 6vw, 76px)/.98 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif; letter-spacing: -.065em; }
.static-body-description { max-width: 720px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.static-body-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; max-width: 430px; }
.static-body-nav a { padding: 9px 12px; border: 1px solid var(--line-soft); border-radius: 999px; color: var(--muted); font-size: 12px; }
.static-body-nav a:hover { color: var(--text); background: rgba(255,255,255,.07); }
.static-seo-nav { width: min(1220px, calc(100% - 36px)); max-width: none; margin: 18px auto 0; justify-content: flex-end; }
.static-generator-panel { margin: 22px 0 34px; padding: 20px; border-radius: 26px; }
.static-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.static-panel-mode { color: var(--faint); font-size: 12px; }
.static-generator-form { display: grid; gap: 13px; }
.static-field { display: grid; gap: 7px; color: var(--faint); font-size: 12px; }
.static-field textarea, .static-field select { width: 100%; border: 1px solid var(--line-soft); border-radius: 14px; background: rgba(7,10,15,.44); color: var(--text); padding: 12px 13px; outline: 0; }
.static-field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.static-field textarea:focus, .static-field select:focus { border-color: rgba(255,151,132,.7); box-shadow: 0 0 0 3px rgba(255,125,103,.12); }
.static-form-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.static-form-controls .button { min-height: 44px; white-space: nowrap; }
.static-form-note { margin: 2px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.static-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.static-chip { padding: 7px 10px; border: 1px solid var(--line-soft); border-radius: 999px; color: var(--faint); font-size: 11px; }
.static-section { margin-top: 34px; }
.static-section > h2, .static-related h2, .static-faq h2 { margin: 7px 0 10px; font: 600 clamp(24px, 3vw, 36px)/1.05 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif; letter-spacing: -.045em; }
.static-section > p, .static-related > p { max-width: 760px; color: var(--muted); line-height: 1.65; }
.section-kicker, .eyebrow { color: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.static-card-grid, .static-link-grid, .static-plan-grid, .static-metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.static-card, .static-link-card, .static-plan, .static-metric { padding: 18px; border-radius: 20px; }
.static-card-media { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; margin: 12px 0 14px; border: 1px solid rgba(255,255,255,.12); }
.static-step-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0 20px; }
.static-step { min-height: 132px; padding: 18px; border-radius: 20px; }
.static-step h3 { margin: 22px 0 7px; font-size: 16px; }
.static-step p { margin: 0; color: var(--muted); line-height: 1.5; font-size: 13px; }
.static-card-index { color: var(--accent); font: 600 12px "SFMono-Regular", Consolas, monospace; }
.static-card h3, .static-link-card h3, .static-plan h3 { margin: 24px 0 7px; font-size: 17px; }
.static-card p, .static-link-card p, .static-plan p { margin: 0; color: var(--muted); line-height: 1.5; font-size: 13px; }
.text-link { display: inline-flex; margin-top: 18px; color: #ffd0c4; font-size: 12px; }
.static-table-wrap { overflow-x: auto; margin-top: 18px; border: 1px solid var(--line-soft); border-radius: 18px; }
.static-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.static-table th, .static-table td { padding: 13px 15px; border-bottom: 1px solid var(--line-soft); text-align: left; color: var(--muted); font-size: 13px; }
.static-table th { color: var(--text); font-weight: 600; }
.static-table tr:last-child th, .static-table tr:last-child td { border-bottom: 0; }
.static-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 18px 0; }
.static-metric { display: grid; gap: 5px; }
.static-metric strong { font: 600 28px/1 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif; }
.static-metric span { color: var(--faint); font-size: 12px; }
.static-price { margin: 0 0 9px !important; }
.static-price strong { font: 600 32px/1 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif; color: var(--text); }
.static-status-card { display: flex; align-items: center; gap: 10px; width: fit-content; margin: 18px 0; padding: 13px 15px; border-radius: 16px; }
.static-status-card .status-dot { background: var(--green); box-shadow: 0 0 14px rgba(120,230,175,.65); }
.static-status-card span:last-child { color: var(--faint); font-size: 12px; }
.static-related { margin-top: 38px; }
.static-link-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.static-faq { margin-top: 42px; }
.static-faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.static-faq details { padding: 15px 17px; border: 1px solid var(--line-soft); border-radius: 16px; background: rgba(24,27,34,.42); }
.static-faq summary { cursor: pointer; color: var(--text); font-size: 13px; }
.static-faq details p { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.static-body-footer { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--line-soft); color: var(--faint); font-size: 11px; }
.static-boundary { color: var(--faint) !important; font-size: 12px; }
@media (max-width: 900px) {
  .static-body-header { display: block; }
  .static-body-nav { justify-content: flex-start; max-width: none; margin-top: 20px; }
  .static-link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .static-body { padding: 72px 0 48px; }
  .static-body-header h1 { font-size: clamp(38px, 12vw, 58px); }
  .static-form-controls, .static-card-grid, .static-step-grid, .static-plan-grid, .static-metric-grid, .static-faq-grid { grid-template-columns: 1fr; }
  .static-link-grid { grid-template-columns: 1fr; }
  .static-body-footer { display: block; }
  .static-body-footer span + span { display: block; margin-top: 8px; }
}

.platform-result { margin-top: 20px; }
.platform-result-copy { padding: 24px; }
.platform-preview-output { margin: 18px 0; padding: 18px; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(8,10,14,.42); color: #f2f4f7; font: inherit; line-height: 1.65; }
.platform-history-card { display:flex; align-items:center; gap:14px; min-height:96px; padding:16px; }
.platform-history-mark { display:grid; place-items:center; min-width:64px; height:64px; border-radius:16px; border:1px solid rgba(255,255,255,.14); background:linear-gradient(145deg,rgba(255,155,112,.2),rgba(255,255,255,.04)); color:#ffd6c5; font-weight:700; }

textarea.promptbox { display:block; width:100%; min-height:180px; resize:vertical; }

/* Final responsive contract.  These rules intentionally come last: the
   liquid-glass refinement block above contains older breakpoint declarations,
   and a later max-width rule must never re-expand a grid that was collapsed
   for a smaller viewport. */
@media (max-width: 960px) {
  .site-shell { width: min(100% - 36px, 860px); }
  .model-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery.gallery-count-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .creation-history-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-grid { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  .site-shell { width: min(100% - 28px, 620px); }
  .model-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery, .gallery.gallery-count-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creation-history-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-grid, .faq, .two-col, .compare-grid, .cards, .steps, .policy-grid, .chat-layout { grid-template-columns: 1fr; }
  .section-head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .section-head h2, .page-hero h1, .hero h1 { overflow-wrap: anywhere; }
  .static-body-header { display: block; }
  .static-body-nav { justify-content: flex-start; max-width: none; margin-top: 20px; }
}

@media (max-width: 620px) {
  .site-shell { width: calc(100% - 28px); }
  .model-rail, .gallery, .gallery.gallery-count-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .creation-history-grid, .creation-history-grid.creation-history-count-2 { grid-template-columns: 1fr; }
  .feature-grid, .faq, .two-col, .compare-grid, .cards, .steps, .policy-grid, .chat-layout { grid-template-columns: 1fr; }
  .composer-bottom .control { min-width: 0; }
  .composer-bottom .control select { min-width: 0; max-width: 100%; }
  .table-wrap, .static-table-wrap { max-width: 100%; overflow-x: auto; }
  .static-body { width: calc(100% - 28px); }
}

@media (max-width: 430px) {
  /* Keep the first row usable on narrow phones: the brand, menu toggle and
     actions otherwise wrap into an awkward third row around 320px. */
  .topbar { gap: 8px; }
  .top-actions { gap: 6px; }
  .locale-control { min-height: 34px; padding-inline: 7px; }
  .locale-control select { max-width: 66px; }
  .top-actions .button.accent { padding: 8px 11px; font-size: 12px; }
  .model-rail, .gallery, .gallery.gallery-count-6 { grid-template-columns: 1fr; }
  .creation-history-card { grid-template-columns: 72px minmax(0, 1fr); }
  .creation-history-card img { width: 72px; height: 64px; }
  .home-stat-strip, .category-showcase-grid, .testimonial-grid { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
  /* Keep locale switching available on the smallest supported width. The
     primary create action is also present in the mobile navigation, so hide
     its duplicate header button instead of removing the only language picker. */
  .top-actions .button.accent { display: none; }
  .locale-control { display: inline-flex; }
}

/* CJK headlines have denser glyphs than the Latin headline measure.  Give
   Chinese the same visual breathing room so a final one-character line does
   not appear under the hero on wide screens. */
html[lang^="zh"] .hero h1 { max-width: 1120px; letter-spacing: -.045em; }
html[lang^="zh"] .page-hero h1 { max-width: 1040px; letter-spacing: -.045em; }
/* Comparison and ranking views contain intentionally wide scorecards.  Keep
   the glass surface clipped at its rounded edge while letting the table be
   scrolled inside that surface on narrow screens. */
@supports selector(.glass:has(table)) {
  .glass:has(> table) { overflow-x: auto; overflow-y: hidden; }
}
@media (max-width: 780px) {
  html[lang^="zh"] .hero h1, html[lang^="zh"] .page-hero h1 { max-width: 100%; }
}

/* Keep the visual material on small screens without making every card a
   full-screen blur/compositing surface.  Mobile Lighthouse runs are
   especially sensitive to large backdrop-filter areas; a shorter blur keeps
   the glass edge and translucency while reducing paint and GPU work. */
@media (max-width: 780px) {
  .ambient-a { filter: blur(6px) saturate(1.03); }
  .glass, .glass-soft {
    -webkit-backdrop-filter: blur(15px) saturate(130%);
    backdrop-filter: blur(15px) saturate(130%);
  }
  .promptbox, .intentbar, .support-float-button, .support-panel {
    -webkit-backdrop-filter: blur(14px) saturate(125%);
    backdrop-filter: blur(14px) saturate(125%);
  }
}

/* Below-the-fold cards do not need to participate in the first layout pass.
   Reserve a conservative intrinsic block so deferring their descendants does
   not create a scroll jump when the user reaches them. */
@supports (content-visibility: auto) {
  .section, .seo-cluster, .footer, .static-section, .static-related, .static-faq {
    content-visibility: auto;
    contain-intrinsic-size: 1px 520px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .ambient-a, .ambient-b { filter: none; }
  .glass, .glass-soft, .promptbox, .intentbar, .support-float-button, .support-panel {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}