/* ==========================================================================
   BhashaIndia.in - Components Stylesheet (Microsoft-Inspired Design)
   Compact Proportions (~15% Reduced) • Subtle Corner Gradients • Light Footer
   ========================================================================== */

/* ==========================================================================
   LEGACY INDIC FONT DECLARATIONS (@font-face)
   Direct TTF references for authentic rendering in all browsers
   ========================================================================== */
@font-face {
  font-family: 'Kruti Dev 010';
  src: local('Kruti Dev 010'), local('KrutiDev010'), local('Kruti Dev'),
       url('../fonts/krdv010.ttf?v=1.2') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'DevLys 010';
  src: local('DevLys 010'), local('DevLys010'), local('DevLys'),
       url('../fonts/devlys010.ttf?v=1.2') format('truetype');
  font-display: swap;
}

/* Force loading web font for Chanakya to avoid conflicting with local Unicode Chanakya font */
@font-face {
  font-family: 'Chanakya';
  src: url('../fonts/chanakya.ttf?v=1.2') format('truetype');
  font-display: swap;
}

/* Web font for Shree-Dev-0714 / ShreeLipi with multiple family aliases */
@font-face {
  font-family: 'Shree-Dev-0714';
  src: url('../fonts/shree-dev-0714.ttf?v=1.2') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'SHREE-DEV-0714';
  src: url('../fonts/shree-dev-0714.ttf?v=1.2') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'ShreeLipi';
  src: url('../fonts/shree-dev-0714.ttf?v=1.2') format('truetype');
  font-display: swap;
}

/* Typography Classes for Textareas & Content Previews */
.font-kruti {
  font-family: 'Kruti Dev 010', 'KrutiDev010', 'Kruti Dev', sans-serif !important;
  font-size: 17.5px !important;
  line-height: 1.7 !important;
  letter-spacing: 0.02em;
}
.font-devlys {
  font-family: 'DevLys 010', 'DevLys010', 'DevLys', sans-serif !important;
  font-size: 17.5px !important;
  line-height: 1.7 !important;
  letter-spacing: 0.02em;
}
.font-chanakya {
  font-family: 'Chanakya', 'CHANAKYA', sans-serif !important;
  font-size: 17.5px !important;
  line-height: 1.7 !important;
  letter-spacing: 0.02em;
}
.font-shreelipi {
  font-family: 'Shree-Dev-0714', 'SHREE-DEV-0714', sans-serif !important;
  font-size: 17.5px !important;
  line-height: 1.7 !important;
  letter-spacing: 0.02em;
}
.font-unicode {
  font-family: 'Hind', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 15.5px !important;
  line-height: 1.65 !important;
}

/* --------------------------------------------------------------------------
   1. Hero Section (Modified Design with Full Fluid Responsiveness)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background-color: #eef7ff;
  min-height: clamp(700px, 48vw, 920px);
  padding: clamp(54px, 1.8vw, 34px) 0 clamp(28px, 2vw, 38px);
  background-size: 100% auto !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll;
}

.hero-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, .08) 48%, rgba(255, 255, 255, .12) 100%);
  z-index: 0;
  pointer-events: none;
}

.hero-container {
  position: relative;
  z-index: 1;
  width: min(94%, 1680px);
  margin: 0 auto;
}

.hero-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, .68vw, 13px);
  color: var(--blue);
  font-size: clamp(12px, .78vw, 15px);
  font-weight: 600;
  margin: 0 auto clamp(7px, .52vw, 10px);
}

.hero-kicker span {
  height: 1px;
  width: clamp(42px, 4.15vw, 80px);
  background: linear-gradient(90deg, transparent, #9fc7e9);
}

.hero h1 {
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(42px, 3.9vw, 78px);
  line-height: 1.06;
  color: #102343;
  font-weight: 800;
  letter-spacing: -.025em;
  text-shadow: 0 1px 0 #fff;
}

.hero h1 em {
  font-style: normal;
  color: #0759a8;
}

.hero-lead {
  max-width: min(62vw, 1100px);
  margin: clamp(24px, 1.05vw, 30px) auto 9px;
  text-align: center;
  font-size: clamp(15px, 1.04vw, 20px);
  color: #34465d;
}

.tricolor-stroke {
  width: clamp(210px, 16.7vw, 320px);
  height: clamp(5px, .36vw, 7px);
  margin: 0 auto clamp(18px, 1.56vw, 30px);
  display: flex;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
}

.tricolor-stroke i,
.tricolor-stroke b,
.tricolor-stroke span {
  height: 100%;
  display: block;
}

.tricolor-stroke i {
  width: 42%;
  background: var(--orange);
  transform: skewX(-24deg);
}

.tricolor-stroke b {
  width: 35%;
  background: #fff;
}

.tricolor-stroke span {
  width: 30%;
  background: var(--green);
  transform: skewX(-24deg);
}

.hero-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: min(90vw, 1390px);
  max-width: none;
  gap: clamp(14px, 1.15vw, 22px);
  margin: 0 auto clamp(16px, 1.25vw, 24px);
}

.hero-card {
  border: 1px solid rgba(180, 207, 232, .72);
  border-radius: clamp(16px, 1.05vw, 20px);
  padding: clamp(17px, 1.25vw, 24px) clamp(18px, 1.35vw, 26px) clamp(16px, 1.05vw, 20px);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 14px 36px rgba(34, 77, 118, .09);
  min-height: clamp(220px, 14.32vw, 275px);
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(8px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  color: inherit;
}

.hero-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(34, 77, 118, .13);
}

a.hero-card {
  cursor: pointer;
}

a.hero-card:hover .card-link {
  color: var(--orange);
}

.card-tone-1 {
  background: linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(237, 248, 255, .93));
}

.card-tone-2 {
  background: linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(249, 244, 255, .94));
}

.card-tone-3 {
  background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(255, 250, 240, .95));
}

.hero-card-head {
  display: flex;
  gap: clamp(10px, .78vw, 15px);
  align-items: flex-start;
}

.icon-tile {
  width: clamp(42px, 2.6vw, 50px);
  height: clamp(42px, 2.6vw, 50px);
  border-radius: clamp(10px, .63vw, 12px);
  background: #eaf4ff;
  border: 1px solid #cfe4f7;
  display: grid;
  place-items: center;
  font-size: clamp(20px, 1.25vw, 24px);
  flex: 0 0 auto;
}

.hero-card h2 {
  font-family: var(--serif);
  font-size: clamp(19px, 1.2vw, 23px);
  line-height: 1.25;
  color: #102343;
}

.eyebrow {
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--blue);
  font-weight: 700;
  text-transform: uppercase;
  display: block;
  margin-bottom: 3px;
}

.card-subtitle {
  color: var(--blue);
  font-size: clamp(12px, .73vw, 14px);
  font-weight: 600;
  margin-top: 2px;
}

.hero-card p {
  font-size: clamp(13px, .78vw, 15px);
  color: #46566a;
  line-height: 1.55;
  margin: clamp(11px, .83vw, 16px) 0 clamp(9px, .68vw, 13px);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(5px, .36vw, 7px);
  margin-top: auto;
}

.tag-row span {
  background: rgba(248, 251, 254, .95);
  border: 1px solid #d9e4ee;
  color: #415268;
  border-radius: 7px;
  padding: 3px clamp(6px, .42vw, 8px);
  font-size: clamp(10px, .625vw, 12px);
}

.card-link {
  margin-top: clamp(11px, .83vw, 16px);
  padding-top: clamp(9px, .63vw, 12px);
  border-top: 1px solid rgba(184, 205, 224, .65);
  text-align: center;
  color: var(--blue);
  font-weight: 700;
  font-size: clamp(13px, .78vw, 15px);
  display: block;
  text-decoration: none;
  transition: color 0.2s ease;
}

.card-link:hover {
  color: var(--orange);
}

.hero-search-block {
  width: min(68vw, 1050px);
  max-width: none;
  margin: clamp(17px, 1.25vw, 24px) auto clamp(45px, calc(0.94vw + 30px), 53px);
}

.search-label {
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(19px, 1.15vw, 22px);
  font-weight: 700;
  color: #13294c;
  margin-bottom: 7px;
}

.hero-search-wrapper {
  position: relative;
}

.hero-search-box {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #cddceb;
  border-radius: clamp(13px, .89vw, 17px);
  padding: 5px 6px 5px clamp(12px, .94vw, 18px);
  box-shadow: 0 11px 28px rgba(41, 77, 111, .11);
}

.hero-search-icon {
  font-size: clamp(28px, 1.77vw, 34px);
  color: var(--blue);
  line-height: 1;
  margin-right: clamp(7px, .52vw, 10px);
}

.hero-search-input {
  border: 0;
  outline: 0;
  flex: 1;
  font-size: clamp(14px, .89vw, 17px);
  color: var(--ink);
  background: transparent;
  padding: clamp(8px, .57vw, 11px) 0;
  font-family: inherit;
}

.hero-search-input::placeholder {
  color: #8a98a9;
}

.hero-search-btn {
  border: 0;
  border-radius: clamp(9px, .57vw, 11px);
  background: var(--blue);
  color: #fff;
  padding: clamp(11px, .68vw, 13px) clamp(18px, 1.3vw, 25px);
  font-weight: 700;
  font-size: clamp(14px, .83vw, 16px);
  box-shadow: 0 5px 12px rgba(9, 107, 196, .22);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s ease;
}

.hero-search-btn:hover {
  background: var(--blue-dark);
}

.search-results-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  background: #fff;
  border: 1px solid #d5e1ec;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(28, 63, 102, .14);
  z-index: 30;
  display: none;
  overflow: hidden;
  text-align: left;
}

.search-results-dropdown.is-active {
  display: block;
}

.search-result-item {
  display: block;
  padding: 13px 17px;
  border-bottom: 1px solid #edf2f6;
  text-decoration: none;
}

.search-result-item:hover {
  background: #f4f9ff;
}

.search-result-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-weight: 700;
  color: var(--ink);
}

.search-result-desc {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}

.search-result-category {
  font-size: 10px;
  color: var(--blue);
  border: 1px solid #d1e3f5;
  padding: 2px 6px;
  border-radius: 999px;
  white-space: nowrap;
}

.popular-searches {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(5px, .36vw, 7px);
  margin-top: clamp(8px, .63vw, 12px);
  font-size: clamp(11px, .68vw, 13px);
  color: #66778b;
}

.popular-searches strong {
  margin-right: 2px;
  color: #31445c;
}

.popular-pill {
  border: 1px solid #d4e0eb;
  background: #fff;
  border-radius: 999px;
  padding: 5px clamp(9px, .63vw, 12px);
  color: #30445d;
  font-size: clamp(10px, .625vw, 12px);
  box-shadow: 0 2px 7px rgba(35, 72, 107, .05);
  cursor: pointer;
  transition: all 0.2s ease;
}

.popular-pill:hover {
  border-color: #9dc5e9;
  color: var(--blue);
  background: #f4f9ff;
}

.secondary-feature-grid {
  margin-top: clamp(16px, 1.2vw, 23px);
}

.hero-trust-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 1.45vw, 28px);
  color: #607187;
  font-size: clamp(11px, .73vw, 14px);
  margin-top: clamp(16px, 1.25vw, 24px);
}

.hero-trust-strip div {
  display: flex;
  gap: 8px;
  align-items: center;
}

.hero-trust-strip span {
  color: var(--orange);
  font-size: 18px;
}

.hero-trust-strip i {
  height: 22px;
  width: 1px;
  background: #b8cadb;
}

/* Laptop zone */
@media (min-width: 1051px) and (max-width: 1450px) {
  .hero {
    min-height: clamp(700px, 51vw, 820px);
  }
  .hero-feature-grid {
    width: min(90vw, 1240px);
  }
  .hero-card p {
    line-height: 1.48;
  }
  .hero-trust-strip {
    gap: 16px;
  }
}

/* Very wide screens */
@media (min-width: 1900px) {
  .hero-container {
    width: min(92%, 1740px);
  }
}

/* Tablet */
@media (max-width: 1050px) {
  .hero {
    min-height: auto;
    background-size: auto 100% !important;
    background-position: center top !important;
  }
  .hero-feature-grid,
  .hero-search-block {
    width: 100%;
  }
  .hero-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero h1 {
    font-size: 49px;
  }
}

/* Mobile */
@media (max-width: 700px) {
  .hero {
    padding-top: 25px;
    background-size: auto 100% !important;
  }
  .hero-kicker {
    font-size: 12px;
  }
  .hero-kicker span {
    width: 35px;
  }
  .hero h1 {
    font-size: clamp(32px, 8.5vw, 40px);
  }
  .hero-lead {
    max-width: 92%;
    font-size: 16px;
  }
  .tricolor-stroke {
    width: 190px;
  }
  .hero-feature-grid {
    grid-template-columns: 1fr;
  }
  .secondary-feature-grid {
    margin-top: 16px;
  }
  .hero-card {
    min-height: 0;
    padding: 20px;
  }
  .hero-search-box {
    padding-left: 12px;
  }
  .hero-search-icon {
    font-size: 28px;
  }
  .hero-search-input {
    font-size: 14px;
    min-width: 0;
  }
  .hero-search-btn {
    padding: 11px 14px;
    font-size: 14px;
  }
  .popular-searches {
    justify-content: flex-start;
  }
  .hero-trust-strip {
    flex-direction: column;
    gap: 8px;
  }
  .hero-trust-strip i {
    display: none;
  }
}

@media (max-width: 430px) {
  .hero h1 {
    font-size: 31px;
  }
  .hero-card h2 {
    font-size: 20px;
  }
  .hero-card-head {
    gap: 10px;
  }
  .icon-tile {
    width: 43px;
    height: 43px;
  }
  .hero-search-btn span {
    display: none;
  }
  .hero-search-btn {
    padding: 12px 16px;
  }
}

/* --------------------------------------------------------------------------
   2. Community & Magazine Spotlight Cards
   -------------------------------------------------------------------------- */
.spotlight-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 40px;
}

@media (max-width: 992px) {
  .spotlight-split-grid {
    grid-template-columns: 1fr;
  }
}

.spotlight-card {
  border-radius: var(--radius-lg);
  padding: 26px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.spotlight-card:hover {
  transform: translateY(-3px);
  border-color: var(--ms-blue-border);
  box-shadow: var(--shadow-card-hover);
}

.spotlight-card.magazine-card {
  background: #FFFFFF radial-gradient(circle at 95% 0%, rgba(0, 103, 184, 0.08) 0%, rgba(255, 255, 255, 0) 65%);
  border: 1px solid #D2E3FC;
}

.spotlight-card.community-card {
  background: #FFFFFF radial-gradient(circle at 95% 0%, rgba(0, 120, 212, 0.06) 0%, rgba(255, 255, 255, 0) 65%);
  border: 1px solid #D2E3FC;
}

.spotlight-card-title {
  font-size: 21px;
  font-weight: 700;
  color: var(--text-headline);
  line-height: 1.3;
  margin-bottom: 8px;
}

.spotlight-card-desc {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: 18px;
  flex: 1;
}

/* --------------------------------------------------------------------------
   3. Bento Grid - Live Interactive Widgets
   -------------------------------------------------------------------------- */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 22px; /* Reduced from 32px */
}

.bento-col-8 {
  grid-column: span 8;
}

.bento-col-4 {
  grid-column: span 4;
}

@media (max-width: 1024px) {
  .bento-col-8, .bento-col-4 {
    grid-column: span 12;
  }
}

/* Interactive Live Converter Tool Widget */
.live-tool-widget {
  background: #FFFFFF;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  padding: 24px; /* Reduced from 36px */
  box-shadow: var(--shadow-md);
  position: relative;
}

