/* ============================================================
   KOPARKI365.PL - Main Stylesheet (matching React/Tailwind 1:1)
   ============================================================ */

/* --- Google Fonts ----------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Barlow+Condensed:wght@600;700;800;900&display=swap');

/* --- Design tokens (matching Tailwind config) -------------- */
:root {
  /* Orange */
  --orange-300: #fdba74;
  --orange-400: #fb923c;
  --orange-500: #f97316;
  --orange-600: #ea580c;
  /* Grays */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  /* Dark brand backgrounds */
  --dark-nav:  #111827;
  --dark-mob:  #1a2535;
  --dark-drop: #1f2937;
  /* Typography */
  --font-sans: 'Inter', sans-serif;
  --font-cond: 'Barlow Condensed', sans-serif;
  /* Border radius (Tailwind defaults) */
  --r-sm:   0.25rem;  /* rounded-sm  4px  */
  --r:      0.5rem;   /* rounded      8px  */
  --r-md:   0.375rem; /* rounded-md   6px  */
  --r-lg:   0.5rem;   /* rounded-lg   8px  */
  --r-xl:   0.75rem;  /* rounded-xl  12px  */
  --r-2xl:  1rem;     /* rounded-2xl 16px  */
  --r-full: 9999px;   /* rounded-full      */
  /* Navbar heights */
  --nav-h-sm: 64px;   /* h-16 */
  --nav-h-lg: 80px;   /* h-20 */
  --nav-h: var(--nav-h-sm);
  /* Transitions */
  --dur: 200ms;
  --dur-300: 300ms;
}

/* --- Reset ------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);color:var(--gray-900);background:#fff;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit;line-height:inherit}
input,textarea,select{font-family:inherit;font-size:inherit}

/* --- Container: max-w-7xl = 1280px ----------------------- */
.container{width:100%;max-width:1280px;margin:0 auto;padding:0 1rem}
@media(min-width:640px){.container{padding:0 1.5rem}}
@media(min-width:1024px){.container{padding:0 2rem}}

/* --- Condensed font --------------------------------------- */
.font-cond{font-family:var(--font-cond)}

/* ============================================================
   NAVBAR  (bg-[#111827], h-16 mobile → h-20 desktop)
   ============================================================ */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:var(--dark-nav);
  transition:box-shadow var(--dur-300);
}
.navbar--scrolled{box-shadow:0 20px 25px -5px rgba(0,0,0,.2),0 8px 10px -6px rgba(0,0,0,.2)}
.navbar__inner{
  max-width:1280px;margin:0 auto;
  padding:0 1rem;
  display:flex;align-items:center;justify-content:space-between;
  height:var(--nav-h-sm); /* h-16 = 64px */
}
@media(min-width:640px){.navbar__inner{padding:0 1.5rem}}
@media(min-width:1024px){
  .navbar__inner{padding:0 2rem;height:var(--nav-h-lg)} /* h-20 = 80px */
}

/* Logo */
.navbar__logo img{height:2.5rem;width:auto} /* h-10 */
@media(min-width:1024px){.navbar__logo img{height:2.0rem}} /* h-12 */

/* Desktop nav links */
.navbar__nav{display:none;align-items:center;gap:0.25rem}
@media(min-width:1024px){.navbar__nav{display:flex}}
.nav-link{
  display:inline-flex;align-items:center;gap:0.25rem;
  padding:.5rem 1rem;
  font-size:.875rem;font-weight:500;
  color:var(--gray-300);
  border-radius:var(--r-lg);
  transition:color var(--dur),background var(--dur);
  background:none;border:none;cursor:pointer;
}
.nav-link:hover{color:#fff;background:rgba(255,255,255,.05)}
.nav-link--active{color:var(--orange-400)}

/* Dropdown */
.nav-dropdown{position:relative}
.nav-dropdown__menu{
  display:none;
  position:absolute;top:100%;left:0;margin-top:0;
  width:18rem;
  background:var(--dark-drop);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-lg);
  box-shadow:0 25px 50px -12px rgba(0,0,0,.5);
  padding:.5rem;
  z-index:50;
}
.nav-dropdown.is-open .nav-dropdown__menu{display:block}
.nav-dropdown.is-open .nav-chevron{transform:rotate(180deg)}
.nav-chevron{transition:transform var(--dur)}
.nav-dropdown__item{
  display:block;
  padding:.625rem 1rem;
  font-size:.875rem;color:var(--gray-300);
  border-radius:.375rem;
  border-left:2px solid transparent;
  transition:all 150ms;
}
.nav-dropdown__item:hover{
  color:#fff;
  background:rgba(249,115,22,.1);
  border-left-color:var(--orange-500);
}

