:root{
  --navy:#04163A; --navy-2:#0a2552; --blue:#004AAD; --blue-soft:#1d63d8;
  --green:#19C37D; --green-deep:#0e9c63;
  --ink:#0e1726; --muted:#5b6b82; --paper:#ffffff; --mist:#f4f7fb;
  --line:#e4eaf3; --line-strong:#cdd7e6;
  --maxw:1180px;
  --r:16px; --r-lg:24px;
  --shadow:0 1px 2px rgba(4,22,58,.04), 0 12px 32px -12px rgba(4,22,58,.14);
  --shadow-lg:0 24px 60px -24px rgba(4,22,58,.30);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:"Bricolage Grotesque",system-ui,sans-serif; font-weight:700; line-height:1.08; letter-spacing:-.02em; margin:0; color:var(--navy)}
p{margin:0}
a{color:var(--blue); text-decoration:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:12.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--blue)}
.mono{font-family:"IBM Plex Mono",monospace}

/* skip link (Barrierefreiheit) */
.skip-link{position:absolute; left:-9999px; top:0; z-index:100; background:var(--navy); color:#fff; padding:12px 18px; border-radius:0 0 10px 0; font-weight:600}
.skip-link:focus{left:0}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:.55em; font-family:"IBM Plex Sans"; font-weight:600; font-size:16px;
  padding:14px 22px; border-radius:12px; border:1px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, background .2s ease; white-space:nowrap}
