:root {
      --main: #123c69;
      --main-dark: #0b2f52;
      --accent: #0b7285;
      --gold: #f2b705;
      --light-bg: #f6f7fb;
    }

    body {
      background: var(--light-bg);
      color: #212529;
    }

    .navbar {
      background: rgba(18, 60, 105, .98);
      box-shadow: 0 6px 22px rgba(0,0,0,.12);
    }

    .navbar-brand {
      font-weight: 800;
      letter-spacing: .2px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .navbar-logo {
      max-height: 80px;
      max-width: 260px;
      object-fit: contain;
      background: rgba(255,255,255,.92);
      border-radius: 12px;
      padding: 7px 10px;
    }

    .navbar-title {
      display: inline-block;
    }

    .navbar-logo-center {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 8px;
      z-index: 5;
      background: rgba(255,255,255,.94);
      border-radius: 12px;
      padding: 6px 12px;
      box-shadow: 0 8px 24px rgba(0,0,0,.18);
    }

    .navbar-logo-center img {
      max-height: 48px;
      max-width: 190px;
      object-fit: contain;
      display: block;
    }

    .nav-link {
      color: rgba(255,255,255,.88) !important;
      font-weight: 500;
    }

    .nav-link:hover {
      color: #fff !important;
    }

    .hero {
      position: relative;
      overflow: hidden;
      color: #fff;
      padding: 110px 0 90px;
      background:
        radial-gradient(circle at top right, rgba(242,183,5,.25), transparent 28%),
        linear-gradient(135deg, #123c69 0%, #0b7285 100%);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    .hero.has-banner {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(11,47,82,.88) 0%, rgba(18,60,105,.72) 48%, rgba(11,114,133,.48) 100%);
      z-index: 0;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: auto -80px -160px auto;
      width: 360px;
      height: 360px;
      background: rgba(255,255,255,.08);
      border-radius: 50%;
      z-index: 0;
    }

    .hero .container {
      position: relative;
      z-index: 1;
    }

    .hero-logo-box {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,.94);
      border-radius: 18px;
      padding: 12px 18px;
      margin-bottom: 22px;
      box-shadow: 0 14px 34px rgba(0,0,0,.2);
      border: 1px solid rgba(255,255,255,.4);
    }

    .hero-logo {
      max-width: 260px;
      max-height: 120px;
      object-fit: contain;
      display: block;
    }

    .hero-card {
      background: rgba(255,255,255,.14);
      border: 1px solid rgba(255,255,255,.24);
      border-radius: 24px;
      backdrop-filter: blur(8px);
      padding: 24px;
      box-shadow: 0 16px 40px rgba(0,0,0,.18);
    }

    .countdown-box {
      background: rgba(255,255,255,.14);
      border: 1px solid rgba(255,255,255,.24);
      border-radius: 24px;
      backdrop-filter: blur(8px);
      padding: 22px;
      box-shadow: 0 16px 40px rgba(0,0,0,.18);
      margin-top: 22px;
    }

    .countdown-title {
      font-weight: 800;
      margin-bottom: 14px;
      color: #fff;
    }

    .countdown-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }

    .countdown-item {
      background: rgba(255,255,255,.16);
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 16px;
      padding: 12px 8px;
      text-align: center;
    }

    .countdown-number {
      font-size: 2rem;
      line-height: 1;
      font-weight: 900;
      color: #f2b705;
    }

    .countdown-label {
      margin-top: 6px;
      font-size: .8rem;
      color: rgba(255,255,255,.88);
    }

    .hero-title {
      font-weight: 900;
      line-height: 1.08;
      text-shadow: 0 4px 16px rgba(0,0,0,.25);
    }

    .hero-subtitle {
      font-size: 1.25rem;
      color: rgba(255,255,255,.94);
      text-shadow: 0 3px 12px rgba(0,0,0,.22);
    }

    .badge-soft {
      background: rgba(255,255,255,.18);
      color: #fff;
      border: 1px solid rgba(255,255,255,.28);
      font-size: .95rem;
      padding: .55rem .8rem;
      border-radius: 999px;
      backdrop-filter: blur(6px);
    }

    .btn-main {
      background: var(--gold);
      border-color: var(--gold);
      color: #1f2937;
      font-weight: 800;
    }

    .btn-main:hover {
      background: #dca505;
      border-color: #dca505;
      color: #111827;
    }

    .btn-outline-white {
      color: #fff;
      border-color: rgba(255,255,255,.75);
      font-weight: 700;
    }

    .btn-outline-white:hover {
      color: var(--main);
      background: #fff;
      border-color: #fff;
    }

    .section {
      padding: 70px 0;
    }

    .section-title {
      color: var(--main);
      font-weight: 900;
      margin-bottom: 12px;
    }

    .section-lead {
      color: #6c757d;
      font-size: 1.08rem;
      max-width: 760px;
    }

    .feature-card,
    .price-card,
    .speaker-card,
    .info-card,
    .contact-card {
      border: 0;
      border-radius: 22px;
      box-shadow: 0 8px 24px rgba(0,0,0,.07);
      height: 100%;
      overflow: hidden;
    }

    .feature-icon {
      width: 54px;
      height: 54px;
      border-radius: 16px;
      background: rgba(11,114,133,.12);
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.55rem;
      margin-bottom: 18px;
    }

    .price {
      font-size: 2rem;
      font-weight: 900;
      color: var(--accent);
    }

    .speaker-photo {
      width: 96px;
      height: 96px;
      object-fit: cover;
      border-radius: 18px;
      border: 1px solid #dee2e6;
      background: #fff;
    }

    .speaker-placeholder {
      width: 96px;
      height: 96px;
      border-radius: 18px;
      border: 1px solid #dee2e6;
      background: #eef2f7;
      color: #6c757d;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: .8rem;
    }

    .cta {
      background:
        radial-gradient(circle at top left, rgba(242,183,5,.22), transparent 30%),
        linear-gradient(135deg, #0b2f52 0%, #123c69 100%);
      color: #fff;
      border-radius: 28px;
      padding: 46px 30px;
      overflow: hidden;
    }

    .terms-box {
      background: #fff;
      border-radius: 22px;
      box-shadow: 0 8px 24px rgba(0,0,0,.07);
      padding: 28px;
    }

    .contact-section {
      background: #fff;
    }

    .contact-org-title {
      color: var(--main);
      font-weight: 900;
      line-height: 1.25;
    }

    .contact-card-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 18px;
    }

    .contact-card-icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      background: rgba(11,114,133,.12);
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.35rem;
      flex-shrink: 0;
    }

    .contact-label {
      color: #6c757d;
      font-size: .88rem;
      margin-bottom: 2px;
    }

    .contact-value {
      font-weight: 700;
      color: #1f2937;
      margin-bottom: 12px;
    }

    .contact-value a {
      color: var(--main);
      text-decoration: none;
    }

    .contact-value a:hover {
      text-decoration: underline;
    }

    footer {
      background: #0b2f52;
      color: rgba(255,255,255,.88);
      padding: 38px 0;
    }

    footer a {
      color: #fff;
      text-decoration: none;
    }

    footer a:hover {
      text-decoration: underline;
    }

    .footer-contact {
      font-size: .9rem;
      color: rgba(255,255,255,.78);
    }

    .footer-contact strong {
      color: #fff;
    }

    .presidents-greeting-section {
      background:
        radial-gradient(circle at top right, rgba(11,114,133,.10), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
    }

    .presidents-greeting-card {
      background: #fff;
      border: 0;
      border-radius: 28px;
      box-shadow: 0 14px 38px rgba(0,0,0,.08);
      overflow: hidden;
    }

    .presidents-greeting-side {
      background:
        radial-gradient(circle at top right, rgba(242,183,5,.22), transparent 30%),
        linear-gradient(135deg, #123c69 0%, #0b7285 100%);
      color: #fff;
      height: 100%;
      padding: 34px 28px;
    }

    .presidents-greeting-side .badge-soft {
      display: inline-block;
      margin-bottom: 16px;
    }

    .presidents-greeting-side h2 {
      font-weight: 900;
      line-height: 1.15;
      margin-bottom: 16px;
    }

    .presidents-greeting-side p {
      color: rgba(255,255,255,.88);
      margin-bottom: 0;
    }

    .presidents-greeting-body {
      padding: 34px 30px;
    }

    .greeting-text {
      color: #273746;
      font-size: 1.02rem;
      line-height: 1.85;
      max-height: 620px;
      overflow: auto;
      padding-right: 8px;
    }

    .greeting-text p {
      margin-bottom: 1.05rem;
    }

    .signature-intro {
      color: var(--main);
      font-weight: 900;
      margin-top: 26px;
      margin-bottom: 16px;
    }

    .signature-card {
      background: #f8f9fa;
      border: 1px solid #e9ecef;
      border-radius: 18px;
      padding: 18px;
      height: 100%;
    }

    .signature-photo {
      width: 92px;
      height: 92px;
      object-fit: cover;
      border-radius: 18px;
      border: 1px solid #dee2e6;
      background: #fff;
      padding: 3px;
      flex: 0 0 auto;
    }

    .signature-name {
      color: var(--main);
      font-weight: 900;
      margin-bottom: 8px;
    }

    .signature-desc {
      color: #495057;
      font-size: .92rem;
      line-height: 1.62;
    }

    @media (max-width: 991px) {
      .navbar-logo-center {
        position: static;
        transform: none;
        margin: 10px 0;
        display: inline-flex;
      }

      .navbar-logo-center img {
        max-height: 42px;
      }
    }

    @media (max-width: 767px) {
      .hero {
        padding: 70px 0 55px;
      }

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

      .section {
        padding: 50px 0;
      }

      .countdown-number {
        font-size: 1.45rem;
      }

      .countdown-label {
        font-size: .72rem;
      }

      .hero-logo {
        max-width: 210px;
        max-height: 90px;
      }

      .navbar-title {
        max-width: 220px;
        white-space: normal;
        line-height: 1.2;
      }
    }
