/* ==================================================================================
   Technomitra — public marketing site
   ----------------------------------------------------------------------------------
   THIS SHEET IS A SCOPED ADAPTER OVER THE CRM DESIGN SYSTEM, NOT A SECOND ONE.

   The supplied original was a standalone stylesheet: it declared its own palette
   (--blue-50..950, --neutral-50..950), its own radii, its own font stack, a universal
   reset, and `html` / `body` / `a` / `img` / `button` / `ul` rules at document level.
   Seven of its `:root` variables collided by NAME with the CRM theme — --accent,
   --border, --font-sans and --radius-sm/md/lg/xl — and `app/globals.css` maps the
   Tailwind theme straight onto four of those (--color-border: var(--border),
   --color-accent: var(--accent), the radius scale). Two products, one namespace.

   What changed, and why it is safe:

   1. NOTHING IS DECLARED ON :root ANY MORE. Every custom property this sheet defines
      is namespaced `--site-*` and declared on `.technomitra-site`, the wrapper
      `app/(site)/layout.tsx` already renders. The seven colliding names are gone, so
      this sheet can no longer reach a CRM surface even if it were loaded app-wide.

   2. EVERY SELECTOR IS SCOPED. The reset, the element rules and all 180-odd classes
      are prefixed with `.technomitra-site`. The original's `html`/`body` rules are
      simply dropped: `globals.css` already sets `font-sans` on html and
      `bg-background text-foreground` on body, which is what those rules were for.

   3. COLOUR, TYPE, RADII AND FOCUS COME FROM THE CRM TOKENS. --primary, --card,
      --muted, --border, --ring, --radius, --font-sans, --font-heading, and the two
      validated categorical hues --chart-cat-1/2 that the sign-in panel already uses
      for its brand glows. The marketing palette is gone; nothing here is a fixed hex.
      That is also what makes light and dark work: there is no second set of values to
      keep in step, so all three CRM theme layers (:root, .dark, and the
      prefers-color-scheme block) flow through unchanged.

   4. CLASS NAMES ARE UNTOUCHED. All 181 classes the markup uses, plus the six
      `main.js` adds at runtime (.scrolled, .open, .visible, .is-invalid, .show, and
      the generated .form-error), keep their names and their jobs. No markup had to
      move for the restyle, and the supplied script still finds everything it binds.

   The look this produces is the CRM's: 26px corners on cards and buttons, 22px on
   inputs, a hairline ring plus a soft shadow instead of a 1px border, monospace
   (--font-heading) card titles exactly as `CardTitle` uses, `--primary` for every
   accent, and the sign-in screen's glow-and-grid treatment on the dark panels.
   ================================================================================== */

/* ---------------------------------------------------------------- scoped reset ---- */

.technomitra-site *,
.technomitra-site *::before,
.technomitra-site *::after {
  box-sizing: border-box;
}

.technomitra-site h1,
.technomitra-site h2,
.technomitra-site h3,
.technomitra-site h4,
.technomitra-site h5,
.technomitra-site h6,
.technomitra-site p,
.technomitra-site ul,
.technomitra-site ol,
.technomitra-site figure,
.technomitra-site blockquote {
  margin: 0;
  padding: 0;
}

.technomitra-site h1,
.technomitra-site h2,
.technomitra-site h3,
.technomitra-site h4,
.technomitra-site h5,
.technomitra-site h6 {
  /* --font-sans (Outfit), weight 600, tight tracking: the CRM's own page headings
     and the sign-in panel's h2 are `font-semibold tracking-tight`. Display sizes are
     set per element below. */
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.technomitra-site a {
  color: inherit;
  text-decoration: none;
}

.technomitra-site img,
.technomitra-site svg {
  max-width: 100%;
  display: block;
}

.technomitra-site button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

.technomitra-site input,
.technomitra-site textarea,
.technomitra-site select {
  font: inherit;
  color: inherit;
}

.technomitra-site ul,
.technomitra-site ol {
  list-style: none;
}

/* ------------------------------------------------------------------ token bridge ---- */

.technomitra-site {
  /* Surfaces */
  --site-bg: var(--background);
  --site-panel: var(--card);
  --site-panel-soft: var(--muted);
  --site-tinted: var(--sidebar);

  /* Text */
  --site-fg: var(--foreground);

  /* MUTED TEXT IS DELIBERATELY A SHADE STRONGER THAN THE CRM'S.
     `--muted-foreground` measures 4.11:1 against the light theme's white background, and body
     copy needs 4.5:1 to clear WCAG AA. That is a property of the token, not of this restyle —
     every `text-muted-foreground` on a white card in the dashboard sits at the same ratio — and
     changing it in globals.css would restyle the whole authenticated app, which is not this
     change's job.
     So it is corrected here, where it only reaches the eight public pages: blended 85% toward
     `--foreground`, which is by definition the maximum-contrast text colour for whichever theme
     is active. Same hue, a little more ink. The mix raises contrast in BOTH directions — toward
     darker on a light background and lighter on a dark one — so one expression covers all three
     theme layers. Measured after the change by the contrast audit in the final report. */
  --site-fg-muted: color-mix(in oklch, var(--muted-foreground) 85%, var(--foreground));

  /* Lines. The CRM draws card edges with a translucent RING over the shadow rather
     than an opaque 1px border, which is why these are two different values. */
  --site-line: var(--border);
  --site-ring: color-mix(in oklch, var(--foreground) 6%, transparent);

  /* Brand */
  --site-brand: var(--primary);
  --site-brand-fg: var(--primary-foreground);
  --site-focus: var(--ring);
  --site-danger: var(--destructive);
  --site-success: var(--chart-cat-2);

  /* The two measured categorical hues the sign-in panel uses for its glows. Reused
     here so the marketing hero and that screen read as the same brand. */
  --site-glow-1: var(--chart-cat-1);
  --site-glow-2: var(--chart-cat-2);

  /* Radii, derived from the CRM's single --radius (0.625rem) exactly as the Tailwind
     scale in globals.css does. --site-r-button and --site-r-card match the `rounded-4xl`
     on `Button` and `Card`; --site-r-input matches `rounded-3xl` on `Input`. */
  --site-r-sm: calc(var(--radius) * 0.6);
  --site-r-md: calc(var(--radius) * 0.8);
  --site-r-lg: var(--radius);
  --site-r-xl: calc(var(--radius) * 1.4);
  --site-r-input: calc(var(--radius) * 2.2);
  --site-r-card: calc(var(--radius) * 2.6);
  --site-r-pill: 9999px;

  /* Elevation — Tailwind's shadow-sm / -md / -lg, which is what the CRM cards use. */
  --site-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --site-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --site-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);
  --site-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.05);

  /* Motion */
  --site-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --site-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --site-transition: 0.25s var(--site-ease);
  --site-transition-slow: 0.6s var(--site-ease);

  /* Layout */
  --site-max: 1200px;
  --site-nav-h: 68px;
  --site-space-10: 5rem;
  --site-space-12: 6rem;
  --site-space-16: 7.5rem;

  background: var(--site-bg);
  color: var(--site-fg);
  font-family: var(--font-sans);
  line-height: 1.55;
}

