/* === Zoho Writer India — zojo-yin === */

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

:root {
  --brand: oklch(0.55 0.22 25);
  --brand-hover: oklch(0.48 0.20 25);
  --brand-light: oklch(0.95 0.03 25);
  --brand-surface: oklch(0.97 0.02 30);
  --accent: oklch(0.72 0.14 80);
  --bg: oklch(0.988 0.004 85);
  --surface: oklch(1 0 0);
  --ink: oklch(0.16 0.01 30);
  --ink-secondary: oklch(0.40 0.01 30);
  --ink-muted: oklch(0.56 0.01 30);
  --border: oklch(0.88 0.01 80);
  --border-light: oklch(0.94 0.005 85);
  --shadow: 0 2px 8px oklch(0 0 0 / 0.08);
  --radius: 8px;
  --font: "Noto Sans Devanagari","Mukta","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --w: 1080px;
}

html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family: var(--font); color: var(--ink); background: var(--bg);
  line-height:1.7; -webkit-font-smoothing:antialiased;
}
[lang="hi"] body { font-family: "Noto Sans Devanagari","Mukta","Kohinoor Devanagari",var(--font); }

.wrap { max-width:var(--w); margin:0 auto; padding:0 20px; }

/* Language Toggle */
.lang-toggle {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 10px; border:1.5px solid var(--border);
  border-radius:20px; font-size:0.78rem; font-weight:600;
  cursor:pointer; background:var(--surface); color:var(--ink-secondary);
  transition:all 0.2s;
}
.lang-toggle:hover { border-color:var(--brand); color:var(--brand); }
.lang-toggle .active-lang { color:var(--brand); }

/* Nav */
.navbar {
  position:sticky; top:0; z-index:100;
  background:oklch(1 0 0 / 0.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border); box-shadow:0 1px 4px oklch(0 0 0 / 0.04);
}
.navbar .wrap { display:flex; align-items:center; justify-content:space-between; height:60px; }
.nav-logo {
  display:flex; align-items:center; gap:8px;
  font-weight:700; font-size:1.1rem; color:var(--ink);
  text-decoration:none;
}
.nav-logo .z { 
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; background:var(--brand); color:#fff;
  border-radius:6px; font-weight:800; font-size:1.1rem;
}
.nav-right { display:flex; align-items:center; gap:12px; }
.nav-links { display:flex; gap:24px; align-items:center; }
.nav-links a {
  font-size:0.85rem; font-weight:500; color:var(--ink-secondary);
  text-decoration:none; transition:color 0.15s;
}
.nav-links a:hover, .nav-links a.active { color:var(--brand); }

/* Hero */
.hero {
  padding:72px 0 56px;
  background: linear-gradient(170deg, oklch(0.97 0.03 30) 0%, var(--bg) 60%);
  border-bottom:1px solid var(--border);
}
.hero .wrap { display:flex; align-items:center; gap:48px; }
.hero-text { flex:1; }
.hero h1 {
  font-size:2.5rem; font-weight:800; line-height:1.2;
  color:var(--ink); letter-spacing:-0.02em;
}
.hero h1 span { color:var(--brand); }
.hero p {
  font-size:1.05rem; color:var(--ink-secondary);
  margin-top:16px; max-width:500px; line-height:1.7;
}
.hero-actions { margin-top:28px; display:flex; gap:12px; flex-wrap:wrap; }
.hero-visual {
  flex-shrink:0; width:240px; height:240px;
  background:oklch(0.96 0.03 25); border-radius:20px;
  display:flex; align-items:center; justify-content:center;
  font-size:5rem; box-shadow:0 8px 32px oklch(0.55 0.22 25 / 0.15);
}

