/* ================================================
   Coast Technology Services — Modern SaaS Design
   ================================================ */

/* ---------- Reset & Base ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --navy: #1a1a2e;
  --teal: #0891b2;
  --cyan: #06b6d4;
  --white: #ffffff;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
  --transition: 0.25s ease;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--gray-700);
  background: var(--white);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--navy);
  line-height: 1.2;
  font-weight: 700;
}

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Sections ---------- */
.section {
  padding: 96px 0;
}

.section-white {
  background: var(--white);
}

.section-gray {
  background: var(--gray-50);
}

.section-header {
  margin-bottom: 56px;
}

.section-header.center {
  text-align: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.section-header h2 {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.section-label {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal);
  margin-bottom: 12px;
}

/* ---------- Grid ---------- */
.grid {
  display: grid;
  gap: 24px;
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}


/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.9375rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.btn-sm {
  padding: 8px 20px;
  font-size: 0.875rem;
}

.btn-lg {
  padding: 14px 32px;
  font-size: 1rem;
}

.btn-primary {
  background: linear-gradient(135deg, var(--navy), var(--teal));
  color: var(--white);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #12122a, #0a7d9d);
  box-shadow: 0 4px 20px rgba(8, 145, 178, 0.35);
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--gray-200);
  padding: 12px 30px;
}

.btn-outline.btn-lg {
  padding: 12px 30px;
}

.btn-outline:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.btn-white {
  background: var(--white);
  color: var(--navy);
}

.btn-white:hover {
  background: var(--gray-100);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.3);
}

.btn-block {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 14px 24px;
}

/* ========================================
   NAVIGATION
   ======================================== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: box-shadow var(--transition);
}

.nav-scrolled {
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.08);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 72px;
}

.nav-brand img {
  height: 92px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav-links a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--gray-600);
  transition: color var(--transition);
}

.nav-links a:hover {
  color: var(--navy);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-contact {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--gray-600);
  transition: color var(--transition);
}

.nav-contact:hover {
  color: var(--teal);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--navy);
  padding: 8px;
}

/* ---------- Mobile Menu ---------- */
.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1100;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-overlay.active {
  display: block;
  opacity: 1;
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  max-width: 85vw;
  background: var(--white);
  z-index: 1200;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.mobile-menu.active {
  transform: translateX(0);
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--gray-100);
}

.mobile-menu-header .nav-brand img {
  height: 30px;
}

.mobile-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-500);
  padding: 8px;
}

.mobile-menu-links {
  display: flex;
  flex-direction: column;
  padding: 16px 0;
}

.mobile-menu-links a {
  padding: 14px 24px;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--gray-700);
  transition: background var(--transition), color var(--transition);
}

.mobile-menu-links a:hover {
  background: var(--gray-50);
  color: var(--teal);
}

.mobile-menu-cta {
  padding: 16px 24px;
  margin-top: auto;
  border-top: 1px solid var(--gray-100);
}

/* ========================================
   HERO
   ======================================== */
.hero {
  padding: 160px 0 96px;
  background: var(--white);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.hero-content {
  max-width: 560px;
}

.hero-title {
  font-size: 3.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 24px;
  color: var(--navy);
}

.hero-title-light {
  font-weight: 400;
  color: var(--gray-400);
}

.hero-subtitle {
  font-size: 1.125rem;
  color: var(--gray-500);
  line-height: 1.7;
  margin-bottom: 36px;
}

.hero-actions {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}

.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--navy);
  transition: gap var(--transition), color var(--transition);
}

.hero-link:hover {
  gap: 12px;
  color: var(--teal);
}

/* ---------- Hero Circles Composition ---------- */
.hero-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-circles {
  position: relative;
  width: 480px;
  height: 480px;
}

.circle {
  position: absolute;
  border-radius: 50%;
  /* transition: transform 0.4s ease; — disabled, circles are static */
}

