/* ===== Ascensio — supporting styles ===== */

:root {
    --navy: #16243f;
    --accent: #2f4d8a;
    --periwinkle: #aebfe0;
    --gold: #e9b44c;
    --hero-canvas: #0b1426;
}

html, body { -webkit-font-smoothing: antialiased; }

/* ---- Navbar ---- */
#navbar { color: var(--navy); }
#navbar.scrolled {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid rgba(22, 36, 63, 0.08);
}

.nav-link {
    position: relative;
    color: rgba(22, 36, 63, 0.7);
    transition: color .25s ease;
}
.nav-link:hover { color: var(--navy); }
.nav-link::after {
    content: "";
    position: absolute;
    left: 0; bottom: -6px;
    height: 1.5px; width: 0;
    background: var(--accent);
    transition: width .3s ease;
}
.nav-link:hover::after { width: 100%; }

.mobile-link {
    padding: .65rem .25rem;
    color: rgba(22, 36, 63, 0.8);
    border-bottom: 1px solid rgba(22, 36, 63, 0.06);
}
.mobile-link:hover { color: var(--accent); }

/* Hamburger -> X */
.hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---- Mobile menu overlay ---- */
#mobile-menu { opacity: 0; transition: opacity 0.3s ease; }
#mobile-menu.is-open { opacity: 1; }
.menu-item { width: fit-content; transition: color 0.2s ease, opacity 0.2s ease; }
.menu-item:active { color: var(--periwinkle); }
@media (prefers-reduced-motion: reduce) { #mobile-menu { transition: none; } }

/* ---- Hero outlined word ---- */
.hero-outline {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--navy);
    text-stroke: 1.5px var(--navy);
    font-style: normal;
}

/* ---- Hero (bento) ---- */
/* Transparent so the fixed background marquee shows through the dark gaps
   (the dark colour is supplied by the body / #bg-marquee behind it). */
.hero-canvas { background: transparent; }

/* ---- Scroll-driven background marquee ---- */
#bg-marquee {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background: var(--hero-canvas);
}
#bg-marquee .bg-row {
    white-space: nowrap;
    font-family: 'Fraunces', serif;
    font-weight: 900;
    font-size: 8.5vw;
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: rgba(255, 255, 255, 0.05);
    will-change: transform;
    transform: translate3d(0, 0, 0);
}
#bg-marquee .bg-row:nth-child(even) { color: rgba(174, 191, 224, 0.07); }
/* warp each chain so the text looks tied/wrapped around something */
#bg-marquee .bg-row { filter: url(#chain-warp); }
@media (prefers-reduced-motion: reduce) {
    .bg-row { transform: translateX(-22%) !important; }
}

.hero-panel { box-shadow: 0 40px 90px -50px rgba(0,0,0,0.6); }
/* Square the top-right so the dark "Sign up" notch merges into the canvas (no periwinkle peek). */
.hero-panel { border-top-right-radius: 0; }

/* The believer figure, anchored to the bottom of the photo column */
.hero-figure-img {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: contain;
    object-position: bottom center;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}
@media (min-width: 1024px) {
    .hero-figure-img { height: 116%; left: 46%; }
}

/* The header ↔ hero connection: a dark notch carved into the panel's top-right,
   with curved edges — a rounded inner corner (R) plus two concave fillets of the
   SAME radius R so the periwinkle flows smoothly into the notch. */
.hero-cta-notch {
    --r: 24px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 56px;
    padding: 0 24px 0 30px;
    background: var(--hero-canvas);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom-left-radius: var(--r);
    transition: color 0.25s ease;
}
.hero-cta-notch:hover { color: var(--periwinkle); }
/* concave fillet — along the panel's top edge, to the LEFT of the notch */
.hero-cta-notch::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--r));
    top: 0;
    width: var(--r);
    height: var(--r);
    background: radial-gradient(circle var(--r) at 0% 100%, transparent calc(var(--r) - 0.5px), var(--hero-canvas) var(--r));
}
/* concave fillet — along the panel's right edge, BELOW the notch */
.hero-cta-notch::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: calc(-1 * var(--r));
    width: var(--r);
    height: var(--r);
    background: radial-gradient(circle var(--r) at 0% 100%, transparent calc(var(--r) - 0.5px), var(--hero-canvas) var(--r));
}

/* Inline mark glyph in the headline */
.hero-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: -0.12em;
    height: 0.84em;
    width: 0.84em;
    margin: 0 0.05em;
    border-radius: 0.22em;
    background: var(--accent);
    box-shadow: 0 10px 22px -12px rgba(47, 77, 138, 0.7);
    padding: 0.1em;
}

