/*
 * Reference look: dark mesh heroes, heavy headlines with a hand-drawn underline, pill buttons,
 * bold green "challenges" band with doodles and a black label pill, floating chat pill.
 * Loaded after home.css / pages.css; the `html body` prefix wins ties with the inline page styles.
 */

/* ---------- dark hero on every page ---------- */
html body .hp .hx-hero,
html body .static-page .hp .ab-hero,
html body .static-page .hp .ct-hero,
html body .static-page .hp .fq-hero,
html body .hp.bl .bl-hero,
html body .pg .pg-hero {
    background: #04070a;
    color: rgba(255, 255, 255, .82);
}
html body .hp .hx-hero-bg,
html body .pg .pg-hero::before {
    background:
        radial-gradient(780px 380px at 50% 112%, rgba(47, 194, 74, .55), transparent 70%),
        radial-gradient(520px 320px at 88% 92%, rgba(46, 134, 222, .38), transparent 70%),
        radial-gradient(520px 300px at 8% 96%, rgba(18, 155, 46, .34), transparent 70%),
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 56px 56px,
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 56px 56px;
    -webkit-mask-image: none;
    mask-image: none;
}
html body .hp .hx-hero .hx-orb { opacity: .28; }
html body .hp .hx-display, html body .pg .pg-hero h1 { color: #fff; font-weight: 800; letter-spacing: -0.045em; }
html body .hp .hx-lead, html body .pg .pg-hero p { color: rgba(255, 255, 255, .74); }
html body .hp .hx-proof li, html body .pg .pg-proof { color: rgba(255, 255, 255, .86); }
html body .hp .hx-proof li i, html body .pg .pg-proof i { color: #5be36b; }
html body .hp [class$="-hero"] .hx-pill, html body .pg .pg-pill { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #9af0a8 !important; box-shadow: none; backdrop-filter: blur(8px); }
html body .hp [class$="-hero"] .hx-pill-dot, html body .pg .pg-pill i { background: #5be36b; }

/* highlighted word: bright green with a hand-drawn yellow underline */
html body .hp .hx-display em, html body .pg .pg-hero h1 em {
    position: relative; font-style: normal; display: inline-block; background: none;
    -webkit-text-fill-color: currentColor; color: #5be36b;
}
html body .hp .hx-display em::after, html body .pg .pg-hero h1 em::after {
    content: ""; position: absolute; left: -2%; right: -2%; bottom: -0.14em; height: 0.3em; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 40 2, 80 14, 120 7 S 200 3, 240 9 S 285 6, 297 4' fill='none' stroke='%23ffd84d' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
    clip-path: inset(0 100% 0 0); animation: rf-draw .9s .7s cubic-bezier(.2, .7, .2, 1) forwards;
}
@keyframes rf-draw { to { clip-path: inset(0 0 0 0); } }

/* ---------- buttons: pills, bright green on dark ---------- */
html body .hp .hx-btn, html body .pg-btn, html body .pg-buy { border-radius: 999px; }
html body .hp .hx-hero .hx-btn-solid, html body .static-page .hp .hx-actions .hx-btn-solid { background: #4be06a; border-color: #4be06a; color: #03200a !important; box-shadow: 0 16px 34px -12px rgba(75, 224, 106, .65); }
html body .hp .hx-hero .hx-btn-solid:hover, html body .static-page .hp .hx-actions .hx-btn-solid:hover { background: #7af08f; border-color: #7af08f; }
html body .hp .hx-hero .hx-btn-line, html body .static-page .hp .ab-hero .hx-btn-line, html body .static-page .hp .ct-hero .hx-btn-line, html body .static-page .hp .fq-hero .hx-btn-line { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .35); color: #fff !important; }
html body .hp .hx-hero .hx-btn-line:hover, html body .static-page .hp .ab-hero .hx-btn-line:hover, html body .static-page .hp .ct-hero .hx-btn-line:hover { background: #fff; color: #04070a !important; border-color: #fff; }
/* keep dark-on-light buttons readable in light sections */
html body .static-page .hp .hx-section .hx-btn-solid, html body .static-page .hp .ct-form .hx-btn-solid, html body .static-page .hp .fq-form .hx-btn-solid { background: #129b2e; border-color: #129b2e; color: #fff !important; box-shadow: 0 14px 30px -12px rgba(18, 155, 46, .7); }
html body .static-page .hp .hx-section .hx-btn-solid:hover, html body .static-page .hp .ct-form .hx-btn-solid:hover, html body .static-page .hp .fq-form .hx-btn-solid:hover { background: #0b6f1f; border-color: #0b6f1f; }
html body .static-page .hp .abx-band .hx-btn-solid { background: #fff; border-color: #fff; color: #0b6f1f !important; }

/* heavier section headings */
html body .hp .hx-h2 { font-weight: 800; letter-spacing: -0.045em; }

/* ---------- inner hero images sit on the dark glow ---------- */
html body .static-page .hp .ab-hero .ab-shot img { border-color: rgba(255, 255, 255, .14); box-shadow: 0 60px 120px -40px rgba(47, 194, 74, .45), 0 0 0 1px rgba(255, 255, 255, .06); }
html body .hp.bl .bl-tools { margin-top: 30px; }
html body .hp.bl .bl-topics button { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #fff; }
html body .hp.bl .bl-topics button i { color: #5be36b; }
html body .hp.bl .bl-topics button.is-on { background: #4be06a; border-color: #4be06a; color: #03200a; }
html body .hp.bl .bl-topics button.is-on i { color: #03200a; }
html body .static-page .hp .fq-search input, html body .hp.bl .bl-search input { border-color: rgba(255, 255, 255, .2); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .8); }

/* ---------- the bold green "challenges" band ---------- */
.rf-band { position: relative; padding: 96px 0 104px; background-color: #3fb544;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220' fill='none' stroke='%23ffffff' stroke-opacity='.16' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M20 40 q10 -14 20 0 t20 0'/%3E%3Ccircle cx='150' cy='38' r='9'/%3E%3Cpath d='M96 96 l12 -16 l12 16 l12 -16'/%3E%3Cpath d='M30 150 q12 12 24 0'/%3E%3Ccircle cx='170' cy='150' r='7'/%3E%3Cpath d='M110 190 l14 0 l-7 -12 z'/%3E%3Cpath d='M188 96 q8 -10 16 0'/%3E%3C/svg%3E");
    overflow: hidden; }
.rf-band-in { max-width: 1120px; margin: 0 auto; padding: 0 24px; text-align: center; }
.rf-pill { display: inline-block; margin-bottom: 44px; padding: 14px 30px; border-radius: 18px; background: #04070a; color: #fff; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6); transform: rotate(-1.2deg); }
.rf-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; text-align: left; }
.rf-card { padding: 34px 32px 38px; border-radius: 28px; background: #fff; box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .55); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease; }
.rf-card:nth-child(2) { transform: translateY(18px); }
.rf-card:hover { transform: translateY(-8px); box-shadow: 0 44px 70px -34px rgba(0, 0, 0, .65); }
.rf-card:nth-child(2):hover { transform: translateY(10px); }
.rf-ic { display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 22px; border-radius: 22px; font-size: 28px; }
.rf-ic.b { background: #e4efff; color: #2f6fe0; }
.rf-ic.g { background: #dcf7e3; color: #16a34a; }
.rf-ic.y { background: #fff1c9; color: #d99a00; }
.rf-card h3 { margin: 0 0 10px; font-size: 24px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.2; color: #14181c; }
.rf-card p { margin: 0; font-size: 16.5px; line-height: 1.65; color: #5b6770; }
.rf-cta { margin-top: 64px; }
.rf-cta a { display: inline-flex; align-items: center; gap: 10px; padding: 16px 32px; border-radius: 999px; background: #04070a; color: #fff !important; font-weight: 700; font-size: 16px; text-decoration: none; transition: transform .25s ease, background-color .25s ease; }
.rf-cta a:hover { transform: translateY(-3px); background: #14201a; }

/* ---------- floating chat pill ---------- */
.rf-chat { position: fixed; right: 14px; bottom: 74px; z-index: 1090; display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px 12px 16px; border-radius: 999px; background: #25d366; color: #04210b !important; font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; font-size: 15px; font-weight: 800; text-decoration: none; box-shadow: 0 16px 34px -10px rgba(37, 211, 102, .75), 0 0 0 4px rgba(255, 255, 255, .55); transition: transform .25s ease, box-shadow .25s ease; }
.rf-chat i { font-size: 22px; }
.rf-chat:hover { transform: translateY(-3px); }
.rf-chat::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); animation: rf-ping 2.4s infinite; }
@keyframes rf-ping { 70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } }

@media (max-width: 1023.98px) {
    .rf-cards { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
    .rf-card:nth-child(2) { transform: none; }
    .rf-card:nth-child(2):hover { transform: translateY(-6px); }
}
@media (max-width: 639.98px) {
    .rf-band { padding: 64px 0 70px; }
    .rf-pill { margin-bottom: 30px; padding: 12px 22px; }
    .rf-card { padding: 26px 24px 30px; border-radius: 22px; }
    .rf-chat { right: 10px; bottom: 70px; padding: 11px 16px 11px 13px; font-size: 14px; }
    .rf-cta { margin-top: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    html body .hp .hx-display em::after, html body .pg .pg-hero h1 em::after { animation: none; clip-path: none; }
    .rf-chat::before { animation: none; }
}

/* phones already have the round WhatsApp button in the header: no floating pill over the content */
@media (max-width: 767.98px) {
    .rf-chat { display: none; }
}

/* the floating chips on About sat behind the screenshot */
html body .hp .ab-chip { z-index: 4; }
html body .hp .ab-chip-a { left: -18px; }
html body .hp .ab-chip-b { right: -18px; }