/* ---------------------------------------------------------------------- layout ---- */

.technomitra-site .container {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.technomitra-site .section {
  padding: var(--site-space-16) 0;
  position: relative;
}

.technomitra-site .section-sm {
  padding: var(--site-space-12) 0;
}

/* `section-gray` is the subtle alternating band. `--muted` at 50% keeps it readable
   as a band in light mode without becoming a slab in dark mode. */
.technomitra-site .section-gray {
  background: color-mix(in oklch, var(--site-panel-soft) 55%, var(--site-bg));
}

.technomitra-site .section-tint {
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--site-brand) 7%, var(--site-bg)) 0%,
    var(--site-bg) 100%
  );
}

/* THE DARK PANELS. In the original these were a fixed near-black with blue glows.
   They are now the CRM's own tinted surface (--sidebar) carrying the sign-in screen's
   two brand glows and its hairline grid, so they follow the theme instead of fighting
   it: a soft tinted panel in light mode, the warm near-black in dark mode. */
.technomitra-site .section-dark {
  position: relative;
  overflow: hidden;
  background: var(--site-tinted);
  color: var(--site-fg);
}

.technomitra-site .section-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 60% at 18% 20%, var(--site-glow-1), transparent 70%),
    radial-gradient(ellipse 50% 55% at 85% 80%, var(--site-glow-2), transparent 70%);
  opacity: 0.16;
}

/* ------------------------------------------------------------------ typography ---- */

/* The CRM's eyebrow, lifted from the sign-in panel:
   `text-[11px] font-medium tracking-[0.22em] text-muted-foreground uppercase`. */
.technomitra-site .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--site-fg-muted);
  margin-bottom: 1rem;
}

.technomitra-site .eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: color-mix(in oklch, var(--site-brand) 60%, transparent);
}

.technomitra-site .section-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: 1rem;
}

.technomitra-site .section-subtitle {
  font-size: 1rem;
  color: var(--site-fg-muted);
  max-width: 620px;
  line-height: 1.65;
}

.technomitra-site .section-header {
  text-align: center;
  margin-bottom: var(--site-space-10);
}

.technomitra-site .section-header .section-subtitle {
  margin: 0 auto;
}

.technomitra-site .section-header .eyebrow {
  justify-content: center;
}

/* Brand gradient text — now the CRM primary into the sign-in panel's first glow hue,
   rather than two fixed blues. */
.technomitra-site .gradient-text,
.technomitra-site .gradient-text-blue {
  background: linear-gradient(
    135deg,
    var(--site-brand) 0%,
    color-mix(in oklch, var(--site-glow-1) 70%, var(--site-brand)) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* --------------------------------------------------------------------- buttons ---- */

/* Mirrors `components/ui/button.tsx`: rounded-4xl, h-9/h-10, text-sm font-medium,
   a transparent border that variants fill in, a 3px focus ring at 30% --ring, and
   `active:translate-y-px` — the CRM presses DOWN on click and does not lift on hover,
   so neither does this. */
.technomitra-site .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: 2.25rem;
  padding: 0 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--site-r-card);
  background-clip: padding-box;
  transition: background-color var(--site-transition), border-color var(--site-transition),
    color var(--site-transition), box-shadow var(--site-transition);
  outline: none;
  user-select: none;
}

.technomitra-site .btn:focus-visible {
  border-color: var(--site-focus);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--site-focus) 30%, transparent);
}

.technomitra-site .btn:active {
  transform: translateY(1px);
}

.technomitra-site .btn-primary {
  background: var(--site-brand);
  color: var(--site-brand-fg);
}

.technomitra-site .btn-primary:hover {
  background: color-mix(in oklch, var(--site-brand) 80%, transparent);
}

.technomitra-site .btn-secondary,
.technomitra-site .btn-light {
  background: var(--site-panel);
  color: var(--site-fg);
  border-color: var(--site-line);
}

.technomitra-site .btn-secondary:hover,
.technomitra-site .btn-light:hover {
  background: var(--site-panel-soft);
}

.technomitra-site .btn-ghost {
  background: transparent;
  color: var(--site-fg);
  border-color: var(--site-line);
}

.technomitra-site .btn-ghost:hover {
  background: var(--site-panel-soft);
}

/* The Login CTA. Secondary by variant (`btn-ghost`), but it is the way back into the product,
   so hover tints toward --primary rather than to a neutral surface. Contrast is carried by
   --site-fg on --site-bg in both themes; the tint only ever sits behind it at 8%. */
.technomitra-site .site-login-btn:hover {
  background: color-mix(in oklch, var(--site-brand) 8%, transparent);
  border-color: color-mix(in oklch, var(--site-brand) 35%, var(--site-line));
  color: var(--site-brand);
}

.technomitra-site .btn-dark {
  background: var(--site-fg);
  color: var(--site-bg);
}

.technomitra-site .btn-dark:hover {
  background: color-mix(in oklch, var(--site-fg) 85%, transparent);
}

.technomitra-site .btn-lg {
  height: 2.75rem;
  padding: 0 1.25rem;
  font-size: 0.9375rem;
}

.technomitra-site .btn-block {
  width: 100%;
}

/* ------------------------------------------------------------------- wordmark ---- */

/* THE SUPPLIED SITE HAD ONE LOGO BECAUSE IT HAD ONE BACKGROUND.
   Both the navbar and the footer sat on a fixed near-black, so `logo-white.svg` always worked.
   Those surfaces are theme tokens now, and in light mode a white wordmark on a near-white
   navbar is an invisible logo. `logo.svg` — the dark-text variant supplied alongside it — is
   what belongs there, so both are in the markup and one is hidden here.

   Keyed on the theme CLASS rather than `prefers-color-scheme`, because `ThemeScript` always
   writes an explicit `.light` or `.dark` onto <html> before paint. That makes the swap correct
   on the first frame, and correct for someone whose OS is light but who chose the dark theme —
   which a media query would get backwards. */
.technomitra-site .site-logo-dark {
  display: none;
}

:is(html.dark) .technomitra-site .site-logo-light {
  display: none;
}

:is(html.dark) .technomitra-site .site-logo-dark {
  display: block;
}

/* ---------------------------------------------------------------------- navbar ---- */

.technomitra-site .navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--site-nav-h);
  z-index: 50;
  background: transparent;
  transition: background-color var(--site-transition), box-shadow var(--site-transition);
}

