/* ============================================================
   ZESTRANK — GLOBAL 3D DESIGN SYSTEM
   Loaded site-wide. Restyles cards, buttons, sections, forms
   and adds depth, glass, aurora glow, and 3D interactivity to
   EVERY page without changing any URL, markup logic or content.
   ============================================================ */

:root {
    --zr-bg: #05070f;
    --zr-bg-2: #0a0f1e;
    --zr-surface: rgba(19, 27, 48, 0.55);
    --zr-surface-solid: #0d1424;
    --zr-border: rgba(96, 130, 220, 0.16);
    --zr-border-strong: rgba(96, 130, 220, 0.38);
    --zr-blue: #3b82f6;
    --zr-blue-bright: #60a5fa;
    --zr-indigo: #6366f1;
    --zr-cyan: #22d3ee;
    --zr-text: #e6ecfb;
    --zr-text-soft: #aab6d4;
    --zr-glow: 0 0 40px rgba(59, 130, 246, 0.25);
    --zr-shadow-3d: 0 24px 60px -20px rgba(0, 0, 0, 0.75), 0 8px 20px -12px rgba(37, 99, 235, 0.35);
    --zr-radius: 20px;
}

/* ---------- Global atmosphere ---------- */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;          /* hard stop for any horizontal escape */
}

body {
    background: var(--zr-bg);
    color: var(--zr-text);
    position: relative;
    overflow-x: hidden;
    max-width: 100%;
}

/* Fixed animated aurora mesh behind everything */
body::before {
    content: "";
    position: fixed;
    inset: -20% -20% -20% -20%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(42% 42% at 18% 12%, rgba(59, 130, 246, 0.18), transparent 60%),
        radial-gradient(38% 38% at 82% 8%, rgba(99, 102, 241, 0.16), transparent 60%),
        radial-gradient(45% 45% at 75% 88%, rgba(34, 211, 238, 0.10), transparent 62%),
        radial-gradient(40% 40% at 12% 82%, rgba(37, 99, 235, 0.12), transparent 60%);
    filter: blur(30px);
    animation: zrAurora 22s ease-in-out infinite alternate;
}

/* Subtle 3D grid floor */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(96, 130, 220, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(96, 130, 220, 0.05) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(circle at 50% 40%, black, transparent 78%);
    -webkit-mask-image: radial-gradient(circle at 50% 40%, black, transparent 78%);
    opacity: 0.5;
}

/* Keep real content above the atmosphere layers */
#content, header#zestrank-global-header, footer#zestrank-global-footer,
.site-content, body > .fixed { position: relative; z-index: 2; }

/* ------------------------------------------------------------
   LET THE AURORA GLOW THROUGH
   Every template paints opaque dark section backgrounds
   (bg-slate-950/955/900, .zrh-wrapper, .zrh-block-*). If left
   opaque they fully hide the fixed aurora + grid. We soften the
   PAGE-LEVEL backgrounds to translucent dark so the atmosphere
   shows through, while KEEPING cards/inputs/badges readable.
   Contrast stays strong: translucent dark over a dark aurora.
   ------------------------------------------------------------ */
.zrh-wrapper { background-color: transparent !important; }

.zrh-block-hero, .zrh-block-dark { background-color: rgba(5, 7, 15, 0.62) !important; }
.zrh-block-slate { background-color: rgba(12, 18, 34, 0.60) !important; }

/* Full-bleed section backgrounds -> translucent so aurora bleeds up.
   Scoped to direct section usage, NOT small chips/badges (those keep
   their own solid look because they are cards handled elsewhere). */
section.bg-slate-950, section.bg-slate-955,
section[class*="bg-slate-950"]:not([class*="/"]),
div.bg-slate-950 > section {
    background-color: rgba(5, 7, 15, 0.60) !important;
}
section.bg-slate-900:not([class*="/"]) {
    background-color: rgba(12, 18, 34, 0.55) !important;
}

@keyframes zrAurora {
    0%   { transform: translate3d(0,0,0) scale(1); }
    50%  { transform: translate3d(2%, -1.5%, 0) scale(1.06); }
    100% { transform: translate3d(-2%, 2%, 0) scale(1.02); }
}

/* ============================================================
   AUTO 3D CARD TREATMENT
   Any existing card-ish block on any page gets glass + depth.
   ============================================================ */
[class*="rounded-xl"][class*="border-slate"],
[class*="rounded-2xl"][class*="border-slate"],
.zrh-3d-card,
.zr-card {
    position: relative;
    background: var(--zr-surface) !important;
    border: 1px solid var(--zr-border) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: var(--zr-shadow-3d);
    transform-style: preserve-3d;
    transition: transform 0.35s cubic-bezier(.2,.7,.2,1),
                border-color 0.3s ease,
                box-shadow 0.35s ease;
    will-change: transform;
}

[class*="rounded-xl"][class*="border-slate"]:hover,
[class*="rounded-2xl"][class*="border-slate"]:hover,
.zr-card:hover {
    border-color: var(--zr-border-strong) !important;
    box-shadow: 0 34px 80px -24px rgba(0,0,0,.82), 0 0 46px -6px rgba(59,130,246,.4);
}

