/* Pristine Moon SmartHome Industrial Modern Style - style.css */
/*** CSS RESET & NORMALIZE ***/
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,
dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;box-sizing:border-box}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1;background:#101820;color:#ECEDEE;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
ol,ul{list-style:none}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
*,*:before,*:after{box-sizing:inherit}
button,input,select,textarea{font-family:inherit;font-size:inherit}

/*** VARIABLES (fallbacks included) ***/
:root {
  --color-primary: #18324A;
  --color-secondary: #5CA0D3;
  --color-accent: #E6EEF3;
  --color-bg-dark: #161B22;
  --color-bg-light: #1D2630;
  --color-card: #232F38;
  --color-metal: #B0BEC5;
  --color-text: #ECEDEE;
  --color-heading: #EEF5FA;
  --color-shadow: rgba(24,50,74,0.2);
  --color-shadow-strong: rgba(24,50,74,0.32);
  --color-border: #293544;
  --radius: 10px;
  --font-display: 'Montserrat',Arial,Helvetica,sans-serif;
  --font-body: 'Roboto',Arial,Helvetica,sans-serif;
  --transition: 0.23s cubic-bezier(.4,.1,.25,1);
  --z-header: 1000;
  --z-mobile-menu: 1200;
  --z-cookie: 7000;
}

/*** FONTS ***/
@import url('https://fonts.googleapis.com/css?family=Montserrat:700,600,400&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap');

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg-dark);
  font-size: 16px;
  letter-spacing: 0.01em;
  min-height: 100vh;
  line-height: 1.7;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-display);
  color: var(--color-heading);
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: 0.01em;
}

h1 {font-size: 2.25rem;line-height: 1.2;}
h2 {font-size: 1.7rem;line-height:1.25;}
h3 {font-size:1.18rem;line-height:1.4;}
h4 {font-size:1.05rem;}
section h2 {margin-top:0;}
p, ul, ol, li {font-size: 1rem;color:var(--color-text);}
strong{font-weight:600;color:var(--color-secondary);}
small{font-size:.95rem;color:var(--color-metal);}

/*** GENERAL LAYOUT CLASSES ****************************/
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.content-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.section {
  padding: 40px 20px;
  margin-bottom: 60px;
  background: transparent;
}
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.card {
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: 0 2px 14px 0 var(--color-shadow);
  margin-bottom: 20px;
  position: relative;
  padding: 24px;
  transition: box-shadow var(--transition), border-color var(--transition); 
  border: 1.5px solid var(--color-border);
  min-width: 260px;
}
.card:hover {
  box-shadow: 0 6px 30px -6px var(--color-shadow-strong);
  border-color: var(--color-secondary);
}
.content-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}
.text-image-section {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}
.testimonial-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 30px;
  margin-bottom: 20px;
  background: var(--color-accent);
  color: #22242A;
  border-left: 4px solid var(--color-secondary);
  box-shadow: 0 1px 12px 0 var(--color-shadow);
  border-radius: var(--radius);
  position: relative;
  max-width: 600px;
}
.testimonial-card blockquote{
  font-family: var(--font-display);
  color:#22242A;
  font-size:1.13rem;
  margin-bottom: 12px;
  line-height:1.6;
  quotes: "\201C" "\201D";
}
.testimonial-card p strong {
  font-size: 1rem;
  color: var(--color-primary);
}
.feature-item{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: 15px;
}
ul li:not(:last-child){margin-bottom:10px;}

/*** NAVIGATION & HEADER *******************************/
header {
  background: var(--color-primary);
  border-bottom: 2px solid var(--color-border);
  position: relative;
  z-index: var(--z-header);
  box-shadow: 0 4px 14px -10px var(--color-shadow-strong);
}
.main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 72px;
  padding: 0 20px;
}
.main-nav > a img{
  height:42px;
}
.main-nav ul {
  display: flex;
  flex-direction: row;
  gap: 28px;
  margin-left:32px;
}
.main-nav ul li a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-accent);
  letter-spacing: 0.04em;
  transition: color var(--transition);
  position:relative;
  padding: 2px 0;
}
.main-nav ul li a:hover, .main-nav ul li a:focus {
  color: var(--color-secondary);
}
.main-nav .cta-primary {
  margin-left: 26px;
}

