/* ============================================
   HAXD 2027 - Theme Styles
   Naples, Italy — Inspired by Neapolitan traditions
   Terracotta, olive gold, Mediterranean blue, warm cream
   ============================================ */

/* =====================
   THEME TOKENS - ITALIAN / NAPLES DESIGN
   ===================== */
:root{
  /* Brand - Naples / Italian Heritage Theme */
  --primary-color:#B8510D;            /* Terracotta - Primary Brand */
  --primary-light:#D4722A;            /* Warm Terracotta - Light */
  --primary-dark:#8B3A06;             /* Deep Terracotta - Dark */
  --primary-accent:#C45B28;           /* Burnt Sienna - Highlight */
  --secondary-color:#B8960C;          /* Olive Gold - Secondary Brand */
  --secondary-light:#D4AF37;          /* Bright Gold */

  /* Accents - Italian Theme */
  --accent-color: #C45B28;            /* Burnt Sienna */
  --accent-light: #E07A3A;            /* Light Sienna */
  --success-color: #2D5F3A;           /* Italian Green */
  --warning-color: #B8960C;           /* Olive Gold */

  /* Text - Warm Dark */
  --text-primary:#2C1810;             /* Espresso Brown */
  --text-secondary:#5C4033;           /* Warm Brown */
  --text-light:#8B7355;               /* Muted Tan */

  /* Surfaces - Warm Light */
  --white:#fff;
  --gray-50:#FFF8F0;                  /* Warm Cream */
  --gray-100:#FEF3E7;                 /* Light Parchment */
  --gray-200:#F0E0CC;                 /* Sandy Beige */
  --light-bg:#ffffff;
  --light-surface:#FFF8F0;
  --light-border:rgba(184, 81, 13, 0.15);
  --bg-secondary:#FFF8F0;

  /* Radius + motion */
  --radius-sm:8px;
  --radius-md:10px;
  --radius-lg:12px;
  --radius-xl:18px;
  --transition: all .28s ease;

  /* Shadows - warm toned */
  --shadow-md: 0 6px 24px rgba(44,24,16,.08);
  --shadow-lg: 0 10px 32px rgba(44,24,16,.12);

  /* Glass backgrounds - warm */
  --glass-95: rgba(255,248,240,.95);
  --glass-98: rgba(255,248,240,.98);
}

/* =====================
   UTILITIES
   ===================== */
:focus-visible{ outline:3px solid color-mix(in srgb, var(--primary-light), transparent 45%); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }

/* =====================
   COUNTDOWN - WARM MINIMAL GRID
   ===================== */
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:0.5rem;margin:1.5rem auto;background:transparent;max-width:600px}
.countdown-item{background:var(--white);border-radius:0;padding:1rem 0.75rem;min-width:auto;text-align:center;border:none;position:relative;transition:all 0.3s ease}
.countdown-item::after{display:none}
.countdown-number{font-size:2rem;font-weight:600;color:var(--accent-color);line-height:1;letter-spacing:.5px;font-family:'Courier New',monospace}
.countdown-label{font-size:.65rem;color:var(--text-secondary);margin-top:.35rem;text-transform:uppercase;letter-spacing:.15em;font-weight:500}

/* =====================
   NAVBAR - WARM ITALIAN DESIGN
   ===================== */
