/* AKJ PaisaGyan - cheerful home page (html.hm-page). Colours follow the site theme (light / dark / sepia / ocean / sage). */
html.hm-page { --hm-a: #7c3aed; --hm-b: #ec4899; --hm-c: #f59e0b; --hm-bg: #ffffff; --hm-card: #ffffff; --hm-text: #1f2937; --hm-muted: #6b7280; --hm-line: #e5e7eb; --hm-soft: #f5f3ff; --hm-ha: #4f46e5; --hm-hb: #db2777; }
html[data-theme="dark"].hm-page { --hm-a: #8b5cf6; --hm-b: #ec4899; --hm-bg: #0f1117; --hm-card: #1a1f2e; --hm-text: #e2e8f0; --hm-muted: #94a3b8; --hm-line: #2d3748; --hm-soft: #161b2a; --hm-ha: #3b2a8c; --hm-hb: #7a1d55; }
html[data-theme="sepia"].hm-page { --hm-a: #b45309; --hm-b: #be123c; --hm-bg: #f5efe6; --hm-card: #fdf8f0; --hm-text: #3d2b1f; --hm-muted: #7a6350; --hm-line: #e0cdb3; --hm-soft: #efe4d2; --hm-ha: #b45309; --hm-hb: #be123c; }
html[data-theme="ocean"].hm-page { --hm-a: #0284c7; --hm-b: #0d9488; --hm-bg: #0b1929; --hm-card: #0f2035; --hm-text: #cdd9e5; --hm-muted: #8aa0b8; --hm-line: #1e3a5f; --hm-soft: #0d2238; --hm-ha: #0b4f7a; --hm-hb: #0b5e5a; }
html[data-theme="sage"].hm-page { --hm-a: #0f766e; --hm-b: #0369a1; --hm-bg: #f0f4f1; --hm-card: #f8fbf8; --hm-text: #1c2b1e; --hm-muted: #5b7060; --hm-line: #c8ddc9; --hm-soft: #e3eee4; --hm-ha: #0f766e; --hm-hb: #0369a1; }

/* ---------- hero ---------- */
.hm-hero { position: relative; overflow: hidden; isolation: isolate; color: #fff; padding: 34px 0 78px; background: linear-gradient(120deg, var(--hm-ha), var(--hm-hb), var(--hm-ha)); }
@keyframes hm-grad { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.hm-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 85% -10%, rgba(255,255,255,.35), transparent 55%), radial-gradient(circle at 0% 110%, rgba(255,255,255,.22), transparent 50%); }
.hm-hero .container { position: relative; z-index: 2; }
.hm-fl { position: absolute; z-index: 1; font-size: 30px; opacity: .55; pointer-events: none; animation: hm-float 7s ease-in-out infinite; filter: drop-shadow(0 4px 6px rgba(0,0,0,.2)); }
@keyframes hm-float { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-22px) rotate(8deg); } }
.hm-greet { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 5px 14px; font-size: 13px; font-weight: 600; margin-bottom: 12px; animation: hm-pop .6s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes hm-pop { from { opacity: 0; transform: scale(.7) translateY(8px); } to { opacity: 1; transform: none; } }
.hm-h1 { font-weight: 800; font-size: clamp(1.7rem, 4.4vw, 2.9rem); line-height: 1.15; margin: 0 0 10px; text-shadow: 0 3px 14px rgba(0,0,0,.25); }
.hm-h1 span { display: inline-block; background: linear-gradient(90deg, #fde047, #fb923c, #f9a8d4, #fde047); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; }
@keyframes hm-shine { to { background-position: -250% 0; } }
.hm-sub { max-width: 620px; color: rgba(255,255,255,.9); font-size: clamp(.95rem, 1.6vw, 1.1rem); margin-bottom: 18px; }
.hm-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.hm-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 11px 22px; font-weight: 700; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.hm-btn.main { background: #fff; color: #4c1d95; box-shadow: 0 8px 22px rgba(0,0,0,.25); position: relative; }
.hm-btn.main::after { content: ""; position: absolute; inset: -4px; border-radius: 999px; border: 2px solid rgba(255,255,255,.7); animation: hm-ring 2.2s ease-out infinite; }
@keyframes hm-ring { from { transform: scale(.96); opacity: .9; } to { transform: scale(1.12); opacity: 0; } }
.hm-btn.alt { background: rgba(255,255,255,.16); color: #fff; border: 2px solid rgba(255,255,255,.6); }
.hm-btn:hover { transform: translateY(-3px) scale(1.03); color: inherit; }
.hm-btn.main:hover { color: #4c1d95; }
.hm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hm-chip { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 5px 13px; font-size: 13px; font-weight: 600; }
.hm-chip b { font-size: 15px; }
.hm-mascot { display: flex; justify-content: center; align-items: center; }
@keyframes hm-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(3deg); } }
.hm-mascot img.hm-hop { animation: hm-hop .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes hm-hop { 0% { transform: scale(1); } 40% { transform: translateY(-34px) scale(1.12) rotate(8deg); } 100% { transform: scale(1); } }
.hm-bubble { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 340px; background: rgba(255,255,255,.96); color: #1f2937; border-radius: 18px; padding: 10px 14px; font-size: 13px; font-weight: 600; line-height: 1.35; box-shadow: 0 10px 24px rgba(0,0,0,.22); animation: hm-pop .6s .5s both; }
.hm-bubble img { width: 56px; height: 56px; flex: 0 0 56px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); animation: hm-bob 3.4s ease-in-out infinite; cursor: pointer; transform-origin: 50% 90%; }
.hm-bubble small { display: block; color: #7c3aed; font-weight: 700; font-size: 11px; }
.hm-bubble.swap { animation: hm-pop .45s both; }
.hm-burst { position: fixed; z-index: 2000; pointer-events: none; font-size: 26px; animation: hm-fly 1.1s ease-out forwards; }
@keyframes hm-fly { to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }

/* ---------- quick doors (overlap the hero) ---------- */
.hm-doors { position: relative; z-index: 5; margin-top: -52px; padding-bottom: 8px; }
.hm-door-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.hm-door { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 16px 8px 14px; border-radius: 20px; text-decoration: none; color: #fff; background: linear-gradient(135deg, var(--a), var(--b)); box-shadow: 0 10px 24px rgba(var(--ar), .35); transition: transform .25s cubic-bezier(.2,1.4,.4,1), box-shadow .25s; }
.hm-door::after { content: ""; position: absolute; width: 90px; height: 90px; border-radius: 50%; right: -26px; top: -30px; background: rgba(255,255,255,.2); transition: transform .35s; }
.hm-door:hover { transform: translateY(-8px) rotate(-1.5deg) scale(1.04); color: #fff; box-shadow: 0 18px 32px rgba(var(--ar), .5); }
.hm-door:hover::after { transform: scale(1.8); }
.hm-door .e { font-size: 34px; line-height: 1; transition: transform .3s; display: block; }
.hm-door:hover .e { transform: scale(1.25) rotate(-8deg); animation: hm-wig .5s; }
@keyframes hm-wig { 25% { transform: scale(1.25) rotate(10deg); } 75% { transform: scale(1.25) rotate(-12deg); } }
.hm-door b { font-size: 14px; }
.hm-door small { font-size: 11px; opacity: .9; }

/* ---------- sections below ---------- */
html.hm-page body { background: var(--hm-bg); color: var(--hm-text); }
html.hm-page .section-header h2, html.hm-page section h2.fw-700 { background: linear-gradient(90deg, var(--hm-a), var(--hm-b)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; position: relative; }
html.hm-page .section-header h2::after, html.hm-page section h2.fw-700::after { content: ""; display: block; height: 4px; width: 46px; border-radius: 4px; margin: 6px auto 0; background: linear-gradient(90deg, var(--hm-a), var(--hm-b)); }
html.hm-page section .d-flex h2.fw-700::after { margin-left: 0; }
@keyframes hm-line { 50% { width: 90px; } }
html.hm-page section .badge { border-radius: 999px; padding: 6px 12px; font-weight: 700; }
html.hm-page section.bg-light { background: var(--hm-soft) !important; }
html.hm-page section[style*="linear-gradient(135deg,#f7f4fc"] { background: var(--hm-soft) !important; }
html[data-theme="dark"].hm-page .card, html[data-theme="ocean"].hm-page .card { background: var(--hm-card); color: var(--hm-text); border-color: var(--hm-line); }
html[data-theme="dark"].hm-page .text-dark, html[data-theme="ocean"].hm-page .text-dark { color: var(--hm-text) !important; }
html[data-theme="dark"].hm-page .text-muted, html[data-theme="ocean"].hm-page .text-muted { color: var(--hm-muted) !important; }
html.hm-page .card.hover-lift, html.hm-page .academy-card { transition: transform .3s cubic-bezier(.2,1.3,.4,1), box-shadow .3s; border-radius: 18px; }
html.hm-page .card.hover-lift:hover, html.hm-page .academy-card:hover { transform: translateY(-8px) rotate(-.6deg); box-shadow: 0 18px 34px rgba(var(--hm-ar, 124,58,237), .25) !important; }
html.hm-page .academy-card-header { background: linear-gradient(135deg, var(--hm-a), var(--hm-b)) !important; position: relative; overflow: hidden; }
html.hm-page .academy-card-header::after { content: ""; position: absolute; width: 120px; height: 120px; border-radius: 50%; right: -30px; top: -50px; background: rgba(255,255,255,.18); }
html.hm-page .academy-card .btn { background: linear-gradient(135deg, var(--hm-a), var(--hm-b)) !important; border: 0; border-radius: 999px; }
html.hm-page .calc-circle-tile .calc-icon-circle { transition: transform .35s cubic-bezier(.2,1.6,.4,1), box-shadow .3s; }
html.hm-page .calc-circle-tile:hover .calc-icon-circle { transform: scale(1.18) rotate(-8deg); box-shadow: 0 10px 22px rgba(0,0,0,.2); }
html.hm-page .calc-circle-tile .fw-600 { color: var(--hm-text); }
html.hm-page .btn-outline-primary, html.hm-page .btn-outline-success { border-radius: 999px; font-weight: 700; transition: transform .2s; }
html.hm-page .btn-outline-primary:hover, html.hm-page .btn-outline-success:hover { transform: translateY(-2px) scale(1.04); }

/* reveal on scroll (only when the script runs) */
html.hm-js .hm-rv { opacity: 0; transform: translateY(28px) scale(.98); transition: opacity .7s ease, transform .7s cubic-bezier(.2,1.1,.4,1); }
html.hm-js .hm-rv.in { opacity: 1; transform: none; }

@media (max-width: 991px) { .hm-door-grid { grid-template-columns: repeat(4, 1fr); } .hm-door:nth-child(n+5) { display: none; } .hm-mascot { justify-content: flex-start; } }
@media (max-width: 575px) { .hm-hero { padding: 24px 0 70px; } .hm-fl { font-size: 22px; } .hm-door .e { font-size: 28px; } .hm-btn { padding: 10px 16px; font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .hm-hero, .hm-fl, .hm-h1 span, .hm-bubble img, .hm-btn.main::after, html.hm-page .section-header h2::after, html.hm-page section h2.fw-700::after { animation: none !important; } html.hm-js .hm-rv { opacity: 1; transform: none; transition: none; } }

/* ---------- gradient sections ---------- */
html.hm-page main > section.py-4 { position: relative; overflow: hidden; isolation: isolate; }
html.hm-page main > section.py-4 > .container { position: relative; z-index: 1; }
html.hm-page main > section.py-4::before, html.hm-page main > section.py-4::after { content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; }
html.hm-page main > section.py-4::before { width: 280px; height: 280px; left: -90px; top: -90px; background: radial-gradient(circle, color-mix(in srgb, var(--hm-a) 28%, transparent), transparent 70%); }
html.hm-page main > section.py-4::after { width: 320px; height: 320px; right: -110px; bottom: -120px; background: radial-gradient(circle, color-mix(in srgb, var(--hm-b) 26%, transparent), transparent 70%); }
@keyframes hm-blob { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, 24px) scale(1.18); } }
html.hm-page main > section.py-4:nth-of-type(4n+1) { background: linear-gradient(135deg, color-mix(in srgb, var(--hm-a) 13%, var(--hm-bg)), color-mix(in srgb, var(--hm-b) 11%, var(--hm-bg))) !important; }
html.hm-page main > section.py-4:nth-of-type(4n+2) { background: linear-gradient(135deg, var(--hm-bg), color-mix(in srgb, #0ea5e9 11%, var(--hm-bg)) 55%, color-mix(in srgb, #10b981 12%, var(--hm-bg))) !important; }
html.hm-page main > section.py-4:nth-of-type(4n+3) { background: linear-gradient(135deg, color-mix(in srgb, #f59e0b 14%, var(--hm-bg)), color-mix(in srgb, var(--hm-b) 11%, var(--hm-bg))) !important; }
html.hm-page main > section.py-4:nth-of-type(4n) { background: linear-gradient(135deg, color-mix(in srgb, #10b981 12%, var(--hm-bg)), color-mix(in srgb, var(--hm-a) 13%, var(--hm-bg))) !important; }
/* two bolder, full-colour bands for the calculators and the quiz */
html.hm-page main > section.py-4:has(.calc-circle-tile) { background: linear-gradient(120deg, #4f46e5, #7c3aed 45%, #db2777) !important; }
html.hm-page main > section.py-4:has(.calc-circle-tile) .section-header p, html.hm-page main > section.py-4:has(.calc-circle-tile) .calc-circle-tile .fw-600, html.hm-page main > section.py-4:has(.calc-circle-tile) .calc-circle-tile .text-muted, html.hm-page main > section.py-4:has(.calc-circle-tile) .akj-snap-hint { color: #fff !important; opacity: .95; }
html.hm-page main > section.py-4:has(.calc-circle-tile) .calc-icon-circle { background: rgba(255,255,255,.2) !important; border-color: rgba(255,255,255,.55) !important; }
html.hm-page main > section.py-4:has(.calc-circle-tile) .calc-icon-circle i { color: #fff !important; }
html.hm-page main > section.py-4:has(.calc-circle-tile) .btn-outline-success { color: #fff; border-color: #fff; }
html.hm-page main > section.py-4:has(.calc-circle-tile) .btn-outline-success:hover { background: #fff; color: #4c1d95; }
@media (prefers-reduced-motion: reduce) { html.hm-page main > section.py-4::before, html.hm-page main > section.py-4::after, html.hm-page main > section.py-4:has(.calc-circle-tile) { animation: none !important; } }

/* mobile: only the first three doors (Calculators, Games, Articles); tablet: four */
@media (max-width: 575px) { .hm-door-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } .hm-door:nth-child(n+4) { display: none; } .hm-door { padding: 12px 4px 10px; border-radius: 16px; } .hm-door b { font-size: 13px; } .hm-door small { font-size: 10px; } }