/*
 * LearnHindiTyping.in — Homepage Styles v3.0
 */

/* ════════════════════════════
   HERO
   ════════════════════════════ */
.hero {
  position:relative; z-index:1;
  min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:calc(var(--nav-h) + 40px) clamp(16px,5vw,32px) 64px;
  overflow:hidden;
}

.hero-orb {
  position:absolute; border-radius:50%;
  pointer-events:none; filter:blur(80px); opacity:.5;
}
.hero-orb-1 {
  width:min(560px,80vw); height:min(560px,80vw);
  background:radial-gradient(circle,rgba(255,107,26,.22),transparent 70%);
  top:-15%; left:50%; transform:translateX(-50%);
}
.hero-orb-2 {
  width:min(340px,55vw); height:min(340px,55vw);
  background:radial-gradient(circle,rgba(74,79,228,.15),transparent 70%);
  bottom:5%; right:-5%;
}

.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 16px;
  background:rgba(255,107,26,.1); border:1px solid rgba(255,107,26,.28);
  border-radius:var(--r-pill); font-size:0.78rem; font-weight:600;
  color:var(--brand-lt); letter-spacing:.3px;
  margin-bottom:28px;
  animation:fadeDown .55s var(--ease) both;
}
.hero-badge-dot {
  width:6px; height:6px; background:var(--brand);
  border-radius:50%; animation:pulse 2s ease-in-out infinite;
}

.hero-title {
  font-size:clamp(2rem,5.5vw,4rem); font-weight:800;
  line-height:1.1; letter-spacing:-2px; margin-bottom:8px;
  animation:fadeDown .55s var(--ease) .08s both;
}
.hero-title-hi {
  display:block; font-family:var(--font-hi);
  font-size:clamp(1.7rem,4.8vw,3.5rem);
  background:linear-gradient(135deg,var(--brand) 0%,#FFD166 55%,var(--brand-lt) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; font-weight:700;
}
.hero-title-en { display:block; color:var(--txt); }

.hero-sub {
  font-size:clamp(.95rem,2.3vw,1.12rem); color:var(--txt-2);
  max-width:500px; margin:18px auto 36px; line-height:1.75;
  animation:fadeDown .55s var(--ease) .16s both;
}

/* Stats */
.hero-stats {
  display:flex; align-items:center;
  gap:clamp(14px,4vw,36px); margin-bottom:40px;
  animation:fadeDown .55s var(--ease) .24s both;
}
.hero-stat-val {
  font-size:clamp(1.3rem,3vw,1.8rem); font-weight:800;
  letter-spacing:-1px; color:var(--txt);
}
.hero-stat-val b { color:var(--brand); }
.hero-stat-lbl {
  font-size:.7rem; text-transform:uppercase;
  letter-spacing:.8px; color:var(--txt-3); font-weight:600;
}
.hero-divider { width:1px; height:28px; background:var(--bdr); }

/* CTA row */
.hero-cta {
  display:flex; gap:12px; flex-wrap:wrap;
  justify-content:center;
  animation:fadeDown .55s var(--ease) .30s both;
}

/* Typing demo */
.hero-demo {
  width:100%; max-width:520px; margin-top:52px;
  animation:fadeUp .7s var(--ease) .4s both;
}
.demo-card {
  background:var(--bg-card); border:1px solid var(--bdr);
  border-radius:var(--r-lg); padding:20px 22px;
  text-align:left; position:relative; overflow:hidden;
}
.demo-card::before {
  content:''; position:absolute; inset:0 0 auto; height:2px;
  background:linear-gradient(90deg,var(--brand),var(--emerald),var(--indigo));
}
.demo-label {
  font-size:.68rem; text-transform:uppercase; letter-spacing:1.2px;
  color:var(--txt-3); font-weight:600; margin-bottom:10px;
  display:flex; align-items:center; gap:8px;
}
.demo-label::after { content:''; flex:1; height:1px; background:var(--bdr); }
.demo-text {
  font-family:var(--font-hi); font-size:1.25rem;
  line-height:1.85; min-height:52px;
}
.demo-text .typed    { color:var(--emerald-lt); }
.demo-text .cursor   {
  display:inline-block; width:2px; height:1.1em;
  background:var(--brand-lt); margin-left:1px;
  vertical-align:middle; animation:blink 1s step-end infinite;
}
.demo-text .rest { color:var(--txt-3); }
.demo-stats {
  display:flex; gap:20px; margin-top:12px; padding-top:12px;
  border-top:1px solid var(--bdr);
}
.demo-stat {
  display:flex; align-items:center; gap:5px;
  font-size:.8rem; color:var(--txt-2); font-weight:500;
}
.demo-stat strong { color:var(--txt); font-family:var(--font-mono); font-weight:700; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ════════════════════════════
   LANGUAGE CARDS
   ════════════════════════════ */
.lang-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:14px; max-width:780px; margin:0 auto;
}
.lang-card {
  position:relative; display:flex;
  align-items:flex-start; gap:14px;
  padding:22px 20px;
  text-decoration:none; color:inherit;
  overflow:hidden;
  transition:border-color var(--dur),background var(--dur),transform var(--dur),box-shadow var(--dur);
}
.lang-card::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,107,26,.07),transparent 60%);
  opacity:0; transition:opacity var(--dur);
}
.lang-card:hover::before { opacity:1; }
.lang-card:hover {
  border-color:var(--bdr-brand); background:var(--bg-card-h);
  transform:translateY(-3px); box-shadow:var(--shadow-glow),var(--shadow-md);
}
.lang-card[aria-disabled="true"] { opacity:.42; pointer-events:none; }
.lang-card-icon {
  width:46px; height:46px; flex-shrink:0;
  background:rgba(255,107,26,.1); border:1px solid rgba(255,107,26,.18);
  border-radius:12px; display:grid; place-items:center;
  font-size:1.4rem;
  transition:transform var(--dur);
}
.lang-card:hover .lang-card-icon { transform:scale(1.06); }
.lang-card-body { flex:1; min-width:0; }
.lang-card-name {
  font-size:1rem; font-weight:700; margin-bottom:3px;
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
}
.lang-native { font-family:var(--font-hi); color:var(--brand-lt); font-size:.9rem; }
.lang-card-desc { font-size:.8rem; color:var(--txt-2); line-height:1.5; margin-bottom:9px; }
.lang-arrow {
  position:absolute; top:18px; right:16px;
  font-size:.9rem; color:var(--brand);
  opacity:0; transform:translateX(-4px);
  transition:opacity var(--dur),transform var(--dur);
}
.lang-card:hover .lang-arrow { opacity:1; transform:translateX(0); }

