/* ============================================================
   GeoTrack — Core Stylesheet  (Premium Light v2)
   ============================================================ */

:root {
    --bg-primary:        #ffffff;
    --bg-secondary:      #f5f8fc;
    --bg-tertiary:       #eaf1f9;
    --bg-card:           #ffffff;
    --bg-dark:           #0a1f3d;
    --bg-dark-card:      #0f2a50;

    /* Brand Navy (primary) */
    --accent:            #0b2c5c;
    --accent-hover:      #081f42;
    --accent-light:      #e6edf7;
    --accent-mid:        #8fa7c9;

    /* Brand Green (secondary / success accent) */
    --accent-secondary:  #16a34a;
    --accent-secondary-hover: #15803d;
    --accent-secondary-light: #dcfce7;

    --text-primary:      #0a1f3d;
    --text-secondary:    #1e3a5f;
    --text-muted:        #5b6b82;
    --text-subtle:       #94a3b8;
    --text-on-dark:      #f1f5f9;
    --text-on-dark-muted:#a0b4cc;

    --border:            rgba(11, 44, 92, 0.08);
    --border-medium:     rgba(11, 44, 92, 0.14);
    --border-accent:     rgba(22, 163, 74, 0.25);

    --shadow-xs:   0 1px 2px rgba(11,44,92,0.05);
    --shadow-sm:   0 1px 4px rgba(11,44,92,0.06), 0 1px 2px rgba(11,44,92,0.04);
    --shadow-md:   0 4px 16px rgba(11,44,92,0.08), 0 2px 6px rgba(11,44,92,0.04);
    --shadow-lg:   0 12px 40px rgba(11,44,92,0.1), 0 4px 12px rgba(11,44,92,0.05);
    --shadow-xl:   0 24px 64px rgba(11,44,92,0.14), 0 8px 20px rgba(11,44,92,0.07);
    --shadow-glow: 0 0 48px rgba(22,163,74,0.2);

    --gradient-brand: linear-gradient(135deg, #0b2c5c 0%, #16a34a 100%);
    --gradient-brand-soft: linear-gradient(135deg, #0b2c5c 0%, #1e3a5f 60%, #16a34a 100%);
    --gradient-hero:  linear-gradient(160deg, #081f42 0%, #0b2c5c 40%, #0f3a2e 100%);

    --radius-xs:   4px;
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   20px;
    --radius-2xl:  28px;
    --radius-3xl:  36px;

    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition:      all 0.3s var(--ease-out);
    --transition-fast: all 0.18s var(--ease-out);

    --navbar-height: 72px;
    --content-max:   1280px;
}

/* ── Reset ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{background:var(--bg-primary);color:var(--text-primary);font-family:'Inter',system-ui,sans-serif;font-weight:400;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,textarea,select{font-family:inherit;font-size:inherit}
button{cursor:pointer;border:none;background:none}

/* ── Typography ─────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6{
    font-family:'Plus Jakarta Sans',sans-serif;
    font-weight:700;
    line-height:1.15;
    letter-spacing:-0.025em;
    color:var(--text-primary);
}
h1{font-size:clamp(2.25rem,5vw,3.75rem);letter-spacing:-0.035em;font-weight:800}
h2{font-size:clamp(1.75rem,3.5vw,2.5rem)}
h3{font-size:clamp(1.15rem,2vw,1.375rem)}
h4{font-size:1.125rem}
p{color:var(--text-muted);line-height:1.75}
strong{font-weight:600;color:var(--text-secondary)}

/* ── Layout ─────────────────────────────────────────────────── */
.container{width:100%;max-width:var(--content-max);margin:0 auto;padding:0 24px}
@media(min-width:768px){.container{padding:0 40px}}
@media(min-width:1280px){.container{padding:0 56px}}

.section{padding:96px 0;position:relative;z-index:2;background:var(--bg-primary)}
.section--sm{padding:64px 0}
.section--lg{padding:120px 0}
.section--alt{background:var(--bg-secondary);position:relative;z-index:2}
.section--dark{background:var(--bg-dark);color:var(--text-on-dark)}
.section--dark h2,.section--dark h3,.section--dark h4{color:var(--text-on-dark)}
.section--dark p{color:var(--text-on-dark-muted)}
.section--border-t{border-top:1px solid var(--border)}

/* ── Grid Helpers ───────────────────────────────────────────── */
.grid-2{display:grid;grid-template-columns:1fr;gap:24px}
.grid-3{display:grid;grid-template-columns:1fr;gap:20px}
.grid-4{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:640px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:768px){.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}

/* ── Buttons ────────────────────────────────────────────────── */
.btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:11px 24px;border-radius:var(--radius-md);
    font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:0.9375rem;
    letter-spacing:-0.01em;transition:var(--transition);
    position:relative;overflow:hidden;cursor:pointer;
    white-space:nowrap;text-decoration:none;border:1px solid transparent;
}

.btn--primary{
    background:var(--accent);color:#fff;border-color:var(--accent);
    box-shadow:0 1px 3px rgba(11,44,92,0.25),0 4px 12px rgba(11,44,92,0.15);
}
.btn--primary:hover{
    background:var(--accent-hover);
    box-shadow:0 4px 20px rgba(11,44,92,0.35),0 8px 24px rgba(11,44,92,0.2);
    transform:translateY(-2px);
}
.btn--primary:active{transform:translateY(0) scale(0.98)}

.btn--secondary{
    background:#fff;color:var(--text-primary);
    border-color:var(--border-medium);box-shadow:var(--shadow-xs);
}
.btn--secondary:hover{
    background:var(--bg-secondary);border-color:rgba(15,23,42,0.2);
    box-shadow:var(--shadow-sm);transform:translateY(-1px);
}

.btn--white{background:#fff;color:var(--accent-hover);border-color:#fff;font-weight:700}
.btn--white:hover{background:#e6f7ed;box-shadow:0 4px 20px rgba(0,0,0,0.15);transform:translateY(-2px)}

.btn--outline-white{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.3)}
.btn--outline-white:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.5)}

.btn--ghost{background:transparent;color:var(--accent);border-color:transparent;padding-left:4px;padding-right:4px}
.btn--ghost:hover{background:var(--accent-light)}

.btn--lg{padding:14px 32px;font-size:1rem}
.btn--sm{padding:8px 16px;font-size:0.875rem}

.btn .ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,0.25);transform:scale(0);animation:ripple-anim .55s linear;pointer-events:none}
@keyframes ripple-anim{to{transform:scale(4);opacity:0}}

