/* ===============================================================
   ExamBird — site styles
   ---------------------------------------------------------------
   Palette comes from the logo: navy cap, blue bird, gold tassel.
   Gold appears in exactly one place on the page (the free badge) —
   everything else stays disciplined so that one thing carries.

   Two themes. The page follows the system by default and the
   toggle overrides it; the choice is remembered.
   =============================================================== */

/* ---- Light (default) ---- */
:root {
    --bg:        #FFFFFF;
    --bg-soft:   #F3F8FF;
    --surface:   #FFFFFF;
    --surface-2: #F7FAFF;
    --text:      #0B2545;
    --text-soft: #52708F;
    --line:      #DFE9F7;
    --brand:     #1877F2;
    --brand-dk:  #0B5ED7;
    --brand-tint:#E8F1FE;
    --gold:      #FFB020;
    --shadow:    0 1px 2px rgba(11,37,69,.05), 0 8px 28px rgba(11,37,69,.07);
    --shadow-lg: 0 24px 60px rgba(11,37,69,.14);
    --hero-bg:   #0B2545;
    --hero-soft: #B9D0EC;

    --wrap: 1140px;
    --r-sm: 10px;
    --r:    16px;
}

/* ---- Dark ---- */
[data-theme="dark"] {
    --bg:        #071426;
    --bg-soft:   #0B1D35;
    --surface:   #0F2340;
    --surface-2: #132A4C;
    --text:      #E9F1FB;
    --text-soft: #9BB4D2;
    --line:      #1D3A61;
    --brand:     #4C9DFF;
    --brand-dk:  #75B4FF;
    --brand-tint:#132C4F;
    --gold:      #FFC24D;
    --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.35);
    --shadow-lg: 0 24px 60px rgba(0,0,0,.5);
    --hero-bg:   #050F1D;
    --hero-soft: #9BB4D2;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:        #071426;
        --bg-soft:   #0B1D35;
        --surface:   #0F2340;
        --surface-2: #132A4C;
        --text:      #E9F1FB;
        --text-soft: #9BB4D2;
        --line:      #1D3A61;
        --brand:     #4C9DFF;
        --brand-dk:  #75B4FF;
        --brand-tint:#132C4F;
        --gold:      #FFC24D;
        --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.35);
        --shadow-lg: 0 24px 60px rgba(0,0,0,.5);
        --hero-bg:   #050F1D;
        --hero-soft: #9BB4D2;
    }
}

/* ===============================================================
   Base
   =============================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 17px;
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    transition: background .25s ease, color .25s ease;
}

h1, h2, h3, h4 {
    font-family: 'Outfit', sans-serif;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.22rem; letter-spacing: -0.01em; }

p { max-width: 68ch; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* height: auto ZAROORI hai.
   HTML me width/height attributes hain (layout shift rokne ke liye).
   CSS me width 100% ho aur height auto na ho, to browser height
   attribute ko hi use karta hai — aur image kheench jati hai. */
img { max-width: 100%; height: auto; display: block; }

:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
    border-radius: 6px;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.section { padding: 96px 0; }
.section-soft { background: var(--bg-soft); }

@media (max-width: 760px) { .section { padding: 64px 0; } }