.btn:focus-visible{outline:3px solid var(--blue-soft); outline-offset:2px}
.btn-primary{background:var(--green); color:#05281a; box-shadow:0 8px 20px -8px rgba(25,195,125,.6)}
.btn-primary:hover{background:var(--green-deep); color:#fff; transform:translateY(-2px)}
.btn-ghost{background:transparent; color:var(--navy); border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--navy); transform:translateY(-2px)}
.btn-light{background:#fff; color:var(--navy)}
.btn-light:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.arw{transition:transform .15s ease}
.btn:hover .arw{transform:translateX(3px)}

/* nav */
header.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82); backdrop-filter:saturate(150%) blur(12px); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:70px}
.logo{display:flex; align-items:center; gap:10px; font-family:"Bricolage Grotesque"; font-weight:800; font-size:22px; color:var(--navy); letter-spacing:-.03em}
.logo .mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(140deg,var(--navy),var(--blue)); position:relative; flex:none}
.logo .mark::after{content:""; position:absolute; inset:7px 7px auto auto; width:9px;height:9px;border-radius:50%; background:var(--green); top:7px; right:7px; box-shadow:0 0 0 3px rgba(25,195,125,.25)}
.logo-img{height:34px; width:auto; display:block}
.nav-links{display:flex; align-items:center; gap:30px}
.nav-links a.lnk{color:var(--muted); font-weight:500; font-size:15.5px}
.nav-links a.lnk:hover{color:var(--navy)}
.nav-links a.lnk[aria-current="page"]{color:var(--navy)}
.nav-cta{display:flex; align-items:center; gap:14px}
.nav-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; border:1px solid var(--line-strong); border-radius:8px; background:#fff; cursor:pointer; flex:none; padding:0}
.nav-toggle span{display:block; width:18px; height:2px; margin:0 auto; background:var(--navy); transition:transform .2s, opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{display:none}

/* hero */
.hero{position:relative; background:radial-gradient(120% 130% at 85% -10%, #0c2a63 0%, var(--navy) 55%, #03102c 100%); color:#eaf1fb; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:46px 46px; mask-image:radial-gradient(80% 70% at 70% 0%,#000,transparent 75%)}
.hero-in{position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:54px; align-items:center; padding:80px 0 92px}
.hero h1{color:#fff; font-size:clamp(34px,4.6vw,58px); font-weight:700}
.hero h1 .hl{color:var(--green)}
.hero .lead{margin-top:22px; font-size:19px; line-height:1.62; color:#c2d2ec; max-width:33em}
.hero .eyebrow{color:#7fe3b6}
.hero-cta{margin-top:32px; display:flex; gap:14px; flex-wrap:wrap}
.trust{margin-top:30px; display:flex; gap:10px 22px; flex-wrap:wrap; color:#9fb4d6; font-size:13.5px; font-family:"IBM Plex Mono"; letter-spacing:.02em}
.trust span{display:flex; align-items:center; gap:8px}
.trust .dot{width:6px;height:6px;border-radius:50%;background:var(--green)}

/* simple page hero (Unterseiten) */
.page-hero{position:relative; background:radial-gradient(120% 130% at 85% -10%, #0c2a63 0%, var(--navy) 55%, #03102c 100%); color:#eaf1fb; overflow:hidden; padding:64px 0 72px}
.page-hero::before{content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:46px 46px; mask-image:radial-gradient(80% 70% at 70% 0%,#000,transparent 75%)}
.page-hero .in{position:relative; max-width:760px}
.page-hero h1{color:#fff; font-size:clamp(32px,4.2vw,48px); margin-top:16px}
.page-hero .lead{margin-top:20px; font-size:18.5px; line-height:1.6; color:#c2d2ec; max-width:38em}
.page-hero .eyebrow{color:#7fe3b6}

/* hero check card */
.check{background:#fff; color:var(--ink); border-radius:var(--r-lg); padding:26px; box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.6)}
.check h3{font-size:19px; margin-bottom:4px}
.check .sub{color:var(--muted); font-size:14.5px; margin-bottom:18px}
.q{display:flex; width:100%; text-align:left; align-items:center; justify-content:space-between; gap:14px; padding:13px 14px; border:1px solid var(--line); border-radius:12px; margin-bottom:10px; cursor:pointer; background:#fff; font-family:inherit; transition:border-color .15s, background .15s}
.q:hover{border-color:var(--line-strong)}
.q .qt{font-size:14.5px; font-weight:500; line-height:1.4}
.q .qt-hint{display:block; margin-top:4px; color:var(--green-deep); font-weight:600; font-size:13px}
.q .box{width:26px;height:26px;border-radius:8px;border:2px solid var(--line-strong); flex:none; display:grid; place-items:center; transition:all .15s}
.q .box svg{width:15px;height:15px; opacity:0; transform:scale(.6); transition:all .15s; color:#fff}
.q[aria-pressed="true"]{border-color:var(--green); background:rgba(25,195,125,.06)}
.q[aria-pressed="true"] .box{background:var(--green); border-color:var(--green)}
.q[aria-pressed="true"] .box svg{opacity:1; transform:scale(1)}
.q:focus-visible{outline:3px solid var(--blue-soft); outline-offset:2px}
.verdict{margin-top:8px; border-radius:12px; padding:15px 16px; font-size:14.5px; line-height:1.5; display:flex; gap:12px; align-items:flex-start; background:var(--mist); border:1px solid var(--line)}
.verdict.alert{background:rgba(25,195,125,.09); border-color:rgba(25,195,125,.4)}
.verdict .vi{flex:none; width:22px;height:22px;border-radius:50%; background:var(--line-strong); color:#fff; display:grid;place-items:center; font-weight:700; font-size:13px; margin-top:1px}
.verdict.alert .vi{background:var(--green)}
.verdict b{color:var(--navy)}
.verdict .cta-line{display:block; margin-top:8px}
.verdict .cta-line a{font-weight:600}
.check-disclaimer{margin-top:10px; font-size:10.5px; line-height:1.4; color:var(--muted)}

/* generic section */
section{padding:92px 0}
.sec-head{max-width:720px; margin-bottom:46px}
.sec-head .eyebrow{display:block; margin-bottom:14px}
.sec-head h2{font-size:clamp(27px,3.3vw,40px)}
.sec-head p{margin-top:16px; color:var(--muted); font-size:18px}
.mist{background:var(--mist)}
.center{text-align:center; margin-left:auto; margin-right:auto}

/* reality cards */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.rcard{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:30px 28px; box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease}
.rcard:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.rcard .big{font-family:"Bricolage Grotesque"; font-weight:800; font-size:42px; letter-spacing:-.03em; color:var(--navy); line-height:1}
.rcard .big .u{color:var(--green)}
.rcard h3{font-size:18.5px; margin:18px 0 8px}
.rcard p{color:var(--muted); font-size:15.5px}
.rcard .tag{font-family:"IBM Plex Mono"; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--blue)}

/* offer */
.offer{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center}
.offer .copy h2{font-size:clamp(26px,3vw,38px)}
.offer .copy p{margin-top:18px; color:var(--muted); font-size:18px}
.offer-card{background:linear-gradient(160deg,#fff, #f7faff); border:1px solid var(--line-strong); border-radius:var(--r-lg); padding:34px; box-shadow:var(--shadow-lg); position:relative; overflow:hidden}
.offer-card::before{content:""; position:absolute; top:0; left:0; right:0; height:5px; background:linear-gradient(90deg,var(--green),var(--blue))}
.offer-card .label{font-family:"IBM Plex Mono"; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--green-deep)}
.offer-card h3{font-size:24px; margin:10px 0 14px}
.offer-card ul{list-style:none; padding:0; margin:18px 0 24px}
.offer-card li{display:flex; gap:12px; align-items:flex-start; padding:8px 0; font-size:15.5px; color:var(--ink)}
.offer-card li svg{flex:none; width:20px;height:20px; color:var(--green); margin-top:2px}
.offer-card .guarantee{font-size:14px; color:var(--muted); border-top:1px solid var(--line); padding-top:16px; margin-bottom:22px}

/* steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0; counter-reset:s}
.step{padding:34px 30px; position:relative}
.step:not(:last-child){border-right:1px solid var(--line)}
.step .n{font-family:"IBM Plex Mono"; font-weight:600; font-size:13px; color:var(--green-deep); letter-spacing:.1em}
.step h3{font-size:20px; margin:14px 0 10px}
.step p{color:var(--muted); font-size:15.5px}

/* why */
.why-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:30px}
.why .it{padding-top:24px; border-top:2px solid var(--navy)}
.why .it h3{font-size:18.5px; margin-bottom:10px}
.why .it p{color:var(--muted); font-size:15.5px}

/* services (demoted) */
.scard{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:28px; transition:transform .2s, box-shadow .2s; height:100%}
.scard:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.scard .ic{width:46px;height:46px;border-radius:12px;background:var(--mist); display:grid;place-items:center; color:var(--blue); margin-bottom:18px}
.scard h3{font-size:18px; margin-bottom:9px}
.scard p{color:var(--muted); font-size:15px; margin-bottom:16px}
.scard a{font-weight:600; font-size:15px; display:inline-flex; align-items:center; gap:6px}
.nav-phone{display:flex; align-items:center; gap:8px; font-family:"IBM Plex Sans"; font-weight:600; font-size:16px; color:var(--navy); padding:9px 6px; white-space:nowrap; text-decoration:none}
.nav-phone svg{width:18px; height:18px; color:var(--green-deep)}
.nav-phone:hover{color:var(--blue)}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.verdict .vbtn{display:inline-flex; align-items:center; gap:6px; margin-top:10px; background:var(--green); color:#05281a; font-weight:600; font-size:14px; padding:9px 14px; border-radius:10px; text-decoration:none}
.verdict .vbtn:hover{background:var(--green-deep); color:#fff}
.foundation{background:var(--mist); border:1px solid var(--line); border-radius:var(--r-lg); padding:40px 44px; display:grid; grid-template-columns:1.5fr .6fr; gap:30px; align-items:center}
.foundation h2{font-size:clamp(23px,2.5vw,30px)}
.foundation p{margin-top:14px; color:var(--muted); font-size:16.5px}
.foundation .fr{display:flex; justify-content:flex-end}
@media (max-width:1080px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid-4{grid-template-columns:1fr}}
@media (max-width:920px){.foundation{grid-template-columns:1fr; padding:30px 26px} .foundation .fr{justify-content:flex-start}}
.leadmagnet{background:var(--navy); color:#dbe6f5; border-radius:var(--r-lg); padding:40px 44px; display:grid; grid-template-columns:1fr .9fr; gap:36px; align-items:center}
.leadmagnet .eyebrow{color:#7fe3b6; display:block; margin-bottom:12px}
.leadmagnet h2{color:#fff; font-size:clamp(23px,2.5vw,30px)}
.leadmagnet p{color:#bcd0ee; margin-top:12px; font-size:16px}
.lm-text{min-width:0}
.lm-form{display:flex; flex-direction:column; gap:12px; background:#fff; border-radius:16px; padding:22px; min-width:0}
.lm-form label{font-size:14px; color:var(--ink); font-weight:500}
.lm-form input[type=email]{width:100%; margin-top:6px; padding:12px 14px; border:1px solid var(--line-strong); border-radius:10px; font:inherit; font-size:15px}
.lm-form input[type=email]:focus{outline:3px solid var(--blue-soft); outline-offset:1px; border-color:var(--blue)}
.lm-check{display:flex; gap:9px; align-items:flex-start; font-size:13px; color:var(--muted); font-weight:400; line-height:1.4}
.lm-check input{margin-top:2px; flex:none; width:auto}
.lm-check > span{flex:1; min-width:0}
.lm-form .btn{margin-top:4px; justify-content:center}
.lm-note{font-size:12px; color:var(--muted); text-align:center; margin:2px 0 0}
.form-msg{font-size:14px; padding:12px 14px; border-radius:10px; display:none}
.form-msg.ok{display:block; background:rgba(25,195,125,.1); color:var(--green-deep); border:1px solid rgba(25,195,125,.4)}
.form-msg.err{display:block; background:#fdeaea; color:#c0353a; border:1px solid #f3c6c6}
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.reassure{text-align:center; max-width:760px; margin:0 auto; font-family:"Bricolage Grotesque"; font-weight:600; font-size:clamp(20px,2.4vw,26px); color:var(--navy); line-height:1.32}
.supply{background:linear-gradient(160deg,#eaf6f0,#f4f7fb); border:1px solid rgba(25,195,125,.4); border-left:5px solid var(--green); border-radius:var(--r-lg); padding:38px 42px}
.supply .eyebrow{display:block; margin-bottom:10px}
.supply h2{font-size:clamp(24px,2.7vw,32px)}
.supply p{margin:14px 0 22px; color:var(--muted); font-size:17px; max-width:52em}
.founder-photos{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:20px}
.founder-photo{position:relative; aspect-ratio:3/4; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow)}
.founder-photo img{width:100%; height:100%; object-fit:cover; display:block}
.bsi-badge{display:inline-flex; align-items:center; gap:7px; font-family:"IBM Plex Mono"; font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--green-deep); background:rgba(25,195,125,.1); border:1px solid rgba(25,195,125,.35); padding:5px 11px; border-radius:999px}
.founder-badge-row{text-align:center; margin-bottom:40px}
.report-preview{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center}
.rp-text h2{font-size:clamp(24px,2.6vw,30px)}
.rp-text p{margin-top:14px; color:var(--muted); font-size:16.5px}
.rp-mock{background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px 22px; box-shadow:var(--shadow-lg)}
.rp-row{display:flex; align-items:center; gap:12px; padding:12px 4px; font-size:15px; color:var(--ink)}
.rp-row:not(:last-child){border-bottom:1px solid var(--line)}
.rp-dot{width:9px; height:9px; border-radius:50%; flex:none}
.rp-dot.high{background:#e5484d} .rp-dot.mid{background:#f5a623} .rp-dot.low{background:var(--green)}
.rp-row .rp-tag{margin-left:auto; font-family:"IBM Plex Mono"; font-size:11px; font-weight:600; padding:3px 9px; border-radius:6px; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap}
.rp-tag.high{background:#fdeaea; color:#c0353a} .rp-tag.mid{background:#fdf2e0; color:#a5680f} .rp-tag.low{background:rgba(25,195,125,.12); color:var(--green-deep)}
.rp-head{font-family:"IBM Plex Mono"; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:2px 4px 10px; border-bottom:1px solid var(--line); margin-bottom:4px}
.rp-cap{font-size:12.5px; color:var(--muted); margin-top:12px; text-align:center}
.vs{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:34px}
.vs-item{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px 28px}
.vs-item h4{font-family:"Bricolage Grotesque"; font-weight:700; color:var(--navy); font-size:18px; margin:0 0 8px}
.vs-item p{color:var(--muted); font-size:15.5px; margin:0}
.faq{max-width:820px}
.faq details{border:1px solid var(--line); border-radius:12px; padding:0 20px; margin-bottom:12px; background:#fff}
.faq summary{cursor:pointer; list-style:none; padding:18px 0; font-family:"Bricolage Grotesque"; font-weight:600; color:var(--navy); font-size:17px; display:flex; justify-content:space-between; align-items:center; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--green-deep); font-size:22px; font-weight:400; flex:none}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin:0 0 18px; color:var(--muted); font-size:15.5px; line-height:1.6}
.contact{display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; align-items:start}
.contact .ci h2{font-size:clamp(26px,3vw,36px)}
.contact .ci p{margin-top:14px; color:var(--muted); font-size:17px}
.cinfo{margin-top:24px; display:flex; flex-direction:column; gap:12px}
.cinfo a, .cinfo span{display:flex; align-items:center; gap:12px; color:var(--navy); font-weight:600; font-size:16px; text-decoration:none}
.cinfo svg{width:20px; height:20px; color:var(--green-deep); flex:none}
.cform{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:14px}
.cform label{font-size:14px; font-weight:500; color:var(--ink)}
.cform input:not([type=checkbox]), .cform textarea{width:100%; margin-top:6px; padding:12px 14px; border:1px solid var(--line-strong); border-radius:10px; font:inherit; font-size:15px}
.cform textarea{min-height:110px; resize:vertical}
.cform input:focus, .cform textarea:focus{outline:3px solid var(--blue-soft); outline-offset:1px; border-color:var(--blue)}
.cform .btn{justify-content:center}
.cform .note{font-size:13px; color:var(--muted)}
.mbar{display:none}
@media (max-width:720px){
  .mbar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60; background:#fff; border-top:1px solid var(--line); padding:10px 14px; gap:10px; box-shadow:0 -6px 20px -8px rgba(4,22,58,.2)}
  .mbar a{flex:1; justify-content:center; padding:12px; font-size:15px}
  body{padding-bottom:74px}
  .founder-photos{grid-template-columns:1fr}
  .report-preview,.vs,.contact{grid-template-columns:1fr; gap:24px}
  .supply{padding:28px 24px}
}
@media (max-width:920px){.leadmagnet{grid-template-columns:1fr; padding:30px 26px}}

/* final cta */
.final{background:radial-gradient(120% 140% at 15% 0%, #0c2a63, var(--navy) 60%, #03102c); color:#fff; border-radius:28px; padding:64px 56px; text-align:center; position:relative; overflow:hidden}
.final::after{content:""; position:absolute; width:340px;height:340px; border-radius:50%; background:radial-gradient(circle,rgba(25,195,125,.35),transparent 70%); right:-80px; bottom:-120px}
.final h2{color:#fff; font-size:clamp(28px,3.4vw,42px); position:relative}
.final p{color:#bcd0ee; margin-top:16px; font-size:19px; position:relative}
.final .fcta{margin-top:30px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative}

/* legal pages (Impressum / Datenschutz) */
.prose{max-width:820px}
.prose h2{font-size:24px; margin:40px 0 14px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:18px; margin:26px 0 10px}
.prose p{color:var(--ink); font-size:16px; line-height:1.7; margin-bottom:14px}
.prose ul{margin:0 0 14px; padding-left:22px; color:var(--ink); font-size:16px; line-height:1.7}
.prose li{margin-bottom:6px}
.prose a{font-weight:600}

/* footer */
footer{padding:60px 0 40px; border-top:1px solid var(--line); color:var(--muted); font-size:14.5px}
.foot-top{display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:34px}
.foot-top .logo{color:var(--navy)}
.foot-cols{display:flex; gap:60px; flex-wrap:wrap}
.foot-cols h4{font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--navy); margin:0 0 12px; font-family:"IBM Plex Sans"}
.foot-cols a{display:block; color:var(--muted); margin-bottom:8px; font-size:14.5px}
.foot-cols a:hover{color:var(--navy)}
.foot-bot{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:24px; border-top:1px solid var(--line); font-size:13px}
.foot-bot a{color:var(--muted)}
.foot-bot a:hover{color:var(--navy)}

/* reveal */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}

@media (max-width:920px){
  .hero-in{grid-template-columns:1fr; gap:40px; padding:56px 0 64px}
  .offer{grid-template-columns:1fr; gap:28px}
  .grid-3,.steps,.why-grid{grid-template-columns:1fr}
  .step:not(:last-child){border-right:none; border-bottom:1px solid var(--line)}
  .nav-links{display:none}
  .nav-phone{display:none}
  .nav-toggle{display:flex}
  .mobile-nav.open{display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 12px 24px -8px rgba(4,22,58,.18); padding:10px 20px 18px}
  .mobile-nav a.lnk{padding:12px 0; font-size:16px; color:var(--ink); font-weight:500; border-bottom:1px solid var(--line)}
  .mobile-nav a.lnk:last-child{border-bottom:none}
  .mobile-nav a.lnk[aria-current="page"]{color:var(--blue)}
  .final{padding:48px 26px}
  section{padding:64px 0}
  .btn{white-space:normal; text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .reveal{transition:none; opacity:1; transform:none}
  html{scroll-behavior:auto}
  *{transition:none!important}
}