:root{
  --bg: #ffffff;
  --bg-secondary: #f8f9fa;
  --text: #2d3748;
  --text-primary: #1a202c;
  --muted: #718096;
  --brand: #20B2AA;
  --brand-2:#FF8C00;
  --accent: #4682B4;
  --accent-2: #2b6cb0;
  --orange-light: #FFB84D;
  --teal-light: #5DDEF4;
  --card: rgba(32,178,170,0.05);
  --card-hover: rgba(32,178,170,0.08);
  --stroke: rgba(32,178,170,0.15);
  --stroke-orange: rgba(255,140,0,0.2);
  --glow: 0 8px 25px rgba(32,178,170,.08), 0 4px 12px rgba(255,140,0,.05);
  --glow-strong: 0 12px 35px rgba(32,178,170,.12), 0 6px 18px rgba(255,140,0,.08);
}
/* Advanced Animations & Micro-interactions */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes staggerIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: var(--glow); }
  50% { box-shadow: var(--glow-strong); }
}

/* Scroll reveal classes */
.fade-in-up { 
  animation: fadeInUp 0.8s ease-out forwards; 
}
.stagger-1 { animation: staggerIn 0.6s ease-out 0.1s forwards; opacity: 0; }
.stagger-2 { animation: staggerIn 0.6s ease-out 0.2s forwards; opacity: 0; }
.stagger-3 { animation: staggerIn 0.6s ease-out 0.3s forwards; opacity: 0; }
.stagger-4 { animation: staggerIn 0.6s ease-out 0.4s forwards; opacity: 0; }

/* Cards start invisible for fade-in effect */
.card:not(.fade-in-up), .solution:not(.fade-in-up), .price:not(.fade-in-up), .section-head:not(.fade-in-up) {
  opacity: 0;
  transform: translateY(30px);
}

/* Enhanced hover states - REMOVED due to conflicts with hover reset */
.card, .solution, .price {
  /* Only animate the shadow to keep hover subtle */
  transition: box-shadow 0.25s ease;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--text);
  background: 
    radial-gradient(circle at 20% 20%, rgba(32,178,170,.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,140,0,.03) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(70,130,180,.02) 0%, transparent 50%),
    linear-gradient(135deg, var(--bg) 0%, var(--bg-secondary) 100%);
  background-attachment: fixed;
  line-height:1.6;
  min-height: 100vh;
}

/* Enhanced Typography */
h1, h2, h3 {
  font-family: 'Outfit', Inter, system-ui, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variation-settings: 'wght' 800;
}

h2 {
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  font-variation-settings: 'wght' 700;
}

h3 {
  font-weight: 600;
  line-height: 1.3;
  font-variation-settings: 'wght' 600;
}

/* Text shimmer effect for special elements */
.text-shimmer {
  background: linear-gradient(45deg, var(--brand), var(--brand-2), var(--teal-light), var(--brand));
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer-text 3s ease-in-out infinite;
}

