@charset "UTF-8";
/* Hamster Cashback - Haendler-Aktivierung LP. Design aus hamstercashback.de. */
:root{
  --blue:#167bd9; --blue-accent:#2d62ff; --navy:#0a1e47;
  --ink:#21242e; --offwhite:#fbfcff; --tint:#ecf1ff; --muted:#7e86a0;
  --maxw:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-y:scroll}
body{
  font-family:Inter,system-ui,-apple-system,sans-serif;
  color:var(--ink); background:var(--offwhite); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
a{color:var(--blue-accent);text-decoration:none}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;font-size:17px;border:0;cursor:pointer;
  padding:18px 32px;border-radius:999px;background:var(--blue);color:var(--offwhite);
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease;
  box-shadow:0 8px 24px rgba(22,123,217,.35);
}
.btn:hover{background:#0f6ec7;transform:translateY(-1px);box-shadow:0 12px 30px rgba(22,123,217,.45)}
.btn:active{transform:translateY(0)}
.btn--full{width:100%}
.btn--light{background:var(--offwhite);color:var(--blue);box-shadow:0 8px 24px rgba(0,0,0,.2)}
.btn--light:hover{background:#fff}
.hero__cta-note{font-size:13px;color:#5b6276;margin-top:12px}
.finalcta__action{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.finalcta__note{font-size:13px;color:rgba(251,252,255,.7);margin-top:18px}

/* ---------- Hero ---------- */
.hero{
  /* exakt wie hamstercashback.de: vertikal, dunkel -> blau -> fast weiss */
  background:linear-gradient(180deg,var(--navy) 0%,var(--blue) 46%,#f5f5f5 100%);
  color:var(--offwhite);position:relative;overflow:hidden;padding-bottom:40px;
}
.hero .wrap{position:relative;z-index:2}
.nav{display:flex;align-items:center;justify-content:space-between;padding:24px 0}
.nav__logo{height:30px;width:auto}
.nav__tag{font-size:14px;font-weight:600;color:rgba(251,252,255,.75)}

/* ---------- Co-Branding LocaFox x Hamster ---------- */
.cobrand{display:inline-flex;align-items:center;gap:13px}
.cobrand__lf,.cobrand__hamster{width:auto;display:block}
.cobrand__x{font-size:15px;font-weight:400;line-height:1;opacity:.5}
.cobrand--light .cobrand__x{color:#fff}
.cobrand--dark .cobrand__x{color:var(--muted)}
.nav .cobrand__lf{height:51px}
.nav .cobrand__hamster{height:25px}
.foot .cobrand__lf{height:47px}
.foot .cobrand__hamster{height:23px}
.foot__brand{display:flex;flex-direction:column;gap:7px}
.cobrand__note{font-size:12px;color:var(--muted);max-width:42ch}
.foot--on-dark .cobrand__note{color:rgba(251,252,255,.7)}
@media(max-width:560px){.nav .cobrand{gap:9px}.nav .cobrand__lf{height:43px}.nav .cobrand__hamster{height:21px}}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding:32px 0 72px}
.eyebrow{
  display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#bcd6f7;background:rgba(255,255,255,.08);padding:7px 14px;border-radius:999px;margin-bottom:20px;
}
.hero h1{font-size:clamp(34px,5vw,58px);font-weight:700;line-height:1.05;letter-spacing:-.02em;margin-bottom:18px;text-wrap:balance}
.hero h1 em{font-style:normal;color:#9ec9ff}
.hero__sub{font-size:clamp(17px,2.2vw,20px);color:rgba(251,252,255,.88);max-width:42ch;margin-bottom:28px;text-wrap:pretty}
.hero__art{position:relative;display:flex;justify-content:center;align-items:flex-end}
.hero__art img{max-height:440px;width:auto;position:relative;z-index:2}

/* ---------- Effekt: sanftes Schweben ---------- */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.float{animation:float 5s ease-in-out infinite}
.float--slow{animation-duration:7s}

/* Hamster steht fest - kein Wackeln. */
.hamster{transform-origin:bottom center}

/* ---------- Effekt: aufsteigende Cashback-Muenzen ---------- */
.coins{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.coin{position:absolute;bottom:60px;width:30px;height:30px;
  background:url(/assets/coin.png) center/contain no-repeat;
  opacity:0;animation:coinrise ease-in infinite}
.coin::after{content:none}
.coin.sm{width:20px;height:20px}.coin.sm::after{font-size:10px}
.coin.lg{width:38px;height:38px}.coin.lg::after{font-size:18px}
.coin.c1{left:12%;animation-duration:3.6s;animation-delay:0s}
.coin.c2{left:26%;animation-duration:4.4s;animation-delay:.9s}
.coin.c3{left:40%;animation-duration:3.2s;animation-delay:1.7s}
.coin.c4{left:55%;animation-duration:4.8s;animation-delay:.4s}
.coin.c5{left:68%;animation-duration:3.9s;animation-delay:2.3s}
.coin.c6{left:80%;animation-duration:4.2s;animation-delay:1.2s}
.coin.c7{left:33%;animation-duration:5s;animation-delay:3s}
.coin.c8{left:62%;animation-duration:3.5s;animation-delay:2.7s}
@keyframes coinrise{
  0%{transform:translateY(30px) scale(.7) rotate(0);opacity:0}
  15%{opacity:1}
  80%{opacity:.9}
  100%{transform:translateY(-340px) scale(1) rotate(25deg);opacity:0}
}

@media(prefers-reduced-motion:reduce){.float,.coin{animation:none}.coin{display:none}}

/* ---------- Effekt: Scroll-Reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-visible{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ---------- Effekt: Scroll-Fortschrittsbalken ---------- */
.progress{position:fixed;top:0;left:0;height:4px;width:0;z-index:200;
  background:linear-gradient(90deg,#2d62ff,#167bd9 60%,#9ec9ff);box-shadow:0 0 10px rgba(22,123,217,.5)}

/* ---------- Effekt: Headline-Wortrotator (synchron mit Subline) ---------- */
.rotator{display:inline-block;position:relative;color:#9ec9ff;min-width:1ch}
.rotator__w{display:inline-block;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s ease}
.rotator.is-swapping .rotator__w{transform:translateY(-55%) rotateX(60deg);opacity:0}
.hero__sub{transition:opacity .5s ease,transform .5s ease}
.hero__sub.is-swapping{opacity:0;transform:translateY(12px)}

/* ---------- Effekt: Glanz-Sweep ueber Buttons ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;top:0;left:-75%;width:45%;height:100%;z-index:-1;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);animation:gleam 4s ease-in-out infinite}
.btn--light::after{background:linear-gradient(120deg,transparent,rgba(22,123,217,.35),transparent)}
@keyframes gleam{0%{left:-75%}45%{left:140%}100%{left:140%}}

/* ---------- Effekt: 3D-Tilt am Phone ---------- */
.mock__visual{perspective:1100px}
.mock__phone-img{transition:transform .25s ease;transform-style:preserve-3d;will-change:transform}

/* ---------- Effekt: animierter Verlauf im Final-CTA ---------- */
.finalcta__inner{background-size:180% 180%;animation:ctaShift 14s ease infinite}
@keyframes ctaShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

@media(prefers-reduced-motion:reduce){.btn::after,.finalcta__inner{animation:none}}

/* ---------- Mockup-Showcase ---------- */
.mock{padding:88px 0}
.mock__head{text-align:center;max-width:60ch;margin:0 auto 48px}
.mock__head .lead{margin:0 auto}
.mock__stage{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.mock__visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:520px}
.mock__visual::before{content:"";position:absolute;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(22,123,217,.20),rgba(22,123,217,0) 70%);z-index:0}
.mock__phone-img{position:relative;z-index:1;max-height:540px;width:auto;filter:drop-shadow(0 34px 64px rgba(16,30,71,.30))}
/* ---------- Haendler-Dashboard (Hover-Zoom) ---------- */
.dashshow{margin:8px auto 0;display:flex;flex-direction:column;align-items:center}
.dash-frame{position:relative;z-index:2;display:block;width:620px;max-width:100%;margin:0 auto;cursor:zoom-in;will-change:transform;transform-origin:center;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .5s ease;
  filter:drop-shadow(0 22px 46px rgba(16,30,71,.22))}
.dash-frame:hover{transform:scale(1.2);filter:drop-shadow(0 44px 90px rgba(16,30,71,.42))}
.dash-img{display:block;width:100%;height:auto}
.dashshow__hint{margin-top:24px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);opacity:.85;transition:opacity .3s ease}
.dash-frame:hover + .dashshow__hint{opacity:0}
.haendler .cardrow{margin-top:52px}
@media(hover:none){.dash-frame{cursor:auto}.dash-frame:hover{transform:none;filter:drop-shadow(0 22px 46px rgba(16,30,71,.22))}.dashshow__hint{display:none}}
@media(prefers-reduced-motion:reduce){.dash-frame:hover{transform:none}}
.mock__points{display:flex;flex-direction:column;gap:26px}
.mock__point{display:flex;gap:16px;align-items:flex-start}
.mock__point .ic{flex:0 0 auto;width:46px;height:46px;border-radius:14px;background:var(--tint);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:700}
.mock__point h3{font-size:18px;font-weight:700;margin-bottom:4px}
.mock__point p{font-size:15px;color:#5b6276}

/* ---------- Form card ---------- */
.actcard{
  background:var(--offwhite);color:var(--ink);border-radius:20px;
  padding:24px;box-shadow:0 18px 50px rgba(0,0,0,.25);max-width:440px;
}
.actcard h3{font-size:19px;font-weight:700;margin-bottom:6px}
.actcard p{font-size:14px;color:var(--muted);margin-bottom:16px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.field label{font-size:13px;font-weight:600;color:var(--ink)}
.field input{
  font:inherit;font-size:16px;padding:14px 16px;border:1.5px solid #d8deea;border-radius:12px;background:#fff;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.field input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(22,123,217,.15)}
.actcard__note{font-size:12px;color:var(--muted);margin-top:12px;text-align:center}
.actcard__ok{display:none;text-align:center;padding:18px 8px}
.actcard__ok h3{font-size:20px;margin-bottom:8px}
.actcard__ok p{font-size:15px;color:var(--ink)}
.actcard.is-done form{display:none}
.actcard.is-done .actcard__ok{display:block}

/* ---------- Sections ---------- */
section{padding:80px 0}
.section-eyebrow{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
h2{font-size:clamp(28px,3.6vw,40px);font-weight:700;letter-spacing:-.02em;line-height:1.12;margin-bottom:16px;text-wrap:balance}
.lead{font-size:19px;color:#454b5e;max-width:60ch;text-wrap:pretty}
.card h3,.mock__point h3{text-wrap:balance}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.cardrow{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.card{background:#fff;border:1px solid #eef1f8;border-radius:18px;padding:28px;box-shadow:0 6px 20px rgba(16,30,71,.05);transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(16,30,71,.12)}
.card .num{display:inline-flex;width:40px;height:40px;border-radius:12px;background:var(--tint);color:var(--blue);font-weight:700;font-size:18px;align-items:center;justify-content:center;margin-bottom:16px}
.card .num--warn{background:#fdecec;color:#e0564f;border-radius:50%;font-size:24px;line-height:1}
.card h3{font-size:19px;font-weight:700;margin-bottom:8px}
.card p{font-size:15px;color:#5b6276}
.tint{background:var(--tint)}

/* ---------- Final CTA ---------- */
.finalcta{padding:0 0 90px}
.finalcta__inner{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,#125aa6 0%,#177bd9 55%,#3c90dd 100%);
  color:var(--offwhite);border-radius:28px;padding:56px;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;
}
.finalcta h2{color:var(--offwhite)}
.finalcta p{color:rgba(251,252,255,.85);font-size:18px;max-width:42ch}
.finalcta__hamster{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px}
.finalcta__hamster img{position:relative;z-index:2;max-height:340px;width:auto}
.finalcta__hamster .coin::after{color:#7a5408}
.finalcta .btn{margin-top:32px}

/* ---------- Footer ---------- */
footer{padding:40px 0;border-top:1px solid #eef1f8}
.foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot__logo{height:26px}
.foot__links{display:flex;gap:22px;font-size:14px}
.foot__links a{color:var(--muted)}
.foot__copy{font-size:13px;color:var(--muted)}

/* ---------- Highlight-Punkt (mock) ---------- */
.mock__point.is-highlight{position:relative;background:linear-gradient(180deg,#eaf2ff,#fff);border:1.5px solid #bcd6f7;border-radius:16px;padding:20px;margin-top:6px;box-shadow:0 14px 34px rgba(22,123,217,.16)}
.mock__point.is-highlight .ic{background:var(--blue);color:#fff}
.mock__point.is-highlight h3{color:var(--navy)}
.mock__point.is-highlight::before{content:"Der Schlüssel";position:absolute;top:-11px;left:20px;background:var(--blue);color:#fff;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 11px;border-radius:999px}

/* ---------- Value/Stats-Band (dunkel) ---------- */
.value{background:linear-gradient(165deg,#0e3c76 0%,#177bd9 55%,#3c90dd 100%);color:var(--offwhite)}
.value__head{text-align:center;max-width:60ch;margin:0 auto 44px}
.value__head h2{color:var(--offwhite)}
.value__head .lead{color:rgba(251,252,255,.82);margin:0 auto}
.value__head .section-eyebrow{color:#9ec9ff}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:18px;padding:34px 24px;text-align:center;transition:transform .2s ease,background .2s ease}
.stat:hover{transform:translateY(-4px);background:rgba(255,255,255,.1)}
.stat__num{display:block;font-size:clamp(42px,6vw,64px);font-weight:700;line-height:1;color:#fff;letter-spacing:-.02em}
.stat__label{display:block;margin-top:12px;font-size:15px;color:rgba(251,252,255,.8)}

/* ---------- Video-Platzhalter ---------- */
.video__frame{position:relative;max-width:900px;margin:0 auto;aspect-ratio:16/9;border-radius:22px;overflow:hidden;cursor:pointer;
  background:linear-gradient(135deg,#0a1e47,#167bd9);box-shadow:0 28px 64px rgba(16,30,71,.28);border:1px solid rgba(255,255,255,.15)}
.video__frame::after{content:"Erklärvideo folgt";position:absolute;bottom:18px;left:0;right:0;text-align:center;color:rgba(255,255,255,.82);font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.video__play{position:absolute;top:50%;left:50%;width:86px;height:86px;border-radius:50%;background:rgba(255,255,255,.96);
  display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%);animation:vpulse 2.4s ease-out infinite}
.video__play::before{content:"";border-style:solid;border-width:15px 0 15px 25px;border-color:transparent transparent transparent var(--blue);margin-left:6px}
.video__frame:hover .video__play{background:#fff;transform:translate(-50%,-50%) scale(1.06)}
@keyframes vpulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}70%{box-shadow:0 0 0 28px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.video__cap{text-align:center;margin-top:20px;color:#5b6276;font-size:15px}

/* ---------- Cursor-Muenz-Spur (Bubbles als Geldmuenzen) ---------- */
.coin-fx{position:fixed;z-index:150;pointer-events:none;
  background:url(/assets/coin.png) center/contain no-repeat;
  will-change:transform,opacity}

/* ---------- Lupe / Magnifier (ziehbar) ---------- */
.magnify{position:relative;display:inline-block}
.magnify__lens{position:absolute;top:34px;left:30px;width:160px;height:160px;border-radius:50%;
  border:4px solid #fff;box-shadow:0 12px 34px rgba(16,30,71,.4),inset 0 0 0 2px rgba(22,123,217,.45);
  background-repeat:no-repeat;cursor:grab;z-index:6;touch-action:none}
.magnify__lens:active{cursor:grabbing}
.magnify__hint{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);z-index:7;
  background:rgba(10,30,71,.82);color:#fff;font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;
  pointer-events:none;white-space:nowrap;transition:opacity .3s ease}
/* Lupe auch auf Mobil/Touch: kleinere Linse, naeher an die Bildkante */
@media(max-width:560px){.magnify__lens{width:118px;height:118px;top:22px;left:22px}}

/* ---------- Bestaetigungs-/Danke-Seite (zentriert, ganzer Screen) ---------- */
.hero--center{
  min-height:100vh;display:flex;flex-direction:column;padding-bottom:0;
  background:linear-gradient(180deg,#0a1e47 0%,#125aa6 22%,#177bd9 58%,#3c90dd 100%);
}
.hero--center .wrap{flex:1;width:100%;display:flex;flex-direction:column;position:relative;z-index:2}

.confirm{flex:1;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding:24px 0 56px}
.confirm__copy h1{font-size:clamp(32px,4.6vw,52px);font-weight:700;line-height:1.07;letter-spacing:-.02em;color:var(--offwhite);margin-bottom:26px;text-wrap:balance}
.confirm__art{position:relative;display:flex;justify-content:center;align-items:flex-end}
.confirm__art img{max-height:420px;width:auto;position:relative;z-index:2}

.steps{list-style:none;display:flex;flex-direction:column;gap:16px;margin:0}
.steps li{display:flex;gap:16px;align-items:flex-start}
.steps__num{flex:0 0 auto;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);
  color:#fff;font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center}
.steps__txt{color:rgba(251,252,255,.92);font-size:18px;line-height:1.45;padding-top:7px;max-width:44ch;text-wrap:pretty}

.notebox{margin-top:30px;display:flex;gap:12px;align-items:flex-start;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  border-radius:14px;padding:16px 18px;max-width:54ch}
.notebox__ic{flex:0 0 auto;color:#9ec9ff;font-weight:700;font-size:18px;line-height:1.4}
.notebox p{font-size:14px;color:rgba(251,252,255,.8);line-height:1.5}

/* Danke = mittig, Erfolgs-Check */
.success{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 0 64px}
.success__check{width:96px;height:96px;border-radius:50%;background:rgba(255,255,255,.12);
  border:2px solid rgba(255,255,255,.42);display:flex;align-items:center;justify-content:center;
  margin-bottom:26px;animation:pop .55s cubic-bezier(.2,.8,.2,1) both}
.success__check svg{width:46px;height:46px}
.success__check svg path{stroke-dasharray:48;stroke-dashoffset:48;animation:draw .6s .25s ease forwards}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.success__check,.success__check svg path{animation:none;stroke-dashoffset:0}}
.success h1{font-size:clamp(34px,5vw,56px);font-weight:700;line-height:1.05;letter-spacing:-.02em;color:var(--offwhite);margin-bottom:14px;text-wrap:balance;max-width:20ch}
.success .lead{color:rgba(251,252,255,.88);max-width:48ch;margin:0 auto}
.success__art{margin-top:30px}
.success__art img{max-height:230px;width:auto}

/* Footer auf dunklem Grund */
.foot--on-dark{border-top:1px solid rgba(255,255,255,.14)}
.foot--on-dark .foot__links a,.foot--on-dark .foot__copy{color:rgba(251,252,255,.72)}

@media(max-width:860px){
  .confirm{grid-template-columns:1fr;gap:10px;padding:8px 0 40px;text-align:center}
  .confirm__art{order:-1;margin-bottom:8px}
  .confirm__art img{max-height:240px}
  .steps li{text-align:left}
  .steps__txt{font-size:16px}
  .notebox{margin-left:auto;margin-right:auto;text-align:left}
  .success__art img{max-height:180px}
}

/* ---------- Responsive ---------- */
@media(max-width:860px){
  .stats{grid-template-columns:1fr;gap:16px}
  .mock__point.is-highlight::before{left:16px}
  .hero__grid{grid-template-columns:1fr;gap:8px;padding:8px 0 56px}
  .hero__art{order:0;margin-top:20px}
  .hero__art img{max-height:300px}
  .actcard{max-width:none}
  .split{grid-template-columns:1fr;gap:28px}
  .cardrow{grid-template-columns:1fr}
  .finalcta__inner{grid-template-columns:1fr;padding:36px 28px}
  .finalcta__hamster{order:-1}
  .finalcta__hamster img{max-height:240px}
  .mock{padding:56px 0}
  .mock__stage{grid-template-columns:1fr;gap:28px}
  .mock__visual{min-height:0}
  .mock__visual::before{width:260px;height:260px}
  .mock__phone-img{max-height:420px}
  section{padding:56px 0}
}

/* ---------- FAQ ---------- */
.faq__list{max-width:820px;margin:36px auto 0;display:flex;flex-direction:column;gap:14px}
.faq__item{
  background:var(--offwhite);border:1px solid #dde4f5;border-radius:16px;
  padding:0 24px;box-shadow:0 4px 14px rgba(10,30,71,.04);
}
.faq__item summary{
  list-style:none;cursor:pointer;font-weight:600;font-size:18px;color:var(--navy);
  padding:22px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"+";font-size:26px;font-weight:400;color:var(--blue);line-height:1;
  transition:transform .2s ease;
}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__item p{color:var(--ink);padding:0 0 22px;margin:0;max-width:70ch}