.live-tool-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 12px;
}

.live-tool-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-headline);
  display: flex;
  align-items: center;
  gap: 8px;
}

.tool-mode-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-surface-alt);
  padding: 3px;
  border-radius: var(--radius-sm);
}

.tool-tab-btn {
  border: none;
  background: transparent;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: var(--font-base);
}

.tool-tab-btn.active {
  background: #FFFFFF;
  color: var(--ms-blue);
  box-shadow: var(--shadow-sm);
}

.tool-io-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

@media (max-width: 768px) {
  .tool-io-grid {
    grid-template-columns: 1fr;
  }
}

.tool-io-box {
  display: flex;
  flex-direction: column;
}

.tool-io-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tool-textarea {
  width: 100%;
  height: 140px; /* Reduced from 180px */
  padding: 12px;
  font-family: var(--font-base);
  font-size: 15px;
  color: var(--text-headline);
  background-color: #FAFAFA;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  resize: vertical;
  outline: none;
  line-height: 1.5;
}

.tool-textarea:focus {
  background-color: #FFFFFF;
  border-color: var(--ms-blue);
  box-shadow: 0 0 0 2px rgba(0, 103, 184, 0.15);
}

.tool-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.copy-notify {
  font-size: 12px;
  color: var(--badge-green-text);
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.copy-notify.show {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   4. Pillars Grid
   -------------------------------------------------------------------------- */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

@media (max-width: 1024px) {
  .pillars-grid {
    grid-template-columns: 1fr;
  }
}

.pillar-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px; /* Reduced from 36px */
  box-shadow: var(--shadow-card);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.pillar-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--ms-blue-border);
}

a.pillar-card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

a.pillar-card:hover .pillar-action .btn {
  background-color: var(--ms-blue);
  color: var(--text-on-primary);
  border-color: var(--ms-blue);
}

.pillar-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.pillar-icon-box {
  width: 48px;
  height: 48px;
  background-color: var(--ms-blue-light);
  border: 1px solid var(--ms-blue-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.pillar-header-meta {
  flex: 1;
}

.pillar-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-headline);
  line-height: 1.25;
  margin-bottom: 2px;
}

.pillar-en-title {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pillar-desc {
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: 16px;
  flex: 1;
}

.pillar-highlights-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}

.pillar-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

.pillar-tag {
  background-color: rgba(240, 244, 248, 0.8);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
}

.pillar-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-subtle);
  padding-top: 14px;
  margin-top: auto;
}

.pillar-count-badge {
  font-size: 13px;
  font-weight: 600;
  color: var(--ms-blue);
}

/* --------------------------------------------------------------------------
   5. Detailed Tools Grid
   -------------------------------------------------------------------------- */
.tools-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; /* Reduced from 28px */
}

@media (max-width: 1100px) {
  .tools-showcase-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .tools-showcase-grid {
    grid-template-columns: 1fr;
  }
}

.tool-item-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tool-item-card:hover {
  border-color: var(--ms-blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

a.tool-item-card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

a.tool-item-card:hover .tool-item-btn {
  color: var(--ms-blue-hover);
  text-decoration: underline;
}

.tool-item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.tool-item-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-headline);
  margin-bottom: 2px;
}

.tool-item-hi-title {
  font-size: 14px;
  color: var(--ms-blue);
  font-weight: 600;
  margin-bottom: 8px;
}

.tool-item-desc {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: 14px;
  flex: 1;
}

.tool-item-btn {
  margin-top: auto;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ms-blue);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tool-item-btn:hover {
  color: var(--ms-blue-hover);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   6. 📥 Downloads Hub: Fonts & Keyboards
   -------------------------------------------------------------------------- */
.fonts-specimen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 1100px) {
  .fonts-specimen-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .fonts-specimen-grid {
    grid-template-columns: 1fr;
  }
}

.font-specimen-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
  overflow: hidden;
}

.font-specimen-card:hover {
  transform: translateY(-2px);
  border-color: var(--ms-blue);
  box-shadow: var(--shadow-md);
}

.font-specimen-preview {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-headline);
  padding: 16px 12px;
  background-color: #F8F9FA;
  border-radius: var(--radius-sm);
  margin: 12px 0;
  text-align: center;
  border: 1px dashed #D1D5DB;
  font-family: var(--font-base);
}

/* --------------------------------------------------------------------------
   Layout Chart Cards with Thumbnails (Printable A4)
   -------------------------------------------------------------------------- */
.layout-charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.layout-chart-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 20px !important;
  padding: 22px 24px !important;
  background: #ffffff;
  border: 1px solid #c7e0f4;
  border-radius: var(--radius-lg);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.layout-chart-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 103, 184, 0.12);
  border-color: #0067b8;
}
.layout-chart-thumb-wrap {
  flex-shrink: 0;
  width: 130px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.layout-chart-thumb-wrap a {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid #c7e0f4;
  box-shadow: 0 4px 12px rgba(0, 103, 184, 0.08);
  background: #f8fafc;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.layout-chart-thumb-wrap a:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 20px rgba(0, 103, 184, 0.22) !important;
  border-color: #0067b8 !important;
}
.layout-chart-thumb-wrap img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 2/3;
  object-fit: cover;
}
.layout-chart-thumb-wrap .thumb-zoom-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 103, 184, 0.88);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  padding: 3px 0;
  backdrop-filter: blur(2px);
}
.layout-chart-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
@media (max-width: 1080px) {
  .layout-charts-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .layout-chart-card {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
  }
  .layout-chart-thumb-wrap {
    width: 150px !important;
    margin-bottom: 12px;
  }
  .layout-chart-info {
    align-items: center;
  }
  .layout-chart-info .btn-group {
    justify-content: center;
  }
}

.software-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

@media (max-width: 1024px) {
  .software-grid {
    grid-template-columns: 1fr;
  }
}

/* Desktop Software Section - Distinct Skyblue Gradient */
.section-software {
  background: linear-gradient(135deg, #d4ecfc 0%, #eef7fe 45%, #d9effe 100%);
  border-top: 1px solid #bae6fd;
  border-bottom: 1px solid #bae6fd;
  position: relative;
}

.software-card {
  background: #ffffff;
  border: 1px solid #c7e0f4;
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 4px 18px rgba(2, 132, 199, 0.07);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.22s ease;
  overflow: hidden;
}

.software-card:hover {
  border-color: #0284c7;
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(2, 132, 199, 0.15);
}

.software-card.pro-tier {
  border-top: 3px solid #0067b8;
}

.software-card.freeware-tier {
  border-top: 4px solid #10b981;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.software-card.pro-tier {
  border-top: 4px solid #0067b8;
}

/* Restructured Software Cards with 200px 3D Mockup in Center-Right Blank Space */
.software-card-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.software-badge-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.software-edition-chip {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  color: #047857;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 2px 9px;
  border-radius: 12px;
  white-space: nowrap;
  line-height: 1.3;
}

.software-price-pill {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ms-blue);
  background-color: var(--ms-blue-light);
  border: 1px solid var(--ms-blue-border);
  padding: 3px 10px;
  border-radius: var(--radius-full);
}

.price-pill-free {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border-color: #a7f3d0 !important;
}

.software-card-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-headline, #0f172a);
  line-height: 1.35;
  margin: 0 0 6px 0;
}

.software-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.18s ease;
}

.software-card-title a:hover {
  color: #0284c7;
}

.software-meta-row {
  font-size: 12.5px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.software-meta-author {
  color: #0284c7;
  font-weight: 700;
}

/* Card Body with 200px Mockup Column on Center-Right */
.software-card-body {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.software-card-text {
  flex: 1;
  min-width: 0;
}

.software-card-desc {
  font-size: 13.5px;
  color: var(--text-secondary, #475569);
  line-height: 1.58;
  margin-bottom: 10px;
}

.software-card-desc a {
  color: #0284c7;
  font-weight: 600;
  text-decoration: underline;
}

.software-features-heading {
  font-size: 12.5px;
  font-weight: 700;
  color: #1e293b;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}

.software-features-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.software-features-list li {
  font-size: 13px;
  color: var(--text-primary, #334155);
  margin-bottom: 6px;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  line-height: 1.4;
}

.software-features-list li::before {
  content: '✓';
  color: var(--badge-green-text, #10b981);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

/* 200px 3D Software Box Mockup */
.software-card-mockup-col {
  flex: 0 0 200px;
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.software-mockup-link {
  display: block;
  text-decoration: none;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.software-3d-box-200 {
  width: 200px;
  max-width: 200px;
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 24px rgba(15, 23, 42, 0.20));
  transition: transform 0.28s ease, filter 0.28s ease;
}

.software-card:hover .software-3d-box-200 {
  transform: translateY(-5px) scale(1.04);
  filter: drop-shadow(0 18px 32px rgba(15, 23, 42, 0.28));
}

.software-card-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
  flex-wrap: wrap;
}

.software-free-tribute-bar {
  margin-top: 10px;
  padding: 8px 12px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  font-size: 12px;
  color: #166534;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
}

.software-notice {
  font-size: 11.5px;
  color: #737373;
  margin-top: 10px;
  line-height: 1.45;
  border-top: 1px solid var(--border-subtle);
  padding-top: 8px;
}

@media (max-width: 640px) {
  .software-card-body {
    flex-direction: column;
    align-items: center;
  }
  .software-card-mockup-col {
    order: -1;
    margin-bottom: 12px;
  }
  .software-3d-box-200 {
    width: 180px;
    max-width: 180px;
  }
  .software-meta-row {
    justify-content: center;
  }
  .software-card-top-bar {
    justify-content: center;
  }
  .software-card-title {
    text-align: center;
  }
  .software-card-actions {
    flex-direction: column;
    width: 100%;
  }
  .software-card-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
/* Platform Guides Header Top Controls & Hub Link */
.platform-section-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e2e8f0;
}

.platform-top-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.platform-tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eff6fc;
  border: 1px solid #bfdbfe;
  color: #0067b8;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 9999px;
}

.platform-hub-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: #0067b8;
  background: #eff6fc;
  padding: 7px 16px;
  border-radius: 6px;
  text-decoration: none;
  border: 1px solid #c7e0f4;
  box-shadow: 0 1px 3px rgba(0, 103, 184, 0.08);
  transition: all 0.18s ease;
}

.platform-hub-link:hover {
  background: #0067b8;
  color: #ffffff;
  border-color: #0067b8;
  box-shadow: 0 3px 8px rgba(0, 103, 184, 0.25);
  transform: translateY(-1px);
}

.platform-guides-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

@media (max-width: 1200px) {
  .platform-guides-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 850px) {
  .platform-guides-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 580px) {
  .platform-guides-grid {
    grid-template-columns: 1fr;
  }
}

.platform-guide-column {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.platform-col-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-headline);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border-subtle);
}

.guide-item-link {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
  text-decoration: none;
}

.guide-item-link:last-child {
  border-bottom: none;
}

.guide-item-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 4px;
  transition: color 0.15s ease;
}

.guide-item-link:hover .guide-item-title {
  color: var(--ms-blue);
}

.guide-item-meta {
  font-size: 12px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Video Grid */
.videos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 1100px) {
  .videos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .videos-grid {
    grid-template-columns: 1fr;
  }
}

.video-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
}

.video-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--ms-blue);
}

.video-thumbnail-placeholder {
  height: 140px;
  background: linear-gradient(135deg, #1A365D 0%, #0067B8 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  position: relative;
  padding: 12px;
  text-align: center;
}

.video-play-icon {
  width: 42px;
  height: 42px;
  background-color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ms-blue);
  font-size: 18px;
  margin-bottom: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.video-duration-pill {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.8);
  color: #FFFFFF;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
}

.video-body {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.video-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-headline);
  line-height: 1.35;
  margin-bottom: 6px;
}

.video-meta {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   9. 🆘 Digital Help / Problem-Solver Triage
   -------------------------------------------------------------------------- */
.help-triage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

@media (max-width: 1024px) {
  .help-triage-grid {
    grid-template-columns: 1fr;
  }
}

.help-triage-card {
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--ms-blue);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.help-problem-quote {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-headline);
  margin-bottom: 12px;
  line-height: 1.4;
  position: relative;
  padding-left: 14px;
  border-left: 3px solid var(--ms-blue);
}

.help-diagnosis-box {
  background-color: var(--bg-surface-alt);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
}

.help-diagnosis-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ms-blue);
  margin-bottom: 4px;
}

.help-diagnosis-text {
  font-size: 13.5px;
  color: var(--text-primary);
  margin-bottom: 0;
  line-height: 1.45;
}

.help-steps-list {
  list-style: none;
  margin-bottom: 18px;
  flex: 1;
}

.help-steps-list li {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  padding-left: 22px;
  position: relative;
  line-height: 1.45;
}

.help-steps-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--ms-blue);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   10. Personas Grid
   -------------------------------------------------------------------------- */
.personas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 1100px) {
  .personas-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .personas-grid {
    grid-template-columns: 1fr;
  }
}

.persona-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
  overflow: hidden;
}

.persona-card:hover {
  transform: translateY(-2px);
  border-color: var(--ms-blue);
  box-shadow: var(--shadow-md);
}

.persona-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-headline);
  margin-top: 8px;
  margin-bottom: 2px;
}

.persona-subtitle {
  font-size: 13px;
  color: var(--ms-blue);
  font-weight: 600;
  margin-bottom: 10px;
}

/* --------------------------------------------------------------------------
   11. Distinct Modern Footer (Pastel Sky Blue #E4F3FE Edition)
   -------------------------------------------------------------------------- */
.portal-footer {
  background-color: #E4F3FE;
  background: #E4F3FE;
  color: #334155;
  padding-top: 52px;
  padding-bottom: 34px;
  border-top: 1px solid #bae6fd;
  position: relative;
}

.portal-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #f59e0b 0%, #0284c7 50%, #10b981 100%);
  opacity: 0.9;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 36px;
}