@keyframes shimmer-text {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Advanced Loading States */
.skeleton {
  background: linear-gradient(90deg, 
    rgba(32,178,170,0.1) 25%, 
    rgba(32,178,170,0.2) 50%, 
    rgba(32,178,170,0.1) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 8px;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Parallax elements */
.parallax {
  will-change: transform;
  transition: transform 0.1s ease-out;
}

/* Enhanced scroll indicators */
.scroll-indicator {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  transform-origin: left;
  transform: scaleX(0);
  z-index: 100;
  transition: transform 0.1s ease-out;
}

.container{
  /* Fallback for Edge without min() support */
  width: 92%; 
  max-width: 1120px;
  width:min(1120px, 92%); 
  margin:0 auto;
}
/* Modern Focus States & Accessibility */
*:focus {
  outline: none;
}

*:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

.btn:focus-visible, .nav a:focus-visible {
  outline: 3px solid var(--teal-light);
  outline-offset: 3px;
  box-shadow: 
    var(--glow-strong),
    0 0 0 3px rgba(32,178,170,0.2);
}

/* Reduced motion preferences - preserve fade animations but reduce others */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  /* Allow fade-in animations even with reduced motion */
  .fade-in-up,
  .stagger-1, .stagger-2, .stagger-3, .stagger-4 {
    animation-duration: 0.3s !important;
  }
  
  .parallax {
    transform: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --stroke: rgba(45,55,72,0.4);
    --card: rgba(45,55,72,0.1);
  }
}

.section{padding:80px 0}
/* Interactive Cursor Effects */
.cursor-glow {
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.cursor-glow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), 
    rgba(32,178,170,0.1) 0%, 
    transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.cursor-glow:hover::before {
  opacity: 1;
}

/* Magnetic buttons */
.btn-magnetic {
  transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Enhanced card interactions */
.card-interactive {
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

.card-interactive:hover {
  transform: rotateX(2deg) rotateY(2deg) scale(1.02);
}

/* Floating action elements */
.floating {
  animation: float-gentle 6s ease-in-out infinite;
}

@keyframes float-gentle {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.section-head{max-width:900px; margin:0 auto 40px; text-align:center}
.section-head h2{
  /* Fallback for Edge without clamp() support */
  font-size: 2.2rem;
  font-size:clamp(1.8rem, 1.2rem + 2.5vw, 2.8rem); 
  margin:0 0 20px; 
  font-family: 'Outfit', Inter, system-ui, sans-serif; font-weight: 700; 
  letter-spacing: -0.01em; color: var(--text-primary);
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--brand) 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-head p{color:var(--muted); margin:0; font-size: 1.1rem; line-height: 1.6}

/* Glass UI */
.glass{
  background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.6) 100%);
  /* Fallback for Edge without backdrop-filter support */
  background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(248,249,250,0.9) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--stroke); 
  border-radius: 20px; 
  box-shadow: var(--glow);
  position: relative;
  overflow: hidden;
}
.glass::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand), var(--brand-2), transparent);
  opacity: 0.6;
}
.glass:hover {
  /* Keep it very subtle across glass elements: only a slight shadow */
  background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(248,249,250,0.95) 100%);
  box-shadow: var(--glow);
  transition: box-shadow 0.25s ease;
}
.glass.subtle{background: linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(248,249,250,0.8) 100%)}

/* Header */
.site-header{
  position:sticky; top:20px; margin:20px auto; width:min(1120px, 92%); 
  padding:16px 24px; display:flex; align-items:center; gap:16px; z-index:50;
  /* Fallback background for Edge */
  background: rgba(255,255,255,0.9);
  background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,249,250,0.95) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--stroke);
  border-radius: 24px;
  box-shadow: var(--glow);
}
.brand{display:flex; align-items:center; gap:8px; font-family: 'Outfit', Inter, system-ui, sans-serif; font-weight:800; letter-spacing:.1px; text-decoration:none; color:var(--text); font-size:1rem; white-space: nowrap; overflow: hidden}
.logo-svg{
  width: 32px; 
  height: 32px; 
  display: inline-block;
  /* Static bee hive - no animation */
  transform-origin: center; 
}

/* Bee hive logo is static - no animations needed */

/* SVG Logo Styles - bee hive design */
.logo-svg g { 
  stroke: var(--brand); 
  stroke-width: 1.5; 
  fill: none;
  stroke-linejoin: round;
}

.logo-svg ellipse {
  fill: var(--brand);
  opacity: 0.6;
}