/* CTA area */
.navbar__cta{display:none;align-items:center;gap:.75rem}
@media(min-width:1024px){.navbar__cta{display:flex}}
.navbar__phone{
  display:flex;align-items:center;gap:.5rem;
  font-size:.875rem;color:var(--gray-300);
  transition:color var(--dur);
}
.navbar__phone:hover{color:var(--orange-400)}
.btn-nav-cta{
  display:inline-flex;align-items:center;
  background:var(--orange-500);
  color:#fff;font-weight:600;
  padding:.625rem 1.25rem;border-radius:var(--r-lg);
  font-size:.875rem;
  transition:background var(--dur),box-shadow var(--dur);
}
.btn-nav-cta:hover{background:var(--orange-600);box-shadow:0 10px 15px -3px rgba(249,115,22,.3)}

/* Hamburger */
.navbar__hamburger{
  display:flex;flex-direction:column;gap:5px;
  padding:.5rem;color:#fff;border-radius:var(--r-lg);
  transition:background var(--dur);
}
.navbar__hamburger:hover{background:rgba(255,255,255,.1)}
@media(min-width:1024px){.navbar__hamburger{display:none}}

/* Mobile menu */
.navbar__mobile{
  display:none;
  background:var(--dark-mob);
  border-top:1px solid rgba(255,255,255,.1);
}
.navbar__mobile.is-open{display:block}
.mobile-nav{padding:1rem}
.mobile-nav-link{
  display:block;
  padding:.75rem 1rem;
  border-radius:var(--r-lg);
  font-size:.875rem;font-weight:500;
  color:var(--gray-300);
  transition:color var(--dur),background var(--dur);
  margin-bottom:.25rem;
}
.mobile-nav-link:hover{color:#fff;background:rgba(255,255,255,.05)}
.mobile-nav-link--active{color:var(--orange-400);background:rgba(249,115,22,.1)}
.mobile-offer-toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:.75rem 1rem;border-radius:var(--r-lg);
  font-size:.875rem;font-weight:500;color:var(--gray-300);
  transition:color var(--dur),background var(--dur);
}
.mobile-offer-toggle:hover{color:#fff;background:rgba(255,255,255,.05)}
.mobile-offer-submenu{
  margin-top:.25rem;margin-left:1rem;
  padding-left:1rem;
  border-left:2px solid rgba(249,115,22,.3);
}
.mobile-offer-submenu a{
  display:block;padding:.5rem 0;
  font-size:.875rem;color:var(--gray-400);
  transition:color var(--dur);
}
.mobile-offer-submenu a:hover{color:var(--orange-400)}
.mobile-cta-area{
  padding-top:.75rem;margin-top:.75rem;
  border-top:1px solid rgba(255,255,255,.1);
}
.mobile-cta-phone{
  display:flex;align-items:center;gap:.5rem;
  padding:.75rem 1rem;font-size:.875rem;color:var(--gray-300);
}
.btn-mobile-cta{
  display:block;
  background:var(--orange-500);color:#fff;font-weight:600;
  padding:.75rem 1rem;border-radius:var(--r-lg);
  font-size:.875rem;text-align:center;
  transition:background var(--dur);
}
.btn-mobile-cta:hover{background:var(--orange-600)}

/* ============================================================
   HERO (min-h-[75vh] or min-h-[40vh])
   ============================================================ */
.hero{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  padding-top:var(--nav-h-sm);
}
@media(min-width:1024px){.hero{padding-top:var(--nav-h-lg)}}
.hero--main{min-height:75vh}
.hero--short{min-height:40vh}
.hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.hero__overlay{position:absolute;inset:0;background:rgba(0,0,0,.65)}
.hero__inner{
  position:relative;z-index:10;
  width:100%;
  max-width:1280px;margin:0 auto;
  padding:3rem 1rem;
}
@media(min-width:640px){.hero__inner{padding:3rem 1.5rem}}
@media(min-width:1024px){.hero__inner{padding:4rem 2rem}}
.hero__content{max-width:48rem}  /* max-w-3xl */
.hero__content--center{margin:0 auto;text-align:center}

/* Badge */
.hero__badge{
  display:inline-block;
  color:var(--orange-400);font-weight:600;font-size:.875rem;
  text-transform:uppercase;letter-spacing:.1em;
  background:rgba(249,115,22,.1);
  border:1px solid rgba(249,115,22,.3);
  border-radius:var(--r-full);
  padding:.25rem 1rem;
  margin-bottom:1rem;
}
/* Title */
.hero__title{
  font-family:var(--font-cond);
  font-size:2.25rem;font-weight:900;
  text-transform:uppercase;line-height:1.1;
  color:#fff;
  margin-bottom:1rem;
}
@media(min-width:640px){.hero__title{font-size:3rem}}
@media(min-width:1024px){.hero__title{font-size:3.75rem}}
@media(min-width:1280px){.hero__title{font-size:4.5rem}}

.hero__desc{
  font-size:1.125rem;color:var(--gray-200);
  line-height:1.65;margin-bottom:.75rem;
  max-width:42rem;
}
@media(min-width:640px){.hero__desc{font-size:1.25rem}}
.hero__extra{font-size:1rem;color:var(--orange-300);font-weight:500;margin-bottom:1.5rem}

/* Buttons row */
.hero__btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.hero__btns--center{justify-content:center}
/* Primary */
.btn-hero-primary{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--orange-500);color:#fff;font-weight:600;
  padding:.75rem 1.5rem;border-radius:var(--r-lg);font-size:.875rem;
  transition:background var(--dur),box-shadow var(--dur);
}
.btn-hero-primary:hover{background:var(--orange-600);box-shadow:0 20px 25px -5px rgba(249,115,22,.3)}
.btn-hero-primary:active{transform:scale(.95)}
/* Secondary/Phone */
.btn-hero-secondary,.btn-hero-phone{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(255,255,255,.1);color:#fff;font-weight:600;
  padding:.75rem 1.5rem;border-radius:var(--r-lg);font-size:.875rem;
  border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(4px);
  transition:background var(--dur),border-color var(--dur);
}
.btn-hero-secondary:hover,.btn-hero-phone:hover{
  background:rgba(255,255,255,.2);
  border-color:rgba(255,255,255,.4);
}
/* Badges row */
.hero__badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.hero__badges--center{justify-content:center}
.hero__badge-pill{
  font-size:.75rem;font-weight:600;color:#fff;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-full);
  padding:.375rem .75rem;
  backdrop-filter:blur(4px);
}