/* Photo circle — largest, center-right */
.circle-photo {
  width: 280px;
  height: 280px;
  top: 60px;
  left: 100px;
  z-index: 4;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}

.circle-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Teal circle — upper-right, overlapping photo */
.circle-teal {
  width: 180px;
  height: 180px;
  top: 10px;
  right: 20px;
  background: var(--teal);
  z-index: 3;
  box-shadow: 0 12px 40px rgba(8, 145, 178, 0.3);
}

/* Navy circle — lower-left, behind photo */
.circle-navy {
  width: 200px;
  height: 200px;
  bottom: 40px;
  left: 20px;
  background: var(--navy);
  z-index: 2;
  box-shadow: 0 12px 40px rgba(26, 26, 46, 0.25);
}

/* Sand circle — small, upper-left accent */
.circle-sand {
  width: 100px;
  height: 100px;
  top: 30px;
  left: 30px;
  background: #d4b896;
  z-index: 1;
  box-shadow: 0 8px 24px rgba(212, 184, 150, 0.3);
}

/* Sage circle — small, lower-right accent */
.circle-sage {
  width: 120px;
  height: 120px;
  bottom: 20px;
  right: 40px;
  background: #8fae8b;
  z-index: 1;
  box-shadow: 0 8px 24px rgba(143, 174, 139, 0.3);
}

/* Hover lift on circles — disabled, circles are static
.hero-circles:hover .circle-photo {
  transform: translateY(-4px);
}

.hero-circles:hover .circle-teal {
  transform: translateY(-6px) translateX(3px);
}

.hero-circles:hover .circle-navy {
  transform: translateY(-3px) translateX(-2px);
}

.hero-circles:hover .circle-sand {
  transform: translateY(-5px);
}

.hero-circles:hover .circle-sage {
  transform: translateY(-5px) translateX(2px);
}
*/

/* Idle floating animations — disabled, circles are static
@keyframes circleFloat1 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes circleFloat2 {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-6px) translateX(4px); }
}

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

.circle-float-1 {
  animation: circleFloat1 5s ease-in-out infinite;
}

.circle-float-2 {
  animation: circleFloat2 6s ease-in-out infinite 0.5s;
}

.circle-float-3 {
  animation: circleFloat3 7s ease-in-out infinite 1s;
}
*/

/* Stat line below circles */
.hero-stat {
  margin-top: 24px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-400);
  letter-spacing: 0.02em;
  text-align: center;
}

/* ========================================
   SERVICES (Dark Section — Premium Cards)
   ======================================== */
.section-services {
  padding: 24px 0;
  background: var(--white);
}

.section-services > .container {
  max-width: none;
  padding: 0 40px;
}

.services-dark-wrapper {
  background: linear-gradient(180deg, #0a0a0a 0%, #0d0d0d 100%);
  border-radius: 40px;
  padding: 80px 48px 120px;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.15);
}

.section-label-light {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--teal);
  margin-bottom: 12px;
}

.services-headline {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--white);
}

.section-services .section-header {
  margin-bottom: 56px;
}

/* ---------- Service Card ---------- */
.svc-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: linear-gradient(135deg, #161616 0%, #1e1e1e 50%, #1a1a1a 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 32px;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.svc-card:hover {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5);
}

.svc-card-reverse {
  direction: rtl;
}

.svc-card-reverse > * {
  direction: ltr;
}

