:root {
    --navy: #061433;
    --purple: #6d28d9;
    --purple-2: #8b5cf6;
    --teal: #2dd4bf;
    --coral: #ff7a59;
    --ink: #152038;
    --muted: #5c6578;
    --soft: #f6f4ff;
}

html { scroll-behavior: smooth; }
body {
    color: var(--ink);
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}
h1, h2, h3, .navbar-brand {
    font-family: Nunito, "Plus Jakarta Sans", sans-serif;
    letter-spacing: -0.03em;
}
.site-header { backdrop-filter: blur(12px); }
.navbar .nav-link {
    font-weight: 600;
    color: var(--navy);
}
.navbar .nav-link:hover { color: var(--purple); }
.brand-logo { height: 48px; width: auto; }
.brand-logo-footer { height: 52px; filter: brightness(0) invert(1); }

.btn-primary {
    --bs-btn-bg: var(--purple);
    --bs-btn-border-color: var(--purple);
    --bs-btn-hover-bg: #5b21b6;
    --bs-btn-hover-border-color: #5b21b6;
    --bs-btn-active-bg: #5b21b6;
    --bs-btn-active-border-color: #5b21b6;
}

.hero {
    background: linear-gradient(180deg, #f8f6ff 0%, #fff 78%);
}
.hero-banner {
    background: transparent;
}
.eyebrow {
    color: var(--purple);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    margin-bottom: 0.6rem;
}
.eyebrow.light { color: var(--teal); }
h1 span { color: var(--purple); }

.pulse-rhythm {
    background:
        radial-gradient(circle at 12% 20%, rgba(45, 212, 191, 0.16), transparent 28%),
        radial-gradient(circle at 88% 10%, rgba(255, 122, 89, 0.14), transparent 26%),
        #fff;
}
.pulse-track { padding-top: 8px; }
.pulse-line {
    position: absolute;
    top: -8px;
    left: 4%;
    width: 92%;
    height: 90px;
    z-index: 0;
    overflow: visible;
}
.pulse-line-path {
    fill: none;
    stroke: var(--purple);
    stroke-width: 3;
    stroke-linecap: round;
    opacity: 0.35;
}
.pulse-dot {
    fill: var(--coral);
    offset-path: path("M0 50 H120 L155 18 L190 78 L225 50 H420 L455 22 L490 74 L525 50 H720 L755 20 L790 76 L825 50 H1100");
    animation: ride-pulse 5.5s linear infinite;
}
@keyframes ride-pulse {
    0% { offset-distance: 0%; }
    100% { offset-distance: 100%; }
}

.beat-card {
    position: relative;
    z-index: 1;
    background: #fff;
    border: 1px solid #ece9f6;
    border-radius: 1.5rem;
    padding: 1.4rem 1.3rem 1.5rem;
    box-shadow: 0 16px 40px rgba(11, 31, 74, 0.07);
    overflow: hidden;
}
.beat-card h3 { font-size: 1.35rem; margin-bottom: 0.4rem; }
.beat-card p { color: var(--muted); margin-bottom: 0; }
.beat-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--purple);
    margin: 1rem 0 0.2rem;
}
.beat-circle { transform: none; }
.beat-minutes { background: linear-gradient(180deg, #fff 60%, #eefbf8); }
.beat-consent { background: linear-gradient(180deg, #fff 58%, #f4efff); }
.beat-calm { background: linear-gradient(180deg, #fff 58%, #fff1ea); }

@media (min-width: 992px) {
    .beat-circle { transform: translateY(18px); }
    .beat-minutes { transform: translateY(-10px); }
    .beat-consent { transform: translateY(22px); }
    .beat-calm { transform: translateY(-6px); }
}

.beat-orbit {
    position: relative;
    height: 92px;
    margin-bottom: 4px;
}
.beat-orbit .face,
.orbit-heart {
    position: absolute;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    color: #fff;
    font-size: 0.8rem;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}
.f1 { background: #ff7a59; top: 8px; left: 18%; }
.f2 { background: #3b82f6; top: 8px; right: 18%; }
.f3 { background: #14b8a6; bottom: 0; left: 28%; }
.f4 { background: #8b5cf6; bottom: 0; right: 26%; }
.orbit-heart {
    background: var(--navy);
    width: 42px;
    height: 42px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: heart-beat 1.4s ease-in-out infinite;
}
@keyframes heart-beat {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    30% { transform: translate(-50%, -50%) scale(1.12); }
    50% { transform: translate(-50%, -50%) scale(0.96); }
}

.beat-clock {
    position: relative;
    height: 92px;
    display: grid;
    place-items: center;
}
.clock-face {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    border: 6px solid #99f6e4;
    background: #fff;
    box-shadow: inset 0 0 0 4px #f0fdfa;
}
.clock-hand {
    position: absolute;
    width: 3px;
    height: 22px;
    background: var(--navy);
    top: 26px;
    left: 50%;
    margin-left: -1.5px;
    border-radius: 3px;
    transform-origin: 50% 100%;
    animation: tick 6s linear infinite;
}
.beat-clock strong {
    position: absolute;
    bottom: 0;
    right: 12px;
    background: var(--teal);
    color: var(--navy);
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 999px;
}
@keyframes tick {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.beat-toggles {
    display: grid;
    gap: 8px;
    margin-bottom: 4px;
}
.beat-toggles .toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--navy);
    box-shadow: 0 4px 12px rgba(109, 40, 217, 0.08);
}
.beat-toggles .toggle i {
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: #ddd6fe;
    position: relative;
    display: inline-block;
}
.beat-toggles .toggle i::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    top: 2px;
    left: 2px;
}
.beat-toggles .toggle.on i { background: var(--purple); }
.beat-toggles .toggle.on i::after { left: 16px; }

.beat-wave {
    height: 92px;
    display: grid;
    place-items: center;
}
.beat-wave svg {
    width: 100%;
    height: 54px;
}
.beat-wave path {
    fill: none;
    stroke: var(--coral);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 8 6;
    animation: wave-flow 1.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .pulse-dot, .orbit-heart, .clock-hand, .beat-wave path, .feature-panel,
    .pulse-aurora, .timeline-word, .signal-path path, .signal-bead,
    .pulse-live .app-avatars i, .live-spine .spine, .pulse-live .app-card,
    .pulse-live .app-icon, .pulse-live .tag, .pulse-copy h3, .pulse-copy p { animation: none; transition: none; }
}

.features { background: var(--soft); }
.feature-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
.feature-playlist {
    display: grid;
    gap: 8px;
}
.feature-pick {
    display: grid;
    grid-template-columns: 36px 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    background: #fff;
    border: 1px solid #ece9f6;
    border-radius: 16px;
    padding: 10px 12px;
    cursor: pointer;
    margin: 0;
    transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.feature-pick span {
    grid-row: 1 / 3;
    align-self: center;
    font-weight: 800;
    color: var(--purple);
}
.feature-pick strong { font-size: 0.95rem; }
.feature-pick em {
    grid-column: 2;
    font-style: normal;
    color: var(--muted);
    font-size: 0.8rem;
}
.feature-pick:hover { border-color: #d4c8f5; }
#feat-pulse:checked ~ .row label[for="feat-pulse"],
#feat-care:checked ~ .row label[for="feat-care"],
#feat-cal:checked ~ .row label[for="feat-cal"],
#feat-screen:checked ~ .row label[for="feat-screen"],
#feat-route:checked ~ .row label[for="feat-route"],
#feat-call:checked ~ .row label[for="feat-call"],
#feat-docs:checked ~ .row label[for="feat-docs"],
#feat-report:checked ~ .row label[for="feat-report"] {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}
#feat-pulse:checked ~ .row label[for="feat-pulse"] em,
#feat-care:checked ~ .row label[for="feat-care"] em,
#feat-cal:checked ~ .row label[for="feat-cal"] em,
#feat-screen:checked ~ .row label[for="feat-screen"] em,
#feat-route:checked ~ .row label[for="feat-route"] em,
#feat-call:checked ~ .row label[for="feat-call"] em,
#feat-docs:checked ~ .row label[for="feat-docs"] em,
#feat-report:checked ~ .row label[for="feat-report"] em { color: #c9d2e8; }
#feat-pulse:checked ~ .row label[for="feat-pulse"] span,
#feat-care:checked ~ .row label[for="feat-care"] span,
#feat-cal:checked ~ .row label[for="feat-cal"] span,
#feat-screen:checked ~ .row label[for="feat-screen"] span,
#feat-route:checked ~ .row label[for="feat-route"] span,
#feat-call:checked ~ .row label[for="feat-call"] span,
#feat-docs:checked ~ .row label[for="feat-docs"] span,
#feat-report:checked ~ .row label[for="feat-report"] span { color: var(--teal); }

.feature-stage {
    position: relative;
    background: #fff;
    border-radius: 28px;
    min-height: 560px;
    padding: 18px;
    box-shadow: 0 18px 50px rgba(11, 31, 74, 0.08);
}
.feature-panel {
    position: absolute;
    inset: 18px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .4s ease, transform .4s ease, visibility .4s;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
#feat-pulse:checked ~ .row .feature-panel[data-panel="pulse"],
#feat-care:checked ~ .row .feature-panel[data-panel="care"],
#feat-cal:checked ~ .row .feature-panel[data-panel="cal"],
#feat-screen:checked ~ .row .feature-panel[data-panel="screen"],
#feat-route:checked ~ .row .feature-panel[data-panel="route"],
#feat-call:checked ~ .row .feature-panel[data-panel="call"],
#feat-docs:checked ~ .row .feature-panel[data-panel="docs"],
#feat-report:checked ~ .row .feature-panel[data-panel="report"] {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.app-window.pulse-live {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    perspective: 900px;
}
.pulse-aurora {
    position: absolute;
    inset: -40%;
    z-index: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(45, 212, 191, .35), transparent 36%),
        radial-gradient(circle at 80% 20%, rgba(139, 92, 246, .32), transparent 34%),
        radial-gradient(circle at 60% 80%, rgba(255, 122, 89, .22), transparent 40%);
    filter: blur(8px);
    pointer-events: none;
}
.pulse-live .app-top,
.pulse-live .app-body,
.pulse-live .feature-copy { position: relative; z-index: 1; }
.avatar-cluster {
    position: relative;
    width: 148px;
    height: 36px;
}
.avatar-cluster .app-avatars {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.avatar-cluster .app-avatars i { margin-left: 0; }
.signal-path {
    position: absolute;
    inset: 0;
    width: 148px;
    height: 36px;
}
.signal-path path {
    fill: none;
    stroke: #8b5cf6;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 180;
    stroke-dashoffset: 180;
    opacity: .55;
}
.signal-bead {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 12px 4px rgba(109, 40, 217, .55);
    offset-path: path("M6 20 H34 L44 8 L54 30 L64 20 H86 L96 10 L106 28 L116 20 H142");
    offset-distance: 0%;
    opacity: 0;
}
.live-spine { position: relative; padding-left: 14px; }
.live-spine .spine {
    position: absolute;
    left: 2px;
    top: 8px;
    width: 3px;
    height: 0;
    border-radius: 99px;
    background: linear-gradient(180deg, #14b8a6, #8b5cf6, #ff7a59);
    transform-origin: top;
}

#feat-pulse:checked ~ .row .pulse-aurora {
    animation: fp-aurora 7s ease-in-out infinite;
}
#feat-pulse:checked ~ .row .timeline-word {
    animation: fp-type 5s cubic-bezier(.16, 1, .3, 1) infinite;
}
#feat-pulse:checked ~ .row .signal-path path {
    animation: fp-draw 5s ease infinite;
}
#feat-pulse:checked ~ .row .signal-bead {
    animation: fp-bead 2.5s ease-in-out infinite;
}
#feat-pulse:checked ~ .row .pulse-live .app-avatars i.a {
    animation: fp-dock-a 5s cubic-bezier(.16, 1.2, .3, 1) infinite;
}
#feat-pulse:checked ~ .row .pulse-live .app-avatars i.b {
    animation: fp-dock-b 5s cubic-bezier(.16, 1.2, .3, 1) infinite;
}
#feat-pulse:checked ~ .row .pulse-live .app-avatars i.c {
    animation: fp-dock-c 5s cubic-bezier(.16, 1.2, .3, 1) infinite;
}
#feat-pulse:checked ~ .row .pulse-live .app-avatars i.d {
    animation: fp-dock-d 5s cubic-bezier(.16, 1.2, .3, 1) infinite;
}
#feat-pulse:checked ~ .row .live-spine .spine {
    animation: fp-spine 5s cubic-bezier(.16, 1, .3, 1) infinite;
}
#feat-pulse:checked ~ .row .pulse-live .app-card {
    transform-origin: left center;
}
#feat-pulse:checked ~ .row .pulse-live .app-card:nth-of-type(1) {
    animation: fp-liquid-1 5s cubic-bezier(.16, 1, .3, 1) infinite;
}
#feat-pulse:checked ~ .row .pulse-live .app-card:nth-of-type(2) {
    animation: fp-liquid-2 5s cubic-bezier(.16, 1, .3, 1) infinite;
}
#feat-pulse:checked ~ .row .pulse-live .app-card:nth-of-type(3) {
    animation: fp-liquid-3 5s cubic-bezier(.16, 1, .3, 1) infinite;
}
#feat-pulse:checked ~ .row .pulse-live .app-card:nth-of-type(1) .app-icon {
    animation: fp-flip-1 5s cubic-bezier(.16, 1, .3, 1) infinite;
}
#feat-pulse:checked ~ .row .pulse-live .app-card:nth-of-type(2) .app-icon {
    animation: fp-flip-2 5s cubic-bezier(.16, 1, .3, 1) infinite;
}
#feat-pulse:checked ~ .row .pulse-live .app-card:nth-of-type(3) .app-icon {
    animation: fp-flip-3 5s cubic-bezier(.16, 1, .3, 1) infinite;
}
#feat-pulse:checked ~ .row .pulse-live .app-card:nth-of-type(1) .tag {
    animation: fp-pill-1 5s cubic-bezier(.16, 1, .3, 1) infinite;
}
#feat-pulse:checked ~ .row .pulse-live .app-card:nth-of-type(2) .tag {
    animation: fp-pill-2 5s cubic-bezier(.16, 1, .3, 1) infinite;
}
#feat-pulse:checked ~ .row .pulse-live .app-card:nth-of-type(3) .tag {
    animation: fp-pill-3 5s cubic-bezier(.16, 1, .3, 1) infinite;
}
#feat-pulse:checked ~ .row .pulse-copy h3 {
    animation: fp-shine 5s ease infinite;
}
#feat-pulse:checked ~ .row .pulse-copy p {
    animation: fp-mask 5s ease infinite;
}

