/* css/home.css
 *
 * Homepage + About page of rkyfinance.com. Same look as the personal
 * dashboard: light by default with a light / match-device / dark switch,
 * glossy app-style icons, glass on a few key surfaces, soft page glow.
 * The calculators themselves have their own stylesheets and are untouched.
 */

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

/* ================= Tokens =================
   Dark is the default palette. Light is defined once and reused for
   "system" when the device prefers light. */

:root{
    --bg:#0a0d14;
    --surface:#11151f;
    --surface-hover:#151a26;
    --border:rgba(255,255,255,.07);
    --border-strong:rgba(255,255,255,.14);
    --ink:#e9edf5;
    --muted:#8b95a8;
    --faint:#5e687b;
    --accent:#8aa4ff;
    --accent-soft:rgba(138,164,255,.14);
    --warn:#f2b44b;
    --heart:#ff6b8b;
    --shadow-hover:0 12px 32px -12px rgba(0,0,0,.6);
    --glass-bg:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.02) 42%),rgba(17,21,31,.62);
    --glass-border:rgba(255,255,255,.11);
    --glass-hi:rgba(255,255,255,.07);
    --glass-spot:rgba(255,255,255,.10);
    --glass-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 2px rgba(0,0,0,.4),0 18px 40px -18px rgba(0,0,0,.8),0 40px 80px -48px rgba(74,108,240,.5);
    --grain:.06;
    --glow-a:rgba(74,108,240,.50);
    --glow-b:rgba(245,166,35,.26);
    --glow-c:rgba(45,212,160,.24);
    --glow-d:rgba(236,72,153,.26);
    --glow-e:rgba(139,92,246,.30);
    --grid-line:rgba(138,164,255,.26);
    --aurora:rgba(99,132,255,.30);
    --radius:14px;
}

:root[data-theme="light"]{
    --bg:#f5f6f9;
    --surface:#ffffff;
    --surface-hover:#ffffff;
    --border:#e3e6ed;
    --border-strong:#cdd3de;
    --ink:#111827;
    --muted:#5b6475;
    --faint:#8a92a1;
    --accent:#3559d6;
    --accent-soft:rgba(53,89,214,.10);
    --warn:#a86500;
    --heart:#d63a62;
    --shadow-hover:0 12px 28px -14px rgba(17,24,39,.22);
    --glass-bg:linear-gradient(160deg,rgba(255,255,255,.92),rgba(255,255,255,.66));
    --glass-border:rgba(17,24,39,.08);
    --glass-hi:rgba(255,255,255,.7);
    --glass-spot:rgba(53,89,214,.06);
    --glass-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(17,24,39,.05),0 18px 40px -22px rgba(17,24,39,.28),0 40px 80px -50px rgba(53,89,214,.35);
    --grain:.035;
    --glow-a:rgba(99,132,255,.34);
    --glow-b:rgba(245,166,35,.22);
    --glow-c:rgba(20,184,166,.20);
    --glow-d:rgba(236,72,153,.18);
    --glow-e:rgba(139,92,246,.20);
    --grid-line:rgba(53,89,214,.24);
    --aurora:rgba(99,132,255,.22);
}

@media (prefers-color-scheme:light){
    :root[data-theme="system"]{
        --bg:#f5f6f9;
        --surface:#ffffff;
        --surface-hover:#ffffff;
        --border:#e3e6ed;
        --border-strong:#cdd3de;
        --ink:#111827;
        --muted:#5b6475;
        --faint:#8a92a1;
        --accent:#3559d6;
        --accent-soft:rgba(53,89,214,.10);
        --warn:#a86500;
        --heart:#d63a62;
        --shadow-hover:0 12px 28px -14px rgba(17,24,39,.22);
        --glass-bg:linear-gradient(160deg,rgba(255,255,255,.92),rgba(255,255,255,.66));
        --glass-border:rgba(17,24,39,.08);
        --glass-hi:rgba(255,255,255,.7);
        --glass-spot:rgba(53,89,214,.06);
        --glass-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(17,24,39,.05),0 18px 40px -22px rgba(17,24,39,.28),0 40px 80px -50px rgba(53,89,214,.35);
        --grain:.035;
        --glow-a:rgba(99,132,255,.34);
        --glow-b:rgba(245,166,35,.22);
        --glow-c:rgba(20,184,166,.20);
        --glow-d:rgba(236,72,153,.18);
        --glow-e:rgba(139,92,246,.20);
        --grid-line:rgba(53,89,214,.24);
        --aurora:rgba(99,132,255,.22);
    }
}