.section-head { max-width: 58ch; margin-bottom: 52px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { margin-bottom: 14px; }
.section-head p { color: var(--text-soft); font-size: 1.07rem; }
.section-head.center p { margin-inline: auto; }

.eyebrow {
    display: inline-block;
    color: var(--brand);
    font-weight: 600;
    font-size: .93rem;
    margin-bottom: 12px;
}

/* ===============================================================
   Header
   =============================================================== */

.site-head {
    position: sticky; top: 0; z-index: 100;

    /* Solid fallback pehle — color-mix purane browsers me nahi chalta,
       aur bina fallback ke header transparent ho jata hai aur text
       content ke upar chadh jata hai. */
    background: var(--bg);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
}

.site-head .wrap { display: flex; align-items: center; gap: 28px; height: 74px; }

.brand {
    display: flex; align-items: center; gap: 11px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700; font-size: 1.28rem; letter-spacing: -.02em;
    color: var(--text);
}
.brand:hover { text-decoration: none; }
.brand img { height: 40px; width: 40px; object-fit: contain; }

.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a { color: var(--text-soft); font-weight: 500; font-size: .97rem; }
.nav a:hover { color: var(--brand); text-decoration: none; }

.head-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.nav + .head-actions { margin-left: 0; }

@media (max-width: 940px) {
    .nav { display: none; }
    .site-head .wrap { height: 66px; }
}

/* Theme toggle */
.theme-btn {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: border-color .2s ease, transform .2s ease;
}
.theme-btn:hover { border-color: var(--brand); transform: rotate(-12deg); }
.theme-btn svg { width: 19px; height: 19px; }

.theme-btn .icon-moon { display: none; }
[data-theme="dark"] .theme-btn .icon-sun  { display: none; }
[data-theme="dark"] .theme-btn .icon-moon { display: block; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-btn .icon-sun  { display: none; }
    :root:not([data-theme="light"]) .theme-btn .icon-moon { display: block; }
}

/* ===============================================================
   Buttons
   =============================================================== */

.btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 26px;
    border: 1px solid var(--brand);
    border-radius: 999px;
    background: var(--brand); color: #fff;
    font-weight: 600; font-size: 1rem;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover {
    background: var(--brand-dk); border-color: var(--brand-dk);
    text-decoration: none; transform: translateY(-2px);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--brand) 38%, transparent);
}
.btn svg { width: 19px; height: 19px; }

.btn-outline {
    background: transparent; color: var(--text); border-color: var(--line);
}
.btn-outline:hover {
    background: var(--surface-2); border-color: var(--text-soft);
    color: var(--text); box-shadow: none;
}

.btn-onhero { background: #fff; color: #0B2545; border-color: #fff; }
.btn-onhero:hover { background: #E4EEFB; border-color: #E4EEFB; color: #0B2545; }

.btn-ghosthero { background: transparent; color: #fff; border-color: rgba(255,255,255,.34); }
.btn-ghosthero:hover { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.55); color: #fff; box-shadow: none; }

.btn-sm { padding: 10px 20px; font-size: .94rem; }

/* ===============================================================
   Hero
   =============================================================== */

.hero {
    background: var(--hero-bg);
    color: #fff;
    padding: 88px 0 100px;
    position: relative; overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(760px 420px at 78% 12%, rgba(24,119,242,.34), transparent 66%),
        radial-gradient(540px 380px at 8% 88%, rgba(24,119,242,.16), transparent 70%);
    pointer-events: none;
}

.hero .wrap {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1.08fr .92fr;
    gap: 56px; align-items: center;
}

.hero h1 { color: #fff; margin-bottom: 20px; }
.hero-sub { color: var(--hero-soft); font-size: 1.14rem; margin-bottom: 32px; }

.hero-badge {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 7px 16px 7px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.17);
    color: #fff; font-size: .9rem; font-weight: 500;
    margin-bottom: 24px;
}
.hero-badge b {
    background: var(--gold); color: #3A2600;
    padding: 3px 11px; border-radius: 999px;
    font-size: .82rem; font-weight: 700;
}

.hero-actions { display: flex; gap: 13px; flex-wrap: wrap; margin-bottom: 34px; }

.hero-points { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.hero-points span { display: flex; align-items: center; gap: 8px; color: var(--hero-soft); font-size: .95rem; }
.hero-points svg { width: 17px; height: 17px; color: #6FB4FF; flex: 0 0 17px; }

@media (max-width: 980px) {
    .hero { padding: 58px 0 68px; }
    .hero .wrap { grid-template-columns: 1fr; gap: 48px; }
}

/* ---- Phone mockup ---- */
.phone {
    width: 280px;
    border-radius: 38px;
    padding: 11px;
    background: linear-gradient(160deg, #23364F, #0C1928);
    box-shadow: var(--shadow-lg);
    position: relative;
}
.phone::before {
    content: '';
    position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
    width: 62px; height: 5px; border-radius: 999px;
    background: rgba(255,255,255,.22); z-index: 2;
}
.phone img {
    border-radius: 28px;
    width: 100%;
    height: auto;

    /* Aspect ratio lock — image load hone se pehle bhi jagah sahi
       rahegi, isliye page hilta nahi */
    aspect-ratio: 560 / 1199;
    object-fit: cover;
}

.phone-stage { display: flex; justify-content: center; position: relative; }
.phone-stage .phone:first-child { transform: rotate(-5deg) translateX(26px); z-index: 1; }
.phone-stage .phone:last-child  { transform: rotate(5deg) translateX(-26px) scale(.94); opacity: .96; }

@media (max-width: 620px) {
    .phone { width: 230px; }
    .phone-stage .phone:last-child { display: none; }
    .phone-stage .phone:first-child { transform: none; }
}

/* ---- Floating cards ---- */
.float-card {
    position: absolute;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 13px 16px;
    box-shadow: var(--shadow-lg);
    display: flex; align-items: center; gap: 11px;
    font-size: .9rem; font-weight: 600;
    z-index: 3;
}
.float-card small { display: block; color: var(--text-soft); font-weight: 500; font-size: .8rem; }
.float-card .fc-icon {
    width: 34px; height: 34px; border-radius: 10px;
    display: grid; place-items: center;
    background: var(--brand-tint); color: var(--brand);
    flex: 0 0 34px;
}
.float-card svg { width: 18px; height: 18px; }

.fc-1 { top: 15%; left: -5%; animation: floaty 5.5s ease-in-out infinite; }
.fc-2 { bottom: 13%; right: -3%; animation: floaty 5.5s ease-in-out infinite .9s; }

@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-11px); }
}

@media (max-width: 980px) { .fc-1 { left: 0; } .fc-2 { right: 0; } }
@media (max-width: 620px) { .float-card { display: none; } }

/* ===============================================================
   Value strip
   =============================================================== */

.strip {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1px; background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}
.strip-item { background: var(--surface); padding: 26px 22px; text-align: center; }
.strip-item b {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.75rem; font-weight: 700; color: var(--brand);
    line-height: 1.1; margin-bottom: 4px;
}
.strip-item span { color: var(--text-soft); font-size: .93rem; }

@media (max-width: 820px) { .strip { grid-template-columns: 1fr 1fr; } }

/* ===============================================================
   Cards
   =============================================================== */

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

@media (max-width: 940px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 30px 26px;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--brand); }

.card-icon {
    width: 48px; height: 48px; border-radius: 13px;
    display: grid; place-items: center;
    background: var(--brand-tint); color: var(--brand);
    margin-bottom: 18px;
}
.card-icon svg { width: 24px; height: 24px; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--text-soft); font-size: .98rem; }

/* ===============================================================
   Split / anatomy
   =============================================================== */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 940px) { .split { grid-template-columns: 1fr; gap: 44px; } }