/* The CRM's own sticky header is a translucent blurred surface with a hairline under
   it; this is the same treatment. */
.technomitra-site .navbar.scrolled {
  background: color-mix(in oklch, var(--site-bg) 80%, transparent);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  box-shadow: inset 0 -1px 0 var(--site-line);
}

.technomitra-site .navbar-inner {
  max-width: var(--site-max);
  margin: 0 auto;
  height: 100%;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.technomitra-site .nav-logo {
  height: 34px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: var(--site-r-md);
}

.technomitra-site .nav-logo:focus-visible {
  outline: 2px solid var(--site-focus);
  outline-offset: 4px;
}

.technomitra-site .nav-logo img {
  height: 34px;
  width: auto;
}

.technomitra-site .nav-links {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

/* Mirrors the sidebar's nav items: a muted label that takes a soft surface on hover
   and the primary tint when it is the current page. */
.technomitra-site .nav-link {
  position: relative;
  padding: 0.4375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--site-fg-muted);
  border-radius: var(--site-r-pill);
  transition: color var(--site-transition), background-color var(--site-transition);
}

.technomitra-site .nav-link:hover {
  color: var(--site-fg);
  background: var(--site-panel-soft);
}

.technomitra-site .nav-link:focus-visible {
  outline: none;
  color: var(--site-fg);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--site-focus) 30%, transparent);
}

.technomitra-site .nav-link.active {
  color: var(--site-brand);
  background: color-mix(in oklch, var(--site-brand) 10%, transparent);
}

.technomitra-site .nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.technomitra-site .nav-toggle {
  display: none;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--site-r-pill);
  color: var(--site-fg);
  transition: background-color var(--site-transition);
}

.technomitra-site .nav-toggle:hover {
  background: var(--site-panel-soft);
}

.technomitra-site .nav-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--site-focus) 30%, transparent);
}

.technomitra-site .nav-toggle span {
  display: block;
  position: relative;
  width: 18px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: background-color var(--site-transition);
}

.technomitra-site .nav-toggle span::before,
.technomitra-site .nav-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--site-transition), top var(--site-transition);
}

.technomitra-site .nav-toggle span::before {
  top: -6px;
}

.technomitra-site .nav-toggle span::after {
  top: 6px;
}

.technomitra-site .nav-toggle.open span {
  background: transparent;
}

.technomitra-site .nav-toggle.open span::before {
  top: 0;
  transform: rotate(45deg);
}

.technomitra-site .nav-toggle.open span::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ----------------------------------------------------------------- mobile menu ---- */

.technomitra-site .mobile-menu {
  position: fixed;
  top: var(--site-nav-h);
  left: 0;
  right: 0;
  z-index: 49;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.75rem 1.25rem 1.25rem;
  background: color-mix(in oklch, var(--site-bg) 92%, transparent);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  box-shadow: var(--site-shadow-xl), inset 0 1px 0 var(--site-line);
  transform: translateY(-110%);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--site-transition), opacity var(--site-transition),
    visibility var(--site-transition);
}

.technomitra-site .mobile-menu.open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.technomitra-site .mobile-menu .nav-link {
  display: block;
  padding: 0.75rem 0.75rem;
  font-size: 1rem;
  border-radius: var(--site-r-input);
}

.technomitra-site .mobile-menu .btn {
  margin-top: 0.625rem;
  width: 100%;
}

/* A divider above the stacked actions, so the menu reads as links-then-actions. */
.technomitra-site .mobile-menu .btn:first-of-type {
  margin-top: 1rem;
  position: relative;
}

/* ------------------------------------------------------------------------ hero ---- */

.technomitra-site .hero {
  position: relative;
  min-height: min(100vh, 860px);
  display: flex;
  align-items: center;
  padding-top: calc(var(--site-nav-h) + 2rem);
  padding-bottom: 4rem;
  overflow: hidden;
  background: var(--site-tinted);
  color: var(--site-fg);
}

.technomitra-site .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* The brand wash. Same two measured hues, same blur scale and opacity band as the
   sign-in panel's glows. */
.technomitra-site .hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 72% 18%, var(--site-glow-1), transparent 68%),
    radial-gradient(ellipse 55% 50% at 12% 85%, var(--site-glow-2), transparent 68%);
  opacity: 0.2;
}

/* Hairline grid, masked to a soft ellipse — the sign-in panel's comment applies here
   too: faded at the edges so it never reads as a table. */
.technomitra-site .hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--site-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--site-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 45%, #000 28%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 28%, transparent 72%);
  opacity: 0.6;
}

.technomitra-site .hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(130px);
  opacity: 0.22;
  animation: siteFloatOrb 10s var(--site-ease-in-out) infinite;
}

.technomitra-site .hero-orb-1 {
  width: 520px;
  height: 520px;
  background: var(--site-glow-1);
  top: 6%;
  right: -8%;
}

.technomitra-site .hero-orb-2 {
  width: 400px;
  height: 400px;
  background: var(--site-glow-2);
  bottom: 2%;
  left: -8%;
  animation-delay: -5s;
}

@keyframes siteFloatOrb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(18px, -26px) scale(1.04); }
}

.technomitra-site .hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  width: 100%;
}

.technomitra-site .hero-text {
  max-width: 600px;
}

/* The CRM's chip: `rounded-full bg-muted px-2.5 py-1 text-[11px] text-muted-foreground
   ring-1 ring-border`, tinted toward primary because this one is a brand badge. */
.technomitra-site .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3125rem 0.75rem;
  border-radius: var(--site-r-pill);
  background: color-mix(in oklch, var(--site-brand) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--site-brand) 22%, transparent);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: color-mix(in oklch, var(--site-brand) 85%, var(--site-fg));
  margin-bottom: 1.5rem;
}

.technomitra-site .hero-badge .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--site-brand);
  animation: sitePulse 2s infinite;
}

@keyframes sitePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.technomitra-site .hero-title {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin-bottom: 1.25rem;
}

.technomitra-site .hero-desc {
  font-size: 1.0625rem;
  color: var(--site-fg-muted);
  line-height: 1.65;
  margin-bottom: 2rem;
  max-width: 34rem;
}

.technomitra-site .hero-cta {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.technomitra-site .hero-stats {
  display: flex;
  gap: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--site-line);
}

.technomitra-site .hero-stat-value {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--site-fg);
  letter-spacing: -0.02em;
}

.technomitra-site .hero-stat-label {
  font-size: 0.75rem;
  color: var(--site-fg-muted);
  margin-top: 0.25rem;
}

/* ------------------------------------------------------------------ hero visual ---- */

