@charset "utf-8";
/* CSS Document */

    :root {
      --navy: #0a2842;
      --navy-mid: #152236;
      --red: #cc2222;
      --green: #41ad49;
		--green-bright: #41ad49;
      /*--green-bright: #22a845;--green: #1e8c3a;*/
      --yellow: #FFFF00;
      --white: #ffffff;
      --light-gray: #f4f5f7;
      --border: #dee2e6;
      --text-dark: #1a1a2e;
		--orange:#ff7a00;
		--light:#f4f8fc;
		--ink:#111827;
		--muted:#5b6777;
		--border:#d9e3ee;
		--white:#ffffff;
    }

    * { box-sizing: border-box; }

    body {
      font-family: 'Barlow', sans-serif;
      background: var(--white);
      color: var(--text-dark);
      margin: 0;
    }

    /*h1, h2, h3, h4, h5, h6 {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 800;
    }*/


  .gallery-wrap { position: relative; width: 100%; max-width: 680px; margin: 0 auto; }
  .visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 400px; overflow: hidden; border-radius: 12px; }
  .slide { display: none; width: 100%; justify-content: center; }
  .slide.active { display: flex; }
  .slide img { width: 100%; max-width: 650px; height: 400px; object-fit: cover; border-radius: 8px; position: relative; z-index: 1; }
  .callout { position: absolute; background: #fff; border: 0.5px solid #ccc; border-radius: 8px; font-size: 13px; font-weight: 500; padding: 6px 12px; z-index: 2; max-width: 200px; line-height: 1.4; }
  .callout.one { top: 18px; left: 18px; }
  .callout.two { bottom: 60px; right: 18px; }
  .arrow-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; background: #ff7a00; border-radius: 30%; width: 40px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer;opacity: 80%; }
  .arrow-btn.left { left: 5px; }
  .arrow-btn.right { right: 5px; }
  .dot-row { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
  .dot-btn { border: 0.5px solid #ccc; border-radius: 20px; padding: 4px 12px; font-size: 12px; background: #fff; cursor: pointer; }
  .dot-btn.active { background: #111; color: #fff; border-color: #111; }



    /* ── STICKY NAV ── */
    #sticky-nav {
      position: fixed;
      bottom: 28px;
      right: 28px;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      gap: 10px;
      transition: all 0.4s ease;
    }

    #sticky-nav.hidden {
      opacity: 0;
      pointer-events: none;
      transform: translateX(80px);
    }

    .sticky-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 18px;
      border-radius: 50px;
      border: none;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.92rem;
      letter-spacing: 0.03em;
      cursor: pointer;
      box-shadow: 0 4px 18px rgba(0,0,0,0.22);
      transition: transform 0.18s, box-shadow 0.18s;
      white-space: nowrap;
    }
    .sticky-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.28); }
    .sticky-btn.btn-cart   { background: var(--orange); color: #fff; }
    .sticky-btn.btn-spec   { background: var(--navy);   color: #fff; }
    .sticky-btn.btn-top    { background: #444;           color: #fff; width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }

    /* ── HERO SECTION ── */
.hero {
    position: relative;
    background: linear-gradient(135deg, #241100 0%, #7b2f00 47%, #ff7a00 100%);
    color: white;
    display: grid;
	grid-template-columns:1.08fr .92fr;
    gap: 30px;
    padding: 44px 48px 40px;
    min-height: 520px
}		
		/*.hero-blue {
  position: relative;
  background: linear-gradient(135deg,#071b33 0%,#0b376d 48%,#0b5cab 100%);
  color: white;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 30px;
  padding: 44px 48px 40px;
  min-height: 520px;
			
}*/
/* --- BASE FIXES --- */
.hero-blue {
  display: grid;
	background: linear-gradient(135deg,#071b33 0%,#0b376d 48%,#0b5cab 100%);
  color: white;
  grid-template-columns: 1.08fr .92fr;
  gap: 30px;
  padding: 44px 48px 40px;
  overflow-x: hidden; /* stops horizontal scroll */
}

.visual img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* MOBILE FIX 
@media (max-width: 900px) {
  .hero-blue {
    grid-template-columns: 1fr; 
    padding: 24px 20px;         
    min-height: auto;
  }

  .visual {
    justify-content: center;
    text-align: center;
  }

  .visual img {
    max-width: 100%;
    height: auto;
  }

  .cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .cta-row .btn-b {
    width: 100%;
  }
}*/

/* FORCE HERO TO BE RESPONSIVE */
@media (max-width: 900px) {

  section.hero-blue {
    display: block !important;
    width: 100% !important;
    padding: 24px 16px !important;
    overflow-x: hidden !important;
  }

  section.hero-blue > div {
    width: 100% !important;
    margin-bottom: 24px !important;
    display: block !important;
  }

  section.hero-blue .visual {
    width: 100% !important;
    text-align: center !important;
    display: block !important;
  }

  section.hero-blue .visual img {
    max-width: 100% !important;
    height: auto !important;
    width: 100% !important;
  }

  section.hero-blue .cta-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  section.hero-blue .cta-row .btn-b {
    width: 100% !important;
    text-align: center !important;
  }
}


/* FORCE RESPONSIVE GRID */
@media (max-width: 900px) {
  .grid-3 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    width: 100% !important;
  }
}

@media (max-width: 600px) {
  .grid-3 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .grid-3 .card {
    width: 100% !important;
    text-align: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
  }

  .grid-3 .icon {
    margin: 0 auto !important;
  }
}


.page {
    max-width: 1180px;
    margin: 28px auto 52px;
    background: white;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(6,22,43,.18)
}
.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px;
    padding: 8px 14px;
	font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: .2px;
    width: max-content
}
.badge .dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--yellow);
    box-shadow: 0 0 14px var(--yellow)
}
.badgeb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px;
    padding: 8px 14px;
    font-weight: 800;
	font-size: 1.3rem;
    letter-spacing: .2px;
    width: max-content
}
.badgeb .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 12px var(--green)
}
.hero h1 {
    font-size: 56px;
    line-height: 1.02;
    margin: 22px 0 14px;
    letter-spacing: -1.4px
}
.hero-blue h1 {
    font-size: 56px;
    line-height: 1.02;
    margin: 22px 0 14px;
    letter-spacing: -1.4px
}
.hero-sub {
    font-size: 22px;
    color: #fff4d6;
    max-width: 650px;
    margin: 0 0 24px;
    font-weight: 500
}
    .hero-stop-bar {
      background: var(--red);
      padding: 10px 24px;
      display: flex;
      align-items: center;
      gap: 14px;
		border-radius: 8px;
    }
    .stop-sign {
      background: var(--red);
      border: 3px solid #fff;
      color: #fff;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: 1rem;
      padding: 4px 10px;
      border-radius: 4px;
      letter-spacing: 0.08em;
      clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
      width: 52px;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .hero-stop-bar h2 {
      margin: 0;
      color: #fff;
      font-size: 1.9rem;
      letter-spacing: 0.02em;
    }

    .hero-body {
      padding: 40px 30px 36px;
    }
    .hero-body h1 {
      font-size: clamp(2rem, 5vw, 3.4rem);
      line-height: 1.05;
      margin-bottom: 14px;
      color: #fff;
    }
    .hero-body .lead {
      font-size: 1.25rem;
      color: #fff;
      max-width: 700px;
      line-height: 1.3;
		font-weight: bold;
    }

.stand {
    width: 55%;
    height: 18px;
    background: #30343a;
    margin: 18px auto 0;
    border-radius: 0 0 10px 10px
}
.sunburst {
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff38b 0%, #ffd34d 35%, rgba(255,122,0,.4) 58%, rgba(255,122,0,0) 72%);
    top: 12px;
    left: 16px
}

.visual {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.marquee {
    width: 100%;
    max-width: 400px;
    background: #050505;
    border: 18px solid #20242a;
    border-radius: 20px;
    box-shadow: 0 30px 55px rgba(0,0,0,.42), inset 0 0 0 3px #444;
    position: relative;
    padding: 26px 22px
}
/*.marquee:before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 2px solid #4a4f57;
    border-radius: 10px;
    pointer-events: none
}*/

.callout {
    position: absolute;
    background: white;
    color: #06162b;
    border-radius: 14px;
    padding: 12px 14px;
    font-weight: 900;
	font-size: 1.2rem;
    box-shadow: 0 10px 25px rgba(0,0,0,.28);
    border-left: 6px solid var(--yellow)
}
.callout.one {
    top: 44px;
    right: 0;
    max-width: 210px
}
.callout.two {
    bottom: 44px;
    left: 0;
    max-width: 250px
}

.cta-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin: 26px 0 18px
}

.btn-2 {
    display: inline-block;
    border-radius: 12px;
    padding: 15px 22px;
    font-weight: 900;
	font-size: 1.2rem;
    text-decoration: none!important;
    box-shadow: 0 8px 18px rgba(0,0,0,.18)
}
.btn-primary {
    background: #06162b;
    color: #fff!important;
}
.btn-secondary {
    background: #fff;
    color: #7b2f00!important;
}

.btn-b {
    display: inline-block;
    border-radius: 12px;
    padding: 15px 22px;
    font-weight: 900;
	font-size: 1.2rem;
    text-decoration: none!important;
    box-shadow: 0 8px 18px rgba(0,0,0,.18)
}
.btn-primary {
    background: #ff7a00;
    color: #000!important;
}
.btn-secondary {
    background: rgba(255,255,255,.12);
    color: #7b2f00!important;
}
    /* Price cards */
    .price-card {
      border-radius: 10px;
      /*padding: 18px 22px;*/
      margin-top: 22px;
    }
    .price-card.red-card {
      border: 2px solid #cc2222;
      /*background: rgba(204,34,34,0.08);*/
		background: #fff;
		max-width: 400px;
    }
    .price-card.green-card {
      border: 2px solid var(--green-bright);
      background: #fff;
    }
    .price-card .model-name {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.3em;
      font-weight: 700;
      letter-spacing: 0.05em;
      color: #222222;
      margin-bottom: 4px;
    }
    .price-card .price {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 2.8rem;
      font-weight: 900;
      line-height: 1;
    }
    .price-card.red-card  .price { color: var(--red); }
	.price-card.yellow-card .price { color: var(--yellow); padding-left: 0px!important;}
    .price-card.green-card .price { color: var(--green-bright); }
    .price-card .sub-label { font-size: 1.2rem; margin-top: 4px; }
    .price-card.red-card  .sub-label { color: #cc0001; font-weight: 500;}
    .price-card.green-card .sub-label { font-size: 1.5rem; color: var(--green-bright); font-weight: 900; }

    /* Feature pills */
    .feature-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
    .fpill {
      border: 1.5px solid rgba(255,255,255,0.25);
      border-radius: 8px;
      padding: 9px 16px;
      font-size: 1.1rem;
      font-weight: 600;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(255,255,255,0.05);
      min-width: 190px;
    }
    .fpill i { font-size: 1.2rem; }
    .fpill .highlight { color: var(--yellow); }
    .fpill .highlight-green { color: var(--green-bright); }

    /* Product sidebar */
    .hero-product-box {
      /*background: rgba(255,255,255,0.06);*/
		background: #fff;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.12);
      padding: 24px 22px;
      position: relative;
	height: 80vh;
    }
    .twice-badge {
      position: absolute;
      top: 254px; right: 44px;
      background: var(--yellow);
      color: #1a1a00;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: 0.9rem;
      padding: 6px 12px;
      border-radius: 6px;
      /*letter-spacing: 0.06em;*/
		max-width: 125px;
		text-align: center;
		border:2px solid #000;
    }
	.red-badge {
		background-image: url("../../images/360.png");
      position: absolute;
      top: 254px; right: 404px;
      background: #cc0001;
      color: #fff;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: 0.9rem;
      padding: 20px;
      border-radius: 60%;
      letter-spacing: 0.06em;
		text-align: center;
		cursor: pointer;
    }
    .hero-product-box img {
      width: 100%;
      border-radius: 8px;
      object-fit: contain;
      max-width: 350px;
    }
    .hero-product-box .product-info {
		
      margin-top: 16px;
      border-top: 1px solid #6F6F6F;
      padding-top: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
    }
    .hero-product-box .product-info .prod-meta small { color: #000; font-size: 1rem; }
    .hero-product-box .product-info .prod-meta h5 { color: #000; margin: 0; font-size: 1.6rem; }
    .hero-product-box .product-info .prod-meta p { color: #000; font-size: 1rem; margin: 0; max-width: 250px; }
    .hero-product-box .prod-price { text-align: right; }
    .hero-product-box .prod-price .big-price { color: #cc0001; font-family: 'Barlow Condensed', sans-serif; font-size: 2.5rem; font-weight: 900; }
    .hero-product-box .prod-price .stock { color: #cc0001; font-size: 0.9rem; font-weight: 700; }

    .btn-add-cart {
      background: var(--orange);
      color: #fff;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 800;
      font-size: 1.2rem;
      letter-spacing: 0.06em;
      border: none;
      border-radius: 8px;
      padding: 13px 0;
      width: 100%;
      margin-top: 14px;
      transition: background 0.18s, transform 0.15s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }
    .btn-add-cart:hover { background: #c8600e; transform: translateY(-1px); }

    /* ── COMPARISON TABLE ── */
    #comparison { background: var(--white); padding: 10px 0; }
    #comparison h2 { font-size: 2.4rem; color: var(--text-dark); margin-bottom: 28px; }

    .comp-table {
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid var(--border);
      box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    }
    .comp-table .comp-header {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
    .comp-header .col-cm5 {
      background: var(--red);
      color: #fff;
      padding: 16px 24px;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.3rem;
      font-weight: 800;
      letter-spacing: 0.04em;
    }
    .comp-header .col-ez5 {
      background: var(--green);
      color: #fff;
      padding: 16px 24px;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.3rem;
      font-weight: 800;
      letter-spacing: 0.04em;
    }
    .comp-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      border-bottom: 1px solid var(--border);
		background: #fff;
    }
    .comp-row:last-child { border-bottom: none; }
    .comp-row .cell {
		display: grid;
		grid-template-columns: 0.6fr 1fr;
      padding: 14px 24px;
      font-size: 0.95rem;
    }
    .comp-row .cell:first-child { border-right: 1px solid var(--border); background: #fff; }
    .comp-row .cell:last-child { background: #f0fbf4; }
    .comp-row .label { font-weight: 700; font-size: 0.9rem; color: #000; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
    .comp-row .val { font-weight: 999; color: var(--text-dark); }
    .comp-row .val.good { color: var(--green);}
    .comp-row .val.bad  { color: #000; }
    .comp-row.risk-row .cell:first-child { background: var(--yellow); }
    .comp-row.risk-row .cell:last-child  { background: var(--green);  }
    .comp-row.risk-row .val { color: var(--text-dark); font-size: 1rem; }
    .comp-row.risk-row .cell:last-child .val { color: #fff; }


.section {
	display: grid;
    padding: 42px 48px;
    border-bottom: 1px solid var(--border);
}
.section h2 {
    font-size: 34px;
    margin: 0 0 12px;
    color: var(--navy);
    letter-spacing: -.5px
}
.section .lead {
    font-size: 19px;
    color: var(--muted);
    max-width: 1000px;
    margin: 0 0 24px;
}

/* MOBILE FIX */
@media (max-width: 900px) {
  .compare {
    grid-template-columns: 1fr !important; /* force single column */
    gap: 24px !important;
  }

  .compare .bad,
  .compare .good {
    width: 100% !important;
    padding: 20px !important;
    box-sizing: border-box !important;
  }

  .compare h3 {
    text-align: center !important;
  }

  .compare ul {
    padding-left: 20px !important;
  }
}
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px
}
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px
}
.card {
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(7,27,51,.06)
}
.card h3 {
    margin: 0 0 8px;
    color: var(--navy);
    font-size: 22px
}
.card p {
	font-size: 18px;
    margin: 0;
    color: var(--muted);
    font-size: 16px
}
.danger {
    background: #fff5f2;
    border-color: #ffc9ba
}
.success {
    background: #f1fff6;
    border-color: #bceacb
}
.icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #e6f3ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 12px
}
.compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 18px
}
.compare .bad {
    background: #fff4f4;
    border: 1px solid #ffc9c9;
    border-radius: 18px;
    padding: 22px
}
.compare .good {
    background: #f2fff7;
    border: 1px solid #bceacb;
    border-radius: 18px;
    padding: 22px
}
.compare h3 {
    margin: 0 0 12px;
    font-size: 24px
}
ul {
    padding-left: 20px;
    margin: 12px 0 0
}
li {
    margin: 8px 0;
    color: #344054
}
.roi {
    background: linear-gradient(135deg, #f7fbff, #eef7ff)
}
/*.roi-box {
    display: grid;
grid-template-columns:1.2fr .8fr;
    gap: 28px;
    align-items: center
}*/

/* DESKTOP LAYOUT */
.roi-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

/* MOBILE FIX */
@media (max-width: 900px) {
  section.section.roi .roi-box {
    display: block !important;
    width: 100% !important;
  }

  section.section.roi .roi-box > div {
    width: 100% !important;
    margin-bottom: 24px !important;
  }

  section.section.roi .card.success {
    text-align: center !important;
    padding: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  section.section.roi .big-number {
    font-size: 20px !important;
    line-height: 1.4 !important;
  }

  section.section.roi .specs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  section.section.roi .spec {
    flex: 1 1 45% !important;
    text-align: center !important;
  }

  section.section.roi {
    padding: 24px 16px !important;
  }
}


.big-number {
    font-size: 72px;
    font-weight: 1000;
    color: var(--blue);
    line-height: 1;
    margin: 0
}
.specs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 20px
}
.spec {
    background: #f6f9fc;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    font-weight: 800;
    color: #142238
}
.form {
    background: #06162b;
    color: white;
    border-radius: 22px;
    padding: 28px;
    box-shadow: 0 18px 38px rgba(0,0,0,.18)
}
.form h3 {
    font-size: 28px;
    margin: 0 0 8px;
    color: white
}
.form p {
    color: #cfe4ff;
    margin: 0 0 16px
}
.field {
    background: white;
    border-radius: 10px;
    padding: 13px 14px;
    margin: 10px 0;
    color: #748094;
    font-weight: 700
}
.form .btn {
    display: block;
    text-align: center;
    margin-top: 14px
}

    /* ── SPECS SECTION ── */
    #specs { background: var(--light-gray); padding: 60px 0; }
    #specs h2 { font-size: 2.2rem; }
    .specs-card {
      background: #fff;
      border-radius: 12px;
      border: 1px solid var(--border);
      padding: 28px;
      height: 100%;
    }
    .specs-card h4 { font-size: 1.3rem; margin-bottom: 20px; color: var(--navy); border-bottom: 2px solid var(--green); padding-bottom: 10px; }
    .spec-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid #eee; font-size: 0.9rem; }
    .spec-row:last-child { border-bottom: none; }
    .spec-row .spec-label { font-size: 1rem; color: #000; font-weight: 600; }
    .spec-row .spec-val {font-size: 1rem; font-weight: 700; color: var(--text-dark); text-align: right; }

    /* ── FINGERTIPS SECTION ── */
    #fingertips { background: #fff; padding: 60px 0; }
    #fingertips h2 { font-size: 2.2rem; }
    #fingertips .lead { color: #555; max-width: 600px; }

    .fingertip-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 22px 14px;
      border-radius: 12px;
      border: 2px solid var(--border);
      background: #fff;
      cursor: pointer;
      transition: all 0.2s;
      width: 100%;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 1rem;
      letter-spacing: 0.04em;
      color: var(--navy);
      text-align: center;
    }
    .fingertip-btn i { font-size: 1.8rem; }
    .fingertip-btn:hover { border-color: var(--green); background: #f0fbf4; color: var(--green); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(30,140,58,0.14); }
    .fingertip-btn.btn-datasheet i { color: #e55; }
    .fingertip-btn.btn-manual    i { color: #358; }
    .fingertip-btn.btn-software  i { color: #a35; }
    .fingertip-btn.btn-drivers   i { color: #c80; }
    .fingertip-btn.btn-cad       i { color: #5a8; }
    .fingertip-btn.btn-videos    i { color: #e44; }

    /* Sticky Nav toggle in fingertips */
    .nav-toggle-row { background: var(--navy); border-radius: 12px; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 30px; flex-wrap: wrap; }
    .nav-toggle-row p { color: #c8d4e0; margin: 0; font-size: 0.92rem; }
    .nav-toggle-row h5 { color: #fff; margin: 0 0 4px; font-size: 1.1rem; }
    .form-check-input { cursor: pointer; }
    .form-check-input:checked { background-color: var(--green-bright); border-color: var(--green-bright); }

    /* ── FOOTER CTA ── */
    #footer-cta { background: var(--navy); padding: 60px 0; }
    #footer-cta h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 3rem); }
    #footer-cta p { color: #aab8c8; font-size: 1rem; margin-top: 10px; }
    .btn-cta-green { background: var(--green-bright); color: #fff; border: none; padding: 14px 32px; border-radius: 8px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.1rem; letter-spacing: 0.06em; transition: background 0.18s; }
    .btn-cta-green:hover { background: #1a7a32; color: #fff; }
    .btn-cta-outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.4); padding: 14px 32px; border-radius: 8px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.1rem; letter-spacing: 0.06em; transition: all 0.18s; }
    .btn-cta-outline:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.08); }
    .footer-legal { background: #080f18; color: #5a6a7a; font-size: 0.75rem; padding: 16px 0; }

    /* ── MODAL OVERRIDES ── */
    .modal-header { border-bottom: 3px solid var(--green); }
    .modal-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.4rem; }
    .modal-body { padding: 28px; }
    .modal-body iframe { border-radius: 8px; border: none; }
    .modal-body .pdf-placeholder, .modal-body .video-placeholder, .modal-body .download-box {
      background: var(--light-gray);
      border-radius: 10px;
      padding: 36px;
      text-align: center;
    }
    .modal-body .download-box i { font-size: 3rem; color: var(--green); margin-bottom: 12px; }
    .modal-body .download-box h5 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.4rem; margin-bottom: 8px; }
    .modal-body .download-box p { color: #666; font-size: 0.9rem; margin-bottom: 18px; }
    .btn-download { background: var(--green-bright); color: #fff; border: none; padding: 10px 24px; border-radius: 8px; font-weight: 700; font-size: 0.95rem; transition: background 0.18s; }
    .btn-download:hover { background: #1a7a32; color: #fff; }
    .btn-view { background: var(--navy); color: #fff; border: none; padding: 10px 24px; border-radius: 8px; font-weight: 700; font-size: 0.95rem; transition: background 0.18s; margin-left: 8px; }
    .btn-view:hover { background: #2a3f58; color: #fff; }

    /* Responsive */
    @media (max-width: 768px) {
      .hero-body { padding: 24px 16px; }
      .comp-row .cell { padding: 10px 14px; }
      #sticky-nav { bottom: 16px; right: 14px; }
      .sticky-btn { font-size: 0.8rem; padding: 9px 14px; }
    }