/* Homepage below the hero: the same glass, neon hairlines and tracked
   Montserrat as the hero mark and tagline pill, carried through the apps,
   Olympus and newsletter sections. Shared nav, hero and footer live in
   style.css. */

:root {
    --cyan: #4cc9f0;
    --hair: rgba(255, 255, 255, 0.08);
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* A faint starfield behind everything below the galaxy, so the page never
   drops to flat black. Two tile sizes give a little depth. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.55), transparent 60%),
        radial-gradient(1px 1px at 70% 80%, rgba(255, 255, 255, 0.4), transparent 60%),
        radial-gradient(1px 1px at 45% 60%, rgba(76, 201, 240, 0.5), transparent 60%),
        radial-gradient(1.5px 1.5px at 85% 15%, rgba(255, 255, 255, 0.5), transparent 60%),
        radial-gradient(1px 1px at 10% 85%, rgba(138, 43, 226, 0.6), transparent 60%);
    background-size: 260px 260px, 340px 340px, 420px 420px, 520px 520px, 610px 610px;
    opacity: 0.8;
}

/* --- Sections --- */
.sec {
    position: relative;
    z-index: 10;
    max-width: 1240px;
    margin: 0 auto;
    padding: 96px 5% 24px;
}
.sec-narrow { max-width: 880px; }

.sec-head { text-align: center; margin-bottom: 56px; }
.sec-head p { max-width: 640px; margin: 0 auto; font-size: 1.05rem; }

/* "01  APPS": a mono index and label, with a glowing tick either side */
.sec-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}
.sec-label i { font-style: normal; color: var(--cyan); text-shadow: 0 0 10px rgba(76, 201, 240, 0.7); }
.sec-label::before, .sec-label::after {
    content: "";
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan));
    box-shadow: 0 0 8px rgba(76, 201, 240, 0.8);
}
.sec-label::after { background: linear-gradient(90deg, var(--cyan), transparent); }

/* Same face as the hero wordmark, lighter and wider */
.sec-title {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-weight: 200;
    font-size: clamp(2.1rem, 5vw, 3.6rem);
    letter-spacing: 0.22em;
    margin-right: -0.22em;
    text-transform: uppercase;
    line-height: 1.15;
    margin-bottom: 18px;
    text-shadow: 0 0 30px rgba(138, 43, 226, 0.35);
}

/* --- Glass panel recipe (cards, feature, Olympus, signup) ---
   Frosted fill with a lit top rim, and a 1px gradient hairline drawn by a
   masked ::before that brightens where the pointer is (--mx/--my from
   script.js). */
.module, .feature, .olympus-panel, .signup {
    position: relative;
    isolation: isolate;
    border-radius: 22px;
    color: inherit;
    text-decoration: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012));
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 30px 60px -40px rgba(0, 0, 0, 0.9);
}
.module::before, .feature::before, .olympus-panel::before, .signup::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    padding: 1px;
    border-radius: inherit;
    background:
        radial-gradient(420px circle at var(--mx, 50%) var(--my, -40%), rgba(255, 255, 255, 0.55), transparent 45%),
        linear-gradient(140deg, rgba(255, 42, 95, 0.4), rgba(255, 255, 255, 0.07) 40%, rgba(255, 255, 255, 0.05) 60%, rgba(138, 43, 226, 0.45));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
}
/* Soft light inside the panel that follows the pointer */
.module::after, .feature::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(138, 43, 226, 0.14), transparent 45%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}
.module:hover::after, .feature:hover::after { opacity: 1; }

.module-no {
    position: absolute;
    top: 24px;
    right: 26px;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.28);
}

/* App icon with a blurred copy of itself glowing behind (--icon set by script.js) */
.module-icon {
    position: relative;
    display: block;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}
