@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800&family=Open+Sans:wght@300;400;500;600;700&display=swap');
/* ============================================================
   AUGMENTA IMPLANTS — COLORS & TYPE
   Foundational design tokens for the Augmenta brand.
   Source of truth: johnghadimi/augmenta-web- (Base44 / Tailwind)
   ============================================================ */

:root {
  /* ============================================================
     BRAND COLORS  (raw — the Augmenta palette)
     ============================================================ */
  --aug-navy:        #0D1B2E;  /* deepest — page background, hero */
  --aug-navy-mid:    #112240;  /* mid surfaces, alternating sections */
  --aug-navy-light:  #1a3358;  /* raised surfaces, technology band */
  --aug-cyan:        #00AEEF;  /* primary action / accent */
  --aug-cyan-light:  #4DCBF5;  /* hover / lighter accent */
  --aug-mark-cyan:   #16a2dc;  /* exact logo-mark cyan */
  --aug-white:       #FFFFFF;
  --aug-gray:        #E8EDF2;  /* light surface / muted text on navy */
  --aug-text-muted:  #8FA3B8;  /* muted slate-blue text */

  /* ============================================================
     FOREGROUND / TEXT  (semantic, on dark navy by default)
     ============================================================ */
  --fg1: var(--aug-white);            /* primary heading / body on navy */
  --fg2: rgba(232, 237, 242, 0.78);   /* secondary body text (aug-gray/78) */
  --fg3: rgba(232, 237, 242, 0.55);   /* tertiary / captions */
  --fg-muted: var(--aug-text-muted);  /* muted slate */
  --fg-accent: var(--aug-cyan);       /* cyan accent text / eyebrows */

  /* On light (white) surfaces */
  --fg1-on-light: var(--aug-navy);
  --fg2-on-light: rgba(13, 27, 46, 0.70);
  --fg3-on-light: rgba(13, 27, 46, 0.55);

  /* ============================================================
     SURFACES & BORDERS
     ============================================================ */
  --surface-0:  var(--aug-navy);
  --surface-1:  var(--aug-navy-mid);
  --surface-2:  var(--aug-navy-light);
  --surface-card: rgba(13, 27, 46, 0.60);   /* aug-navy/60 — feature cards */
  --surface-light: var(--aug-white);
  --surface-gray:  var(--aug-gray);

  --border-hairline: rgba(255, 255, 255, 0.06);  /* dividers on navy */
  --border-soft:     rgba(255, 255, 255, 0.15);  /* form underlines */
  --border-cyan:     rgba(0, 174, 239, 0.30);    /* accent borders */
  --border-on-light: rgba(13, 27, 46, 0.15);

  /* ============================================================
     SEMANTIC (shadcn HSL bridge — dark theme)
     ============================================================ */
  --background: 214 50% 10%; /* @kind color */
  --foreground: 210 20% 95%; /* @kind color */
  --card: 214 45% 13%; /* @kind color */
  --card-foreground: 210 20% 95%; /* @kind color */
  --primary: 197 100% 47%; /* @kind color */
  --primary-foreground: 0 0% 100%; /* @kind color */
  --secondary: 214 40% 18%; /* @kind color */
  --muted: 214 40% 16%; /* @kind color */
  --muted-foreground: 214 20% 65%; /* @kind color */
  --accent: 197 100% 47%; /* @kind color */
  --destructive: 0 84.2% 60.2%; /* @kind color */
  --border: 214 30% 22%; /* @kind color */
  --input: 214 30% 22%; /* @kind color */
  --ring: 197 100% 47%; /* @kind color */

  /* ============================================================
     TYPE FAMILIES
     ============================================================ */
  --font-heading: 'Raleway', system-ui, sans-serif;  /* display / headings / UI labels */
  --font-body:    'Open Sans', system-ui, sans-serif; /* paragraphs / long-form */

  /* Type scale (px) */
  --text-hero:   clamp(2.2rem, 5vw, 4rem);  /* 35–64px hero headline */
  --text-h1:     clamp(1.9rem, 4vw, 3rem);  /* 30–48px section heads */
  --text-h2:     1.5rem;   /* 24px */
  --text-h3:     1.125rem; /* 18px sub-heads / FAQ Q */
  --text-body:   1rem;     /* 16px */
  --text-sm:     0.875rem; /* 14px */
  --text-xs:     0.75rem;  /* 12px */
  --text-eyebrow:0.75rem;  /* 12px tracked label */

  /* Tracking — Augmenta loves wide letter-spacing on labels */
  --track-eyebrow: 0.35em;
  --track-button:  0.20em;
  --track-nav:     0.15em;

  /* Radius */
  --radius: 0.5rem;            /* 8px — base (shadcn lg) */
  --radius-sm: 0.375rem;       /* 6px */
  --radius-xl: 0.75rem;        /* 12px — feature cards */
  --radius-pill: 9999px;

  /* Elevation */
  --shadow-nav:  0 10px 30px rgba(0, 0, 0, 0.30);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-cyan: 0 10px 30px rgba(0, 174, 239, 0.30);  /* glow on primary hover */
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */
.aug-eyebrow {
  font-family: var(--font-heading);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
}

h1, .aug-h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-h1);
  line-height: 1.1;
  color: var(--fg1);
}

