/* ==========================================================================
   Telugu Font (telugufont.co.in) - Modern Styling & Typography
   ========================================================================== */

:root {
  --paper:    #F2F7EF;
  --paper-2:  #E3EFDD;
  --card:     #FBFDF8;
  --ink:      #14271B;
  --ink-soft: #364A3D;
  --muted:    #7B8C7E;
  --accent:   #138A5C;
  --accent-2: #7FB23E;
  --forest:   #0B5C2C;
  --line:     rgba(20,39,27,0.14);
  --line-2:   rgba(20,39,27,0.08);
  --radius:   4px;
  --display:  'Fraunces', Georgia, serif;
  --body:     'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --mono:     'Space Mono', ui-monospace, monospace;
  --deva:     'Mandali', 'Peddana', 'Anek Telugu', serif;
  --shadow:   0 18px 50px -28px rgba(20,39,27,0.45);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content:""; position: fixed; inset: 0; pointer-events: none; z-index: 9998;
  opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--accent); color: var(--paper); }
a { color: var(--accent); text-decoration: none; }

/* ── Header ── */
.header {
  background: #F0F4EC;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 0.8rem 1.6rem;
  position: sticky; top: 0; z-index: 1000;
}
.header-content { display:flex; align-items:center; gap:16px; max-width:1400px; margin:0 auto; width:100%; }
.header-left { display:flex; align-items:center; gap:14px; }
.header-right { margin-left:auto; display:flex; align-items:center; gap:14px; }
.nav-toggle, .share-btn {
  background:none; border:1px solid var(--line); width:42px; height:42px;
  border-radius:50%; font-size:1.02rem; cursor:pointer; color:var(--ink);
  display:grid; place-items:center; transition:all .25s ease;
}
.nav-toggle:hover { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.share-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.logo { display:flex; flex-direction:column; line-height:1.05; }
.logo a { font-family: var(--display); font-weight:600; font-size:1.4rem; color:var(--forest); text-decoration:none; letter-spacing:-.01em; }
.logo small { font-family: var(--mono); font-size:.56rem; letter-spacing:.26em; text-transform:uppercase; color:var(--accent); margin-top:2px; }
.header-tag { font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); display:none; }
@media(min-width:1200px){ .header-tag{ display:block; } }

/* ── Desktop Header Navigation ── */
.desktop-nav {
  display: none;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  margin-right: 12px;
}
.desktop-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  text-decoration: none;
  background: transparent;
  border: none;
  border-radius: 6px;
  transition: color 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.desktop-nav-link i {
  font-size: 0.92rem;
  color: var(--muted);
  transition: color 0.2s ease, transform 0.2s ease;
}
.desktop-nav-link:hover {
  background: transparent;
  color: var(--forest);
  transform: translateY(-1px);
}
.desktop-nav-link:hover i {
  color: var(--accent);
  transform: scale(1.1);
}
.desktop-nav-link.active {
  background: transparent !important;
  color: var(--forest) !important;
  font-weight: 750;
  border: none !important;
  box-shadow: none !important;
}
.desktop-nav-link.active i {
  color: var(--forest) !important;
}

/* Dropdown in Desktop Nav */
.desktop-dropdown {
  position: relative;
  display: inline-block;
}
.desktop-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.desktop-dropdown-btn i {
  font-size: 0.78rem;
  color: var(--muted);
  transition: transform 0.2s ease, color 0.2s ease;
}
.desktop-dropdown:hover .desktop-dropdown-btn {
  background: transparent;
  color: var(--forest);
  transform: translateY(-1px);
}
.desktop-dropdown:hover .desktop-dropdown-btn i {
  transform: rotate(180deg);
  color: var(--accent);
}
.desktop-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 195px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 16px 36px -8px rgba(20, 39, 27, 0.22);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all 0.2s ease;
  z-index: 1002;
}
.desktop-dropdown:hover .desktop-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.desktop-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.18s ease;
}
.desktop-dropdown-menu a i {
  width: 18px;
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
}
.desktop-dropdown-menu a:hover,
.desktop-dropdown-menu a.active {
  background: var(--paper-2);
  color: var(--forest);
  transform: translateX(3px);
}
.desktop-dropdown-menu a:hover i,
.desktop-dropdown-menu a.active i {
  color: var(--accent);
}