.anatomy-list { list-style: none; display: grid; gap: 14px; margin-top: 30px; }
.anatomy-list li {
    display: flex; gap: 15px; align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 16px 18px;
}
.anatomy-list .ai {
    width: 38px; height: 38px; border-radius: 10px;
    display: grid; place-items: center; flex: 0 0 38px;
    background: var(--brand-tint); color: var(--brand);
}
.anatomy-list svg { width: 19px; height: 19px; }
.anatomy-list b { display: block; font-size: 1rem; }
.anatomy-list span { color: var(--text-soft); font-size: .94rem; }

/* ===============================================================
   Exam chips
   =============================================================== */

.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chip {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 11px 20px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--surface);
    font-weight: 600; font-size: .96rem; color: var(--text);
    transition: border-color .2s ease, transform .2s ease;
}
.chip:hover { border-color: var(--brand); transform: translateY(-2px); }
.chip em {
    font-style: normal; font-size: .76rem; font-weight: 700;
    color: var(--brand); background: var(--brand-tint);
    padding: 2px 8px; border-radius: 999px;
}

/* ===============================================================
   Screenshot gallery
   =============================================================== */

.shots {
    display: flex; gap: 24px;
    overflow-x: auto;
    padding: 8px 4px 26px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.shots::-webkit-scrollbar { height: 7px; }
.shots::-webkit-scrollbar-track { background: var(--line); border-radius: 99px; }
.shots::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 99px; }

.shot { flex: 0 0 auto; scroll-snap-align: center; text-align: center; }
.shot .phone { width: 248px; margin-bottom: 14px; }
.shot b { display: block; font-size: .98rem; }
.shot span { color: var(--text-soft); font-size: .88rem; }

