:root {
    --navy: #0b1f36;
    --navy-mid: #0f2a47;
    --navy-light: #163a63;
    --gold: #e0201a;        /* accent red */
    --gold-light: #b51c16; /* darker red keeps white button text readable on hover */
    --cream: #f3f4f6;       /* page background */
    --white: #ffffff;       /* cards / surfaces */
    --gray: #4b5563;        /* body text */
    --border: rgba(11, 31, 54, 0.12); /* subtle industrial border */
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f3f4f6;
    color: #0b1f36;
    overflow-x: hidden;
  }

  /* NAV */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 4rem;
    background: rgba(10, 22, 40, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
  }

  .logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
  }

  .logo-main {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin-top: -18px;
    letter-spacing: 0.05em;
  }

  .logo-sub {
    font-size: 0.62rem;
    color: rgba(255,255,255,0.65);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-top: -18px;
    margin-left: calc(60px + 0.65rem);
    display: block;
  }

  .logo-row{
    display:flex;
    align-items:center;
    gap:0.65rem;
  }
  .logo-icon{
    width:60px;
    height:60px;
    object-fit:contain;
    border-radius:10px;
    margin-top: 4px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  }

  /* Floating Chat Buttons */
  .chat-fab{
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 2200;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .chat-fab a{
    display:flex;
    align-items:center;
    justify-content:center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    text-decoration:none;
    border: none;
    background: #ffffff;
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 45px rgba(0,0,0,0.35);
    transition: transform .2s ease, border-color .2s ease;
  }
  .chat-fab a:hover{
    transform: translateY(-2px);
    border-color: var(--gold);
  }
  .chat-fab a.wa{ background:#25D366; }

  .chat-fab .fab-icon{
    width: 34px;
    height: 34px;
    display:block;
    object-fit:contain;
    filter: none;
  }

  .chat-fab svg{
    width: 24px;
    height: 24px;
    fill: #fff;
    stroke: none;
  }
  .chat-fab .wa{ background: #25D366; border-color: rgba(37,211,102,0.45); }
  .chat-fab .wa svg{ fill: #fff; }




  .nav-links {
    display: flex;
    gap: 2.5rem;
    list-style: none;
  }

  .nav-links a {
    color: rgba(255,255,255,0.80);
    text-decoration: none;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 0.3s;
  }

  .nav-links a:hover { color: #ffffff; }

  .nav-cta {
    background: var(--gold);
    color: var(--navy);
    border: none;
    padding: 0.6rem 1.4rem;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s;
    text-decoration: none;
  }

  .nav-cta:hover { background: var(--gold-light); }

  /* HERO */
  .hero {
    min-height: 92vh;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 0 4rem;
    padding-top: 4.25rem;
  }

  .hero-bg {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 60% 80% at 70% 40%, rgba(11,31,54,0.08) 0%, transparent 70%),
      linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
  }

  .hero-grid{
    position:absolute;
    inset:0;
    background-image:
      linear-gradient(rgba(11,31,54,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(11,31,54,0.05) 1px, transparent 1px);
    background-size: 64px 64px;
  }

  .hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    animation: fadeUp 1s ease both;
  }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .hero-tag {
    display: inline-block;
    border: 1px solid var(--gold);
    color: var(--gold);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 0.4rem 1rem;
    margin-bottom: 2.75rem;
  }

  .hero h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(2.8rem, 5vw, 5rem);
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--navy);
  }

  .hero h1 em {
    color: var(--gold);
    font-style: normal;
  }

  .hero-sub {
    font-size: 1rem;
    color: #374151;
    line-height: 1.7;
    max-width: 520px;
    margin-bottom: 2.5rem;
  }

  .hero-btns {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .btn-primary {
    background: var(--gold);
    color: var(--navy);
    padding: 0.9rem 2rem;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s;
    display: inline-block;
  }

  .btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); }

  .btn-outline {
    background: transparent;
  color: #111111;
    padding: 0.9rem 2rem;
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid rgba(245,240,232,0.3);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s;
    display: inline-block;
  border-color: #111111;
}

  .btn-outline:hover { border-color: var(--gold); color: var(--gold); }


  /* HERO MEDIA ROTATOR */
  .hero-media{
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0;
  }
  .hero-media-card{
    width: min(680px, 100%);
  background: var(--white);
    border: 1px solid var(--border);
    border-radius: 18px;
  padding: 14px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(11,31,54,0.10);
  }
  .hero-rotator{  width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: #eef1f5;
  border-radius: 14px;
  border: 1px solid rgba(11,31,54,0.12);
    opacity: 1;
    transition: opacity 220ms ease;
  display: block;
  height: 100%;
}
  .hero-rotator.fade-out{ opacity: 0; }

  .hero-stats{
    position: absolute;
    right: clamp(16px, 5vw, 64px);
    bottom: 28px;
    display: flex;
    gap: 1.6rem;
    align-items: flex-end;
    justify-content: flex-end;
    z-index: 3;
  }

  .stat { text-align: left; }

  .stat-num {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.0rem;
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
  }

  .stat-label {
    font-size: 0.75rem;
    color: #6b7280;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 0.3rem;
  }

  /* VISION */
  #vision .feature-title{ margin-top: 0; }

  /* SECTIONS */
  section {
    padding: 6rem 4rem;
  }

  .section-tag {
    font-size: 0.75rem;
    color: var(--gold);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 1rem;
  }

  .section-title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(2rem, 3.5vw, 3.2rem);
    font-weight: 600;
    color: var(--navy);
    line-height: 1.15;
    margin-bottom: 1.5rem;
  }

  .divider {
    width: 60px;
    height: 3px;
    background: var(--gold);
    margin-bottom: 2rem;
  }

  /* ABOUT */
  .about {
    background: var(--white);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: center;
  }

  .about-text p {
    color: #374151;
    line-height: 1.8;
    font-size: 0.95rem;
    margin-bottom: 1.2rem;
  }

  .about-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }

  .feature-card {
    background: var(--white);
    border: 1px solid var(--border);
    padding: 1.5rem;
    transition: border-color 0.3s, transform 0.3s;
  }

  .feature-card:hover {
    border-color: var(--gold);
    transform: translateY(-4px);
  }

  .feature-icon {
    font-size: 1.5rem;
    margin-bottom: 0.8rem;
  }

  .feature-title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 0.5rem;
  }

  .feature-desc {
    font-size: 0.85rem;
    color: #4b5563;
    line-height: 1.6;
  }

  /* PRODUCTS */
  .products-section {  background: #f7f8fa;}

  .products-header {
    text-align: center;
    margin-bottom: 4rem;
  }

  .products-header .divider {
    margin: 0 auto 2rem;
  }

  /* Category Tabs */
  .cat-tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 3rem;
    border: 1px solid var(--border);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

  .cat-tab {
    padding: 0.8rem 1.8rem;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray);
    background: transparent;
    border: none;
    border-right: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.3s;
    font-family: Arial, Helvetica, sans-serif;
  }

  .cat-tab:last-child { border-right: none; }

  .cat-tab.active, .cat-tab:hover {
    background: var(--gold);
    color: var(--white);
  }

  /* Product Grid */
  .product-category { display: none; }
  .product-category.active { display: block; }

  .products-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    justify-content: center;
    max-width: 1320px;
    margin: 0 auto;
  }
  @media (min-width: 720px){
    .products-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 1120px){
    .products-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  .product-card {
    background: var(--white);
    border: 1px solid var(--border);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s;
    position: relative;
  }

  .product-card:hover {
    border-color: var(--gold);
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  }

  .product-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    background: #0d1a2e;
    display: block;
    transition: transform 0.5s;
  }

  .product-card:hover .product-img {
    transform: scale(1.04);
  }

  .product-img-wrap {
    overflow: hidden;
    height: 220px;
  }

  .product-info {
    padding: 1.5rem;
  }

  .product-cat-label {
    font-size: 0.65rem;
    color: var(--gold);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
  }

  .product-name {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 0.7rem;
    line-height: 1.3;
  }

  .product-desc {
    font-size: 0.85rem;
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 1rem;
  }

  .product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .tag {
    background: rgba(224, 32, 26, 0.06);
    border: 1px solid rgba(224, 32, 26, 0.22);
    color: var(--gold);
    font-size: 0.65rem;
    padding: 0.25rem 0.6rem;
    letter-spacing: 0.05em;
  }


  .product-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    margin-top: 1rem;
  }

  .product-link {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--navy);
    border-bottom: 1px solid transparent;
    transition: color 0.25s ease, border-color 0.25s ease;
  }

  .product-link:hover {
    color: var(--gold);
    border-color: var(--gold);
  }


  /* PARTNERS */
  .partners-section {
    background: var(--white);
    text-align: center;
  }

  .partners-grid {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 3rem;
  }

  .partner-chip {
    border: 1px solid var(--border);
    padding: 0.8rem 2rem;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    color: var(--gray);
    transition: all 0.3s;
    letter-spacing: 0.05em;
  }

  .partner-chip:hover {
    border-color: var(--gold);
    color: var(--gold);
  }


  .partner-logo{
    padding: 0.9rem 1.4rem;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width: 180px;
    background: #ffffff;
  }
  .partner-logo img{
    height: 46px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    display:block;
  }


  /* CONTACT */
  .contact-section {  background: var(--cream);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: start;
  }

  .contact-info p {  color: inherit;
    font-size: 0.9rem;
    line-height: 1.8;
    margin-bottom: 0.5rem;
  }

  .contact-info strong {  color: inherit;}

  .contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .contact-form input,
  .contact-form textarea {
    background: var(--white);
    border: 1px solid var(--border);
    color: var(--navy);
    padding: 0.9rem 1.2rem;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.3s;
    resize: none;
  }

  .contact-form input:focus,
  .contact-form textarea:focus { border-color: var(--gold); }

  .contact-form input::placeholder,
  .contact-form textarea::placeholder { color: #596574; opacity: 1; }

  /* FOOTER */
  footer {
    background: var(--navy);
    padding: 3rem 4rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  footer .logo-main { font-size: 1.1rem; }

  .footer-copy {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.70);
  }

  /* SCROLL ANIMATIONS */
  .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.7s ease;
  }
  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  @media (max-width: 900px) {
    nav { padding: 1rem 1.5rem; }
    .nav-links { display: none; }
    section { padding: 4rem 1.5rem; }
    .hero { padding: 0 1.5rem; grid-template-columns: 1fr; gap: 2rem; }
    .hero-stats { right: 1.5rem; bottom: 2rem; gap: 1.5rem; }
    .about { grid-template-columns: 1fr; gap: 3rem; }
    .contact-section { grid-template-columns: 1fr; gap: 3rem; }
    .modal-grid { grid-template-columns: 1fr; }
    footer { flex-direction: column; gap: 1rem; text-align: center; }
  }

  /* Contact copy follows its surface: navy on the homepage, light in dark panels. */
  .contact-section { color: var(--navy); }

  /* HEADLINES */
  h1, h2, h3, h4, .section-title, .product-title, .modal-title, .feature-title{ color: var(--navy); }
  strong{ color: var(--navy); }



  /* Enforce navy headlines */
  h1, h2, h3, h4, .section-title, .products-header h2, .contact-section h2, .modal-title { color: var(--navy); }


