/* assets/css/ot.css */

:root{
  --ot-accent:#f57c00;
  --ot-accent-dark:#d96a00;
  --ot-accent-soft:#fff7ee;
  --ot-bg-soft:#fafafa;
  --ot-text:#1f1f1f;
  --ot-muted:#6c757d;
  --ot-border:#e9ecef;
  --ot-shadow:0 0.5rem 1.5rem rgba(0,0,0,.06);
  --ot-shadow-hover:0 0.75rem 2rem rgba(0,0,0,.10);
}

html, body{
  background-color:var(--ot-bg-soft);
  color:var(--ot-text);
}

body{
  padding-top:72px; /* sticky navbar */
}

/* NAVBAR */
#otNavbar{ z-index:1100; }
.navbar-brand img{
  max-height:40px;
  height:auto;
  width:auto;
  transition:all .25s ease;
}
.nav-scrolled{
  box-shadow:0 4px 12px rgba(0,0,0,0.12);
  transition:box-shadow .25s ease;
}
.nav-small .navbar-brand img{
  transform:scale(.85);
  opacity:.9;
}
.navbar-nav .dropdown-toggle::after{ margin-left:.35rem; }

/* HERO */
.ot-hero{
  position:relative;
  padding:3.25rem 0 3.5rem;
  background:radial-gradient(circle at 0% 0%, #2a1b0c 0, #151515 40%, #050505 100%);
  color:#f7f7f7;
  border-bottom:1px solid #1f1f1f;
  overflow:visible;
}
.ot-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 300px at 90% 0%, rgba(245,124,0,.25), transparent 60%),
    radial-gradient(600px 260px at 0% 50%, rgba(255,255,255,.04), transparent 60%);
  pointer-events:none;
}
.ot-hero-inner{ position:relative; z-index:1; }
.ot-hero h1{
  font-size:clamp(1.9rem, 1.2rem + 2vw, 2.9rem);
  line-height:1.2;
  margin-bottom:.75rem;
  letter-spacing:.02em;
}
.ot-hero p.lead{
  font-size:clamp(1rem, .9rem + .6vw, 1.2rem);
  line-height:1.5;
  color:#e0e0e0;
}
.ot-hero-cta .btn{ border-radius:999px; }
.ot-hero-cta .btn-dark{
  background:#0f0f0f;
  border-color:#0f0f0f;
}
.ot-hero-cta .btn-dark:hover{ background:#000; border-color:#000; }
.ot-hero-cta .btn-outline-dark{
  border-color:#f7f7f7;
  color:#f7f7f7;
}
.ot-hero-cta .btn-outline-dark:hover{
  background:#f7f7f7;
  color:#111;
}

.ot-hero-media{
  border-radius:1.5rem;
  overflow:hidden;
  box-shadow:0 1.25rem 3.5rem rgba(0,0,0,.7);
  background:radial-gradient(circle at 50% 0%, #333 0, #050505 55%);
  position:relative;
}
/* HERO media — spójne proporcje mobile/desktop */
.ot-hero .ot-hero-media{
  aspect-ratio: 4 / 3;   /* telefon: trochę wyższe i czytelniejsze */
  width: 100%;
}

@media (min-width: 992px){ /* Bootstrap lg */
  .ot-hero .ot-hero-media{
    aspect-ratio: 16 / 9;  /* desktop: panoramiczne */
  }
}
/* ********************************************* */
.ot-hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 0% 100%, rgba(245,124,0,.16), transparent 55%);
  mix-blend-mode:screen;
  pointer-events:none;
}
.ot-hero-media::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='noStitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
  pointer-events:none;
  opacity:.6;
}
.ot-hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:contrast(1.05) saturate(1.05);
}

/* BADGE */
.ot-badge{
  background:var(--ot-accent-soft);
  color:var(--ot-accent-dark);
  font-weight:600;
}

/* SEKCJE / KAFLE */
.ot-section{
  background:#fff;
  border-radius:1.25rem;
  padding:2rem;
  box-shadow:var(--ot-shadow);
  transition:box-shadow .25s ease, transform .25s ease;
}
.ot-section:hover{
  box-shadow:var(--ot-shadow-hover);
  transform:translateY(-2px);
}
.ot-section img{ max-width:100%; height:auto; }

.service-card{
  height:100%;
  border:1px solid var(--ot-border);
  border-radius:1.25rem;
  padding:1.25rem 1.5rem;
  background:#fff;
}
.service-card-icon{
  width:44px; height:44px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--ot-accent-soft);
  color:var(--ot-accent-dark);
  margin-bottom:.75rem;
  font-size:1.4rem;
}
.service-card h3{ font-size:1rem; margin-bottom:.25rem; }
.service-card p{ font-size:.875rem; color:var(--ot-muted); }

