:root{
  --paper:#ffffff;
  --white:#ffffff;
  --ink:#101828;
  --ink-2:#26364a;
  --muted:#667085;
  --soft:#f5f8fb;
  --soft-2:#eef6f8;
  --line:rgba(16,24,40,.12);
  --line-strong:rgba(24,184,199,.30);
  --aqua:#18b8c7;
  --green:#12b981;
  --coral:#18b8c7;
  --accent:#e5435e;
  --yellow:#f3c84b;
  --shadow:0 28px 70px rgba(16,24,40,.14);
  --soft-shadow:0 16px 36px rgba(16,24,40,.10);
}

html{
  background:#fff;
}

body{
  color:var(--ink);
  background:
    linear-gradient(180deg,#fff 0%,#fff 54%,#f6fbfc 100%);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(110deg,transparent 0 62%,rgba(24,184,199,.10) 62% 76%,transparent 76%),
    repeating-linear-gradient(90deg,rgba(16,24,40,.035) 0 1px,transparent 1px 96px);
  background-size:auto,96px 96px;
  mask-image:linear-gradient(to bottom,black 0 58%,transparent 100%);
  opacity:.72;
  animation:none;
}

.page{
  background:#fff;
}

.site-nav{
  padding:22px 54px;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid rgba(16,24,40,.08);
  box-shadow:none;
}

.site-nav.scrolled{
  padding-top:14px;
  padding-bottom:14px;
  background:rgba(255,255,255,.98);
  border-bottom-color:rgba(16,24,40,.12);
  box-shadow:0 12px 30px rgba(16,24,40,.08);
}

.brand{
  gap:11px;
}

.brand-mark{
  width:40px;
  height:40px;
  background:#fff;
  color:var(--aqua);
  border:1px solid rgba(16,24,40,.10);
  box-shadow:0 10px 24px rgba(16,24,40,.08);
}

.brand-name{
  color:var(--ink);
  font-family:"Manrope",Arial,sans-serif;
  font-size:17px;
  font-weight:900;
  text-transform:none;
}

.brand-name span{
  color:var(--aqua);
}

.nav-links{
  gap:28px;
}

.nav-links a{
  color:#344054;
  font-size:14px;
  font-weight:800;
}

.nav-links a:hover{
  color:var(--aqua);
}

.btn{
  min-height:48px;
  padding:0 20px;
  border-radius:8px;
  background:#fff;
  border:1px solid rgba(16,24,40,.14);
  color:var(--ink);
  box-shadow:none;
}

.btn:hover{
  transform:translateY(-1px);
  border-color:var(--line-strong);
  box-shadow:0 14px 28px rgba(16,24,40,.10);
}

.btn-primary{
  background:linear-gradient(135deg,var(--aqua),#39d7c8);
  border-color:transparent;
  color:#fff;
  box-shadow:0 16px 30px rgba(24,184,199,.22);
}

.btn-dark,
.btn-light{
  background:#fff;
  border-color:rgba(16,24,40,.14);
  color:var(--ink);
}

.hero{
  min-height:92svh;
  grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);
  gap:28px;
  padding:136px 54px 74px;
  background:
    linear-gradient(180deg,#fff 0%,#fff 72%,#f8fcfd 100%);
}

.hero::before{
  inset:96px 0 auto auto;
  width:52%;
  height:74%;
  background:
    linear-gradient(135deg,rgba(24,184,199,.16),rgba(255,255,255,.55) 54%,rgba(24,184,199,.08));
  clip-path:polygon(18% 0,100% 0,100% 82%,4% 100%,0 18%);
  border-left:1px solid rgba(24,184,199,.16);
}

.hero::after{
  inset:auto 0 0 0;
  width:100%;
  height:142px;
  background:
    linear-gradient(180deg,transparent,#f7fbfc);
  border:0;
  clip-path:none;
  z-index:0;
}

.motion-bg{
  opacity:1;
}

.motion-bg::before{
  inset:116px 38px auto auto;
  width:46%;
  height:62%;
  background:
    repeating-linear-gradient(0deg,rgba(16,24,40,.055) 0 1px,transparent 1px 54px),
    repeating-linear-gradient(90deg,rgba(16,24,40,.045) 0 1px,transparent 1px 54px);
  transform:perspective(780px) rotateX(58deg) scale(1.24);
  transform-origin:center bottom;
  opacity:.46;
  animation:landing-grid-drift 22s linear infinite;
}

.motion-bg::after{
  inset:132px 22px auto auto;
  width:48%;
  height:58%;
  background:
    radial-gradient(ellipse at 52% -14%,rgba(34,195,181,.3),transparent 48%),
    linear-gradient(135deg,rgba(24,184,199,.16),transparent 38%,rgba(18,185,129,.12));
  opacity:.58;
  animation:none;
}

@keyframes landing-grid-drift{
  from{background-position:0 0,0 0}
  to{background-position:0 54px,54px 0}
}

.ambient-panel{
  display:none;
}

.hero-copy{
  max-width:680px;
}

.eyebrow{
  padding:0;
  margin-bottom:20px;
  background:transparent;
  border:0;
  box-shadow:none;
  color:var(--coral);
  font-size:13px;
}

.pulse{
  background:var(--aqua);
  box-shadow:0 0 0 0 rgba(24,184,199,.34);
}

h1{
  max-width:760px;
  margin-bottom:24px;
  color:var(--ink);
  font-family:"Manrope",Arial,sans-serif;
  font-size:68px;
  font-weight:900;
  line-height:1.04;
  text-transform:none;
}

.h1-line2{
  color:var(--ink);
  text-shadow:none;
}

.hero-sub{
  max-width:650px;
  margin-bottom:30px;
  color:var(--muted);
  font-size:20px;
  line-height:1.75;
  font-weight:600;
}

.hero-actions{
  margin-bottom:26px;
}

.hero-actions .btn{
  min-height:54px;
  padding:0 24px;
  font-size:15px;
}

.proof-strip{
  gap:10px;
}

.proof-pill{
  background:#fff;
  border:1px solid rgba(16,24,40,.10);
  color:#667085;
  box-shadow:0 10px 22px rgba(16,24,40,.06);
}

.proof-pill b{
  color:var(--ink);
}

.hero-visual{
  min-height:650px;
  display:grid;
  place-items:center;
  perspective:1200px;
}

.device-frame{
  right:34px;
  top:38px;
  width:min(520px,80%);
  min-height:560px;
  border:1px solid rgba(16,24,40,.12);
  border-radius:8px;
  background:#fff;
  box-shadow:0 34px 80px rgba(16,24,40,.18);
  transform:rotate(0deg);
}

.device-frame::before{
  height:48px;
  background:#fff;
  border-bottom:1px solid rgba(16,24,40,.10);
}

.device-dots{
  top:19px;
}

.device-dots span{
  width:8px;
  height:8px;
  background:#ff5f57;
}

.device-dots span:nth-child(2){
  background:#febc2e;
}

.device-dots span:nth-child(3){
  background:#28c840;
}

.device-frame img{
  inset:48px 0 0;
  height:calc(100% - 48px);
}

.device-fallback{
  inset:48px 0 0;
  color:var(--aqua);
  background:#f8fcfd;
}

.poster-stack{
  left:0;
  top:126px;
  width:300px;
  gap:16px;
  z-index:4;
}

.poster{
  min-height:190px;
  border:1px solid rgba(16,24,40,.12);
  background:#fff;
  box-shadow:0 18px 42px rgba(16,24,40,.16);
}

.poster:nth-child(2){
  margin-left:54px;
  transform:rotate(-1deg);
}

.poster:nth-child(3){
  margin-left:18px;
  transform:rotate(1deg);
}

.poster::after,
.showcase-card::after{
  left:10px;
  right:10px;
  bottom:10px;
  background:rgba(255,255,255,.92);
  color:var(--ink);
  border:1px solid rgba(16,24,40,.10);
  box-shadow:0 10px 22px rgba(16,24,40,.08);
}

.hero-note{
  right:0;
  bottom:38px;
  width:286px;
  z-index:6;
  background:#fff;
  border:1px solid rgba(16,24,40,.10);
  box-shadow:0 22px 50px rgba(16,24,40,.14);
}

.hero-note strong{
  color:var(--aqua);
  font-family:"Manrope",Arial,sans-serif;
  font-size:28px;
  font-weight:900;
}

.hero-note span{
  color:var(--muted);
}

.metric-band{
  max-width:1120px;
  margin:-22px auto 0;
  position:relative;
  z-index:4;
  border:1px solid rgba(16,24,40,.10);
  border-radius:8px;
  background:#fff;
  color:var(--ink);
  box-shadow:0 18px 44px rgba(16,24,40,.08);
}

.metric{
  padding:24px 18px;
  border-right:1px solid rgba(16,24,40,.08);
}

.metric b{
  color:var(--ink);
  font-family:"Manrope",Arial,sans-serif;
  font-size:32px;
  font-weight:900;
}

.metric span{
  color:var(--muted);
  font-size:12px;
}

.section{
  padding:96px 54px;
  background:#fff;
}

.section:nth-of-type(4),
.section:nth-of-type(6){
  background:#f7fbfc;
}

.section-head{
  margin-bottom:42px;
}

.section-kicker{
  color:var(--aqua);
  font-size:13px;
}

.section-title{
  color:var(--ink);
  font-family:"Manrope",Arial,sans-serif;
  font-size:48px;
  font-weight:900;
  line-height:1.08;
  text-transform:none;
}

.section-sub{
  color:var(--muted);
  font-weight:600;
}

.showcase{
  background:#fff;
}

.showcase .section-head{
  padding:0 54px;
}

.showcase-track{
  gap:18px;
}

.showcase-card{
  width:276px;
  height:344px;
  border:1px solid rgba(16,24,40,.12);
  background:#fff;
  box-shadow:0 18px 42px rgba(16,24,40,.10);
}

.system-band{
  background:#f7fbfc;
  border-top:1px solid rgba(16,24,40,.08);
  border-bottom:1px solid rgba(16,24,40,.08);
}

.split{
  gap:56px;
}

.media-board{
  min-height:540px;
  background:#fff;
  border:1px solid rgba(16,24,40,.10);
  box-shadow:0 24px 58px rgba(16,24,40,.12);
}

.media-board::after{
  background:linear-gradient(180deg,transparent 34%,rgba(16,24,40,.68));
}

.media-caption strong{
  color:#fff;
  font-family:"Manrope",Arial,sans-serif;
  font-size:30px;
  font-weight:900;
}

.media-caption span{
  color:rgba(255,255,255,.82);
}

.product-tour{
  background:#f7fbfc;
}

.editor-showcase{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  gap:24px;
  align-items:stretch;
}

.editor-shell{
  min-height:560px;
  border:1px solid rgba(16,24,40,.10);
  border-radius:8px;
  background:#fff;
  box-shadow:0 24px 58px rgba(16,24,40,.12);
  overflow:hidden;
}

.editor-topbar{
  height:54px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 18px;
  border-bottom:1px solid rgba(16,24,40,.10);
  background:#fff;
}

.editor-topbar span{
  width:9px;
  height:9px;
  border-radius:999px;
  background:#ff5f57;
}

.editor-topbar span:nth-child(2){
  background:#febc2e;
}

.editor-topbar span:nth-child(3){
  background:#28c840;
}

.editor-topbar strong{
  margin-left:8px;
  color:var(--ink);
  font-size:13px;
  font-weight:900;
}

.editor-layout{
  min-height:506px;
  display:grid;
  grid-template-columns:170px minmax(0,1fr) 184px;
  background:#f4f9fa;
}

.editor-sidebar,
.editor-tools{
  padding:18px;
  background:#fff;
  border-right:1px solid rgba(16,24,40,.10);
}

.editor-tools{
  border-right:0;
  border-left:1px solid rgba(16,24,40,.10);
}

.editor-sidebar b,
.editor-tools b{
  display:block;
  margin-bottom:14px;
  color:var(--ink);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
}

.editor-sidebar span{
  display:block;
  padding:11px 12px;
  margin-bottom:8px;
  border:1px solid rgba(16,24,40,.08);
  border-radius:8px;
  color:#536173;
  font-size:13px;
  font-weight:800;
  background:#fff;
}

.editor-sidebar span.active{
  color:#06373d;
  border-color:rgba(24,184,199,.28);
  background:rgba(24,184,199,.10);
}

.editor-canvas{
  position:relative;
  display:grid;
  place-items:center;
  padding:28px;
  overflow:hidden;
}

.editor-canvas::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(0deg,rgba(16,24,40,.05) 0 1px,transparent 1px 38px),
    repeating-linear-gradient(90deg,rgba(16,24,40,.04) 0 1px,transparent 1px 38px);
}

.editor-canvas img{
  position:relative;
  z-index:1;
  width:min(310px,88%);
  max-height:420px;
  object-fit:contain;
  border-radius:8px;
  box-shadow:0 20px 46px rgba(16,24,40,.20);
}

.selection-box{
  position:absolute;
  left:50%;
  top:58%;
  z-index:3;
  width:188px;
  height:64px;
  border:2px solid var(--aqua);
  border-radius:8px;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 5px rgba(24,184,199,.14);
}

.selection-box span{
  position:absolute;
  left:10px;
  top:-34px;
  padding:7px 9px;
  border-radius:8px;
  background:var(--aqua);
  color:#fff;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}

.editor-tools label{
  display:block;
  margin:12px 0 7px;
  color:#667085;
  font-size:12px;
  font-weight:900;
}

.tool-line{
  height:38px;
  width:72%;
  border-radius:8px;
  border:1px solid rgba(16,24,40,.10);
  background:linear-gradient(90deg,rgba(24,184,199,.14),rgba(24,184,199,.04));
}

.tool-line.wide{
  width:100%;
}

.editor-tools button{
  width:100%;
  min-height:40px;
  margin-top:12px;
  border:1px solid rgba(16,24,40,.12);
  border-radius:8px;
  background:#fff;
  color:var(--ink);
  font-weight:900;
}

.editor-tools button.primary{
  background:linear-gradient(135deg,var(--aqua),#39d7c8);
  border-color:transparent;
  color:#fff;
}

.tour-points{
  display:grid;
  gap:16px;
}

.tour-point{
  min-height:168px;
  padding:24px;
  border:1px solid rgba(16,24,40,.10);
  border-radius:8px;
  background:#fff;
  box-shadow:0 14px 34px rgba(16,24,40,.08);
}

.tour-point h3{
  margin-bottom:9px;
  color:var(--ink);
  font-size:22px;
}

.tour-point p{
  color:var(--muted);
  line-height:1.65;
  font-weight:600;
}

.template-board{
  display:grid;
  align-items:stretch;
  padding:18px;
}

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

.template-grid figure{
  position:relative;
  min-height:238px;
  overflow:hidden;
  border:1px solid rgba(16,24,40,.10);
  border-radius:8px;
  background:#fff;
  box-shadow:0 12px 26px rgba(16,24,40,.08);
}

.template-grid img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.template-grid figcaption{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  padding:8px 10px;
  border-radius:8px;
  background:rgba(255,255,255,.92);
  color:var(--ink);
  border:1px solid rgba(16,24,40,.10);
  font-size:12px;
  font-weight:900;
}

.feature-grid{
  gap:18px;
}

.feature,
.step,
.proof-tile,
.plan-card{
  background:#fff;
  border:1px solid rgba(16,24,40,.10);
  box-shadow:0 14px 34px rgba(16,24,40,.08);
}

.feature.lead{
  background:#fff;
  border-color:rgba(24,184,199,.24);
  box-shadow:0 18px 44px rgba(24,184,199,.10);
}

.icon-bubble{
  background:rgba(24,184,199,.10);
  border-color:rgba(24,184,199,.22);
  color:var(--aqua);
}

.feature h3,
.step h3{
  color:var(--ink);
  font-size:22px;
}

.feature p,
.step p{
  color:var(--muted);
  font-weight:600;
}

.feature-tags span{
  background:rgba(24,184,199,.08);
  border-color:rgba(24,184,199,.20);
  color:#087a85;
}

.step{
  min-height:270px;
}

.step::before{
  color:rgba(16,24,40,.06);
  font-family:"Manrope",Arial,sans-serif;
  font-weight:900;
}

.proof-board{
  gap:18px;
}

.proof-tile{
  background:#fff;
}

.proof-tile b{
  color:var(--aqua);
  font-family:"Manrope",Arial,sans-serif;
  font-weight:900;
}

.proof-tile span{
  color:var(--muted);
  font-weight:600;
}

.proof-tile::after{
  background:linear-gradient(90deg,var(--aqua),var(--green),var(--yellow),var(--accent));
}

.plans-grid{
  gap:18px;
}

.plan-card{
  color:var(--ink);
}

.plan-card.featured{
  border-color:rgba(24,184,199,.34);
  background:#fff;
  box-shadow:0 24px 58px rgba(24,184,199,.14);
}

.plan-card.featured::before{
  background:var(--aqua);
  color:#fff;
}

.plan-name,
.plan-price{
  color:var(--ink);
  font-family:"Manrope",Arial,sans-serif;
}

.plan-price{
  font-weight:900;
}

.plan-price span,
.plan-feats li{
  color:var(--muted);
}

.plan-credits{
  color:var(--aqua);
}

.plan-feats li::before{
  color:var(--aqua);
}

.plan-btn{
  background:#fff;
  border-color:rgba(16,24,40,.14);
  color:var(--ink);
}

.featured .plan-btn{
  background:linear-gradient(135deg,var(--aqua),#39d7c8);
  color:#fff;
}

.final-cta{
  background:#fff;
}

.cta-box{
  grid-template-columns:minmax(0,1fr) minmax(280px,.54fr);
  background:#101828;
  border-radius:8px;
  box-shadow:0 28px 70px rgba(16,24,40,.18);
}

.cta-box::before{
  background:
    linear-gradient(112deg,rgba(24,184,199,.22),transparent 42%,rgba(18,185,129,.16)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 72px);
}

.cta-box h2{
  font-family:"Manrope",Arial,sans-serif;
  font-size:52px;
  font-weight:900;
  text-transform:none;
}

.cta-box p{
  font-weight:600;
}

.cta-preview{
  border:1px solid rgba(255,255,255,.22);
  background:#fff;
  box-shadow:0 20px 44px rgba(0,0,0,.24);
  transform:rotate(1deg);
}

footer{
  background:#fff;
  border-top:1px solid rgba(16,24,40,.10);
  color:var(--muted);
}

.reveal{
  opacity:1;
  transform:none;
}

/* Dark product skin aligned with admin, user dashboard and editor. */
:root{
  --paper:#090b10;
  --white:#0f1118;
  --ink:#eef4ff;
  --ink-2:#cbd7ec;
  --muted:#8fa0c2;
  --soft:#101621;
  --soft-2:#121a28;
  --line:rgba(221,226,240,.10);
  --line-strong:rgba(34,195,181,.30);
  --aqua:#18b8c7;
  --green:#2dd98a;
  --coral:#22c3b5;
  --accent:#5b6cf7;
  --yellow:#f59e0b;
  --shadow:0 28px 84px rgba(0,0,0,.44);
  --soft-shadow:0 14px 36px rgba(0,0,0,.30);
}

html,
body,
.page{
  background:#090b10;
}

body{
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 0,rgba(34,195,181,.16),transparent 28%),
    radial-gradient(circle at 88% 6%,rgba(91,108,247,.18),transparent 32%),
    linear-gradient(180deg,#090b10 0%,#0f1118 46%,#070910 100%);
}

body::before{
  background:
    linear-gradient(110deg,transparent 0 58%,rgba(34,195,181,.08) 58% 74%,transparent 74%),
    repeating-linear-gradient(90deg,rgba(221,226,240,.035) 0 1px,transparent 1px 96px);
  opacity:.64;
  mask-image:linear-gradient(to bottom,black 0 76%,transparent 100%);
}

.site-nav{
  background:rgba(15,17,24,.88);
  border-bottom:1px solid rgba(221,226,240,.10);
  box-shadow:0 16px 36px rgba(0,0,0,.24);
}

.site-nav.scrolled{
  background:rgba(15,17,24,.96);
  border-bottom-color:rgba(221,226,240,.14);
  box-shadow:0 18px 44px rgba(0,0,0,.34);
}

.brand-mark{
  background:linear-gradient(135deg,rgba(91,108,247,.18),rgba(34,195,181,.13));
  color:#c9fffa;
  border-color:rgba(125,211,252,.18);
  box-shadow:0 12px 26px rgba(0,0,0,.28);
}

.brand-name,
.nav-links a,
h1,
.section-title,
.feature h3,
.step h3,
.tour-point h3,
.plan-name,
.plan-price{
  color:var(--ink);
}

.brand-name span,
.nav-links a:hover,
.section-kicker,
.eyebrow,
.h1-line2,
.hero-note strong,
.metric b,
.proof-tile b,
.plan-credits{
  color:var(--aqua);
}

.nav-links a{
  color:#9aa9ca;
}

.nav-links a.btn-primary{
  color:#fff;
}

.btn{
  background:rgba(255,255,255,.04);
  border-color:rgba(221,226,240,.12);
  color:var(--ink);
  box-shadow:none;
}

.btn:hover{
  border-color:rgba(34,195,181,.34);
  box-shadow:0 16px 34px rgba(0,0,0,.26);
}

.btn-primary,
.featured .plan-btn,
.editor-tools button.primary{
  background:linear-gradient(135deg,#22c3b5,#5b6cf7);
  color:#fff;
  border-color:transparent;
  box-shadow:0 18px 40px rgba(34,195,181,.18);
}

.btn-dark,
.btn-light{
  background:rgba(255,255,255,.04);
  border-color:rgba(221,226,240,.12);
  color:var(--ink);
}

.hero{
  background:
    radial-gradient(circle at 78% 20%,rgba(34,195,181,.16),transparent 26%),
    radial-gradient(circle at 100% 0,rgba(91,108,247,.18),transparent 32%),
    linear-gradient(145deg,#0f1118 0%,#090b10 100%);
}

.hero::before{
  background:
    linear-gradient(135deg,rgba(34,195,181,.14),rgba(91,108,247,.10) 48%,rgba(255,255,255,.02));
  border-left:1px solid rgba(34,195,181,.16);
}

.hero::after{
  background:linear-gradient(180deg,transparent,#090b10);
}

.motion-bg::before{
  background:
    repeating-linear-gradient(0deg,rgba(221,226,240,.045) 0 1px,transparent 1px 54px),
    repeating-linear-gradient(90deg,rgba(221,226,240,.035) 0 1px,transparent 1px 54px);
}

.proof-pill,
.metric-band,
.feature,
.step,
.proof-tile,
.plan-card,
.tour-point,
.editor-shell,
.media-board,
.showcase-card,
.poster,
.device-frame{
  background:linear-gradient(180deg,rgba(22,26,38,.98),rgba(13,16,25,.98));
  border-color:rgba(221,226,240,.10);
  color:var(--ink);
  box-shadow:var(--soft-shadow);
}

.proof-pill,
.section-sub,
.hero-sub,
.feature p,
.step p,
.tour-point p,
.proof-tile span,
.plan-price span,
.plan-feats li,
.media-caption span,
.hero-note span{
  color:var(--muted);
}

.device-frame::before,
.editor-topbar,
.editor-sidebar,
.editor-tools{
  background:#0f1118;
  border-color:rgba(221,226,240,.10);
}

.device-fallback,
.editor-layout,
.editor-canvas{
  background:#090b10;
  color:var(--aqua);
}

.poster::after,
.showcase-card::after,
.template-grid figcaption{
  background:rgba(15,17,24,.90);
  color:var(--ink);
  border-color:rgba(221,226,240,.10);
}

.hero-note{
  background:linear-gradient(180deg,rgba(15,17,24,.96),rgba(9,11,16,.96));
  border-color:rgba(34,195,181,.20);
}

.metric-band{
  background:linear-gradient(180deg,rgba(22,26,38,.98),rgba(13,16,25,.98));
}

.metric{
  border-color:rgba(221,226,240,.08);
}

.section,
.showcase,
.final-cta{
  background:#090b10;
}

.section:nth-of-type(4),
.section:nth-of-type(6),
.system-band,
.product-tour{
  background:linear-gradient(180deg,#0d1018,#0a0d14);
  border-color:rgba(221,226,240,.08);
}

.feature.lead,
.plan-card.featured{
  background:linear-gradient(180deg,rgba(34,195,181,.12),rgba(15,17,24,.98));
  border-color:rgba(34,195,181,.28);
  box-shadow:0 22px 56px rgba(34,195,181,.10);
}

.icon-bubble{
  background:rgba(34,195,181,.10);
  border-color:rgba(34,195,181,.24);
  color:var(--aqua);
}

.feature-tags span{
  background:rgba(34,195,181,.10);
  border-color:rgba(34,195,181,.22);
  color:#b8fff7;
}

.proof-tile::after{
  background:linear-gradient(90deg,#22c3b5,#5b6cf7,#2dd98a,#f59e0b);
}

.plan-card.featured::before{
  background:linear-gradient(135deg,#22c3b5,#5b6cf7);
}

.plan-feats li::before{
  color:var(--aqua);
}

.plan-btn{
  background:rgba(255,255,255,.04);
  color:var(--ink);
  border-color:rgba(221,226,240,.12);
}

.cta-box{
  background:#0b1220;
  border:1px solid rgba(221,226,240,.10);
}

.cta-box::before{
  background:
    linear-gradient(112deg,rgba(34,195,181,.18),transparent 42%,rgba(91,108,247,.16)),
    repeating-linear-gradient(90deg,rgba(221,226,240,.045) 0 1px,transparent 1px 72px);
}

.cta-preview{
  background:#090b10;
  border-color:rgba(221,226,240,.14);
}

footer{
  background:#090b10;
  border-top-color:rgba(221,226,240,.10);
}

/* Real editor landing mock */
.real-editor-shell{
  min-height:590px;
  background:#0f1118;
  border-color:#222840;
  box-shadow:0 24px 70px rgba(0,0,0,.46);
}

.real-editor-topbar{
  height:46px;
  gap:6px;
  padding:0 10px;
  background:#0f1118;
  border-bottom:1px solid #222840;
}

.real-editor-topbar strong{
  color:#dde2f0;
  font-size:12px;
  margin-right:8px;
}

.real-editor-topbar .mini-tool,
.real-editor-topbar .mini-action,
.real-editor-topbar .mini-sep,
.real-editor-topbar .mini-spacer{
  width:auto;
  height:auto;
  border-radius:7px;
  background:transparent;
  color:#7080a8;
}

.real-editor-topbar .mini-tool{
  min-height:30px;
  display:inline-flex;
  align-items:center;
  padding:0 10px;
  border:1px solid #2a3050;
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
}

.real-editor-topbar .mini-tool.on{
  color:#dde2f0;
  background:#1d2235;
}

.real-editor-topbar .mini-sep{
  width:1px;
  height:18px;
  background:#2a3050;
  margin:0 4px;
}

.real-editor-topbar .mini-spacer{
  flex:1;
}

.real-editor-topbar .mini-action{
  min-height:30px;
  display:inline-flex;
  align-items:center;
  padding:0 13px;
  background:#5b6cf7;
  color:#fff;
  font-size:11px;
  font-weight:900;
}

.real-editor-layout{
  min-height:544px;
  grid-template-columns:232px minmax(0,1fr) 230px;
  background:#090b10;
}

.real-library,
.real-props{
  padding:0;
  background:#0f1118;
  border-color:#222840;
}

.mini-tabs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:2px;
  padding:8px 8px 0;
  border-bottom:1px solid #222840;
}

.mini-tabs span{
  min-height:28px;
  display:grid;
  place-items:center;
  margin:0;
  padding:0 5px;
  border:0;
  border-radius:7px 7px 0 0;
  background:transparent;
  color:#3d4a6a;
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
}

.mini-tabs span.active{
  color:#5b6cf7;
  border-bottom:2px solid #5b6cf7;
}

.mini-search,
.mini-select{
  height:28px;
  margin:8px 8px 4px;
  display:flex;
  align-items:center;
  padding:0 9px;
  border-radius:7px;
  background:#161a26;
  border:1px solid #222840;
  color:#3d4a6a;
  font-size:11px;
}

.mini-filters{
  display:flex;
  gap:5px;
  padding:0 8px 4px;
}

.mini-filters span{
  min-height:24px;
  padding:0 9px;
  display:inline-flex;
  align-items:center;
  border:1px solid #222840;
  border-radius:999px;
  background:#161a26;
  color:#7080a8;
  font-size:10px;
  font-weight:800;
}

.mini-filters span.active{
  color:#8ce7de;
  border-color:rgba(34,195,181,.32);
  background:rgba(34,195,181,.10);
}

.mini-template-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  padding:6px 8px 10px;
}

.mini-template-grid figure{
  position:relative;
  aspect-ratio:1;
  overflow:hidden;
  border-radius:7px;
  border:1px solid #222840;
  background:#161a26;
}

.mini-template-grid img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.mini-template-grid figcaption{
  position:absolute;
  left:4px;
  right:4px;
  bottom:4px;
  padding:4px 5px;
  border-radius:4px;
  background:rgba(9,11,16,.76);
  color:#dde2f0;
  font-size:9px;
  font-weight:900;
}

.real-canvas{
  min-height:544px;
  background-color:#090b10;
  background-image:
    repeating-linear-gradient(0deg,transparent,transparent 23px,rgba(255,255,255,.018) 23px,rgba(255,255,255,.018) 24px),
    repeating-linear-gradient(90deg,transparent,transparent 23px,rgba(255,255,255,.018) 23px,rgba(255,255,255,.018) 24px);
}

.canvas-size-pill{
  position:absolute;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  padding:4px 12px;
  border:1px solid #222840;
  border-radius:999px;
  background:rgba(9,11,16,.70);
  color:#3d4a6a;
  font-family:"DM Mono",monospace;
  font-size:10px;
}

.canvas-wrap{
  position:relative;
  z-index:1;
  width:min(330px,72%);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  overflow:hidden;
  background-color:#eef2ff;
  background-image:
    linear-gradient(45deg,rgba(148,163,184,.22) 25%,transparent 25%),
    linear-gradient(-45deg,rgba(148,163,184,.22) 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,rgba(148,163,184,.22) 75%),
    linear-gradient(-45deg,transparent 75%,rgba(148,163,184,.22) 75%);
  background-size:22px 22px;
  background-position:0 0,0 11px,11px -11px,-11px 0;
  box-shadow:0 0 0 1px rgba(91,108,247,.25),0 18px 42px rgba(0,0,0,.48);
}

.real-canvas img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0;
  box-shadow:none;
}

.canvas-wrap .anim-frame{
  position:absolute;
  inset:0;
  opacity:0;
  transform:scale(1.035);
  animation:editor-frame-cycle 10s ease-in-out infinite;
}

.canvas-wrap .frame-one{
  opacity:1;
  animation-delay:0s;
}

.canvas-wrap .frame-two{
  animation-delay:0s;
}

.canvas-wrap .frame-three{
  animation-delay:0s;
}

.real-canvas .selection-box{
  border-color:#5b6cf7;
  box-shadow:0 0 0 5px rgba(91,108,247,.14);
  animation:editor-selection-demo 10s ease-in-out infinite;
}

.real-canvas .selection-box span{
  background:#5b6cf7;
}

.editor-cursor{
  position:absolute;
  left:52%;
  top:54%;
  z-index:8;
  width:18px;
  height:24px;
  background:#eef4ff;
  clip-path:polygon(0 0,0 100%,34% 78%,48% 100%,64% 92%,50% 70%,78% 70%);
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.48));
  animation:editor-cursor-demo 10s ease-in-out infinite;
}

.edit-caption{
  position:absolute;
  left:50%;
  top:50%;
  z-index:7;
  transform:translate(-50%,-50%);
  min-width:116px;
  min-height:30px;
  pointer-events:none;
}

.edit-caption span{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:7px 10px;
  border-radius:8px;
  background:linear-gradient(135deg,#22c3b5,#5b6cf7);
  color:#fff;
  font-size:11px;
  font-weight:900;
  opacity:0;
  transform:translateY(6px);
  box-shadow:0 12px 24px rgba(0,0,0,.34);
  white-space:nowrap;
}

.edit-caption .step-a{animation:editor-caption-a 10s ease-in-out infinite}
.edit-caption .step-b{animation:editor-caption-b 10s ease-in-out infinite}
.edit-caption .step-c{animation:editor-caption-c 10s ease-in-out infinite}
.edit-caption .step-d{animation:editor-caption-d 10s ease-in-out infinite}

.tool-select,
.tool-text,
.tool-image,
.tool-save,
.tool-remove-bg,
.tool-enhance,
.layer-price,
.layer-logo,
.layer-image,
.anim-text-field,
.anim-field{
  animation-duration:10s;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}

.tool-select{animation-name:editor-tool-select}
.tool-text{animation-name:editor-tool-text}
.tool-image{animation-name:editor-tool-image}
.tool-save{animation-name:editor-tool-save}
.tool-remove-bg{animation-name:editor-tool-image}
.tool-enhance{animation-name:editor-tool-image}
.layer-price{animation-name:editor-layer-price}
.layer-logo{animation-name:editor-layer-logo}
.layer-image{animation-name:editor-layer-image}
.anim-field{animation-name:editor-field-pulse}
.anim-text-field{animation-name:editor-text-typing}

@keyframes editor-frame-cycle{
  0%,34%{opacity:1;transform:scale(1)}
  39%,100%{opacity:0;transform:scale(1.035)}
}

.canvas-wrap .frame-two{
  animation-name:editor-frame-two;
}

.canvas-wrap .frame-three{
  animation-name:editor-frame-three;
}

@keyframes editor-frame-two{
  0%,38%{opacity:0;transform:scale(1.035)}
  44%,66%{opacity:1;transform:scale(1)}
  72%,100%{opacity:0;transform:scale(1.035)}
}

@keyframes editor-frame-three{
  0%,68%{opacity:0;transform:scale(1.035)}
  74%,94%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.035)}
}

@keyframes editor-selection-demo{
  0%,20%{left:50%;top:58%;width:188px;height:64px}
  28%,44%{left:50%;top:43%;width:210px;height:54px}
  52%,70%{left:49%;top:54%;width:235px;height:190px}
  78%,100%{left:50%;top:50%;width:260px;height:260px}
}

@keyframes editor-cursor-demo{
  0%{left:20%;top:26%}
  16%{left:52%;top:58%}
  32%{left:82%;top:26%}
  48%{left:54%;top:42%}
  64%{left:83%;top:44%}
  80%{left:55%;top:55%}
  100%{left:91%;top:8%}
}

@keyframes editor-caption-a{
  4%,22%{opacity:1;transform:translateY(0)}
  0%,28%,100%{opacity:0;transform:translateY(6px)}
}

@keyframes editor-caption-b{
  30%,48%{opacity:1;transform:translateY(0)}
  0%,26%,54%,100%{opacity:0;transform:translateY(6px)}
}

@keyframes editor-caption-c{
  56%,74%{opacity:1;transform:translateY(0)}
  0%,52%,80%,100%{opacity:0;transform:translateY(6px)}
}

@keyframes editor-caption-d{
  82%,96%{opacity:1;transform:translateY(0)}
  0%,78%,100%{opacity:0;transform:translateY(6px)}
}

@keyframes editor-tool-select{
  0%,24%{background:#1d2235;color:#dde2f0;border-color:#5b6cf7}
  30%,100%{background:transparent;color:#7080a8;border-color:#2a3050}
}

@keyframes editor-tool-text{
  0%,26%,52%,100%{background:transparent;color:#7080a8;border-color:#2a3050}
  30%,48%{background:rgba(91,108,247,.18);color:#dde2f0;border-color:#5b6cf7}
}

@keyframes editor-tool-image{
  0%,52%,78%,100%{background:#161a26;color:#dde2f0;border-color:#2a3050}
  56%,74%{background:rgba(34,195,181,.14);color:#b8fff7;border-color:rgba(34,195,181,.42)}
}

@keyframes editor-tool-save{
  0%,80%{filter:none;box-shadow:none}
  84%,96%{filter:brightness(1.16);box-shadow:0 0 0 4px rgba(91,108,247,.16)}
  100%{filter:none;box-shadow:none}
}

@keyframes editor-layer-price{
  0%,52%,100%{background:#161a26;color:#7080a8}
  28%,50%{background:rgba(91,108,247,.16);color:#dbe5ff}
}

@keyframes editor-layer-logo{
  0%,52%,78%,100%{background:#161a26;color:#7080a8}
  56%,74%{background:rgba(34,195,181,.12);color:#b8fff7}
}

@keyframes editor-layer-image{
  0%,54%,100%{background:#161a26;color:#7080a8}
  58%,78%{background:rgba(34,195,181,.12);color:#b8fff7}
}

@keyframes editor-field-pulse{
  0%,28%,100%{box-shadow:none;border-color:#222840}
  34%,48%{box-shadow:0 0 0 4px rgba(91,108,247,.12);border-color:#5b6cf7}
}

@keyframes editor-text-typing{
  0%,30%{background:linear-gradient(90deg,#161a26 0 18%,transparent 18% 100%),#161a26}
  36%{background:linear-gradient(90deg,rgba(91,108,247,.28) 0 36%,transparent 36% 100%),#161a26}
  44%,58%{background:linear-gradient(90deg,rgba(91,108,247,.28) 0 72%,transparent 72% 100%),#161a26}
  64%,100%{background:#161a26}
}

.mini-panel-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  padding:10px 12px;
  border-bottom:1px solid #222840;
}

.mini-panel-tabs span{
  display:grid;
  place-items:center;
  min-height:34px;
  border-radius:10px;
  border:1px solid #222840;
  background:#161a26;
  color:#7080a8;
  font-size:10px;
  font-weight:900;
  text-align:center;
}

.mini-panel-tabs span.active{
  color:#dbe5ff;
  border-color:#5b6cf7;
  background:rgba(91,108,247,.16);
}

.side-mini-section{
  margin:10px 12px 0;
  padding:11px;
  border:1px solid #222840;
  border-radius:10px;
  background:rgba(255,255,255,.03);
}

.side-mini-section b,
.mini-layers b{
  display:block;
  margin-bottom:4px;
  color:#dde2f0;
  font-size:11px;
  font-weight:900;
}

.side-mini-section small{
  display:block;
  margin-bottom:10px;
  color:#3d4a6a;
  font-size:10px;
  line-height:1.35;
}

.side-mini-section label{
  display:block;
  margin:9px 0 5px;
  color:#3d4a6a;
  font-size:10px;
  font-weight:900;
}

.tool-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}

.side-mini-section .tool-line{
  height:29px;
  background:#161a26;
  border-color:#222840;
}

.side-mini-section button{
  width:100%;
  min-height:29px;
  margin-top:6px;
  border-radius:8px;
  border:1px solid #2a3050;
  background:#161a26;
  color:#dde2f0;
  font-size:11px;
  font-weight:800;
}

.side-mini-section button.primary{
  background:#5b6cf7;
  border-color:#5b6cf7;
  color:#fff;
}

.mini-layers{
  margin:10px 12px;
  padding:11px;
  border:1px solid #222840;
  border-radius:10px;
  background:rgba(255,255,255,.03);
}

.mini-layers span{
  display:block;
  margin-top:6px;
  padding:7px 8px;
  border-radius:8px;
  background:#161a26;
  color:#7080a8;
  font-size:10px;
  font-weight:800;
}

@media(prefers-reduced-motion:reduce){
  .motion-bg::before,
  .canvas-wrap .anim-frame,
  .real-canvas .selection-box,
  .editor-cursor,
  .edit-caption span,
  .tool-select,
  .tool-text,
  .tool-image,
  .tool-save,
  .tool-remove-bg,
  .tool-enhance,
  .layer-price,
  .layer-logo,
  .layer-image,
  .anim-text-field,
  .anim-field{
    animation:none;
  }

  .canvas-wrap .frame-one{
    opacity:1;
  }
}

@media(max-width:1120px){
  .site-nav{
    padding-left:28px;
    padding-right:28px;
  }

  .hero{
    grid-template-columns:1fr;
    padding-left:28px;
    padding-right:28px;
  }

  h1{
    font-size:56px;
  }

  .hero-visual{
    min-height:560px;
  }

  .section{
    padding-left:28px;
    padding-right:28px;
  }

  .editor-showcase{
    grid-template-columns:1fr;
  }

  .editor-layout{
    grid-template-columns:140px minmax(0,1fr);
  }

  .editor-tools{
    grid-column:1 / -1;
    border-left:0;
    border-top:1px solid rgba(16,24,40,.10);
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .editor-tools b{
    grid-column:1 / -1;
    margin-bottom:0;
  }

  .editor-tools label{
    margin:0;
  }

  .editor-tools button{
    margin-top:0;
  }

  .showcase .section-head{
    padding-left:28px;
    padding-right:28px;
  }
}

@media(max-width:760px){
  body::before{
    background:
      linear-gradient(110deg,transparent 0 58%,rgba(24,184,199,.10) 58% 78%,transparent 78%),
      repeating-linear-gradient(90deg,rgba(16,24,40,.035) 0 1px,transparent 1px 64px);
  }

  .site-nav{
    padding:12px 16px;
  }

  .site-nav.scrolled{
    padding-top:10px;
    padding-bottom:10px;
  }

  .nav-links{
    gap:10px;
  }

  .nav-links .btn-primary{
    min-height:42px;
    padding:0 12px;
    font-size:12px;
  }

  .hero{
    min-height:auto;
    padding:100px 16px 48px;
  }

  .hero::before{
    top:410px;
    width:100%;
    height:360px;
  }

  .motion-bg::before,
  .motion-bg::after{
    display:none;
  }

  h1{
    font-size:42px;
    line-height:1.08;
  }

  .hero-sub{
    font-size:16px;
    line-height:1.65;
  }

  .hero-actions{
    display:grid;
    gap:10px;
  }

  .proof-strip{
    grid-template-columns:1fr;
    gap:8px;
  }

  .proof-pill{
    min-height:42px;
    align-items:flex-start;
    justify-content:flex-start;
  }

  .hero-visual{
    min-height:470px;
  }

  .device-frame{
    right:0;
    top:28px;
    width:82%;
    min-height:390px;
  }

  .poster-stack{
    top:80px;
    width:48%;
  }

  .poster{
    min-height:118px;
  }

  .poster:nth-child(2){
    margin-left:20px;
  }

  .hero-note{
    right:6px;
    bottom:0;
    width:220px;
  }

  .metric-band{
    margin:0 16px;
  }

  .metric{
    border-color:rgba(16,24,40,.08);
  }

  .section{
    padding:52px 16px;
  }

  .showcase .section-head{
    padding:0 16px;
  }

  .section-title{
    font-size:30px;
    line-height:1.1;
  }

  .showcase-card{
    width:min(240px,72vw);
    height:272px;
  }

  .media-board{
    min-height:390px;
  }

  .editor-shell{
    min-height:auto;
  }

  .editor-layout{
    grid-template-columns:1fr;
  }

  .editor-sidebar{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    border-right:0;
    border-bottom:1px solid rgba(16,24,40,.10);
  }

  .editor-sidebar b{
    width:100%;
  }

  .editor-sidebar span{
    margin-bottom:0;
    padding:9px 10px;
  }

  .editor-canvas{
    min-height:390px;
    padding:20px;
  }

  .editor-canvas img{
    width:min(270px,82%);
  }

  .editor-tools{
    grid-template-columns:1fr;
  }

  .tour-points{
    gap:12px;
  }

  .tour-point{
    min-height:auto;
    padding:18px;
  }

  .tour-point h3{
    font-size:18px;
    line-height:1.25;
  }

  .tour-point p{
    font-size:14px;
    line-height:1.55;
  }

  .selection-box{
    width:160px;
    height:54px;
  }

  .template-grid{
    gap:10px;
  }

  .template-grid figure{
    min-height:180px;
  }

  .cta-box{
    grid-template-columns:1fr;
    padding:24px 18px;
  }

  .cta-box h2{
    font-size:30px;
    line-height:1.06;
  }

  .cta-box p{
    font-size:15px;
    line-height:1.6;
  }

  .cta-actions .btn{
    width:100%;
  }

  .cta-preview{
    min-height:260px;
    transform:none;
  }
}

/* Hero collage spacing: keep the third visual clear of the metrics band. */
.hero{
  padding-bottom:118px;
}

.hero-visual{
  min-height:560px;
}

.device-frame{
  top:38px;
  right:18px;
  width:min(470px,76%);
  min-height:500px;
}

.poster-stack{
  top:124px;
  width:250px;
  gap:12px;
}

.poster{
  min-height:144px;
}

.poster:nth-child(2){
  margin-left:34px;
}

.poster:nth-child(3){
  margin-left:8px;
  transform:rotate(1deg);
}

.hero-note{
  right:18px;
  bottom:20px;
}

.metric-band{
  margin-top:-54px;
}

@media(max-width:1120px){
  .hero{
    padding-bottom:82px;
  }

  .hero-visual{
    min-height:520px;
  }
}

@media(max-width:760px){
  .hero{
    padding-bottom:56px;
  }

  .hero-visual{
    min-height:430px;
  }

  .device-frame{
    top:18px;
    right:0;
    width:75%;
    min-height:360px;
  }

  .poster-stack{
    top:66px;
    width:45%;
    gap:8px;
  }

  .poster{
    min-height:104px;
  }

  .poster:nth-child(2){
    margin-left:16px;
  }

  .poster:nth-child(3){
    display:none;
  }

  .hero-note{
    bottom:0;
  }

  .metric-band{
    margin-top:0;
  }
}

@media(max-width:1120px){
  .real-editor-layout{
    grid-template-columns:210px minmax(0,1fr);
  }

  .real-props{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    padding:10px 12px;
    border-left:0;
    border-top:1px solid #222840;
  }

  .mini-panel-tabs,
  .side-mini-section,
  .mini-layers{
    margin:0;
    padding:10px;
  }

  .mini-panel-tabs{
    grid-column:1 / -1;
    border-bottom:0;
    padding:0;
  }
}

@media(max-width:760px){
  html,
  body,
  .page{
    background:#090b10;
  }

  body{
    color:#f7fbff;
  }

  .site-nav{
    background:rgba(9,11,16,.94);
    border-bottom-color:rgba(221,226,240,.10);
    box-shadow:0 16px 36px rgba(0,0,0,.28);
  }

  .brand-name{
    color:#f7fbff;
  }

  .hero{
    background:
      radial-gradient(circle at 72% 24%,rgba(34,195,181,.18),transparent 34%),
      radial-gradient(circle at 100% 0,rgba(91,108,247,.16),transparent 36%),
      linear-gradient(180deg,#090b10,#0f1118);
  }

  .hero::after{
    background:linear-gradient(180deg,transparent,rgba(9,11,16,.92));
  }

  .hero-actions .btn-dark,
  .hero-actions .btn-light{
    background:rgba(15,17,24,.96);
    border-color:rgba(221,226,240,.16);
    color:#f7fbff;
  }

  .hero-sub,
  .section-sub{
    color:#a8b3cf;
  }

  .metric-band{
    margin:0 16px;
  }

  .real-editor-shell{
    min-height:auto;
  }

  .real-editor-topbar{
    overflow:hidden;
  }

  .real-editor-topbar .mini-tool:nth-of-type(n+3),
  .real-editor-topbar .mini-sep{
    display:none;
  }

  .real-editor-layout{
    grid-template-columns:1fr;
  }

  .real-library{
    display:block;
    border-right:0;
    border-bottom:1px solid #222840;
  }

  .mini-tabs{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .mini-template-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .real-canvas{
    min-height:420px;
  }

  .canvas-wrap{
    width:min(292px,88%);
  }

  .real-props{
    grid-template-columns:1fr;
    padding:10px;
  }

  .mini-panel-tabs{
    grid-template-columns:1fr 1fr;
  }

  footer{
    gap:10px;
    padding:24px 16px;
  }
}

/* Direct response landing sections inspired by the reference funnel. */
.problem-section,
.bonus-section,
.faq-section{
  background:#090b10;
}

.truth-section,
.trust-section{
  background:linear-gradient(180deg,#0d1018,#0a0d14);
  border-top:1px solid rgba(221,226,240,.08);
  border-bottom:1px solid rgba(221,226,240,.08);
}

.pain-grid,
.truth-grid,
.bonus-grid,
.faq-grid{
  display:grid;
  gap:18px;
}

.pain-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.truth-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.bonus-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.faq-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.pain-card,
.truth-card,
.bonus-card,
.faq-item,
.trust-panel{
  background:linear-gradient(180deg,rgba(22,26,38,.98),rgba(13,16,25,.98));
  border:1px solid rgba(221,226,240,.10);
  border-radius:8px;
  box-shadow:var(--soft-shadow);
}

.pain-card,
.truth-card,
.bonus-card{
  min-height:238px;
  padding:24px;
}

.pain-card .svg-ic{
  width:30px;
  height:30px;
  margin-bottom:18px;
  color:#22c3b5;
}

.pain-card h3,
.truth-card h3,
.bonus-card h3{
  margin-bottom:10px;
  color:var(--ink);
  font-size:21px;
  line-height:1.18;
}

.pain-card p,
.truth-card p,
.bonus-card p,
.faq-item p{
  color:var(--muted);
  font-weight:600;
  line-height:1.68;
}

.truth-card span{
  display:inline-grid;
  place-items:center;
  width:42px;
  height:42px;
  margin-bottom:18px;
  border-radius:8px;
  background:rgba(255,255,255,.05);
  color:#8fa0c2;
  font-weight:900;
}

.truth-card.positive{
  border-color:rgba(34,195,181,.30);
  background:linear-gradient(180deg,rgba(34,195,181,.13),rgba(13,16,25,.98));
}

.truth-card.positive span{
  background:linear-gradient(135deg,#22c3b5,#5b6cf7);
  color:#fff;
}

.bonus-label{
  display:inline-flex;
  margin-bottom:16px;
  padding:7px 10px;
  border-radius:8px;
  background:rgba(34,195,181,.10);
  border:1px solid rgba(34,195,181,.24);
  color:#b8fff7;
  font-size:11px;
  font-weight:900;
}

.bonus-card strong{
  display:inline-flex;
  margin-top:18px;
  color:#f59e0b;
  font-size:13px;
  font-weight:900;
  text-transform:uppercase;
}

.trust-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,.72fr);
  gap:28px;
  align-items:center;
}

.trust-copy .section-sub{
  max-width:720px;
  margin-top:16px;
}

.trust-panel{
  display:grid;
  gap:14px;
  padding:22px;
}

.trust-panel div{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:6px 14px;
  align-items:center;
  padding:16px;
  border-radius:8px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(221,226,240,.08);
}

.trust-panel .svg-ic{
  grid-row:span 2;
  width:30px;
  height:30px;
  color:#22c3b5;
}

.trust-panel strong{
  color:var(--ink);
  font-size:17px;
  font-weight:900;
}

.trust-panel span{
  color:var(--muted);
  font-size:14px;
  font-weight:600;
}

.faq-item{
  padding:0;
  overflow:hidden;
}

.faq-item summary{
  cursor:pointer;
  padding:20px 22px;
  color:var(--ink);
  font-size:17px;
  font-weight:900;
  list-style:none;
}

.faq-item summary::-webkit-details-marker{
  display:none;
}

.faq-item summary::after{
  content:"+";
  float:right;
  color:#22c3b5;
  font-size:22px;
  line-height:1;
}

.faq-item[open] summary::after{
  content:"-";
}

.faq-item p{
  padding:0 22px 22px;
}

@media(max-width:1120px){
  .pain-grid,
  .bonus-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:760px){
  .pain-grid,
  .truth-grid,
  .bonus-grid,
  .faq-grid,
  .trust-grid{
    grid-template-columns:1fr;
  }

  .pain-card,
  .truth-card,
  .bonus-card{
    min-height:auto;
  }
}

/* ClickAds-like animated stage, adapted for PublicidadIA. */
body{
  background:
    radial-gradient(circle at 18% 10%,rgba(34,195,181,.16),transparent 28%),
    radial-gradient(circle at 82% 0,rgba(91,108,247,.20),transparent 34%),
    radial-gradient(circle at 50% 72%,rgba(20,184,166,.08),transparent 38%),
    linear-gradient(180deg,#06070b 0%,#0b0d14 46%,#070910 100%);
}

body::before{
  background:
    linear-gradient(118deg,transparent 0 18%,rgba(34,195,181,.10) 31%,transparent 44% 56%,rgba(91,108,247,.11) 71%,transparent 86%),
    radial-gradient(circle at 22% 22%,rgba(34,195,181,.14),transparent 34%),
    radial-gradient(circle at 82% 18%,rgba(91,108,247,.16),transparent 36%);
  background-size:220% 220%,140% 140%,160% 160%;
  animation:ad-bg-flow 18s ease-in-out infinite alternate;
  opacity:.86;
  mask-image:linear-gradient(to bottom,black 0 82%,transparent 100%);
}

.hero{
  background:
    linear-gradient(92deg,rgba(6,7,11,.98) 0%,rgba(6,7,11,.93) 43%,rgba(7,13,19,.82) 100%),
    radial-gradient(circle at 74% 24%,rgba(34,195,181,.28),transparent 28%),
    radial-gradient(circle at 100% 12%,rgba(91,108,247,.30),transparent 34%),
    #06070b;
}

.hero::before{
  inset:72px -9vw auto auto;
  width:min(860px,62vw);
  height:74%;
  border:1px solid rgba(34,195,181,.20);
  background:
    linear-gradient(135deg,rgba(34,195,181,.16),rgba(91,108,247,.12) 52%,rgba(255,255,255,.025));
  clip-path:polygon(18% 0,100% 0,100% 100%,0 100%,8% 16%);
  filter:drop-shadow(0 0 64px rgba(34,195,181,.10));
  animation:ad-panel-breathe 8s ease-in-out infinite alternate;
}

.hero::after{
  inset:0;
  width:auto;
  height:auto;
  border:0;
  clip-path:none;
  background:
    linear-gradient(rgba(125,211,252,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(125,211,252,.035) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:linear-gradient(90deg,transparent 0 38%,black 55%,transparent 100%);
  opacity:.45;
  transform:perspective(900px) rotateX(62deg) translateY(48px) scale(1.35);
  transform-origin:center bottom;
  animation:ad-grid-drift 20s linear infinite;
}

.motion-bg{
  z-index:1;
  opacity:1;
}

.motion-bg::before{
  inset:-22%;
  background:
    conic-gradient(from 120deg at 72% 34%,transparent 0 24%,rgba(34,195,181,.30) 28%,transparent 36%,rgba(91,108,247,.26) 48%,transparent 60%),
    linear-gradient(112deg,transparent 0 32%,rgba(34,195,181,.20) 43%,transparent 54% 100%);
  filter:blur(24px);
  opacity:.72;
  animation:ad-aurora 16s ease-in-out infinite alternate;
}

.motion-bg::after{
  inset:-18%;
  background:
    linear-gradient(105deg,transparent 0 18%,rgba(255,255,255,.08) 24%,transparent 30% 100%),
    linear-gradient(286deg,transparent 0 48%,rgba(34,195,181,.16) 56%,transparent 68% 100%);
  opacity:.55;
  animation:ad-light-sweep 9s ease-in-out infinite;
}

.ambient-panel{
  border-radius:8px;
  background:linear-gradient(145deg,rgba(17,25,40,.68),rgba(15,17,24,.14));
  border:1px solid rgba(125,211,252,.16);
  box-shadow:0 28px 80px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  opacity:.38;
  animation:ad-card-float 12s ease-in-out infinite;
}

.ambient-panel:nth-child(1){
  right:7%;
  top:13%;
  width:250px;
  height:154px;
}

.ambient-panel:nth-child(2){
  right:31%;
  bottom:16%;
  width:180px;
  height:240px;
  animation-delay:1.4s;
}

.ambient-panel:nth-child(3){
  left:49%;
  top:18%;
  width:150px;
  height:112px;
  animation-delay:2.8s;
}

.ad-particle{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:999px;
  background:#22c3b5;
  box-shadow:0 0 18px rgba(34,195,181,.72);
  opacity:.72;
  animation:ad-particle-float 10s ease-in-out infinite;
}

.ad-particle:nth-of-type(4){left:15%;top:28%;animation-delay:.2s}
.ad-particle:nth-of-type(5){left:33%;top:72%;width:5px;height:5px;animation-delay:1.1s;background:#5b6cf7;box-shadow:0 0 18px rgba(91,108,247,.72)}
.ad-particle:nth-of-type(6){left:58%;top:16%;animation-delay:2.2s}
.ad-particle:nth-of-type(7){left:72%;top:67%;width:9px;height:9px;animation-delay:3s}
.ad-particle:nth-of-type(8){left:87%;top:32%;width:5px;height:5px;animation-delay:4.1s;background:#f59e0b;box-shadow:0 0 18px rgba(245,158,11,.62)}
.ad-particle:nth-of-type(9){left:44%;top:42%;animation-delay:5.1s;background:#5b6cf7;box-shadow:0 0 18px rgba(91,108,247,.72)}
.ad-particle:nth-of-type(10){left:8%;top:62%;width:5px;height:5px;animation-delay:6.2s}
.ad-particle:nth-of-type(11){left:94%;top:78%;animation-delay:7s}

.global-particles{
  position:fixed;
  inset:0;
  z-index:3;
  pointer-events:none;
  overflow:hidden;
  opacity:.78;
  mix-blend-mode:screen;
}

.global-particles span{
  position:absolute;
  width:4px;
  height:4px;
  border-radius:999px;
  background:#22c3b5;
  box-shadow:0 0 16px rgba(34,195,181,.80);
  opacity:.36;
  animation:global-particle-drift 18s ease-in-out infinite;
}

.global-particles span:nth-child(3n){
  background:#5b6cf7;
  box-shadow:0 0 16px rgba(91,108,247,.72);
}

.global-particles span:nth-child(5n){
  background:#f59e0b;
  box-shadow:0 0 16px rgba(245,158,11,.58);
}

.global-particles span:nth-child(1){left:6%;top:12%;animation-delay:.2s}
.global-particles span:nth-child(2){left:18%;top:34%;animation-delay:1.1s}
.global-particles span:nth-child(3){left:31%;top:18%;animation-delay:2s}
.global-particles span:nth-child(4){left:46%;top:48%;animation-delay:3s}
.global-particles span:nth-child(5){left:61%;top:24%;animation-delay:4s}
.global-particles span:nth-child(6){left:76%;top:40%;animation-delay:5s}
.global-particles span:nth-child(7){left:88%;top:18%;animation-delay:6s}
.global-particles span:nth-child(8){left:11%;top:68%;animation-delay:7s}
.global-particles span:nth-child(9){left:24%;top:82%;animation-delay:8s}
.global-particles span:nth-child(10){left:38%;top:62%;animation-delay:9s}
.global-particles span:nth-child(11){left:52%;top:76%;animation-delay:10s}
.global-particles span:nth-child(12){left:68%;top:88%;animation-delay:11s}
.global-particles span:nth-child(13){left:82%;top:66%;animation-delay:12s}
.global-particles span:nth-child(14){left:94%;top:78%;animation-delay:13s}
.global-particles span:nth-child(15){left:4%;top:92%;animation-delay:14s}
.global-particles span:nth-child(16){left:15%;top:52%;animation-delay:15s}
.global-particles span:nth-child(17){left:29%;top:42%;animation-delay:16s}
.global-particles span:nth-child(18){left:43%;top:92%;animation-delay:17s}
.global-particles span:nth-child(19){left:57%;top:6%;animation-delay:18s}
.global-particles span:nth-child(20){left:72%;top:55%;animation-delay:19s}
.global-particles span:nth-child(21){left:86%;top:96%;animation-delay:20s}
.global-particles span:nth-child(22){left:97%;top:30%;animation-delay:21s}
.global-particles span:nth-child(23){left:34%;top:7%;animation-delay:22s}
.global-particles span:nth-child(24){left:63%;top:63%;animation-delay:23s}

.showcase-track{
  gap:20px;
  animation-duration:58s;
}

.showcase-card{
  width:292px;
  height:372px;
}

.showcase-card img{
  transition:transform .45s ease,filter .45s ease;
}

.showcase-card:hover img{
  transform:scale(1.045);
  filter:saturate(1.08) contrast(1.05);
}

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

.pain-visual{
  position:relative;
  height:176px;
  overflow:hidden;
  background:#101621;
  border-bottom:1px solid rgba(221,226,240,.10);
}

.pain-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 26%,rgba(9,11,16,.78));
}

.pain-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.04);
  animation:pain-image-drift 9s ease-in-out infinite alternate;
}

.pain-window,
.pain-editor-ui,
.pain-phone,
.pain-download-board{
  position:absolute;
  inset:16px;
  z-index:1;
  border-radius:8px;
  border:1px solid rgba(221,226,240,.16);
  background:linear-gradient(180deg,rgba(18,24,35,.96),rgba(8,12,19,.96));
  box-shadow:0 22px 44px rgba(0,0,0,.26);
  overflow:hidden;
}

.pain-window{
  transform:rotate(-1deg);
  animation:pain-card-breathe 7s ease-in-out infinite;
}

.pain-bar{
  height:30px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 10px;
  border-bottom:1px solid rgba(221,226,240,.10);
  color:#dfe6f4;
  font-size:10px;
  font-weight:900;
}

.pain-bar i{
  width:7px;
  height:7px;
  border-radius:999px;
  background:#ff5f57;
}

.pain-bar i:nth-child(2){background:#febc2e}
.pain-bar i:nth-child(3){background:#28c840;margin-right:4px}

.pain-creator-body{
  display:grid;
  gap:10px;
  padding:13px;
}

.pain-prompt-line{
  min-height:36px;
  border-radius:7px;
  padding:9px 10px;
  background:rgba(255,255,255,.07);
  color:#f6fbff;
  font-size:11px;
  font-weight:800;
  line-height:1.35;
  overflow:hidden;
  white-space:nowrap;
  width:0;
  animation:pain-type 7s steps(72,end) infinite;
}

.pain-controls{
  display:flex;
  gap:6px;
}

.pain-controls em{
  flex:1;
  padding:7px 5px;
  border-radius:7px;
  background:rgba(34,195,181,.13);
  border:1px solid rgba(34,195,181,.22);
  color:#b9fff7;
  font-size:10px;
  font-style:normal;
  font-weight:900;
  text-align:center;
}

.pain-generation{
  position:relative;
  min-height:56px;
  border-radius:8px;
  padding:10px;
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(34,195,181,.24),rgba(91,108,247,.18)),
    radial-gradient(circle at 26% 30%,rgba(255,255,255,.34),transparent 32%);
}

.pain-generation strong{
  position:relative;
  z-index:1;
  color:#fff;
  font-size:12px;
}

.pain-generation span{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  height:7px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  overflow:hidden;
}

.pain-generation span::before{
  content:"";
  display:block;
  height:100%;
  width:46%;
  border-radius:inherit;
  background:linear-gradient(90deg,#22c3b5,#fff);
  animation:pain-progress 3.2s ease-in-out infinite;
}

.pain-editor-ui{
  display:grid;
  grid-template-columns:38px 1fr 50px;
  gap:8px;
  padding:10px;
  animation:pain-card-breathe 7.5s ease-in-out infinite .6s;
}

.pain-editor-ui aside,
.pain-properties{
  display:grid;
  gap:7px;
  align-content:start;
  padding:8px 6px;
  border-radius:7px;
  background:rgba(255,255,255,.055);
}

.pain-editor-ui aside i,
.pain-properties i{
  height:18px;
  border-radius:5px;
  background:rgba(221,226,240,.15);
}

.pain-canvas{
  position:relative;
  border-radius:8px;
  background:
    linear-gradient(160deg,rgba(34,195,181,.88),rgba(91,108,247,.72)),
    linear-gradient(180deg,#fff,#dce8ff);
  overflow:hidden;
}

.pain-poster-mini{
  position:absolute;
  inset:18px 18px 22px;
  border-radius:7px;
  background:
    linear-gradient(180deg,transparent 0 46%,rgba(0,0,0,.46) 47%),
    radial-gradient(circle at 68% 30%,#fff 0 16%,transparent 17%),
    linear-gradient(135deg,#22c3b5,#101621);
  box-shadow:0 16px 32px rgba(0,0,0,.28);
}

.pain-selection{
  position:absolute;
  left:22px;
  right:22px;
  bottom:34px;
  z-index:2;
  padding:7px 8px;
  border:1px dashed #fff;
  border-radius:6px;
  color:#fff;
  font-size:10px;
  font-weight:900;
  text-align:center;
  animation:pain-selection-pulse 2.4s ease-in-out infinite;
}

.pain-properties b{
  color:#dfe6f4;
  font-size:9px;
}

.pain-phone{
  inset:13px 34px 13px 34px;
  padding:14px 10px;
  display:grid;
  align-content:center;
  gap:10px;
  border-radius:18px;
  animation:pain-card-breathe 7s ease-in-out infinite .2s;
}

.pain-chat{
  max-width:86%;
  border-radius:12px;
  padding:9px 10px;
  color:#fff;
  font-size:10px;
  font-weight:800;
  line-height:1.32;
  box-shadow:0 12px 24px rgba(0,0,0,.18);
}

.pain-chat.wa{
  background:#19b56d;
  animation:pain-bubble-in 5s ease-in-out infinite;
}

.pain-chat.ig{
  justify-self:end;
  background:linear-gradient(135deg,#e5435e,#8c5cf7);
  animation:pain-bubble-in 5s ease-in-out infinite .75s;
}

.pain-typing{
  display:flex;
  gap:4px;
  width:max-content;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
}

.pain-typing i{
  width:5px;
  height:5px;
  border-radius:999px;
  background:#dfe6f4;
  animation:pain-dot 1.2s ease-in-out infinite;
}

.pain-typing i:nth-child(2){animation-delay:.16s}
.pain-typing i:nth-child(3){animation-delay:.32s}

.pain-download-board{
  display:grid;
  grid-template-columns:72px 1fr;
  gap:12px;
  align-items:center;
  padding:14px;
  animation:pain-card-breathe 7s ease-in-out infinite .4s;
}

.pain-download-preview{
  height:98px;
  border-radius:8px;
  background:
    linear-gradient(180deg,transparent 0 58%,rgba(0,0,0,.52) 59%),
    radial-gradient(circle at 50% 28%,#fff 0 18%,transparent 19%),
    linear-gradient(135deg,#22c3b5,#5b6cf7);
  box-shadow:0 15px 26px rgba(0,0,0,.25);
  animation:pain-download-pop 3.6s ease-in-out infinite;
}

.pain-download-info{
  display:grid;
  gap:8px;
}

.pain-download-info b{
  color:#fff;
  font-size:13px;
}

.pain-download-info i{
  height:8px;
  border-radius:999px;
  background:rgba(221,226,240,.16);
}

.pain-download-info i:nth-of-type(2){
  width:72%;
}

.pain-download-info button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:30px;
  border:0;
  border-radius:7px;
  background:linear-gradient(135deg,#22c3b5,#39d7c8);
  color:#041212;
  font-size:10px;
  font-weight:900;
}

.pain-download-info button .svg-ic{
  width:13px;
  height:13px;
}

.pain-download-arrow{
  position:absolute;
  right:18px;
  bottom:16px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#fff;
  color:#101621;
  box-shadow:0 16px 30px rgba(0,0,0,.28);
  animation:pain-download-arrow 2.4s ease-in-out infinite;
}

.pain-download-arrow .svg-ic{
  width:18px;
  height:18px;
}

.pain-visual span{
  position:absolute;
  left:16px;
  bottom:16px;
  z-index:2;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(9,11,16,.82);
  border:1px solid rgba(34,195,181,.28);
  color:#22c3b5;
  box-shadow:0 12px 26px rgba(0,0,0,.28);
}

.pain-card h3{
  padding:20px 22px 0;
}

.pain-card p{
  padding:0 22px 24px;
}

.editor-window-dot{
  width:9px;
  height:9px;
  border-radius:999px;
  flex:0 0 auto;
}

.editor-window-dot.red{background:#ff5f57}
.editor-window-dot.yellow{background:#febc2e}
.editor-window-dot.green{background:#28c840;margin-right:6px}

.real-editor-shell{
  position:relative;
  overflow:hidden;
}

.real-editor-shell::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg,transparent 0 38%,rgba(34,195,181,.06) 48%,transparent 60%);
  animation:editor-shell-sheen 7s ease-in-out infinite;
  z-index:2;
}

.ruler{
  position:absolute;
  z-index:2;
  background:#0f1118;
  border-color:#222840;
  opacity:.92;
}

.ruler-x{
  left:0;
  right:0;
  top:0;
  height:22px;
  border-bottom:1px solid #222840;
  background-image:repeating-linear-gradient(90deg,transparent 0 18px,rgba(112,128,168,.58) 18px 19px,transparent 19px 36px);
}

.ruler-y{
  top:0;
  bottom:0;
  left:0;
  width:22px;
  border-right:1px solid #222840;
  background-image:repeating-linear-gradient(0deg,transparent 0 18px,rgba(112,128,168,.58) 18px 19px,transparent 19px 36px);
}

.resize-handles{
  position:absolute;
  inset:16px;
  z-index:6;
  pointer-events:none;
  border:1px dashed rgba(255,255,255,.52);
  opacity:.8;
  animation:resize-handle-pulse 10s ease-in-out infinite;
}

.resize-handles i{
  position:absolute;
  width:9px;
  height:9px;
  border-radius:2px;
  background:#fff;
  box-shadow:0 0 0 2px #5b6cf7;
}

.resize-handles i:nth-child(1){left:-5px;top:-5px}
.resize-handles i:nth-child(2){right:-5px;top:-5px}
.resize-handles i:nth-child(3){left:-5px;bottom:-5px}
.resize-handles i:nth-child(4){right:-5px;bottom:-5px}

.export-toast{
  position:absolute;
  right:24px;
  bottom:24px;
  z-index:8;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:8px;
  background:rgba(18,185,129,.14);
  border:1px solid rgba(18,185,129,.32);
  color:#b8fff7;
  font-size:12px;
  font-weight:900;
  opacity:0;
  transform:translateY(10px);
  animation:export-toast-demo 10s ease-in-out infinite;
}

.editor-statusbar{
  height:32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 14px;
  border-top:1px solid #222840;
  background:#0c0e15;
  color:#7080a8;
  font-size:10px;
  font-weight:800;
}

.creator-section{
  position:relative;
  overflow:visible;
  background:
    radial-gradient(circle at 15% 15%,rgba(34,195,181,.10),transparent 32%),
    radial-gradient(circle at 85% 20%,rgba(91,108,247,.13),transparent 34%),
    linear-gradient(180deg,#090b10,#0d1018);
}

.creator-stage{
  display:grid;
  grid-template-columns:minmax(340px,520px) minmax(0,560px);
  gap:24px;
  align-items:start;
  justify-content:space-between;
}

.prompt-console,
.creator-results-panel,
.creator-card,
.capability-card{
  border:1px solid rgba(221,226,240,.10);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(22,26,38,.98),rgba(13,16,25,.98));
  box-shadow:var(--soft-shadow);
}

.prompt-console{
  min-height:520px;
  padding:0;
  display:flex;
  flex-direction:column;
  align-self:start;
  overflow:hidden;
}

.real-creator-head{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:16px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(7,14,26,.72);
}

.ai-orb-mini{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:linear-gradient(135deg,#2563eb,#22c3b5);
  color:#dffbff;
  box-shadow:0 14px 32px rgba(34,195,181,.18);
}

.real-creator-head strong,
.real-creator-head span{
  display:block;
}

.real-creator-head strong{
  color:#edf4ff;
  font-size:16px;
  font-weight:900;
}

.real-creator-head span{
  margin-top:3px;
  color:#98a3b8;
  font-size:12px;
  line-height:1.35;
}

.real-creator-head em{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:#d7deeb;
  font-size:10px;
  font-style:normal;
  font-weight:900;
  text-transform:uppercase;
  white-space:nowrap;
}

.real-creator-controls{
  display:grid;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(7,14,26,.78);
}

.chat-mode-tabs-mini{
  display:flex;
  gap:8px;
}

.chat-mode-tabs-mini span{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:36px;
  padding:0 13px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:#98a3b8;
  font-size:12px;
  font-weight:900;
}

.chat-mode-tabs-mini span.active,
.chat-mode-tabs-mini .mode-brand{
  color:#edf4ff;
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  box-shadow:0 0 0 1px rgba(255,255,255,.04);
}

.real-control-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.real-field{
  display:grid;
  gap:5px;
  min-height:74px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);
}

.real-field small,
.brand-summary-mini strong{
  color:#22c3b5;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
}

.real-field b{
  position:relative;
  min-height:19px;
  color:#edf4ff;
  font-size:14px;
}

.real-field > span,
.brand-summary-mini span{
  color:#98a3b8;
  font-size:11px;
  line-height:1.4;
}

.brand-summary-mini{
  display:grid;
  gap:5px;
  padding:10px;
  border-radius:13px;
  border:1px solid rgba(125,211,252,.14);
  background:rgba(125,211,252,.055);
}

.real-chat-panel{
  display:flex;
  flex:1;
  min-height:255px;
  flex-direction:column;
  background:rgba(4,10,20,.42);
}

.real-chat-thread{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px;
}

.real-message{
  display:flex;
  align-items:flex-start;
  gap:9px;
  max-width:88%;
}

.real-message.user{
  align-self:flex-end;
  flex-direction:row-reverse;
}

.real-message i{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:11px;
  background:rgba(125,211,252,.12);
  border:1px solid rgba(125,211,252,.16);
  color:#dffbff;
  font-style:normal;
}

.real-message.user i{
  background:rgba(245,158,11,.14);
  border-color:rgba(245,158,11,.18);
  color:#fde68a;
}

.real-message p{
  margin:0;
  padding:11px 13px;
  border-radius:17px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045);
  color:#edf4ff;
  font-size:12px;
  line-height:1.55;
}

.real-message.loading p{
  color:#b8fff7;
  background:rgba(34,195,181,.08);
  border-color:rgba(34,195,181,.18);
}

.real-message.loading p::after{
  content:"";
  display:inline-block;
  width:18px;
  height:6px;
  margin-left:7px;
  border-radius:999px;
  background:linear-gradient(90deg,#22c3b5,#5b6cf7);
  animation:creator-loading-pill 1.2s ease-in-out infinite;
}

.real-input-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) 38px auto;
  gap:8px;
  align-items:center;
  margin:0 14px 14px;
  padding:10px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015)),rgba(10,11,15,.86);
}

.real-input-wrap span{
  color:#98a3b8;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.real-input-wrap button{
  min-height:36px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:13px;
  background:rgba(255,255,255,.04);
  color:#edf4ff;
  font-weight:900;
}

.real-input-wrap button.send{
  padding:0 12px;
  background:linear-gradient(135deg,#f5f7fb,#ccd4e3);
  color:#11151c;
}

.real-progress-block{
  padding:0 16px 16px;
}

.console-head{
  display:flex;
  align-items:center;
  gap:8px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(221,226,240,.10);
}

.console-head span{
  width:9px;
  height:9px;
  border-radius:999px;
}

.console-head span:nth-child(1){background:#ff5f57}
.console-head span:nth-child(2){background:#febc2e}
.console-head span:nth-child(3){background:#28c840}
.console-head strong{margin-left:6px;color:#dde2f0;font-size:13px}

.creator-form{
  display:grid;
  gap:12px;
  margin:22px 0 16px;
}

.creator-form label,
.control-box small,
.mode-switch small{
  display:block;
  color:#22c3b5;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  margin-bottom:7px;
}

.prompt-type{
  min-height:138px;
  padding:15px;
  border-radius:8px;
  background:#0b0e16;
  border:1px solid rgba(221,226,240,.10);
  color:#dbe5ff;
  font-size:14px;
  line-height:1.55;
  overflow:hidden;
  display:grid;
  align-content:start;
  gap:8px;
}

.prompt-type p{
  position:relative;
  margin:0;
  min-height:22px;
  overflow:hidden;
  color:#dbe5ff;
}

.prompt-type p::before{
  content:">";
  margin-right:8px;
  color:#22c3b5;
  font-weight:900;
}

.prompt-type p span{
  display:inline;
  opacity:0;
  filter:blur(4px);
  transform:translateY(6px);
  animation:creator-line-reveal 11s ease-in-out infinite;
}

.prompt-type p:nth-child(1) span{animation-delay:0s}
.prompt-type p:nth-child(2) span{animation-delay:.65s}
.prompt-type p:nth-child(3) span{animation-delay:1.3s}
.prompt-type p:nth-child(4) span{animation-delay:1.95s}

.prompt-type p::after{
  content:"";
  display:inline-block;
  width:7px;
  height:16px;
  margin-left:4px;
  vertical-align:-3px;
  background:#22c3b5;
  opacity:0;
  animation:creator-line-caret 11s steps(1,end) infinite;
}

.prompt-type p:nth-child(1)::after{animation-delay:0s}
.prompt-type p:nth-child(2)::after{animation-delay:.65s}
.prompt-type p:nth-child(3)::after{animation-delay:1.3s}
.prompt-type p:nth-child(4)::after{animation-delay:1.95s}

.creator-controls{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.control-box,
.mode-switch{
  min-height:78px;
  padding:12px;
  border-radius:8px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(221,226,240,.08);
}

.control-box b{
  position:relative;
  display:block;
  min-height:24px;
  color:#eef4ff;
  font-size:15px;
}

.quality-cycle span,
.size-cycle span{
  position:absolute;
  left:0;
  top:0;
  opacity:0;
  transform:translateY(6px);
}

.quality-cycle span:nth-child(1),
.size-cycle span:nth-child(1){animation:creator-option-a 11s ease-in-out infinite}
.quality-cycle span:nth-child(2),
.size-cycle span:nth-child(2){animation:creator-option-b 11s ease-in-out infinite}
.quality-cycle span:nth-child(3),
.size-cycle span:nth-child(3){animation:creator-option-c 11s ease-in-out infinite}
.quality-cycle span:nth-child(4),
.size-cycle span:nth-child(4){animation:creator-option-d 11s ease-in-out infinite}

.mode-switch{
  grid-column:1 / -1;
}

.mode-switch div{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.mode-switch span{
  min-height:34px;
  display:grid;
  place-items:center;
  border-radius:8px;
  border:1px solid rgba(221,226,240,.10);
  color:#8fa0c2;
  font-size:13px;
  font-weight:900;
}

.free-mode{
  animation:creator-free-mode 11s ease-in-out infinite;
}

.brand-mode{
  animation:creator-brand-mode 11s ease-in-out infinite;
}

.generation-progress{
  height:10px;
  margin-top:auto;
  overflow:hidden;
  border-radius:999px;
  background:#0b0e16;
  border:1px solid rgba(221,226,240,.08);
}

.generation-progress i{
  display:block;
  height:100%;
  width:40%;
  border-radius:inherit;
  background:linear-gradient(90deg,#22c3b5,#5b6cf7,#f59e0b);
  animation:generation-progress 5.8s ease-in-out infinite;
}

.prompt-result{
  margin-top:14px;
  display:flex;
  align-items:center;
  gap:8px;
  color:#dde2f0;
  font-size:13px;
  font-weight:900;
  animation:creator-result-ready 11s ease-in-out infinite;
}

.creation-queue{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:14px;
}

.creation-queue span{
  min-height:32px;
  display:flex;
  align-items:center;
  padding:0 10px;
  border-radius:8px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(221,226,240,.08);
  color:#7080a8;
  font-size:11px;
  font-weight:900;
}

.creation-queue span:nth-child(1){animation:creator-queue-a 11s ease-in-out infinite}
.creation-queue span:nth-child(2){animation:creator-queue-b 11s ease-in-out infinite}
.creation-queue span:nth-child(3){animation:creator-queue-c 11s ease-in-out infinite}
.creation-queue span:nth-child(4){animation:creator-queue-d 11s ease-in-out infinite}

.creator-results-panel{
  padding:18px;
  width:100%;
  max-width:560px;
  justify-self:end;
}

.results-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(221,226,240,.10);
}

.results-head > span{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(34,195,181,.10);
  border:1px solid rgba(34,195,181,.24);
  color:#22c3b5;
  flex:0 0 auto;
}

.results-head b,
.results-head small{
  display:block;
}

.results-head b{
  color:#eef4ff;
  font-size:16px;
}

.results-head small{
  margin-top:3px;
  color:#8fa0c2;
  font-size:12px;
  font-weight:800;
}

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

.creator-card{
  position:relative;
  min-height:0;
  aspect-ratio:1.04;
  overflow:hidden;
  opacity:.22;
  transform:translateY(16px) scale(.96);
  animation-duration:11s;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}

.creator-card:nth-child(1){animation-name:creator-card-a}
.creator-card:nth-child(2){animation-name:creator-card-b}
.creator-card:nth-child(3){animation-name:creator-card-c}
.creator-card:nth-child(4){animation-name:creator-card-d}

.creator-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .45s ease;
  filter:saturate(1.05) contrast(1.03);
}

.creator-card:hover img{
  transform:scale(1.045);
}

.creator-card figcaption{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  padding:12px;
  border-radius:8px;
  background:rgba(9,11,16,.82);
  border:1px solid rgba(221,226,240,.10);
}

.creator-card b,
.creator-card span{
  display:block;
}

.creator-card b{
  color:#fff;
  font-size:14px;
}

.creator-card span{
  margin-top:4px;
  color:#22c3b5;
  font-size:12px;
  font-weight:900;
}

.creator-capabilities{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:54px;
}

.capability-card{
  min-height:178px;
  padding:24px;
}

.capability-card span{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  margin-bottom:16px;
  border-radius:8px;
  background:rgba(34,195,181,.10);
  border:1px solid rgba(34,195,181,.24);
  color:#22c3b5;
}

.capability-card h3{
  margin-bottom:10px;
  color:#eef4ff;
  font-size:21px;
}

.capability-card p{
  color:#8fa0c2;
  line-height:1.65;
  font-weight:600;
}

@keyframes ad-bg-flow{
  0%{background-position:0% 40%,0 0,100% 0}
  100%{background-position:100% 55%,18% 12%,82% 18%}
}

@keyframes global-particle-drift{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.20}
  45%{transform:translate3d(22px,-38px,0) scale(1.65);opacity:.72}
  70%{transform:translate3d(-18px,-12px,0) scale(.9);opacity:.36}
}

@keyframes ad-panel-breathe{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-18px,12px,0) scale(1.035)}
}

@keyframes ad-grid-drift{
  from{background-position:0 0,0 0}
  to{background-position:0 58px,58px 0}
}

@keyframes ad-aurora{
  from{transform:translate3d(-4%,0,0) rotate(0deg) scale(1)}
  to{transform:translate3d(4%,-3%,0) rotate(6deg) scale(1.06)}
}

@keyframes ad-light-sweep{
  0%,100%{transform:translate3d(-10%,0,0);opacity:.35}
  48%{transform:translate3d(8%,-2%,0);opacity:.72}
}

@keyframes ad-card-float{
  0%,100%{transform:translate3d(0,0,0) rotate(-3deg)}
  50%{transform:translate3d(18px,-20px,0) rotate(3deg)}
}

@keyframes ad-particle-float{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.36}
  50%{transform:translate3d(24px,-34px,0) scale(1.35);opacity:.95}
}

@keyframes pain-image-drift{
  from{transform:scale(1.04) translate3d(0,0,0)}
  to{transform:scale(1.11) translate3d(-3%,2%,0)}
}

@keyframes pain-card-breathe{
  0%,100%{transform:translate3d(0,0,0) rotate(-1deg)}
  50%{transform:translate3d(0,-7px,0) rotate(1deg)}
}

@keyframes pain-type{
  0%,12%{width:0}
  48%,86%{width:100%}
  100%{width:0}
}

@keyframes pain-progress{
  0%{transform:translateX(-110%)}
  55%,78%{transform:translateX(86%)}
  100%{transform:translateX(190%)}
}

@keyframes pain-selection-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.0)}
  50%{box-shadow:0 0 0 5px rgba(255,255,255,.18)}
}

@keyframes pain-bubble-in{
  0%,12%{opacity:0;transform:translateY(10px)}
  24%,100%{opacity:1;transform:translateY(0)}
}

@keyframes pain-dot{
  0%,100%{transform:translateY(0);opacity:.38}
  50%{transform:translateY(-4px);opacity:1}
}

@keyframes pain-download-pop{
  0%,100%{transform:scale(.96);filter:saturate(.92)}
  52%{transform:scale(1.03);filter:saturate(1.15)}
}

@keyframes pain-download-arrow{
  0%,100%{transform:translateY(-5px);opacity:.75}
  50%{transform:translateY(6px);opacity:1}
}

@keyframes editor-shell-sheen{
  0%,100%{transform:translateX(-80%);opacity:0}
  45%,55%{opacity:1}
  80%{transform:translateX(80%);opacity:0}
}

@keyframes resize-handle-pulse{
  0%,50%,100%{opacity:.32}
  60%,88%{opacity:.86}
}

@keyframes export-toast-demo{
  0%,78%,100%{opacity:0;transform:translateY(10px)}
  84%,95%{opacity:1;transform:translateY(0)}
}

@keyframes generation-progress{
  0%,10%{width:8%;transform:translateX(0)}
  24%{width:28%;transform:translateX(0)}
  42%{width:52%;transform:translateX(0)}
  62%{width:76%;transform:translateX(0)}
  82%,92%{width:100%;transform:translateX(0)}
  100%{width:8%;transform:translateX(0)}
}

@keyframes creator-loading-pill{
  0%,100%{opacity:.35;transform:translateY(0) scaleX(.8)}
  50%{opacity:1;transform:translateY(-1px) scaleX(1.12)}
}

@keyframes creator-line-reveal{
  0%,7%{opacity:0;filter:blur(4px);transform:translateY(6px)}
  13%,88%{opacity:1;filter:blur(0);transform:none}
  100%{opacity:0;filter:blur(4px);transform:translateY(-4px)}
}

@keyframes creator-line-caret{
  0%,6%{opacity:0}
  7%,12%{opacity:1}
  13%,100%{opacity:0}
}

@keyframes creator-option-a{
  0%,24%{opacity:1;transform:none}
  30%,100%{opacity:0;transform:translateY(-6px)}
}

@keyframes creator-option-b{
  0%,27%,51%,100%{opacity:0;transform:translateY(6px)}
  32%,47%{opacity:1;transform:none}
}

@keyframes creator-option-c{
  0%,50%,72%,100%{opacity:0;transform:translateY(6px)}
  55%,68%{opacity:1;transform:none}
}

@keyframes creator-option-d{
  0%,72%,100%{opacity:0;transform:translateY(6px)}
  77%,92%{opacity:1;transform:none}
}

@keyframes creator-free-mode{
  0%,30%,70%,100%{background:rgba(255,255,255,.035);color:#8fa0c2;border-color:rgba(221,226,240,.10)}
  52%,66%{background:rgba(34,195,181,.13);color:#b8fff7;border-color:rgba(34,195,181,.34)}
}

@keyframes creator-brand-mode{
  0%,30%,70%,100%{background:rgba(91,108,247,.16);color:#dbe5ff;border-color:#5b6cf7}
  52%,66%{background:rgba(255,255,255,.035);color:#8fa0c2;border-color:rgba(221,226,240,.10)}
}

@keyframes creator-queue-a{
  0%,18%{background:rgba(255,255,255,.035);color:#7080a8}
  24%,100%{background:rgba(34,195,181,.12);color:#b8fff7;border-color:rgba(34,195,181,.28)}
}

@keyframes creator-queue-b{
  0%,36%{background:rgba(255,255,255,.035);color:#7080a8}
  42%,100%{background:rgba(34,195,181,.12);color:#b8fff7;border-color:rgba(34,195,181,.28)}
}

@keyframes creator-queue-c{
  0%,56%{background:rgba(255,255,255,.035);color:#7080a8}
  62%,100%{background:rgba(34,195,181,.12);color:#b8fff7;border-color:rgba(34,195,181,.28)}
}

@keyframes creator-queue-d{
  0%,76%{background:rgba(255,255,255,.035);color:#7080a8}
  82%,100%{background:rgba(34,195,181,.12);color:#b8fff7;border-color:rgba(34,195,181,.28)}
}

@keyframes creator-result-ready{
  0%,80%{opacity:.42;color:#7080a8}
  86%,96%{opacity:1;color:#dde2f0}
  100%{opacity:.42;color:#7080a8}
}

@keyframes creator-card-a{
  0%,18%{opacity:.22;transform:translateY(16px) scale(.96)}
  24%,100%{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes creator-card-b{
  0%,36%{opacity:.22;transform:translateY(16px) scale(.96)}
  42%,100%{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes creator-card-c{
  0%,56%{opacity:.22;transform:translateY(16px) scale(.96)}
  62%,100%{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes creator-card-d{
  0%,76%{opacity:.22;transform:translateY(16px) scale(.96)}
  82%,100%{opacity:1;transform:translateY(0) scale(1)}
}

@media(max-width:760px){
  .hero::before{
    width:110%;
    height:54%;
    inset:auto -28% 0 auto;
  }

  .hero::after{
    transform:perspective(700px) rotateX(64deg) translateY(80px) scale(1.8);
    opacity:.34;
  }

  .motion-bg::before,
  .motion-bg::after{
    filter:blur(18px);
  }

  .ad-particle:nth-of-type(n+8){
    display:none;
  }

  .global-particles{
    opacity:.46;
  }

  .showcase-card{
    width:236px;
    height:314px;
  }

  .pain-visual{
    height:210px;
  }

  .editor-statusbar{
    display:none;
  }

  .ruler{
    display:none;
  }

  .creator-stage,
  .creator-capabilities{
    grid-template-columns:1fr;
  }

  .prompt-console{
    position:relative;
    top:auto;
  }

  .creator-gallery{
    grid-template-columns:1fr 1fr;
  }

  .creator-card{
    min-height:0;
    aspect-ratio:1;
  }

  .creator-card:nth-child(2),
  .creator-card:nth-child(4){
    transform:none;
  }
}