/* Injected language switcher */
.nav-right{display:flex;align-items:center;gap:0.9rem;}
.lang-switcher{display:flex;align-items:center;gap:0.25rem;padding:0.25rem;border:1px solid rgba(255,255,255,0.16);border-radius:999px;background:rgba(255,255,255,0.06);}
.lang-btn{border:none;background:transparent;color:rgba(255,255,255,0.85);font-size:0.72rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:0.5rem 0.8rem;border-radius:999px;cursor:pointer;transition:all 0.25s ease;}
.lang-btn.active,.lang-btn:hover{background:#ffffff;color:var(--navy);}
@media (max-width: 900px){
  .nav-right{width:100%;justify-content:flex-end;}
  .lang-switcher{margin-left:auto;}
}


/* MOBILE-FIRST NAV + RESPONSIVE IMPROVEMENTS */
.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.06);
  border-radius:12px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
}
.nav-toggle span{
  display:block;
  width:18px;
  height:2px;
  background:#fff;
  border-radius:999px;
  transition:transform .25s ease, opacity .25s ease;
}
nav.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
nav.nav-open .nav-toggle span:nth-child(2){opacity:0;}
nav.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width: 900px){
  nav{
    flex-wrap:wrap;
    gap:0.9rem;
    padding:0.9rem 1rem !important;
  }
  .nav-toggle{display:inline-flex; margin-left:auto;}
  .logo-row{gap:0.55rem;}
  .logo-icon{width:48px;height:48px;border-radius:8px;}
  .logo-main{font-size:0.96rem;margin-top:-8px;}
  .logo-sub{font-size:0.54rem;margin-top:-8px;margin-left:calc(48px + 0.55rem);letter-spacing:0.11em;max-width:160px;}

  .nav-links,
  .nav-right{
    display:none;
    width:100%;
  }
  nav.nav-open .nav-links{
    display:flex !important;
    flex-direction:column;
    gap:0.25rem;
    padding:0.5rem;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:16px;
    margin-top:0.15rem;
  }
  nav.nav-open .nav-links li{list-style:none;}
  nav.nav-open .nav-links a{
    display:block;
    font-size:0.78rem;
    padding:0.9rem 0.95rem;
    border-radius:12px;
  }
  nav.nav-open .nav-links a:hover{background:rgba(255,255,255,0.08);}

  nav.nav-open .nav-right{
    display:flex !important;
    flex-direction:column;
    align-items:stretch;
    gap:0.7rem;
    padding-top:0.2rem;
  }
  nav.nav-open .lang-switcher{
    width:100%;
    justify-content:space-between;
    order:2;
  }
  nav.nav-open .lang-btn{flex:1;text-align:center;padding:0.75rem 0.5rem;}
  nav.nav-open .nav-cta{
    width:100%;
    text-align:center;
    padding:0.9rem 1rem;
    order:1;
  }

  section{padding:4.25rem 1rem !important;}
  .hero{
    min-height:auto;
    padding:5.75rem 1rem 2.25rem !important;
    grid-template-columns:1fr !important;
    gap:1.5rem !important;
  }
  .hero-content{max-width:none;}
  .hero h1{font-size:clamp(2rem, 10vw, 3rem);line-height:1.05;margin-bottom:1rem;}
  .hero-sub{font-size:0.95rem;line-height:1.65;max-width:none;margin-bottom:1.4rem;}
  .hero-btns{flex-direction:column;align-items:stretch;}
  .hero-btns a{width:100%;text-align:center;}
  .hero-media{order:2;}
  .hero-media-card{padding:10px;border-radius:16px;}
  .hero-rotator{aspect-ratio:4 / 3;}
  .hero-stats{
    position:static !important;
    right:auto; bottom:auto;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0.85rem;
    width:100%;
    margin-top:0.4rem;
  }
  .stat{
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    padding:0.85rem;
    text-align:left;
  }
  .stat-num{font-size:1.45rem;}
  .stat-label{font-size:0.62rem;letter-spacing:0.08em;}

  .about,
  .contact-section{grid-template-columns:1fr !important;gap:2rem !important;}
  .about-features{grid-template-columns:1fr !important;}
  #vision .about-features .feature-card:last-child{grid-column:auto !important;}
  .feature-card,
  .product-info,
  .modal-body{padding:1.15rem;}

  .products-header{margin-bottom:2.2rem;}
  .cat-tabs{
    width:100%;
    overflow-x:auto;
    justify-content:flex-start;
    margin-bottom:1.8rem;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .cat-tabs::-webkit-scrollbar{display:none;}
  .cat-tab{flex:0 0 auto;white-space:nowrap;padding:0.8rem 1rem;}
  .products-grid{gap:1rem;}
  .product-img,
  .product-img-wrap{height:210px;}

  .partners-grid{gap:1rem;margin-top:2rem;}
  .partner-logo{min-width:calc(50% - 0.5rem);padding:0.8rem 1rem;}
  .partner-logo img{max-width:140px;height:40px;}

  .contact-form input,
  .contact-form textarea{font-size:16px;}

  .modal-overlay{padding:1rem;}
  .modal{border-radius:18px;overflow:hidden;}
  .modal-img{height:220px;}
  .modal-grid{grid-template-columns:1fr !important;gap:1.2rem;}
  .modal-title{font-size:1.5rem;line-height:1.2; padding-right:2.2rem;}

  footer{padding:2rem 1rem !important;align-items:flex-start;}
  footer .logo-sub{margin-left:calc(48px + 0.55rem);}

  .chat-fab{right:12px;bottom:12px;gap:8px;}
  .chat-fab a{width:54px;height:54px;border-radius:14px;}
  .chat-fab .fab-icon{width:28px;height:28px;}
}

@media (max-width: 640px){
  .hero-stats{grid-template-columns:1fr;}
  .partner-logo{min-width:100%;}
  .section-title{font-size:clamp(1.7rem, 8vw, 2.25rem);}
  .modal-close{top:0.7rem;right:0.7rem;}
}



/* MOBILE LOGO ALIGNMENT FIX */
@media (max-width:900px){

.logo{
  align-items:flex-start;
}

.logo-main{
  text-align:left;
}

.logo-sub{
  text-align:left;
  margin-left:calc(48px + 0.55rem);
  white-space:nowrap;
}

}