/*
 * LearnHindiTyping.in — Global Stylesheet v3.0
 * Shared across all pages · Mobile-first · WCAG AA
 */

/* ── FONTS (non-blocking, loaded via <link> in each page) ── */

/* ════════════════════════════
   DESIGN TOKENS
   ════════════════════════════ */
:root {
  /* Brand */
  --brand:        #FF6B1A;
  --brand-lt:     #FF8C42;
  --brand-dk:     #D94F00;
  --emerald:      #00C48C;
  --emerald-lt:   #00DDAA;
  --indigo:       #4A4FE4;
  --gold:         #FFD166;
  --rose:         #FF4D6A;

  /* Surfaces */
  --bg:           #090A12;
  --bg-card:      #111220;
  --bg-card-h:    #181928;
  --bg-surface:   #1A1B2C;
  --bg-nav:       rgba(9,10,18,0.85);

  /* Text — all WCAG AA on --bg */
  --txt:          #EEEFFE;
  --txt-2:        #9497B2;
  --txt-3:        #6B6E8C;

  /* Borders */
  --bdr:          rgba(255,255,255,0.08);
  --bdr-brand:    rgba(255,107,26,0.35);

  /* Shadows */
  --shadow-sm:    0 2px 12px rgba(0,0,0,0.24);
  --shadow-md:    0 4px 28px rgba(0,0,0,0.36);
  --shadow-glow:  0 0 40px rgba(255,107,26,0.18);

  /* Radius */
  --r-xs:   8px;
  --r-sm:  12px;
  --r-md:  18px;
  --r-lg:  24px;
  --r-xl:  32px;
  --r-pill:100px;

  /* Typography */
  --font:      'Baloo 2', 'Segoe UI', system-ui, sans-serif;
  --font-hi:   'Noto Sans Devanagari', 'Mangal', serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Motion */
  --ease:  cubic-bezier(0.22,1,0.36,1);
  --dur:   0.22s;

  /* Layout */
  --nav-h:  64px;
  --max-w:  1100px;
}

/* ════════════════════════════
   RESET
   ════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--txt);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  min-height: 100svh;
}
img,svg  { display:block; max-width:100%; }
button   { font-family:inherit; cursor:pointer; }
a        { color:inherit; text-decoration:none; }
ul,ol    { list-style:none; }
[hidden] { display:none !important; }

/* ════════════════════════════
   ACCESSIBILITY
   ════════════════════════════ */
.skip-link {
  position:absolute; top:-56px; left:16px;
  padding:10px 20px;
  background:var(--brand); color:#fff;
  font-weight:700; font-size:0.875rem;
  border-radius:var(--r-md); z-index:9999;
  transition:top .2s;
}
.skip-link:focus { top:16px; }
:focus-visible { outline:2px solid var(--brand); outline-offset:3px; border-radius:4px; }
:focus:not(:focus-visible) { outline:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ════════════════════════════
   SCROLLBAR
   ════════════════════════════ */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--brand-dk); border-radius:3px; }

/* ════════════════════════════
   BACKGROUND GRID
   ════════════════════════════ */
.bg-grid {
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(255,107,26,0.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,107,26,0.028) 1px,transparent 1px);
  background-size:52px 52px;
  pointer-events:none; z-index:0; will-change:transform;
}

/* ════════════════════════════
   NAVIGATION
   ════════════════════════════ */
.nav {
  position:fixed; inset:0 0 auto;
  z-index:500; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(16px,4vw,32px);
  background:var(--bg-nav);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--bdr);
  transition:background var(--dur);
}
.nav.scrolled { background:rgba(9,10,18,0.97); }

.nav-logo {
  display:flex; align-items:center; gap:10px;
  text-decoration:none; flex-shrink:0;
}
.nav-logo-mark {
  width:36px; height:36px; flex-shrink:0;
  background:linear-gradient(135deg,var(--brand),var(--brand-dk));
  border-radius:10px;
  display:grid; place-items:center;
  box-shadow:0 4px 14px rgba(255,107,26,0.38);
  font-size:18px; line-height:1;
}
.nav-logo-text {
  font-size:1.05rem; font-weight:800;
  letter-spacing:-0.3px; color:var(--txt);
}
.nav-logo-text .accent { color:var(--brand); }

.nav-links {
  display:flex; align-items:center; gap:2px;
}
.nav-link {
  padding:8px 16px;
  border-radius:var(--r-pill);
  font-size:0.875rem; font-weight:600;
  color:var(--txt-2);
  transition:color var(--dur),background var(--dur);
}
.nav-link:hover  { color:var(--txt); background:rgba(255,255,255,0.07); }
.nav-link.active { color:var(--brand); background:rgba(255,107,26,0.1); }