/* ════════════════════════════
   FEATURES
   ════════════════════════════ */
.features-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(225px,1fr)); gap:14px;
}
.feature-card {
  padding:26px 22px;
  text-decoration:none; color:inherit; display:block;
  position:relative; overflow:hidden;
  transition:transform var(--dur),border-color var(--dur),box-shadow var(--dur);
}
.feature-card::before { content:''; position:absolute; inset:0; opacity:0; transition:opacity var(--dur); }
.feature-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.feature-card:hover::before { opacity:1; }
.fc-orange::before  { background:linear-gradient(135deg,rgba(255,107,26,.07),transparent 55%); }
.fc-orange:hover    { border-color:rgba(255,107,26,.28); }
.fc-emerald::before { background:linear-gradient(135deg,rgba(0,196,140,.07),transparent 55%); }
.fc-emerald:hover   { border-color:rgba(0,196,140,.28); }
.fc-indigo::before  { background:linear-gradient(135deg,rgba(74,79,228,.07),transparent 55%); }
.fc-indigo:hover    { border-color:rgba(74,79,228,.28); }
.fc-gold::before    { background:linear-gradient(135deg,rgba(255,209,102,.07),transparent 55%); }
.fc-gold:hover      { border-color:rgba(255,209,102,.28); }
.feature-icon {
  width:48px; height:48px; display:grid; place-items:center;
  border-radius:12px; font-size:1.3rem; margin-bottom:16px;
  border:1px solid transparent; transition:transform var(--dur);
}
.fc-orange  .feature-icon { background:rgba(255,107,26,.1);  border-color:rgba(255,107,26,.18); }
.fc-emerald .feature-icon { background:rgba(0,196,140,.1);   border-color:rgba(0,196,140,.18); }
.fc-indigo  .feature-icon { background:rgba(74,79,228,.1);   border-color:rgba(74,79,228,.18); }
.fc-gold    .feature-icon { background:rgba(255,209,102,.1); border-color:rgba(255,209,102,.18); }
.feature-card:hover .feature-icon { transform:scale(1.08); }
.feature-name  { font-size:1.05rem; font-weight:700; margin-bottom:6px; }
.feature-desc  { font-size:.82rem; color:var(--txt-2); line-height:1.6; margin-bottom:16px; }
.feature-chips { display:flex; flex-wrap:wrap; gap:5px; }
.chip {
  padding:3px 10px; background:rgba(255,255,255,.05);
  border:1px solid var(--bdr); border-radius:var(--r-pill);
  font-size:.7rem; color:var(--txt-3); font-weight:500;
}

