/* ============ Optivance – WSPÓLNE (ładowane na każdej stronie: home, SEO, UX, O nas, Kontakt) ============ */

.optivance-page{
  --ink:#14161c;
  --ink-soft:#2a2d36;
  --paper:#eef0ea;
  --paper-alt:#e2e5d9;
  --paper-line:#c9cdbc;
  --muted:#5c5f54;
  --emerald:#1f6f52;
  --emerald-bright:#2fa876;
  --violet:#5b4bd1;
  --violet-bright:#8c7dff;
  --white:#ffffff;

  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --container:1180px;
  --radius:14px;
  --radius-sm:8px;
}

.optivance-page,
.optivance-page *,
.optivance-page *::before,
.optivance-page *::after{box-sizing:border-box;}

.optivance-page{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.optivance-page img{max-width:100%;display:block;}
.optivance-page a{color:inherit;text-decoration:none;}
.optivance-page ul{margin:0;padding:0;list-style:none;}

/* Nagłówki dostają jawny kolor - niektóre motywy (np. Blocksy) narzucają globalny
   kolor nagłówków, który wygrywa z odziedziczonym kolorem z rodzica. Jawna wartość
   tutaj gwarantuje spójny wygląd niezależnie od stylów motywu nadrzędnego. */
.optivance-page h1,
.optivance-page h2,
.optivance-page h3{
  font-family:var(--font-display);font-weight:600;margin:0;letter-spacing:-0.01em;
  color:var(--ink);
}
.optivance-page p{margin:0;}

.optivance-page .container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}

.optivance-page :focus-visible{
  outline:2px solid var(--violet);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  .optivance-page *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

/* ---- buttons ---- */
.optivance-page .btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 26px;border-radius:999px;
  font-family:var(--font-body);font-weight:600;font-size:15px;
  border:1.5px solid transparent;cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease, filter .18s ease;
  white-space:nowrap;
}
.optivance-page .btn:hover{transform:translateY(-2px);}
.optivance-page .btn-primary{background:var(--ink);color:var(--paper);}
.optivance-page .btn-primary:hover{background:var(--emerald);}
.optivance-page .btn-ghost{background:transparent;color:var(--ink);border-color:var(--paper-line);}
.optivance-page .btn-ghost:hover{border-color:var(--ink);}
.optivance-page .btn-inverse{background:var(--paper);color:var(--ink);}
.optivance-page .btn-inverse:hover{background:var(--emerald-bright);color:var(--ink);}
.optivance-page .btn-accent{
  background:var(--emerald);color:#fff;
}
.optivance-page .btn-accent:hover{background:var(--ink);}

.optivance-page .kicker{
  font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--emerald);display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;
}
.optivance-page .kicker::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--violet);box-shadow:0 0 0 4px rgba(91,75,209,.15);
}
.optivance-page .kicker.is-violet{color:var(--violet);}
.optivance-page .kicker.is-violet::before{background:var(--emerald);box-shadow:0 0 0 4px rgba(31,111,82,.15);}

/* ---- header ---- */
.optivance-page .site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(238,240,234,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--paper-line);
}
.optivance-page .nav-wrap{display:flex;align-items:center;justify-content:space-between;height:78px;}
.optivance-page .logo{font-family:var(--font-display);font-size:21px;font-weight:700;letter-spacing:-.01em;color:var(--ink);}
.optivance-page .logo span{color:var(--emerald);}
.optivance-page .nav-links{display:flex;align-items:center;gap:36px;font-size:15px;font-weight:500;}
.optivance-page .nav-links a{position:relative;padding:4px 0;}
.optivance-page .nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--emerald);transition:width .2s ease;
}
.optivance-page .nav-links a:hover::after{width:100%;}
.optivance-page .nav-right{display:flex;align-items:center;gap:14px;}