/* ===============================================================
   FAQ
   =============================================================== */

.faq { max-width: 780px; margin: 0 auto; }
.faq details {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    margin-bottom: 12px;
    overflow: hidden;
}
.faq details[open] { border-color: var(--brand); }
.faq summary {
    cursor: pointer; list-style: none;
    padding: 19px 22px;
    font-weight: 600; font-size: 1.05rem;
    display: flex; justify-content: space-between; align-items: center; gap: 18px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: ''; flex: 0 0 11px; width: 11px; height: 11px;
    border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
    transform: rotate(45deg) translateY(-3px);
    transition: transform .22s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq .faq-body { padding: 0 22px 20px; color: var(--text-soft); }
.faq .faq-body p { margin-bottom: 10px; }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* ===============================================================
   CTA band
   =============================================================== */

.cta {
    background: var(--hero-bg); color: #fff;
    padding: 82px 0; text-align: center;
    position: relative; overflow: hidden;
}
.cta::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(660px 340px at 50% 0%, rgba(24,119,242,.36), transparent 68%);
}
.cta .wrap { position: relative; z-index: 1; }
.cta h2 { color: #fff; margin-bottom: 14px; }
.cta p { color: var(--hero-soft); margin: 0 auto 30px; font-size: 1.08rem; }

/* ===============================================================
   Footer
   =============================================================== */

.site-foot {
    background: var(--bg-soft);
    border-top: 1px solid var(--line);
    padding: 64px 0 30px;
    font-size: .96rem;
}
.foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.4fr; gap: 40px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }

.site-foot h4 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: .98rem; font-weight: 700; margin-bottom: 14px; }
.site-foot ul { list-style: none; display: grid; gap: 9px; }
.site-foot a { color: var(--text-soft); }
.site-foot a:hover { color: var(--brand); }
.foot-note { color: var(--text-soft); }

/* Government disclaimer — har page ke footer me.
   Play Store aur users dono ke liye ye saaf dikhna chahiye, isliye
   sirf Terms ke andar nahi rakha. */
.disclaimer {
    margin-top: 40px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text-soft);
    font-size: .88rem;
    line-height: 1.6;
    max-width: none;
}

.foot-bottom {
    margin-top: 22px; padding-top: 22px;
    border-top: 1px solid var(--line);
    display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center;
    color: var(--text-soft); font-size: .91rem;
}
.foot-bottom nav { display: flex; gap: 20px; flex-wrap: wrap; }

/* ===============================================================
   Scroll reveal

   One idea, applied once per section — not a separate effect on
   every card. Fully disabled when the system asks for less motion.
   =============================================================== */

.reveal { opacity: 0; transform: translateY(22px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.22,.8,.3,1); }

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

/* ===============================================================
   Legal pages
   =============================================================== */

.legal-head {
    background: var(--bg-soft);
    border-bottom: 1px solid var(--line);
    padding: 58px 0 46px;
}
.legal-head h1 { font-size: clamp(1.9rem, 4.2vw, 2.7rem); margin-bottom: 10px; }
.legal-head p { color: var(--text-soft); }

.legal { padding: 52px 0 90px; }
.legal .wrap { max-width: 780px; }

.legal h2 { font-size: 1.38rem; margin: 44px 0 14px; }
.legal h3 { font-size: 1.08rem; margin: 26px 0 9px; }
.legal p { margin-bottom: 15px; }
.legal ul, .legal ol { margin: 0 0 18px 24px; display: grid; gap: 8px; }
.legal li { color: var(--text); }

.legal table { width: 100%; border-collapse: collapse; margin: 8px 0 22px; font-size: .95rem; }
.legal th, .legal td { text-align: left; padding: 12px 14px; border: 1px solid var(--line); vertical-align: top; }
.legal th { background: var(--surface-2); font-weight: 700; }

.callout {
    background: var(--brand-tint);
    border-left: 3px solid var(--brand);
    padding: 18px 20px;
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    margin: 24px 0;
}
.callout p:last-child { margin-bottom: 0; }

.toc {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 24px 28px;
    margin-bottom: 38px;
}
.toc h2 { margin: 0 0 12px; font-size: 1.02rem; }
.toc ol { margin: 0 0 0 22px; gap: 6px; }
.toc a { color: var(--text-soft); }