*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:Arial,Helvetica,sans-serif;background:#f4f4f4;color:#222;}
.container{width:90%;max-width:1200px;margin:auto;}
header{
background:#fff;
padding:12px 0;   /* reduced from 20px */
border-bottom:1px solid #e5e5e5;
position:sticky;
top:0;
z-index:1000;
}
.nav{display:flex;justify-content:space-between;align-items:center;}
.logo{height:55px;}
nav ul{list-style:none;margin:0;padding:0;}
nav ul li{position:relative;}
nav a{text-decoration:none;color:#222;font-weight:600;}

/* Desktop-only nav styles */
@media(min-width:901px){
  nav ul{display:flex;gap:30px;}
  nav ul li ul{
    position:absolute;top:100%;left:0;background:#fff;
    display:none;flex-direction:column;padding:10px 0;
    border:1px solid #ddd;min-width:220px;z-index:999;
    box-shadow:0 8px 24px rgba(0,0,0,0.1);border-radius:8px;}
  nav ul li:hover > ul{display:flex;}
  nav ul li ul li{margin-bottom:0;}
  nav ul li ul li a{display:block;padding:10px 18px;}
  nav ul li ul li a:hover{color:#C00000;background:#fafafa;}
}

.hero-slider{position:relative;height:75vh;overflow:hidden;}
.slide{position:absolute;width:100%;height:100%;
background-size:cover;background-position:center;
opacity:0;transition:opacity 1s ease;}
.slide.active{opacity:1;}
.overlay{background:rgba(0,0,0,0.6);
height:100%;display:flex;align-items:center;color:#fff;}
.hero-content{max-width:800px;}
.hero-content h1{font-size:42px;margin-bottom:20px;}
.hero-content p{font-size:18px;}
.slide-btn{display:inline-block;margin-top:20px;
padding:12px 28px;background:#cc0000;color:#fff;
text-decoration:none;border-radius:4px;}

.section{padding:80px 0;background:#fff;}
.section-title{text-align:center;margin-bottom:40px;color:#cc0000;}

.clients{background:#fff;padding:40px 0;overflow:hidden;}
.client-track{display:flex;gap:40px;animation:scroll 20s linear infinite;}
.client-track img{height:60px;}
@keyframes scroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

.testimonials{background:#f9f9f9;padding:80px 0;}
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.testimonial{background:#fff;padding:30px;border-left:4px solid #cc0000;}

.spec-table{width:100%;border-collapse:collapse;margin-top:20px;}
.spec-table th,.spec-table td{border:1px solid #ddd;padding:10px;text-align:left;}

footer{background:#111;color:#fff;padding:20px 0;text-align:center;}
@media(max-width:900px){
  .testimonial-grid{grid-template-columns:1fr;}

  /* ── Hamburger button ── */
  .nav-toggle{
    display:flex !important;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:42px;
    height:42px;
    background:rgba(192,0,0,0.12);
    border:1.5px solid rgba(192,0,0,0.4);
    border-radius:9px;
    cursor:pointer;
    padding:9px;
    flex-shrink:0;
    z-index:1100;
  }
  .nav-toggle span{
    display:block;
    height:2px;
    width:100%;
    background:#C00000;
    border-radius:2px;
    transition:transform 0.3s ease, opacity 0.2s ease;
    transform-origin:center;
  }
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;transform:scaleX(0);}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  /* ── Hide nav by default ── */
  header nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#fff;
    border-top:2px solid #C00000;
    border-bottom:1px solid #eee;
    box-shadow:0 10px 32px rgba(0,0,0,0.12);
    z-index:1000;
    max-height:75vh;
    overflow-y:auto;
  }
  header nav.open{display:block;}

  /* ── Nav list ── */
  header nav ul{
    flex-direction:column !important;
    gap:0 !important;
    padding:0 !important;
    margin:0 !important;
  }

  /* ── Top-level items ── */
  header nav > ul > li{
    border-bottom:1px solid #f0f0f0;
    position:relative;
  }
  header nav > ul > li:last-child{border-bottom:none;}

  header nav > ul > li > a{
    display:block;
    padding:14px 20px;
    color:#222;
    font-size:14px;
    font-weight:600;
    /* leave room for arrow button */
    padding-right:52px;
  }
  header nav > ul > li > a:hover{
    background:#fafafa;
    color:#C00000;
  }

  /* ── Sub-menus hidden by default ── */
  header nav ul ul{
    display:none !important;
    position:static !important;
    border:none !important;
    box-shadow:none !important;
    background:#f8f8f8 !important;
    padding:4px 0 10px !important;
    min-width:unset !important;
    flex-direction:column !important;
  }
  header nav ul ul.sub-open{display:flex !important;}

  header nav ul ul li{margin-bottom:0 !important;}
  header nav ul ul li a{
    padding:10px 20px 10px 32px !important;
    color:#555 !important;
    font-size:13px !important;
    display:block !important;
  }
  header nav ul ul li a::before{
    content:'— ';
    color:#C00000;
  }
  header nav ul ul li a:hover{color:#C00000 !important;}

  /* ── Arrow expand button ── */
  .nav-arrow{
    display:flex !important;
    position:absolute;
    right:0;
    top:0;
    height:48px;
    width:48px;
    background:none;
    border:none;
    color:#C00000;
    font-size:20px;
    cursor:pointer;
    align-items:center;
    justify-content:center;
    transition:transform 0.2s;
    padding:0;
  }
  .nav-arrow.sub-open{transform:rotate(90deg);}
}

/* ── Desktop: keep nav-arrow hidden ── */
@media(min-width:901px){
  .nav-toggle{display:none !important;}
  .nav-arrow{display:none !important;}
  header nav{display:block !important;}
}

/* Animated Data Line Background */

.ai-bg {
    position: relative;
    overflow: hidden;
    background: #0F1E2E;
}

.ai-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
    0% {
        background-position: 0 0, 0 0;
    }
    100% {
        background-position: 60px 60px, 60px 60px;
    }
}

/* Keep content above animation */
.ai-bg .container {
    position: relative;
    z-index: 2;
}

/* DC-DC Animated Diagram */

.diagram-section {
    background:#ffffff;
    padding:110px 0;
}

.dc-diagram {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-top:60px;
    flex-wrap:wrap;
}

.block {
    background:#0F1E2E;
    color:#fff;
    padding:25px 35px;
    border-radius:6px;
    position:relative;
    font-weight:600;
}

.line {
    flex:1;
    height:4px;
    background:linear-gradient(90deg,#C00000 0%, #ff4d4d 50%, #C00000 100%);
    background-size:200% 100%;
    animation: flow 2s linear infinite;
}

@keyframes flow {
    0% { background-position:0% 0; }
    100% { background-position:200% 0; }
}

@media(max-width:900px){
.dc-diagram{
flex-direction:column;
}
.line{
width:4px;
height:40px;
}
}


/* STRESS MARGIN CHART FIXED */
.margin-chart{
position:relative;
height:280px;
display:flex;
align-items:flex-end;
justify-content:center;
gap:120px;
margin:50px 0;
}

/* Rated 100% Line */
.rated-line{
position:absolute;
top:0;
left:0;
width:100%;
height:2px;
background:#00c6ff;
box-shadow:0 0 10px rgba(0,198,255,0.8);
}

/* Wrapper */
.margin-wrapper{
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-end;
height:100%;
}

/* Bars (fixed pixel heights instead of %) */
.margin-bar{
width:90px;
border-radius:8px 8px 0 0;
transition:all 1s ease;
}

/* BEFORE */
.margin-bar.before{
height:260px; /* 95% approx */
background:linear-gradient(to top,#ff4d4d,#ff8080);
box-shadow:0 0 20px rgba(255,0,0,0.6);
}

/* AFTER */
.margin-bar.after{
height:190px; /* 70% approx */
background:linear-gradient(to top,#0072ff,#00c6ff);
box-shadow:0 0 20px rgba(0,114,255,0.6);
}

.label{
margin-top:12px;
font-weight:600;
color:#fff;
}

.bar-title{
margin-top:6px;
font-size:13px;
color:#cfd8e3;
}


.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.tech-card {
  background:#ffffff;
  padding:35px;
  border-radius:14px;
  border-top:4px solid #007BFF;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.tech-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}


.news-card {
    position: relative;
}

.news-content {
    position: relative;
    z-index: 2;
}

.news-card img {
    position: relative;
    z-index: 1;
}

.testimonial-wrapper {
    overflow: hidden;
    position: relative;
}

.testimonial-track {
    display: flex;
    gap: 30px;
    animation: scrollTestimonials 25s linear infinite;
}

.testimonial {
    min-width: 350px;
    background: #fff;
    padding: 25px;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    font-size: 15px;
    line-height: 1.6;
}

@keyframes scrollTestimonials {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ── FIGNUT SHOP BUTTON ── */
.fignut-shop-btn {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 7px;
  background-color: #C00000 !important;
  background: #C00000 !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-decoration: none !important;
  padding: 9px 16px;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 2px 12px rgba(192,0,0,.3);
  -webkit-box-shadow: 0 2px 12px rgba(192,0,0,.3);
  -webkit-transition: all .2s;
  transition: all .2s;
  white-space: nowrap;
  -webkit-animation: shop-pulse 3s ease-in-out infinite;
  animation: shop-pulse 3s ease-in-out infinite;
  vertical-align: middle;
  position: relative;
  top: -2px;
  line-height: 1;
  border: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  opacity: 1 !important;
}
/* Align the li item containing the shop button */
nav ul li:has(.fignut-shop-btn) {
  display: flex;
  align-items: center;
}
.fignut-shop-btn:hover {
  background: #a00000 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgba(192,0,0,.5);
  color: #fff !important;
}
.fignut-shop-btn .shop-badge {
  background: #fff;
  color: #C00000;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 100px;
  letter-spacing: .5px;
}
@-webkit-keyframes shop-pulse {
  0%, 100% { -webkit-box-shadow: 0 2px 12px rgba(192,0,0,.3); box-shadow: 0 2px 12px rgba(192,0,0,.3); }
  50%       { -webkit-box-shadow: 0 2px 20px rgba(192,0,0,.6); box-shadow: 0 2px 20px rgba(192,0,0,.6); }
}
@keyframes shop-pulse {
  0%, 100% { box-shadow: 0 2px 12px rgba(192,0,0,.3); }
  50%       { box-shadow: 0 2px 20px rgba(192,0,0,.6); }
}
@media (max-width: 900px) {
  .fignut-shop-btn {
    margin: 8px 20px 12px;
    display: flex;
    width: fit-content;
  }
}