:root {
    color-scheme: dark;
    --ink: #eef8ff;
    --muted: #8da9bb;
    --bg: #050b12;
    --panel: rgba(10, 24, 38, 0.82);
    --panel-border: rgba(143, 220, 255, 0.16);
    --cyan: #5fe6ff;
    --blue: #4b8dff;
    --violet: #a77aff;
    --lime: #9effce;
    --shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
    --radius: 26px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    background: var(--bg);
}

body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    color: var(--ink);
    background:
        radial-gradient(circle at 50% -10%, rgba(48, 130, 208, 0.19), transparent 33rem),
        linear-gradient(180deg, #07111f 0, var(--bg) 38rem);
    overflow-x: hidden;
}

a { color: inherit; }

button, a { -webkit-tap-highlight-color: transparent; }

.ambient {
    position: fixed;
    z-index: -1;
    width: 28rem;
    height: 28rem;
    border-radius: 50%;
    filter: blur(100px);
    opacity: .11;
    pointer-events: none;
}

.ambient-one { top: 18rem; left: -14rem; background: var(--cyan); }
.ambient-two { top: 54rem; right: -16rem; background: var(--violet); }

.hero {
    position: relative;
    min-height: 370px;
    display: grid;
    place-items: center;
    padding: 4.5rem 1.5rem 5rem;
    isolation: isolate;
    overflow: hidden;
}

.hero::before,
.hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    transform: translateX(-50%);
    width: min(70rem, 94vw);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(95, 230, 255, .45), transparent);
}

.hero::before { top: 25%; }
.hero::after { bottom: 13%; }

.hex-field {
    position: absolute;
    z-index: -2;
    inset: -10%;
    opacity: .32;
    background-image:
        linear-gradient(30deg, rgba(95,230,255,.08) 12%, transparent 12.5%, transparent 87%, rgba(95,230,255,.08) 87.5%, rgba(95,230,255,.08)),
        linear-gradient(150deg, rgba(95,230,255,.08) 12%, transparent 12.5%, transparent 87%, rgba(95,230,255,.08) 87.5%, rgba(95,230,255,.08)),
        linear-gradient(30deg, rgba(95,230,255,.08) 12%, transparent 12.5%, transparent 87%, rgba(95,230,255,.08) 87.5%, rgba(95,230,255,.08)),
        linear-gradient(150deg, rgba(95,230,255,.08) 12%, transparent 12.5%, transparent 87%, rgba(95,230,255,.08) 87.5%, rgba(95,230,255,.08)),
        linear-gradient(60deg, rgba(75,141,255,.055) 25%, transparent 25.5%, transparent 75%, rgba(75,141,255,.055) 75%);
    background-size: 72px 126px;
    background-position: 0 0, 0 0, 36px 63px, 36px 63px, 0 0;
    mask-image: radial-gradient(ellipse at center, black 5%, transparent 67%);
}

.hero-content { text-align: center; }

.eyebrow,
.kicker {
    margin: 0;
    color: #79dff0;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .19em;
    text-transform: uppercase;
}

.eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
}

.eyebrow span {
    width: 2.5rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan));
}

.eyebrow span:last-child { transform: rotate(180deg); }

h1 {
    position: relative;
    margin: .25rem 0 .4rem;
    font-size: clamp(5rem, 15vw, 10.5rem);
    line-height: .95;
    letter-spacing: -.07em;
    font-weight: 900;
    color: transparent;
    background:
        linear-gradient(105deg, #344453 0%, #f5fcff 19%, #718896 31%, #ffffff 42%, #48dbff 50%, #ffffff 58%, #6c8393 72%, #eafbff 86%, #3f5260 100%);
    background-size: 240% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    filter: drop-shadow(0 0 4px rgba(255,255,255,.5)) drop-shadow(0 0 20px rgba(95,230,255,.32));
    animation: metal-shimmer 6s ease-in-out infinite;
}

h1::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    z-index: -1;
    color: rgba(70, 221, 255, .08);
    -webkit-text-stroke: 9px rgba(79, 221, 255, .08);
    filter: blur(16px);
}

@keyframes metal-shimmer {
    0%, 20% { background-position: 100% 0; }
    65%, 100% { background-position: 0 0; }
}

.hero-subtitle {
    max-width: 42rem;
    margin: 0 auto;
    color: #a9bdc9;
    font-size: clamp(.95rem, 2vw, 1.08rem);
    letter-spacing: .02em;
}

main,
footer {
    width: min(1480px, calc(100% - 3rem));
    margin-inline: auto;
}

.demo-banner {
    margin: -2rem 0 2rem;
    padding: .75rem 1rem;
    border: 1px solid rgba(158,255,206,.24);
    border-radius: 12px;
    color: #c9ffe4;
    background: rgba(43, 124, 88, .18);
    text-align: center;
    font-size: .86rem;
}

