:root {
  --bg:#f3f6fb;
  --surface:#ffffff;
  --text:#1f2937;
  --muted:#5f6c7b;
  --primary:#0f61b6;
  --primary-dark:#0b4a8e;
  --accent:#22a7f0;
  --border:#e2e8f0;
  --shadow:0 24px 80px rgba(15, 97, 182, 0.08);
}

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

body {
  font-family:'Inter',sans-serif;
  background:
    radial-gradient(circle at top left, rgba(34,167,240,0.16), transparent 22%),
    radial-gradient(circle at bottom right, rgba(15,97,182,0.12), transparent 18%),
    var(--bg);
  color:var(--text);
  line-height:1.7;
  transition:background 0.3s ease, color 0.3s ease;
}

body::after {
  content:'';
  position:fixed;
  inset:0;
  background:rgba(255,255,255,0.96);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.25s ease;
  z-index:9999;
}

body.page-transitioning::after {
  opacity:1;
}

a {
  color:inherit;
  text-decoration:none;
  transition: color 0.25s ease, transform 0.25s ease;
}

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

.container {
  width:min(1150px,calc(100% - 2rem));
  margin:0 auto;
}

.site-header {
  background:#ffffff;
  box-shadow:0 18px 50px rgba(15, 97, 182, 0.06);
  position:relative;
  z-index:10;
}

.topbar {
  background:#eff6ff;
  text-align:center;
  padding:0.75rem 1rem;
  color:var(--primary-dark);
  font-size:0.9rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.navbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 0;
}

.brand {
  font-size:1.2rem;
  font-weight:800;
  color:var(--primary);
}

.brand span {
  color:var(--text);
}

.menu-toggle {
  display:none;
  border:none;
  background:none;
  font-size:1.2rem;
  color:var(--primary);
  cursor:pointer;
}

.nav-links {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
}

.nav-links a {
  font-weight:500;
  color:var(--text);
  transition:color 0.2s ease, transform 0.2s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color:var(--primary);
  transform:translateY(-1px);
}

.nav-links a:active {
  transform:translateY(0);
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  padding:0.95rem 1.45rem;
  border-radius:999px;
  font-weight:700;
  transition:all 0.25s ease;
}

.button:hover {
  transform:translateY(-1px);
}

.button:active {
  transform:scale(0.98);
}

.button-primary {
  background:var(--primary);
  color:#fff;
}

.button-primary:hover {
  background:var(--primary-dark);
}

.button-secondary {
  background:rgba(15,97,182,0.08);
  color:var(--primary);
}

.button-secondary:hover {
  background:rgba(15,97,182,0.14);
}

.button-ghost {
  border:1px solid var(--border);
  color:var(--text);
  background:#fff;
}

.button-ghost:hover {
  background:rgba(255,255,255,0.92);
  border-color:rgba(15,97,182,0.22);
}

.hero {
  position:relative;
  padding:4rem 0 3rem;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:3rem;
  align-items:center;
  background-image:url('hero-bg.svg');
  background-repeat:no-repeat;
  background-position:top right;
  background-size:44rem;
}

.hero::before {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 25%, rgba(255,255,255,0.9), transparent 20%),
    radial-gradient(circle at 85% 50%, rgba(15,97,182,0.08), transparent 18%);
}

.hero-copy .eyebrow,
.page-hero .eyebrow,
.section-intro .eyebrow {
  display:inline-block;
  margin-bottom:1rem;
  color:var(--accent);
  font-size:0.9rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
}

.hero-copy h1,
.page-hero h1,
.section-intro h2 {
  font-size:clamp(2.5rem,3.2vw,4rem);
  line-height:1.03;
  margin-bottom:1.2rem;
}

.brand-name {
  display:block;
  font-weight:900;
  color:var(--primary);
  margin-bottom:0.45rem;
  letter-spacing:-0.02em;
}

.hero-copy p {
  max-width:40rem;
  margin-bottom:2rem;
  color:var(--muted);
  font-size:1rem;
}

.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:0.85rem;
}

.hero-visual {
  position:relative;
  background:linear-gradient(180deg,rgba(15,97,182,0.12),rgba(255,255,255,0));
  border-radius:1.5rem;
  padding:2rem;
  box-shadow:var(--shadow);
  transition:transform 0.35s ease, box-shadow 0.35s ease;
}