/* hamburger - ukryty na desktopie, checkbox-hack do rozwijania menu na mobile */
.optivance-page .nav-toggle-input{position:absolute;opacity:0;pointer-events:none;}
.optivance-page .nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:38px;height:38px;cursor:pointer;border-radius:8px;
}
.optivance-page .nav-toggle span{
  display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
  margin:0 auto;
}
.optivance-page #optivance-nav-toggle:checked ~ .nav-wrap .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.optivance-page #optivance-nav-toggle:checked ~ .nav-wrap .nav-toggle span:nth-child(2){opacity:0;}
.optivance-page #optivance-nav-toggle:checked ~ .nav-wrap .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---- footer ---- */
.optivance-page .site-footer{background:var(--ink);color:var(--paper);padding:56px 0 28px;}
.optivance-page .footer-grid{
  display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;padding-bottom:36px;
  border-bottom:1px solid rgba(238,240,234,.12);
}
.optivance-page .footer-brand .logo{color:var(--paper);}
.optivance-page .footer-brand p{color:#9a9d8e;font-size:14.5px;margin-top:12px;max-width:280px;}
.optivance-page .footer-col h4{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:#9a9d8e;margin-bottom:16px;font-weight:400;
}
.optivance-page .footer-col ul{display:flex;flex-direction:column;gap:11px;}
.optivance-page .footer-col a{font-size:14.5px;color:#d7d9cd;transition:color .18s ease;}
.optivance-page .footer-col a:hover{color:var(--emerald-bright);}
.optivance-page .footer-bottom{
  padding-top:24px;display:flex;justify-content:space-between;align-items:center;
  font-size:13px;color:#7c7f70;flex-wrap:wrap;gap:10px;
}

/* ---- generic sub-page hero ---- */
.optivance-page .page-hero{padding:64px 0 56px;}
.optivance-page .page-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;}
.optivance-page .page-hero h1{font-size:clamp(32px,4.2vw,48px);line-height:1.1;margin-bottom:18px;max-width:720px;}
.optivance-page .page-hero .lead{font-size:17.5px;color:var(--muted);max-width:560px;margin-bottom:30px;}
.optivance-page .page-hero-actions{display:flex;gap:16px;flex-wrap:wrap;}

/* ---- generic icon badge (dla kart usług / filarów / kroków procesu) ---- */
.optivance-page .icon-badge{
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
}
.optivance-page .icon-badge svg{width:22px;height:22px;}
.optivance-page .icon-badge.accent-emerald{background:rgba(31,111,82,.1);color:var(--emerald);}
.optivance-page .icon-badge.accent-violet{background:rgba(91,75,209,.1);color:var(--violet);}
.optivance-page .icon-badge.accent-ink{background:var(--paper-alt);color:var(--ink);}

/* ---- generic card ---- */
.optivance-page .card{
  background:var(--white);border:1px solid var(--paper-line);border-radius:var(--radius);
  padding:32px;transition:border-color .2s ease, transform .2s ease;
}
.optivance-page .card:hover{transform:translateY(-4px);}
.optivance-page .card.accent-emerald:hover{border-color:var(--emerald);}
.optivance-page .card.accent-violet:hover{border-color:var(--violet);}
.optivance-page .tag{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  width:fit-content;padding:5px 12px;border-radius:999px;display:inline-block;margin-bottom:14px;
}
.optivance-page .tag.accent-emerald{background:rgba(31,111,82,.1);color:var(--emerald);}
.optivance-page .tag.accent-violet{background:rgba(91,75,209,.1);color:var(--violet);}
.optivance-page .card h3{font-size:20px;margin-bottom:10px;}
.optivance-page .card p{color:var(--muted);font-size:15px;}

/* ---- generic grids ---- */
.optivance-page .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.optivance-page .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}

/* ---- pillars (reużywane: strona główna + O nas) ---- */
.optivance-page .pillars{background:var(--paper-alt);padding:90px 0;}
.optivance-page .pillars-head{max-width:620px;margin-bottom:48px;}
.optivance-page .pillars-head h2{font-size:clamp(26px,3vw,36px);margin-bottom:14px;}
.optivance-page .pillars-head p{color:var(--muted);font-size:16.5px;}
.optivance-page .pillar-mark{
  font-family:var(--font-mono);font-size:13px;color:var(--muted);margin-bottom:14px;display:block;
}

