/* ---------------------------------------------------------------
    CSS RESET & NORMALIZATION
--------------------------------------------------------------- */
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 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
  line-height: 1.6;
  background: #1b232a;
  color: #F2F2F2;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-size: 16px;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: #FFB800;
  text-decoration: none;
  transition: color .2s;
}
a:hover, a:focus {
  color: #fff;
}
ull, ol {
  list-style: none;
}
h1, h2, h3, h4, h5, h6 {
  color: #F2F2F2;
  font-family: 'Raleway', Arial, Helvetica, sans-serif;
  line-height: 1.1;
  letter-spacing: 0.02em;
}
h1 {
  font-size: 2.4rem;
  font-weight: 900;
  margin-bottom: 20px;
}
h2 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 18px;
}
h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 12px;
}
strong {
  font-weight: 700;
}
p, li {
  font-size: 1rem;
  margin-bottom: 12px;
  color: #ECECEC;
}

/*
-------------------------------------
  BRAND COLOR PALETTE
-------------------------------------
*/
:root {
  --color-primary: #225577;
  --color-secondary: #F2F2F2;
  --color-dark: #232323;
  --color-mid: #343C41;
  --color-light: #F2F2F2;
  --color-accent: #FFB800;
  --color-metal: #B0BBC6;
  --color-shadow: rgba(40,48,57,.09);
  --color-border: #444F5A;
}

/*
-------------------------------------
  LAYOUT STRUCTURE
-------------------------------------
*/
.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.content-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

/*
-------------------------------------
  HEADER & NAVIGATION
-------------------------------------
*/
header {
  width: 100%;
  background: #212830;
  box-shadow: 0 4px 16px 0 rgba(20,24,28,0.13);
  position: sticky;
  top: 0;
  z-index: 20;
}
header .container {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  padding-bottom: 8px;
  gap: 16px;
}
header img {
  height: 48px;
  width: auto;
}
.main-nav {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: center;
  margin: 0 32px 0 32px;
}
.main-nav a {
  font-family: 'Raleway', Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: #F2F2F2;
  text-shadow: none;
  transition: color 0.2s;
  padding: 6px 2px;
  border-bottom: 2.5px solid transparent;
  position: relative;
}
.main-nav a:hover, .main-nav a:focus, .main-nav a.active {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.cta.primary {
  padding: 11px 32px;
  background: linear-gradient(90deg, #225577 0%, #355e7e 100%);
  color: #fff;
  font-family: 'Raleway', Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 1.06rem;
  border-radius: 32px;
  border: none;
  box-shadow: 1px 2px 15px 0 rgba(25,28,32,0.18);
  cursor: pointer;
  display: inline-block;
  text-align: center;
  letter-spacing: 0.04em;
  margin-left: 12px;
  transition: background 0.22s, box-shadow 0.22s;
  outline: none;
  border-bottom: 0;
}
.cta.primary:hover, .cta.primary:focus {
  background: var(--color-accent);
  color: #222;
  box-shadow: 1px 4px 20px 0 rgba(255,184,0,0.20);
}

.cta.secondary {
  padding: 11px 28px;
  background: transparent;
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
  font-family: 'Raleway', Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 1rem;
  border-radius: 30px;
  box-shadow: none;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  margin-top: 18px;
  transition: background 0.2s, color 0.2s, box-shadow 0.18s;
}
.cta.secondary:hover, .cta.secondary:focus {
  background: var(--color-accent);
  color: #222;
  box-shadow: 0 2px 13px 0 rgba(255,184,0,0.16);
}
/*
-------------------------------------
  MOBILE MENU
-------------------------------------
*/
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  outline: none;
  color: #FFB800;
  font-size: 2rem;
  margin-left: 14px;
  cursor: pointer;
  z-index: 31;
  transition: color 0.16s;
}
.mobile-menu-toggle:hover, .mobile-menu-toggle:focus {
  color: #fff;
}
.mobile-menu {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw; height: 100vh;
  background: rgba(27, 35, 42, 0.98);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(.6,.2,.3,1);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 0 0 0;
  opacity: 0;
  pointer-events: none;
}
.mobile-menu.open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: all;
}
.mobile-menu-close {
  background: none;
  border: none;
  color: #FFB800;
  font-size: 2.2rem;
  margin: 16px 0 0 18px;
  align-self: flex-start;
  cursor: pointer;
  z-index: 52;
  transition: color 0.16s;
}
.mobile-menu-close:hover, .mobile-menu-close:focus {
  color: #fff;
}
.mobile-nav {
  margin-top: 48px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
  padding-left: 32px;
}
.mobile-nav a {
  font-family: 'Raleway', Arial, Helvetica, sans-serif;
  font-size: 1.2rem;
  color: #F2F2F2;
  padding: 10px 0;
  border-bottom: 1.5px solid transparent;
  width: fit-content;
  transition: color 0.19s, border-color 0.19s;
}
.mobile-nav a:hover, .mobile-nav a:focus {
  color: #FFB800;
  border-color: #FFB800;
}