@media (max-width: 992px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

.footer-col-title {
  color: #0c4a6e;
  font-size: 15.5px;
  font-weight: 750;
  margin-bottom: 14px;
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links-list li {
  margin-bottom: 9px;
}

.footer-links-list a {
  color: #1e3a8a;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease, padding-left 0.15s ease;
  display: inline-block;
}

.footer-links-list a:hover {
  color: #0284c7;
  text-decoration: underline;
  padding-left: 3px;
}

/* Contact Us Card in Footer */
.footer-contact-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #93c5fd;
  border-radius: 12px;
  padding: 24px 28px;
  margin-bottom: 28px;
  box-shadow: 0 4px 20px rgba(2, 132, 199, 0.08);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.footer-contact-card.highlight-focus {
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.22), 0 8px 30px rgba(2, 132, 199, 0.15);
}

.footer-contact-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.footer-contact-head h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #0c4a6e;
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-contact-head p {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: #475569;
}

.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

@media (max-width: 768px) {
  .contact-form-row {
    grid-template-columns: 1fr;
  }
}

.contact-input,
.contact-select,
.contact-textarea {
  width: 100%;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 9px 13px;
  font-size: 13.5px;
  color: #0f172a;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.contact-input::placeholder,
.contact-textarea::placeholder {
  color: #94a3b8;
}

.contact-input:focus,
.contact-select:focus,
.contact-textarea:focus {
  outline: none;
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18);
}

.contact-textarea {
  resize: vertical;
  min-height: 52px;
}

.contact-form-bottom {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

@media (max-width: 640px) {
  .contact-form-bottom {
    flex-direction: column;
  }
}

.contact-submit-btn {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  border: 1px solid #0284c7;
  font-weight: 700;
  font-size: 13.5px;
  padding: 10px 22px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, background 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.contact-submit-btn:hover {
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
  transform: translateY(-1px);
}

.contact-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.contact-status-box {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13.5px;
  margin-top: 10px;
  display: none;
}

.contact-status-box.success {
  display: block;
  background: #dcfce7;
  border: 1px solid #86efac;
  color: #166534;
}

.contact-status-box.error {
  display: block;
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #991b1b;
}

/* Notice Box in Footer */
.footer-notice-box {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #bae6fd;
  border-radius: 8px;
  padding: 14px 20px;
  margin-bottom: 24px;
  color: #334155;
}

.footer-bottom {
  border-top: 1px solid #93c5fd;
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12.5px;
  color: #475569;
}

.footer-bottom a {
  color: #0369a1;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}

.footer-bottom a:hover {
  color: #0284c7;
  text-decoration: underline;
}

.developer-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #475569;
  font-size: 12.5px;
}

.developer-badge a {
  color: #0284c7 !important;
  font-weight: 600;
}

/* ==========================================================================
   Internal Page: Font Converter Studio & SEO Layout
   ========================================================================== */
.page-breadcrumb {
  padding: 18px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.page-breadcrumb a {
  color: var(--blue);
  text-decoration: none;
}
.page-breadcrumb a:hover {
  text-decoration: underline;
}
.page-breadcrumb .sep {
  margin: 0 8px;
  color: #a0b2c6;
}

.converter-page-header {
  padding: 28px 0 24px;
  text-align: center;
}
.page-kicker {
  font-size: 13px;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  display: inline-block;
  background: #eaf4ff;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid #d0e4f7;
  margin-bottom: 12px;
}
.page-title {
  font-family: var(--serif);
  font-size: clamp(26px, 2.5vw, 40px);
  line-height: 1.25;
  color: #102343;
  font-weight: 800;
  margin-bottom: 10px;
}
.page-title-en {
  display: block;
  font-family: var(--sans);
  font-size: clamp(16px, 1.25vw, 22px);
  font-weight: 600;
  color: #536984;
  margin-top: 6px;
  letter-spacing: 0.01em;
}
.page-subtitle {
  font-size: clamp(15px, 1.05vw, 18px);
  color: #4a5c72;
  max-width: 950px;
  margin: 0 auto 18px;
  line-height: 1.65;
}
.trust-badges-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.trust-badge-item {
  font-size: 12px;
  font-weight: 600;
  color: #3b506a;
  background: #ffffff;
  border: 1px solid #dbe6f1;
  border-radius: 999px;
  padding: 5px 12px;
  box-shadow: 0 2px 6px rgba(28, 63, 102, .04);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.converter-studio-wrap {
  background: #ffffff;
  border: 1px solid #cddceb;
  border-radius: 24px;
  box-shadow: 0 16px 45px rgba(24, 60, 99, 0.08);
  padding: 24px 26px 26px;
  margin-bottom: 50px;
}
.converter-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e7eef5;
}
.converter-mode-selector {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.converter-top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
.mode-tab-btn {
  border: 1px solid #d4e1ed;
  background: #f6f9fc;
  color: #44566c;
  border-radius: 10px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mode-tab-btn:hover {
  background: #eef6ff;
  color: var(--blue);
  border-color: #b3d4f2;
}
.mode-tab-btn.active {
  background: var(--blue);
  color: #ffffff;
  border-color: var(--blue);
  box-shadow: 0 4px 14px rgba(9, 107, 196, .28);
}
.converter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  position: relative;
}
.converter-box {
  display: flex;
  flex-direction: column;
  background: #fbfdff;
  border: 1px solid #d6e2ee;
  border-radius: 16px;
  padding: 14px 16px 16px;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  min-width: 0;
}
.converter-box:focus-within {
  border-color: #72a9d9;
  box-shadow: 0 0 0 4px rgba(9, 107, 196, 0.12);
  background: #ffffff;
}
.box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #edf2f7;
  flex-wrap: wrap;
  gap: 8px;
}
.box-label {
  font-size: 13.5px;
  font-weight: 700;
  color: #122849;
  display: flex;
  align-items: center;
  gap: 6px;
}
.box-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.box-stats {
  font-size: 11px;
  color: #728498;
  background: #ffffff;
  border: 1px solid #dbe5ee;
  padding: 2px 7px;
  border-radius: 6px;
}
.box-actions {
  display: flex;
  gap: 5px;
}
.btn-box-action {
  border: 1px solid #d1dfed;
  background: #ffffff;
  color: #43556c;
  border-radius: 7px;
  padding: 4px 8px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.btn-box-action:hover {
  background: #f0f7ff;
  color: var(--blue);
  border-color: #aed1f2;
}
.converter-textarea {
  width: 100%;
  height: 290px;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 15.5px;
  line-height: 1.65;
  color: #1b2e46;
  resize: vertical;
  padding: 4px 0;
}
.converter-textarea::placeholder {
  color: #92a3b5;
  font-size: 14.5px;
}
.btn-convert-primary {
  background: linear-gradient(135deg, #096bc4, #05559e);
  color: #ffffff;
  border: 0;
  border-radius: 12px;
  padding: 9px 20px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(9, 107, 196, .28);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}
.btn-convert-primary:hover {
  background: linear-gradient(135deg, #0759a1, #03427d);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(9, 107, 196, .35);
}
.btn-swap-direction {
  background: #ffffff;
  color: var(--blue);
  border: 1px solid #bdd6ec;
  border-radius: 12px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .04);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all 0.18s ease;
}
.btn-swap-direction:hover {
  background: #f3f8fd;
  border-color: var(--blue);
  transform: translateY(-1px);
}
.shortcut-hint {
  font-size: 11px;
  background: rgba(255, 255, 255, .25);
  padding: 2px 7px;
  border-radius: 5px;
  font-weight: 600;
  letter-spacing: .02em;
}
.converter-bottom-toolbar {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e9f0f6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: #65778c;
}
.toolbar-left, .toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Step-by-Step Guide Cards */
.converter-guide-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 24px;
}
.guide-step-card {
  background: #ffffff;
  border: 1px solid #dbe6f1;
  border-radius: 16px;
  padding: 22px 20px;
  box-shadow: 0 6px 18px rgba(28, 63, 102, .04);
  position: relative;
  display: flex;
  flex-direction: column;
}
.step-number-badge {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #eef6ff;
  color: var(--blue);
  font-size: 15px;
  font-weight: 800;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
}
.guide-step-card h3 {
  font-family: var(--serif);
  font-size: 18px;
  color: #122849;
  margin-bottom: 8px;
}
.guide-step-card p {
  font-size: 13.5px;
  color: #55677c;
  line-height: 1.6;
  margin-bottom: 0;
}

/* Enhanced Comparison Table */
.comparison-table-wrap {
  overflow-x: auto;
  background: #ffffff;
  border: 1px solid #cce0f0;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(28, 63, 102, .06);
  margin-top: 24px;
}
.converter-comparison-table,
.seo-comparison-table,
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 14.5px;
}
.converter-comparison-table th,
.seo-comparison-table th,
.comparison-table th {
  background: #f0f6fb;
  color: #102444;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 16px 22px;
  border-bottom: 2px solid #b3d3ed;
  border-right: 1px solid #dce8f3;
}
.converter-comparison-table th:last-child,
.seo-comparison-table th:last-child,
.comparison-table th:last-child {
  border-right: none;
}
.converter-comparison-table th:first-child,
.comparison-table th:first-child,
.converter-comparison-table td:first-child,
.comparison-table td:first-child {
  padding-left: 24px;
}
.converter-comparison-table td,
.seo-comparison-table td,
.comparison-table td {
  padding: 16px 22px;
  border-bottom: 1px solid #e3edf6;
  border-right: 1px solid #e8f0f8;
  vertical-align: middle;
  line-height: 1.5;
}
.converter-comparison-table td:last-child,
.seo-comparison-table td:last-child,
.comparison-table td:last-child {
  border-right: none;
}
.converter-comparison-table tr:nth-child(even) td,
.seo-comparison-table tr:nth-child(even) td,
.comparison-table tr:nth-child(even) td {
  background: #fafdff;
}
.converter-comparison-table tr:hover td,
.seo-comparison-table tr:hover td,
.comparison-table tr:hover td {
  background: #f0f7ff;
}
.table-sub-label {
  display: block;
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
  margin-top: 3px;
  line-height: 1.35;
}
.comparison-cell-title {
  font-weight: 700;
  color: #102444;
  font-size: 14.5px;
  display: block;
  margin-bottom: 5px;
}
.comparison-cell-desc {
  color: #52657b;
  font-size: 13.5px;
  line-height: 1.55;
  display: block;
}
.comparison-param-badge {
  font-weight: 700;
  color: #102444;
  font-size: 14.5px;
  display: block;
}

/* Detail Features Grid (e-Office, Ligatures, Nukta) */
.seo-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
}
.seo-feature-card {
  background: #ffffff;
  border: 1px solid #dbe6f1;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 6px 20px rgba(28, 63, 102, .04);
}
.seo-feature-icon {
  font-size: 28px;
  margin-bottom: 12px;
}
.seo-feature-card h3 {
  font-family: var(--serif);
  font-size: 20px;
  color: #102444;
  margin-bottom: 10px;
}
.seo-feature-card p {
  font-size: 14px;
  color: #55677d;
  line-height: 1.65;
}

/* FAQ Accordion */
.converter-faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 1050px;
  margin: 24px auto 0;
}
.converter-faq-item {
  background: #ffffff;
  border: 1px solid #dbe6f1;
  border-radius: 14px;
  padding: 20px 24px;
  box-shadow: 0 4px 14px rgba(28, 63, 102, .03);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.converter-faq-item:hover {
  border-color: #aed2f3;
  box-shadow: 0 6px 18px rgba(28, 63, 102, .06);
}
.faq-question {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  color: #122849;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.faq-answer {
  font-size: 14.5px;
  color: #51647a;
  line-height: 1.68;
  margin-bottom: 0;
}

/* Responsive Rules for Font Converter Page */
@media (max-width: 1024px) {
  .converter-guide-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .seo-features-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 820px) {
  .converter-studio-wrap {
    padding: 18px 16px 20px;
  }
  .converter-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .converter-textarea {
    height: 230px;
  }
  .btn-convert-primary {
    width: 100%;
    justify-content: center;
  }
  .converter-center-action {
    flex-direction: column;
    gap: 10px;
  }
  .btn-swap-direction {
    width: 100%;
    justify-content: center;
  }
  .converter-guide-grid {
    grid-template-columns: 1fr;
  }
  .converter-bottom-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
}

.converter-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.tool-item {
  background: #ffffff;
  border: 1px solid #d8e6f2;
  border-radius: 14px;
  padding: 22px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.2s ease;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(28, 63, 102, .04);
}
.tool-item:hover {
  transform: translateY(-3px);
  border-color: var(--blue);
  box-shadow: 0 10px 24px rgba(0, 103, 184, .12);
}
.tool-item .tool-arrow {
  position: absolute;
  top: 20px;
  right: 20px;
  color: #9cb3c9;
  font-size: 18px;
  transition: transform 0.2s, color 0.2s;
}
.tool-item:hover .tool-arrow {
  transform: translateX(4px);
  color: var(--orange);
}
.tool-item .item-type {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--blue);
  background: #eef6fd;
  padding: 3px 8px;
  border-radius: 6px;
  width: fit-content;
  margin-bottom: 10px;
}
.tool-item h4 {
  font-size: 17px;
  font-weight: 700;
  color: #102444;
  margin: 0 0 4px;
}
.tool-item .item-en {
  font-size: 12px;
  color: #718498;
  margin-bottom: 10px;
}
.tool-item p {
  font-size: 13.5px;
  color: #55687d;
  line-height: 1.55;
  margin: 0;
}

/* ==========================================================================
   CONVERTER 2-COLUMN LAYOUT & SMART SIDEBAR
   ========================================================================== */
.converter-layout-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 28px;
  align-items: start;
  margin-bottom: 40px;
}

.converter-main-col {
  min-width: 0;
}

.converter-smart-sidebar,
.converter-sidebar-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.converter-smart-sidebar {
  position: sticky;
  top: 90px;
}

/* ==========================================================================
   Download Tools Smart Sidebar (Typing Keyboards)
   ========================================================================== */
.download-tools-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.download-tools-sidebar .switch-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.download-tools-sidebar .switch-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  text-decoration: none;
  color: #1e293b;
  transition: all 0.15s ease;
}

.download-tools-sidebar .switch-item:hover {
  background: #ffffff;
  border-color: #0067b8;
  color: #0067b8;
  transform: translateX(2px);
  box-shadow: 0 2px 8px rgba(0, 103, 184, 0.08);
}

.download-tools-sidebar .switch-item.active {
  background: linear-gradient(135deg, #f0f7ff, #e5f1fd);
  border-color: #0067b8;
  color: #004d8c;
  box-shadow: 0 2px 8px rgba(0, 103, 184, 0.12);
}

.download-tools-sidebar .switch-item-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.download-tools-sidebar .switch-item-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  color: #0067b8;
  background: #e0f2fe;
  padding: 2px 7px;
  border-radius: 4px;
  width: fit-content;
  margin-bottom: 2px;
}

.download-tools-sidebar .switch-item-name {
  font-size: 13.5px;
  font-weight: 700;
  color: inherit;
  line-height: 1.35;
}

.download-tools-sidebar .switch-item-desc {
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.25;
}

.download-tools-sidebar .switch-item.active .switch-item-desc {
  color: #0284c7;
}

.download-tools-sidebar .switch-item-arrow {
  font-size: 15px;
  font-weight: 700;
  color: #94a3b8;
  flex-shrink: 0;
  margin-left: 10px;
}

.download-tools-sidebar .switch-item.active .switch-item-arrow {
  color: #0067b8;
}

.sidebar-widget-card {
  background: #ffffff;
  border: 1px solid #d4e2ee;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 18px rgba(28, 63, 102, .05);
}

.sidebar-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #edf2f7;
}

.sidebar-widget-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  color: #122849;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-widget-subtitle {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--blue);
  background: #eef6fc;
  padding: 2px 8px;
  border-radius: 4px;
}

.sidebar-widget-desc {
  font-size: 13px;
  color: #5a6e85;
  line-height: 1.5;
  margin-bottom: 14px;
}

.converter-switcher-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.converter-switch-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e1eaf2;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}

.converter-switch-item:hover {
  background: #ffffff;
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 103, 184, 0.1);
}

.converter-switch-item.active {
  background: linear-gradient(135deg, #f0f7ff, #e5f1fd);
  border-color: var(--blue);
  box-shadow: 0 4px 14px rgba(0, 103, 184, 0.12);
}

.switch-item-icon {
  font-size: 22px;
  width: 36px;
  height: 36px;
  background: #ffffff;
  border-radius: 8px;
  display: grid;
  place-items: center;
  border: 1px solid #dbe6f1;
  flex-shrink: 0;
}

.converter-switch-item.active .switch-item-icon {
  border-color: var(--blue);
  background: #ffffff;
}

.switch-item-content {
  flex: 1;
  min-width: 0;
}

.switch-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.switch-item-title {
  font-weight: 700;
  font-size: 14px;
  color: #102343;
}

.switch-item-en {
  font-size: 11px;
  color: #718294;
  margin-top: 1px;
}

.switch-item-desc {
  font-size: 11.5px;
  color: #55677b;
  margin-top: 3px;
}

.active-pill {
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
  background: var(--blue);
  padding: 2px 7px;
  border-radius: 10px;
  text-transform: uppercase;
}

.switch-item-badge {
  font-size: 10px;
  font-weight: 600;
  color: #0b5c97;
  background: #e9f3fb;
  padding: 2px 6px;
  border-radius: 6px;
}

.switch-item-arrow {
  color: #a0b2c6;
  font-size: 16px;
  transition: transform 0.2s ease, color 0.2s ease;
}

.converter-switch-item:hover .switch-item-arrow {
  color: var(--orange);
  transform: translateX(3px);
}

.shortcut-list,
.sidebar-resource-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shortcut-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  padding: 6px 0;
  border-bottom: 1px dashed #e6edf4;
}

