@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@400;500;600;700;800&family=Lora:ital,wght@0,500;0,600;0,700;1,500;1,600;1,700&display=swap');

:root {
    --ink:#3a2e39; --paper:#fdfff7; --surface:#fdfff7;
    --warm:rgba(58,46,57,.09);
    --accent:#25938f; --accent-pale:rgba(37,147,143,.14); --accent-strong:#1e7774;
    --heat:#91272e;
    --green:#25938f;
    --mid:rgba(58,46,57,.78); 
    --light:rgba(58,46,57,.65); /* Increased opacity from .58 for A11y */
    --border:rgba(58,46,57,.18);
    --shadow-sm:0 1px 2px rgba(58,46,57,.08);
    --shadow-md:0 12px 40px rgba(58,46,57,.12);
    --radius:10px;
    --serif:'Lora',Georgia,serif;
    --sans:'Inter',system-ui,sans-serif;
    --mono:'Fira Code',monospace;
    --w:1180px;
    --c-heat:#c94a35; --c-pop:#7e5a9b; --c-socio:#0f8f68;
    --c-built:#3a7baa;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
    font-family:var(--sans);
    background-color: var(--surface);
    color:var(--ink);
    line-height:1.62;
    font-weight:500;
}

/* Animations */
@keyframes fadeLift{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeSlide{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:translateX(0)}}
@keyframes activeGlow{0%,100%{box-shadow:0 0 0 rgba(37,147,143,0)}50%{box-shadow:0 0 24px rgba(37,147,143,.2)}}
@keyframes mapBreath{0%,100%{box-shadow:var(--shadow-md),0 0 0 rgba(37,147,143,0)}50%{box-shadow:var(--shadow-md),0 0 34px rgba(37,147,143,.18)}}
@keyframes dashPulse{to{stroke-dashoffset:-28}}
@keyframes spin { to { transform: rotate(360deg); } }

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

/* Generic Section Headers */
.sec-inner{max-width:var(--w);margin:0 auto;position:relative;z-index:1}
.sec-tag{font-family:var(--mono);font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-strong);margin-bottom:12px;display:block}
.sec-h{font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.6rem);font-weight:700;line-height:1.15;margin-bottom:14px}
.sec-sub{font-size:1rem;color:var(--mid);max-width:580px;line-height:1.65;margin-bottom:52px}

/* Shared Page Hero */
.page-hero{
    position:relative;
    margin-top:58px;
    padding:112px 40px 82px;
    overflow:hidden;
    color:var(--paper);
    background:linear-gradient(165deg,#3a2e39 0%,#2f2630 48%,#211a20 100%);
}
.page-hero::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        radial-gradient(ellipse 75% 55% at 75% 35%,rgba(37,147,143,.14) 0%,transparent 60%),
        radial-gradient(ellipse 45% 70% at 12% 85%,rgba(145,39,46,.10) 0%,transparent 55%);
    pointer-events:none;
}
.page-hero::after{
    content:'';
    position:absolute;
    right:-80px;
    top:50%;
    width:400px;
    height:400px;
    border:1px solid rgba(37,147,143,.14);
    border-radius:50%;
    box-shadow:0 0 0 40px rgba(37,147,143,.06),0 0 0 80px rgba(37,147,143,.035),0 0 0 120px rgba(37,147,143,.025);
    transform:translateY(-50%);
    pointer-events:none;
}
.page-hero-inner{
    position:relative;
    z-index:1;
    max-width:var(--w);
    margin:0 auto;
    animation:fadeLift .7s ease both;
}
.page-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin:0 0 28px;
    padding:6px 16px;
    border:1px solid rgba(37,147,143,.42);
    border-radius:999px;
    color:#6ed0ca;
    font-family:var(--mono);
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.16em;
    line-height:1.2;
    text-transform:uppercase;
}
.page-eyebrow::before{
    content:'';
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 18px rgba(37,147,143,.55);
    flex:0 0 auto;
}
.page-hero h1{
    max-width:760px;
    margin:0 0 24px;
    color:var(--paper);
    font-family:var(--serif);
    font-size:clamp(2.8rem,5.2vw,5.05rem);
    font-weight:700;
    line-height:1.04;
}
.page-hero h1 em{
    color:var(--heat);
    font-style:italic;
    font-weight:600;
}
.page-hero p:not(.page-eyebrow){
    max-width:640px;
    margin:0;
    color:rgba(253,255,247,.78);
    font-size:1.06rem;
    font-weight:600;
    line-height:1.72;
}

/* Main Navigation */
nav.top-nav {
    position:fixed;top:0;left:0;right:0;height:58px;
    background:#fdfff7!important;backdrop-filter:saturate(1.2) blur(16px);
    border-bottom:1px solid var(--border);z-index:1000;
    display:flex;align-items:center;
    box-shadow:var(--shadow-sm);
}
nav.top-nav .nav-inner{
    max-width:var(--w)!important;margin:0 auto!important;padding:0 32px!important;width:100%!important;
    display:flex!important;align-items:center!important;justify-content:space-between!important;
}
nav.top-nav .nav-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    text-transform: none;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    transition: color .18s ease;}
nav.top-nav .nav-logo:hover {color: var(--accent-strong);}
nav.top-nav .nav-logo-img {width: 26px;height: 26px;display: block;flex-shrink: 0;transition: transform .18s ease;}
nav.top-nav .nav-logo:hover .nav-logo-img {transform: scale(1.06);}
nav.top-nav .nav-links{display:flex!important;gap:20px!important;align-items:center!important}
nav.top-nav .nav-lk{font-family:var(--mono);font-size:0.65rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--light);text-decoration:none;transition:.2s}
nav.top-nav .nav-lk:hover{color:var(--ink)}
nav.top-nav .nav-lk--active{color:var(--accent-strong);box-shadow:inset 0 -2px 0 var(--accent)}
nav.top-nav .nav-lk--active:hover{color:var(--accent-strong)}
nav.top-nav .nav-btn{font-family:var(--mono);font-size:0.65rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;background:var(--ink);color:var(--paper);text-decoration:none;padding:10px 20px;border-radius:999px;transition:.2s;box-shadow:var(--shadow-sm)}
nav.top-nav .nav-btn:hover{background:var(--accent-strong);transform:translateY(-1px)}

/* Dashboard: fixed top nav + full-height layout */
body.page-dashboard {
    padding-top: 58px;
    box-sizing: border-box;
    height: 100vh;
}

/* Footer */
footer{background:linear-gradient(180deg,#3a2e39,#211a20);color:rgba(253,255,247,.58);padding:40px 32px;text-align:center;border-top:1px solid rgba(253,255,247,.12)}
footer p{font-family:var(--mono);font-size:.65rem;letter-spacing:.06em}
footer a{color:rgba(253,255,247,.68);text-decoration:none}
footer a:hover{color:#fdfff7}

/* Utility */
.spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(58,46,57,.2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

@media(max-width:680px){
    .page-hero{padding:92px 22px 62px}
    .page-hero::after{display:none}
}