.hero-visual:hover {
  transform:translateY(-5px);
  box-shadow:0 30px 90px rgba(15, 97, 182, 0.12);
}

.hero-image {
  width:100%;
  border-radius:1.5rem;
  object-fit:cover;
  display:block;
  margin-bottom:1.5rem;
  box-shadow:0 24px 60px rgba(15, 97, 182, 0.15);
  transition:transform 0.4s ease, opacity 0.4s ease;
}

.hero-image:hover {
  transform:scale(1.02);
}

.hero-card {
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:1.5rem;
  padding:2rem;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-card:hover {
  transform:translateY(-4px);
}

.hero-card span {
  display:inline-block;
  margin-bottom:1rem;
  color:var(--accent);
  font-size:0.85rem;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
}

.hero-card h2 {
  margin-bottom:1rem;
  font-size:1.75rem;
}

.hero-card p {
  color:var(--muted);
}

.page-hero {
  position:relative;
  display:grid;
  grid-template-columns:1.3fr 0.9fr;
  gap:2.5rem;
  align-items:center;
  padding:3.5rem 0;
  background:linear-gradient(180deg, rgba(15,97,182,0.05), rgba(255,255,255,0.98));
  border-radius:2rem;
  overflow:hidden;
  transition:transform 0.35s ease, box-shadow 0.35s ease;
}

.page-hero:hover {
  transform:translateY(-2px);
  box-shadow:0 22px 45px rgba(15,97,182,0.09);
}

.page-hero::before {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,0.92), transparent 20%),
    radial-gradient(circle at 85% 35%, rgba(34,167,240,0.10), transparent 18%);
}

.page-hero > * {
  position:relative;
  z-index:1;
}

.page-hero.page-hero-about {
  background-image:url('about-bg.svg');
  background-repeat:no-repeat;
  background-position:top right;
  background-size:45rem;
}

.page-hero.page-hero-services {
  background-image:url('services-bg.svg');
  background-repeat:no-repeat;
  background-position:top right;
  background-size:40rem;
}

.page-hero-visual {
  display:flex;
  justify-content:flex-end;
}

.page-hero-visual img {
  width:100%;
  max-width:520px;
  border-radius:1.75rem;
  box-shadow:0 26px 70px rgba(15,97,182,0.14);
  transition:transform 0.4s ease, opacity 0.4s ease;
}

.page-hero-visual img:hover {
  transform:translateY(-4px) scale(1.02);
}

.page-hero h1 {
  max-width:55rem;
}

.section {
  padding:3.5rem 0;
}

.split {
  display:grid;
  grid-template-columns:1.3fr 0.9fr;
  gap:3rem;
  align-items:start;
}

.grid-3 {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem;
}

.feature-card,
.icon-card,
.pill-card,
.content-block,
.contact-form-card,
.contact-info-card,
.aside-card {
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:1.5rem;
  padding:1.9rem;
  box-shadow:0 18px 40px rgba(15,97,182,0.05);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}

.feature-card:hover,
.icon-card:hover,
.pill-card:hover,
.visual-card:hover {
  transform:translateY(-6px);
  box-shadow:0 24px 58px rgba(15,97,182,0.10);
}

.feature-card h3,
.icon-card h3,
.pill-card h3,
.content-block h2,
.aside-card h3,
.contact-form-card h2,
.contact-info-card h3 {
  margin-bottom:0.9rem;
  font-size:1.15rem;
}

.feature-card p,
.icon-card p,
.pill-card p,
.content-block p,
.contact-info-card p,
.footer p {
  color:var(--muted);
}

