/* ===== Design tokens ===== */
:root {
  --navy-deep: #0d0a24;
  --navy-mid: #1a1440;
  --purple-glow: #3d2a5e;
  --teal: #6fc0c2;
  --teal-dark: #3f9fa1;
  --white: #ffffff;
  --text-muted: #c7c3d9;
  --text-dark: #1a1a2e;
  --font-head: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
  --container-width: 1140px;
}

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

/*
  Defensive reset: the WordPress theme this page is embedded in applies
  its own background/border defaults to bare heading and button tags.
  We never set these ourselves, so without this reset the theme's rule
  is the only one in play and wins by default, regardless of load order.
*/
h1, h2, h3, h4, h5, h6, button, a { background: none; border: none; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}
.container.narrow { max-width: 780px; }

img { max-width: 100%; display: block; }

/* ===== Reveal on scroll ===== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 30px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-teal {
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  color: var(--navy-deep);
  box-shadow: 0 6px 20px rgba(111, 192, 194, 0.35);
}
.btn-outline {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.6);
}
.btn-outline:hover { background: rgba(255,255,255,0.1); }
.btn-small { padding: 10px 20px; font-size: 0.85rem; }

/* ===== Sticky header ===== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 16px 0;
  background: transparent;
  transition: background 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}
.site-header.scrolled {
  background: rgba(13, 10, 36, 0.92);
  backdrop-filter: blur(8px);
  padding: 10px 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
.header-inner {
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-logo { height: 86px; width: auto; transition: height 0.3s ease; }
.site-header.scrolled .header-logo { height: 60px; }
.header-actions { display: flex; align-items: center; gap: 20px; }
.header-tey-logo { height: 62px !important; width: auto !important; max-width: 260px; transition: height 0.3s ease; }
.site-header.scrolled .header-tey-logo { height: 43px !important; }
.header-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.header-meta span { display: inline-flex; align-items: center; gap: 6px; }
.header-meta-icon { width: 15px; height: 15px; }
.header-meta-sep { opacity: 0.4; }

/* ===== Hero ===== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--white);
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
}
.hero-texture {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: bottom;
  mix-blend-mode: screen;
  opacity: 0.6;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,10,36,0.55) 0%, rgba(13,10,36,0.75) 55%, rgba(13,10,36,0.96) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1520px;
  width: 100%;
  padding: 120px 24px 60px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 40px;
}
.hero-text { text-align: left; }
.hero-visual { display: flex; justify-content: center; }
.hero-visual-img {
  width: 100%;
  max-width: 630px;
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45), 0 0 60px rgba(111,192,194,0.2);
}
.hero-eyebrow {
  font-family: var(--font-head);
  font-size: 0.8rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 14px;
}
.hero-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2.8rem, 6vw, 4.6rem);
  line-height: 1.1;
  margin-bottom: 20px;
}
.teal-text { color: var(--teal); }
.hero-tagline {
  font-size: 1.3rem;
  color: var(--text-muted);
  margin-bottom: 36px;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 24px;
  margin-bottom: 40px;
  font-size: 0.95rem;
}
.meta-item { display: flex; align-items: center; gap: 8px; }
.meta-icon { width: 22px; height: 22px; }
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 16px;
}
.scroll-cue {
  position: absolute;
  bottom: 32px; left: 50%;
  transform: translateX(-50%);
  width: 52px; height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255,255,255,0.35);
  border-radius: 50%;
  color: var(--teal);
  z-index: 2;
  transition: border-color 0.25s ease, background 0.25s ease;
  animation: scrollBounce 2s ease-in-out infinite;
}
.scroll-cue svg { width: 24px; height: 24px; }
.scroll-cue:hover {
  border-color: var(--teal);
  background: rgba(111,192,194,0.12);
}
@keyframes scrollBounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 10px); }
}

/* ===== Section titles ===== */
.section-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  text-align: center;
  color: var(--navy-deep);
  margin-bottom: 40px;
}
.section-title--light { color: var(--white); }

/* ===== Intro ===== */
.intro {
  background: var(--navy-deep);
  color: var(--text-muted);
  padding: 90px 0;
  text-align: center;
}
.intro-text { font-size: 1.1rem; margin-bottom: 20px; }
.intro-highlight {
  color: var(--white);
  font-weight: 600;
  font-family: var(--font-head);
  font-size: 1.2rem;
}

