/* Done-for-you page (2026-10-12): the premium, white-glove pitch.
   Loaded after styles.css, home.css and assistant.css. */

/* ---------------- Hero: dark studio, moving portfolio wall ---------------- */
.d-hero { position: relative; overflow: hidden; background: #0b0f17; color: #c9d0dc; padding: 0 !important; isolation: isolate; }
.d-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(700px 420px at 20% 10%, rgba(47,99,181,.45), transparent 65%), radial-gradient(600px 400px at 85% 20%, rgba(31,158,134,.3), transparent 65%), radial-gradient(500px 360px at 60% 0, rgba(122,95,214,.28), transparent 65%); }
.d-hero-in { position: relative; z-index: 2; max-width: 980px; margin: 0 auto; padding: clamp(64px, 8vw, 112px) var(--pad) 40px; text-align: center; display: grid; justify-items: center; gap: 22px; }
.d-badge { display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 7px 14px 7px 10px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); font-size: 13px; font-weight: 600; color: #dfe5f0; }
.d-badge span { width: 7px; height: 7px; border-radius: 50%; background: #7ce3a8; box-shadow: 0 0 0 4px rgba(124,227,168,.18); }
.d-hero h1 { margin: 0; color: #fff; font-size: clamp(38px, 5.6vw, 72px); line-height: 1.02; letter-spacing: -.045em; font-weight: 600; }
.d-hero h1 em { font-style: italic; background: linear-gradient(90deg, #a9c4ff, #8ee6c8 50%, #c8b8ff); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .05em; }
.d-lede { margin: 0; max-width: 62ch; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: #b7c0d0; }
.d-ctas { justify-content: center; margin-top: 6px; }
.d-ctas .btn { padding: 14px 24px; font-size: 15.5px; }
.d-promise { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; font-size: 14px; color: #9aa4b6; }
.d-promise li::before { content: "✓"; margin-right: 7px; color: #8fe3b0; }
.d-wall { position: relative; z-index: 1; display: grid; gap: 18px; padding: 30px 0 0; margin-bottom: -60px; transform: perspective(1400px) rotateX(18deg); transform-origin: top center; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
.d-row { display: flex; gap: 18px; width: max-content; }
.d-row img { width: clamp(280px, 26vw, 420px); aspect-ratio: 16/10; object-fit: cover; object-position: top; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.r1 { animation: marq 60s linear infinite; }
.r2 { animation: marq 70s linear infinite reverse; margin-left: -160px; }
@keyframes marq { to { transform: translateX(-50%); } }
.d-hero:hover .d-row { animation-play-state: paused; }

/* ---------------- Everything handled ---------------- */
.d-handled { background: #fff; }
.hd-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: auto auto; gap: 16px; }
.hd { display: grid; gap: 8px; align-content: start; padding: 26px; border-radius: 20px; background: var(--soft); border: 1px solid var(--line); transition: transform .3s, box-shadow .3s; }
.hd:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -32px rgba(29,60,130,.5); }
.hd b { font-size: 18px; letter-spacing: -.015em; color: var(--ink); }
.hd > span:last-child { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.hd.big { grid-row: span 2; padding: 0 0 26px; overflow: hidden; background: #fff; }
.hd.big b, .hd.big > span:last-child { padding: 0 26px; }
.hd-art.design { position: relative; height: 300px; background: url(img/bg/soft-sage.jpg) center / cover; display: grid; place-items: end center; padding: 30px 30px 0; margin-bottom: 12px; overflow: hidden; }
.hd-art.design img { width: 100%; border-radius: 12px 12px 0 0; box-shadow: 0 -10px 40px rgba(10,30,60,.25); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.hd.big:hover .hd-art.design img { transform: translateY(-8px); }
.tag-float { position: absolute; left: 22px; top: 18px; padding: 7px 12px; border-radius: 10px; background: rgba(255,255,255,.92); font-size: 12.5px; font-weight: 700; color: var(--ink); box-shadow: 0 10px 24px -12px rgba(10,30,60,.5); }
.hd-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; margin-bottom: 6px; }
.i-dom { background: linear-gradient(135deg, #3d7fd6, #2f63b5); } .i-ai { background: linear-gradient(135deg, #2ab08f, #1f8a7a); }
.i-book { background: linear-gradient(135deg, #8b7be8, #6b55d0); font-size: 18px; } .i-lead { background: linear-gradient(135deg, #f0a92c, #e8613c); font-size: 17px; }
.i-mob { background: linear-gradient(135deg, #2f63b5, #1f9e86); font-size: 18px; }

/* ---------------- Transformation ---------------- */
.d-ba { background: var(--soft); }
.d-ba-wrap { margin-bottom: 0; }

/* ---------------- Process ---------------- */
.d-process { background: #fff; }
.steps4 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.steps4 li { display: grid; gap: 8px; align-content: start; opacity: 0; transform: translateY(20px); transition: opacity .6s, transform .6s cubic-bezier(.2,.8,.2,1); }
.steps4.in li { opacity: 1; transform: none; }
.steps4.in li:nth-child(2) { transition-delay: .15s; } .steps4.in li:nth-child(3) { transition-delay: .3s; } .steps4.in li:nth-child(4) { transition-delay: .45s; }
.s-art { height: 210px; border-radius: 18px; overflow: hidden; display: grid; place-items: center; padding: 18px; margin-bottom: 10px; position: relative; }
.s1 { background: url(img/bg/soft-sky.jpg) center / cover; }
.s2 { background: url(img/bg/soft-sage.jpg) center / cover; place-items: end center; padding-bottom: 0; }
.s3 { background: url(img/bg/soft-peri.jpg) center / cover; }
.s4 { background: url(img/bg/soft-sky.jpg) center / cover; }
.s-n { font-size: 13px; font-weight: 700; color: var(--sky2); }
.steps4 b { font-size: 18px; letter-spacing: -.015em; }
.steps4 p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.s-chat { display: grid; gap: 8px; width: 100%; }
.s-chat .me { justify-self: end; max-width: 88%; padding: 9px 12px; border-radius: 13px 13px 4px 13px; background: var(--sky); color: #fff; font-size: 12.5px; line-height: 1.4; }
.s-chat .ai { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 13px; background: #fff; font-size: 12.5px; font-weight: 600; color: var(--ink); width: fit-content; }
.s-chat .ai .kovi-wrap { width: 22px; height: 22px; display: inline-block; }
.s-win { width: 92%; border-radius: 10px 10px 0 0; overflow: hidden; background: #fff; box-shadow: 0 -8px 30px rgba(10,30,60,.25); }
.s-win img { display: block; width: 100%; }
.s-win .bbar { height: 24px; }
.s-pill { position: absolute; top: 14px; left: 14px; padding: 6px 10px; border-radius: 9px; background: #fff; font-size: 12px; font-weight: 700; color: #2f6b34; box-shadow: 0 8px 18px -10px rgba(10,30,60,.5); }
.s-review { width: 100%; padding: 14px; border-radius: 14px; background: #fff; display: grid; gap: 6px; box-shadow: 0 16px 30px -18px rgba(40,20,110,.6); }
.s-review small { font-size: 11.5px; color: var(--muted); }
.s-review b { font-size: 14px; }
.s-btns { display: grid; gap: 6px; margin-top: 4px; }
.s-btns span { text-align: center; padding: 8px; border-radius: 9px; font-size: 12.5px; font-weight: 700; }
.s-btns .ok { background: var(--sky); color: #fff; } .s-btns .ch { border: 1px solid var(--line); color: var(--ink2); }
.s-live { display: grid; justify-items: center; gap: 6px; padding: 18px; border-radius: 14px; background: rgba(255,255,255,.95); text-align: center; box-shadow: 0 16px 30px -18px rgba(10,20,60,.6); }
.s-live .dot { width: 12px; height: 12px; border-radius: 50%; background: #3ccf7a; box-shadow: 0 0 0 6px rgba(60,207,122,.2); animation: kpulse 1.6s infinite; }
.s-live b { font-size: 14px; } .s-live small { font-size: 12px; color: var(--muted); }

/* ---------------- Guarantees ---------------- */
.d-guard .wrap { padding-top: 0; }
.guard { position: relative; overflow: hidden; border-radius: 26px; padding: clamp(32px, 5vw, 56px); background: #0b0f17; color: #c9d0dc; isolation: isolate; }
.guard::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(img/bg/dusk.jpg) center / cover; opacity: .45; }
.guard-head h2 { color: #fff; margin: 0 0 32px; }
.kicker.light { color: #9fd8c4 !important; }
.guard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.guard-grid div { padding: 22px; border-radius: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: grid; gap: 8px; }
.guard-grid b { color: #fff; font-size: 17px; letter-spacing: -.01em; }
.guard-grid span { font-size: 14px; line-height: 1.5; color: #c3cad8; }

/* ---------------- Handoff + pros ---------------- */
.d-handoff .wrap, .d-pros .wrap { padding-top: 0; padding-bottom: clamp(48px, 6vw, 72px); }
.handoff, .pros { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 26px 30px; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(120deg, #eef4fd, #ecf7f3); }
.pros { background: #fff; }
.handoff h3, .pros h3 { font-size: 22px; margin: 0 0 6px; }
.handoff p, .pros p { margin: 0; font-size: 15px; color: var(--muted); max-width: 62ch; }
.d-pros .wrap { padding-top: clamp(48px, 6vw, 72px); }

/* ---------------- Responsive ---------------- */
@media (max-width: 1000px) {
  .hd-grid { grid-template-columns: 1fr 1fr; } .hd.big { grid-column: 1 / -1; grid-row: auto; }
  .steps4, .guard-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .hd-grid, .steps4, .guard-grid { grid-template-columns: 1fr; }
  .d-ctas .btn { flex: 1 1 100%; justify-content: center; }
  .d-wall { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .d-row { animation: none; } .steps4 li { opacity: 1; transform: none; } }
.ai.dfy .d-hero, .dfy .sp-hero.d-hero { background: #0b0f17 !important; }