.shortcut-list li:last-child {
  border-bottom: none;
}

.shortcut-key kbd {
  background: #edf2f7;
  border: 1px solid #cbd5e0;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0,0,0,.1);
  color: #334155;
  display: inline-block;
  font-family: monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 5px;
}

.shortcut-action {
  color: #4a5d73;
}

.sidebar-resource-list li a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #1a3353;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
}

.sidebar-resource-list li a:hover {
  background: #f0f6fc;
  color: var(--blue);
}

.resource-icon {
  font-size: 16px;
}

.resource-name {
  flex: 1;
}

.resource-link-arrow {
  color: #9cb1c9;
  font-size: 14px;
}

.sidebar-privacy-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #f4fbf7;
  border: 1px solid #c9eed7;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #1b4d2e;
}

.sidebar-privacy-box .privacy-icon {
  font-size: 20px;
  flex-shrink: 0;
}

/* 2-Column Responsive Query */
@media (max-width: 1100px) {
  .converter-layout-wrap {
    grid-template-columns: 1fr;
  }
  .converter-smart-sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

@media (max-width: 860px) {
  .converter-top-bar {
    flex-wrap: wrap;
  }
  .converter-mode-selector,
  .converter-top-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .mode-tab-btn,
  .btn-swap-direction,
  .btn-convert-primary {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }
}

/* ==========================================================================
   Internal Page: Online Hindi Word Processor Studio Workbench
   ========================================================================== */
.wp-studio-wrap {
  background: #ffffff;
  border: 1px solid #d9e3ed;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(16, 35, 67, 0.07);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 1. Studio Top Action Bar */
.wp-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.wp-top-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.wp-top-btn,
.wp-top-bar .btn {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  box-sizing: border-box !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 30px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  border-radius: 6px !important;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease-in-out;
}

.wp-top-badge,
.wp-top-bar .badge {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  box-sizing: border-box !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 30px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border: 1px solid #bfdbfe !important;
}

.wp-hero-subtitle {
  max-width: 960px;
  margin: 8px auto 0;
  font-size: 14.5px;
  color: #475569;
  line-height: 1.55;
  text-align: center;
}

.wp-hero-subtitle-phonetic {
  max-width: 100%;
  margin: 8px auto 0;
  font-size: 14px;
  color: #475569;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 1150px) {
  .wp-hero-subtitle-phonetic {
    white-space: normal;
  }
}

/* ==========================================================================
   Speech Word Processor Microphone & Language Controls
   ========================================================================== */
.wp-start-btn {
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  box-shadow: 0 1px 3px rgba(22, 163, 74, 0.25);
}

.wp-start-btn:hover {
  background: #15803d !important;
  border-color: #15803d !important;
}

.wp-fullscreen-btn {
  font-weight: 700 !important;
  color: #0369a1 !important;
  background: #f0f9ff !important;
  border-color: #bae6fd !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all 0.2s ease !important;
}

.wp-fullscreen-btn:hover {
  background: #e0f2fe !important;
  border-color: #7dd3fc !important;
  color: #0284c7 !important;
}

.wp-fullscreen-btn.active {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
}

.wp-mic-btn {
  background: #0067b8 !important;
  border-color: #0067b8 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer;
  transition: all 0.2s ease !important;
}

.wp-mic-btn:hover {
  background: #004d8c !important;
  border-color: #004d8c !important;
}

.wp-mic-btn.recording {
  background: #dc2626 !important;
  border-color: #b91c1c !important;
  color: #ffffff !important;
  animation: pulse-recording 1.5s infinite;
}

@keyframes pulse-recording {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(220, 38, 38, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
  }
}

.wp-speech-lang-wrap {
  display: inline-flex;
  align-items: center;
}

.wp-speech-lang-select {
  height: 32px !important;
  min-height: 32px !important;
  box-sizing: border-box !important;
  padding: 0 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #1e293b !important;
  cursor: pointer;
}

.wp-speech-status-bar {
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  transition: all 0.2s ease;
}

.wp-speech-status-bar.active {
  background: #fef2f2;
  border-bottom-color: #fecaca;
}

.wp-speech-status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
}

.wp-speech-status-bar.active .wp-speech-status-indicator {
  color: #b91c1c;
}

.pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #94a3b8;
  display: inline-block;
  flex-shrink: 0;
}

.wp-speech-status-bar.active .pulse-dot {
  background: #dc2626;
  animation: blink-dot 1s infinite alternate;
}

@keyframes blink-dot {
  from { opacity: 0.3; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1.15); }
}

.wp-speech-interim {
  font-style: italic;
  color: #64748b;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 650px;
  font-size: 13.5px;
}

.wp-doc-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wp-doc-title-input {
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  border: 1px solid transparent;
  background: transparent;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s;
  max-width: 240px;
}
.wp-doc-title-input:hover,
.wp-doc-title-input:focus {
  background: #ffffff;
  border-color: #cbd5e1;
  outline: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.wp-layout-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.wp-export-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.wp-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.wp-export-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}
.wp-export-btn-primary {
  background: #0067b8;
  color: #ffffff;
  border-color: #005a9e;
}
.wp-export-btn-primary:hover {
  background: #005a9e;
  border-color: #004578;
  color: #ffffff;
}

/* 2. Rich Text Formatting Toolbar */
.wp-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
  user-select: none;
}

.wp-toolbar-group {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
  border-right: 1px solid #e2e8f0;
}
.wp-toolbar-group:last-child {
  border-right: none;
}

.wp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: #475569;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s;
}
.wp-btn:hover {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #0f172a;
}
.wp-btn.active {
  background: #e0f2fe;
  border-color: #bae6fd;
  color: #0284c7;
  font-weight: 700;
}

.wp-select {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 5px 8px;
  outline: none;
  cursor: pointer;
  height: 32px;
}
.wp-select:focus {
  border-color: #0067b8;
}

.wp-color-picker-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.wp-color-input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* 3. Paper Sheet Canvas */
.wp-editor-canvas {
  background: #f1f5f9;
  padding: 32px 20px;
  min-height: 540px;
  overflow-y: auto;
  display: flex;
  justify-content: center;
}

.wp-editor-paper {
  width: 100%;
  max-width: 860px;
  min-height: 600px;
  background: #ffffff;
  padding: 40px 48px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
  outline: none;
  font-family: 'Hind', 'Noto Sans Devanagari', 'Mangal', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #1f2937;
  word-break: break-word;
  white-space: pre-wrap;
}

.wp-editor-paper:focus {
  box-shadow: 0 4px 20px rgba(0, 103, 184, 0.12), 0 0 0 1px #0067b8;
}

/* Content styling inside paper */
.wp-editor-paper h1 {
  font-size: 24px;
  font-weight: 800;
  color: #0067b8;
  margin: 0 0 10px;
  line-height: 1.3;
}
.wp-editor-paper h2 {
  font-size: 19px;
  font-weight: 700;
  color: #1e293b;
  margin: 14px 0 8px;
  line-height: 1.35;
}
.wp-editor-paper h3 {
  font-size: 16px;
  font-weight: 600;
  color: #334155;
  margin: 12px 0 6px;
  line-height: 1.4;
}
.wp-editor-paper p {
  margin: 0 0 10px;
}
.wp-editor-paper ul,
.wp-editor-paper ol {
  margin: 6px 0 12px 24px;
}
.wp-editor-paper li {
  margin-bottom: 4px;
}
.wp-editor-paper hr {
  border: none;
  border-top: 1px solid #cbd5e1;
  margin: 20px 0;
}
.wp-editor-paper table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 15px;
}
.wp-editor-paper th,
.wp-editor-paper td {
  border: 1px solid #cbd5e1;
  padding: 10px 14px;
  text-align: left;
}
.wp-editor-paper th {
  background: #f8fafc;
  font-weight: 700;
  color: #0f172a;
}
.wp-editor-paper tr:nth-child(even) td {
  background: #fafafa;
}

/* 4. Word Processor Status / Stats Bar */
.wp-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  font-size: 13px;
  color: #64748b;
  flex-wrap: wrap;
  gap: 12px;
}

.wp-metrics-group {
  display: flex;
  align-items: center;
  gap: 16px;
}
.wp-metric-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.wp-metric-val {
  font-weight: 700;
  color: #1e293b;
}

.wp-help-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #0067b8;
  background: #f0f7fd;
  border: 1px solid #cce4f7;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
}
.wp-help-pill:hover {
  background: #e1effb;
}

/* Table Creator Modal */
.wp-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
}
.wp-modal-box {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  width: 90%;
  max-width: 420px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.wp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.wp-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}
.wp-modal-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #64748b;
}
.wp-form-group {
  margin-bottom: 14px;
}
.wp-form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
}
.wp-form-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 14px;
  outline: none;
}
.wp-form-input:focus {
  border-color: #0067b8;
}
.wp-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .wp-editor-paper {
    padding: 24px 20px;
  }
  .wp-toolbar {
    padding: 6px 10px;
  }
}

/* ==========================================================================
   Full Size Window (फ़ुल साइज़ विंडो) Mode for Word Processor Studio
   ========================================================================== */
body.wp-fullscreen-active .wp-breadcrumb-wrap,
body.wp-fullscreen-active .page-breadcrumb,
body.wp-fullscreen-active .converter-page-header,
body.wp-fullscreen-active .converter-sidebar-col,
body.wp-fullscreen-active .converter-main-col > :not(.wp-studio-wrap) {
  display: none !important;
}

body.wp-fullscreen-active #main-content {
  padding-top: 10px !important;
  padding-bottom: 24px !important;
}

body.wp-fullscreen-active .converter-layout-wrap {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 16px !important;
  margin: 0 !important;
  display: block !important;
}

body.wp-fullscreen-active .converter-main-col {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

body.wp-fullscreen-active .wp-studio-wrap {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 40, 85, 0.12) !important;
  margin: 6px 0 24px 0 !important;
}

body.wp-fullscreen-active .wp-editor-canvas {
  min-height: calc(100vh - 210px) !important;
  padding: 24px 32px !important;
}

body.wp-fullscreen-active .wp-editor-paper {
  max-width: 100% !important;
  width: 100% !important;
  min-height: calc(100vh - 270px) !important;
  padding: 40px 64px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important;
}

@media (max-width: 768px) {
  body.wp-fullscreen-active .converter-layout-wrap {
    padding: 0 8px !important;
  }
  body.wp-fullscreen-active .wp-editor-canvas {
    padding: 12px 10px !important;
  }
  body.wp-fullscreen-active .wp-editor-paper {
    padding: 24px 18px !important;
  }
}

/* ==========================================================================
   DOWNLOAD PAGES & IME KEYBOARDS COMPONENT STYLES
   ========================================================================== */

.download-disclaimer-box {
  display: flex;
  gap: 16px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 5px solid #d97706;
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.download-disclaimer-icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
}

.download-disclaimer-content h4 {
  font-size: 15px;
  font-weight: 700;
  color: #92400e;
  margin: 0 0 6px;
}

.download-disclaimer-content p {
  font-size: 13.5px;
  color: #78350f;
  line-height: 1.6;
  margin: 0;
}

.download-modern-notice {
  display: flex;
  gap: 16px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-left: 5px solid #16a34a;
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 28px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.download-modern-notice-icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
}

.download-modern-notice h4 {
  font-size: 15px;
  font-weight: 700;
  color: #166534;
  margin: 0 0 6px;
}

.download-modern-notice p {
  font-size: 13.5px;
  color: #15803d;
  line-height: 1.6;
  margin: 0;
}

.download-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 16px;
}

@media (max-width: 768px) {
  .download-grid {
    grid-template-columns: 1fr;
  }
}

.download-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.download-card:hover {
  transform: translateY(-2px);
  border-color: #cbd5e1;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.download-card-featured {
  border: 2px solid #0067b8;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.download-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.download-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #eff6ff;
  color: #0067b8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.download-card-title {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 4px;
  line-height: 1.35;
}

.download-card-subtitle {
  font-size: 12.5px;
  color: #64748b;
  font-weight: 500;
}

.download-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.download-badge {
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.download-badge-arch {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
}

.download-badge-size {
  background: #f8fafc;
  color: #0369a1;
  border: 1px solid #e0f2fe;
}

.download-badge-os {
  background: #faf5ff;
  color: #7e22ce;
  border: 1px solid #f3e8ff;
}

.download-card-desc {
  font-size: 13.5px;
  color: #475569;
  line-height: 1.6;
  margin: 0 0 20px;
  flex-grow: 1;
}

.download-card-footer {
  margin-top: auto;
}

.download-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  background: #0067b8;
  color: #ffffff;
  border: 1px solid #005a9e;
  transition: all 0.15s ease-in-out;
  cursor: pointer;
}

.download-action-btn:hover {
  background: #005a9e;
  border-color: #004578;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 103, 184, 0.25);
}

.download-action-btn-secondary {
  background: #f8fafc;
  color: #334155;
  border: 1px solid #cbd5e1;
}

.download-action-btn-secondary:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
  color: #0f172a;
}

/* Compact language grid for ILIT */
.download-lang-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}

@media (max-width: 900px) {
  .download-lang-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 550px) {
  .download-lang-grid {
    grid-template-columns: 1fr;
  }
}

.download-lang-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: all 0.15s;
}

.download-lang-card:hover {
  border-color: #0067b8;
  box-shadow: 0 2px 8px rgba(0, 103, 184, 0.1);
}

.download-lang-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.download-lang-name {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
}

.download-lang-size {
  font-size: 11.5px;
  color: #64748b;
}

.download-lang-btn {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  background: #eff6ff;
  color: #0067b8;
  border: 1px solid #bfdbfe;
  text-decoration: none;
  white-space: nowrap;
}

.download-lang-btn:hover {
  background: #0067b8;
  color: #ffffff;
}

/* Native Guide Box */
.native-guide-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 26px;
  margin: 32px 0;
}

.native-guide-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.native-guide-badge {
  background: #0067b8;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}

.native-steps-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 16px 0;
  padding: 0;
  list-style: none;
}

.native-step-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #334155;
}

.native-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #0067b8;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Quick links in download sidebar */
.quick-links-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quick-link-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}

.quick-link-item:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  transform: translateX(3px);
}

.quick-link-icon {
  font-size: 20px;
  line-height: 1.2;
  flex-shrink: 0;
}

.quick-link-item strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: #1e3a8a;
  margin-bottom: 2px;
}

.quick-link-sub {
  display: block;
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.35;
}

/* ==========================================================================
   Eye-Catching Website Visits Counter in Footer
   ========================================================================== */
.footer-visitor-counter-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
}

.visitor-counter-card {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
  border: 1px solid #334155;
  border-radius: 50px;
  padding: 8px 22px 8px 18px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.visitor-counter-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.counter-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #94a3b8;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 10px #22c55e, 0 0 4px #4ade80;
  animation: pulseLiveDot 2s infinite ease-in-out;
  flex-shrink: 0;
}

@keyframes pulseLiveDot {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.8);
  }
}

.counter-odometer {
  display: flex;
  align-items: center;
  gap: 4px;
}

.counter-digit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 34px;
  padding: 0 6px;
  background: linear-gradient(180deg, #1e293b 0%, #090e17 100%);
  color: #38bdf8;
  font-family: 'Courier New', Courier, monospace, 'Segoe UI Mono', monospace;
  font-size: 20px;
  font-weight: 800;
  border-radius: 6px;
  border: 1px solid #475569;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
  user-select: none;
}

