/* =========================================================
   SporOkullari.org — Light, Sporty, Corporate
   Brand colors from logo: Navy #202060, Orange #E04020
   Includes: button color fixes, motion/hover, scroll reveal
   ========================================================= */

/* -------------------- RESET -------------------- */
:root{
    --bg:#f6f7fb;
    --paper:#ffffff;

    --text:#111326;
    --muted:#5f657f;

    --line:rgba(32,32,96,.14);

    --brand:#202060;   /* navy */
    --brand2:#E04020;  /* orange */

    --brand-soft: rgba(32,32,96,.10);
    --brand2-soft: rgba(224,64,32,.12);

    --radius:18px;
    --radius2:22px;

    --shadow: 0 18px 45px rgba(17,19,38,.12);
    --shadow2: 0 10px 30px rgba(17,19,38,.10);

    --focus: 0 0 0 4px rgba(224,64,32,.18);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    color:var(--text);
    line-height:1.55;

    /* sporty aura */
    background:
            radial-gradient(900px 520px at 10% 5%, rgba(32,32,96,.14), transparent 55%),
            radial-gradient(850px 520px at 90% 10%, rgba(224,64,32,.12), transparent 55%),
            radial-gradient(900px 520px at 55% 95%, rgba(32,32,96,.10), transparent 55%),
            linear-gradient(180deg, #fbfbfe 0%, var(--bg) 35%, #f1f3fb 100%);
}

img{ max-width:100%; display:block; }


/* NAV DROPDOWN */
.nav-dd{
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 10px;
    border-radius: 12px;
    color: var(--muted);
    font-weight: 850;
}

.nav-dd-btn{
  appearance: none;
  background: transparent;
  border: 0;
  padding: 10px 10px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
}

.nav-dd-btn:hover{
  background: rgba(40,46,99,.06);
}

.nav-dd-caret{
  font-size: .9em;
  opacity: .75;
}

.nav-dd-menu{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 260px;
  background: #fff;
  border: 1px solid rgba(40,46,99,.18);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 18px 50px rgba(0,0,0,.12);
  display: none;
  z-index: 999;
}

.nav-dd-menu a{
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: #282e63;
  white-space: nowrap;
}

.nav-dd-menu a:hover{
  background: rgba(231,74,35,.10);
  color: #e74a23;
}

.nav-dd.open .nav-dd-menu{
  display: block;
}

/* Mobilde dropdown menüyü daha rahat göster */
@media (max-width: 920px){
  .nav.open .nav-dd{ width: 100%; }
  .nav.open .nav-dd-btn{
    width: 100%;
    justify-content: space-between;
    padding: 12px 10px;
  }
  .nav.open .nav-dd-menu{
    position: static;
    display: none;
    margin-top: 8px;
    width: 100%;
    box-shadow: none;
  }
  .nav.open .nav-dd.open .nav-dd-menu{
    display: block;
  }
}



.container{
    width:min(1120px, calc(100% - 40px));
    margin-inline:auto;
}

.muted{ color:var(--muted); }
.small{ font-size:13px; }

a{
    color:inherit;
    text-decoration:none;
}

/* Make sure links don't break buttons */
a.btn{ text-decoration:none !important; }

/* -------------------- ACCESSIBILITY -------------------- */
.skip-link{
    position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
    left:16px; top:16px; width:auto; height:auto;
    padding:10px 12px;
    border-radius:12px;
    background:var(--paper);
    border:1px solid var(--line);
    box-shadow: var(--shadow2);
    z-index:9999;
}

:focus-visible{
    outline:none;
    box-shadow: var(--focus);
    border-radius:12px;
}

/* -------------------- TOPBAR -------------------- */
 
.topbar{
    background: rgba(255,255,255,.70);
    border-bottom:1px solid var(--line);
    backdrop-filter: blur(10px);
}
.topbar-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 0;
}
.topbar-left{ display:flex; align-items:center; gap:10px; }
.dot{ width:9px; height:9px; border-radius:999px; display:inline-block; }
.dot-green{ background: #1bbf7a; box-shadow: 0 0 0 4px rgba(27,191,122,.18); }
.topbar-right{ display:flex; align-items:center; gap:10px; }
.top-link{ color:var(--muted); font-weight:800; }
.top-link:hover{ color:var(--brand); }
.sep{ color: rgba(17,19,38,.25); }

/* -------------------- HEADER -------------------- */
.site-header{
    position:sticky; top:0; z-index:50;
    background: rgba(255,255,255,.78);
    border-bottom:1px solid var(--line);
    backdrop-filter: blur(12px);
}
.header-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 0;
    gap:14px;
}