@media(min-width: 992px) {
  .desktop-nav {
    display: flex;
  }
  .nav-toggle {
    display: none !important;
  }
}

/* ── Side nav ── */
.side-nav {
  position:fixed; top:0; right:-340px; width:320px; height:100vh;
  background:var(--card); border-left:1px solid var(--line);
  transition:right .35s cubic-bezier(.16,1,.3,1); z-index:1001; padding:1.8rem 0; overflow-y:auto;
}
.side-nav.open { right:0; }
.side-nav-header { padding:0 1.8rem 1.4rem; margin-bottom:1rem; border-bottom:1px solid var(--line-2); display:flex; justify-content:space-between; align-items:center; }
.side-nav .logo { font-family:var(--display); font-weight:600; font-size:1.15rem; color:var(--ink); flex-direction:row; align-items:center; gap:.5rem; }
.close-nav { background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--accent); }
.nav-links { list-style:none; }
.nav-links a { display:flex; align-items:center; gap:.7rem; padding:.85rem 1.8rem; color:var(--ink-soft); text-decoration:none; font-weight:500; border-left:3px solid transparent; transition:all .2s ease; }
.nav-links a i { color:var(--muted); width:18px; text-align:center; }
.nav-links a:hover, .nav-links a.active { background:var(--paper-2); border-left-color:var(--accent); color:var(--ink); }
.nav-links a:hover i, .nav-links a.active i { color:var(--accent); }
.nav-links .others { font-family:var(--mono); font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); padding:1.2rem 1.8rem .4rem; }
.overlay { position:fixed; inset:0; background:rgba(20,39,27,.4); backdrop-filter:blur(3px); z-index:1000; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.overlay.open { opacity:1; pointer-events:auto; }

/* ── Hero Section ── */
/* ── Hero Section ── */
.main-content { width: 100%; margin: 0; padding: 0; }
.hero-section {
  position: relative;
  padding: 78px 28px 130px;
  background: 
    radial-gradient(circle at 82% 38%, rgba(19, 138, 92, 0.12) 0%, transparent 55%),
    radial-gradient(circle at 18% 15%, rgba(197, 155, 39, 0.08) 0%, transparent 40%),
    linear-gradient(160deg, #EBF5E7 0%, var(--paper) 68%);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  width: 100%;
}
.hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  text-align: left;
}

/* Dual-layered artistic Telugu Glyph with glowing ambient aura */
.hero-glyph-wrap {
  position: absolute;
  right: -2%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-glyph {
  font-family: var(--deva);
  font-size: clamp(22rem, 46vw, 40rem);
  line-height: .8;
  color: var(--accent);
  opacity: .09;
  filter: drop-shadow(0 15px 35px rgba(11, 75, 47, 0.12));
}
.hero-glyph-aura {
  position: absolute;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(19, 138, 92, 0.14) 0%, rgba(197, 155, 39, 0.06) 45%, transparent 70%);
  pointer-events: none;
}

/* Unique Eyebrow & Badges */
.hero-badge-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1.4rem;
  flex-wrap: wrap;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(19, 138, 92, 0.12);
  border: 1px solid rgba(19, 138, 92, 0.25);
  color: var(--forest);
  padding: 5px 13px;
  border-radius: 30px;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  font-weight: 700;
  text-transform: uppercase;
}
.hero-badge i { color: var(--accent); font-size: .75rem; }
.hero-badge-tag {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-badge-tag::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent);
  display: inline-block;
  opacity: .6;
}