/* Static bee hive - no reduced motion considerations needed */
.nav{margin-left:auto; display:flex; align-items:center; gap:8px}
.nav a{
  color:var(--text); text-decoration:none; padding:10px 16px; border-radius:12px; 
  opacity:.9; font-weight: 500; transition: all 0.3s ease;
  position: relative; font-size: 0.9rem;
}
.nav a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  transition: all 0.3s ease;
  transform: translateX(-50%);
}
.nav a:hover{
  background: linear-gradient(135deg, rgba(32,178,170,0.08), rgba(255,140,0,0.04));
  color: var(--text-primary);
  opacity: 1;
}
.nav a:hover::before {
  width: 80%;
}
.nav .active{
  background: linear-gradient(135deg, rgba(32,178,170,0.1), rgba(255,140,0,0.06));
  color: var(--text-primary);
  font-weight: 600;
}
.hamburger{display:none; margin-left:auto; background:none; border:0; padding:8px; cursor:pointer}
.hamburger span{display:block; width:22px; height:2px; background:#2d3748; margin:5px 0; border-radius:2px}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; 
  padding:12px 24px; border-radius:16px; 
  border:1px solid var(--stroke); color:var(--text-primary); text-decoration:none; 
  background:linear-gradient(135deg, rgba(255,255,255,.9), rgba(248,249,250,.8)); 
  box-shadow: var(--glow);
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition: left 0.5s ease;
}
.btn:hover::before {
  left: 100%;
}
.btn:hover{
  transform: translateY(-2px);
  box-shadow: var(--glow-strong);
  border-color: var(--brand);
}
.btn.primary{
  background: var(--brand); 
  border: 1px solid var(--brand);
  color: white;
  font-weight: 700;
}
.btn.primary:hover {
  background: var(--teal-light);
  border-color: var(--teal-light);
  box-shadow: 0 25px 50px rgba(32,178,170,.3), 0 12px 30px rgba(255,140,0,.2);
}
.btn.ghost{background:transparent; border-color: var(--stroke-orange)}
.btn.ghost:hover{background: linear-gradient(135deg, rgba(32,178,170,0.08), rgba(255,140,0,0.06))}
.btn.small{padding:10px 18px; font-size:.95rem}

/* Enhanced Card Interactions */
.feature-card, .service-card {
  transition: box-shadow 0.6s ease-out;
}

.feature-card:hover, .service-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Contact CTA Enhanced */
.contact-cta {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.contact-cta:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 
    0 15px 35px rgba(32, 178, 170, 0.3),
    0 0 50px rgba(32, 178, 170, 0.1);
}

/* Floating Animation */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.floating {
  animation: float 6s ease-in-out infinite;
}

.floating:nth-child(odd) {
  animation-delay: -3s;
}

/* Ripple Effect for Interactive Elements */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
  pointer-events: none;
}

.ripple:active::after {
  width: 300px;
  height: 300px;
}

/* Hero */
.hero{padding:30px 0 40px; position:relative}
/* Slightly tighter hero on contact page */
body:has(.contact-grid) .hero{padding:20px 0 40px}
.bg-blobs::before, .bg-blobs::after{content:""; position:absolute; inset:0; filter: blur(60px); z-index:-1}
.bg-blobs::before{
  background: 
    radial-gradient(500px 300px at 20% 30%, rgba(32,178,170,.2), transparent 70%), 
    radial-gradient(400px 250px at 80% 20%, rgba(255,140,0,.15), transparent 70%)
}
.bg-blobs::after{
  background: radial-gradient(600px 350px at 60% 70%, rgba(70,130,180,.1), transparent 70%)
}
.hero-card{
  padding:36px; text-align:center; position:relative; overflow:hidden;
  background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(248,249,250,0.9) 100%);
  border: 1px solid var(--stroke);
}
.hero-card::after{
  content:""; position:absolute; top:-50%; left:-30%; width:200%; height:250%; 
  background:linear-gradient(45deg, transparent 40%, rgba(32,178,170,.08) 50%, transparent 60%); 
  transform:rotate(15deg); pointer-events:none;
  animation: shimmer 8s linear infinite;
}
@keyframes shimmer {
  0% { transform: translateX(-100%) translateY(-100%) rotate(15deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(15deg); }
}
.eyebrow{
  color:var(--brand); text-transform:uppercase; font-size:.9rem; letter-spacing:.3em; 
  margin-bottom:16px; font-weight: 700;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero h1{
  margin:0 0 20px; 
  /* Fallback for Edge without clamp() support */
  font-size: 2.5rem;
  font-size:clamp(2rem, 1.5rem + 3vw, 3.5rem); 
  font-family: 'Outfit', Inter, system-ui, sans-serif; font-weight: 800; 
  letter-spacing: -0.02em; line-height: 1.1; color: var(--text-primary);
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--brand) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.lead{
  color:var(--muted); margin:0 auto 24px; max-width:720px; font-size: 1.1rem; 
  line-height: 1.7; font-weight: 400;
}
.actions{display:flex; gap:16px; justify-content:center; margin-bottom:24px}
.prompt-bar{margin:20px auto 16px; display:flex; gap:10px; padding:10px; max-width:760px}
.prompt-bar input{flex:1; background:rgba(255,255,255,.9); color:var(--text); border:1px solid var(--stroke); border-radius:10px; padding:10px 12px; outline:none}
.typing-dots{display:flex; align-items:center; gap:4px; padding:0 8px}
.typing-dots span{width:6px; height:6px; background:var(--text); border-radius:50%; display:inline-block; animation: bounce 1.3s infinite ease-in-out}
.typing-dots span:nth-child(2){animation-delay:.15s}
.typing-dots span:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,80%,100%{transform:translateY(0); opacity:.7}40%{transform:translateY(-4px); opacity:1}}
.prompt-bar input:focus{border-color: var(--brand); box-shadow: 0 0 0 3px rgba(32,178,170,.15)}
.samples{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:16px; margin-bottom:24px}
.chip{position:relative; overflow:hidden; border:1px solid var(--stroke); background:rgba(255,255,255,.8); color:var(--text); padding:8px 12px; border-radius:999px; cursor:pointer}
.chip:hover{filter:brightness(1.08)}
.chip::after{content:""; position:absolute; inset:0; background:radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(255,255,255,.35), transparent 40%); opacity:0; transition: opacity .25s}
.chip.ripple::after{opacity:1; animation: ripple .6s ease-out forwards}
@keyframes ripple{from{transform:scale(.8)} to{transform:scale(1.6); opacity:0}}
.hero-illustration{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; margin-top:24px}
.hero-illustration img{width:100%; height:200px; object-fit:cover; border-radius:12px; border:1px solid var(--stroke); opacity:.95; display: block}

