/* ============================================================
   DM — Marketing pages (Homepage / Features / Pricing / About)
   All coordinates match the 1440px Ardot design exactly.
   ============================================================ */

/* ---------- HERO CAROUSEL WRAP (1440x720, 4 full-width slides) ---------- */
.hero-carousel-wrap {
  position: relative; width: 1440px; height: 720px;
  overflow: hidden;
}

/* ---- shared slide ---- */
.hero-carousel-wrap .hc-slide {
  position: absolute; inset: 0;
  width: 1440px; height: 720px;
  opacity: 0; transition: opacity .55s ease;
  pointer-events: none; overflow: hidden;
}
.hero-carousel-wrap .hc-slide.active { opacity: 1; pointer-events: auto; }

/* ===== SLIDE 1: Original Hero (text left + teal DM Logo panel) ===== */
.hc-slide .hero-left { position: absolute; left: 0; top: 0; width: 720px; height: 720px; }
.hc-slide .eyebrow {
  position: absolute; left: 80px; top: 120px;
  width: 248px; height: 36px; border-radius: 18px;
  background: var(--brand-orange-soft);
  display: flex; align-items: center; padding-left: 18px;
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px; color: var(--brand-orange);
}
.hc-slide .h1 {
  position: absolute; left: 80px; top: 184px; width: 580px;
  font-size: 58px; font-weight: 800; line-height: 62px; color: var(--text-dark);
  letter-spacing: -1px;
}
.hc-slide .sub {
  position: absolute; left: 80px; top: 404px; width: 520px;
  font-size: 18px; font-weight: 400; line-height: 28px; color: var(--text-gray);
}
.hc-slide .btn-primary {
  position: absolute; left: 80px; top: 500px; width: 200px; height: 56px;
  border-radius: 16px; background: var(--brand-gradient); color: #fff;
  font-size: 17px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.hc-slide .btn-ghost {
  position: absolute; left: 300px; top: 500px; width: 200px; height: 56px;
  border-radius: 16px; background: transparent; color: var(--text-dark);
  font-size: 17px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.hc-slide .model-badge {
  position: absolute; left: 80px; top: 590px; height: 40px;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 0 18px 0 16px; border-radius: 20px; background: var(--teal);
}
.hc-slide .model-badge .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); }
.hc-slide .model-badge span { font-size: 13px; font-weight: 700; color: var(--cyan-text); }

/* teal panel (Slide 1 right) */
.hc-slide .teal-panel {
  position: absolute; left: 720px; top: 0; width: 720px; height: 720px;
  background: var(--teal);
}
.hc-slide .dm-mark {
  position: absolute; left: 200px; top: 80px;
  width: 340px; height: 208px;
}

