/* ==========================================================================
   Jainsoft — professional animations & polish
   Scroll reveals, hover micro-interactions, hero polish, marquee, gradients
   ========================================================================== */

/* ---------- Keyframes library ---------- */
@keyframes js-fadeUp      { from { opacity: 0; transform: translateY(28px) } to { opacity: 1; transform: none } }
@keyframes js-fadeDown    { from { opacity: 0; transform: translateY(-22px) } to { opacity: 1; transform: none } }
@keyframes js-fadeLeft    { from { opacity: 0; transform: translateX(-28px) } to { opacity: 1; transform: none } }
@keyframes js-fadeRight   { from { opacity: 0; transform: translateX(28px) } to { opacity: 1; transform: none } }
@keyframes js-zoomIn      { from { opacity: 0; transform: scale(.88) } to { opacity: 1; transform: none } }
@keyframes js-marquee     { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes js-shine       { from { transform: translateX(-100%) } to { transform: translateX(200%) } }
@keyframes js-gradientShift{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes js-float-y     { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-14px) } }
@keyframes js-float-x     { 0%,100%{ transform: translateX(0) } 50%{ transform: translateX(10px) } }
@keyframes js-pulse-ring  { 0%{ box-shadow: 0 0 0 0 rgba(86,174,227,.45) } 70%{ box-shadow: 0 0 0 18px rgba(86,174,227,0) } 100%{ box-shadow: 0 0 0 0 rgba(86,174,227,0) } }
@keyframes js-spin-slow   { to { transform: rotate(360deg) } }
@keyframes js-bar-grow    { from { transform: scaleY(0) } to { transform: scaleY(1) } }
@keyframes js-orbit       { from{ transform: rotate(0) translateX(40px) rotate(0) } to{ transform: rotate(360deg) translateX(40px) rotate(-360deg) } }

/* ---------- Scroll-reveal primitives ---------- */
[data-reveal]           { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); will-change: transform, opacity }
[data-reveal="up"]      { transform: translateY(28px) }
[data-reveal="down"]    { transform: translateY(-22px) }
[data-reveal="left"]    { transform: translateX(-28px) }
[data-reveal="right"]   { transform: translateX(28px) }
[data-reveal="zoom"]    { transform: scale(.92) }
[data-reveal].is-in     { opacity: 1; transform: none }
[data-reveal][data-delay="100"]{ transition-delay: .1s }
[data-reveal][data-delay="200"]{ transition-delay: .2s }
[data-reveal][data-delay="300"]{ transition-delay: .3s }
[data-reveal][data-delay="400"]{ transition-delay: .4s }
[data-reveal][data-delay="500"]{ transition-delay: .5s }

/* Auto-stagger grid children on reveal */
.js-stagger > *          { opacity: 0; transform: translateY(20px); transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1) }
.js-stagger.is-in > *    { opacity: 1; transform: none }
.js-stagger.is-in > *:nth-child(1){ transition-delay:.05s }
.js-stagger.is-in > *:nth-child(2){ transition-delay:.15s }
.js-stagger.is-in > *:nth-child(3){ transition-delay:.25s }
.js-stagger.is-in > *:nth-child(4){ transition-delay:.35s }
.js-stagger.is-in > *:nth-child(5){ transition-delay:.45s }
.js-stagger.is-in > *:nth-child(6){ transition-delay:.55s }
.js-stagger.is-in > *:nth-child(n+7){ transition-delay:.6s }

/* ---------- HERO — animated headline + orbits + parallax ---------- */
.js-hero h1 {
    background: linear-gradient(90deg, var(--js-primary-dark) 0%, var(--js-primary) 45%, var(--js-primary-dark) 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: js-gradientShift 9s ease-in-out infinite;
}
.js-hero-copy { animation: js-fadeRight .9s cubic-bezier(.2,.8,.2,1) both }
.js-hero-visual { animation: js-fadeLeft .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: .1s }

/* Decorative orbit shapes behind hero dashboard */
.js-hero-visual::before {
    content: "";
    position: absolute; top: 10%; left: 8%;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--js-accent);
    animation: js-orbit 11s linear infinite;
    opacity: .7;
}
.js-hero-visual::after {
    content: "";
    position: absolute; bottom: 12%; right: 6%;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--js-primary);
    animation: js-orbit 14s linear infinite reverse;
    opacity: .5;
}