/* MOBILE NAVIGATION (HAMBURGER) */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 2.1rem;
  color: var(--color-accent);
  position: absolute;
  right: 24px;
  top: 14px;
  z-index: var(--z-mobile-menu);
  transition: color var(--transition);
  cursor:pointer;
  width:38px;height:38px;line-height:1;
}
.mobile-menu-toggle:focus {outline: 2px solid var(--color-secondary);}
.mobile-menu {
  position: fixed;
  top: 0;left: 0;
  width: 100vw; height: 100vh;
  background: var(--color-bg-dark);
  z-index: var(--z-mobile-menu);
  transform: translateX(-100vw);
  transition: transform 0.36s cubic-bezier(.7,.05,.5,1);
  display: flex; flex-direction: column; gap: 0;
  box-shadow: 8px 0 42px -4px var(--color-shadow-strong);
  padding-top: 40px;
}
.mobile-menu.active {
  transform: translateX(0);
}
.mobile-menu-close {
  background: none;
  border: none;
  color: var(--color-secondary);
  font-size: 2rem;
  position: absolute;
  top: 13px; right: 20px;
  cursor:pointer;
  z-index: var(--z-mobile-menu);
  width:38px;height:38px;line-height:1;
  transition: color var(--transition);
}
.mobile-menu-close:hover, .mobile-menu-close:focus {color:var(--color-accent);background:var(--color-secondary);border-radius: 50%;}
.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: flex-start;
  margin-top: 48px;
  padding: 0 34px;
}
.mobile-nav a {
  color: var(--color-accent);
  font-size: 1.2rem;
  font-family: var(--font-display);
  font-weight:600;
  padding: 10px 0;
  transition: color var(--transition), background var(--transition);
  border-radius: 7px;
  min-width:200px;
  display:block;
}
.mobile-nav a:hover, .mobile-nav a:focus {
  color: var(--color-secondary);
  background: rgba(92,160,211,0.08);
}

/*** HERO SECTIONS ***********************************/
.hero {
  background: linear-gradient(110deg, var(--color-bg-dark) 60%, var(--color-primary) 100%);
  border-bottom: 2px solid var(--color-border);
  padding: 50px 0 32px 0;
  min-height: 320px;
  margin-bottom: 40px;
}
.hero .content-wrapper {
  align-items: flex-start;
  gap: 24px;
}
.hero h1 {
  font-size: 2.6rem;
  font-weight:800;
  color: var(--color-accent);
}
.hero p {
  color: var(--color-metal);
  font-size: 1.09rem;
  font-weight:500;
  margin-bottom: 18px;
}
.hero .cta-primary {
  margin-top: 6px;
}

/*** FEATURES ****************************************/
.features {
  background: var(--color-bg-light);
  border-radius: var(--radius);
  margin-bottom: 60px;
  padding: 48px 0 34px 0;
}
.features h2 {
  color: var(--color-secondary);
  margin-bottom: 22px;
  font-size: 1.42rem;
}
.features ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.features li {
  font-size: 1.07rem;
  font-family:var(--font-body);
  color: var(--color-accent);
  background:rgba(92,160,211,0.07);
  border-left: 3.5px solid var(--color-metal);
  padding: 13px 18px;
  margin-bottom:16px;
  border-radius:7px;
}

/*** SERVICE CARDS / SERVICES ************************/
.services {
  margin-bottom:60px;
}
.service-list{
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 24px 0 30px 0;
}
.service-card{
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: 0 2px 14px 0 var(--color-shadow);
  border-left: 3.5px solid var(--color-secondary);
  border-right: 3.5px solid var(--color-metal);
  padding: 28px 20px 22px 30px;
  min-width: 260px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition:box-shadow var(--transition),border-color var(--transition);
}
.service-card:hover, .service-card:focus-within {
  border-left-color:var(--color-metal);
  border-right-color:var(--color-secondary);
  box-shadow: 0 6px 28px -6px var(--color-shadow-strong);
}
.service-card h3{
  color:var(--color-secondary);
  font-size:1.12rem;
  font-weight:700;
}
.service-card p{
  color: var(--color-text);
  font-size: 1rem;
}
.service-price{
  font-family: var(--font-display);
  font-size:1.02rem;
  color:var(--color-metal);
  margin-top:8px;
  font-weight:600;
}
.cta-secondary{
  margin-top:20px;
  padding:12px 38px;
  font-family: var(--font-display);
  font-size:1.05rem;
  background:transparent;
  border:2px solid var(--color-secondary);
  color:var(--color-secondary);
  border-radius: var(--radius);
  cursor:pointer;
  font-weight:600;
  letter-spacing:0.045em;
  transition: background var(--transition), color var(--transition), border var(--transition);
  display:inline-block;
}
.cta-secondary:hover, .cta-secondary:focus {
  background: var(--color-secondary);
  border:2px solid var(--color-accent);
  color:var(--color-bg-dark);
}

