/*
 * My Pure Environment — Theme
 * Adapted from the Pure Maintenance UK design system.
 * The single brand difference: the blue gradient is replaced with the
 * turquoise/cyan gradient extracted from the My Pure Environment logo.
 * Everything else (type, spacing, radii, shadows, motion) is inherited
 * faithfully. American English throughout.
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* ── Brand color — turquoise, extracted from the logo swirl ─────── */
  --color-brand-primary:   #0aa6d6;   /* Core turquoise. Icons, accents, dots. */
  --color-brand-secondary: #45d6f5;   /* Bright cyan. 2nd stop of brand gradient. */
  --color-brand-deep:      #069fce;   /* Deep cyan. 1st stop of brand gradient. */
  --color-brand-navy:      #0c3c60;   /* Navy. Large high-contrast sections (footer, dark bands). */
  --color-brand-navy-deep: #082c46;   /* Deeper navy, gradient/borders within navy sections. */
  --color-brand-orange:    #f56600;   /* Orange. Small bursts only (promo bar, micro-accents). */

  --gradient-brand:        linear-gradient(90deg, #069fce 0%, #45d6f5 100%);
  --gradient-hero-accent:  radial-gradient(circle at 80% 20%, rgba(10,166,214,0.14), transparent 42%);

  /* ── Text ──────────────────────────────────────────────────────── */
  --color-text-primary:    #0f172a;
  --color-text-secondary:  #64748b;
  --color-text-tertiary:   #94a3b8;
  --color-text-body:       #475569;
  --color-text-inverse:    #ffffff;

  /* ── Surface ───────────────────────────────────────────────────── */
  --color-surface-app:     #f7fcfe;   /* very pale cool cyan-white */
  --color-surface-section: #fbfdfe;
  --color-surface-card:    #ffffff;
  --color-surface-subtle:  #e9f8fd;   /* cyan-tinted icon-chip bg */

  /* ── Border ────────────────────────────────────────────────────── */
  --color-border-subtle:    #eef4f7;
  --color-border-default:   #e2eaee;
  --color-border-brand-30:  rgba(10, 166, 214, 0.30);

  /* ── Status / accent ───────────────────────────────────────────── */
  --color-status-success:  #10b981;
  --color-status-danger:   #f43f5e;
  --color-accent-gold:     #fbbf24;

  /* ── Glass / overlays ──────────────────────────────────────────── */
  --color-glass-bg:          rgba(255, 255, 255, 0.85);
  --color-glass-border:      rgba(255, 255, 255, 0.50);
  --color-glass-bg-dark:     rgba(255, 255, 255, 0.10);
  --color-glass-border-dark: rgba(255, 255, 255, 0.20);

  /* ── Typography: family ────────────────────────────────────────── */
  --font-family-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* ── Typography: weight ────────────────────────────────────────── */
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;
  --font-weight-black:     900;

  /* ── Typography: scale ─────────────────────────────────────────── */
  --font-size-display:    4rem;
  --font-size-h1:         4.2rem;
  --font-size-h2:         3rem;
  --font-size-h3:         2.25rem;
  --font-size-lead:       1.25rem;
  --font-size-body:       1.125rem;
  --font-size-body-small: 0.9375rem;
  --font-size-button:     1rem;
  --font-size-eyebrow:    0.6875rem;

  /* ── Typography: tracking ──────────────────────────────────────── */
  --tracking-display: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-body:    -0.01em;
  --tracking-label:   0.10em;
  --tracking-eyebrow: 0.40em;

  /* ── Typography: leading ───────────────────────────────────────── */
  --leading-display: 1.05;
  --leading-heading: 1.10;
  --leading-tight:   1.25;
  --leading-body:    1.625;

  /* ── Spacing & layout ──────────────────────────────────────────── */
  --container-max:        1400px;
  --container-max-wide:   1440px;
  --container-pad-x-mob:  1rem;
  --container-pad-x-tab:  1.5rem;
  --container-pad-x-desk: 2rem;

  --section-py-compact:  5rem;
  --section-py-default:  7rem;
  --section-py-spacious: 8rem;
  --section-pt-hero:     10rem;

  /* ── Radii ─────────────────────────────────────────────────────── */
  --radius-button:  1.8rem;
  --radius-card:    3rem;
  --radius-card-lg: 3.5rem;
  --radius-hero:    4.5rem;
  --radius-pill:    9999px;
  --radius-sm:      0.75rem;
  --radius-md:      1rem;

  /* ── Shadows ───────────────────────────────────────────────────── */
  --shadow-subtle:       0 4px 20px rgba(15,23,42,0.02);
  --shadow-glass:        0 10px 30px -10px rgba(15,23,42,0.05);
  --shadow-card:         0 20px 50px -15px rgba(15,23,42,0.04);
  --shadow-menu:         0 30px 60px -15px rgba(15,23,42,0.10);
  --shadow-card-hover:   0 40px 80px -20px rgba(15,23,42,0.06);
  --shadow-image:        0 50px 100px -20px rgba(15,23,42,0.10);
  --shadow-image-large:  0 60px 120px -30px rgba(15,23,42,0.15);
  --shadow-brand-button: 0 15px 30px -5px rgba(10,166,214,0.40);

  /* ── Motion ────────────────────────────────────────────────────── */
  --duration-fast:      200ms;
  --duration-standard:  300ms;
  --duration-medium:    500ms;
  --duration-slow:      700ms;
  --duration-cinematic: 1000ms;

  --ease-standard: ease;
  --ease-out:      ease-out;
  --ease-brand:    cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Base ──────────────────────────────────────────────────────── */
html, body { margin: 0; padding: 0; }
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-family-sans);
  background-color: var(--color-surface-app);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: #cdf2fb; color: #075985; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ── Semantic typography ───────────────────────────────────────── */
.t-display {
  font-size: clamp(2.25rem, 5vw + 1rem, var(--font-size-h1));
  font-weight: var(--font-weight-black);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-text-primary);
  margin: 0;
}
.t-h1, h1 {
  font-size: clamp(2.25rem, 4.5vw + 0.5rem, var(--font-size-h1));
  font-weight: var(--font-weight-black);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-text-primary);
  margin: 0;
}
.t-h2, h2 {
  font-size: clamp(2rem, 3.5vw + 0.5rem, var(--font-size-h2));
  font-weight: var(--font-weight-black);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display);
  color: var(--color-text-primary);
  margin: 0;
}
.t-h3, h3 {
  font-size: clamp(1.5rem, 2vw + 0.5rem, var(--font-size-h3));
  font-weight: var(--font-weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin: 0;
}
.t-lead {
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-body);
  color: var(--color-text-secondary);
  margin: 0;
}
.t-body, p {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-body);
  color: var(--color-text-body);
  margin: 0;
}
.t-eyebrow {
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-secondary);
}
.t-gradient {
  background-image: var(--gradient-brand);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ── Brand utilities ───────────────────────────────────────────── */
.bg-brand-gradient { background-image: var(--gradient-brand); }
.text-brand        { color: var(--color-brand-primary); }
.hero-bg-accent    { background-image: var(--gradient-hero-accent); }

.glass-panel {
  background-color: var(--color-glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--color-glass-border);
  box-shadow: var(--shadow-glass);
}