/* ═══════════════════════════════════════════
   SHARED DESIGN SYSTEM — ClearConsent v2
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
:root {
  --bg:    #060F1E;
  --bg-2:  #0D1B3E;
  --bg-3:  #112347;
  --border: rgba(255,255,255,0.08);
  --bh:    rgba(23,140,160,0.45);
  --teal:  #20B8D0;
  --teal-d: rgba(23,140,160,0.12);
  --green: #3CB944;
  --grad:  linear-gradient(135deg, #178CA0 0%, #3CB944 100%);
  --t1:    #F1F5F9;
  --t2:    #94A3B8;
  --t3:    #8A99AE; /* was #64748B — raised to meet WCAG AA 4.5:1 on all dark surfaces */
  --r:     12px;
  --rl:    20px;
  --sh:    0 4px 24px rgba(0,0,0,.4);
  --shl:   0 20px 60px rgba(0,0,0,.5);
  --tr:    .25s cubic-bezier(.4,0,.2,1);
}
html { scroll-behavior: smooth }
body { font-family: 'Inter', 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans Gurmukhi', 'Noto Sans Gujarati', 'Noto Sans Oriya', 'Noto Sans Tamil', 'Noto Sans Telugu', 'Noto Sans Kannada', 'Noto Sans Malayalam', 'Noto Sans Ol Chiki', 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', sans-serif; background: var(--bg); color: var(--t1); line-height: 1.65; overflow-x: hidden }
h1,h2,h3,h4 { font-family: 'Plus Jakarta Sans', sans-serif; line-height: 1.2; letter-spacing: -.025em }
a { color: inherit; text-decoration: none }
img { max-width: 100%; display: block }

/* ── UTILITIES ── */
.wrap     { max-width: 1160px; margin: 0 auto; padding: 0 28px }
.grad-t   { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text }
.chip     { display: inline-flex; align-items: center; gap: 7px; background: rgba(45,212,191,.1); border: 1px solid rgba(45,212,191,.22); color: var(--teal); padding: 5px 14px; border-radius: 100px; font-size: .78rem; font-weight: 600; letter-spacing: .5px }
.dot-live { width: 7px; height: 7px; background: var(--teal); border-radius: 50%; animation: pulse 2s infinite; display: inline-block }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.5)} }

