:root{
      --bg0:#040404;
      --bg1:#070707;
      --panel:#0b0b0b;
      --panel2:#0f0f10;
      --txt:#efefef;
      --muted:#9a9a9a;
      --muted2:#7a7a7a;
      --gold:#D4AF37;
      --gold2:#f8edb5;
      --gold-grad: linear-gradient(135deg, #8a6a1e 0%, #f7efb8 18%, #b7892e 36%, #fff5c9 52%, #a6731c 72%, #f7efb8 88%, #7a5a17 100%);
      --font-lux:'Inter', 'Segoe UI', Arial, sans-serif;
      --font-body:'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
      --font-tech:'Rajdhani', sans-serif;
      --b: 1px solid rgba(212,175,55,.14);
      --b2: 1px solid rgba(255,255,255,.06);
      --r12: 12px;
      --r16: 16px;
      --r20: 20px;
      --r24: 24px;
      --r32: 32px;
      --shadow: 0 30px 90px rgba(0,0,0,.55);
      --shadow-soft: 0 16px 60px rgba(0,0,0,.45);
      --shadow-gold: 0 0 35px rgba(212,175,55,.12);
      --ease: cubic-bezier(.2,.8,.2,1);
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-right: env(safe-area-inset-right, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
      --safe-left: env(safe-area-inset-left, 0px);
      /* Navbar: dark theme */
      --header-bg: rgba(4,4,4,.58);
      --header-border: 1px solid rgba(255,255,255,.06);
      --nav-link: #b9b9b9;
      --nav-icon-bg: rgba(255,255,255,.02);
      --nav-icon-border: 1px solid rgba(255,255,255,.06);
      --nav-icon-color: #dcdcdc;
      --nav-drop-bg: rgba(15,15,18,.98);
      --nav-drop-border: 1px solid rgba(255,255,255,.08);
      --nav-drop-link: #d0d0d0;
    }
    body.light-theme {
      --bg0: #f8f8f8;
      --bg1: #ffffff;
      --panel: #f0f0f0;
      --panel2: #e8e8e8;
      --txt: #222222;
      --muted: #666666;
      --muted2: #888888;
      --gold: #b8941f;
      --gold2: #a07c1a;
      --b: 1px solid rgba(184,148,31,.2);
      --b2: 1px solid rgba(0,0,0,.1);
      --shadow: 0 30px 90px rgba(0,0,0,.08);
      --shadow-soft: 0 16px 60px rgba(0,0,0,.06);
      --shadow-gold: 0 0 35px rgba(184,148,31,.1);
      /* Navbar: light theme */
      --header-bg: rgba(248,248,248,.85);
      --header-border: 1px solid rgba(0,0,0,.08);
      --nav-link: #666666;
      --nav-icon-bg: rgba(0,0,0,.02);
      --nav-icon-border: 1px solid rgba(0,0,0,.1);
      --nav-icon-color: #666666;
      --nav-drop-bg: rgba(255,255,255,.98);
      --nav-drop-border: 1px solid rgba(0,0,0,.1);
      --nav-drop-link: #444444;
    }
    *{box-sizing:border-box; margin:0; padding:0}
    .skip-link{
      position:absolute; left:-9999px; z-index:9999; padding:12px 20px;
      background:var(--gold); color:#000; font-weight:700; border-radius:0 0 8px 0;
      transition:left .2s;
    }
    .skip-link:focus{ left:0; top:0; }
    html,body{width:100%; min-height:100vh; max-width:100%; overflow-x: hidden;}
    body{
      font-family:var(--font-body);
      color:var(--txt);
      background: radial-gradient(900px 600px at 15% 10%, rgba(212,175,55,.08), transparent 60%),
                  radial-gradient(800px 560px at 88% 22%, rgba(255,255,255,.05), transparent 55%),
                  radial-gradient(900px 680px at 50% 115%, rgba(212,175,55,.07), transparent 55%),
                  linear-gradient(180deg, var(--bg0), var(--bg1));
      padding-bottom: calc(24px + var(--safe-bottom));
      padding-left: var(--safe-left);
      padding-right: var(--safe-right);
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      transition: background-color 0.4s var(--ease);
      position: relative;
      font-synthesis:none;
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }
    body.light-theme{
      background: radial-gradient(900px 600px at 15% 10%, rgba(184,148,31,.05), transparent 60%),
                  radial-gradient(800px 560px at 88% 22%, rgba(0,0,0,.03), transparent 55%),
                  linear-gradient(180deg, var(--bg0), var(--bg1));
    }
    a{color:inherit;text-decoration:none;transition:.35s var(--ease)}
    img{max-width:100%;display:block;height:auto}
    h1,h2,h3,h4,h5,h6{font-family:var(--font-lux);font-weight:800;letter-spacing:.4px;margin:0}
    p{margin:0;color:var(--muted);line-height:1.9;font-weight:400}
    .container{max-width:1280px;margin:0 auto;padding:0 24px}
    .goldText{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
    .grain{position:fixed; inset:0; pointer-events:none; z-index:0;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
      mix-blend-mode:overlay;
      opacity:.08;
    }
    body.light-theme .grain {
      opacity:.04;
      mix-blend-mode:multiply;
    }
    .vignette{position:fixed; inset:0; pointer-events:none; z-index:0;
      background:radial-gradient(closest-side at 50% 30%, transparent 45%, rgba(0,0,0,.65) 100%);
      opacity:.6;
    }
    body.light-theme .vignette {
      background:radial-gradient(closest-side at 50% 30%, transparent 45%, rgba(0,0,0,.2) 100%);
      opacity:.2;
    }
    header{
      position:sticky;
      top:0;
      z-index:50;
      padding-top: var(--safe-top);
      background: var(--header-bg);
      backdrop-filter:blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: var(--header-border);
      transition: background .4s var(--ease), border-color .4s var(--ease);
    }
    body.light-theme header{
      background: rgba(248,248,248,.92);
      border-bottom: 1px solid rgba(0,0,0,.1);
    }
    body.light-theme header .brand .t{
      color: #1a1a1a;
    }
    .navFlex{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:18px 0
    }
    .brand{display:flex;min-width:0;flex:1 1 auto}
    .brandRow{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:0;
    }
    .brandLogo{
      width:44px;
      height:44px;
      border-radius:14px;
      display:grid;
      place-items:center;
      border:1px solid rgba(212,175,55,.22);
      background:rgba(212,175,55,.06);
      box-shadow:0 0 26px rgba(212,175,55,.10);
      overflow:hidden;
      flex:0 0 auto;
    }
    body.light-theme .brandLogo{
      border:1px solid rgba(184,148,31,.26);
      background:rgba(184,148,31,.06);
    }
    .brandLogo img{
      width:30px;
      height:30px;
      object-fit:contain;
      filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))
    }
    .brandText{
      display:flex;
      flex-direction:column;
      gap:6px;
      min-width:0;
    }
    .brand .t{
      font-size:22px;
      font-weight:800;
      letter-spacing:1.2px;
      white-space:nowrap;
    }
    .brand .s{
      font-size:10px;
      letter-spacing:2px;
      text-transform:uppercase;
      color:var(--gold);
      white-space:nowrap;
    }
    .navMenu{
      display:flex;
      gap:26px;
      align-items:center
    }
    .navMenu a{
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:2.4px;
      color: var(--nav-link);
      position:relative;
      padding:10px 0;
    }
    body.light-theme .navMenu a,
    body.light-theme .navMenu .navDropToggle{
      color: #555;
    }
    .navMenu a:after{
      content:"";
      position:absolute;
      left:0;
      bottom:5px;
      width:0%;
      height:1px;
      background:rgba(212,175,55,.7);
      transition:.35s var(--ease);
    }
    .navMenu a:hover{
      color:var(--gold)
    }
    .navMenu a:hover:after{
      width:100%
    }
    .navMenu .navDrop{position:relative}
    .navMenu .navDropToggle{
      display:inline-flex; align-items:center; gap:6px;
      font-size:11px; text-transform:uppercase; letter-spacing:2.4px; color: var(--nav-link);
      position:relative; padding:10px 0; cursor:pointer; border:none; background:none;
      font-family:inherit;
    }
    .navMenu .navDropToggle:hover{color:var(--gold)}
    .navMenu .navDropToggle i{font-size:10px; transition:transform .25s}
    .navMenu .navDrop:hover .navDropToggle i{transform:rotate(180deg)}
    .navMenu .navDropPanel{
      position:absolute; top:100%; left:0; min-width:220px;
      padding:12px 0; margin-top:4px;
      background: var(--nav-drop-bg); border: var(--nav-drop-border);
      border-radius:12px; box-shadow:var(--shadow-soft);
      opacity:0; visibility:hidden; transform:translateY(-8px);
      transition:opacity .25s, transform .25s, visibility .25s;
      z-index:1000;
    }
    .navMenu .navDrop:hover .navDropPanel{opacity:1; visibility:visible; transform:translateY(0)}
    .navMenu .navDropPanel a{
      display:block; padding:10px 20px; font-size:12px; letter-spacing:1px;
      text-transform:none; color: var(--nav-drop-link); white-space:nowrap;
    }
    body.light-theme .navMenu .navDropPanel{
      background: rgba(255,255,255,.98);
      border: 1px solid rgba(0,0,0,.12);
    }
    body.light-theme .navMenu .navDropPanel a{
      color: #333;
    }
    .navMenu .navDropPanel a:hover{background:rgba(212,175,55,.08); color:var(--gold)}
    .navMenu .navDropPanel a:after{display:none}
    .navIcons{
      display:flex;
      gap:14px;
      align-items:center
    }
    .headerThemePicker{
      display:none;
      align-items:center;
      gap:6px;
      padding:4px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.06);
      background:rgba(255,255,255,.03);
      flex:0 0 auto;
    }
    body.light-theme .headerThemePicker{
      border:1px solid rgba(0,0,0,.1);
      background:rgba(0,0,0,.03);
    }
    .headerThemeOption{
      width:32px;
      height:32px;
      border:none;
      border-radius:999px;
      display:grid;
      place-items:center;
      background:transparent;
      color:#bebebe;
      cursor:pointer;
      transition:background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
    }
    .headerThemeOption i{
      font-size:15px;
    }
    .headerThemeOption:hover{
      color:var(--gold);
      transform:translateY(-1px);
    }
    .headerThemeOption.is-active{
      background:rgba(212,175,55,.12);
      color:var(--gold);
      box-shadow:0 8px 20px rgba(212,175,55,.08);
    }
    body.light-theme .headerThemeOption{
      color:#666;
    }
    body.light-theme .headerThemeOption.is-active{
      background:rgba(184,148,31,.12);
      color:#8b6a16;
      box-shadow:0 8px 18px rgba(184,148,31,.08);
    }
    .iconBtn{
      width:42px;
      height:42px;
      border-radius:999px;
      display:grid;
      place-items:center;
      border: var(--nav-icon-border);
      background: var(--nav-icon-bg);
      color: var(--nav-icon-color);
      transition:.35s var(--ease);
      cursor:pointer;
      position:relative;
      user-select:none;
      -webkit-user-select:none;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      flex:0 0 auto;
    }
    body.light-theme header .iconBtn{
      border: 1px solid rgba(0,0,0,.12);
      background: rgba(0,0,0,.04);
      color: #555;
    }
    .iconBtn i{
      font-size:20px
    }
    .iconBtn:hover{
      border-color:rgba(212,175,55,.25);
      color:var(--gold);
      box-shadow:var(--shadow-gold);
      transform:translateY(-1px);
      background:rgba(212,175,55,.03);
    }
    .cart-badge{
      position:absolute;
      top:-6px;
      right:-6px;
      background:var(--gold-grad);
      color:#000;
      font-size:10px;
      font-weight:900;
      width:18px;
      height:18px;
      border-radius:50%;
      display:grid;
      place-items:center;
      pointer-events:none;
    }
    .hamb{display:none}
    .btn{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:14px 28px;
      border-radius:999px;
      border:var(--b);
      color:var(--gold);
      font-family:var(--font-body);
      font-weight:700;
      font-size:12px;
      letter-spacing:1px;
      text-transform:uppercase;
      background:rgba(212,175,55,.02);
      position:relative;
      overflow:hidden;
      transition:.45s var(--ease);
      cursor:pointer;
      user-select:none;
      -webkit-user-select:none;
      min-height:44px;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      flex:0 0 auto;
    }
    .btn i{
      font-size:18px
    }
    .btn span{
      position:relative;
      z-index:2
    }
    .btn:hover{
      color:#090909;
      border-color:transparent;
      background:rgba(212,175,55,.95);
      box-shadow:0 0 28px rgba(212,175,55,.18);
      transform:translateY(-1px);
    }
    .btn.primary{
      border:0;
      color:#080808;
      background:var(--gold-grad);
      box-shadow:0 0 28px rgba(212,175,55,.12)
    }
    .btn.primary:hover{
      filter:brightness(1.06)
    }
    .btn.ghost{
      border:var(--b2);
      color:#d7d7d7;
      background:rgba(255,255,255,.02)
    }
    body.light-theme .btn.ghost {
      border:1px solid rgba(0,0,0,.1);
      background:rgba(0,0,0,.02);
      color:#666
    }
    .btn.ghost:hover{
      color:#0a0a0a;
      background:#efefef;
      border-color:transparent;
      box-shadow:0 18px 70px rgba(255,255,255,.08)
    }
    body.light-theme .btn.ghost:hover {
      box-shadow:0 18px 70px rgba(0,0,0,.08)
    }
    .drawer{
      position:fixed;
      inset:0;
      z-index:80;
      background:rgba(0,0,0,.6);
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:opacity .35s var(--ease), visibility .35s var(--ease);
      padding-top: var(--safe-top);
    }
    body.light-theme .drawer {
      background:rgba(0,0,0,.4)
    }
    .drawer.open{
      opacity:1;
      visibility:visible;
      pointer-events:auto
    }
    .drawerPanel{
      position:absolute;
      right:0;
      top:0;
      height:100%;
      width:min(360px, 88vw);
      background:linear-gradient(180deg, rgba(10,10,10,.98), rgba(6,6,6,.98));
      border-left:1px solid rgba(255,255,255,.06);
      transform:translateX(110%);
      transition:.45s var(--ease);
      padding:18px;
      padding-bottom: calc(18px + var(--safe-bottom));
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    body.light-theme .drawerPanel {
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,248,248,.98));
      border-left:1px solid rgba(0,0,0,.08)
    }
    .drawer.open .drawerPanel{
      transform:translateX(0)
    }
    .drawerTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:16px
    }
    .drawerLinks{
      display:grid;
      gap:10px;
      margin-top:10px
    }
    .drawerLinks a{
      padding:14px 14px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.06);
      background:rgba(255,255,255,.02);
      color:#d6d6d6;
      text-transform:uppercase;
      letter-spacing:2px;
      font-size:11px;
      min-height:44px;
      display:flex;
      align-items:center;
    }
    body.light-theme .drawerLinks a {
      border:1px solid rgba(0,0,0,.08);
      background:rgba(0,0,0,.02);
      color:#666
    }
    .drawerLinks a:hover{
      border-color:rgba(212,175,55,.22);
      color:var(--gold);
      background:rgba(212,175,55,.03)
    }
    .drawerActions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:14px
    }
    .drawerThemeBtn{
      display:none;
    }
    .drawerSectionTitle{
      margin-top:16px;
      font-family:var(--font-body);
      font-weight:700;
      letter-spacing:1px;
      text-transform:uppercase;
      font-size:11px;
      color:rgba(212,175,55,.9);
    }
    body.light-theme .drawerSectionTitle{
      color:rgba(184,148,31,.95);
    }
    .hero{
      position:relative;
      padding:64px 0 10px;
      min-height:74svh;
      display:flex;
      align-items:center;
      border-bottom:1px solid rgba(255,255,255,.06);
      z-index:2;
    }
    @supports not (height: 1svh){
      .hero{
        min-height:74vh;
      }
    }
    body.light-theme .hero {
      border-bottom:1px solid rgba(0,0,0,.08)
    }
    .heroGrid{
      display:grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
      gap:36px;
      align-items:center
    }
    .heroSubtitle{
      display:inline-flex;
      align-items:center;
      gap:10px;
      color:rgba(212,175,55,.9);
      font-size:12px;
      letter-spacing:4px;
      text-transform:uppercase;
      margin-bottom:18px;
    }
    .heroSubtitle:before{
      content:"";
      width:34px;
      height:1px;
      background:rgba(212,175,55,.75)
    }
    .heroTitle{
      font-size:68px;
      line-height:1.05;
      margin-bottom:18px;
      letter-spacing:1.5px;
      background:linear-gradient(90deg,#f2f2f2 0%, #cfcfcf 35%, #7a7a7a 70%, #f0f0f0 100%);
      -webkit-background-clip:text;
      background-clip:text;
      -webkit-text-fill-color:transparent;
      position:relative;
    }
    body.light-theme .heroTitle {
      background:linear-gradient(90deg,#222222 0%, #444444 35%, #666666 70%, #333333 100%);
      -webkit-background-clip:text;
      background-clip:text;
      -webkit-text-fill-color:transparent;
    }
    .heroTitle:after{
      content:"";
      position:absolute;
      inset:-6px -10px;
      background:linear-gradient(110deg, transparent 0%, rgba(212,175,55,.18) 35%, transparent 70%);
      transform:translateX(-120%);
      animation:shine 7.5s var(--ease) infinite;
      mix-blend-mode:screen;
      pointer-events:none;
      filter:blur(6px);
    }
    body.light-theme .heroTitle:after {
      mix-blend-mode:multiply;
      background:linear-gradient(110deg, transparent 0%, rgba(184,148,31,.12) 35%, transparent 70%)
    }
    @keyframes shine{
      0%{transform:translateX(-120%)}
      45%{transform:translateX(120%)}
      100%{transform:translateX(120%)}
    }
    .heroDesc{
      max-width:540px;
      margin-bottom:26px;
      color:rgba(150,150,150,.95)
    }
    body.light-theme .heroDesc {
      color:rgba(102,102,102,.95)
    }
    .heroCTAs{
      display:flex;
      gap:14px;
      flex-wrap:wrap;
      align-items:center
    }
    .chip{
      padding:10px 12px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.02);
      color:#cfcfcf;
      font-size:12px;
      letter-spacing:1.5px;
      transition:.35s var(--ease);
      min-height:40px;
      display:inline-flex;
      align-items:center;
      white-space:nowrap;
    }
    body.light-theme .chip {
      border:1px solid rgba(0,0,0,.1);
      background:rgba(0,0,0,.02);
      color:#666
    }
    .chip:hover{
      border-color:rgba(212,175,55,.28);
      color:var(--gold);
      background:rgba(212,175,55,.03);
      transform:translateY(-1px)
    }
    .orbit{
      position:relative;
      width:min(440px, 100%);
      aspect-ratio: 1 / 1;
      border-radius:50%;
      border:1px solid rgba(255,255,255,.04);
      display:grid;
      place-items:center;
      background:radial-gradient(circle at 30% 30%, rgba(212,175,55,.08), transparent 55%),
                radial-gradient(circle at 70% 70%, rgba(255,255,255,.04), transparent 55%),
                rgba(255,255,255,.01);
      box-shadow:var(--shadow-soft);
      overflow:hidden;
      justify-self:end;
      max-width:440px;
      perspective: 900px;
    }
    body.light-theme .orbit {
      border:1px solid rgba(0,0,0,.06);
      background:radial-gradient(circle at 30% 30%, rgba(184,148,31,.05), transparent 55%),
                radial-gradient(circle at 70% 70%, rgba(0,0,0,.03), transparent 55%),
                rgba(255,255,255,.6);
    }
    .orbit:before{
      content:"";
      position:absolute;
      inset:-30px;
      background:conic-gradient(from 160deg, rgba(212,175,55,.0), rgba(212,175,55,.12), rgba(212,175,55,0));
      filter:blur(18px);
      opacity:.65;
      animation:spin 12s linear infinite;
    }
    body.light-theme .orbit:before {
      background:conic-gradient(from 160deg, rgba(184,148,31,.0), rgba(184,148,31,.08), rgba(184,148,31,0))
    }
    @keyframes spin{
      to{transform:rotate(360deg)}
    }
    .wheelWrap{
      width: 74%;
      aspect-ratio: 1 / 1;
      display:grid;
      place-items:center;
      border-radius:999px;
      position:relative;
      transform-style: preserve-3d;
      transition: transform .25s var(--ease);
      will-change: transform;
    }
    .wheelGlow{
      position:absolute;
      inset:-10%;
      background: radial-gradient(circle, rgba(212,175,55,.14), transparent 58%);
      filter: blur(10px);
      opacity:.55;
      pointer-events:none;
    }
    .wheelSvg{
      width:100%;
      height:100%;
      display:block;
      filter: drop-shadow(0 18px 40px rgba(0,0,0,.38));
      transform-origin: 50% 50%;
      will-change: transform;
      animation:none;
    }
    .dialPulse{
      transform-origin: 50% 50%;
      animation: dialPulse 3.8s var(--ease) infinite;
      opacity:.85;
    }
    @keyframes dialPulse{
      0%{ transform: scale(1); opacity:.70; }
      50%{ transform: scale(1.02); opacity:1; }
      100%{ transform: scale(1); opacity:.70; }
    }
    .needle{
      transform-origin: 100px 112px;
      animation: needleSweep 4.8s var(--ease) infinite;
      filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
    }
    @keyframes needleSweep{
      0%{ transform: rotate(-105deg); }
      45%{ transform: rotate(32deg); }
      55%{ transform: rotate(22deg); }
      100%{ transform: rotate(-105deg); }
    }
    .orbitBadge{
      position:absolute;
      bottom:22px;
      left:22px;
      display:flex;
      gap:10px;
      align-items:center;
      padding:10px 12px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.06);
      background:rgba(0,0,0,.45);
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter: blur(10px);
      color:#dcdcdc;
      font-size:12px;
      max-width: calc(100% - 44px);
    }
    body.light-theme .orbitBadge {
      border:1px solid rgba(0,0,0,.08);
      background:rgba(255,255,255,.8);
      color:#666
    }
    .orbitBadge i{
      color:rgba(212,175,55,.9);
      font-size:18px
    }
    .ribbonWrap{
      margin-top:-28px;
      position:relative;
      z-index:5;
      padding-bottom:46px;
    }
    .ribbonGrid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px
    }
    .luxCard{
      background:linear-gradient(180deg, rgba(15,15,16,.95), rgba(8,8,8,.85));
      border:1px solid rgba(255,255,255,.06);
      border-radius:var(--r24);
      padding:28px;
      box-shadow:0 18px 70px rgba(0,0,0,.35);
      position:relative;
      transition:.55s var(--ease);
      overflow:hidden;
    }
    body.light-theme .luxCard {
      background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(240,240,240,.85));
      border:1px solid rgba(0,0,0,.08)
    }
    .luxCard:before{
      content:"";
      position:absolute;
      left:-30%;
      top:0;
      width:60%;
      height:2px;
      background:var(--gold-grad);
      opacity:.95;
      transform:skewX(-18deg);
      transition:.55s var(--ease);
    }
    .luxCard:hover{
      transform:translateY(-10px);
      border-color:rgba(212,175,55,.22);
      box-shadow:var(--shadow), var(--shadow-gold)
    }
    .luxCard:hover:before{
      left:75%
    }
    .luxIcon{
      font-size:30px;
      color:rgba(212,175,55,.9);
      margin-bottom:14px
    }
    .luxTitle{
      font-size:18px;
      color:#f1f1f1;
      margin-bottom:8px
    }
    body.light-theme .luxTitle {
      color:#333
    }
    .luxDesc{
      color:rgba(150,150,150,.95);
      font-size:13.5px
    }
    body.light-theme .luxDesc {
      color:rgba(102,102,102,.95)
    }
    .toolsSec {
      padding: 40px 0;
      margin-top: 20px;
    }
    .toolsGrid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
    }
    .toolCard {
      background: var(--panel);
      border: 1px solid rgba(255,255,255,0.05);
      padding: 30px;
      border-radius: 20px;
      text-align: center;
      transition: 0.3s;
      position: relative;
      overflow: hidden;
      display: block;
      text-decoration: none;
    }
    body.light-theme .toolCard {
      border: 1px solid rgba(0,0,0,0.08);
    }
    .toolCard:hover {
      transform: translateY(-5px);
      border-color: var(--gold);
      box-shadow: 0 10px 30px rgba(212,175,55,0.15);
    }
    .toolIcon {
      font-size: 40px;
      color: var(--gold);
      margin-bottom: 15px;
      display: inline-block;
    }
    .toolTitle {
      font-family: var(--font-tech);
      font-size: 24px;
      color: var(--txt);
      margin-bottom: 10px;
      font-weight: 700;
    }
    .toolDesc {
      color: var(--muted);
      font-size: 14px;
      margin-bottom: 25px;
      line-height: 1.5;
    }
    .toolBtn {
      background: var(--gold-grad);
      color: #000;
      padding: 10px 25px;
      border-radius: 30px;
      font-weight: 700;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 1px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .filters-bar {
      display:flex;
      gap:12px;
      margin-bottom:32px;
      flex-wrap:wrap;
      padding:20px;
      background:rgba(15,15,16,.85);
      border-radius:16px;
      border:1px solid rgba(255,255,255,.06);
    }
    body.light-theme .filters-bar {
      background:rgba(255,255,255,.85);
      border:1px solid rgba(0,0,0,.08)
    }
    .filter-group {
      flex:1;
      min-width:180px
    }
    .filter-label {
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:2px;
      color:var(--muted);
      margin-bottom:8px;
      display:block
    }
    .filter-select {
      width:100%;
      padding:12px 16px;
      border-radius:12px;
      background:rgba(0,0,0,.4);
      border:1px solid rgba(255,255,255,.08);
      color:var(--txt);
      font-family:var(--font-body);
      font-size:16px;
      cursor:pointer;
      transition:.3s var(--ease);
      min-height:44px;
    }
    body.light-theme .filter-select {
      background:rgba(0,0,0,.05);
      border:1px solid rgba(0,0,0,.1);
      color:#333
    }
    .filter-select:hover {
      border-color:rgba(212,175,55,.3)
    }
    .section{
      padding:20px 0 0;
      position:relative;
      z-index:2;
    }
    .sectionTitle{
      text-align:center;
      margin:0 auto 40px;
      max-width:720px
    }
    .sectionTitle h2{
      font-size:38px;
      margin-bottom:10px
    }
    body.light-theme .sectionTitle h2 {
      color:#333
    }
    .sectionTitle .bar{
      width:72px;
      height:2px;
      background:rgba(212,175,55,.85);
      margin:16px auto 14px;
      border-radius:999px
    }
    .sectionTitle p{
      color:rgba(150,150,150,.95)
    }
    body.light-theme .sectionTitle p {
      color:rgba(102,102,102,.95)
    }
    .prodGrid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      justify-content: center;
      margin-bottom: 40px;
    }
    .prodItem{
      border-radius:var(--r24);
      border:1px solid rgba(255,255,255,.06);
      background:linear-gradient(180deg, rgba(12,12,12,.85), rgba(6,6,6,.85));
      overflow:hidden;
      transition:.45s var(--ease);
      position:relative;
    }
    body.light-theme .prodItem {
      border:1px solid rgba(0,0,0,.08);
      background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(240,240,240,.85))
    }
    .prodItem:hover{
      transform:translateY(-8px);
      border-color:rgba(212,175,55,.22);
      box-shadow:0 22px 80px rgba(0,0,0,.45), var(--shadow-gold)
    }
    .prodTop{
      padding:18px;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap
    }
    .tag{
      font-size:10px;
      letter-spacing:2px;
      text-transform:uppercase;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.02);
      padding:8px 10px;
      border-radius:999px;
      color:#cfcfcf;
      white-space:nowrap;
    }
    body.light-theme .tag {
      border:1px solid rgba(0,0,0,.1);
      background:rgba(0,0,0,.02);
      color:#666
    }
    .prodImg{
      height:190px;
      display:grid;
      place-items:center;
      background:radial-gradient(circle at 30% 35%, rgba(212,175,55,.12), transparent 60%),
                radial-gradient(circle at 70% 65%, rgba(255,255,255,.06), transparent 60%),
                linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.2));
      border-top:1px solid rgba(255,255,255,.04);
      border-bottom:1px solid rgba(255,255,255,.04);
      color:rgba(255,255,255,.22);
      position:relative;
      overflow:hidden;
    }
    body.light-theme .prodImg {
      background:radial-gradient(circle at 30% 35%, rgba(184,148,31,.08), transparent 60%),
                radial-gradient(circle at 70% 65%, rgba(0,0,0,.04), transparent 60%),
                linear-gradient(180deg, rgba(255,255,255,.6), rgba(240,240,240,.8));
      border-top:1px solid rgba(0,0,0,.04);
      border-bottom:1px solid rgba(0,0,0,.04);
      color:rgba(0,0,0,.22);
    }
    .prodImg img {
      width:85%;
      height:auto;
      aspect-ratio: 4 / 3;
      object-fit:contain;
      transition:transform .5s var(--ease)
    }
    .prodItem:hover .prodImg img {
      transform:scale(1.05)
    }
    .new-badge{
      position:absolute;
      top:12px;
      right:12px;
      background:var(--gold-grad);
      color:#000;
      font-size:10px;
      font-weight:700;
      padding:4px 10px;
      border-radius:999px;
      letter-spacing:1px;
      z-index:2;
    }
    .prodBody{
      padding:18px
    }
    .prodName{
      font-size:14px;
      color:#f2f2f2;
      font-weight:600;
      letter-spacing:.2px
    }
    body.light-theme .prodName {
      color:#333
    }
    .prodMeta{
      margin-top:6px;
      font-size:12px;
      color:rgba(155,155,155,.95)
    }
    body.light-theme .prodMeta {
      color:rgba(102,102,102,.95)
    }
    .prodPrice{
      margin-top:14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      font-family:var(--font-lux)
    }
    .prodPrice b{
      font-size:18px;
      font-size:18px;
      color:var(--gold);
      font-weight:700;
    }
    .prodPrice span{
      font-size:11px;
      color:rgba(155,155,155,.95);
      letter-spacing:1px
    }
    body.light-theme .prodPrice span {
      color:rgba(102,102,102,.95)
    }
    .prodActions{
      padding:0 18px 18px;
      display:flex;
      gap:10px
    }
    .miniBtn{
      flex:1;
      border-radius:14px;
      padding:12px 12px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.02);
      color:#dcdcdc;
      text-transform:uppercase;
      letter-spacing:2px;
      font-size:11px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      transition:.3s;
      cursor:pointer;
      user-select:none;
      min-height:44px;
    }
    body.light-theme .miniBtn {
      border:1px solid rgba(0,0,0,.1);
      background:rgba(0,0,0,.02);
      color:#666
    }
    .miniBtn:hover{
      border-color:rgba(212,175,55,.22);
      color:var(--gold);
      background:rgba(212,175,55,.03);
      transform:translateY(-1px)
    }
    .miniBtn.primary{
      border:0;
      color:#090909;
      background:var(--gold-grad);
      font-weight:900
    }
    .miniBtn.primary:hover{
      filter:brightness(1.06)
    }
    @keyframes addToCart {
      0%{transform:scale(1)}
      50%{transform:scale(1.1)}
      100%{transform:scale(1)}
    }
    .added-to-cart {
      animation:addToCart .4s var(--ease)
    }
    .servicesGrid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-top: 40px;
      margin-bottom: 60px;
    }
    .servCard {
      background: var(--panel2);
      padding: 25px;
      border-radius: 16px;
      text-align: center;
      border: 1px solid rgba(255,255,255,0.05);
      transition: 0.3s;
    }
    body.light-theme .servCard {
      background: #fff;
      border: 1px solid rgba(0,0,0,0.08);
    }
    .servCard:hover {
      transform: translateY(-5px);
      border-color: var(--gold);
    }
    .servIcon {
      font-size: 32px;
      color: var(--gold);
      margin-bottom: 10px;
      display: block;
    }
    .servTitle {
      font-family: var(--font-tech);
      font-weight: 700;
      font-size: 16px;
      color: var(--txt);
      margin-bottom: 5px;
      text-transform: uppercase;
    }
    .servDesc {
      font-size: 12px;
      color: var(--muted);
    }
    .brandsMarquee{
      margin:70px 0 0;
      padding:18px 0;
      border-top:1px solid rgba(255,255,255,.06);
      border-bottom:1px solid rgba(255,255,255,.06);
      overflow:hidden;
      position:relative;
    }
    body.light-theme .brandsMarquee{
      border-top:1px solid rgba(0,0,0,.08);
      border-bottom:1px solid rgba(0,0,0,.08);
    }
    .brandsMarquee:before, .brandsMarquee:after{
      content:"";
      position:absolute;
      top:0;
      bottom:0;
      width:64px;
      pointer-events:none;
      z-index:2;
    }
    .brandsMarquee:before{
      left:0;
      background:linear-gradient(90deg, rgba(4,4,4,1), rgba(4,4,4,0));
    }
    .brandsMarquee:after{
      right:0;
      background:linear-gradient(270deg, rgba(4,4,4,1), rgba(4,4,4,0));
    }
    body.light-theme .brandsMarquee:before{
      background:linear-gradient(90deg, rgba(248,248,248,1), rgba(248,248,248,0));
    }
    body.light-theme .brandsMarquee:after{
      background:linear-gradient(270deg, rgba(248,248,248,1), rgba(248,248,248,0));
    }
    .marqueeTrack{
      display:flex;
      gap:0; /* Gap handled by group padding for seamless loop */
      width:max-content;
      animation: marquee 45s linear infinite;
      will-change: transform;
    }
    .marqueeGroup{
      display:flex;
      gap:34px;
      padding-right:34px; /* Ensure spacing between groups */
      padding-left:0;
    }
    .brandPill{
      display:flex;
      align-items:center;
      gap:10px;
      padding:8px 16px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.1);
      background: #fff;
      color:#222;
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:1px;
      transition:.35s var(--ease);
      white-space:nowrap;
    }
    .brandPill img{
      width:auto;
      height:24px;
      max-width:92px;
      object-fit:contain;
      display:block;
      opacity:1;
      transition:.35s var(--ease);
      filter: none;
      mix-blend-mode: normal;
    }
    .brandPill:hover{
      border-color:rgba(212,175,55,.5);
      box-shadow: 0 5px 15px rgba(255,255,255,0.1);
      transform:translateY(-2px);
    }
    @keyframes marquee{
      from{ transform: translateX(0); }
      to{ transform: translateX(-50%); }
    }
    footer{
      margin-top:70px;
      padding:70px 0 34px;
      background:linear-gradient(180deg, rgba(4,4,4,.1), rgba(2,2,2,1));
      border-top:1px solid rgba(212,175,55,.18);
      position:relative;
      z-index:2;
    }
    body.light-theme footer {
      background:linear-gradient(180deg, rgba(248,248,248,.1), rgba(240,240,240,1));
      border-top:1px solid rgba(184,148,31,.18)
    }
    .footerRow{
      display:grid;
      grid-template-columns: 1.1fr 1fr 1fr;
      gap:40px;
      margin-bottom:46px
    }
    .fTitle{
      color:rgba(212,175,55,.9);
      font-size:14px;
      margin-bottom:18px;
      letter-spacing:2px;
      text-transform:uppercase
    }
    .fLinks a{
      display:block;
      padding:10px 0;
      color:#8c8c8c;
      font-size:13px;
      letter-spacing:1px;
      border-bottom:1px dashed rgba(255,255,255,.06)
    }
    body.light-theme .fLinks a {
      color:#666;
      border-bottom:1px dashed rgba(0,0,0,.1)
    }
    .fLinks a:hover{
      color:#f0f0f0;
      padding-left:6px
    }
    body.light-theme .fLinks a:hover {
      color:#333
    }
    .copy{
      text-align:center;
      font-size:11px;
      color:#4f4f4f;
      letter-spacing:2px;
      text-transform:uppercase
    }
    .notification{
      position:fixed;
      bottom: calc(24px + var(--safe-bottom));
      right: calc(24px + var(--safe-right));
      background:linear-gradient(135deg, rgba(20,20,20,.95), rgba(10,10,10,.98));
      border:1px solid rgba(212,175,55,.3);
      border-radius:12px;
      padding:16px 20px;
      display:flex;
      align-items:center;
      gap:12px;
      z-index:1000;
      transform:translateY(100px);
      opacity:0;
      transition:.4s var(--ease);
      box-shadow:0 20px 60px rgba(0,0,0,.6);
      min-width:280px;
      max-width:min(560px, calc(100vw - 48px));
    }
    body.light-theme .notification{
      background:linear-gradient(135deg, rgba(255,255,255,.95), rgba(248,248,248,.98));
      border:1px solid rgba(184,148,31,.3)
    }
    .notification.show{
      transform:translateY(0);
      opacity:1
    }
    .notification i{
      color:var(--gold);
      font-size:20px
    }
    .notification span{
      color:#f0f0f0;
      font-size:14px
    }
    body.light-theme .notification span{
      color:#333
    }
    .whatsapp-floating{
      position:fixed;
      bottom: calc(84px + var(--safe-bottom));
      right: calc(16px + var(--safe-right));
      z-index:999
    }
    .whatsapp-floating a{
      display:grid;
      place-items:center;
      width:56px;
      height:56px;
      background:#25D366;
      border-radius:50%;
      color:white;
      font-size:28px;
      box-shadow:0 10px 40px rgba(37,211,102,.3);
      transition:.3s var(--ease);
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    .whatsapp-floating a:hover{
      transform:scale(1.1);
      box-shadow:0 15px 50px rgba(37,211,102,.4)
    }
    .heroSearch{
      margin-top:28px;
      width:100%;
      max-width: min(520px, 100%);
      border-radius:18px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.02);
      box-shadow:0 18px 70px rgba(0,0,0,.22);
      overflow:hidden;
      position:relative;
      min-width:0;
    }
    body.light-theme .heroSearch{
      border:1px solid rgba(0,0,0,.1);
      background:rgba(0,0,0,.02)
    }
    .heroSearch:focus-within{
      border-color:rgba(212,175,55,.35);
      box-shadow:0 0 0 4px rgba(212,175,55,.06)
    }
    .hsHead{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:14px 14px 10px;
      border-bottom:1px solid rgba(255,255,255,.06);
      gap:10px;
      min-width:0;
    }
    body.light-theme .hsHead{
      border-bottom:1px solid rgba(0,0,0,.08)
    }
    .hsTitle{
      display:flex;
      align-items:center;
      gap:10px;
      font-family:var(--font-body);
      font-weight:700;
      letter-spacing:1px;
      text-transform:uppercase;
      font-size:12px;
      color:#dcdcdc;
      min-width:0;
      white-space:nowrap;
    }
    body.light-theme .hsTitle{
      color:#333
    }
    .hsTitle i{
      color:rgba(212,175,55,.9);
      font-size:18px
    }
    .hsPill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.02);
      color:#cfcfcf;
      font-size:11px;
      letter-spacing:1.5px;
      min-height:34px;
      flex:0 0 auto;
      white-space:nowrap;
    }
    body.light-theme .hsPill{
      border:1px solid rgba(0,0,0,.1);
      background:rgba(0,0,0,.02);
      color:#666
    }
    .hsPill i{
      color:rgba(212,175,55,.9)
    }
    .hsTabs{
      display:flex;
      gap:10px;
      padding:10px 14px 0;
      flex-wrap:wrap;
      min-width:0;
    }
    .hsTab{
      flex:1 1 calc(33.333% - 7px);
      min-width:0;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:12px 12px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.02);
      color:#d6d6d6;
      font-family:var(--font-body);
      font-size:13px;
      letter-spacing:1px;
      cursor:pointer;
      transition:.35s var(--ease);
      min-height:44px;
      user-select:none;
      -webkit-user-select:none;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width:100%;
    }
    body.light-theme .hsTab{
      border:1px solid rgba(0,0,0,.1);
      background:rgba(0,0,0,.02);
      color:#666
    }
    .hsTab i{
      opacity:.9;
      flex:0 0 auto
    }
    .hsTab.active{
      border-color:rgba(212,175,55,.28);
      color:#090909;
      background:var(--gold-grad);
      box-shadow:0 0 24px rgba(212,175,55,.12);
      font-weight:800;
    }
    .hsBody{
      padding:14px
    }
    .hsMain{
      display:flex;
      align-items:center;
      gap:10px;
      padding:12px 14px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(0,0,0,.22);
      min-width:0;
      max-width:100%;
    }
    body.light-theme .hsMain{
      background:rgba(0,0,0,.05);
      border:1px solid rgba(0,0,0,.1)
    }
    .hsMain input{
      flex:1;
      min-width:0;
      width:100%;
      background:transparent;
      border:0;
      outline:none;
      color:#f0f0f0;
      font-size:16px;
      font-family:var(--font-body);
      -webkit-text-size-adjust: 100%;
      max-width:100%;
    }
    body.light-theme .hsMain input{
      color:#333
    }
    .hsGrid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:10px;
      margin-top:12px;
      min-width:0;
      max-width:100%;
    }
    .hsField{
      padding:12px 12px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.02);
      min-height:44px;
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
      max-width:100%;
    }
    body.light-theme .hsField{
      border:1px solid rgba(0,0,0,.1);
      background:rgba(0,0,0,.02)
    }
    .hsField input{
      flex:1;
      min-width:0;
      width:100%;
      background:transparent;
      border:0;
      outline:none;
      color:#f0f0f0;
      font-size:16px;
      font-family:var(--font-body);
      -webkit-text-size-adjust: 100%;
      max-width:100%;
    }
    body.light-theme .hsField input{
      color:#333
    }
    .hsField i{
      color:rgba(212,175,55,.9);
      opacity:.95;
      flex:0 0 auto
    }
    .hsAction{
      margin-top:12px;
      width:100%;
      border:0;
      cursor:pointer;
      padding:14px 16px;
      border-radius:16px;
      background:var(--gold-grad);
      color:#090909;
      font-family:var(--font-body);
      font-weight:700;
      letter-spacing:1px;
      text-transform:uppercase;
      font-size:12px;
      min-height:46px;
      transition:.35s var(--ease);
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      box-shadow:0 12px 50px rgba(212,175,55,.18);
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      max-width:100%;
    }
    .hsAction:hover{
      filter:brightness(1.06);
      transform:translateY(-1px)
    }
    .hsNote{
      margin-top:10px;
      color:rgba(155,155,155,.95);
      font-size:12px;
      letter-spacing:.3px;
      line-height:1.6;
      padding:0 2px;
    }
    body.light-theme .hsNote{
      color:rgba(102,102,102,.95)
    }
    .hsChips{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:12px;
      max-width:100%
    }
    .hsChips .chip{
      min-height:38px
    }
    body.drawer-open {
      overflow: hidden;
      position: fixed;
      width: 100%;
    }
    @media (max-width: 980px) {
      body {
        overflow-x: hidden;
        position: relative;
        width: 100%;
      }
      .container {
        width: 100%;
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
      }
      .heroGrid {
        display: flex;
        flex-direction: column;
        gap: 30px;
      }
      .heroTitle {
        font-size: 42px;
        word-break: break-word;
        overflow-wrap: break-word;
        line-height: 1.1;
      }
      .heroCTAs {
        flex-wrap: wrap;
        gap: 12px;
      }
      .heroCTAs .btn {
        min-width: auto;
        flex: 1 1 auto;
        justify-content: center;
        text-align: center;
        white-space: nowrap;
      }
      .ribbonGrid {
        grid-template-columns: 1fr;
        gap: 16px;
      }
      .filters-bar {
        flex-direction: column;
        padding: 16px;
      }
      .filter-group {
        min-width: 100% !important;
        width: 100%;
      }
      .prodGrid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 16px;
      }
      .prodItem {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
      }
      .servicesGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
      }
      .footerRow {
        grid-template-columns: 1fr;
        gap: 30px;
      }
      .navFlex {
        flex-wrap: nowrap;
        overflow: visible;
        gap: 10px;
      }
      .brand {
        min-width: 0;
        flex: 1 1 auto;
      }
      .brandRow {
        min-width: 0;
        gap: 10px;
      }
      .headerThemePicker {
        display: inline-flex;
      }
      .brandText {
        min-width: 0;
        overflow: hidden;
        max-width: min(46vw, 160px);
        gap: 4px;
      }
      .brand .t {
        font-size: clamp(11px, 3.1vw, 14px);
        letter-spacing: .8px;
        line-height: 1.05;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .brand .s {
        font-size: 7px;
        letter-spacing: 1.2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .navIcons {
        margin-left: auto;
        flex-shrink: 0;
        gap: 4px;
      }
      .iconBtn {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
      }
      #themeToggle {
        display: none;
      }
      .headerWhatsappBtn {
        display: none;
      }
      .hamb {
        margin-left: 0;
      }
      .navMenu {
        display: none;
      }
      .hamb {
        display: grid;
      }
      .hero {
        min-height: unset;
        padding: 34px 0 10px;
      }
      .orbit {
        max-width: 360px;
        margin: 40px auto 0;
        justify-self: center;
      }
    }
    @media (max-width: 520px) {
      .container {
        padding: 0 16px;
      }
      .heroTitle {
        font-size: 36px;
      }
      .heroDesc {
        font-size: 14px;
      }
      .heroCTAs {
        flex-direction: column;
      }
      .heroCTAs .btn {
        width: 100%;
        justify-content: center;
      }
      .orbit {
        max-width: 280px !important;
        margin: 0 auto;
      }
      .prodGrid {
        grid-template-columns: 1fr;
      }
      .prodItem {
        max-width: 100%;
      }
      .servicesGrid {
        grid-template-columns: 1fr;
      }
      .toolsGrid {
        grid-template-columns: 1fr;
      }
      .hsGrid {
        grid-template-columns: 1fr !important;
      }
      .hsTabs {
        flex-wrap: wrap;
      }
      .hsTab {
        flex: 1 1 calc(50% - 5px) !important;
        min-width: 0;
        font-size: 11px;
        padding: 10px 8px;
      }
      .hsChips {
        flex-wrap: wrap;
      }
      .hsChips .chip {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 11px;
        padding: 8px 10px;
      }
      .drawerPanel {
        width: 100vw;
        max-width: 100vw;
      }
      .drawerLinks a {
        padding: 12px 14px;
        font-size: 10px;
      }
      .drawerActions {
        flex-direction: column;
      }
      .drawerActions .btn {
        width: 100%;
        justify-content: center;
      }
      .navFlex {
        padding: 14px 0;
        gap: 8px;
      }
      .brand {
        min-width: 0;
        flex: 1 1 auto;
      }
      .brandRow {
        gap: 6px;
        min-width: 0;
      }
      .headerThemePicker {
        gap: 4px;
        padding: 3px;
      }
      .headerThemeOption {
        width: 28px;
        height: 28px;
      }
      .headerThemeOption i {
        font-size: 13px;
      }
      .brandLogo {
        width: 32px;
        height: 32px;
      }
      .brandLogo img {
        width: 20px;
        height: 20px;
      }
      .brandText {
        gap: 2px;
        max-width: min(44vw, 112px);
      }
      .brand .t {
        font-size: clamp(10px, 3.3vw, 11px);
        letter-spacing: .3px;
      }
      .brand .s {
        display: none;
      }
      .navIcons {
        gap: 3px;
      }
      .iconBtn {
        width: 32px;
        height: 32px;
      }
      .iconBtn i {
        font-size: 16px;
      }
      .cart-badge {
        width: 16px;
        height: 16px;
        font-size: 9px;
        top: -4px;
        right: -4px;
      }
      footer {
        padding: 40px 0 24px;
      }
      .copy {
        font-size: 10px;
        padding: 0 10px;
      }
      .whatsapp-floating {
        bottom: calc(88px + var(--safe-bottom));
        right: calc(14px + var(--safe-right));
      }
      .hero {
        padding-bottom: 60px;
      }
    }
    @media (max-width: 360px) {
      .heroTitle {
        font-size: 32px;
      }
      .heroSubtitle {
        font-size: 11px;
        letter-spacing: 3px;
      }
      .brand .t {
        font-size: 11px;
        letter-spacing: .5px;
      }
      .iconBtn {
        width: 30px;
        height: 30px;
      }
      .iconBtn i {
        font-size: 15px;
      }
      .navIcons {
        gap: 2px;
      }
      .hsTab {
        flex: 1 1 100% !important;
        margin-bottom: 5px;
      }
      .btn {
        padding: 12px 20px;
        font-size: 11px;
      }
      .miniBtn {
        padding: 10px;
        font-size: 10px;
      }
      .prodActions {
        flex-direction: column;
        gap: 8px;
      }
      .prodActions .miniBtn {
        width: 100%;
      }
    }
    @supports (padding: max(0px)) {
      body {
        padding-left: max(16px, var(--safe-left));
        padding-right: max(16px, var(--safe-right));
        padding-bottom: max(24px, var(--safe-bottom));
      }
      header {
        padding-left: max(0px, var(--safe-left));
        padding-right: max(0px, var(--safe-right));
      }
      .drawerPanel {
        padding-left: max(18px, var(--safe-left));
        padding-right: max(18px, var(--safe-right));
      }
    }
    @media (max-height: 500px) and (orientation: landscape) {
      .hero {
        min-height: auto;
        padding: 40px 0;
      }
      .heroGrid {
        grid-template-columns: 1fr 1fr;
      }
      .orbit {
        max-width: 220px !important;
      }
    }
    @media (max-width: 320px) {
      .container {
        padding-left: 12px;
        padding-right: 12px;
      }
      .heroTitle {
        font-size: 28px;
      }
      .btn {
        padding: 10px 16px;
        font-size: 10px;
      }
      .tag {
        font-size: 9px;
        padding: 6px 8px;
      }
    }
    img, svg, video, canvas, audio, iframe, embed, object {
      max-width: 100%;
      height: auto;
    }
    table {
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      display: block;
    }
    pre, code {
      white-space: pre-wrap;
      word-wrap: break-word;
      max-width: 100%;
    }
    html {
      -webkit-overflow-scrolling: touch;
      overflow-x: hidden;
    }
    @media screen and (max-width: 980px) {
      input, select, textarea {
        font-size: 16px !important;
      }
    }
    @media (max-width: 1200px) {
      .prodGrid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 600px) {
      .prodGrid {
        grid-template-columns: 1fr;
      }
    }
    @media (max-width: 900px) {
      .servicesGrid {
        grid-template-columns: 1fr 1fr;
      }
    }
    @media (max-width: 500px) {
      .servicesGrid {
        grid-template-columns: 1fr;
      }
    }
    @media (prefers-reduced-motion: reduce){
      *{animation:none !important; transition:none !important}
      .heroTitle:after{display:none}
      .orbit:before{display:none}
      .marqueeTrack{animation:none !important; transform:none !important;}
      .dialPulse{animation:none !important;}
      .needle{animation:none !important;}
    }