/* ============================================================
   SECTION wrappers
   ============================================================ */
.section{padding:5rem 0} /* py-20 */
.section--gray{background:var(--gray-50)}
.section--white{background:#fff}
.section--dark{background:var(--dark-nav)}
.section--orange{background:var(--orange-500)}

/* Section header */
.sec-label{
  display:block;
  color:var(--orange-500);font-weight:600;font-size:.875rem;
  text-transform:uppercase;letter-spacing:.05em;
  margin-bottom:.5rem;
}
.sec-label--light{color:var(--orange-400)}
.sec-title{
  font-family:var(--font-cond);
  font-size:2.25rem;font-weight:900;
  text-transform:uppercase;line-height:1.1;
  color:var(--gray-900);
  margin-top:.5rem;margin-bottom:1rem;
}
@media(min-width:1024px){.sec-title{font-size:3rem}}
.sec-title--white{color:#fff}
.sec-desc{font-size:1.125rem;color:var(--gray-600);line-height:1.65;max-width:48rem}
.sec-header{margin-bottom:3.5rem}
.sec-header--center{text-align:center}
.sec-header--center .sec-desc{margin:0 auto}

/* ============================================================
   SERVICE CARDS (home page grid)
   ============================================================ */
.services-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
}
@media(min-width:640px){.services-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.services-grid{grid-template-columns:1fr 1fr 1fr}}

.scard{
  display:flex;flex-direction:column;
  background:#fff;border-radius:var(--r-2xl);
  overflow:hidden;
  border:1px solid var(--gray-100);
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:box-shadow var(--dur-300),border-color var(--dur-300),transform var(--dur-300);
  color:inherit;
  text-decoration:none;
}
.scard:hover{
  box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);
  border-color:rgba(253,186,116,.5); /* orange-200 */
  transform:translateY(-4px);
}
.scard__img{position:relative;height:12rem;overflow:hidden} /* h-48 */
.scard__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.scard:hover .scard__img img{transform:scale(1.05)}
.scard__img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.5),transparent);
}
.scard__body{padding:1.25rem}
.scard__title{
  font-family:var(--font-cond);
  font-size:1.25rem;font-weight:700;
  text-transform:uppercase;
  color:var(--gray-900);
  transition:color var(--dur);
  line-height:1.2;
}
.scard:hover .scard__title{color:var(--orange-600)}
.scard__desc{font-size:.875rem;color:var(--gray-500);margin-top:.5rem;line-height:1.6}
.scard__link{
  display:flex;align-items:center;gap:.25rem;
  margin-top:1rem;
  font-size:.875rem;font-weight:600;color:var(--orange-500);
  transition:gap var(--dur-300);
}
.scard:hover .scard__link{gap:.5rem}

/* ============================================================
   FEATURES GRID (dark section)
   ============================================================ */
.features-grid{
  display:grid;grid-template-columns:1fr;gap:1.5rem;
}
@media(min-width:640px){.features-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.features-grid{grid-template-columns:1fr 1fr 1fr}}