/* Dashboard gentle float + shine sweep */
.js-dashboard { animation: js-float-y 6s ease-in-out infinite; position: relative; overflow: hidden }
.js-dashboard::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 0%, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%, transparent 100%);
    pointer-events: none;
    animation: js-shine 5.5s ease-in-out infinite;
    animation-delay: 2s;
}

/* Hero-badge pulse ring */
.js-dash-badge { animation: js-pulse-ring 2.6s ease-out infinite, js-float-y 5s ease-in-out infinite }

/* ---------- LOGO MARQUEE ---------- */
.js-logos .js-logo-row {
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    display: flex;
    gap: 3rem;
    flex-wrap: nowrap;
    width: 100%;
    margin-top: 1.25rem;
}
.js-logos .js-logo-track {
    display: inline-flex;
    gap: 3rem;
    animation: js-marquee 32s linear infinite;
    flex: none;
    padding-right: 3rem;
}
.js-logos:hover .js-logo-track { animation-play-state: paused }
.js-logo {
    color: #9aa8bc;
    font-weight: 800;
    font-family: var(--js-display);
    letter-spacing: .04em;
    font-size: 1.1rem;
    white-space: nowrap;
    transition: color .25s, transform .25s;
    flex: none;
}
.js-logo:hover { color: var(--js-primary); transform: translateY(-2px) }