/* Headline with luxury gradient text & accent arrow */
.hero-section h1 {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 560;
  font-size: clamp(2.4rem, 5.6vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ink);
  max-width: 19ch;
  margin-bottom: .8rem;
  text-align: left;
}
.hero-arrow {
  color: var(--accent);
  font-style: normal;
  display: inline-block;
  transition: transform .25s ease;
}
.hero-section h1:hover .hero-arrow {
  transform: translateX(6px);
}
.hero-subtitle-gradient {
  background: linear-gradient(135deg, var(--forest) 15%, var(--accent) 95%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-deva {
  font-family: var(--deva);
  font-size: clamp(1.2rem, 2.6vw, 1.7rem);
  color: var(--ink-soft);
  margin-bottom: 1.3rem;
  text-align: left;
  font-weight: 500;
}
.hero-section p.lead {
  max-width: 62ch;
  font-size: 1.05rem;
  color: var(--ink-soft);
  line-height: 1.65;
  text-align: left;
  margin: 0 0 1.8rem;
}

/* Stat Rule with individual feature chips */
.hero-rule {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, max-content));
  gap: 1.8rem;
  margin-top: 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  max-width: 680px;
}
.stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(19, 138, 92, 0.08);
  border: 1px solid rgba(19, 138, 92, 0.16);
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: .85rem;
  flex-shrink: 0;
}
.stat-item b {
  display: block;
  font-family: var(--display);
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
}
.stat-item span {
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .06em;
  color: var(--muted);
  text-transform: uppercase;
}

/* Popular Use Cases Tags in Hero */
.use-cases-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding-top: 1.1rem;
}
.use-case-label {
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--forest);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.use-case-label i { color: var(--accent); }
.use-case-tag {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(19, 138, 92, 0.22);
  padding: 4px 13px;
  border-radius: 20px;
  font-size: .75rem;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(4px);
  transition: all .2s ease;
  user-select: none;
}
.use-case-tag i { color: var(--accent); font-size: .72rem; }
.use-case-tag:hover {
  background: #fff;
  border-color: var(--accent);
  color: var(--forest);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(19, 138, 92, 0.12);
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  animation: rise .8s cubic-bezier(.16, 1, .3, 1) forwards;
}
.d1 { animation-delay: .05s; }
.d2 { animation-delay: .15s; }
.d3 { animation-delay: .25s; }
.d4 { animation-delay: .35s; }
.d5 { animation-delay: .45s; }
@keyframes rise {
  to { opacity: 1; transform: none; }
}

/* ── Composing Desk / Input Section ── */
.input-section {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.8rem;
  margin: -84px auto 24px;
  max-width: 1180px;
  position: relative;
  z-index: 5;
  box-shadow: 0 20px 48px -18px rgba(20, 39, 27, 0.22);
}

.compose-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .75rem;
}
.compose-badge {
  background: var(--accent);
  color: #fff;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .18em;
  padding: 4px 11px;
  border-radius: 3px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(19, 138, 92, 0.25);
}
.compose-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}
.char-counter {
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--muted);
  background: var(--paper-2);
  padding: 3px 9px;
  border-radius: 12px;
}
.tool-btn {
  background: none;
  border: 1px solid var(--line-2);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: .68rem;
  padding: 3px 9px;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all .2s ease;
}
.tool-btn:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.input-container {
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
#inputText {
  width: 100%;
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  font-family: var(--deva), var(--body);
  font-size: 1.35rem;
  color: var(--ink);
  resize: vertical;
  min-height: 98px;
  transition: all .25s ease;
  line-height: 1.5;
}
#inputText::placeholder {
  font-family: var(--body);
  color: var(--muted);
  font-size: 1rem;
}
#inputText:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(19, 138, 92, 0.14);
  background: #fff;
}

