/* Partner landing styles — reuse WT amber palette */
:root {
  --brand-amber: #f3af3d;
  --brand-amber-strong: #f18a2f;
  --brand-amber-deep: #f19a2f;
  --brand-blue: #264066; /* rgb(38, 64, 102) */
  --brand-blue-50: rgba(38, 64, 102, 0.5);
  --brand-blue-20: rgba(38, 64, 102, 0.2);
  --brand-text: #2f2f33;
  --brand-muted: rgba(47, 47, 51, 0.72);
  --brand-border: rgba(17, 17, 17, 0.06);
  --brand-soft: linear-gradient(135deg, rgba(243, 175, 61, 0.2), rgba(243, 175, 61, 0.32));
  --brand-soft-blue: linear-gradient(135deg, rgba(38,64,102,0.12), rgba(38,64,102,0.24));
}

/* Page-wide background: agent-style amber haze with dotted field */
body { color: var(--brand-text); }
/* Remove any framework/base body background colors on landing pages */
body { background-color: transparent !important; }
html, body { overflow-x: hidden; }
body::before,
body::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.45;
  z-index: -1;
}
body::before {
  width: clamp(320px, 28vw, 420px);
  height: clamp(320px, 28vw, 420px);
  top: -140px;
  right: clamp(-120px, -6vw, -40px);
  background: radial-gradient(70% 70% at 20% 30%, rgba(241, 154, 47, 0.25) 0%, rgba(241, 154, 47, 0) 100%);
  animation: drift 16s ease-in-out infinite alternate;
}
body::after {
  width: clamp(260px, 24vw, 380px);
  height: clamp(260px, 24vw, 380px);
  bottom: clamp(-160px, -8vw, -60px);
  left: clamp(-140px, -8vw, -20px);
  background: radial-gradient(60% 60% at 80% 70%, rgba(255, 186, 102, 0.2) 0%, rgba(255, 186, 102, 0) 100%);
  animation: drift2 18s ease-in-out infinite alternate;
}

html {
  background-image:
    radial-gradient(rgba(243, 175, 61, 0.20) 1px, transparent 1px),
    radial-gradient(rgba(241, 138, 47, 0.16) 1px, transparent 1px);
  background-size: 36px 36px, 36px 36px;
  background-position: 0 0, 18px 18px;
  animation: dotsMove 30s linear infinite;
}

/* Fixed decorative container with multiple amber spots */
.landing-backdrop{position:fixed;inset:0;z-index:-1;pointer-events:none}
.landing-backdrop .spot{position:absolute;border-radius:50%;filter:blur(2px);opacity:.55}
.landing-backdrop .s1{width:460px;height:460px;top:6vh;left:2vw;background:radial-gradient(60% 60% at 50% 50%, rgba(241,154,47,.42) 0%, rgba(241,154,47,0) 70%);animation: drift 20s ease-in-out infinite alternate}
.landing-backdrop .s2{width:400px;height:400px;top:28vh;right:8vw;background:radial-gradient(60% 60% at 40% 50%, rgba(248,210,125,.38) 0%, rgba(248,210,125,0) 70%);animation: drift2 22s ease-in-out infinite alternate}
.landing-backdrop .s3{width:340px;height:340px;bottom:8vh;left:6vw;background:radial-gradient(60% 60% at 55% 55%, rgba(243,175,61,.36) 0%, rgba(243,175,61,0) 70%);animation: drift 26s ease-in-out infinite alternate-reverse}
.landing-backdrop .s4{width:320px;height:320px;bottom:12vh;right:12vw;background:radial-gradient(60% 60% at 50% 50%, rgba(241,138,47,.34) 0%, rgba(241,138,47,0) 70%);animation: drift2 24s ease-in-out infinite}
.landing-backdrop .s5{width:260px;height:260px;top:45vh;left:40vw;background:radial-gradient(60% 60% at 50% 50%, rgba(255,186,102,.34) 0%, rgba(255,186,102,0) 70%);animation: drift 30s ease-in-out infinite}

