@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700;900&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');
@import "../components/cta.css";

/* Brand Font (Arista Pro Alternate fallback) */
/* Note: Arista Pro is a premium font — we simulate it with   */
/* letter-spacing + weight adjustments on Montserrat/fallback */
@font-face {
  font-family: 'Arista Pro Alternate';
  src: local('Arista Pro Alternate');
  font-display: swap;
}

/* Base */
body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background: radial-gradient(circle at 10% 20%, rgba(0, 204, 255, 0.06) 0%, transparent 50%),
              radial-gradient(circle at 90% 80%, rgba(0, 0, 255, 0.05) 0%, transparent 50%);
  background-color: var(--color-white);
  background-attachment: fixed;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-brand);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-normal);
  color: var(--color-dark);
}

h1 { font-size: clamp(var(--text-4xl), 6vw, var(--text-6xl)); }
h2 { font-size: clamp(var(--text-3xl), 4.5vw, var(--text-5xl)); }
h3 { font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl)); }
h4 { font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl)); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

/* Brand Headline Class */
.headline-brand {
  font-family: var(--font-brand);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
}

.headline-editorial {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  letter-spacing: -0.04em;
  line-height: 1.05;
}

/* Body Text */
p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: 68ch;
}

p.lead {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
}

p.large {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

/* Label */
.label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-royal-blue);
}

.label-dark {
  color: var(--color-muted);
}

/* Caption */
.caption {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* Links */
a.inline-link {
  color: var(--color-royal-blue);
  font-weight: var(--weight-medium);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-base);
}

a.inline-link:hover {
  border-bottom-color: var(--color-royal-blue);
}

/* Strong & Em */
strong { font-weight: var(--weight-semibold); color: var(--color-dark); }
em     { font-style: italic; }

/* Liquid Glow Utility */
.section--liquid-glow {
  position: relative;
  overflow: hidden;
}

.section--liquid-glow::before {
  content: '';
  position: absolute;
  top: -10%;
  left: -10%;
  width: 50%;
  height: 50%;
  background: radial-gradient(circle, rgba(0, 204, 255, 0.08) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
  filter: blur(40px);
}

.section--liquid-glow::after {
  content: '';
  position: absolute;
  bottom: -10%;
  right: -10%;
  width: 50%;
  height: 50%;
  background: radial-gradient(circle, rgba(0, 0, 255, 0.05) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
  filter: blur(40px);
}

.section--liquid-glow > * {
  position: relative;
  z-index: 1;
}