/* Homepage-only styles. Tokens come from tailwind.css; motion from motion.css. */

.home-hero {
    padding-top: 80px; /* sits under the floating nav (see .nav-overlap) */
    background:
        radial-gradient(60% 70% at 8% 10%, #dcedf4 0%, transparent 60%),
        radial-gradient(45% 55% at 92% 15%, #f8eecf 0%, transparent 60%),
        linear-gradient(180deg, #edf4f8 0%, #f5f9fb 100%);
}
.home-hero .blob { opacity: .8; }

/* ---- Cutout stage ---- */
.cut { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 460px; }
.cut.cut-sm { min-height: 380px; }
.cut .halo { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, #d9eef5 0%, transparent 70%); }
.cut-dark .halo { background: radial-gradient(circle, rgba(35,137,173,.35) 0%, transparent 70%); }
.cut .ring { position: absolute; left: 50%; }
.cut .disc, .cut .disc-front { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); width: 78%; max-width: 420px; height: 96px; border-radius: 50%; }
.cut .disc-front { z-index: 2; pointer-events: none; -webkit-mask: linear-gradient(180deg, transparent 0 55%, #000 55% 100%); mask: linear-gradient(180deg, transparent 0 55%, #000 55% 100%); }
.disc-gold { background: linear-gradient(90deg, #d4a84b, #c4962f); }
.disc-teal { background: linear-gradient(90deg, #2389ad, #7cc4db); }
.disc-navy { background: linear-gradient(90deg, #0c4a6e, #2389ad); }
/* Full-body cutouts are shifted down so the disc (centre line 56px above the
   stage floor) meets the figure at the thigh, and clipped 30px above the floor,
   inside the disc-front band, so no legs show below the disc. --ph = figure height. */
.cut { --ph: 560px; }
.cut.cut-sm { --ph: 460px; }
/* No drop-shadow filter here: filter + clip-path paints a pale box around the figure in Chrome. Depth comes from the disc's inset shadow instead. */
.cut img.person { position: relative; z-index: 1; height: var(--ph); width: auto; max-width: 100%; object-fit: contain; object-position: bottom; margin-bottom: calc(56px - 0.38 * var(--ph)); clip-path: inset(0 0 calc(0.38 * var(--ph) - 26px) 0); }

/* Floating cards around a cutout */
.fcard { position: absolute; z-index: 3; display: flex; align-items: center; gap: .6rem; background: #fff; color: #082f49; border-radius: 14px; padding: .65rem .85rem; box-shadow: 0 20px 40px -18px rgba(6,35,55,.5); font-size: .85rem; max-width: 250px; }
.fcard b { display: block; font-weight: 700; line-height: 1.2; }
.fcard small { display: block; color: #4b6578; font-size: .72rem; margin-top: .1rem; }
.fcard .ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; }
.fcard-tl { left: -8px; top: 12px; }
.fcard-tr { right: -8px; top: 12px; }
.fcard-bl { left: -8px; bottom: 120px; }
.fcard-br { right: -8px; bottom: 70px; }
.cut-hero .fcard-bl { bottom: 28px; left: -16px; }
/* Top-right cards sit beside the shoulder, never on the face: the figures' heads are top-centre-right. */
.cut-hero .fcard-tr { top: auto; bottom: 120px; right: -24px; max-width: 220px; }
.cut-sm .fcard-tr { top: auto; bottom: 110px; right: -16px; }

.bubble { position: absolute; z-index: 3; background: linear-gradient(135deg, #2389ad, #0c4a6e); color: #fff; border-radius: 16px 16px 16px 4px; padding: .8rem 1rem; font-size: .9rem; font-weight: 600; max-width: 220px; box-shadow: 0 14px 30px -10px rgba(0,0,0,.5); }
.bubble-gold { background: linear-gradient(135deg, #d4a84b, #c4962f); color: #062337; border-radius: 16px 16px 4px 16px; }
.bubble-tl { left: -8px; top: 10px; }
.bubble-tr { right: -8px; top: 10px; }

.tracker { position: absolute; z-index: 3; background: #fff; color: #082f49; border-radius: 16px; padding: 10px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); width: 240px; }
.fcard-br-wide { right: -10px; bottom: 56px; }
.tracker .row { display: flex; align-items: center; gap: .5rem; padding: .45rem .55rem; border-radius: 10px; font-size: .8rem; font-weight: 500; }
.tracker .row + .row { margin-top: 4px; }
.tracker .row.done { background: #ecfdf5; }
.tracker .row.now { background: #fbf7ec; outline: 1.5px solid #d4a84b; }
.tracker .dot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .65rem; color: #fff; background: #059669; flex: none; }
.tracker .row.now .dot { background: #c4962f; }
.tracker .row.todo .dot { background: #cbd5e1; }
.tracker .t { margin-left: auto; font-size: .7rem; color: #64748b; }

/* Big number gradient */
.big-number { background: linear-gradient(90deg, #7cc4db, #d4a84b); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Segment cards */
.seg-card { display: flex; flex-direction: column; gap: .5rem; background: #fff; border: 1px solid #d9eef5; border-radius: 20px; padding: 1.8rem; color: #082f49; }
.seg-ico { width: 52px; height: 52px; border-radius: 14px; background: #062337; color: #7cc4db; display: grid; place-items: center; margin-bottom: .4rem; transition: background .2s, transform .3s; }
.seg-card:hover .seg-ico { background: #d4a84b; color: #062337; transform: rotate(-6deg) scale(1.06); }
.seg-card h3 { font-size: 1.3rem; font-weight: 800; color: #062337; letter-spacing: -.01em; }
.seg-card p { margin: 0; color: #4b6578; font-size: .95rem; }
.seg-card .why { color: #082f49; font-weight: 500; margin-top: .2rem; }
.seg-card .go { margin-top: auto; padding-top: .9rem; font-weight: 700; color: #2389ad; display: inline-flex; align-items: center; gap: .4rem; }

/* Route line labels */
.route-lbl { font: 800 15px Outfit, system-ui, sans-serif; fill: #062337; }
.route-sub { font: 600 11px Outfit, system-ui, sans-serif; fill: #4b6578; letter-spacing: .08em; }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; position: relative; padding-bottom: 1.4rem; }
.timeline li::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: #d9eef5; }
.timeline li:last-child::before { display: none; }
.timeline .n { width: 44px; height: 44px; border-radius: 50%; background: #062337; color: #fff; display: grid; place-items: center; font-weight: 800; transition: transform .2s, box-shadow .2s; }
.timeline li:hover .n { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(35,137,173,.15); }
.timeline li.gold .n { background: #d4a84b; color: #062337; }
.timeline .when { font-size: .72rem; font-weight: 700; color: #2389ad; letter-spacing: .08em; text-transform: uppercase; }
.timeline h3 { font-size: 1.1rem; font-weight: 800; color: #062337; }
.timeline p { margin: .2rem 0 0; color: #4b6578; font-size: .95rem; }

/* Cost table toggle */
.cost-tog { border: 1.5px solid #062337; background: #fff; color: #062337; border-radius: 9999px; padding: .45rem 1.1rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.cost-tog.on { background: #062337; color: #fff; }

/* Quiz */
.quiz-prog { display: flex; gap: 6px; margin-bottom: 1.2rem; }
.quiz-prog i { flex: 1; height: 6px; border-radius: 3px; background: #d9eef5; }
.quiz-prog i.on { background: #d4a84b; }
.quiz-opt { border: 1.5px solid #d9eef5; border-radius: 12px; padding: .9rem 1rem; cursor: pointer; font-weight: 500; text-align: left; background: #fff; font-family: inherit; font-size: 1rem; color: #082f49; }
.quiz-opt:hover { border-color: #2389ad; background: #f0f7fa; }

/* FAQ */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] { border-color: #2389ad; }
.faq-item[open] .faq-plus { transform: rotate(45deg); }
.faq-plus { display: inline-block; transition: transform .2s; }

/* Testimonials */
.quote-card { margin: 0; background: #fff; border: 1px solid #d9eef5; border-radius: 20px; padding: 1.6rem; display: flex; flex-direction: column; }

/* Trust rows */
.trust-row { display: flex; gap: 1rem; align-items: flex-start; color: #334155; }
.trust-row > i, .trust-row > svg { flex: none; margin-top: .2rem; color: #2389ad; }
.trust-row b { color: #062337; }

@media (max-width: 1023px) {
    .cut { min-height: 400px; --ph: 480px; }
    .cut.cut-sm { --ph: 420px; }
    .fcard-tl, .bubble-tl, .fcard-bl { left: 0; }
    .fcard-tr, .fcard-br, .bubble-tr, .fcard-br-wide { right: 0; }
}
@media (max-width: 640px) {
    .cut { --ph: 400px; }
    .cut.cut-sm { --ph: 380px; }
    .fcard { max-width: 200px; font-size: .78rem; }
    .tracker { width: 200px; }
}