:root{
  --bg:#f7f5f1;--panel:#fff;--ink:#111827;--muted:#687082;--line:#e6e2da;--border:#e5e7eb;--primary:#4f46e5;--primary-dark:#4338ca;--gold:#c8a75d;--navy:#0f172a;--soft:#eef0ff;--radius:26px;--shadow:0 24px 70px rgba(17,24,39,.10)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5}a{color:inherit;text-decoration:none}.site-header{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:18px clamp(18px,4vw,64px);background:rgba(247,245,241,.86);backdrop-filter:blur(18px);border-bottom:1px solid rgba(230,226,218,.75)}.site-header.simple{position:relative}.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;font-size:20px}.brand span span{color:var(--primary)}.brand.small{font-size:16px}.brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:13px;background:linear-gradient(135deg,var(--primary),#7c3aed);color:white;font-weight:900;box-shadow:0 12px 30px rgba(79,70,229,.25)}.nav{display:flex;align-items:center;gap:24px;color:#374151;font-size:14px}.nav a:hover{color:var(--primary)}.nav-cta,.button{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:12px 18px;font-weight:750;border:1px solid transparent;transition:.2s ease}.nav-cta{background:var(--ink);color:#fff}.button.primary{background:var(--primary);color:#fff;box-shadow:0 16px 34px rgba(79,70,229,.24)}.button.primary:hover{background:var(--primary-dark);transform:translateY(-1px)}.button.secondary{background:#fff;color:var(--ink);border-color:var(--line)}.button.secondary:hover{border-color:#c9c3b8;transform:translateY(-1px)}.section-pad{padding:clamp(70px,9vw,128px) clamp(18px,4vw,64px)}.hero{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(340px,.98fr);gap:48px;align-items:center;min-height:calc(100vh - 73px)}.eyebrow{margin:0 0 14px;color:var(--primary);font-weight:850;text-transform:uppercase;letter-spacing:.12em;font-size:12px}.hero h1,.section-head h2,.split h2,.cta h2{margin:0;letter-spacing:-.055em;line-height:.98}.hero h1{font-size:clamp(48px,7vw,92px);max-width:850px}.hero-text,.section-text{font-size:clamp(18px,2vw,22px);color:var(--muted);max-width:720px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.trust-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}.trust-row span{border:1px solid var(--line);background:rgba(255,255,255,.65);border-radius:999px;padding:9px 13px;color:#4b5563;font-weight:700;font-size:13px}.hero-panel{min-width:0}.studio-shell{background:rgba(255,255,255,.78);border:1px solid rgba(230,226,218,.9);border-radius:34px;box-shadow:var(--shadow);padding:14px}.studio-topbar{height:44px;display:flex;align-items:center;gap:8px;color:#475569;padding:0 8px}.studio-topbar span{width:11px;height:11px;border-radius:50%;background:#d1d5db}.studio-topbar strong{margin-left:auto;font-size:13px}.studio-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:14px}.preview-card,.preset-stack{min-width:0}.video-frame{position:relative;min-height:470px;border-radius:25px;background:radial-gradient(circle at 45% 22%,rgba(255,255,255,.42),transparent 24%),linear-gradient(160deg,#111827,#312e81 58%,#0f172a);overflow:hidden}.video-frame:before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(0,0,0,.72));}.creator-orb{position:absolute;top:72px;left:50%;transform:translateX(-50%);width:148px;height:148px;border-radius:50%;background:linear-gradient(135deg,#fde68a,#f5d0fe 45%,#93c5fd);filter:blur(.2px);box-shadow:0 20px 80px rgba(255,255,255,.22)}.caption-line{position:absolute;left:24px;right:24px;bottom:86px;color:#fff;font-size:25px;line-height:1.08;font-weight:900;text-align:center;text-shadow:0 10px 26px rgba(0,0,0,.5)}.product-chip{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);color:#111827;background:#fff;border-radius:999px;padding:9px 15px;font-weight:850;font-size:13px}.preview-actions{display:flex;gap:8px;flex-wrap:wrap;padding:12px 2px 0}.preview-actions button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 10px;color:#374151;font-weight:750}.preset-stack{display:grid;gap:12px}.preset-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:17px;box-shadow:0 12px 30px rgba(17,24,39,.05)}.preset-card.active{border-color:rgba(79,70,229,.34);background:var(--soft)}.preset-card span{display:block;color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.preset-card strong{display:block;margin-top:5px}.logos-strip{display:flex;gap:12px;overflow:auto;padding:22px clamp(18px,4vw,64px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.58)}.logos-strip span{white-space:nowrap;background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 15px;font-weight:800;color:#334155}.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:54px}.split h2,.section-head h2,.cta h2{font-size:clamp(34px,4.4vw,62px)}.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.steps article,.feature-card,.use-case-grid article,.price-card,.cta-card{background:rgba(255,255,255,.78);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:0 18px 50px rgba(17,24,39,.06)}.steps span{display:inline-flex;color:var(--gold);font-weight:900;margin-bottom:16px}.steps h3,.feature-card h3,.use-case-grid h3,.price-card h3{margin:0 0 8px;font-size:21px;letter-spacing:-.02em}.steps p,.feature-card p,.use-case-grid p,.price-card p,.cta p{color:var(--muted);margin:0}.section-head{text-align:center;max-width:800px;margin:0 auto 34px}.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.feature-card{min-height:190px}.use-cases-section{background:var(--navy);color:#fff}.use-cases-section .eyebrow{color:#a5b4fc}.use-cases-section p{color:#cbd5e1}.use-case-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.use-case-grid article{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}.pricing-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}.price-card{position:relative}.price-card.featured{border:2px solid rgba(79,70,229,.55);transform:translateY(-8px)}.badge{position:absolute;right:18px;top:18px;background:var(--primary);color:#fff;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:850}.price{font-size:36px!important;color:var(--ink)!important;font-weight:900;margin:16px 0 2px!important;letter-spacing:-.04em}.price span{font-size:15px;color:var(--muted)}.price-card ul{padding:0;margin:20px 0;list-style:none}.price-card li{padding:8px 0;border-top:1px solid var(--line);color:#4b5563}.center{margin-left:auto;margin-right:auto}.cta-card{text-align:center;max-width:900px;margin:0 auto;background:linear-gradient(135deg,#fff,#eef0ff)}.cta-card p{max-width:680px;margin:16px auto 26px}.footer{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:30px clamp(18px,4vw,64px);border-top:1px solid var(--line);color:#64748b;background:#fff}.footer-links{display:flex;gap:18px}.legal{max-width:900px;margin:0 auto}.legal h1{font-size:48px;letter-spacing:-.04em}.legal h2{margin-top:34px}@media(max-width:1050px){.hero,.split{grid-template-columns:1fr}.feature-grid,.pricing-grid,.showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.use-case-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{min-height:auto}.studio-grid{grid-template-columns:1fr}.preset-stack{grid-template-columns:repeat(2,minmax(0,1fr))}.video-frame{min-height:420px}}@media(max-width:720px){.nav{display:none}.site-header{padding:14px 18px}.nav-cta{padding:10px 14px}.section-pad{padding:64px 18px}.hero h1{font-size:46px}.hero-text,.section-text{font-size:17px}.steps,.feature-grid,.use-case-grid,.pricing-grid,.preset-stack,.showcase-grid,.workflow-section{grid-template-columns:1fr}.price-card.featured{transform:none}.studio-shell{border-radius:24px;padding:10px}.video-frame{min-height:390px}.caption-line{font-size:22px}.footer{align-items:flex-start;flex-direction:column}}


/* Secure contact form */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1fr);
  gap: 28px;
  align-items: start;
}
.contact-note {
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}
.contact-note a { color: var(--primary); font-weight: 700; }
.contact-form {
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 22px;
  box-shadow: 0 20px 50px rgba(15,23,42,0.08);
  display: grid;
  gap: 10px;
  text-align: left;
}
.contact-form label {
  color: var(--ink);
  font-weight: 800;
  font-size: 0.92rem;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 13px 14px;
  font: inherit;
  color: var(--ink);
  background: #fff;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.contact-form textarea { resize: vertical; min-height: 130px; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: rgba(79,70,229,0.72);
  box-shadow: 0 0 0 4px rgba(79,70,229,0.12);
}
.form-button { width: 100%; margin-top: 8px; border: 0; cursor: pointer; }
.form-disclaimer { color: var(--muted); font-size: 0.82rem; line-height: 1.5; margin: 0; }
.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
@media (max-width: 820px) {
  .contact-layout { grid-template-columns: 1fr; }
  .contact-form { padding: 18px; border-radius: 20px; }
}