/*** TESTIMONIALS ************************************/
.testimonials {
  margin-bottom:60px;
}
.testimonials h2{
  margin-bottom: 20px;
}
.testimonial-card:not(:last-child){margin-bottom:20px;}

/*** BLOG ARTICLES ***********************************/
.blog-list{
  margin-bottom:60px;
}
.article-preview{
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow:0 2px 12px 0 var(--color-shadow);
  margin-bottom:22px;
  padding:24px 22px 18px 26px;
  position:relative;
  transition: box-shadow var(--transition);
  border-left:3px solid var(--color-secondary);
}
.article-preview h3{
  font-size:1.18rem;
  color:var(--color-secondary);
  margin-bottom:12px;
}
.article-preview p{
  color: var(--color-accent);
}
.article-preview:hover {
  box-shadow:0 6px 26px -5px var(--color-shadow-strong);
}
.blog-categories{
  background:rgba(92,160,211,0.13);
  color:var(--color-secondary);
  padding:10px 22px;
  border-radius:8px;
  margin-top:18px;
  font-size:.98rem;
}
.blog-categories ul{display: flex;flex-wrap: wrap;gap: 12px;margin-top:6px;}
.blog-categories li{background:var(--color-card);padding:5px 13px;border-radius:6px;font-weight:500;color: var(--color-metal);}

/*** CASE STUDIES (REALIZACJE) ***********************/
.case-studies {
  margin-bottom:60px;
}
.project-summary{
  background:var(--color-bg-light);
  border-radius: var(--radius);
  box-shadow:0 1px 8px 0 var(--color-shadow);
  margin-bottom:24px;
  padding:24px 22px 12px 26px;
  border-left:3px solid var(--color-secondary);
  color:var(--color-accent);
}
.project-summary h3{color:var(--color-secondary);margin-bottom:9px;font-size:1.11rem;}
.project-summary ul{display: flex;flex-direction: column;gap:8px;margin: 9px 0 0 0;}

/*** CTA / CALL TO ACTION ****************************/
.cta {
  background:var(--color-secondary);
  color: var(--color-bg-dark);
  border-radius: var(--radius);
  box-shadow: 0 2px 16px -8px var(--color-shadow-strong);
  padding: 36px 0 36px 0;
  margin-bottom:60px;
  text-align:center;
}
.cta .content-wrapper{
  align-items:center;
  gap:10px;
}
.cta h2, .cta p{color:var(--color-bg-dark);}
.cta .cta-primary{margin-top: 14px;}

.cta-primary{
  background: var(--color-secondary);
  color: var(--color-bg-dark);
  font-family: var(--font-display);
  font-weight:700;
  font-size:1.15rem;
  border-radius: var(--radius);
  padding:14px 38px 13px 38px;
  transition: background var(--transition), box-shadow var(--transition), color var(--transition);
  border:none;
  cursor:pointer;
  box-shadow:0 2px 14px 0 var(--color-shadow);
  display:inline-block;
  letter-spacing:0.048em;
}
.cta-primary:hover,.cta-primary:focus{
  background: var(--color-primary);
  color:var(--color-accent);
  box-shadow:0 4px 16px 0 var(--color-secondary);
}

/*** FOOTER ******************************************/
footer {
  background: var(--color-primary);
  color: var(--color-accent);
  font-size:1rem;
  border-top: 2px solid var(--color-border);
  padding: 26px 0 0 0;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items:center;
  gap: 32px;
  padding: 0 20px 18px 20px;
  width: 100%;
}
.footer-nav ul {
  display: flex;
  flex-wrap:wrap;
  gap: 20px;
}
.footer-nav ul li a {
  color: var(--color-metal);
  font-family: var(--font-display);
  font-size:.98em;
  transition: color var(--transition);
}
.footer-nav ul li a:hover, .footer-nav ul li a:focus {color:var(--color-secondary);}
.footer-nav > div > span {color: var(--color-metal);font-size:.94em;}

