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

:root {
  /* === Clariona Brand Palette (v3b Cobalt-Cyan) === */
  --color-navy:        #0B1033;   /* dark navy blue background */
  --color-cobalt:      #0047FF;   /* primary accent, buttons */
  --color-cobalt-hover:#0038D4;   /* button hover */
  --color-cyan:        #00E5FF;   /* secondary accent, inner ring */
  --color-ice:         #F0F2F8;   /* page background */
  --color-steel:       #6B7A99;   /* muted body text */
  --color-white:       #FFFFFF;
  --color-border:      #E2E7F0;
  --color-text:        #0B1033;
  --color-text-muted:  #6B7A99;

  /* Dark section */
  --color-dark-card:   #131A40;   /* card bg on dark sections */
  --color-dark-border: rgba(0,71,255,0.32);

  /* Success / danger */
  --color-success:     #10B981;
  --color-danger:      #EF4444;

  --font-main: 'Inter', sans-serif;

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-pill: 100px;

  --shadow-sm:  0 2px 8px rgba(0,0,0,0.07);
  --shadow-md:  0 8px 32px rgba(0,0,0,0.12);
  --shadow-lg:  0 20px 60px rgba(0,0,0,0.18);
  --shadow-cobalt: 0 8px 24px rgba(0,71,255,0.25);

  --transition: 0.25s ease;

  --top-bar-height: 40px;
  --header-height: 72px;
}

/* === RESET === */
*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-main);
  color: var(--color-text);
  background: var(--color-ice);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* === TYPOGRAPHY === */
h1 {
  font-size: clamp(1.8rem, 4.5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}
h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; line-height: 1.3; }
h4 { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.75rem; }
p  { margin-bottom: 1rem; line-height: 1.7; }
a  { color: inherit; transition: var(--transition); }

/* === LAYOUT === */
.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}
.max-width-sm  { max-width: 640px;  margin: 0 auto; }
.max-width-md  { max-width: 820px;  margin: 0 auto; }
.max-width-lg  { max-width: 1000px; margin: 0 auto; }
.text-center   { text-align: center; }
.text-left     { text-align: left; }

/* === SPACING === */
.padding-y-xl  { padding: 100px 0; }
.padding-y-lg  { padding: 80px 0; }
.padding-y-md  { padding: 48px 0; }
.padding-y-sm  { padding: 28px 0; }

/* === BACKGROUNDS === */
.bg-ice    { background: var(--color-ice); }
.bg-white  { background: var(--color-white); }
.bg-navy   { background: var(--color-navy); color: #fff; }
.bg-dark-card { background: var(--color-dark-card); }

/* === COLOR UTILITIES === */
.text-cobalt  { color: var(--color-cobalt); }
.text-cyan    { color: var(--color-cyan); }
.text-steel   { color: var(--color-steel); }
.text-white   { color: #fff; }
.text-success { color: var(--color-success); }
.text-danger  { color: var(--color-danger); }

/* === ANIMATION === */
.fade-in-up {
  opacity: 0;
  transform: translateY(24px);
  animation: fadeInUp 0.7s ease forwards;
}
.fade-in-up:nth-child(2) { animation-delay: 0.1s; }
.fade-in-up:nth-child(3) { animation-delay: 0.2s; }
.fade-in-up:nth-child(4) { animation-delay: 0.3s; }
.fade-in-up:nth-child(5) { animation-delay: 0.4s; }

@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Intersection Observer triggered class */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* === GRID HELPERS === */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.align-center { align-items: center; }

/* === DIVIDER === */
.section-divider { width: 48px; height: 3px; background: var(--color-cobalt); border-radius: 2px; margin: 0 auto 1.5rem; }

/* === SEO BLOCK specific === */
.seo-footer-block { background: var(--color-white); border-top: 1px solid var(--color-border); font-size: 0.9rem; color: var(--color-text-muted); }
.seo-footer-block h2 { font-size: 1.25rem; color: var(--color-text); }
.seo-footer-block a { color: var(--color-cobalt); text-decoration: underline; text-underline-offset: 3px; }
.seo-footer-block a:hover { color: var(--color-cyan); }

/* === RESPONSIVE === */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .padding-y-lg { padding: 56px 0; }
  .padding-y-xl { padding: 72px 0; }
}