/* USP */
.ot-usp-card{
  background:#fff;
  border-radius:1.25rem;
  box-shadow:var(--ot-shadow);
  transition:transform .25s ease, box-shadow .25s ease;
  border:1px solid var(--ot-border);
}
.ot-usp-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--ot-shadow-hover);
}
.ot-usp-icon{
  font-size:2.4rem;
  width:70px; height:70px;
  background:var(--ot-accent-soft);
  color:var(--ot-accent-dark);
  border-radius:999px;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0 auto;
}

/* LISTY */
.ot-list-group .list-group-item{
  border:1px solid var(--ot-border);
  border-radius:.75rem !important;
  margin-bottom:.35rem;
  font-size:.9rem;
}
.ot-list-group .list-group-item:hover{
  background:var(--ot-accent-soft);
  color:var(--ot-accent-dark);
}

/* MARKI */
.ot-brands span{
  display:inline-block;
  margin:.1rem .4rem;
  font-size:.85rem;
}

/* FB box */
.fb-section{
  background:#fff;
  border-radius:1.25rem;
  padding:1.25rem 1.5rem;
  box-shadow:var(--ot-shadow);
}

/* OPINIE */
.ot-review-card{
  background:#fff;
  border-radius:1.25rem;
  box-shadow:var(--ot-shadow);
  border:1px solid var(--ot-border);
}
.ot-review-fixed{
  min-height:260px; /* ustawiasz pod siebie */
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

/* KROKI */
.ot-step-card{
  background:#fff;
  border:1px solid var(--ot-border);
  border-radius:1.25rem;
  box-shadow:var(--ot-shadow);
  transition:transform .25s ease, box-shadow .25s ease;
}
.ot-step-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--ot-shadow-hover);
}
.ot-step-badge{
  width:44px; height:44px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--ot-accent-soft);
  color:var(--ot-accent-dark);
  font-weight:700;
  font-size:1.1rem;
}

/* FAQ */
.ot-accordion .accordion-item{
  border:1px solid var(--ot-border);
  border-radius:1rem;
  overflow:hidden;
  box-shadow:var(--ot-shadow);
  margin-bottom:.75rem;
}
.ot-accordion .accordion-button{ font-weight:600; }
.ot-accordion .accordion-button:not(.collapsed){
  background:var(--ot-accent-soft);
  color:var(--ot-accent-dark);
}

/* CTA KONTAKT */
.ot-cta-wrap{
  border-radius:1.5rem;
  background:
    radial-gradient(900px 300px at 90% 0%, rgba(245,124,0,.18), transparent 60%),
    radial-gradient(600px 260px at 0% 60%, rgba(0,0,0,.04), transparent 60%),
    #ffffff;
  border:1px solid var(--ot-border);
  box-shadow:var(--ot-shadow);
}
.ot-cta-kicker{
  letter-spacing:.08em;
  color:var(--ot-accent-dark);
  font-weight:700;
}
.ot-cta-card{
  border-radius:1.25rem;
  background:#fff;
  border:1px solid var(--ot-border);
  box-shadow:var(--ot-shadow);
}
.ot-cta-row{
  display:flex;
  gap:.9rem;
  align-items:flex-start;
  padding:.75rem 0;
  border-bottom:1px solid var(--ot-border);
}
.ot-cta-row:last-child{ border-bottom:0; }
.ot-cta-ico{
  width:44px; height:44px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--ot-accent-soft);
  color:var(--ot-accent-dark);
  font-size:1.2rem;
  flex:0 0 44px;
}

/* FOOTER */
footer{
  background:#151515;
  color:#cfcfcf;
}
footer a{ color:#ffe7cc; }
footer a:hover{ color:#fff; }

/* Cookie banner */
.ot-cookie{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: linear-gradient(#fff, #ebebeb);
  border-top: 1px solid #d7d7d7;
  color: #414141;
  font-size: 12px;
  padding: 12px 0;
}

.ot-cookie__wrap{
  width: min(1100px, 95%);
  margin: 0 auto;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.ot-cookie__text{
  line-height: 1.3;
}

.ot-cookie__text a{
  color: #414141;
  text-decoration: underline;
  text-decoration-style: dotted;
}

.ot-cookie__actions{
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

@media (max-width: 767.98px){
  .ot-cookie__wrap{
    flex-direction: column;
    align-items: stretch;
  }
  .ot-cookie__actions{
    justify-content: stretch;
  }
  .ot-cookie__actions .btn{
    width: 100%;
  }
}


/* Responsive */
@media (max-width: 767.98px){
  body{ padding-top:64px; }
  .ot-hero{ padding:2rem 0 2.5rem; }
  .ot-hero-media{ margin-top:1.5rem; }
}