/* --------------- */
/*  Design Tokens  */
/* --------------- */
:root{
  --gold:#FFD166;      --gold-dark:#F4B400;
  --ink:#1F2937;       --body:#4B5563;
  --canvas:#FAFAFA;    --surface:#FFFFFF;
  --line:#E5E7EB;      --accent:#2DD4BF;

  --container:1120px;
  --radius:14px;
  --shadow:0 8px 24px rgba(0,0,0,.06);
  --shadow-hover:0 12px 30px rgba(0,0,0,.10);
}

html[data-theme="light"]{
  --canvas:#FAFAFA; --surface:#FFFFFF; --ink:#1F2937; --body:#4B5563; --line:#E5E7EB;
  --gold:#FFD166; --gold-dark:#F4B400;
}
html[data-theme="dark"]{
  --canvas:#0B0F14; --surface:#0F141A; --ink:#E5E7EB; --body:#B6BDC6; --line:#1F2937;
  --gold:#F1C40F;  --gold-dark:#D4AC0D;
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--body); background:var(--canvas); font-size:18px; line-height:1.6;
}
h1,h2,h3{font-family:Poppins, Inter, Arial, sans-serif; color:var(--ink); margin:0 0 .6rem}
h1{font-size: clamp(28px, 5vw, 44px)}
h2{font-size: clamp(22px, 3.3vw, 28px)}
p{margin:.25rem 0 1rem}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block; border-radius:12px}
.container{max-width:var(--container); margin:0 auto; padding:0 20px}
::selection{background:var(--gold); color:#111}
.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}

/* Theme transitions */
body,.site-header,.quick-card,.home-about,.site-footer,.nav-links{
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* -------- Navbar -------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--surface); border-bottom:1px solid var(--line);
  backdrop-filter: blur(8px);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0}
.brand{font-weight:700; letter-spacing:.06em; white-space:nowrap}

/* controls: theme, lang, burger */
.controls{display:flex; align-items:center; gap:10px}
.theme-toggle,.lang-select{
  border:1px solid var(--line); background:var(--surface); color:inherit;
  border-radius:999px; padding:8px 10px; font-size:16px; cursor:pointer;
}
.theme-toggle:hover,.lang-select:hover{box-shadow:var(--shadow-hover)}
.nav-toggle{display:none; background:none; border:0; font-size:24px; cursor:pointer}

.nav-links{display:flex; gap:16px; list-style:none; margin:0; padding:0}
.nav-links a{padding:8px 10px; border-radius:10px}
.nav-links a:hover{background:var(--surface); box-shadow:var(--shadow)}

/* -------- Hero -------- */
.hero{
  display:grid; grid-template-columns: 1fr 1.2fr;
  align-items:center; gap:32px; padding:72px 0;
}
.hero-media img{aspect-ratio:4/5; object-fit:cover}
.hero-copy h1 span{background: linear-gradient(transparent 60%, rgba(255,209,102,.6) 60%)}

.hero-cta{display:flex; gap:12px; margin:14px 0 6px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; gap:8px; font-weight:600;
  padding:12px 18px; border-radius:999px; border:1px solid var(--line); cursor:pointer;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.btn-primary{background:var(--gold); border-color:var(--gold); color:#111}
.btn-primary:hover{background:var(--gold-dark)}
.btn-ghost{background:transparent}
.btn-ghost:hover{box-shadow:var(--shadow-hover)}

.hero-stats{display:flex; gap:24px; list-style:none; padding:0; margin:12px 0 0; flex-wrap:wrap}
.hero-stats strong{font-size:22px; color:var(--ink)}
.hero-stats span{font-size:14px}

/* -------- Quick Sections -------- */
.quick-sections{
  display:grid; gap:24px; grid-template-columns: repeat(3,1fr);
  padding:40px 0 10px;
}
.quick-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px; box-shadow:var(--shadow);
}
.quick-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-hover)}
.text-link{font-weight:600; border-bottom:2px solid var(--gold); display:inline-block}

/* -------- Home About -------- */
.home-about{padding:40px 0 80px; border-top:1px solid var(--line)}
.home-about p{max-width:820px}

/* -------- Footer -------- */
.site-footer{border-top:1px solid var(--line); padding:28px 0; background:var(--surface)}
.site-footer p{margin:0 0 8px; text-align:center}
.socials{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.socials a{padding:6px 10px; border:1px solid var(--line); border-radius:10px}
.socials a:hover{box-shadow:var(--shadow)}

/* ------------- Responsive Breakpoints ------------- */
/* Large tablets / small laptops */
@media (max-width: 1200px){
  .container{padding:0 16px}
  .hero{gap:24px; padding:64px 0}
}
/* Tablets */
@media (max-width: 992px){
  .quick-sections{grid-template-columns: repeat(2,1fr)}
}
/* Large phones / small tablets */
@media (max-width: 768px){
  .nav-toggle{display:block}
  /* mobile menu drawer */
  .nav-links{
    position: absolute; right:16px; top:64px; display:none;
    flex-direction: column; background: var(--surface);
    padding: 12px; border-radius: 12px; box-shadow: var(--shadow);
    border:1px solid var(--line);
  }
  .nav-links.open{display:flex}
  .hero{grid-template-columns:1fr; padding:48px 0}
}
/* Phones */
@media (max-width: 560px){
  h1{font-size: clamp(26px, 7vw, 34px)}
  .quick-sections{grid-template-columns: 1fr}
  .controls{gap:8px}
  .theme-toggle,.lang-select{padding:6px 10px; font-size:15px}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
}