/* Blue Caterpillar LLC - Stylesheet */
/* Inspired by chaos theory, non-linear systems, and emergent patterns */

:root {
  --primary-blue: #2f5aae;
  --dark-blue: #0f2744;
  --accent-blue: #4a90d9;
  --accent-cyan: #38bdf8;
  --light-blue: #e8f4fc;
  --pale-blue: #f0f7fc;
  --text-dark: #1a2a3a;
  --text-light: #4a5568;
  --white: #fff;
  --max-width: 1000px;
  --shadow: 0 4px 24px rgba(15, 39, 68, 0.1);
  --shadow-hover: 0 12px 40px rgba(47, 90, 174, 0.18);
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-dark);
  background: var(--white);
}

a {
  color: var(--primary-blue);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--accent-cyan);
}

/* Header & Navigation */
header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 1.25rem 2rem;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(47, 90, 174, 0.1);
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.logo {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--dark-blue);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.logo svg {
  width: 44px;
  height: 44px;
}

nav {
  display: flex;
  gap: 2rem;
}

nav a {
  color: var(--text-light);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.5rem 0;
  position: relative;
}

nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary-blue), var(--accent-cyan));
  transition: width 0.3s ease;
}

nav a:hover::after,
nav a.active::after {
  width: 100%;
}

nav a:hover,
nav a.active {
  color: var(--primary-blue);
}

/* Hero Section - Dynamic gradient suggesting phase space */
.hero {
  background: linear-gradient(135deg, var(--dark-blue) 0%, #1a3d5c 25%, var(--primary-blue) 50%, #3d72b4 75%, var(--accent-blue) 100%);
  color: var(--white);
  padding: 3rem 2rem;
  position: relative;
  overflow: hidden;
}

/* Animated flowing background - suggesting dynamic systems */
.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(56, 189, 248, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(74, 144, 217, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
  animation: flowField 20s ease-in-out infinite;
}

@keyframes flowField {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(2%, 1%) rotate(1deg); }
  66% { transform: translate(-1%, 2%) rotate(-1deg); }
}

/* Dense strange attractor in hero background */
.hero::after {
  content: '';
  position: absolute;
  right: -8%;
  top: 50%;
  transform: translateY(-50%) rotate(-15deg);
  width: 70%;
  height: 140%;
  opacity: 0.11;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 480 360' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='rotate(-5 240 180)'%3E%3Cpath d='M220 180 C160 100, 40 40, -20 120 C-60 180, 0 280, 80 300 C180 320, 200 220, 220 180 C240 140, 340 100, 420 160 C480 210, 450 290, 380 310 C280 340, 230 240, 220 180' stroke='%23ffffff' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M220 180 C170 110, 60 60, 0 130 C-40 180, 20 260, 90 280 C170 300, 200 210, 220 180 C240 150, 330 120, 400 170 C460 210, 430 280, 370 300 C280 320, 230 230, 220 180' stroke='%23ffffff' stroke-width='3' fill='none' stroke-linecap='round' opacity='0.85'/%3E%3Cpath d='M220 180 C180 120, 80 80, 20 140 C-20 180, 30 250, 100 270 C170 290, 200 205, 220 180 C238 155, 320 130, 385 175 C440 210, 415 270, 360 290 C280 310, 230 225, 220 180' stroke='%23ffffff' stroke-width='2.5' fill='none' stroke-linecap='round' opacity='0.7'/%3E%3Cpath d='M220 180 C185 130, 95 95, 40 145 C0 185, 40 245, 105 265 C165 280, 202 200, 220 180 C235 160, 310 140, 370 180 C420 215, 400 265, 350 285 C280 305, 230 220, 220 180' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round' opacity='0.6'/%3E%3Cpath d='M220 180 C190 140, 110 110, 60 150 C20 185, 50 240, 110 255 C165 270, 205 198, 220 180 C232 165, 300 150, 355 185 C400 215, 385 258, 340 275 C280 295, 230 215, 220 180' stroke='%23ffffff' stroke-width='1.5' fill='none' stroke-linecap='round' opacity='0.5'/%3E%3Cpath d='M220 180 C195 145, 125 120, 80 155 C40 185, 60 235, 115 250 C165 265, 205 195, 220 180 C230 168, 290 155, 340 185 C380 210, 370 250, 330 265 C275 285, 230 210, 220 180' stroke='%23ffffff' stroke-width='1.2' fill='none' stroke-linecap='round' opacity='0.4'/%3E%3Cpath d='M220 180 C200 150, 140 130, 100 160 C65 185, 75 230, 120 245 C165 260, 205 192, 220 180 C228 172, 280 160, 325 185 C360 205, 350 242, 318 258 C275 275, 230 205, 220 180' stroke='%23ffffff' stroke-width='1' fill='none' stroke-linecap='round' opacity='0.35'/%3E%3Cpath d='M220 180 C205 155, 150 138, 115 165 C85 190, 95 225, 130 240 C165 252, 208 190, 220 180 C226 175, 270 165, 310 185 C345 202, 338 235, 305 250 C270 265, 228 202, 220 180' stroke='%23ffffff' stroke-width='0.8' fill='none' stroke-linecap='round' opacity='0.28'/%3E%3Cpath d='M220 180 C210 160, 162 145, 135 168 C110 190, 118 220, 145 232 C172 244, 210 188, 220 180 C225 177, 262 170, 295 188 C322 202, 318 228, 292 242 C262 258, 227 198, 220 180' stroke='%23ffffff' stroke-width='0.6' fill='none' stroke-linecap='round' opacity='0.22'/%3E%3Cpath d='M220 180 C214 165, 175 155, 155 172 C138 188, 145 212, 165 222 C185 232, 212 186, 220 180 C224 178, 255 174, 280 188 C302 200, 298 220, 278 232 C255 245, 226 195, 220 180' stroke='%23ffffff' stroke-width='0.5' fill='none' stroke-linecap='round' opacity='0.18'/%3E%3Ccircle cx='220' cy='180' r='5' fill='%23ffffff' opacity='0.5'/%3E%3Ccircle cx='220' cy='180' r='8' stroke='%23ffffff' stroke-width='0.5' fill='none' opacity='0.25'/%3E%3Ccircle cx='80' cy='195' r='3' fill='%23ffffff' opacity='0.3'/%3E%3Ccircle cx='360' cy='220' r='3' fill='%23ffffff' opacity='0.3'/%3E%3Ccircle cx='50' cy='175' r='2' fill='%23ffffff' opacity='0.2'/%3E%3Ccircle cx='390' cy='200' r='2' fill='%23ffffff' opacity='0.2'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.hero blockquote {
  font-size: 1.35rem;
  font-style: italic;
  opacity: 0.95;
  border: none;
  padding: 0;
  margin-bottom: 1.25rem;
  max-width: 700px;
}

.hero blockquote cite {
  display: block;
  margin-top: 1rem;
  font-size: 1rem;
  font-style: normal;
  opacity: 0.8;
}

.hero h1 {
  font-size: 2.75rem;
  font-weight: 700;
  margin: 0;
  color: var(--white);
  letter-spacing: -0.5px;
}

.hero .tagline {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.95);
  margin-top: 1rem;
  max-width: 550px;
}