/* Quick Interactive Telugu Sample Pills */
.sample-pills-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: .2rem;
}
.sample-label {
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--muted);
  letter-spacing: .08em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.sample-label i { color: var(--accent); }
.sample-pill {
  background: var(--paper);
  border: 1px solid var(--line-2);
  color: var(--ink);
  padding: 4px 11px;
  border-radius: 20px;
  font-size: .78rem;
  font-family: var(--deva), var(--body);
  cursor: pointer;
  transition: all .2s ease;
  user-select: none;
}
.sample-pill:hover {
  background: var(--paper-2);
  border-color: var(--accent);
  color: var(--forest);
  transform: translateY(-1px);
}

/* Typing Guide Collapsible Drawer */
.typing-guide-drawer {
  display: none;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.1rem 1.3rem;
  margin-top: .6rem;
  margin-bottom: .6rem;
  animation: slideDown .25s cubic-bezier(.16, 1, .3, 1);
}
.typing-guide-drawer.open {
  display: block;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.guide-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 700;
  color: var(--forest);
  margin-bottom: .7rem;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: .4rem;
}
.guide-header span { display: inline-flex; align-items: center; gap: 7px; }
.guide-header i { color: var(--accent); }
.close-guide-btn {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 0 4px;
}
.close-guide-btn:hover { color: var(--ink); }
.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  font-size: .8rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.guide-col {
  background: #fff;
  border: 1px solid var(--line-2);
  padding: 8px 12px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: .74rem;
}
.guide-col b { color: var(--forest); display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; }


.toggle-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: .4rem;
  align-items: center;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 30px;
  font-family: var(--mono);
  font-size: .74rem;
  cursor: pointer;
  user-select: none;
  transition: all .2s ease;
  color: var(--ink-soft);
}
.pill input { accent-color: var(--accent); cursor: pointer; }
.pill .accent { color: var(--accent); font-weight: 700; }
.pill:hover { border-color: var(--accent); color: var(--ink); }

/* ── Controls Bar ── */
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-2);
  align-items: center;
}
.controls.is-sticky,
.controls.floating {
  position: static;
  display: flex;
}
#controlsSpacer { display: none; }
.control-group {
  display: flex;
  align-items: center;
  gap: .65rem;
  background: var(--paper);
  border: 1px solid var(--line-2);
  padding: .5rem .95rem;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .75rem;
  transition: border-color .2s ease;
}
.control-group:hover {
  border-color: var(--line);
}
.control-group label {
  font-weight: 600;
  font-size: .82rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
  margin: 0;
}
.control-group label i { color: var(--accent); }
.control-group label span { font-family: var(--mono); color: var(--ink); }
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 120px;
  height: 3px;
  border-radius: 3px;
  background: var(--line);
  cursor: pointer;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--card);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--card);
  cursor: pointer;
}
.control-group input[type="color"] {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid var(--card);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--line);
  background: transparent;
}
.control-group input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.control-group input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; }

.control-btn-reset {
  background: var(--paper);
  border: 1px solid var(--line-2);
  color: var(--muted);
  padding: .5rem .9rem;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .74rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all .2s ease;
}
.control-btn-reset:hover {
  color: var(--forest);
  border-color: var(--accent);
  background: var(--paper-2);
}

/* ── FX Buttons in Controls Bar ── */
.fx-group {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  padding: .35rem .7rem;
  border-radius: 999px;
}
.fx-btn {
  background: #fff;
  border: 1px solid var(--line-2);
  color: var(--ink-soft);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .82rem;
  cursor: pointer;
  transition: all .2s ease;
  user-select: none;
}
.fx-btn:hover {
  border-color: var(--accent);
  color: var(--forest);
  background: var(--paper-2);
}
.fx-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(19, 138, 92, 0.3);
}
.fx-btn#fxShadowBtn, .fx-btn#fxSpacingBtn {
  width: auto;
  border-radius: 999px;
  padding: 0 11px;
  display: inline-flex;
  gap: 5px;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 600;
}