.brand{
    display:flex; align-items:center; gap:12px;
}
.brand img{ border-radius:12px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text strong{ font-size:16px; letter-spacing:.2px; }
.brand-text span{ font-size:12px; color:var(--muted); margin-top:3px; }

.nav{
    display:flex; align-items:center; gap:10px;
}
.nav a{
    padding:10px 10px;
    border-radius:12px;
    color:var(--muted);
    font-weight:850;
}
.nav a:hover{
    background: rgba(32,32,96,.06);
    color:var(--brand);
}
.nav a[aria-current="page"]{
    color:var(--brand);
    background: rgba(32,32,96,.08);
}

/* -------------------- BUTTONS (FIXED) -------------------- */
/* This block is designed to defeat any global a{} color rules */
.btn,
a.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:12px 16px;
    border-radius:14px;

    border:1px solid var(--line);
    background: rgba(255,255,255,.92);

    color: var(--text) !important; /* HARD FIX */
    font-weight:950;

    box-shadow: 0 10px 20px rgba(17,19,38,.08);
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease, border-color .22s ease;
}

.btn:hover,
a.btn:hover{
    transform: translateY(-2px);
    filter: brightness(1.01);
    box-shadow: 0 16px 28px rgba(17,19,38,.12);
}
.btn:active,
a.btn:active{
    transform: translateY(0);
}

.btn-primary,
a.btn-primary{
    border:0 !important;
    color:#fff !important; /* HARD FIX */
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%);
    background-size: 180% 180%;
    animation: gradMove 6s ease infinite;
    box-shadow: 0 18px 34px rgba(32,32,96,.18);
}
.btn-primary:hover,
a.btn-primary:hover{
    filter: brightness(1.03);
}

.btn-secondary,
a.btn-secondary{
    border:1px solid rgba(32,32,96,.22) !important;
    background: rgba(32,32,96,.08) !important;
    color: var(--brand) !important;
    box-shadow: 0 10px 20px rgba(32,32,96,.10);
}

.btn-ghost,
a.btn-ghost{
    background: transparent !important;
    box-shadow:none !important;
    border:1px solid rgba(32,32,96,.18) !important;
    color: var(--brand) !important;
}

@keyframes gradMove{
    0%{ background-position: 0% 50%; }
    50%{ background-position: 100% 50%; }
    100%{ background-position: 0% 50%; }
}

/* Hamburger */
.nav-toggle{
    display:none;
    width:44px; height:40px;
    border-radius:14px;
    border:1px solid var(--line);
    background: rgba(255,255,255,.92);
}
.nav-toggle span{
    display:block; height:2px; width:18px;
    background:var(--brand);
    margin:5px auto;
    border-radius:2px;
}

/* -------------------- HERO -------------------- */
.hero{
    padding: 42px 0 18px;
}
.hero-grid{
    display:grid;
    grid-template-columns: 1.12fr .88fr;
    gap:26px;
    align-items:start;
}

.pill{
    display:inline-flex; align-items:center; gap:10px;
    padding:8px 12px;
    border-radius:999px;
    border:1px solid rgba(32,32,96,.18);
    background: rgba(255,255,255,.86);
    color: var(--muted);
    font-weight:900;
    font-size:13px;
}
.pill-badge{
    padding:5px 10px;
    border-radius:999px;
    color:#fff;
    font-weight:1000;
    background: linear-gradient(135deg, var(--brand2), var(--brand));
}