/* Main Content */
main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 4rem 2rem;
}

.intro {
  font-size: 1.25rem;
  color: var(--text-light);
  max-width: 750px;
  margin-bottom: 3rem;
  line-height: 1.8;
}

h1 {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--dark-blue);
  margin-bottom: 1.5rem;
}

h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--dark-blue);
  margin: 3rem 0 1.5rem;
}

h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 1.5rem 0 0.5rem;
}

p {
  margin-bottom: 1.25rem;
  color: var(--text-light);
}

/* Strange Attractor Decorations */
.attractor-bg {
  position: absolute;
  opacity: 0.06;
  pointer-events: none;
}

.attractor-bg svg {
  width: 100%;
  height: 100%;
}

/* Philosophy callout */
.philosophy {
  background: linear-gradient(135deg, var(--pale-blue) 0%, var(--light-blue) 100%);
  border-radius: 20px;
  padding: 2.5rem;
  padding-right: 3rem;
  margin: 3rem 0;
  position: relative;
  overflow: hidden;
}

.philosophy::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(47, 90, 174, 0.08) 0%, transparent 70%);
}

.philosophy .attractor-bg {
  right: -50px;
  top: 50%;
  transform: translateY(-50%);
  width: 280px;
  height: 200px;
  opacity: 0.12;
}

/* Attractor Section - Featured on About page */
.attractor-section {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 3rem;
  align-items: center;
  margin: 3rem 0;
  padding: 3rem;
  background: linear-gradient(135deg, var(--dark-blue) 0%, var(--primary-blue) 100%);
  border-radius: 24px;
  color: white;
}