/* Live FX Preview Modifiers */
.preview-text.is-bold { font-weight: 700 !important; }
.preview-text.is-italic { font-style: italic !important; }
.preview-text.is-shadow { text-shadow: 0 4px 14px rgba(19, 138, 92, 0.45) !important; }
.preview-text.is-spacing { letter-spacing: 0.14em !important; }

/* ── Main Part & Category Filter Bar ── */
.main-part { max-width: 1180px; margin: 2rem auto; padding: 0 24px; }

.category-filter-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  overflow-x: auto;
  padding: .4rem 0 1.2rem;
  margin-bottom: .6rem;
  scrollbar-width: none;
}
.category-filter-bar::-webkit-scrollbar { display: none; }
.filter-pill {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  padding: 8px 18px;
  border-radius: 999px;
  font-family: var(--body);
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .22s ease;
  user-select: none;
  box-shadow: 0 2px 6px rgba(20, 39, 27, 0.04);
}
.filter-pill i { font-size: .82rem; color: var(--muted); transition: color .2s ease; }
.filter-pill:hover {
  border-color: var(--accent);
  color: var(--forest);
  transform: translateY(-1px);
}
.filter-pill.active {
  background: var(--forest);
  color: #fff;
  border-color: var(--forest);
  box-shadow: 0 4px 14px rgba(11, 75, 47, 0.25);
}
.filter-pill.active i { color: #fff; }

.grid-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 8px 0 26px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.grid-head h2 {
  font-family: var(--display);
  font-weight: 560;
  font-size: clamp(1.6rem, 3.6vw, 2.3rem);
  letter-spacing: -.01em;
  color: var(--ink);
}
.grid-head .count {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Font Card Category & Designer Enhancements */
.font-category-badge {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(19, 138, 92, 0.08);
  color: var(--forest);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(19, 138, 92, 0.18);
  margin-left: 6px;
}
.font-designer-tag {
  font-family: var(--mono);
  font-size: .65rem;
  color: var(--muted);
  margin-left: auto;
  margin-right: 12px;
}


.fonts-grid {
  display:grid; grid-template-columns:1fr; gap:1.6rem;
}

.font-card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 2px 8px rgba(20,39,27,0.04); overflow:hidden; transition:transform .2s ease, box-shadow .2s ease;
}
.font-card:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(20,39,27,0.1); }
.font-card-top {
  padding:.8rem 1.4rem; background:var(--paper-2); border-bottom:1px solid var(--line-2);
  display:flex; justify-content:space-between; align-items:center;
}
.font-title-group { display:flex; align-items:baseline; gap:10px; }
.font-title-group .font-num { font-family:var(--mono); font-size:.75rem; color:var(--muted); }
.font-title-group .font-name { font-family:var(--display); font-size:1.15rem; font-weight:600; color:var(--forest); }
.font-title-group .font-telugu-name { font-family:var(--deva); font-size:.95rem; color:var(--accent); }

.copy-icon-btn {
  background:none; border:none; font-size:.9rem; color:var(--muted); cursor:pointer; padding:4px 8px; border-radius:3px;
}
.copy-icon-btn:hover { color:var(--forest); background:rgba(20,39,27,0.06); }