.fcard{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-2xl);
  padding:1.5rem;
  transition:background var(--dur-300),border-color var(--dur-300);
}
.fcard:hover{background:rgba(255,255,255,.1);border-color:rgba(249,115,22,.3)}
.fcard__icon{
  width:3rem;height:3rem;
  background:rgba(249,115,22,.1);
  border:1px solid rgba(249,115,22,.3);
  border-radius:.75rem; /* rounded-xl */
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1rem;
  color:var(--orange-400);
  transition:background var(--dur-300);
}
.fcard:hover .fcard__icon{background:rgba(249,115,22,.2)}
.fcard__title{color:#fff;font-weight:600;font-size:1rem;margin-bottom:.5rem}
.fcard__desc{color:var(--gray-400);font-size:.875rem;line-height:1.6}

/* ============================================================
   FOR WHOM  2-col layout + stat badge
   ============================================================ */
.two-col{display:grid;gap:4rem;align-items:center}
@media(min-width:1024px){.two-col{grid-template-columns:1fr 1fr}}
.two-col__img-wrap{position:relative}
.two-col__img{
  aspect-ratio:4/3;border-radius:var(--r-2xl);overflow:hidden;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.25);
}
.two-col__img img{width:100%;height:100%;object-fit:cover}
.two-col__stat{
  position:absolute;bottom:-1.5rem;left:-1.5rem;
  background:var(--orange-500);color:#fff;
  border-radius:.75rem;padding:1.25rem 1.5rem;
  box-shadow:0 20px 25px -5px rgba(0,0,0,.2);
  max-width:16rem;
}
.two-col__stat-num{font-family:var(--font-cond);font-size:1.875rem;font-weight:900;line-height:1}
.two-col__stat-label{font-size:.875rem;font-weight:500;margin-top:.25rem}

/* Check list */
.check-list{display:flex;flex-direction:column;gap:.75rem}
.check-list li{display:flex;align-items:center;gap:.75rem;color:var(--gray-700);font-weight:500}
.check-list li svg{color:var(--orange-500);flex-shrink:0}

/* ============================================================
   PROCESS STEPS
   ============================================================ */
.steps-grid{
  display:grid;grid-template-columns:1fr;gap:1.5rem;
}
@media(min-width:640px){.steps-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.steps-grid{grid-template-columns:1fr 1fr 1fr 1fr}}

.step-card{
  background:#fff;border-radius:var(--r-2xl);
  padding:1.5rem;border:1px solid var(--gray-100);
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  height:100%;
}
.step-card__num{
  font-family:var(--font-cond);
  font-size:3rem;font-weight:900;
  color:rgba(249,115,22,.2);
  line-height:1;margin-bottom:.75rem;
}
.step-card__title{font-weight:600;color:var(--gray-900);font-size:1rem;margin-bottom:.5rem;line-height:1.3}
.step-card__desc{font-size:.875rem;color:var(--gray-500);line-height:1.6}

/* ============================================================
   CTA SECTION (bg-orange-500)
   ============================================================ */
.cta-section{padding:5rem 0;background:var(--orange-500);text-align:center}
.cta-section__inner{max-width:56rem;margin:0 auto;padding:0 1rem}
@media(min-width:640px){.cta-section__inner{padding:0 1.5rem}}
@media(min-width:1024px){.cta-section__inner{padding:0 2rem}}
.cta-title{
  font-family:var(--font-cond);
  font-size:2.25rem;font-weight:900;text-transform:uppercase;
  color:#fff;margin-bottom:1rem;
}
@media(min-width:1024px){.cta-title{font-size:3rem}}
.cta-desc{color:rgba(255,255,255,.9);font-size:1.125rem;line-height:1.65;margin-bottom:2rem;max-width:42rem;margin-left:auto;margin-right:auto}
.cta-btns{display:flex;flex-direction:column;gap:1rem;justify-content:center;align-items:center}
@media(min-width:640px){.cta-btns{flex-direction:row}}
.btn-cta-white{
  display:inline-flex;align-items:center;gap:.5rem;
  background:#fff;color:var(--orange-600);font-weight:700;
  padding:1rem 2rem;border-radius:.75rem;font-size:1rem;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.1);
  transition:background var(--dur);
}
.btn-cta-white:hover{background:var(--gray-50)}
.btn-cta-trans{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(255,255,255,.2);color:#fff;font-weight:700;
  padding:1rem 2rem;border-radius:.75rem;font-size:1rem;
  border:1px solid rgba(255,255,255,.4);
  transition:background var(--dur);
}
.btn-cta-trans:hover{background:rgba(255,255,255,.3)}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
/* Layout: lg:grid-cols-5 - info=2col, form=3col */
.contact-grid{display:grid;gap:3rem}
@media(min-width:1024px){.contact-grid{grid-template-columns:2fr 3fr;gap:3rem}}