.attractor-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.attractor-visual svg {
  width: 100%;
  max-width: 280px;
  filter: drop-shadow(0 0 20px rgba(56, 189, 248, 0.3));
}

.attractor-content h2 {
  color: white;
  margin: 0 0 1.25rem;
  font-size: 1.6rem;
}

.attractor-content p {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1rem;
  line-height: 1.7;
}

.attractor-content p:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .attractor-section {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .attractor-visual {
    order: -1;
  }

  .attractor-visual svg {
    max-width: 200px;
  }
}

/* Chaos Theory Details Grid */
.chaos-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin: 3rem 0;
}

.chaos-card {
  background: var(--white);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: var(--shadow);
  border: 1px solid rgba(47, 90, 174, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.chaos-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.chaos-card h3 {
  margin: 0 0 0.75rem;
  color: var(--dark-blue);
  font-size: 1.1rem;
}

.chaos-card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
}

@media (max-width: 768px) {
  .chaos-details {
    grid-template-columns: 1fr;
  }
}

/* Attractor Gallery */
.attractor-gallery {
  margin: 4rem 0;
  text-align: center;
}

.attractor-gallery h2 {
  margin-bottom: 0.75rem;
  background: linear-gradient(135deg, var(--dark-blue), var(--primary-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gallery-intro {
  max-width: 600px;
  margin: 0 auto 2.5rem;
  font-size: 1.05rem;
}

.attractor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.attractor-item {
  background: linear-gradient(135deg, var(--pale-blue) 0%, var(--light-blue) 100%);
  border-radius: 16px;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: transform 0.3s ease;
}

.attractor-item:hover {
  transform: translateY(-4px);
}

.attractor-item svg {
  width: 120px;
  height: 120px;
  margin-bottom: 1.25rem;
  filter: drop-shadow(0 2px 8px rgba(47, 90, 174, 0.15));
}

.attractor-item h4 {
  margin: 0 0 0.5rem;
  color: var(--dark-blue);
  font-size: 1.05rem;
}

.attractor-item p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-light);
}

@media (max-width: 768px) {
  .attractor-grid {
    grid-template-columns: 1fr;
    max-width: 350px;
    margin: 0 auto;
  }
}

.philosophy h2 {
  margin-top: 0;
  color: var(--dark-blue);
}

.philosophy p {
  position: relative;
  font-size: 1.1rem;
}

/* Section Headers */
.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-header h2 {
  margin-bottom: 0.75rem;
  background: linear-gradient(135deg, var(--dark-blue), var(--primary-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-header p {
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
}

/* Stats Bar - key metrics */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
  margin: 3rem 0;
}

.stat-item {
  background: var(--white);
  padding: 2rem 1.5rem;
  border-radius: 16px;
  text-align: center;
  box-shadow: var(--shadow);
  border: 1px solid rgba(47, 90, 174, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary-blue), var(--accent-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}

.stat-label {
  font-size: 0.85rem;
  color: var(--text-light);
  margin-top: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Pillars Grid - using card design with emergent connections */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin: 3rem 0;
}

.pillar {
  background: var(--white);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
  border: 1px solid rgba(47, 90, 174, 0.08);
  position: relative;
  overflow: hidden;
}

.pillar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-blue), var(--accent-cyan));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.pillar:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

.pillar:hover::before {
  transform: scaleX(1);
}

.pillar-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--dark-blue), var(--primary-blue));
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  position: relative;
}

.pillar-icon::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary-blue), var(--accent-cyan));
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pillar:hover .pillar-icon::after {
  opacity: 1;
}

.pillar-icon svg {
  width: 28px;
  height: 28px;
  stroke: white;
  stroke-width: 2;
  fill: none;
}

.pillar h3 {
  margin: 0 0 0.75rem;
  color: var(--dark-blue);
  font-size: 1.15rem;
}

.pillar p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
}

/* Email Signup Box - gradient with depth */
.signup-box {
  background: linear-gradient(135deg, var(--dark-blue) 0%, var(--primary-blue) 60%, var(--accent-blue) 100%);
  padding: 4rem;
  margin: 4rem 0;
  text-align: center;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}

