/* ============================================================
   Gelato — custom styles
   Design system: "PaperFlow" paper-card / warm orange palette.
   Tailwind utility classes live inline in the HTML (CDN build).
   This file holds only what Tailwind can't express cleanly.
   ============================================================ */

* { font-family: 'Inter', sans-serif; }

/* Signature "paper" surface used by most cards */
.paper-card {
    background: linear-gradient(to bottom, #FDFBF7, #F7F4EB);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 20px rgba(0, 0, 0, 0.02);
}

.eyebrow { letter-spacing: 0.12em; }

iconify-icon { --iconify-stroke-width: 1.5; }

/* Dashed "coming soon" placeholder fill (testimonials) */
.placeholder-card {
    background-image: repeating-linear-gradient(135deg,
        rgba(168, 162, 158, 0.04) 0,
        rgba(168, 162, 158, 0.04) 8px,
        transparent 8px,
        transparent 16px);
}

/* ===================== stages slider (hero) ===================== */
.gs-slide { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s cubic-bezier(.5, 1, .5, 1); pointer-events: none; }
.gs-slide.is-active { opacity: 1; transform: none; pointer-events: auto; }

.gs-dot { width: 7px; height: 7px; border-radius: 9999px; background: #E0CDBB; transition: width .3s ease, background .3s ease; cursor: pointer; }
.gs-dot.is-active { width: 22px; background: #E65C00; }

@media (prefers-reduced-motion: reduce) {
    .gs-slide { transition: none; }
    .reveal-word { transform: none !important; }
    * { scroll-behavior: auto !important; }
}

/* ===================== MVP term tooltip ===================== */
html, body { overflow-x: hidden; }
.mvp { border-bottom: 1px dashed #E65C00; cursor: help; position: relative; white-space: nowrap; }
.mvp::after {
    content: "MVP — це перша версія продукту з базовим набором функцій. Уже нею можна реально користуватися й отримати від продукту головну цінність — те, заради чого він і потрібен.";
    position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(4px);
    width: 230px; max-width: min(230px, 78vw);
    background: #23201D; color: #FDFBF7;
    font-size: 12px; font-weight: 400; line-height: 1.45; letter-spacing: 0; text-transform: none; text-align: left; white-space: normal;
    padding: 10px 12px; border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease; pointer-events: none; z-index: 50;
}
.mvp::before {
    content: ""; position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: #23201D;
    opacity: 0; visibility: hidden; transition: opacity .18s ease; z-index: 50;
}
.mvp:hover::after, .mvp:focus::after { opacity: 1; visibility: visible; transform: translateX(-50%); }
.mvp:hover::before, .mvp:focus::before { opacity: 1; visibility: visible; }

/* Larger spacing between sections on desktop (lg:mt-5 -> 4.25rem) */
@media (min-width: 1024px) {
    .lg\:mt-5 { margin-top: 4.25rem !important; }
}