:root{
  --cyan:#00B6C9;
  --cyan-deep:#0094A8;
  --green:#86C232;
  --green-soft:#A6D55A;
  --ink:#1F2731;
  --ink-2:#2A333E;
  --muted:#6B7480;
  --muted-2:#8C97A3;
  --bg:#ffffff;
  --soft:#F2F4F6;
  --soft-2:#E9ECEF;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  font-weight:400;
  line-height:1.55;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.grad{
  background:linear-gradient(95deg,var(--cyan) 10%,var(--green) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- Nav ---------- */
.nav{
  display:flex;align-items:center;gap:32px;
  padding:22px 32px;
  max-width:1280px;margin:0 auto;
  position:relative;z-index:5;
}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:700;font-size:18px;line-height:1.05}
.logo-mark{width:38px;height:30px;flex:none}
.logo-text{display:flex;flex-direction:column;letter-spacing:-.01em}
.logo-text span:last-child::after{content:'.';color:var(--ink)}
.nav-links{display:flex;gap:28px;margin-left:32px;font-size:15px;color:var(--ink);font-weight:500}
.nav-link{display:inline-flex;align-items:center;gap:5px;cursor:pointer;padding:6px 0;position:relative}
.nav-link svg{opacity:.6}
.nav-spacer{flex:1}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 22px;border-radius:999px;font-weight:600;font-size:14.5px;
  border:1px solid transparent;cursor:pointer;transition:transform .15s ease, background .2s ease, color .2s ease;
  white-space:nowrap;font-family:inherit;
}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000;transform:translateY(-1px)}
.btn-light{background:#fff;color:var(--ink);border-color:#fff}
.btn-light:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.15)}
.btn-ghost{background:transparent;color:var(--ink);border-color:rgba(31,39,49,.15)}
.btn-ghost:hover{border-color:var(--ink)}
.lang{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;cursor:pointer;color:var(--ink)}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:48px 32px 140px;
  overflow:hidden;
  background:#fff;
}
.hero-inner{max-width:780px;margin:0 auto;text-align:center;position:relative;z-index:2;padding-top:40px}
.eyebrow{
  font-size:13px;letter-spacing:.22em;color:var(--muted);
  text-transform:uppercase;font-weight:600;margin-bottom:18px;
}
h1{
  font-size:64px;font-weight:300;line-height:1.05;letter-spacing:-.015em;
  margin:0 0 22px;color:var(--ink);
}
h1 .grad{font-weight:600}
.hero-sub{
  font-size:18px;color:var(--muted);max-width:560px;margin:0 auto;line-height:1.55;
}
/* swooshes */
.swoosh{position:absolute;top:0;pointer-events:none;z-index:1}
.swoosh-l{left:-40px;width:330px}
.swoosh-r{right:-30px;width:300px;top:30px}
/* curve divider going into dark section */
.hero-divider{
  position:absolute;left:0;right:0;bottom:-1px;width:100%;display:block;
}

