@charset "UTF-8";
/* ==========================================================================
   TaqwaSolution — design system
   Colours are sampled from the brand crescent logo, not chosen by taste:
   green #057b4a · blue #0270be · navy #04274e · sky #4aa8e3
   ========================================================================== */

/* ---------- fonts (self-hosted, no third-party request) ---------- */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- tokens: light is the base, both themes redefine tokens only ---- */
:root {
  --green: #057b4a;
  --green-600: #046b40;
  --green-300: #2e9564;
  --blue: #0270be;
  --blue-700: #04437c;
  --sky: #4aa8e3;
  --navy: #04274e;

  --bg: #f4f8f6;
  --surface: #ffffff;
  --surface-2: #eaf1ee;
  --surface-3: #ffffff;
  --ink: #08202f;
  --ink-2: #3c5a6b;
  --muted: #4d6877;   /* AA: 5.14 on --surface-2, tha #63808f = 3.65 (fail) */
  --line: #d8e4e0;
  --line-2: #c2d4ce;
  --field-line: #728c85;   /* interactive border, 3.62:1 on white */

  --accent: var(--green);
  --accent-ink: #ffffff;
  --link: var(--blue);

  --hero-bg: linear-gradient(168deg, #f0f7f4 0%, #e7f1f7 55%, #eef4fb 100%);
  --cta-from: #04274e;   /* white text 14.94:1 */
  --cta-to: #0a5288;     /* white text  8.15:1 */
  --ring: rgba(2, 112, 190, 0.45);
  --shadow-sm: 0 1px 2px rgba(4, 39, 78, 0.06);
  --shadow-md: 0 2px 4px rgba(4, 39, 78, 0.05), 0 12px 28px rgba(4, 39, 78, 0.07);
  --shadow-lg: 0 4px 8px rgba(4, 39, 78, 0.06), 0 24px 56px rgba(4, 39, 78, 0.1);

  --radius: 10px;
  --radius-lg: 16px;
  --container: 1180px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.875rem);
  --step-0: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
  --step-1: clamp(1.15rem, 1.1rem + 0.26vw, 1.3rem);
  --step-2: clamp(1.4rem, 1.3rem + 0.5vw, 1.7rem);
  --step-3: clamp(1.75rem, 1.55rem + 1vw, 2.3rem);
  --step-4: clamp(2.1rem, 1.7rem + 2vw, 3.2rem);
  --step-5: clamp(2.5rem, 1.9rem + 3vw, 4rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --green: #2fb277;
    --green-600: #23a069;
    --green-300: #5ecb98;
    --blue: #4aa8e3;
    --blue-700: #2b86c4;
    --sky: #82c8ef;
    --navy: #cfe3f2;

    --bg: #061420;
    --surface: #0b2030;
    --surface-2: #102a3c;
    --surface-3: #0e2637;
    --ink: #e7eff4;
    --ink-2: #adc4d2;
    --muted: #7f9aab;
    --line: #17394f;
    --line-2: #21506c;
    --field-line: #35719a;   /* 3.15:1 on --surface */

    --accent: var(--green);
    --accent-ink: #04211a;
    --link: var(--blue);

    --hero-bg: linear-gradient(168deg, #07202e 0%, #08283a 55%, #0a2233 100%);
    --cta-from: #052a44;   /* white text 14.78:1 */
    --cta-to: #0a4a72;     /* white text  9.39:1 */
    --ring: rgba(74, 168, 227, 0.6);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 12px 28px rgba(0, 0, 0, 0.32);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4), 0 24px 56px rgba(0, 0, 0, 0.45);
  }
}

