/* ============================================================
   Thalassys homepage — accents on top of main.css.
   Bridge HUD motifs (compass, node map, pipeline) recoloured
   into the navy + blue→violet system as deliberate accents.
   ============================================================ */

/* ─── Hero ───────────────────────────────────────────────── */
.home-hero {
    position: relative; overflow: hidden;
    padding: 132px 24px 96px; text-align: center;
    background:
        radial-gradient(740px circle at 16% 4%, rgba(91,157,255,.20), transparent 44%),
        radial-gradient(720px circle at 84% 8%, rgba(139,92,246,.18), transparent 46%),
        radial-gradient(900px circle at 50% 120%, rgba(7,11,20,.9), transparent 60%),
        linear-gradient(180deg, var(--bg-2), var(--bg) 72%);
    border-bottom: 1px solid var(--rule);
}
/* 64px grid masked by a radial fade */
.home-hero::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 28%, #000 0%, transparent 72%);
    mask-image: radial-gradient(ellipse 60% 55% at 50% 28%, #000 0%, transparent 72%);
}
.home-hero > * { position: relative; z-index: 2; }

/* drifting particles */
.particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.particle {
    position: absolute; border-radius: 50%;
    background: var(--signal); opacity: .45;
    animation-name: drift; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes drift {
    0%   { transform: translate3d(0, 0, 0); opacity: 0; }
    10%  { opacity: .5; }
    90%  { opacity: .35; }
    100% { transform: translate3d(14px, -120px, 0); opacity: 0; }
}

.hero-eyebrow {
    display: inline-flex; align-items: center; gap: .55rem;
    font-family: var(--mono); font-size: 12px; text-transform: uppercase;
    letter-spacing: .14em; color: var(--accent); margin-bottom: 1.4rem;
}
.pulse-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--signal);
    box-shadow: 0 0 10px var(--signal); animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

.home-hero h1 { max-width: 16ch; margin: 0 auto 1.2rem; }
.home-hero .lede { margin: 0 auto; }
.home-hero .hero-cta { margin-top: 2.4rem; }

/* HUD ticks strip */
.hud-ticks {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 28px;
    margin: 3rem auto 0; padding-top: 1.6rem; max-width: 760px;
    border-top: 1px solid var(--rule);
}
.hud-tick { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--fg-faint); text-transform: uppercase; }
.hud-tick .v { color: var(--signal); margin-left: .5rem; }

/* ─── Cycle (pipeline accent) ────────────────────────────── */
.cycle-panel {
    margin-top: 2.4rem; padding: 2rem; background: var(--surface); border: 1px solid var(--rule);
    border-radius: var(--radius);
}
.cycle-svg { width: 100%; height: 110px; display: block; }
.cycle-legend {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px;
    font-family: var(--mono); font-size: 11px; text-align: center;
}
.cycle-legend .stage { color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: .06em; }
.cycle-legend .meta { color: var(--fg-faint); margin-top: 3px; }
.cycle-note { margin-top: 1.4rem; color: var(--fg-faint); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-align: center; }

/* function cards: tag mono labels */
.func-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: .4rem; }
.card h3 { margin: 0 0 .5rem; }

/* ─── Depth — N1 / N2 / N3 ───────────────────────────────── */
.depth-panel { padding: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.depth-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.depth-col { padding: 2rem 1.8rem; }
.depth-col + .depth-col { border-left: 1px solid var(--rule); }
.depth-num { font-family: var(--display); font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.depth-num.n1 { color: var(--signal); }
.depth-num.n2 { color: var(--accent); }
.depth-num.n3 { color: var(--accent-2); }
.depth-title { font-family: var(--display); font-size: 1.35rem; font-weight: 600; margin-top: 1rem; }
.depth-body { font-size: .92rem; color: var(--fg-dim); margin-top: .7rem; line-height: 1.6; }
.depth-items { margin-top: 1.1rem; font-family: var(--mono); font-size: 12px; }
.depth-items div { display: flex; gap: 8px; padding: 4px 0; color: var(--fg-dim); }
.depth-items .arrow.n1 { color: var(--signal); }
.depth-items .arrow.n2 { color: var(--accent); }
.depth-items .arrow.n3 { color: var(--accent-2); }
.depth-delay { font-family: var(--mono); font-size: 11px; color: var(--fg-faint); margin-top: 1.1rem; letter-spacing: .14em; }

/* ─── Audiences ──────────────────────────────────────────── */
.audience-list { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .5rem; }
.audience-chip {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .7rem 1.1rem; background: var(--surface); border: 1px solid var(--rule);
    border-radius: 999px; font-size: .92rem; color: var(--fg); transition: border-color .2s;
}
.audience-chip:hover { border-color: var(--accent); }
.audience-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grad); flex: none; }

/* ─── Global teaser (node map accent) ────────────────────── */
.globe-teaser { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.4rem; align-items: center; }
.globe-accent { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.4rem; }
.globe-foot { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--fg-faint); letter-spacing: .06em; margin-top: .6rem; }
.globe-foot .live { color: var(--signal); }

/* ─── FAQ ────────────────────────────────────────────────── */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.faq-item { display: flex; gap: 1.1rem; }
.faq-num { font-family: var(--mono); color: var(--accent); font-size: 12px; letter-spacing: .14em; white-space: nowrap; padding-top: .2rem; }
.faq-q { font-family: var(--display); font-size: 1.1rem; font-weight: 600; line-height: 1.3; }
.faq-a { font-size: .92rem; color: var(--fg-dim); margin-top: .6rem; line-height: 1.6; }

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
    .depth-grid { grid-template-columns: 1fr; }
    .depth-col + .depth-col { border-left: none; border-top: 1px solid var(--rule); }
    .globe-teaser { grid-template-columns: 1fr; }
    .faq-grid { grid-template-columns: 1fr; }
    .cycle-legend { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
    .home-hero { padding: 96px 18px 72px; }
    .cycle-legend { font-size: 10px; }
}