/* GSmart brand layer. Shared by gsmart.dev, gsmartapp.com, gsmart-services.com and the gsmartsolution verticals.
   Load AFTER the site stylesheet. Brand = gradient G mark (blue -> green), Sora headings, Inter body, Tamil fallback.
   Does not touch colour tokens, so light/dark themes and per-vertical accents keep working. */
:root,
html.light,
html.dark {
  --brand-blue: #2563eb;
  --brand-green: #10b981;
  --brand-green-ink: #047857;
  --brand-gradient: linear-gradient(135deg, #2563eb, #10b981);
  --font: "Inter", "Noto Sans Tamil", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-d: "Sora", "Inter", "Noto Sans Tamil", system-ui, sans-serif;
}
h1, h2, h3, h4 { font-family: var(--font-d); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.logo { gap: 10px; font: 700 17px/1 var(--font-d); letter-spacing: -.02em; }
.logo img { width: 30px; height: 30px; border-radius: 0; object-fit: contain; }
.nav .logo { min-height: 44px; }
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brand-blue); outline-offset: 2px;
}
::selection { background: color-mix(in srgb, var(--brand-green) 25%, transparent); }

/* Phone: hero buttons share one width; two-word logos keep a tight lockup when they wrap */
.logo { line-height: 1.05; }
@media (max-width: 560px) {
  .hx-ctas, .vh-cta { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .hx-ctas .btn, .vh-cta .btn { width: 100%; justify-content: center; text-align: center; }
}