.timeline-section { margin: 0 0 2rem; }

.section-heading,
.panel-heading,
.footer-meta {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
}

h2 {
    margin: .32rem 0 0;
    font-size: clamp(1.45rem, 3vw, 2.05rem);
    line-height: 1.15;
    letter-spacing: -.035em;
}

.age-readout {
    margin: 0;
    color: var(--muted);
    font-size: .85rem;
    text-align: right;
}

.age-readout strong {
    display: block;
    color: var(--ink);
    font-size: 1.05rem;
}

.timeline-wrap {
    margin-top: 1.25rem;
    padding: 1.45rem 1.45rem 1rem;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(15,35,52,.86), rgba(7,17,29,.86));
    box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.025);
}

.timeline {
    position: relative;
    display: flex;
    width: 100%;
    height: 96px;
    padding: 5px;
    border: 1px solid rgba(132, 196, 225, .2);
    border-radius: 999px;
    background: rgba(2, 9, 17, .72);
    box-shadow: inset 0 8px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.018);
    overflow: hidden;
}

.progress-fill {
    position: absolute;
    z-index: 0;
    inset: 5px auto 5px 5px;
    width: calc(var(--progress) - 5px);
    max-width: calc(100% - 10px);
    border-radius: 999px 0 0 999px;
    background: linear-gradient(90deg, rgba(75,141,255,.12), rgba(95,230,255,.2));
    box-shadow: inset 0 0 28px rgba(95,230,255,.08);
    pointer-events: none;
}

.stage {
    position: relative;
    z-index: 1;
    flex: 0 1 var(--stage-width);
    min-width: 34px;
    border: 0;
    border-right: 1px solid rgba(144, 204, 228, .12);
    border-radius: 8px;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    overflow: hidden;
    transition: flex .38s cubic-bezier(.2,.7,.2,1), background .25s, color .25s, box-shadow .25s;
}

.stage:first-of-type { border-radius: 999px 8px 8px 999px; }
.stage:last-of-type { border-right: 0; border-radius: 8px 999px 999px 8px; }

.stage-copy {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: .22rem;
    min-width: 160px;
    opacity: .6;
    transform: scale(.9);
    transition: opacity .24s, transform .24s;
}

.stage-copy strong {
    color: inherit;
    font-size: clamp(.7rem, 1vw, .88rem);
    line-height: 1.1;
    letter-spacing: .01em;
    white-space: nowrap;
}

.stage-copy small {
    color: #7e9aab;
    font-size: .65rem;
    white-space: nowrap;
}

.stage:hover,
.stage:focus-visible,
.stage.is-active {
    flex-basis: min(32%, 360px);
    flex-shrink: 0;
    color: white;
    outline: none;
    background: linear-gradient(135deg, rgba(49,109,161,.5), rgba(80,49,137,.42));
    box-shadow: inset 0 0 25px rgba(95,230,255,.12), 0 0 24px rgba(39,152,206,.13);
}

.stage:hover .stage-copy,
.stage:focus-visible .stage-copy,
.stage.is-active .stage-copy {
    opacity: 1;
    transform: scale(1);
}

.today-marker {
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    left: var(--progress);
    width: 2px;
    transform: translateX(-1px);
    background: white;
    box-shadow: 0 0 8px var(--cyan), 0 0 20px var(--cyan);
    pointer-events: none;
}

.today-marker::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    width: 8px;
    height: 8px;
    border: 2px solid #dffaff;
    border-radius: 50%;
    background: var(--blue);
    transform: translateX(-50%);
    box-shadow: 0 0 12px var(--cyan);
}

.today-marker span {
    position: absolute;
    top: 23px;
    left: 7px;
    padding: .18rem .38rem;
    border-radius: 5px;
    color: #dffaff;
    background: rgba(4,14,24,.82);
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.timeline-scale {
    display: grid;
    grid-template-columns: 6fr 12fr 3fr;
    margin: .65rem .35rem 0;
    color: #617d8f;
    font-size: .65rem;
}

.timeline-scale span:nth-child(2) { text-align: right; padding-right: .65rem; }
.timeline-scale span:last-child { text-align: right; }

.timeline-hint {
    margin: .75rem 0 0;
    color: #6e8797;
    font-size: .73rem;
    text-align: center;
}

.dashboard {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
    gap: 1.25rem;
}

.panel {
    min-width: 0;
    padding: 1.6rem;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, rgba(16, 37, 54, .9), rgba(7, 17, 29, .9));
    box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.025);
}

.panel-heading { align-items: center; }

.legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .55rem 1rem;
    color: #92aab9;
    font-size: .7rem;
}

