:root {
  --navy: #051b49;
  --navy-2: #0a3475;
  --navy-deep: #020d24;
  --blue: #1667ff;
  --cyan: #2bd6d9;
  --red: #f0444c;
  --gold: #ffbd45;
  --gold-2: #ffd979;
  --surface: #ffffff;
  --surface-soft: #f3f7fd;
  --ink: #12213b;
  --muted: #647188;
  --border: rgba(5, 27, 73, 0.10);
  --shadow: 0 22px 55px rgba(2, 13, 36, 0.12);
  --shadow-strong: 0 36px 100px rgba(2, 13, 36, 0.26);
  --radius-xl: 34px;
  --radius-lg: 26px;
  --radius-md: 18px;
  --container: min(1220px, calc(100% - 32px));
  --transition: .25s ease;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.6;
  overflow-x: hidden;
}
img { display: block; width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.container { width: var(--container); margin-inline: auto; }
.section { padding: 100px 0; position: relative; }

/* HEADER */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.site-header::after {
  content: "";
  position: absolute;
  left: -4%;
  bottom: -18px;
  width: 108%;
  height: 24px;
  background: transparent;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  pointer-events: none;
  transition: background .35s ease, opacity .35s ease;
  opacity: 0;
}
.site-header.scrolled {
  background: rgba(2, 13, 36, .93);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: rgba(255,255,255,.06);
  box-shadow: 0 16px 38px rgba(2,13,36,.22);
}
.site-header.scrolled::after {
  background: rgba(2, 13, 36, .93);
  opacity: 1;
}
.nav-bar { position: relative; z-index: 2; min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand img { width: 238px; max-width: 52vw; }
.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav a { color: rgba(255,255,255,.9); font-size: 15px; font-weight: 650; transition: var(--transition); }
.main-nav a:hover { color: var(--gold-2); }
.nav-cta {
  padding: 12px 19px; border-radius: 999px;
  color: var(--navy-deep) !important; font-weight: 850 !important;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  box-shadow: 0 14px 28px rgba(255,189,69,.25);
}
.menu-toggle { display: none; border: 0; background: none; width: 46px; height: 46px; cursor: pointer; }
.menu-toggle span { display: block; width: 24px; height: 2px; margin: 5px auto; background: #fff; border-radius: 99px; }

/* HERO */
.hero-section {
  position: relative;
  isolation: isolate;
  color: #fff;
  padding: 128px 0 88px;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 8%, rgba(36, 98, 191, .30), transparent 34%),
    radial-gradient(circle at 12% 92%, rgba(255, 189, 69, .10), transparent 30%),
    linear-gradient(130deg, #020c21 0%, #04183e 45%, #082b62 100%);
}
.hero-texture {
  position: absolute;
  inset: 0;
  z-index: -4;
  opacity: .30;
  pointer-events: none;
  background-image: url('assets/hero-pattern.svg');
  background-size: 180px 180px;
  background-position: center top;
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.82) 70%, transparent 100%);
}
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 58%, rgba(255,255,255,.035) 58.2% 58.6%, transparent 58.8% 100%),
    linear-gradient(115deg, transparent 0 68%, rgba(255,189,69,.06) 68.2% 68.5%, transparent 68.7% 100%);
}
.hero-section::after {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  right: -260px;
  bottom: -300px;
  z-index: -2;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  box-shadow: 0 0 0 54px rgba(255,255,255,.018), 0 0 0 110px rgba(255,255,255,.014);
}

.hero-bottom-curve {
  position: absolute;
  left: -5%;
  bottom: -1px;
  width: 110%;
  height: 76px;
  z-index: 3;
  pointer-events: none;
  background: #f8fafe;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: translateY(42px);
  box-shadow: 0 -1px 0 rgba(255,255,255,.05);
}

.hero-light {
  position: absolute;
  z-index: -2;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(1px);
}
.hero-light-one {
  width: 380px;
  height: 2px;
  left: -90px;
  top: 155px;
  transform: rotate(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
}
.hero-light-two {
  width: 520px;
  height: 2px;
  right: -80px;
  top: 210px;
  transform: rotate(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,189,69,.22), transparent);
}