.font-preview-area {
  padding:2.2rem 1.4rem; min-height:130px; display:flex; align-items:center; justify-content:center;
  text-align:center; overflow-x:auto; word-break:break-word;
}
.font-preview-area.is-transparent {
  background-image: linear-gradient(45deg, #e5ece0 25%, transparent 25%), 
                    linear-gradient(-45deg, #e5ece0 25%, transparent 25%), 
                    linear-gradient(45deg, transparent 75%, #e5ece0 75%), 
                    linear-gradient(-45deg, transparent 75%, #e5ece0 75%);
  background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}

.font-card-actions {
  padding:.8rem 1.4rem; background:var(--card); border-top:1px solid var(--line-2);
  display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;
}
.btn-group { display:flex; gap:8px; flex-wrap:wrap; }
.btn-dl {
  padding:6px 14px; font-family:var(--mono); font-size:.74rem; font-weight:700;
  border-radius:var(--radius); border:1px solid var(--line); cursor:pointer;
  background:var(--paper); color:var(--ink); display:inline-flex; align-items:center; gap:6px;
  transition:all .2s ease; text-decoration:none;
}
.btn-dl:hover { background:var(--forest); color:#fff; border-color:var(--forest); }
.btn-dl.btn-trans { background:rgba(19,138,92,0.08); color:var(--forest); border-color:rgba(19,138,92,0.25); }
.btn-dl.btn-trans:hover { background:var(--accent); color:#fff; }

/* ── Pagination ── */
.pagination {
  display:flex; justify-content:center; align-items:center; gap:6px;
  margin:2.5rem 0 1.5rem; flex-wrap:wrap; font-family:var(--mono); font-size:.82rem;
}
.pagination a {
  padding:6px 12px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--card); color:var(--ink-soft); text-decoration:none; transition:all .2s ease;
}
.pagination a:hover, .pagination a.active {
  background:var(--forest); color:#fff; border-color:var(--forest);
}

/* ── Unique Telugu Typography Studio Showcase & Content Sections ── */
.container { max-width: 1140px; margin: 3rem auto; padding: 0 1.25rem; }

/* ── Royal Telugu Showcase Banner ── */
.telugu-showcase-banner {
  background: linear-gradient(135deg, #073B1B 0%, #0B5C2C 50%, #138A5C 100%);
  border: 1px solid rgba(19, 138, 92, 0.4);
  border-radius: 12px;
  padding: 3.5rem 2rem;
  color: #F2F7EF;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px -12px rgba(7, 59, 27, 0.35);
  margin-bottom: 3.5rem;
}
.telugu-showcase-banner::before {
  content: "తెలుగు";
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
  font-family: var(--deva);
  font-size: 14rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.04);
  pointer-events: none;
  line-height: 1;
}
.showcase-banner-inner { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; }
.showcase-top-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #FFDF85;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  margin-bottom: 1.2rem;
}
.showcase-title {
  font-family: var(--display);
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 0.6rem;
  line-height: 1.2;
}
.showcase-telugu-sub {
  font-family: var(--deva);
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  color: #C3EBCF;
  margin-bottom: 1rem;
  font-weight: 500;
  line-height: 1.45;
}
.showcase-desc {
  font-size: 0.98rem;
  color: rgba(242, 247, 239, 0.88);
  line-height: 1.65;
  margin-bottom: 1.8rem;
}
.showcase-pills-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.studio-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
}
.studio-pill i { color: #8BE4B2; }

/* ── Section Titles ── */
.section-title-wrap {
  text-align: center;
  margin: 3.5rem 0 2.2rem;
}
.section-badge {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(19, 138, 92, 0.08);
  border: 1px solid rgba(19, 138, 92, 0.2);
  padding: 4px 12px;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 0.8rem;
}
.section-title-wrap h2 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  color: var(--forest);
  margin-bottom: 0.4rem;
  line-height: 1.25;
}
.section-sub {
  font-family: var(--deva);
  font-size: 1.05rem;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 10px;
}
.heading-underline {
  width: 50px;
  height: 3px;
  background: var(--accent);
  margin: 10px auto 0;
  border-radius: 2px;
}

/* ── Heritage & Anatomy Grid ── */
.craft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.craft-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 3px 12px rgba(20, 39, 27, 0.03);
}
.craft-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(20, 39, 27, 0.08);
  border-color: var(--accent);
}
.craft-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--paper-2);
  color: var(--forest);
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  margin-bottom: 4px;
}
.craft-card h3 {
  font-family: var(--deva);
  font-size: 1.18rem;
  color: var(--forest);
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}
.craft-card p {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 0;
}

