/* Premium transformation landing page */
.hero.hero-transform {
  min-height: auto;
  max-width: 1220px;
  padding: 70px 28px 82px;
  grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr);
  gap: clamp(48px, 6vw, 86px);
  align-items: center;
}
.hero-transform .hero-copy h1 {
  max-width: 620px;
  margin: 20px 0 24px;
  font-size: clamp(3.25rem, 5.25vw, 5.35rem);
  line-height: 1.01;
}
.hero-transform .hero-copy > p { max-width: 560px; font-size: 1.08rem; line-height: 1.75; }
.hero-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 10px 24px;
  margin: 34px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  color: #526a63;
  font-size: .78rem;
  font-weight: 700;
}
.hero-facts li::before { content: "✓"; margin-right: 9px; color: var(--peach); }
.hero-demo { position: relative; min-width: 0; padding-bottom: 114px; }
.transform-card {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 13px;
  border: 1px solid #d6dfda;
  border-radius: 22px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 30px 80px rgba(24,59,53,.17);
}
.transform-header {
  height: 44px;
  padding: 0 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #536a63;
  font-size: .72rem;
  font-weight: 750;
}
.transform-counter { color: #8b9a95; font-size: .64rem; letter-spacing: .12em; }
.transform-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  max-height: 510px;
  border-radius: 14px;
  background: #eef1ed;
  touch-action: pan-y;
  user-select: none;
}
.transform-photo,.transform-drawing,.transform-drawing img { position: absolute; inset: 0; width: 100%; height: 100%; }
.transform-photo,.transform-drawing img { object-fit: cover; }
.transform-drawing {
  -webkit-clip-path: inset(0 0 0 var(--reveal));
  clip-path: inset(0 0 0 var(--reveal));
  will-change: clip-path;
}
.transform-drawing::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 70%, rgba(255,255,255,.18));
  pointer-events: none;
}
.transform-line {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: var(--reveal);
  width: 2px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 0 0 1px rgba(24,59,53,.18), 0 0 18px rgba(24,59,53,.18);
  transform: translateX(-1px);
  will-change: left;
  pointer-events: none;
}
.transform-line i {
  position: absolute;
  top: 50%; left: 50%;
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(24,59,53,.18);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 24px rgba(24,59,53,.18);
  transform: translate(-50%,-50%);
}
.transform-line i::before { content: "‹  ›"; color: var(--forest); font-size: 1.05rem; font-style: normal; font-weight: 800; letter-spacing: 2px; }
.transform-range {
  position: absolute;
  z-index: 5;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
}
.transform-label {
  position: absolute;
  z-index: 3;
  top: 16px;
  padding: 7px 10px;
  border-radius: 7px;
  background: rgba(255,255,255,.9);
  color: #284941;
  box-shadow: 0 4px 12px rgba(24,59,53,.1);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .03em;
  backdrop-filter: blur(8px);
}
.transform-label-before { left: 16px; }
.transform-label-after { right: 16px; }
.transform-card figcaption { margin: 12px 8px 0; color: #62766f; font-size: .72rem; }
.demo-credit { display: inline-block; margin: 3px 8px 0; color: #8a9893; font-size: .56rem; text-underline-offset: 2px; }
.hero-book-result {
  position: absolute;
  z-index: 3;
  right: -14px;
  bottom: 0;
  width: 78%;
  min-height: 145px;
  display: grid;
  grid-template-columns: minmax(140px,1fr) 230px;
  align-items: center;
  gap: 16px;
  padding: 18px 18px 18px 24px;
  border: 1px solid #d7e0db;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 22px 55px rgba(24,59,53,.18);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.hero-demo.is-complete .hero-book-result { opacity: 1; transform: translateY(0); }
.result-copy { display: grid; gap: 5px; }
.result-copy span { color: var(--peach); font-size: .59rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.result-copy strong { color: var(--ink); font: 500 1rem/1.25 Georgia,serif; }
.result-books { position: relative; height: 108px; }
.result-cover,.result-page {
  position: absolute;
  bottom: 0;
  width: 76px; height: 102px;
  overflow: hidden;
  border: 1px solid rgba(24,59,53,.16);
  border-radius: 3px 7px 7px 3px;
  background: white;
  box-shadow: 5px 8px 16px rgba(24,59,53,.15);
}
.result-cover { z-index: 3; right: 16px; padding: 12px 8px; display: flex; flex-direction: column; justify-content: space-between; background: #24564d; color: #fff; text-align: center; transform: rotate(4deg); }
.result-cover small { font-size: .28rem; letter-spacing: .08em; }
.result-cover b { font: 500 .67rem/1.1 Georgia,serif; }
.result-cover span { font-size: .28rem; }
.result-page { padding: 4px; }
.result-page img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05); }
.result-page-one { z-index: 2; right: 76px; transform: rotate(-2deg); }
.result-page-two { z-index: 1; right: 130px; transform: rotate(-7deg); }

.journey { padding: 112px 28px 124px; background: #fff; }
.journey .section-heading { max-width: 690px; margin: 0 auto 56px; text-align: center; }
.journey .section-heading h2 { margin: 15px 0 18px; }
.journey .section-heading p { margin: 0 auto; max-width: 590px; }
.journey-grid { max-width: 1180px; margin: auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.journey-grid article { position: relative; min-width: 0; }
.journey-number { position: absolute; z-index: 3; top: 12px; left: 12px; padding: 5px 8px; border-radius: 6px; background: rgba(255,255,255,.9); color: var(--forest); font-size: .6rem; font-weight: 850; }
.journey-visual { position: relative; overflow: hidden; aspect-ratio: 1 / .82; border: 1px solid var(--line); border-radius: 14px; background: #edf2ef; }
.journey-visual img { width: 100%; height: 100%; object-fit: cover; }
.journey-grid h3 { margin: 19px 0 7px; font-size: 1.18rem; }
.journey-grid p { margin: 0; font-size: .8rem; line-height: 1.55; }
.journey-line { background: white; }
.journey-adventure img { object-position: center 52%; }
.journey-book { background: #e7efea; }
.mini-book-cover,.mini-book-page { position:absolute; bottom:21px; width:86px; height:116px; border-radius:4px 8px 8px 4px; box-shadow:6px 10px 22px rgba(24,59,53,.2); }
.mini-book-cover { z-index:2; left:33%; padding:27px 8px; background:var(--forest); color:#fff; font:500 .83rem/1.2 Georgia,serif; text-align:center; transform:rotate(-6deg); }
.mini-book-page { right:18%; overflow:hidden; background:#fff; transform:rotate(6deg); }
.mini-book-page img { object-fit:cover; }

@media (max-width: 980px) {
  .hero.hero-transform { grid-template-columns: 1fr; max-width: 760px; padding-top: 48px; }
  .hero-transform .hero-copy { text-align: center; }
  .hero-transform .hero-copy h1,.hero-transform .hero-copy > p { margin-left: auto; margin-right: auto; }
  .hero-transform .hero-actions { justify-content: center; }
  .hero-facts { justify-content: center; }
  .hero-demo { max-width: 630px; width: 100%; margin: 0 auto; }
  .journey-grid { grid-template-columns: repeat(2,1fr); gap: 36px 20px; }
}
@media (max-width: 620px) {
  .hero.hero-transform { display: flex; flex-direction: column; gap: 38px; padding: 36px 18px 72px; }
  .hero-transform .hero-copy { text-align: left; }
  .hero-transform .hero-copy h1 { margin-top: 16px; font-size: clamp(2.7rem,13vw,3.55rem); }
  .hero-transform .hero-copy > p { font-size: 1rem; line-height: 1.65; }
  .hero-transform .hero-actions { align-items: stretch; justify-content: flex-start; }
  .hero-transform .hero-actions .button { width: 100%; }
  .hero-transform .text-link { text-align: center; }
  .hero-facts { grid-template-columns: 1fr 1fr; gap: 10px 12px; font-size: .7rem; }
  .hero-demo { padding-bottom: 150px; }
  .transform-card { padding: 9px; border-radius: 17px; }
  .transform-header { height: 38px; }
  .transform-media { min-height: 330px; aspect-ratio: 1 / 1; }
  .transform-line i { width: 52px; height: 52px; }
  .transform-label { top: 10px; font-size: .52rem; }
  .transform-label-before { left: 10px; }
  .transform-label-after { right: 10px; }
  .transform-card figcaption { font-size: .65rem; }
  .hero-book-result { right: -4px; width: 94%; grid-template-columns: 1fr 190px; padding-left: 17px; }
  .result-copy strong { font-size: .88rem; }
  .result-books { transform: scale(.88); transform-origin: right center; }
  .journey { padding: 82px 18px 90px; }
  .journey-grid { grid-template-columns: 1fr 1fr; gap: 28px 12px; }
  .journey-grid h3 { font-size: 1.02rem; }
  .journey-grid p { font-size: .72rem; }
}
@media (max-width: 380px) {
  .hero-facts { grid-template-columns: 1fr; }
  .hero-book-result { width: 100%; grid-template-columns: 1fr 155px; }
  .journey-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-book-result { opacity: 1; transform: none; transition: none; }
  .transform-drawing,.transform-line { will-change: auto; }
}

/* 2026 hero refresh: confident editorial type, vibrant product accents */
:root { --hero-violet:#6558e8; --hero-coral:#ff775f; --hero-lime:#dff56a; --hero-night:#172a35; }
body { background:linear-gradient(180deg,#fbf8f2 0,#fffdf8 48%,#f6f8f4 100%); }
body::before { content:""; position:absolute; z-index:-1; top:94px; right:0; width:44vw; height:610px; background:radial-gradient(circle at 72% 22%,rgba(223,245,106,.72),transparent 25%),radial-gradient(circle at 45% 45%,rgba(101,88,232,.13),transparent 53%); pointer-events:none; }
.site-header { position:relative; z-index:10; }
.hero.hero-transform { position:relative; max-width:1320px; padding-top:84px; gap:clamp(58px,7vw,104px); }
.hero.hero-transform::before { content:""; position:absolute; z-index:-1; left:4%; top:8%; width:82px; height:82px; border:18px solid var(--hero-coral); border-radius:50%; opacity:.85; }
.hero-transform .hero-copy { position:relative; z-index:2; }
.hero-transform .hero-copy h1 { max-width:690px; margin:18px 0 26px; color:var(--hero-night); font-size:clamp(3.55rem,5.7vw,6.25rem); line-height:.94; letter-spacing:-.06em; }
.hero-transform .hero-copy h1 em { display:block; color:var(--hero-violet); font-style:normal; }
.hero-transform .eyebrow { display:inline-flex; padding:7px 11px; border:1px solid rgba(23,42,53,.12); border-radius:999px; background:rgba(255,255,255,.7); color:var(--hero-violet); letter-spacing:.11em; backdrop-filter:blur(10px); }
.hero-transform .hero-copy>p { max-width:575px; color:#56666d; font-size:1.12rem; line-height:1.7; }
.hero-transform .button { background:var(--hero-night); box-shadow:0 13px 28px rgba(23,42,53,.2); }
.hero-transform .button:hover { background:var(--hero-violet); box-shadow:0 16px 34px rgba(101,88,232,.28); }
.hero-transform .text-link { color:var(--hero-night); text-decoration:underline; text-decoration-color:var(--hero-coral); text-decoration-thickness:2px; text-underline-offset:6px; }
.hero-facts { border-top:0; gap:9px; padding-top:4px; }
.hero-facts li { padding:8px 11px; border:1px solid rgba(23,42,53,.1); border-radius:9px; background:rgba(255,255,255,.72); }
.hero-facts li::before { color:var(--hero-violet); }
.hero-demo { padding-bottom:122px; }
.transform-card { padding:11px; border:1px solid rgba(23,42,53,.12); border-radius:28px; background:#fff; box-shadow:0 34px 90px rgba(23,42,53,.2); transform:rotate(1.2deg); }
.transform-header { height:48px; color:var(--hero-night); }
.transform-counter { padding:5px 8px; border-radius:999px; background:var(--hero-lime); color:var(--hero-night); }
.transform-media { max-height:540px; border-radius:19px; background:#fffdf8; }
.transform-drawing::after { display:none; }
.transform-label { border:1px solid rgba(23,42,53,.08); background:rgba(255,255,255,.88); color:var(--hero-night); }
.transform-label-after { background:var(--hero-lime); }
.transform-line { width:3px; background:#fff; box-shadow:0 0 0 1px rgba(23,42,53,.24),0 0 24px rgba(23,42,53,.2); }
.transform-line i { width:52px; height:52px; border:0; background:var(--hero-violet); box-shadow:0 10px 24px rgba(101,88,232,.36); }
.transform-line i::before { color:#fff; }
.transform-card figcaption { margin-top:14px; color:#55686e; font-size:.76rem; }
.demo-credit { color:#849095; }
.hero-book-result { right:-20px; width:81%; border:0; border-radius:20px; background:var(--hero-night); color:#fff; box-shadow:0 24px 60px rgba(23,42,53,.26); }
.result-copy span { color:var(--hero-lime); }
.result-copy strong { color:#fff; }
.result-cover { background:linear-gradient(145deg,var(--hero-violet),#4038b9); }
.trust-strip { border-block:1px solid rgba(23,42,53,.1); background:var(--hero-night); }
.trust-strip span { color:#f6f8f4; }
.journey { background:#f5f4ff; }
.journey .section-heading h2 { color:var(--hero-night); }
.journey-grid { gap:22px; }
.journey-grid article { padding:10px 10px 22px; border:1px solid rgba(23,42,53,.08); border-radius:20px; background:rgba(255,255,255,.82); box-shadow:0 12px 35px rgba(23,42,53,.07); }
.journey-visual { border:0; border-radius:14px; }
.journey-number { background:var(--hero-lime); color:var(--hero-night); }
.journey-line img { object-fit:contain; background:#fffdf8; }
.preview { max-width:1180px; }
.privacy { background:#eef0ff; }
.final-cta { background:linear-gradient(135deg,var(--hero-violet),#3d36ad); }
.button-light { color:var(--hero-night); background:var(--hero-lime); }
@media (max-width:980px) {
  body::before { width:100%; opacity:.75; }
  .hero.hero-transform { padding-top:52px; }
  .hero.hero-transform::before { left:7%; top:4%; width:58px; height:58px; border-width:13px; }
  .transform-card { transform:none; }
}
@media (max-width:620px) {
  body::before { top:78px; height:520px; }
  .hero.hero-transform { padding-top:42px; }
  .hero.hero-transform::before { display:none; }
  .hero-transform .hero-copy h1 { font-size:clamp(3rem,14vw,4rem); }
  .hero-demo { padding-bottom:162px; }
  .transform-card { border-radius:21px; }
  .transform-media { min-height:0; }
  .hero-book-result { right:-2px; width:96%; }
  .journey-grid { grid-template-columns:1fr; }