.hero-layout { display: grid; grid-template-columns: .92fr 1.08fr; gap: 56px; align-items: center; position: relative; z-index: 2; }
.eyebrow, .section-kicker, .form-kicker {
  font-size: 12px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase;
}
.eyebrow { color: var(--gold-2); display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; }
.eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 6px rgba(255,189,69,.12); }
.hero-copy h1 { margin: 0; font-size: clamp(3rem, 7vw, 5.7rem); line-height: .98; letter-spacing: -.055em; font-weight: 900; text-shadow: 0 4px 2px rgba(0,0,0,.24), 0 14px 34px rgba(0,0,0,.48); }
.hero-copy h1 span { color: var(--gold-2); }
.hero-subhead { margin: 20px 0 10px; font-size: clamp(1.1rem, 2vw, 1.42rem); font-weight: 760; color: #fff; }
.hero-description { max-width: 650px; margin: 0; color: rgba(255,255,255,.82); font-size: 1.03rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 30px; }
.btn { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; padding: 15px 24px; font-weight: 850; cursor: pointer; transition: transform var(--transition), box-shadow var(--transition); }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: var(--navy-deep); box-shadow: 0 18px 36px rgba(255,189,69,.26); }
.btn-glass { color: #fff; border: 1px solid rgba(255,255,255,.17); background: rgba(255,255,255,.08); backdrop-filter: blur(12px); }

.hero-media { position: relative; min-height: 640px; }
.hero-media > img {
  height: 640px; object-fit: cover; object-position: 55% center;
  border-radius: 38px; border: 1px solid rgba(255,255,255,.11); box-shadow: var(--shadow-strong);
}
.image-glow { position: absolute; inset: 10% -5% -5% 12%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(22,103,255,.28), transparent 68%); filter: blur(34px); }
.hero-badge {
  position: absolute; left: -28px; bottom: 32px;
  display: flex; align-items: center; gap: 14px;
  max-width: 340px; padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 21px; background: rgba(2,13,36,.72); backdrop-filter: blur(18px);
  box-shadow: 0 20px 50px rgba(0,0,0,.22);
}
.badge-icon { width: 50px; height: 50px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 15px; color: #062e72; background: linear-gradient(135deg, #77ecff, #2bd6d9); }
.hero-badge strong, .hero-badge span { display: block; }
.hero-badge strong { color: #fff; font-size: 1.03rem; }
.hero-badge span { color: var(--gold-2); font-size: .9rem; }

.hero-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 34px; position: relative; z-index: 2; }
.metric-card { display: flex; align-items: center; gap: 16px; min-height: 112px; padding: 20px; border-radius: 24px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.07); backdrop-filter: blur(14px); }
.metric-icon { width: 52px; height: 52px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 16px; }
.metric-card strong { display: block; font-size: 2rem; line-height: 1; color: #fff; margin-bottom: 7px; }
.metric-card span { display: block; font-size: .92rem; color: rgba(255,255,255,.75); }
.metric-red .metric-icon { background: linear-gradient(135deg,#ff8a8f,#f0444c); color:#fff; }
.metric-blue .metric-icon { background: linear-gradient(135deg,#70a1ff,#1667ff); color:#fff; }
.metric-gold .metric-icon { background: linear-gradient(135deg,#ffe091,#ffbd45); color:#633d00; }

/* COMMON SECTIONS */
.section-light { background: linear-gradient(180deg,#fff 0%,#f8fbff 100%); }
.section-kicker { color: var(--red); margin-bottom: 12px; }
.section-kicker.light { color: var(--gold-2); }
.split-block { display: grid; grid-template-columns: 1fr 1fr; gap: 58px; align-items: center; }
.split-copy h2, .section-heading h2 { margin: 0; color: var(--navy); font-size: clamp(2.15rem,4vw,3.7rem); line-height: 1.06; letter-spacing: -.045em; font-weight: 900; }
.split-copy p, .section-heading p { color: var(--muted); }
.lead { font-size: 1.16rem; font-weight: 640; color: #293851 !important; }
.image-card { position: relative; }
.image-card img { min-height: 510px; object-fit: cover; border-radius: 32px; box-shadow: var(--shadow); }
.image-label { position: absolute; left: 22px; bottom: 22px; padding: 12px 15px; border-radius: 14px; color: #fff; background: rgba(2,13,36,.76); backdrop-filter: blur(14px); font-size: .87rem; font-weight: 700; border: 1px solid rgba(255,255,255,.1); }

.value-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.value-card { display: flex; gap: 15px; padding: 21px; border-radius: 22px; background: #fff; border: 1px solid var(--border); box-shadow: 0 18px 42px rgba(2,13,36,.08); }
.value-icon { width: 50px; height: 50px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 16px; color: #fff; }
.value-blue .value-icon { background: linear-gradient(135deg,#55a0ff,#1667ff); box-shadow: 0 12px 25px rgba(22,103,255,.24); }
.value-red .value-icon { background: linear-gradient(135deg,#ff8f94,#f0444c); box-shadow: 0 12px 25px rgba(240,68,76,.22); }
.value-card h3 { margin: 0 0 5px; font-size: 1rem; color: var(--navy); }
.value-card p { margin: 0; font-size: .9rem; color: var(--muted); }

/* WHY DPL — PLATFORM HUB */
.why-section {
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 16% 12%, rgba(22,103,255,.18), transparent 25%),
    radial-gradient(circle at 84% 88%, rgba(240,68,76,.17), transparent 28%),
    linear-gradient(135deg,#020b1d 0%,#04183d 46%,#061f4d 100%);
}
.why-pattern {
  position:absolute;
  inset:0;
  z-index:-3;
  opacity:.18;
  pointer-events:none;
  background-image:
    linear-gradient(120deg, transparent 0 46%, rgba(255,255,255,.05) 46.2% 46.6%, transparent 46.8% 100%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.22) 1px, transparent 1.25px);
  background-size: 100% 100%, 34px 34px;
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.why-section::after {
  content:"WHY DPL";
  position:absolute;
  right:-24px;
  top:46px;
  z-index:-2;
  color:rgba(255,255,255,.035);
  font-size:clamp(7rem,16vw,15rem);
  line-height:.8;
  font-weight:900;
  letter-spacing:-.08em;
  white-space:nowrap;
}
.why-heading {
  display:grid;
  grid-template-columns:1fr .78fr;
  align-items:end;
  gap:50px;
  margin-bottom:56px;
}
.why-heading h2 {
  margin:0;
  color:#fff;
  font-size:clamp(2.5rem,5vw,4.4rem);
  line-height:1;
  letter-spacing:-.055em;
  font-weight:900;
}
.why-heading h2 span { color:var(--gold-2); }
.why-heading p {
  margin:0 0 5px;
  color:rgba(255,255,255,.72);
  font-size:1.05rem;
  max-width:510px;
}
.pillar-stage {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 220px minmax(0,1fr);
  grid-template-rows:1fr 1fr;
  gap:24px 38px;
  min-height:540px;
  align-items:stretch;
}
.pillar-card {
  position:relative;
  z-index:2;
  overflow:hidden;
  padding:30px 30px 28px;
  min-height:235px;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.13);
  background:
    linear-gradient(150deg,rgba(255,255,255,.12),rgba(255,255,255,.045));
  backdrop-filter:blur(20px);
  box-shadow:0 28px 70px rgba(0,0,0,.18);
  transition:transform .3s ease,border-color .3s ease,background .3s ease;
}
.pillar-card:hover {
  transform:translateY(-7px);
  border-color:rgba(255,255,255,.27);
  background:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.065));
}
.pillar-card::after {
  content:"";
  position:absolute;
  width:170px;
  height:170px;
  right:-80px;
  bottom:-95px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.11),transparent 68%);
}
.pillar-topline {
  position:absolute;
  left:30px;
  right:30px;
  top:0;
  height:3px;
  border-radius:0 0 99px 99px;
  opacity:.95;
}
.pillar-diplomacy { grid-column:1; grid-row:1; }
.pillar-sport { grid-column:3; grid-row:1; }
.pillar-community { grid-column:1; grid-row:2; }
.pillar-impact { grid-column:3; grid-row:2; }
.pillar-diplomacy .pillar-topline { background:linear-gradient(90deg,#69a9ff,#1667ff); }
.pillar-sport .pillar-topline { background:linear-gradient(90deg,#ff9da1,#f0444c); }
.pillar-community .pillar-topline { background:linear-gradient(90deg,#ffe5a1,#ffbd45); }
.pillar-impact .pillar-topline { background:linear-gradient(90deg,#9affff,#2bd6d9); }
.pillar-icon {
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
  border-radius:21px;
  margin-bottom:26px;
  box-shadow:0 15px 34px rgba(0,0,0,.22);
}
.pillar-icon svg { width:31px; height:31px; }
.pillar-number {
  position:absolute;
  right:25px;
  top:22px;
  color:rgba(255,255,255,.16);
  font-size:2.5rem;
  font-weight:900;
  letter-spacing:-.07em;
}
.pillar-card h3 {
  margin:0 0 8px;
  color:#fff;
  font-size:1.28rem;
  letter-spacing:-.02em;
}
.pillar-card p {
  margin:0;
  max-width:440px;
  color:rgba(255,255,255,.70);
  font-size:.95rem;
}
.platform-core {
  grid-column:2;
  grid-row:1 / span 2;
  align-self:center;
  justify-self:center;
  position:relative;
  z-index:4;
  width:205px;
  height:205px;
  padding:30px 24px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:
    radial-gradient(circle at 35% 25%,rgba(255,255,255,.17),transparent 24%),
    linear-gradient(145deg,rgba(11,54,127,.96),rgba(2,13,36,.98));
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 0 0 11px rgba(255,255,255,.035),0 28px 65px rgba(0,0,0,.34),inset 0 0 36px rgba(22,103,255,.13);
}
.core-logo-wrap {
  width:116px;
  margin-bottom:13px;
}
.core-logo-wrap img { width:100%; }
.platform-core strong {
  display:block;
  color:var(--gold-2);
  font-size:.73rem;
  letter-spacing:.13em;
}
.platform-core > span:last-child {
  display:block;
  margin-top:5px;
  max-width:150px;
  color:rgba(255,255,255,.58);
  font-size:.7rem;
  line-height:1.35;
}
.core-ring {
  position:absolute;
  inset:-24px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.08);
}
.core-ring-two { inset:-50px; border-style:dashed; border-color:rgba(255,189,69,.16); }
.pillar-connector {
  position:absolute;
  z-index:1;
  width:110px;
  height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,189,69,.35),rgba(255,255,255,.05));
  transform-origin:center;
}
.connector-left-top { left:calc(50% - 143px); top:30%; transform:rotate(28deg); }
.connector-right-top { right:calc(50% - 143px); top:30%; transform:rotate(-28deg); }
.connector-left-bottom { left:calc(50% - 143px); bottom:30%; transform:rotate(-28deg); }
.connector-right-bottom { right:calc(50% - 143px); bottom:30%; transform:rotate(28deg); }

/* INTERNATIONAL */
.international-section { background:#fff; }
.international-visual { margin-bottom:26px; }
.international-visual img { min-height:330px; max-height:420px; }
.international-overlay { position:absolute; inset:auto 22px 22px 22px; padding:15px 18px; border-radius:16px; background:rgba(2,13,36,.72); color:#fff; border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(15px); font-weight:650; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.stat-card { position:relative; overflow:hidden; display:flex; align-items:center; gap:17px; min-height:140px; padding:24px; border-radius:25px; background:#fff; border:1px solid var(--border); box-shadow:0 20px 46px rgba(2,13,36,.09); }
.stat-card::after { content:""; position:absolute; width:100px;height:100px; right:-40px; bottom:-50px; border-radius:50%; opacity:.16; background:currentColor; }
.stat-icon { width:58px;height:58px; flex:0 0 auto; display:grid;place-items:center; border-radius:18px; color:#fff; }
.stat-icon svg { width:28px;height:28px; }
.stat-copy strong { display:block; font-size:2rem; line-height:1; color:var(--navy); margin-bottom:7px; }
.stat-copy span { display:block; font-size:.88rem; font-weight:720; color:#526078; }
.stat-blue { color:#1667ff; } .stat-blue .stat-icon { background:linear-gradient(135deg,#68a7ff,#1667ff); }
.stat-red { color:#f0444c; } .stat-red .stat-icon { background:linear-gradient(135deg,#ff969a,#f0444c); }
.stat-gold { color:#ffbd45; } .stat-gold .stat-icon { background:linear-gradient(135deg,#ffe7aa,#ffbd45); color:#724500; }
.stat-cyan { color:#2bd6d9; } .stat-cyan .stat-icon { background:linear-gradient(135deg,#99ffff,#2bd6d9); color:#00505a; }

/* EXPERIENCE */
.experience-section { background:linear-gradient(180deg,#f2f6fc 0%,#f9fbff 100%); }
.experience-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.experience-card { overflow:hidden; border-radius:28px; background:#fff; border:1px solid var(--border); box-shadow:var(--shadow); transition:transform .3s ease,box-shadow .3s ease; }
.experience-card:hover { transform:translateY(-7px); box-shadow:0 28px 70px rgba(2,13,36,.16); }
.experience-image { height:270px; overflow:hidden; }
.experience-image img { height:100%; object-fit:cover; transition:transform .45s ease; }
.experience-card:hover .experience-image img { transform:scale(1.04); }
.experience-content { padding:25px; position:relative; }
.experience-icon { width:52px;height:52px; margin-top:-51px; margin-bottom:16px; border:5px solid #fff; display:grid;place-items:center; border-radius:17px; box-sizing:content-box; }
.experience-content h3 { margin:0 0 8px; color:var(--navy); font-size:1.2rem; }
.experience-content p { margin:0; color:var(--muted); }

/* REGISTER */
.register-section { isolation:isolate; overflow:hidden; background:linear-gradient(180deg,#fff 0%,#f4f7fd 100%); }
.register-orb { position:absolute; z-index:-1; border-radius:50%; opacity:.5; filter:blur(8px); }
.register-orb-one { width:350px;height:350px; left:-160px; top:120px; background:radial-gradient(circle,rgba(22,103,255,.18),transparent 70%); }
.register-orb-two { width:420px;height:420px; right:-190px; bottom:-150px; background:radial-gradient(circle,rgba(240,68,76,.15),transparent 70%); }
.register-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:30px; align-items:stretch; }
.invite-panel, .form-panel { border-radius:31px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--border); background:#fff; }
.invite-panel img { width:100%; height:100%; min-height:760px; object-fit:cover; object-position:center top; }
.form-panel { padding:34px; background:linear-gradient(180deg,#fff,#fbfcff); }
.form-heading-row { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:4px; }
.form-kicker { color:var(--blue); display:block; margin-bottom:7px; }
.form-panel h3 { margin:0; color:var(--navy); font-size:1.7rem; letter-spacing:-.03em; }
.form-panel > p { color:var(--muted); margin:8px 0 0; }
.form-heading-icon { width:56px;height:56px; flex:0 0 auto; display:grid;place-items:center; border-radius:18px; color:#fff; background:linear-gradient(135deg,#69a7ff,#1667ff); box-shadow:0 14px 30px rgba(22,103,255,.23); }
.registration-form { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:26px; }
.form-field { display:flex; flex-direction:column; gap:8px; }
.form-field.full-width, .form-action.full-width { grid-column:1/-1; }
label { color:var(--navy); font-size:.9rem; font-weight:760; }
.input-wrap { position:relative; }
.input-icon { position:absolute; left:15px; top:50%; transform:translateY(-50%); width:22px; height:22px; display:grid; place-items:center; color:#6d7890; pointer-events:none; }
.input-icon svg { width:20px;height:20px; }
input, select { width:100%; min-height:55px; padding:0 16px 0 48px; border:1px solid rgba(5,27,73,.13); border-radius:15px; background:#fff; color:var(--ink); outline:none; transition:border-color var(--transition),box-shadow var(--transition),background var(--transition); }
input::placeholder { color:#9aa4b5; }
input:focus, select:focus { border-color:var(--blue); box-shadow:0 0 0 4px rgba(22,103,255,.1); background:#fff; }
select { appearance:auto; }
.full-btn { width:100%; min-height:55px; }
.form-message { margin:11px 0 0; min-height:22px; font-weight:650; }
.form-message.success { color:#0a8c51; }
.form-message.error { color:#c63745; }

/* FOOTER */
.site-footer {
  position: relative;
  margin-top: 72px;
  padding: 34px 0 26px;
  background: var(--navy-deep);
  color: #fff;
  border-top: 0;
}
.site-footer::before {
  content: "";
  position: absolute;
  left: -5%;
  top: -58px;
  width: 110%;
  height: 78px;
  background: var(--navy-deep);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  pointer-events: none;
}
.footer-layout { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:18px; }
.footer-left p { margin:0; color:rgba(255,255,255,.68); font-size:.9rem; }
.footer-right { display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.76); font-size:.9rem; font-weight:650; }
.footer-right img { width:30px; height:30px; object-fit:contain; }

/* REVEAL */
.reveal { opacity:0; transform:translateY(25px); transition:opacity .7s ease,transform .7s ease; }
.reveal.is-visible { opacity:1; transform:translateY(0); }
.delay-1 { transition-delay:.08s; } .delay-2 { transition-delay:.16s; } .delay-3 { transition-delay:.24s; }

/* ANIMATIONS */
@keyframes gridDrift { from{ transform:translate3d(0,0,0);} to{ transform:translate3d(52px,52px,0);} }
@keyframes floatOne { 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-40px,45px) scale(1.08);} }
@keyframes floatTwo { 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(55px,-35px) scale(.94);} }
@keyframes floatThree { 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(35px,30px);} }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}

@media (max-width: 1080px) {
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .hero-layout { grid-template-columns:1fr 1fr; gap:34px; }
  .hero-media, .hero-media > img { min-height:560px; height:560px; }
}

@media (max-width: 1080px) {
  .pillar-stage { grid-template-columns:minmax(0,1fr) 180px minmax(0,1fr); gap:20px 26px; }
  .platform-core { width:172px; height:172px; padding:24px 18px; }
  .core-logo-wrap { width:96px; }
  .core-ring { inset:-18px; }
  .core-ring-two { inset:-36px; }
  .pillar-card { padding:26px 24px; }
}

@media (max-width: 860px) {
  .menu-toggle { display:block; }
  .main-nav { position:absolute; left:0; right:0; top:100%; display:none; flex-direction:column; align-items:flex-start; gap:0; padding:14px 16px 20px; background:rgba(2,13,36,.98); border-bottom:1px solid rgba(255,255,255,.07); }
  .main-nav.is-open { display:flex; }
  .main-nav a { width:100%; padding:13px 4px; }
  .main-nav .nav-cta { width:auto; margin-top:8px; }

  .section { padding:78px 0; }
  .hero-section { padding-top:108px; padding-bottom:72px; }
  .hero-bottom-curve { height:54px; transform:translateY(31px); }

  .site-footer { margin-top:52px; padding-top:28px; }
  .site-footer::before { top:-38px; height:54px; }
  .why-heading { grid-template-columns:1fr; gap:18px; margin-bottom:38px; }
  .why-heading p { max-width:680px; }
  .pillar-stage { grid-template-columns:1fr 1fr; grid-template-rows:auto; min-height:0; gap:18px; }
  .pillar-diplomacy, .pillar-sport, .pillar-community, .pillar-impact { grid-column:auto; grid-row:auto; }
  .platform-core { grid-column:1 / -1; grid-row:2; width:auto; height:auto; min-height:150px; border-radius:28px; padding:25px; flex-direction:row; gap:20px; justify-content:center; }
  .core-logo-wrap { width:120px; margin:0; }
  .platform-core > span:last-child { max-width:170px; }
  .core-ring, .pillar-connector { display:none; }
  .pillar-sport { grid-row:1; grid-column:2; }
  .pillar-diplomacy { grid-row:1; grid-column:1; }
  .pillar-community { grid-row:3; grid-column:1; }
  .pillar-impact { grid-row:3; grid-column:2; }
  .hero-layout { grid-template-columns:1fr; }
  .hero-media { order:1; min-height:520px; }
  .hero-media > img { height:520px; min-height:520px; object-position:center 38%; }
  .hero-copy { order:2; }
  .hero-badge { left:18px; bottom:18px; }
  .hero-metrics { grid-template-columns:1fr; }

  .split-block { grid-template-columns:1fr; gap:34px; }
  .image-card img { min-height:420px; }
  .value-grid { grid-template-columns:1fr; }
  .experience-grid { grid-template-columns:1fr; }
  .experience-image { height:310px; }
  .register-layout { grid-template-columns:1fr; }
  .invite-panel img { min-height:auto; height:auto; aspect-ratio:auto; object-fit:contain; }
  .registration-form { grid-template-columns:1fr; }
  .form-field.full-width, .form-action.full-width { grid-column:auto; }
  .footer-layout { flex-direction:column; align-items:flex-start; }
}

@media (max-width: 580px) {
  .brand img { width:185px; }
  .hero-media { min-height:470px; }
  .hero-media > img { height:470px; min-height:470px; border-radius:27px; }
  .hero-badge { position:static; margin-top:13px; max-width:none; }
  .hero-copy h1 { font-size:clamp(2.55rem,14vw,4rem); text-shadow: 0 3px 2px rgba(0,0,0,.24), 0 10px 24px rgba(0,0,0,.45); }
  .hero-actions { flex-direction:column; }
  .btn { width:100%; }
  .pillar-stage { display:flex; flex-direction:column; }
  .platform-core { order:-1; min-height:140px; }
  .pillar-card { min-height:0; }
  .stats-grid { grid-template-columns:1fr; }
  .form-panel { padding:23px 18px; }
  .form-heading-icon { width:48px;height:48px; }
  .international-overlay { position:static; margin-top:12px; background:var(--navy); }
}

/* HERO - EVOLUTION SHOWCASE */
.hero-evolution {
  position: relative;
  z-index: 2;
  margin-top: 44px;
}
.evolution-frame {
  overflow: hidden;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.14);
  background: #061a40;
  box-shadow: 0 30px 80px rgba(0,0,0,.30);
}
.evolution-frame img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 860px) {
  .hero-evolution { margin-top: 30px; }
  .evolution-frame { border-radius: 22px; }
}

@media (max-width: 560px) {
  .hero-evolution {
    width: calc(100% - 20px);
    margin-top: 26px;
  }
  .evolution-frame {
    border-radius: 18px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .evolution-frame img {
    width: 760px;
    max-width: none;
  }
}

/* =========================================================
   SEPT 1 REFINEMENT — EVOLUTION CONTENT / COMPACT WHY DPL / CTA
   ========================================================= */

/* Premium pickleball CTA */
.hero-register-btn {
  position: relative;
  isolation: isolate;
  overflow: visible;
  gap: 13px;
  min-height: 58px;
  padding: 15px 20px 15px 25px;
  border: 1px solid rgba(255,255,255,.24);
  background: linear-gradient(135deg,#ffc957 0%,#f6aa2c 48%,#ffd978 100%);
  box-shadow: 0 17px 36px rgba(246,170,44,.30), inset 0 1px 0 rgba(255,255,255,.58);
}
.hero-register-btn::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:-1px;
  border-radius:inherit;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.62) 45%,transparent 70%);
  transform:translateX(-130%);
  transition:transform .65s ease;
  overflow:hidden;
}
.hero-register-btn:hover::before { transform:translateX(130%); }
.hero-register-btn:hover { box-shadow:0 22px 46px rgba(246,170,44,.38), 0 0 0 5px rgba(255,202,87,.08); }
.hero-register-btn .btn-label { position:relative; z-index:2; }
.pickleball-mark {
  position:relative;
  z-index:2;
  flex:0 0 auto;
  width:32px;
  height:32px;
  border-radius:50%;
  background:
    radial-gradient(circle at 29% 27%,#273b32 0 2px,transparent 2.6px),
    radial-gradient(circle at 62% 24%,#273b32 0 2px,transparent 2.6px),
    radial-gradient(circle at 76% 49%,#273b32 0 2px,transparent 2.6px),
    radial-gradient(circle at 55% 70%,#273b32 0 2px,transparent 2.6px),
    radial-gradient(circle at 26% 62%,#273b32 0 2px,transparent 2.6px),
    linear-gradient(145deg,#effc64,#bfe219);
  border:1px solid rgba(4,27,72,.28);
  box-shadow:0 7px 12px rgba(4,27,72,.24), inset -4px -5px 8px rgba(82,111,0,.20), inset 4px 4px 7px rgba(255,255,255,.45);
  animation:pickleBounce 1.25s cubic-bezier(.45,.05,.55,.95) infinite;
}
.pickleball-mark::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  width:22px;
  height:6px;
  border-radius:50%;
  background:rgba(4,27,72,.22);
  filter:blur(2px);
  transform:translateX(-50%);
  animation:pickleShadow 1.25s ease-in-out infinite;
}
@keyframes pickleBounce {
  0%,100% { transform:translateY(0) rotate(0deg); }
  48% { transform:translateY(-8px) rotate(14deg); }
  58% { transform:translateY(-8px) rotate(16deg); }
}
@keyframes pickleShadow {
  0%,100% { opacity:.45; transform:translateX(-50%) scale(1); }
  50% { opacity:.15; transform:translateX(-50%) scale(.62); }
}

/* Designed evolution section — source copy, not source image */
.evolution-section {
  position:relative;
  padding:82px 0;
  background:
    radial-gradient(circle at 8% 8%,rgba(22,103,255,.08),transparent 26%),
    linear-gradient(180deg,#f8fafe 0%,#fff 100%);
  overflow:hidden;
}
.evolution-section::after {
  content:"";
  position:absolute;
  right:-140px;
  bottom:-190px;
  width:430px;
  height:430px;
  border-radius:50%;
  border:70px solid rgba(227,57,63,.035);
  pointer-events:none;
}
.evolution-shell {
  display:grid;
  grid-template-columns:280px 1fr;
  gap:32px;
  align-items:stretch;
}
.evolution-intro {
  position:relative;
  overflow:hidden;
  min-height:100%;
  padding:34px 30px 130px;
  border-radius:30px;
  color:#fff;
  background:linear-gradient(155deg,#071d4b 0%,#0a3276 64%,#0d438e 100%);
  box-shadow:0 24px 65px rgba(4,27,72,.18);
}
.evolution-intro::before {
  content:"";
  position:absolute;
  inset:0;
  opacity:.34;
  background-image:
    linear-gradient(120deg,transparent 0 42%,rgba(255,255,255,.06) 42.5% 43%,transparent 43.5%),
    radial-gradient(circle at 80% 14%,rgba(255,198,82,.22),transparent 22%);
  pointer-events:none;
}
.evolution-mini {
  position:relative;
  z-index:1;
  display:block;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:.76rem;
  font-weight:850;
  color:rgba(255,255,255,.68);
  margin-bottom:10px;
}
.evolution-intro h2 {
  position:relative;
  z-index:1;
  margin:0;
  font-size:clamp(2.05rem,3.1vw,3.15rem);
  line-height:.98;
  letter-spacing:-.055em;
  text-transform:uppercase;
}
.evolution-intro h2 span { color:#ff4e57; }
.evolution-intro p {
  position:relative;
  z-index:1;
  margin:22px 0 0;
  color:rgba(255,255,255,.78);
  font-size:.93rem;
}
.evolution-court {
  position:absolute;
  left:28px;
  right:28px;
  bottom:24px;
  height:84px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:10px;
  transform:skewY(-4deg);
}
.evolution-court::before,
.evolution-court::after,
.court-line {
  content:"";
  position:absolute;
  background:rgba(255,255,255,.22);
}
.evolution-court::before { left:50%; top:0; bottom:0; width:1px; }
.evolution-court::after { left:0; right:0; top:50%; height:1px; }
.court-line-one { width:1px; top:0; bottom:0; left:24%; }
.court-line-two { width:1px; top:0; bottom:0; right:24%; }
.court-ball {
  position:absolute;
  width:24px;
  height:24px;
  border-radius:50%;
  left:58%;
  top:29%;
  background:radial-gradient(circle at 30% 30%,#25361c 0 1.5px,transparent 2px),linear-gradient(145deg,#effc64,#bfe219);
  box-shadow:0 6px 10px rgba(0,0,0,.24);
}
.evolution-content {
  padding:8px 0;
}
.evolution-heading {
  max-width:790px;
  margin-bottom:26px;
}
.evolution-heading h2 {
  margin:0 0 13px;
  color:var(--navy);
  font-size:clamp(2rem,3.4vw,3.15rem);
  line-height:1.05;
  letter-spacing:-.045em;
}
.evolution-heading p {
  margin:0;
  color:var(--muted);
  max-width:760px;
}
.evolution-track {
  display:grid;
  grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr) 34px minmax(0,1fr);
  gap:12px;
  align-items:stretch;
}
.evolution-step {
  position:relative;
  overflow:hidden;
  padding:24px 22px 20px;
  border-radius:24px;
  background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);
  border:1px solid rgba(5,27,73,.09);
  box-shadow:0 16px 40px rgba(3,24,64,.09);
  transition:transform .28s ease,box-shadow .28s ease;
}
.evolution-step::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:4px;
  background:var(--step-color,#1667ff);
}
.evolution-step:hover { transform:translateY(-5px); box-shadow:0 24px 52px rgba(3,24,64,.14); }
.step-football { --step-color:#1667ff; }
.step-pickleball { --step-color:#f0444c; }
.step-future { --step-color:#ffb92f; }
.step-icon {
  width:60px;
  height:60px;
  display:grid;
  place-items:center;
  margin-bottom:17px;
  border-radius:19px;
  color:var(--step-color);
  background:color-mix(in srgb,var(--step-color) 11%,white);
  border:1px solid color-mix(in srgb,var(--step-color) 24%,white);
}
.step-icon svg { width:40px; height:40px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.step-label {
  display:block;
  margin-bottom:5px;
  color:#78849a;
  text-transform:uppercase;
  letter-spacing:.095em;
  font-size:.69rem;
  font-weight:850;
}
.step-copy h3 {
  margin:0 0 10px;
  color:var(--navy);
  font-size:1.16rem;
  letter-spacing:-.025em;
}
.step-copy p {
  margin:0;
  color:#667389;
  font-size:.87rem;
  line-height:1.58;
}
.step-note {
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid rgba(5,27,73,.08);
  color:#263752;
  font-size:.78rem;
  line-height:1.45;
  font-weight:760;
}
.evolution-arrow {
  display:grid;
  place-items:center;
  color:#e73741;
  font-size:2rem;
  font-weight:900;
  opacity:.75;
}

/* Compact Why DPL redesign */
.why-compact-section {
  position:relative;
  padding:62px 0;
  overflow:hidden;
  background:
    radial-gradient(circle at 0 100%,rgba(22,103,255,.13),transparent 28%),
    radial-gradient(circle at 100% 0,rgba(240,68,76,.11),transparent 28%),
    linear-gradient(135deg,#031536 0%,#082963 56%,#031431 100%);
}
.why-compact-section::before {
  content:"";
  position:absolute;
  inset:0;
  opacity:.16;
  background-image:
    linear-gradient(135deg,rgba(255,255,255,.12) 1px,transparent 1px),
    linear-gradient(45deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(90deg,transparent,black 20%,black 80%,transparent);
  pointer-events:none;
}
.why-compact-wrap {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:190px 1fr;
  gap:26px;
  align-items:center;
}
.why-compact-heading h2 {
  margin:0;
  color:#fff;
  font-size:clamp(2.1rem,3.2vw,3.15rem);
  letter-spacing:-.05em;
  line-height:.98;
}
.why-heading-mark {
  width:58px;
  height:4px;
  border-radius:999px;
  margin-top:15px;
  background:linear-gradient(90deg,#f0444c,#ffbd45);
}
.why-compact-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:13px;
}
.why-compact-card {
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:13px;
  min-height:154px;
  padding:18px 16px;
  border-radius:21px;
  background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.055));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 15px 34px rgba(0,0,0,.13);
  backdrop-filter:blur(15px);
  transition:transform .26s ease,background .26s ease,border-color .26s ease;
}
.why-compact-card:hover {
  transform:translateY(-5px);
  background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.075));
  border-color:rgba(255,255,255,.22);
}
.why-card-icon {
  width:46px;
  height:46px;
  flex:0 0 46px;
  display:grid;
  place-items:center;
  border-radius:15px;
  color:#fff;
  box-shadow:0 12px 24px rgba(0,0,0,.18);
}
.why-card-icon svg { width:25px;height:25px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.why-card-copy h3 {
  margin:0 0 6px;
  color:#fff;
  font-size:1rem;
}
.why-card-copy p {
  margin:0;
  color:rgba(255,255,255,.70);
  font-size:.78rem;
  line-height:1.48;
}
.why-blue .why-card-icon { background:linear-gradient(135deg,#5fa0ff,#1667ff); }
.why-red .why-card-icon { background:linear-gradient(135deg,#ff7b82,#f0444c); }
.why-gold .why-card-icon { background:linear-gradient(135deg,#ffd979,#f5ad23); color:#553700; }
.why-cyan .why-card-icon { background:linear-gradient(135deg,#73f0ef,#1abfc5); color:#003f45; }

/* retire the previous image-based evolution and expansive Why DPL layout */
.hero-evolution { display:none !important; }

@media (max-width:1080px) {
  .evolution-shell { grid-template-columns:240px 1fr; gap:24px; }
  .evolution-track { grid-template-columns:1fr; gap:13px; }
  .evolution-arrow { transform:rotate(90deg); height:18px; font-size:1.55rem; }
  .evolution-step { display:grid; grid-template-columns:62px 1fr; gap:15px; }
  .step-icon { margin:0; }
  .why-compact-wrap { grid-template-columns:1fr; gap:20px; }
  .why-compact-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
  .why-heading-mark { display:none; }
  .why-compact-grid { grid-template-columns:repeat(2,1fr); }
  .why-compact-card { min-height:132px; }
}

@media (max-width:860px) {
  .evolution-section { padding:68px 0; }
  .evolution-shell { grid-template-columns:1fr; }
  .evolution-intro { min-height:330px; padding-bottom:122px; }
  .evolution-heading h2 { font-size:2.3rem; }
  .why-compact-section { padding:54px 0; }
}

@media (max-width:580px) {
  .hero-register-btn { width:100%; justify-content:space-between; text-align:left; padding-left:19px; padding-right:15px; }
  .hero-register-btn .btn-label { max-width:245px; }
  .pickleball-mark { width:34px;height:34px; }
  .evolution-section { padding:58px 0; }
  .evolution-intro { min-height:315px; border-radius:24px; padding:28px 24px 120px; }
  .evolution-intro h2 { font-size:2.35rem; }
  .evolution-content { padding-top:4px; }
  .evolution-heading h2 { font-size:2rem; }
  .evolution-step { grid-template-columns:52px 1fr; padding:19px 17px; border-radius:20px; }
  .step-icon { width:52px;height:52px;border-radius:16px; }
  .step-icon svg { width:34px;height:34px; }
  .why-compact-heading { display:block; }
  .why-compact-grid { grid-template-columns:1fr; gap:11px; }
  .why-compact-card { min-height:0; padding:16px 15px; }
}

/* ===== SEPT 1 FINAL TWEAKS: NAV / HERO SLIDER / CAPTCHA / MOBILE WHATSAPP ===== */

/* Remove the faint seam under the curved glass header after scroll. */
.site-header,
.site-header.scrolled {
  border-bottom: 0 !important;
}
.site-header.scrolled::after {
  bottom: -21px;
  height: 28px;
  background: rgba(2, 13, 36, .93);
  box-shadow: 0 18px 34px rgba(2,13,36,.12);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-call {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  white-space: nowrap;
  padding: 9px 12px !important;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nav-call:hover {
  background: rgba(255,255,255,.12);
  color: var(--gold-2) !important;
}
.nav-call svg {
  width: 17px;
  height: 17px;
  color: var(--gold-2);
  stroke-width: 2.1;
}
.nav-call-label {
  color: rgba(255,255,255,.66);
  font-weight: 650;
}
.nav-call strong {
  letter-spacing: .01em;
}

/* Three-image hero slideshow. Replace these files later without changing HTML:
   assets/heroimage1.jpg, assets/heroimage2.jpg, assets/heroimage3.jpg */
.hero-slider {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 38px;
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: var(--shadow-strong);
  background: #06183c;
}
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% center;
  opacity: 0;
  transform: scale(1.07) translate3d(0,0,0);
  transition: opacity 1.1s ease;
  will-change: opacity, transform;
}
.hero-slide:nth-child(2) { object-position: center center; transform-origin: 40% 50%; }
.hero-slide:nth-child(3) { object-position: center center; transform-origin: 60% 50%; }
.hero-slide.is-active {
  opacity: 1;
  z-index: 1;
  animation: heroSlowMove 6s ease-in-out infinite alternate;
}
@keyframes heroSlowMove {
  0% { transform: scale(1.065) translate3d(0, 0, 0); }
  100% { transform: scale(1.115) translate3d(-1.5%, -1%, 0); }
}
.hero-slider-dots {
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 5;
  display: flex;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(2,13,36,.46);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero-slider-dots span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.38);
  transition: width .3s ease, background .3s ease;
}
.hero-slider-dots span.is-active {
  width: 22px;
  background: var(--gold-2);
}
/* old direct hero image rules no longer apply because images live inside .hero-slider */
.hero-media > img { display: none !important; }

/* Compact, server-side CAPTCHA row. */
.registration-form {
  gap: 14px 16px;
  margin-top: 22px;
}
.form-panel {
  padding: 30px;
}
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.captcha-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.captcha-inline {
  display: grid;
  grid-template-columns: auto minmax(140px, 1fr);
  gap: 10px;
  align-items: center;
}
.captcha-image-wrap {
  height: 52px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(5,27,73,.14);
  background: #eef3fb;
}
.captcha-image-wrap img {
  width: 150px;
  height: 52px;
  object-fit: cover;
  background: #edf3fb;
}
.captcha-refresh {
  width: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-left: 1px solid rgba(5,27,73,.11);
  background: #fff;
  color: var(--blue);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.captcha-refresh:hover {
  background: #f4f7fd;
}
.captcha-refresh:active {
  transform: rotate(18deg);
}
.captcha-refresh svg {
  width: 20px;
  height: 20px;
}
.captcha-inline > input {
  min-height: 52px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 800;
}

/* Keep invite and form perfectly matched in height even with CAPTCHA. */
.register-layout { align-items: stretch; }
.invite-panel { display: flex; min-height: 100%; }
.invite-panel img {
  min-height: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.mobile-whatsapp {
  display: none;
}

@media (max-width: 1080px) {
  .hero-media,
  .hero-slider {
    min-height: 560px;
    height: 560px;
  }
}

@media (max-width: 860px) {
  .main-nav .nav-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 7px;
  }
  .main-nav .nav-cta,
  .main-nav .nav-call {
    width: auto;
    margin-top: 0;
  }

  .hero-media,
  .hero-slider {
    min-height: 520px;
    height: 520px;
  }
  .hero-slider {
    border-radius: 32px;
  }
  .hero-slide {
    object-position: center center;
  }

  .invite-panel img {
    min-height: auto;
    height: auto;
    width: 100%;
    object-fit: contain;
  }

  .captcha-inline {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .captcha-image-wrap {
    width: 100%;
  }
  .captcha-image-wrap img {
    flex: 1;
    width: auto;
  }

  .mobile-whatsapp {
    position: fixed;
    right: 14px;
    bottom: 16px;
    z-index: 120;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 13px 9px 9px;
    border-radius: 999px;
    color: #fff;
    background: #25D366;
    box-shadow: 0 16px 34px rgba(4,77,36,.34);
    font-size: 12px;
    line-height: 1.1;
  }
  .mobile-whatsapp:hover { color: #fff; }
  .whatsapp-icon {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.16);
  }
  .whatsapp-icon svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
  }
  .mobile-whatsapp small,
  .mobile-whatsapp strong {
    display: block;
  }
  .mobile-whatsapp small {
    opacity: .82;
    margin-bottom: 2px;
  }
  .mobile-whatsapp strong {
    font-size: 13px;
    letter-spacing: .01em;
  }
}

@media (max-width: 580px) {
  .hero-media,
  .hero-slider {
    min-height: 470px;
    height: 470px;
  }
  .hero-slider { border-radius: 27px; }
  .hero-slider-dots { right: 14px; bottom: 14px; }
  .form-panel { padding: 22px 18px; }
  .registration-form { gap: 12px; }
  .captcha-image-wrap { height: 48px; }
  .captcha-image-wrap img { height: 48px; }
  .captcha-inline > input { min-height: 48px; }
}
.captcha-field.full-width { grid-column: 1 / -1; }
@media (max-width: 860px) {
  .captcha-field.full-width { grid-column: auto; }
}

/* ===== SEPT 1 PATCH: clean slider photos / seamless header / full invite / icon-only WhatsApp ===== */

/* Build the scrolled curved header as one continuous layer so no horizontal seam can show. */
.site-header::after { display: none !important; }
.site-header.scrolled {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: 0 !important;
}
.site-header.scrolled::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -3%;
  right: -3%;
  top: 0;
  height: 106px;
  background: rgba(2, 13, 36, .955);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 0 0 50% 50% / 0 0 30px 30px;
  box-shadow: 0 15px 36px rgba(2, 13, 36, .20);
  pointer-events: none;
}
.site-header.scrolled .nav-bar { position: relative; z-index: 2; }

/* Keep slider imagery contained in its own column and above decorative elements. */
.hero-media { isolation: isolate; overflow: visible; }
.hero-slider { z-index: 2; }
.hero-slider-dots { z-index: 6; }
.image-glow { z-index: 0; }
.hero-badge { z-index: 7; }

/* Registration: show the complete invitation instead of cropping it. */
.register-layout {
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: 28px;
  align-items: stretch;
}
.invite-panel {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: #03152f;
}
.invite-panel img {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center top !important;
}

@media (max-width: 860px) {
  .site-header.scrolled::before {
    height: 99px;
    border-radius: 0 0 50% 50% / 0 0 22px 22px;
  }

  .register-layout { grid-template-columns: 1fr; }
  .invite-panel { background: #03152f; }
  .invite-panel img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Mobile WhatsApp: clean green circular icon only. */
  .mobile-whatsapp {
    right: 16px;
    bottom: 18px;
    width: 58px;
    height: 58px;
    padding: 0 !important;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #25D366;
    box-shadow: 0 14px 34px rgba(4,77,36,.34);
  }
  .mobile-whatsapp .whatsapp-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: transparent;
  }
  .mobile-whatsapp .whatsapp-icon svg {
    width: 32px;
    height: 32px;
    stroke-width: 1.9;
  }
}

/* ===== SEPT 1 PATCH: evolution intro with diffused background image instead of flat blue + court icon ===== */
.evolution-intro {
  background: linear-gradient(165deg, #061737 0%, #0a2558 100%) !important;
  border: 1px solid rgba(255,255,255,.08);
  isolation: isolate;
}
.evolution-intro::before {
  inset: -2%;
  opacity: .42 !important;
  background:
    url('assets/dpl.jpg') center center / cover no-repeat !important;
  filter: blur(2px) saturate(.92);
  transform: scale(1.08);
}
.evolution-intro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 24%, rgba(255,189,69,.18), transparent 22%),
    radial-gradient(circle at 18% 78%, rgba(240,68,76,.15), transparent 26%),
    linear-gradient(180deg, rgba(3,13,34,.38) 0%, rgba(4,16,43,.52) 100%);
}
.evolution-intro > * {
  position: relative;
  z-index: 1;
}
.evolution-intro p {
  max-width: 92%;
  color: rgba(255,255,255,.86);
}
.evolution-court {
  display: none !important;
}

/* ===== DPL IMAGE PATCH: show dpl.jpg clean, without the dark overlay ===== */
.evolution-intro {
  background: #eef3f8 !important;
  border-color: rgba(5,27,73,.10);
}
.evolution-intro::before {
  inset: 0 !important;
  opacity: 1 !important;
  background: url('assets/dpl.jpg') center center / cover no-repeat !important;
  filter: none !important;
  transform: none !important;
}
.evolution-intro::after {
  display: none !important;
}
.evolution-mini {
  color: #0b2453 !important;
  text-shadow: 0 1px 12px rgba(255,255,255,.9);
}
.evolution-intro h2 {
  color: #051b49 !important;
  text-shadow: 0 2px 14px rgba(255,255,255,.92);
}
.evolution-intro h2 span {
  color: #ef313b !important;
  text-shadow: 0 2px 12px rgba(255,255,255,.92);
}
.evolution-intro p {
  color: #10264d !important;
  font-weight: 650;
  text-shadow: 0 1px 10px rgba(255,255,255,.96);
}

/* ===== READABILITY PATCH: soft white top gradient over dpl.jpg ===== */
.evolution-intro::after {
  display: block !important;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.82) 18%,
      rgba(255,255,255,.62) 36%,
      rgba(255,255,255,.34) 52%,
      rgba(255,255,255,.14) 66%,
      rgba(255,255,255,0) 80%),
    linear-gradient(90deg,
      rgba(255,255,255,.12) 0%,
      rgba(255,255,255,0) 42%);
}
.evolution-mini {
  text-shadow: 0 1px 0 rgba(255,255,255,.5), 0 3px 10px rgba(255,255,255,.35);
}
.evolution-intro h2 {
  text-shadow: 0 1px 0 rgba(255,255,255,.52), 0 4px 12px rgba(255,255,255,.34);
}
.evolution-intro h2 span {
  text-shadow: 0 1px 0 rgba(255,255,255,.42), 0 3px 10px rgba(255,255,255,.28);
}
.evolution-intro p {
  color: #0d2346 !important;
  font-weight: 680;
  text-shadow: 0 1px 0 rgba(255,255,255,.5), 0 2px 8px rgba(255,255,255,.28);
}

/* ===== Readability tweak: make the evolution intro paragraph white with stronger shadow ===== */
.evolution-intro p {
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.28), 0 4px 14px rgba(0,0,0,.42), 0 10px 24px rgba(0,0,0,.22) !important;
}

/* ===== Evolution intro paragraph: small black transparent curved box for readability ===== */
.evolution-intro p {
  display: inline-block;
  max-width: 94%;
  margin-top: 22px;
  padding: 12px 16px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.30), 0 4px 14px rgba(0,0,0,.42), 0 10px 24px rgba(0,0,0,.22) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
}

/* ===== EXPERIENCE ICON FIX: fully visible coloured badges on image/content seam ===== */
.experience-content {
  padding: 42px 25px 25px;
  position: relative;
}
.experience-icon {
  position: absolute;
  top: -29px;
  left: 24px;
  z-index: 3;
  width: 58px;
  height: 58px;
  margin: 0 !important;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border: 4px solid #ffffff;
  border-radius: 18px;
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(2,13,36,.22);
}
.experience-icon svg {
  width: 25px;
  height: 25px;
  stroke-width: 2;
}
.experience-icon.icon-red {
  background: linear-gradient(135deg, #ff7d84 0%, #f0444c 100%);
}
.experience-icon.icon-blue {
  background: linear-gradient(135deg, #67a7ff 0%, #1667ff 100%);
}
.experience-icon.icon-gold {
  background: linear-gradient(135deg, #ffd977 0%, #ffae2f 100%);
  color: #533400;
}

/* ===== Curve cleanup: pure white, seamless and edge-to-edge ===== */
.hero-bottom-curve {
  left: 50% !important;
  width: 120vw !important;
  background: #ffffff !important;
  box-shadow: none !important;
  border: 0 !important;
  transform: translate(-50%, 42px) !important;
}

/* Make the next section start on the exact same white so no pale band/seam is visible. */
#about.section-light {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
}

@media (max-width: 860px) {
  .hero-bottom-curve {
    width: 130vw !important;
    transform: translate(-50%, 31px) !important;
  }
}

/* ===== FOOTER CURVE PATCH: remove the light gap/seam and join curve directly to footer ===== */
.site-footer {
  margin-top: 64px !important;
  isolation: isolate;
}
.site-footer::before {
  left: -2% !important;
  top: -66px !important;
  width: 104% !important;
  height: 82px !important;
  background: var(--navy-deep) !important;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0 !important;
  transform: translateZ(0);
}

@media (max-width: 860px) {
  .site-footer {
    margin-top: 48px !important;
  }
  .site-footer::before {
    top: -50px !important;
    height: 64px !important;
    left: -3% !important;
    width: 106% !important;
  }
}