/* ==========================================================================
   MICROSOFT UNICODE FONTS @FONT-FACE DEFINITIONS
   ========================================================================== */
@font-face {
  font-family: 'MangalWeb';
  src: local('Mangal'),
       url('/downloads/Fonts/Microsoft%20Unicode%20Fonts/Mangal/mangal.ttf') format('truetype'),
       url('../../downloads/Fonts/Microsoft%20Unicode%20Fonts/Mangal/mangal.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MangalWeb';
  src: local('Mangal Bold'),
       url('/downloads/Fonts/Microsoft%20Unicode%20Fonts/Mangal/mangalb.ttf') format('truetype'),
       url('../../downloads/Fonts/Microsoft%20Unicode%20Fonts/Mangal/mangalb.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'AparajitaWeb';
  src: local('Aparajita'),
       url('/downloads/Fonts/Microsoft%20Unicode%20Fonts/Aparajita/aparaj.ttf') format('truetype'),
       url('../../downloads/Fonts/Microsoft%20Unicode%20Fonts/Aparajita/aparaj.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'AparajitaWeb';
  src: local('Aparajita Bold'),
       url('/downloads/Fonts/Microsoft%20Unicode%20Fonts/Aparajita/aparajb.ttf') format('truetype'),
       url('../../downloads/Fonts/Microsoft%20Unicode%20Fonts/Aparajita/aparajb.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'KokilaWeb';
  src: local('Kokila'),
       url('/downloads/Fonts/Microsoft%20Unicode%20Fonts/Kokila/kokila.ttf') format('truetype'),
       url('../../downloads/Fonts/Microsoft%20Unicode%20Fonts/Kokila/kokila.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'KokilaWeb';
  src: local('Kokila Bold'),
       url('/downloads/Fonts/Microsoft%20Unicode%20Fonts/Kokila/kokilab.ttf') format('truetype'),
       url('../../downloads/Fonts/Microsoft%20Unicode%20Fonts/Kokila/kokilab.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'NirmalaWeb';
  src: local('Nirmala UI'),
       url('/downloads/Fonts/Microsoft%20Unicode%20Fonts/Nirmala/Nirmala.ttf') format('truetype'),
       url('../../downloads/Fonts/Microsoft%20Unicode%20Fonts/Nirmala/Nirmala.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NirmalaWeb';
  src: local('Nirmala UI Bold'),
       url('/downloads/Fonts/Microsoft%20Unicode%20Fonts/Nirmala/NirmalaB.ttf') format('truetype'),
       url('../../downloads/Fonts/Microsoft%20Unicode%20Fonts/Nirmala/NirmalaB.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'UtsaahWeb';
  src: local('Utsaah'),
       url('/downloads/Fonts/Microsoft%20Unicode%20Fonts/Utsaah/utsaah.ttf') format('truetype'),
       url('../../downloads/Fonts/Microsoft%20Unicode%20Fonts/Utsaah/utsaah.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'UtsaahWeb';
  src: local('Utsaah Bold'),
       url('/downloads/Fonts/Microsoft%20Unicode%20Fonts/Utsaah/utsaahb.ttf') format('truetype'),
       url('../../downloads/Fonts/Microsoft%20Unicode%20Fonts/Utsaah/utsaahb.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ArialUnicodeMSWeb';
  src: local('Arial Unicode MS'),
       url('/downloads/Fonts/Microsoft%20Unicode%20Fonts/Arial%20Unicode%20MS/ARIALUNI.TTF') format('truetype'),
       url('../../downloads/Fonts/Microsoft%20Unicode%20Fonts/Arial%20Unicode%20MS/ARIALUNI.TTF') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SanskritTextWeb';
  src: local('Sanskrit Text'),
       url('/downloads/Fonts/Microsoft%20Unicode%20Fonts/Sanskfit%20Text/Sanskr.ttf') format('truetype'),
       url('../../downloads/Fonts/Microsoft%20Unicode%20Fonts/Sanskfit%20Text/Sanskr.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   OTHER UNICODE FONTS @FONT-FACE DEFINITIONS
   ========================================================================== */
@font-face {
  font-family: 'AdobeDevanagariWeb';
  src: local('Adobe Devanagari'),
       url('/downloads/fonts/Other%20Unicode%20Fonts/Adobe%20Devanagari/AdobeDevanagari-Regular.otf') format('opentype'),
       url('../../downloads/fonts/Other%20Unicode%20Fonts/Adobe%20Devanagari/AdobeDevanagari-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'AdobeDevanagariWeb';
  src: local('Adobe Devanagari Bold'),
       url('/downloads/fonts/Other%20Unicode%20Fonts/Adobe%20Devanagari/AdobeDevanagari-Bold.otf') format('opentype'),
       url('../../downloads/fonts/Other%20Unicode%20Fonts/Adobe%20Devanagari/AdobeDevanagari-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ChandasWeb';
  src: local('Chandas'),
       url('/downloads/fonts/Other%20Unicode%20Fonts/Chandas/chandas1-2.ttf') format('truetype'),
       url('../../downloads/fonts/Other%20Unicode%20Fonts/Chandas/chandas1-2.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GargiWeb';
  src: local('Gargi'),
       url('/downloads/fonts/Other%20Unicode%20Fonts/Gargi/gargi.ttf') format('truetype'),
       url('../../downloads/fonts/Other%20Unicode%20Fonts/Gargi/gargi.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'KalimatiWeb';
  src: local('Kalimati'),
       url('/downloads/fonts/Other%20Unicode%20Fonts/Kalimati/kalimati.ttf') format('truetype'),
       url('../../downloads/fonts/Other%20Unicode%20Fonts/Kalimati/kalimati.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'LohitWeb';
  src: local('Lohit Devanagari'),
       url('/downloads/fonts/Other%20Unicode%20Fonts/Lohit/Lohit-Devanagari.ttf') format('truetype'),
       url('../../downloads/fonts/Other%20Unicode%20Fonts/Lohit/Lohit-Devanagari.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'NakulaWeb';
  src: local('Nakula'),
       url('/downloads/fonts/Other%20Unicode%20Fonts/Nakula/nakula.ttf') format('truetype'),
       url('../../downloads/fonts/Other%20Unicode%20Fonts/Nakula/nakula.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'NityanandaWeb';
  src: local('Nityananda'),
       url('/downloads/fonts/Other%20Unicode%20Fonts/Nityananda/Nithyananda-2.04.ttf') format('truetype'),
       url('../../downloads/fonts/Other%20Unicode%20Fonts/Nityananda/Nithyananda-2.04.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SahadevaWeb';
  src: local('Sahadeva'),
       url('/downloads/fonts/Other%20Unicode%20Fonts/Sahadeva/sahadeva.ttf') format('truetype'),
       url('../../downloads/fonts/Other%20Unicode%20Fonts/Sahadeva/sahadeva.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SakalBharatiWeb';
  src: local('SakalBharati'),
       url('/downloads/fonts/Other%20Unicode%20Fonts/SakalBharati/SakalBharati_N_Ship.ttf') format('truetype'),
       url('../../downloads/fonts/Other%20Unicode%20Fonts/SakalBharati/SakalBharati_N_Ship.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SamanataWeb';
  src: local('Samanata'),
       url('/downloads/fonts/Other%20Unicode%20Fonts/Samanata/samanata.ttf') format('truetype'),
       url('../../downloads/fonts/Other%20Unicode%20Fonts/Samanata/samanata.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SamyakWeb';
  src: local('Samyak Devanagari'),
       url('/downloads/fonts/Other%20Unicode%20Fonts/Samyak/Samyak-Devanagari.ttf') format('truetype'),
       url('../../downloads/fonts/Other%20Unicode%20Fonts/Samyak/Samyak-Devanagari.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SaraiWeb';
  src: local('Sarai'),
       url('/downloads/fonts/Other%20Unicode%20Fonts/Sarai/Sarai_07.ttf') format('truetype'),
       url('../../downloads/fonts/Other%20Unicode%20Fonts/Sarai/Sarai_07.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   LEGACY NON-UNICODE FONTS @FONT-FACE DEFINITIONS
   ========================================================================== */
@font-face {
  font-family: 'KrutiDevLocalWeb';
  src: local('Kruti Dev 010'), local('Kruti Dev 012'), local('Kruti Dev'),
       url('/downloads/fonts/Legacy%20Fonts/KrutiDev/K012.TTF') format('truetype'),
       url('../../downloads/fonts/Legacy%20Fonts/KrutiDev/K012.TTF') format('truetype'),
       url('../fonts/krdv010.ttf?v=1.2') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ShivaLocalWeb';
  src: local('Shiva Regular'), local('Shiv01'), local('Shiva'),
       url('/downloads/fonts/Legacy%20Fonts/Shiva/Shiv01.TTF') format('truetype'),
       url('../../downloads/fonts/Legacy%20Fonts/Shiva/Shiv01.TTF') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   FONT DOWNLOAD PAGES & SPECIMEN STYLING
   ========================================================================== */
.font-specimen-stage {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-lg, 14px);
  padding: 28px 32px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
  margin-bottom: 32px;
}

.font-specimen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 16px;
  margin-bottom: 24px;
}

.font-specimen-title {
  font-size: 17px;
  font-weight: 700;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 8px;
}

.font-specimen-tagline {
  font-size: 13px;
  color: #64748b;
}

.font-specimen-row {
  padding: 22px 0;
  border-bottom: 1px dashed #e2e8f0;
}

.font-specimen-row:last-child {
  border-bottom: none;
  padding-bottom: 6px;
}

.font-specimen-size-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.font-specimen-size-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Segoe UI Mono', monospace, Consolas;
  font-size: 12px;
  font-weight: 700;
  background: #eff6ff;
  color: #0067b8;
  border: 1px solid #bfdbfe;
  padding: 2px 8px;
  border-radius: 6px;
}

.font-specimen-size-desc {
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
}

.font-specimen-render {
  color: #0f172a;
  word-break: break-word;
  transition: color 0.2s;
  letter-spacing: 0.01em;
}

.font-render-60 {
  font-size: 60px;
  line-height: 1.35;
}

.font-render-42 {
  font-size: 42px;
  line-height: 1.45;
}

.font-render-28 {
  font-size: 28px;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .font-render-60 {
    font-size: 38px;
  }
  .font-render-42 {
    font-size: 28px;
  }
  .font-render-28 {
    font-size: 20px;
  }
}

.font-interactive-tester {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 2px solid #e2e8f0;
}

.font-tester-label {
  font-size: 14px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.font-tester-input {
  width: 100%;
  padding: 14px 18px;
  font-size: 22px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  color: #0f172a;
  background: #f8fafc;
  outline: none;
  transition: all 0.2s;
}

.font-tester-input:focus {
  background: #ffffff;
  border-color: #0067b8;
  box-shadow: 0 0 0 3px rgba(0, 103, 184, 0.12);
}

.font-glyphs-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-lg, 14px);
  padding: 24px 28px;
  margin-bottom: 32px;
}

.font-glyphs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.font-glyph-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 20px;
  color: #1e293b;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.font-download-hero-card {
  background: linear-gradient(135deg, #004d8c 0%, #0067b8 60%, #0078d4 100%);
  color: #ffffff;
  border-radius: var(--radius-lg, 16px);
  padding: 32px 36px;
  box-shadow: 0 10px 25px rgba(0, 103, 184, 0.25);
  margin-bottom: 32px;
}

.font-download-hero-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.font-download-hero-title {
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 6px;
  color: #ffffff;
}

.font-download-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.font-download-hero-meta span {
  font-size: 13px;
  background: rgba(255, 255, 255, 0.18);
  padding: 4px 12px;
  border-radius: 999px;
  color: #ffffff;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.font-download-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  background: #ffffff;
  color: #0067b8;
  font-size: 16px;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transition: all 0.2s;
  white-space: nowrap;
}

.font-download-hero-btn:hover {
  background: #f8fafc;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  color: #004d8c;
}

/* ==========================================================================
   Font Download Page Sidebar - Clean Full-Height Card (No Scrollbar)
   ========================================================================== */
.font-smart-sidebar {
  position: static;
}

.font-smart-sidebar .converter-switcher-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: none !important;
  overflow: visible !important;
}

.font-smart-sidebar .switcher-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 11px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  text-decoration: none;
  color: #1e293b;
  transition: all 0.15s ease;
}

.font-smart-sidebar .switcher-nav-item:hover {
  background: #ffffff;
  border-color: #0067b8;
  color: #0067b8;
  transform: translateX(2px);
  box-shadow: 0 2px 8px rgba(0, 103, 184, 0.08);
}

.font-smart-sidebar .switcher-nav-item.active {
  background: linear-gradient(135deg, #f0f7ff, #e5f1fd);
  border-color: #0067b8;
  color: #004d8c;
  box-shadow: 0 2px 8px rgba(0, 103, 184, 0.12);
}

.font-smart-sidebar .switcher-nav-left {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.font-smart-sidebar .switcher-nav-icon {
  font-size: 13px;
  flex-shrink: 0;
  opacity: 0.85;
}

.font-smart-sidebar .switcher-nav-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.font-smart-sidebar .switcher-nav-name {
  font-size: 13px;
  font-weight: 600;
  color: inherit;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.font-smart-sidebar .switcher-nav-sub {
  font-size: 11px;
  color: #64748b;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.font-smart-sidebar .switcher-nav-item.active .switcher-nav-sub {
  color: #0284c7;
  font-weight: 500;
}

.font-smart-sidebar .switcher-active-badge {
  font-size: 11px;
  font-weight: 700;
  background: #0067b8;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.font-smart-sidebar .switcher-nav-arrow {
  font-size: 13px;
  color: #94a3b8;
  transition: color 0.15s, transform 0.15s;
  flex-shrink: 0;
}

.font-smart-sidebar .switcher-nav-item:hover .switcher-nav-arrow {
  color: #0067b8;
  transform: translateX(2px);
}

/* ==========================================================================
   ONLINE HINDI TYPING TEST STYLES
   ========================================================================== */
.tt-arena {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  margin-bottom: 32px;
}

/* 1. Choice Selection Cards & Category Locking Styles */
.tt-selection-panel {
  padding: 20px 22px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 2px solid #e2e8f0;
}

.tt-selection-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.tt-selection-icon {
  font-size: 26px;
  line-height: 1.1;
}

.tt-selection-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 4px 0;
}

.tt-selection-desc {
  font-size: 13.5px;
  color: #475569;
  margin: 0;
  line-height: 1.45;
}

.tt-choice-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (max-width: 768px) {
  .tt-choice-cards {
    grid-template-columns: 1fr;
  }
}

.tt-choice-card {
  position: relative;
  background: #ffffff;
  border: 2px solid #cbd5e1;
  border-radius: 12px;
  padding: 16px 18px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  outline: none;
  user-select: none;
}

.tt-choice-card:hover {
  border-color: #0067b8;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -2px rgba(0, 103, 184, 0.15);
}

.tt-choice-card:focus-visible {
  border-color: #0067b8;
  box-shadow: 0 0 0 3px rgba(0, 103, 184, 0.25);
}

.tt-choice-card.is-selected {
  border-color: #0067b8;
  background: #f0f7ff;
  box-shadow: 0 6px 20px -2px rgba(0, 103, 184, 0.2);
}

.tt-choice-card.is-selected::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #0067b8;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.tt-choice-badge-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.tt-choice-radio-indicator {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #94a3b8;
  background: #ffffff;
  position: relative;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.tt-choice-card.is-selected .tt-choice-radio-indicator {
  border-color: #0067b8;
  background: #0067b8;
}

.tt-choice-card.is-selected .tt-choice-radio-indicator::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
}

.tt-choice-status-pill {
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  background: #f1f5f9;
  color: #64748b;
  letter-spacing: 0.2px;
  transition: all 0.15s ease;
}

.tt-choice-card.is-selected .tt-choice-status-pill {
  background: #15803d;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(21, 128, 61, 0.25);
}

.tt-choice-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.tt-choice-icon {
  font-size: 28px;
  line-height: 1;
  padding: 6px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.tt-choice-card.is-selected .tt-choice-icon {
  background: #e0f2fe;
  border-color: #bae6fd;
}

.tt-choice-heading {
  font-size: 15.5px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 4px 0;
}

.tt-choice-card.is-selected .tt-choice-heading {
  color: #0067b8;
}

.tt-choice-sub {
  font-size: 12.5px;
  color: #475569;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.tt-choice-exam-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  background: #edf2f7;
  padding: 3px 8px;
  border-radius: 4px;
  line-height: 1.3;
}

.tt-choice-card.is-selected .tt-choice-exam-tag {
  background: #e2e8f0;
  color: #334155;
}

/* Active Mode Indicator Dot & Text */
.tt-active-mode-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
}

.tt-indicator-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #94a3b8;
  display: inline-block;
}

.tt-indicator-dot.active-dot {
  background: #15803d;
  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.2);
  animation: ttPulse 2s infinite;
}

@keyframes ttPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(21, 128, 61, 0.4); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(21, 128, 61, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(21, 128, 61, 0); }
}

/* Empty State / Unselected Prompt */
.tt-empty-state {
  height: 100%;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 16px;
  color: #475569;
}

.tt-empty-icon {
  font-size: 36px;
  margin-bottom: 8px;
}

.tt-empty-state h4 {
  margin: 0 0 6px 0;
  font-size: 16px;
  color: #0f172a;
  font-weight: 700;
}

.tt-empty-state p {
  margin: 0 0 14px 0;
  font-size: 13.5px;
  color: #64748b;
  max-width: 460px;
}

.tt-empty-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* 2. Challenge Selector Bar */
.tt-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 20px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.tt-mode-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tt-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tt-mode-btn:hover {
  border-color: #0067b8;
  color: #0067b8;
  background: #f0f7ff;
}

.tt-mode-btn.active {
  background: #0067b8;
  border-color: #0067b8;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 103, 184, 0.25);
}

.tt-pills-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tt-pills-label {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  margin-right: 4px;
}

.tt-challenge-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tt-challenge-pill:hover {
  border-color: #0067b8;
  color: #0067b8;
}

.tt-challenge-pill.active {
  background: #0067b8;
  border-color: #0067b8;
  color: #ffffff;
}

/* 2. Top Metrics HUD Bar */
.tt-hud-bar {
  display: grid;
  grid-template-columns: 1.45fr repeat(5, 1fr);
  gap: 12px;
  padding: 12px 20px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}

.tt-stat-challenges-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  text-align: center;
}

.tt-stat-challenges-card .tt-stat-label {
  color: #0369a1;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 4px;
}

.tt-challenge-pills-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.tt-challenge-pills-row .tt-challenge-pill {
  width: 28px;
  height: 28px;
  font-size: 13px;
  border-radius: 6px;
}

.tt-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #edf2f7;
  border-radius: 8px;
  text-align: center;
}

.tt-stat-val {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
  margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
}

.tt-stat-val.wpm-val {
  color: #0067b8;
}

.tt-stat-val.err-val {
  color: #dc2626;
}

.tt-stat-val.acc-val {
  color: #15803d;
}

.tt-stat-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* 3. Challenge Title & Specimen Box */
.tt-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tt-challenge-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.tt-challenge-title {
  font-size: 15px;
  color: #334155;
  margin: 0;
}

.tt-challenge-title span {
  color: #64748b;
  font-weight: 600;
}

.tt-challenge-title strong {
  color: #0f172a;
}

.tt-arena {
  --tt-font-scale: 1;
}

.tt-challenge-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.tt-challenge-header-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tt-badge-mode {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  background: #e0f2fe;
  color: #0369a1;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 6px;
}

/* Synchronized Font Size Controls */
.tt-font-size-ctrls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 4px 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.tt-font-ctrl-label {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  margin-right: 4px;
}

.tt-font-size-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
}

.tt-font-size-btn:hover:not(:disabled) {
  border-color: #0067b8;
  color: #0067b8;
  background: #f0f7ff;
}

.tt-font-size-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.tt-font-size-display {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  min-width: 40px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Box 1: Full-Length Challenge Text Box (No scrollbar by default up to 500 words) */
.tt-challenge-box {
  width: 100%;
  height: 180px;
  min-height: 180px;
  max-height: 180px;
  overflow-y: scroll;
  overflow-x: hidden;
  background: #fbfcfe;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  padding: 14px 18px;
  user-select: none;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #f1f5f9;
}

.tt-challenge-box::-webkit-scrollbar {
  width: 8px;
}
.tt-challenge-box::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}
.tt-challenge-box::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.tt-challenge-box::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.tt-challenge-box.font-unicode {
  font-family: 'Mangal', 'Noto Sans Devanagari', 'Hind', sans-serif;
  font-size: calc(18.5px * var(--tt-font-scale, 1));
  line-height: 1.85;
  color: #334155;
}

.tt-challenge-box.font-kruti {
  font-family: 'Kruti Dev 010', sans-serif;
  font-size: calc(21px * var(--tt-font-scale, 1));
  line-height: 1.85;
  color: #334155;
  letter-spacing: 0.4px;
}

/* Tokenized Word Highlighting */
.tt-word {
  display: inline-block;
  padding: 1px 2px;
  border-radius: 3px;
  margin: 0 1px;
  transition: background-color 0.1s, color 0.1s;
}

.tt-word.word-correct {
  color: #15803d;
  background-color: #ecfdf5;
}

.tt-word.word-error {
  color: #b91c1c;
  background-color: #fee2e2;
  text-decoration: underline wavy #ef4444;
}

.tt-word.word-current {
  background-color: #fef08a;
  color: #0f172a;
  font-weight: 700;
  border-bottom: 2px solid #0067b8;
}

.tt-word.word-current.word-current-err {
  background-color: #fee2e2;
  color: #b91c1c;
  border-bottom: 2px solid #dc2626;
}

/* Box 2: Full-Length Typing Textarea (No scrollbar by default up to 500 words) */
.tt-input-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tt-input-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}

.tt-input-label {
  font-size: 13.5px;
  font-weight: 700;
  color: #334155;
}

.tt-word-limit-tag {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
}

.tt-input-box {
  width: 100%;
  height: 160px;
  min-height: 160px;
  max-height: 200px;
  overflow-y: scroll;
  border: 2px solid #94a3b8;
  border-radius: 8px;
  padding: 14px 18px;
  box-sizing: border-box;
  resize: vertical;
  outline: none;
  background: #ffffff;
  transition: border-color 0.15s, box-shadow 0.15s;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #f1f5f9;
}

.tt-input-box::-webkit-scrollbar {
  width: 8px;
}
.tt-input-box::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}
.tt-input-box::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.tt-input-box::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.tt-input-box:focus {
  border-color: #0067b8;
  box-shadow: 0 0 0 3px rgba(0, 103, 184, 0.12);
}

.tt-input-box.font-unicode {
  font-family: 'Mangal', 'Noto Sans Devanagari', 'Hind', sans-serif;
  font-size: calc(18.5px * var(--tt-font-scale, 1));
  line-height: 1.8;
  color: #0f172a;
}

.tt-input-box.font-kruti {
  font-family: 'Kruti Dev 010', sans-serif;
  font-size: calc(21px * var(--tt-font-scale, 1));
  line-height: 1.8;
  color: #0f172a;
  letter-spacing: 0.4px;
}

/* 4. Controls Bar below boxes */
.tt-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 4px;
}

.tt-ctrl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  border: 1px solid transparent;
}

.tt-ctrl-btn-primary {
  background: #0067b8;
  border-color: #0067b8;
  color: #ffffff;
}

.tt-ctrl-btn-primary:hover {
  background: #005293;
  color: #ffffff;
}

.tt-ctrl-btn-secondary {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #334155;
}

.tt-ctrl-btn-secondary:hover {
  border-color: #0067b8;
  color: #0067b8;
  background: #f8fafc;
}

.tt-ctrl-btn-finish {
  background: #15803d;
  border-color: #15803d;
  color: #ffffff;
  font-weight: 700;
}

.tt-ctrl-btn-finish:hover {
  background: #166534;
  color: #ffffff;
}

/* 5. Next Challenge Prompt Card */
.tt-next-prompt {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: 10px;
  padding: 16px 20px;
  margin-top: 12px;
  display: none;
}

.tt-next-prompt h4 {
  margin: 0 0 6px 0;
  color: #166534;
  font-size: 16px;
  font-weight: 700;
}

.tt-next-prompt p {
  margin: 0 0 14px 0;
  color: #15803d;
  font-size: 14px;
  line-height: 1.5;
}

.tt-prompt-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* 6. Scorecard Report Modal */
.tt-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.tt-modal-dialog {
  background: #ffffff;
  border-radius: 16px;
  max-width: 760px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  animation: ttPopIn 0.2s ease-out;
}

@keyframes ttPopIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.tt-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.tt-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
}

.tt-modal-close-x {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}

.tt-modal-close-x:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.tt-modal-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Modal Summary Stats */
.tt-report-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.tt-report-stat-tile {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}

.tt-report-stat-tile .num {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
  margin-bottom: 2px;
}

.tt-report-stat-tile .num.primary { color: #0067b8; }
.tt-report-stat-tile .num.success { color: #15803d; }
.tt-report-stat-tile .num.danger { color: #dc2626; }

.tt-report-stat-tile .lbl {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
}

/* Modal Remark Banner */
.tt-report-banner {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tt-report-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}

.tt-report-badge.grade-excellent { background: #dcfce7; color: #166534; }
.tt-report-badge.grade-good { background: #e0f2fe; color: #0369a1; }
.tt-report-badge.grade-satisfactory { background: #fef9c3; color: #854d0e; }
.tt-report-badge.grade-practice { background: #fee2e2; color: #991b1b; }

.tt-report-remark {
  font-size: 13.5px;
  color: #1e3a8a;
  line-height: 1.5;
  margin: 0;
}

/* Modal Table */
.tt-score-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.tt-score-table th {
  background: #f1f5f9;
  color: #334155;
  font-weight: 700;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  text-align: left;
}

.tt-score-table td {
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  color: #1e293b;
}

.badge-status-pass {
  background: #dcfce7;
  color: #15803d;
  font-weight: 700;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
}

.badge-status-partial {
  background: #fef3c7;
  color: #b45309;
  font-weight: 700;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
}

.tt-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .tt-hud-bar {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px 14px;
  }
  .tt-stat-challenges-card {
    grid-column: 1 / -1;
    padding: 8px 12px;
  }
}

@media (max-width: 520px) {
  .tt-hud-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .tt-stat-challenges-card {
    grid-column: 1 / -1;
  }
  .tt-hud-bar .tt-stat-card:last-child {
    grid-column: 1 / -1;
  }
  .tt-top-bar {
    padding: 8px 12px;
  }
}

/* ==========================================================================
   PROBLEM SOLUTIONS (समस्या समाधान) - STYLES FOR SLIDER, HUB, & DETAIL PAGES
   ========================================================================== */

/* Slider Header Controls */
.solutions-section-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.solutions-top-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.solutions-tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 9999px;
}

.solutions-slider-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.slider-counter {
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  background: #f1f5f9;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  letter-spacing: 0.02em;
}

.slider-nav-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 50%;
  color: #1e293b;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: all 0.18s ease;
  user-select: none;
}

.slider-nav-btn:hover:not(:disabled) {
  background: #0067b8;
  color: #ffffff;
  border-color: #0067b8;
  box-shadow: 0 3px 8px rgba(0, 103, 184, 0.25);
  transform: scale(1.06);
}

.slider-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #94a3b8;
  transform: none;
}

.solutions-hub-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0067b8;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 6px;
  background: #eff6fc;
  border: 1px solid #c7e0f4;
  transition: all 0.18s ease;
}

.solutions-hub-link:hover {
  background: #0067b8;
  color: #ffffff;
  border-color: #0067b8;
}

/* Slider Track & Wrapper */
.solutions-slider-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 8px 2px 16px 2px;
}

.solutions-slider-track {
  display: flex;
  gap: 16px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Solution Card */
.solution-card {
  min-width: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  padding: 18px 18px 16px 18px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
}

/* Responsive card widths for 4-5 cards visible */
@media (min-width: 1400px) {
  .solution-card {
    flex: 0 0 calc(20% - 13px);
  }
}

@media (min-width: 1100px) and (max-width: 1399px) {
  .solution-card {
    flex: 0 0 calc(25% - 12px);
  }
}

@media (min-width: 820px) and (max-width: 1099px) {
  .solution-card {
    flex: 0 0 calc(33.333% - 11px);
  }
}

@media (min-width: 580px) and (max-width: 819px) {
  .solution-card {
    flex: 0 0 calc(50% - 8px);
  }
}

@media (max-width: 579px) {
  .solution-card {
    flex: 0 0 100%;
  }
}

.solution-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(0, 103, 184, 0.12);
  border-color: #93c5fd;
}

.solution-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 8px;
}

.solution-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #0369a1;
  border: 1px solid #e2e8f0;
}

.solution-card-readtime {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
}

.solution-card-title {
  font-size: 15.5px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.38;
  margin-bottom: 4px;
}

.solution-card-title-en {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 12px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.solution-problem-box {
  background: #fff1f2;
  border-left: 3px solid #f43f5e;
  border-radius: 6px;
  padding: 9px 10px;
  font-size: 12.5px;
  color: #9f1239;
  line-height: 1.5;
  margin-bottom: 10px;
}

.solution-problem-box strong {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #e11d48;
  margin-bottom: 3px;
}

.solution-problem-text {
  font-size: 12.5px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.solution-fix-box {
  background: #f0fdf4;
  border-left: 3px solid #10b981;
  border-radius: 6px;
  padding: 9px 10px;
  font-size: 12.5px;
  color: #166534;
  line-height: 1.5;
  margin-bottom: 12px;
}

.solution-fix-box strong {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #059669;
  margin-bottom: 3px;
}

.solution-fix-text {
  font-size: 12.5px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.solution-platforms-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 14px;
}

.solution-platform-pill {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.solution-card-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}

.solution-readmore-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: #eff6fc;
  color: #0067b8;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #c7e0f4;
  transition: all 0.18s ease;
  text-align: center;
}

.solution-readmore-btn:hover {
  background: #0067b8;
  color: #ffffff;
  border-color: #0067b8;
  box-shadow: 0 2px 6px rgba(0, 103, 184, 0.2);
}

/* ==========================================================================
   MASTER HUB PAGE (hindi-problem-solutions.php)
   ========================================================================== */
.solutions-hub-hero {
  background: linear-gradient(135deg, #004e8c 0%, #0067b8 60%, #0078d4 100%);
  color: #ffffff;
  padding: 42px 0 36px;
  position: relative;
  overflow: hidden;
}

.solutions-hub-hero h1 {
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 10px;
}

.solutions-hub-hero p {
  font-size: clamp(14px, 1.6vw, 17px);
  color: #e0f2fe;
  max-width: 860px;
  line-height: 1.65;
  margin-bottom: 22px;
}

.solutions-search-bar {
  display: flex;
  max-width: 680px;
  background: #ffffff;
  border-radius: 8px;
  padding: 4px 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.solutions-search-bar:focus-within {
  border-color: #38bdf8;
}

.solutions-search-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 10px 14px;
  font-size: 15px;
  color: #1e293b;
  font-family: inherit;
  background: transparent;
}

.solutions-search-btn {
  background: #0067b8;
  color: #ffffff;
  border: none;
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}

.solutions-search-btn:hover {
  background: #004e8c;
}

/* Hub Filter Pills */
.solutions-filter-bar {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  padding: 14px 0;
  position: sticky;
  top: 70px;
  z-index: 20;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.solutions-cat-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.solutions-cat-btn {
  white-space: nowrap;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.solutions-cat-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.solutions-cat-btn.active {
  background: #0067b8;
  border-color: #0067b8;
  color: #ffffff;
  font-weight: 700;
}

.solutions-master-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 28px;
  margin-bottom: 40px;
}

.solutions-no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 20px;
  background: #ffffff;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  color: #64748b;
}

.solutions-no-results h3 {
  font-size: 18px;
  color: #1e293b;
  margin-bottom: 8px;
}

.solutions-no-results button {
  margin-top: 14px;
  background: #0067b8;
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* ==========================================================================
   DETAIL PAGE (hindi-problem-solution-detail.php)
   ========================================================================== */
.solution-detail-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #ffffff;
  padding: 34px 0 28px;
}

.solution-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: #94a3b8;
  margin-bottom: 14px;
}

.solution-breadcrumb a {
  color: #93c5fd;
  text-decoration: none;
  transition: color 0.15s ease;
}

.solution-breadcrumb a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.solution-breadcrumb-sep {
  color: #64748b;
}

.solution-detail-hero h1 {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  line-height: 1.35;
  margin-bottom: 8px;
  color: #ffffff;
}

.solution-detail-hero-en {
  font-size: clamp(13px, 1.5vw, 16px);
  color: #94a3b8;
  font-weight: 600;
  margin-bottom: 16px;
}

.solution-detail-meta-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.solution-detail-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 32px;
  margin-top: 32px;
  margin-bottom: 50px;
}

@media (max-width: 991px) {
  .solution-detail-layout {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   HOMEPAGE SOLUTIONS SEARCH BAR (#tech-solutions)
   ========================================================================== */
.solutions-home-search-wrap {
  max-width: 680px;
  margin: 0 auto 24px auto;
  position: relative;
}

.solutions-home-search-box {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 2px solid #0067b8;
  border-radius: 50px;
  padding: 4px 8px 4px 18px;
  box-shadow: 0 4px 14px rgba(0, 103, 184, 0.1);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.solutions-home-search-box:focus-within {
  box-shadow: 0 6px 20px rgba(0, 103, 184, 0.2);
  border-color: #004e8c;
}

.solutions-home-search-icon {
  font-size: 18px;
  color: #0067b8;
  margin-right: 10px;
  flex-shrink: 0;
}

.solutions-home-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 15px;
  color: #1e293b;
  background: transparent;
  padding: 8px 4px;
}

.solutions-home-search-input::placeholder {
  color: #94a3b8;
  font-size: 14px;
}

.solutions-home-search-clear {
  background: #f1f5f9;
  border: none;
  color: #64748b;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.solutions-home-search-clear:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.solutions-home-search-count {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #0067b8;
  margin-top: 8px;
}

/* ==========================================================================
   ARTICLE FORMAT STYLES (hindi-problem-solution-detail.php)
   ========================================================================== */
.solution-article-container {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 34px 38px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

@media (max-width: 640px) {
  .solution-article-container {
    padding: 22px 18px;
  }
}

.solution-article-summary-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #0067b8;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 26px;
  font-size: 14.5px;
}

.solution-article-summary-box strong {
  color: #0067b8;
  font-size: 14.5px;
}

.solution-article-intro {
  margin-bottom: 30px;
  padding-bottom: 22px;
  border-bottom: 1px solid #f1f5f9;
}

.solution-article-steps-section {
  margin-bottom: 30px;
}

.solution-article-steps-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.solution-article-step-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 18px 22px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.solution-article-step-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.solution-step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.solution-step-badge {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #0067b8;
  color: #ffffff;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.solution-step-heading {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.4;
}

.solution-step-point-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.solution-step-point-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.65;
  color: #334155;
}

.solution-step-bullet {
  color: #0067b8;
  font-size: 14px;
  line-height: 1.6;
  flex-shrink: 0;
}

.solution-step-text strong {
  color: #0f172a;
}

.solution-step-text em {
  font-style: normal;
  color: #b45309;
  font-weight: 600;
}

.solution-step-text code {
  background: #f1f5f9;
  color: #0369a1;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13.5px;
  border: 1px solid #e2e8f0;
}

.solution-article-verification-box {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  padding: 22px 24px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.solution-article-tools-section {
  background: linear-gradient(135deg, #f8fafc 0%, #eff6fc 100%);
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  padding: 22px 24px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.solution-article-tool-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #ffffff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 16px 20px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 103, 184, 0.05);
}

.solution-article-tool-card:hover {
  border-color: #0067b8;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 103, 184, 0.12);
}

.solution-tool-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #eff6fc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  border: 1px solid #c7e0f4;
}

.solution-tool-name {
  font-size: 15.5px;
  font-weight: 700;
  color: #0067b8;
  margin-bottom: 4px;
}

.solution-tool-desc {
  font-size: 13px;
  color: #475569;
  line-height: 1.45;
}

.solution-tool-arrow {
  color: #0067b8;
  font-size: 13.5px;
  font-weight: 800;
  flex-shrink: 0;
  padding-left: 8px;
}

.solution-article-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  border-top: 2px solid #f1f5f9;
  margin-top: 30px;
}

.solution-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #0067b8;
  font-size: 13.5px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.18s ease;
}

.solution-nav-btn:hover {
  background: #0067b8;
  color: #ffffff;
  border-color: #0067b8;
}

.solution-nav-hub-btn {
  font-size: 13.5px;
  color: #475569;
  font-weight: 700;
  text-decoration: underline;
}

.solution-nav-hub-btn:hover {
  color: #0067b8;
}

/* Sidebar styles */
.solution-sidebar-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  margin-bottom: 20px;
}

.solution-sidebar-title {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  padding-bottom: 8px;
  border-bottom: 2px solid #f1f5f9;
  margin-bottom: 14px;
}

.solution-tool-link-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  color: #0067b8;
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none;
  margin-bottom: 8px;
  transition: all 0.15s ease;
}

.solution-tool-link-btn:hover {
  background: #0067b8;
  color: #ffffff;
  border-color: #0067b8;
  transform: translateX(4px);
}

.solution-related-item {
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
  text-decoration: none;
  transition: color 0.15s ease;
}

.solution-related-item:last-child {
  border-bottom: none;
}

.solution-related-item-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.4;
  margin-bottom: 2px;
}

.solution-related-item:hover .solution-related-item-title {
  color: #0067b8;
}

.solution-related-item-meta {
  font-size: 11.5px;
  color: #64748b;
}

/* ==========================================================================
   CATEGORIZED 100-ISSUE LISTING STYLES (hindi-problem-solutions.php)
   ========================================================================== */
.solutions-hub-title {
  color: #ffffff !important;
  font-weight: 800;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

.solutions-stat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.solutions-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.14);
  color: #e0f2fe;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.solutions-category-group {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 24px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.solutions-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: #f8fafc;
  padding: 14px 20px;
  border-bottom: 1px solid #e2e8f0;
}

.solutions-category-title {
  font-size: 16.5px;
  font-weight: 800;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.solutions-category-title small {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  display: block;
}

.solutions-category-count-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  background: #e0f2fe;
  color: #0369a1;
  border-radius: 20px;
  border: 1px solid #bae6fd;
}

.solutions-issues-list {
  display: flex;
  flex-direction: column;
}

.solution-issue-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid #f1f5f9;
  text-decoration: none;
  transition: all 0.15s ease;
  background: #ffffff;
}

.solution-issue-item:hover {
  background: #f8fafc;
  transform: translateX(3px);
}

.solution-issue-item:last-child {
  border-bottom: none;
}

.solution-issue-num {
  min-width: 40px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #eff6fc;
  color: #0067b8;
  font-weight: 800;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c7e0f4;
  flex-shrink: 0;
}

.solution-issue-content {
  flex: 1;
  min-width: 0;
}

.solution-issue-q-hi {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.42;
  margin-bottom: 3px;
}

.solution-issue-q-en {
  font-size: 12.5px;
  color: #64748b;
  font-weight: 500;
  line-height: 1.35;
  margin-bottom: 6px;
}

.solution-issue-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.solution-issue-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.solution-issue-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #0067b8;
  background: #eff6fc;
  border: 1px solid #c7e0f4;
  padding: 7px 14px;
  border-radius: 6px;
  white-space: nowrap;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.solution-issue-item:hover .solution-issue-action {
  background: #0067b8;
  color: #ffffff;
  border-color: #0067b8;
  box-shadow: 0 2px 6px rgba(0, 103, 184, 0.2);
}

.solutions-load-more-wrap {
  text-align: center;
  margin: 30px 0 50px;
}

.btn-load-more-solutions {
  background: #0067b8;
  color: #ffffff;
  border: none;
  padding: 12px 28px;
  border-radius: 30px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 103, 184, 0.25);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-load-more-solutions:hover {
  background: #004e8c;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 103, 184, 0.35);
}

.solutions-counter-text {
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 12px;
}

/* ==========================================================================
   VIDEO SECTION & LIBRARY STYLES (HOMEPAGE SLIDER + VIDEOS.PHP HUB)
   ========================================================================== */

/* Top bar controls for homepage video section */
.videos-section-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e2e8f0;
}

.videos-top-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.videos-tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
}

.videos-slider-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.videos-hub-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: #0067b8;
  background: #eff6fc;
  padding: 6px 14px;
  border-radius: 6px;
  text-decoration: none;
  border: 1px solid #c7e0f4;
  transition: all 0.18s ease;
}

.videos-hub-link:hover {
  background: #0067b8;
  color: #ffffff;
  border-color: #0067b8;
}

/* Slider Track & Wrapper */
.videos-slider-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 8px 2px 16px 2px;
}

.videos-slider-track {
  display: flex;
  gap: 16px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Video Card (Used in slider and hub grid) */
.home-video-card,
.video-grid-card {
  min-width: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  position: relative;
}

/* Slider responsive widths */
@media (min-width: 1300px) {
  .home-video-card {
    flex: 0 0 calc(25% - 12px);
  }
}

@media (min-width: 992px) and (max-width: 1299px) {
  .home-video-card {
    flex: 0 0 calc(33.333% - 11px);
  }
}

@media (min-width: 600px) and (max-width: 991px) {
  .home-video-card {
    flex: 0 0 calc(50% - 8px);
  }
}

@media (max-width: 599px) {
  .home-video-card {
    flex: 0 0 100%;
  }
}

.home-video-card:hover,
.video-grid-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.1);
  border-color: #f87171;
}

/* Video Thumbnail with 16:9 Aspect Ratio */
.video-thumb-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0f172a;
  overflow: hidden;
  cursor: pointer;
}