*::selection{background:var(--accent);color:#fff}

html{
    -webkit-text-size-adjust:100%;
    overflow-x:clip;               /* effects must never cause sideways scrolling */
    scroll-padding-top:24px;
}

body{
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    font-feature-settings:"cv11","ss01";
    background:var(--bg);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.45;
    min-height:100vh;
    transition:background-color .25s ease, color .25s ease;
}

a{color:inherit}

:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
}

/* ================= Top bar ================= */

.topbar{
    border-bottom:1px solid var(--border);
    padding-top:env(safe-area-inset-top, 0px);
}

.topbar-inner{
    max-width:1120px;
    margin:0 auto;
    padding:14px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.brand{
    display:inline-flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    border-radius:8px;
}

.brand-mark{
    width:30px;
    height:30px;
    border-radius:8px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#2a5bd7,#123b72);
    color:#fff;
    font-weight:700;
    font-size:16px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}

.brand-name{
    font-weight:650;
    font-size:15px;
    letter-spacing:-.01em;
}

.topbar-actions{
    display:flex;
    align-items:center;
    gap:8px;
}

/* ---------------- Page links ---------------- */

.nav{
    display:flex;
    align-items:center;
    gap:2px;
    margin-right:6px;
}

.nav-link{
    display:inline-flex;
    align-items:center;
    gap:7px;
    height:34px;
    padding:0 12px;
    border-radius:9px;
    font-size:13.5px;
    font-weight:500;
    color:var(--muted);
    text-decoration:none;
    transition:color .15s ease, background .15s ease;
}

.nav-link svg{
    width:16px;
    height:16px;
    display:none;
}

.nav-link:hover{color:var(--ink)}

.nav-link[aria-current="page"]{
    color:var(--ink);
    background:var(--accent-soft);
}

/* ---------------- Theme switch ---------------- */

.themesw{
    display:inline-flex;
    gap:2px;
    border:1px solid var(--border);
    padding:3px;
    border-radius:10px;
}

.themebtn{
    appearance:none;
    border:none;
    background:transparent;
    color:var(--faint);
    width:28px;
    height:26px;
    border-radius:7px;
    cursor:pointer;
    display:grid;
    place-items:center;
    transition:background .15s ease, color .15s ease;
}

.themebtn svg{width:15px;height:15px}

.themebtn:hover{color:var(--ink)}

.themebtn.on{
    background:var(--surface);
    color:var(--ink);
    box-shadow:0 0 0 1px var(--border-strong);
}

/* ================= Layout ================= */

.container{
    max-width:1120px;
    margin:0 auto;
    padding:36px 24px 56px;
}

/* ================= Hero =================
   Same glass panel as the personal dashboard: date, greeting, the 3D ₹
   coin on the right (js/coin3d.js; it removes itself → .no-coin). */

.hero{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    grid-template-areas:"head coin" "foot coin";
    column-gap:24px;
    margin:0 0 40px;
    padding:28px 30px 26px;
    border-radius:22px;
    overflow:hidden;
}

.hero.no-coin{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"head" "foot";
}

.hero-head{grid-area:head;align-self:start}

.intro-date{
    font-size:13px;
    font-weight:500;
    color:var(--muted);
    margin-bottom:6px;
}

.hero-greet{
    font-size:32px;
    font-weight:680;
    letter-spacing:-.03em;
    line-height:1.12;
}

.hero-lead{
    margin-top:8px;
    font-size:15px;
    font-weight:500;
    color:var(--muted);
    letter-spacing:0;
    line-height:1.45;
}

.hero-coin{
    grid-area:coin;
    position:relative;
    align-self:center;
    height:270px;
    margin:-10px -12px -10px 0;
    opacity:0;
    transition:opacity .9s ease;
}

.hero-coin.ready{opacity:1}

.hero-coin canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    touch-action:pan-y;
    cursor:grab;
}