h1{
    margin:14px 0 10px;
    font-size: clamp(34px, 4.4vw, 52px);
    line-height:1.06;
    letter-spacing:-.9px;
}
.grad{
    background: linear-gradient(135deg, var(--brand), var(--brand2));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.lead{
    margin:0 0 14px;
    color: var(--muted);
    font-size: 18px;
}

/* sporty underline accent */
.hero-copy h1::after{
    content:"";
    display:block;
    width: 90px;
    height: 6px;
    margin-top: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand2), var(--brand));
}

.cta-row{
    display:flex; gap:12px; flex-wrap:wrap;
    margin: 14px 0 14px;
}

.trust-row{
    display:flex; gap:12px; flex-wrap:wrap;
    margin-top: 12px;
}
.trust-item{
    display:flex; align-items:center; gap:10px;
    padding:12px 14px;
    border-radius: 16px;
    border:1px solid rgba(32,32,96,.14);
    background: rgba(255,255,255,.92);
    box-shadow: var(--shadow2);
    transition: transform .22s ease, box-shadow .22s ease;
}
.trust-item:hover{
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(17,19,38,.12);
}
.trust-icon{
    width:36px; height:36px;
    border-radius:14px;
    display:grid; place-items:center;
    background: linear-gradient(135deg, rgba(32,32,96,.12), rgba(224,64,32,.12));
}

/* -------------------- HERO VISUAL (SPORTY) -------------------- */
.hero-visual{
    position:relative;
    border-radius: var(--radius2);
}