/* Text Side */
.svc-card-text {
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.svc-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.svc-icon-teal { background: rgba(8, 145, 178, 0.15); color: #0891b2; }
.svc-icon-purple { background: rgba(124, 58, 237, 0.15); color: #a78bfa; }
.svc-icon-orange { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.svc-icon-green { background: rgba(52, 211, 153, 0.15); color: #34d399; }
.svc-icon-blue { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }

.svc-card-text h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 12px;
}

.svc-card-text p {
  font-size: 1rem;
  color: #9ca3af;
  line-height: 1.7;
  margin-bottom: 0;
}

.svc-benefit {
  font-size: 0.875rem;
  color: #6b7280;
  font-style: italic;
  margin-top: 12px;
}

.svc-card-text .btn {
  margin-top: 28px;
  align-self: flex-start;
}

/* Visual Side */
.svc-card-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  overflow: hidden;
}

.svc-visual-teal { background: radial-gradient(ellipse at 70% 50%, rgba(8,145,178,0.08) 0%, transparent 70%); }
.svc-visual-purple { background: radial-gradient(ellipse at 30% 50%, rgba(124,58,237,0.08) 0%, transparent 70%); }
.svc-visual-orange { background: radial-gradient(ellipse at 60% 50%, rgba(245,158,11,0.06) 0%, transparent 70%); }
.svc-visual-green { background: radial-gradient(ellipse at 50% 50%, rgba(52,211,153,0.06) 0%, transparent 70%); }
.svc-visual-blue { background: radial-gradient(ellipse at 40% 40%, rgba(56,189,248,0.08) 0%, transparent 70%); }

.svc-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* CTA */
.services-cta {
  text-align: center;
  margin-top: 16px;
}

/* ========================================
   TRUSTED BY
   ======================================== */
/* TEMPORARILY HIDDEN — customer logos section */
.trusted-by {
  display: none;
  padding: 48px 0;
  background: var(--white);
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
}

.trusted-label {
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-400);
  margin-bottom: 28px;
}

.logo-carousel {
  overflow: hidden;
  position: relative;
  padding: 40px 0;
}

.logo-track {
  display: flex;
  align-items: center;
  gap: 80px;
  width: max-content;
  animation: logo-scroll 30s linear infinite;
}

.logo-carousel:hover .logo-track {
  animation-play-state: paused;
}

@keyframes logo-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.client-logo {
  height: 45px;
  max-width: 200px;
  object-fit: contain;
  opacity: 0.85;
  flex-shrink: 0;
  transition: opacity var(--transition);
}

.client-logo:hover {
  opacity: 1;
}

/* ---- Per-logo scale normalization ----
   Goal: consistent readable text size across all logos.
   Margin on each compensates for transform overflow (visual - layout)/2.
   Logos at scale(1.0) need no override — base .client-logo handles them:
   MIB, MedTrials, FitFresh, DMI */

/* Mild boost — slightly small text */
img.client-logo[alt="FabSouth"]   { transform: scale(1.15); margin: 0 6px; }
img.client-logo[alt="NuVision"]   { transform: scale(1.2);  margin: 0 17px; }

/* Moderate boost — icon/graphic-heavy, text is secondary */
img.client-logo[alt="Direction Home"] { transform: scale(1.4); margin: 0 27px; }
img.client-logo[alt="Newbridge"]      { transform: scale(1.4); margin: 0 18px; }
img.client-logo[alt="MBG"]            { transform: scale(1.5); margin: 0 20px; }
img.client-logo[alt="WePack"]         { transform: scale(1.5); margin: 0 12px; }

/* Width-constrained — extreme 9.6:1 aspect ratio squashes at max-width */
img.client-logo[alt="Osaka"]          { transform: scale(1.6); margin: 0 60px; }

/* Heavy boost — source images have ~60% whitespace padding baked in.
   translateY shifts down to vertically center with other logos (content sits high in source images).
   translateY placed before scale so the offset is in screen pixels, not scaled coordinates. */
img.client-logo[alt="Opal"]           { transform: translateY(24px) scale(3.9);   margin: 0 98px; }
img.client-logo[alt="OnPoint Group"]  { transform: translateY(24px) scale(4.0);   margin: 0 101px; }
img.client-logo[alt="Fortistar"]      { transform: translateY(24px) scale(4.375); margin: 0 114px; }

/* ========================================
   FEATURE CARDS (Services & Solutions)
   ======================================== */
.feature-card {
  padding: 32px 28px;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius);
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
}

.feature-card:hover {
  border-color: var(--gray-200);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--navy), var(--teal));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  margin-bottom: 20px;
}