/* Info items */
.ci-item{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.25rem}
.ci-item:hover .ci-icon{background:rgba(249,115,22,.2)}
.ci-icon{
  width:3rem;height:3rem;
  background:rgba(249,115,22,.1);
  border:1px solid rgba(249,115,22,.2);
  border-radius:.75rem;
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--orange-500);
  transition:background var(--dur);
}
.ci-label{
  font-size:.75rem;color:var(--gray-400);
  text-transform:uppercase;letter-spacing:.06em;font-weight:600;
  margin-bottom:.25rem;
}
.ci-value{font-weight:600;color:var(--gray-900);transition:color var(--dur)}
.ci-item a:hover .ci-value{color:var(--orange-600)}
.ci-sub{font-size:.75rem;color:var(--gray-400);margin-top:.125rem}

.map-placeholder{
  width:100%;height:12rem;
  background:var(--gray-100);
  border:1px solid var(--gray-200);
  border-radius:var(--r-2xl);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  color:var(--gray-400);gap:.5rem;
  margin-top:2rem;
}
.map-placeholder svg{color:var(--gray-300)}
.map-placeholder p{font-size:.875rem;font-weight:500}

/* Contact form box */
.contact-form{
  background:var(--gray-50);
  border:1px solid var(--gray-100);
  border-radius:var(--r-2xl);
  padding:1.5rem;
}
@media(min-width:640px){.contact-form{padding:2rem}}
.contact-form__title{
  font-family:var(--font-cond);
  font-size:1.5rem;font-weight:700;text-transform:uppercase;
  color:var(--gray-900);margin-bottom:1.25rem;
}