.aug-hero {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-hero);
  line-height: 1.08;
  color: var(--fg1);
  text-transform: uppercase;
}

h2, .aug-h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: 1.2;
  color: var(--fg1);
}

h3, .aug-h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-h3);
  line-height: 1.3;
  color: var(--fg1);
}

p, .aug-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--fg2);
}

.aug-tagline {           /* "Be Bold." */
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--fg-accent);
}

/* The signature cyan rule used under headings */
.aug-rule {
  width: 4rem;
  height: 2px;
  background: var(--aug-cyan);
  border: 0;
}

/* Primary button */
.aug-btn {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-button);
  text-transform: uppercase;
  color: var(--aug-navy);
  background: var(--aug-cyan);
  padding: 0.875rem 1.75rem;
  border-radius: var(--radius-sm);
  border: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}
.aug-btn:hover {
  background: var(--aug-cyan-light);
  box-shadow: var(--shadow-cyan);
}

/* Outline / ghost button */
.aug-btn-outline {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-button);
  text-transform: uppercase;
  color: var(--aug-cyan);
  background: transparent;
  padding: 0.875rem 1.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-cyan);
  cursor: pointer;
  transition: all 0.3s ease;
}
.aug-btn-outline:hover {
  background: rgba(0, 174, 239, 0.10);
}

/* Honeycomb hex texture overlay — Augmenta's signature motif */
.hex-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zm0-2l26-15V17L28 2 2 17v32l26 15z' fill='rgba(255,255,255,0.04)'/%3E%3C/svg%3E");
}

/* ============================================================
   HOVER / ROLLOVER STATES
   ============================================================ */
/* Technology feature cards ("Engineered for Natural Results") */
.tech-card { transition: background .5s ease, border-color .5s ease; }
.tech-card:hover { border-color: rgba(0, 174, 239, 0.30) !important; background: rgba(13, 27, 46, 0.80) !important; }
.tech-ico { transition: background .5s ease; }
.tech-card:hover .tech-ico { background: rgba(0, 174, 239, 0.20) !important; }

/* Difference section circular technology images */
.diff-circle { transition: border-color .5s ease; }
.diff-circle img { transition: transform .7s ease; }
.diff-card:hover .diff-circle { border-color: rgba(0, 174, 239, 0.40) !important; }
.diff-card:hover .diff-circle img { transform: scale(1.05); }

/* Why-section CTA link → cyan-light on hover */
.aug-link { transition: color .3s ease; }
.aug-link:hover { color: #4DCBF5 !important; }

/* FAQ question → cyan on hover */
.faq-q { transition: color .3s ease; }
.faq-q:hover { color: #00AEEF !important; }

/* Contact info icon circles brighten on hover */
.contact-icon { transition: background .3s ease; }
.contact-link:hover .contact-icon { background: rgba(0, 174, 239, 0.20) !important; }

/* Hero scroll indicator — gentle pulse (matches Tailwind animate-pulse) */
@keyframes augPulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.aug-pulse { animation: augPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@media (prefers-reduced-motion: reduce) { .aug-pulse { animation: none; } }

/* Mobile menu entrance */
@keyframes augFadeSlide { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
.aug-fadeslide { animation: augFadeSlide .3s cubic-bezier(0.22, 1, 0.36, 1) both; }