/* Chat simulation */
.chat-sim{margin:12px auto 0; max-width:760px; padding:14px; text-align:left}
.chat-head{display:flex; align-items:center; gap:8px; margin:0 6px 8px}
.chat-head .badge{background:rgba(32,178,170,.2); border:1px solid rgba(32,178,170,.4); padding:4px 8px; border-radius:999px; font-size:.75rem}
.chat-head .hint{color:var(--muted); font-size:.9rem}
.chat-stream{display:flex; flex-direction:column; gap:10px; padding:6px}
.msg{display:flex; gap:10px; align-items:flex-start}
.msg .avatar{width:36px; height:36px; font-size:18px}
.bubble{flex:1; background:rgba(255,255,255,.8); border:1px solid var(--stroke); border-radius:12px; padding:10px 12px}
.bubble h4{margin:0 0 6px; font-size:1rem}
.meta{color:var(--muted); font-size:.85rem}
.typing{display:flex; align-items:center; gap:6px; color:var(--muted)}
.typing .dots{display:inline-flex; gap:4px}
.typing .dots span{width:6px; height:6px; background:var(--text); border-radius:50%; display:inline-block; animation: bounce 1.3s infinite ease-in-out}
.typing .dots span:nth-child(2){animation-delay:.15s}
.typing .dots span:nth-child(3){animation-delay:.3s}

/* Grids */
.grid{display:grid; gap:24px}
.features-grid{grid-template-columns: repeat(3, minmax(0,1fr))}
.solutions-grid{grid-template-columns: repeat(3, minmax(0,1fr))}
.examples-grid{grid-template-columns: repeat(4, minmax(0,1fr))}
.agents-grid{grid-template-columns: repeat(4, minmax(0,1fr))}
.pricing-grid{grid-template-columns: repeat(3, minmax(0,1fr))}
.footer-grid{grid-template-columns: 2fr 1fr 1fr 1fr}

/* Cards */
.card{
  padding:24px; 
  background: linear-gradient(135deg, var(--card) 0%, rgba(255,255,255,0.02) 100%);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--accent));
  opacity: 0.7;
}
.card img{
  width:100%; height:200px; object-fit:cover; border-radius:16px; 
  border:1px solid var(--stroke); margin-bottom:20px;
  transition: all 0.3s ease;
}
.card h3{
  margin:0 0 16px; font-family: 'Outfit', Inter, system-ui, sans-serif; 
  font-weight: 600; color: var(--text-primary); font-size: 1.25rem;
}
.tick{list-style:none; padding:0; margin:16px 0 0}
.tick li{padding-left:22px; position:relative; margin:10px 0; color:var(--text)}
.tick li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--brand)}

