/* =========================================
   Root Variables
   Font Faces
   Heading
   Buttons
========================================= */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&family=Roboto+Condensed:wght@400;500;600;700&display=swap');

@font-face {
  font-family: 'Mistral';
  src: url('/fonts/Mistral.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root {
  --enpho-blue: #00ADEF;
  --enpho-blue-dark: #008bc0;
  --enpho-blue-soft: #e7f8ff;
  --accent-green: #32bd78;
  --accent-green-dark: #229d5e;
  --ink: #1f2933;
  --muted: #667085;
  --paper: #f7fafc;
  --impact: #eef8fc;
  --shadow-soft: 0 20px 55px rgba(16, 39, 55, 0.12);
  --shadow-hover: 0 26px 70px rgba(0, 173, 239, 0.22);
  --heading-font: 'Roboto Condensed', sans-serif;
  --body-font: 'Roboto', sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  scroll-behavior: smooth;
}

a {
  text-decoration: none;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6,
.brand-title,
.service-logo {
  font-family: var(--heading-font);
}

/* =========================================
   BUTTON
========================================= */
.enpho-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 46px;
    padding: 0.7rem 1.5rem;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(
        135deg,
        var(--enpho-blue, #00ADEF),
        var(--accent-green, #32bd78)
    );
    font-family: var(--body-font, "Roboto", sans-serif);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(0, 173, 239, 0.18);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Button hover */
.enpho-button:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 16px 32px rgba(0, 173, 239, 0.28);
}

/* Button icon */
.enpho-button i {
    font-size: 0.75rem;
    transition: transform 0.25s ease;
}

.enpho-button:hover i {
    transform: translateX(3px);
}

/* =========================================
   OUTLINE BUTTON
========================================= */
.enpho-button-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 46px;
    padding: 0.65rem 1.45rem;
    border: 1px solid var(--enpho-blue, #00ADEF);
    border-radius: 999px;
    color: var(--enpho-blue-dark, #007fae);
    background: #fff;
    font-family: var(--body-font, "Roboto", sans-serif);
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.25s ease;
}

.enpho-button-outline:hover {
    color: #fff;
    border-color: var(--enpho-blue, #00ADEF);
    background: var(--enpho-blue, #00ADEF);
    transform: translateY(-3px);
}

/* =========================================
   BUTTON SIZES
========================================= */
.enpho-button-sm {
    min-height: 40px;
    padding: 0.55rem 1.2rem;
    font-size: 0.75rem;
}

.enpho-button-lg {
    min-height: 52px;
    padding: 0.8rem 1.7rem;
    font-size: 0.88rem;
}