.video-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.home-video-card:hover .video-thumb-img,
.video-grid-card:hover .video-thumb-img {
  transform: scale(1.05);
}

.video-thumb-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.65) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.home-video-card:hover .video-thumb-overlay,
.video-grid-card:hover .video-thumb-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.75) 100%);
}

.video-play-btn-circle {
  width: 44px;
  height: 44px;
  background: rgba(220, 38, 38, 0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 16px;
  padding-left: 3px;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.45);
  transition: transform 0.22s ease, background 0.22s ease;
}

.home-video-card:hover .video-play-btn-circle,
.video-grid-card:hover .video-play-btn-circle {
  transform: scale(1.12);
  background: #ef4444;
}

.video-cat-badge-on-thumb {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 2;
}

.video-series-badge-on-thumb {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: #b45309;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.video-card-content {
  padding: 13px 14px 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.video-card-title-hi {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.38;
  min-height: 39px;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-card-title-en {
  font-size: 11.5px;
  color: #64748b;
  font-weight: 500;
  min-height: 16px;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-card-actions {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-watch-video {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid #fca5a5;
  cursor: pointer;
  transition: all 0.18s ease;
  text-decoration: none;
}

.btn-watch-video:hover {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
}

.btn-youtube-direct {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #f8fafc;
  color: #64748b;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.18s ease;
  flex-shrink: 0;
}

.btn-youtube-direct:hover {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
}

/* ==========================================================================
   VIDEO HUB PAGE (VIDEOS.PHP)
   ========================================================================== */
.videos-hub-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #0067b8 100%);
  color: #ffffff;
  padding: 38px 0 34px 0;
  position: relative;
  overflow: hidden;
}

.videos-hub-title {
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 800;
  line-height: 1.28;
  margin-bottom: 12px;
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.videos-cat-group {
  margin-bottom: 48px;
  scroll-margin-top: 90px;
}

.videos-cat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e2e8f0;
  margin-bottom: 22px;
}

.videos-cat-title {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.videos-cat-title small {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  margin-top: 2px;
}

.videos-cat-count-pill {
  background: #eff6fc;
  color: #0067b8;
  font-size: 12.5px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid #c7e0f4;
}

/* Series Banner for Magazine Design */
.videos-series-banner {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fde68a;
  border-left: 5px solid #d97706;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.videos-series-title {
  font-size: 16px;
  font-weight: 800;
  color: #92400e;
  margin-bottom: 4px;
}

.videos-series-desc {
  font-size: 13.5px;
  color: #78350f;
  line-height: 1.5;
  margin: 0;
}

/* 4-Column Responsive Grid with Generous Spacing */
.videos-grid-4col,
.videos-grid-3col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

@media (max-width: 1200px) {
  .videos-grid-4col,
  .videos-grid-3col {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

@media (max-width: 860px) {
  .videos-grid-4col,
  .videos-grid-3col {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 580px) {
  .videos-grid-4col,
  .videos-grid-3col {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ==========================================================================
   VIDEO PLAYER MODAL
   ========================================================================== */
.video-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(6px);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.video-modal-backdrop.active {
  display: flex;
  opacity: 1;
}

.video-modal-dialog {
  background: #0f172a;
  border-radius: 14px;
  width: 100%;
  max-width: 860px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  overflow: hidden;
  transform: scale(0.95);
  transition: transform 0.25s ease;
}

.video-modal-backdrop.active .video-modal-dialog {
  transform: scale(1);
}

.video-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #1e293b;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.video-modal-heading {
  color: #ffffff;
  font-size: 15.5px;
  font-weight: 700;
  margin: 0;
  line-height: 1.35;
  padding-right: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-modal-close-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s ease;
  flex-shrink: 0;
}

.video-modal-close-btn:hover {
  background: #ef4444;
}

.video-iframe-responsive {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
  background: #000000;
}

.video-iframe-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ==========================================================================
   26. ✍️ TECHNICAL BLOG & PERSPECTIVES (बालेन्दु शर्मा दाधीच)
   ========================================================================== */

/* Blog Hub Hero */
.blog-hub-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #31104b 100%);
  color: #ffffff;
  padding: 44px 0 36px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.2);
}

.blog-hub-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.blog-hub-title {
  color: #ffffff !important;
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 12px 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Author Spotlight Banner in Blog Hub */
.blog-author-spotlight {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

.blog-author-avatar-wrap {
  flex-shrink: 0;
}

.blog-author-avatar-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: #ffffff;
  font-size: 24px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
  border: 3px solid #ede9fe;
}

.blog-author-info {
  flex: 1;
}

.blog-author-badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  color: #6d28d9;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  padding: 2px 10px;
  border-radius: 12px;
  margin-bottom: 6px;
}

.blog-author-name {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px 0;
}

.blog-author-desc {
  font-size: 14px;
  color: #475569;
  line-height: 1.55;
  margin: 0;
}

.blog-author-stats {
  display: flex;
  gap: 16px;
  border-left: 1px solid #e2e8f0;
  padding-left: 24px;
  flex-shrink: 0;
}

.blog-author-stats .stat-box {
  text-align: center;
}

.blog-author-stats .stat-number {
  font-size: 24px;
  font-weight: 800;
  color: #4f46e5;
  line-height: 1;
  margin-bottom: 4px;
}

.blog-author-stats .stat-label {
  font-size: 11.5px;
  color: #64748b;
  font-weight: 600;
}

@media (max-width: 800px) {
  .blog-author-spotlight {
    flex-direction: column;
    text-align: center;
    align-items: center;
    padding: 20px;
  }
  .blog-author-stats {
    border-left: none;
    border-top: 1px solid #e2e8f0;
    padding-left: 0;
    padding-top: 14px;
    width: 100%;
    justify-content: center;
  }
}

/* Blog Articles Grid */
.blog-articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 28px;
}

@media (max-width: 768px) {
  .blog-articles-grid {
    grid-template-columns: 1fr;
  }
}

/* Individual Blog Card */
.blog-post-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.blog-post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
  border-color: #cbd5e1;
}

/* Blog Card Thumbnail */
.blog-card-thumb {
  position: relative;
  height: 160px;
  overflow: hidden;
}

.blog-thumb-art {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.3s ease;
}

.blog-post-card:hover .blog-thumb-art {
  transform: scale(1.03);
}

.blog-thumb-icon {
  font-size: 42px;
  margin-bottom: 6px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
}

.blog-thumb-accent {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
}

/* Category Themed Gradients for Thumbnails */
.blog-thumb-cat-rendering {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  color: #38bdf8;
}

.blog-thumb-cat-typography {
  background: linear-gradient(135deg, #831843 0%, #be185d 100%);
  color: #fbcfe8;
}

.blog-thumb-cat-unicode {
  background: linear-gradient(135deg, #14532d 0%, #047857 100%);
  color: #a7f3d0;
}

.blog-thumb-cat-ai-nlp {
  background: linear-gradient(135deg, #31104b 0%, #6b21a8 100%);
  color: #e9d5ff;
}

.blog-thumb-cat-keyboards {
  background: linear-gradient(135deg, #1e3a8a 0%, #0284c7 100%);
  color: #bae6fd;
}

.blog-thumb-cat-sovereignty {
  background: linear-gradient(135deg, #7c2d12 0%, #c2410c 100%);
  color: #fed7aa;
}

.blog-card-badge-row {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

.blog-category-tag {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 4px;
}

.blog-time-tag {
  background: rgba(255, 255, 255, 0.88);
  color: #0f172a;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
}

/* Card Body */
.blog-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card-author-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.blog-card-author-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #7c3aed;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-card-author-meta {
  display: flex;
  flex-direction: column;
}

.blog-card-author-name {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}

.blog-card-date {
  font-size: 11.5px;
  color: #64748b;
}

.blog-card-title {
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.38;
  margin: 0 0 6px 0;
}

.blog-card-title a {
  color: #0f172a;
  text-decoration: none;
  transition: color 0.15s ease;
}

.blog-card-title a:hover {
  color: #4f46e5;
}

.blog-card-subtitle-en {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
  margin-bottom: 10px;
  line-height: 1.3;
}

.blog-card-excerpt {
  font-size: 13.5px;
  color: #475569;
  line-height: 1.55;
  margin: 0 0 16px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.blog-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.blog-tag-pill {
  font-size: 11px;
  font-weight: 600;
  color: #4f46e5;
  background: #eef2ff;
  padding: 2px 8px;
  border-radius: 12px;
}

.blog-card-footer {
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
  margin-top: auto;
}

.btn-read-blog {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #4f46e5;
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none;
  transition: gap 0.15s ease, color 0.15s ease;
}

.btn-read-blog:hover {
  color: #4338ca;
  gap: 10px;
}

/* ==========================================================================
   HOMEPAGE BLOG SECTION & SLIDER
   ========================================================================== */
.blog-section-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 22px;
}

.blog-tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  color: #6d28d9;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
}

.blog-slider-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.blog-hub-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #4f46e5;
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
  padding: 7px 16px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s ease;
  margin-left: 6px;
}

.blog-hub-link:hover {
  background: #4338ca;
}

.blog-slider-wrapper {
  overflow: hidden;
  position: relative;
  padding: 4px 0 16px;
}

.blog-slider-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px;
}

.blog-slider-track::-webkit-scrollbar {
  display: none;
}

.home-blog-card {
  flex: 0 0 calc(33.333% - 15px);
  min-width: 320px;
  max-width: 420px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.09);
  border-color: #cbd5e1;
}

@media (max-width: 1024px) {
  .home-blog-card {
    flex: 0 0 calc(50% - 12px);
  }
}

@media (max-width: 680px) {
  .home-blog-card {
    flex: 0 0 88%;
    min-width: 280px;
  }
}

.home-blog-thumb {
  height: 120px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
}

.home-blog-thumb-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-blog-cat-icon {
  font-size: 28px;
}

.home-blog-cat-title {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.home-blog-read-time {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
}

.home-blog-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.home-blog-author-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.home-blog-author-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #7c3aed;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-blog-author-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
}

.home-blog-date {
  font-size: 11px;
  color: #64748b;
  margin-left: 6px;
}

.home-blog-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 8px 0;
}

.home-blog-title a {
  color: #0f172a;
  text-decoration: none;
}

.home-blog-title a:hover {
  color: #4f46e5;
}

.home-blog-excerpt {
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
  margin: 0 0 14px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.home-blog-footer {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
}

.btn-read-blog-sm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #4f46e5;
  font-weight: 700;
  font-size: 12.5px;
  text-decoration: none;
  transition: gap 0.15s ease;
}

.btn-read-blog-sm:hover {
  gap: 8px;
}

/* ==========================================================================
   BLOG DETAIL PAGE STYLING
   ========================================================================== */
.blog-detail-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 60%, #2e1065 100%);
  color: #ffffff;
  padding: 32px 0 36px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.25);
}

.blog-hero-author-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 8px 16px;
  border-radius: 30px;
}

.blog-hero-author-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #a855f7;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.4);
}