/* ── BUTTONS ── */
.btn      { display: inline-flex; align-items: center; gap: 8px; font-family: 'Inter', sans-serif; border: none; cursor: pointer; border-radius: 10px; font-weight: 600; transition: all var(--tr) }
.btn-p    { background: var(--grad); color: #060C18; padding: 13px 26px; font-size: .92rem; font-weight: 700 }
.btn-p:hover  { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(45,212,191,.35) }
.btn-p.lg { padding: 15px 32px; font-size: 1rem; border-radius: 12px }
.btn-g    { background: transparent; color: var(--t1); padding: 12px 26px; font-size: .92rem; border: 1px solid var(--border) }
.btn-g:hover  { border-color: rgba(45,212,191,.35); color: var(--teal) }
.btn-g.lg { padding: 14px 32px; font-size: 1rem; border-radius: 12px }

/* ── NAV BRAND MARK ── */
.nav-brand {
  font-family:'Plus Jakarta Sans',sans-serif; font-size:1.05rem; font-weight:800;
  color:var(--t1); letter-spacing:-.02em; text-decoration:none; white-space:nowrap;
  display:flex; align-items:center; gap:10px; position:relative;
}
.nav-brand img { height:54px; width:auto; object-fit:contain; flex-shrink:0 }
.nav-brand sup { position:absolute; right:9px; bottom:22px; font-size:.38rem; font-weight:800; letter-spacing:0; line-height:1 }

/* ── NAVBAR ── */
#nav {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(8,13,26,.85); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav-inner { max-width: 1160px; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; height: 68px }
.nav-logo img { height: 32px }
.nav-links { display: flex; align-items: center; gap: 8px; list-style: none }
.nav-links a { font-size: .88rem; font-weight: 500; color: var(--t2); padding: 7px 14px; border-radius: 8px; transition: all var(--tr) }
.nav-links a:hover { color: var(--t1); background: rgba(255,255,255,.05) }
.nav-links a.active { color: var(--teal); background: rgba(45,212,191,.08) }
.nav-ham { display: none; background: none; border: none; cursor: pointer; color: var(--t2); padding: 4px }
.nav-ham svg { width: 22px; height: 22px }
.mob-menu { display: none; position: fixed; top: 68px; left: 0; right: 0; background: var(--bg-2); border-bottom: 1px solid var(--border); padding: 16px 28px; flex-direction: column; gap: 4px; z-index: 999 }
.mob-menu.open { display: flex }
.mob-menu a { font-size: .95rem; color: var(--t2); padding: 10px 12px; border-radius: 8px }
.mob-menu a.active { color: var(--teal); background: rgba(45,212,191,.08) }

/* ── PRODUCTS DROPDOWN ── */
.nav-dropdown { position: relative }
.nav-dropdown-btn {
  display: flex; align-items: center; gap: 5px;
  font-size: .88rem; font-weight: 500; color: var(--t2);
  padding: 7px 14px; border-radius: 8px;
  background: none; border: none; cursor: pointer;
  font-family: inherit; transition: all var(--tr);
}
.nav-dropdown-btn:hover { color: var(--t1); background: rgba(255,255,255,.05) }
.nav-dropdown-chevron { width: 12px; height: 12px; transition: transform .2s; opacity: .6 }
.nav-dropdown-panel {
  display: none; position: absolute; top: 100%; left: 0;
  padding-top: 6px; /* transparent bridge keeps hover alive across the gap */
  min-width: 280px; z-index: 1000;
}
.nav-dropdown-panel-inner {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 14px; padding: 8px;
  box-shadow: 0 16px 48px rgba(0,0,0,.45);
}
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel { display: block }
.nav-dropdown:hover .nav-dropdown-btn,
.nav-dropdown:focus-within .nav-dropdown-btn { color: var(--t1); background: rgba(255,255,255,.05) }
.nav-dropdown:hover .nav-dropdown-chevron,
.nav-dropdown:focus-within .nav-dropdown-chevron { transform: rotate(180deg) }
.nav-prod-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-radius: 10px;
  text-decoration: none; transition: background var(--tr);
}
.nav-prod-item:hover { background: rgba(255,255,255,.05) }
.nav-prod-icon {
  width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  background: rgba(32,184,208,.1); border: 1px solid rgba(32,184,208,.2);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.nav-prod-info { display: flex; flex-direction: column; gap: 2px }
.nav-prod-name { font-size: .88rem; font-weight: 700; color: var(--t1) }
.nav-prod-name span { font-size: .75rem; font-weight: 600; color: var(--teal); margin-left: 6px; background: rgba(32,184,208,.1); padding: 1px 7px; border-radius: 100px }
.nav-prod-desc { font-size: .78rem; color: var(--t3); line-height: 1.5 }
.nav-prod-all { display:block; margin:6px 14px 4px; padding:8px 12px; border-radius:8px; border:1px solid var(--border); font-size:.78rem; font-weight:600; color:var(--teal); text-decoration:none; text-align:center; transition:all var(--tr) }
.nav-prod-all:hover { background:rgba(32,184,208,.08); border-color:rgba(32,184,208,.3) }

/* ── PAGE HEADER ── */
.page-hero { padding: 80px 0 64px; border-bottom: 1px solid var(--border) }
.page-hero .s-label { margin-bottom: 14px }
.page-hero h1 { font-size: 3rem; font-weight: 800; color: var(--t1); margin-bottom: 16px }
.page-hero .sub { font-size: 1.05rem; color: var(--t2); max-width: 600px; line-height: 1.8; margin-bottom: 28px }

/* ── SECTIONS ── */
.section     { padding: 80px 0 }
.section-alt { background: var(--bg-2) }
.s-label { display: inline-flex; align-items: center; gap: 8px; color: var(--teal); font-size: .78rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 14px }
.s-label::before { content: ''; width: 18px; height: 2px; background: var(--teal); border-radius: 1px }
.s-title { font-size: 2.4rem; font-weight: 800; color: var(--t1); margin-bottom: 16px }
.s-sub   { font-size: 1rem; color: var(--t2); max-width: 560px; line-height: 1.8 }
.s-head  { margin-bottom: 52px }
.s-head.center { text-align: center }
.s-head.center .s-sub { margin: 0 auto }

/* ── CARDS ── */
.card-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px }
.card-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px }
.card {
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  border-radius: var(--rl); padding: 28px; transition: all var(--tr);
}
.card:hover { border-color: var(--bh); transform: translateY(-4px); box-shadow: var(--shl) }