@media (max-width: 1024px) {
  .main-nav {
    gap: 12px;
    margin: 0 8px;
  }
  .container {
    padding: 0 10px;
  }
}
@media (max-width: 900px) {
  .main-nav {
    flex-direction: column;
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
    /* Hide main nav for mobile */
  }
  .cta.primary {
    margin-left: 0;
  }
  .mobile-menu-toggle {
    display: block;
  }
}
@media (max-width: 768px) {
  header img {
    height: 36px;
    width: auto;
  }
}

/*
-------------------------------------
  HERO SECTION
-------------------------------------
*/
.hero {
  background: linear-gradient(120deg, #252C32 50%, #1B232A 100%);
  color: #F2F2F2;
  min-height: 320px;
  padding-bottom: 60px;
  display: flex;
  align-items: center;
}
.hero .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
}
.hero .content-wrapper {
  gap: 16px;
  align-items: flex-start;
  padding-top: 34px;
  padding-bottom: 34px;
}
.hero h1 {
  font-size: 2.5rem;
  font-family: 'Raleway', Arial, Helvetica, sans-serif;
  font-weight: 900;
  text-shadow: 0 4px 16px #111c28cc;
  color: #fff;
  margin-bottom: 0;
}
.hero .subheadline {
  font-size: 1.2rem;
  color: #CED4DC;
  margin-bottom: 12px;
  max-width: 680px;
}

@media (max-width: 768px) {
  .hero {
    padding-bottom: 20px;
  }
  .hero h1 {
    font-size: 1.65rem;
  }
  .hero .subheadline {
    font-size: 1rem;
  }
}