/* ── 6-Pillar Creative Studio Suite ── */
.studio-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.3rem;
  margin-top: 1.5rem;
}
.studio-feature-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.5rem;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: all 0.22s ease;
  box-shadow: 0 2px 8px rgba(20, 39, 27, 0.03);
}
.studio-feature-card:hover {
  border-color: var(--accent);
  background: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(19, 138, 92, 0.09);
}
.studio-feature-card .s-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--forest);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
}
.studio-feature-card .s-content h3 {
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.studio-feature-card .s-content p {
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}

/* ── 3-Step Creation Pipeline ── */
.workflow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.workflow-step-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 2rem 1.6rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 2px 10px rgba(20, 39, 27, 0.04);
  transition: transform 0.22s ease;
}
.workflow-step-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
}
.step-num-badge {
  position: absolute;
  top: 16px;
  right: 18px;
  font-family: var(--display);
  font-size: 2.2rem;
  font-weight: 800;
  color: rgba(20, 39, 27, 0.07);
  line-height: 1;
}
.workflow-step-card .step-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--forest), var(--accent));
  color: #FFFFFF;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
}
.workflow-step-card h3 {
  font-family: var(--deva);
  font-size: 1.25rem;
  color: var(--forest);
  margin: 0;
}
.workflow-step-card p {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}

/* ── Font Comparison Matrix Table ── */
.matrix-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  box-shadow: 0 4px 16px rgba(20, 39, 27, 0.04);
  margin-top: 1.5rem;
}
.font-matrix-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.92rem;
}
.font-matrix-table th {
  background: var(--paper-2);
  padding: 14px 18px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--forest);
  border-bottom: 2px solid var(--line);
  white-space: nowrap;
}
.font-matrix-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2);
  color: var(--ink-soft);
  vertical-align: middle;
}
.font-matrix-table tr:hover td {
  background: rgba(19, 138, 92, 0.03);
}
.table-telugu-name {
  font-family: var(--deva);
  color: var(--accent);
  font-size: 0.88rem;
  margin-left: 6px;
}
.badge-tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--forest);
  white-space: nowrap;
}