/*** LEGAL/CONFIRMATION SECTIONS ********************/
.legal, .confirmation {
  background:var(--color-bg-light);
  box-shadow:0 2px 16px -10px var(--color-shadow-strong);
  border-radius: var(--radius);
  padding:44px 0 32px 0;
  margin-bottom:36px;
}
.legal h1, .confirmation h1{color:var(--color-secondary);margin-bottom:16px;font-size:1.64em;}
.legal h2{color:var(--color-accent);margin-top:28px;}
.legal ul, .legal ol{margin-left:20px;margin-bottom: 18px;}
.legal li{color:var(--color-metal);margin-bottom:10px;}
.confirmation h1{margin-bottom:18px;}
.confirmation p{color:var(--color-metal);margin-bottom: 20px;}

/*** CONTACT SECTIONS *******************************/
.contact-data, .contact-form, .map{
  background:var(--color-bg-light);
  border-radius: var(--radius);
  box-shadow:0 2px 14px -9px var(--color-shadow-strong);
  padding: 44px 0 30px 0;
  margin-bottom:34px;
}
.contact-data h2, .contact-form h2, .map h2 {color:var(--color-secondary);margin-bottom:14px;}
.contact-data ul, .contact-form ul{display:flex;flex-direction:column;gap:10px;}
.contact-data a{color:var(--color-secondary);text-decoration:underline;}
.contact-data a:hover{text-decoration:none;}
.map .text-section p{color:var(--color-metal);}

/*** COOKIE CONSENT BANNER **************************/
#cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  width: 100vw;
  background: var(--color-card);
  color: var(--color-accent);
  box-shadow: 0 -2px 18px 2px var(--color-shadow-strong);
  padding: 22px 20px 18px 20px;
  display:flex;
  flex-direction:row;
  justify-content: space-between;
  align-items: center;
  gap:20px;
  font-size:1rem;
  z-index: var(--z-cookie);
  transition: transform 0.35s cubic-bezier(.62,.02,.73,.93);
}
#cookie-banner.hide{
  transform: translateY(120%);
}
#cookie-banner .cookie-actions {
  display:flex;flex-direction:row;gap:14px;
}
.cookie-btn {
  background: var(--color-secondary);
  color: var(--color-bg-dark);
  border: none;
  border-radius: 7px;
  padding: 9px 20px;
  font-size:1em;
  font-family: var(--font-display);
  font-weight:600;
  cursor:pointer;
  margin-right: 0;
  transition: background var(--transition), color var(--transition);
  box-shadow: 0 1px 8px -1px var(--color-shadow);
  letter-spacing:.02em;
}
.cookie-btn.settings{
  background:var(--color-card);
  color:var(--color-secondary);
  border: 1.2px solid var(--color-secondary);
  margin-left:6px;
}
.cookie-btn:hover, .cookie-btn:focus{background:var(--color-primary);color:var(--color-accent);}
.cookie-btn.settings:hover, .cookie-btn.settings:focus{background:var(--color-secondary);color:var(--color-bg-dark);}

/* Cookie Modal */
#cookie-modal-overlay {
  position: fixed; top:0; left:0; width:100vw; height:100vh;
  background:rgba(24,50,74,.65); z-index:var(--z-cookie);
  display:none; align-items:center;justify-content:center;
  transition:opacity 0.32s;
}
#cookie-modal-overlay.active{display:flex;}
#cookie-modal {
  background:var(--color-card);
  color:var(--color-accent);
  padding:36px 36px 28px 36px;
  border-radius:16px;
  min-width:320px;max-width:94vw;max-width:480px;
  display:flex;flex-direction:column;gap:22px;
  box-shadow:0 8px 48px -2px var(--color-shadow-strong);
  position:relative;
  z-index:var(--z-cookie);
  animation: popIn 0.35s cubic-bezier(.62,.02,.73,.93);
}
@keyframes popIn {
  0% {transform: scale(0.87); opacity:0;}
  90% {transform: scale(1.03); opacity:1;}
  100%{transform: scale(1);opacity:1;}
}
#cookie-modal h3 {
  color:var(--color-secondary);
  font-size:1.13rem;
  margin-bottom:6px;
}
.cookie-category {
  display:flex;
  flex-direction:row;
  align-items: center;
  gap: 18px;
  margin-bottom:10px;
}
.cookie-category input[type=checkbox] {
  width:22px;
  height:22px;
  accent-color:var(--color-secondary);
  margin-right:5px;
}
.cookie-category label {
  font-size:1rem;
  font-family:var(--font-display);
}
.cookie-category.essential label:after{
  content:' (wymagane)';
  color:var(--color-metal);
  font-size:.93rem;
}
#cookie-modal .modal-actions {
  display:flex;flex-direction:row;gap:12px;justify-content:flex-end;align-items:center;margin-top:10px;
}
#cookie-modal .cookie-btn {font-size: 1em;}
#cookie-modal .close-modal {
  position:absolute;
  top:14px; right:15px;
  background:none; border:none; font-size:1.4em; color:var(--color-secondary); cursor:pointer;
  transition: color var(--transition);
}
#cookie-modal .close-modal:hover{color:var(--color-accent);}

