:root{
  --bg:#f9fafb;
  --surface:#fff;
  --text:#111827;
  --text2:#374151;
  --muted:#6b7280;
  --line:#e5e7eb;
  --soft:#f3f4f6;
  --soft2:#eef2f7;
  --soft3:#f9fafb;
  --red:#e11d48;
  --blue:#2563eb;
  --radius:16px;
  --r10:10px;
  --r12:12px;
  --r14:14px;
  --pill:999px;
  --shadow:0 10px 30px rgba(17,24,39,.08);
  --shadowS:0 8px 20px rgba(17,24,39,.04);
  --shadowM:0 14px 28px rgba(17,24,39,.08);
  --head:"Rajdhani",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --body:"Roboto",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:400 16px/1.6 var(--body);background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.container{max-width:1180px;margin:0 auto;padding:0 16px}

header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)
}
.header-inner{
  height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:inherit;
  text-decoration:none
}
.brand:hover,.brand:active,.brand:focus{text-decoration:none}
.logo-img{width:38px;height:38px;object-fit:contain}
.logo-text{
  font:700 24px/1 var(--head);
  margin-top:10px;
  letter-spacing:.2px
}
.logo-text span{color:var(--red)}

.nav{display:flex;align-items:center;gap:8px}
.nav a{
  font:700 15px/1 var(--head);
  padding:8px 10px;
  border-radius:var(--r10);
  color:var(--text2)
}
.nav a:hover,.nav .selected{
  background:var(--soft);
  text-decoration:none
}

.search{
  flex:1;
  max-width:460px;
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--soft);
  border:1px solid var(--soft2);
  border-radius:var(--r14);
  padding:8px 12px
}
.search input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  font-size:14px;
  color:var(--text)
}
.search button{
  border:0;
  background:transparent;
  cursor:pointer;
  padding:0;
  line-height:1
}

.menu-toggle{
  display:none;
  background:#fff;
  padding:8px 10px;
  font-size:16px;
  line-height:1;
  border:1px solid var(--line);
  border-radius:var(--r12);
  cursor:pointer
}
.main-nav-mobile{
  display:none;
  border-top:1px solid var(--line);
  padding:10px 0 14px
}
.main-nav-mobile a{
  display:block;
  padding:10px 16px;
  color:var(--text2);
  font:700 15px/1.1 var(--head);
  border-radius:var(--r12)
}
.main-nav-mobile a:hover{
  background:var(--soft);
  text-decoration:none
}
.main-nav-mobile.active{display:block}

.btn-icon-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:36px;
  padding:0 14px;
  font-family:var(--head);
  font-size:14px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  user-select:none;
  background:#fff;
  border:1px solid var(--line);
  color:var(--text2);
  border-radius:999px;
  transition:.2s
}
.btn-icon-toggle svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round
}
.btn-icon-toggle:hover{
  background:var(--soft);
  border-color:var(--text2);
  color:var(--text);
  transform:translateY(-1px);
  box-shadow:0 2px 5px rgba(0,0,0,.05)
}
.btn-icon-toggle:active{transform:translateY(0)}
.btn-icon-toggle.theme-btn{
  width:40px;
  height:40px;
  padding:0;
  border-radius:50%;
  border:1px solid var(--soft2);
  background:var(--soft)
}
.btn-icon-toggle.theme-btn:hover{
  transform:scale(1.1);
  background:var(--soft2)
}
.theme-btn .icon-moon{display:none}
.theme-btn .icon-sun{display:block;color:#f59e0b}

.site-footer{
  padding:34px 0 24px;
  border-top:1px solid var(--line);
  background:var(--surface);
  font-size:14px;
  color:var(--text2)
}
.footer-main{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:42px;
  padding-bottom:26px
}
.footer-column h4{
  margin:0 0 14px;
  font:700 15px/1 var(--head);
  letter-spacing:.8px;
  color:var(--text)
}
.footer-column ul{list-style:none;margin:0;padding:0}
.footer-column li{margin:0 0 9px}
.footer-column a{
  display:inline-block;
  color:var(--text2);
  text-decoration:none;
  line-height:1.45
}
.footer-column a:hover{
  color:var(--text);
  text-decoration:underline;
  text-underline-offset:3px
}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:28px;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:12px;
  color:var(--muted)
}
.footer-bottom .disclaimer{
  margin:0;
  max-width:720px;
  text-align:right;
  line-height:1.55
}

body.dark{
  --bg:#111827;
  --surface:#1f2937;
  --text:#f3f4f6;
  --text2:#9ca3af;
  --muted:#6b7280;
  --line:#374151;
  --soft:#1f2937;
  --soft2:#374151;
  --soft3:#111827;
  --shadow:0 10px 30px rgba(0,0,0,.5);
  --shadowS:0 8px 20px rgba(0,0,0,.3);
  --shadowM:0 14px 28px rgba(0,0,0,.4);
  background-color:var(--bg)
}
body.dark header{
  background:rgba(17,24,39,.95);
  border-bottom-color:var(--line)
}
body.dark .search,
body.dark .menu-toggle{
  background:var(--surface);
  border-color:var(--line);
  color:var(--text)
}
body.dark .search input{color:var(--text)}
body.dark .main-nav-mobile{
  background:var(--bg);
  border-top-color:var(--line)
}
body.dark .btn-icon-toggle{
  background:var(--surface);
  border-color:var(--line);
  color:var(--text2)
}
body.dark .btn-icon-toggle:hover{
  background:var(--soft2);
  border-color:var(--text2);
  color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.2)
}
body.dark .btn-icon-toggle.theme-btn{
  border-color:var(--line);
  color:#fbbf24
}
body.dark .theme-btn .icon-sun{display:none}
body.dark .theme-btn .icon-moon{
  display:block;
  color:#60a5fa
}
body.dark .site-footer{
  background:var(--surface);
  border-top-color:var(--line)
}
body.dark .footer-column h4{color:var(--text)}
body.dark .footer-column a{color:var(--text2)}
body.dark .footer-column a:hover{color:#fff}
body.dark .footer-bottom{
  border-top-color:var(--line);
  color:var(--muted)
}

@media (max-width:920px){
  .nav{display:none}
  .menu-toggle{display:inline-flex}
  .search{max-width:100%}
  .header-inner{gap:10px}
}
@media (max-width:768px){
  .site-footer{padding:28px 0 22px}
  .footer-main{grid-template-columns:1fr 1fr;gap:26px 22px}
  .footer-column:last-child{grid-column:1/-1}
  .footer-bottom{flex-direction:column;gap:10px}
  .footer-bottom .disclaimer{text-align:left;max-width:none}
}
@media (max-width:480px){
  .logo-text{display:none}
  .footer-main{grid-template-columns:1fr;gap:22px}
  .footer-column:last-child{grid-column:auto}
  .footer-column h4{margin-bottom:10px}
  .footer-column li{margin-bottom:7px}
}