.landing-bg { position: relative; }
.landing-bg::before,
.landing-bg::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.45;
  z-index: -1;
}
.landing-bg::before {
  width: clamp(320px, 28vw, 420px);
  height: clamp(320px, 28vw, 420px);
  top: -120px;
  right: clamp(-120px, -6vw, -40px);
  background: radial-gradient(70% 70% at 20% 30%, rgba(241, 154, 47, 0.25) 0%, rgba(241, 154, 47, 0) 100%);
}
.landing-bg::after {
  width: clamp(260px, 24vw, 380px);
  height: clamp(260px, 24vw, 380px);
  bottom: clamp(-160px, -8vw, -60px);
  left: clamp(-140px, -8vw, -20px);
  background: radial-gradient(60% 60% at 80% 70%, rgba(255, 186, 102, 0.2) 0%, rgba(255, 186, 102, 0) 100%);
}

.landing-navbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--brand-border);
}
.landing-navbar .brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--brand-text); text-decoration: none; font-weight: 800;
}
.landing-navbar .brand img { height: 28px; width: 28px; border-radius: 6px; }
.landing-navbar .nav a { color: var(--brand-muted); font-weight: 600; }
.landing-navbar .nav a:hover { color: var(--brand-blue); }

.btn-brand { background: linear-gradient(135deg, #f8d27d 0%, var(--brand-amber) 52%, var(--brand-amber-strong) 100%);
  border: 0; color: #111; font-weight: 800; border-radius: 14px; padding: 10px 16px; background-size: 140% 140%; transition: transform .2s ease, box-shadow .2s ease, background-position .4s ease; }
.btn-brand:hover { filter: brightness(0.97); color: #111; transform: translateY(-1px); box-shadow: 0 14px 28px rgba(241,154,47,0.25); background-position: 10% 50%; }
.btn-ghost { border:1px solid var(--brand-border); background:#fff; color: var(--brand-text); border-radius: 14px; padding: 10px 16px; font-weight: 700; }

.landing-hero { padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 5vw, 3rem); }
.landing-hero h1 { font-weight: 900; letter-spacing: -0.02em; color: #111117; }
.landing-hero p.lead { color: var(--brand-muted); font-size: 1.05rem; }
.hero-illu { max-width: 520px; width: 100%; filter: drop-shadow(0 24px 48px rgba(17,17,17,0.12)); animation: floatY 8s ease-in-out infinite; }
.hero-cta { gap: 10px; }

.section-title { font-weight: 900; color: #1f2a44; }
.feature-card { background:#fff; border:1px solid var(--brand-border); border-radius: 20px; padding: 16px; height: 100%; box-shadow: 0 14px 28px rgba(17,17,17,0.06); }
.feature-card strong { color: #1f2a44; }
.feature-card i { color: var(--brand-amber-deep); margin-right: 6px; font-size: 22px; }
.steps-grid .step i { font-size: 24px; }
.note-card .bi-person-circle{color: var(--brand-amber-deep); margin-right: 8px;}
.feature-card { transition: transform .2s ease, box-shadow .2s ease; }
.feature-card:hover { transform: translateY(-2px); box-shadow: 0 20px 44px rgba(17,17,17,0.12); }
.note-card { background:#fff; border-left: 4px solid var(--brand-amber-deep); border-radius: 14px; padding: 12px 14px; color: var(--brand-text); }

.pill { display:inline-block; padding:6px 10px; border-radius:999px; background: var(--brand-soft); color:#111; font-weight:700; font-size: 12px; }

.cta-band { background: #fffaf1; border:1px dashed rgba(241,154,47,0.4); border-radius: 18px; }

/* FAQ */
.accordion-button { font-weight: 700; }
.accordion-button:not(.collapsed) { color:#111; background: rgba(243,175,61,0.18); }

/* Spacing helpers */
.section-pad { padding-top: clamp(2rem, 6vw, 4rem); padding-bottom: clamp(2rem, 6vw, 4rem); }
.section-gap { margin-top: clamp(1.5rem, 4vw, 3rem); margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.anchor-offset { scroll-margin-top: 100px; }

/* Remove outer paddings from base content wrapper for landing pages */
#content-wrapper { margin: 0; padding: 0; }

/* Animations */
@keyframes floatY { from { transform: translateY(0) } 50% { transform: translateY(-8px) } to { transform: translateY(0) } }
@keyframes drift { from { transform: translate(0,0) } to { transform: translate(12px, 8px) } }
@keyframes drift2 { from { transform: translate(0,0) } to { transform: translate(-10px, -6px) } }
@keyframes dotsMove { from { background-position: 0 0, 18px 18px; } to { background-position: 36px 36px, 54px 54px; } }

/* About card with big handshake watermark */
.about-card{background:#fff;border:1px solid var(--brand-border);border-radius:24px;box-shadow:0 24px 48px rgba(17,17,17,.08);}
.about-card .about-icon{position:absolute;inset:auto 0 0 0;display:flex;justify-content:center;opacity:.08;font-size:160px;color:#000;pointer-events:none;transform:translateY(35%)}

/* Country chips and planet card */
.chip{display:inline-block;background:var(--brand-soft);padding:10px 14px;border-radius:999px;font-weight:800;color:#111;border:1px solid rgba(241,154,47,.25)}
.unique-chip{display:inline-block;margin-left:8px;padding:4px 8px;border-radius:999px;background:linear-gradient(135deg,#f8d27d,#f3af3d);color:#111;font-weight:800;font-size:12px}
.planet-card{position:relative;min-height:280px;border-radius:22px;border:1px solid var(--brand-border);background:#fff url('/static/images/mapagent.png') center/cover no-repeat;box-shadow:0 20px 44px rgba(17,17,17,.08);overflow:hidden}
.planet-card::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 80% at 50% 40%, rgba(243,175,61,.18), transparent 60%)}
.planet-card .bi-geo-alt-fill{position:absolute;color:#f19a2f;font-size:28px;text-shadow:0 3px 12px rgba(241,154,47,.45)}
.planet-card .p1{top:26%;left:58%}
.planet-card .p2{top:42%;left:48%}
.planet-card .p3{top:58%;left:52%}

/* Steps grid with connector line */
.steps-grid{position:relative;display:grid;grid-template-columns:repeat(4,minmax(200px,1fr));gap:18px}
.steps-grid .connector{position:absolute;top:36px;left:0;right:0;height:4px;background:linear-gradient(90deg, rgba(241,154,47,.35), rgba(248,210,125,.35));border-radius:4px;z-index:0}
.steps-grid .step{position:relative;z-index:1}
@media (max-width: 991.98px){.steps-grid{grid-template-columns:1fr;}.steps-grid .connector{display:none}}

/* Feature house of cubes */
.feature-house{display:flex;flex-direction:column;align-items:center;gap:18px}
.feature-house .house-roof{width:0;height:0;border-left:48px solid transparent;border-right:48px solid transparent;border-bottom:36px solid #f3af3d;filter:drop-shadow(0 10px 24px rgba(241,154,47,.35));margin-bottom:4px}
.feature-house .house-row{display:flex;gap:18px;justify-content:center;align-items:stretch;width:100%}
.feature-house .row-1 .cube{width:min(320px,90vw)}
.feature-house .row-2 .cube{width:min(340px,46%)}
.feature-house .row-3 .cube{width:min(360px,31%)}
.cube{background:#fff;border:1px solid var(--brand-border);border-radius:16px;padding:16px;box-shadow:0 14px 28px rgba(17,17,17,.08);display:flex;flex-direction:column;gap:6px;min-height:150px;transition:transform .2s ease, box-shadow .2s ease}
.cube:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(17,17,17,.12)}
.cube .cube-title{font-weight:800;color:#1f2a44}
.cube .cube-desc{color:var(--brand-muted)}
@media (max-width: 991.98px){
  .feature-house .row-2 .cube,.feature-house .row-3 .cube{width:100%}
  .feature-house .house-row{flex-direction:column}
}

/* Mobile hero image sizing */
@media (max-width: 767.98px){
  .hero-illu{max-width: 88vw; margin-top: 8px;}
}