/* ════════════════════════════
   COMING SOON GRID
   ════════════════════════════ */
.soon-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px;
}
.soon-card {
  padding:20px 18px; opacity:.55; position:relative;
}
.soon-card::after {
  content:'SOON'; position:absolute; top:12px; right:12px;
  font-size:.58rem; font-weight:800; letter-spacing:1px;
  padding:2px 8px; background:rgba(255,255,255,.05);
  border:1px solid var(--bdr); border-radius:var(--r-pill); color:var(--txt-3);
}
.soon-icon { font-size:1.5rem; margin-bottom:10px; }
.soon-name { font-size:.9rem; font-weight:700; margin-bottom:3px; }
.soon-desc { font-size:.78rem; color:var(--txt-3); line-height:1.5; }

/* ════════════════════════════
   FAQ
   ════════════════════════════ */
.faq-list { max-width:680px; margin:0 auto; display:flex; flex-direction:column; gap:8px; }
.faq-item { border-radius:var(--r-md); overflow:hidden; transition:border-color var(--dur); }
.faq-item.open { border-color:rgba(255,107,26,.22); }
.faq-q {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:17px 20px; background:none; border:none;
  font-family:var(--font); font-size:.95rem; font-weight:600;
  color:var(--txt); text-align:left; cursor:pointer; transition:color var(--dur);
}
.faq-q:hover { color:var(--brand-lt); }
.faq-icon {
  flex-shrink:0; width:22px; height:22px; display:grid; place-items:center;
  background:rgba(255,107,26,.1); border-radius:50%;
  font-size:.75rem; color:var(--brand); transition:transform var(--dur);
}
.faq-item.open .faq-icon { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.faq-item.open .faq-a { max-height:300px; }
.faq-a-inner { padding:0 20px 17px; font-size:.875rem; color:var(--txt-2); line-height:1.7; }

/* ════════════════════════════
   PWA BANNER
   ════════════════════════════ */
.pwa-banner {
  position:fixed; bottom:18px; left:50%;
  transform:translateX(-50%) translateY(120px);
  width:min(calc(100% - 32px),420px);
  background:var(--bg-surface); border:1px solid rgba(255,107,26,.28);
  border-radius:var(--r-lg); padding:14px 18px;
  display:flex; align-items:center; gap:12px;
  z-index:800; box-shadow:var(--shadow-md);
  transition:transform .45s cubic-bezier(0.34,1.56,0.64,1);
}
.pwa-banner.show { transform:translateX(-50%) translateY(0); }
.pwa-icon { width:42px; height:42px; background:linear-gradient(135deg,var(--brand),var(--brand-dk)); border-radius:11px; display:grid; place-items:center; font-size:1.2rem; flex-shrink:0; }
.pwa-body { flex:1; min-width:0; }
.pwa-title { font-size:.88rem; font-weight:700; margin-bottom:2px; }
.pwa-sub   { font-size:.73rem; color:var(--txt-2); }
.pwa-close { position:absolute; top:8px; right:10px; background:none; border:none; font-size:.9rem; color:var(--txt-3); line-height:1; transition:color var(--dur); }
.pwa-close:hover { color:var(--txt); }

/* ════════════════════════════
   RESPONSIVE
   ════════════════════════════ */
@media(max-width:480px) {
  .hero-cta { flex-direction:column; width:100%; }
  .lang-grid { grid-template-columns:1fr; }
  .hero-divider { display:none; }
}
@media(min-width:1024px) {
  .lang-grid { grid-template-columns:repeat(3,1fr); max-width:860px; }
}