/* Solutions */
.solution{padding:24px; text-align:center}
.solution .icon{font-size:24px; margin-bottom:12px}
.solution h3{font-family: 'Outfit', Inter, system-ui, sans-serif; font-weight: 600; margin-bottom: 12px}
.quotes{list-style:none; padding:0; margin:16px 0 0; color:var(--text)}
.quotes li{margin:8px 0; font-style:italic}
.agent-badge{position:absolute; transform:translate(10px,-10px); background:rgba(32,178,170,.2); border:1px solid rgba(32,178,170,.4); color:var(--text-primary); padding:4px 8px; border-radius:999px; font-size:.75rem}
.mini-badge{position:absolute; left:10px; top:10px; background:rgba(255,255,255,.9); border:1px solid var(--stroke); border-radius:999px; padding:4px 8px; font-size:.75rem}
.agents-grid .solution{position:relative}
.examples-grid .solution{position:relative}
.agent-cta .cta-inner{display:flex; flex-direction:column; gap:8px; align-items:center; text-decoration:none; color:var(--text)}
.agent-cta .btn{margin-top:6px}

/* Avatars */
.avatar-wrap{display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:16px}
.avatar{width:72px; height:72px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--stroke); background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(248,249,250,.8)); box-shadow: var(--glow); font-size:28px}
.avatar-label{font-weight:600}
.avatar-wrap:hover .avatar-label{filter:drop-shadow(0 0 6px rgba(32,178,170,.6))}

/* Pricing */
.price{
  padding:28px; position:relative; 
  background: linear-gradient(135deg, var(--card) 0%, rgba(255,255,255,0.02) 100%);
  transition: all 0.3s ease;
}
.price .badge{
  position:absolute; top:20px; right:20px; font-size:.8rem; font-weight: 700;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); 
  color: white; padding:6px 12px; border-radius:20px;
  box-shadow: 0 4px 12px rgba(32,178,170,.3);
}
.price h3{
  font-family: 'Outfit', Inter, system-ui, sans-serif; font-weight: 600; 
  color: var(--text-primary); font-size: 1.4rem; margin-bottom: 8px;
}
.price .amount{
  font-size:2.5rem; font-weight:800; margin:16px 0 20px; 
  font-family: 'Outfit', Inter, system-ui, sans-serif;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.price.recommended{
  outline:2px solid var(--brand); 
  background: linear-gradient(135deg, rgba(32,178,170,0.1) 0%, rgba(255,140,0,0.05) 100%);
}
.price .amount span{font-size:1rem; color:var(--muted); font-weight:500}

/* CTA */
.cta .cta-card{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:32px}
.cta .cta-card.prominent{padding:40px 32px; border-width:1.5px; box-shadow: 0 20px 60px rgba(32,178,170,.12), 0 12px 32px rgba(255,140,0,.08)}
.cta .cta-card.prominent{flex-direction:column; align-items:center; justify-content:center; gap:20px}
.cta .cta-card.prominent .cta-copy{margin:0; text-align:center}
.cta .cta-card.prominent .btn{margin:0}
.cta .cta-card.center{flex-direction:column; align-items:center; justify-content:center; gap:20px}
.cta .cta-card.center .cta-copy{margin:0; text-align:center}
.cta .cta-card.center .btn{margin:0}

/* Standalone CTA sections: center the card in the container */
.cta-section .cta-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  padding:40px 32px; max-width:880px; margin:0 auto; text-align:center;
}
.cta-section .cta-copy{margin:0; text-align:center}

/* Tighten spacing between CTA sections */
.section.cta-section{padding:48px 0}
.section.cta-section + .section.cta-section{margin-top:-32px}
.mini-badge{position:absolute; left:50%; top:10px; transform:translateX(-50%); background:rgba(255,255,255,.9); border:1px solid var(--stroke); border-radius:999px; padding:4px 8px; font-size:.75rem}