/* ===== Why attend ===== */
.why-attend { padding: 90px 0; background: var(--navy-deep); }
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.why-card {
  background: var(--navy-mid);
  border: 1px solid rgba(111,192,194,0.25);
  border-radius: 16px;
  padding: 36px 24px;
  text-align: center;
  color: var(--white);
  font-weight: 500;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.why-card:hover { transform: translateY(-6px); border-color: var(--teal); }
.why-icon-img { width: 56px; height: 56px; margin: 0 auto 20px; }

/* ===== Video ===== */
.video-section {
  position: relative;
  background: var(--white);
  padding: 90px 0;
  overflow: hidden;
}
.video-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}
.video-caption {
  display: block;
  margin-top: 26px;
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 600 !important;
  color: var(--teal-dark) !important;
  text-decoration: none !important;
}
.video-caption:hover { color: var(--teal) !important; }
.video-text p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #444;
}
.video-shadow {
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  isolation: isolate;
}
.video-frame {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16/9;
  cursor: pointer;
}
.video-thumb { width: 100%; height: 100%; object-fit: cover; }
.video-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 76px; height: 76px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.9);
  color: var(--navy-deep);
  font-size: 1.4rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease;
}
.video-frame:hover .video-play { transform: translate(-50%, -50%) scale(1.08); background: var(--white); }
.video-frame iframe { width: 100%; height: 100%; border: none; display: block; }

/* ===== Agenda / panels ===== */
.agenda { padding: 90px 0; background: var(--navy-deep); }
.panel {
  background: rgba(255,255,255,0.06);
  border-left: 4px solid var(--teal);
  border-radius: 12px;
  padding: 36px 40px;
  margin-bottom: 28px;
}
.panel-tag {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--teal);
  background: rgba(111,192,194,0.15);
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
}
.panel h3 {
  font-family: var(--font-head);
  font-size: 1.35rem;
  margin-bottom: 8px;
  color: var(--white);
}
.panel-subtitle { color: var(--teal); font-weight: 600; margin-bottom: 18px; }
.panel-points { padding-left: 20px; }
.panel-points li { margin-bottom: 8px; color: var(--text-muted); }
.panel-participants { margin-top: 16px; color: var(--text-muted); }

/* ===== Awards ===== */
.awards { background: var(--white); padding: 90px 0; text-align: center; }
.awards-subtitle { color: #666; margin-bottom: 40px; margin-top: -20px; }
.awards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.award-card {
  background: var(--navy-mid);
  border: 1px solid rgba(111,192,194,0.25);
  border-radius: 12px;
  padding: 28px 18px;
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.award-card:hover { transform: translateY(-4px); border-color: var(--teal); }
.awards-note { margin-top: 32px; font-size: 0.8rem; color: rgba(0,0,0,0.35); }

/* ===== Past event proof ===== */
.proof { padding: 90px 0; background: var(--navy-deep); overflow: hidden; }
.proof-subtitle { text-align: center; color: var(--text-muted); margin-top: -24px; margin-bottom: 0; }
.proof-carousel {
  margin-top: 48px;
  overflow: hidden;
  width: 100%;
}
.proof-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: proofScroll 44s linear infinite;
}
.proof-carousel:hover .proof-track { animation-play-state: paused; }
.proof-slide {
  flex-shrink: 0;
  height: 340px;
  border-radius: 10px;
  overflow: hidden;
}
.proof-slide img {
  height: 100%;
  width: auto;
  display: block;
  animation: proofKenBurns 16s ease-in-out infinite alternate;
}
@keyframes proofScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes proofKenBurns {
  0% { transform: scale(1); }
  100% { transform: scale(1.15); }
}

/* ===== Sponsors ===== */
.sponsors { padding: 80px 0 100px; background: var(--white); }
.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  align-items: center;
}
.sponsor-logo {
  background: var(--white);
  border: 1px solid #ececf3;
  box-shadow: 0 4px 16px rgba(20,10,40,0.05);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 260px;
}
.sponsor-logo img { max-height: 220px; max-width: 100%; }

/* ===== Signup ===== */
.signup {
  position: relative;
  background: var(--navy-deep);
  color: var(--white);
  padding: 100px 0;
  text-align: center;
  overflow: hidden;
}
.signup .hero-texture { opacity: 0.5; }
.signup-sub { color: var(--text-muted); margin: -20px 0 40px; }
.gform-wrap { margin-bottom: 32px; }
.gform-placeholder {
  background: rgba(255,255,255,0.05);
  border: 1px dashed rgba(111,192,194,0.5);
  border-radius: 16px;
  padding: 32px;
  text-align: left;
}
.gform-placeholder__label {
  text-align: center;
  font-size: 0.8rem;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
}
.gform-mock__row { display: flex; gap: 16px; margin-bottom: 16px; }
.gform-mock__field {
  flex: 1;
  height: 44px;
  background: rgba(255,255,255,0.08);
  border-radius: 8px;
  margin-bottom: 16px;
}
.gform-mock__field--full { width: 100%; }
.gform-mock__field--tall { height: 90px; }
.gform-mock__btn {
  display: inline-block;
  background: var(--teal);
  color: var(--navy-deep);
  font-family: var(--font-head);
  font-weight: 600;
  padding: 12px 32px;
  border-radius: 30px;
}