/* ── CTA BANNER ── */
.cta-strip {
  background: linear-gradient(135deg, rgba(45,212,191,.1) 0%, rgba(74,222,128,.07) 100%);
  border-top: 1px solid rgba(45,212,191,.13); border-bottom: 1px solid rgba(45,212,191,.13);
  padding: 80px 0; text-align: center;
}
.cta-strip h2 { font-size: 2.4rem; font-weight: 800; color: var(--t1); margin-bottom: 14px }
.cta-strip p  { font-size: .98rem; color: var(--t2); margin-bottom: 32px; max-width: 500px; margin-left: auto; margin-right: auto }
.cta-strip .btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap }

/* ── FOOTER ── */
footer { background: var(--bg-2); border-top: 1px solid var(--border); padding: 64px 0 28px }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px }
.foot-logo { height: 44px; margin-bottom: 14px }
.foot-tag  { font-size: .83rem; color: var(--t3); line-height: 1.75; max-width: 240px; margin-bottom: 20px }
.socials   { display: flex; gap: 8px }
.soc { width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,.05); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: .82rem; color: var(--t2); cursor: pointer; transition: all var(--tr) }
.soc:hover { border-color: var(--bh); color: var(--teal); background: rgba(45,212,191,.08) }
.foot-col h5, .foot-col .foot-h { font-size: .78rem; font-weight: 700; color: var(--t1); text-transform: uppercase; letter-spacing: .9px; margin-bottom: 16px }
.foot-col .foot-h { font-family: inherit; line-height: inherit } /* h2 for heading order, looks identical to the old h5 */
.foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px }
.foot-col ul a { font-size: .85rem; color: var(--t3); transition: color var(--tr) }
.foot-col ul a:hover { color: var(--teal) }
.foot-bottom { border-top: 1px solid var(--border); padding-top: 22px; display: flex; align-items: center; justify-content: space-between; font-size: .80rem; color: var(--t3) }
.foot-bottom a { color: var(--t3); margin-left: 20px; transition: color var(--tr) }
.foot-bottom a:hover { color: var(--teal) }

/* ── SCROLL FADE ── */
.fade-up { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease }
.fade-up.vis { opacity: 1; transform: translateY(0) }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .card-grid-3 { grid-template-columns: repeat(2,1fr) }
  .foot-grid   { grid-template-columns: 1fr 1fr }
}
@media (max-width: 640px) {
  .nav-links, .nav-cta { display: none }
  .nav-ham { display: block }
  .card-grid-3, .card-grid-2 { grid-template-columns: 1fr }
  .page-hero h1 { font-size: 2rem }
  .s-title { font-size: 1.85rem }
  .cta-strip h2 { font-size: 1.8rem }
  .foot-grid { grid-template-columns: 1fr }
}

/* ── Page fade-in ── */
body { animation: fadeIn .3s ease }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

/* ── Mobile sticky CTA ── */
.mob-cta-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
  padding: 12px 20px;
  background: rgba(6,15,30,.95);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  transform: translateY(100%);
  transition: transform .3s ease;
}
.mob-cta-bar.visible { transform: translateY(0) }
.mob-cta-bar .btn { width: 100%; text-align: center; font-size: 0.95rem; padding: 14px }
@media (max-width: 640px) {
  .mob-cta-bar { display: block }
}

/* ── ACCESSIBILITY (WCAG 2.1 AA) ── */
.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 10000;
  background: var(--teal); color: #060C18; font-weight: 700; font-size: .9rem;
  padding: 10px 18px; border-radius: 0 0 10px 10px; text-decoration: none;
}
.skip-link:focus { top: 0 }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--teal) !important; outline-offset: 1px }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important }
  .fade-up { opacity: 1; transform: none }
}

