/* App pages (/katana-tasks/, /obelisk/, ...): one layout for every app,
   generated from each app's content.json. Builds on style.css (nav, footer)
   and home.css (glass panels, labels, icons); --tint / --tint-2 on :root are
   the app's own colours. */

.app-page { --tint: #8a2be2; --tint-2: #4cc9f0; }

/* Window and phone frames for real app screens */
.win {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 12px;
    background: #0b0b0e;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--tint) 40%, rgba(255, 255, 255, 0.18)),
        0 40px 80px -24px rgba(0, 0, 0, 0.9),
        0 0 70px -14px color-mix(in srgb, var(--tint) 55%, transparent);
}
.win-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 14px;
    background: linear-gradient(180deg, #1a1a20, #121217);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
.win-bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.win-bar span:first-child { background: #ff5f57; }
.win-bar span:nth-child(2) { background: #febc2e; }
.win-bar span:nth-child(3) { background: #28c840; }
.win img, .phone img { display: block; width: 100%; height: auto; }

.phone {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 34px;
    background: #0b0b0e;
    box-shadow:
        0 0 0 7px #0b0b0e,
        0 0 0 8px color-mix(in srgb, var(--tint) 45%, rgba(255, 255, 255, 0.2)),
        0 40px 80px -20px rgba(0, 0, 0, 0.9),
        0 0 70px -10px color-mix(in srgb, var(--tint) 55%, transparent);
}

/* --- Hero --- */
.app-hero {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: center;
    gap: 56px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 150px 5% 70px;
}
.app-hero::before {
    content: "";
    position: absolute;
    inset: 0 -20% auto;
    height: 900px;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 45% 45% at 72% 42%, color-mix(in srgb, var(--tint) 30%, transparent), transparent 70%),
        radial-gradient(ellipse 35% 35% at 20% 30%, color-mix(in srgb, var(--tint-2) 14%, transparent), transparent 70%);
}
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 34px;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color 0.3s;
}
.back-link .arrow { transform: rotate(180deg); }
.back-link:hover { color: var(--cyan); }
.back-link:hover .arrow { transform: rotate(180deg) translateX(4px); }

.app-hero .module-icon { width: 84px; height: 84px; margin-bottom: 28px; }
.app-hero .module-icon img { border-radius: 22px; }
.app-hero .module-icon::before { border-radius: 24px; filter: blur(22px) saturate(1.7); opacity: 0.85; }

.app-title {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-weight: 500;
    font-size: clamp(2.3rem, 5.2vw, 4rem);
    letter-spacing: 0.16em;
    margin-right: -0.16em;
    text-transform: uppercase;
    line-height: 1.08;
    margin-bottom: 18px;
    text-shadow: 0 0 40px color-mix(in srgb, var(--tint) 45%, transparent);
}
.app-tagline { font-size: clamp(1.15rem, 2vw, 1.45rem); color: #e6e6ea; line-height: 1.45; margin-bottom: 14px; }
.app-summary { font-size: 1.02rem; max-width: 520px; margin-bottom: 26px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.chip {
    padding: 7px 12px;
    border-radius: 8px;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px var(--hair);
}
.chip.is-sync { color: #3ddc97; background: rgba(61, 220, 151, 0.07); box-shadow: inset 0 0 0 1px rgba(61, 220, 151, 0.25); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-neon { display: inline-flex; align-items: center; text-decoration: none; }
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 54px;
    padding: 0 24px;
    border-radius: 14px;
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    transition: background 0.3s, box-shadow 0.3s;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }

/* Hero visual: a tilted window with a phone over its corner, or phones alone */
.hero-visual { position: relative; perspective: 1800px; }
.hero-visual .win {
    transform: rotateY(-13deg) rotateX(5deg);
    transform-origin: left center;
    transition: transform 1s var(--ease);
}
.hero-visual:hover .win { transform: rotateY(-7deg) rotateX(2deg); }
.hero-visual.has-both .phone {
    position: absolute;
    left: -6%;
    bottom: -12%;
    width: 30%;
    border-radius: 26px;
}
.hero-visual.phones { display: flex; justify-content: center; align-items: flex-start; gap: 0; }
.hero-visual.phones .phone { width: min(300px, 46%); }
.hero-visual.phones .phone + .phone { margin-left: -9%; margin-top: 70px; transform: rotate(4deg); z-index: -1; opacity: 0.92; }
.hero-visual.phones .phone:first-child { transform: rotate(-3deg); }

/* --- Facts --- */
.facts {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    max-width: 1100px;
    margin: 30px auto 0;
    padding: 0 5%;
}
.fact {
    position: relative;
    isolation: isolate;
    padding: 26px 24px;
    border-radius: 18px;
    text-align: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px var(--hair);
}
.fact b {
    display: block;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-weight: 200;
    font-size: clamp(2rem, 4vw, 2.8rem);
    line-height: 1.1;
    color: #fff;
    text-shadow: 0 0 24px color-mix(in srgb, var(--tint) 70%, transparent);
}
.fact span {
    display: block;
    margin-top: 8px;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

/* --- Feature rows --- */
.feature-row {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 64px;
    margin-bottom: 120px;
}
.feature-row:last-child { margin-bottom: 30px; }
.feature-row.flip .row-copy { order: 2; }
.feature-row.is-phone { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.row-copy .sec-label { margin-bottom: 16px; }
.row-copy .sec-label::before { display: none; }
.row-copy h2 {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-weight: 500;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin-bottom: 16px;
}
.row-copy > p { font-size: 1.02rem; margin-bottom: 22px; }
.points { list-style: none; display: grid; gap: 10px; }
.points li {
    position: relative;
    padding-left: 26px;
    color: #c4c4cc;
    font-size: 0.96rem;
    line-height: 1.5;
}
.points li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.55em;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--tint), var(--tint-2));
    box-shadow: 0 0 10px color-mix(in srgb, var(--tint) 80%, transparent);
}
.row-shot { position: relative; perspective: 1600px; }
.row-shot .win { transition: transform 0.9s var(--ease); transform: rotateY(-6deg) rotateX(3deg); }
.feature-row.flip .row-shot .win { transform: rotateY(6deg) rotateX(3deg); }
.row-shot:hover .win, .feature-row.flip .row-shot:hover .win { transform: none; }
.row-shot .phone { width: min(330px, 78%); margin: 0 auto; }

/* --- Tour --- */
.tour-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 34px;
}
.tour-tabs button {
    padding: 10px 16px;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 0 0 1px var(--hair);
    transition: color 0.3s, background 0.3s, box-shadow 0.3s;
}
.tour-tabs button:hover { color: #fff; }
.tour-tabs button[aria-selected="true"] {
    color: #fff;
    background: color-mix(in srgb, var(--tint) 22%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 65%, transparent), 0 0 24px -6px color-mix(in srgb, var(--tint) 70%, transparent);
}
.tour-stage { display: flex; justify-content: center; }
.tour-stage .win { width: min(1040px, 100%); }
.tour-stage .phone { width: min(340px, 82%); }
.tour-stage img { transition: opacity 0.3s ease; }
.tour-stage.swapping img { opacity: 0; }
.tour-caption { max-width: 620px; margin: 26px auto 0; text-align: center; font-size: 1rem; min-height: 3.2em; }

/* --- Details --- */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}
.detail {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 18px 20px;
    border-radius: 14px;
    font-size: 0.94rem;
    line-height: 1.45;
    color: #c4c4cc;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 0 0 1px var(--hair);
}
.detail::before {
    content: "";
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 0.45em;
    border-radius: 50%;
    background: var(--tint);
    box-shadow: 0 0 10px var(--tint);
}

/* --- More apps --- */
.more-apps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}
.more-apps a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 104px;
    padding: 16px 8px;
    border-radius: 16px;
    font-size: 0.8rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: background 0.3s, transform 0.4s var(--ease);
}
.more-apps a:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-3px); color: #fff; }
.more-apps .module-icon { width: 52px; height: 52px; }