/* ===== Footer ===== */
.site-footer { background: #0a0818; color: var(--text-muted); padding: 60px 0 30px; }
.footer-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.footer-logo { height: 40px; width: auto; }
.footer-contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 48px;
}
.footer-contacts > div { display: flex; flex-direction: column; gap: 4px; }
.footer-contacts strong { color: var(--white); }
.footer-contacts a { color: var(--teal); text-decoration: none; }
.footer-socials a { color: var(--text-muted); text-decoration: none; }
.footer-socials a:hover { color: var(--teal); }
.footer-divider { margin: 0 10px; opacity: 0.4; }
.footer-copy { font-size: 0.8rem; opacity: 0.5; margin-top: 10px; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .awards-grid { grid-template-columns: repeat(2, 1fr); }
  .proof-slide { height: 260px; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-text { text-align: center; }
  .hero-meta, .hero-ctas { justify-content: center; }
  .hero-visual { order: -1; }
  .hero-visual-img { max-width: 260px; }
  .header-meta { display: none; }
  .video-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  .card-grid { grid-template-columns: 1fr; }
  .awards-grid { grid-template-columns: 1fr; }
  .sponsor-grid { grid-template-columns: repeat(2, 1fr); }
  .proof-slide { height: 190px; }
  .panel { padding: 28px 22px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
}

/* ===== Gravity Form #10 (Sign Up section) brand overrides =====
   This site runs Gravity Forms' "Orbital" theme, which ships its own CSS
   using deeply chained selectors like
   .gform-theme.gform-theme--framework.gform_wrapper .button:where(...).
   Those beat plain descendant selectors on specificity alone, so
   everything here uses !important rather than trying to out-specificity
   a vendor framework. Verified against actual rendered markup via
   DevTools rather than guessed. */
.signup .gform_wrapper,
.signup .gform_wrapper * { font-family: var(--font-body) !important; }

.signup .gform_wrapper .gform_heading,
.signup .gform_wrapper .gform_description { color: var(--text-muted) !important; }

.signup .gform_wrapper .gfield_label,
.signup .gform_wrapper .gform-field-label,
.signup .gform_wrapper legend.gfield_label {
  color: var(--white) !important;
  font-weight: 600 !important;
}
/* Checkbox/radio choice labels specifically use gform-field-label--type-inline
   with no gfield_label class at all - needs its own rule */
.signup .gform_wrapper .gform-field-label--type-inline {
  color: var(--text-muted) !important;
  font-weight: 400 !important;
}
.signup .gform_wrapper .gfield_required,
.signup .gform_wrapper .gfield_required_asterisk { color: var(--teal) !important; }

.signup .gform_wrapper input[type="checkbox"],
.signup .gform_wrapper input[type="radio"] { accent-color: var(--teal); }

.signup .gform_wrapper input[type="text"],
.signup .gform_wrapper input[type="email"],
.signup .gform_wrapper input[type="tel"],
.signup .gform_wrapper textarea,
.signup .gform_wrapper select {
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  padding: 12px 16px !important;
}
.signup .gform_wrapper input:focus,
.signup .gform_wrapper textarea:focus,
.signup .gform_wrapper select:focus {
  outline: none !important;
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 3px rgba(111,192,194,0.25) !important;
}

.signup .gform_wrapper .gform_footer,
.signup .gform_wrapper .gform_page_footer {
  display: flex !important;
  gap: 16px !important;
}
.signup .gform_wrapper .gform_button,
.signup .gform_wrapper .gform_next_button,
.signup .gform_wrapper .gform-theme-button.button:not(.gform_previous_button) {
  background: linear-gradient(135deg, var(--teal), var(--teal-dark)) !important;
  color: var(--navy-deep) !important;
  border: none !important;
  border-radius: 30px !important;
  font-family: var(--font-head) !important;
  font-weight: 600 !important;
  padding: 14px 30px !important;
  cursor: pointer;
}
.signup .gform_wrapper .gform_previous_button {
  background: transparent !important;
  color: var(--white) !important;
  border: 1.5px solid rgba(255,255,255,0.6) !important;
  border-radius: 30px !important;
  font-family: var(--font-head) !important;
  font-weight: 600 !important;
  padding: 14px 30px !important;
}

/* Validation errors: GF's default red is designed for a light page
   background and reads muddy against our dark navy - brighten it. */
.signup .gform_wrapper .validation_error,
.signup .gform_wrapper .gform_validation_errors {
  background: rgba(255, 90, 90, 0.12) !important;
  border-color: #ff8080 !important;
}
.signup .gform_wrapper .validation_error,
.signup .gform_wrapper .gform_submission_error {
  color: #ff8080 !important;
  font-weight: 600 !important;
}
.signup .gform_wrapper .gfield_validation_message,
.signup .gform_wrapper .gfield_description.validation_message,
.signup .gform_wrapper .validation_message {
  color: #ff8080 !important;
  font-weight: 600 !important;
}
.signup .gform_wrapper .gfield_error .gfield_label,
.signup .gform_wrapper .gfield_error .gform-field-label {
  color: #ff8080 !important;
}
.signup .gform_wrapper .gfield_error input,
.signup .gform_wrapper .gfield_error textarea,
.signup .gform_wrapper .gfield_error select {
  border-color: #ff8080 !important;
}