.blog-lead-quote-box {
  background: #f8fafc;
  border-left: 4px solid #4f46e5;
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
  margin-bottom: 28px;
}

.lead-quote-label {
  font-size: 11.5px;
  font-weight: 800;
  color: #4f46e5;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.lead-quote-text {
  font-size: 15.5px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.6;
  margin: 0;
}

/* Article Content Typography */
.blog-article-content-body {
  font-size: 16px;
  line-height: 1.8;
  color: #1e293b;
}

.blog-article-content-body h2 {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  margin: 32px 0 14px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid #e2e8f0;
}

.blog-article-content-body h3 {
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
  margin: 24px 0 10px 0;
}

.blog-article-content-body p {
  margin-bottom: 18px;
}

.blog-article-content-body ul,
.blog-article-content-body ol {
  margin: 0 0 20px 24px;
}

.blog-article-content-body li {
  margin-bottom: 8px;
  line-height: 1.7;
}

.blog-tip-box {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-left: 4px solid #16a34a;
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  margin: 22px 0;
  color: #166534;
  font-size: 14.5px;
  line-height: 1.6;
}

/* Author Full Profile Card in Article Footer */
.blog-author-full-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 24px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.author-full-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: #ffffff;
  font-size: 22px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
}

.author-full-details {
  flex: 1;
}

