:root {
  --teal: #0F766E;
  --teal-bright: #14B8A6;
  --teal-light: #5eead4;
  --teal-frost: #F0FDFA;
  --teal-mist: #CCFBF1;
  --teal-pale: #CCFBF1;
  --teal-deep: #115E59;
  --midnight: #1A1A1A;
  --charcoal: #2D2D2D;
  --stone: #6B7280;
  --warm-white: #FAFFFE;
  --coral: #F97066;
  --green: #22C55E;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', monospace;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --shadow-soft: 0 1px 3px rgba(15,118,110,.04), 0 8px 24px rgba(15,118,110,.03);
  --shadow-medium: 0 4px 12px rgba(15,118,110,.05), 0 16px 40px rgba(15,118,110,.04);
  --shadow-glow: 0 0 0 1px rgba(15,118,110,.12), 0 8px 30px rgba(15,118,110,.08);
  --ease-smooth: cubic-bezier(.22,1,.36,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; overflow-x:clip; }
body { font-family:var(--font-body); color:var(--midnight); background:#111114; line-height:1.6; overflow-x:clip; }
.container { max-width:1200px; margin:0 auto; padding:0 24px; }

/* ===== ANIMATIONS ===== */
@keyframes fadeUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse { 0%,100%{transform:scale(.9);opacity:.6} 50%{transform:scale(1);opacity:1} }
@keyframes orb-float { 0%,100%{transform:translate(0,0) scale(1)} 25%{transform:translate(30px,-20px) scale(1.05)} 50%{transform:translate(-20px,30px) scale(.95)} 75%{transform:translate(15px,15px) scale(1.02)} }
@keyframes gradient-flow { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes footerGradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes ctaFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes ctaGlow { 0%,100%{opacity:.4;transform:scale(1) translate(0,0)} 25%{opacity:.7;transform:scale(1.05) translate(2%,-3%)} 50%{opacity:.5;transform:scale(1.08) translate(-1%,2%)} 75%{opacity:.65;transform:scale(1.02) translate(3%,1%)} }
@keyframes ctaShimmer { 0%{left:-60%;opacity:0} 20%{opacity:1} 80%{opacity:1} 100%{left:120%;opacity:0} }
@keyframes shimmerCard { 0%{left:-80%} 100%{left:120%} }

.reveal { opacity:0; transform:translateY(30px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.visible { opacity:1; transform:translateY(0); }
.rd1{transition-delay:.1s} .rd2{transition-delay:.2s} .rd3{transition-delay:.3s} .rd4{transition-delay:.4s}
.reveal-delay-1{transition-delay:.1s} .reveal-delay-2{transition-delay:.2s} .reveal-delay-3{transition-delay:.3s} .reveal-delay-4{transition-delay:.4s}

/* ========================= HEADER STYLES ========================= */
/* ========================= PAGE STYLES =========================== */
/* ===== SECTION PRIMITIVES ===== */
.section-label { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--teal); margin-bottom:16px; }
.section-label::before { content:''; width:24px; height:2px; background:var(--teal-bright); border-radius:2px; }
.section-title { font-family:var(--font-display); font-size:clamp(30px,4vw,52px); font-weight:700; line-height:1.15; letter-spacing:-.02em; margin-bottom:16px; }
.section-title em { font-style:italic; color:var(--teal-bright); }
.section-sub { font-size:17px; color:rgba(255,255,255,.45); max-width:560px; line-height:1.7; }

/* ===== HERO ===== */
.hero { position:relative; z-index:1; padding:90px 0 100px; background:#111114; overflow:visible; }
.hero::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 50% at 10% 15%, rgba(20,184,166,.03) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 80%, rgba(139,92,246,.02) 0%, transparent 45%),
    radial-gradient(ellipse 40% 50% at 50% 0%, rgba(20,184,166,.02) 0%, transparent 50%);
  pointer-events:none;
}
.hero::after {
  content:''; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.02'/%3E%3C/svg%3E");
  pointer-events:none; opacity:.5;
}
.hero-grid-pattern {
  position:absolute; inset:0; pointer-events:none; opacity:.02;
  background-image:linear-gradient(rgba(255,255,255,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.15) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,black 20%,transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,black 20%,transparent 70%);
}
.hero-orb { position:absolute; border-radius:50%; pointer-events:none; filter:blur(80px); }
.hero-orb-1 { width:700px; height:600px; top:-250px; right:-150px; background:rgba(20,184,166,.04); animation:orb-float 20s ease-in-out infinite; }
.hero-orb-2 { width:500px; height:500px; bottom:-200px; left:-120px; background:rgba(139,92,246,.03); animation:orb-float 16s ease-in-out infinite reverse; }
.hero-orb-3 { width:500px; height:500px; top:30%; left:20%; background:rgba(245,180,50,.02); animation:orb-float 24s ease-in-out infinite 4s; filter:blur(120px); }
.hero-bleed-glow { position:absolute; left:50%; pointer-events:none; z-index:1; }
.hero-bleed-top { top:-60px; width:700px; height:160px; margin-left:-350px; background:radial-gradient(ellipse 100% 100% at 50% 100%,rgba(20,184,166,.06) 0%,rgba(139,92,246,.03) 40%,transparent 70%); filter:blur(40px); }
.hero-bleed-bottom { bottom:-140px; width:1000px; height:350px; margin-left:-500px; background:radial-gradient(ellipse 50% 60% at 55% 30%,rgba(20,184,166,.08) 0%,transparent 70%),radial-gradient(ellipse 45% 55% at 45% 35%,rgba(139,92,246,.04) 0%,transparent 70%); filter:blur(50px); }
.hero-content { position:relative; z-index:2; text-align:center; max-width:800px; margin:0 auto; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; padding:6px 16px 6px 8px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:50px; font-size:13px; font-weight:600; color:rgba(255,255,255,.7); margin-bottom:24px; animation:fadeUp .8s var(--ease-smooth) both; }
.hero-badge .dot { width:8px; height:8px; border-radius:50%; background:var(--teal-bright); animation:pulse 2s ease infinite; }
.hero h1 { font-family:var(--font-display); font-size:clamp(36px,4.5vw,60px); font-weight:700; line-height:1.1; letter-spacing:-.03em; color:#fff; animation:fadeUp .8s var(--ease-smooth) .1s both; }
.hero h1 em { font-style:italic; color:var(--teal-bright); -webkit-text-fill-color:var(--teal-bright); }
.hero-sub { font-size:18px; color:rgba(255,255,255,.5); max-width:600px; margin:20px auto 0; line-height:1.7; animation:fadeUp .8s var(--ease-smooth) .2s both; }

/* ===== CONTACT SECTION ===== */
.contact-section { padding:100px 0; background:#111114; position:relative; }
.contact-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:60px; align-items:start; }
.contact-info .section-title { color:#fff; margin-bottom:16px; }
.contact-desc { font-size:16px; color:rgba(255,255,255,.5); line-height:1.7; margin-bottom:40px; }
.contact-channels { display:flex; flex-direction:column; gap:20px; }
.contact-channel { display:flex; align-items:center; gap:16px; padding:16px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:14px; transition:all .3s; }
.contact-channel:hover { background:rgba(20,184,166,.05); border-color:rgba(20,184,166,.15); }
.contact-channel-icon { width:44px; height:44px; border-radius:12px; background:rgba(20,184,166,.1); border:1px solid rgba(20,184,166,.2); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-channel-icon svg { width:20px; height:20px; stroke:var(--teal-bright); }
.contact-channel-label { font-size:12px; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.05em; margin-bottom:2px; }
.contact-channel-value { font-size:15px; color:#fff; font-weight:600; }
.contact-form-card { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:24px; padding:40px; backdrop-filter:blur(24px) saturate(150%); box-shadow:0 20px 60px rgba(0,0,0,.3); }
.form-group { margin-bottom:20px; }
.form-group label { display:block; font-size:13px; font-weight:600; color:rgba(255,255,255,.6); margin-bottom:8px; text-transform:uppercase; letter-spacing:.05em; }
.form-group input, .form-group textarea { width:100%; padding:14px 16px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:12px; color:#fff; font-size:15px; font-family:var(--font-body); transition:border-color .3s, box-shadow .3s; outline:none; resize:vertical; }
.form-group input::placeholder, .form-group textarea::placeholder { color:rgba(255,255,255,.25); }
.form-group input:focus, .form-group textarea:focus { border-color:var(--teal-bright); box-shadow:0 0 0 3px rgba(20,184,166,.15); }
.form-row-2col { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.contact-submit { width:100%; padding:16px; font-size:16px; font-weight:700; cursor:pointer; justify-content:center; }
.contact-note { text-align:center; font-size:13px; color:rgba(255,255,255,.35); margin-top:16px; }

/* ========================= /PAGE STYLES ========================== */

/* ===== RESPONSIVE ===== */
@media(max-width:1024px) {
  .contact-grid { grid-template-columns:1fr; }
}
@media(max-width:768px) {
  .hero-note{font-size:11px}
  .lp-cta-note{font-size:11px}
  .footer-cta-note{font-size:11px}
  .cta-note{font-size:11px}
  .hero { padding:90px 0 60px; }
  .hero h1 { font-size:32px; }
  .hero-sub { font-size:16px; }
  .contact-section { padding:60px 0; }
  .contact-form-card { padding:28px 20px; }
}
@media(max-width:640px) {
  .form-row-2col { grid-template-columns:1fr; }
  .contact-form-card { padding:28px 20px; }
}
/* ========================= /FOOTER STYLES ======================== */