/* Animated underline under the italic word */
.hero-em { position: relative; white-space: nowrap; }
.hero-em::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0.04em;
    height: 0.08em;
    border-radius: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    animation: underlineGrow 0.9s cubic-bezier(.22,1,.36,1) 1.05s forwards;
}
@keyframes underlineGrow { to { transform: scaleX(1); } }

/* ---- Home navbar: defer to the hero's own nav on desktop, reveal on scroll ---- */
@media (min-width: 1024px) {
    .nav-home:not(.revealed) {
        opacity: 0;
        transform: translateY(-100%);
        pointer-events: none;
    }
}
/* On mobile the header lives entirely inside the hero panel — no fixed navbar,
   not even on scroll. */
@media (max-width: 1023px) {
    .nav-home { display: none !important; }
}

/* ---- Navbar logo variants ---- */
.nav-logo-white { display: none; }
#navbar.nav-dark:not(.scrolled) .nav-logo-navy { display: none; }
#navbar.nav-dark:not(.scrolled) .nav-logo-white { display: inline-block; }

/* ---- Dark-page navbar: white at top, frosts to navy on scroll ---- */
#navbar.nav-dark:not(.scrolled) { color: #fff; }
#navbar.nav-dark:not(.scrolled) .nav-link { color: rgba(255, 255, 255, 0.78); }
#navbar.nav-dark:not(.scrolled) .nav-link:hover { color: #fff; }
#navbar.nav-dark:not(.scrolled) .nav-link::after { background: #fff; }
#navbar.nav-dark:not(.scrolled) .nav-cta:hover { color: var(--periwinkle); }

/* ---- Coming soon modal ---- */
#soon-modal { opacity: 0; transition: opacity 0.25s ease; }
#soon-modal.is-open { opacity: 1; }
#soon-modal .soon-card {
    transform: translateY(14px) scale(0.97);
    transition: transform 0.35s cubic-bezier(.22,1,.36,1);
}
#soon-modal.is-open .soon-card { transform: none; }
@media (prefers-reduced-motion: reduce) {
    #soon-modal, #soon-modal .soon-card { transition: none; }
}

/* ---- Tools tabs ---- */
.tool-tab {
    padding: .55rem 1.35rem;
    border-radius: 9999px;
    color: rgba(22, 36, 63, 0.55);
    transition: all .3s ease;
}
.tool-tab.is-active {
    background: var(--navy);
    color: #fff;
    box-shadow: 0 6px 20px -8px rgba(22, 36, 63, 0.5);
}
.tool-panel { animation: panelIn .5s cubic-bezier(.22,1,.36,1); }
@keyframes panelIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- FAQ ---- */
.faq-item[data-open="1"] .faq-icon { transform: rotate(45deg); background: var(--navy); color: #fff; border-color: var(--navy); }

/* ---- Scroll reveal ---- */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
    transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].in-view { opacity: 1; transform: none; }

/* ---- Hero entrance fallback (if GSAP fails to load) ---- */
.no-gsap [data-hero] { opacity: 1 !important; transform: none !important; }

/* ============================================================
   PREMIUM LAYER — loading, micro-interactions, micro-animations
   ============================================================ */

/* ---- Preloader (loading state) ---- */
#preloader {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0b1426;
    transition: opacity 0.7s ease, visibility 0.7s ease;
}
#preloader.done { opacity: 0; visibility: hidden; }
.pre-spinner {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.14);
    border-top-color: var(--periwinkle);
    animation: preSpin 0.8s linear infinite;
}
@keyframes preSpin { to { transform: rotate(360deg); } }

/* ---- Press feedback (tap / click micro-interaction — no hover motion) ---- */
.magnetic, .btn-shine, .press { transition: transform 0.16s ease; }
.magnetic:active, .btn-shine:active, .press:active { transform: scale(0.96); }

/* ---- Active nav link ---- */
.nav-link.is-active { color: var(--navy); }
.nav-link.is-active::after { width: 100%; }

/* ---- Image loading / error states ---- */
.img-failed { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
    [data-reveal], .tool-panel, .chart-draw, .hero-em::after {
        transition: none; animation: none; opacity: 1; transform: none;
    }
    .chart-draw { stroke-dashoffset: 0; }
    .hero-em::after { transform: scaleX(1); }
    .magnetic:active, .btn-shine:active, .press:active { transform: none; }
}