/* mock card below DM logo in teal panel (from design node 2:34) */
.hc-slide .mock-card {
  position: absolute; left: 120px; top: 340px;
  width: 480px; height: 300px;
  background: #fff; border-radius: 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
}
.hc-slide .mock-card .c-logo {
  position: absolute; left: 32px; top: 32px;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--brand-gradient);
}
.hc-slide .mock-card .c-title {
  position: absolute; left: 80px; top: 40px;
  width: 300px; height: 20px; border-radius: 6px;
  background: #E8E0DA;
}
.hc-slide .mock-card .c-l1 {
  position: absolute; left: 32px; top: 96px;
  width: 416px; height: 14px; border-radius: 7px;
  background: #F2EDE9;
}
.hc-slide .mock-card .c-l2 {
  position: absolute; left: 32px; top: 122px;
  width: 360px; height: 14px; border-radius: 7px;
  background: #F2EDE9;
}
.hc-slide .mock-card .c-score {
  position: absolute; left: 32px; top: 170px;
  width: 120px; height: 36px; border-radius: 18px;
  background: var(--teal); color: #fff;
  font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.hc-slide .mock-card .c-btn {
  position: absolute; left: 300px; top: 170px;
  width: 148px; height: 36px; border-radius: 18px;
  background: var(--brand-gradient); color: #fff;
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* teal panel (Slide 1 right) */
.hc-slide .teal-panel {
  position: absolute; left: 720px; top: 0; width: 720px; height: 720px;
  background: var(--teal);
  display: flex; align-items: center; justify-content: center;
}
.hc-slide .dm-mark { width: 340px; height: 208px; }

/* ===== SLIDES 2-4: Poster cards (full-width 1440x720) ===== */

/* -- shared card layout -- */
.pc-accent { position: absolute; z-index: 0; }
.pc-badge {
  position: absolute; left: 90px; top: 126px;
  padding: 0 22px; height: 40px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; letter-spacing: 1px; z-index: 1;
}
.pc-h1 {
  position: absolute; left: 90px; top: 198px; width: 630px;
  font-size: 58px; font-weight: 800; line-height: 68px; letter-spacing: -1px; z-index: 1;
}
.pc-sub {
  position: absolute; left: 90px; top: 432px; width: 540px;
  font-size: 20px; font-weight: 400; line-height: 30px; z-index: 1;
}
.pc-btn {
  position: absolute; left: 90px; top: 522px;
  width: 198px; height: 58px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; text-decoration: none; z-index: 1;
}
.pc-preview {
  position: absolute; right: 96px; top: 207px;
  width: 432px; height: 414px;
  background: #fff; border-radius: 25px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12); z-index: 1;
}

/* -- Slide 2: AI Poster (purple) -- */
.hc-slide--poster { background: #6E29D9; }
.hc-slide--poster .pc-accent {
  right: -60px; top: -108px; width: 612px; height: 612px; border-radius: 50%;
  background: #FF8A3D; opacity: .35;
}
.hc-slide--poster .pc-badge { background: #FF8A3D; color: #fff; }
.hc-slide--poster .pc-h1 { color: #fff; }
.hc-slide--poster .pc-sub { color: #E0CCFF; }
.hc-slide--poster .pc-btn { background: var(--brand-gradient); color: #fff; }
/* poster preview inner */
.pc-preview--poster .pp-art {
  position: absolute; left: 29px; top: 29px;
  width: 374px; height: 207px; border-radius: 12px;
  background: var(--brand-gradient);
}
.pc-preview--poster .pp-bar {
  position: absolute; left: 29px; top: 257px;
  width: 252px; height: 16px; border-radius: 5px;
  background: #2D2424;
}
.pc-preview--poster .pp-l1 {
  position: absolute; left: 29px; top: 288px;
  width: 374px; height: 11px; border-radius: 5px;
  background: #EDE5E0;
}
.pc-preview--poster .pp-l2 {
  position: absolute; left: 29px; top: 308px;
  width: 306px; height: 11px; border-radius: 5px;
  background: #EDE5E0;
}
.pc-preview--poster .pp-pill {
  position: absolute; left: 29px; bottom: 29px;
  width: 135px; height: 34px; border-radius: 17px;
  background: var(--brand-gradient);
}

/* -- Slide 3: AI Cutout (dark teal) -- */
.hc-slide--cutout { background: #0B4F4A; }
.hc-slide--cutout .pc-accent {
  right: 30px; top: 180px; width: 432px; height: 468px; border-radius: 120px;
  background: #F53F3F; opacity: .30; transform: rotate(12deg);
}
.hc-slide--cutout .pc-badge { background: #F53F3F; color: #fff; }
.hc-slide--cutout .pc-h1 { color: #fff; }
.hc-slide--cutout .pc-sub { color: #A6D1C9; }
.hc-slide--cutout .pc-btn { background: var(--brand-gradient); color: #fff; }
/* cutout preview inner */
.pc-preview--cutout .pb-before {
  position: absolute; left: 32px; top: 50px;
  width: 171px; height: 180px; border-radius: 14px;
  background: #EBEFF0;
}
.pc-preview--cutout .pb-bobj {
  position: absolute; left: 59px; top: 45px;
  width: 54px; height: 90px; border-radius: 27px;
  background: #C7D2D0;
}
.pc-preview--cutout .pb-after {
  position: absolute; right: 32px; top: 50px;
  width: 171px; height: 180px; border-radius: 14px;
  background: #fff; border: 1px solid #DCE5E3;
}
.pc-preview--cutout .pb-prod {
  position: absolute; left: 59px; top: 45px;
  width: 54px; height: 90px; border-radius: 27px;
  background: var(--brand-gradient);
}
.pc-preview--cutout .pb-label {
  position: absolute; left: 32px; bottom: 50px;
  width: 367px; height: 13px; border-radius: 5px;
  background: #C7D9D4;
}

/* -- Slide 4: Flat to Scene (warm yellow) -- */
.hc-slide--scene { background: #FFC23D; }
.hc-slide--scene .pc-accent {
  right: -60px; top: 90px; width: 504px; height: 630px; border-radius: 180px;
  background: #302982; opacity: .15; transform: rotate(-8deg);
}
.hc-slide--scene .pc-badge { background: #302982; color: #FFC23D; }
.hc-slide--scene .pc-h1 { color: #302982; }
.hc-slide--scene .pc-sub { color: #59421E; }
.hc-slide--scene .pc-btn { background: #302982; color: #fff; }
/* scene preview inner */
.pc-preview--scene .ps-flat {
  position: absolute; left: 32px; top: 50px;
  width: 171px; height: 180px; border-radius: 14px;
  background: #EBEFF0;
}
.pc-preview--scene .ps-scene {
  position: absolute; right: 32px; top: 50px;
  width: 171px; height: 180px; border-radius: 14px;
  background: linear-gradient(135deg, #302982, #6E29D9);
}
.pc-preview--scene .ps-label {
  position: absolute; left: 32px; bottom: 50px;
  width: 367px; height: 13px; border-radius: 5px;
  background: #DBCC8C;
}

/* ---- dots navigation ---- */
.hc-dots {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; z-index: 10;
}
.hc-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.40); border: none;
  cursor: pointer; transition: .25s;
}
.hc-dot.active { background: #fff; width: 28px; border-radius: 5px; }

/* ---------- FEATURES ---------- */
.features { position: relative; width: 1440px; height: 998px; margin-top: 48px; background: var(--bg-warm); }
.features .h2 { position: absolute; left: 80px; top: 80px; font-size: 44px; font-weight: 800; line-height: 52px; color: var(--text-dark); letter-spacing: -0.5px; }
.features .sub { position: absolute; left: 80px; top: 172px; font-size: 18px; font-weight: 400; color: var(--text-gray); }
.tool-grid {
  position: absolute; left: 80px; top: 240px; width: 1280px;
  display: grid; grid-template-columns: repeat(3, 410px); grid-auto-rows: 210px; gap: 24px;
}
.tool-card {
  position: relative; width: 410px; height: 210px; background: #fff; border-radius: 20px;
  box-shadow: 0 8px 24px -4px rgba(0,0,0,0.06);
}
.tool-card .t-icon { position: absolute; left: 28px; top: 28px; width: 52px; height: 52px; }
.tool-card .t-title { position: absolute; left: 28px; top: 96px; font-size: 18px; font-weight: 700; color: var(--text-dark); }
.tool-card .t-desc { position: absolute; left: 28px; top: 138px; width: 354px; font-size: 14px; font-weight: 400; line-height: 22px; color: var(--text-gray); }

/* ---------- CTA BAND ---------- */
.cta-band {
  position: relative; width: 1440px; height: 340px; margin-top: 22px;
  background: var(--purple); border-radius: 48px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
}
.cta-band .h2 { font-size: 44px; font-weight: 800; color: #fff; text-align: center; }
.cta-band .sub { font-size: 18px; font-weight: 400; color: var(--purple-sub); text-align: center; }
.cta-band .cta-btn { width: 200px; height: 56px; border-radius: 16px; background: var(--brand-gradient); color: #fff; font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: center; }