.technomitra-site .hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The CRM card, translucent over the glow: `rounded-3xl bg-card/70 p-5 shadow-sm
   ring-1 ring-border backdrop-blur-sm` is exactly the sign-in panel's inner card. */
.technomitra-site .hero-card {
  width: 100%;
  max-width: 460px;
  padding: 1.375rem;
  border-radius: var(--site-r-card);
  background: color-mix(in oklch, var(--site-panel) 72%, transparent);
  box-shadow: var(--site-shadow-lg), 0 0 0 1px var(--site-line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: siteFloatCard 7s var(--site-ease-in-out) infinite;
}

@keyframes siteFloatCard {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.technomitra-site .hero-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.125rem;
}

.technomitra-site .hero-card-title {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--site-fg);
}

.technomitra-site .hero-card-badge {
  padding: 0.125rem 0.5rem;
  border-radius: var(--site-r-pill);
  background: color-mix(in oklch, var(--site-success) 16%, transparent);
  color: color-mix(in oklch, var(--site-success) 80%, var(--site-fg));
  font-size: 0.6875rem;
  font-weight: 500;
}

.technomitra-site .hero-card-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem;
  border-radius: var(--site-r-input);
  margin-bottom: 0.375rem;
  background: color-mix(in oklch, var(--site-panel-soft) 55%, transparent);
  transition: background-color var(--site-transition);
}

.technomitra-site .hero-card-row:hover {
  background: var(--site-panel-soft);
}

/* The sign-in panel's icon tile: `size-8 rounded-xl bg-card ring-1 ring-border`. */
.technomitra-site .hero-card-icon {
  width: 2rem;
  height: 2rem;
  border-radius: var(--site-r-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.9375rem;
  background: var(--site-panel);
  box-shadow: 0 0 0 1px var(--site-line);
  color: var(--site-fg);
}

.technomitra-site .hero-card-icon.blue { color: var(--site-brand); }
.technomitra-site .hero-card-icon.green { color: var(--site-glow-2); }
.technomitra-site .hero-card-icon.amber { color: var(--site-fg-muted); }
.technomitra-site .hero-card-icon.purple { color: var(--site-glow-1); }

.technomitra-site .hero-card-row-text {
  flex: 1;
  min-width: 0;
}

.technomitra-site .hero-card-row-title {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--site-fg);
}

.technomitra-site .hero-card-row-sub {
  font-size: 0.6875rem;
  color: var(--site-fg-muted);
}

.technomitra-site .hero-card-bar {
  height: 5px;
  border-radius: var(--site-r-pill);
  background: var(--site-panel-soft);
  overflow: hidden;
}

.technomitra-site .hero-card-bar-fill {
  height: 100%;
  border-radius: var(--site-r-pill);
  background: linear-gradient(90deg, var(--site-brand), var(--site-glow-1));
  animation: siteBarFill 1.8s var(--site-ease) forwards;
}

@keyframes siteBarFill {
  from { width: 0; }
}

.technomitra-site .hero-float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  border-radius: var(--site-r-input);
  background: color-mix(in oklch, var(--site-panel) 80%, transparent);
  box-shadow: var(--site-shadow-lg), 0 0 0 1px var(--site-line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: siteFloatCard 6s var(--site-ease-in-out) infinite;
}

/* Positioned to STRADDLE the card's corners, not to sit on its content. At the original
   offsets the first card landed squarely on the "CRM Dashboard" title (it rendered as
   "…ashboard") and the second clipped the end of the pipeline bar. Both now overlap only the
   rounded corner, which is the effect the design wanted. Below 1024px `.hero-visual` is hidden,
   so these never apply on tablet or phone. */
.technomitra-site .hero-float-card-1 {
  top: -6%;
  left: -16%;
  animation-delay: -1.5s;
}

.technomitra-site .hero-float-card-2 {
  bottom: -5%;
  right: -13%;
  animation-delay: -4s;
}

.technomitra-site .hero-float-card .float-icon {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--site-r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
}

.technomitra-site .hero-float-card .float-text {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--site-fg);
}

.technomitra-site .hero-float-card .float-sub {
  font-size: 0.6875rem;
  color: var(--site-fg-muted);
}

/* ------------------------------------------------------------------- trust bar ---- */

.technomitra-site .trust-bar {
  padding: 2.25rem 0;
  background: var(--site-bg);
  border-top: 1px solid var(--site-line);
}

.technomitra-site .trust-bar-label {
  text-align: center;
  font-size: 0.6875rem;
  color: var(--site-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin-bottom: 1.5rem;
}

.technomitra-site .trust-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2.5rem;
}

.technomitra-site .trust-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--site-fg-muted);
  opacity: 0.75;
  transition: opacity var(--site-transition), color var(--site-transition);
}

.technomitra-site .trust-logo:hover {
  opacity: 1;
  color: var(--site-fg);
}

.technomitra-site .trust-logo .trust-icon {
  font-size: 1.25rem;
}

/* ----------------------------------------------------------------------- cards ---- */

/* `components/ui/card.tsx`: `rounded-4xl bg-card shadow-md ring-1 ring-foreground/5`,
   24px padding (--card-spacing: spacing(6)), text-sm. The ring replaces the original
   1px border — that is the single biggest reason the old cards looked foreign. */
.technomitra-site .card {
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
  border-radius: var(--site-r-card);
  background: var(--site-panel);
  box-shadow: var(--site-shadow), 0 0 0 1px var(--site-ring);
  transition: box-shadow var(--site-transition), transform var(--site-transition);
}

/* A restrained lift. The CRM's own cards are not interactive so they define no hover;
   on a marketing page the cards are the content, and a little response is the
   difference between a product page and a spec sheet. */
.technomitra-site .card:hover {
  transform: translateY(-3px);
  box-shadow: var(--site-shadow-lg), 0 0 0 1px var(--site-line);
}

/* The sign-in panel's icon tile, one size up. */
.technomitra-site .card-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--site-r-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 1.125rem;
  background: color-mix(in oklch, var(--site-brand) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--site-brand) 18%, transparent);
  color: var(--site-brand);
  transition: background-color var(--site-transition), color var(--site-transition);
}

.technomitra-site .card:hover .card-icon {
  background: var(--site-brand);
  color: var(--site-brand-fg);
}

/* `CardTitle` is `font-heading text-base font-medium` — the monospace heading face.
   Every card title in the dashboard reads this way, so these do too. */
.technomitra-site .card-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin-bottom: 0.5rem;
  color: var(--site-fg);
}

/* `CardDescription`: `text-sm text-muted-foreground`. */
.technomitra-site .card-text {
  font-size: 0.875rem;
  color: var(--site-fg-muted);
  line-height: 1.65;
}

.technomitra-site .card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--site-brand);
  border-radius: var(--site-r-sm);
  transition: gap var(--site-transition);
}

