:root {
    --ink: #171914;
    --paper: #f6f4ec;
    --white: #fffefa;
    --lime: #dff26d;
    --lime-soft: #eef7a8;
    --orange: #ff7147;
    --blue: #b9d7ff;
    --muted: #6c7166;
    --line: #d9d9ce;
    --shadow: 0 24px 70px rgba(23, 25, 20, .09);
    --radius: 28px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: "DM Sans", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
.shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(246, 244, 236, .88);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(23, 25, 20, .09);
}
.header-inner { height: 76px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 800 23px/1 "Manrope", sans-serif; letter-spacing: -.05em; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; background: var(--ink); color: var(--lime); border-radius: 50%; font-size: 22px; }
.header-inner nav { display: flex; align-items: center; gap: 34px; font-weight: 600; font-size: 14px; }
.header-inner nav a:not(.nav-pill):hover { text-decoration: underline; text-underline-offset: 5px; }
.nav-pill { border: 1px solid var(--ink); border-radius: 999px; padding: 11px 17px; transition: .2s ease; }
.nav-pill:hover { background: var(--ink); color: var(--white); }

.hero { padding: 82px 0 76px; }
.hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; min-height: 370px; }
.eyebrow { margin: 0 0 20px; text-transform: uppercase; letter-spacing: .14em; font: 700 12px/1.4 "Manrope", sans-serif; }
.status-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #7ba800; box-shadow: 0 0 0 5px rgba(123,168,0,.12); }
h1, h2, h3 { font-family: "Manrope", sans-serif; }
.hero h1 { margin: 0; font-size: clamp(58px, 7.8vw, 108px); line-height: .9; letter-spacing: -.075em; }
.hero h1 em, .calculator-intro h2 em { font-family: Georgia, serif; font-weight: 400; color: var(--orange); }
.hero-lead { max-width: 590px; margin: 34px 0 0; color: var(--muted); font-size: 18px; line-height: 1.65; }
.hero-orbit { position: relative; min-height: 360px; }
.orbit-ring { position: absolute; inset: 8% 0 0 4%; border: 1px solid #aaada0; border-radius: 50%; transform: rotate(-12deg); }
.orbit-ring::after { content: ""; position: absolute; inset: 18%; border: 1px dashed #c8c9bd; border-radius: 50%; }
.orbit-badge { position: absolute; display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; box-shadow: var(--shadow); transform: rotate(8deg); }
.orbit-badge strong { font: 800 42px/1 "Manrope"; letter-spacing: -.06em; }
.orbit-badge span { margin-top: -22px; font-weight: 700; }
.badge-one { top: 15px; right: 24px; background: var(--lime); }
.badge-two { left: 24px; bottom: 5px; background: var(--blue); width: 96px; height: 96px; }
.badge-two strong { font-size: 32px; }
.orbit-word { position: absolute; inset: 0; display: grid; place-items: center; font: italic 42px/1 Georgia, serif; transform: rotate(-11deg); }

.people-search { position: relative; max-width: 920px; margin-top: 24px; padding: 15px; background: var(--white); border: 1px solid var(--ink); border-radius: 24px; box-shadow: 8px 8px 0 var(--ink); }
.people-search > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.search-row { display: flex; gap: 12px; }
.search-row input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 14px 18px; font: 600 22px/1.2 "Manrope"; outline: none; }
.search-row input::placeholder { color: #a5a89e; }
.search-row button, .calculator-card > button { border: 0; border-radius: 15px; background: var(--ink); color: white; padding: 0 26px; font-weight: 700; transition: transform .2s ease, background .2s ease; }
.search-row button:hover, .calculator-card > button:hover { transform: translateY(-2px); background: #33362e; }
.search-row button span { display: inline-block; margin-left: 14px; font-size: 22px; }
.people-search > p { margin: 11px 18px 0; color: var(--muted); font-size: 13px; }
.suggestions { position: absolute; z-index: 10; top: calc(100% + 10px); left: 0; right: 0; padding: 10px; background: var(--white); border: 1px solid var(--ink); border-radius: 18px; box-shadow: var(--shadow); }
.suggestions a { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; border-radius: 12px; }
.suggestions a:hover, .suggestions a:focus { background: var(--lime-soft); outline: none; }
.suggestions strong { font-family: "Manrope"; }
.suggestions span { color: var(--muted); font-size: 13px; }
.suggestions .suggestion-copy { display: grid; gap: 3px; color: var(--ink); }
.suggestions .suggestion-copy small { color: #64740c; font-size: 11px; font-weight: 750; }
.notice { max-width: 920px; margin-top: 24px; padding: 16px 20px; border-left: 5px solid var(--orange); background: #fff0ea; border-radius: 5px 16px 16px 5px; line-height: 1.55; }
.notice.success { background: #eff8ba; border-color: #789b00; }
.notice.setup { border-color: #6384b0; background: #e7f1ff; }

.people-section, .results-section { padding: 72px 0 110px; }
.results-section { padding-top: 10px; padding-bottom: 30px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 34px; }
.section-heading h2, .sources-section h2, .trust-copy h2, .story-card h2 { margin: 0; font-size: clamp(38px, 5vw, 64px); line-height: .96; letter-spacing: -.06em; }
.section-heading > p { max-width: 440px; margin: 0; color: var(--muted); line-height: 1.65; }
.people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.person-tile { min-height: 350px; display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); transition: transform .25s ease, box-shadow .25s ease; }
.person-tile:hover { transform: translateY(-7px) rotate(-.5deg); box-shadow: var(--shadow); }
.person-tile.accent { background: var(--lime-soft); border-color: #c3d55d; }
.tile-year { align-self: flex-start; padding: 7px 11px; border: 1px solid currentColor; border-radius: 99px; font-size: 12px; font-weight: 700; }
.person-tile h3 { margin: 70px 0 12px; font-size: 28px; line-height: 1.05; letter-spacing: -.04em; }
.person-tile p { margin: 0; color: var(--muted); line-height: 1.55; }
.person-tile > div { margin-top: auto; display: flex; align-items: baseline; padding-top: 28px; }
.person-tile div strong { font: 800 54px/1 "Manrope"; letter-spacing: -.07em; }
.person-tile div span { margin-left: 8px; font-weight: 700; }
.person-tile div b { margin-left: auto; font-size: 26px; }

.calculator-section { padding: 110px 0; background: var(--ink); color: var(--white); }
.calculator-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 80px; align-items: center; }
.calculator-intro h2 { margin: 0 0 30px; font-size: clamp(48px, 6vw, 78px); line-height: .94; letter-spacing: -.07em; }
.calculator-intro > p:not(.eyebrow) { color: #b9bcb3; line-height: 1.7; }
.weekday-chip { display: inline-flex; flex-direction: column; gap: 5px; margin-top: 35px; padding: 16px 22px; color: var(--ink); background: var(--lime); border-radius: 16px; transform: rotate(-2deg); }
.weekday-chip span { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.weekday-chip strong { font: 800 25px/1.1 "Manrope"; }
.calculator-card { padding: 30px; color: var(--ink); background: var(--white); border-radius: 30px; }
.date-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.date-fields label { font-size: 13px; font-weight: 700; }
.date-fields label > span, .date-fields small { color: var(--muted); font-weight: 400; }
.date-fields input { width: 100%; margin-top: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #f7f7f2; outline: none; }
.date-fields input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(23,25,20,.08); }
.date-fields small { display: block; margin: 6px 3px; }
.calculator-card > button { width: 100%; min-height: 52px; margin: 20px 0; }
.form-error { min-height: 20px; margin: -8px 0 10px; color: #b82f1e; font-size: 13px; }
.result-primary { display: flex; justify-content: space-between; align-items: end; gap: 30px; padding: 25px 0; border-top: 1px solid var(--line); }
.result-primary span { color: var(--muted); }
.result-primary strong { max-width: 70%; text-align: right; font: 800 25px/1.25 "Manrope"; }
.calendar-insights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.calendar-insights > div { position: relative; min-width: 0; padding: 17px 17px 17px 58px; border: 1px solid var(--line); border-radius: 16px; background: #f7f7f2; }
.calendar-insights > div:last-child { background: #eef0ff; }
.calendar-insights .insight-symbol { position: absolute; left: 17px; top: 19px; font-size: 26px; line-height: 1; }
.calendar-insights > div > span:not(.insight-symbol) { display: block; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.calendar-insights strong { display: block; margin-top: 4px; font: 800 15px/1.3 "Manrope"; }
.calendar-insights small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.metric-grid > div { min-width: 0; padding: 19px; background: #efefe7; border-radius: 16px; }
.metric-grid .orange { background: var(--orange); color: var(--white); }
.metric-grid strong { display: block; overflow: hidden; text-overflow: ellipsis; font: 800 25px/1.2 "Manrope"; }
.metric-grid span { color: inherit; opacity: .68; font-size: 12px; }

.trust-section { padding: 120px 0; display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; }
.trust-steps { border-top: 1px solid var(--line); }
.trust-steps article { display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.trust-steps article > span { color: var(--orange); font: 800 13px "Manrope"; }
.trust-steps h3 { margin: 0 0 8px; font-size: 21px; }
.trust-steps p { margin: 0; color: var(--muted); line-height: 1.6; }

.person-hero { padding: 48px 0 90px; }
.back-link { display: inline-block; margin-bottom: 48px; font-weight: 700; font-size: 14px; }
.back-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.person-layout { display: grid; grid-template-columns: 1.3fr .7fr; gap: 80px; align-items: end; }
.person-copy h1 { max-width: 750px; margin: 0 0 36px; font-size: clamp(56px, 7vw, 100px); line-height: .88; letter-spacing: -.075em; }
.age-lockup { display: flex; align-items: baseline; gap: 12px; margin-bottom: 25px; }
.age-lockup strong { font: 800 clamp(90px, 14vw, 180px)/.75 "Manrope"; letter-spacing: -.1em; }
.age-lockup span { font: 800 30px "Manrope"; }
.person-lead { max-width: 700px; color: var(--muted); font-size: 20px; line-height: 1.55; }
.date-facts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.date-facts > div { display: flex; flex-direction: column; gap: 4px; padding: 13px 17px; border: 1px solid var(--line); border-radius: 12px; }
.date-facts span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .09em; }
.portrait-card { position: relative; isolation: isolate; aspect-ratio: 4/5; overflow: hidden; border-radius: 38% 38% 25px 25px; background: var(--blue); box-shadow: 18px 18px 0 var(--lime); }
.portrait-card img { position: relative; z-index: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.portrait-card.no-image { display: grid; place-items: center; background: var(--lime-soft); }
.portrait-initials { font: 800 130px "Manrope"; opacity: .35; }
.portrait-stamp { position: absolute; z-index: 4; right: 18px; bottom: 18px; padding: 10px 14px; color: var(--ink); border: 1px solid rgba(23,25,20,.12); border-radius: 99px; background: rgba(255,254,250,.96); box-shadow: 0 8px 25px rgba(0,0,0,.24); backdrop-filter: blur(10px); font-weight: 800; }
.person-content { display: grid; grid-template-columns: 1.2fr .8fr; gap: 22px; padding-bottom: 110px; }
.story-card, .fact-card { padding: clamp(30px, 5vw, 60px); border-radius: var(--radius); background: var(--white); }
.story-card p:last-child { margin: 24px 0 0; color: var(--muted); font-size: 18px; line-height: 1.8; }
.facts-column { display: grid; gap: 22px; }
.fact-card { position: relative; padding: 32px; }
.fact-card.lime { background: var(--lime-soft); }
.fact-number { position: absolute; top: 25px; right: 28px; color: var(--muted); font-size: 12px; font-weight: 700; }
.fact-card h3 { margin: 40px 0 24px; font-size: 25px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags span { padding: 8px 11px; border: 1px solid rgba(23,25,20,.24); border-radius: 99px; font-size: 13px; }
.sources-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; padding: 100px 0; border-top: 1px solid var(--line); }
.sources-section > div > p:last-child { color: var(--muted); line-height: 1.7; }
.source-list { display: grid; gap: 10px; }
.source-list a { display: grid; gap: 5px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); transition: transform .2s ease; }
.source-list a:hover { transform: translateX(6px); }
.source-list span { color: #5f7f00; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.source-list small { color: var(--muted); }

footer { padding: 48px 0; color: var(--white); background: #0d0f0b; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.footer-inner p { color: #a5a89e; }
.footer-inner > div { display: flex; gap: 24px; font-size: 13px; color: #a5a89e; }

@media (max-width: 900px) {
    .header-inner nav a:not(.nav-pill) { display: none; }
    .hero-grid, .calculator-grid, .trust-section, .person-layout, .person-content, .sources-section { grid-template-columns: 1fr; }
    .hero-orbit { display: none; }
    .hero-grid { min-height: auto; }
    .people-grid { grid-template-columns: 1fr 1fr; }
    .calculator-grid, .trust-section, .person-layout, .sources-section { gap: 50px; }
    .portrait-card { max-width: 440px; width: 80%; margin-inline: auto; }
}

@media (max-width: 620px) {
    .shell { width: min(100% - 24px, 1180px); }
    .site-header .header-inner nav { display: none; }
    .header-inner { height: 66px; }
    .hero { padding: 52px 0 58px; }
    .hero h1 { font-size: 55px; }
    .hero-lead { font-size: 16px; }
    .search-row { flex-direction: column; }
    .search-row input { padding: 12px 10px; font-size: 18px; }
    .search-row button { min-height: 52px; }
    .people-search { padding: 12px; box-shadow: 5px 5px 0 var(--ink); }
    .section-heading { align-items: flex-start; flex-direction: column; }
    .people-grid { grid-template-columns: 1fr; }
    .person-tile { min-height: 310px; }
    .calculator-section { padding: 72px 0; }
    .calculator-card { padding: 18px; border-radius: 22px; }
    .date-fields { grid-template-columns: 1fr; }
    .result-primary { align-items: flex-start; flex-direction: column; gap: 8px; }
    .result-primary strong { max-width: 100%; text-align: left; }
    .metric-grid strong { font-size: 20px; }
    .trust-section { padding: 80px 0; }
    .footer-inner { align-items: flex-start; flex-direction: column; }
    .person-hero { padding-top: 30px; }
    .person-copy h1 { font-size: 53px; }
    .age-lockup strong { font-size: 110px; }
    .portrait-card { width: calc(100% - 20px); }
    .person-content, .sources-section { padding-bottom: 70px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; }
}

/* === Tarot — rozkład czterech kart === */
.tarot-hero {
    position: relative;
    overflow: hidden;
    color: #f8f4e7;
    background:
        radial-gradient(circle at 78% 28%, rgba(211, 184, 105, .18), transparent 21rem),
        radial-gradient(circle at 12% 100%, rgba(109, 87, 167, .3), transparent 30rem),
        #171526;
}
.tarot-hero::before { content: ""; position: absolute; inset: 0; opacity: .18; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to right, transparent, #000 45%, #000); }
.tarot-hero-grid { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; min-height: 610px; padding-block: 85px; }
.tarot-hero-copy { position: relative; z-index: 2; max-width: 720px; }
.tarot-hero-copy .eyebrow { color: #d8c47f; }
.tarot-spark { margin-right: 8px; font-size: 19px; }
.tarot-hero h1 { max-width: 850px; margin: 0; font-size: clamp(56px, 6.5vw, 92px); line-height: .94; letter-spacing: -.07em; }
.tarot-hero h1 em { display: inline-block; color: #d8c47f; font-family: Georgia, serif; font-weight: 400; }
.tarot-hero-copy > p:not(.eyebrow) { max-width: 650px; margin: 30px 0 0; color: #c5c1d1; font-size: 18px; line-height: 1.75; }
.tarot-hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.tarot-hero-badges span { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; color: #ece7f5; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(255,255,255,.05); font-size: 13px; }
.tarot-hero-badges i { color: #d8c47f; }
.tarot-orbit { position: relative; min-height: 430px; }
.tarot-orbit-ring { position: absolute; width: 380px; height: 380px; top: 25px; right: 10px; border: 1px solid rgba(216,196,127,.35); border-radius: 50%; }
.tarot-orbit-ring::before, .tarot-orbit-ring::after { content: ""; position: absolute; border: 1px solid rgba(216,196,127,.2); border-radius: 50%; }
.tarot-orbit-ring::before { inset: 44px; }
.tarot-orbit-ring::after { inset: 91px; border-style: dashed; }
.tarot-moon { position: absolute; top: 146px; right: 137px; color: #e7cf7c; font: 110px/1 Georgia, serif; text-shadow: 0 0 45px rgba(231,207,124,.25); }
.tarot-star { position: absolute; color: #d8c47f; animation: tarotTwinkle 2.7s ease-in-out infinite alternate; }
.star-one { top: 40px; right: 80px; font-size: 27px; }.star-two { top: 160px; left: 20px; font-size: 20px; animation-delay: .5s; }.star-three { bottom: 30px; right: 180px; font-size: 24px; animation-delay: 1s; }
.tarot-card-preview { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 150px; aspect-ratio: .59; border: 1px solid rgba(216,196,127,.7); border-radius: 14px; box-shadow: 0 26px 65px rgba(0,0,0,.4); }
.preview-back { left: 55px; bottom: 18px; transform: rotate(-13deg); color: #d8c47f; background: #171421 url("tarot-cards/back.webp") center/cover no-repeat; }
.preview-back::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(216,196,127,.4); border-radius: 9px; }
.preview-back b, .preview-back span { display: none; }
.preview-front { right: 10px; bottom: 1px; overflow: hidden; transform: rotate(9deg); color: #fff; background: #1b1728; }
.preview-front::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(9,7,13,.5),transparent 25%,transparent 61%,rgba(9,7,13,.78)); }.preview-front img { width:100%; height:100%; object-fit:cover; }.preview-front small { position: absolute; z-index:1; top: 15px; font-weight: 800; text-shadow:0 1px 6px #000; }.preview-front strong { position: absolute; z-index:1; bottom: 17px; font: 800 14px "Manrope"; text-shadow:0 1px 7px #000; }

.tarot-reading-section { padding: 95px 0 120px; background: #f3f0e8; }
.tarot-form, .tarot-draw, .tarot-interpretation { border: 1px solid #d8d1c4; border-radius: 30px; background: #fffdfa; box-shadow: 0 25px 70px rgba(38,31,51,.08); }
.tarot-form { padding: clamp(24px, 5vw, 55px); }
.tarot-form-heading, .tarot-draw-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.tarot-form-heading > div, .tarot-draw-heading > div { position: relative; }
.tarot-step { display: inline-grid; place-items: center; min-width: 40px; height: 29px; margin-bottom: 15px; color: #fff; border-radius: 999px; background: #332b4d; font: 700 11px "Manrope"; letter-spacing: .1em; }
.tarot-form-heading .eyebrow, .tarot-draw-heading .eyebrow, .tarot-interpretation .eyebrow { margin-bottom: 9px; color: #74688e; }
.tarot-form h2, .tarot-draw h2, .tarot-interpretation h2 { margin: 0; font-size: clamp(35px, 4vw, 52px); line-height: 1; letter-spacing: -.055em; }
.tarot-form-heading > p, .tarot-draw-heading > p { max-width: 470px; margin: 0; color: #716d76; line-height: 1.65; }
.tarot-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 40px; }
.tarot-fields label { position: relative; display: block; }
.tarot-fields label > span { display: block; margin: 0 0 9px 3px; color: #312c3e; font-size: 13px; font-weight: 700; }
.tarot-fields label > span i { width: 20px; color: #756698; }
.tarot-fields input, .tarot-fields textarea { width: 100%; border: 1px solid #d8d1c4; border-radius: 14px; color: #201c2b; background: #f8f6f0; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.tarot-fields input { min-height: 57px; padding: 14px 16px; }
.tarot-fields textarea { display: block; min-height: 130px; padding: 16px; resize: vertical; }
.tarot-fields input:focus, .tarot-fields textarea:focus { border-color: #756698; background: #fff; box-shadow: 0 0 0 4px rgba(117,102,152,.11); }
.tarot-question-field { grid-column: 1 / -1; }
.tarot-question-field small { position: absolute; right: 14px; bottom: 10px; color: #8b8790; font-size: 11px; }
.tarot-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 24px; }
.tarot-submit-row p { max-width: 500px; margin: 0; color: #77727d; font-size: 13px; }.tarot-submit-row p i { margin-right: 6px; color: #6e8b17; }
.tarot-submit-row button { min-width: 230px; min-height: 58px; padding: 0 24px; color: #fff; border: 0; border-radius: 15px; background: #28213d; box-shadow: 0 12px 28px rgba(40,33,61,.2); font-weight: 800; transition: transform .2s, background .2s; }
.tarot-submit-row button:hover { transform: translateY(-2px); background: #443866; }.tarot-submit-row button i { margin-left: 11px; color: #e5cd7d; }
.tarot-submit-row button:disabled { cursor: wait; opacity: .72; transform: none; }
.tarot-submit-row button.is-loading i { animation: tarotSpin 1.5s linear infinite; }
.tarot-error { min-height: 20px; margin: 16px 0 -15px; color: #b32d2d; font-size: 13px; }

.tarot-draw { margin-top: 30px; padding: clamp(24px, 5vw, 55px); color: #f8f4e7; border-color: #2f2944; background: #191626; opacity: 0; transform: translateY(15px); transition: opacity .45s, transform .45s; }
.tarot-draw.is-visible { opacity: 1; transform: none; }
.tarot-draw .tarot-step { color: #28213d; background: #dac678; }
.tarot-draw-heading .eyebrow { color: #d8c47f; }.tarot-draw-heading > p { color: #aaa5b6; }
.tarot-deck-picker { position: relative; margin-top: 40px; padding-top: 30px; border-top: 1px solid rgba(216,196,127,.22); }
.tarot-deck-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.tarot-deck-status strong, .tarot-deck-status span { display: block; }.tarot-deck-status strong { font: 800 18px/1.3 "Manrope"; }.tarot-deck-status span { margin-top: 5px; color: #aaa5b6; font-size: 13px; }
.tarot-deck-random, .tarot-deck-confirm { min-height: 46px; padding: 0 18px; border-radius: 12px; font-weight: 800; transition: transform .2s, opacity .2s, background .2s; }
.tarot-deck-random { position: relative; z-index: 120; display: flex; align-items: center; justify-content: center; width: max-content; margin: -48px auto 18px; color: #28213d; border: 0; background: #dac678; box-shadow: 0 13px 28px rgba(0,0,0,.3); }.tarot-deck-picker.has-manual-selection .tarot-deck-random { position: absolute; top: 0; right: 0; margin: 0; }.tarot-deck-random:hover, .tarot-deck-confirm:hover { transform: translateY(-2px); }.tarot-deck-random i { margin-right: 7px; }
.tarot-deck-scroll { overflow: visible; width: 100%; margin: 0; padding: 0; }
.tarot-full-deck { --tarot-deck-card-width: clamp(74px, 6.6vw, 80px); display: flex; align-items: flex-start; justify-content: flex-start; width: 100%; min-width: 0; min-height: 238px; padding: 28px 0 70px; }
.tarot-deck-card { position: relative; z-index: var(--deck-index); flex: 0 0 var(--tarot-deck-card-width); width: var(--tarot-deck-card-width); aspect-ratio: .64; padding: 0; border: 1px solid #756646; border-radius: 9px; background: #171421; perspective: 650px; transform: translateY(var(--arc-y)) rotate(var(--arc-angle)); transform-origin: 50% 120%; box-shadow: -8px 5px 15px rgba(0,0,0,.48), -2px 0 3px rgba(233,211,135,.18); transition: border-color .2s, transform .24s, box-shadow .2s; }
.tarot-deck-card + .tarot-deck-card { margin-left: calc((100% - var(--tarot-deck-card-width)) / 21 - var(--tarot-deck-card-width)); }
.tarot-deck-card:hover, .tarot-deck-card:focus-visible { z-index: 100; transform: translateY(calc(var(--arc-y) - 18px)) rotate(var(--arc-angle)) scale(1.075); border-color: #ead88d; outline: 2px solid #ead88d; outline-offset: 2px; box-shadow: 0 22px 42px rgba(0,0,0,.55); }
.tarot-deck-card-back, .tarot-deck-card-face { position: absolute; inset: 0; overflow: hidden; border-radius: 8px; backface-visibility: hidden; transition: transform .48s cubic-bezier(.2,.72,.22,1); }
.tarot-deck-card-back { background: #171421 url("tarot-cards/back.webp") center/cover no-repeat; transform: rotateY(0); }
.tarot-deck-card-face { background: #241f31; transform: rotateY(180deg); }.tarot-deck-card-face img { width: 100%; height: 100%; object-fit: cover; }
.tarot-deck-card.is-selected { pointer-events: none; opacity: .08; box-shadow: none; }.tarot-deck-card.is-selected .tarot-deck-card-back { transform: none; }.tarot-deck-card.is-selected .tarot-deck-card-face { transform: rotateY(180deg); }
.tarot-deck-card.is-selected:disabled { cursor: default; }
.tarot-deck-order { position: absolute; z-index: 3; top: -7px; right: -7px; display: none; place-items: center; width: 25px; height: 25px; color: #28213d; border: 2px solid #191626; border-radius: 50%; background: #f1dc8c; font: 900 11px "Manrope"; }
.tarot-selected-tray { margin-top: -28px; text-align: center; }.tarot-selected-tray[hidden] { display: none; }.tarot-selected-tray > small { display: block; margin-bottom: 10px; color: #aaa5b6; font-size: 9px; font-weight: 800; letter-spacing: .14em; }.tarot-selected-tray > div { display: flex; align-items: flex-start; justify-content: center; min-height: 112px; }.tarot-selected-card { position: relative; z-index: 2; flex: 0 0 70px; width: 70px; aspect-ratio: .64; overflow: visible; border: 1px solid #f1dc8c; border-radius: 9px; background: #241f31; box-shadow: -8px 8px 20px rgba(0,0,0,.45), 0 0 0 1px rgba(241,220,140,.25); transform-origin: center; will-change: transform, opacity; }.tarot-selected-card.is-arriving { z-index: 20; }.tarot-selected-card + .tarot-selected-card { margin-left: 12px; }.tarot-selected-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }.tarot-selected-card b { position: absolute; z-index: 2; top: -8px; right: -8px; display: grid; place-items: center; width: 25px; height: 25px; color: #28213d; border: 2px solid #191626; border-radius: 50%; background: #f1dc8c; font: 900 11px "Manrope"; }
.tarot-deck-error { min-height: 20px; margin: 16px 0 0; color: #ffaaa4; font-size: 13px; }
.tarot-deck-error.is-safety { padding: 17px 19px; color: #fff7d5; border: 1px solid #d8c47f; border-radius: 14px; background: rgba(216,196,127,.12); font-size: 14px; line-height: 1.65; }
.tarot-deck-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }.tarot-deck-confirm { color: #28213d; border: 0; background: #dac678; }.tarot-deck-confirm i { margin-left: 8px; }.tarot-deck-actions button:disabled, .tarot-deck-random:disabled { cursor: not-allowed; opacity: .42; transform: none; }
.tarot-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 45px; }
.tarot-card-slot { min-width: 0; perspective: 1000px; }
.tarot-card { position: relative; width: 100%; aspect-ratio: .64; overflow: hidden; border: 1px solid #9b8652; border-radius: 16px; }
.tarot-card-back { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #d8c47f; background: #171421 url("tarot-cards/back.webp") center/cover no-repeat; }
.tarot-card-back::before, .tarot-card-face::before { content: ""; position: absolute; inset: 8px; pointer-events: none; border: 1px solid rgba(216,196,127,.5); border-radius: 10px; }
.tarot-card-back span, .tarot-card-back b, .tarot-card-back i { display: none; }
.tarot-card-slot.is-dealing .tarot-card-back { animation: tarotDeal .72s cubic-bezier(.22,.78,.22,1) both; animation-delay: calc(var(--deal-index) * 110ms); }
.tarot-card-face { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 14px; color: #fffdf4; background: #252033; cursor: pointer; transform: rotateY(90deg); box-shadow: 0 18px 45px rgba(0,0,0,.28); transition: transform .25s, box-shadow .25s; }
.tarot-card-face::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10,8,15,.64), transparent 24%, transparent 57%, rgba(10,8,15,.84)); }
.tarot-card-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tarot-card-slot.is-revealed .tarot-card-face { animation: tarotReveal .7s cubic-bezier(.2,.75,.25,1) forwards; }
.tarot-card-face:hover, .tarot-card-face:focus-visible { transform: translateY(-7px) rotate(.7deg); box-shadow: 0 27px 54px rgba(0,0,0,.4); outline: 2px solid #f2dc8e; outline-offset: 3px; }
.tarot-card-face.is-reversed .tarot-card-art { transform: rotate(180deg) scale(1.015); }
.tarot-card-roman { position: absolute; z-index: 2; top: 18px; font: 800 12px "Manrope"; letter-spacing: .08em; text-shadow: 0 1px 7px #000; }
.tarot-card-name { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 43px; text-align: center; font: 800 17px/1.15 "Manrope"; text-shadow: 0 2px 9px #000; }
.tarot-card-state { position: absolute; z-index: 2; bottom: 20px; color: #f1df9b; font: normal 10px/1 "DM Sans"; text-transform: uppercase; letter-spacing: .12em; text-shadow: 0 1px 7px #000; }
.tarot-position-label { display: flex; gap: 10px; margin-top: 15px; color: #f3eff9; }.tarot-position-label > span { flex: 0 0 auto; color: #d8c47f; font: 800 11px "Manrope"; }.tarot-position-label strong, .tarot-position-label small { display: block; }.tarot-position-label strong { font: 700 13px/1.25 "Manrope"; }.tarot-position-label small { margin-top: 4px; color: #9f9aa9; font-size: 10px; line-height: 1.35; }

.tarot-interpretation { margin-top: 30px; padding: clamp(26px, 5vw, 60px); opacity: 0; transform: translateY(18px); transition: opacity .5s, transform .5s; scroll-margin-top: 110px; }
.tarot-interpretation.is-visible { opacity: 1; transform: none; }
.tarot-interpretation-heading { max-width: 930px; }
.tarot-reading-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }.tarot-reading-meta span { padding: 8px 12px; border: 1px solid #d8d1c4; border-radius: 999px; color: #5e5866; font-size: 12px; }.tarot-reading-meta b { margin-right: 6px; color: #756698; }
.tarot-opening { max-width: 960px; margin: 35px 0; color: #5f5a64; font-size: 18px; line-height: 1.75; }
.tarot-card-meanings { border-top: 1px solid #ded8cd; }
.tarot-card-meanings article { display: grid; grid-template-columns: 55px 1fr; gap: 18px; padding: 25px 0; border-bottom: 1px solid #ded8cd; }.tarot-card-meanings article > span { color: #806e3d; font: 800 12px "Manrope"; }.tarot-card-meanings h3 { margin: 0 0 8px; font-size: 19px; }.tarot-card-meanings p { margin: 0; color: #66616a; line-height: 1.65; }
.tarot-synthesis { display: grid; grid-template-columns: 70px 1fr; gap: 20px; margin-top: 35px; padding: 28px; color: #f7f2e5; border-radius: 20px; background: #28213d; }.tarot-synthesis > span { display: grid; place-items: center; width: 56px; height: 56px; color: #28213d; border-radius: 50%; background: #d8c47f; font-size: 26px; }.tarot-synthesis small { color: #d8c47f; font-weight: 800; letter-spacing: .12em; }.tarot-synthesis p { margin: 8px 0 0; color: #ded9e6; line-height: 1.7; }
.tarot-disclaimer { margin: 22px 0 0; color: #858088; font-size: 12px; line-height: 1.6; }
.tarot-again { margin-top: 25px; padding: 12px 17px; color: #28213d; border: 1px solid #28213d; border-radius: 12px; background: transparent; font-weight: 700; }.tarot-again:hover { color: #fff; background: #28213d; }.tarot-again i { margin-right: 7px; }

.tarot-modal .modal-dialog { max-width: 780px; }.tarot-modal .modal-content { position: relative; overflow: hidden; border: 1px solid #4e4468; border-radius: 26px; color: #eee9f4; background: #1b1729; box-shadow: 0 35px 100px rgba(0,0,0,.45); }.tarot-modal .modal-body { display: grid; grid-template-columns: 230px 1fr; gap: 34px; padding: 42px; }.tarot-modal-close { position: absolute; z-index: 2; top: 15px; right: 15px; display: grid; place-items: center; width: 38px; height: 38px; color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: rgba(255,255,255,.06); }.tarot-modal-close:hover { background: rgba(255,255,255,.15); }
.tarot-modal-card { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: .64; overflow: hidden; color: #fff; border: 1px solid #d8c47f; border-radius: 15px; background: #201b2d; }.tarot-modal-card::before { content: ""; position: absolute; z-index: 2; inset: 8px; border: 1px solid rgba(245,220,139,.55); border-radius: 9px; }.tarot-modal-art { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }.tarot-modal-card small { position: absolute; z-index: 3; top: 18px; font-weight: 800; text-shadow: 0 1px 7px #000; }.tarot-modal-card span { display: none; }.tarot-modal-card.is-reversed .tarot-modal-art { transform: rotate(180deg) scale(1.015); }
.tarot-modal-copy .eyebrow { margin: 5px 0 8px; color: #d8c47f; }.tarot-modal-copy h2 { margin: 0 0 10px; font-size: 42px; letter-spacing: -.05em; }.tarot-orientation { display: inline-block; padding: 6px 9px; color: #28213d; border-radius: 999px; background: #d8c47f; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }.tarot-modal-copy > p { margin: 13px 0 22px; color: #aaa4b5; font-style: italic; }.tarot-modal-copy > div { margin-top: 17px; }.tarot-modal-copy div small { color: #d8c47f; font-size: 10px; font-weight: 800; letter-spacing: .1em; }.tarot-modal-copy div p { margin: 5px 0 0; color: #d4cfda; line-height: 1.55; }

@keyframes tarotTwinkle { from { opacity: .35; transform: scale(.82) rotate(-8deg); } to { opacity: 1; transform: scale(1.12) rotate(8deg); } }
@keyframes tarotDeal { from { opacity: 0; transform: translate(120%, -35%) rotate(16deg) scale(.82); } to { opacity: 1; transform: none; } }
@keyframes tarotReveal { 0% { transform: rotateY(90deg) scale(.94); } 100% { transform: rotateY(0) scale(1); } }
@keyframes tarotSpin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
    .tarot-hero-grid { grid-template-columns: 1fr; min-height: auto; }.tarot-orbit { display: none; }
    .tarot-form-heading, .tarot-draw-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
    .tarot-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; }
    .tarot-full-deck { --tarot-deck-card-width: clamp(68px, 8.2vw, 74px); min-height: 218px; padding-block: 26px 62px; }
    .tarot-modal .modal-body { grid-template-columns: 180px 1fr; padding: 35px; }
}

@media (max-width: 620px) {
    .tarot-hero-grid { padding-block: 60px; }.tarot-hero h1 { font-size: 50px; }.tarot-hero-copy > p:not(.eyebrow) { font-size: 16px; }
    .tarot-reading-section { padding: 45px 0 75px; }.tarot-form, .tarot-draw, .tarot-interpretation { border-radius: 22px; }
    .tarot-fields { grid-template-columns: 1fr; margin-top: 30px; }.tarot-question-field { grid-column: auto; }
    .tarot-submit-row { align-items: stretch; flex-direction: column; }.tarot-submit-row button { width: 100%; }
    .tarot-deck-picker { margin-top: 28px; padding-top: 23px; }.tarot-deck-toolbar { align-items: stretch; flex-direction: column; gap: 15px; }.tarot-deck-random { max-width: calc(100% - 16px); margin-top: -44px; }.tarot-deck-picker.has-manual-selection .tarot-deck-random { top: -1px; right: 0; min-width: 0; min-height: 42px; padding-inline: 13px; font-size: 11px; }.tarot-deck-scroll { width: 100%; margin: 0; }.tarot-full-deck { --tarot-deck-card-width: clamp(58px, 10vw, 62px); min-height: 190px; padding: 24px 0 52px; }.tarot-deck-card { border-radius: 7px; box-shadow: -7px 4px 13px rgba(0,0,0,.5), -2px 0 3px rgba(233,211,135,.16); }.tarot-selected-tray { margin-top: -34px; }.tarot-selected-card { flex-basis: 58px; width: 58px; }.tarot-selected-card + .tarot-selected-card { margin-left: 8px; }.tarot-deck-actions { flex-direction: column-reverse; }.tarot-deck-actions button { width: 100%; }
    .tarot-cards { gap: 24px 10px; }.tarot-card { border-radius: 12px; }.tarot-card-symbol { font-size: 53px; }.tarot-card-name { bottom: 38px; font-size: 13px; }.tarot-card-state { bottom: 17px; font-size: 8px; }.tarot-card-roman { top: 15px; font-size: 10px; }.tarot-position-label { gap: 6px; }.tarot-position-label small { display: none; }
    .tarot-card-meanings article { grid-template-columns: 35px 1fr; gap: 10px; }.tarot-synthesis { grid-template-columns: 1fr; padding: 22px; }.tarot-synthesis > span { width: 44px; height: 44px; }
    .tarot-modal .modal-dialog { margin: 10px; }.tarot-modal .modal-body { grid-template-columns: 1fr; gap: 22px; padding: 48px 24px 25px; }.tarot-modal-card { width: 125px; margin: 0 auto; }.tarot-modal-card span { font-size: 55px; }.tarot-modal-copy h2 { font-size: 34px; }.tarot-modal-copy .eyebrow { text-align: center; }
}

/* === Professional UI refresh — Bootstrap + ile.lat design system === */
body {
    --bs-body-font-family: "DM Sans", system-ui, sans-serif;
    --bs-body-color: var(--ink);
    --bs-body-bg: #f4f6f0;
    background:
        radial-gradient(circle at 10% 5%, rgba(223, 242, 109, .18), transparent 24rem),
        #f4f6f0;
}

.site-header {
    background: rgba(250, 251, 247, .9);
    border-color: rgba(23, 25, 20, .08);
    box-shadow: 0 8px 35px rgba(19, 24, 15, .05);
}
.site-header .navbar { min-height: 82px; padding: 10px 0; }
.site-header .navbar > .shell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.site-header .navbar-brand { margin: 0; padding: 0; }
.brand-dot { color: #9fbd00; }
.site-header .navbar-toggler {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(23, 25, 20, .15);
    border-radius: 13px;
    box-shadow: none;
}
.site-header .navbar-nav { gap: 5px; }
.site-header .nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px !important;
    color: #4f554a;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
}
.site-header .nav-link i { color: #929988; font-size: 13px; }
.site-header .nav-link:hover,
.site-header .nav-link:focus { color: var(--ink); background: #edf1e5; }
.site-header .nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 12px 18px;
    color: #fff;
    background: var(--ink);
    border-radius: 13px;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 8px 22px rgba(23, 25, 20, .16);
}
.site-header .nav-cta:hover { color: var(--lime); transform: translateY(-1px); }

.hero {
    position: relative;
    isolation: isolate;
    margin-top: 34px;
    padding: clamp(46px, 7vw, 88px);
    overflow: visible;
    color: #fff;
    background:
        radial-gradient(circle at 85% 15%, rgba(223, 242, 109, .17), transparent 24%),
        radial-gradient(circle at 70% 100%, rgba(185, 215, 255, .13), transparent 28%),
        #151812;
    border-radius: 42px;
    box-shadow: 0 35px 100px rgba(23, 25, 20, .18);
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .18;
    border-radius: inherit;
    background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: linear-gradient(to right, transparent 10%, black 70%);
}
.hero .eyebrow { color: var(--lime); }
.hero .status-dot { background: var(--lime); box-shadow: 0 0 0 6px rgba(223,242,109,.12); }
.hero h1 { max-width: 760px; font-size: clamp(57px, 7.4vw, 104px); }
.hero h1 em { color: var(--lime); }
.hero-lead { color: #bec4b7; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 28px; color: #daddd4; font-size: 13px; font-weight: 600; }
.hero-proof span { display: inline-flex; align-items: center; gap: 8px; }
.hero-proof i { color: var(--lime); }
.hero-orbit { min-height: 390px; }
.hero .orbit-ring { border-color: rgba(255,255,255,.28); }
.hero .orbit-ring::after { border-color: rgba(255,255,255,.18); }
.hero .orbit-word { color: white; }
.verified-float {
    position: absolute;
    right: 35px;
    bottom: 15px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 15px;
    color: var(--ink);
    background: #fff;
    border-radius: 13px;
    box-shadow: 0 14px 35px rgba(0,0,0,.25);
    font-size: 12px;
    font-weight: 800;
    transform: rotate(-2deg);
}
.verified-float i { color: #7c9f00; }
.people-search {
    z-index: 4;
    max-width: 980px;
    margin: 45px 0 -125px;
    padding: 12px;
    border: 0;
    border-radius: 21px;
    box-shadow: 0 28px 65px rgba(0,0,0,.28);
}
.search-row { align-items: center; }
.search-icon { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; color: #76806d; background: #eef1e9; border-radius: 13px; }
.search-row input { padding-left: 5px; font-size: 19px; }
.search-row button { min-height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 13px; }
.people-search > p { display: flex; align-items: center; gap: 7px; margin-inline: 7px; }
.people-search > p i { color: #809f12; }
.country-filter-row { display: flex; align-items: center; gap: 10px; margin: 10px 7px 0; padding-top: 10px; border-top: 1px solid #e8eae4; }
.country-filter-row label { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; color: #656c60; font-size: 12px; font-weight: 800; }
.country-filter-row label i { color: #7f9f10; }
.country-filter-row select { min-width: 0; max-width: 430px; height: 42px; padding: 0 38px 0 12px; color: var(--ink); background: #f2f3ed; border: 1px solid transparent; border-radius: 11px; outline: none; font: 700 14px "Manrope", sans-serif; }
.country-filter-row select:focus { border-color: #8ca51c; box-shadow: 0 0 0 3px rgba(223,242,109,.35); }
.country-filter-row > a { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: #6f766a; font-size: 12px; font-weight: 750; }

.birth-finder { padding: 155px 0 35px; }
.results-section + .birth-finder { padding-top: 55px; }
.birth-finder-card {
    position: relative;
    overflow: hidden;
    padding: 48px;
    color: #fff;
    background: linear-gradient(135deg, #171a14 0%, #2b3123 100%);
    border-radius: 34px;
    box-shadow: 0 28px 70px rgba(23,25,20,.16);
}
.birth-finder-card::after {
    content: "";
    position: absolute;
    right: -90px;
    top: -115px;
    width: 310px;
    height: 310px;
    border: 65px solid rgba(223,242,109,.11);
    border-radius: 50%;
    pointer-events: none;
}
.birth-finder-heading { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 70px; }
.birth-finder-heading h2 { margin: 0; font-size: clamp(42px, 5vw, 68px); line-height: .95; letter-spacing: -.065em; }
.birth-finder-heading h2 em { color: var(--lime); font-family: Georgia, serif; font-weight: 400; }
.birth-finder-heading > p { max-width: 470px; margin: 0 0 4px; color: #bcc2b5; line-height: 1.7; }
.birth-finder-heading .eyebrow { color: var(--lime); }
.birth-finder-heading .eyebrow i { margin-right: 7px; }
.birth-country-filter { position:relative; z-index:1; display:grid; grid-template-columns:auto minmax(220px,430px) 1fr; align-items:center; gap:12px; margin-top:34px; }.birth-country-filter label { display:inline-flex; align-items:center; gap:8px; color:#d5d9d0; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }.birth-country-filter label i { color:var(--lime); }.birth-country-filter select { width:100%; height:48px; padding:0 42px 0 14px; color:var(--ink); border:1px solid rgba(255,255,255,.12); border-radius:13px; background:#fff; outline:none; font:700 14px "Manrope",sans-serif; }.birth-country-filter select:focus { border-color:var(--lime); box-shadow:0 0 0 4px rgba(223,242,109,.15); }.birth-country-filter a { display:inline-flex; align-items:center; gap:7px; width:max-content; color:#c6cbc0; font-size:12px; font-weight:750; }.birth-country-filter a:hover { color:var(--lime); }
.birth-filter-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 18px; margin-top: 42px; }
.birth-filter-form { padding: 17px; color: var(--ink); background: #fff; border-radius: 20px; }
.birth-filter-form label { display: block; margin: 0 4px 10px; color: #62695c; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.birth-filter-form label i { margin-right: 7px; color: #82a20f; }
.birth-filter-form > div { display: grid; grid-template-columns: 1fr 52px; gap: 10px; }
.birth-filter-form input { min-width: 0; width: 100%; height: 52px; padding: 0 15px; color: var(--ink); background: #f2f3ed; border: 1px solid transparent; border-radius: 13px; outline: none; font: 750 18px "Manrope", sans-serif; }
.birth-filter-form input:focus { border-color: #8ca51c; box-shadow: 0 0 0 3px rgba(223,242,109,.35); }
.birth-filter-form button { display: grid; place-items: center; border: 0; color: var(--ink); background: var(--lime); border-radius: 13px; font-size: 17px; transition: transform .2s ease, background .2s ease; }
.birth-filter-form button:hover { transform: translateY(-2px); background: #edff87; }
.birth-filter-or { align-self: center; display: grid; place-items: center; width: 48px; height: 48px; margin-top: 23px; color: #aeb5a6; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.birth-notice { position: relative; z-index: 1; max-width: none; margin-bottom: 0; color: var(--ink); }
.birth-results-section { padding-top: 35px; }
.birth-finder + .people-section, .birth-results-section + .people-section { padding-top: 65px; }
.birth-results-section .tile-year { font-size: 11px; }
.empty-birth-results { padding: 55px 25px; text-align: center; background: #fff; border: 1px dashed #bfc1b6; border-radius: 25px; }
.empty-birth-results > i { color: var(--orange); font-size: 38px; }
.empty-birth-results h3 { margin: 17px 0 7px; font-size: 24px; }
.empty-birth-results p { margin: 0; color: var(--muted); }
.birth-pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; margin-top: 34px; }
.birth-pagination a { display: inline-flex; align-items: center; gap: 9px; width: max-content; padding: 12px 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; font-weight: 750; }
.birth-pagination a:last-child { justify-self: end; }
.birth-pagination a:hover { background: var(--lime-soft); border-color: #c8d66f; }
.birth-pagination strong { color: var(--muted); font-size: 13px; }

.people-section { padding-top: 155px; }
.results-section + .people-section { padding-top: 70px; }
.section-heading h2 { color: #151812; }
.person-tile {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(23, 25, 20, .09);
    box-shadow: 0 10px 35px rgba(22, 29, 18, .05);
}
.person-tile::before {
    content: "";
    position: absolute;
    top: -90px;
    right: -90px;
    width: 180px;
    height: 180px;
    background: var(--lime-soft);
    border-radius: 50%;
    opacity: .55;
    transition: transform .35s ease;
}
.person-tile:hover::before { transform: scale(1.2); }
.person-tile.accent::before { background: #fff; }
.person-tile > .tile-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    border: 0;
    color: #8e9585;
}
.person-tile > .tile-top > i { font-size: 13px; }
.person-tile .tile-year { display: inline-flex; align-items: center; gap: 7px; }
.person-tile > .tile-age {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    margin-top: auto;
    padding-top: 26px;
}
.person-tile h3, .person-tile p { position: relative; z-index: 1; }
.person-tile > p {
    display: -webkit-box;
    min-height: 3.1em;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.person-tile .tile-country { position: relative; z-index: 1; display: inline-flex; align-items: flex-start; gap: 7px; width: fit-content; margin-top: 14px; padding: 7px 10px; color: #536b08; background: var(--lime-soft); border-radius: 99px; font-size: 12px; font-weight: 750; line-height: 1.35; }
.person-tile .tile-country i { margin-top: 2px; }

.popularity-section .section-heading .eyebrow i { margin-right: 7px; color: var(--orange); }
.popularity-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 28px;
    padding: 7px;
    background: #e7eae1;
    border: 1px solid rgba(23,25,20,.07);
    border-radius: 19px;
}
.popularity-tabs .nav-link {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 15px;
    color: #62685d;
    border: 0;
    border-radius: 13px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}
.popularity-tabs .nav-link i { color: #8d9487; }
.popularity-tabs .nav-link:hover { color: var(--ink); background: rgba(255,255,255,.55); }
.popularity-tabs .nav-link.active {
    color: var(--ink);
    background: #fff;
    box-shadow: 0 9px 24px rgba(23,25,20,.09);
}
.popularity-tabs .nav-link.active i { color: var(--orange); }
.popularity-content { min-height: 350px; }
.tile-views {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px !important;
    color: #6f765f;
    font-size: 12px;
    font-weight: 800 !important;
    text-align: right;
}
.tile-views i { color: var(--orange); }
.popularity-empty {
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 45px 25px;
    text-align: center;
    background: rgba(255,255,255,.62);
    border: 1px dashed #bdc1b4;
    border-radius: 27px;
}
.popularity-empty > i { color: #9bb52a; font-size: 36px; }
.popularity-empty h3 { margin: 17px 0 8px; font-size: 25px; }
.popularity-empty p { max-width: 520px; margin: 0; color: var(--muted); line-height: 1.6; }

.calculator-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #11140e 0%, #20251b 100%);
}
.calculator-section::after {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    right: -180px;
    bottom: -220px;
    border: 90px solid rgba(223,242,109,.08);
    border-radius: 50%;
}
.calculator-grid { position: relative; z-index: 1; }
.calculator-card { box-shadow: 0 30px 80px rgba(0,0,0,.32); }
.calculator-card > button { display: flex; align-items: center; justify-content: center; gap: 10px; }

.trust-lead { max-width: 420px; margin-top: 28px; color: var(--muted); line-height: 1.75; }
.trust-steps { border: 0; display: grid; gap: 12px; }
.trust-steps article {
    grid-template-columns: 58px 1fr;
    align-items: start;
    padding: 25px;
    border: 1px solid rgba(23,25,20,.08);
    border-radius: 20px;
    background: rgba(255,255,255,.7);
    box-shadow: 0 10px 35px rgba(23,25,20,.04);
}
.trust-steps article > span { display: grid; place-items: center; width: 50px; height: 50px; color: var(--ink); background: var(--lime); border-radius: 15px; font-size: 18px; }
.trust-steps small { display: block; margin-bottom: 5px; color: #92998c; font-size: 10px; font-weight: 800; letter-spacing: .13em; }

.person-hero {
    margin-top: 34px;
    padding: clamp(35px, 6vw, 72px);
    color: #fff;
    background:
        radial-gradient(circle at 78% 25%, rgba(223,242,109,.14), transparent 28%),
        #151812;
    border-radius: 42px;
    box-shadow: 0 35px 90px rgba(23,25,20,.17);
}
.person-hero .back-link { color: #cbd0c6; }
.person-hero .back-link i { margin-right: 8px; }
.person-hero .eyebrow { color: var(--lime); }
.person-hero .person-lead { color: #bec4b7; }
.person-hero .age-lockup strong { color: var(--lime); }
.date-facts > div {
    position: relative;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 12px;
    align-items: center;
    min-width: 170px;
    padding: 16px 17px;
    border: 1px solid rgba(255,255,255,.13);
    background: rgba(255,255,255,.07);
}
.date-facts > div > i, .date-facts .fact-symbol { position: static; grid-column: 1; grid-row: 1 / span 3; align-self: center; width: 26px; text-align: center; font-size: 22px; line-height: 1; transform: none; }
.date-facts > div > i { color: var(--lime); }
.date-facts > div > span:not(.fact-symbol) { grid-column: 2; grid-row: 1; }
.date-facts > div > strong { grid-column: 2; grid-row: 2; }
.date-facts > div > small { grid-column: 2; grid-row: 3; }
.date-facts span { color: #9fa69a; }
.date-facts .physical { background: rgba(223,242,109,.11); }
.date-facts .cosmic { background: rgba(206,215,255,.1); }
.date-facts .numerology { background: rgba(255,123,78,.1); }
.date-facts .fact-symbol { color: #fff; letter-spacing: 0; text-transform: none; }
.date-facts small { color: #9fa69a; font-size: 11px; }
.portrait-card { box-shadow: 18px 18px 0 var(--lime), 0 30px 60px rgba(0,0,0,.28); }
.person-content { padding-top: 25px; }
.story-card, .fact-card { border: 1px solid rgba(23,25,20,.07); box-shadow: 0 15px 45px rgba(23,25,20,.05); }
.fact-icon { display: grid; place-items: center; width: 52px; height: 52px; color: #fff; background: var(--ink); border-radius: 16px; font-size: 18px; }
.fact-card.lime .fact-icon { color: var(--ink); background: #fff; }
.fact-card h3 { margin-top: 28px; }
.profile-facts-section { padding: 0 0 110px; }
.profile-facts-heading { display: grid; grid-template-columns: minmax(0, .85fr) minmax(280px, .55fr); column-gap: 70px; align-items: end; margin-bottom: 34px; }
.profile-facts-heading .eyebrow { grid-column: 1 / -1; }
.profile-facts-heading h2 { margin: 0; font-size: clamp(38px, 5vw, 64px); line-height: .96; letter-spacing: -.06em; }
.profile-facts-heading > p:last-child { margin: 0; color: var(--muted); line-height: 1.7; }
.profile-facts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.profile-fact-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 24px; border: 1px solid rgba(23,25,20,.08); border-radius: 20px; background: var(--white); box-shadow: 0 12px 35px rgba(23,25,20,.04); }
.profile-fact-icon { display: grid; place-items: center; width: 48px; height: 48px; color: var(--ink); background: var(--lime-soft); border-radius: 15px; }
.profile-fact-item h3 { margin: 2px 0 12px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.profile-fact-values { display: flex; flex-wrap: wrap; gap: 7px; }
.profile-fact-values span, .profile-fact-values a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid rgba(23,25,20,.14); border-radius: 99px; font-size: 13px; line-height: 1.25; }
.profile-fact-values a { color: #476300; border-color: rgba(95,127,0,.28); background: rgba(223,242,109,.18); }
.profile-fact-values a:hover { color: var(--ink); border-color: var(--lime); }
.source-list a { position: relative; padding-left: 28px; box-shadow: 0 10px 30px rgba(23,25,20,.04); }
.source-list a::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; background: var(--lime); border-radius: 0 5px 5px 0; }

.site-footer { padding: 0 0 28px; color: #fff; background: #0d0f0b; }
.footer-cta {
    position: relative;
    top: -46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 30px 34px;
    color: var(--ink);
    background: var(--lime);
    border-radius: 25px;
    box-shadow: 0 25px 60px rgba(0,0,0,.25);
}
.footer-cta > div { display: flex; align-items: center; gap: 20px; }
.footer-cta-icon { display: grid; place-items: center; width: 56px; height: 56px; flex: 0 0 56px; color: #fff; background: var(--ink); border-radius: 17px; }
.footer-cta small { font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.footer-cta h2 { margin: 3px 0 0; font-size: clamp(22px, 3vw, 34px); letter-spacing: -.04em; }
.footer-cta > a { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; padding: 14px 18px; color: #fff; background: var(--ink); border-radius: 13px; font-weight: 800; }
.footer-main { margin-left: 0; margin-right: 0; padding: 25px 0 55px; }
.footer-brand { color: #fff; }
.footer-main p { max-width: 470px; margin: 25px 0; color: #9ca295; line-height: 1.7; }
.footer-trust { display: flex; flex-wrap: wrap; gap: 15px; color: #c5c9c0; font-size: 12px; }
.footer-trust span { display: flex; align-items: center; gap: 7px; }
.footer-trust i { color: var(--lime); }
.footer-main h3 { margin: 6px 0 20px; color: #6f766a; text-transform: uppercase; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.footer-main .col-6 > a { display: block; margin-bottom: 13px; color: #cdd1c9; font-size: 14px; }
.footer-main .col-6 > a:hover { color: var(--lime); transform: translateX(3px); }
.footer-domain { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; color: #6f766a; }
.footer-domain i { margin-bottom: 10px; color: var(--lime); font-size: 28px; }
.footer-domain strong { color: #fff; font: 800 18px "Manrope"; }
.footer-domain span { font-size: 12px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 24px; color: #6f766a; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; }
.footer-bottom i { color: var(--orange); }

/* === Motion system === */
@keyframes page-rise {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes orbit-float-one {
    0%, 100% { transform: translateY(0) rotate(8deg); }
    50% { transform: translateY(-12px) rotate(4deg); }
}
@keyframes orbit-float-two {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(10px) rotate(1deg); }
}
@keyframes verified-float {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-7px) rotate(0deg); }
}
@keyframes status-pulse {
    0%, 100% { box-shadow: 0 0 0 6px rgba(223,242,109,.12); }
    50% { box-shadow: 0 0 0 11px rgba(223,242,109,0); }
}
@keyframes result-pop {
    0% { opacity: .55; transform: translateY(8px) scale(.98); }
    65% { transform: translateY(-2px) scale(1.015); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes suggestion-in {
    from { opacity: 0; transform: translateY(-7px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.hero-copy > *, .hero .people-search { opacity: 0; animation: page-rise .7s cubic-bezier(.2,.75,.25,1) forwards; }
.hero-copy > :nth-child(1) { animation-delay: 60ms; }
.hero-copy > :nth-child(2) { animation-delay: 130ms; }
.hero-copy > :nth-child(3) { animation-delay: 210ms; }
.hero-copy > :nth-child(4) { animation-delay: 290ms; }
.hero .people-search { animation-delay: 360ms; }
.hero .badge-one { animation: orbit-float-one 5.5s ease-in-out infinite; }
.hero .badge-two { animation: orbit-float-two 6.2s ease-in-out infinite; }
.hero .verified-float { animation: verified-float 4.8s ease-in-out infinite; }
.hero .status-dot { animation: status-pulse 2.4s ease-out infinite; }
.brand-mark { transition: transform .35s cubic-bezier(.2,.8,.25,1), border-radius .35s ease; }
.brand:hover .brand-mark { transform: rotate(-10deg) scale(1.08); border-radius: 11px; }
.suggestions:not([hidden]) { transform-origin: top center; animation: suggestion-in .2s ease-out; }

.reveal-item {
    opacity: 0;
    translate: 0 28px;
    scale: .985;
    transition:
        opacity .65s cubic-bezier(.2,.75,.25,1) var(--reveal-delay, 0ms),
        translate .65s cubic-bezier(.2,.75,.25,1) var(--reveal-delay, 0ms),
        scale .65s cubic-bezier(.2,.75,.25,1) var(--reveal-delay, 0ms),
        transform .25s ease,
        box-shadow .25s ease;
    will-change: opacity, translate, scale;
}
.reveal-item.is-visible { opacity: 1; translate: 0 0; scale: 1; }
.calculator-card.result-updated .result-primary strong { animation: result-pop .5s cubic-bezier(.2,.8,.25,1); }
.calculator-card.result-updated .calendar-insights > div,
.calculator-card.result-updated .metric-grid > div { animation: result-pop .5s cubic-bezier(.2,.8,.25,1) both; }
.calculator-card.result-updated .calendar-insights > div:nth-child(2),
.calculator-card.result-updated .metric-grid > div:nth-child(2) { animation-delay: 45ms; }
.calculator-card.result-updated .calendar-insights > div:nth-child(3),
.calculator-card.result-updated .metric-grid > div:nth-child(3) { animation-delay: 90ms; }
.calculator-card.result-updated .calendar-insights > div:nth-child(4),
.calculator-card.result-updated .metric-grid > div:nth-child(4) { animation-delay: 135ms; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
    .hero-copy > *, .hero .people-search, .reveal-item { opacity: 1 !important; translate: 0 0 !important; scale: 1 !important; transform: none !important; }
}

@media (max-width: 991.98px) {
    .site-header .navbar-collapse { margin-top: 13px; padding: 14px; background: #fff; border: 1px solid rgba(23,25,20,.08); border-radius: 17px; box-shadow: 0 20px 50px rgba(23,25,20,.12); }
    .site-header .navbar-nav { align-items: stretch !important; }
    .site-header .nav-cta { justify-content: center; margin-top: 8px; }
    .hero { overflow: hidden; }
    .people-search { margin-bottom: -115px; }
    .person-hero { overflow: hidden; }
    .footer-main { padding-top: 0; }
    .birth-finder-heading { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 767.98px) {
    .hero { width: calc(100% - 18px); margin-top: 18px; padding: 45px 24px 88px; border-radius: 28px; }
    .people-search { width: calc(100% + 16px); margin: 35px -8px -140px; }
    .search-icon { display: none; }
    .people-search > p { margin-bottom: 4px; }
    .birth-finder { padding-top: 170px; }
    .results-section + .birth-finder { padding-top: 45px; }
    .birth-finder-card { padding: 30px 22px; border-radius: 27px; }
    .birth-filter-grid { grid-template-columns: 1fr; gap: 13px; }
    .birth-country-filter { grid-template-columns:1fr; margin-top:28px; }
    .birth-filter-or { width: auto; height: auto; margin: 0; border: 0; }
    .birth-pagination { grid-template-columns: 1fr 1fr; }
    .birth-pagination strong { grid-column: 1 / -1; grid-row: 1; text-align: center; }
    .birth-pagination a { grid-row: 2; }
    .people-section { padding-top: 170px; }
    .birth-finder + .people-section, .birth-results-section + .people-section { padding-top: 55px; }
    .person-hero { width: calc(100% - 18px); margin-top: 18px; padding: 32px 22px 48px; border-radius: 28px; }
    .date-facts { display: grid; grid-template-columns: 1fr 1fr; }
    .date-facts > div { min-width: 0; }
    .footer-cta { top: -35px; align-items: stretch; flex-direction: column; padding: 25px; }
    .footer-cta > a { justify-content: center; }
    .footer-bottom { flex-direction: column; }
}

@media (max-width: 480px) {
    .hero h1 { font-size: 50px; }
    .hero-proof { flex-direction: column; gap: 9px; }
    .date-facts { grid-template-columns: 1fr; }
    .calendar-insights { grid-template-columns: 1fr; }
    .footer-cta > div { align-items: flex-start; }
    .footer-cta-icon { width: 46px; height: 46px; flex-basis: 46px; }
}

/* === Mobile layout corrections === */
@media (max-width: 991.98px) {
    body { overflow-x: hidden; }
    .site-header .navbar { min-height: 72px; padding: 8px 0; }
    .site-header .navbar > .shell { width: min(100% - 28px, 1180px); }
    .site-header .navbar-toggler { display: grid; place-items: center; flex: 0 0 44px; margin-left: auto; }
    .site-header .navbar-collapse { flex-basis: 100%; width: 100%; }
    .site-header .navbar-nav { width: 100%; }
    .site-header .nav-link { width: 100%; }

    .hero { overflow: hidden; padding-bottom: 34px; }
    .people-search {
        width: 100%;
        max-width: 100%;
        margin: 36px 0 0;
        box-shadow: 0 18px 45px rgba(0,0,0,.24);
    }
    .profile-facts-heading { grid-template-columns: 1fr; gap: 18px; }
    .profile-facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .birth-finder { padding-top: 70px; }
    .results-section + .birth-finder { padding-top: 45px; }
    .people-section { padding-top: 70px; }
    .results-section + .people-section,
    .birth-finder + .people-section,
    .birth-results-section + .people-section { padding-top: 55px; }
}

@media (max-width: 767.98px) {
    .hero { width: calc(100% - 18px); padding: 42px 22px 26px; }
    .hero-grid { display: block; }
    .hero h1 { font-size: clamp(46px, 15vw, 66px); overflow-wrap: anywhere; }
    .hero-lead { margin-top: 25px; }
    .hero-proof { margin-top: 22px; }

    .people-search { width: 100%; margin: 30px 0 0; padding: 10px; border-radius: 18px; }
    .people-search .search-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; }
    .people-search .search-row input { width: 100%; min-height: 52px; padding: 12px 10px; font-size: 17px; }
    .people-search .search-row button { width: 100%; min-height: 52px; padding: 0 16px; }
    .people-search > p { align-items: flex-start; margin: 10px 4px 3px; line-height: 1.45; }
    .people-search > p i { margin-top: 3px; }
    .country-filter-row { align-items: stretch; flex-direction: column; margin-inline: 4px; }
    .country-filter-row select { width: 100%; max-width: none; }
    .country-filter-row > a { margin-left: 0; }
    .profile-facts-section { padding-bottom: 70px; }
    .profile-facts-grid { grid-template-columns: 1fr; }
    .profile-fact-item { padding: 19px; }

    .birth-finder { padding-top: 48px; }
    .birth-finder-heading h2 { font-size: clamp(38px, 12vw, 52px); }
    .birth-filter-form { min-width: 0; padding: 13px; }
    .birth-filter-form > div { grid-template-columns: minmax(0, 1fr) 50px; }
    .birth-filter-form input { font-size: 16px; }
    .birth-results-section .section-heading h2 { overflow-wrap: anywhere; }

    .person-tile { min-width: 0; padding: 23px; }
    .person-tile h3 { margin-top: 54px; overflow-wrap: anywhere; }
    .person-tile .tile-year { max-width: calc(100% - 25px); white-space: normal; line-height: 1.35; }
    .popularity-tabs { grid-template-columns: 1fr; }
    .popularity-tabs .nav-link { justify-content: flex-start; min-height: 50px; padding-inline: 14px; text-align: left; }
    .popularity-content { min-height: 280px; }
    .person-tile .tile-top { align-items: flex-start; gap: 10px; }
    .tile-views { max-width: 55%; white-space: normal; line-height: 1.3; }
    .calculator-card, .date-fields, .date-fields label { min-width: 0; }
    .date-fields input { max-width: 100%; }
    .footer-main .row, .footer-main [class*="col-"] { min-width: 0; }
}

@media (max-width: 420px) {
    .shell { width: calc(100% - 20px); }
    .site-header .navbar > .shell { width: calc(100% - 22px); }
    .brand { font-size: 21px; }
    .site-header .navbar-toggler { width: 42px; height: 42px; flex-basis: 42px; }
    .hero { width: calc(100% - 12px); padding-inline: 18px; border-radius: 24px; }
    .hero h1 { font-size: clamp(43px, 14.5vw, 58px); }
    .hero-proof { align-items: flex-start; }
    .birth-finder-card { padding: 26px 17px; }
    .birth-filter-form > div { grid-template-columns: minmax(0, 1fr) 46px; }
    .birth-filter-form button { min-width: 46px; }
    .birth-pagination { gap: 9px; }
    .birth-pagination a { padding: 11px 12px; font-size: 13px; }
    .metric-grid { grid-template-columns: 1fr; }
    .footer-main .col-6 { width: 100%; }
}