/* ── Badge ──────────────────────────────────────────────────── */
.badge{
    display:inline-flex;align-items:center;gap:6px;
    padding:5px 12px;border-radius:100px;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:0.75rem;font-weight:600;letter-spacing:0.02em;
}
.badge--brand{background:var(--accent-light);color:var(--accent-hover);border:1px solid rgba(11,44,92,0.18)}
.badge--sky{background:var(--accent-secondary-light);color:#15803d;border:1px solid rgba(22,163,74,0.18)}
.badge--success{background:#d1fae5;color:#065f46;border:1px solid rgba(16,185,129,0.2)}
.badge--dark{background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.8);border:1px solid rgba(255,255,255,0.1)}

/* ── Section Header ─────────────────────────────────────────── */
.section-header{text-align:center;margin-bottom:56px}
.section-header--left{text-align:left}
.section-header__eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:0.8125rem;font-weight:600;
    letter-spacing:0.06em;text-transform:uppercase;
    color:var(--accent);margin-bottom:14px;
}
.section-header__title{margin-bottom:14px}
.section-header__subtitle{max-width:560px;margin:0 auto;font-size:1.0625rem;color:var(--text-muted);line-height:1.75}
.section-header--left .section-header__subtitle{margin-left:0}

/* ── Content Image (real images with hover polish) ──────────── */
.content-image{
    position:relative;
    display:block;
    margin:0;
    border-radius:var(--radius-xl);
    overflow:hidden;
    background:var(--bg-secondary);
    border:1px solid var(--border);
    box-shadow:var(--shadow-sm);
    transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .3s;
}
.content-image img{
    display:block;width:100%;height:100%;
    object-fit:cover;
    transition:transform .7s var(--ease-out);
}
.content-image:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-lg);
    border-color:rgba(11,44,92,0.15);
}
.content-image:hover img{transform:scale(1.03)}
.content-image--16-9{aspect-ratio:16/9}
.content-image--4-3 {aspect-ratio:4/3}
.content-image--3-2 {aspect-ratio:3/2}
.content-image--5-4 {aspect-ratio:5/4}
.content-image--1-1 {aspect-ratio:1/1}
.content-image__caption{
    position:absolute;left:14px;bottom:14px;
    padding:5px 12px;
    background:rgba(15,23,42,0.78);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    color:#fff;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:0.75rem;font-weight:600;
    letter-spacing:0.01em;
    border-radius:var(--radius-sm);
    opacity:0;transform:translateY(4px);
    transition:opacity .3s,transform .3s;
}
.content-image:hover .content-image__caption{opacity:1;transform:translateY(0)}