/* Footer */
.site-footer{padding:36px 0}
.site-footer nav{display:flex; flex-direction:column; gap:8px}
.site-footer a{color:var(--text); text-decoration:none; opacity:.9}
.site-footer a:hover{opacity:1}
.site-footer h4{margin:0 0 12px}
.legal{border-top:1px solid rgba(45,55,72,.15); margin-top:24px; padding-top:24px; display:flex; justify-content:center; color:var(--muted)}
.muted{color:var(--muted)}
.tiny{font-size:.85rem}
.powered-by{margin-top:8px}
.powered-by a{display:inline-flex; align-items:center; gap:8px; text-decoration:none}
.aexo-pill{display:inline-flex; align-items:center; justify-content:center; padding:2px 8px; border-radius:999px; border:1px solid var(--stroke); background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(248,249,250,.8));
  font-weight:700; letter-spacing:.3px; color:var(--text-primary); box-shadow: var(--glow)}
.powered-by a:hover .aexo-pill{filter:brightness(1.08); box-shadow: 0 0 0 3px rgba(32,178,170,.18)}

/* Trust bar */
.trust{padding:24px 0 0}
.trust .trust-row{padding:16px 20px; display:flex; align-items:center; justify-content:center; text-align:center}
.trust .trust-row span{
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
  font-family: 'Outfit', Inter, system-ui, sans-serif;
}
.trust .dots{width:90px; height:10px; background: radial-gradient(circle at 10px 50%, var(--muted) 2px, transparent 3px) 0 0/18px 100% repeat-x}

/* Contact form - clean layout */
.contact-grid{grid-template-columns: 2fr 1fr; gap: 32px}
.contact-form{padding: 32px}
.contact-form .row{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:20px; margin-bottom: 24px}
.field{display:flex; flex-direction:column; gap:8px; margin-bottom: 4px}
.field label{font-size:.95rem; color:var(--text-primary); font-weight:600}
.field input, .field select, .field textarea{
  background:rgba(255,255,255,.9); color:var(--text); border:1px solid var(--stroke); 
  border-radius:10px; padding:14px; outline:none; transition: border-color .2s ease;
  font-size: 0.95rem;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(32,178,170,.15);
}
.field textarea{min-height:160px; resize:vertical; line-height: 1.5}
.error{display:none; color:#ffb4c2; font-size:.85rem; margin-top:4px}
.invalid .error{display:block}
.field.valid input, .field.valid textarea{border-color: rgba(80,220,150,.6)}
.field.invalid input, .field.invalid textarea{border-color: rgba(255,120,140,.7); box-shadow: 0 0 0 3px rgba(255,120,140,.15)}

/* Floating labels */
.field.floating{position:relative; gap:12px; margin-bottom: 8px}
.field.floating label{
  position:absolute; left:12px; top:12px; line-height:1; pointer-events:none; 
  transition: transform .18s ease, color .18s ease, background .18s ease, top .18s ease; 
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(248,249,250,.8)); 
  padding:0 6px; border-radius:6px; font-weight:600;
}
.field.floating input, .field.floating textarea{padding-top:28px; padding-bottom: 14px}
.field.floating input::placeholder, .field.floating textarea::placeholder{opacity:.55}
.field.floating.active label, .field.floating:focus-within label{
  transform: translateY(-14px) scale(.92); color:var(--brand); top:6px;
}

/* Textarea counter */
.field .counter{display:block; color:var(--muted); margin-top:6px; font-size:.85rem}
.field.floating .counter{position:absolute; right:10px; bottom:10px; margin:0; font-size:.8rem; opacity:.85}

/* Form submission section - completely rewritten */
.submit-section {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(32,178,170,0.1);
  display: block;
  text-align: center;
}

.consent-check {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 28px;
  font-size: .95rem;
  color: var(--text);
  line-height: 1.4;
}

.consent-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
  margin: 0;
  flex-shrink: 0;
}

.consent-check label {
  margin: 0;
  font-weight: 400;
  cursor: pointer;
  color: var(--text);
}

.submit-section .btn {
  display: inline-block;
  padding: 14px 36px;
  font-size: 1rem;
  font-weight: 600;
  min-width: 180px;
  margin: 0 auto 20px auto;
}