.feature-card h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.feature-card p {
  font-size: 0.9375rem;
  color: var(--gray-500);
  line-height: 1.6;
  flex: 1;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--teal);
  margin-top: 16px;
  transition: gap var(--transition);
}

.card-link:hover {
  gap: 10px;
}

.card-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--gray-50);
  color: var(--gray-600);
  border-radius: 100px;
  border: 1px solid var(--gray-100);
}

/* Solutions section — near full-width container */
#solutions > .container {
  max-width: none;
  width: calc(100% - 60px);
  margin: 0 30px;
}

/* ========================================
   SOLUTIONS GRID (ClickUp style, unified)
   ======================================== */
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 120px);
  gap: 1px;
  background: #e5e7eb;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
}

/* Size variants */
.sg-xl   { grid-column: span 2; grid-row: span 2; }
.sg-wide { grid-column: span 2; }
.sg-tall { grid-row: span 2; }

/* Base tile */
.sg-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 12px;
  background: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
}

/* Featured tile tints */
.sg-tile[data-accent="blue"]   { background: #eff6ff; }
.sg-tile[data-accent="amber"]  { background: #fffbeb; }
.sg-tile[data-accent="green"]  { background: #ecfdf5; }
.sg-tile[data-accent="violet"] { background: #f5f3ff; }
.sg-tile[data-accent="red"]    { background: #fef2f2; }

/* Hover */
.sg-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.10);
  z-index: 2;
}

.sg-tile:hover .sg-logo {
  transform: scale(1.06);
}

.sg-tile:hover .sg-initial {
  transform: scale(1.06);
}

/* (category tags removed — grouping by tile order) */

/* Logo — consistent sizing by tile type */
.sg-logo {
  height: 35px;
  width: auto;
  max-width: 90%;
  object-fit: contain;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.sg-xl .sg-logo {
  height: 60px;
  max-width: 90%;
}

.sg-tall .sg-logo {
  height: 45px;
  max-width: 90%;
}

.sg-wide .sg-logo {
  height: 45px;
  max-width: 90%;
}

/* (per-logo overrides moved to end of file) */

/* Initial letter badge (for tiles without a logo file) */
.sg-initial {
  padding: 6px 14px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.sg-xl .sg-initial {
  padding: 12px 24px;
  font-size: 1.25rem;
  border-radius: 10px;
  letter-spacing: 0.02em;
}

.sg-tall .sg-initial,
.sg-wide .sg-initial {
  padding: 8px 18px;
  font-size: 1rem;
}

/* Product name */
.sg-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1f2937;
  text-align: center;
  line-height: 1.3;
}

.sg-xl .sg-name {
  font-size: 1.125rem;
  font-weight: 700;
}

.sg-wide .sg-name,
.sg-tall .sg-name {
  font-size: 0.9375rem;
  font-weight: 600;
}

/* Tagline on featured tiles */
.sg-desc {
  font-size: 0.6875rem;
  color: #9ca3af;
  text-align: center;
  line-height: 1.4;
  max-width: 180px;
}

/* Responsive */
@media (max-width: 768px) {
  .solutions-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    grid-auto-rows: 100px;
  }
  /* Override inline grid-column/grid-row — force auto-flow */
  .solutions-grid > .sg-tile {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .solutions-grid > .sg-tile.sg-xl {
    grid-column: span 2 !important;
    grid-row: span 1 !important;
  }
  .sg-wide { grid-column: span 2 !important; }
  .sg-tall { grid-row: span 1 !important; }
  /* Cap ALL tile images to fit 100px rows (60px content area) */
  .solutions-grid .sg-tile img {
    max-height: 40px !important;
    max-width: 85% !important;
    width: auto !important;
    object-fit: contain !important;
  }
  .solutions-grid .sg-tile.sg-xl img {
    max-height: 50px !important;
  }
}

/* ========================================
   INDUSTRIES — Dark Card Section
   ======================================== */
.ind-section {
  padding: 0;
  background: var(--white);
}

#industries > .container {
  max-width: none;
  width: calc(100% - 60px);
  margin: 0 30px;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(120, 119, 198, 0.15), transparent),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(255, 119, 198, 0.1), transparent),
    radial-gradient(ellipse 50% 30% at 20% 80%, rgba(59, 130, 246, 0.1), transparent),
    #0f0f0f;
  border-radius: 24px;
  padding: 80px 48px;
  overflow: hidden;
  position: relative;
}

#industries > .container::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.3), transparent),
    radial-gradient(2px 2px at 40% 70%, rgba(255,255,255,0.2), transparent),
    radial-gradient(1px 1px at 60% 20%, rgba(255,255,255,0.3), transparent),
    radial-gradient(2px 2px at 80% 60%, rgba(255,255,255,0.2), transparent),
    radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,0.25), transparent),
    radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.2), transparent),
    radial-gradient(2px 2px at 90% 10%, rgba(255,255,255,0.15), transparent),
    radial-gradient(1px 1px at 10% 50%, rgba(255,255,255,0.2), transparent);
  pointer-events: none;
  z-index: 0;
}

