.site-page {
  min-height: 100vh;
  overflow: clip;
  background:
    radial-gradient(circle at 82% 6%, rgba(124, 58, 237, 0.2), transparent 28rem),
    radial-gradient(circle at 5% 48%, rgba(168, 85, 247, 0.12), transparent 26rem),
    #05030b;
  color: var(--landing-text);
  overflow-x: hidden;
}

.site-page a,
.site-page button { color: inherit; font: inherit; text-decoration: none; }
.site-page svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.site-main { padding-bottom: 32px; }

.page-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: clamp(38px, 6vw, 100px);
  align-items: center;
  min-height: 560px;
  padding-block: clamp(70px, 9vw, 130px);
}

.page-hero.compact { min-height: 430px; padding-bottom: 66px; }
.page-hero .reveal-on-scroll { opacity: 1; transform: none; transition: none; }
.page-eyebrow { margin: 0 0 18px; color: var(--landing-violet-soft); font-size: .78rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.page-hero h1 { max-width: 850px; margin: 0; font-size: clamp(3rem, 6vw, 6.8rem); line-height: .96; letter-spacing: -.055em; }
.page-hero h1 span, .gradient-text { background: linear-gradient(100deg, #d8b4fe, #a855f7 50%, #7c3aed); background-clip: text; color: transparent; -webkit-background-clip: text; }
.page-lead { max-width: 720px; margin: 26px 0 0; color: #c7bbd5; font-size: clamp(1rem, 1.4vw, 1.22rem); line-height: 1.75; }
.page-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.hero-art,
.glass-panel,
.content-card,
.pricing-card,
.template-card,
.download-card,
.form-card,
.legal-card {
  border: 1px solid var(--landing-line);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(22, 16, 40, .88), rgba(9, 6, 18, .94));
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 28px 80px rgba(0,0,0,.2);
}

.hero-art { position: relative; min-height: 360px; padding: 30px; overflow: hidden; }
.hero-art::before { position: absolute; inset: -40% -30%; background: radial-gradient(circle, rgba(168,85,247,.26), transparent 45%); content: ""; }
.mini-window { position: relative; height: 100%; min-height: 300px; overflow: hidden; border: 1px solid rgba(216,180,254,.24); border-radius: 14px; background: #090611; box-shadow: 0 28px 55px rgba(0,0,0,.5); transform: rotate(1.5deg); }
.mini-window-bar { display: flex; gap: 7px; align-items: center; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--landing-line); }
.mini-window-bar i { width: 8px; height: 8px; border-radius: 50%; background: #a855f7; }
.mini-window-body { display: grid; grid-template-columns: 92px 1fr; min-height: 260px; }
.mini-window-side { padding: 18px 11px; border-right: 1px solid var(--landing-line); background: rgba(124,58,237,.08); }
.mini-window-side span { display: block; height: 8px; margin: 0 0 13px; border-radius: 99px; background: rgba(216,180,254,.25); }
.mini-window-paper { width: 72%; min-height: 205px; margin: 24px auto; padding: 28px; border-radius: 4px; background: #f8f5fc; box-shadow: 0 14px 40px rgba(0,0,0,.35); }
.mini-window-paper i { display: block; height: 6px; margin-bottom: 12px; border-radius: 99px; background: #d8cfe3; }
.mini-window-paper i:first-child { width: 45%; height: 12px; background: #7c3aed; }

.page-section { padding-block: clamp(42px, 6vw, 90px); }
.section-heading { max-width: 780px; margin-bottom: 36px; }
.section-heading.center { margin-inline: auto; text-align: center; }
.section-heading h2 { margin: 0 0 16px; font-size: clamp(2rem, 3.8vw, 4.2rem); line-height: 1.04; letter-spacing: -.04em; }
.section-heading p { margin: 0; color: var(--landing-muted); font-size: 1.05rem; line-height: 1.7; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.content-card { position: relative; padding: 28px; transition: transform 220ms ease, border-color 220ms ease; }
.content-card:hover { transform: translateY(-5px); border-color: var(--landing-line-strong); }
.content-card .card-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 24px; border: 1px solid rgba(216,180,254,.28); border-radius: 14px; background: linear-gradient(135deg, rgba(124,58,237,.65), rgba(168,85,247,.18)); color: #e9d5ff; }
.content-card h3 { margin: 0 0 12px; color: #fff; font-size: 1.15rem; }
.content-card p { margin: 0; color: var(--landing-muted); line-height: 1.65; }
.feature-list { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.feature-list li { position: relative; padding-left: 24px; color: #cfc4da; line-height: 1.5; }
.feature-list li::before { position: absolute; left: 0; color: #c084fc; content: "✓"; font-weight: 900; }

.split-section { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; align-items: stretch; }
.glass-panel { padding: clamp(26px, 4vw, 52px); }
.glass-panel h2, .glass-panel h3 { margin-top: 0; }
.glass-panel p { color: var(--landing-muted); line-height: 1.7; }
.stat-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 28px; }
.stat-row div { padding: 20px; border: 1px solid var(--landing-line); border-radius: 12px; background: rgba(255,255,255,.03); }
.stat-row strong { display: block; color: #d8b4fe; font-size: 1.6rem; }
.stat-row span { color: var(--landing-muted); font-size: .84rem; }

.editor-showcase { padding: 16px; border: 1px solid var(--landing-line-strong); border-radius: 20px; background: linear-gradient(145deg, rgba(70,30,120,.45), rgba(7,4,13,.95)); box-shadow: var(--landing-shadow); }
.editor-app { min-height: 520px; overflow: hidden; border-radius: 12px; background: #f3eff7; color: #1f1728; }
.editor-top { display: flex; gap: 8px; padding: 12px 16px; background: #fff; border-bottom: 1px solid #ddd4e6; }
.editor-top span { padding: 7px 10px; border: 1px solid #ded3e8; border-radius: 6px; font-size: .75rem; }
.editor-layout { display: grid; grid-template-columns: 170px 1fr 190px; min-height: 470px; }
.editor-panel { padding: 20px 14px; border-right: 1px solid #ddd4e6; }
.editor-panel:last-child { border-right: 0; border-left: 1px solid #ddd4e6; }
.editor-panel strong { display: block; margin-bottom: 16px; color: #5b216f; }
.editor-panel span { display: block; margin-bottom: 12px; color: #74677d; font-size: .78rem; }
.editor-page { width: min(82%, 620px); min-height: 400px; margin: 28px auto; padding: 52px; background: #fff; box-shadow: 0 12px 34px rgba(34,20,45,.16); }
.editor-page h3 { color: #3b164c; font-size: 1.7rem; }
.editor-page p { color: #655c6b; line-height: 1.65; }

.collab-board { position: relative; min-height: 420px; padding: 40px; }
.collab-doc { width: 76%; min-height: 330px; padding: 42px; border-radius: 12px; background: #fbf9fd; color: #352c3b; }
.collab-doc mark { background: #ead7ff; color: #5b216f; }
.comment-bubble { position: absolute; right: 20px; width: 220px; padding: 16px; border: 1px solid var(--landing-line-strong); border-radius: 14px; background: #1a102b; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.comment-bubble.one { top: 70px; }.comment-bubble.two { bottom: 55px; }
.avatar-stack { display: flex; margin-top: 24px; }
.avatar-stack span { display: grid; place-items: center; width: 42px; height: 42px; margin-left: -8px; border: 3px solid #0c0715; border-radius: 50%; background: linear-gradient(135deg,#7c3aed,#ec4899); font-weight: 800; }

.before-after { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; }
.text-sample { min-height: 180px; padding: 24px; border: 1px solid var(--landing-line); border-radius: 14px; background: rgba(255,255,255,.035); }
.text-sample small { color: #c084fc; font-weight: 900; text-transform: uppercase; }.text-sample p { color: #d2c8dc; line-height: 1.75; }
.transform-arrow { color: #c084fc; font-size: 2rem; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.filter-button { min-height: 42px; padding: 0 18px; border: 1px solid var(--landing-line); border-radius: 999px; background: rgba(255,255,255,.035); cursor: pointer; }
.filter-button.active { border-color: #c084fc; background: rgba(124,58,237,.35); }
.template-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.template-card { overflow: hidden; transition: transform 220ms ease; }.template-card:hover { transform: translateY(-5px); }
.template-preview { min-height: 220px; padding: 28px; background: linear-gradient(150deg,#f9f7fc,#e9e0f1); color: #3b3043; }
.template-preview i { display: block; height: 6px; margin: 11px 0; border-radius: 99px; background: #c9bbd3; }.template-preview i:first-child { width: 55%; height: 12px; background: #7c3aed; }
.template-card footer { padding: 20px; }.template-card h3 { margin: 0 0 6px; }.template-card span { color: var(--landing-muted); font-size: .85rem; }
.template-card[hidden] { display: none; }

.pricing-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; align-items: stretch; }
.pricing-card { position: relative; padding: 34px; }.pricing-card.recommended { border-color: #c084fc; background: radial-gradient(circle at 80% 0, rgba(192,132,252,.26), transparent 38%), linear-gradient(145deg,rgba(64,28,112,.92),rgba(15,8,27,.98)); transform: translateY(-12px); }
.plan-badge { position: absolute; top: 18px; right: 18px; padding: 6px 10px; border-radius: 99px; background: #a855f7; font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.pricing-card h2 { margin: 0 0 10px; }.plan-price { min-height: 52px; color: #d8b4fe; font-size: 1.05rem; font-weight: 800; }
.pricing-card .home-button { width: 100%; margin-top: 28px; }

.download-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }.download-card { display: grid; grid-template-columns: auto 1fr; gap: 20px; padding: 28px; }.platform-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; background: rgba(124,58,237,.28); color: #d8b4fe; font-size: 1.25rem; font-weight: 900; }.download-card h3 { margin: 4px 0 8px; }.download-card p { margin: 0 0 18px; color: var(--landing-muted); line-height: 1.55; }.status-pill { display: inline-flex; padding: 6px 10px; border-radius: 99px; background: rgba(168,85,247,.17); color: #d8b4fe; font-size: .75rem; font-weight: 800; }

.values-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }.value-card { min-height: 240px; }.timeline { display: grid; gap: 0; }.timeline-item { position: relative; display: grid; grid-template-columns: 100px 1fr; gap: 24px; padding: 0 0 34px; }.timeline-item::before { position: absolute; top: 8px; bottom: -8px; left: 83px; width: 1px; background: var(--landing-line-strong); content: ""; }.timeline-item:last-child::before { display:none; }.timeline-item strong { color: #c084fc; }.timeline-item div { padding-left: 22px; }.timeline-item h3 { margin: 0 0 8px; }.timeline-item p { margin:0; color:var(--landing-muted); line-height:1.6; }

.form-wrap { display: grid; grid-template-columns: .7fr 1.3fr; gap: 28px; align-items: start; }.form-card { padding: clamp(26px,4vw,48px); }.field-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }.form-field { display:grid; gap:8px; }.form-field.full { grid-column:1/-1; }.form-field label { font-weight:750; }.form-field input,.form-field textarea,.form-field select { width:100%; min-height:50px; padding:12px 14px; border:1px solid var(--landing-line); border-radius:10px; background:rgba(255,255,255,.05); color:#fff; font:inherit; }.form-field textarea { min-height:150px; resize:vertical; }.form-field input:focus,.form-field textarea:focus { outline:2px solid #a855f7; border-color:transparent; }.form-field.invalid input,.form-field.invalid textarea { border-color:#fb7185; }.field-error { min-height:18px; color:#fda4af; font-size:.78rem; }.form-message { margin:18px 0 0; color:#86efac; font-weight:700; }.contact-aside { padding:34px; }.contact-aside h2 { margin-top:0; }.contact-item { padding:20px 0; border-bottom:1px solid var(--landing-line); }.contact-item span { display:block; color:var(--landing-muted); margin-top:6px; }

.auth-page { display:grid; place-items:center; min-height:calc(100vh - 90px); padding:60px 20px 100px; }.auth-card { width:min(100%,520px); }.auth-card .home-brand { justify-content:center; margin-bottom:28px; }.auth-card h1 { margin:0; text-align:center; font-size:2.5rem; }.auth-card > p { color:var(--landing-muted); text-align:center; line-height:1.6; }.auth-card form { margin-top:30px; }.checkbox-row { display:flex; justify-content:space-between; gap:16px; align-items:center; margin:14px 0 22px; color:var(--landing-muted); }.checkbox-row label { display:flex; gap:9px; align-items:flex-start; }.checkbox-row a { color:#d8b4fe; }.auth-switch { margin-top:24px!important; }.auth-switch a { color:#d8b4fe; font-weight:800; }
.legal-card { max-width:920px; margin:0 auto; padding:clamp(28px,5vw,70px); }.legal-card h2 { margin-top:34px; }.legal-card p,.legal-card li { color:var(--landing-muted); line-height:1.75; }
.notice { margin-top:20px; padding:14px 16px; border:1px solid var(--landing-line); border-radius:10px; background:rgba(168,85,247,.08); color:#d6c8e2; }

@media (max-width:1180px) {
  .card-grid.four,.template-grid,.values-grid { grid-template-columns:repeat(2,1fr); }
  .page-hero { grid-template-columns:1fr; min-height:0; }.hero-art { min-height:320px; }
  .editor-layout { grid-template-columns:130px 1fr; }.editor-panel:last-child { display:none; }
}
@media (max-width:900px) {
  .card-grid,.pricing-grid,.split-section,.download-grid,.form-wrap { grid-template-columns:1fr; }
  .pricing-card.recommended { transform:none; }.collab-doc { width:100%; }.comment-bubble { position:relative; inset:auto!important; width:auto; margin:14px 0; }
  .before-after { grid-template-columns:1fr; }.transform-arrow { transform:rotate(90deg); text-align:center; }
  .editor-layout { grid-template-columns:1fr; }.editor-panel { display:none; }.editor-page { width:90%; padding:34px; }
}
@media (max-width:560px) {
  .site-page .home-navbar::after { inset-inline: 0; }
  .page-hero { padding-block:48px; }.page-hero h1 { font-size:clamp(2.65rem,15vw,4.2rem); }.card-grid.four,.template-grid,.values-grid,.field-grid { grid-template-columns:1fr; }
  .hero-art { min-height:280px; padding:14px; }.mini-window-body { grid-template-columns:64px 1fr; }.mini-window-paper { width:86%; padding:20px; }
  .stat-row { grid-template-columns:1fr; }.collab-board { padding:16px; }.collab-doc { padding:25px; }.download-card { grid-template-columns:1fr; }
  .timeline-item { grid-template-columns:62px 1fr; }.timeline-item::before { left:54px; }.checkbox-row { align-items:flex-start; flex-direction:column; }
}