.nav-cta {
  margin-left:8px;
  padding:9px 22px;
  background:linear-gradient(135deg,var(--brand),var(--brand-dk));
  color:#fff; font-weight:700; font-size:0.875rem;
  border-radius:var(--r-pill);
  box-shadow:0 4px 14px rgba(255,107,26,0.32);
  transition:transform var(--dur),box-shadow var(--dur);
}
.nav-cta:hover { transform:translateY(-1px); box-shadow:0 7px 20px rgba(255,107,26,0.44); }

/* Hamburger */
.nav-hamburger {
  display:none; flex-direction:column; gap:5px;
  padding:8px; background:none; border:none;
  border-radius:var(--r-xs);
}
.nav-hamburger span {
  display:block; width:22px; height:2px;
  background:var(--txt); border-radius:2px;
  transition:transform var(--dur),opacity var(--dur);
}
.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.nav-drawer {
  position:fixed; inset:0; z-index:490;
  background:rgba(9,10,18,0.97);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:24px;
  transform:translateX(100%);
  transition:transform .35s var(--ease);
  visibility:hidden;
}
.nav-drawer.open { transform:translateX(0); visibility:visible; }
.nav-drawer a {
  font-size:1.4rem; font-weight:700; color:var(--txt);
  transition:color var(--dur);
}
.nav-drawer a:hover { color:var(--brand); }
.nav-drawer .nav-cta { font-size:1rem; }
.drawer-close {
  position:absolute; top:18px; right:18px;
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,0.07); border:1px solid var(--bdr);
  display:grid; place-items:center;
  font-size:1.1rem; color:var(--txt-2);
  transition:color var(--dur),background var(--dur);
}
.drawer-close:hover { color:var(--txt); background:rgba(255,255,255,0.13); }

/* ════════════════════════════
   LAYOUT HELPERS
   ════════════════════════════ */
.container { width:100%; max-width:var(--max-w); margin:0 auto; padding:0 clamp(16px,5vw,32px); }
.page-wrap { position:relative; z-index:1; padding-top:calc(var(--nav-h) + 32px); padding-bottom:64px; }

/* Section */
.section { padding:72px 0; }
.section-sm { padding:48px 0; }
.section-header { text-align:center; margin-bottom:48px; }
.section-tag {
  display:inline-block; padding:4px 14px;
  background:rgba(255,107,26,0.1); border:1px solid rgba(255,107,26,0.22);
  border-radius:var(--r-pill); font-size:0.72rem; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; color:var(--brand-lt);
  margin-bottom:12px;
}
.section-title {
  font-size:clamp(1.7rem,3.8vw,2.6rem); font-weight:800;
  line-height:1.15; letter-spacing:-1px; margin-bottom:12px;
}
.section-title .accent { color:var(--brand); }
.section-title .hi { font-family:var(--font-hi); }
.section-desc {
  font-size:clamp(0.9rem,2vw,1rem); color:var(--txt-2);
  max-width:480px; margin:0 auto; line-height:1.75;
}

/* ════════════════════════════
   BUTTONS
   ════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:13px 26px;
  font-family:var(--font); font-weight:700; font-size:0.95rem;
  border-radius:var(--r-pill); border:none; cursor:pointer;
  text-decoration:none;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur),background var(--dur);
  white-space:nowrap; min-height:46px;
}
.btn:active { transform:translateY(1px) scale(0.97); }
.btn-primary {
  background:linear-gradient(135deg,var(--brand),var(--brand-dk));
  color:#fff; box-shadow:0 4px 18px rgba(255,107,26,0.32),inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 26px rgba(255,107,26,0.46),inset 0 1px 0 rgba(255,255,255,0.18); }
.btn-secondary { background:rgba(255,255,255,0.07); color:var(--txt); border:1px solid var(--bdr); }
.btn-secondary:hover { background:rgba(255,255,255,0.12); transform:translateY(-1px); }
.btn-ghost { background:transparent; color:var(--txt-2); border:1px solid var(--bdr); font-size:0.875rem; padding:9px 20px; }
.btn-ghost:hover { color:var(--txt); background:rgba(255,255,255,0.06); }
.btn-sm { padding:9px 20px; font-size:0.85rem; min-height:38px; }

/* ════════════════════════════
   CARDS (shared)
   ════════════════════════════ */
.card {
  background:var(--bg-card); border:1px solid var(--bdr);
  border-radius:var(--r-lg); transition:border-color var(--dur),background var(--dur),transform var(--dur),box-shadow var(--dur);
}
.card:hover { background:var(--bg-card-h); }

/* ════════════════════════════
   BADGES
   ════════════════════════════ */
