/* ═══════════════════════════════════════════════════════════════════════════
   The "office block" homepage: a re-skin of style.css / pages.css for one dark
   "building at dusk" surface, plus the hero, the payoff band, the tower journey
   and the React-Bits-style effects. Loads AFTER style.css and pages.css, on
   pages whose <body> carries class="tower" (the homepage and customer stories).
   The choreography lives in js/tower.js.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens: every light band on the live site becomes a dark glass band ── */
body.tower {
    --surface: #17141f;
    --surface-dark: transparent;
    --surface-darker: #0d0b13;
    --text: #F1F1F1;
    --text-muted: rgba(241,241,241,0.66);
    --light-shade: transparent;
    --border: rgba(255,255,255,0.10);
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 30px rgba(0,0,0,0.25);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.45);
    --glass: rgba(23,20,31,0.62);
    --glass-border: rgba(255,255,255,0.12);
    --night: 0.35;             /* 0 = dusk, 1 = night; driven by scroll */
    background: #0f0d16;
    color: var(--text);
}
body.tower .section { position: relative; z-index: 1; padding: 110px 0; }
body.tower .section-dark { background: transparent; }

/* ── 2. Sky: a fixed layer under everything. Dusk → night as --night rises ── */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
    background:
        radial-gradient(ellipse 120% 60% at 50% 115%, rgba(174,58,237,calc(0.35 - 0.2 * var(--night))), transparent 60%),
        linear-gradient(180deg,
            color-mix(in srgb, #241642 calc(100% - var(--night) * 100%), #07060c) 0%,
            color-mix(in srgb, #4b2063 calc(100% - var(--night) * 100%), #110c1e) 55%,
            color-mix(in srgb, #b2654a calc(100% - var(--night) * 100%), #1b1030) 100%);
}
/* "Aurora" (React Bits port): three soft blobs drifting behind the hero. */
.aurora { position: absolute; inset: -20% -10%; filter: blur(60px); opacity: calc(0.9 - 0.5 * var(--night)); }
.aurora::before, .aurora::after { content: ""; position: absolute; width: 55vw; height: 55vw; border-radius: 50%;
    background: radial-gradient(circle, rgba(174,58,237,0.55), transparent 65%); animation: drift 22s ease-in-out infinite alternate; }
.aurora::after { left: 50%; top: 10%; background: radial-gradient(circle, rgba(76,29,149,0.7), transparent 65%); animation-duration: 28s; animation-delay: -9s; }
@keyframes drift { from { transform: translate(-10%, -5%) scale(1); } to { transform: translate(15%, 12%) scale(1.15); } }
.stars { position: absolute; inset: 0; opacity: var(--night);
    background-image: radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 28% 8%, #fff 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 44% 24%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 61% 12%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 73% 30%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 86% 9%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 92% 36%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 8% 42%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 36% 40%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 55% 46%, #fff 50%, transparent 51%);
    background-size: 100% 100%; }
@media (prefers-reduced-motion: reduce) { .aurora::before, .aurora::after { animation: none; } }

/* ── 3. Nav (live markup) ── */
#nav { z-index: 50; }
#nav.scrolled { background: rgba(13,11,19,0.82); backdrop-filter: blur(18px); }
body.tower .nav-links.open { display: flex; flex-direction: column; position: fixed; inset: 64px 0 auto 0; background: rgba(13,11,19,0.96); padding: 20px 24px 28px; gap: 18px; }

/* ── 4. Hero ── */
.hero-block { position: relative; z-index: 1; min-height: 100vh; display: flex; align-items: center; }
.hero-block .hero-content { padding: 150px 24px 110px; }
.status-badge { display: inline-flex; align-items: center; gap: 10px; background: rgba(174,58,237,0.14); border: 1px solid rgba(206,140,245,0.35); padding: 8px 18px; border-radius: 100px; color: var(--brand-accent); font-size: 13px; font-weight: 700; margin-bottom: 30px; letter-spacing: 0.04em; }
.hero-block .hero-statement { text-shadow: 0 10px 40px rgba(0,0,0,0.35); }
.rb-split .w { display: inline-block; will-change: transform, filter, opacity; }
/* background-clip:text does not reach into child boxes, so each split word carries the gradient itself. */
.gradient-text .w { background: linear-gradient(135deg, var(--brand-accent), var(--brand-primary), var(--brand-accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
body.tower .shipped-strip[hidden] { display: none !important; }
.scroll-hint { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.5); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.scroll-hint span { width: 1px; height: 46px; background: linear-gradient(180deg, var(--brand-accent), transparent); animation: drop 1.8s ease-in-out infinite; }
@keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ── 4b. The payoff band ── */
.payoff { padding-top: 40px !important; }
.payoff-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 24px; padding: 56px; backdrop-filter: blur(16px); box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.payoff-grid::before { content: ""; position: absolute; inset: -40% auto auto -20%; width: 60%; height: 180%; background: radial-gradient(closest-side, rgba(174,58,237,0.28), transparent); pointer-events: none; }
.payoff-figure { position: relative; }
.payoff .big { font-size: clamp(54px, 6.2vw, 88px); font-weight: 800; line-height: 0.95; letter-spacing: -0.05em; margin: 10px 0 18px; background: linear-gradient(135deg, #fff 20%, var(--brand-accent) 70%, var(--brand-primary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; }
.payoff .big-label { font-size: 16px; color: var(--text-muted); line-height: 1.6; max-width: 400px; }
.payoff-copy h2 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; color: white; margin-bottom: 18px; }
.payoff-copy p { font-size: 16px; color: var(--text-muted); line-height: 1.7; margin-bottom: 14px; }
.payoff-maths { color: var(--text) !important; }
.payoff-maths strong { color: var(--brand-accent); }
.payoff-points { list-style: none; display: grid; gap: 10px; margin: 20px 0 26px; }
.payoff-points li { position: relative; padding-left: 26px; font-size: 14.5px; color: var(--text-muted); line-height: 1.6; }
.payoff-points li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: rgba(16,185,129,0.18); box-shadow: inset 0 0 0 1.5px var(--success); }
.payoff-points strong { color: white; }
.payoff .hero-actions { margin-bottom: 0; }
@media (max-width: 1024px) { .payoff-grid { grid-template-columns: 1fr; gap: 28px; padding: 32px; } }

/* ── 5. Glass cards: re-skin of every card class the live page uses ── */
body.tower .value-card, body.tower .problem-card, body.tower .feature-card, body.tower .solution-card,
body.tower .mobile-card, body.tower .pricing-card, body.tower .calc, body.tower .cta-image, body.tower .glass {
    background: var(--glass) !important; border-color: var(--glass-border) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
body.tower .problem-card-total { background: rgba(239,68,68,0.08) !important; border-color: rgba(239,68,68,0.3) !important; }
body.tower .problem-card h3, body.tower .value-card h3, body.tower .solution-card h3 { color: white; }
body.tower .value-card:hover, body.tower .solution-card:hover, body.tower .problem-card:hover { border-color: rgba(206,140,245,0.6) !important; }
body.tower .proof-pill { background: rgba(255,255,255,0.06); border-color: var(--glass-border); color: var(--text); }
body.tower .comparison-table-wrapper { background: var(--glass); backdrop-filter: blur(14px); }
body.tower .comparison-table th { background: rgba(0,0,0,0.35); }
body.tower .comparison-table tr:hover td { background: rgba(255,255,255,0.04); }
body.tower .scope-row td { background: rgba(255,255,255,0.05) !important; }
body.tower .highlight-col { background: rgba(174,58,237,0.10) !important; }
body.tower .comparison-table th.highlight-col { background: var(--brand-primary) !important; }
body.tower .form-group input, body.tower .form-group select, body.tower .form-group textarea { background: rgba(255,255,255,0.06); border-color: var(--glass-border); color: var(--text); }
body.tower .form-group select option { color: #111; }
body.tower .testimonial-section { background: transparent; }
body.tower .testimonial-quote p, body.tower .testimonial-points li { color: var(--text); }
body.tower #footer { background: rgba(13,11,19,0.85); backdrop-filter: blur(14px); position: relative; z-index: 1; }
body.tower .value-grid, body.tower .pricing-grid { position: relative; }

/* Spotlight (React Bits port): a radial highlight that follows the cursor. */
.rb-spotlight { position: relative; overflow: hidden; }
.rb-spotlight::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(206,140,245,0.16), transparent 60%); }
.rb-spotlight:hover::after { opacity: 1; }
/* Shiny text (React Bits port): a light sweep across a label. */
.rb-shiny { background: linear-gradient(110deg, var(--brand-accent) 40%, #fff 50%, var(--brand-accent) 60%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shine 3.2s linear infinite; }
@keyframes shine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .rb-shiny { animation: none; } }

/* ── 6. The journey ── */
.journey { padding-bottom: 60px !important; }
.journey-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: min(1240px, 100% - 48px); margin: 0 auto; gap: 48px; align-items: start; }
.tower-stage { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; }
.tower-wrap { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
#tower { width: auto; height: min(92vh, 1100px); max-width: 100%; overflow: visible; filter: drop-shadow(0 40px 80px rgba(0,0,0,0.55)); }
.floor-rail { list-style: none; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 14px; }
.floor-rail li { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.35); border: 1px solid rgba(255,255,255,0.12); transition: all .3s ease; }
.floor-rail li.on { color: white; background: var(--brand-primary); border-color: var(--brand-primary); box-shadow: 0 0 18px rgba(174,58,237,0.6); }
.floor-rail li.done { color: var(--brand-accent); border-color: rgba(206,140,245,0.5); }

.floors { position: relative; }
.floor { min-height: 100vh; display: flex; align-items: center; }
.floor-inner { width: 100%; max-width: 560px; }
.floor-eyebrow { display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 16px; }
.floor-eyebrow .lvl { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(174,58,237,0.16); border: 1px solid rgba(206,140,245,0.4); color: var(--brand-accent); font-size: 14px; font-weight: 800; letter-spacing: 0; }
.modules { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.modules a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 9px; border-radius: 100px; background: rgba(255,255,255,0.06); border: 1px solid var(--glass-border); font-size: 12.5px; font-weight: 700; color: white; transition: border-color .2s ease, background .2s ease; }
.modules a:hover { border-color: var(--brand-accent); background: rgba(174,58,237,0.16); }
.modules svg { width: 16px; height: 16px; color: var(--brand-accent); }
.floor-title { font-size: clamp(28px, 3.3vw, 42px); font-weight: 800; line-height: 1.12; letter-spacing: -0.025em; color: white; margin-bottom: 14px; }
.floor-body { font-size: 15.5px; color: var(--text-muted); line-height: 1.7; margin-bottom: 22px; }
.floor-links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 18px; }
.floor-links .feature-more { margin-top: 0; }
.appcard { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 14px; padding: 14px 16px; backdrop-filter: blur(14px); box-shadow: var(--shadow-lg); font-size: 13px; }
.appcard-head { display: flex; align-items: center; gap: 8px; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); padding-bottom: 10px; border-bottom: 1px solid var(--glass-border); margin-bottom: 4px; }
.appcard-head .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 10px var(--success); }
.appcard .row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.05); color: rgba(255,255,255,0.85); }
.appcard .row:last-child { border-bottom: 0; }
.appcard .val { font-weight: 700; color: white; white-space: nowrap; }
.appcard .val.ok { color: var(--success); } .appcard .val.warn { color: #f59e0b; } .appcard .val.muted { color: rgba(255,255,255,0.45); font-weight: 400; }
.journey-foot { text-align: center; margin: 10px auto 0; max-width: 700px; padding: 0 24px; color: rgba(255,255,255,0.55); font-size: 14px; }
.journey-foot a { color: var(--brand-accent); text-decoration: underline; }

/* The split headline is held back until js/tower.js is ready to animate it,
   and only when the "js" class is present — crawlers and no-JS visitors see
   it immediately. The class is removed if any script fails to load. */
html.js .rb-split:not(.is-ready) { visibility: hidden; }
/* Link under the testimonial video to the full customer story. */
.story-link { display: inline-block; margin-top: 10px; color: var(--brand-accent); font-weight: 700; font-size: 14px; }
.story-link:hover { text-decoration: underline; }

/* ── 7. Responsive ── */
@media (max-width: 1024px) {
    .journey-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    /* The tower pins to the top; the copy scrolls up beneath it, so the stage is opaque. */
    .tower-stage { height: 40vh; z-index: 2; background: #0f0d16; border-bottom: 1px solid rgba(255,255,255,0.08); }
    #tower { height: 36vh; }
    .floors { padding-top: 10px; }
    .floor-rail { right: 6px; }
    .floor { min-height: 0; padding: 40px 0 70px; }
}
@media (max-width: 768px) {
    .hero-block .hero-content { padding: 120px 24px 90px; }
    body.tower .section { padding: 70px 0; }
    .floor-rail { display: none; }
    .tower-stage { height: 36vh; }
    #tower { height: 32vh; }
}