/* Form controls */
.form-row{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:640px){.form-row{grid-template-columns:1fr 1fr}}
.form-group{display:flex;flex-direction:column;gap:.375rem}
.form-label{font-size:.875rem;font-weight:600;color:var(--gray-700)}
.form-input,.form-select,.form-textarea{
  width:100%;
  padding:.75rem 1rem;
  border-radius:.75rem; /* rounded-xl */
  border:1px solid var(--gray-200);
  background:#fff;color:var(--gray-900);
  font-size:.875rem;
  transition:border-color var(--dur),box-shadow var(--dur);
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  outline:none;
  border-color:var(--orange-400);
  box-shadow:0 0 0 2px rgba(251,146,60,.2);
}
.form-input::placeholder,.form-textarea::placeholder{color:var(--gray-400)}
.form-textarea{resize:none;min-height:7rem}
.form-select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='+48575228712'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .75rem center;
  background-size:1rem;
  padding-right:2.5rem;
}
.form-error{font-size:.75rem;color:#ef4444;margin-top:.25rem;display:none}
.form-error.show{display:block}
.form-consent-wrap{display:flex;align-items:flex-start;gap:.75rem}
.form-consent{width:1rem;height:1rem;accent-color:var(--orange-500);flex-shrink:0;margin-top:.125rem;cursor:pointer}
.form-consent-label{font-size:.875rem;color:var(--gray-600);cursor:pointer;line-height:1.5}
.form-notice{
  font-size:.875rem;color:#ef4444;
  padding:.75rem 1rem;
  background:#fef2f2;border:1px solid #fecaca;
  border-radius:.5rem;
  margin-bottom:1rem;display:none;
}
.form-notice.show{display:block}
.btn-submit{
  width:100%;
  background:var(--orange-500);color:#fff;font-weight:700;
  padding:1rem;border-radius:.75rem;font-size:1rem;
  transition:background var(--dur),box-shadow var(--dur);
}
.btn-submit:hover{background:var(--orange-600);box-shadow:0 10px 15px -3px rgba(249,115,22,.3)}
.btn-submit:disabled{opacity:.6;cursor:not-allowed}
.btn-submit:active{transform:scale(.99)}

/* Form success */
.form-success{
  display:none;
  flex-direction:column;align-items:center;justify-content:center;
  min-height:25rem;text-align:center;
  padding:2rem;
  background:#f0fdf4;border:1px solid #bbf7d0;
  border-radius:var(--r-2xl);
}
.form-success.show{display:flex}
.form-success__icon{width:3.5rem;height:3.5rem;color:#22c55e;margin-bottom:1rem}
.form-success__title{
  font-family:var(--font-cond);
  font-size:1.5rem;font-weight:700;text-transform:uppercase;
  margin-bottom:.5rem;
}
.form-success__desc{color:var(--gray-600);max-width:20rem}

/* ============================================================
   SERVICE PAGE TEMPLATE
   ============================================================ */
/* Info bar under hero */
.info-bar{background:var(--dark-nav);padding:1rem 0}
.info-bar__inner{
  max-width:1280px;margin:0 auto;padding:0 1rem;
  display:flex;flex-wrap:wrap;gap:.75rem;
  justify-content:center;
}
@media(min-width:640px){.info-bar__inner{justify-content:flex-start;padding:0 1.5rem}}
@media(min-width:1024px){.info-bar__inner{padding:0 2rem}}
.info-badge{display:flex;align-items:center;gap:.5rem;color:var(--orange-400);font-size:.875rem;font-weight:600}
.info-bar__sep{color:rgba(255,255,255,.2);display:none}
@media(min-width:640px){.info-bar__sep{display:block}}

/* Service layout: lg:grid-cols-3 → 2 content + 1 sidebar */
.service-grid{display:grid;gap:3rem}
@media(min-width:1024px){.service-grid{grid-template-columns:2fr 1fr;gap:3rem}}

/* Service content */
.service-sec-label{color:var(--orange-500);font-weight:600;font-size:.875rem;text-transform:uppercase;letter-spacing:.05em}
.service-title{
  font-family:var(--font-cond);
  font-size:1.875rem;font-weight:900;text-transform:uppercase;
  color:var(--gray-900);margin-top:.5rem;margin-bottom:1rem;line-height:1.1;
}
@media(min-width:1024px){.service-title{font-size:2.25rem}}
.service-text{color:var(--gray-600);font-size:1.125rem;line-height:1.65}
.service-subtitle{
  font-family:var(--font-cond);
  font-size:1.5rem;font-weight:700;text-transform:uppercase;
  color:var(--gray-900);margin-bottom:1rem;
}
.service-uses{display:grid;grid-template-columns:1fr;gap:.75rem}
@media(min-width:640px){.service-uses{grid-template-columns:1fr 1fr}}
.service-uses li{display:flex;align-items:flex-start;gap:.75rem;color:var(--gray-700)}
.service-uses li svg{color:var(--orange-500);flex-shrink:0;margin-top:.125rem}
.service-when{
  background:#fff7ed;border:1px solid rgba(253,186,116,.4);
  border-radius:var(--r-2xl);padding:1.5rem;
}
.service-when__title{
  font-family:var(--font-cond);font-size:1.25rem;font-weight:700;text-transform:uppercase;
  color:var(--gray-900);margin-bottom:.75rem;
}
.service-when__text{color:var(--gray-600);line-height:1.65}
.service-steps{display:flex;flex-direction:column;gap:1rem}
.service-step{display:flex;align-items:flex-start;gap:1rem}
.service-step__num{
  width:2rem;height:2rem;
  background:var(--orange-500);color:#fff;
  border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.875rem;flex-shrink:0;
}
.service-step__text{color:var(--gray-700);padding-top:.25rem}
.space-y-10>*+*{margin-top:2.5rem}

/* Sidebar */
.sidebar-cta{
  background:var(--dark-nav);border-radius:var(--r-2xl);
  padding:1.5rem;color:#fff;
  position:sticky;top:6rem; /* top-24 */
}
.sidebar-cta__title{
  font-family:var(--font-cond);font-size:1.25rem;font-weight:700;text-transform:uppercase;
  margin-bottom:1rem;
}
.sidebar-cta__desc{color:var(--gray-400);font-size:.875rem;margin-bottom:1.5rem;line-height:1.6}
.btn-sidebar-primary{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;
  background:var(--orange-500);color:#fff;font-weight:700;
  padding:.875rem;border-radius:.75rem;font-size:.875rem;
  transition:background var(--dur),box-shadow var(--dur);
  margin-bottom:.75rem;
}
.btn-sidebar-primary:hover{background:var(--orange-600);box-shadow:0 10px 15px -3px rgba(249,115,22,.3)}
.btn-sidebar-phone{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;
  border:1px solid rgba(255,255,255,.2);color:#fff;font-weight:600;
  padding:.875rem;border-radius:.75rem;font-size:.875rem;
  transition:border-color var(--dur);
}
.btn-sidebar-phone:hover{border-color:rgba(255,255,255,.4)}
.sidebar-cta__meta{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:.5rem}
.sidebar-meta-item{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--gray-400)}
.sidebar-meta-item svg{color:var(--orange-400)}
.sidebar-links{
  background:var(--gray-50);border:1px solid var(--gray-100);
  border-radius:var(--r-2xl);padding:1.5rem;
  margin-top:1.5rem;
}
.sidebar-links__title{
  font-size:.875rem;font-weight:600;color:var(--gray-900);
  text-transform:uppercase;letter-spacing:.05em;
  margin-bottom:1rem;
}
.sidebar-links ul{display:flex;flex-direction:column;gap:.5rem}
.sidebar-links a{
  font-size:.875rem;color:var(--gray-600);
  display:flex;align-items:center;gap:.25rem;
  transition:color var(--dur);
}
.sidebar-links a svg{opacity:0;transition:opacity var(--dur)}
.sidebar-links a:hover{color:var(--orange-500)}
.sidebar-links a:hover svg{opacity:1}

/* ============================================================
   ABOUT / O-NAS PAGE
   ============================================================ */
.values-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:640px){.values-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.values-grid{grid-template-columns:1fr 1fr 1fr}}
.val-card{
  background:#fff;border:1px solid var(--gray-100);border-radius:var(--r-2xl);
  padding:1.5rem;box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:box-shadow var(--dur-300),border-color var(--dur-300);
}
.val-card:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,.1);border-color:rgba(253,186,116,.3)}
.val-card__bar{width:.375rem;height:2rem;background:var(--orange-500);border-radius:4px;margin-bottom:1rem}
.val-card__title{
  font-family:var(--font-cond);font-size:1.25rem;font-weight:800;
  text-transform:uppercase;color:var(--gray-900);margin-bottom:.5rem;
}
.val-card__desc{font-size:.875rem;color:var(--gray-500);line-height:1.6}