.submit-section .privacy-note {
  margin: 0;
  color: var(--muted);
  font-size: .85rem;
  font-weight: 600;
  text-align: center;
}

/* Loading state for submit button */
.btn.loading{position:relative; pointer-events:none; opacity:.9}
.btn.loading .btn-label{opacity:.85}
.btn.loading::after{
  content:""; position:absolute; width:16px; height:16px; border-radius:50%; right:12px; 
  border:2px solid rgba(255,255,255,.6); border-top-color: transparent; 
  animation: spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.privacy-note{
  margin:0; color:var(--muted); font-size:.85rem; font-weight:600; 
  text-align:center; width:100%;
}

.form-status{margin-top:12px; text-align:center}
.map-placeholder{position:relative; overflow:hidden; border-radius:12px; border:1px solid var(--stroke)}
.map-placeholder img{width:100%; height:220px; object-fit:cover; opacity:.9}
.map-placeholder .overlay{position:absolute; inset:auto 8px 8px 8px; background:rgba(0,0,0,.35); padding:8px 10px; border-radius:10px}
.office-info{margin:8px 0 0; color:var(--muted); font-size:.9rem; text-align:center; line-height:1.4}
/* Contact aside row */
.contact-row{display:flex; align-items:center; gap:8px; margin:8px 0 12px}
.contact-row .icon{width:20px; text-align:center}

/* Responsive */
@media (max-width: 900px){
  .features-grid, .solutions-grid, .pricing-grid, .examples-grid, .agents-grid{grid-template-columns: 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .cta .cta-card{flex-direction:column; align-items:stretch}
  .contact-grid{grid-template-columns:1fr}
  .contact-form .row{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .nav{display:none}
  .hamburger{display:block}
  .brand{font-size: 0.9rem; gap: 6px}
  .logo-svg{width: 28px; height: 28px}
  .hero-illustration{grid-template-columns: 1fr; gap: 12px}
  .hero-illustration img{height: 160px}
}
@media (max-width: 480px){
  .brand{font-size: 0.8rem; gap: 4px}
  .logo-svg{width: 24px; height: 24px}
  .site-header{padding: 12px 16px}
  .hero-illustration img{height: 140px}
}

/* Edge browser fallbacks */
.edge-browser .glass {
  /* More opaque background for Edge without backdrop-filter */
  background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,249,250,0.95) 100%) !important;
}

.edge-browser .site-header {
  /* More visible header for Edge */
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,249,250,0.98) 100%) !important;
}

.edge-browser .card:not(.fade-in-up), 
.edge-browser .solution:not(.fade-in-up), 
.edge-browser .price:not(.fade-in-up), 
.edge-browser .section-head:not(.fade-in-up) {
  /* Ensure cards are visible immediately in Edge if animations fail */
  opacity: 1 !important;
  transform: none !important;
}

/* Hover reset: neutralize all hover visuals sitewide */
/* Keeps focus-visible styles for accessibility intact */
/* Excludes fade-in animations from reset */
.card:hover, .solution:hover, .price:hover,
.glass:hover,
.brand:hover .logo-svg,
.nav a:hover, .nav a:hover::before,
.btn:hover, .btn:hover::before, .btn.primary:hover, .btn.ghost:hover,
.feature-card:hover, .service-card:hover,
.contact-cta:hover,
.chip:hover,
.card:hover img,
.avatar-wrap:hover .avatar-label,
.site-footer a:hover,
.powered-by a:hover .aexo-pill,
.cursor-glow:hover::before,
.card-interactive:hover {
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: inherit !important;
  background: inherit !important;
  border-color: inherit !important;
}

/* Preserve fade-in animations - don't reset these */
.fade-in-up, .stagger-1, .stagger-2, .stagger-3, .stagger-4 {
  /* Use specific animation values instead of 'initial' for Edge compatibility */
  animation-name: fadeInUp !important;
  animation-duration: 0.8s !important;
  animation-timing-function: ease-out !important;
  animation-fill-mode: forwards !important;
}

.stagger-1 { animation-delay: 0.1s !important; }
.stagger-2 { animation-delay: 0.2s !important; }
.stagger-3 { animation-delay: 0.3s !important; }
.stagger-4 { animation-delay: 0.4s !important; }