/* --- Responsive --- */
@media (max-width: 1024px) {
    .app-hero { grid-template-columns: 1fr; padding-top: 130px; gap: 70px; }
    .app-hero-copy { text-align: center; }
    .app-hero .module-icon { margin-left: auto; margin-right: auto; }
    .app-summary { margin-left: auto; margin-right: auto; }
    .chip-row, .hero-actions { justify-content: center; }
    .feature-row, .feature-row.is-phone { grid-template-columns: 1fr; gap: 40px; margin-bottom: 90px; }
    .feature-row.flip .row-copy { order: 0; }
    .row-shot .win, .feature-row.flip .row-shot .win { transform: none; }
}
@media (max-width: 768px) {
    .app-hero { padding: 110px 20px 40px; }
    .hero-visual .win { transform: none; }
    .hero-visual.has-both .phone { width: 34%; left: -2%; bottom: -16%; }
    .hero-visual.has-both { margin-bottom: 40px; }
    .facts { padding: 0 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tour-tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; margin: 0 -20px 28px; padding-left: 20px; padding-right: 20px; scrollbar-width: none; }
    .tour-tabs button { flex-shrink: 0; }
    .more-apps a { width: 88px; }
}

/* A feature with no screen (e.g. a native watch app): copy only, in a glass panel */
.feature-row.no-shot { grid-template-columns: 1fr; max-width: 760px; margin-left: auto; margin-right: auto; padding: 40px 44px; border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px var(--hair); }
.feature-row.no-shot .row-copy { order: 0; }
@media (max-width: 768px) { .feature-row.no-shot { padding: 30px 24px; } }