.badge {
  display:inline-block; padding:2px 10px;
  border-radius:var(--r-pill); font-size:0.67rem; font-weight:700;
  letter-spacing:0.5px; text-transform:uppercase;
}
.badge-live { background:rgba(0,196,140,0.12); color:var(--emerald-lt); border:1px solid rgba(0,196,140,0.22); }
.badge-soon { background:rgba(255,255,255,0.05); color:var(--txt-3); border:1px solid var(--bdr); }
.badge-new  { background:rgba(255,107,26,0.12); color:var(--brand-lt); border:1px solid rgba(255,107,26,0.22); }

/* ════════════════════════════
   FOOTER
   ════════════════════════════ */
.footer {
  position:relative; z-index:1;
  background:var(--bg-card);
  border-top:1px solid var(--bdr);
  padding:56px 0 24px;
}
.footer-grid {
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:40px; margin-bottom:48px;
}
.footer-brand-link { display:flex; align-items:center; gap:9px; margin-bottom:14px; text-decoration:none; }
.footer-brand-mark {
  width:32px; height:32px;
  background:linear-gradient(135deg,var(--brand),var(--brand-dk));
  border-radius:8px; display:grid; place-items:center; font-size:16px;
}
.footer-brand-name { font-size:0.95rem; font-weight:800; color:var(--txt); }
.footer-brand-desc { font-size:0.83rem; color:var(--txt-2); line-height:1.7; margin-bottom:20px; }
.footer-social { display:flex; gap:8px; }
.social-btn {
  width:34px; height:34px; display:grid; place-items:center;
  background:rgba(255,255,255,0.05); border:1px solid var(--bdr);
  border-radius:9px; font-size:0.9rem; text-decoration:none;
  transition:background var(--dur),border-color var(--dur),transform var(--dur);
}
.social-btn:hover { background:rgba(255,107,26,0.12); border-color:rgba(255,107,26,0.28); transform:translateY(-2px); }
.footer-col-title { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--txt-3); margin-bottom:14px; }
.footer-links { display:flex; flex-direction:column; gap:10px; }
.footer-links a { font-size:0.85rem; color:var(--txt-2); transition:color var(--dur); }
.footer-links a:hover { color:var(--brand-lt); }
.footer-bottom {
  padding-top:24px; border-top:1px solid var(--bdr);
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}
.footer-copy { font-size:0.78rem; color:var(--txt-3); }
.footer-copy .accent { color:var(--brand); }
.footer-made { display:flex; align-items:center; gap:6px; font-size:0.75rem; color:var(--txt-3); }

/* ════════════════════════════
   EMPTY STATE
   ════════════════════════════ */
.empty-state {
  text-align:center; padding:40px 24px;
  background:var(--bg-card);
  border:1px dashed rgba(255,255,255,0.08);
  border-radius:var(--r-lg);
}
.empty-icon { font-size:2.2rem; margin-bottom:10px; opacity:0.4; }
.empty-text { font-size:0.88rem; color:var(--txt-3); line-height:1.6; }

/* ════════════════════════════
   TOAST
   ════════════════════════════ */
.toast {
  position:fixed; bottom:24px; left:50%;
  transform:translateX(-50%) translateY(80px);
  padding:10px 22px;
  background:var(--bg-surface); border:1px solid var(--bdr);
  border-radius:var(--r-pill); font-size:0.85rem; font-weight:600;
  color:var(--txt); z-index:700; box-shadow:var(--shadow-md);
  transition:transform .35s cubic-bezier(0.34,1.56,0.64,1),opacity .3s;
  white-space:nowrap; pointer-events:none; opacity:0;
}
.toast.show { transform:translateX(-50%) translateY(0); opacity:1; }
.toast.success { border-color:rgba(0,196,140,0.3); color:var(--emerald-lt); }
.toast.error   { border-color:rgba(255,77,106,0.3); color:var(--rose); }

/* ════════════════════════════
   ANIMATIONS
   ════════════════════════════ */
.reveal {
  opacity:0; transform:translateY(22px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-d1 { transition-delay:.08s; }
.reveal-d2 { transition-delay:.16s; }
.reveal-d3 { transition-delay:.24s; }
.reveal-d4 { transition-delay:.32s; }

@keyframes fadeDown { from{opacity:0;transform:translateY(-18px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeUp   { from{opacity:0;transform:translateY(22px)}  to{opacity:1;transform:translateY(0)} }
@keyframes pulse    { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.55;transform:scale(.75)} }

/* ════════════════════════════
   RESPONSIVE
   ════════════════════════════ */
@media(max-width:768px) {
  .nav-links,.nav-cta { display:none; }
  .nav-hamburger { display:flex; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:28px; }
  .section { padding:52px 0; }
}
@media(max-width:480px) {
  .footer-grid { grid-template-columns:1fr; }
  .btn { width:100%; justify-content:center; }
}
@media(min-width:1440px) {
  :root { --max-w:1240px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; }
}
@media print {
  .nav,.footer,.toast { display:none; }
  body { background:#fff; color:#000; }
}