:root[data-theme="dark"] {
  --green: #2fb277;
  --green-600: #23a069;
  --green-300: #5ecb98;
  --blue: #4aa8e3;
  --blue-700: #2b86c4;
  --sky: #82c8ef;
  --navy: #cfe3f2;

  --bg: #061420;
  --surface: #0b2030;
  --surface-2: #102a3c;
  --surface-3: #0e2637;
  --ink: #e7eff4;
  --ink-2: #adc4d2;
  --muted: #7f9aab;
  --line: #17394f;
  --line-2: #21506c;
  --field-line: #35719a;   /* 3.15:1 on --surface */

  --accent: var(--green);
  --accent-ink: #04211a;
  --link: var(--blue);

  --hero-bg: linear-gradient(168deg, #07202e 0%, #08283a 55%, #0a2233 100%);
  --cta-from: #052a44;
  --cta-to: #0a4a72;
  --ring: rgba(74, 168, 227, 0.6);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 12px 28px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4), 0 24px 56px rgba(0, 0, 0, 0.45);
}

/* ---------- reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  line-height: 1.15;
  letter-spacing: -0.021em;
  font-weight: 800;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); font-weight: 700; }
p  { margin: 0 0 1rem; }
p, li { text-wrap: pretty; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- skip link ---------- */
.skip {
  position: absolute;
  left: 0.5rem;
  top: -100px;
  z-index: 200;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip:focus { top: 0.5rem; }

/* ---------- layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--alt { background: var(--surface-2); }

.stack > * + * { margin-top: var(--stack-gap, 1rem); }
.lede {
  font-size: var(--step-1);
  color: var(--ink-2);
  max-width: 62ch;
  font-weight: 400;
}

.section-head { max-width: 66ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head p { color: var(--ink-2); margin-bottom: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 0.85rem;
}
.eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: var(--step-0);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease,
    color 0.18s ease, transform 0.18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--green-600); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--wide { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* ---------- header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 74px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-right: auto;
}
.brand__mark { width: 38px; height: 38px; flex: none; }
.brand__name { display: block; font-size: 1.075rem; line-height: 1.15; }
.brand__sub {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  display: block;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius);
  color: var(--ink-2);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}
.nav__link:hover { background: var(--surface-2); color: var(--ink); }
.nav__link[aria-current="page"] { color: var(--green); background: var(--surface-2); }

.header__cta { margin-left: 0.5rem; flex: none; }

/* Nav drawer ka CTA sirf mobile ke liye hai - desktop par header__cta pehle se hai */
.nav__cta { display: none; }

.nav-toggle {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero {
  background: var(--hero-bg);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2.5rem, 6vw, 5rem);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero h1 { margin-bottom: 1rem; }
.hero h1 .accent {
  background: linear-gradient(96deg, var(--green) 0%, var(--blue) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__lede { margin-bottom: 1.75rem; }
.hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-2);
}
.hero__points li { display: flex; align-items: center; gap: 0.45rem; }
.hero__points svg { width: 17px; height: 17px; color: var(--green); flex: none; }

/* ---------- ERP module wheel (hero visual) ---------- */
.wheel {
  --size: min(clamp(310px, 40vw, 470px), 88vw);
  max-width: 100%;
  position: relative;
  width: var(--size);
  height: var(--size);
  margin-inline: auto;
}
.wheel__svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Poora wheel ghoomta hai - rings, spokes aur chips ek unit ki tarah.
   35s reference site se measure kiya gaya (10.35 deg/sec, clockwise).
   Hub is se bahar hai is liye sthir aur sidha rehta hai. */
.wheel__rotor {
  transform-origin: 50% 50%;
  animation: wheel-spin 35s linear infinite;
}
.wheel__rotor--chips { position: absolute; inset: 0; }

/* Chip pill ring ke saath ghoomti hai, magar andar ka content ulti simt
   ghoom kar text hamesha sidha rakhta hai - warna neeche wale chips
   ulte ho jate. */
/* Pill ki poori shakl yahan hai, sirf text nahi - warna 90/270 deg par
   background vertical rectangle ban jata hai aur text us se bahar tairta hai.
   Counter-rotation se pill aur text dono hamesha sidhe rehte hain. */
.wheel__chip-inner {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  animation: wheel-spin-rev 35s linear infinite;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.wheel__hub {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 38%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  /* align-content: center zaroori hai - warna auto rows hub ki poori height
     par stretch ho jati hain aur laptop upar chipak jata hai. Is se teeno
     cheezein ek tight group ban kar bilkul beech mein aa jati hain. */
  align-content: center;
  gap: 0.3rem;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
}
.wheel__hub-mark { width: 34%; height: auto; }
.wheel__hub-label {
  font-size: clamp(0.72rem, 1.6vw, 0.9rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.wheel__hub-sub {
  font-size: clamp(0.56rem, 1.15vw, 0.68rem);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.wheel__chip {
  /* Sirf anchor point. left/top build script se plain percentages ke tor par
     aate hain - CSS trigonometry ki zaroorat nahi aur purane browsers bhi
     sahi position karte hain. Pill ki shakl inner element par hai. */
  position: absolute;
  display: block;
  font-size: clamp(0.6rem, 1.3vw, 0.75rem);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  text-decoration: none;
  transform: translate(-50%, -50%);
}
.wheel__chip:hover .wheel__chip-inner {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}
.wheel__chip-label { display: inline; }
.wheel__chip-short { display: none; }
.wheel__chip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dot, var(--green));
  flex: none;
}

@keyframes wheel-spin { to { transform: rotate(360deg); } }
@keyframes wheel-spin-rev { to { transform: rotate(-360deg); } }

/* ---------- cards & grids ----------
   Har jagah minmax(min(Npx, 100%), 1fr) use hua hai, sirf minmax(Npx, 1fr)
   nahi: fixed minimum track apne se chhote container mein fit nahi hota aur
   320px jaisi screens par horizontal scroll paida kar deta hai. */
.grid { display: grid; gap: clamp(1rem, 2vw, 1.4rem); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(255px, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

.card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.15rem, 2.2vw, 1.6rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
a.card:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.card__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--green) 12%, transparent);
  color: var(--green);
  margin-bottom: 0.35rem;
}
.card__icon svg { width: 22px; height: 22px; }
.card__icon--blue {
  background: color-mix(in srgb, var(--blue) 13%, transparent);
  color: var(--blue);
}
.card h3 { font-size: var(--step-1); margin-bottom: 0.2rem; }
.card p { color: var(--ink-2); font-size: 0.94rem; margin: 0; }
.card__more {
  margin-top: auto;
  padding-top: 0.7rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
a.card:hover .card__more { gap: 0.6rem; }

/* ---------- tabs ---------- */
/* grid-template-columns: minmax(0,1fr) zaroori hai - default `auto` track
   apne item ke min-content tak barh jata hai, jis se 320px par tablist
   container se bahar nikal jati thi. */
.tabs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; min-width: 0; }
.tablist {
  /* min-width:0 zaroori hai - warna grid item apne min-content se chhota nahi
     hota aur 320px par parent se bahar nikal jata hai. */
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.35rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.tab {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 46px;
  padding: 0.6rem 1.1rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] {
  background: var(--surface);
  border-color: var(--line);
  color: var(--green);
  box-shadow: var(--shadow-sm);
}
.tabpanel[hidden] { display: none; }

/* ---------- feature list ---------- */
.highlight-grid { margin-top: 1.4rem; gap: 0.9rem; }
.highlight-card { gap: 0.5rem; padding: 1.1rem 1.3rem; cursor: default; }
.highlight-card__tag {
  display: flex; align-items: center; gap: 0.55rem;
  font-weight: 700; color: var(--ink); font-size: 0.98rem; margin: 0;
}
.highlight-card__tag svg { width: 18px; height: 18px; color: var(--green); flex: none; }
.highlight-card__detail {
  display: flex; align-items: flex-start; gap: 0.55rem;
  color: var(--ink-2); font-size: 0.9rem; line-height: 1.45; margin: 0;
}
.highlight-card__detail svg { width: 15px; height: 15px; color: var(--blue); flex: none; margin-top: 0.2rem; }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.ticks li { display: flex; gap: 0.7rem; align-items: flex-start; }
.ticks svg { width: 20px; height: 20px; flex: none; margin-top: 0.22rem; color: var(--green); }
.ticks--2 { grid-template-columns: repeat(auto-fit, minmax(min(265px, 100%), 1fr)); gap: 0.7rem 1.6rem; }

/* ---------- process steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0 1.15rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step__n {
  counter-increment: step;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}
.step__n::before { content: counter(step, decimal-leading-zero); }
.step h3 { font-size: var(--step-1); margin-bottom: 0.15rem; }
.step p { color: var(--ink-2); margin: 0; }

/* ---------- alliance table ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
table { border-collapse: collapse; width: 100%; min-width: 460px; }
th, td { text-align: left; padding: 0.85rem 1.15rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 0.78rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); font-weight: 700; background: var(--surface-2); }
tr:last-child td { border-bottom: 0; }
td strong { font-weight: 700; }

/* ---------- FAQ ---------- */
.faq { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.faq details + details { border-top: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.35rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  min-height: 56px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 11px; height: 11px;
  flex: none;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { background: var(--surface-2); }
.faq .faq__body { padding: 0 1.35rem 1.25rem; color: var(--ink-2); max-width: 72ch; }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(122deg, var(--cta-from) 0%, var(--cta-to) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3.4rem);
  display: grid;
  gap: 1.5rem;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
}
:root[data-theme="dark"] .cta-band,
:root:not([data-theme="light"]) .cta-band { border: 1px solid var(--line-2); }
.cta-band h2 { color: #fff; margin-bottom: 0.4rem; font-size: var(--step-3); }
.cta-band p { color: rgba(255, 255, 255, 0.82); margin: 0; max-width: 54ch; }
.cta-band .btn--primary { background: #fff; color: #04274e; }
.cta-band .btn--primary:hover { background: #eaf3fb; }
.cta-band .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.cta-band .btn--ghost:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, 0.1); }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.field { display: grid; gap: 0.4rem; margin-bottom: 1.1rem; }
.field label { font-weight: 700; font-size: 0.92rem; }
.field .req { color: var(--green); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  outline: none;
}
.field .hint { font-size: 0.83rem; color: var(--muted); }
.field .err { font-size: 0.85rem; color: #c0392b; font-weight: 600; }
:root[data-theme="dark"] .field .err,
:root:not([data-theme="light"]) .field .err { color: #f08a80; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: #c0392b; }

.form-status { padding: 0.9rem 1.1rem; border-radius: var(--radius); font-weight: 600; margin-bottom: 1rem; }
.form-status--ok { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 35%, transparent); }
.form-status--bad { background: color-mix(in srgb, #c0392b 12%, transparent); color: #c0392b; border: 1px solid color-mix(in srgb, #c0392b 32%, transparent); }
:root[data-theme="dark"] .form-status--bad,
:root:not([data-theme="light"]) .form-status--bad { color: #f08a80; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- offices ---------- */
.offices { display: grid; gap: 0.85rem; }
.office {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 0 0.9rem;
  padding: 1.05rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.office__icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--blue) 13%, transparent);
  color: var(--blue);
}
.office__icon svg { width: 20px; height: 20px; }
.office__country {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 0.3rem;
}
.office__addr { font-style: normal; line-height: 1.55; color: var(--ink); }
.office__tel {
  display: inline-block; margin-top: 0.45rem;
  font-weight: 700; font-size: 0.94rem; text-decoration: none;
}
.office__tel:hover { text-decoration: underline; }

.info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.info-list dt, .info-list .k {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 0.2rem;
}
.info-list a { font-weight: 700; text-decoration: none; }
.info-list a:hover { text-decoration: underline; }

/* ---------- breadcrumbs ---------- */
.crumbs { font-size: 0.87rem; color: var(--muted); margin-bottom: 1rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 0.4rem; color: var(--line-2); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--link); text-decoration: underline; }

/* ---------- page head ---------- */
.pagehead { background: var(--surface-2); border-bottom: 1px solid var(--line); padding-block: clamp(2rem, 5vw, 3.5rem); }
.pagehead h1 { font-size: var(--step-4); margin-bottom: 0.6rem; }
.pagehead p { color: var(--ink-2); max-width: 62ch; font-size: var(--step-1); margin: 0; }

/* ---------- footer ---------- */
.footer { background: var(--surface); border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem; }
/* Deterministic tracks: pehle `minmax(0,1.4fr) repeat(auto-fit, ...)` tha
   jo 561-860px ke darmiyan container se bahar nikal jata tha. */
.footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 2rem; }
.footer__about { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .footer__grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
  .footer__about { grid-column: auto; }
}
.footer h2 { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 0.9rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer a { color: var(--ink-2); text-decoration: none; font-size: 0.94rem; }
.footer a:hover { color: var(--link); text-decoration: underline; }
.footer__social { display: inline-flex; align-items: center; gap: 0.45rem; }
.footer__social svg { width: 17px; height: 17px; flex: none; }
.footer__about p { color: var(--ink-2); font-size: 0.94rem; max-width: 40ch; }
.footer__offices { display: grid; gap: 0.8rem; margin-top: 1.25rem; }
.footer__offices li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 0 0.6rem; }
.footer__offices svg { width: 16px; height: 16px; margin-top: 0.28rem; color: var(--green); }
.footer__offices address {
  font-style: normal; font-size: 0.9rem; line-height: 1.5; color: var(--ink-2);
}
.footer__offices strong { color: var(--ink); font-weight: 700; }
.footer__bar {
  margin-top: 2.5rem; padding-top: 1.35rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; justify-content: space-between;
  font-size: 0.87rem; color: var(--muted);
}

/* ---------- theme toggle ---------- */
.theme-toggle {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--line-2);
  border-radius: var(--radius); cursor: pointer; color: var(--ink-2);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--line); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

/* ---------- 404 ---------- */
.error-page { text-align: center; padding-block: clamp(4rem, 12vw, 8rem); }
.error-page .code { font-size: clamp(4rem, 14vw, 8rem); font-weight: 800; line-height: 1; color: var(--green); letter-spacing: -0.04em; }

/* ---------- notice ---------- */
.notice {
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--blue);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  color: var(--ink-2);
  font-size: 0.94rem;
}
.notice p:last-child { margin-bottom: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1040px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .wheel { --size: min(430px, 84vw); }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1023px) {
  .nav-toggle { display: inline-flex; }
  .header__cta { display: none; }
  .nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    padding: 0.75rem var(--gutter) 1.25rem;
    display: none;
  }
  .nav[data-open="true"] { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0.15rem; }
  .nav__link { padding: 0.85rem 0.75rem; font-size: 1rem; }
  .nav__cta { display: block; margin-top: 0.6rem; }
  .cta-band { grid-template-columns: minmax(0, 1fr); }
}

/* Mobile par bhi module ke naam nazar aane chahiye - wheel ka poora maqsad
   wohi hai. "Project Management" jaise lambe naam chhoti screen par bahar
   nikal jate hain, is liye yahan font, padding aur chip radius teenon kam
   kar diye jate hain (radius inline style se aata hai, is liye scale()
   se poore rotor ko chhota karte hain aur chips ko wapas bara kar ke text
   parhne layak rakhte hain). */
@media (max-width: 700px) {
  .wheel { --size: min(360px, 96vw); }
  .wheel__chip { font-size: 0.58rem; }
  .wheel__chip-inner { padding: 0.24rem 0.44rem; gap: 0.28rem; }
  .wheel__chip i { width: 6px; height: 6px; }
  .wheel__hub { width: 42%; }
}

@media (max-width: 420px) {
  .wheel { --size: min(340px, 99vw); }
  .wheel__chip { font-size: 0.53rem; }
  .wheel__chip-inner { padding: 0.2rem 0.36rem; gap: 0.24rem; }
  /* Lambe naam yahan chhote naam se badal jate hain, warna ring se bahar
     nikal jate hain. Baaqi modules ka naam waisa hi rehta hai. */
  .wheel__chip-label { display: none; }
  .wheel__chip-short { display: inline; }
}

/* "TaqwaSolution" ek hi lafz hai, wrap nahi ho sakta - "Taqwa Solutions"
   ke muqable zyada chaurai leta hai aur 320px par hamburger ko bahar dhakel
   deta tha. Sab se tang screens par brand thora chhota kar dete hain. */
@media (max-width: 370px) {
  .header__inner { gap: 0.5rem; }
  .brand { gap: 0.5rem; }
  .brand__mark { width: 32px; height: 32px; }
  .brand__name { font-size: 0.95rem; }
  .brand__sub { font-size: 0.62rem; }
  .theme-toggle, .nav-toggle { width: 42px; height: 42px; }
}

@media (max-width: 560px) {
  .step { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0 0.9rem; }
  .step__n { width: 2.5rem; height: 2.5rem; font-size: 0.85rem; }
  .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer__about { grid-column: 1 / -1; }
  .tab { flex: 1 1 100%; width: 100%; }
}

/* ---------- motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .wheel__rotor, .wheel__chip-inner { animation: none; }
  .btn:hover, a.card:hover { transform: none; }
}

/* ---------- print ---------- */
@media print {
  .header, .footer, .cta-band, .nav-toggle, .theme-toggle, .skip { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------- chat widget ----------
   Sirf tab render hota hai jab content.py mein chat_api_url set ho. */
.cw__sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

#chat-widget { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 150; }

.cw__launcher {
  position: relative;
  width: 56px; height: 56px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: var(--shadow-lg);
  transition: transform 0.18s ease, background-color 0.18s ease;
}

/* Halka pulse ring - taake button nazar mein aaye aur visitor samjhe ke
   yahan koi assistant baitha hai. Sirf ishara hai, tang karne wali cheez
   nahi: dheema, halka, aur khulne par bilkul band.

   pointer-events:none zaroori hai - ring button ke ooper hai aur warna
   click khud le leti. transform se scale karte hain (layout ko chhue
   baghair); body par overflow-x:hidden hai to phaila hua ring mobile par
   side scroll nahi banata. */
.cw__launcher::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--accent);
  pointer-events: none;
  animation: cw-ping 2.8s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}
@keyframes cw-ping {
  0%        { transform: scale(1);    opacity: 0.5; }
  60%, 100% { transform: scale(1.45); opacity: 0; }
}

/* Panel khul gaya - kaam shuru ho chuka, ab tawajjo maangne ki zaroorat
   nahi. Hover par bhi rok dete hain: visitor ne dhoondh liya hai. */
.cw--open .cw__launcher::after,
.cw__launcher:hover::after { animation: none; opacity: 0; }
.cw__launcher:hover { transform: translateY(-2px); background: var(--green-600); }
.cw__launcher svg { width: 24px; height: 24px; }
.cw__icon-close { display: none; }
.cw--open .cw__icon-open { display: none; }
.cw--open .cw__icon-close { display: block; }

/* [hidden] ko display:none dena zaroori hai. Author ki `display: flex`
   browser ke apne [hidden] rule ko override kar deti hai, is liye panel
   hamesha khula reh jata tha - na page load par band hota tha, na cross
   dabane par. */
.cw__panel[hidden] { display: none; }

.cw__panel {
  position: absolute; right: 0; bottom: 68px;
  width: min(370px, calc(100vw - 2.5rem));
  height: min(520px, calc(100vh - 8rem));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.cw__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding: 0.85rem 1rem;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.cw__title { font-weight: 700; font-size: 0.95rem; }
/* 44px ungli ka sab se chhota qabil-e-bharosa nishana hai (WCAG 2.5.5, aur
   Apple/Google dono ki guideline). Icon chhota hi rehta hai - sirf dabane ki
   jagah barhti hai. Close button pehle 32px tha aur phone par baar baar miss
   hota tha. */
.cw__close {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: var(--radius);
  color: var(--ink-2); cursor: pointer;
}
.cw__close:hover { background: var(--surface); color: var(--ink); }
.cw__close svg { width: 17px; height: 17px; }

/* min-height:0 zaroori hai. Flex item ka default min-height:auto hota hai,
   yaani log apne content se chhota hone se inkar kar deta hai - screen chhoti
   ho (keyboard khule, ya landscape) to wo likhne ka khana panel se bahar
   dhakel deta hai, aur overflow:hidden usay kaat deti hai. */
.cw__log {
  flex: 1; min-height: 0; overflow-y: auto; padding: 1rem;
  display: flex; flex-direction: column; gap: 0.65rem;
}
.cw__msg {
  max-width: 85%; padding: 0.6rem 0.85rem; border-radius: var(--radius-lg);
  font-size: 0.92rem; line-height: 1.55; white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.cw__msg--bot { align-self: flex-start; background: var(--surface-2); color: var(--ink); }
.cw__msg--user { align-self: flex-end; background: var(--accent); color: var(--accent-ink); }
.cw__msg--error {
  background: color-mix(in srgb, #c0392b 12%, transparent);
  border: 1px solid color-mix(in srgb, #c0392b 30%, transparent);
}

.cw__typing { display: flex; gap: 4px; align-items: center; padding: 0.75rem 0.9rem; }
.cw__typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--muted);
  animation: cw-blink 1.2s infinite ease-in-out;
}
.cw__typing span:nth-child(2) { animation-delay: 0.18s; }
.cw__typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes cw-blink { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }

.cw__form {
  display: flex; gap: 0.5rem; align-items: flex-end;
  padding: 0.75rem; border-top: 1px solid var(--line); background: var(--surface);
}
.cw__input {
  flex: 1; min-width: 0; resize: none; max-height: 110px;
  /* 16px se chhota font ho to iOS Safari focus karte hi poora page zoom kar
     deta hai - layout bigar jata hai aur user ko khud zoom out karna parta
     hai. Is liye yahan 1rem se neeche kabhi na jayein. */
  padding: 0.6rem 0.75rem; font-size: 1rem; line-height: 1.5;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--field-line); border-radius: var(--radius);
}
.cw__input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.cw__send {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: var(--radius); cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
}
.cw__send:hover:not(:disabled) { background: var(--green-600); }
.cw__send:disabled { opacity: 0.5; cursor: default; }
.cw__send svg { width: 19px; height: 19px; }

@media (max-width: 480px) {
  #chat-widget { right: 0.85rem; bottom: 0.85rem; }
  .cw__panel { height: min(70vh, calc(100vh - 6rem)); }
}

/* Phone par 100vh wo oonchai hai jo URL bar chhupne ke BAAD milti hai, is
   liye URL bar nazar aate waqt panel neeche se screen se bahar chala jata
   hai. dvh asli, badalti hui oonchai naapta hai. vh wali lines ooper rehti
   hain taake purane browser par bhi kuch na kuch chale. */
@supports (height: 100dvh) {
  .cw__panel { height: min(520px, calc(100dvh - 8rem)); }
  @media (max-width: 480px) {
    .cw__panel { height: min(70dvh, calc(100dvh - 6rem)); }
  }
}

/* Bohat kam oonchai - phone tirchha pakra ho, ya keyboard khula ho. Yahan
   launcher ke ooper 8rem chhorne ka matlab hai panel ke liye sirf ~130px
   bachte hain, jabke akela header aur likhne ka khana mil kar us se zyada
   jagah lete hain - form panel se bahar nikal kar kat jata tha.
   Aise mein panel launcher se alag ho kar poori screen ki sheet ban jata
   hai. Launcher peechhe chhup jata hai; band karne ke liye header ka X aur
   Escape dono maujood hain. */
@media (max-height: 460px) {
  .cw__panel {
    position: fixed;
    top: 0.75rem; bottom: 0.75rem; right: 0.75rem; left: auto;
    height: auto;
    width: min(370px, calc(100vw - 1.5rem));
  }
}

@media (prefers-reduced-motion: reduce) {
  .cw__launcher:hover { transform: none; }
  .cw__typing span { animation: none; opacity: 0.6; }
  /* Jis visitor ne harkat band karne ko kaha ho us ke liye pulse bilkul
     nahi - wo setting aksar chakkar ya sar dard ki wajah se lagai jati hai. */
  .cw__launcher::after { animation: none; opacity: 0; }
}