/* ── INDIC & RTL TYPOGRAPHY (consent notices) ── */
:lang(hi), :lang(mr), :lang(ne), :lang(kok), :lang(mai), :lang(doi), :lang(brx), :lang(sa) { font-family: 'Inter', 'Noto Sans Devanagari', 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans Gurmukhi', 'Noto Sans Gujarati', 'Noto Sans Oriya', 'Noto Sans Tamil', 'Noto Sans Telugu', 'Noto Sans Kannada', 'Noto Sans Malayalam', 'Noto Sans Ol Chiki', 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', sans-serif; line-height: 1.7 }
:lang(bn), :lang(as), :lang(mni) { font-family: 'Inter', 'Noto Sans Bengali', 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans Gurmukhi', 'Noto Sans Gujarati', 'Noto Sans Oriya', 'Noto Sans Tamil', 'Noto Sans Telugu', 'Noto Sans Kannada', 'Noto Sans Malayalam', 'Noto Sans Ol Chiki', 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', sans-serif; line-height: 1.7 }
:lang(pa)  { font-family: 'Inter', 'Noto Sans Gurmukhi', 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans Gurmukhi', 'Noto Sans Gujarati', 'Noto Sans Oriya', 'Noto Sans Tamil', 'Noto Sans Telugu', 'Noto Sans Kannada', 'Noto Sans Malayalam', 'Noto Sans Ol Chiki', 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', sans-serif; line-height: 1.7 }
:lang(gu)  { font-family: 'Inter', 'Noto Sans Gujarati', 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans Gurmukhi', 'Noto Sans Gujarati', 'Noto Sans Oriya', 'Noto Sans Tamil', 'Noto Sans Telugu', 'Noto Sans Kannada', 'Noto Sans Malayalam', 'Noto Sans Ol Chiki', 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', sans-serif; line-height: 1.7 }
:lang(or)  { font-family: 'Inter', 'Noto Sans Oriya', 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans Gurmukhi', 'Noto Sans Gujarati', 'Noto Sans Oriya', 'Noto Sans Tamil', 'Noto Sans Telugu', 'Noto Sans Kannada', 'Noto Sans Malayalam', 'Noto Sans Ol Chiki', 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', sans-serif; line-height: 1.7 }
:lang(ta)  { font-family: 'Inter', 'Noto Sans Tamil', 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans Gurmukhi', 'Noto Sans Gujarati', 'Noto Sans Oriya', 'Noto Sans Tamil', 'Noto Sans Telugu', 'Noto Sans Kannada', 'Noto Sans Malayalam', 'Noto Sans Ol Chiki', 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', sans-serif; line-height: 1.7 }
:lang(te)  { font-family: 'Inter', 'Noto Sans Telugu', 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans Gurmukhi', 'Noto Sans Gujarati', 'Noto Sans Oriya', 'Noto Sans Tamil', 'Noto Sans Telugu', 'Noto Sans Kannada', 'Noto Sans Malayalam', 'Noto Sans Ol Chiki', 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', sans-serif; line-height: 1.7 }
:lang(kn)  { font-family: 'Inter', 'Noto Sans Kannada', 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans Gurmukhi', 'Noto Sans Gujarati', 'Noto Sans Oriya', 'Noto Sans Tamil', 'Noto Sans Telugu', 'Noto Sans Kannada', 'Noto Sans Malayalam', 'Noto Sans Ol Chiki', 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', sans-serif; line-height: 1.7 }
:lang(ml)  { font-family: 'Inter', 'Noto Sans Malayalam', 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans Gurmukhi', 'Noto Sans Gujarati', 'Noto Sans Oriya', 'Noto Sans Tamil', 'Noto Sans Telugu', 'Noto Sans Kannada', 'Noto Sans Malayalam', 'Noto Sans Ol Chiki', 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', sans-serif; line-height: 1.7 }
:lang(sat) { font-family: 'Inter', 'Noto Sans Ol Chiki', 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans Gurmukhi', 'Noto Sans Gujarati', 'Noto Sans Oriya', 'Noto Sans Tamil', 'Noto Sans Telugu', 'Noto Sans Kannada', 'Noto Sans Malayalam', 'Noto Sans Ol Chiki', 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', sans-serif; line-height: 1.7 }
:lang(ur), :lang(ks) { font-family: 'Inter', 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans Gurmukhi', 'Noto Sans Gujarati', 'Noto Sans Oriya', 'Noto Sans Tamil', 'Noto Sans Telugu', 'Noto Sans Kannada', 'Noto Sans Malayalam', 'Noto Sans Ol Chiki', 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', sans-serif; line-height: 2 }
:lang(sd)  { font-family: 'Inter', 'Noto Naskh Arabic', 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans Gurmukhi', 'Noto Sans Gujarati', 'Noto Sans Oriya', 'Noto Sans Tamil', 'Noto Sans Telugu', 'Noto Sans Kannada', 'Noto Sans Malayalam', 'Noto Sans Ol Chiki', 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', sans-serif; line-height: 1.8 }