/* Sheen highlight along the top edge of glass cards */
[class*="rounded-xl"][class*="border-slate"]::before,
[class*="rounded-2xl"][class*="border-slate"]::before,
.zr-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg, rgba(255,255,255,.22), transparent 40%, transparent 60%, rgba(59,130,246,.25));
    -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: .7;
    pointer-events: none;
}

/* Interactive glare that follows the cursor (fed by JS custom props) */
.zr-tilt {
    transform-style: preserve-3d;
    transition: transform 0.18s ease-out;
}
.zr-tilt .zr-glare {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(220px circle at var(--zr-mx, 50%) var(--zr-my, 0%),
                rgba(255,255,255,.16), transparent 60%);
    opacity: 0;
    transition: opacity .3s ease;
    z-index: 3;
}
.zr-tilt:hover .zr-glare { opacity: 1; }

/* ============================================================
   BUTTONS — glossy 3D pill
   Targets the primary blue CTA buttons already used across the site.
   Excludes: inputs, icon badges (/10 /15 /20), tiny pager dots
   (h-1, h-1.5, h-2, h-2.5), and testimonial dots by id.
   ============================================================ */
[class*="bg-blue-600"]:not(input):not([class*="/10"]):not([class*="/15"]):not([class*="/20"]):not([class*="h-1"]):not([class*="h-2"]):not([id*="dot"]),
[class*="from-blue-600"] {
    position: relative;
    box-shadow: 0 10px 24px -8px rgba(37,99,235,.6), inset 0 1px 0 rgba(255,255,255,.28);
    transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, filter .25s ease;
    overflow: hidden;
}
a[class*="bg-blue-600"]:not([class*="/10"]):not([id*="dot"]):hover,
button[class*="bg-blue-600"]:not([class*="/10"]):not([class*="h-1"]):not([class*="h-2"]):not([id*="dot"]):hover,
a[class*="from-blue-600"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -10px rgba(37,99,235,.75), inset 0 1px 0 rgba(255,255,255,.4);
    filter: brightness(1.06);
}
a[class*="bg-blue-600"]:not([id*="dot"]):active,
button[class*="bg-blue-600"]:not([class*="h-1"]):not([class*="h-2"]):not([id*="dot"]):active { transform: translateY(0) scale(.98); }

/* Moving shine sweep on primary CTA buttons only */
a[class*="bg-blue-600"]:not([class*="/10"]):not([id*="dot"])::after,
button[class*="bg-blue-600"]:not([class*="/10"]):not([class*="h-1"]):not([class*="h-2"]):not([id*="dot"])::after,
a[class*="from-blue-600"]::after {
    content: "";
    position: absolute;
    top: 0; left: -120%;
    width: 60%; height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-18deg);
    transition: left .6s ease;
    pointer-events: none;
}
a[class*="bg-blue-600"]:hover::after,
button[class*="bg-blue-600"]:hover::after,
a[class*="from-blue-600"]:hover::after { left: 140%; }

/* ============================================================
   ICON BADGES — give the small square icon tiles real depth
   ============================================================ */
[class*="rounded-xl"][class*="bg-blue-600/10"],
[class*="rounded-lg"][class*="bg-blue-600/15"],
[class*="rounded-lg"][class*="bg-blue-500/10"] {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 22px -12px rgba(37,99,235,.6);
    transition: transform .3s ease, box-shadow .3s ease;
}
.group:hover [class*="rounded-xl"][class*="bg-blue-600/10"] {
    transform: translateZ(20px) scale(1.06);
}

/* ============================================================
   HEADINGS — crisp gradient accent on the blue spans
   Fallback-safe: keeps a solid blue color; the transparent
   gradient fill is only applied where background-clip:text is
   supported, so headings can never render invisible.
   ============================================================ */