/* ── Image Placeholder ──────────────────────────────────────── */
.img-placeholder{
    position:relative;
    background:linear-gradient(145deg,#f1f5f9 0%,#e2e8f0 50%,#e6edf7 100%);
    border:1.5px dashed #cbd5e1;border-radius:var(--radius-xl);
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;transition:var(--transition);
}
.img-placeholder::before{
    content:'';position:absolute;inset:0;
    background-image:radial-gradient(rgba(148,163,184,0.08) 1px,transparent 1px);
    background-size:24px 24px;pointer-events:none;
}
.img-placeholder:hover{border-color:var(--accent-mid);background:linear-gradient(145deg,#e6edf7 0%,#d1e5f7 50%,#dbeafe 100%)}
.img-placeholder--16-9{aspect-ratio:16/9}
.img-placeholder--4-3{aspect-ratio:4/3}
.img-placeholder--3-2{aspect-ratio:3/2}
.img-placeholder--1-1{aspect-ratio:1/1}
.img-placeholder--5-4{aspect-ratio:5/4}
.img-placeholder--auto{min-height:200px}

.img-placeholder__inner{display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px;text-align:center;pointer-events:none;z-index:1;position:relative}
.img-placeholder__icon{width:44px;height:44px;border-radius:var(--radius-md);background:#dde3ef;display:flex;align-items:center;justify-content:center;color:#94a3b8}
.img-placeholder__icon svg{width:20px;height:20px}
.img-placeholder__label{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.8125rem;font-weight:600;color:#94a3b8}
.img-placeholder__sub{font-size:0.6875rem;color:#b0bec5;margin-top:-4px}

/* ── Breadcrumb ─────────────────────────────────────────────── */
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:0.875rem;color:var(--text-subtle);margin-bottom:20px}
.breadcrumb a{color:var(--text-subtle);transition:color .2s}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb__sep{opacity:0.5;font-size:0.75rem}

/* ── Page Hero (inner) ──────────────────────────────────────── */
.page-hero{
    padding:148px 0 68px;text-align:center;
    background:var(--bg-secondary);border-bottom:1px solid var(--border);
    position:relative;overflow:hidden;
}
.page-hero::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse 70% 50% at 50% 30%,rgba(11,44,92,0.06) 0%,transparent 70%);
    pointer-events:none;
}
.page-hero__title{margin-bottom:14px}
.page-hero__subtitle{max-width:540px;margin:0 auto;font-size:1.0625rem;color:var(--text-muted)}

/* ── Scroll reveal ──────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.reveal--from-left{transform:translateX(-20px)}.reveal--from-left.is-visible{transform:translateX(0)}
.reveal--from-right{transform:translateX(20px)}.reveal--from-right.is-visible{transform:translateX(0)}
.reveal--scale{transform:scale(0.95)}.reveal--scale.is-visible{transform:scale(1)}
.reveal--delay-1{transition-delay:.06s}.reveal--delay-2{transition-delay:.12s}.reveal--delay-3{transition-delay:.18s}
.reveal--delay-4{transition-delay:.24s}.reveal--delay-5{transition-delay:.3s}.reveal--delay-6{transition-delay:.36s}

/* ── Alert ──────────────────────────────────────────────────── */
.alert{padding:14px 18px;border-radius:var(--radius-md);margin-bottom:20px;font-size:0.9375rem;display:flex;align-items:center;gap:10px;font-weight:500}
.alert--success{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46}

/* ── Utility ────────────────────────────────────────────────── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.text-gradient{background:var(--gradient-brand);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline}
.divider{height:1px;background:var(--border);border:none}

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg-secondary)}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#94a3b8}

/* ── Magnetic hover (applied via JS) ────────────────────────── */
.magnetic-wrap{display:inline-block;transition:transform .35s var(--ease-spring)}

/* ── Card lift micro-interaction ─────────────────────────────── */
.lift{transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.lift:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}