.legend span { display: flex; align-items: center; gap: .4rem; }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 7px var(--cyan); }
.legend-line { width: 17px; height: 0; border-top: 2px dashed #778998; }

.growth-chart {
    position: relative;
    min-height: 360px;
    margin: 1rem -.35rem 0;
}

.chart-svg { width: 100%; height: 360px; overflow: visible; }
.chart-grid { stroke: rgba(142,183,206,.1); stroke-width: 1; }
.chart-axis-label { fill: #668496; font-size: 10px; }
.chart-reference { fill: none; stroke: #718796; stroke-width: 2; stroke-dasharray: 7 7; transition: stroke .16s, stroke-width .16s, filter .16s; }
.chart-reference.is-hovered { stroke: #b5d8e7; stroke-width: 2.7; filter: drop-shadow(0 0 5px rgba(181,216,231,.38)); }
.chart-reference-hit { fill: none; stroke: transparent; stroke-width: 18; cursor: crosshair; pointer-events: stroke; }
.chart-reference-hit:focus { outline: none; }
.chart-actual { fill: none; stroke: url(#growthGradient); stroke-width: 3.5; filter: drop-shadow(0 0 5px rgba(95,230,255,.35)); }
.chart-area { fill: url(#areaGradient); }
.chart-point { fill: #eaffff; stroke: var(--cyan); stroke-width: 3; cursor: pointer; filter: drop-shadow(0 0 5px rgba(95,230,255,.7)); }
.chart-point:focus { outline: none; stroke: white; stroke-width: 5; }

.chart-tooltip {
    position: absolute;
    z-index: 2;
    min-width: 138px;
    padding: .6rem .72rem;
    border: 1px solid rgba(95,230,255,.25);
    border-radius: 10px;
    color: #eaffff;
    background: rgba(3, 12, 21, .95);
    box-shadow: 0 12px 36px rgba(0,0,0,.38);
    font-size: .72rem;
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 12px));
}

.chart-tooltip strong { display: block; font-size: .85rem; }
.empty-state { height: 330px; display: grid; place-content: center; text-align: center; color: #7892a3; }
.empty-state strong { display: block; margin-bottom: .35rem; color: #c8dce8; font-size: 1rem; }
.empty-state code { color: #9effce; }

.panel-note {
    margin: .65rem 0 0;
    color: #657f90;
    font-size: .68rem;
    line-height: 1.55;
}

.travel-count {
    margin: 0;
    text-align: right;
}

.travel-count strong {
    display: block;
    color: var(--cyan);
    font-size: 1.7rem;
    line-height: 1;
    text-shadow: 0 0 16px rgba(95,230,255,.35);
}

.travel-count span { color: #7591a2; font-size: .65rem; letter-spacing: .13em; text-transform: uppercase; }

.us-map {
    position: relative;
    display: grid;
    grid-template-columns: repeat(13, minmax(18px, 1fr));
    grid-template-rows: repeat(9, minmax(22px, 1fr));
    gap: 4px;
    aspect-ratio: 13 / 7.7;
    width: 100%;
    margin: 1.35rem 0 .75rem;
}

.state-tile {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    border: 1px solid rgba(123,167,191,.18);
    border-radius: 5px;
    color: #5d7787;
    background: rgba(32,55,70,.35);
    font: 750 clamp(.46rem, .85vw, .66rem)/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    transition: transform .2s, background .2s, color .2s, box-shadow .2s, border-color .2s;
}

.state-tile.visited {
    border-color: rgba(95,230,255,.42);
    color: white;
    background: linear-gradient(145deg, rgba(66,154,221,.78), rgba(82,73,178,.74));
    box-shadow: inset 0 0 11px rgba(95,230,255,.12), 0 0 10px rgba(63,190,235,.14);
    cursor: pointer;
}

.state-tile.visited:hover,
.state-tile.visited:focus-visible {
    z-index: 2;
    transform: scale(1.22);
    border-color: var(--cyan);
    outline: 0;
    background: linear-gradient(145deg, #44b3e2, #765acb);
    box-shadow: 0 0 20px rgba(95,230,255,.35);
}

.map-tooltip {
    position: absolute;
    z-index: 5;
    min-width: 116px;
    padding: .52rem .65rem;
    border: 1px solid rgba(95,230,255,.32);
    border-radius: 9px;
    color: #eaffff;
    background: rgba(3, 12, 21, .96);
    box-shadow: 0 12px 32px rgba(0,0,0,.42), 0 0 18px rgba(95,230,255,.11);
    font-size: .68rem;
    text-align: center;
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 9px));
}

.map-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    border: 5px solid transparent;
    border-top-color: rgba(95,230,255,.32);
    transform: translateX(-50%);
}

.map-tooltip strong,
.map-tooltip span { display: block; }
.map-tooltip strong { margin-bottom: .16rem; color: white; font-size: .76rem; }
.map-tooltip span { color: #91c9d8; }

.visit-list {
    display: flex;
    min-height: 31px;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

.visit-chip {
    padding: .35rem .55rem;
    border: 1px solid rgba(132,191,218,.15);
    border-radius: 999px;
    color: #9eb5c3;
    background: rgba(12,31,45,.65);
    font-size: .65rem;
}

.visit-chip strong { color: #dcf8ff; }

footer { padding: 1.5rem 0 2rem; }

.nav-bar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border: 1px solid var(--panel-border);
    border-radius: 18px;
    background: rgba(7,18,30,.86);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.nav-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 66px;
    border-right: 1px solid rgba(120,180,207,.1);
    color: #809bab;
    font-size: .78rem;
    font-weight: 750;
    text-decoration: none;
    transition: color .2s, background .2s;
}

.nav-bar a:last-child { border-right: 0; }
.nav-bar a:hover,
.nav-bar a:focus-visible,
.nav-bar a.active { color: white; background: linear-gradient(180deg, rgba(61,134,182,.18), rgba(49,72,126,.12)); outline: 0; }
.nav-bar a.active { box-shadow: inset 0 -2px var(--cyan); }
.nav-bar a span { color: #456777; font-size: .58rem; }

.personal-message {
    position: relative;
    display: grid;
    grid-template-columns: 5px minmax(0, 1fr);
    gap: 1.25rem;
    margin-top: 1.25rem;
    padding: clamp(1.35rem, 3vw, 2.2rem);
    border: 1px solid var(--panel-border);
    border-radius: 22px;
    background:
        radial-gradient(circle at 4% 50%, rgba(95,230,255,.08), transparent 24rem),
        linear-gradient(135deg, rgba(14,34,51,.9), rgba(7,17,29,.9));
    box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.025);
    overflow: hidden;
}

.message-accent {
    width: 5px;
    min-height: 100%;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--cyan), var(--blue), var(--violet));
    box-shadow: 0 0 18px rgba(95,230,255,.4);
}

.personal-message h2 {
    margin: 0 0 .65rem;
    color: #eafaff;
    font-size: clamp(1.25rem, 2.6vw, 1.75rem);
}

.personal-message p {
    max-width: 76rem;
    margin: 0;
    color: #9db4c2;
    font-size: clamp(.86rem, 1.5vw, 1rem);
    line-height: 1.75;
}

.footer-meta {
    align-items: center;
    padding: 1rem .4rem 0;
    color: #536d7d;
    font-size: .65rem;
}

.footer-meta p { margin: 0; }
.footer-meta a { color: #7199af; }

@media (max-width: 1050px) {
    .dashboard { grid-template-columns: 1fr; }
    .travel-panel { min-height: auto; }
    .us-map { max-width: 680px; margin-inline: auto; }
}

@media (max-width: 700px) {
    main, footer { width: min(100% - 1.25rem, 1480px); }
    .hero { min-height: 310px; padding-inline: .75rem; }
    h1 { font-size: clamp(4.8rem, 25vw, 8rem); }
    .section-heading { align-items: flex-start; }
    .age-readout strong { font-size: .86rem; }
    .timeline-wrap, .panel { padding: 1.1rem; border-radius: 20px; }
    .timeline { height: 84px; }
    .stage-copy { min-width: 120px; }
    .stage-copy small { font-size: .55rem; }
    .timeline-scale { grid-template-columns: 6fr 12fr 3fr; font-size: .52rem; }
    .panel-heading { align-items: flex-start; }
    .legend { max-width: 150px; }
    .growth-chart { min-height: 315px; }
    .chart-svg { height: 315px; }
    .us-map { gap: 3px; }
    .nav-bar { grid-template-columns: repeat(5, minmax(0,1fr)); }
    .nav-bar a { min-height: 58px; flex-direction: column; gap: .2rem; font-size: .61rem; }
    .personal-message { grid-template-columns: 4px minmax(0, 1fr); gap: .9rem; border-radius: 18px; }
    .footer-meta { align-items: flex-start; }
}

@media (max-width: 450px) {
    .eyebrow span { display: none; }
    .hero-subtitle { max-width: 19rem; }
    .section-heading { display: block; }
    .age-readout { margin-top: .6rem; text-align: left; }
    .age-readout strong { display: inline; margin-right: .25rem; }
    .timeline-wrap { padding-inline: .7rem; }
    .timeline { height: 76px; }
    .timeline-scale span:nth-child(2) { visibility: hidden; }
    .dashboard { grid-template-columns: minmax(0,1fr); }
    .panel-heading { display: block; }
    .legend { justify-content: flex-start; max-width: none; margin-top: .7rem; }
    .travel-count { position: absolute; right: 1.2rem; margin-top: -2.4rem; }
    .us-map { gap: 2px; }
    .state-tile { border-radius: 3px; font-size: .43rem; }
    .footer-meta { display: block; }
    .footer-meta p + p { margin-top: .4rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}