.technomitra-site .card-link:hover {
  gap: 0.625rem;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.technomitra-site .card-link:focus-visible {
  outline: 2px solid var(--site-focus);
  outline-offset: 3px;
}

/* ----------------------------------------------------------------------- grids ---- */

.technomitra-site .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.technomitra-site .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.technomitra-site .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }

/* ----------------------------------------------------------------------- stats ---- */

.technomitra-site .stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  position: relative;
  z-index: 1;
}

.technomitra-site .stat-item {
  text-align: center;
  padding: 1.5rem 1rem;
}

/* Monospace figures, like every numeric readout in the dashboard. */
.technomitra-site .stat-value {
  font-family: var(--font-heading);
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--site-brand);
}

.technomitra-site .stat-label {
  font-size: 0.875rem;
  color: var(--site-fg-muted);
  margin-top: 0.625rem;
}

.technomitra-site .stat-divider {
  width: 1px;
  background: var(--site-line);
}

/* -------------------------------------------------------------- service cards ---- */

.technomitra-site .service-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--site-r-card);
  background: var(--site-panel);
  box-shadow: var(--site-shadow), 0 0 0 1px var(--site-ring);
  transition: box-shadow var(--site-transition), transform var(--site-transition);
}

.technomitra-site .service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--site-shadow-xl), 0 0 0 1px var(--site-line);
}

.technomitra-site .service-card-img {
  height: 190px;
  overflow: hidden;
  position: relative;
}

.technomitra-site .service-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--site-transition-slow);
}

.technomitra-site .service-card:hover .service-card-img img {
  transform: scale(1.06);
}

.technomitra-site .service-card-body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.technomitra-site .service-card-tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--site-fg-muted);
  margin-bottom: 0.625rem;
}

.technomitra-site .service-card-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--site-fg);
}

.technomitra-site .service-card-text {
  font-size: 0.875rem;
  color: var(--site-fg-muted);
  line-height: 1.65;
  margin-bottom: 1rem;
  flex: 1;
}

/* -------------------------------------------------------------------- workflow ---- */

.technomitra-site .workflow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  position: relative;
}

.technomitra-site .workflow::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: var(--site-line);
  z-index: 0;
}

.technomitra-site .workflow-step {
  position: relative;
  z-index: 1;
  text-align: center;
}

.technomitra-site .workflow-number {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--site-r-card);
  background: var(--site-panel);
  box-shadow: var(--site-shadow-sm), 0 0 0 1px var(--site-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--site-brand);
  margin: 0 auto 1.125rem;
  transition: background-color var(--site-transition), color var(--site-transition),
    box-shadow var(--site-transition);
}

.technomitra-site .workflow-step:hover .workflow-number {
  background: var(--site-brand);
  color: var(--site-brand-fg);
  box-shadow: var(--site-shadow), 0 0 0 1px transparent;
}

.technomitra-site .workflow-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.technomitra-site .workflow-text {
  font-size: 0.875rem;
  color: var(--site-fg-muted);
  line-height: 1.65;
}

/* ---------------------------------------------------------------- testimonials ---- */

.technomitra-site .testimonial-card {
  position: relative;
  padding: 1.75rem;
  border-radius: var(--site-r-card);
  background: var(--site-panel);
  box-shadow: var(--site-shadow), 0 0 0 1px var(--site-ring);
  transition: box-shadow var(--site-transition), transform var(--site-transition);
}

.technomitra-site .testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--site-shadow-lg), 0 0 0 1px var(--site-line);
}

.technomitra-site .testimonial-quote {
  font-size: 2.25rem;
  line-height: 1;
  color: color-mix(in oklch, var(--site-brand) 35%, transparent);
  font-family: Georgia, serif;
  margin-bottom: 0.5rem;
}

.technomitra-site .testimonial-text {
  font-size: 0.9375rem;
  color: var(--site-fg);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.technomitra-site .testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.technomitra-site .testimonial-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--site-line);
}

.technomitra-site .testimonial-name {
  font-size: 0.875rem;
  font-weight: 500;
}

.technomitra-site .testimonial-role {
  font-size: 0.75rem;
  color: var(--site-fg-muted);
}

.technomitra-site .testimonial-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 0.75rem;
  color: var(--site-brand);
  font-size: 0.8125rem;
}

/* ------------------------------------------------------------------------- CTA ---- */

.technomitra-site .cta-section {
  position: relative;
  padding: var(--site-space-16) 0;
  overflow: hidden;
  background: var(--site-tinted);
  color: var(--site-fg);
}

.technomitra-site .cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 60% at 28% 45%, var(--site-glow-1), transparent 68%),
    radial-gradient(ellipse 48% 50% at 80% 30%, var(--site-glow-2), transparent 68%);
  opacity: 0.18;
}

.technomitra-site .cta-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}

.technomitra-site .cta-title {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
}

.technomitra-site .cta-desc {
  font-size: 1.0625rem;
  color: var(--site-fg-muted);
  margin-bottom: 2rem;
  line-height: 1.65;
}

.technomitra-site .cta-buttons {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------------- footer ---- */

.technomitra-site .footer {
  background: color-mix(in oklch, var(--site-panel-soft) 45%, var(--site-bg));
  color: var(--site-fg-muted);
  padding: var(--site-space-12) 0 2rem;
  border-top: 1px solid var(--site-line);
}

.technomitra-site .footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

.technomitra-site .footer-brand .nav-logo {
  margin-bottom: 1rem;
}

.technomitra-site .footer-about {
  font-size: 0.875rem;
  line-height: 1.7;
  max-width: 320px;
  margin-bottom: 1.5rem;
}

.technomitra-site .footer-social {
  display: flex;
  gap: 0.5rem;
}

.technomitra-site .footer-social a {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--site-r-input);
  background: var(--site-panel);
  box-shadow: 0 0 0 1px var(--site-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9375rem;
  color: var(--site-fg-muted);
  transition: background-color var(--site-transition), color var(--site-transition);
}

.technomitra-site .footer-social a:hover {
  background: var(--site-brand);
  color: var(--site-brand-fg);
  box-shadow: 0 0 0 1px transparent;
}

.technomitra-site .footer-social a:focus-visible {
  outline: 2px solid var(--site-focus);
  outline-offset: 2px;
}

.technomitra-site .footer-col-title {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--site-fg);
  margin-bottom: 1.125rem;
}

.technomitra-site .footer-links li {
  margin-bottom: 0.625rem;
}

.technomitra-site .footer-links a {
  font-size: 0.875rem;
  color: var(--site-fg-muted);
  border-radius: var(--site-r-sm);
  transition: color var(--site-transition);
}

.technomitra-site .footer-links a:hover {
  color: var(--site-fg);
}