/* ============================================================
   PRIVACY PAGE
   ============================================================ */
.privacy-content h2{
  font-family:var(--font-cond);font-size:1.25rem;font-weight:800;text-transform:uppercase;
  border-bottom:2px solid rgba(249,115,22,.2);padding-bottom:.75rem;
  margin:2.5rem 0 1rem;color:var(--gray-900);
}
.privacy-content p,.privacy-content li{font-size:.9375rem;color:var(--gray-600);line-height:1.75;margin-bottom:.75rem}
.privacy-content ul{margin-left:1.5rem;list-style:disc;margin-bottom:1rem}
.privacy-content a{color:var(--orange-500)}
.privacy-content a:hover{text-decoration:underline}
.privacy-content .date{font-size:.875rem;color:var(--gray-400);margin-top:3rem;padding-top:2rem;border-top:1px solid var(--gray-100)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--dark-nav);color:var(--gray-400)}
.footer__body{
  max-width:1280px;margin:0 auto;
  padding:4rem 1rem;
}
@media(min-width:640px){.footer__body{padding:4rem 1.5rem}}
@media(min-width:1024px){.footer__body{padding:4rem 2rem}}
.footer__grid{
  display:grid;grid-template-columns:1fr;gap:2.5rem;
  margin-bottom:3rem;
}
@media(min-width:640px){.footer__grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.footer__grid{grid-template-columns:1fr 1fr 1fr 1fr}}
.footer__logo{height:2.5rem;width:auto;margin-bottom:1rem}
.footer__brand-desc{font-size:.875rem;line-height:1.65;color:var(--gray-400)}
.footer__badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.footer__badge{
  font-size:.75rem;color:var(--orange-500);
  background:rgba(249,115,22,.1);border:1px solid rgba(249,115,22,.3);
  border-radius:var(--r-full);padding:.25rem .75rem;font-weight:600;
}
.footer__heading{
  color:#fff;font-weight:600;font-size:.875rem;
  text-transform:uppercase;letter-spacing:.05em;
  margin-bottom:1.25rem;
}
.footer__links{display:flex;flex-direction:column;gap:.75rem}
.footer__links a{font-size:.875rem;color:var(--gray-400);transition:color var(--dur);line-height:1.4}
.footer__links a:hover{color:var(--orange-400)}
.footer__contact{display:flex;flex-direction:column;gap:1rem}
.footer__contact li{display:flex;align-items:flex-start;gap:.75rem;font-size:.875rem}
.footer__contact svg{color:var(--orange-500);flex-shrink:0;margin-top:.125rem}
.footer__contact a:hover{color:var(--orange-400)}
.btn-footer-cta{
  display:inline-block;
  background:var(--orange-500);color:#fff;font-weight:600;
  padding:.625rem 1.25rem;border-radius:var(--r-lg);font-size:.875rem;
  transition:background var(--dur),box-shadow var(--dur);
  margin-top:1.5rem;
}
.btn-footer-cta:hover{background:var(--orange-600);box-shadow:0 10px 15px -3px rgba(249,115,22,.2)}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:2rem;
  display:flex;flex-direction:column;gap:1rem;align-items:flex-start;
}
@media(min-width:640px){.footer__bottom{flex-direction:row;align-items:center;justify-content:space-between}}
.footer__bottom p,.footer__bottom a{font-size:.875rem;color:var(--gray-500)}
.footer__bottom a:hover{color:var(--orange-400)}

/* ============================================================
   COOKIE BANNER
   ============================================================ */