/* stadium lines pattern */
.hero-visual::before{
    content:"";
    position:absolute; inset:-18px;
    border-radius: 26px;
    background:
            linear-gradient(transparent 0, transparent 14px, rgba(32,32,96,.06) 14px, rgba(32,32,96,.06) 15px) 0 0/100% 16px;
    opacity:.55;
    z-index:0;
    mask-image: radial-gradient(closest-side at 55% 55%, #000 60%, transparent 100%);
}

.glow{
    position:absolute; inset:-26px;
    background:
            radial-gradient(240px 180px at 20% 20%, rgba(32,32,96,.22), transparent 60%),
            radial-gradient(240px 180px at 75% 15%, rgba(224,64,32,.22), transparent 60%),
            radial-gradient(260px 200px at 45% 95%, rgba(32,32,96,.16), transparent 60%);
    filter: blur(12px);
    z-index:0;
    animation: glowShift 5.5s ease-in-out infinite;
}

.panel-mock{
    position:relative; z-index:1;
    border-radius: var(--radius2);
    border:1px solid rgba(32,32,96,.16);
    background: rgba(255,255,255,.94);
    box-shadow: var(--shadow);
    overflow:hidden;
    animation: floaty 6s ease-in-out infinite;
    transition: transform .22s ease, box-shadow .22s ease;
}
.panel-mock:hover{
    transform: translateY(-6px) rotate(-.15deg);
    box-shadow: 0 28px 60px rgba(17,19,38,.16);
}

.panel-top{
    display:flex; align-items:center; gap:12px;
    padding:12px 14px;
    border-bottom:1px solid rgba(32,32,96,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
}
.traffic{ display:flex; gap:6px; }
.traffic span{
    width:10px; height:10px; border-radius:999px;
    background: rgba(32,32,96,.20);
}
.traffic span:nth-child(1){ background: rgba(224,64,32,.85); }
.traffic span:nth-child(2){ background: rgba(255,176,0,.75); }
.traffic span:nth-child(3){ background: rgba(27,191,122,.80); }

.panel-title{ font-weight:1000; color: var(--brand); }
.panel-chip{
    margin-left:auto;
    font-size:12px;
    padding:6px 10px;
    border-radius:999px;
    color: var(--brand);
    background: rgba(32,32,96,.08);
    border: 1px solid rgba(32,32,96,.14);
    font-weight:1000;
}

.panel-body{ padding:14px; display:grid; gap:12px; }

.kpis{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:10px;
}
.kpi{
    border-radius:18px;
    border:1px solid rgba(32,32,96,.10);
    background: rgba(255,255,255,.96);
    padding:12px;
}
.kpi-label{ font-size:12px; color: var(--muted); font-weight:900; }
.kpi-value{ font-size:22px; font-weight:1100; margin-top:4px; letter-spacing:-.2px; }

.kpi-a{ box-shadow: inset 0 0 0 2px rgba(32,32,96,.10); }
.kpi-b{ box-shadow: inset 0 0 0 2px rgba(224,64,32,.12); }
.kpi-c{ box-shadow: inset 0 0 0 2px rgba(32,32,96,.08); }

.mini-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
}
.mini-card{
    border-radius:18px;
    border:1px solid rgba(32,32,96,.10);
    background: rgba(255,255,255,.96);
    padding:12px;
}
.mini-title{ font-weight:1000; margin-bottom:8px; color: var(--brand); }
.mini-bar{
    height:10px; border-radius:999px;
    background: rgba(32,32,96,.10);
    margin:8px 0;
}
.mini-bar.w80{ width:80%; }
.mini-bar.w70{ width:70%; }
.mini-bar.w60{ width:60%; }
.mini-bar.w50{ width:50%; }

.table{
    border-radius:18px;
    border:1px solid rgba(32,32,96,.10);
    overflow:hidden;
}
.t-row{
    display:grid;
    grid-template-columns: 1.5fr .7fr .7fr;
    gap:10px;
    padding:10px 12px;
    background: rgba(255,255,255,.98);
    border-bottom:1px solid rgba(32,32,96,.08);
    font-weight:800;
}
.t-row.head{
    background: rgba(32,32,96,.06);
    color: var(--muted);
    font-weight:1000;
}
.t-row:last-child{ border-bottom:0; }

.tag{
    justify-self:start;
    padding:6px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:1000;
    border:1px solid rgba(32,32,96,.10);
}
.tag.ok{
    background: rgba(27,191,122,.14);
    border-color: rgba(27,191,122,.28);
}
.tag.warn{
    background: rgba(255,176,0,.16);
    border-color: rgba(255,176,0,.28);
}

.badge-strip{
    position:relative; z-index:1;
    display:flex; flex-wrap:wrap; gap:8px;
    margin-top:12px;
}
.b{
    padding:8px 10px;
    border-radius:999px;
    background: rgba(255,255,255,.92);
    border:1px solid rgba(32,32,96,.12);
    font-weight:1000;
    color: var(--brand);
    transition: transform .2s ease, background .2s ease;
}
.b:hover{
    transform: translateY(-2px);
    background: rgba(224,64,32,.08);
}

/* Animations */
@keyframes floaty{
    0%,100%{ transform: translateY(0px); }
    50%{ transform: translateY(-10px); }
}
@keyframes glowShift{
    0%{ opacity:.55; transform: translateY(0); }
    50%{ opacity:.85; transform: translateY(-6px); }
    100%{ opacity:.55; transform: translateY(0); }
}

/* -------------------- SECTIONS -------------------- */
.section{ padding: 46px 0; }
.section.alt{
    background: rgba(255,255,255,.60);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.section-head{ margin-bottom: 18px; }
.section-head h2{
    margin:0 0 6px;
    font-size: 30px;
    letter-spacing:-.4px;
}

/* -------------------- CARDS -------------------- */
.cards{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:14px;
}

.card{
    border:1px solid rgba(32,32,96,.12);
    background: rgba(255,255,255,.92);
    border-radius: var(--radius);
    padding:16px;
    box-shadow: var(--shadow2);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    position:relative;
    overflow:hidden;
}

/* sporty top stripe */
.card::before{
    content:"";
    position:absolute;
    left:0; top:0; right:0;
    height:5px;
    background: linear-gradient(90deg, var(--brand2), var(--brand));
    opacity:.85;
}

.card:hover{
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(17,19,38,.14);
    border-color: rgba(224,64,32,.22);
}

.card h3{ margin:10px 0 6px; font-size:18px; }
.card p{ margin:0 0 10px; color: var(--muted); }

.card-icon{
    width:46px; height:46px;
    border-radius:16px;
    display:grid; place-items:center;
    font-size:20px;
    font-weight:1000;
    border:1px solid rgba(32,32,96,.12);
    background: linear-gradient(135deg, rgba(32,32,96,.10), rgba(224,64,32,.10));
}

.text-link{
    color: var(--brand);
    font-weight:1000;
}
.text-link:hover{
    color: var(--brand2);
}

/* -------------------- SPLIT + INFO -------------------- */
.split{
    display:grid;
    grid-template-columns: 1.05fr .95fr;
    gap:18px;
    align-items:start;
}

.bullets{ margin:14px 0 16px; padding-left:18px; color: var(--muted); }
.bullets li{ margin:8px 0; }
.bullets strong{ color: var(--text); }

.info-stack{ display:grid; gap:12px; }
.info-card{
    border:1px solid rgba(32,32,96,.12);
    background: rgba(255,255,255,.94);
    border-radius: var(--radius);
    padding:16px;
    box-shadow: var(--shadow2);
    transition: transform .22s ease, box-shadow .22s ease;
}
.info-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 22px 40px rgba(17,19,38,.12);
}

.info-top{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.chip{
    padding:7px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:1000;
    border:1px solid rgba(32,32,96,.12);
    color: var(--brand);
    background: rgba(32,32,96,.06);
}

/* -------------------- FAQ -------------------- */
.faq{ display:grid; gap:10px; }
details{
    border:1px solid rgba(32,32,96,.12);
    background: rgba(255,255,255,.94);
    border-radius: var(--radius);
    padding:12px 14px;
    box-shadow: var(--shadow2);
    transition: transform .22s ease, box-shadow .22s ease;
}
details:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(17,19,38,.12);
}
summary{ cursor:pointer; font-weight:1100; color: var(--brand); }
details p{ color: var(--muted); margin:10px 0 0; }

/* -------------------- CTA -------------------- */
.cta{
    padding: 42px 0;
    background:
            radial-gradient(700px 320px at 15% 30%, rgba(224,64,32,.14), transparent 60%),
            radial-gradient(700px 320px at 85% 70%, rgba(32,32,96,.14), transparent 60%),
            rgba(255,255,255,.65);
    border-top:1px solid rgba(32,32,96,.12);
    border-bottom:1px solid rgba(32,32,96,.12);
}
.cta-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}