.technomitra-site .footer-links a:focus-visible,
.technomitra-site .footer-legal a:focus-visible {
  outline: 2px solid var(--site-focus);
  outline-offset: 3px;
}

.technomitra-site .footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
}

.technomitra-site .footer-contact-item .footer-contact-icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--site-brand);
}

.technomitra-site .footer-bottom {
  padding-top: 1.75rem;
  border-top: 1px solid var(--site-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.technomitra-site .footer-copy {
  font-size: 0.8125rem;
  color: var(--site-fg-muted);
}

.technomitra-site .footer-legal {
  display: flex;
  gap: 1.5rem;
}

.technomitra-site .footer-legal a {
  font-size: 0.8125rem;
  color: var(--site-fg-muted);
  transition: color var(--site-transition);
}

.technomitra-site .footer-legal a:hover {
  color: var(--site-fg);
}

/* ------------------------------------------------------------------- page hero ---- */

.technomitra-site .page-hero {
  position: relative;
  padding: calc(var(--site-nav-h) + var(--site-space-10)) 0 var(--site-space-12);
  overflow: hidden;
  background: var(--site-tinted);
  color: var(--site-fg);
}

.technomitra-site .page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 55% at 50% 0%, var(--site-glow-1), transparent 70%),
    radial-gradient(ellipse 50% 45% at 85% 100%, var(--site-glow-2), transparent 70%);
  opacity: 0.18;
}

.technomitra-site .page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--site-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--site-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 25%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 25%, transparent 70%);
  opacity: 0.55;
}

.technomitra-site .page-hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.technomitra-site .page-hero-title {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin-bottom: 1.125rem;
}

.technomitra-site .page-hero-desc {
  font-size: 1.0625rem;
  color: var(--site-fg-muted);
  line-height: 1.65;
  max-width: 640px;
  margin: 0 auto 2rem;
}

/* Breadcrumb — the CRM's own is muted text with the current page emphasised. */
.technomitra-site .page-hero-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--site-fg-muted);
  margin-bottom: 1.25rem;
}

.technomitra-site .page-hero-breadcrumb a {
  color: var(--site-fg-muted);
  border-radius: var(--site-r-sm);
  transition: color var(--site-transition);
}

.technomitra-site .page-hero-breadcrumb a:hover {
  color: var(--site-brand);
}

.technomitra-site .page-hero-breadcrumb a:focus-visible {
  outline: 2px solid var(--site-focus);
  outline-offset: 3px;
}

.technomitra-site .page-hero-breadcrumb > span:last-child {
  color: var(--site-fg);
}

/* ----------------------------------------------------------------- feature rows ---- */

.technomitra-site .feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
  margin-bottom: var(--site-space-16);
}

.technomitra-site .feature-row:last-child {
  margin-bottom: 0;
}

.technomitra-site .feature-row-reverse .feature-row-content {
  order: 2;
}

.technomitra-site .feature-row-image {
  border-radius: var(--site-r-card);
  overflow: hidden;
  box-shadow: var(--site-shadow-xl), 0 0 0 1px var(--site-ring);
  position: relative;
}

.technomitra-site .feature-row-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--site-transition-slow);
}

.technomitra-site .feature-row-image:hover img {
  transform: scale(1.04);
}

.technomitra-site .feature-row-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.technomitra-site .feature-row-desc {
  font-size: 1rem;
  color: var(--site-fg-muted);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.technomitra-site .feature-list {
  display: grid;
  gap: 0.875rem;
  margin-bottom: 2rem;
}

.technomitra-site .feature-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.technomitra-site .feature-list-check {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: color-mix(in oklch, var(--site-brand) 12%, transparent);
  color: var(--site-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.625rem;
  font-weight: 600;
  margin-top: 3px;
}

.technomitra-site .feature-list-text {
  font-size: 0.875rem;
  color: var(--site-fg-muted);
  line-height: 1.65;
}

.technomitra-site .feature-list-text strong {
  font-weight: 500;
  color: var(--site-fg);
}

/* --------------------------------------------------------------- CRM mock-up ---- */

/* A picture of the product. It now uses the real product's surfaces, which is the
   whole point of this exercise — the mock-up and the thing it depicts match. */
.technomitra-site .crm-mockup {
  border-radius: var(--site-r-card);
  overflow: hidden;
  background: var(--site-panel);
  box-shadow: var(--site-shadow-xl), 0 0 0 1px var(--site-ring);
}

.technomitra-site .crm-mockup-header {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.75rem 1.125rem;
  background: color-mix(in oklch, var(--site-panel-soft) 55%, var(--site-panel));
  border-bottom: 1px solid var(--site-line);
}

.technomitra-site .crm-mockup-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--site-line);
}

.technomitra-site .crm-mockup-dot.r { background: color-mix(in oklch, var(--site-danger) 70%, transparent); }
.technomitra-site .crm-mockup-dot.y { background: color-mix(in oklch, var(--site-fg-muted) 55%, transparent); }
.technomitra-site .crm-mockup-dot.g { background: color-mix(in oklch, var(--site-glow-2) 70%, transparent); }

.technomitra-site .crm-mockup-body {
  display: grid;
  grid-template-columns: 196px 1fr;
  min-height: 360px;
}

.technomitra-site .crm-mockup-sidebar {
  background: var(--site-tinted);
  border-right: 1px solid var(--site-line);
  padding: 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.technomitra-site .crm-mockup-nav-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--site-r-pill);
  font-size: 0.8125rem;
  color: var(--site-fg-muted);
  transition: background-color var(--site-transition), color var(--site-transition);
}

.technomitra-site .crm-mockup-nav-item:hover,
.technomitra-site .crm-mockup-nav-item.active {
  background: color-mix(in oklch, var(--site-brand) 12%, transparent);
  color: var(--site-brand);
}

.technomitra-site .crm-mockup-nav-item .crm-mockup-nav-icon {
  width: 1.125rem;
  text-align: center;
}

.technomitra-site .crm-mockup-main {
  padding: 1.25rem;
  background: var(--site-bg);
}

.technomitra-site .crm-mockup-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.technomitra-site .crm-mockup-stat {
  padding: 0.875rem;
  border-radius: var(--site-r-input);
  background: var(--site-panel);
  box-shadow: 0 0 0 1px var(--site-line);
}

.technomitra-site .crm-mockup-stat-label {
  font-size: 0.6875rem;
  color: var(--site-fg-muted);
  margin-bottom: 0.3125rem;
}

.technomitra-site .crm-mockup-stat-value {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--site-fg);
}

.technomitra-site .crm-mockup-stat-trend {
  font-size: 0.6875rem;
  font-weight: 500;
  margin-top: 0.25rem;
  color: var(--site-fg-muted);
}