.signup-box::before {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(56, 189, 248, 0.2) 0%, transparent 40%),
    radial-gradient(ellipse at 70% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 40%);
  animation: flowField 15s ease-in-out infinite;
}

.signup-box h2 {
  margin: 0 0 0.75rem;
  color: var(--white);
  position: relative;
  font-size: 1.75rem;
}

.signup-box p {
  margin-bottom: 1.75rem;
  color: rgba(255,255,255,0.9);
  position: relative;
  font-size: 1.1rem;
}

.btn {
  display: inline-block;
  background: var(--white);
  color: var(--dark-blue);
  padding: 1rem 2.5rem;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
  color: var(--dark-blue);
}

.btn-outline {
  background: transparent;
  color: var(--primary-blue);
  border: 2px solid var(--primary-blue);
  box-shadow: none;
}

.btn-outline:hover {
  background: var(--primary-blue);
  color: white;
  box-shadow: 0 4px 15px rgba(47, 90, 174, 0.3);
}

/* Subscribe Section - Two Tiers */
.subscribe-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 4rem 0;
}

.subscribe-tier {
  background: var(--white);
  border-radius: 20px;
  padding: 2.5rem;
  text-align: center;
  box-shadow: var(--shadow);
  border: 1px solid rgba(47, 90, 174, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.subscribe-tier:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.subscribe-tier.premium {
  background: linear-gradient(135deg, var(--dark-blue) 0%, var(--primary-blue) 100%);
  color: white;
  border: none;
}

.subscribe-tier.premium::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 50%);
}

.tier-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.4rem 1rem;
  border-radius: 20px;
}

.subscribe-tier h3 {
  margin: 0.5rem 0 0.75rem;
  font-size: 1.4rem;
  color: var(--dark-blue);
}

.subscribe-tier.premium h3 {
  color: white;
}

.tier-price {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 1rem;
  color: var(--primary-blue);
}

.subscribe-tier.premium .tier-price {
  color: white;
  font-size: 1.5rem;
}

.price-alt {
  display: block;
  font-size: 0.9rem;
  opacity: 0.8;
  font-weight: 500;
  margin-top: 0.25rem;
}

.tier-description {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: var(--text-light);
}

.subscribe-tier.premium .tier-description {
  color: rgba(255,255,255,0.85);
}

.subscribe-tier .btn {
  width: 100%;
}

.subscribe-tier.premium .btn {
  background: white;
  color: var(--dark-blue);
}

.subscribe-tier.premium .btn:hover {
  background: var(--accent-cyan);
  color: white;
}

.tier-features {
  list-style: none;
  text-align: left;
  margin: 0 0 1.5rem;
  padding: 0;
}

.tier-features li {
  padding: 0.5rem 0;
  padding-left: 1.75rem;
  position: relative;
  font-size: 0.95rem;
  color: var(--text-light);
}

.subscribe-tier.premium .tier-features li {
  color: rgba(255,255,255,0.85);
}

.tier-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.75rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-blue);
}

.subscribe-tier.premium .tier-features li::before {
  background: var(--accent-cyan);
}

/* Research/Blog List */
.post-list {
  list-style: none;
}

.post-list li {
  background: var(--white);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow);
  border: 1px solid rgba(47, 90, 174, 0.08);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.post-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--primary-blue), var(--accent-cyan));
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.post-list li:hover {
  transform: translateX(8px);
  box-shadow: var(--shadow-hover);
}

.post-list li:hover::before {
  transform: scaleY(1);
}

.post-list .date {
  font-size: 0.85rem;
  color: var(--accent-blue);
  font-weight: 600;
  margin-bottom: 0.5rem;
  letter-spacing: 0.5px;
}

.post-list h3 {
  margin: 0 0 0.5rem;
}

.post-list h3 a {
  color: var(--dark-blue);
  transition: color 0.2s;
}

.post-list h3 a:hover {
  color: var(--primary-blue);
}

.post-list p {
  margin: 0;
  font-size: 0.95rem;
}

/* Contact */
.contact-info {
  background: linear-gradient(135deg, var(--pale-blue) 0%, var(--light-blue) 100%);
  padding: 3rem;
  border-radius: 20px;
  margin: 2rem 0;
  position: relative;
  overflow: hidden;
}

.contact-info::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -25%;
  width: 50%;
  height: 200%;
  background: radial-gradient(circle, rgba(47, 90, 174, 0.08) 0%, transparent 60%);
}

.contact-info h2 {
  margin-top: 0;
}