.icon-card {
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.icon-card i,
.contact-info-row i {
  font-size:1.5rem;
  color:var(--primary);
}

.pill-card {
  padding:1.6rem;
}

.pill-card h3 {
  margin-bottom:0.75rem;
}

.section-footer {
  margin-top:1.5rem;
}

.section-intro {
  max-width:54rem;
  margin-bottom:2rem;
}

.section-intro p {
  color:var(--muted);
}

.checklist {
  list-style:none;
  margin-top:1.75rem;
  display:grid;
  gap:1rem;
}

.checklist li {
  padding-left:1.75rem;
  position:relative;
  color:var(--text);
}

.checklist li::before {
  content:'✓';
  position:absolute;
  left:0;
  top:0;
  color:var(--primary);
  font-weight:700;
}

.visual-card {
  display:grid;
  gap:1rem;
  padding:1.5rem;
  background:linear-gradient(180deg,#eef7ff,#ffffff);
}

.process-step {
  display:flex;
  align-items:flex-start;
  gap:1rem;
}

.process-step span {
  min-width:3rem;
  padding:0.7rem 0.9rem;
  border-radius:1rem;
  background:var(--primary);
  color:#fff;
  font-weight:700;
  font-size:0.95rem;
}

.process-step h4 {
  margin-bottom:0.45rem;
}

.cta-banner {
  background:linear-gradient(135deg,rgba(15,97,182,0.96),rgba(34,167,240,0.95));
  color:#fff;
  padding:3.5rem 0;
}

.cta-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}

.cta-banner h2,
.cta-card h2,
.cta-card h3 {
  margin-bottom:1rem;
}

.cta-banner p,
.cta-card p {
  color:rgba(255,255,255,0.88);
  max-width:44rem;
}

.cta-actions {
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}

.contact-grid {
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:2rem;
}

.contact-form-card form {
  display:grid;
  gap:1.25rem;
}

.form-row {
  display:grid;
  gap:0.65rem;
}

.form-row label {
  font-weight:600;
}

input,
select,
textarea {
  width:100%;
  border:1px solid var(--border);
  border-radius:1rem;
  padding:1rem 1.1rem;
  font-size:1rem;
  color:var(--text);
}

textarea {
  min-height:170px;
  resize:vertical;
}

input:focus,
select:focus,
textarea:focus {
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(15,97,182,0.12);
}

.contact-info-card {
  display:grid;
  gap:1.5rem;
}

.contact-info-row {
  display:flex;
  gap:1rem;
  align-items:flex-start;
}

.contact-info-row div p {
  margin-top:0.2rem;
}

.content-block {
  display:grid;
  gap:1rem;
}

.content-block ul,
.aside-card ul {
  list-style:disc;
  margin-left:1.25rem;
  color:var(--muted);
  display:grid;
  gap:0.8rem;
}

.cta-card {
  text-align:center;
  padding:2rem;
}

.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:2rem;
  padding:3rem 0 2rem;
}

.footer-small {
  padding-top:2rem;
}

.footer-brand {
  font-size:1.05rem;
}

.footer-links {
  list-style:none;
  display:grid;
  gap:0.75rem;
  margin-top:1rem;
}

.footer-links li {
  color:var(--muted);
}

.footer-bottom {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:1rem;
  padding:1.25rem 0 2rem;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:0.95rem;
}

.footer-meta {
  display:flex;
  gap:0.75rem;
  align-items:center;
}

.footer-meta a {
  color:var(--muted);
}

@media (max-width:1024px) {
  .grid-3,
  .split,
  .contact-grid,
  .footer-grid,
  .cta-inner,
  .page-hero {
    grid-template-columns:1fr;
  }
  .hero,
  .page-hero {
    grid-template-columns:1fr;
  }
  .page-hero-visual {
    justify-content:center;
  }
  .cta-banner {
    padding:2.5rem 0;
  }
}

@media (max-width:760px) {
  .navbar {
    flex-wrap:wrap;
  }
  .menu-toggle {
    display:block;
  }
  .nav-links {
    position:fixed;
    inset:0 0 auto auto;
    right:0;
    top:0;
    width:280px;
    height:100vh;
    background:#ffffff;
    flex-direction:column;
    align-items:flex-start;
    padding:4rem 1.5rem 1.5rem;
    border-left:1px solid var(--border);
    transform:translateX(100%);
    transition:transform 0.25s ease;
    box-shadow:-12px 0 40px rgba(15,97,182,0.08);
    z-index:20;
  }
  .nav-links.open {
    transform:translateX(0);
  }
  .nav-links a {
    width:100%;
    padding:0.95rem 0;
    border-bottom:1px solid var(--border);
  }
  .button {
    width:100%;
  }
  .hero-visual,
  .hero-card,
  .feature-card,
  .icon-card,
  .pill-card,
  .content-block,
  .contact-form-card,
  .contact-info-card,
  .aside-card,
  .cta-card {
    padding:1.5rem;
  }
}