/* Dark page heroes for About, Pricing, Journal and Contact — matches the homepage stage. */
.tp-page-hero.tp-page-hero-dark {
    position: relative; isolation: isolate; overflow: hidden;
    padding: 100px 0 92px; margin-bottom: 64px;
    border-radius: 0 0 36px 36px;
    color: #f5fafd;
    background:
        radial-gradient(50% 60% at 82% 8%, rgba(0, 126, 133, .34), transparent 70%),
        radial-gradient(45% 55% at 10% 92%, rgba(36, 110, 255, .26), transparent 70%),
        linear-gradient(180deg, #07131f 0%, #0b1826 70%, #0a1928 100%);
}
/* Star dust */
.tp-page-hero-dark::before {
    content: ''; position: absolute; inset: 0; z-index: -1; opacity: .65; pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 22px 34px, rgba(255, 255, 255, .6), transparent 70%),
        radial-gradient(1px 1px at 128px 92px, rgba(255, 255, 255, .35), transparent 70%),
        radial-gradient(1.5px 1.5px at 206px 160px, rgba(185, 212, 240, .6), transparent 70%),
        radial-gradient(1px 1px at 74px 188px, rgba(140, 200, 255, .5), transparent 70%);
    background-size: 240px 220px;
    animation: tp-ph-stars 60s linear infinite;
}
/* Perspective grid floor */
.tp-page-hero-dark::after {
    content: ''; position: absolute; left: -25%; right: -25%; bottom: -2px; height: 55%; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(148, 190, 232, .2) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 190, 232, .2) 1px, transparent 1px);
    background-size: 64px 64px;
    transform: perspective(520px) rotateX(64deg); transform-origin: 50% 100%;
    -webkit-mask-image: linear-gradient(to top, #000, transparent 80%); mask-image: linear-gradient(to top, #000, transparent 80%);
    opacity: .5;
    animation: tp-ph-floor 4s linear infinite;
}
/* Two glossy floating orbs */
.tp-page-hero-dark > .tp-container { position: relative; }
.tp-page-hero-dark > .tp-container::before,
.tp-page-hero-dark > .tp-container::after {
    content: ''; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle at 32% 28%, #fff 0, #d2eaf6 7%, #056ed6 34%, #1f5e9e 66%, #0c233a 100%);
    box-shadow: 0 0 60px 10px rgba(5, 110, 214, .35), inset -10px -14px 30px rgba(0, 0, 0, .45);
    animation: tp-ph-float 9s ease-in-out infinite;
}
.tp-page-hero-dark > .tp-container::before { width: 130px; height: 130px; top: -40px; right: 2%; }
.tp-page-hero-dark > .tp-container::after {
    width: 64px; height: 64px; bottom: -36px; left: 4%;
    background: radial-gradient(circle at 32% 28%, #fff 0, #c8f1ff 8%, #3d9bff 38%, #1b5c9e 70%, #0c2238 100%);
    box-shadow: 0 0 40px 6px rgba(61, 155, 255, .35), inset -6px -8px 18px rgba(0, 0, 0, .45);
    animation-duration: 7s; animation-delay: -3s;
}
.tp-page-hero-dark .tp-eyebrow {
    padding: 6px 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 30px;
    background: rgba(255, 255, 255, .06); backdrop-filter: blur(10px);
    color: #d5ecf6;
}
.tp-page-hero-dark .tp-eyebrow::before { background: #9fc5eb; box-shadow: 0 0 0 4px rgba(159, 197, 235, .16); }
body.tp-site .tp-page-hero-dark h1 { color: #fff; font-size: clamp(42px, 5.4vw, 72px); letter-spacing: -.05em; animation: tp-ph-rise .9s cubic-bezier(.2, .8, .2, 1) both; }
body.tp-site .tp-page-hero-dark p { color: #b8cadc; font-size: 15px; animation: tp-ph-rise .9s cubic-bezier(.2, .8, .2, 1) .12s both; }
.tp-page-hero-dark .tp-gradient-text {
    background: linear-gradient(100deg, #5aa9ff 0%, #92bde8 30%, #85e0e5 55%, #ffb36b 75%, #5aa9ff 100%);
    background-size: 220% auto;
    -webkit-background-clip: text; background-clip: text;
    animation: tp-ph-shine 7s linear infinite;
}
/* Pricing currency picker on the dark background */
.tp-page-hero-dark .tp-currency-control { color: #a9bccf; }
.tp-page-hero-dark .tp-currency-control select { border-color: rgba(255, 255, 255, .18); background-color: rgba(255, 255, 255, .08); color: #fff; }
.tp-page-hero-dark .tp-currency-control select option { color: #06264b; }

@keyframes tp-ph-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes tp-ph-shine { to { background-position: -220% center; } }
@keyframes tp-ph-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -16px; } }
@keyframes tp-ph-floor { to { background-position: 0 64px, 0 0; } }
@keyframes tp-ph-stars { to { background-position: 240px 220px, 240px 220px, 240px 220px, 240px 220px; } }

@media (max-width: 640px) {
    .tp-page-hero.tp-page-hero-dark { padding: 64px 0 60px; margin-bottom: 40px; border-radius: 0 0 24px 24px; }
    body.tp-site .tp-page-hero-dark h1 { font-size: 38px; }
    body.tp-site .tp-page-hero-dark p { font-size: 13px; }
    .tp-page-hero-dark > .tp-container::before { width: 70px; height: 70px; top: -36px; right: 0; }
    .tp-page-hero-dark > .tp-container::after { width: 36px; height: 36px; bottom: -34px; }
}
@media (prefers-reduced-motion: reduce) {
    .tp-page-hero-dark::before, .tp-page-hero-dark::after, .tp-page-hero-dark > .tp-container::before, .tp-page-hero-dark > .tp-container::after,
    body.tp-site .tp-page-hero-dark h1, body.tp-site .tp-page-hero-dark p, .tp-page-hero-dark .tp-gradient-text { animation: none !important; }
}