.hero-foot{
    grid-area:foot;
    align-self:end;
    margin-top:26px;
    min-width:0;
}

.hero-text{
    font-size:14px;
    color:var(--muted);
    line-height:1.6;
    max-width:52ch;
}

.hero-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px 18px;
    margin-top:16px;
}

.hero-btn{
    display:inline-flex;
    white-space:nowrap;
    align-items:center;
    gap:8px;
    height:40px;
    padding:0 16px;
    border-radius:10px;
    background:linear-gradient(160deg,#4a6cf0,#2f4fc4);
    color:#fff;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 18px -8px rgba(53,89,214,.7);
    transition:filter .15s ease, transform .15s ease;
}

.hero-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.hero-btn svg{transition:transform .2s ease}
.hero-btn:hover svg{transform:translateX(3px)}

.hero-link{
    font-size:14px;
    font-weight:600;
    color:var(--accent);
    text-decoration:none;
}

.hero-link:hover{text-decoration:underline}

/* ================= Groups ================= */

.group{
    margin-bottom:40px;
}

.group-head{
    display:flex;
    align-items:baseline;
    gap:12px;
    margin-bottom:14px;
}

.group-head h1,
.group-head h2{
    font-size:16px;
    font-weight:650;
    letter-spacing:-.01em;
}

.group-head p{
    font-size:13px;
    color:var(--faint);
}

/* ================= Calculator cards ================= */

.tools{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
}

.tools-2{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.tool{
    --c:#8aa4ff;
    position:relative;
    display:grid;
    grid-template-columns:auto 1fr auto;
    grid-template-areas:
        "icon . arrow"
        "name name name"
        "desc desc desc";
    align-items:start;
    align-content:start;
    padding:20px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    text-decoration:none;
    transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}

a.tool:hover{
    border-color:color-mix(in srgb, var(--c) 45%, var(--border));
    box-shadow:var(--shadow-hover);
    background:var(--surface-hover);
    transform:translateY(-2px);
}

/* Glossy, dimensional app-style icon: lit from the top, coloured shadow,
   leans toward the pointer (js/home.js sets --rx/--ry) */
.tool-icon{
    grid-area:icon;
    width:44px;
    height:44px;
    border-radius:13px;
    display:grid;
    place-items:center;
    margin-bottom:18px;
    color:#fff;
    background:
        radial-gradient(120% 90% at 30% 12%, color-mix(in srgb, var(--c) 35%, #fff) 0%, transparent 55%),
        linear-gradient(160deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c) 45%, color-mix(in srgb, var(--c) 62%, #000));
    box-shadow:
        inset 0 1.5px 1px rgba(255,255,255,.45),
        inset 0 -5px 10px color-mix(in srgb, var(--c) 55%, #000),
        0 9px 16px -7px color-mix(in srgb, var(--c) 75%, transparent);
    transform:perspective(420px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
    transition:transform .25s ease;
}

.tool-icon svg{width:21px;height:21px;filter:drop-shadow(0 1.5px 1.5px rgba(0,0,0,.3))}

.tool-name{
    grid-area:name;
    font-size:15px;
    font-weight:600;
    letter-spacing:-.01em;
    margin-bottom:4px;
}

.tool-desc{
    grid-area:desc;
    font-size:13px;
    color:var(--muted);
    line-height:1.5;
}

.tool-arrow{
    grid-area:arrow;
    width:18px;
    height:18px;
    color:var(--faint);
    transition:transform .2s ease, color .2s ease;
}

a.tool:hover .tool-arrow{
    color:var(--ink);
    transform:translateX(3px);
}

/* ---------------- Coming soon ---------------- */

.soon-row{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:14px;
    padding:14px 18px;
    border:1px dashed var(--border-strong);
    border-radius:var(--radius);
    color:var(--muted);
}

.soon-row .tool-icon{
    --c:#6b7589;
    width:36px;
    height:36px;
    border-radius:11px;
    margin:0;
    flex-shrink:0;
    opacity:.8;
}

.soon-row .tool-icon svg{width:17px;height:17px}

.soon-text{
    display:flex;
    flex-direction:column;
    min-width:0;
    flex:1;
}

.soon-text strong{
    font-size:14px;
    font-weight:600;
    color:var(--ink);
}

.soon-text span{font-size:12.5px}

.soon-badge{
    flex-shrink:0;
    font-size:12px;
    font-weight:600;
    color:var(--warn);
    background:color-mix(in srgb, var(--warn) 14%, transparent);
    padding:4px 10px;
    border-radius:999px;
    white-space:nowrap;
}

/* ================= Story cards (why / inspiration / gratitude) ================= */

.story{
    --c:#8aa4ff;
    display:flex;
    align-items:flex-start;
    gap:18px;
    padding:24px 26px;
    border-radius:18px;
}

.story .tool-icon{
    flex-shrink:0;
    margin:0;
}

.story-body{
    min-width:0;
    flex:1;
}

.story h2,
.story h3{
    font-size:17px;
    font-weight:650;
    letter-spacing:-.015em;
    margin-bottom:6px;
}

.story p{
    font-size:14px;
    color:var(--muted);
    line-height:1.6;
    max-width:62ch;
}

.story-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:12px;
    font-size:13.5px;
    font-weight:600;
    color:var(--accent);
    text-decoration:none;
}

.story-link svg{
    width:15px;
    height:15px;
    transition:transform .2s ease;
}

.story-link:hover svg{transform:translateX(3px)}

.pair{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.pair .story{height:100%}

/* About RKY Finance: three matching cards — icon on top, link at the bottom */
.trio{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}

.trio .story{
    height:100%;
    flex-direction:column;
    gap:14px;
}

.trio .story-body{
    display:flex;
    flex-direction:column;
    flex:1;
}

.trio .story-link{margin-top:auto;padding-top:12px}

.chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:10px;
    list-style:none;
}

.chips li{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:6px 12px 6px 10px;
    border-radius:999px;
    font-size:13px;
    font-weight:550;
    background:color-mix(in srgb, var(--heart) 12%, transparent);
    color:var(--ink);
}

.chips svg{
    width:13px;
    height:13px;
    color:var(--heart);
}

/* ================= About page ================= */

.page-head{
    margin-bottom:22px;
}

.page-head h1{
    font-size:30px;
    font-weight:680;
    letter-spacing:-.03em;
    line-height:1.15;
}

.page-head p{
    margin-top:6px;
    font-size:14.5px;
    color:var(--muted);
}

.intro .story-body p + p{margin-top:10px}

.intro b{color:var(--ink);font-weight:600}

.mail-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:16px;
    height:36px;
    padding:0 14px;
    border-radius:10px;
    border:1px solid var(--border-strong);
    font-size:13.5px;
    font-weight:550;
    color:var(--ink);
    text-decoration:none;
    transition:background .15s ease, border-color .15s ease;
}

.mail-pill svg{width:16px;height:16px;color:var(--muted)}

.mail-pill:hover{background:var(--accent-soft);border-color:transparent}

.section{
    margin-top:14px;
    padding:26px;
    border-radius:18px;
    background:var(--surface);
    border:1px solid var(--border);
}

.section-head{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:16px;
}

.section-head .tool-icon{margin:0;flex-shrink:0}

.section-head h2{
    font-size:18px;
    font-weight:650;
    letter-spacing:-.015em;
}

.section > p{
    font-size:14.5px;
    color:var(--muted);
    line-height:1.65;
    max-width:72ch;
}

.section > p + p,
.section > ul + p{margin-top:14px}

.q-list{
    list-style:none;
    display:grid;
    gap:10px;
    margin-top:14px;
}

.q-list li{
    position:relative;
    padding:14px 16px 14px 44px;
    border-radius:12px;
    background:color-mix(in srgb, var(--accent) 7%, transparent);
    font-size:14px;
    color:var(--muted);
    line-height:1.6;
}

.q-list li::before{
    content:"";
    position:absolute;
    left:16px;
    top:17px;
    width:16px;
    height:16px;
    border-radius:50%;
    background:var(--accent);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.1 9a3 3 0 015.8 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.1 9a3 3 0 015.8 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center/contain no-repeat;
}

.q-list b{color:var(--ink);font-weight:600}

.people{
    display:grid;
    gap:0;
}

.person{
    display:flex;
    gap:16px;
    padding:18px 0;
}

.person + .person{border-top:1px solid var(--border)}
.person:first-child{padding-top:4px}
.person:last-child{padding-bottom:0}

.person .tool-icon{
    width:38px;
    height:38px;
    border-radius:11px;
    margin:0;
    flex-shrink:0;
}

.person .tool-icon svg{width:18px;height:18px}

.person h3{
    font-size:15px;
    font-weight:600;
    letter-spacing:-.01em;
    margin-bottom:4px;
}

.person h3 i{
    font-style:normal;
    font-weight:500;
    font-size:13px;
    color:var(--faint);
}

.person p{
    font-size:14px;
    color:var(--muted);
    line-height:1.65;
    max-width:72ch;
}

.person p + p{margin-top:10px}

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

.faq-list{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
}

.faq-item + .faq-item{border-top:1px solid var(--border)}

.faq-item summary{
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:16px 20px;
    font-size:14.5px;
    font-weight:600;
    cursor:pointer;
    transition:background .15s ease;
}

.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{background:var(--surface-hover)}

.faq-item summary::after{
    content:"";
    flex:none;
    width:8px;
    height:8px;
    margin-right:4px;
    border-right:2px solid var(--faint);
    border-bottom:2px solid var(--faint);
    transform:rotate(45deg) translateY(-2px);
    transition:transform .2s ease;
}

.faq-item[open] summary::after{transform:rotate(-135deg) translateY(-2px)}

.faq-item p{
    padding:0 20px 18px;
    font-size:14px;
    line-height:1.65;
    color:var(--muted);
    max-width:78ch;
}

.faq-item p a{color:var(--accent);font-weight:500}

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

.site-footer{
    margin-top:56px;
    padding-top:32px;
    border-top:1px solid var(--border);
    font-size:13px;
    color:var(--muted);
}

.foot-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:18px 32px;
}

.foot-logo{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:15px;
    font-weight:650;
    color:var(--ink);
    text-decoration:none;
}

.foot-logo .brand-mark{view-transition-name:none}

.foot-mail{
    display:flex;
    align-items:center;
    gap:7px;
    margin-top:10px;
    width:fit-content;
    color:var(--muted);
    text-decoration:none;
}

.foot-mail:hover{color:var(--ink)}
.foot-mail svg{width:15px;height:15px}

.foot-links{
    display:flex;
    flex-wrap:wrap;
    gap:8px 22px;
    padding-top:4px;
}

.foot-links a{
    color:var(--muted);
    text-decoration:none;
}

.foot-links a:hover{color:var(--ink)}

.foot-legal{
    margin-top:28px;
    padding:22px 0 8px;
    border-top:1px solid var(--border);
    font-size:12.5px;
    line-height:1.6;
    color:var(--faint);
}

.foot-legal p + p{margin-top:6px}
.foot-legal strong{color:var(--muted);font-weight:600}

.foot-meta{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:4px 16px;
    margin-top:14px !important;
}

/* ================= Depth: glass, grain, glow =================
   Used on a few key surfaces only; the calculator cards stay calm. */

.glass{
    position:relative;
    isolation:isolate;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    box-shadow:var(--glass-shadow);
    -webkit-backdrop-filter:blur(18px) saturate(150%);
    backdrop-filter:blur(18px) saturate(150%);
}

/* lit top edge + a soft highlight that follows the pointer (js/home.js) */
.glass::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    border-radius:inherit;
    pointer-events:none;
    background:
        radial-gradient(280px circle at var(--mx,18%) var(--my,0%), var(--glass-spot), transparent 62%),
        linear-gradient(180deg, var(--glass-hi), transparent 36%);
}

/* fine film grain, so large surfaces don't look like flat plastic */
.glass::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    border-radius:inherit;
    pointer-events:none;
    opacity:var(--grain);
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* slow, blurred colour glow behind the top of the page */
.page-glow{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:100vh;
    height:100lvh;
    z-index:-1;
    pointer-events:none;
    overflow:hidden;
}

.page-glow::before{
    content:"";
    position:absolute;
    inset:-20% -15%;
    filter:blur(70px);
    background:
        radial-gradient(34% 40% at 74% 22%, var(--glow-a), transparent 70%),
        radial-gradient(30% 36% at 16% 16%, var(--glow-b), transparent 70%),
        radial-gradient(30% 36% at 48% 62%, var(--glow-c), transparent 70%),
        radial-gradient(28% 34% at 88% 78%, var(--glow-d), transparent 70%),
        radial-gradient(28% 34% at 10% 86%, var(--glow-e), transparent 70%);
    animation:glowdrift 16s ease-in-out infinite alternate;
}

@keyframes glowdrift{
    50%{transform:translate(4%,3%) rotate(-5deg) scale(1.08)}
    to{transform:translate(-4%,-3%) rotate(6deg) scale(1.04)}
}

/* ================= Aurora + grid =================
   A slowly turning colour light behind the page, and a glowing grid
   "floor" that drifts toward you at the bottom of the hero. */

.page-glow::after{
    content:"";
    position:absolute;
    inset:-25% -20%;
    filter:blur(80px);
    background:conic-gradient(from 0deg at 55% 45%,
        transparent, var(--glow-a) 10%, transparent 22%,
        var(--glow-d) 34%, transparent 46%,
        var(--glow-c) 58%, transparent 70%,
        var(--glow-e) 80%, transparent 90%,
        var(--glow-b) 96%, transparent);
    animation:aurora 26s linear infinite;
}

@keyframes aurora{to{transform:rotate(360deg)}}

.hero-floor{
    position:absolute;
    left:-20%;
    right:-20%;
    bottom:-8%;
    height:62%;
    z-index:-1;
    pointer-events:none;
    background:
        repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 44px),
        repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 44px);
    transform:perspective(420px) rotateX(62deg);
    transform-origin:50% 100%;
    -webkit-mask:linear-gradient(to top, #000 10%, transparent 90%);
            mask:linear-gradient(to top, #000 10%, transparent 90%);
    animation:floor 6s linear infinite;
}

@keyframes floor{to{background-position:0 0, 0 44px}}

/* ================= Tilt & shine =================
   Calculator cards lean toward the pointer (js/home.js sets --tx/--ty)
   with a soft light where the pointer is; the icon floats above the card. */

/* mouse / trackpad only — phones keep their flat list rows */
@media (hover:hover) and (pointer:fine){

    .tools{perspective:900px}

    a.tool{
        transform-style:preserve-3d;
        transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));
    }

    a.tool.tilting{
        transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateY(-4px);
        transition:transform .12s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

    a.tool::after{
        content:"";
        position:absolute;
        inset:0;
        border-radius:inherit;
        pointer-events:none;
        opacity:0;
        transition:opacity .2s ease;
        background:radial-gradient(240px circle at var(--sx,50%) var(--sy,0%), rgba(255,255,255,.55), transparent 60%);
        mix-blend-mode:soft-light;
    }

    a.tool:hover::after{opacity:1}
    a.tool .tool-icon{transform:translateZ(28px)}

}

/* sections below the first screen rise into view (js/home.js) */
.rise{
    opacity:0;
    transform:perspective(900px) rotateX(18deg) translateY(30px);
    transform-origin:50% 100%;      /* tilt away from the bottom edge, so it never sticks out sideways */
}

.rise.in{
    opacity:1;
    transform:none;
    transition:opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}

/* ================= Page transitions =================
   Home <-> About cross-fade, the ₹ mark stays put. Browsers without
   support simply open the page as before. */

@view-transition{navigation:auto}

.brand-mark{view-transition-name:rky-mark}

::view-transition-group(*){
    animation-duration:.36s;
    animation-timing-function:cubic-bezier(.2,.8,.2,1);
}

::view-transition-old(root),
::view-transition-new(root){animation-duration:.26s}

/* ================= Motion ================= */

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        transition:none !important;
        animation:none !important;
    }
    a.tool:hover{transform:none}
    @view-transition{navigation:none}
    .tool-icon,a.tool .tool-icon{transform:none}
    a.tool,a.tool.tilting{transform:none}
    .rise{opacity:1;transform:none}
}

