:root{
      --bg:#ffffff;
      --surface:#f7f8fb;
      --card:#ffffff;
      --text:#0f172a;
      --muted:#475569;
      --border:#e5e7eb;
      --primary: black;   /* Shell red */
      --accent:#ffd100;    /* Shell yellow */
      --radius:16px;
      --shadow:0 8px 24px rgba(16,24,40,.08);
    }

    /* Reset + base */
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
      color:var(--text);
      background:var(--bg);
      line-height:1.55;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}

    .container{max-width:1342px;margin:0 auto;padding:0 20px}
    .btn{
      display:inline-flex;align-items:center;gap:.5rem;
      background:var(--primary);color:#fff;border:none;
      padding:12px 18px;border-radius:12px;font-weight:600;
      box-shadow:var(--shadow);cursor:pointer
    }
    .btn.secondary{background:transparent;color:white;border:1px solid white;}
    .chip{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--muted);font-size:.85rem}

    /* Header */
    header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--border)}
    .topbar{font-size:.9rem;color:var(--muted);border-bottom:1px solid var(--border);background:var(--surface)}
    .topbar .links{display:flex;gap:18px;justify-content:flex-end;padding:10px 0}
    .brand{
      display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.15rem
    }
    .brand-mark{
      width:28px;height:28px;border-radius:50%;
      background: radial-gradient(circle at 60% 40%, var(--accent), #ffe87a 60%), var(--accent);
      border:3px solid var(--primary);display:inline-block;
    }
    .nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:16px}
    .nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
    .nav a{color:#0f172a;font-weight:600}
    .nav a:hover{color:var(--primary)}
    .menu-toggle{display:none;border:1px solid var(--border);background:#fff;border-radius:10px;padding:8px 12px}
    @media (max-width: 900px){
      .nav ul.primary{display:none}
      .menu-toggle{display:inline-flex}
      .nav.open ul.primary{display:flex;flex-direction:column;gap:10px;position:absolute;left:0;right:0;top:100%;background:#fff;padding:16px;border-bottom:1px solid var(--border)}
    }

    /* Breadcrumbs */
    .crumbs{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface);font-size:.9rem;color:var(--muted)}
    .crumbs .container{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 20px}
    .crumbs a{color:inherit}
    .crumbs .sep{opacity:.6}

    /* Hero */
    .hero {
      position:relative;
      isolation:isolate;
    }
    .hero .backdrop{
      position:relative;height:460px;
      /* border-radius:var(--radius); */
      overflow:hidden;box-shadow:var(--shadow);
      /* margin:24px 0; */
      background:#ddd;
      /* clip-path: polygon( */
        /* 0% 30px,        Top-left corner: Start 20px down from top-left */
        /* 30px 0%,        Top-left corner: End 20px right from top-left */
        /* calc(100% - 0px) 0%, Top-right corner: Start 20px left from top-right */
        /* 100% 0px,      Top-right corner: End 20px down from top-right */
        /* 100% calc(100% - 0px), Bottom-right corner: Start 20px up from bottom-right */
        /* calc(100% - 0px) 100%, Bottom-right corner: End 20px left f    @media (max-width: 640px)rom bottom-right */
        /* 0px 100%,      Bottom-left corner: Start 20px right from bottom-left */
        /* 0% calc(100% - 0px)  Bottom-left corner: End 20px up from bottom-left */
      /* ); */
    }
    .hero .backdrop img{width:100%;height:100%;object-fit:cover}
    .hero .backdrop::after{
      content:"";position:absolute;inset:0;
      /* background:
        linear-gradient(90deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.1) 38%, rgba(255,255,255,.0) 68%),
        linear-gradient(to bottom, rgba(255,255,255,.2), rgba(255,255,255,0)); */
      pointer-events:none;
    }
    .hero .panel{
      position:absolute;
      inset:0;
      display:flex;
      align-items:end;
    }
    .panel .copy{
      max-width:560px;margin-left:20px;
          margin-right: 20px;
      background:rgba(0,0,0,.8);
      backdrop-filter:blur(3px);
      padding:24px;
      /* border-bottom-left-radius:18px;
      border-top-right-radius:18px; */
      /* border:1px solid var(--border); */
      box-shadow:var(--shadow);
      color: white;
      clip-path: polygon(
        0% 0px,
        0px 0%,
        calc(100% - 30px) 0%,
        100% 30px,
        100% calc(100% - 0px),
        calc(100% - 0px) 100%,
        0px 100%,
        0% calc(100% - 0px)
      );
    }
    .eyebrow{color:var(--primary);font-weight:800;letter-spacing:.02em;margin-bottom:.25rem}
    h1{font-size:2rem;line-height:1.2;margin:0 0 .5rem}
    .sub{margin:0 0 1rem; font-weight: 300;}
    .cta{display:flex;gap:12px;flex-wrap:wrap}

    @media (max-width: 640px){
      h1 { font-size: 1.25rem; }
      .hero .backdrop { height: 350px; }
      .sub { font-size: 0.75rem; margin-bottom: .5rem;}
      .hero.container { padding-left: 6px; padding-right: 6px; }
      .panel .copy { margin-left: 6px; }
    }

    /* Why Choose */
    section{padding:56px 0}
    h2{font-size:1.75rem;margin:1rem 0 1rem}
    .lead{color:var(--muted);max-width:980px; margin-bottom: 20px;}

    /* Cards */
    .grid{display:grid;gap:0px 5px}
    .grid.cols-3{grid-template-columns:repeat(3,1fr);background: linear-gradient(88deg, #ededed, #ffffff);}
    @media (max-width: 900px){ .grid.cols-3{grid-template-columns:1fr 1fr} }
    @media (max-width: 640px){
       .grid.cols-3{grid-template-columns:1fr}
       .cta a { font-size: 12px; }
    }

    .grid.cols-5{grid-template-columns:repeat(5,1fr);background: linear-gradient(88deg, #ededed, #ffffff);}
    @media (max-width: 900px){ .grid.cols-5{grid-template-columns:1fr 1fr 1fr} }
    @media (max-width: 640px){ .grid.cols-5{grid-template-columns:1fr 1fr} }


    .card{
      background:var(--card);border:1px solid var(--border);border-radius:18px;overflow:hidden;
      box-shadow:var(--shadow);display:flex;flex-direction:column
    }
    .card-media{background:#fafafa;border-bottom:1px solid var(--border)}
    .card-body{padding:18px}
    .card h3{margin:0 0 .35rem;font-size:1.1rem}
    .card p{margin:0;color:var(--muted)}
    .card .actions{display:flex;gap:10px;padding:16px 18px;border-top:1px solid var(--border);margin-top:auto}

    /* Footer */
    footer{border-top:1px solid var(--border);background:var(--surface);margin-top:40px; padding: 2rem !important;}
    footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px;padding:36px 0}
    footer h4{margin:0 0 .75rem}
    footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
    footer a{color:var(--muted)}
    footer a:hover{color:var(--primary)}
    @media (max-width: 900px){
      footer .cols{grid-template-columns:1fr 1fr}
    }
    @media (max-width: 640px){
      footer .cols{grid-template-columns:1fr}
    }
    
    .news_ticker {
      margin:1em 0 0 0;
      position: relative;
      display: flex;
      align-items: center;
      overflow: hidden;
    }

    .news-group {
      position: relative;
      white-space: nowrap;
      will-change: transform;
    }

    .news-group li {
      list-style-type:none;
      color:#5A6072;
      font-size: 4em;
      display: inline-block;
      padding:15px;
      margin-right: 20px;
      font-family: helvetica, sans-serif;
    }
    a {
      color:#AAAEBC;
    }
    .marquee {
      padding: 0;
      max-width: 1342px;
      padding-left: 20px;
      padding-right: 20px;
      margin: auto;
    }

    .container.explore {
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .card.icon {
      background: none;
      border: none;
      box-shadow: none;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      /* box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.15); */
      border-radius: 0;
      img {
        max-width: 100%;
        max-height: 100%;
      }
    }

    .card.product {
      background: transparent;
      border: none;
      box-shadow: none;
      display: flex;
      /* flex-direction: row; */
      align-items: center;
      justify-content: center;
      /* box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.15); */
      border-radius: 0;
      height: 100%;
      aspect-ratio: 1.25/1;
      img {
        max-width: 40%;
        /* max-height: 50%; */
        transition: all .5s;
      }
    }

    .card.logo {
      background: white;
      border: none;
      box-shadow: none;
      display: flex;
      /* flex-direction: row; */
      align-items: center;
      justify-content: center;
      /* box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.15); */
      border-radius: 0;
      height: 100%;
      aspect-ratio: 1/1;
      img {
        max-width: 70%;
        max-height: 50%;
        transition: all .5s;
      }
    }

    .card.logo:hover {
      img {
        transform: scale(1.2);
      }
    }

    .card.two {
      border-radius: 0;
      height: 120px;
      img {
        max-height: 100%;
      }
    }
    .card-right {
      background: white;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      /* color: white; */
      border: 2px solid black;
    }



    .image-wrapper {
      border-radius: 6px;
      background-color: #ccc;
      display: flex;
      align-items: center;
      text-align: center;
      line-height: 1.6;

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

    /* Standard CSS Version */
    .shine {
      position: relative;
      overflow: hidden;
    }

    .shine::before {
      /* Use rgba() for transparency as fade_out is not standard CSS */
      background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(110, 109, 156, 0.3) 25%,  rgba(255, 255, 255, 0.3) 50%, rgba(255, 167, 117, 0.3) 75%);
      content: "";
      display: block;
      height: 100%;
      left: -75%;
      position: absolute;
      top: 0;
      transform: skewX(-25deg);
      width: 50%;
      z-index: 2;
    }

    .shine:hover::before,
    .shine:focus::before {
      animation: shine 0.75s;
    }

    @keyframes shine {
      100% {
        left: 125%;
      }
    }

    .about-values.container{
      padding-top: 4rem;
      margin:3rem auto 3rem;
      display:grid;
      grid-template-columns: 1.15fr 1fr;
      gap:48px;
      align-items:start;
    }

    @media (max-width: 1024px){
      .about-values.container {
        grid-template-columns: 1fr;
      }
    }

    .about-values .lead {
      margin-top: 5px;
    }

    /* LEFT: Intro */
    .brand-row{
      display:flex;
      align-items:center;
      gap:20px;
      margin-bottom:6px;
    }
    .brand-row img{
      width:100px;object-fit:contain;flex:0 0 auto;
      margin-right: 1.5rem;
    }
    .brand-title{
      margin:0;
      font-weight:900;
      font-size:42px;
      letter-spacing:.5px;
      text-transform:uppercase;
      line-height:1;
    }
    .brand-title sup{
      font-size:.55em;
      top:-.8em;
      position:relative;
    }

    .values {
      display: flex;
      align-items: center;
      justify-self: center;
      height: 100%;
      width: 90%;
    }

    .bg-wrapper {
      position: relative;
      overflow: hidden;
      /* max-width: 1342px; */
      margin: auto;
    }

    .featured-bg {
      width: 100%;
      position: absolute;
      top: 5rem;
      z-index: -1;
      min-height: 100%;
    }

    /* FEATURE HOVER */

    .explore .product {
    position: relative;
    overflow: hidden;
    background: transparent;
    /* border-radius: 12px; */
  }

  .explore .product img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform .35s ease, filter .35s ease;
  }

  .explore .product:hover img,
  .explore .product:focus-within img,
  .explore .product.show-info img {
    transform: scale(1.03);
    filter: brightness(0.85);
  }

  .explore .product-info {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .5rem;
    padding: 1rem;
    color: #fff;
    background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.68) 100%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
    pointer-events: none; /* so drag still works */
    /* z-index: 1; */
     background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(255, 255, 255, 0.15) 100%); /* Semi-transparent background */
    backdrop-filter: blur(2px); /* The key to the blur effect */
    -webkit-backdrop-filter: blur(10px); /* For Safari compatibility */
    border-bottom: 3px solid rgba(255, 255, 255, 0.2); /* Subtle border for definition */
    border-radius: 0; /* Rounded corners for a softer look */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    text-align: center;
  }

  .explore .product:hover .product-info,
  .explore .product:focus-within .product-info,
  .explore .product.show-info .product-info {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .explore .product-info h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.25;
  }

  .explore .product-info p {
    margin: 0;
    font-size: .9rem;
    opacity: .95;
  }

  .explore .product-badges {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .explore .badge {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    padding: .25rem .5rem;
    border-radius: .5rem;
    font-size: .75rem;
  }

  .card.product p {
    color: white;
  }

  @media (prefers-reduced-motion: reduce) {
    .explore .product img,
    .explore .product-info {
      transition: none;
    }
  }