.technomitra-site .crm-mockup-stat-trend.up { color: color-mix(in oklch, var(--site-glow-2) 85%, var(--site-fg)); }
.technomitra-site .crm-mockup-stat-trend.down { color: var(--site-danger); }

.technomitra-site .crm-mockup-chart {
  padding: 1.125rem;
  border-radius: var(--site-r-input);
  background: var(--site-panel);
  box-shadow: 0 0 0 1px var(--site-line);
}

.technomitra-site .crm-mockup-chart-title {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

.technomitra-site .crm-mockup-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  height: 120px;
}

/* --chart-cat-1 is the dashboard's own first categorical slot. */
.technomitra-site .crm-mockup-bar {
  flex: 1;
  border-radius: var(--site-r-sm) var(--site-r-sm) 2px 2px;
  background: linear-gradient(180deg, var(--site-glow-1), color-mix(in oklch, var(--site-glow-1) 55%, transparent));
  animation: siteBarGrow 1.4s var(--site-ease) forwards;
  transform-origin: bottom;
}

@keyframes siteBarGrow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

/* --------------------------------------------------------------------- process ---- */

.technomitra-site .process-timeline {
  display: flex;
  flex-direction: column;
  max-width: 800px;
  margin: 0 auto;
}

.technomitra-site .process-item {
  display: flex;
  gap: 1.75rem;
  padding-bottom: 2.75rem;
  position: relative;
}

.technomitra-site .process-item:last-child {
  padding-bottom: 0;
}

.technomitra-site .process-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 23px;
  top: 52px;
  bottom: 0;
  width: 1px;
  background: var(--site-line);
}

.technomitra-site .process-number {
  width: 3rem;
  height: 3rem;
  border-radius: var(--site-r-card);
  background: var(--site-panel);
  box-shadow: var(--site-shadow-sm), 0 0 0 1px var(--site-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  color: var(--site-brand);
  flex-shrink: 0;
  z-index: 1;
}

.technomitra-site .process-content {
  padding-top: 0.5rem;
}

.technomitra-site .process-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.technomitra-site .process-text {
  font-size: 0.875rem;
  color: var(--site-fg-muted);
  line-height: 1.7;
}

/* ---------------------------------------------------------------------- values ---- */

.technomitra-site .value-card {
  text-align: center;
  padding: 2rem 1.5rem;
  border-radius: var(--site-r-card);
  background: var(--site-panel);
  box-shadow: var(--site-shadow), 0 0 0 1px var(--site-ring);
  transition: box-shadow var(--site-transition), transform var(--site-transition);
}

.technomitra-site .value-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--site-shadow-lg), 0 0 0 1px var(--site-line);
}

.technomitra-site .value-icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--site-r-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  margin: 0 auto 1.125rem;
  background: color-mix(in oklch, var(--site-brand) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--site-brand) 18%, transparent);
  color: var(--site-brand);
  transition: background-color var(--site-transition), color var(--site-transition);
}

.technomitra-site .value-card:hover .value-icon {
  background: var(--site-brand);
  color: var(--site-brand-fg);
}

.technomitra-site .value-title {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.technomitra-site .value-text {
  font-size: 0.875rem;
  color: var(--site-fg-muted);
  line-height: 1.65;
}

/* ------------------------------------------------------------------ contact ---- */

.technomitra-site .contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 2rem;
  align-items: start;
}

.technomitra-site .contact-info-card {
  position: relative;
  overflow: hidden;
  padding: 2rem;
  border-radius: var(--site-r-card);
  background: var(--site-tinted);
  box-shadow: var(--site-shadow), 0 0 0 1px var(--site-ring);
  color: var(--site-fg);
}

.technomitra-site .contact-info-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 85% 55% at 0% 0%, var(--site-glow-1), transparent 70%);
  opacity: 0.16;
}

.technomitra-site .contact-info-content {
  position: relative;
  z-index: 1;
}

.technomitra-site .contact-info-title {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: 0.625rem;
}

.technomitra-site .contact-info-desc {
  font-size: 0.875rem;
  color: var(--site-fg-muted);
  line-height: 1.7;
  margin-bottom: 1.75rem;
}

.technomitra-site .contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  margin-bottom: 1.25rem;
}

.technomitra-site .contact-info-icon {
  width: 2.375rem;
  height: 2.375rem;
  border-radius: var(--site-r-input);
  background: var(--site-panel);
  box-shadow: 0 0 0 1px var(--site-line);
  color: var(--site-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9375rem;
  flex-shrink: 0;
}

.technomitra-site .contact-info-label {
  font-size: 0.6875rem;
  color: var(--site-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 0.25rem;
}

.technomitra-site .contact-info-value {
  font-size: 0.875rem;
  color: var(--site-fg);
  font-weight: 500;
}

.technomitra-site .contact-form-card {
  padding: 2rem;
  border-radius: var(--site-r-card);
  background: var(--site-panel);
  box-shadow: var(--site-shadow), 0 0 0 1px var(--site-ring);
}

/* --------------------------------------------------------------------- forms ---- */

.technomitra-site .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.technomitra-site .form-group {
  margin-bottom: 1.125rem;
}

/* `components/ui/field.tsx` FieldLabel: `mb-3 font-medium text-sm`. */
.technomitra-site .form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--site-fg);
  margin-bottom: 0.5rem;
}

.technomitra-site .form-label .required {
  color: var(--site-danger);
}

/* `components/ui/input.tsx`: `h-9 rounded-3xl border border-transparent bg-input/50
   px-3 text-base md:text-sm`, placeholder muted, 3px focus ring at 30% --ring, and
   `aria-invalid` turning the border destructive. The marketing form is validated by
   the supplied main.js, which sets `.is-invalid` and `aria-invalid` — both are styled. */
.technomitra-site .form-input,
.technomitra-site .form-select,
.technomitra-site .form-textarea {
  width: 100%;
  min-width: 0;
  height: 2.25rem;
  padding: 0 0.75rem;
  border: 1px solid transparent;
  border-radius: var(--site-r-input);
  font-size: 0.875rem;
  color: var(--site-fg);
  background: color-mix(in oklch, var(--input) 50%, transparent);
  transition: background-color var(--site-transition), border-color var(--site-transition),
    box-shadow var(--site-transition);
  outline: none;
}

.technomitra-site .form-input::placeholder,
.technomitra-site .form-textarea::placeholder {
  color: var(--site-fg-muted);
}

.technomitra-site .form-input:focus-visible,
.technomitra-site .form-select:focus-visible,
.technomitra-site .form-textarea:focus-visible,
.technomitra-site .form-input:focus,
.technomitra-site .form-select:focus,
.technomitra-site .form-textarea:focus {
  border-color: var(--site-focus);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--site-focus) 30%, transparent);
}