/* ================= Responsive ================= */

@media (max-width:960px){

    .hero{grid-template-columns:minmax(0,1fr) 230px}
    .hero-coin{height:230px}

    .tools{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}

@media (max-width:760px){

    .pair{grid-template-columns:1fr}
    .trio{grid-template-columns:1fr}
    .trio .story{flex-direction:row}

}

/* Phones: calculators become a compact list — one row each, icon | text | chevron */
@media (max-width:560px){

    .topbar-inner{
        padding:12px 16px;
        gap:10px;
    }

    .topbar-actions{gap:6px}

    /* page links shrink to icon buttons */
    .nav{gap:6px;margin-right:0}
    .nav .nav-home{display:none}
    .nav-link{
        width:34px;
        padding:0;
        justify-content:center;
        border:1px solid var(--border);
    }
    .nav-link span{display:none}
    .nav-link svg{display:block}
    .nav-link[aria-current="page"]{border-color:transparent}

    .container{
        padding:22px 16px 40px;
    }

    .hero{
        grid-template-columns:minmax(0,1fr) 130px;
        grid-template-areas:"head coin" "foot foot";
        column-gap:6px;
        margin-bottom:30px;
        padding:20px 18px 18px;
        border-radius:18px;
    }

    .hero-greet{font-size:25px}
    .hero-lead{font-size:13.5px}

    .hero-coin{
        height:140px;
        align-self:start;
        margin:-16px -14px -18px 0;
    }

    .hero-foot{margin-top:12px}
    .hero-text{font-size:13.5px}

    .group{
        margin-bottom:30px;
    }

    .group-head{
        flex-direction:column;
        gap:2px;
        margin-bottom:12px;
    }

    .tools,
    .tools-2{
        grid-template-columns:1fr;
        gap:0;
        background:var(--surface);
        border:1px solid var(--border);
        border-radius:var(--radius);
        overflow:hidden;
    }

    .tool{
        grid-template-columns:auto 1fr auto;
        grid-template-areas:
            "icon name arrow"
            "icon desc arrow";
        column-gap:14px;
        align-items:center;
        align-content:center;
        padding:14px 16px;
        border:none;
        border-radius:0;
        background:transparent;
    }

    .tool + .tool{
        border-top:1px solid var(--border);
    }

    a.tool:hover{
        transform:none;
        box-shadow:none;
        background:var(--surface-hover);
    }

    .tool-icon{
        width:40px;
        height:40px;
        border-radius:12px;
        margin-bottom:0;
    }

    .tool-name{
        font-size:14.5px;
        margin-bottom:1px;
    }

    .tool-desc{
        font-size:12.5px;
        line-height:1.4;
    }

    .soon-row{
        margin-top:10px;
        padding:12px 16px;
    }

    .story{
        gap:14px;
        padding:18px;
        border-radius:16px;
    }

    .story .tool-icon{
        width:38px;
        height:38px;
        border-radius:11px;
    }

    .story .tool-icon svg{width:18px;height:18px}

    .story h2,.story h3{font-size:16px}

    .story p{font-size:13.5px}

    .pair,.trio{gap:10px}

    .page-head h1{font-size:25px}

    .section{
        padding:20px 18px;
        border-radius:16px;
    }

    .section-head{margin-bottom:12px}

    .section-head .tool-icon{
        width:38px;
        height:38px;
        border-radius:11px;
    }

    .section-head h2{font-size:16.5px}

    .person{gap:12px}

    .person .tool-icon{
        width:34px;
        height:34px;
        border-radius:10px;
    }

    .site-footer{margin-top:40px}
    .foot-links{gap:8px 18px}
    .faq-item summary{padding:14px 16px;font-size:14px}
    .faq-item p{padding:0 16px 16px;font-size:13.5px}

}

@media (max-width:360px){
    .brand-name{display:none}
}

/* ================= Larger type on laptops and desktops =================
   The sizes above are tuned for phones. On wider screens everything steps
   up one notch so it reads comfortably at arm's length. Phones and small
   tablets (≤760px) are unaffected. */

@media (min-width:761px){

    /* top bar */
    .brand-mark{width:34px;height:34px;font-size:18px;border-radius:9px}
    .brand-name{font-size:17px}
    .nav-link{height:38px;padding:0 14px;font-size:15px}

    /* hero */
    .intro-date{font-size:14.5px}
    .hero-greet{font-size:42px}
    .hero-lead{font-size:18px;margin-top:10px}
    .hero-text{font-size:16px}
    .hero-btn{height:46px;padding:0 20px;font-size:15.5px}
    .hero-link{font-size:15.5px}

    /* section headings */
    .group-head{margin-bottom:16px}
    .group-head h1,
    .group-head h2{font-size:20px}
    .group-head p{font-size:15px}

    /* calculator cards */
    .tool{padding:22px}
    .tool-icon{width:50px;height:50px;border-radius:14px}
    .tool-icon svg{width:24px;height:24px}
    .tool-name{font-size:17px;margin-bottom:5px}
    .tool-desc{font-size:14.5px}
    .soon-text strong{font-size:15.5px}
    .soon-text span{font-size:14px}
    .soon-badge{font-size:13px}

    /* About RKY Finance cards */
    .story h2,
    .story h3{font-size:19px}
    .story p{font-size:15.5px}
    .story-link{font-size:15px}
    .chips li{font-size:14px;padding:7px 13px 7px 11px}

    /* FAQ */
    .faq-item summary{padding:18px 22px;font-size:16px}
    .faq-item p{padding:0 22px 20px;font-size:15.5px}

    /* footer */
    .site-footer{font-size:14.5px}
    .foot-logo{font-size:16.5px}
    .foot-legal{font-size:13.5px}

    /* About page */
    .page-head h1{font-size:36px}
    .page-head p{font-size:17px}
    .intro .story-body p{font-size:16px}
    .mail-pill{height:40px;font-size:14.5px}
    .section-head h2{font-size:21px}
    .section > p{font-size:16px}
    .q-list li{font-size:15.5px}
    .person h3{font-size:17px}
    .person h3 i{font-size:14px}
    .person p{font-size:15.5px}
}