h1 .text-blue-500, h1 .text-blue-500 span,
h2 .text-blue-500, .text-blue-500.gradient {
    color: var(--zr-blue-bright);   /* solid fallback */
    text-shadow: 0 0 34px rgba(59,130,246,.35);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    h1 .text-blue-500, h1 .text-blue-500 span,
    h2 .text-blue-500, .text-blue-500.gradient {
        background: linear-gradient(120deg, var(--zr-blue-bright), var(--zr-cyan) 55%, var(--zr-indigo));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

/* ============================================================
   FORM FIELDS — inset glass inputs
   ============================================================ */
input[class*="bg-slate-950"], textarea[class*="bg-slate-950"], select[class*="bg-slate-950"],
input[class*="bg-slate-900"], textarea[class*="bg-slate-900"], select[class*="bg-slate-900"] {
    background: rgba(6, 10, 22, 0.72) !important;
    box-shadow: inset 0 2px 8px rgba(0,0,0,.5);
    transition: box-shadow .25s ease, border-color .25s ease, transform .2s ease;
}
input:focus, textarea:focus, select:focus {
    box-shadow: inset 0 2px 8px rgba(0,0,0,.5), 0 0 0 3px rgba(59,130,246,.25) !important;
}

/* ============================================================
   SECTIONS — floating panel feel + soft dividers
   ============================================================ */
section { position: relative; z-index: 2; }

/* ============================================================
   SCROLL REVEAL (driven by JS: .zr-reveal -> .zr-in)
   ============================================================ */
.zr-reveal {
    opacity: 0;
    transform: translateY(34px) scale(.98);
    transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
    will-change: opacity, transform;
}
.zr-reveal.zr-in {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Stagger helper */
.zr-reveal[data-zr-delay="1"] { transition-delay: .08s; }
.zr-reveal[data-zr-delay="2"] { transition-delay: .16s; }
.zr-reveal[data-zr-delay="3"] { transition-delay: .24s; }
.zr-reveal[data-zr-delay="4"] { transition-delay: .32s; }

/* ============================================================
   HEADER + FOOTER polish
   ============================================================ */
header#zestrank-global-header {
    background: rgba(5, 7, 15, 0.72) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid var(--zr-border) !important;
    box-shadow: 0 18px 40px -30px rgba(0,0,0,.9);
}

/* Logo tile gets a 3D floating pulse */
#brand-logo > div:first-child,
footer#zestrank-global-footer .rounded-lg.bg-gradient-to-br {
    box-shadow: 0 8px 20px -6px rgba(37,99,235,.7), inset 0 1px 0 rgba(255,255,255,.35);
    animation: zrFloat 5s ease-in-out infinite;
}
@keyframes zrFloat {
    0%,100% { transform: translateY(0) rotateX(0) rotateY(0); }
    50%     { transform: translateY(-4px) rotateY(8deg); }
}

footer#zestrank-global-footer {
    background: linear-gradient(180deg, transparent, rgba(5,7,15,.6)) !important;
    border-top: 1px solid var(--zr-border) !important;
}

/* ============================================================
   HERO 3D STAGE (homepage) — orb, rings, floating chips
   ============================================================ */
.zr-hero-stage {
    position: relative;
    perspective: 1400px;
    z-index: 2;
    overflow: hidden;            /* clip decorative orbs/rings/chips to the stage */
    overflow: clip;              /* modern engines: clip without a scroll container */
    max-width: 100%;
}
.zr-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    background: radial-gradient(circle at 30% 30%, rgba(96,165,250,.9), rgba(37,99,235,.25) 55%, transparent 72%);
    box-shadow: 0 0 90px 10px rgba(59,130,246,.35);
    animation: zrFloatOrb 9s ease-in-out infinite;
    pointer-events: none;
}
@keyframes zrFloatOrb {
    0%,100% { transform: translate3d(0,0,0); }
    50%     { transform: translate3d(0,-26px,40px); }
}
.zr-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(96,165,250,.28);
    box-shadow: inset 0 0 40px rgba(59,130,246,.12);
    animation: zrSpin 26s linear infinite;
    pointer-events: none;
}
.zr-ring.slow { animation-duration: 46s; animation-direction: reverse; }
@keyframes zrSpin { to { transform: rotate(360deg); } }

/* Floating stat/keyword chips in hero */
.zr-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .9rem;
    font-size: 11px;
    font-weight: 700;
    color: var(--zr-text);
    border-radius: 999px;
    background: rgba(13,20,36,.75);
    border: 1px solid var(--zr-border-strong);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--zr-shadow-3d);
    animation: zrFloat 6s ease-in-out infinite;
    pointer-events: none;
    white-space: nowrap;
}
.zr-chip i { color: var(--zr-cyan); }

/* Marquee of trust keywords */
.zr-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.zr-marquee__track {
    display: inline-flex;
    gap: 3rem;
    white-space: nowrap;
    animation: zrMarquee 32s linear infinite;
}
@keyframes zrMarquee { to { transform: translateX(-50%); } }

/* ============================================================
   REDUCED MOTION + PERFORMANCE
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    body::before, .zr-orb, .zr-ring, .zr-chip,
    #brand-logo > div:first-child, .zr-marquee__track { animation: none !important; }
    .zr-reveal { opacity: 1 !important; transform: none !important; }
}

/* Disable heavy backdrop blur on small screens for smoothness */
@media (max-width: 640px) {
    [class*="rounded-xl"][class*="border-slate"],
    [class*="rounded-2xl"][class*="border-slate"],
    .zr-card { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
    body::after { opacity: .3; }

    /* Hide purely-decorative floating chips on phones: they add clutter
       and can push layout. Orbs/rings stay (clipped by the hero stage). */
    .zr-chip { display: none !important; }

    /* Keep decorative orbs/rings from ever driving page width */
    .zr-orb, .zr-ring { max-width: 70vw; max-height: 70vw; }
}

/* Marquee must never create horizontal page scroll */
.zr-marquee { max-width: 100%; }
.zr-marquee__track { will-change: transform; }