.cookie-banner{
  position:fixed;bottom:0;left:0;right:0;z-index:900;
  background:var(--dark-mob);
  border-top:1px solid rgba(255,255,255,.1);
  box-shadow:0 -4px 20px rgba(0,0,0,.3);
}
.cookie-banner__wrap{max-width:1280px;margin:0 auto;padding:.875rem 1rem}
@media(min-width:640px){.cookie-banner__wrap{padding:.875rem 1.5rem}}
@media(min-width:1024px){.cookie-banner__wrap{padding:.875rem 2rem}}
.cookie-banner__inner{display:flex;flex-wrap:wrap;align-items:center;gap:.875rem}
.cookie-banner__text{display:flex;align-items:flex-start;gap:.625rem;flex:1;min-width:200px}
.cookie-banner__text svg{color:var(--orange-500);flex-shrink:0;margin-top:.1rem}
.cookie-banner__text p{font-size:.875rem;color:var(--gray-300);line-height:1.5}
.cookie-banner__text a{color:var(--orange-400);text-decoration:underline}
.cookie-banner__btns{display:flex;flex-wrap:wrap;gap:.5rem;flex-shrink:0}
.btn-cookie-ghost{
  font-size:.8125rem;font-weight:600;color:var(--gray-400);
  border:1px solid rgba(255,255,255,.15);border-radius:.375rem;
  padding:.4375rem .875rem;transition:background var(--dur),color var(--dur);
}
.btn-cookie-ghost:hover{background:rgba(255,255,255,.08);color:#fff}
.btn-cookie-outline{
  font-size:.8125rem;font-weight:600;color:#fff;
  border:1px solid rgba(255,255,255,.3);border-radius:.375rem;
  padding:.4375rem .875rem;transition:background var(--dur),border-color var(--dur);
}
.btn-cookie-outline:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}
.btn-cookie-accept{
  font-size:.8125rem;font-weight:600;color:#fff;
  background:var(--orange-500);border-radius:.375rem;
  padding:.4375rem .875rem;border:1px solid var(--orange-500);
  transition:background var(--dur);
}
.btn-cookie-accept:hover{background:var(--orange-600)}

/* Cookie modal */
.cookie-modal{
  position:fixed;inset:0;z-index:1100;
  display:none;
  align-items:flex-end;justify-content:center;
}
.cookie-modal.show{display:flex}
@media(min-width:640px){.cookie-modal{align-items:center}}
.cookie-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(3px)}
.cookie-modal__box{
  position:relative;
  background:var(--dark-mob);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  width:100%;max-width:36rem;
  padding:1.75rem;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.5);
  margin:0 1rem 0;
}
@media(min-width:640px){.cookie-modal__box{border-radius:var(--r-2xl);margin:1rem}}
.cookie-modal__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.cookie-modal__header h2{font-weight:700;color:#fff;font-size:1.1rem}
.cookie-modal__close{color:var(--gray-400);font-size:1.5rem;line-height:1;transition:color var(--dur)}
.cookie-modal__close:hover{color:#fff}
.cookie-modal__item{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  background:rgba(255,255,255,.05);border-radius:.5rem;
  padding:1rem;margin-bottom:.75rem;
}
.cookie-modal__item-title{font-weight:600;color:#fff;font-size:.875rem;margin-bottom:.25rem}
.cookie-modal__item-desc{font-size:.8125rem;color:var(--gray-400)}
.cookie-modal__footer{display:flex;gap:.75rem;margin-top:1.5rem}
.cookie-modal__footer>*{flex:1}
.btn-cookie-save{
  font-size:.875rem;font-weight:600;color:#fff;
  border:1px solid rgba(255,255,255,.25);border-radius:.5rem;
  padding:.75rem;transition:border-color var(--dur);
}
.btn-cookie-save:hover{border-color:rgba(255,255,255,.5)}
.btn-cookie-accept-all{
  font-size:.875rem;font-weight:600;color:#fff;
  background:var(--orange-500);border-radius:.5rem;
  padding:.75rem;transition:background var(--dur);
}
.btn-cookie-accept-all:hover{background:var(--orange-600)}
/* Toggle */
.toggle{position:relative;display:inline-flex;align-items:center;flex-shrink:0;cursor:pointer}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.toggle__slider{width:2.75rem;height:1.5rem;background:var(--gray-600);border-radius:var(--r-full);transition:background var(--dur);position:relative}
.toggle__slider::after{content:'';position:absolute;top:.125rem;left:.125rem;width:1.25rem;height:1.25rem;background:#fff;border-radius:var(--r-full);transition:transform var(--dur)}
.toggle input:checked+.toggle__slider{background:var(--orange-500)}
.toggle input:checked+.toggle__slider::after{transform:translateX(1.25rem)}
.badge-always{
  font-size:.75rem;font-weight:600;color:var(--orange-400);
  background:rgba(249,115,22,.1);border:1px solid rgba(249,115,22,.3);
  border-radius:var(--r-full);padding:.2rem .625rem;
  white-space:nowrap;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.pt-nav{padding-top:var(--nav-h-sm)}
@media(min-width:1024px){.pt-nav{padding-top:var(--nav-h-lg)}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
.flex-wrap-gap{display:flex;flex-wrap:wrap;gap:.75rem}
.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mb-6{margin-bottom:1.5rem}
.text-center{text-align:center}
.max-w-3xl{max-width:48rem}
.mx-auto{margin:0 auto}