.module-icon::before {
    content: "";
    position: absolute;
    inset: 4px;
    z-index: -1;
    border-radius: 16px;
    background: var(--icon) center / cover;
    filter: blur(16px) saturate(1.6);
    opacity: 0.6;
    transition: opacity 0.5s ease, transform 0.5s var(--ease);
}
.module-icon img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 10px 24px -8px rgba(0, 0, 0, 0.7);
}

.module-go, .olympus-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cyan);
}
.arrow {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.4s var(--ease);
}
a:hover .arrow { transform: translateX(4px); }

/* --- Tandent feature card --- */
.feature {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 24px;
    margin-bottom: 20px;
    padding: 52px 0 52px 52px;
    overflow: hidden;
    background:
        radial-gradient(ellipse 60% 80% at 85% 40%, rgba(124, 108, 255, 0.18), transparent 70%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012));
    transition: transform 0.6s var(--ease), box-shadow 0.6s ease;
}
.feature:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 40px 80px -40px rgba(124, 108, 255, 0.55);
}
.feature-copy { position: relative; }
.feature-top { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.feature-top .module-icon { width: 64px; height: 64px; }
.feature h3 {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-weight: 500;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.feature p { max-width: 400px; font-size: 1.05rem; color: #b4b4bd; margin-bottom: 24px; }

.live-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #3ddc97;
    background: rgba(61, 220, 151, 0.08);
    box-shadow: inset 0 0 0 1px rgba(61, 220, 151, 0.25);
}
.live-chip b {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3ddc97;
    box-shadow: 0 0 10px #3ddc97;
    animation: live-pulse 2.4s ease-in-out infinite;
}
@keyframes live-pulse { 50% { opacity: 0.35; } }

.feature-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin-bottom: 30px;
}
.feature-tags li {
    padding: 6px 12px;
    border-radius: 8px;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px var(--hair);
}

/* The real Overview screen, tilted in and running off the card's edge */
.feature-shot {
    position: relative;
    margin: -20px -120px -90px 0;
    perspective: 1600px;
}
.feature-shot img {
    display: block;
    width: 100%;
    border-radius: 12px;
    transform: rotateY(-14deg) rotateX(6deg) rotateZ(1deg);
    transform-origin: left center;
    box-shadow:
        0 0 0 1px rgba(179, 170, 255, 0.25),
        0 40px 80px -20px rgba(0, 0, 0, 0.9),
        0 0 60px -10px rgba(124, 108, 255, 0.45);
    transition: transform 0.9s var(--ease);
}
.feature:hover .feature-shot img { transform: rotateY(-8deg) rotateX(3deg) rotateZ(0.5deg); }

/* --- App grid --- */
.module-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.module {
    display: flex;
    flex-direction: column;
    padding: 30px;
    min-height: 230px;
    transition: transform 0.6s var(--ease), box-shadow 0.6s ease;
}
.module h3 { margin: 22px 0 8px; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; }
.module p { font-size: 0.93rem; color: #a1a1aa; flex-grow: 1; }
.module .module-go { margin-top: 18px; }
.module:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 30px 60px -30px rgba(138, 43, 226, 0.5);
}
.module:hover .module-icon::before, .feature:hover .module-icon::before { opacity: 0.95; transform: scale(1.15); }
a.module { cursor: pointer; }

/* Real app screen at the top of each card, like the Tandent feature: a
   desktop window tilted in and running off the right edge, or a phone
   rising out of the bottom. --tint is each app's own colour. */
.module.has-shot { padding: 0; }
.module.has-shot .module-body { position: relative; display: flex; flex-direction: column; flex-grow: 1; padding: 0 30px 30px; }
.module.has-shot .module-icon { margin-top: -28px; }
.module.has-shot .module-no { top: 18px; right: 22px; z-index: 2; }
.module.has-shot h3 { margin-top: 18px; }

.module-shot {
    position: relative;
    height: 220px;
    overflow: hidden;
    border-radius: 22px 22px 0 0;
    background:
        radial-gradient(ellipse 80% 90% at 70% 100%, color-mix(in srgb, var(--tint, #8a2be2) 34%, transparent), transparent 70%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
    box-shadow: inset 0 -1px 0 var(--hair);
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
    mask-image: linear-gradient(to bottom, #000 78%, transparent);
    perspective: 1200px;
}
.module-shot img {
    position: absolute;
    display: block;
    transition: transform 0.9s var(--ease);
}
.module-shot.is-desktop img {
    top: 30px;
    left: 30px;
    width: 175%;
    border-radius: 10px;
    transform-origin: left top;
    transform: rotateY(-12deg) rotateX(6deg);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--tint, #8a2be2) 40%, rgba(255, 255, 255, 0.2)),
        0 30px 60px -20px rgba(0, 0, 0, 0.9),
        0 0 50px -10px color-mix(in srgb, var(--tint, #8a2be2) 60%, transparent);
}
.module:hover .module-shot.is-desktop img { transform: rotateY(-6deg) rotateX(3deg) translateY(-6px); }
.module-shot.is-phone img {
    top: 28px;
    left: 50%;
    width: 46%;
    margin-left: -23%;
    border-radius: 24px;
    transform: rotateX(8deg);
    transform-origin: center top;
    box-shadow:
        0 0 0 5px #0b0b0e,
        0 0 0 6px color-mix(in srgb, var(--tint, #8a2be2) 45%, rgba(255, 255, 255, 0.2)),
        0 30px 60px -10px rgba(0, 0, 0, 0.9),
        0 0 50px -6px color-mix(in srgb, var(--tint, #8a2be2) 60%, transparent);
}
.module:hover .module-shot.is-phone img { transform: rotateX(0deg) translateY(-10px); }

@media (prefers-reduced-motion: reduce) {
    .module-shot img, .module:hover .module-shot img { transition: none; }
}

/* --- Olympus --- */
.olympus-panel {
    display: block;
    overflow: hidden;
    padding: 12px;
    background:
        radial-gradient(ellipse 50% 90% at 10% 0%, rgba(247, 201, 72, 0.12), transparent 70%),
        radial-gradient(ellipse 50% 90% at 90% 100%, rgba(125, 211, 252, 0.12), transparent 70%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
    transition: transform 0.6s var(--ease), box-shadow 0.6s ease;
}
.olympus-panel::before {
    background:
        radial-gradient(420px circle at var(--mx, 50%) var(--my, -40%), rgba(255, 255, 255, 0.5), transparent 45%),
        linear-gradient(120deg, rgba(247, 201, 72, 0.5), rgba(255, 255, 255, 0.06) 45%, rgba(125, 211, 252, 0.5));
}
.olympus-panel:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 40px 80px -40px rgba(247, 201, 72, 0.35);
}

.olympus-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
}
.olympus-row li {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 12px 32px;
    text-align: center;
}
.olympus-row li + li { box-shadow: inset 1px 0 0 var(--hair); }
.olympus-row img {
    width: 76px;
    height: 76px;
    margin-bottom: 20px;
    border-radius: 20px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 16px 40px -10px rgba(0, 0, 0, 0.8), 0 0 40px -6px rgba(247, 201, 72, 0.3);
    animation: oly-float 6s ease-in-out var(--d) infinite;
}
@keyframes oly-float { 50% { transform: translateY(-8px); } }
.olympus-row b {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.26em;
    margin-right: -0.26em;
    text-transform: uppercase;
}
.olympus-row span {
    margin-top: 6px;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.olympus-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 4px;
    padding: 20px 26px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 0 0 1px var(--hair);
}
.olympus-foot p { font-size: 0.95rem; }
.olympus-cta { flex-shrink: 0; color: #f7c948; }

/* --- Newsletter --- */
.signup {
    padding: 60px 56px 28px;
    text-align: center;
    overflow: hidden;
    background:
        radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255, 42, 95, 0.12), transparent 70%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012));
}
/* A neon strip along the top edge, the same as the one under the nav */
.signup::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-1), var(--accent-2), #00d2ff, var(--accent-2), var(--accent-1), transparent);
    background-size: 200% 100%;
    animation: neon-slide 7s linear infinite;
    box-shadow: 0 0 14px rgba(255, 42, 95, 0.6);
}
.signup .sec-title { font-size: clamp(1.6rem, 3.6vw, 2.5rem); letter-spacing: 0.16em; margin-right: -0.16em; }
.signup > p { max-width: 460px; margin: 0 auto 34px; font-size: 1rem; }

.signup .newsletter-form {
    grid-template-columns: 1fr 1fr auto;
    max-width: 680px;
}
.signup .newsletter-form input[type="email"],
.signup .newsletter-form input[name="name"] {
    height: 54px;
    padding: 0 22px;
    border-radius: 14px;
    border: 0;
    background: rgba(0, 0, 0, 0.35);
    box-shadow: inset 0 0 0 1px var(--hair);
    transition: box-shadow 0.3s ease;
}
.signup .newsletter-form input:focus {
    box-shadow: inset 0 0 0 1px rgba(255, 42, 95, 0.7), 0 0 24px -4px rgba(255, 42, 95, 0.45);
}
.signup .cf-turnstile { grid-column: 1 / -1; }
.signup .cf-turnstile:empty { display: none; }
.signup .newsletter-status { margin-top: 14px; }

.btn-neon {
    position: relative;
    overflow: hidden;
    height: 54px;
    padding: 0 30px;
    border: 0;
    border-radius: 14px;
    font-family: var(--mono);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(110deg, var(--accent-1), var(--accent-2));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 10px 30px -10px rgba(255, 42, 95, 0.7);
    transition: box-shadow 0.4s ease, transform 0.4s var(--ease);
}
.btn-neon::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%);
    transform: translateX(-120%);
    animation: tagline-sheen 7s cubic-bezier(0.4, 0, 0.2, 1) 3s infinite;
}
.btn-neon:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) inset, 0 14px 40px -8px rgba(138, 43, 226, 0.8); }
.btn-neon:disabled { opacity: 0.6; cursor: wait; transform: none; }

/* --- Reveal: rise out of a slight blur, cards in a short stagger --- */
.sec .fade-in {
    filter: blur(8px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease);
}
.sec .fade-in.visible { filter: none; }
.module-grid .module:nth-child(3n + 2) { transition-delay: 0.08s; }
.module-grid .module:nth-child(3n) { transition-delay: 0.16s; }
.module-grid .module.visible:hover { transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
    .live-chip b, .olympus-row img, .signup::after, .btn-neon::after { animation: none; }
    .sec .fade-in { filter: none; }
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .feature { grid-template-columns: 1fr; padding: 40px 40px 0; }
    .feature-shot { margin: 10px -40px 0 0; }
    .feature-shot img { transform: rotateY(-10deg) rotateX(8deg); transform-origin: left top; border-radius: 12px 0 0 0; }
}

@media (max-width: 768px) {
    .sec { padding: 80px 20px 24px; }
    .sec-head { margin-bottom: 40px; }
    .sec-title { letter-spacing: 0.14em; margin-right: -0.14em; }
    .module-grid { grid-template-columns: 1fr; gap: 14px; }
    .module { min-height: 0; padding: 26px; }
    .feature { padding: 32px 26px 0; }
    .feature-shot { margin-right: -26px; }
    .olympus-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .olympus-row li { padding: 30px 8px 24px; }
    .olympus-row li:nth-child(3) { box-shadow: inset 0 1px 0 var(--hair); }
    .olympus-row li:nth-child(4) { box-shadow: inset 1px 0 0 var(--hair), inset 0 1px 0 var(--hair); }
    .olympus-row img { width: 64px; height: 64px; }
    .olympus-foot { flex-direction: column; text-align: center; padding: 20px; }
    .signup { padding: 48px 22px 36px; }
    .signup .newsletter-form { grid-template-columns: 1fr; }
}