@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

/* ===== oFinaczej – strona główna „Twój smartfon w świecie finansów”. CSS zawężony do .ofh (nie gryzie się z motywem Odoo) ===== */
.ofh{
  --navy:#2C3347;--navy2:#1f2536;--bordo:#8E2B5B;--rose:#C98BAA;--blush:#EED9E1;--mist:#F8F7F9;
  --ink:#2C3347;--muted:#6b6f7d;--line:#ebe4e8;
  --grad:linear-gradient(135deg,#2C3347 0%,#8E2B5B 100%);
  --grad-accent:linear-gradient(135deg,#8E2B5B 0%,#C98BAA 100%);
  font-family:"Montserrat","Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--mist);line-height:1.55;-webkit-font-smoothing:antialiased;overflow:hidden
}
.ofh *{box-sizing:border-box}
.ofh h1,.ofh h2,.ofh h3{font-family:inherit;color:var(--navy);letter-spacing:-.02em;margin:0}
.ofh p{margin:0}
.ofh a{text-decoration:none}
.ofh .wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.ofh .eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.16em;font-weight:700;color:var(--bordo)}
.ofh .btn-o{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:14px;border:0;cursor:pointer;font:700 15px Montserrat,sans-serif;transition:transform .15s,box-shadow .15s}
.ofh .btn-o:hover{transform:translateY(-1px)}
.ofh .btn-o.primary{background:var(--grad-accent);color:#fff;box-shadow:0 12px 26px rgba(142,43,91,.28)}
.ofh .btn-o.ghost{background:#fff;color:var(--navy);border:1.5px solid #d9d0d6}
.ofh section.blk{padding:84px 0}
.ofh .head{max-width:760px;margin:0 auto 44px;text-align:center}
.ofh .head h2{font-size:clamp(28px,3.6vw,42px);font-weight:800;line-height:1.12;margin-top:10px}
.ofh .head h2 em{font-style:normal;color:var(--bordo)}
.ofh .head p{color:var(--muted);font-size:17px;margin-top:14px}

/* --- HERO premium: ciemna scena, poświata, telefon rose-gold, szklane kafelki 3D --- */
.ofh .hero{position:relative;color:#fff;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(700px 520px at 78% 48%,rgba(142,43,91,.55),transparent 62%),
    radial-gradient(420px 320px at 92% 12%,rgba(201,139,170,.28),transparent 70%),
    radial-gradient(520px 420px at 8% 95%,rgba(90,44,81,.55),transparent 70%),
    linear-gradient(160deg,#10162a 0%,#1a2034 45%,#2a1d33 100%)}
.ofh .hero:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.55;filter:blur(1px);   /* bokeh — rozmyte światła */
  background:
    radial-gradient(circle at 12% 18%,rgba(243,198,219,.35) 0 3px,transparent 4px),
    radial-gradient(circle at 22% 70%,rgba(243,198,219,.25) 0 5px,transparent 7px),
    radial-gradient(circle at 46% 12%,rgba(255,255,255,.22) 0 2px,transparent 3px),
    radial-gradient(circle at 58% 88%,rgba(201,139,170,.35) 0 4px,transparent 6px),
    radial-gradient(circle at 88% 30%,rgba(255,255,255,.3) 0 3px,transparent 4px),
    radial-gradient(circle at 95% 78%,rgba(243,198,219,.3) 0 6px,transparent 9px),
    radial-gradient(circle at 35% 40%,rgba(255,255,255,.15) 0 2px,transparent 3px)}
.ofh .hero-in{position:relative;display:grid;grid-template-columns:.92fr 1.08fr;gap:10px;align-items:center;padding:96px 20px 70px}
.ofh .hero .eyebrow{color:#f3c6db}
.ofh .hero h1{color:#fff;font-size:clamp(40px,5.6vw,72px);font-weight:800;line-height:1.02;margin-top:16px;text-shadow:0 10px 40px rgba(0,0,0,.35)}
.ofh .hero h1 em{font-style:normal;background:linear-gradient(90deg,#f7d3e3 0%,#e2a9c3 45%,#C98BAA 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ofh .hero .lead{font-size:18px;color:rgba(255,255,255,.82);margin:22px 0 30px;max-width:520px}
.ofh .cta{display:flex;gap:12px;flex-wrap:wrap}
.ofh .hero .btn-o.primary{box-shadow:0 14px 34px rgba(201,139,170,.35),0 0 0 1px rgba(255,255,255,.15) inset}
.ofh .hero .btn-o.ghost{background:rgba(255,255,255,.06);color:#fff;border:1.5px solid rgba(255,255,255,.35);backdrop-filter:blur(6px)}
.ofh .trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:34px}
.ofh .trust div{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.9)}
.ofh .trust i{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-style:normal;color:#f3c6db;font-size:17px;
  background:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.18);box-shadow:0 8px 18px rgba(0,0,0,.25)}

/* scena 640×600 skalowana na mniejszych ekranach */
.ofh .scena{position:relative;height:600px}
.ofh .stage{position:absolute;left:50%;top:0;width:640px;height:600px;margin-left:-320px;transform:scale(var(--s,1));transform-origin:top center;perspective:1400px}
.ofh .orbity{position:absolute;left:-40px;top:-40px;width:720px;height:680px;overflow:visible}
.ofh .orbity ellipse{fill:none;stroke-width:1.6;filter:url(#ofhGlow)}
.ofh .iskra{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px rgba(243,198,219,.9),0 0 22px 8px rgba(201,139,170,.45);animation:ofhIskra 3.2s ease-in-out infinite}
@keyframes ofhIskra{0%,100%{opacity:.25;transform:scale(.6)}50%{opacity:1;transform:scale(1.2)}}

/* telefon: tytanowa ramka, ekran aplikacji oFinaczej */
.ofh .tel{position:absolute;left:50%;top:30px;width:266px;height:548px;margin-left:-133px;border-radius:50px;padding:5px;
  transform:rotateY(-14deg) rotateX(5deg) rotateZ(-2deg);transform-style:preserve-3d;
  background:linear-gradient(115deg,#5b6075 0%,#d9dce6 12%,#7d8194 24%,#2c3040 48%,#8a8fa2 70%,#e6e8ef 84%,#4a4e60 100%);
  box-shadow:0 70px 90px -30px rgba(0,0,0,.75),0 30px 60px -20px rgba(142,43,91,.55),0 0 80px rgba(201,139,170,.28)}
.ofh .tel:before,.ofh .tel:after{content:"";position:absolute;width:4px;border-radius:2px;background:linear-gradient(90deg,#3b3f50,#a3a8b8)}
.ofh .tel:before{left:-3px;top:118px;height:34px;box-shadow:0 52px 0 #6b7083,0 104px 0 #6b7083}       /* przyciski głośności */
.ofh .tel:after{right:-3px;top:150px;height:70px}                                                    /* przycisk boczny */
.ofh .bezel{height:100%;border-radius:45px;background:#050608;padding:7px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ofh .ekran{position:relative;height:100%;border-radius:39px;overflow:hidden;color:#fff;font-size:10px;line-height:1.25;
  background:radial-gradient(130% 60% at 80% 0%,rgba(142,43,91,.55),transparent 60%),linear-gradient(180deg,#1b2033 0%,#151a2a 60%,#1d1626 100%)}
.ofh .ekran .wyspa{position:absolute;top:9px;left:50%;width:78px;height:22px;margin-left:-39px;border-radius:12px;background:#000;z-index:4}
.ofh .ekran .blask{position:absolute;inset:0;z-index:5;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 26%,transparent 27%,transparent 100%)}
.ofh .app-ui{position:relative;z-index:2;display:flex;flex-direction:column;gap:9px;height:100%;padding:12px 14px 10px}
.ofh .status{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:700;padding:0 6px;height:20px}
.ofh .status i{display:inline-block;font-style:normal;letter-spacing:1px;font-size:8px;opacity:.9}
.ofh .naglowek{display:flex;align-items:center;gap:7px;margin-top:4px}
.ofh .naglowek img{width:26px;height:26px;border-radius:8px;background:#fff;padding:2px}
.ofh .naglowek b{font-size:13px;letter-spacing:.01em}
.ofh .naglowek .av{margin-left:auto;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#C98BAA,#8E2B5B);display:grid;place-items:center;font-weight:700;font-size:10px}
.ofh .powitanie{font-size:10px;color:rgba(255,255,255,.65)}
.ofh .powitanie b{display:block;font-size:14px;color:#fff;margin-top:1px}
.ofh .karta{position:relative;border-radius:16px;padding:11px 12px;overflow:hidden;
  background:linear-gradient(135deg,#8E2B5B 0%,#b3527f 55%,#C98BAA 100%);box-shadow:0 10px 22px -8px rgba(142,43,91,.8)}
.ofh .karta small{display:block;font-size:9px;opacity:.85}
.ofh .karta strong{display:block;font-size:20px;letter-spacing:-.02em;margin:2px 0}
.ofh .karta em{font-style:normal;font-size:9px;background:rgba(255,255,255,.22);padding:2px 6px;border-radius:999px}
.ofh .karta svg{position:absolute;right:8px;bottom:8px;width:84px;height:34px}
.ofh .sekcja{display:flex;justify-content:space-between;font-size:10.5px;font-weight:700;margin-top:2px}
.ofh .sekcja span{font-weight:500;color:#f3c6db;font-size:9px}
.ofh .siatka{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.ofh .siatka div{text-align:center;font-size:8.5px;color:rgba(255,255,255,.85)}
.ofh .siatka img{display:block;width:44px;height:44px;margin:0 auto 3px;padding:7px;border-radius:13px;
  background:linear-gradient(150deg,#fff,#efe3ea);box-shadow:0 6px 12px -4px rgba(0,0,0,.6)}
.ofh .alert{display:flex;align-items:center;gap:8px;border-radius:13px;padding:8px 9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.ofh .alert i{font-style:normal;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:rgba(201,139,170,.25);color:#f3c6db;font-size:11px;flex:none}
.ofh .alert b{display:block;font-size:9.5px}.ofh .alert span{font-size:8.5px;color:rgba(255,255,255,.6)}
.ofh .nawigacja{margin-top:auto;display:flex;justify-content:space-around;align-items:center;padding:8px 6px 4px;border-top:1px solid rgba(255,255,255,.08)}
.ofh .nawigacja i{width:18px;height:4px;border-radius:2px;background:rgba(255,255,255,.35)}
.ofh .nawigacja i.on{width:26px;background:#f3c6db;box-shadow:0 0 8px #C98BAA}
.ofh .podloga{position:absolute;left:50%;top:560px;width:300px;height:40px;margin-left:-150px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(201,139,170,.55),transparent);filter:blur(8px)}

.ofh .kafel{position:absolute;width:122px;padding:12px 8px 11px;border-radius:22px;text-align:center;color:inherit;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);animation:ofhUnos 6s ease-in-out infinite}
.ofh .kafel.jasny{background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(246,234,241,.9));border:1px solid rgba(255,255,255,.9);
  box-shadow:0 1px 0 #fff inset,0 18px 40px rgba(0,0,0,.45),0 0 26px rgba(201,139,170,.35)}
.ofh .kafel.ciemny{background:linear-gradient(160deg,rgba(58,66,98,.92),rgba(28,33,52,.92));border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 18px 40px rgba(0,0,0,.5),0 0 26px rgba(142,43,91,.45)}
.ofh .kafel:hover{transform:translateY(-6px) scale(1.06)}
.ofh .kafel .pl{width:54px;height:54px;margin:0 auto;border-radius:16px;display:grid;place-items:center}
.ofh .kafel.jasny .pl{background:linear-gradient(150deg,#fff,#f3e6ee);box-shadow:0 8px 14px -4px rgba(44,51,71,.3)}
.ofh .kafel.ciemny .pl{background:linear-gradient(150deg,#ffffff,#efe3ea);box-shadow:0 8px 16px -4px rgba(0,0,0,.5),0 0 14px rgba(243,198,219,.35)}
.ofh .kafel img{width:40px;height:40px}
.ofh .kafel b{display:block;font-size:12.5px;margin-top:8px;line-height:1.2}
.ofh .kafel.jasny b{color:var(--navy)}.ofh .kafel.ciemny b{color:#fff}
.ofh .kafel span{display:block;font-size:10.5px;line-height:1.3;margin-top:2px}
.ofh .kafel.jasny span{color:var(--muted)}.ofh .kafel.ciemny span{color:rgba(255,255,255,.7)}
@keyframes ofhUnos{0%,100%{translate:0 0}50%{translate:0 -9px}}
/* dwie zygzakowate kolumny po bokach telefonu (telefon zajmuje x 187–453) — ekran aplikacji nie jest zasłonięty */
.ofh .k1{left:0;top:0;rotate:-6deg}
.ofh .k2{left:44px;top:118px;rotate:-3deg;animation-delay:-1.2s}
.ofh .k3{left:0;top:236px;rotate:-5deg;animation-delay:-2.4s}
.ofh .k4{left:44px;top:354px;rotate:-2deg;animation-delay:-.6s}
.ofh .k5{left:0;top:472px;rotate:-5deg;animation-delay:-3.1s}
.ofh .k6{right:0;top:0;rotate:5deg;animation-delay:-1.8s}
.ofh .k7{right:44px;top:118px;rotate:3deg;animation-delay:-.9s}
.ofh .k8{right:0;top:236px;rotate:5deg;animation-delay:-2.9s}
.ofh .k9{right:44px;top:354px;rotate:2deg;animation-delay:-1.5s}
.ofh .k10{right:0;top:472px;rotate:5deg;animation-delay:-3.6s}
@media (prefers-reduced-motion:reduce){.ofh .kafel,.ofh .iskra{animation:none}}

/* --- korzyści „jak aplikacja” --- */
.ofh .trzy{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ofh .kor{background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px}
.ofh .kor .n{width:50px;height:50px;border-radius:15px;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:800;font-size:20px;margin-bottom:18px}
.ofh .kor h3{font-size:20px;font-weight:700;margin-bottom:8px}
.ofh .kor p{color:var(--muted);font-size:15px}

/* --- usługi: ekran aplikacji --- */
.ofh .uslugi{background:#fff}
.ofh .apps{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;perspective:1200px}
.ofh .app{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:26px 12px 22px;border-radius:26px;cursor:pointer;
  background:linear-gradient(160deg,#ffffff 0%,#fbf6f9 55%,#f3e7ee 100%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 1px 0 #fff inset,0 -2px 0 rgba(142,43,91,.06) inset,0 2px 4px rgba(44,51,71,.06),0 14px 26px -8px rgba(44,51,71,.18),0 30px 40px -24px rgba(142,43,91,.35);
  transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.ofh .app:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 42%)}            /* odblask szkła */
.ofh .app:after{content:"";position:absolute;left:14%;right:14%;bottom:-16px;height:16px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(44,51,71,.22),transparent);filter:blur(4px);z-index:-1;transition:opacity .35s,transform .35s}  /* cień na podłodze */
.ofh .app:hover{transform:translateY(-8px) rotateX(8deg) rotateY(-6deg);
  box-shadow:0 1px 0 #fff inset,0 4px 8px rgba(44,51,71,.08),0 26px 40px -10px rgba(44,51,71,.25),0 40px 60px -28px rgba(142,43,91,.5)}
.ofh .app:hover:after{transform:scale(.85);opacity:.7}
.ofh .app .ik{position:relative;width:84px;height:84px;border-radius:24px;display:grid;place-items:center;transform:translateZ(30px);
  background:linear-gradient(150deg,#ffffff 0%,#f6edf2 100%);
  box-shadow:0 1px 0 #fff inset,0 -3px 6px rgba(142,43,91,.08) inset,0 10px 18px -6px rgba(44,51,71,.28),0 2px 3px rgba(44,51,71,.08)}
.ofh .app .ik img{width:60px;height:60px;filter:drop-shadow(0 6px 6px rgba(44,51,71,.22))}
.ofh .app b{font-size:14.5px;color:var(--navy);line-height:1.25;margin-top:6px;transform:translateZ(20px)}
.ofh .app span{font-size:12.5px;color:var(--muted);line-height:1.35;transform:translateZ(14px)}
.ofh .app .plakietka{position:absolute;top:12px;right:12px;font-size:10px;font-weight:700;letter-spacing:.04em;color:#fff;background:var(--grad-accent);padding:4px 8px;border-radius:999px;transform:translateZ(36px);box-shadow:0 6px 12px rgba(142,43,91,.35)}
.ofh .app.hl{background:linear-gradient(160deg,#fff 0%,#fbeef4 60%,#f2d9e5 100%);border-color:#f0cfdd}
.ofh .uslugi{background:radial-gradient(900px 400px at 50% 0%,#f8edf2,transparent 70%),#fff}

/* --- jak to działa --- */
.ofh .kroki{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:k}
.ofh .krok{position:relative;background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px 24px}
.ofh .krok:before{counter-increment:k;content:counter(k);position:absolute;top:-16px;left:24px;width:36px;height:36px;border-radius:50%;background:var(--grad-accent);color:#fff;font-weight:800;display:grid;place-items:center;box-shadow:0 8px 18px rgba(142,43,91,.3)}
.ofh .krok h3{font-size:18px;font-weight:700;margin:10px 0 8px}
.ofh .krok p{color:var(--muted);font-size:14.5px}

/* --- wyróżnienie: IKE/IKZE --- */
.ofh .promo{border-radius:30px;background:var(--grad);color:#fff;padding:52px;display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;position:relative;overflow:hidden}
.ofh .promo:after{content:"";position:absolute;right:-120px;bottom:-160px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(201,139,170,.45),transparent 65%)}
.ofh .promo .eyebrow{color:#f3c6db}
.ofh .promo h2{color:#fff;font-size:clamp(28px,3.4vw,40px);font-weight:800;line-height:1.1;margin:10px 0 14px}
.ofh .promo h2 em{font-style:normal;color:#f3c6db}
.ofh .promo p{opacity:.88;font-size:16.5px;max-width:560px}
.ofh .promo .btn-o{margin-top:24px}
.ofh .promo .liczba{position:relative;z-index:1;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:24px;padding:26px;text-align:center}
.ofh .promo .liczba small{display:block;opacity:.8;font-size:13px}
.ofh .promo .liczba b{display:block;font-size:46px;letter-spacing:-.03em;margin:6px 0}
.ofh .promo .liczba img{width:64px;height:64px;filter:brightness(0) invert(1) opacity(.9);margin-bottom:6px}

/* --- wartości --- */
.ofh .wart{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* karty wartości w tym samym szklanym stylu 3D co kafelki usług */
.ofh .w{position:relative;text-align:center;padding:34px 26px 30px;border-radius:26px;
  background:linear-gradient(160deg,#ffffff 0%,#fbf6f9 55%,#f3e7ee 100%);border:1px solid rgba(255,255,255,.9);
  box-shadow:0 1px 0 #fff inset,0 2px 4px rgba(44,51,71,.06),0 14px 26px -8px rgba(44,51,71,.18),0 30px 40px -24px rgba(142,43,91,.35);
  transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.ofh .w:hover{transform:translateY(-6px)}
.ofh .w .ik{width:96px;height:96px;margin:0 auto 18px;border-radius:28px;display:grid;place-items:center;
  background:linear-gradient(150deg,#ffffff 0%,#f6edf2 100%);
  box-shadow:0 1px 0 #fff inset,0 -3px 6px rgba(142,43,91,.08) inset,0 12px 22px -6px rgba(44,51,71,.3),0 0 0 6px rgba(238,217,225,.55)}
.ofh .w .ik img{width:68px;height:68px;filter:drop-shadow(0 6px 6px rgba(44,51,71,.22))}
.ofh .w h3{font-size:19px;font-weight:700;margin-bottom:6px}
.ofh .w p{color:var(--muted);font-size:14.5px}

/* --- kontakt --- */
.ofh .kontakt{background:var(--navy);color:#fff}
.ofh .kontakt .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:46px;padding-top:84px;padding-bottom:84px}
.ofh .kontakt h2{color:#fff;font-size:clamp(28px,3.4vw,40px);font-weight:800;line-height:1.12;margin-top:10px}
.ofh .kontakt .eyebrow{color:var(--rose)}
.ofh .kontakt p.d{opacity:.84;margin:16px 0 26px;font-size:16px}
.ofh .tel-cta{display:inline-flex;align-items:center;gap:14px;color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:16px 22px}
.ofh .tel-cta .ic{width:48px;height:48px;border-radius:50%;background:var(--grad-accent);display:grid;place-items:center}
.ofh .tel-cta small{display:block;opacity:.75;font-size:12px}
.ofh .tel-cta b{font-size:25px;letter-spacing:.02em}
.ofh .form{background:#fff;color:var(--ink);border-radius:22px;padding:30px}
.ofh .fg{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ofh .full{grid-column:1/-1}
.ofh label.l{display:block;font-size:12.5px;font-weight:700;margin-bottom:7px}
.ofh .in{width:100%;height:48px;border:1px solid #d9d3d8;border-radius:12px;background:#fff;padding:0 14px;font:500 15px Montserrat,sans-serif;color:var(--ink);outline:none}
.ofh textarea.in{height:110px;padding:12px 14px;resize:vertical}
.ofh .in:focus{border-color:var(--bordo);box-shadow:0 0 0 3px rgba(142,43,91,.12)}
.ofh .zgoda{font-size:12px;color:var(--muted);display:flex;gap:10px;align-items:flex-start}
.ofh .zgoda input{margin-top:3px}
.ofh .rodo{font-size:11.5px;line-height:1.5;color:var(--muted);margin:0}
.ofh .rodo a{color:var(--bordo);font-weight:600;text-decoration:underline}
.ofh .form .btn-o{width:100%;margin-top:8px}
.ofh .ok{display:none;padding:16px;border-radius:12px;background:var(--blush);color:var(--bordo);font-weight:700;margin-top:12px}
.ofh .disc{padding:28px 0 40px;font-size:12px;color:var(--muted);text-align:center}

@media(max-width:1020px){
  .ofh .hero-in{grid-template-columns:1fr}
  .ofh .wrap.hero-in{padding:86px 18px 40px}  /* .wrap.hero-in: wygrywa z .wrap{padding:0 16px} dla telefonów */
  .ofh .scena{height:520px;margin-top:10px}.ofh .stage{--s:.86}
  .ofh .apps{grid-template-columns:repeat(3,1fr)}
  .ofh .kroki{grid-template-columns:1fr 1fr;row-gap:30px}
  .ofh .promo{grid-template-columns:1fr;padding:36px 26px}
}
@media(max-width:700px){
  .ofh .wrap{padding:0 16px}
  .ofh section.blk{padding:56px 0}
  .ofh .scena{height:350px}.ofh .stage{--s:.56}
  .ofh .trzy,.ofh .wart,.ofh .kroki,.ofh .kontakt .wrap,.ofh .fg{grid-template-columns:1fr}
  .ofh .full{grid-column:auto}
  .ofh .apps{grid-template-columns:repeat(2,1fr);gap:12px}
  .ofh .app{padding:18px 10px}
  .ofh .kontakt .wrap{padding-top:56px;padding-bottom:56px}
  .ofh .form{padding:22px}
}

/* nagłówek Odoo tylko na tej stronie: biel → jasny róż, bez kreski i cienia — płynnie przechodzi w hero */
header#top,header#top .navbar{background:linear-gradient(180deg,#ffffff 0%,#f4ecf1 100%)!important;box-shadow:none!important;border-bottom:0!important}

/* mgiełka: górna krawędź hero zaczyna się kolorem dołu nagłówka i w ~120 px przechodzi w ciemne tło */
.ofh .hero>.mgla{position:absolute;left:0;right:0;top:0;height:130px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,#f4ecf1 0%,rgba(244,236,241,.62) 22%,rgba(244,236,241,.22) 55%,rgba(244,236,241,0) 100%)}
.ofh .hero-in{z-index:1}