/* ---------- Section-head gradient title ---------- */
.js-section-head h2 {
    background: linear-gradient(90deg, var(--js-primary-dark), var(--js-primary) 80%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.js-section.js-dark .js-section-head h2,
.js-section.js-cta h2 {
    background: linear-gradient(90deg, #fff, #d8e4f2);
    -webkit-background-clip: text;
    background-clip: text;
}

/* ---------- CARDS — 3D tilt on hover + shine + glowing border ---------- */
.js-card {
    transform-style: preserve-3d;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .25s;
    position: relative;
}
.js-card::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, transparent 40%, rgba(86,174,227,.35) 60%, rgba(164,212,0,.35) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
}
.js-card:hover { transform: translateY(-8px) scale(1.015); box-shadow: 0 24px 50px rgba(35,36,38,.14) }
.js-card:hover::before { opacity: 1 }

/* Service card: icon nudge + arrow slide */
.js-service-card .js-link-arrow { transition: letter-spacing .25s, color .25s, transform .25s }
.js-service-card:hover .js-link-arrow { letter-spacing: .06em; transform: translateX(4px); color: var(--js-primary-dark) }
.js-service-card:hover .js-card-icon { transform: rotate(-8deg) scale(1.08) }

/* Industry card: ring pulse on hover */
.js-card.js-ind:hover span { animation: js-pulse-ring 1.4s ease-out 1 }

/* ---------- PILLAR cards — glowing top bar on hover ---------- */
.js-pillar { overflow: hidden; position: relative }
.js-pillar::after {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--js-primary), var(--js-accent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.js-pillar:hover::after { transform: scaleX(1) }

/* ---------- Counter bar mini-chart behind numbers ---------- */
.js-counters { isolation: isolate }
.js-counter { position: relative; padding: 1rem 0.5rem }
.js-counter::before {
    content: "";
    position: absolute; inset: auto 18% 8% 18%; height: 36px;
    background:
        linear-gradient(180deg, transparent 0%, rgba(164,212,0,.08) 100%);
    border-radius: 4px;
    z-index: -1;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.js-counter.is-in::before { transform: scaleY(1) }
.js-counter strong {
    display: inline-block;
    background: linear-gradient(180deg, #fff 0%, var(--js-accent) 140%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- PRICING — featured plan: ribbon + scale on hover ---------- */
.js-price-card { transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s }
.js-price-card:hover { transform: translateY(-10px) }
.js-price-card.is-featured { position: relative }
.js-price-card.is-featured::before {
    content: "★ POPULAR";
    position: absolute;
    top: 16px; right: -42px;
    background: var(--js-accent);
    color: #2a3c00;
    padding: .35rem 3rem;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    transform: rotate(45deg);
    box-shadow: 0 4px 10px rgba(0,0,0,.15);
}
.js-price-card.is-featured:hover { transform: scale(1.04) translateY(-10px) }

/* ---------- TEAM — tilt + photo zoom ---------- */
.js-team-card { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s }
.js-team-card .js-team-photo { overflow: hidden }
.js-team-card .js-team-photo img { transition: transform .6s cubic-bezier(.2,.8,.2,1) }
.js-team-card:hover .js-team-photo img { transform: scale(1.08) }
.js-team-socials a { transition: transform .2s, background .2s, color .2s }
.js-team-socials a:hover { transform: translateY(-3px) scale(1.1) }

/* ---------- PROCESS — step number orbit + connector line ---------- */
.js-process { counter-reset: step }
.js-process li { position: relative; transition: transform .3s }
.js-process li:hover { transform: translateY(-6px) }
.js-process li span { transition: transform .25s }
.js-process li:hover span { transform: scale(1.1) rotate(-5deg) }

/* ---------- STACK flow — glowing step markers ---------- */
.js-stack-flow li { transition: transform .3s, background .3s }
.js-stack-flow li:hover {
    transform: translateY(-4px);
    background: rgba(164,212,0,.12);
    border-color: rgba(164,212,0,.4);
}
.js-stack-flow li span {
    display: inline-block;
    transition: transform .3s;
}
.js-stack-flow li:hover span { transform: scale(1.15) rotate(-6deg) }

/* ---------- CTA buttons — shine sweep ---------- */
.js-btn { position: relative; overflow: hidden; isolation: isolate }
.js-btn::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 0%, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%, transparent 100%);
    transform: translateX(-100%);
    transition: transform .6s ease;
    pointer-events: none;
    z-index: -1;
}
.js-btn:hover::after { transform: translateX(100%) }

.js-btn-primary:hover { transform: translateY(-2px) scale(1.02) }

/* Pulsing CTA (add class .js-pulse) */
.js-btn.js-pulse { animation: js-pulse-ring 2s ease-out infinite }

/* ---------- Section-head eyebrow: underline animation ---------- */
.js-section-head .js-eyebrow {
    position: relative;
    overflow: hidden;
}
.js-section-head .js-eyebrow::after {
    content: "";
    position: absolute; left: -100%; top: 0; bottom: 0; width: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
    animation: js-shine 3s ease-in-out infinite;
    animation-delay: 1s;
}

/* ---------- Mega menu items: slide-in when panel opens ---------- */
.js-has-megapanel:hover > .js-megapanel .js-mega-col,
.js-has-megapanel:focus-within > .js-megapanel .js-mega-col {
    animation: js-fadeUp .4s cubic-bezier(.2,.8,.2,1) both;
}
.js-has-megapanel > .js-megapanel .js-mega-col:nth-child(2) { animation-delay: .06s }
.js-has-megapanel > .js-megapanel .js-mega-col:nth-child(3) { animation-delay: .12s }
.js-has-megapanel > .js-megapanel .js-mega-col:nth-child(4) { animation-delay: .18s }
.js-has-megapanel > .js-megapanel .js-mega-feature { animation: js-fadeRight .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: .2s }

/* ---------- Progress bars: add sheen ---------- */
.js-bar { position: relative; overflow: hidden }
.js-bar > span::after {
    content: "";
    position: absolute; top: 0; right: 0; bottom: 0; width: 40px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5));
    animation: js-shine 2s ease-in-out infinite;
}

/* ---------- Exit popup: scale-in entry ---------- */
.js-exit-dialog { animation: js-zoomIn .35s cubic-bezier(.2,.8,.2,1) both }

/* ---------- Testimonial card rating: animated stars ---------- */
.js-rating { transition: transform .3s }
.js-testi-card:hover .js-rating { transform: scale(1.08) }
.js-testi-card blockquote::before { transition: transform .3s, color .3s }
.js-testi-card:hover blockquote::before { transform: scale(1.3) rotate(-6deg); color: var(--js-accent) }

/* ---------- Sticky WhatsApp: subtle pulse ---------- */
.js-sticky-wa { animation: js-pulse-ring 2.5s ease-out infinite }

/* ---------- Scroll-top button: bounce on visible ---------- */
.js-scrolltop.is-visible { animation: js-fadeUp .4s cubic-bezier(.2,.8,.2,1) both }

/* ---------- Fine polish: link underline grow ---------- */
.js-link-arrow { position: relative }
.js-link-arrow::before {
    content: "";
    position: absolute; bottom: -2px; left: 0; height: 2px; width: 0;
    background: var(--js-accent);
    transition: width .3s cubic-bezier(.2,.8,.2,1);
}
.js-link-arrow:hover::before { width: 100% }

/* ---------- Section fade-in on scroll (auto applied via JS) ---------- */
.js-section[data-revealed]{ opacity: 0; transform: translateY(30px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1) }
.js-section[data-revealed].is-in{ opacity: 1; transform: none }

/* ==========================================================================
   HEADER & NAV polish
   ========================================================================== */

/* Header: gradient bottom accent + shrink on scroll */
.js-header {
    transition: box-shadow .25s ease, padding .25s ease, background .25s ease;
    backdrop-filter: saturate(180%) blur(10px);
    background: rgba(255,255,255,.96);
}
.js-header::after {
    content:"";
    position:absolute; left:0; right:0; bottom:-1px; height:2px;
    background: linear-gradient(90deg, transparent, var(--js-primary) 20%, var(--js-accent) 50%, var(--js-primary) 80%, transparent);
    opacity: 0; transition: opacity .3s;
}
.js-header.is-scrolled::after { opacity: 1 }
.js-header.is-scrolled { box-shadow: 0 6px 24px rgba(35,36,38,.08) }
.js-header.is-scrolled .js-header-inner { padding-top: .6rem; padding-bottom: .6rem }

/* Brand: subtle logo shine on load */
.js-brand-text { position: relative; overflow: hidden }
.js-logo-mark {
    transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
    box-shadow: 0 4px 12px rgba(44,79,124,.25);
}
.js-brand-text:hover .js-logo-mark {
    transform: rotate(-8deg) scale(1.08);
    box-shadow: 0 8px 20px rgba(44,79,124,.35);
}
.js-logo-mark::after {
    animation: js-pulse-ring 2.4s ease-out infinite;
}

/* Nav items: smooth color + animated underline */
.js-menu > li > a {
    transition: color .2s ease;
    position: relative;
    padding: .5rem 0;
}
.js-menu > li > a::before {
    content:"";
    position: absolute; left: 50%; right: 50%; bottom: -2px; height: 2px;
    background: linear-gradient(90deg, var(--js-primary), var(--js-accent));
    transition: left .25s cubic-bezier(.2,.8,.2,1), right .25s cubic-bezier(.2,.8,.2,1);
    border-radius: 2px;
}
.js-menu > li > a:hover,
.js-menu > li.current-menu-item > a,
.js-menu > li.current-menu-parent > a {
    color: var(--js-primary-dark);
}
.js-menu > li > a:hover::before,
.js-menu > li.current-menu-item > a::before,
.js-menu > li.current-menu-parent > a::before {
    left: 0; right: 0;
}

/* Header CTA button: attention glow */
.js-header-cta .js-btn-primary {
    position: relative;
    box-shadow: 0 6px 18px rgba(164,212,0,.4);
}
.js-header-cta .js-btn-primary::before {
    content:"";
    position: absolute; inset: -4px;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--js-primary), var(--js-accent));
    opacity: 0;
    filter: blur(14px);
    transition: opacity .3s;
    z-index: -1;
}
.js-header-cta .js-btn-primary:hover::before { opacity: .55 }