/* Buttons */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 28px; border-radius:var(--radius); font-size:0.9rem;
  font-weight:600; text-decoration:none; cursor:pointer;
  border:none; transition:all 0.2s;
}
.btn-primary { background:var(--brand); color:#fff; }
.btn-primary:hover { background:var(--brand-hover); transform:translateY(-1px); box-shadow:0 4px 16px oklch(0.55 0.22 25 / 0.3); }
.btn-outline { background:transparent; color:var(--brand); border:2px solid var(--brand); }
.btn-outline:hover { background:var(--brand-light); }
.btn-lg { padding:16px 36px; font-size:1rem; }

/* Sections */
.section { padding:64px 0; }
.section-alt {
  padding:64px 0; background:var(--brand-surface);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.section-heading { font-size:1.6rem; font-weight:700; color:var(--ink); margin-bottom:8px; letter-spacing:-0.01em; }
.section-sub { font-size:0.95rem; color:var(--ink-muted); margin-bottom:36px; max-width:560px; }

/* Feature cards */
.feat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:20px; }
.feat-card {
  padding:28px; background:var(--surface); border-radius:var(--radius);
  border:1px solid var(--border-light); box-shadow:var(--shadow);
  transition:transform 0.2s, box-shadow 0.2s;
}
.feat-card:hover { transform:translateY(-2px); box-shadow:0 6px 20px oklch(0 0 0 / 0.12); }
.feat-card .icon { font-size:2rem; margin-bottom:12px; }
.feat-card h3 { font-size:1.05rem; font-weight:700; margin-bottom:8px; color:var(--ink); }
.feat-card p { font-size:0.88rem; color:var(--ink-secondary); line-height:1.6; }

/* Stats row */
.stats-row { display:flex; gap:24px; margin-top:40px; flex-wrap:wrap; }
.stat-box {
  flex:1; min-width:150px; padding:24px; background:var(--surface);
  border-radius:var(--radius); border:1px solid var(--border-light);
  text-align:center; box-shadow:var(--shadow);
}
.stat-num { font-size:2rem; font-weight:800; color:var(--brand); line-height:1.2; }
.stat-label { font-size:0.82rem; color:var(--ink-muted); margin-top:4px; }

/* FAQ compact */
.faq-compact { margin-top:24px; }
.faq-compact details {
  background:var(--surface); border:1px solid var(--border-light);
  border-radius:var(--radius); padding:18px 24px; margin-bottom:12px;
  box-shadow:var(--shadow);
}
.faq-compact summary {
  font-weight:600; font-size:0.95rem; cursor:pointer; color:var(--ink);
  list-style:none; display:flex; justify-content:space-between; align-items:center;
}
.faq-compact summary::after { content:"+"; font-size:1.2rem; color:var(--brand); font-weight:700; }
.faq-compact details[open] summary::after { content:"‘2"; }
.faq-compact p { font-size:0.88rem; color:var(--ink-secondary); margin-top:10px; line-height:1.6; }

/* Download grid */
.dl-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:20px; }
.dl-card {
  padding:32px 24px; background:var(--surface); border-radius:var(--radius);
  border:1px solid var(--border-light); text-align:center; box-shadow:var(--shadow);
  transition:transform 0.2s;
}
.dl-card:hover { transform:translateY(-3px); }
.dl-card .os-icon { font-size:2.5rem; margin-bottom:12px; }
.dl-card h3 { font-size:1rem; font-weight:700; margin-bottom:4px; }
.dl-card .ver { font-size:0.78rem; color:var(--ink-muted); margin-bottom:14px; }
.dl-card .btn { width:100%; justify-content:center; }

/* Pricing table */
.price-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:24px; }
.price-card {
  padding:36px 28px; background:var(--surface); border-radius:var(--radius);
  border:2px solid var(--border-light); text-align:center; box-shadow:var(--shadow);
  position:relative;
}
.price-card.featured { border-color:var(--brand); }
.price-card.featured::before {
  content:attr(data-badge); position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--brand); color:#fff; padding:4px 16px; border-radius:20px;
  font-size:0.75rem; font-weight:700; white-space:nowrap;
}
.price-card h3 { font-size:1.2rem; font-weight:700; margin-bottom:8px; }
.price-amount { font-size:2.5rem; font-weight:800; color:var(--brand); margin:12px 0; }
.price-amount small { font-size:0.9rem; font-weight:400; color:var(--ink-muted); }
.price-card ul { list-style:none; margin:20px 0; text-align:left; }
.price-card ul li { padding:8px 0; font-size:0.88rem; color:var(--ink-secondary); border-bottom:1px solid var(--border-light); }
.price-card ul li::before { content:"¹3 "; color:var(--brand); font-weight:700; }

/* FAQ page */
.faq-category { margin-bottom:40px; }
.faq-category h3 {
  font-size:1.1rem; font-weight:700; color:var(--brand); margin-bottom:16px;
  padding-bottom:8px; border-bottom:2px solid var(--brand);
}
.faq-page details {
  background:var(--surface); border:1px solid var(--border-light);
  border-radius:var(--radius); padding:16px 20px; margin-bottom:10px;
}
.faq-page summary { font-weight:600; font-size:0.92rem; cursor:pointer; color:var(--ink); list-style:none; }
.faq-page summary::before { content:"Q. "; color:var(--brand); font-weight:700; }
.faq-page p { font-size:0.85rem; color:var(--ink-secondary); margin-top:10px; padding-left:28px; line-height:1.65; }

/* CTA section */
.cta { text-align:center; padding:56px 0; }
.cta h2 { font-size:1.6rem; font-weight:700; }

/* Footer */
.footer {
  padding:28px 0; background:var(--surface);
  border-top:1px solid var(--border); font-size:0.8rem; color:var(--ink-muted);
}
.footer .wrap { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer nav a { color:var(--ink-muted); text-decoration:none; margin-left:16px; }
.footer nav a:hover { color:var(--brand); }

/* 404 */
.error-page { text-align:center; padding:120px 0; }
.error-page h1 { font-size:6rem; font-weight:800; color:var(--brand); }
.error-page p { font-size:1.1rem; color:var(--ink-secondary); margin:16px 0 28px; }

/* Bilingual: hide inactive lang */
[lang] .lang-en, [lang] .lang-hi { display:none; }
:root:not([lang]) .lang-en, html:not([lang]) .lang-en { display:initial; }
[lang="hi"] .lang-hi { display:initial; }
[lang="hi"] .lang-en { display:none; }
[lang="en"] .lang-en { display:initial; }
[lang="en"] .lang-hi { display:none; }

@media (max-width:768px) {
  .hero .wrap { flex-direction:column; text-align:center; gap:32px; }
  .hero h1 { font-size:1.8rem; }
  .hero p { max-width:100%; }
  .hero-actions { justify-content:center; }
  .hero-visual { width:160px; height:160px; font-size:3.5rem; }
  .nav-links { gap:14px; }
  .nav-links a { font-size:0.78rem; }
}