.contact-info p {
  margin-bottom: 0.75rem;
  position: relative;
}

.contact-info a {
  font-weight: 600;
  background: linear-gradient(135deg, var(--primary-blue), var(--accent-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Content Cards */
.content-card {
  background: var(--white);
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: var(--shadow);
  margin: 2rem 0;
  border: 1px solid rgba(47, 90, 174, 0.08);
  position: relative;
  overflow: hidden;
}

.content-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.06) 0%, transparent 70%);
}

.content-card h2 {
  margin-top: 0;
}

/* Footer */
footer {
  background: var(--dark-blue);
  color: rgba(255,255,255,0.7);
  padding: 3rem 2rem;
  text-align: center;
  font-size: 0.9rem;
  position: relative;
  overflow: hidden;
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
}

footer p {
  color: rgba(255,255,255,0.7);
  margin: 0;
  position: relative;
}

/* Responsive */
@media (max-width: 768px) {
  .hero {
    padding: 2rem 1.5rem;
  }

  .hero blockquote {
    font-size: 1.25rem;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .pillars {
    grid-template-columns: 1fr;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-number {
    font-size: 2rem;
  }

  .signup-box {
    padding: 3rem 2rem;
  }
}

@media (max-width: 600px) {
  .header-inner {
    flex-direction: column;
    text-align: center;
  }

  nav {
    gap: 1.25rem;
  }

  main {
    padding: 2.5rem 1.25rem;
  }

  h1 {
    font-size: 1.75rem;
  }

  .signup-box {
    padding: 2.5rem 1.5rem;
    border-radius: 16px;
  }
}

/* Inline Forms */
.inline-form {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.hidden {
  display: none !important;
}

.inline-form.hidden {
  display: none;
}

.inline-form input {
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  border: 2px solid rgba(47, 90, 174, 0.2);
  border-radius: 10px;
  background: var(--white);
  color: var(--text-dark);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.inline-form input:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(47, 90, 174, 0.1);
}

.inline-form input::placeholder {
  color: var(--text-light);
  opacity: 0.7;
}

.inline-form .btn {
  margin-top: 0.5rem;
}

.signup-box .inline-form .interest-fieldset {
  border-color: rgba(255, 255, 255, 0.3);
}

.signup-box .inline-form .interest-fieldset legend {
  color: rgba(255, 255, 255, 0.9);
}

.signup-box .inline-form .checkbox-label {
  color: rgba(255, 255, 255, 0.9);
}

.signup-box .inline-form .accredited-label {
  color: rgba(255, 255, 255, 0.9);
}

.signup-box .inline-form .btn-outline {
  border-color: var(--white);
  color: var(--white);
}

.signup-box .inline-form .btn-outline:hover {
  background: var(--white);
  color: var(--dark-blue);
}

/* Investment Letters */
.letters-intro {
  max-width: 700px;
  margin-bottom: 2.5rem;
}

.letters-intro p {
  font-size: 1.05rem;
  color: var(--text-light);
}

.letters-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.letter-card {
  background: var(--white);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: var(--shadow);
  border: 1px solid rgba(47, 90, 174, 0.08);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.3s;
}

.letter-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--primary-blue), var(--accent-cyan));
}

.letter-card:hover {
  box-shadow: var(--shadow-hover);
}

.letter-date {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary-blue);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.letter-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--dark-blue);
  margin: 0 0 0.75rem;
  line-height: 1.4;
}

.letter-summary {
  font-size: 0.95rem;
  color: var(--text-light);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.letter-tickers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ticker {
  display: inline-block;
  background: var(--pale-blue);
  color: var(--primary-blue);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  letter-spacing: 0.5px;
  border: 1px solid rgba(47, 90, 174, 0.15);
}

.letters-subscribe {
  background: linear-gradient(135deg, var(--pale-blue) 0%, var(--light-blue) 100%);
  border-radius: 20px;
  padding: 2.5rem;
  margin-top: 1rem;
}

.letters-subscribe h2 {
  color: var(--dark-blue);
  font-size: 1.4rem;
  margin: 0 0 0.75rem;
}

.letters-subscribe > p {
  color: var(--text-light);
  font-size: 1.05rem;
  margin-bottom: 1.5rem;
}

.letters-subscribe-form .form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.letters-subscribe-form .form-group {
  margin-bottom: 1.25rem;
}

.letters-subscribe-form .form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-dark);
}