/* Phone number hover: pulse */
.js-phone { transition: color .2s }
.js-phone:hover { color: var(--js-primary) }

/* ==========================================================================
   MEGA MENU upgrade
   ========================================================================== */

/* Panel entrance: scale+fade instead of flat slide */
.js-megapanel { transform-origin: top center }
.js-menu .js-has-megapanel:hover > .js-megapanel,
.js-menu .js-has-megapanel:focus-within > .js-megapanel {
    animation: js-megaIn .28s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes js-megaIn {
    from { opacity: 0; transform: translateY(12px) scale(.98) }
    to   { opacity: 1; transform: none }
}

/* Top accent bar: animated gradient */
.js-megapanel {
    border-top-width: 3px;
    border-image: linear-gradient(90deg, var(--js-primary) 0%, var(--js-accent) 50%, var(--js-primary) 100%) 1;
    background: linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
}

/* Column headers: icon rotates on hover */
.js-mega-col { position: relative }
.js-mega-col::after {
    content: "";
    position: absolute; right: -12px; top: 2.5rem; bottom: 2.5rem; width: 1px;
    background: linear-gradient(180deg, transparent, var(--js-border) 20%, var(--js-border) 80%, transparent);
}
.js-mega-col:last-of-type::after { display: none }
.js-mega-col .js-mega-colicon { transition: transform .35s cubic-bezier(.2,.8,.2,1), background .25s }
.js-mega-col:hover .js-mega-colicon { transform: rotate(-10deg) scale(1.1) }

/* Item icon: tint-swap + bounce */
.js-mega-col ul a { position: relative; transition: background .2s, transform .2s, padding .2s }
.js-mega-col ul a:hover { padding-left: 1rem }
.js-mega-col ul a::before {
    content: "";
    position: absolute; left: 0; top: 20%; bottom: 20%; width: 3px;
    background: var(--js-accent);
    border-radius: 0 2px 2px 0;
    transform: scaleY(0);
    transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.js-mega-col ul a:hover::before { transform: scaleY(1) }
.js-mega-col ul a .js-mega-icon { transition: transform .3s cubic-bezier(.2,.8,.2,1), background .25s, border-color .25s, color .25s }
.js-mega-col ul a:hover .js-mega-icon { transform: rotate(-8deg) scale(1.08) }

/* Title: color slide on hover */
.js-mega-title { transition: color .25s }
.js-mega-col ul a:hover .js-mega-title { color: var(--js-primary) }

/* Promo column: animated background shapes */
.js-mega-feature { position: relative; overflow: hidden }
.js-mega-feature::after {
    content: "";
    position: absolute;
    top: -30%; right: -30%;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(164,212,0,.35), transparent);
    animation: js-float-y 5s ease-in-out infinite;
}
.js-mega-feature-cta { position: relative; overflow: hidden }
.js-mega-feature-cta::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%);
    transform: translateX(-100%);
    transition: transform .6s ease;
}
.js-mega-feature-cta:hover::after { transform: translateX(100%) }