/**** SPACING & UTILITIES ****************************/
.mt-24 {margin-top:24px;}
.mb-16 {margin-bottom:16px;}
.mb-20 {margin-bottom:20px;}
.mb-32 {margin-bottom:32px;}
.gap-16 {gap:16px;}
.gap-24 {gap:24px;}
.radius {border-radius:var(--radius);}
.shadow {box-shadow:0 2px 14px 0 var(--color-shadow);}
.text-center {text-align:center;}

/**** FLEXBOX-ONLY LAYOUT ON ALL CONTAINERS **********/
/* CRITICAL: All layouts use display:flex and flex-wrap or flex-direction as required */
/* .card-container, .content-grid, .service-list, .footer-nav, .main-nav ul, .mobile-nav, etc. are all flex as above */

/**** MEDIA QUERIES Responsive Design ****************/
@media (max-width: 1140px) {
  .container{max-width:97vw;}
  .service-list{flex-direction:column;align-items:center;}
}
@media (max-width: 900px) {
  .main-nav ul{gap:18px;}
  .footer-nav ul{gap:11px;}
}
@media (max-width: 768px) {
  html {font-size: 94%;}
  .main-nav, .header-inner{flex-direction: column;height:auto;padding:10px 20px;gap:10px;}
  .main-nav ul,
  .footer-nav ul,
  .service-list,
  .card-container,
  .content-grid,
  .features ul {
    flex-direction: column;
    align-items: flex-start;
    gap:16px;
  }
  .content-wrapper{gap:12px;}
  .hero{padding:36px 0 20px 0;min-height: 160px;}
  .hero h1{font-size:2rem;}
  .hero p{font-size:.98rem;}
  .project-summary,
  .article-preview,
  .service-card,
  .testimonial-card{min-width:unset;max-width:100%;padding-left:14px;padding-right:15px;}
  .case-studies .content-wrapper, .services .content-wrapper, .features .content-wrapper{gap:7px;}
  .features li{font-size:1rem;}
  .cta{padding:22px 0 24px 0;}
  .section{padding:26px 0px;margin-bottom:36px;}
  .contact-data,.contact-form,.map,.legal,.confirmation{padding:25px 0 22px 0;}
  .content-grid, .card-container, .service-list{gap: 12px;}
}
@media (max-width: 640px) {
  .container{padding:0 8px;}
  h1{font-size:1.7rem;}
  h2{font-size:1.23rem;}
  .mobile-menu-toggle{display: block;}
  .main-nav ul {display: none;}
  .main-nav .cta-primary {display: none;}
  .main-nav{
    min-height: 56px;
    max-height:60px;
    padding:4px 13px 0 10px;
  }
  .footer-nav{flex-direction:column;gap:20px;align-items:flex-start;}
  .footer-nav ul{flex-direction:column;gap:12px;}
  .testimonial-card{padding:16px 12px;}
  .cookie-btn{padding:7px 11px;}
  #cookie-banner{flex-direction:column;align-items: flex-start;gap:13px;padding: 16px 12px;}
}
@media (max-width: 480px) {
  html {font-size: 90%;}
  .hero{padding:19px 0 12px 0;}
  h1{font-size:1.2rem;}
  h2{font-size:1.05rem;}
  .section{padding:13px 0;margin-bottom:18px;}
  .testimonial-card{padding:8px 5px;}
  .service-card{padding:10px 7px 8px 12px;}
  .project-summary{padding-left:10px;padding-right:8px;}
  .blog-categories{padding:7px 6px;}
  #cookie-modal{padding:16px 5vw 11px 6vw;}
}

/* Hide mobile menu by default */
@media (min-width: 641px) {
  .mobile-menu, .mobile-menu-toggle {display:none !important;}
  .main-nav ul{display:flex !important;}
  .main-nav .cta-primary {display:inline-block !important;}
}