/* -------------------- FOOTER -------------------- */
.site-footer{ padding: 34px 0 22px; }
.footer-grid{
    display:grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap:18px;
}
.site-footer h3{
    margin:0 0 10px;
    font-size:13px;
    color: var(--muted);
    text-transform:uppercase;
    letter-spacing:.12em;
}
.site-footer a{
    display:block;
    color: var(--muted);
    padding:6px 0;
    font-weight:850;
}
.site-footer a:hover{ color: var(--brand2); }

.footer-bottom{
    margin-top:18px;
    padding-top:14px;
    border-top:1px solid rgba(32,32,96,.12);
}

/* Dropdown button = nav link ile aynı tipografi */
.nav-dd-btn{
  font: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;

  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;              /* nav link ile hizala */
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Nav linklerde padding varsa button’a da ver (gerekirse) */
.nav .nav-dd-btn{
  padding: 10px 12px !important;      /* sizde nav a padding’i neyse ona yakın */
  border-radius: 12px !important;
}

/* Hover davranışı nav link ile uyumlu */
.nav .nav-dd-btn:hover{
  background: rgba(40,46,99,.06) !important;
}

/* Caret boyutu */
.nav-dd-caret{
  font-size: .85em !important;
  opacity: .7 !important;
}

.nav a,
.nav-dd-btn{
  font-family: inherit !important;
}



.nav-dd.open .nav-dd-caret{ transform: rotate(180deg); transition: .15s; 


/* ===== Header Logo Only (GLOBAL) ===== */
.site-header{
  padding: 6px 0;
}

.brand.brand-logo-only{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding: 6px 0;
}

.brand.brand-logo-only img{
  height: 42px;      /* desktop ideal */
  width: auto;
  max-width: 240px;  /* taşmayı engeller */
  display:block;
}

/* mobil */
@media (max-width: 768px){
  .brand.brand-logo-only img{
    height: 36px;
    max-width: 200px;
  }
}

/* ===== Büyük Footer ===== */
.site-footer-lg{
  background: #fafbff;
  border-top: 1px solid var(--moby-border);
  margin-top: 60px;
}

.footer-main{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 36px;
  padding: 48px 0;
}

.footer-col h4{
  margin-bottom: 14px;
  font-size: 15px;
  color: var(--moby-navy);
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 14px;
}
.footer-brand img{
  height: 34px;
}

.footer-text{
  font-size: 14px;
  line-height: 1.6;
  color: rgba(40,46,99,.78);
}

/* Link listesi */
.footer-links ul{
  list-style:none;
  padding:0;
  margin:0;
}
.footer-links li{
  margin-bottom: 8px;
}
.footer-links a{
  font-size: 14px;
  color: rgba(40,46,99,.8);
}
.footer-links a:hover{
  color: var(--moby-orange);
}

/* MobyCoach kutusu */
.moby-box{
  background:#fff;
  border:1px solid var(--moby-border);
  border-radius:16px;
  padding:18px;
}
.moby-box img{
  height: 32px;
  margin-bottom: 10px;
}
.moby-box p{
  font-size: 14px;
  line-height:1.5;
  margin-bottom: 12px;
  color: rgba(40,46,99,.78);
}

/* Alt bant */
.footer-bottom{
  border-top:1px solid var(--moby-border);
  padding:14px 0;
  font-size: 13px;
  color: rgba(40,46,99,.6);
}
.footer-bottom-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* Mobil */
@media(max-width: 900px){
  .footer-main{
    grid-template-columns: 1fr;
  }
  .footer-bottom-inner{
    flex-direction:column;
    gap:6px;
  }
}


/* Global font fix */
:root{
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
}
html, body{
  font-family: var(--font-sans);
}
button, input, select, textarea{
  font-family: inherit;
}



/* -------------------- REVEAL (optional, needs small JS) -------------------- */
.reveal{
    opacity:0;
    transform: translateY(18px);
    transition: opacity .55s ease, transform .55s ease;
}
.reveal.in{
    opacity:1;
    transform: translateY(0);
}

/* -------------------- RESPONSIVE -------------------- */
@media (max-width: 920px){
    .hero-grid, .split{ grid-template-columns: 1fr; }
    .cards{ grid-template-columns: repeat(2,1fr); }
    .footer-grid{ grid-template-columns: 1fr; }
    .nav-toggle{ display:block; }

    .nav{
        position:absolute;
        right:20px; top:62px;
        display:none;
        flex-direction:column;
        align-items:stretch;
        width:min(340px, calc(100% - 40px));
        padding:12px;
        border:1px solid rgba(32,32,96,.12);
        border-radius:18px;
        background: rgba(255,255,255,.96);
        box-shadow: var(--shadow);
    }
    .nav.open{ display:flex; }
}

@media (max-width: 560px){
    .cards{ grid-template-columns: 1fr; }
    .kpis{ grid-template-columns: 1fr; }
    .mini-grid{ grid-template-columns: 1fr; }
}



/* -------------------- REDUCED MOTION -------------------- */
@media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}