/* Footer strip inside panel: slide links on hover */
.js-megapanel-foot a { transition: color .2s, transform .25s; display: inline-flex; align-items: center; gap: .25rem }
.js-megapanel-foot a:hover { transform: translateX(3px) }

/* Caret pop */
.js-menu .js-has-megapanel > a .js-caret {
    transition: transform .25s cubic-bezier(.2,.8,.2,1), color .25s;
    display: inline-block;
}

/* Focus outlines — keyboard accessibility */
.js-menu a:focus-visible,
.js-mega-col ul a:focus-visible,
.js-btn:focus-visible {
    outline: 2px solid var(--js-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ==========================================================================
   TOPBAR polish
   ========================================================================== */
.js-topbar-left i { transition: transform .25s, color .2s }
.js-topbar-left span:hover i { transform: translateY(-2px); color: var(--js-accent) }
.js-topbar-right a { transition: all .25s cubic-bezier(.2,.8,.2,1) }
.js-topbar-right a:hover { transform: translateY(-3px) scale(1.08); background: var(--js-accent); color: #2a3c00 }

/* Announcement bar: gentle slide in */
.js-announce { animation: js-fadeDown .5s cubic-bezier(.2,.8,.2,1) both }

/* ==========================================================================
   COLOR SCHEME PRESETS (toggled via body class)
   ========================================================================== */

/* Navy + Coral — modern agency energy */
body.scheme-coral {
    --js-primary:      #ff4b34;   /* coral red */
    --js-primary-2:    #ff7a63;
    --js-primary-dark: #0c0839;   /* deep navy */
    --js-accent:       #ff4b34;
    --js-accent-2:     #e63b23;
    --js-dark:         #0c0839;
    --js-soft:         #fff5f4;   /* pink wash */
    --js-soft-2:       #f2f7ff;   /* blue wash */
}
body.scheme-coral .js-header-cta .js-btn-primary { color: #fff; background: var(--js-primary) }
body.scheme-coral .js-header-cta .js-btn-primary:hover { background: var(--js-accent-2); color: #fff }
body.scheme-coral .js-btn-primary { color: #fff; background: var(--js-primary); box-shadow: 0 6px 18px rgba(255,75,52,.4) }
body.scheme-coral .js-btn-primary:hover { background: var(--js-accent-2); color: #fff; box-shadow: 0 10px 24px rgba(255,75,52,.5) }
body.scheme-coral .js-btn { border-radius: 999px }
body.scheme-coral .js-card-icon { border-color: var(--js-primary); color: var(--js-primary); background: #fff }
body.scheme-coral .js-card:hover .js-card-icon { background: var(--js-primary); border-color: var(--js-primary); color: #fff }
body.scheme-coral .js-ind span { border-color: var(--js-primary); color: var(--js-primary); background: #fff }
body.scheme-coral .js-card.js-ind:hover span { background: var(--js-primary); border-color: var(--js-primary); color: #fff }
body.scheme-coral .js-section-head h2::after { background: var(--js-primary) }
body.scheme-coral .js-section-head .js-eyebrow { background: var(--js-primary); color: #fff }
body.scheme-coral .js-logo-mark::after { background: var(--js-primary) }
body.scheme-coral .js-hero { background: linear-gradient(180deg,#ffffff 0%,#fff5f4 45%,#ffe4e0 100%) }
body.scheme-coral .js-hero-copy .js-eyebrow { background: #fff5f4; color: var(--js-primary) }
body.scheme-coral .js-pillar::after { background: linear-gradient(90deg, var(--js-primary-dark), var(--js-primary)) }

/* --- Coral scheme: override all hardcoded rgba shadows/glows --- */
body.scheme-coral .js-btn-primary { color:#fff; box-shadow: 0 6px 18px rgba(255,75,52,.4) }
body.scheme-coral .js-btn-primary:hover { color:#fff; box-shadow: 0 10px 24px rgba(255,75,52,.55) }
body.scheme-coral .js-card-icon::before { border-color: rgba(255,75,52,.3) }
body.scheme-coral .js-card::before { background: linear-gradient(135deg, transparent 40%, rgba(255,75,52,.35) 60%, rgba(12,8,57,.25) 100%) }
body.scheme-coral .js-dash-badge { color:#fff; box-shadow: 0 10px 20px rgba(255,75,52,.45) }
body.scheme-coral .js-why-item .js-why-ico { background: rgba(255,75,52,.15); color: var(--js-primary) }
body.scheme-coral .js-why-item:hover .js-why-ico { background: var(--js-primary); color: #fff }
body.scheme-coral .js-stack-flow li:hover { background: rgba(255,75,52,.12); border-color: rgba(255,75,52,.4) }
body.scheme-coral .js-header-cta .js-btn-primary { box-shadow: 0 6px 18px rgba(255,75,52,.4) }
body.scheme-coral .js-bar > span { background: linear-gradient(90deg, var(--js-primary-dark), var(--js-primary)) }
body.scheme-coral .js-metric { background: rgba(255,75,52,.1); color: var(--js-primary-dark) }
body.scheme-coral .js-metric-big strong { color: var(--js-primary) }
body.scheme-coral @keyframes js-pulse-ring {}
body.scheme-coral .js-sticky-wa,
body.scheme-coral .js-dashboard,
body.scheme-coral .js-dash-badge { animation-name: js-float-y }
body.scheme-coral .js-logo-mark { background: linear-gradient(135deg, var(--js-primary-dark), var(--js-primary)) }
body.scheme-coral .js-hero-copy .js-eyebrow { background: var(--js-primary); color:#fff }
body.scheme-coral .js-price-card.is-featured { background: linear-gradient(180deg, var(--js-primary), #e63b23); border-color: var(--js-primary-dark) }
body.scheme-coral .js-price-card.is-featured::before { background: var(--js-primary-dark); color: #fff }
body.scheme-coral .js-price-card.is-featured .js-plan { color: #fff5f4 }
body.scheme-coral .js-rating { color: #ffa500 }
body.scheme-coral .js-dash-stats strong,
body.scheme-coral .js-price { color: var(--js-primary-dark) }
body.scheme-coral .js-mega-feature { background: linear-gradient(160deg, var(--js-primary-dark), #1a1254) }
body.scheme-coral .js-mega-colicon { background: var(--js-primary); color:#fff }
body.scheme-coral .js-mega-col ul a::before { background: var(--js-primary) }
body.scheme-coral .js-mega-feature::after { background: radial-gradient(closest-side, rgba(255,75,52,.4), transparent) }
body.scheme-coral .js-mega-feature-cta { background: var(--js-primary); color:#fff }
body.scheme-coral .js-mega-feature-cta:hover { background: #fff; color: var(--js-primary-dark) }
body.scheme-coral .js-mega-promo-eyebrow { background: var(--js-primary); color:#fff }
body.scheme-coral .js-megapanel { border-image: linear-gradient(90deg, var(--js-primary-dark) 0%, var(--js-primary) 50%, var(--js-primary-dark) 100%) 1 }

/* --- Decorative SVGs: swap to coral/navy tones for coral scheme --- */
body.scheme-coral .js-hero::before{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 500' preserveAspectRatio='none'><polyline points='0,380 200,340 400,355 600,270 800,290 1000,200 1200,230' fill='none' stroke='%23FF4B34' stroke-width='2' opacity='.4'/><g fill='%23FF4B34' opacity='.6'><circle cx='200' cy='340' r='6'/><circle cx='400' cy='355' r='6'/><circle cx='600' cy='270' r='6'/><circle cx='800' cy='290' r='6'/><circle cx='1000' cy='200' r='6'/></g></svg>")
}
body.scheme-coral .js-section.js-soft::before{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><circle cx='100' cy='100' r='90' fill='none' stroke='%23FF4B34' stroke-width='1' stroke-dasharray='3 6' opacity='.22'/><circle cx='100' cy='100' r='60' fill='none' stroke='%23FF4B34' stroke-width='1' opacity='.14'/></svg>")
}
body.scheme-coral .js-section.js-soft::after{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><polygon points='100,40 170,170 30,170' fill='none' stroke='%230C0839' stroke-width='1' opacity='.1'/></svg>")
}
body.scheme-coral .js-section.js-bg-chart::before{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='none'><polyline points='0,320 150,280 300,300 450,220 600,250 750,150 900,200 1050,80 1200,130' fill='none' stroke='%23FF4B34' stroke-width='2' opacity='.14'/><polyline points='0,350 150,330 300,340 450,290 600,310 750,240 900,270 1050,180 1200,210' fill='none' stroke='%230C0839' stroke-width='2' stroke-dasharray='4 6' opacity='.18'/></svg>")
}
body.scheme-coral .js-section.js-bg-blobs::before{
    background: radial-gradient(closest-side, rgba(255,75,52,.15), transparent)
}
body.scheme-coral .js-section.js-bg-blobs::after{
    background: radial-gradient(closest-side, rgba(12,8,57,.08), transparent)
}
body.scheme-coral .js-section.js-bg-grid{
    background-image:
        linear-gradient(rgba(255,75,52,.05) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,75,52,.05) 1px,transparent 1px)
}
body.scheme-coral .js-section.js-bg-dots{
    background-image: radial-gradient(circle, #fce5e0 1px, transparent 1px)
}
body.scheme-coral .js-section-head::before{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><circle cx='24' cy='24' r='20' fill='none' stroke='%23FF4B34' stroke-width='2' stroke-dasharray='3 5' opacity='.4'/><polyline points='10,32 18,24 26,28 38,14' fill='none' stroke='%230C0839' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/><g fill='%23FF4B34'><circle cx='10' cy='32' r='3'/><circle cx='18' cy='24' r='3'/><circle cx='26' cy='28' r='3'/><circle cx='38' cy='14' r='3'/></g></svg>")
}
body.scheme-coral .js-section.js-dark::before{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 500' preserveAspectRatio='none'><polyline points='0,360 160,300 320,340 480,220 640,260 800,160 960,200 1120,90 1200,120' fill='none' stroke='rgba(255,75,52,.35)' stroke-width='2'/><g fill='rgba(255,75,52,.6)'><circle cx='160' cy='300' r='5'/><circle cx='320' cy='340' r='5'/><circle cx='480' cy='220' r='5'/><circle cx='640' cy='260' r='5'/><circle cx='800' cy='160' r='5'/><circle cx='960' cy='200' r='5'/><circle cx='1120' cy='90' r='5'/></g></svg>")
}
body.scheme-coral .js-cta::before{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='none'><polyline points='0,320 200,240 400,280 600,160 800,200 1000,80 1200,120' fill='none' stroke='rgba(255,75,52,.4)' stroke-width='3'/><g fill='white' opacity='.6'><circle cx='200' cy='240' r='6'/><circle cx='400' cy='280' r='6'/><circle cx='600' cy='160' r='6'/><circle cx='800' cy='200' r='6'/><circle cx='1000' cy='80' r='6'/></g></svg>")
}
body.scheme-coral .js-counters::after{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'><path d='M0,40 C240,80 480,10 720,25 C960,45 1200,80 1440,30 L1440,80 L0,80 Z' fill='%23fff5f4'/></svg>")
}

/* Decorative inline SVGs: tint coral in scheme-coral */
body.scheme-coral .js-deco path[stroke="#A4D400"],
body.scheme-coral .js-deco polyline[stroke="#A4D400"] { stroke: var(--js-primary) }
body.scheme-coral .js-deco circle[fill="#56AEE3"],
body.scheme-coral .js-deco rect[stroke="#2C4F7C"],
body.scheme-coral .js-deco rect[stroke="#A4D400"],
body.scheme-coral .js-deco g[fill="#56AEE3"] circle,
body.scheme-coral .js-deco g[fill="#56AEE3"],
body.scheme-coral .js-deco circle[stroke="#56AEE3"] { fill: var(--js-primary); stroke: var(--js-primary) }

/* Counter strip: coral accents */
body.scheme-coral .js-counters { background: linear-gradient(135deg, var(--js-primary-dark) 0%, #1a1254 100%) }
body.scheme-coral .js-counter strong { background: linear-gradient(180deg, #fff 0%, var(--js-primary) 140%); -webkit-background-clip: text; background-clip: text }

/* Final CTA gradient uses coral */
body.scheme-coral .js-cta { background: linear-gradient(135deg, var(--js-primary-dark), var(--js-primary)) }

/* Dark section uses full navy + coral-accented chart */
body.scheme-coral .js-section.js-dark { background: linear-gradient(135deg, var(--js-primary-dark) 0%, #1a1254 100%) }
body.scheme-coral .js-stack-flow li span,
body.scheme-coral .js-process li span { color: var(--js-primary) }

/* Navy + Sunset — warmer variant */
body.scheme-sunset {
    --js-primary:      #f97316;
    --js-primary-2:    #fb923c;
    --js-primary-dark: #111827;
    --js-accent:       #fbbf24;
    --js-accent-2:     #f59e0b;
    --js-dark:         #111827;
    --js-soft:         #fff7ed;
    --js-soft-2:       #fef3c7;
}
body.scheme-sunset .js-hero { background: linear-gradient(180deg,#ffffff 0%,#fff7ed 50%,#ffe4b5 100%) }
body.scheme-sunset .js-btn-primary { color: #fff; background: var(--js-primary); box-shadow: 0 6px 18px rgba(249,115,22,.4) }
body.scheme-sunset .js-btn-primary:hover { background: var(--js-accent-2); color: #fff }
body.scheme-sunset .js-section-head h2::after { background: var(--js-primary) }
body.scheme-sunset .js-section-head .js-eyebrow { background: var(--js-primary); color: #fff }

/* Navy + Neutral — ultra-clean mono */
body.scheme-mono {
    --js-primary:      #374151;
    --js-primary-2:    #6b7280;
    --js-primary-dark: #111827;
    --js-accent:       #10b981;
    --js-accent-2:     #059669;
    --js-dark:         #111827;
    --js-soft:         #f9fafb;
    --js-soft-2:       #f3f4f6;
}
body.scheme-mono .js-btn-primary { color: #fff; background: var(--js-primary-dark) }
body.scheme-mono .js-btn-primary:hover { background: var(--js-primary); color: #fff }

/* ==========================================================================
   NEW DESIGN HELPERS (Seozie-inspired patterns)
   ========================================================================== */

/* Two-tone headline: wrap an accent word in <span class="js-hl"> */
.js-hl {
    color: var(--js-primary);
    position: relative;
    display: inline-block;
    white-space: nowrap;
}
.js-hl::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -2px; height: 6px;
    background: var(--js-primary);
    opacity: .18;
    border-radius: 3px;
    z-index: -1;
}

/* Pill-style round buttons (alternative to square) */
.js-btn-pill { border-radius: 999px; padding: .9rem 1.8rem }

/* New section BG variant: warm pink wash */
.js-section.js-bg-pink {
    background: linear-gradient(180deg, #ffffff 0%, #fff5f4 100%);
    position: relative;
}
.js-section.js-bg-pink::before {
    content: ""; position: absolute; top: 40px; right: -80px;
    width: 260px; height: 260px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255,75,52,.08), transparent);
    pointer-events: none;
}

/* New section BG variant: soft blue wash */
.js-section.js-bg-tint {
    background: linear-gradient(180deg, #ffffff 0%, #f2f7ff 100%);
}

/* Stat badge: floating pill with icon + number (reusable) */
.js-stat-pill {
    display: inline-flex; align-items: center; gap: .6rem;
    background: #fff;
    border: 1px solid var(--js-border);
    border-radius: 999px;
    padding: .5rem 1rem .5rem .5rem;
    box-shadow: 0 8px 20px rgba(35,36,38,.06);
    font-weight: 600;
}
.js-stat-pill .js-stat-ico {
    display: grid; place-items: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--js-accent); color: #fff;
}

/* Illustrated hero rocket (pure SVG, original) */
.js-hero-illus {
    position: absolute;
    right: 5%; top: 8%;
    width: 320px; max-width: 45%;
    pointer-events: none;
    animation: js-float-y 6s ease-in-out infinite;
}
.js-hero-illus svg { width: 100%; height: auto; display: block }

/* ---------- Reduced motion respect ---------- */
@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}