.technomitra-site .form-input.is-invalid,
.technomitra-site .form-select.is-invalid,
.technomitra-site .form-textarea.is-invalid,
.technomitra-site .form-input[aria-invalid='true'],
.technomitra-site .form-select[aria-invalid='true'],
.technomitra-site .form-textarea[aria-invalid='true'] {
  border-color: var(--site-danger);
}

.technomitra-site .form-input.is-invalid:focus,
.technomitra-site .form-select.is-invalid:focus,
.technomitra-site .form-textarea.is-invalid:focus {
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--site-danger) 20%, transparent);
}

.technomitra-site .form-textarea {
  height: auto;
  min-height: 120px;
  padding: 0.625rem 0.75rem;
  line-height: 1.6;
  resize: vertical;
}

/* The chevron is drawn in currentColor via a mask, so it follows the theme instead of
   being a hardcoded slate arrow baked into a data URI. */
.technomitra-site .form-select {
  appearance: none;
  padding-right: 2.25rem;
  background-image: none;
  background-repeat: no-repeat;
}

.technomitra-site .form-group {
  position: relative;
}

.technomitra-site .form-select + .site-select-chevron,
.technomitra-site .form-select {
  cursor: pointer;
}

.technomitra-site .form-select {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.0625rem) calc(50% + 1px), calc(100% - 0.8125rem) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* main.js inserts these after the field it describes. */
.technomitra-site .form-error {
  display: block;
  margin-top: 0.375rem;
  color: var(--site-danger);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.technomitra-site .form-error:empty {
  display: none;
}

.technomitra-site .conditional-field[hidden] {
  display: none;
}

.technomitra-site .form-success {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.125rem;
  border-radius: var(--site-r-input);
  background: color-mix(in oklch, var(--site-success) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--site-success) 28%, transparent);
  color: color-mix(in oklch, var(--site-success) 80%, var(--site-fg));
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 1.25rem;
}

.technomitra-site .form-success.show {
  display: flex;
  animation: siteFadeInUp 0.45s var(--site-ease);
}

@keyframes siteFadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------- scroll reveal ---- */

.technomitra-site .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s var(--site-ease), transform 0.65s var(--site-ease);
}

.technomitra-site .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.technomitra-site .reveal-delay-1 { transition-delay: 0.08s; }
.technomitra-site .reveal-delay-2 { transition-delay: 0.16s; }
.technomitra-site .reveal-delay-3 { transition-delay: 0.24s; }
.technomitra-site .reveal-delay-4 { transition-delay: 0.32s; }

/* Respect the OS setting. The reveal is decorative; without this the whole page is
   invisible to anyone who has asked for less motion and whose observer misfires. */
@media (prefers-reduced-motion: reduce) {
  .technomitra-site .reveal,
  .technomitra-site .reveal.visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .technomitra-site .hero-orb,
  .technomitra-site .hero-card,
  .technomitra-site .hero-float-card,
  .technomitra-site .hero-badge .dot,
  .technomitra-site .crm-mockup-bar,
  .technomitra-site .hero-card-bar-fill {
    animation: none;
  }
}

/* ----------------------------------------------------------------------- misc ---- */

.technomitra-site .bg-pattern-dots {
  background-image: radial-gradient(circle, var(--site-line) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ----------------------------------------------------------------- responsive ---- */

@media (max-width: 1024px) {
  .technomitra-site .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .technomitra-site .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .technomitra-site .workflow { grid-template-columns: repeat(2, 1fr); }
  .technomitra-site .workflow::before { display: none; }
  .technomitra-site .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .technomitra-site .hero-content { grid-template-columns: 1fr; gap: 3rem; }
  .technomitra-site .hero-visual { display: none; }
  .technomitra-site .feature-row { grid-template-columns: 1fr; gap: 2rem; }
  .technomitra-site .feature-row-reverse .feature-row-content { order: 0; }
  .technomitra-site .contact-grid { grid-template-columns: 1fr; }
  .technomitra-site .section { padding: var(--site-space-12) 0; }
}

@media (max-width: 768px) {
  .technomitra-site .nav-links { display: none; }
  .technomitra-site .nav-actions .btn { display: none; }
  .technomitra-site .nav-toggle { display: flex; }
  .technomitra-site .grid-2,
  .technomitra-site .grid-3,
  .technomitra-site .grid-4 { grid-template-columns: 1fr; }
  .technomitra-site .stats-grid { grid-template-columns: 1fr 1fr; }
  .technomitra-site .workflow { grid-template-columns: 1fr; }
  .technomitra-site .hero-stats { flex-wrap: wrap; gap: 1.5rem; }
  .technomitra-site .hero-cta { flex-direction: column; align-items: stretch; }
  .technomitra-site .hero-cta .btn { width: 100%; }
  .technomitra-site .footer-top { grid-template-columns: 1fr; }
  .technomitra-site .footer-bottom { flex-direction: column; text-align: center; }
  .technomitra-site .footer-legal { justify-content: center; flex-wrap: wrap; }
  .technomitra-site .form-row { grid-template-columns: 1fr; }
  .technomitra-site .section { padding: 4.5rem 0; }
  .technomitra-site .cta-section { padding: 4.5rem 0; }
  .technomitra-site .cta-buttons { flex-direction: column; }
  .technomitra-site .cta-buttons .btn { width: 100%; }
  .technomitra-site .trust-logos { gap: 1.5rem; }
  .technomitra-site .trust-logo { font-size: 0.9375rem; }
  .technomitra-site .crm-mockup-body { grid-template-columns: 1fr; }
  .technomitra-site .crm-mockup-sidebar {
    flex-direction: row;
    overflow-x: auto;
    padding: 0.625rem;
    border-right: none;
    border-bottom: 1px solid var(--site-line);
  }
  .technomitra-site .crm-mockup-stat-row { grid-template-columns: 1fr; }
  .technomitra-site .process-item { gap: 1.25rem; }
  .technomitra-site .page-hero { padding-top: calc(var(--site-nav-h) + 3rem); }
}

@media (max-width: 480px) {
  .technomitra-site .stats-grid { grid-template-columns: 1fr; }
  .technomitra-site .container { padding: 0 1rem; }
  .technomitra-site .hero-stats { flex-direction: column; gap: 1rem; }
  .technomitra-site .card,
  .technomitra-site .testimonial-card,
  .technomitra-site .value-card { padding: 1.375rem; }
  .technomitra-site .contact-form-card,
  .technomitra-site .contact-info-card { padding: 1.375rem; }
  .technomitra-site .process-item:not(:last-child)::before { left: 19px; }
  .technomitra-site .process-number { width: 2.5rem; height: 2.5rem; font-size: 0.875rem; }
}