.author-full-role {
  font-size: 11px;
  font-weight: 800;
  color: #6d28d9;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.author-full-name {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 2px 0;
}

.author-full-title {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 8px;
}

.author-full-bio {
  font-size: 13.5px;
  color: #334155;
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 600px) {
  .blog-author-full-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

.solution-meta-list {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.solution-meta-list li {
  list-style: none !important;
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  line-height: 1.45;
}

.meta-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.meta-label {
  font-size: 11.5px;
  color: #64748b;
  display: block;
  line-height: 1.2;
  margin-bottom: 2px;
}

/* ==========================================================================
   LEGAL & INSTITUTIONAL PAGES (Privacy Policy, Terms, Disclaimer)
   ========================================================================== */
.legal-page-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 60%, #0369a1 100%);
  color: #ffffff;
  padding: 38px 0 42px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.15);
}

.legal-hero-pills {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.legal-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #e0f2fe;
}

.legal-hero-title {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.25;
  color: #ffffff;
  margin: 0 0 10px 0;
}

.legal-hero-subtitle {
  font-size: 15px;
  color: #cbd5e1;
  max-width: 840px;
  line-height: 1.65;
  margin: 0;
}

.legal-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 36px;
  margin-top: 36px;
  margin-bottom: 50px;
  align-items: start;
}

@media (max-width: 960px) {
  .legal-layout {
    grid-template-columns: 1fr;
  }
}

.legal-sidebar {
  position: sticky;
  top: 90px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.legal-sidebar-title {
  font-size: 13px;
  font-weight: 750;
  color: #0f172a;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.legal-doc-switcher {
  list-style: none;
  padding: 0;
  margin: 0 0 18px 0;
}

.legal-doc-switcher li {
  margin-bottom: 5px;
}

.legal-doc-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  transition: all 0.15s ease;
}

.legal-doc-link:hover {
  background: #f1f5f9;
  color: #0284c7;
}

.legal-doc-link.active {
  background: #e0f2fe;
  color: #0369a1;
  font-weight: 700;
}

.legal-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid #e2e8f0;
  padding-top: 14px;
}

.legal-toc-list li {
  margin-bottom: 8px;
}

.legal-toc-link {
  font-size: 12.5px;
  color: #64748b;
  text-decoration: none;
  display: block;
  line-height: 1.45;
  transition: color 0.15s ease, padding-left 0.15s ease;
}

.legal-toc-link:hover {
  color: #0284c7;
  padding-left: 4px;
}

.legal-content-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 40px 44px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

@media (max-width: 640px) {
  .legal-content-card {
    padding: 24px 20px;
  }
}

.legal-section {
  margin-bottom: 38px;
  scroll-margin-top: 100px;
}

.legal-section:last-child {
  margin-bottom: 0;
}

.legal-section-title {
  font-size: 19px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 14px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: 10px;
}

.legal-section-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.legal-body-text {
  font-size: 15px;
  line-height: 1.8;
  color: #334155;
  margin-bottom: 14px;
}

.legal-body-list {
  margin: 12px 0 18px 22px;
  padding: 0;
}

.legal-body-list li {
  font-size: 14.5px;
  line-height: 1.75;
  color: #334155;
  margin-bottom: 8px;
}

.legal-callout-info {
  background: #f0f9ff;
  border-left: 4px solid #0284c7;
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin: 18px 0;
  font-size: 14px;
  line-height: 1.7;
  color: #0c4a6e;
}

.legal-callout-warning {
  background: #fffbeb;
  border-left: 4px solid #f59e0b;
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin: 18px 0;
  font-size: 14px;
  line-height: 1.7;
  color: #78350f;
}

.legal-callout-danger {
  background: #fef2f2;
  border-left: 4px solid #ef4444;
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin: 18px 0;
  font-size: 14px;
  line-height: 1.7;
  color: #7f1d1d;
}

/* ==========================================================================
   SEO ENHANCEMENT COMPONENTS: ONLINE TYPING TOOLS
   Optimized for Featured Snippets, Cheat Sheets, Tables & Mobile Speed
   ========================================================================== */

/* 1. Authority Badges Row */
.seo-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 24px;
}

.seo-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f0f7ff;
  border: 1px solid #c8e1fa;
  color: #125396;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  letter-spacing: 0.2px;
  transition: all 0.2s ease;
}

.seo-badge-pill:hover {
  background: #e1effe;
  border-color: #9ac7f5;
  transform: translateY(-1px);
}

.seo-badge-pill.pill-accent {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #c2410c;
}

.seo-badge-pill.pill-success {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #15803d;
}

/* 2. Interactive SEO Reference Tabs */
.seo-tabs-container {
  background: #ffffff;
  border: 1px solid #d9e6f2;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(18, 52, 92, 0.05);
  margin: 24px 0 32px;
}

.seo-tab-nav {
  display: flex;
  background: #f8fbfe;
  border-bottom: 1px solid #e1ecf5;
  overflow-x: auto;
  scrollbar-width: thin;
}

.seo-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  font-size: 14.5px;
  font-weight: 600;
  color: #4b6482;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.seo-tab-btn:hover {
  color: #1a56db;
  background: #f0f6fc;
}

.seo-tab-btn.active {
  color: #1a56db;
  background: #ffffff;
  border-bottom-color: #1a56db;
  font-weight: 700;
}

.seo-tab-panel {
  display: none;
  padding: 24px;
}

.seo-tab-panel.active {
  display: block;
  animation: seoFadeIn 0.25s ease-in-out;
}

@keyframes seoFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 3. Character Transliteration Grid */
.char-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}

.char-tile {
  background: #ffffff;
  border: 1px solid #e2eaf2;
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.char-tile:hover {
  border-color: #9cc6f4;
  box-shadow: 0 4px 12px rgba(26, 86, 219, 0.1);
  transform: translateY(-2px);
}

.char-symbol {
  font-size: 24px;
  font-weight: 700;
  color: #0f274a;
  line-height: 1.2;
  margin-bottom: 4px;
}

.char-key {
  display: inline-block;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 2px 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  font-weight: 600;
  color: #0369a1;
  margin-bottom: 4px;
}

.char-example {
  font-size: 11.5px;
  color: #64748b;
  display: block;
}

/* 4. Alt Code Table & Key Mapping Table */
.alt-code-table-wrap {
  overflow-x: auto;
  border: 1px solid #e1ecf5;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(18, 52, 92, 0.04);
}

.alt-code-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 14px;
}

.alt-code-table th {
  background: #f0f6fb;
  color: #102444;
  font-weight: 700;
  padding: 12px 16px;
  border-bottom: 2px solid #d4e3f1;
}

.alt-code-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #e8f0f8;
  vertical-align: middle;
}

.alt-code-table tr:hover td {
  background: #f7faff;
}

.code-badge {
  display: inline-block;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  border-radius: 5px;
  padding: 3px 8px;
  font-family: monospace;
  font-size: 13px;
  font-weight: 700;
  color: #be123c;
}

.alt-char-out {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
}

/* 5. Exam Readiness Cards */
.exam-badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.exam-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  transition: all 0.2s ease;
}

.exam-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.08);
  transform: translateY(-2px);
}

.exam-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.exam-card-desc {
  font-size: 13.5px;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 10px;
}

.exam-card-req {
  font-size: 12px;
  font-weight: 600;
  background: #f1f5f9;
  color: #334155;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
}

/* 6. Ecosystem Cross-Links Strip */
.seo-crosslinks-box {
  background: linear-gradient(135deg, #f0f7ff 0%, #fbfdff 100%);
  border: 1px solid #cce3f8;
  border-radius: 16px;
  padding: 24px 28px;
  margin: 40px 0 20px;
}

.seo-crosslinks-title {
  font-size: 17px;
  font-weight: 700;
  color: #0f274a;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.seo-crosslinks-desc {
  font-size: 14px;
  color: #475569;
  margin-bottom: 16px;
}

.seo-crosslinks-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.seo-crosslink-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #bcd8f3;
  color: #1a56db;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(26, 86, 219, 0.04);
}

.seo-crosslink-item:hover {
  background: #1a56db;
  color: #ffffff;
  border-color: #1a56db;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(26, 86, 219, 0.2);
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
  .char-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .seo-tab-btn {
    padding: 10px 14px;
    font-size: 13px;
  }
  .seo-crosslinks-box {
    padding: 18px 16px;
  }
}