/* Showcase and preset-first workflow */
.showcase-section { background: linear-gradient(180deg, rgba(255,255,255,0.46), rgba(247,245,241,0)); }
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.showcase-card {
  background: rgba(255,255,255,0.82);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(17,24,39,.06);
}
.showcase-media {
  background: #fff;
  border-bottom: 1px solid var(--line);
  aspect-ratio: 1.55;
  overflow: hidden;
}
.showcase-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.showcase-body { padding: 22px; }
.showcase-body .eyebrow { margin-bottom: 10px; color: var(--gold); }
.showcase-body h3 { margin: 0 0 8px; font-size: 21px; letter-spacing: -.02em; }
.showcase-body p { margin: 0; color: var(--muted); }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tag-row span {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 7px 10px;
  color: #4b5563;
  font-size: 12px;
  font-weight: 800;
}
.text-link {
  display: inline-flex;
  margin-top: 18px;
  color: var(--primary);
  font-weight: 850;
}
.workflow-section {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 36px;
  align-items: center;
  padding-top: 0;
}
.workflow-copy h2 { margin: 0; font-size: clamp(34px,4.4vw,62px); letter-spacing: -.055em; line-height: .98; }
.workflow-mockup {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--line);
  border-radius: 34px;
  box-shadow: var(--shadow);
  padding: 16px;
}
.workflow-mockup article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 18px;
  min-height: 170px;
}
.workflow-mockup span {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 12px;
  background: var(--soft);
  color: var(--primary);
  font-weight: 900;
  margin-bottom: 18px;
}
.workflow-mockup strong { display: block; color: var(--ink); line-height: 1.1; }
.workflow-mockup p { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
@media (max-width: 1050px) {
  .workflow-section { grid-template-columns: 1fr; padding-top: 70px; }
  .workflow-mockup { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .showcase-grid, .workflow-mockup { grid-template-columns: 1fr; }
  .showcase-body { padding: 20px; }
}