@keyframes fp-aurora {
    0% { transform: translate(-6%, -4%) rotate(0deg) scale(1); }
    50% { transform: translate(8%, 6%) rotate(12deg) scale(1.08); }
    100% { transform: translate(-6%, -4%) rotate(0deg) scale(1); }
}
@keyframes fp-type {
    0% { clip-path: inset(0 100% 0 0); letter-spacing: .35em; filter: blur(8px); opacity: 0; }
    12%, 82% { clip-path: inset(0 0 0 0); letter-spacing: 0; filter: blur(0); opacity: 1; }
    100% { clip-path: inset(0 100% 0 0); letter-spacing: .35em; filter: blur(8px); opacity: 0; }
}
@keyframes fp-draw {
    0% { stroke-dashoffset: 180; }
    18%, 80% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 180; }
}
@keyframes fp-bead {
    0% { offset-distance: 0%; opacity: 0; }
    8% { opacity: 1; }
    92% { opacity: 1; }
    100% { offset-distance: 100%; opacity: 0; }
}
@keyframes fp-dock-a {
    0% { transform: translate(-48px, -36px) rotate(-28deg) scale(.2); opacity: 0; }
    14% { transform: translate(4px, 2px) rotate(8deg) scale(1.12); opacity: 1; }
    18%, 82% { transform: none; opacity: 1; }
    100% { transform: translate(-48px, -36px) rotate(-28deg) scale(.2); opacity: 0; }
}
@keyframes fp-dock-b {
    0%, 2% { transform: translate(12px, -42px) rotate(18deg) scale(.2); opacity: 0; }
    16% { transform: translate(-3px, 3px) rotate(-6deg) scale(1.12); opacity: 1; }
    20%, 82% { transform: none; opacity: 1; }
    100% { transform: translate(12px, -42px) rotate(18deg) scale(.2); opacity: 0; }
}
@keyframes fp-dock-c {
    0%, 4% { transform: translate(40px, 38px) rotate(32deg) scale(.2); opacity: 0; }
    18% { transform: translate(-2px, -4px) rotate(-10deg) scale(1.12); opacity: 1; }
    22%, 82% { transform: none; opacity: 1; }
    100% { transform: translate(40px, 38px) rotate(32deg) scale(.2); opacity: 0; }
}
@keyframes fp-dock-d {
    0%, 6% { transform: translate(56px, -18px) rotate(-40deg) scale(.2); opacity: 0; }
    20% { transform: translate(-4px, 3px) rotate(12deg) scale(1.12); opacity: 1; }
    24%, 82% { transform: none; opacity: 1; }
    100% { transform: translate(56px, -18px) rotate(-40deg) scale(.2); opacity: 0; }
}
@keyframes fp-spine {
    0% { height: 0; opacity: 0; }
    22%, 80% { height: calc(100% - 16px); opacity: 1; }
    100% { height: 0; opacity: 0; }
}
@keyframes fp-liquid-1 {
    0%, 8% { opacity: 0; filter: blur(14px); clip-path: circle(0% at 0% 50%); transform: translateX(-24px) rotateX(18deg); }
    22%, 80% { opacity: 1; filter: blur(0); clip-path: circle(140% at 0% 50%); transform: none; }
    100% { opacity: 0; filter: blur(14px); clip-path: circle(0% at 0% 50%); transform: translateX(-24px) rotateX(18deg); }
}
@keyframes fp-liquid-2 {
    0%, 14% { opacity: 0; filter: blur(14px); clip-path: circle(0% at 0% 50%); transform: translateX(-24px) rotateX(18deg); }
    28%, 80% { opacity: 1; filter: blur(0); clip-path: circle(140% at 0% 50%); transform: none; }
    100% { opacity: 0; filter: blur(14px); clip-path: circle(0% at 0% 50%); transform: translateX(-24px) rotateX(18deg); }
}
@keyframes fp-liquid-3 {
    0%, 20% { opacity: 0; filter: blur(14px); clip-path: circle(0% at 0% 50%); transform: translateX(-24px) rotateX(18deg); }
    34%, 80% { opacity: 1; filter: blur(0); clip-path: circle(140% at 0% 50%); transform: none; }
    100% { opacity: 0; filter: blur(14px); clip-path: circle(0% at 0% 50%); transform: translateX(-24px) rotateX(18deg); }
}
@keyframes fp-flip-1 {
    0%, 12% { transform: rotateY(-90deg) scale(.6); opacity: 0; }
    24%, 80% { transform: none; opacity: 1; }
    100% { transform: rotateY(-90deg) scale(.6); opacity: 0; }
}
@keyframes fp-flip-2 {
    0%, 18% { transform: rotateY(-90deg) scale(.6); opacity: 0; }
    30%, 80% { transform: none; opacity: 1; }
    100% { transform: rotateY(-90deg) scale(.6); opacity: 0; }
}
@keyframes fp-flip-3 {
    0%, 24% { transform: rotateY(-90deg) scale(.6); opacity: 0; }
    36%, 80% { transform: none; opacity: 1; }
    100% { transform: rotateY(-90deg) scale(.6); opacity: 0; }
}
@keyframes fp-pill-1 {
    0%, 16% { transform: translateX(18px) scaleX(.2); opacity: 0; filter: blur(6px); }
    28%, 80% { transform: none; opacity: 1; filter: blur(0); }
    100% { transform: translateX(18px) scaleX(.2); opacity: 0; filter: blur(6px); }
}
@keyframes fp-pill-2 {
    0%, 22% { transform: translateX(18px) scaleX(.2); opacity: 0; filter: blur(6px); }
    34%, 80% { transform: none; opacity: 1; filter: blur(0); }
    100% { transform: translateX(18px) scaleX(.2); opacity: 0; filter: blur(6px); }
}
@keyframes fp-pill-3 {
    0%, 28% { transform: translateX(18px) scaleX(.2); opacity: 0; filter: blur(6px); }
    40%, 80% { transform: none; opacity: 1; filter: blur(0); }
    100% { transform: translateX(18px) scaleX(.2); opacity: 0; filter: blur(6px); }
}
@keyframes fp-shine {
    0%, 12% { opacity: 0; transform: translateY(12px); }
    28%, 80% { opacity: 1; transform: none; }
    100% { opacity: 0; transform: translateY(12px); }
}
@keyframes fp-mask {
    0%, 16% { opacity: 0; mask-image: linear-gradient(90deg, #000 0%, transparent 0%); }
    32%, 80% { opacity: 1; mask-image: linear-gradient(90deg, #000 100%, transparent 100%); }
    100% { opacity: 0; mask-image: linear-gradient(90deg, #000 0%, transparent 0%); }
}

.app-window {
    background: linear-gradient(180deg, #f7f5ff 0%, #ffffff 55%);
    border: 1px solid #ece9f6;
    border-radius: 22px;
    padding: 16px;
    flex: 1;
}
.app-window.dark {
    background: linear-gradient(160deg, #0b1f4a, #3b1d7a);
    border-color: transparent;
    color: #fff;
}
.app-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.app-avatars { display: flex; }
.app-avatars i {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: 0.7rem;
    font-weight: 800;
    color: #fff;
    margin-left: -6px;
    border: 2px solid #fff;
}
.app-avatars .a { background: #ff7a59; }
.app-avatars .b { background: #3b82f6; }
.app-avatars .c { background: #14b8a6; }
.app-avatars .d { background: #8b5cf6; }
.quiet-chip, .tag {
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 800;
    border-radius: 999px;
    padding: 4px 10px;
    background: #eee9ff;
    color: var(--purple);
}
.quiet-chip.light { background: rgba(255,255,255,.14); color: #fff; }
.tag.green { background: #d1fae5; color: #047857; }
.tag.purple { background: #ede9fe; color: #6d28d9; }
.app-body { display: grid; gap: 10px; }
.app-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 0 8px 22px rgba(11, 31, 74, 0.05);
}
.app-card.featured {
    border: 1px solid #ddd6fe;
}
.app-window.dark .app-card.glass {
    background: rgba(255,255,255,.1);
    color: #fff;
    box-shadow: none;
}
.app-card h4, .care-hero h4 { margin: 0; font-size: 1rem; }
.app-card p, .care-hero p { margin: 0; color: var(--muted); font-size: 0.85rem; }
.app-window.dark .app-card p { color: #d7d3ea; }
.app-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-weight: 700;
    transform-style: preserve-3d;
}
.app-icon.teal { background: #d7fbf4; }
.app-icon.purple { background: #ece4ff; }
.app-icon.coral { background: #ffe6de; }
.app-icon.blue { background: #dbeafe; }
.app-card .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dot.coral { background: var(--coral); }
.dot.purple { background: var(--purple); }
.dot.teal { background: var(--teal); }

.care-hero, .stat-row, .route-board, .report-metrics {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-radius: 18px;
    padding: 16px;
}
.done-ring {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 4px solid var(--teal);
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    font-weight: 800;
    color: #0f766e;
}
.cal-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
}
.cal-week .on, .cal-week .mark {
    background: #fff;
    border-radius: 10px;
    padding: 6px 0;
}
.cal-week .mark { color: #fff; }
.cal-week .mark.coral { background: var(--coral); }
.cal-week .mark.teal { background: #14b8a6; }
.cal-week .mark:not(.coral):not(.teal) { background: var(--purple); }
.big { font-size: 2rem; margin: 0; }
.soft-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 92px;
    padding: 8px 4px 0;
}
.soft-bars span {
    flex: 1;
    height: var(--h);
    border-radius: 8px 8px 4px 4px;
    background: #ddd6fe;
}
.soft-bars .now { background: var(--purple); }
.route-board { gap: 12px; }
.route-line {
    flex: 1;
    height: 4px;
    background: #e9e4f8;
    border-radius: 99px;
    position: relative;
}
.route-line i {
    position: absolute;
    left: 62%;
    top: -5px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--purple);
    box-shadow: 0 0 0 6px rgba(109, 40, 217, 0.16);
}
.place small { display: block; color: var(--muted); }
.place.end { text-align: right; }
.report-metrics {
    background: rgba(255,255,255,.08);
    color: #fff;
}
.report-metrics div { text-align: center; flex: 1; }
.report-metrics small { display: block; opacity: .7; }
.report-metrics b { font-size: 1.6rem; }
.feature-copy { padding: 2px 6px 0; }
.feature-copy h3 { margin-bottom: 0.3rem; }
.feature-copy p { color: var(--muted); margin: 0; }

@media (max-width: 991px) {
    .feature-playlist {
        display: flex;
        overflow-x: auto;
        padding-bottom: 6px;
    }
    .feature-pick { min-width: 210px; flex: 0 0 auto; }
    .feature-stage { min-height: 540px; }
}
.icon-badge {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    margin-bottom: 14px;
}
.icon-badge.teal { background: #d7fbf4; }
.icon-badge.purple { background: #ece4ff; }
.icon-badge.coral { background: #ffe6de; }

.step-item { background: var(--soft); }
.step-num {
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--purple);
    min-width: 48px;
}

.privacy-card {
    background: linear-gradient(135deg, var(--navy), #3b1d7a);
    color: #fff;
}
.privacy-card p { max-width: 58ch; color: #d7d3ea; }

.cta-inner { background: #fff4ee; }

.navbar .nav-link.active { color: var(--purple); }

.contact-hero {
    position: relative;
    overflow: hidden;
    background: #f7f4ff;
}
.contact-aurora {
    position: absolute;
    inset: -25% -10% auto;
    height: 80%;
    background:
        radial-gradient(circle at 12% 50%, rgba(45,212,191,.3), transparent 34%),
        radial-gradient(circle at 78% 18%, rgba(139,92,246,.3), transparent 36%),
        radial-gradient(circle at 48% 90%, rgba(255,122,89,.2), transparent 38%);
    pointer-events: none;
}
.contact-hero .contact-intro {
    margin-top: 1.75rem;
    margin-bottom: 1.5rem;
}
.hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.hero-note {
    color: var(--muted);
    font-size: 0.92rem;
    margin: 0;
}
.inbox-stage {
    background: #fff;
    border-radius: 28px;
    padding: 14px;
    box-shadow: 0 24px 60px rgba(11, 31, 74, 0.12);
    border: 1px solid #ece9f6;
    transform: rotate(-1.2deg);
}
.inbox-top {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 14px;
}
.inbox-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 6px rgba(34, 197, 94, .18);
}
.inbox-top em {
    margin-left: auto;
    font-style: normal;
    font-size: 0.78rem;
    font-weight: 700;
    color: #15803d;
    background: #dcfce7;
    border-radius: 999px;
    padding: 4px 10px;
}
.inbox-thread {
    background: linear-gradient(180deg, #f6f4ff, #fff);
    border-radius: 20px;
    padding: 16px;
    display: grid;
    gap: 10px;
}
.bubble {
    max-width: 88%;
    border-radius: 18px;
    padding: 10px 14px;
}
.bubble small {
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 4px;
    opacity: .7;
}
.bubble p { margin: 0; }
.bubble.in {
    background: #fff;
    border: 1px solid #ece9f6;
    justify-self: start;
    border-bottom-left-radius: 6px;
}
.bubble.out {
    background: var(--navy);
    color: #fff;
    justify-self: end;
    border-bottom-right-radius: 6px;
}
.bubble.out small { color: var(--teal); opacity: 1; }
.contact-channels {
    padding-top: 2.5rem;
}

.channel-card {
    display: block;
    height: 100%;
    background: #fff;
    border: 1px solid #ece9f6;
    border-radius: 22px;
    padding: 22px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 12px 30px rgba(11,31,74,.05);
    transition: transform .2s ease, box-shadow .2s ease;
}
a.channel-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(11,31,74,.1); color: inherit; }
.channel-num { color: var(--purple); font-weight: 800; font-size: 0.82rem; }
.channel-card h3 { font-size: 1.2rem; margin: 6px 0 8px; }
.channel-card p { color: var(--muted); }
.channel-card strong { word-break: break-word; }
.channel-card.phone { background: linear-gradient(180deg, #fff, #e8fffa); }
.channel-card.mail { background: linear-gradient(180deg, #fff, #f3edff); }
.channel-card.studio { background: linear-gradient(180deg, #fff, #fff4ee); }

.studio-shell {
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(11,31,74,.12);
}
.studio-aside {
    background: linear-gradient(165deg, #0b1f4a, #3b1d7a);
    color: #fff;
    padding: 36px 28px;
}
.studio-aside p { color: #d7d3ea; }
.studio-points { padding-left: 1.1rem; margin: 0; }
.studio-points li { margin-bottom: 8px; }
.studio-form {
    background: #fff;
    padding: 36px 28px;
}
.studio-form .form-control,
.studio-form .form-select {
    border-radius: 12px;
    padding: 0.75rem 0.95rem;
    border-color: #e4e0f0;
}
.studio-form .form-control:focus,
.studio-form .form-select:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 0.2rem rgba(109, 40, 217, 0.15);
}

@media (prefers-reduced-motion: reduce) {
    .inbox-stage { transform: none; }
}

.policy-hero {
    position: relative;
    overflow: hidden;
    background: #f7f4ff;
}
.policy-aurora {
    position: absolute;
    inset: -20% -10% auto;
    height: 70%;
    background:
        radial-gradient(circle at 15% 40%, rgba(45,212,191,.28), transparent 32%),
        radial-gradient(circle at 80% 20%, rgba(139,92,246,.28), transparent 34%),
        radial-gradient(circle at 55% 80%, rgba(255,122,89,.18), transparent 36%);
    pointer-events: none;
}
.policy-meta {
    margin-top: 1rem;
}
@media (min-width: 992px) {
    .policy-meta {
        margin-top: 5rem;
    }
}
.policy-chip {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid #ece9f6;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--navy);
    text-decoration: none;
}
.privacy-orb {
    position: relative;
    min-height: 280px;
    display: grid;
    place-items: center;
}
.orb-ring {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 2px dashed rgba(109,40,217,.35);
    animation: fp-aurora 12s linear infinite;
}
.orb-core {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: linear-gradient(160deg, #0b1f4a, #6d28d9);
    color: #fff;
    display: grid;
    place-content: center;
    text-align: center;
    box-shadow: 0 20px 50px rgba(109,40,217,.35);
    z-index: 1;
}
.orb-core span { font-size: 0.8rem; opacity: .8; }
.orb-float {
    position: absolute;
    background: #fff;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(11,31,74,.1);
}
.orb-float.f1 { top: 18px; left: 0; }
.orb-float.f2 { top: 46%; right: 0; }
.orb-float.f3 { bottom: 24px; left: 12%; }
.promise-card {
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    height: 100%;
    border: 1px solid #ece9f6;
}
.promise-card b { color: var(--purple); font-size: 0.85rem; }
.promise-card h3 { font-size: 1.15rem; margin: 6px 0; }
.promise-card p { margin: 0; color: var(--muted); }

.policy-toc {
    position: sticky;
    top: 92px;
    background: #0b1f4a;
    color: #fff;
    border-radius: 24px;
    padding: 20px 16px;
    display: grid;
    gap: 2px;
    max-height: calc(100vh - 120px);
    overflow: auto;
}
.policy-toc p { font-size: 0.75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); margin-bottom: 8px; }
.policy-toc a {
    display: flex;
    gap: 10px;
    color: #d7d3ea;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 6px 8px;
    border-radius: 10px;
}
.policy-toc a:hover { background: rgba(255,255,255,.08); color: #fff; }
.policy-toc span { color: var(--teal); min-width: 22px; }

.policy-intro, .policy-chapter {
    background: #fff;
    border: 1px solid #ece9f6;
    border-radius: 22px;
    padding: 24px;
    margin-bottom: 16px;
    box-shadow: 0 12px 30px rgba(11,31,74,.04);
}
.policy-chapter header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.policy-chapter header span {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #ece4ff;
    color: var(--purple);
    display: grid;
    place-items: center;
    font-weight: 800;
    flex-shrink: 0;
}
.policy-chapter h2 { margin: 0; font-size: 1.35rem; }
.policy-chapter h3 { font-size: 1.05rem; margin-top: 1rem; }
.policy-chapter a { color: var(--purple); font-weight: 700; }
.collect-grid, .perm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.collect-grid > div, .perm-grid > div {
    background: var(--soft);
    border-radius: 16px;
    padding: 14px;
}
.collect-grid ul, .policy-chapter ul { padding-left: 1.1rem; margin-bottom: 0.6rem; }
.highlight-line {
    background: #ece4ff;
    border-radius: 14px;
    padding: 12px 14px;
    font-weight: 700;
    margin-bottom: 0;
}
.policy-chapter.note { background: linear-gradient(135deg, #fff4ee, #f6f4ff); }
.policy-contact {
    background: var(--navy);
    color: #fff;
    border-radius: 16px;
    padding: 16px 18px;
}
.policy-contact a { color: var(--teal); }

@media (max-width: 991px) {
    .policy-toc { position: relative; top: 0; max-height: none; display: flex; flex-wrap: wrap; gap: 6px; }
    .policy-toc a { background: rgba(255,255,255,.08); }
    .collect-grid, .perm-grid { grid-template-columns: 1fr; }
}

.site-footer { background: #05070d; color: #d5d9e6; }
.site-footer a { color: #b8c0d4; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer .list-unstyled li + li { margin-top: 0.85rem; }
.site-footer h3.h6 { margin-bottom: 1.15rem; }
.site-footer .col-lg-3 a { display: block; }
.site-footer .col-lg-3 a + a { margin-top: 0.85rem; }
.footer-tagline { color: var(--purple-2); font-weight: 700; }

.nest-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #071433 0%, #1a0b3d 55%, #0b1f4a 100%);
    color: #fff;
}
.nest-hero .lead { color: #d7d3ea; }
.nest-aurora {
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(circle at 18% 30%, rgba(45,212,191,.22), transparent 32%),
        radial-gradient(circle at 82% 18%, rgba(139,92,246,.35), transparent 36%),
        radial-gradient(circle at 50% 90%, rgba(255,122,89,.18), transparent 40%);
    pointer-events: none;
}
.nest-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.5rem; }
.nest-pills span {
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.82rem;
    font-weight: 700;
    background: rgba(255,255,255,.06);
}
.nest-stage {
    position: relative;
    min-height: 340px;
    display: grid;
    place-items: center;
}
.nest-ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px dashed rgba(255,255,255,.18);
}
.nest-ring.r1 { width: 170px; height: 170px; animation: nest-spin 18s linear infinite; }
.nest-ring.r2 { width: 240px; height: 240px; animation: nest-spin 26s linear infinite reverse; border-color: rgba(45,212,191,.28); }
.nest-ring.r3 { width: 310px; height: 310px; animation: nest-spin 34s linear infinite; border-color: rgba(255,122,89,.22); }
.nest-heart {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: linear-gradient(160deg, #6d28d9, #2dd4bf);
    display: grid;
    place-content: center;
    text-align: center;
    z-index: 2;
    box-shadow: 0 24px 50px rgba(109,40,217,.45);
}
.nest-heart em { font-style: normal; font-size: 0.72rem; opacity: .85; }
.nest-role {
    position: absolute;
    background: #fff;
    color: var(--navy);
    font-weight: 800;
    font-size: 0.78rem;
    border-radius: 999px;
    padding: 8px 12px;
    z-index: 3;
}
.nest-role.guardian { top: 18%; left: 8%; }
.nest-role.parent { top: 12%; right: 10%; }
.nest-role.family { bottom: 16%; right: 18%; }
@keyframes nest-spin { to { transform: rotate(360deg); } }

.safety-promises { background: var(--soft); }
.safety-card {
    background: #fff;
    border: 1px solid #ece9f6;
    border-radius: 22px;
    padding: 22px 20px;
    height: 100%;
}
.safety-index { color: var(--purple); font-weight: 800; font-size: 0.82rem; }
.safety-card h2 { font-size: 1.2rem; margin: 8px 0; }

.path-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    counter-reset: path;
}
.path-steps li {
    background: #fff;
    border: 1px solid #ece9f6;
    border-radius: 22px;
    padding: 22px 18px 18px;
    position: relative;
}
.path-steps li::before {
    counter-increment: path;
    content: counter(path, decimal-leading-zero);
    display: block;
    color: var(--teal);
    font-weight: 800;
    margin-bottom: 8px;
}
.path-steps b { display: block; margin-bottom: 8px; }
.path-steps p { margin: 0; color: var(--muted); }

.do-panel {
    border-radius: 24px;
    padding: 28px 24px;
    height: 100%;
}
.do-panel h3 { margin-bottom: 16px; }
.do-panel ul { margin: 0; padding-left: 1.1rem; }
.do-panel li { margin-bottom: 10px; }
.do-panel.yes { background: linear-gradient(180deg, #ecfdf8, #f6f4ff); border: 1px solid #c8f0e6; }
.do-panel.no { background: linear-gradient(180deg, #fff4ee, #f6f4ff); border: 1px solid #ffd8cc; }

.rule-block {
    background: #fff;
    border: 1px solid #ece9f6;
    border-radius: 22px;
    padding: 24px;
    height: 100%;
}
.rule-block h3 { font-size: 1.25rem; }

.report-band {
    background: linear-gradient(135deg, #061433, #4c1d95);
    border-radius: 28px;
    padding: 36px 32px;
}
.report-copy { color: #d7d3ea; }
.report-actions { display: grid; gap: 10px; }
.report-actions a {
    display: block;
    background: rgba(255,255,255,.08);
    color: #fff;
    text-decoration: none;
    border-radius: 14px;
    padding: 12px 16px;
    font-weight: 700;
}
.report-actions a:hover { background: rgba(255,255,255,.16); color: #fff; }
.report-btn { background: var(--coral) !important; text-align: center; }

.close-note {
    background: #fff;
    border: 1px dashed #d7d3ea;
    border-radius: 20px;
    padding: 20px 22px;
    color: var(--muted);
}

@media (max-width: 991px) {
    .path-steps { grid-template-columns: 1fr 1fr; }
    .nest-ring.r3 { width: 260px; height: 260px; }
}
@media (max-width: 575px) {
    .path-steps { grid-template-columns: 1fr; }
}