.navbar{
  background:rgba(255, 252, 247, 0.98);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(184, 81, 13, 0.1);
  padding:0.35rem 0;
  z-index:1030;
  box-shadow:0 2px 8px rgba(44,24,16,.06);
  transition:all 0.3s ease;
}
.navbar > .container{ flex-wrap:nowrap; }
.navbar.scrolled{
  box-shadow:0 4px 16px rgba(184, 81, 13, 0.08);
  border-bottom:3px solid transparent;
  border-image:linear-gradient(90deg, #B8510D, #D4AF37) 1;
}

.navbar-brand{font-weight:900;font-size:1.75rem;color:var(--primary-color);text-decoration:none;display:flex;align-items:center;gap:.5rem;letter-spacing:-0.02em;transition:all 0.3s ease}
.navbar-brand:hover{transform:scale(1.05);color:var(--accent-color)}
.navbar-brand img{height:60px;width:auto;filter:none}
.brand-text{font-weight:900;color:var(--primary-color);background:linear-gradient(135deg,var(--primary-color) 0%,var(--secondary-color) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.navbar-nav .nav-link{
  font-weight:500;color:var(--text-secondary);margin:0 .25rem;
  padding:.65rem .9rem;
  display:flex;align-items:center;gap:.4rem;
  white-space:nowrap;
  text-decoration:none;
  transition:all 0.3s ease;
}
.navbar-nav .nav-link.active{
  color:var(--accent-color);
}
.navbar-nav .nav-link:hover{
  color:var(--primary-color);
  text-decoration:none;
}

/* Dropdown toggle chevron positioning */
.navbar-nav .nav-link.dropdown-toggle{
  display:inline-flex;align-items:center;gap:0.25rem;
  white-space:nowrap;
}
.navbar-nav .nav-link.dropdown-toggle::after{
  margin-left:0;flex-shrink:0;
}

/* Dropdowns - WARM ITALIAN DESIGN */
.dropdown-menu{
  background:var(--white);
  border:1px solid rgba(184, 81, 13, 0.15);
  border-radius:6px;
  padding:.75rem 0;
  margin-top:.5rem;
  min-width:260px;
  box-shadow:0 4px 12px rgba(44,24,16,.1);
}
.dropdown-item{
  padding:.7rem 1rem;
  color:var(--text-secondary);
  font-weight:500;
  display:flex;
  align-items:center;
  gap:.5rem;
  transition:all 0.3s ease;
}
.dropdown-item.active,
.dropdown-item:hover{
  background:rgba(184, 81, 13, 0.08);
  color:var(--accent-color);
  border-left:2px solid var(--accent-color);
  padding-left:1.2rem;
}

/* Toggler - WARM DESIGN */
.navbar-toggler{
  border:1px solid var(--primary-color);
  padding:.5rem;
  border-radius:4px;
  background:transparent;
}
.navbar-toggler:focus{outline:none;box-shadow:0 0 0 2px rgba(184, 81, 13, 0.2)}
.navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23B8510D' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}

/* Offcanvas - WARM ITALIAN DESIGN */
.offcanvas.offcanvas-nav{
  width:20rem;
  background:var(--white);
  border-right:1px solid rgba(184, 81, 13, 0.15);
}
.offcanvas-header{border-bottom:1px solid rgba(184, 81, 13, 0.15)}
.offcanvas-header img{height:55px;width:auto;filter:none}
.offcanvas .navbar-nav .nav-link{color:var(--text-secondary)}
.offcanvas .navbar-nav .nav-link:hover{color:var(--accent-color)}
.offcanvas .navbar-nav .nav-link.dropdown-toggle{
  display:inline-flex;align-items:center;gap:0.25rem;
  white-space:nowrap;
}
.offcanvas .navbar-nav .nav-link.dropdown-toggle::after{
  margin-left:0;flex-shrink:0;
}
.btn-close{
  filter:none;
}

/* NAVBAR responsive tweaks */
@media (max-width:991.98px){
  .navbar-collapse{
    background:var(--white);
    border-radius:6px;
    margin-top:1rem;
    padding:1.25rem;
    border:1px solid rgba(184, 81, 13, 0.15);
    box-shadow:0 4px 12px rgba(44,24,16,.1);
  }
  .navbar-nav{gap:.25rem}
  .navbar-nav .nav-link{text-align:center;margin:0;padding:.95rem;color:var(--text-secondary)}
  .navbar-nav .nav-link.dropdown-toggle{justify-content:center;gap:0.25rem}
  .navbar-nav .nav-link.dropdown-toggle::after{margin-left:0}
  .dropdown-menu{background:var(--white);border:1px solid rgba(184, 81, 13, 0.15);margin:.5rem 0;border-radius:6px}
}
@media (max-width:991.98px){
  .navbar-brand img{height:40px}
  .navbar-brand{font-size:1.3rem;gap:.35rem}
  .navbar-toggler{flex-shrink:0;margin-right:.5rem}
  .dark-mode-toggle{flex-shrink:0;margin-left:.5rem}
}
@media (max-width:576px){
  .navbar-brand{font-size:1.15rem;gap:.25rem}
  .navbar-brand img{height:34px}
  .countdown-number{font-size:1.75rem}
  .countdown-item{min-width:76px}
  .dark-mode-toggle{width:32px;height:32px;font-size:.85rem}
}

/* =====================
   FOOTER - DEEP MIDNIGHT BLUE (Mediterranean Night)
   ===================== */
.modern-footer{
  background: #1B2A4A !important;
  color: #ffffff !important;
  margin-top: 4rem; position: relative; overflow: hidden;
  border-top:1px solid rgba(212, 175, 55, 0.3);
}
.modern-footer::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, #B8510D, #D4AF37, transparent);
}
.footer-main{
  padding: 3.25rem 0 2rem; position:relative; z-index:1;
  background: #1B2A4A !important;
  color: #ffffff !important;
}
.footer-section{ height:100% }

/* Brand */
.footer-brand{ display:flex; align-items:center; gap:1rem; margin-bottom:1rem }
.footer-logo{ height:50px; width:auto; filter: brightness(0) invert(1) }
.footer-title{
  font-size:1.35rem; font-weight:800; margin:0;
  color: #ffffff;
}
.footer-description{ color: rgba(255,255,255,0.8) !important; line-height:1.6; margin-bottom:1.25rem }

/* Links & headings - MIDNIGHT BLUE DESIGN */
.footer-heading{
  font-size:1rem; font-weight:700; color:#ffffff !important; margin-bottom:1rem;
  text-transform:uppercase; letter-spacing:.06em; position:relative;
}
.footer-heading::after{
  content:''; position:absolute; bottom:-.5rem; left:0; width:40px; height:2px;
  background: linear-gradient(90deg, #D4AF37, #B8510D); border-radius:2px;
}

.footer-links{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem }
.footer-links a{
  color: rgba(255,255,255,0.7) !important; text-decoration:none; display:flex; align-items:center; gap:.5rem;
  padding:.35rem 0; border-radius:0; transition:all 0.3s ease;
}
.footer-links a:hover{
  color:#D4AF37 !important;
  padding-left:0.5rem;
  border-left:2px solid #D4AF37;
}
.footer-links i{ opacity:0.8; color:#D4AF37; font-size:1rem; font-weight:400 }

/* Contact - MIDNIGHT BLUE DESIGN */
.footer-contact{ display:flex; flex-direction:column; gap:.5rem }
.contact-item{ display:flex; align-items:center; gap:.5rem; color:rgba(255,255,255,0.7) !important; transition:all 0.3s ease }
.contact-item i{ min-width:20px; color:#D4AF37 !important; opacity:1; font-size:1.1rem; font-weight:400 }
.contact-item a{ color:inherit; text-decoration:none; transition:all 0.3s ease }
.contact-item:hover{ color:#D4AF37 !important }
.contact-item a:hover{ color:#D4AF37 !important }
.modern-footer .bi{ color:#D4AF37 !important }

/* Dates - MIDNIGHT BLUE DESIGN */
.important-dates{ margin-bottom:1.25rem }
.date-item{ display:flex; justify-content:space-between; gap:.5rem; padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,0.1) }
.date-label{ color:rgba(255,255,255,0.6) !important; font-weight:500 }
.date-value{ color:#ffffff !important; font-weight:700 }

/* Social - MIDNIGHT BLUE DESIGN */
.social-heading{ color:#ffffff!important }
.social-icons{ display:flex; gap:.75rem; flex-wrap:wrap }
.social-link{
  display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:8px;
  background:rgba(212, 175, 55, 0.15) !important; color:#D4AF37 !important; font-size:1.1rem; font-weight:400;
  text-decoration:none; border:1px solid rgba(212, 175, 55, 0.3); transition:all 0.3s ease;
}
.social-link i{ color:#D4AF37; opacity:1 }
.social-link:hover{
  background:#B8510D !important;
  color:#ffffff !important;
  transform:translateY(-2px);
  border-color:#B8510D;
}
.social-link:hover i{ color:#ffffff }

/* Bottom bar - DEEP MIDNIGHT DESIGN */
.footer-bottom{
  background: #142240 !important; padding:1rem 0;
  border-top:1px solid rgba(212, 175, 55, 0.2);
}
.footer-bottom .copyright{ color:rgba(255,255,255,0.5) !important; font-size:.9rem }
.footer-bottom .text-white-50{ color:rgba(255,255,255,0.5) !important }

/* FOOTER responsive */
@media (max-width:768px){
  .footer-section{text-align:center}
  .footer-brand{justify-content:center}
  .footer-heading::after{left:50%; transform:translateX(-50%)}
  .date-item{flex-direction:column; align-items:center}
  .social-icons{justify-content:center}
}

/* Print */
@media print{
  .modern-footer{ background:var(--white)!important; color:var(--text-primary)!important; page-break-inside:avoid }
  .footer-main{ padding:2rem 0 }
  .social-icons,.footer-bottom{ display:none }
}

/* =====================
   HERO SECTIONS
   ===================== */

/* Hero banner styling */
.hero-banner {
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}

.page-hero{
    position:relative; color:#fff; overflow:hidden;
    padding: clamp(84px, 10vw, 120px) 0 64px;
    background:
      radial-gradient(1200px 600px at 15% -10%, rgba(184,81,13,.25), transparent 60%),
      radial-gradient(1000px 600px at 85% -20%, rgba(212,175,55,.25), transparent 60%),
      linear-gradient(135deg, #1B2A4A 0%, #243555 55%, #2D5F3A 100%);
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .page-hero::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
    background-size:18px 18px;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), transparent 70%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), transparent 70%);
  }
  .hero-kicker{ letter-spacing:.12em; text-transform:uppercase; font-weight:800; color:#D4AF37; font-size:.85rem; }
  .page-hero h1{ font-weight:800; line-height:1.1; }
  .page-hero p.lead{ color:rgba(255,255,255,.9); max-width:840px; margin-inline:auto; }
  .hero-pills .pill{
    display:flex; align-items:center; gap:.55rem; font-weight:600;
    background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
    color:#fff; padding:.55rem .9rem; border-radius:999px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  }
  .dropdown-item.disabled { pointer-events:none; opacity:.6; }

/* Hero section titles - white text for visibility */
.page-hero h1,
.page-hero h2,
.page-hero h3,
.page-hero .display-4,
.page-hero .section-title {
  color: #ffffff !important;
}
.page-hero .lead {
  color: rgba(255, 255, 255, 0.9) !important;
}
.page-hero .section-title::after {
  background: linear-gradient(to right, #D4AF37, rgba(212,175,55,0.6));
}

/* =====================
   SUBMIT BUTTON - ITALIAN DESIGN
   ===================== */
.submit-btn, .submit-btn-mobile {
  background: transparent !important;
  border: 1px solid var(--accent-color) !important;
  color: var(--accent-color) !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
  position: relative;
  border-radius:0;
  transition:all 0.3s ease;
}

.submit-btn:hover, .submit-btn-mobile:hover {
  background: var(--accent-color) !important;
  color: #fff !important;
}

.submit-btn i, .submit-btn-mobile i {
  color: inherit;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
  .submit-btn-mobile {
    margin-bottom: 0.5rem;
  }
}

/* =====================
   SECTION TITLES
   ===================== */

/* Section title with underline below */
.section-title {
  position: relative;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 60px;
  height: 4px;
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  border-radius: 2px;
  left: 50%;
  transform: translateX(-50%);
}
/* Left aligned */
.section-title.text-start::after,
.section-title.text-left::after,
.text-start .section-title::after,
.text-left .section-title::after {
  left: 0;
  transform: none;
}
/* Right aligned */
.section-title.text-end::after,
.section-title.text-right::after,
.text-end .section-title::after,
.text-right .section-title::after {
  left: auto;
  right: 0;
  transform: none;
}

/* =====================
   UTILITY CLASSES
   ===================== */

/* Link footer styling */
.link-footer{ color: var(--text-secondary) !important; text-decoration:none; }
.link-footer:hover{ color:var(--primary-color) !important; }
.link-footer i{ color:var(--primary-color) !important; }

/* Back-to-top visibility */
.back-to-top.show{ opacity:1; visibility:visible; }
.back-to-top i{ color:#ffffff !important; }

/* Mobile centering */
@media (max-width: 768px){
  .footer-section{ text-align:center; }
}

/* Ensure all footer text elements use white color */
.modern-footer *,
.footer-main * {
  color: inherit !important;
}

.modern-footer .text-white-50,
.footer-main .text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* =====================
   DARK MODE - Variable overrides
   ===================== */
html[data-theme="dark"] {
  /* Core surfaces & text */
  --bg: #1A1410;
  --surface: #2C2218;
  --surface-elevated: #3D3024;
  --text: #F0E6D8;
  --text-light: #BCA88E;
  --text-lighter: #8B7355;
  --text-white: #ffffff;
  --border: #3D3024;
  --border-light: #2C2218;

  /* Glass */
  --glass: rgba(26, 20, 16, 0.9);
  --glass-95: rgba(26, 20, 16, 0.95);
  --glass-98: rgba(26, 20, 16, 0.98);
  --glass-border: rgba(61, 48, 36, 0.5);

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 25px 50px -12px rgba(196, 91, 40, 0.4);

  /* Brand colors (brighter for dark bg) */
  --primary: #D4722A;
  --primary-light: #E07A3A;
  --primary-dark: #B8510D;
  --secondary: #D4AF37;
  --secondary-dark: #B8960C;
  --accent: #E07A3A;
  --accent-dark: #D4722A;
  --accent-light: #F0A060;

  /* Theme.css-specific variables */
  --primary-color: #D4722A;
  --accent-color: #E07A3A;
  --secondary-color: #D4AF37;
  --secondary-light: #E8C84A;
  --text-primary: #F0E6D8;
  --text-secondary: #BCA88E;
  --white: #2C2218;
  --gray-50: #1A1410;
  --gray-100: #2C2218;
  --gray-200: #3D3024;
  --light-bg: #1A1410;
  --light-surface: #2C2218;
  --light-border: rgba(212, 114, 42, 0.25);
  --bg-secondary: #2C2218;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #D4722A 0%, #D4AF37 100%);
  --gradient-hero: linear-gradient(135deg, rgba(184, 81, 13, 0.2) 0%, rgba(212, 175, 55, 0.2) 100%);

  color-scheme: dark;
}

/* Dark mode: navbar */
html[data-theme="dark"] .navbar {
  background: rgba(26, 20, 16, 0.98) !important;
  border-bottom-color: #3D3024;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Dark mode: body */
html[data-theme="dark"] body {
  background-color: #1A1410 !important;
  color: #F0E6D8 !important;
}

/* Dark mode: bg-light override */
html[data-theme="dark"] .bg-light {
  background-color: #1A1410 !important;
  color: #F0E6D8 !important;
}

/* Dark mode: dropdowns */
html[data-theme="dark"] .dropdown-menu {
  background: #2C2218;
  border-color: #3D3024;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .dropdown-item {
  color: #BCA88E;
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item.active {
  background: rgba(212, 114, 42, 0.15);
  color: #E07A3A;
}

/* Dark mode: offcanvas */
html[data-theme="dark"] .offcanvas.offcanvas-nav {
  background: #2C2218;
  border-right-color: #3D3024;
}
html[data-theme="dark"] .offcanvas-header {
  border-bottom-color: #3D3024;
}

/* Dark mode: navbar toggler */
html[data-theme="dark"] .navbar-toggler {
  border-color: #E07A3A;
}
html[data-theme="dark"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23E07A3A' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Dark mode: btn-close */
html[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Dark mode: countdown */
html[data-theme="dark"] .countdown-item {
  background: #2C2218;
}

/* Dark mode: content cards and common components */
html[data-theme="dark"] .content-card,
html[data-theme="dark"] .card {
  background: #2C2218 !important;
  border-color: #3D3024 !important;
}

/* Dark mode: tables */
html[data-theme="dark"] .table {
  color: #F0E6D8;
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(61, 48, 36, 0.3);
  border-color: #3D3024;
}
html[data-theme="dark"] .table thead th {
  background-color: #3D3024 !important;
  color: #F0E6D8 !important;
  border-color: #4D4034;
}

/* Dark mode: accordion */
html[data-theme="dark"] .accordion-item {
  background: #2C2218;
  border-color: #3D3024;
}
html[data-theme="dark"] .accordion-button {
  background: #2C2218;
  color: #F0E6D8;
}
html[data-theme="dark"] .accordion-button:not(.collapsed) {
  background: rgba(212, 114, 42, 0.1);
  color: #E07A3A;
}
html[data-theme="dark"] .accordion-body {
  background: #1A1410;
  color: #D4C4B0;
}

/* Dark mode: form elements */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
  background: #1A1410;
  color: #F0E6D8;
  border-color: #3D3024;
}

/* Dark mode: toggle button itself */
html[data-theme="dark"] .dark-mode-toggle {
  border-color: #4D4034;
  color: #D4AF37;
}

/* Dark mode: list group */
html[data-theme="dark"] .list-group-item {
  background: #2C2218;
  color: #F0E6D8;
  border-color: #3D3024;
}

/* Dark mode: modal */
html[data-theme="dark"] .modal-content {
  background: #2C2218;
  color: #F0E6D8;
  border-color: #3D3024;
}


/* =============================================================================
   HERO EMBLEM — H↔AI Interaction SVG
   ============================================================================= */
.haxd-hero-emblem {
  position: absolute;
  right: 24px;
  top: 55%;
  transform: translateY(-50%);
  width: 130px;
  height: 130px;
  opacity: 0;
  z-index: 0;
  animation: haxdEmblemAppear 1.5s ease-out forwards;
}
@keyframes haxdEmblemAppear {
  0% { opacity: 0; transform: translateY(-45%) scale(.7) rotate(-10deg); }
  100% { opacity: 1; transform: translateY(-45%) scale(1) rotate(0deg); }
}
.he-ring { opacity: .18; animation: heRingPulse 4s ease-in-out infinite; }
@keyframes heRingPulse {
  0%, 100% { opacity: .18; stroke-width: 1.5; }
  50% { opacity: .3; stroke-width: 2.5; }
}
.he-orbit { animation: heOrbit 12s linear infinite; transform-origin: 100px 100px; }
@keyframes heOrbit { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.he-dataflow { stroke-dasharray: 4 6; opacity: .2; animation: heDataflow 3s linear infinite; }
@keyframes heDataflow { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -30; } }
.he-node { animation: heNodePulse 2.5s ease-in-out infinite; }
@keyframes heNodePulse { 0%, 100% { opacity: .25; } 50% { opacity: .5; } }
.he-human { opacity: .25; animation: heHumanBreathe 4s ease-in-out infinite; }
@keyframes heHumanBreathe { 0%, 100% { opacity: .25; } 50% { opacity: .38; } }
.he-ai { opacity: .22; animation: heAIGlow 3.5s ease-in-out infinite; }
@keyframes heAIGlow {
  0%, 100% { opacity: .22; filter: drop-shadow(0 0 0 transparent); }
  50% { opacity: .38; filter: drop-shadow(0 0 8px rgba(184, 81, 13, .4)); }
}
.he-interact { opacity: .28; animation: heInteract 5s ease-in-out infinite; }
@keyframes heInteract { 0%, 100% { opacity: .22; } 25% { opacity: .4; } 50% { opacity: .22; } 75% { opacity: .4; } }
/* Ensure hero content stays above emblem */
.page-hero > .container { position: relative; z-index: 1; }
@media (max-width: 768px) { .haxd-hero-emblem { width: 100px; height: 100px; right: 10px; } }
@media (max-width: 480px) { .haxd-hero-emblem { width: 75px; height: 75px; right: 5px; } }