/* ---------- Dark feature section ---------- */
.dark{background:var(--ink);color:#fff;padding:90px 32px 110px;position:relative}
.feature{
  display:grid;grid-template-columns:1fr 1.05fr;gap:80px;align-items:center;
  max-width:1180px;margin:0 auto;
}
.feature .eyebrow{color:#8C97A3;margin-bottom:14px}
.feature h2{
  font-size:46px;font-weight:300;line-height:1.1;letter-spacing:-.015em;margin:0 0 22px;
}
.feature h2 .grad{font-weight:600}
.feature p{color:#C7CCD2;font-size:15.5px;line-height:1.7;margin:0 0 14px;max-width:460px}
.feature .btn-light{margin-top:18px}

/* report card */
.report{
  position:relative;border-radius:24px 80px 24px 24px;overflow:hidden;
  aspect-ratio: 16/10;
  background:#0a1d2e;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
}
.report-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 30% 40%, #1a4a6e 0%, transparent 55%),
    radial-gradient(ellipse at 70% 80%, #062235 0%, transparent 60%),
    linear-gradient(180deg,#0d3a5a 0%, #061a2a 100%);
}
.report-bg::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 180px 280px at 65% 55%, rgba(0,0,0,.55), transparent 70%),
    radial-gradient(ellipse 120px 60px at 50% 92%, rgba(0,0,0,.65), transparent 80%);
}
.report-content{
  position:absolute;inset:0;padding:42px 44px;color:#fff;
  display:flex;flex-direction:column;justify-content:center;
}
.report-title{
  font-size:48px;font-weight:300;line-height:1.02;letter-spacing:-.01em;
}
.report-title b{font-weight:600;display:block}
.report-year{font-size:62px;font-weight:300;letter-spacing:-.02em;margin:6px 0 14px;line-height:.95}
.report-tag{font-size:13px;color:#9DD2DE;letter-spacing:.04em;max-width:240px;line-height:1.45}
.report-badge{
  position:absolute;right:34px;top:34px;
  width:104px;height:104px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #A6D55A 0%, #00B6C9 100%);
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:#0c2030;font-weight:700;font-size:13px;line-height:1.15;
  transform:rotate(-8deg);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.report-badge span{display:block;font-weight:400;font-size:11px;margin-top:2px}

/* ---------- Loyalty Branchenreports section (light) ---------- */
.branchen{padding:110px 32px;background:#fff}
.branchen-inner{
  display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:center;
  max-width:1180px;margin:0 auto;
}
.branchen-img{
  border-radius:24px 24px 24px 80px;
  background:linear-gradient(160deg,#3a3f48 0%, #1f242b 70%);
  aspect-ratio: 4/3;position:relative;overflow:hidden;
  box-shadow:0 30px 60px -25px rgba(0,0,0,.35);
}
/* fanned report mock */
.reports-fan{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.mini-report{
  position:absolute;width:130px;height:188px;border-radius:6px;
  background:linear-gradient(180deg,#0e2030,#04111c);
  box-shadow:0 12px 24px rgba(0,0,0,.45);
  color:#fff;padding:14px 12px;font-size:11px;line-height:1.05;
  border:1px solid rgba(255,255,255,.06);
  overflow:hidden;
}
.mini-report b{display:block;font-weight:300;font-size:14px;line-height:1.05}
.mini-report b em{font-style:normal;font-weight:600;display:block;font-size:18px;margin-top:2px}
.mini-report .yr{font-size:22px;font-weight:300;margin-top:6px}
.mini-report .ph{
  position:absolute;left:0;right:0;bottom:0;height:80px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}
.mini-report .ph::before{
  content:'';position:absolute;inset:8px;border-radius:3px;
  background-size:cover;background-position:center;opacity:.85;
}
.mini-report.r1{transform:translate(-150px,12px) rotate(-22deg)}
.mini-report.r1 .ph::before{background:radial-gradient(circle at 50% 50%, #d4a574, #6b4a2b)}
.mini-report.r2{transform:translate(-78px,8px) rotate(-12deg)}
.mini-report.r2 .ph::before{background:radial-gradient(circle at 50% 50%, #c87a4f, #5b2f1c)}
.mini-report.r3{transform:translate(-8px,4px) rotate(-2deg)}
.mini-report.r3 .ph::before{background:radial-gradient(circle at 50% 50%, #d6c19a, #6b5530)}
.mini-report.r4{transform:translate(60px,2px) rotate(8deg)}
.mini-report.r4 .ph::before{background:radial-gradient(circle at 50% 50%, #a6c79a, #2f5a3a)}
.mini-report.r5{transform:translate(128px,4px) rotate(18deg)}
.mini-report.r5 .ph::before{background:radial-gradient(circle at 50% 50%, #d6d6d6, #4a4a4a)}

.branchen-text .eyebrow{color:var(--muted-2)}
.branchen-text h2{
  font-size:42px;font-weight:300;line-height:1.1;letter-spacing:-.015em;margin:0 0 22px;color:var(--ink);
}
.branchen-text h2 .grad{font-weight:600}
.branchen-text p{color:#4A5360;font-size:15.5px;line-height:1.7;margin:0 0 14px;max-width:520px}
.branchen-text strong{color:var(--ink);font-weight:700}

/* ---------- More whitepapers ---------- */
.more{padding:30px 32px 130px;background:#fff;text-align:center}
.more-title{font-size:36px;font-weight:300;letter-spacing:-.01em;margin:0 0 50px}
.more-title .grad{font-weight:600}
.cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  max-width:1180px;margin:0 auto;text-align:left;
}
.card{
  background:#F4F5F7;border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -20px rgba(0,0,0,.18)}
.card-img{
  aspect-ratio: 16/10;position:relative;overflow:hidden;
  background-size:cover;background-position:center;
}
.card-img::after{
  content:'';position:absolute;left:-10%;right:-10%;bottom:18%;height:40%;
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, transparent 60%, transparent 60%);
  pointer-events:none;
}
.curve-overlay{position:absolute;inset:0;pointer-events:none}
.card-body{padding:22px 22px 24px}
.card-eyebrow{font-size:11.5px;letter-spacing:.22em;color:var(--muted-2);text-transform:uppercase;font-weight:600;margin-bottom:10px}
.card h3{font-size:17px;font-weight:700;margin:0 0 8px;line-height:1.35;color:var(--ink)}
.card p{font-size:14px;color:#5A6470;line-height:1.5;margin:0 0 18px}
.card-link{
  display:inline-flex;align-items:center;gap:8px;color:var(--cyan-deep);font-weight:600;font-size:14px;
}
.card-link svg{transition:transform .2s ease}
.card:hover .card-link svg{transform:translateX(4px)}

/* card image illustrations (placeholder gradients with figure suggestion) */
.img-1{background:linear-gradient(135deg,#9bc4d9,#5b8aa8)}
.img-2{background:linear-gradient(135deg,#a4c89c,#5a8a4e)}
.img-3{background:linear-gradient(135deg,#3a3a3a,#0c0c0c)}

/* footer-ish spacer */
.footer-line{height:80px}

@media (max-width:980px){
  h1{font-size:44px}
  .feature, .branchen-inner{grid-template-columns:1fr;gap:48px}
  .cards{grid-template-columns:1fr}
  .nav-links{display:none}
  .swoosh{display:none}
}