#industries > .container > * {
  position: relative;
  z-index: 1;
}

.ind-headline {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--white);
}

.ind-subheadline {
  font-size: 1.0625rem;
  color: #9ca3af;
  line-height: 1.7;
  margin-top: 12px;
}

/* Grid: 3 top, 2 bottom centered */
.ind-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  justify-items: center;
}

/* Bottom row: flex container spanning full grid width */
.ind-bottom-row {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 24px;
}

.ind-bottom-row .ind-card {
  flex: 0 1 calc(33.333% - 12px);
}

/* ---------- Layer 2: Card ---------- */
.ind-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.02) 50%,
    rgba(0, 0, 0, 0.1) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 32px 28px 28px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.ind-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Card colored corner glow (::before) */
.ind-card::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.35s ease;
  opacity: 1;
}

.ind-card-teal::before   { top: -50%; right: -50%; background: radial-gradient(circle, rgba(20, 184, 166, 0.18) 0%, transparent 70%); }
.ind-card-purple::before { top: -50%; left: -50%;  background: radial-gradient(circle, rgba(139, 92, 246, 0.18) 0%, transparent 70%); }
.ind-card-orange::before { top: -40%; right: -40%; background: radial-gradient(circle, rgba(249, 115, 22, 0.18) 0%, transparent 70%); }
.ind-card-blue::before   { bottom: -50%; left: -50%; background: radial-gradient(circle, rgba(59, 130, 246, 0.18) 0%, transparent 70%); }
.ind-card-green::before  { bottom: -50%; right: -50%; background: radial-gradient(circle, rgba(34, 197, 94, 0.18) 0%, transparent 70%); }

.ind-card:hover::before { opacity: 1.5; }

/* Keep content above the glow layer */
.ind-card > * { position: relative; z-index: 1; }