/* ---- process steps (numeracja uzasadniona - to realna kolejność działań) ---- */
.optivance-page .process{padding:70px 0;}
.optivance-page .process-head{max-width:620px;margin-bottom:48px;}
.optivance-page .process-head h2{font-size:clamp(26px,3vw,36px);margin-bottom:14px;}
.optivance-page .process-head p{color:var(--muted);font-size:16.5px;}
.optivance-page .process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.optivance-page .process-step{position:relative;padding-top:18px;}
.optivance-page .process-step::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--paper-line);
}
.optivance-page .process-step.accent-emerald::before{background:var(--emerald);}
.optivance-page .process-step.accent-violet::before{background:var(--violet);}
.optivance-page .process-num{
  font-family:var(--font-mono);font-size:13px;color:var(--muted);display:block;margin-bottom:10px;
}
.optivance-page .process-step h3{font-size:18px;margin-bottom:8px;}
.optivance-page .process-step p{color:var(--muted);font-size:14.5px;}

/* ---- cta banner (ciemna sekcja z akcją) ---- */
.optivance-page .cta-banner{
  background:var(--ink);color:var(--paper);padding:80px 0;text-align:center;
  position:relative;overflow:hidden;
}
.optivance-page .cta-banner::before{
  content:"";position:absolute;inset:-40% -10%;
  background:radial-gradient(circle at 30% 20%,rgba(47,168,118,.25),transparent 55%),
             radial-gradient(circle at 75% 80%,rgba(140,125,255,.25),transparent 55%);
  pointer-events:none;
}
.optivance-page .cta-banner .container{position:relative;}
.optivance-page .cta-banner h2{font-size:clamp(26px,3.4vw,38px);max-width:680px;margin:0 auto 14px;color:var(--paper);}
.optivance-page .cta-banner p{color:#b9bcae;font-size:17px;margin-bottom:30px;}

/* ---- final cta (jasna sekcja, wyśrodkowana, przed stopką) ---- */
.optivance-page .final-cta{padding:90px 0 100px;text-align:center;}
.optivance-page .final-cta h2{font-size:clamp(28px,3.6vw,42px);margin-bottom:16px;}
.optivance-page .final-cta p{color:var(--muted);font-size:17px;max-width:520px;margin:0 auto 32px;}

/* ---- treści prawne (polityka prywatności itp.) ---- */
.optivance-page .policy{padding:10px 0 90px;}
.optivance-page .policy-content{max-width:760px;}
.optivance-page .policy-content h2{font-size:20px;margin:44px 0 14px;}
.optivance-page .policy-content h2:first-child{margin-top:0;}
.optivance-page .policy-content p{color:var(--ink-soft);font-size:15.5px;margin-bottom:14px;}
.optivance-page .policy-content strong{color:var(--ink);}
.optivance-page .policy-content a{color:var(--emerald);text-decoration:underline;}
.optivance-page .policy-list{margin:0 0 14px;padding-left:20px;list-style:disc;}
.optivance-page .policy-list li{color:var(--ink-soft);font-size:15.5px;margin-bottom:8px;}

/* ---- responsive (wspólne) ---- */
@media (max-width:960px){
  .optivance-page .grid-2,
  .optivance-page .grid-3,
  .optivance-page .process-grid,
  .optivance-page .page-hero-grid{grid-template-columns:1fr;}
  .optivance-page .footer-grid{grid-template-columns:1fr;}

  .optivance-page .nav-toggle{display:flex;}
  .optivance-page .nav-links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:4px;
    background:var(--paper);border-bottom:1px solid var(--paper-line);
    padding:10px 32px 20px;
    box-shadow:0 20px 30px -20px rgba(20,22,28,.2);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
  }
  .optivance-page .nav-links a{padding:10px 0;width:100%;}
  .optivance-page #optivance-nav-toggle:checked ~ .nav-wrap .nav-links{
    opacity:1;visibility:visible;transform:translateY(0);
  }
}
@media (max-width:640px){
  .optivance-page .container{padding:0 20px;}
  .optivance-page .card{padding:28px;}
  .optivance-page .footer-bottom{flex-direction:column;align-items:flex-start;}
}