/* ── Authentic Telugu DTP & Production FAQs ── */
.faq-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 1.5rem;
}
.faq-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s ease;
}
.faq-card[open] {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(19, 138, 92, 0.08);
}
.faq-question {
  padding: 16px 20px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  list-style: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-icon {
  font-size: 0.85rem;
  color: var(--muted);
  transition: transform 0.25s ease, color 0.2s ease;
}
.faq-card[open] .faq-icon {
  transform: rotate(180deg);
  color: var(--accent);
}
.faq-answer {
  padding: 0 20px 18px;
  font-size: 0.93rem;
  color: var(--ink-soft);
  line-height: 1.68;
}
.faq-answer p { margin-bottom: 8px; }
.faq-answer ol {
  margin: 8px 0 8px 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.faq-answer li {
  line-height: 1.55;
}

/* ── Comments Section ── */
.comment { margin:3rem auto; }
.comment h2 { font-family:var(--display); font-size:1.3rem; color:var(--forest); margin-bottom:.5rem; }
.comment hr { border:none; border-top:1px solid var(--line); margin-bottom:1.5rem; }

/* ── Footer ── */
.site-footer {
  background:#E9F2E4; border-top:1px solid var(--line); padding:3rem 1rem 2rem; margin-top:4rem;
}
.footer-content-centered {
  max-width:1000px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:1.2rem;
}
.footer-logo-text { font-family:var(--display); font-size:1.5rem; font-weight:700; color:var(--forest); }
.footer-content-centered .side-nav {
  position:static; width:100%; height:auto; background:none; border:none; padding:0; overflow:visible;
}
.footer-content-centered .side-nav-header { display:none; }
.footer-content-centered .nav-links {
  display:flex; justify-content:center; flex-wrap:wrap; gap:.5rem 1.2rem;
}
.footer-content-centered .nav-links a {
  padding:4px 8px; border:none; font-size:.86rem; color:var(--ink-soft);
}
.footer-content-centered .nav-links a:hover { background:none; color:var(--forest); text-decoration:underline; }
.footer-content-centered .others { display:none; }
.footer-disclaimer { font-family:var(--mono); font-size:.75rem; color:var(--muted); }
.footer-divider { width:100%; height:1px; background:var(--line); margin:.5rem 0; }
.footer-copyright { font-family:var(--mono); font-size:.75rem; color:var(--muted); }

/* ── Modals & Floating Icon ── */
.btn-char-map {
  position:fixed; bottom:24px; right:24px; width:48px; height:48px;
  background:var(--forest); color:#fff; border-radius:50%;
  display:grid; place-items:center; font-size:1.2rem; box-shadow:0 4px 15px rgba(11,92,44,0.4);
  z-index:999; border:2px solid #fff; transition:transform .2s ease;
}
.btn-char-map:hover { transform:scale(1.1); color:#fff; }

.custom-modal {
  position:fixed; inset:0; background:rgba(20,39,27,0.5); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:1rem;
  z-index:2000; opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.custom-modal.open { opacity:1; pointer-events:auto; }
.custom-modal-dialog { width:100%; max-width:480px; }
.custom-modal-content {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
}
.custom-modal-header {
  padding:1rem 1.4rem; border-bottom:1px solid var(--line-2); display:flex; justify-content:space-between; align-items:center;
}
.custom-modal-title { font-family:var(--display); font-size:1.2rem; color:var(--forest); }
.btn-close-modal { background:none; border:none; font-size:1.4rem; cursor:pointer; color:var(--muted); }
.custom-modal-body { padding:1.4rem; }
.social-share-icons { display:flex; justify-content:space-between; gap:8px; margin:1rem 0; }
.social-icon {
  width:40px; height:40px; border-radius:50%; background:var(--paper-2);
  display:grid; place-items:center; color:var(--forest); font-size:1.1rem; text-decoration:none;
}
.social-icon:hover { background:var(--accent); color:#fff; }
.input-group-custom { display:flex; gap:6px; margin-top:1rem; }
.form-control-custom {
  flex:1; padding:8px 12px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--paper); font-family:var(--mono); font-size:.8rem; outline:none;
}
.btn-copy-custom {
  padding:8px 16px; background:var(--forest); color:#fff; border:none; border-radius:var(--radius);
  font-family:var(--mono); font-size:.8rem; cursor:pointer; font-weight:700;
}

/* ── Toast Notifications ── */
.toast-container { position:fixed; bottom:20px; left:20px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast-msg {
  padding:10px 16px; background:var(--ink); color:#fff; border-radius:var(--radius);
  font-family:var(--mono); font-size:.78rem; display:flex; align-items:center; gap:8px;
  box-shadow:0 6px 18px rgba(0,0,0,0.2); animation:slideIn .25s ease;
}
@keyframes slideIn { from{ transform:translateY(10px); opacity:0; } to{ transform:translateY(0); opacity:1; } }

/* Responsive adjustments matching fontsinhindi */
@media (max-width: 820px) {
  .hero-glyph {
    opacity: .05;
    right: -10%;
  }
}

@media (max-width: 768px) {
  .hero-rule { gap: 1.2rem; }
  .grid-head { flex-direction: column; gap: 4px; }
}

@media (max-width: 560px) {
  .hero-section { padding: 54px 20px 108px; }
  .input-section { padding: 1.3rem; margin: -65px 16px 20px; }
  .main-part { padding: 0 16px; }
  .control-group {
    padding: .4rem .65rem;
  }
  .control-group input[type="range"] {
    width: 80px;
  }
  label.hd { display: none; }
}