/*
-------------------------------------
  FLEXBOX SPACING LAYOUTS
-------------------------------------
*/
.section {
  margin-bottom: 60px;
  padding: 40px 20px;
  background: none;
}
.feature-grid,
.service-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: flex-start;
}
.feature-grid li, .service-list li {
  background: #232931;
  border-radius: 18px;
  box-shadow: 0 6px 26px 0 var(--color-shadow), 0 2px 1px 0 #212025;
  padding: 32px 28px 32px 28px;
  min-width: 260px;
  flex: 1 1 280px;
  margin-bottom: 20px;
  border-left: 5px solid var(--color-metal);
  transition: box-shadow 0.18s, border-color 0.18s;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  position: relative;
}
.feature-grid li img {
  width: 48px;
  height: 48px;
  margin-bottom: 10px;
  filter: grayscale(30%) brightness(1.1) drop-shadow(0 2px 6px #1b232a55);
}
.feature-grid li h3 {
  color: #FFB800;
  font-size: 1.12rem;
  letter-spacing: 0.02em;
}
.feature-grid li p, .service-list li p {
  color: #D5DBE5;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-size: 0.98rem;
}
.feature-grid li:hover, .feature-grid li:focus, .service-list li:hover, .service-list li:focus {
  box-shadow: 0 12px 40px 0 #11182169;
  border-left: 5px solid #FFB800;
}

.service-list li strong {
  color: var(--color-accent);
  font-family: 'Raleway', Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 1.09rem;
}
.service-list li span {
  display: block;
  color: #CED4DC;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 6px;
}

@media (max-width: 1080px) {
  .feature-grid,
  .service-list {
    gap: 16px;
  }
  .feature-grid li,
  .service-list li {
    padding: 22px 13px 22px 18px;
    min-width: 185px;
  }
}
@media (max-width: 768px) {
  .feature-grid, .service-list {
    flex-direction: column;
    gap: 20px;
  }
  .feature-grid li,.service-list li {
    min-width: 0;
    width: 100%;
  }
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.card {
  margin-bottom: 20px;
  background: #232931;
  border-radius: 16px;
  box-shadow: 0 8px 40px 0 var(--color-shadow);
  padding: 32px 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.19s;
}
.card:hover, .card:focus {
  box-shadow: 0 12px 50px 0 #11182191;
}

.content-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  align-items: stretch;
}

.text-image-section {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .text-image-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
  background: #F2F2F2;
  color: #232931;
  border-radius: 14px;
  box-shadow: 0 2px 24px 0 #11182115;
  margin-bottom: 20px;
  border-left: 6px solid #225577;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-size: 1.05rem;
}
.testimonial-card p {
  color: #1B232A;
  font-style: italic;
  font-size: 1.1rem;
  margin-bottom: 6px;
  line-height: 1.5;
}
.testimonial-card span {
  color: #3b4956;
  font-size: .97rem;
  font-style: normal;
  font-weight: 700;
  align-self: flex-end;
  margin-top: 5px;
}

@media (max-width:600px){
  .testimonial-card {
    padding: 16px 11px 18px 16px;
  }
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

.text-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 1rem;
  color: #D5DBE5;
}

/*
-------------------------------------
  CONTACT PAGE
-------------------------------------
*/
.contact .text-section img {
  vertical-align: middle;
  width: 19px;
  height: 19px;
  margin-right: 4px;
  margin-left: 2px;
  filter: grayscale(78%) brightness(1.3);
}
.contact .text-section p {
  font-size: 1.02rem;
}

/*
-------------------------------------
  FOOTER
-------------------------------------
*/
footer {
  background: #191F25;
  padding: 35px 0 0 0;
  box-shadow: 0 -2px 12px 0 rgba(25,25,34,0.13);
  color: #B0BBC6;
}
footer .container {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
footer .content-wrapper {
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  margin-bottom: 7px;
}
.footer-nav a {
  color: #B0BBC6;
  font-size: 1rem;
  font-family: 'Raleway', Arial, Helvetica, sans-serif;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.21s;
}
.footer-nav a:hover, .footer-nav a:focus {
  color: #FFB800;
}
footer p {
  color: #B0BBC6;
  font-size: .97rem;
}

/*
-------------------------------------
  GENERAL SPACING & UTILS
-------------------------------------
*/
.section:not(:last-child) {
  margin-bottom: 60px;
}
@media (max-width: 600px) {
  .section,
  .hero {
    padding: 20px 0 !important;
  }
}

/*
-------------------------------------
  FORMS (if any forms added later)
-------------------------------------
*/
input, textarea, select {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-size: 1rem;
  padding: 11px 14px;
  margin-bottom: 16px;
  background: #242d34;
  color: #F2F2F2;
  border: 1.5px solid #444F5A;
  border-radius: 7px;
  outline: none;
  transition: border 0.16s, background 0.14s;
}
input:focus, textarea:focus, select:focus {
  border: 1.5px solid #FFB800;
  background: #252C32;
}

button, .cta {
  cursor: pointer;
  font-family: 'Raleway', Arial, Helvetica, sans-serif;
  font-weight: 700;
  transition: background 0.18s, color 0.18s, box-shadow 0.15s;
}

/*
-------------------------------------
  INTERACTIVE ELEMENTS / HOVER EFFECTS
-------------------------------------
*/
.card, .feature-grid li, .service-list li, .testimonial-card {
  transition: box-shadow 0.21s, border-color 0.21s, background 0.2s;
}
.card:hover, .feature-grid li:hover, .service-list li:hover {
  box-shadow: 0 14px 55px 0 #0d19252b;
}
.cta,
button,
.mobile-menu-toggle,
.mobile-menu-close,
.footer-nav a {
  transition: background .17s, color .14s, box-shadow .18s, border .16s;
}

/*
-------------------------------------
  TYPOGRAPHY HIERARCHY
-------------------------------------
*/
@media (min-width: 1200px) {
  h1 { font-size: 3.2rem; }
  h2 { font-size: 2.3rem; }
  h3 { font-size: 1.22rem; }
}
@media (max-width: 600px) {
  h1 { font-size: 1.45rem; }
  h2 { font-size: 1.18rem; }
  h3 { font-size: 1.01rem; }
}

/*
-------------------------------------
  INDUSTRIAL MODERN EFFECTS
-------------------------------------
*/
.section, .feature-grid li, .service-list li, .card, .testimonial-card {
  box-shadow: 0 4px 28px 0 rgba(36,46,58,.09), 0 2px 1px 0 #242A2F;
  border-bottom: 2.5px solid #444F5A;
}
.feature-grid li, .service-list li, .card {
  border-top: 2.5px solid #B0BBC6;
}
h1, h2, h3 {
  text-transform: none;
  letter-spacing: 0.028em;
}

hr {
  border: 0;
  border-top: 1px solid #444F5A;
  margin: 28px 0;
}

/*
----------------------------------------------------
  COOKIE CONSENT BANNER AND COOKIE SETTINGS MODAL
---------------------------------------------------- */
.cookie-banner {
  position: fixed;
  left: 0; bottom: 0;
  width: 100vw;
  background: #20262C;
  color: #F2F2F2;
  box-shadow: 0 -2px 22px 0 #11182166;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 22px 16px 18px 16px;
  z-index: 1000;
  gap: 24px;
  animation: cookie-slidein .7s ease;
}
@keyframes cookie-slidein {
  from { transform: translateY(80px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.cookie-banner-message {
  font-size: 1.06rem;
  flex:1 1 80%;
}
.cookie-banner-actions {
  display: flex;
  flex-direction: row;
  gap: 13px;
}
.cookie-btn {
  padding: 9px 22px;
  border-radius: 30px;
  font-family: 'Raleway', Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  margin-left:0;
  cursor:pointer;
  outline: none;
  border: none;
  box-shadow: none;
  background: #303843;
  color: #FFB800;
  border: 2px solid #FFB800;
  transition: background 0.15s, color 0.16s, box-shadow 0.14s;
}
.cookie-btn.settings {
  background: transparent;
  color: #FFB800;
  border: 2px solid #FFB800;
}
.cookie-btn.accept {
  background: #FFB800;
  color: #232323;
  border: 2px solid #FFB800;
}
.cookie-btn.reject {
  background: #232931;
  color: #FFB800;
  border: 2px solid #FFB800;
}
.cookie-btn:hover, .cookie-btn:focus {
  background: #FFE9B1;
  color: #232323;
}
.cookie-btn.settings:hover, .cookie-btn.settings:focus {
  background: #FFB800;
  color: #232323;
}
.cookie-btn.accept:hover, .cookie-btn.accept:focus {
  background: #225577;
  color: #fff;
  border-color: #225577;
}
@media (max-width: 700px) {
  .cookie-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 17px 6px 12px 11px;
  }
  .cookie-banner-actions {
    gap:9px;
  }
}

/* Cookie Preferences Modal */
.cookie-modal {
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  background: rgba(27, 35, 42, 0.88);
  z-index: 2002;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s;
}
.cookie-modal.open {
  opacity: 1;
  pointer-events: auto;
}
.cookie-modal-content {
  background: #212830;
  color: #F2F2F2;
  border-radius: 18px;
  padding: 36px 30px 28px 30px;
  min-width: 315px;
  max-width: 98vw;
  min-height: 260px;
  box-shadow: 0 6px 60px 0 rgba(44,54,60,.17);
  display: flex;
  flex-direction: column;
  gap: 22px;
  font-size: 1rem;
}
.cookie-modal h2 {
  color: #FFB800;
  font-size: 1.17rem;
  margin-bottom: 10px;
}
.cookie-category {
  margin-bottom: 13px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}
.cookie-category label {
  font-size:1rem;
  color: #F2F2F2;
  font-weight: 600;
  margin-right: 8px;
}
.cookie-switch {
  width: 46px;
  height: 24px;
  background: #283040;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  margin-right: 4px;
}
.cookie-switch input[type="checkbox"] {
  opacity: 0;
  width: 0; height: 0;
  position: absolute;
}
.cookie-slider {
  position: absolute;
  left: 2px; top: 2px;
  background: #FFB800;
  width: 20px; height: 20px;
  border-radius: 50%;
  transition: left 0.19s, background 0.16s;
}
.cookie-switch input[type="checkbox"]:checked + .cookie-slider {
  left: 24px;
  background: #225577;
}
.cookie-modal-actions {
  display: flex;
  flex-direction: row;
  gap: 13px;
  margin-top: 14px;
}
.cookie-modal-close {
  background: none;
  color: #FFB800;
  border: none;
  font-size: 1.4rem;
  position: absolute;
  top: 12px; right: 12px;
  cursor: pointer;
}
@media (max-width: 600px){
  .cookie-modal-content {
    padding: 18px 8px 16px 12px;
  }
}

/*
-------------------------------------
  MEDIA QUERIES: RESPONSIVE DESIGN
-------------------------------------
*/
@media (max-width: 600px){
  .container {
    padding: 0 5px;
  }
  .feature-grid li, .service-list li {
    padding: 14px 7px 16px 10px;
  }
}

/*
-------------------------------------
  INDUSTRIAL MODERN FLAIR & DETAILS
-------------------------------------
*/
.feature-grid li, .service-list li, .card, .testimonial-card {
  border: 1.5px solid #2e3440;
  box-shadow: 0 2px 22px 0 #22303e23, 0 1.5px 0px 0 #232931;
}
.card:before, .feature-grid li:before, .service-list li:before {
  content: '';
  display: block;
  width: 28px;
  height: 3px;
  border-radius: 1.5px;
  background: linear-gradient(90deg,#B0BBC6 0%, #5c707c 100%);
  margin-bottom: 9px;
}

/* metallic accent effect for CTA */
.cta.primary {
  box-shadow: 0 4px 27px 0 #FFB80033, 0 1px 1px 0 #ffffff13;
  border: 0;
}
.cta.primary:after {
  content: '';
  display: inline-block;
  margin-left: 9px;
  vertical-align: middle;
  width: 12px; height: 12px;
  border-radius: 100%;
  background: linear-gradient(120deg,#FFB800 40%,#fff6d5 100%);
  box-shadow: 0 0 6px #fffbe499;
  opacity: 0.7;
}

/*
-------------------------------------
  FONT IMPORTS (for real projects import via link, here as fallback)
-------------------------------------
*/
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), url('https://fonts.googleapis.com/css?family=Raleway:400,700,800,900&display=swap');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap');
}

/*
-------------------------------------
  PRINT STYLES (basic)
-------------------------------------
*/
@media print{
  header,footer,.mobile-menu,.cookie-banner,.cookie-modal {display:none !important;}
  main {background:#fff; color:#222;}
}

/* END OF INDUSTRIAL_MODERN CSS */