/* ---------- Tag pills ---------- */
.ind-tag {
  display: inline-block;
  align-self: flex-start;
  padding: 5px 14px;
  border-radius: 100px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

.ind-tag-teal   { background: rgba(8, 145, 178, 0.15);  color: #22d3ee; }
.ind-tag-purple { background: rgba(124, 58, 237, 0.15); color: #a78bfa; }
.ind-tag-orange { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.ind-tag-blue   { background: rgba(56, 189, 248, 0.15); color: #7dd3fc; }
.ind-tag-green  { background: rgba(52, 211, 153, 0.15); color: #6ee7b7; }

/* ---------- Card title ---------- */
.ind-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.35;
  margin-bottom: 16px;
}

/* ---------- Layer 3: Inner description card ---------- */
.ind-inner {
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.02) 40%,
    rgba(0, 0, 0, 0.15) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  flex: 1;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

/* Inner card soft light spot */
.ind-inner::before {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -30%;
  width: 80%;
  height: 80%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, transparent 70%);
  pointer-events: none;
}

/* Per-color inner card accents */
.ind-inner-teal   { border-color: rgba(20, 184, 166, 0.18);  box-shadow: inset 0 1px 0 rgba(20, 184, 166, 0.1); }
.ind-inner-purple { border-color: rgba(139, 92, 246, 0.18);  box-shadow: inset 0 1px 0 rgba(139, 92, 246, 0.1); }
.ind-inner-orange { border-color: rgba(249, 115, 22, 0.18);  box-shadow: inset 0 1px 0 rgba(249, 115, 22, 0.1); }
.ind-inner-blue   { border-color: rgba(59, 130, 246, 0.18);  box-shadow: inset 0 1px 0 rgba(59, 130, 246, 0.1); }
.ind-inner-green  { border-color: rgba(34, 197, 94, 0.18);   box-shadow: inset 0 1px 0 rgba(34, 197, 94, 0.1); }

/* Hover glow on inner card */
.ind-card:hover .ind-inner-teal   { border-color: rgba(20, 184, 166, 0.3);  box-shadow: inset 0 1px 0 rgba(20, 184, 166, 0.15), 0 0 16px rgba(20, 184, 166, 0.06); }
.ind-card:hover .ind-inner-purple { border-color: rgba(139, 92, 246, 0.3);  box-shadow: inset 0 1px 0 rgba(139, 92, 246, 0.15), 0 0 16px rgba(139, 92, 246, 0.06); }
.ind-card:hover .ind-inner-orange { border-color: rgba(249, 115, 22, 0.3);  box-shadow: inset 0 1px 0 rgba(249, 115, 22, 0.15), 0 0 16px rgba(249, 115, 22, 0.06); }
.ind-card:hover .ind-inner-blue   { border-color: rgba(59, 130, 246, 0.3);  box-shadow: inset 0 1px 0 rgba(59, 130, 246, 0.15), 0 0 16px rgba(59, 130, 246, 0.06); }
.ind-card:hover .ind-inner-green  { border-color: rgba(34, 197, 94, 0.3);   box-shadow: inset 0 1px 0 rgba(34, 197, 94, 0.15), 0 0 16px rgba(34, 197, 94, 0.06); }

/* Description text */
.ind-desc {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
  position: relative;
  z-index: 1;
}

/* ---------- CTA ---------- */
.ind-cta {
  text-align: center;
  margin-top: 48px;
}

/* ========================================
   TEAM TEASER
   ======================================== */
.team-teaser {
  max-width: 720px;
}

.team-teaser-content .section-label {
  margin-bottom: 12px;
}

.team-teaser-content h2 {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.team-description {
  font-size: 1.0625rem;
  color: var(--gray-500);
  line-height: 1.7;
  margin-bottom: 32px;
}

.team-stats {
  display: flex;
  gap: 48px;
  margin-bottom: 36px;
}

.stat {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-size: 2rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 0.8125rem;
  color: var(--gray-500);
}

/* ========================================
   FINAL CTA
   ======================================== */
.cta-section {
  padding: 96px 0;
  background: linear-gradient(135deg, var(--navy), #16213e);
}

.cta-content {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.cta-content h2 {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.cta-content p {
  font-size: 1.0625rem;
  color: var(--gray-400);
  line-height: 1.7;
  margin-bottom: 36px;
}

/* ========================================
   FOOTER
   ======================================== */
.footer {
  background: #EFF6FF;
  padding: 64px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 48px;
}

.footer-brand img {
  height: 32px;
  width: auto;
  margin-bottom: 16px;
}

.footer-tagline {
  font-size: 0.875rem;
  color: var(--gray-600);
  line-height: 1.6;
  max-width: 240px;
}

.footer-col h4 {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-900);
  margin-bottom: 16px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col a {
  font-size: 0.875rem;
  color: var(--gray-600);
  transition: color var(--transition);
}

.footer-col a:hover {
  color: var(--gray-900);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid var(--gray-200);
  font-size: 0.8125rem;
  color: var(--gray-500);
}

.footer-bottom a {
  color: var(--gray-600);
  transition: color var(--transition);
}

.footer-bottom a:hover {
  color: var(--gray-900);
}

/* ========================================
   SCROLL ANIMATIONS
   ======================================== */
[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate].visible {
  opacity: 1;
  transform: translateY(0);
}

/* (end-of-file logo overrides removed — sizing now handled by
   base .sg-logo rules with max-width: 90% + inline styles) */

/* ========================================
   RESPONSIVE
   ======================================== */

/* Tablet */
@media (max-width: 1024px) {
  .hero-title {
    font-size: 2.5rem;
  }

  .hero-grid {
    gap: 40px;
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .svc-card {
    grid-template-columns: 1fr;
  }

  .svc-card-reverse {
    direction: ltr;
  }

  .svc-card-visual {
    min-height: 260px;
  }

  .ind-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ind-bottom-row .ind-card {
    flex: 0 1 calc(50% - 12px);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .footer-brand-col {
    grid-column: 1 / -1;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .nav-links,
  .nav-actions {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .hero {
    padding: 120px 0 64px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .hero-title {
    font-size: 2.25rem;
  }

  .hero-subtitle {
    font-size: 1.0625rem;
  }

  .hero-circles {
    width: 340px;
    height: 340px;
  }

  .circle-photo {
    width: 200px;
    height: 200px;
    top: 40px;
    left: 70px;
  }

  .circle-teal {
    width: 130px;
    height: 130px;
    top: 5px;
    right: 10px;
  }

  .circle-navy {
    width: 140px;
    height: 140px;
    bottom: 30px;
    left: 15px;
  }

  .circle-sand {
    width: 70px;
    height: 70px;
    top: 20px;
    left: 25px;
  }

  .circle-sage {
    width: 85px;
    height: 85px;
    bottom: 15px;
    right: 25px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-actions .btn {
    text-align: center;
    justify-content: center;
  }

  .section {
    padding: 64px 0;
  }

  .section-services {
    padding: 16px 0;
  }

  .section-services > .container {
    padding: 0 16px;
  }

  .services-dark-wrapper {
    padding: 48px 20px 72px;
    border-radius: 20px;
  }

  .services-headline {
    font-size: 1.75rem;
  }

  .svc-card {
    grid-template-columns: 1fr;
  }

  .svc-card-reverse {
    direction: ltr;
  }

  .svc-card-text {
    padding: 32px 24px;
  }

  .svc-card-text h3 {
    font-size: 1.25rem;
  }

  .svc-card-visual {
    min-height: 220px;
  }

  .section-header h2 {
    font-size: 1.75rem;
  }

  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .ind-grid {
    grid-template-columns: 1fr;
  }

  .ind-bottom-row {
    flex-direction: column;
  }

  .ind-bottom-row .ind-card {
    flex: 0 1 auto;
  }

  .ind-headline {
    font-size: 1.75rem;
  }

  #industries > .container {
    width: calc(100% - 32px);
    margin: 0 16px;
    padding: 64px 20px;
    border-radius: 20px;
  }

  .logo-row {
    gap: 32px;
  }

  .client-logo {
    height: 24px;
  }

  .team-stats {
    flex-direction: column;
    gap: 20px;
  }

  .team-teaser-content h2 {
    font-size: 1.75rem;
  }

  .cta-content h2 {
    font-size: 1.75rem;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand-col {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 16px;
  }

  .hero-title {
    font-size: 1.875rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}