.letters-subscribe-form .form-group input {
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  border: 2px solid rgba(47, 90, 174, 0.2);
  border-radius: 10px;
  background: var(--white);
  color: var(--text-dark);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.letters-subscribe-form .form-group input:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(47, 90, 174, 0.1);
}

.letters-subscribe-form .form-group input::placeholder {
  color: var(--text-light);
  opacity: 0.7;
}

@media (max-width: 600px) {
  .letters-subscribe-form .form-row {
    grid-template-columns: 1fr;
  }
}

/* Collaboration Form */
.collaboration-intro {
  background: linear-gradient(135deg, var(--pale-blue) 0%, var(--light-blue) 100%);
  padding: 2.5rem;
  border-radius: 20px;
  margin-bottom: 3rem;
}

.collaboration-intro p {
  margin-bottom: 1rem;
  font-size: 1.05rem;
}

.collaboration-intro ol {
  padding-left: 3rem;
  padding-right: 2rem;
}

.collaboration-intro p:last-child {
  margin-bottom: 0;
}

.collaboration-form {
  background: var(--white);
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: var(--shadow);
  border: 1px solid rgba(47, 90, 174, 0.08);
}

.form-section {
  margin-bottom: 2.5rem;
}

.form-section:last-of-type {
  margin-bottom: 2rem;
}

.form-section h3 {
  margin: 0 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--light-blue);
  color: var(--dark-blue);
  font-size: 1.15rem;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-dark);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  border: 2px solid rgba(47, 90, 174, 0.2);
  border-radius: 10px;
  background: var(--white);
  color: var(--text-dark);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(47, 90, 174, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-light);
  opacity: 0.7;
}

.form-group select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234a5568' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.form-actions {
  text-align: center;
  padding-top: 1rem;
}

.form-actions .btn {
  min-width: 200px;
}

/* File Upload Inputs */
.file-upload-note {
  font-size: 0.9rem;
  color: var(--text-light);
  margin-bottom: 1.25rem;
  font-style: italic;
}

.form-group input[type="file"] {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px dashed rgba(47, 90, 174, 0.3);
  border-radius: 10px;
  background: var(--pale-blue);
  cursor: pointer;
  font-size: 0.95rem;
  transition: border-color 0.2s, background 0.2s;
}

.form-group input[type="file"]:hover {
  border-color: var(--primary-blue);
  background: var(--light-blue);
}

/* Interest Fieldset & Checkbox Styles */
.interest-fieldset {
  border: 2px solid rgba(47, 90, 174, 0.15);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin: 0;
}

.interest-fieldset legend {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-dark);
  padding: 0 0.5rem;
}

.interest-fieldset .checkbox-label {
  display: inline-flex;
  margin-right: 1.25rem;
  margin-bottom: 0.5rem;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: var(--text-dark);
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary-blue);
  cursor: pointer;
}

.accredited-label {
  margin-top: 0.25rem;
  font-weight: 600;
}

.form-status {
  text-align: center;
  font-size: 0.95rem;
  margin-top: 0.5rem;
}

.form-status.error {
  color: #dc2626;
}

/* Publications Page */
.publications-intro {
  max-width: 700px;
  margin-bottom: 2.5rem;
}

.publications-intro p {
  font-size: 1.05rem;
  color: var(--text-light);
}

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

.pub-column {
  background: var(--white);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: var(--shadow);
  border: 1px solid rgba(47, 90, 174, 0.08);
  position: relative;
  overflow: hidden;
}

.pub-column::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-blue), var(--accent-cyan));
}

.pub-column-heading {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--dark-blue);
  margin: 0 0 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--light-blue);
}

.pub-column-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pub-column-list li {
  padding: 1rem 0;
  border-bottom: 1px solid rgba(47, 90, 174, 0.06);
}

.pub-column-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.pub-column-list li:first-child {
  padding-top: 0;
}

.pub-item-title {
  display: block;
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0.35rem;
}

.pub-item-meta {
  display: block;
  font-size: 0.85rem;
  color: var(--text-light);
  font-style: italic;
}

.pub-item-link {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary-blue);
  text-decoration: none;
  transition: color 0.2s;
}

.pub-item-link:hover {
  color: var(--accent-cyan);
}

@media (max-width: 768px) {
  .pub-columns {
    grid-template-columns: 1fr;
  }
}