/* ============ TOKENS ============ */
  :root{
    --black:#000000;
    --panel:#0b0c0e;
    --panel-2:#131418;
    --panel-border:#222327;
    --gray:#58595B;
    --gray-light:#9a9b9d;
    --blue:#00d7ff;
    --blue-dim:rgba(0,215,255,0.12);
    --white:#ffffff;
    --display:'Orbitron', 'Inter', sans-serif;
    --body:'Inter', sans-serif;
    --maxw:none;
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  #filmGrain{
    position:fixed;inset:0;z-index:9999;pointer-events:none;
    opacity:0.05;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:160px 160px;
  }
  #cursorGlow{
    position:fixed;top:0;left:0;width:500px;height:500px;border-radius:50%;
    background:radial-gradient(circle, rgba(0,215,255,0.10) 0%, rgba(0,215,255,0.04) 40%, transparent 70%);
    pointer-events:none;z-index:1;transform:translate(-50%,-50%);
    will-change:transform;opacity:0;transition:opacity .4s ease;
  }
  #cursorGlow.visible{opacity:1;}
  html{scroll-behavior:smooth;}
  html{scrollbar-width:thin;scrollbar-color:var(--blue) var(--panel);}
  ::-webkit-scrollbar{width:10px;height:10px;}
  ::-webkit-scrollbar-track{background:var(--panel);}
  ::-webkit-scrollbar-thumb{background:var(--panel-border);border-radius:20px;border:2px solid var(--panel);}
  ::-webkit-scrollbar-thumb:hover{background:var(--blue);}
  body{
    background:var(--black);
    color:var(--white);
    font-family:var(--body);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img,svg{display:block;max-width:100%;}
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px, 4vw, 90px);position:relative;z-index:1;}

  /* ============ WATERMARKS (large brand texture across the wide layout) ============ */
  .watermark{
    position:absolute;
    color:var(--panel-border);
    opacity:0.55;
    pointer-events:none;
    z-index:0;
    display:none;
  }
  @media (min-width:1000px){
    .watermark{display:block;}
  }
  ::selection{background:var(--blue);color:var(--black);}
  :focus-visible{outline:2px solid var(--blue);outline-offset:3px;}

  .eyebrow{
    font-family:var(--display);
    font-size:12px;
    font-weight:700;
    letter-spacing:0.28em;
    color:var(--blue);
    text-transform:uppercase;
    margin-bottom:18px;
    display:flex;align-items:center;gap:10px;
  }
  .eyebrow::before{content:'';width:24px;height:1px;background:var(--blue);display:inline-block;}

  h1,h2,h3{
    font-family:var(--display);
    font-weight:800;
    letter-spacing:0.01em;
    line-height:1.08;
  }
  h2{font-size:clamp(28px,4vw,44px);}
  h3{font-size:18px;}
  p{color:var(--gray-light);}

  .btn{
    font-family:var(--display);
    font-size:13px;
    font-weight:700;
    letter-spacing:0.12em;
    text-transform:uppercase;
    padding:16px 30px;
    border-radius:2px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    transition:transform .25s cubic-bezier(.34,1.56,.64,1), background .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease;
    border:1px solid transparent;
  }
  .btn-primary{background:var(--blue);color:var(--black);}
  .btn-primary:hover{background:#3ee2ff;transform:translateY(-2px) scale(1.02);box-shadow:0 10px 28px var(--blue-dim);}
  .btn-primary:active{transform:translateY(0) scale(0.98);}
  .btn-ghost{border-color:var(--panel-border);color:var(--white);background:transparent;}
  .btn-ghost:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px);}
  .btn-ghost:active{transform:translateY(0);}

  /* ============ LOGO MARK ============ */
  .logo{display:flex;align-items:center;gap:12px;}
  .logo svg{width:30px;height:30px;flex:none;}
  .logo-word{font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:0.08em;}

  /* ============ NAV ============ */
  header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    background:rgba(0,0,0,0.72);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--panel-border);
    transition:background .35s ease, box-shadow .35s ease;
  }
  header.scrolled{background:rgba(0,0,0,0.94);box-shadow:0 10px 30px rgba(0,0,0,0.35);}
  nav{
    max-width:var(--maxw);margin:0 auto;padding:18px clamp(20px, 4vw, 90px);
    display:flex;align-items:center;justify-content:space-between;
    transition:padding .35s ease;
  }
  header.scrolled nav{padding-top:12px;padding-bottom:12px;}
  .nav-links{display:flex;gap:38px;align-items:center;}
  .nav-links a{
    font-family:var(--display);font-size:12px;font-weight:600;
    letter-spacing:0.14em;text-transform:uppercase;color:var(--gray-light);
    transition:color .2s ease;position:relative;
  }
  .nav-links a::after{
    content:'';position:absolute;left:0;bottom:-4px;width:100%;height:1px;background:var(--blue);
    transform:scaleX(0);transform-origin:right;transition:transform .25s ease;
  }
  .nav-links a:hover::after, .nav-links a.active::after{transform:scaleX(1);transform-origin:left;}
  .nav-links a:hover{color:var(--white);}
  .nav-links a.active{color:var(--blue);}
  .nav-cta{display:flex;align-items:center;gap:28px;}
  .menu-toggle{display:none;background:none;border:none;color:var(--white);font-size:24px;cursor:pointer;}
  .lang-switch{
    background:transparent;
    border:1px solid var(--panel-border);
    color:var(--white);
    font-family:var(--display);
    font-size:11px;font-weight:600;letter-spacing:0.08em;
    padding:8px 10px;border-radius:2px;cursor:pointer;
    appearance:none;-webkit-appearance:none;
  }
  .lang-switch:hover{border-color:var(--blue);}
  .lang-switch option{background:var(--panel);color:var(--white);}

  @media (max-width:860px){
    .nav-links{
      position:fixed;top:66px;left:0;right:0;bottom:0;
      background:var(--black);
      flex-direction:column;justify-content:flex-start;
      padding:40px 28px;gap:28px;
      transform:translateX(100%);
      transition:transform .3s ease;
    }
    .nav-links.open{transform:translateX(0);}
    .nav-cta .btn-primary{display:none;}
    .menu-toggle{display:block;}
  }

  /* ============ HERO ============ */
  .hero{
    min-height:100vh;
    display:flex;align-items:center;
    padding:160px 0 100px;
    position:relative;
    overflow:hidden;
  }
  .hero::before{
    content:'';position:absolute;inset:0;
    background:
      radial-gradient(ellipse 600px 400px at 80% 20%, rgba(0,215,255,0.07), transparent 60%),
      radial-gradient(ellipse 500px 500px at 10% 80%, rgba(0,215,255,0.04), transparent 60%);
    pointer-events:none;
  }
  #heroMolecules{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;}
  .hero .wrap{
    display:grid;grid-template-columns:1.05fr 0.95fr;gap:60px;align-items:center;
    position:relative;z-index:1;
  }
  .hero h1{font-size:clamp(34px,4.8vw,58px);margin-bottom:24px;text-transform:uppercase;letter-spacing:0.01em;}
  .hero h1 .accent{color:var(--blue);}
  .hero p.lead{font-size:17px;max-width:480px;margin-bottom:38px;}
  .hero-actions{display:flex;gap:16px;flex-wrap:wrap;}

  @media (max-width:900px){
    .hero .wrap{grid-template-columns:1fr;text-align:center;}
    .hero p.lead{margin-left:auto;margin-right:auto;}
    .hero-actions{justify-content:center;}
  }

  /* ============ ROTATING ETB CASE — INSERT & SEAL ============ */
  .scene{
    perspective:1500px;
    height:480px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:24px;
  }
  .process-anim{position:relative;width:312px;height:312px;flex:none;}
  .cube{
    position:relative;width:234px;height:156px;
    margin:78px auto 0;
    transform-style:preserve-3d;
    animation:boxSpin 16s linear infinite;
  }
  @media (prefers-reduced-motion:reduce){.cube{animation:none;transform:rotateX(-16deg) rotateY(-28deg);}}

  @keyframes boxSpin{
    from{transform:rotateX(-16deg) rotateY(0deg);}
    to{transform:rotateX(-16deg) rotateY(360deg);}
  }

  .case-face{
    position:absolute;
    left:50%;top:50%;
    border:1px solid var(--blue);
    background:linear-gradient(160deg, rgba(0,215,255,0.06), transparent 70%);
    box-shadow:0 0 24px rgba(0,215,255,0.05) inset;
  }
  .case-front, .case-back{width:234px;height:156px;margin:-78px 0 0 -117px;}
  .case-left, .case-right{width:143px;height:156px;margin:-78px 0 0 -71.5px;}
  .case-bottom{width:234px;height:143px;margin:-71.5px 0 0 -117px;}
  .case-front{transform:translateZ(72px);}
  .case-back{transform:translateZ(-72px) rotateY(180deg);}
  .case-left{transform:rotateY(-90deg) translateZ(117px);}
  .case-right{transform:rotateY(90deg) translateZ(117px);}
  .case-bottom{transform:rotateX(-90deg) translateZ(78px);}

  /* the product, dropped into the open case — a real cuboid; each face carries its own
     combined transform (position + drop) so it doesn't depend on a nested 3D context.
     Faces are direct children of .cube, positioned relative to the cube's own center. */
  .product-face{
    position:absolute;left:50%;top:50%;
    border:1px solid #3a3b3f;
    box-shadow:0 0 16px rgba(0,215,255,0.1) inset;
  }
  .product-front, .product-back{width:182px;height:112px;margin:-56px 0 0 -91px;}
  .product-left, .product-right{width:104px;height:112px;margin:-56px 0 0 -52px;}
  .product-top, .product-bottom{width:182px;height:104px;margin:-52px 0 0 -91px;}
  .product-front{background:#1c1d21;animation:pFaceFront 16s infinite;}
  .product-back{background:#0a0a0b;animation:pFaceBack 16s infinite;}
  .product-left{background:#0c0d0f;animation:pFaceLeft 16s infinite;}
  .product-right{background:#16171a;animation:pFaceRight 16s infinite;}
  .product-top{background:#2e2f33;animation:pFaceTop 16s infinite;}
  .product-bottom{background:#08090a;animation:pFaceBottom 16s infinite;}

  @keyframes pFaceFront{
    0%{opacity:0;transform:translateY(-221px) translateZ(52px);}
    26%{opacity:0;transform:translateY(-221px) translateZ(52px);}
    30%{opacity:1;transform:translateY(-221px) translateZ(52px);}
    48%{opacity:1;transform:translateY(0px) translateZ(52px);}
    90%{opacity:1;transform:translateY(0px) translateZ(52px);}
    94%{opacity:0;transform:translateY(-221px) translateZ(52px);}
    100%{opacity:0;transform:translateY(-221px) translateZ(52px);}
  }
  @keyframes pFaceBack{
    0%{opacity:0;transform:translateY(-221px) translateZ(-52px) rotateY(180deg);}
    26%{opacity:0;transform:translateY(-221px) translateZ(-52px) rotateY(180deg);}
    30%{opacity:1;transform:translateY(-221px) translateZ(-52px) rotateY(180deg);}
    48%{opacity:1;transform:translateY(0px) translateZ(-52px) rotateY(180deg);}
    90%{opacity:1;transform:translateY(0px) translateZ(-52px) rotateY(180deg);}
    94%{opacity:0;transform:translateY(-221px) translateZ(-52px) rotateY(180deg);}
    100%{opacity:0;transform:translateY(-221px) translateZ(-52px) rotateY(180deg);}
  }
  @keyframes pFaceLeft{
    0%{opacity:0;transform:translateY(-221px) rotateY(-90deg) translateZ(91px);}
    26%{opacity:0;transform:translateY(-221px) rotateY(-90deg) translateZ(91px);}
    30%{opacity:1;transform:translateY(-221px) rotateY(-90deg) translateZ(91px);}
    48%{opacity:1;transform:translateY(0px) rotateY(-90deg) translateZ(91px);}
    90%{opacity:1;transform:translateY(0px) rotateY(-90deg) translateZ(91px);}
    94%{opacity:0;transform:translateY(-221px) rotateY(-90deg) translateZ(91px);}
    100%{opacity:0;transform:translateY(-221px) rotateY(-90deg) translateZ(91px);}
  }
  @keyframes pFaceRight{
    0%{opacity:0;transform:translateY(-221px) rotateY(90deg) translateZ(91px);}
    26%{opacity:0;transform:translateY(-221px) rotateY(90deg) translateZ(91px);}
    30%{opacity:1;transform:translateY(-221px) rotateY(90deg) translateZ(91px);}
    48%{opacity:1;transform:translateY(0px) rotateY(90deg) translateZ(91px);}
    90%{opacity:1;transform:translateY(0px) rotateY(90deg) translateZ(91px);}
    94%{opacity:0;transform:translateY(-221px) rotateY(90deg) translateZ(91px);}
    100%{opacity:0;transform:translateY(-221px) rotateY(90deg) translateZ(91px);}
  }
  @keyframes pFaceTop{
    0%{opacity:0;transform:translateY(-221px) rotateX(90deg) translateZ(56px);}
    26%{opacity:0;transform:translateY(-221px) rotateX(90deg) translateZ(56px);}
    30%{opacity:1;transform:translateY(-221px) rotateX(90deg) translateZ(56px);}
    48%{opacity:1;transform:translateY(0px) rotateX(90deg) translateZ(56px);}
    90%{opacity:1;transform:translateY(0px) rotateX(90deg) translateZ(56px);}
    94%{opacity:0;transform:translateY(-221px) rotateX(90deg) translateZ(56px);}
    100%{opacity:0;transform:translateY(-221px) rotateX(90deg) translateZ(56px);}
  }
  @keyframes pFaceBottom{
    0%{opacity:0;transform:translateY(-221px) rotateX(-90deg) translateZ(56px);}
    26%{opacity:0;transform:translateY(-221px) rotateX(-90deg) translateZ(56px);}
    30%{opacity:1;transform:translateY(-221px) rotateX(-90deg) translateZ(56px);}
    48%{opacity:1;transform:translateY(0px) rotateX(-90deg) translateZ(56px);}
    90%{opacity:1;transform:translateY(0px) rotateX(-90deg) translateZ(56px);}
    94%{opacity:0;transform:translateY(-221px) rotateX(-90deg) translateZ(56px);}
    100%{opacity:0;transform:translateY(-221px) rotateX(-90deg) translateZ(56px);}
  }

  /* the lid, hidden until the product is in, then appears and seals shut */
  .case-lid{
    width:234px;height:143px;
    margin:-71.5px 0 0 -117px;
    animation:lidMove 16s infinite;
  }
  @keyframes lidMove{
    0%{opacity:0;transform:rotateX(90deg) translateZ(169px);}
    64%{opacity:0;transform:rotateX(90deg) translateZ(169px);}
    68%{opacity:1;transform:rotateX(90deg) translateZ(169px);}
    84%{opacity:1;transform:rotateX(90deg) translateZ(78px);}
    92%{opacity:1;transform:rotateX(90deg) translateZ(78px);}
    96%{opacity:0;transform:rotateX(90deg) translateZ(169px);}
    100%{opacity:0;transform:rotateX(90deg) translateZ(169px);}
  }

  /* six magnets: three on each short side wall, where the lid seats */
  .magnet{
    position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;
    background:var(--white);box-shadow:0 0 8px var(--blue);
    animation:magnetPop 16s infinite;
  }
  .case-left .magnet:nth-child(1){left:18px;}
  .case-left .magnet:nth-child(2){left:68px;animation-delay:.05s;}
  .case-left .magnet:nth-child(3){left:118px;animation-delay:.1s;}
  .case-right .magnet:nth-child(1){left:18px;animation-delay:.15s;}
  .case-right .magnet:nth-child(2){left:68px;animation-delay:.2s;}
  .case-right .magnet:nth-child(3){left:118px;animation-delay:.25s;}
  @keyframes magnetPop{
    0%{opacity:0;transform:scale(.3);}
    82%{opacity:0;transform:scale(.3);}
    86%{opacity:1;transform:scale(1.3);}
    89%{opacity:1;transform:scale(1);}
    92%{opacity:1;transform:scale(1);}
    95%{opacity:0;transform:scale(.3);}
    100%{opacity:0;transform:scale(.3);}
  }

  .assembly-caption{
    text-align:center;
    font-family:var(--display);font-size:13px;font-weight:600;
    letter-spacing:0.1em;text-transform:uppercase;color:var(--blue);
  }

  @media (prefers-reduced-motion:reduce){
    .product-front{animation:none;opacity:1;transform:translateY(0px) translateZ(52px);}
    .product-back{animation:none;opacity:1;transform:translateY(0px) translateZ(-52px) rotateY(180deg);}
    .product-left{animation:none;opacity:1;transform:translateY(0px) rotateY(-90deg) translateZ(91px);}
    .product-right{animation:none;opacity:1;transform:translateY(0px) rotateY(90deg) translateZ(91px);}
    .product-top{animation:none;opacity:1;transform:translateY(0px) rotateX(90deg) translateZ(56px);}
    .product-bottom{animation:none;opacity:1;transform:translateY(0px) rotateX(-90deg) translateZ(56px);}
    .case-lid{animation:none;transform:rotateX(90deg) translateZ(78px);}
    .magnet{animation:none;opacity:1;transform:scale(1);}
  }

  /* ============ FEATURE STRIP ============ */
  .stats{
    border-top:1px solid var(--panel-border);
    border-bottom:1px solid var(--panel-border);
    padding:52px 0;
  }
  .stats .wrap{
    display:grid;grid-template-columns:repeat(4,1fr);gap:36px;
  }
  .feature-item{display:flex;align-items:center;gap:16px;}
  .trust-strip{padding:22px 0;border-bottom:1px solid var(--panel-border);background:var(--panel);}
  .trust-strip-inner{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,4vw,52px);}
  .trust-badge{display:flex;align-items:center;gap:9px;color:var(--gray-light);}
  .trust-badge svg{width:17px;height:17px;color:var(--blue);flex:none;}
  .trust-badge span{font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;}
  .feature-icon{
    flex:none;width:48px;height:48px;border-radius:13px;
    display:flex;align-items:center;justify-content:center;
    background:var(--panel-2);
    border:1px solid var(--panel-border);
  }
  .feature-icon svg{width:24px;height:24px;}
  .feature-copy{display:flex;flex-direction:column;gap:3px;}


  /* ===== How it's made — scroll-driven process ===== */
  #technology{overflow:clip;} /* clip (not hidden) so position:sticky works inside */
  .hm{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px;align-items:start;margin-top:56px;}
  .hm-sticky{position:sticky;top:110px;display:grid;grid-template-columns:56px 1fr;gap:28px;align-items:stretch;}
  .hm-rail{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:8px 0;}
  .hm-line{position:absolute;left:27px;top:20px;bottom:20px;width:2px;background:var(--panel-border);border-radius:2px;overflow:hidden;}
  .hm-line-fill{display:block;width:100%;height:0%;background:linear-gradient(180deg,var(--blue),rgba(0,215,255,0.35));box-shadow:0 0 14px rgba(0,215,255,0.6);transition:height .45s cubic-bezier(.4,0,.2,1);}
  .hm-node{position:relative;z-index:2;background:none;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--gray);width:56px;}
  .hm-node-dot{width:14px;height:14px;border-radius:50%;background:var(--panel-2);border:2px solid var(--panel-border);transition:all .35s;box-shadow:0 0 0 6px var(--black);}
  .hm-node-num{font-family:var(--display);font-size:11px;letter-spacing:0.1em;transition:color .35s;}
  .hm-node.active .hm-node-dot{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 6px var(--black),0 0 18px rgba(0,215,255,0.75);transform:scale(1.15);}
  .hm-node.active .hm-node-num{color:var(--blue);}
  .hm-node.done .hm-node-dot{border-color:var(--blue);background:var(--black);}
  .hm-node:hover .hm-node-num{color:var(--white);}
  .hm-visual{position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:#050607;border:1px solid var(--panel-border);}
  .hm-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .7s ease,transform 1.2s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform;}
  .hm-img.active{opacity:1;transform:scale(1);}
  .hm-visual-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 80% 60% at 50% 110%,rgba(0,215,255,0.16),transparent 60%);}
  .hm-steps{display:flex;flex-direction:column;}
  .hm-step{position:relative;min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding:40px 0 40px 8px;opacity:.28;transition:opacity .5s ease;}
  .hm-step.active{opacity:1;}
  .hm-step .num{font-family:var(--display);font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:14px;}
  .hm-step h3{font-size:clamp(24px,2.4vw,34px);line-height:1.15;margin-bottom:18px;}
  .hm-step p{font-size:15px;color:var(--gray-light);max-width:520px;line-height:1.65;}
  .hm-step .punch{margin-top:20px;padding-left:14px;border-left:2px solid var(--blue);font-family:var(--display);font-size:13px;letter-spacing:0.03em;color:var(--white);line-height:1.5;max-width:480px;}
  .hm-ghost{position:absolute;right:-6px;top:50%;transform:translateY(-52%);font-family:var(--display);font-weight:800;font-size:clamp(120px,15vw,220px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,0.07);pointer-events:none;user-select:none;z-index:-1;}
  .hm-step.active .hm-ghost{-webkit-text-stroke:1px rgba(0,215,255,0.16);}
  @media (max-width:980px){
    .hm{grid-template-columns:1fr;gap:28px;margin-top:40px;}
    .hm-sticky{top:72px;grid-template-columns:1fr;gap:0;z-index:5;}
    .hm-rail{display:none;}
    .hm-visual{aspect-ratio:16/10;max-height:32vh;}
    .hm-steps{padding-top:8px;}
    .hm-step{min-height:auto;padding:36px 0;opacity:1;}
    .hm-ghost{font-size:96px;right:0;top:24px;transform:none;}
  }
  .tech-lead{font-family:var(--display);font-size:15px;letter-spacing:0.08em;text-transform:uppercase;color:var(--blue);margin-top:14px;}
  .tech-intro{font-size:15px;color:var(--gray-light);max-width:640px;margin-top:14px;line-height:1.6;}
  .tech-outro{margin-top:24px;padding:34px 40px;border:1px solid var(--panel-border);background:var(--panel);border-radius:6px;text-align:center;}
  .tech-outro p{font-family:var(--display);font-size:clamp(16px,2vw,22px);line-height:1.45;color:var(--white);max-width:820px;margin:0 auto;}

  /* ===== Features — animated pictograms ===== */
  .pf-svg{width:100%;height:100%;overflow:visible;}
  .pf-audience{margin-top:56px;display:grid;grid-template-columns:200px 1fr;gap:26px;align-items:center;background:linear-gradient(90deg,rgba(0,215,255,.08),transparent 60%),var(--panel);border:1px solid var(--panel-border);border-radius:10px;padding:26px 30px;}
  .pf-audience-icon{color:var(--blue);height:100px;}
  .pf-audience h3{font-size:20px;margin-bottom:8px;}
  .pf-audience p{font-size:14.5px;color:var(--gray-light);line-height:1.6;max-width:720px;}
  @media (max-width:980px){.pf-audience{grid-template-columns:1fr;text-align:center;}}

  /* --- draw-in strokes --- */
  .pf-draw path,.pf-draw rect,.pf-draw circle,.pf-draw{stroke-dasharray:520;stroke-dashoffset:520;}
  .hm-step.active .pf-draw path,.hm-step.active .pf-draw rect,.hm-step.active .pf-draw circle,.hm-step.active .pf-draw,.pf-audience.visible .pf-draw path{animation:pfDraw 1.4s cubic-bezier(.4,0,.2,1) forwards;}
  @keyframes pfDraw{to{stroke-dashoffset:0;}}
  .pf-nodes circle{opacity:0;transform-origin:center;transform-box:fill-box;}
  .hm-step.active .pf-nodes circle{animation:pfPop .5s .9s cubic-bezier(.2,1.4,.4,1) forwards;}
  .hm-step.active .pf-nodes circle:nth-child(2){animation-delay:1s}.hm-step.active .pf-nodes circle:nth-child(3){animation-delay:1.1s}.hm-step.active .pf-nodes circle:nth-child(4){animation-delay:1.2s}.hm-step.active .pf-nodes circle:nth-child(5){animation-delay:1.3s}.hm-step.active .pf-nodes circle:nth-child(6){animation-delay:1.4s}.hm-step.active .pf-nodes circle:nth-child(7){animation-delay:1.5s}
  @keyframes pfPop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
  .pf-sheen{opacity:0;}
  .hm-step.active .pf-sheen{animation:pfSheen 3.2s 1.6s ease-in-out infinite;}
  @keyframes pfSheen{0%{transform:translateX(-14px) skewX(-18deg);opacity:0}15%{opacity:1}45%{transform:translateX(40px) skewX(-18deg);opacity:0}100%{transform:translateX(40px) skewX(-18deg);opacity:0}}
  /* uv */
  .pf-rays path{stroke-dasharray:40;stroke-dashoffset:40;}
  .hm-step.active .pf-rays path{animation:pfRay 1.6s ease-in-out infinite;}
  .hm-step.active .pf-rays path:nth-child(2){animation-delay:.2s}.hm-step.active .pf-rays path:nth-child(3){animation-delay:.4s}.hm-step.active .pf-rays path:nth-child(4){animation-delay:.1s}.hm-step.active .pf-rays path:nth-child(5){animation-delay:.3s}
  @keyframes pfRay{0%{stroke-dashoffset:40;opacity:0}30%{opacity:1}70%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-40;opacity:0}}
  .pf-bounce path{stroke-dasharray:30;stroke-dashoffset:30;opacity:0}
  .hm-step.active .pf-bounce path{animation:pfBounce 1.6s .7s ease-out infinite;}
  .hm-step.active .pf-bounce path:nth-child(2){animation-delay:.9s}.hm-step.active .pf-bounce path:nth-child(3){animation-delay:1.1s}
  @keyframes pfBounce{0%{stroke-dashoffset:30;opacity:0}20%{opacity:.7}60%{stroke-dashoffset:0;opacity:.5}100%{stroke-dashoffset:0;opacity:0}}
  .pf-shield path{stroke-dasharray:260;stroke-dashoffset:260;}
  .hm-step.active .pf-shield path{animation:pfDraw 1.2s .3s forwards;}
  .hm-step.active .pf-shield .pf-check{animation:pfDraw .6s 1.3s forwards;}
  /* clarity arc */
  .hm-step.active .pf-arc[data-pct="92"]{animation:pfArc92 1.6s .3s cubic-bezier(.3,.9,.3,1) forwards;}
  @keyframes pfArc92{to{stroke-dashoffset:22.1;}} /* 276.46 * (1-0.92) */
  .pf-num{opacity:0;}
  .hm-step.active .pf-num{animation:pfFade .6s 1.5s forwards;}
  @keyframes pfFade{to{opacity:1}}
  /* seam */
  .pf-seam{stroke-dasharray:140;stroke-dashoffset:140;filter:drop-shadow(0 0 4px rgba(0,215,255,.9));}
  .hm-step.active .pf-seam{animation:pfDraw 1.1s 1.1s forwards;}
  .hm-step.active .pf-seam2{animation-delay:1.7s;}
  .pf-spark circle{opacity:0;transform-origin:center;transform-box:fill-box;}
  .hm-step.active .pf-spark circle{animation:pfTwinkle 2.4s 2.2s ease-in-out infinite;}
  .hm-step.active .pf-spark circle:nth-child(2){animation-delay:2.6s}.hm-step.active .pf-spark circle:nth-child(3){animation-delay:3s}.hm-step.active .pf-spark circle:nth-child(4){animation-delay:2.4s}
  @keyframes pfTwinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1.6)}}
  /* magnets */
  .pf-mag-l,.pf-mag-r{transform-box:fill-box;transform-origin:center;}
  .hm-step.active .pf-mag-l{animation:pfMagL 2.6s .4s cubic-bezier(.5,0,.2,1) infinite;}
  .hm-step.active .pf-mag-r{animation:pfMagR 2.6s .4s cubic-bezier(.5,0,.2,1) infinite;}
  @keyframes pfMagL{0%,15%{transform:translateY(0)}45%,80%{transform:translateY(14px)}100%{transform:translateY(0)}}
  @keyframes pfMagR{0%,100%{transform:translateY(0)}}
  .pf-snap circle{opacity:0;transform-box:fill-box;transform-origin:center;}
  .hm-step.active .pf-snap circle{animation:pfSnap 2.6s .4s ease-out infinite;}
  @keyframes pfSnap{0%,40%{opacity:0;transform:scale(.6)}48%{opacity:1;transform:scale(3.2)}62%{opacity:0;transform:scale(5)}100%{opacity:0}}
  /* corners */
  .pf-corner-round{stroke-dasharray:320;stroke-dashoffset:320;}
  .hm-step.active .pf-corner-round{animation:pfDraw 1.4s .2s forwards;}
  .pf-corner-dots circle{opacity:1;}
  .hm-step.active .pf-corner-dots circle{animation:pfFadeOut .6s 1.2s forwards;}
  @keyframes pfFadeOut{to{opacity:0}}
  .pf-corner-hl{stroke-dasharray:40;stroke-dashoffset:40;opacity:0;transform-box:fill-box;transform-origin:center;}
  .hm-step.active .pf-corner-hl{animation:pfCornerHl 3s 1.6s ease-in-out infinite;}
  @keyframes pfCornerHl{0%{stroke-dashoffset:40;opacity:0}20%{opacity:1}50%{stroke-dashoffset:0;opacity:1}80%,100%{stroke-dashoffset:-40;opacity:0}}
  /* audience */
  .pf-aud{opacity:0;transform:translateY(10px);transform-box:fill-box;transform-origin:center;transition:opacity .6s,transform .6s;}
  .pf-audience.visible .pf-aud1{opacity:1;transform:none;transition-delay:.1s}
  .pf-audience.visible .pf-aud2{opacity:1;transform:none;transition-delay:.35s}
  .pf-audience.visible .pf-aud3{opacity:1;transform:none;transition-delay:.6s}
  @media (prefers-reduced-motion:reduce){
    .hm-step,.hm-step *{animation:none!important;transition:none!important;stroke-dashoffset:0!important;opacity:1!important;transform:none!important;}
    .hm-step.active .pf-arc[data-pct="92"]{stroke-dashoffset:22.1!important;}
  }


  .pf-svg .g{filter:drop-shadow(0 0 3px rgba(0,215,255,.55));}
  .pf-svg .pf-faint{opacity:.32;}
  .pf-svg .pf-dim{opacity:0;}
  .hm-step.active .pf-svg .pf-dim{animation:pfFade .5s 1.2s forwards;}
  .hm-spec .pf-icon{height:84px;}
  .hm-spec{width:150px;padding:14px 10px 12px;}

  .pf-aud-tiles{display:flex;gap:12px;}
  .pf-aud-tile{display:flex;flex-direction:column;align-items:center;gap:6px;width:104px;padding:10px 6px 10px;background:rgba(0,0,0,.35);border:1px solid var(--panel-border);border-radius:8px;}
  .pf-aud-tile .pf-icon{height:74px;width:100%;color:var(--blue);display:flex;align-items:center;justify-content:center;}
  .pf-aud-tile .pf-svg{width:100%;height:100%;overflow:visible;}
  .pf-aud-tile span{font-family:var(--display);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-light);}
  .pf-audience{grid-template-columns:auto 1fr;}
  .pf-audience.visible .pf-draw path,.pf-audience.visible .pf-draw rect,.pf-audience.visible .pf-draw circle{animation:pfDraw 1.4s cubic-bezier(.4,0,.2,1) forwards;}
  .pf-audience.visible .pf-nodes circle{animation:pfPop .5s 1s cubic-bezier(.2,1.4,.4,1) forwards;}
  .pf-audience.visible .pf-aud-tile:nth-child(2) .pf-draw *{animation-delay:.25s} .pf-audience.visible .pf-aud-tile:nth-child(3) .pf-draw *{animation-delay:.5s}
  @media (max-width:980px){.pf-aud-tiles{justify-content:center;flex-wrap:wrap;}}
  /* --- specs (mini pictograms under each step) --- */
  .hm-specs{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap;}
  .hm-spec{display:flex;flex-direction:column;align-items:center;gap:6px;width:132px;padding:12px 8px 10px;background:var(--panel);border:1px solid var(--panel-border);border-radius:8px;}
  .hm-spec .pf-icon{height:64px;width:100%;color:var(--blue);display:flex;align-items:center;justify-content:center;}
  .hm-spec .pf-svg{width:100%;height:100%;overflow:visible;}
  .hm-spec span{font-family:var(--display);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-light);text-align:center;line-height:1.3;}
  .hm-step.active .hm-spec span{color:var(--white);}
  /* --- hotspots on the photo --- */
  .hm-hotspots{position:absolute;inset:0;pointer-events:none;}
  .hm-hs-group{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .35s;}
  .hm-hs-group.active{opacity:1;visibility:visible;}
  .hm-hs{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;align-items:center;gap:0;opacity:0;}
  .hm-hs-group.active .hm-hs{animation:hmHsIn .6s var(--d) cubic-bezier(.2,.8,.2,1) forwards;}
  @keyframes hmHsIn{from{opacity:0;transform:translate(-50%,-50%) scale(.85)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
  .hm-hs-dot{position:relative;width:12px;height:12px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px rgba(0,0,0,.55),0 0 14px rgba(0,215,255,.9);flex:none;}
  .hm-hs-dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid var(--blue);animation:hmPulse 1.8s var(--d) ease-out infinite;}
  @keyframes hmPulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.2);opacity:0}}
  .hm-hs-line{width:0;height:1px;background:linear-gradient(90deg,var(--blue),rgba(0,215,255,.2));flex:none;}
  .hm-hs-group.active .hm-hs-line{animation:hmLine .5s calc(var(--d) + .25s) forwards;}
  @keyframes hmLine{to{width:34px}}
  .hm-hs-label{font-family:var(--display);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--white);background:rgba(5,6,7,.82);border:1px solid rgba(0,215,255,.35);padding:6px 10px;border-radius:4px;white-space:nowrap;opacity:0;backdrop-filter:blur(4px);}
  .hm-hs-group.active .hm-hs-label{animation:pfFade .4s calc(var(--d) + .55s) forwards;}
  .hm-hs-left{flex-direction:row-reverse;transform:translate(-100%,-50%);}
  .hm-hs-left .hm-hs-line{background:linear-gradient(270deg,var(--blue),rgba(0,215,255,.2));}
  .hm-hs-left .hm-hs-dot{margin-left:0;}
  .hm-hs-group.active .hm-hs-left{animation-name:hmHsInL;}
  @keyframes hmHsInL{from{opacity:0;transform:translate(-100%,-50%) scale(.85)}to{opacity:1;transform:translate(-100%,-50%) scale(1)}}
  .hm-hs-right{transform:translate(0,-50%);}
  .hm-hs-group.active .hm-hs-right{animation-name:hmHsInR;}
  @keyframes hmHsInR{from{opacity:0;transform:translate(0,-50%) scale(.85)}to{opacity:1;transform:translate(0,-50%) scale(1)}}
  @media (max-width:980px){.hm-hs-label{font-size:9px;padding:4px 7px;} .hm-hs-line{display:none;} .hm-specs{gap:10px;} .hm-spec{width:96px;}}

  .uv-science.uv-pending .section-head,.uv-science.uv-pending .uv-chart-panel{opacity:.38;filter:saturate(.45) brightness(.8);transition:opacity .6s,filter .6s;}
  .uv-science.uv-pending:hover .section-head,.uv-science.uv-pending:hover .uv-chart-panel{opacity:.5;}
  .uv-science.uv-pending .uv-chart-panel{pointer-events:none;}
  .uv-citation.uv-status{display:inline-flex;width:auto;align-items:center;gap:10px;margin-top:22px;padding:10px 16px;border:1px solid rgba(0,215,255,.35);border-radius:999px;background:rgba(0,215,255,.06);color:var(--white);font-family:var(--display);font-size:12px;letter-spacing:.06em;text-transform:uppercase;}
  .uv-status svg{color:var(--blue);}

  /* ===== Featured product — redesigned ===== */
  .detail{grid-template-columns:1fr 1.1fr;gap:64px;align-items:center;}
  .detail .detail-visual{width:100%;max-width:560px;border-radius:12px;background:
      radial-gradient(circle at 50% 55%, rgba(0,215,255,.14), rgba(0,215,255,0) 60%),
      #05070a;position:relative;overflow:hidden;}
  .detail-visual::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
      background-image:linear-gradient(rgba(0,215,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,215,255,.05) 1px,transparent 1px);background-size:32px 32px;
      mask-image:radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);-webkit-mask-image:radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);}
  .detail-info h2{font-size:clamp(28px,3vw,44px);line-height:1.08;margin-bottom:16px;}
  .detail-info p.desc{font-size:15px;line-height:1.65;color:var(--gray-light);max-width:560px;margin-bottom:28px;}
  .detail-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:22px;}
  .dstat{background:linear-gradient(180deg,rgba(0,215,255,.07),rgba(0,215,255,.02));border:1px solid rgba(0,215,255,.22);border-radius:10px;padding:14px 14px 12px;display:flex;flex-direction:column;gap:6px;}
  .dstat svg{width:22px;height:22px;color:var(--blue);}
  .dstat strong{font-family:var(--display);font-size:clamp(15px,1.35vw,20px);color:var(--white);line-height:1.1;white-space:nowrap;}
  .dstat span{font-size:12px;color:var(--gray-light);line-height:1.35;}
  .detail-specs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--panel-border);border:1px solid var(--panel-border);border-radius:10px;overflow:hidden;margin-bottom:28px;}
  .dspec{display:flex;gap:12px;align-items:flex-start;background:#07080b;padding:14px 16px;transition:background .3s;}
  .dspec:hover{background:#0b0e12;}
  .dspec svg{width:20px;height:20px;flex:none;color:var(--blue);margin-top:2px;}
  .dspec span{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);margin-bottom:3px;font-family:var(--display);}
  .dspec strong{display:block;font-size:14px;font-weight:500;color:var(--white);line-height:1.4;}
  .detail-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
  .detail-cta-note{font-size:13px;color:var(--gray-light);}
  @media (max-width:1100px){.detail-stats{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:900px){.detail{grid-template-columns:1fr;gap:36px;}.detail .detail-visual{max-width:520px;}}
  @media (max-width:560px){.detail-specs{grid-template-columns:1fr;}}

  /* ===== About / story ===== */
  #about{position:relative;overflow:clip;padding-top:120px;padding-bottom:120px;}
  .story{position:relative;z-index:1;}
  .story-head{max-width:880px;}
  .story-h2{font-size:clamp(32px,4.4vw,62px);line-height:1.05;margin-top:14px;}
  .story-h2 span{color:var(--blue);}
  .story-lead{font-size:clamp(16px,1.4vw,20px);color:var(--gray-light);margin-top:22px;max-width:640px;line-height:1.55;}
  .story-track{position:relative;margin-top:80px;}
  .st-line{position:absolute;left:22px;right:22px;top:22px;height:2px;background:var(--panel-border);}
  .st-line-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),rgba(0,215,255,.4));box-shadow:0 0 14px rgba(0,215,255,.7);transition:width 1.8s cubic-bezier(.4,0,.2,1) .2s;}
  .story.on .st-line-fill{width:100%;}
  .st-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;position:relative;}
  .st-step{opacity:.15;transform:translateY(18px);transition:opacity .7s,transform .7s cubic-bezier(.16,.8,.3,1);transition-delay:calc(.35s + var(--i)*.55s);}
  .story.on .st-step{opacity:1;transform:none;}
  .st-node{position:relative;width:44px;height:50px;margin-bottom:26px;}
  .st-node svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
  .st-node path{fill:#05070a;stroke:var(--panel-border);stroke-width:2;transition:stroke .5s,fill .5s,filter .5s;transition-delay:calc(.35s + var(--i)*.55s);}
  .story.on .st-node path{stroke:var(--blue);fill:#06141a;filter:drop-shadow(0 0 8px rgba(0,215,255,.7));}
  .st-node span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:12px;letter-spacing:.06em;color:var(--white);}
  .st-step h3{font-size:clamp(19px,1.6vw,24px);margin-bottom:12px;}
  .st-step p{font-size:15px;line-height:1.65;color:var(--gray-light);max-width:360px;}
  .story-result{margin-top:90px;border:1px solid var(--panel-border);border-radius:14px;background:
      radial-gradient(ellipse at 10% 0%,rgba(0,215,255,.12),transparent 55%),#07090c;overflow:hidden;}
  .sr-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;padding:26px 36px;border-bottom:1px solid var(--panel-border);}
  .sr-label{font-family:var(--display);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);}
  .sr-sub{font-size:14px;color:var(--gray-light);margin:0;}
  .sr-items{display:grid;grid-template-columns:repeat(3,1fr);}
  .sr-item{position:relative;padding:34px 36px 38px;opacity:0;transform:translateY(14px);transition:opacity .7s,transform .7s cubic-bezier(.16,.8,.3,1),background .4s;transition-delay:calc(2s + var(--i)*.2s),calc(2s + var(--i)*.2s),0s;}
  .sr-item + .sr-item{border-left:1px solid var(--panel-border);}
  .sr-item:hover{background:rgba(0,215,255,.035);}
  .story.on .sr-item{opacity:1;transform:none;}
  .sr-ico{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--blue);background:rgba(0,215,255,.07);border:1px solid rgba(0,215,255,.28);box-shadow:0 0 22px rgba(0,215,255,.12) inset;margin-bottom:22px;}
  .sr-ico svg{width:34px;height:34px;filter:drop-shadow(0 0 4px rgba(0,215,255,.6));}
  .sr-ico svg *{stroke-dasharray:140;stroke-dashoffset:140;transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1);transition-delay:calc(2.2s + var(--i)*.2s);}
  .story.on .sr-ico svg *{stroke-dashoffset:0;}
  .sr-item strong{font-family:var(--display);font-weight:700;font-size:clamp(19px,1.7vw,26px);line-height:1.2;color:var(--white);display:block;margin-bottom:10px;}
  .sr-item p{font-size:14.5px;line-height:1.6;color:var(--gray-light);margin:0;max-width:320px;}
  .story-quote{margin:90px 0 0;padding:0;border:0;max-width:980px;}
  .story-quote p{font-family:var(--display);font-size:clamp(22px,2.6vw,38px);line-height:1.3;color:var(--white);}
  .story-quote .sq-a{display:block;color:var(--gray-light);opacity:0;transform:translateY(12px);transition:opacity .8s,transform .8s;transition-delay:2.6s;}
  .story-quote .sq-b{display:block;margin-top:10px;opacity:0;transform:translateY(12px);transition:opacity .8s,transform .8s;transition-delay:3s;
      background:linear-gradient(90deg,#fff 0%,#bff4ff 55%,var(--blue) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .story.on .story-quote .sq-a,.story.on .story-quote .sq-b{opacity:1;transform:none;}
  .story-quote cite{display:inline-block;margin-top:26px;font-style:normal;font-family:var(--display);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);border-top:1px solid rgba(0,215,255,.4);padding-top:14px;}
  @media (max-width:900px){
    .st-line{left:21px;right:auto;top:22px;bottom:22px;width:2px;height:auto;}
    .st-line-fill{width:100%;height:0;transition:height 1.8s cubic-bezier(.4,0,.2,1) .2s;}
    .story.on .st-line-fill{height:100%;width:100%;}
    .st-steps{grid-template-columns:1fr;gap:34px;}
    .st-step{display:grid;grid-template-columns:44px 1fr;column-gap:22px;}
    .st-node{grid-row:span 2;margin-bottom:0;}
    .sr-items{grid-template-columns:1fr;}
    .sr-item + .sr-item{border-left:0;border-top:1px solid var(--panel-border);}
    .sr-item,.sr-head{padding-left:24px;padding-right:24px;}
  }
  @media (prefers-reduced-motion:reduce){
    .story *{transition:none!important;}
  }

  /* ===== Partner section — benefits ===== */
  .contact-info .intro{font-size:16px;line-height:1.65;max-width:600px;}
  .pb-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:30px 0 30px;}
  .pb-card{display:flex;gap:14px;align-items:flex-start;padding:16px 16px 16px 14px;border:1px solid var(--panel-border);border-radius:12px;background:linear-gradient(180deg,rgba(0,215,255,.045),rgba(0,215,255,0) 70%),#07090c;transition:border-color .3s,transform .3s,box-shadow .3s;}
  .pb-card:hover{border-color:rgba(0,215,255,.45);transform:translateY(-2px);box-shadow:0 10px 30px -18px rgba(0,215,255,.6);}
  .pb-card .benefit-icon{flex:none;}
  .pb-card strong{display:block;font-family:var(--display);font-size:15px;color:var(--white);margin-bottom:5px;line-height:1.25;}
  .pb-card span{display:block;font-size:13.5px;line-height:1.5;color:var(--gray-light);}
  .partner-steps{border:1px solid rgba(0,215,255,.28);border-radius:12px;padding:18px 20px;background:rgba(0,215,255,.04);margin-bottom:30px;}
  .ps-label{font-family:var(--display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:12px;}
  .ps-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
  .ps-step{display:flex;align-items:center;gap:10px;font-size:13.5px;line-height:1.35;color:var(--white);}
  .ps-num{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--display);font-size:12px;color:#001018;background:var(--blue);box-shadow:0 0 12px rgba(0,215,255,.6);flex:none;}
  .ps-arrow{display:none;}
  .contact-details-row{display:flex;gap:40px;flex-wrap:wrap;}
  .contact-details-row .contact-detail{margin:0;}
  @media (max-width:640px){.pb-grid{grid-template-columns:1fr;}.ps-row{grid-template-columns:1fr;}}
  .feature-value{
    font-family:var(--display);font-weight:800;
    font-size:clamp(17px,1.7vw,22px);color:var(--blue);line-height:1.1;
  }
  .feature-label{font-size:12.5px;color:var(--gray-light);letter-spacing:0.02em;}
  @media (max-width:900px){.stats .wrap{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:520px){.stats .wrap{grid-template-columns:1fr;}}

  /* ============ SECTION GENERIC ============ */
  section{padding:120px 0;position:relative;overflow:hidden;}
  .section-head{max-width:640px;margin-bottom:64px;}
  .section-head p{font-size:16px;}

  /* ============ PROCESS ============ */
  .process-list{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;}
  .process-step{border-top:1px solid var(--panel-border);padding-top:24px;}
  .process-step .num{font-family:var(--display);font-weight:800;font-size:13px;color:var(--blue);letter-spacing:0.1em;margin-bottom:14px;display:block;}
  .process-step h3{margin-bottom:12px;}
  .process-step p{font-size:14.5px;}
  @media (max-width:820px){.process-list{grid-template-columns:1fr;}}

  /* ============ ALTERNATING FEATURE ROWS ============ */
  .feature-row{
    display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
    padding:90px 0;
  }
  .feature-row:first-of-type{padding-top:0;}
  .feature-row + .feature-row{border-top:1px solid var(--panel-border);}
  .feature-row.flip .feature-visual{order:2;}
  .feature-row.flip .feature-text{order:1;}
  .feature-visual{
    aspect-ratio:4/3;
    max-width:82%;
    margin:0 auto;
    background:radial-gradient(circle at 30% 25%, rgba(0,215,255,0.12), transparent 65%), var(--panel);
    border:1px solid var(--panel-border);
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;position:relative;
  }
  .feature-visual svg{width:48%;height:48%;}
  .feature-visual img{
    width:100%;height:100%;object-fit:cover;display:block;
    filter:saturate(0.85) brightness(0.92);
    opacity:0.9;
  }
  @media (max-width:860px){.feature-visual{max-width:100%;}}
  .feature-text .num{font-family:var(--display);font-weight:800;font-size:13px;color:var(--blue);letter-spacing:0.16em;margin-bottom:18px;display:block;}
  .feature-text h3{font-size:clamp(22px,2.6vw,28px);margin-bottom:16px;}
  .feature-text p{font-size:15px;max-width:420px;}
  @media (max-width:860px){
    .feature-row, .feature-row.flip{grid-template-columns:1fr;gap:34px;padding:60px 0;}
    .feature-row.flip .feature-visual{order:1;}
    .feature-row.flip .feature-text{order:2;}
  }

  /* ============ CATALOGUE ============ */
  .cat-filters{
    display:flex;gap:10px;flex-wrap:wrap;margin-bottom:40px;
  }
  .cat-filter{
    font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:0.08em;
    text-transform:uppercase;color:var(--gray-light);
    background:transparent;border:1px solid var(--panel-border);
    padding:11px 20px;border-radius:2px;cursor:pointer;
    transition:border-color .2s ease, color .2s ease, background .2s ease;
  }
  .cat-filter:hover{border-color:var(--blue);color:var(--white);}
  .cat-filter.active{border-color:var(--blue);background:var(--blue-dim);color:var(--white);}
  .product-card.hidden{display:none;}
  .catalogue-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
    background:var(--panel-border);
    border:1px solid var(--panel-border);
  }
  .product-card{
    background:var(--panel);
    padding:38px 30px;
    transition:background .25s ease, transform .15s ease-out, box-shadow .4s ease;
    display:flex;flex-direction:column;
    transform-style:preserve-3d;will-change:transform;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.02), 0 1px 2px rgba(0,0,0,0.2);
  }
  .product-card:hover{
    background:var(--panel-2);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      0 2px 4px rgba(0,0,0,0.3),
      0 12px 24px rgba(0,0,0,0.32),
      0 30px 55px rgba(0,0,0,0.28),
      0 0 40px rgba(0,215,255,0.06);
  }
  .product-visual{
    height:190px;margin:-38px -30px 26px;position:relative;overflow:hidden;
    border-bottom:1px solid var(--panel-border);background:#07080a;
  }
  .product-visual.ill{
    --gc:0,215,255;--gx:80%;--gy:20%;
    background:
      radial-gradient(circle at var(--gx) var(--gy), rgba(var(--gc),.34) 0, rgba(var(--gc),0) 46%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90.00' height='51.96'%3E%3Cpath d='M57.00 25.98 L43.50 49.36 L16.50 49.36 L3.00 25.98 L16.50 2.60 L43.50 2.60 Z' fill='%2300d7ff' fill-opacity='.035'/%3E%3Cpath d='M102.00 0.00 L88.50 23.38 L61.50 23.38 L48.00 0.00 L61.50 -23.38 L88.50 -23.38 Z' fill='%2300d7ff' fill-opacity='.035'/%3E%3Cpath d='M102.00 51.96 L88.50 75.34 L61.50 75.34 L48.00 51.96 L61.50 28.58 L88.50 28.58 Z' fill='%2300d7ff' fill-opacity='.035'/%3E%3Cpath d='M12.00 0.00 L-1.50 23.38 L-28.50 23.38 L-42.00 0.00 L-28.50 -23.38 L-1.50 -23.38 Z' fill='%2300d7ff' fill-opacity='.035'/%3E%3Cpath d='M12.00 51.96 L-1.50 75.34 L-28.50 75.34 L-42.00 51.96 L-28.50 28.58 L-1.50 28.58 Z' fill='%2300d7ff' fill-opacity='.035'/%3E%3C/svg%3E"),
      linear-gradient(180deg,#0d0f13,#07080a);
    background-size:auto, 90.00px 51.96px, auto;
  }

  .product-visual .cat-word{position:absolute;right:14px;top:12px;font-family:var(--display);font-weight:800;font-size:clamp(16px,1.55vw,26px);line-height:1;letter-spacing:.06em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1px rgba(var(--gc),.34);pointer-events:none;user-select:none;white-space:nowrap;transition:-webkit-text-stroke-color .4s;}
  .product-card:hover .product-visual .cat-word{-webkit-text-stroke-color:rgba(var(--gc),.5);}
  .product-visual.game .cat-ill{padding:8px 0;}

  .product-visual .cat-art{position:absolute;inset:0;width:100%;height:100%;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1);}
  .product-card:hover .product-visual .cat-art{transform:scale(1.05);}
  .product-visual.art .cat-word{right:14px;top:12px;-webkit-text-stroke:1px rgba(var(--gc),.42);}

  .product-visual .cat-logo{position:absolute;top:auto;left:auto;right:14px;bottom:12px;max-height:46px;max-width:38%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.7));z-index:2;}
  .product-visual .cat-logo[hidden]{display:none;}
  .product-visual.game .cat-ill{padding:8px 0;}

  .product-visual .cat-wm{position:absolute;top:50%;left:auto;right:-4%;bottom:auto;transform:translateY(-50%);height:165%;width:auto;max-width:none;object-fit:contain;opacity:1;pointer-events:none;z-index:0;filter:blur(.3px);transition:opacity .5s,transform .8s cubic-bezier(.2,.7,.2,1);}
  .product-card:hover .product-visual .cat-wm{opacity:1;transform:translateY(-50%) scale(1.04);}
  .product-visual.game .cat-ill{z-index:1;}
  .product-visual .cat-logo{max-height:80px;max-width:36%;filter:drop-shadow(0 0 10px rgba(var(--gc),.85)) drop-shadow(0 2px 4px rgba(0,0,0,.6));}
  .product-visual .cat-ill{position:absolute;inset:0;width:100%;height:100%;padding:12px 0;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1);}
  .product-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .5s;}
  .product-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 62%,rgba(11,12,14,.85) 100%);pointer-events:none;}
  .product-card:hover .product-visual .cat-ill,.product-card:hover .product-visual img{transform:scale(1.045);}
  @media (min-width:1600px){.product-visual{height:220px;}}
  @media (max-width:600px){.product-visual{height:170px;}}
  .product-card h3{margin-bottom:8px;letter-spacing:0.02em;}
  .product-spec{font-size:13px;color:var(--gray-light);margin-bottom:20px;flex:1;}
  .product-link{
    font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:0.12em;
    text-transform:uppercase;color:var(--blue);
    display:inline-flex;align-items:center;gap:8px;
  }
  .product-link svg{width:12px;height:12px;}
  @media (max-width:900px){.catalogue-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:600px){.catalogue-grid{grid-template-columns:1fr;}}
  @media (min-width:1400px){.catalogue-grid{grid-template-columns:repeat(4,1fr);}}

  /* ============ PRODUCT DETAIL ============ */
  .detail{
    display:grid;grid-template-columns:0.9fr 1.1fr;gap:70px;align-items:center;
  }
  .detail-visual{
    aspect-ratio:1/1;
    width:70%;
    margin:0 auto;
    background:#000000;
    border:1px solid var(--panel-border);
    display:flex;align-items:center;justify-content:center;
    position:relative;overflow:hidden;cursor:grab;
  }
  .detail-visual:active{cursor:grabbing;}
  .detail-visual svg{width:62%;height:62%;}
  .detail-visual canvas{display:block;outline:none;}
  .viewer-hint{
    position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
    font-family:var(--display);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--gray-light);background:rgba(0,0,0,0.55);padding:7px 16px;border-radius:20px;
    pointer-events:none;opacity:0;transition:opacity .4s ease;white-space:nowrap;
  }
  .detail-visual.loaded .viewer-hint{opacity:1;}
  .viewer-loading{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-family:var(--display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--gray-light);transition:opacity .3s ease;
  }
  .detail-visual.loaded .viewer-loading{opacity:0;pointer-events:none;}
  .detail-tag{font-family:var(--display);font-size:11px;color:var(--blue);letter-spacing:0.14em;text-transform:uppercase;margin-bottom:16px;}
  .detail h2{margin-bottom:18px;}
  .detail p.desc{font-size:15.5px;margin-bottom:34px;max-width:480px;}
  .spec-table{border-top:1px solid var(--panel-border);margin-bottom:36px;}
  .spec-row{
    display:flex;justify-content:space-between;
    padding:14px 0;border-bottom:1px solid var(--panel-border);
    font-size:14px;
  }
  .spec-row span:first-child{color:var(--gray-light);}
  .spec-row span:last-child{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:0.02em;}
  @media (max-width:900px){.detail{grid-template-columns:1fr;}.detail-visual{width:88%;}}

  /* ============ UV SCIENCE (interactive transmittance chart) ============ */
  .uv-science{
    border-top:1px solid var(--panel-border);
    border-bottom:1px solid var(--panel-border);
    background:radial-gradient(ellipse 70% 50% at 50% 0%, rgba(0,215,255,0.06), transparent 70%), var(--panel);
  }
  .uv-science .section-head{max-width:720px;margin-bottom:44px;}
  .uv-science h2 .accent{color:var(--blue);}
  .uv-chart-panel{
    border:1px solid var(--panel-border);
    background:var(--black);
    padding:28px 24px 12px;
    height:380px;
    position:relative;
  }
  .uv-chart-panel canvas{
    width:100%!important;height:100%!important;
    clip-path:inset(0 100% 0 0);
    transition:clip-path 2.6s cubic-bezier(.16,.6,.2,1);
  }
  .uv-chart-panel canvas.revealed{clip-path:inset(0 0% 0 0);}
  .uv-citation{
    margin-top:18px;font-size:12.5px;color:var(--gray-light);
    display:flex;align-items:center;gap:8px;
  }
  .uv-citation svg{width:14px;height:14px;flex:none;color:var(--blue);}
  @media (max-width:700px){.uv-chart-panel{height:300px;padding:20px 12px 10px;}}

  /* ============ ABOUT ============ */
  .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start;}
  .about-grid .manifesto{font-size:clamp(24px,3vw,34px);font-family:var(--display);font-weight:700;line-height:1.3;color:var(--white);}
  .about-grid .manifesto span{color:var(--blue);}
  .pillars{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--panel-border);border:1px solid var(--panel-border);}
  .pillar{background:var(--panel);padding:28px 24px;}
  .pillar svg{width:26px;height:26px;margin-bottom:16px;color:var(--blue);}
  .pillar h3{font-size:15px;margin-bottom:8px;}
  .pillar p{font-size:13px;}
  @media (max-width:900px){.about-grid{grid-template-columns:1fr;}.about-grid .manifesto{margin-bottom:10px;}}

  /* ============ FIND A STORE ============ */
  .stockists-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;margin-bottom:40px;}

  /* ============ PARTNER COVERAGE MAP ============ */
  .coverage-map-wrap{
    position:relative;border:1px solid var(--panel-border);border-radius:10px;
    background:radial-gradient(ellipse at 50% 30%, rgba(0,215,255,0.06), transparent 70%), #0c0d0f;
    padding:26px 20px 20px;margin-bottom:44px;overflow:hidden;
  }
  .coverage-map-caption{
    font-size:12px;color:var(--gray-light);text-align:center;margin-top:10px;
  }
  .coverage-map-caption b{color:var(--blue);font-family:var(--display);}
  .coverage-map-svg{width:100%;height:auto;display:block;max-width:640px;margin:0 auto;}
  .coverage-pin-core{fill:var(--blue);}
  .coverage-pin-ring{
    fill:none;stroke:var(--blue);stroke-width:1.5;opacity:0.6;
    transform-origin:center;transform-box:fill-box;
    animation:coverage-pulse 2.4s ease-out infinite;
  }
  .coverage-pin-label{
    font-family:var(--display);font-size:17px;fill:var(--white);letter-spacing:0.03em;
  }
  @keyframes coverage-pulse{
    0%{transform:scale(0.3);opacity:0.7;}
    100%{transform:scale(2.6);opacity:0;}
  }
  .stockists-filter{display:flex;align-items:center;gap:10px;}
  .stockists-filter label{font-size:12px;color:var(--gray-light);letter-spacing:0.06em;text-transform:uppercase;}
  .stockists-filter select{
    background:var(--panel);border:1px solid var(--panel-border);color:var(--white);
    padding:10px 14px;font-family:var(--body);font-size:13.5px;border-radius:2px;min-width:180px;
  }
  .stockists-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--panel-border);border:1px solid var(--panel-border);}
  @media (max-width:900px){.stockists-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:600px){.stockists-grid{grid-template-columns:1fr;}}
  .stockist-card{background:var(--panel);padding:28px 26px;display:flex;align-items:center;gap:16px;transition:background .2s ease, transform .15s ease-out, box-shadow .25s ease;position:relative;transform-style:preserve-3d;will-change:transform;}
  .stockist-card:hover{
    transform:translateY(-3px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      0 2px 4px rgba(0,0,0,0.28),
      0 10px 20px rgba(0,0,0,0.3),
      0 24px 44px rgba(0,0,0,0.26),
      0 0 34px rgba(0,215,255,0.05);
    background:var(--panel-2);
  }
  .stockist-card.featured{box-shadow:inset 3px 0 0 var(--blue);}
  .stockist-logo{
    width:52px;height:52px;border-radius:50%;flex:none;
    background:var(--panel-2);border:1px solid var(--panel-border);
    display:flex;align-items:center;justify-content:center;overflow:hidden;
  }
  .stockist-logo img{width:100%;height:100%;object-fit:cover;}
  .stockist-logo span{font-family:var(--display);font-weight:800;font-size:18px;color:var(--blue);}
  .stockist-name{font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--white);margin-bottom:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  .stockist-badge{
    display:inline-flex;align-items:center;gap:4px;
    background:var(--blue-dim);color:var(--blue);
    font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;
    padding:3px 8px;border-radius:20px;
  }
  .stockist-badge svg{width:10px;height:10px;}
  .stockist-loc{font-size:12.5px;color:var(--gray-light);display:flex;align-items:center;gap:5px;}
  .stockist-loc svg{width:12px;height:12px;flex:none;}
  .stockist-link{margin-left:auto;flex:none;color:var(--blue);}
  .stockist-link svg{width:16px;height:16px;}

  .stockists-empty{
    grid-column:1/-1;text-align:center;padding:70px 20px;
    border:1px dashed var(--panel-border);
  }
  .stockists-empty svg{width:40px;height:40px;color:var(--gray);margin-bottom:18px;}
  .stockists-empty h3{font-size:19px;margin-bottom:10px;}
  .stockists-empty p{color:var(--gray-light);font-size:14px;max-width:400px;margin:0 auto 22px;}

  /* ============ COMMUNITY GALLERY ============ */
  .community-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:10px;
  }
  @media (max-width:900px){.community-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.community-grid{grid-template-columns:1fr;}}
  .community-card{
    position:relative;aspect-ratio:4/5;border-radius:10px;overflow:hidden;
    border:1px solid var(--panel-border);background:var(--panel);
  }
  .community-card img{width:100%;height:100%;object-fit:cover;display:block;}
  .community-card-caption{
    position:absolute;left:0;right:0;bottom:0;padding:12px 14px;
    background:linear-gradient(to top, rgba(0,0,0,0.82), transparent);
    font-family:var(--display);font-size:11.5px;color:var(--white);
  }
  .community-card-caption span{display:block;color:var(--blue);font-size:10.5px;margin-top:2px;}
  .community-empty{
    text-align:center;padding:60px 20px;border:1px dashed var(--panel-border);border-radius:10px;
    color:var(--gray-light);margin-bottom:30px;
  }
  .community-empty svg{width:34px;height:34px;color:var(--gray);margin-bottom:14px;}
  .community-empty p{font-size:14px;}
  .community-grid:not(:empty) + .community-empty{display:none;}
  .community-cta{text-align:center;}

  #communityOverlay{
    position:fixed;inset:0;z-index:2400;background:rgba(5,5,6,0.88);
    display:flex;align-items:center;justify-content:center;padding:20px;
    opacity:0;pointer-events:none;transition:opacity .25s ease;
  }
  #communityOverlay.open{opacity:1;pointer-events:auto;}
  .community-modal{
    position:relative;width:100%;max-width:440px;max-height:88vh;overflow-y:auto;
    background:var(--panel);border:1px solid var(--panel-border);border-radius:14px;padding:32px;
  }
  .community-modal h3{font-size:20px;margin-bottom:8px;}
  .community-modal-sub{color:var(--gray-light);font-size:13px;margin-bottom:22px;}
  .community-modal-close{
    position:absolute;top:16px;right:16px;width:30px;height:30px;border-radius:8px;
    background:none;border:1px solid var(--panel-border);color:var(--white);font-size:18px;line-height:1;
    cursor:pointer;transition:border-color .2s ease;
  }
  .community-modal-close:hover{border-color:var(--blue);}
  .community-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;font-size:12px;color:var(--gray-light);}
  .community-field input{
    background:rgba(255,255,255,0.03);border:1px solid var(--panel-border);border-radius:8px;
    color:var(--white);padding:11px 12px;font-family:var(--body);font-size:14px;
  }
  .community-field input:focus{outline:none;border-color:var(--blue);}
  .community-consent{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--gray-light);margin-bottom:20px;}
  .community-consent input{margin-top:2px;flex:none;}
  #communitySubmitFinal{width:100%;justify-content:center;}
  .community-form-note{margin-top:12px;font-size:12.5px;color:var(--gray-light);text-align:center;min-height:1em;}

  /* ============ FAQ ============ */
  .faq-list{max-width:820px;}
  .faq-item{border-bottom:1px solid var(--panel-border);}
  .faq-item:first-child{border-top:1px solid var(--panel-border);}
  .faq-q{
    width:100%;text-align:left;background:none;border:none;cursor:pointer;
    padding:24px 4px;display:flex;justify-content:space-between;align-items:center;gap:20px;
    font-family:var(--display);font-size:15.5px;font-weight:600;color:var(--white);
  }
  .faq-q .faq-icon{flex:none;width:20px;height:20px;position:relative;}
  .faq-q .faq-icon::before,.faq-q .faq-icon::after{
    content:'';position:absolute;background:var(--blue);transition:transform .3s ease;
  }
  .faq-q .faq-icon::before{left:0;top:9px;width:20px;height:2px;}
  .faq-q .faq-icon::after{left:9px;top:0;width:2px;height:20px;}
  .faq-item.open .faq-q .faq-icon::after{transform:rotate(90deg);}
  .faq-a{
    max-height:0;overflow:hidden;transition:max-height .35s ease;
  }
  .faq-a p{padding:0 4px 24px;color:var(--gray-light);font-size:14px;max-width:680px;}

  /* ============ CONTACT ============ */
  .contact-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:70px;}
  .contact-info h2{margin-bottom:18px;}
  .contact-info h2 .accent{color:var(--blue);}
  .contact-info p.intro{font-size:15px;margin-bottom:30px;max-width:420px;}
  .benefit-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:34px;}
  .benefit-card{display:flex;align-items:flex-start;gap:12px;}
  .benefit-icon{
    flex:none;width:32px;height:32px;border-radius:9px;
    display:flex;align-items:center;justify-content:center;
    background:var(--panel-2);border:1px solid var(--panel-border);
  }
  .benefit-icon svg{width:16px;height:16px;color:var(--blue);}
  .benefit-card span{font-size:13.5px;color:var(--gray-light);line-height:1.4;padding-top:6px;}
  @media (max-width:560px){.benefit-grid{grid-template-columns:1fr;}}
  .contact-detail{margin-bottom:22px;}
  .contact-detail .label{font-family:var(--display);font-size:11px;color:var(--gray-light);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:6px;}
  .contact-detail .value{font-size:15px;color:var(--white);}
  .copy-email{
    display:inline-flex;align-items:center;gap:8px;cursor:pointer;
    background:none;border:none;font-size:15px;color:var(--white);font-family:var(--body);
    padding:0;
  }
  .copy-email svg{width:15px;height:15px;color:var(--gray-light);flex:none;transition:color .2s ease;}
  .copy-email:hover svg{color:var(--blue);}
  .copy-email .copy-feedback{
    font-size:11px;color:var(--blue);font-family:var(--display);letter-spacing:0.06em;text-transform:uppercase;
    opacity:0;transition:opacity .2s ease;
  }
  .copy-email.copied .copy-feedback{opacity:1;}
  form{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
  .field{display:flex;flex-direction:column;gap:8px;}
  .field.full{grid-column:1/-1;}
  label{font-size:12px;color:var(--gray-light);letter-spacing:0.06em;text-transform:uppercase;}
  input,select,textarea{
    background:var(--panel);
    border:1px solid var(--panel-border);
    color:var(--white);
    padding:14px 16px;
    font-family:var(--body);
    font-size:14px;
    border-radius:2px;
    transition:border-color .2s ease;
  }
  input:focus,select:focus,textarea:focus{border-color:var(--blue);outline:none;}
  textarea{resize:vertical;min-height:100px;}
  .radio-group{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .radio-option{
    display:flex;align-items:center;gap:10px;
    border:1px solid var(--panel-border);border-radius:2px;
    padding:14px 18px;cursor:pointer;font-size:14px;color:var(--white);
    transition:border-color .2s ease, background .2s ease;
  }
  .radio-option:hover{border-color:var(--blue);}
  .radio-option:has(input:checked){border-color:var(--blue);background:var(--blue-dim);}
  .radio-option input{accent-color:var(--blue);width:15px;height:15px;}
  form .submit-row{grid-column:1/-1;margin-top:6px;}
  @media (max-width:760px){.contact-grid{grid-template-columns:1fr;}form{grid-template-columns:1fr;}}

  /* ============ PARTNER FORM WIZARD ============ */
  .wizard{background:var(--panel-2);border:1px solid var(--panel-border);padding:34px;}
  @media (max-width:760px){.wizard{padding:26px 22px;}}

  .wiz-progress{display:flex;align-items:center;margin-bottom:34px;}
  .wiz-step-dot{
    width:28px;height:28px;border-radius:50%;flex:none;
    border:1px solid var(--panel-border);background:var(--panel);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--display);font-size:12px;font-weight:700;color:var(--gray-light);
    transition:border-color .3s ease, background .3s ease, color .3s ease;
    position:relative;
  }
  .wiz-step-dot.done{background:var(--blue);border-color:var(--blue);color:var(--black);}
  .wiz-step-dot.active{border-color:var(--blue);color:var(--blue);}
  .wiz-step-dot svg{width:14px;height:14px;display:none;}
  .wiz-step-dot.done svg{display:block;}
  .wiz-step-dot.done span{display:none;}
  .wiz-line{flex:1;height:1px;background:var(--panel-border);margin:0 6px;position:relative;overflow:hidden;}
  .wiz-line::after{
    content:'';position:absolute;inset:0;background:var(--blue);
    transform:scaleX(0);transform-origin:left;transition:transform .4s ease;
  }
  .wiz-line.filled::after{transform:scaleX(1);}
  .wiz-label{
    position:absolute;top:36px;left:50%;transform:translateX(-50%);
    font-size:10.5px;color:var(--gray-light);white-space:nowrap;letter-spacing:0.04em;text-transform:uppercase;
  }
  @media (max-width:480px){.wiz-label{display:none;}}

  .wiz-panel{position:relative;min-height:1px;overflow:hidden;}
  .wiz-step{
    display:grid;grid-template-columns:1fr 1fr;gap:18px;
    animation:wiz-in .35s ease both;
  }
  .wiz-step[hidden]{display:none;}
  @keyframes wiz-in{from{opacity:0;transform:translateX(14px);}to{opacity:1;transform:translateX(0);}}
  .wiz-step h3{grid-column:1/-1;font-size:19px;margin-bottom:2px;}
  .wiz-step .wiz-sub{grid-column:1/-1;font-size:13.5px;color:var(--gray-light);margin-bottom:8px;margin-top:-10px;}

  .biz-cards{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:4px;}
  @media (max-width:480px){.biz-cards{grid-template-columns:1fr;}}
  .biz-card{
    border:1px solid var(--panel-border);border-radius:2px;padding:22px 20px;cursor:pointer;
    transition:border-color .2s ease, background .2s ease, transform .15s ease-out;
    display:flex;flex-direction:column;gap:10px;
    transform-style:preserve-3d;will-change:transform;
  }
  .biz-card:hover{
    border-color:var(--blue);transform:translateY(-3px);
    box-shadow:0 14px 28px rgba(0,0,0,0.28), 0 0 26px rgba(0,215,255,0.08);
  }
  .biz-card.selected{border-color:var(--blue);background:var(--blue-dim);}
  .biz-card svg{width:26px;height:26px;color:var(--blue);}
  .biz-card .biz-title{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:0.03em;color:var(--white);}
  .biz-card .biz-desc{font-size:12.5px;color:var(--gray-light);}

  .channel-label{grid-column:1/-1;font-size:12px;color:var(--gray-light);letter-spacing:0.06em;text-transform:uppercase;margin-top:6px;}
  .channel-cards{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:4px;}
  @media (max-width:480px){.channel-cards{grid-template-columns:1fr;}}
  .channel-card{
    border:1px solid var(--panel-border);border-radius:2px;padding:14px 12px;cursor:pointer;
    transition:border-color .2s ease, background .2s ease, transform .2s ease;
    display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
  }
  .channel-card:hover{
    border-color:var(--blue);transform:translateY(-2px);
    box-shadow:0 10px 20px rgba(0,0,0,0.25), 0 0 20px rgba(0,215,255,0.07);
  }
  .channel-card.selected{border-color:var(--blue);background:var(--blue-dim);}
  .channel-card svg{width:19px;height:19px;color:var(--blue);}
  .channel-card span{font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:0.02em;color:var(--white);}

  .wiz-nav{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;margin-top:10px;}
  .wiz-btn-back{
    background:none;border:none;color:var(--gray-light);font-family:var(--display);font-size:12px;
    font-weight:600;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;
    display:flex;align-items:center;gap:6px;transition:color .2s ease;
  }
  .wiz-btn-back:hover{color:var(--white);}
  .wiz-btn-back svg{width:13px;height:13px;}
  .wiz-btn-back[hidden]{visibility:hidden;}

  .wiz-success{text-align:center;padding:30px 10px 10px;}
  .wiz-success-check{
    width:64px;height:64px;border-radius:50%;border:2px solid var(--blue);
    display:flex;align-items:center;justify-content:center;margin:0 auto 22px;
  }
  .wiz-success-check svg{width:28px;height:28px;color:var(--blue);}
  .wiz-success-check path{stroke-dasharray:24;stroke-dashoffset:24;animation:wiz-check .4s ease .2s forwards;}
  @keyframes wiz-check{to{stroke-dashoffset:0;}}
  .wiz-success h3{margin-bottom:10px;}
  .wiz-success p{color:var(--gray-light);font-size:14px;max-width:380px;margin:0 auto;}

  /* ============ FOOTER ============ */
  footer{border-top:1px solid var(--panel-border);padding:54px 0 36px;position:relative;overflow:hidden;}
  .footer-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;margin-bottom:40px;}
  .footer-social{display:flex;gap:14px;align-items:center;}
  .footer-social a{
    width:34px;height:34px;border-radius:50%;border:1px solid var(--panel-border);
    display:flex;align-items:center;justify-content:center;
    color:var(--gray-light);transition:border-color .2s ease,color .2s ease;
  }
  .footer-social a:hover{border-color:var(--blue);color:var(--blue);}
  .footer-social svg{width:16px;height:16px;}
  .footer-links{display:flex;gap:30px;flex-wrap:wrap;}
  .footer-links a{font-size:13px;color:var(--gray-light);}
  .footer-links a:hover{color:var(--white);}
  .footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--gray);border-top:1px solid var(--panel-border);padding-top:24px;}

  .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.16,.8,.3,1), transform .8s cubic-bezier(.16,.8,.3,1);}

  /* ============ INTRO REVEAL ============ */
  #introOverlay{
    position:fixed;inset:0;z-index:10000;
    background:#000;
    display:flex;align-items:center;justify-content:center;
    opacity:1;transition:opacity 0.9s ease;
  }
  #introOverlay.fade-out{opacity:0;pointer-events:none;}
  #introOverlay video{
    width:100%;height:100%;
    object-fit:contain;
  }
  .intro-mark-wrap{
    display:flex;align-items:center;gap:66px;
  }
  @media (max-width:640px){
    .intro-mark-wrap{gap:24px;transform:scale(.55);}
  }
  .intro-mark-wrap svg{
    width:264px;height:264px;overflow:visible;
    animation:il-settle .5s ease-out both, il-glow .6s ease-out both;
    animation-delay:.85s, .85s;
  }
  .il-line{
    fill:none;stroke:var(--blue);stroke-width:2.6;
    stroke-dasharray:36;stroke-dashoffset:36;opacity:0;
    animation-name:il-draw;animation-duration:.18s;animation-timing-function:ease-out;animation-fill-mode:both;
  }
  .il-node{
    fill:var(--blue);opacity:0;transform-origin:center;transform-box:fill-box;
    animation-name:il-pop;animation-duration:.22s;animation-timing-function:ease-out;animation-fill-mode:both;
  }
  /* ring: top -> (top-left / top-right) -> (lower-left / lower-right) -> bottom */
  .l1{animation-delay:.05s;}
  .l2{animation-delay:.05s;}
  .l6{animation-delay:.25s;}
  .l7{animation-delay:.25s;}
  .l8{animation-delay:.45s;}
  .l9{animation-delay:.45s;}
  .n1{animation-delay:0s;}
  .n2{animation-delay:.23s;}
  .n3{animation-delay:.23s;}
  .n5{animation-delay:.43s;}
  .n6{animation-delay:.43s;}
  .n7{animation-delay:.63s;}
  /* the 3D reveal: center point + the three inner lines that fold the ring into a cube */
  .l3{animation-delay:.85s;animation-duration:.22s;}
  .l4{animation-delay:.85s;animation-duration:.22s;}
  .l5{animation-delay:.85s;animation-duration:.22s;}
  .n4{animation-delay:.85s;animation-duration:.22s;}
  .intro-wordmark{display:inline-flex;}
  .il-letter{
    display:inline-block;
    font-family:'Orbitron', sans-serif;font-weight:800;font-size:96px;letter-spacing:0.06em;
    color:var(--white);opacity:0;
    animation:il-letter .22s ease-out both;
  }
  .il-letter:nth-child(1){animation-delay:1.25s;}
  .il-letter:nth-child(2){animation-delay:1.34s;}
  .il-letter:nth-child(3){animation-delay:1.43s;}
  .il-letter:nth-child(4){animation-delay:1.52s;}
  .il-letter:nth-child(5){animation-delay:1.61s;}
  .il-letter:nth-child(6){animation-delay:1.70s;}
  .il-letter:nth-child(7){animation-delay:1.79s;}
  .il-letter:nth-child(8){animation-delay:1.88s;}
  @keyframes il-draw{
    0%{stroke-dashoffset:36;opacity:0;}
    15%{opacity:1;}
    100%{stroke-dashoffset:0;opacity:1;}
  }
  @keyframes il-pop{
    0%{transform:scale(.2);opacity:0;}
    60%{transform:scale(1.3);opacity:1;}
    100%{transform:scale(1);opacity:1;}
  }
  @keyframes il-settle{
    0%{transform:scale(1);}
    45%{transform:scale(1.1);}
    100%{transform:scale(1);}
  }
  @keyframes il-glow{
    0%{filter:drop-shadow(0 0 0px rgba(0,215,255,0));}
    45%{filter:drop-shadow(0 0 22px rgba(0,215,255,.9));}
    100%{filter:drop-shadow(0 0 7px rgba(0,215,255,.45));}
  }
  @keyframes il-letter{
    0%{opacity:0;transform:translateY(8px) scale(.8);}
    60%{opacity:1;transform:translateY(-2px) scale(1.1);}
    100%{opacity:1;transform:translateY(0) scale(1);}
  }
  #introSkip{
    position:absolute;bottom:24px;right:24px;
    background:transparent;border:1px solid var(--panel-border);
    color:var(--gray-light);
    font-family:var(--display);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
    padding:9px 18px;border-radius:20px;cursor:pointer;
    transition:border-color .2s ease, color .2s ease;
  }
  #introSkip:hover{border-color:var(--blue);color:var(--white);}
  body.intro-lock{overflow:hidden;height:100vh;}

  /* ============ CHAT ASSISTANT ============ */
  #chatToggle{
    position:fixed;bottom:24px;right:24px;z-index:500;
    width:58px;height:58px;border-radius:50%;
    background:var(--blue);border:none;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 24px rgba(0,215,255,0.35);
    transition:transform .2s ease;
  }
  #chatToggle:hover{transform:scale(1.06);}
  #chatToggle svg{width:26px;height:26px;color:var(--black);}
  #chatToggle .chat-close-icon{display:none;}
  #chatToggle.open .chat-open-icon{display:none;}
  #chatToggle.open .chat-close-icon{display:block;}

  #chatPanel{
    position:fixed;bottom:94px;right:24px;z-index:500;
    width:360px;max-width:calc(100vw - 32px);
    height:480px;max-height:calc(100vh - 140px);
    background:var(--panel);border:1px solid var(--panel-border);
    display:flex;flex-direction:column;
    opacity:0;transform:translateY(16px) scale(.97);pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
  }
  #chatPanel.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}

  .chat-header{
    display:flex;align-items:center;gap:10px;
    padding:16px 18px;border-bottom:1px solid var(--panel-border);
    background:var(--panel-2);
  }
  .chat-header svg{width:20px;height:20px;color:var(--blue);flex:none;}
  .chat-header-title{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:0.04em;color:var(--white);}
  .chat-header-status{font-size:11px;color:var(--gray-light);display:flex;align-items:center;gap:5px;}
  .chat-header-status::before{content:'';width:6px;height:6px;border-radius:50%;background:#3ddc84;display:inline-block;}

  .chat-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;}
  .chat-msg{max-width:85%;font-size:13.5px;line-height:1.5;padding:10px 13px;border-radius:3px;}
  .chat-msg.bot{background:var(--panel-2);color:var(--white);align-self:flex-start;border:1px solid var(--panel-border);}
  .chat-msg.user{background:var(--blue);color:var(--black);align-self:flex-end;font-weight:500;}
  .chat-suggestions{display:flex;flex-direction:column;gap:6px;margin-top:2px;}
  .chat-suggestion{
    align-self:flex-start;background:transparent;border:1px solid var(--panel-border);
    color:var(--gray-light);font-size:12px;padding:7px 12px;border-radius:20px;
    cursor:pointer;text-align:left;transition:border-color .2s ease,color .2s ease;
  }
  .chat-suggestion:hover{border-color:var(--blue);color:var(--white);}

  .chat-input-row{
    display:flex;gap:8px;padding:12px;border-top:1px solid var(--panel-border);
  }
  .chat-input-row input{
    flex:1;background:var(--black);border:1px solid var(--panel-border);color:var(--white);
    padding:10px 12px;font-family:var(--body);font-size:13.5px;border-radius:2px;
  }
  .chat-input-row input:focus{outline:none;border-color:var(--blue);}
  .chat-input-row button{
    background:var(--blue);border:none;border-radius:2px;width:40px;flex:none;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
  }
  .chat-input-row button svg{width:17px;height:17px;color:var(--black);}
  @media (max-width:480px){
    #chatPanel{right:16px;bottom:84px;width:calc(100vw - 32px);}
    #chatToggle{right:16px;bottom:16px;}
  }

  /* typing indicator */
  .chat-typing{
    align-self:flex-start;background:var(--panel-2);border:1px solid var(--panel-border);
    padding:11px 15px;border-radius:3px;display:flex;gap:4px;
  }
  .chat-typing span{
    width:6px;height:6px;border-radius:50%;background:var(--gray-light);
    animation:chat-bounce 1.1s ease-in-out infinite;
  }
  .chat-typing span:nth-child(2){animation-delay:.15s;}
  .chat-typing span:nth-child(3){animation-delay:.3s;}
  @keyframes chat-bounce{0%,60%,100%{transform:translateY(0);opacity:.5;}30%{transform:translateY(-4px);opacity:1;}}

  /* action button inside a bot reply */
  .chat-action{
    align-self:flex-start;margin-top:-4px;
    background:var(--blue);color:var(--black);border:none;
    font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;
    padding:9px 16px;border-radius:2px;cursor:pointer;
  }
  .chat-action:hover{background:#3ee2ff;}

  /* human handoff row, pinned above the input */
  .chat-handoff{
    padding:9px 16px;border-top:1px solid var(--panel-border);
    font-size:11.5px;color:var(--gray-light);text-align:center;
  }
  .chat-handoff a{color:var(--blue);text-decoration:none;}
  .chat-handoff a:hover{text-decoration:underline;}

  /* attention nudge bubble */
  #chatNudge{
    position:fixed;bottom:94px;right:24px;z-index:499;
    max-width:220px;background:var(--panel);border:1px solid var(--panel-border);
    padding:12px 14px;border-radius:3px;font-size:13px;color:var(--white);
    box-shadow:0 10px 30px rgba(0,0,0,0.4);
    opacity:0;transform:translateY(8px) scale(.96);pointer-events:none;
    transition:opacity .3s ease, transform .3s ease;
    display:flex;align-items:flex-start;gap:8px;
  }
  #chatNudge.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
  #chatNudge span{flex:1;cursor:pointer;}
  #chatNudge button{
    background:none;border:none;color:var(--gray-light);cursor:pointer;font-size:15px;line-height:1;padding:0;flex:none;
  }
  #chatNudge button:hover{color:var(--white);}
  @media (max-width:480px){#chatNudge{right:16px;}}

  /* ============ GAME CATALOGUE OVERLAY ============ */
  #gameCatalogueOverlay{
    position:fixed;inset:0;z-index:2000;background:var(--black);
    overflow-y:auto;
    opacity:0;pointer-events:none;transform:translateY(24px);
    transition:opacity .35s ease, transform .35s ease;
  }
  #gameCatalogueOverlay.open{opacity:1;pointer-events:auto;transform:translateY(0);}
  .gc-nav{
    position:sticky;top:0;z-index:10;background:rgba(0,0,0,0.9);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--panel-border);
    display:flex;align-items:center;justify-content:space-between;
    padding:18px clamp(20px,4vw,90px);
  }
  .gc-back{
    display:flex;align-items:center;gap:8px;font-family:var(--display);font-size:12px;font-weight:600;
    letter-spacing:0.1em;text-transform:uppercase;color:var(--gray-light);
    background:none;border:none;cursor:pointer;transition:color .2s ease;
  }
  .gc-back:hover{color:var(--white);}
  .gc-back svg{width:14px;height:14px;}
  .gc-hero{padding:64px 0 40px;border-bottom:1px solid var(--panel-border);}
  .gc-hero .eyebrow{font-family:var(--display);font-size:12px;color:var(--blue);letter-spacing:0.14em;text-transform:uppercase;margin-bottom:16px;}
  .gc-hero h1{font-family:var(--display);font-weight:800;font-size:clamp(34px,5vw,58px);line-height:1.1;margin-bottom:16px;}
  .gc-hero p{color:var(--gray-light);max-width:640px;font-size:15.5px;}
  .gc-products{padding:56px 0 90px;}

  /* ============ BUMPER GUARD FIT PREVIEW ============ */
  #bumperFitOverlay{
    position:fixed;inset:0;z-index:2200;background:#050506;
    overflow-y:auto;
    opacity:0;pointer-events:none;transform:translateY(24px);
    transition:opacity .35s ease, transform .35s ease, background 1.1s cubic-bezier(.16,.8,.3,1);
  }
  #bumperFitOverlay.open{opacity:1;pointer-events:auto;transform:translateY(0);}
  .bf-nav{
    position:sticky;top:0;z-index:10;background:rgba(0,0,0,0.9);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--panel-border);
    display:flex;align-items:center;justify-content:space-between;
    padding:18px clamp(20px,4vw,90px);
  }
  .bf-back{
    display:flex;align-items:center;gap:8px;font-family:var(--display);font-size:12px;font-weight:600;
    letter-spacing:0.1em;text-transform:uppercase;color:var(--gray-light);
    background:none;border:none;cursor:pointer;transition:color .2s ease;
  }
  .bf-back:hover{color:var(--white);}
  .bf-back svg{width:14px;height:14px;}

  .bf-hero{padding:52px 0 8px;text-align:center;}
  .bf-hero .eyebrow{font-family:var(--display);font-size:12px;color:var(--blue);letter-spacing:0.14em;text-transform:uppercase;margin-bottom:14px;}
  .bf-hero h1{font-family:var(--display);font-weight:800;font-size:clamp(28px,4vw,42px);margin-bottom:10px;}
  .bf-hero p{color:var(--gray-light);font-size:14.5px;max-width:560px;margin:0 auto;}

  .bf-stage{
    max-width:1300px;margin:0 auto;padding:40px clamp(20px,4vw,60px) 30px;
    display:grid;grid-template-columns:300px 1fr;gap:50px;align-items:start;
  }
  @media (max-width:820px){.bf-stage{grid-template-columns:1fr;}}

  .bf-controls{display:flex;flex-direction:column;}

  .bf-drop{
    display:flex;align-items:center;gap:12px;text-align:left;
    border:1.5px dashed var(--panel-border);border-radius:10px;padding:12px 16px;
    cursor:pointer;transition:border-color .2s ease, background .2s ease, transform .2s ease;
  }
  .bf-drop:hover, .bf-drop.dragover{border-color:var(--blue);background:var(--blue-dim);transform:translateY(-1px);}
  .bf-drop svg{width:17px;height:17px;color:var(--blue);flex-shrink:0;}
  .bf-drop .bf-drop-text{display:flex;flex-direction:column;gap:1px;min-width:0;}
  .bf-drop .bf-drop-title{font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:0.02em;}
  .bf-drop .bf-drop-sub{font-size:10.5px;color:var(--gray-light);}
  .bf-drop input{display:none;}

  .bf-preview-wrap{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;}

  .bf-compare-panel{
    position:absolute;inset:0;z-index:20;
    background:rgba(8,7,8,0.94);border-radius:16px;
    display:flex;flex-direction:column;padding:16px;
    animation:bf-compare-fade-in .2s ease;
  }
  @keyframes bf-compare-fade-in{ from{opacity:0;} to{opacity:1;} }
  .bf-compare-head{
    display:flex;align-items:center;justify-content:space-between;
    font-family:var(--display);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--gray-light);
    margin-bottom:12px;
  }
  .bf-compare-close{
    background:none;border:1px solid var(--panel-border);border-radius:8px;color:var(--white);
    width:28px;height:28px;font-size:18px;line-height:1;cursor:pointer;transition:border-color .2s ease;
  }
  .bf-compare-close:hover{border-color:var(--blue);}
  .bf-compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:1;min-height:0;}
  .bf-compare-slot{display:flex;flex-direction:column;gap:8px;min-height:0;}
  .bf-compare-slot img{width:100%;flex:1;min-height:0;object-fit:contain;border-radius:10px;background:rgba(255,255,255,0.02);}
  .bf-compare-slot select{
    font-family:var(--display);font-size:11px;color:var(--white);background:rgba(255,255,255,0.04);
    border:1px solid var(--panel-border);border-radius:8px;padding:8px 10px;cursor:pointer;
  }

  /* 3D viewer stage — real Three.js render of the bumper + slab models.
     The canvas itself stays transparent (renderer alpha, no scene.background)
     so the coloured page glow behind it shows straight through — no black
     box framing the product anymore. */
  .bf-viewer-stage{
    position:relative;width:100%;max-width:420px;aspect-ratio:80/135;
    margin:0 auto;touch-action:none;cursor:grab;
  }
  .bf-viewer-stage::before{
    /* A dark halo directly behind the product, independent of whatever hue
       the page-wide theme glow currently is. Without this, a warm-toned
       Bumper Guard colour (like yellow/orange) can visually merge into an
       equally warm-toned backdrop, making the card and its gradient hard to
       read at all — this guarantees contrast no matter which colour is picked. */
    content:'';position:absolute;
    left:50%;top:50%;transform:translate(-50%,-50%);
    width:132%;height:122%;
    background:radial-gradient(ellipse 60% 55% at 50% 50%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.28) 55%, transparent 80%);
    z-index:-1;pointer-events:none;
  }
  .bf-viewer-stage:active{cursor:grabbing;}
  .bf-viewer-stage canvas{display:block;width:100%!important;height:100%!important;outline:none;}
  .bf-viewer-stage.loaded .viewer-loading{opacity:0;pointer-events:none;}
  .bf-card-placeholder{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;
    color:var(--gray);font-size:11px;text-align:center;padding:0 30px;
    font-family:var(--display);letter-spacing:0.04em;text-transform:uppercase;pointer-events:none;
  }

  .bf-swatch-label{font-family:var(--display);font-size:12px;color:var(--gray-light);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:4px;}
  .bf-swatch-current{font-family:var(--display);font-size:14px;color:var(--white);margin-bottom:14px;}
  .bf-swatch-current span{color:var(--blue);}
  .bf-swatch-strip{
    position:relative;padding:4px 2px 14px;max-width:100%;
  }
  .bf-swatch{
    position:absolute;width:42px;height:48px;cursor:pointer;
    clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transition:transform .25s cubic-bezier(.34,1.56,.64,1), z-index 0s;
    display:flex;align-items:center;justify-content:center;
    transform-origin:center center;
  }
  /* The outline is a filter:drop-shadow() glow applied straight to the
     swatch itself — NOT a separate layered box behind/around it. That's a
     deliberate switch away from the earlier ::before-ring technique, which
     depended on z-index stacking being exactly right and kept leaking
     through as a solid colour fill instead of a thin outline. A drop-shadow
     hugs the swatch's actual rendered (clipped) hexagon shape and can only
     ever appear OUTSIDE those pixels — it physically cannot cover the
     colour, no stacking context involved at all. */
  @keyframes bf-glow-pulse{
    0%,100%{ filter:drop-shadow(0 0 1.5px #7dd6f7) drop-shadow(0 0 3px rgba(125,214,247,0.55)); }
    50%{ filter:drop-shadow(0 0 3px #7dd6f7) drop-shadow(0 0 8px rgba(125,214,247,0.85)); }
  }
  @keyframes bf-glow-orbit{
    0%{   filter:drop-shadow(3px 0 2.5px #7dd6f7) drop-shadow(0 0 4px rgba(125,214,247,0.6)); }
    25%{  filter:drop-shadow(0 3px 2.5px #7dd6f7) drop-shadow(0 0 4px rgba(125,214,247,0.6)); }
    50%{  filter:drop-shadow(-3px 0 2.5px #7dd6f7) drop-shadow(0 0 4px rgba(125,214,247,0.6)); }
    75%{  filter:drop-shadow(0 -3px 2.5px #7dd6f7) drop-shadow(0 0 4px rgba(125,214,247,0.6)); }
    100%{ filter:drop-shadow(3px 0 2.5px #7dd6f7) drop-shadow(0 0 4px rgba(125,214,247,0.6)); }
  }
  .bf-swatch::after{
    /* glitter fleck texture over the base colour — colour follows
       --bf-swatch-glitter (set per swatch in JS) so gold-glitter colours
       show gold flecks here too, not just in the 3D preview */
    content:'';position:absolute;inset:0;pointer-events:none;
    clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    --bf-g: var(--bf-swatch-glitter, #ffffff);
    background-image:
      radial-gradient(circle at 22% 28%, var(--bf-g) 0 0.4px, transparent 0.8px),
      radial-gradient(circle at 68% 18%, var(--bf-g) 0 0.3px, transparent 0.7px),
      radial-gradient(circle at 40% 55%, var(--bf-g) 0 0.4px, transparent 0.8px),
      radial-gradient(circle at 82% 62%, var(--bf-g) 0 0.3px, transparent 0.7px),
      radial-gradient(circle at 15% 78%, var(--bf-g) 0 0.35px, transparent 0.75px),
      radial-gradient(circle at 58% 82%, var(--bf-g) 0 0.3px, transparent 0.7px);
    mix-blend-mode:soft-light;
    opacity:0.5;
  }
  .bf-swatch:hover{transform:scale(1.7);z-index:5;animation:bf-glow-orbit 1.8s linear infinite;}
  .bf-swatch.selected{transform:scale(1.5);z-index:4;animation:bf-glow-pulse 1.7s ease-in-out infinite;}
  .bf-swatch.selected:hover{transform:scale(1.75);z-index:6;animation:bf-glow-orbit 1.8s linear infinite;}

  .bf-sparkle-burst{position:absolute;inset:0;pointer-events:none;z-index:10;}
  .bf-sparkle-burst span{
    position:absolute;left:50%;top:50%;width:3px;height:3px;border-radius:50%;
    background:#fff;box-shadow:0 0 4px 1px rgba(255,255,255,0.9);
    transform:translate(-50%,-50%);
    animation:bf-spark-fly 0.34s ease-out forwards;
  }
  @keyframes bf-spark-fly{
    0%{ transform:translate(-50%,-50%) rotate(var(--a)) translateX(0) scale(1); opacity:1; }
    100%{ transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--d)) scale(0.2); opacity:0; }
  }


  .bf-recommend{margin-top:14px;}
  .bf-recommend-label{font-family:var(--display);font-size:11px;color:var(--gray-light);letter-spacing:0.04em;text-transform:uppercase;margin-bottom:8px;}
  .bf-recommend-row{display:flex;gap:10px;}
  .bf-recommend-dot{
    width:30px;height:30px;border-radius:50%;border:1.5px solid var(--panel-border);
    cursor:pointer;padding:0;transition:transform .2s cubic-bezier(.34,1.56,.64,1), border-color .2s ease;
  }
  .bf-recommend-dot:hover{transform:scale(1.15);border-color:var(--blue);}

  .bf-light-toggle{
    display:flex;gap:4px;margin-top:18px;padding:3px;
    background:rgba(255,255,255,0.03);border:1px solid var(--panel-border);border-radius:10px;
  }
  .bf-light-btn{
    flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
    font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:0.03em;text-transform:uppercase;
    color:var(--gray-light);background:transparent;border:none;border-radius:8px;
    padding:9px 8px;cursor:pointer;transition:background .2s ease, color .2s ease;
  }
  .bf-light-btn svg{width:14px;height:14px;flex-shrink:0;}
  .bf-light-btn.active{background:rgba(0,215,255,0.12);color:var(--white);}
  .bf-light-btn:not(.active):hover{color:var(--white);}

  .bf-actions{display:flex;flex-direction:column;gap:10px;margin-top:6px;}
  .bf-actions-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
  .bf-action-btn{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:0.02em;text-transform:uppercase;
    color:var(--white);background:rgba(255,255,255,0.03);
    border:1px solid var(--panel-border);border-radius:10px;
    padding:12px 6px;cursor:pointer;min-width:0;text-align:center;
    transition:border-color .25s ease, background .25s ease, transform .2s ease, box-shadow .25s ease;
  }
  .bf-action-btn span{white-space:normal;line-height:1.25;word-break:break-word;}
  .bf-action-btn svg{width:15px;height:15px;flex-shrink:0;color:var(--blue);transition:transform .35s ease;}
  .bf-action-btn:hover{
    border-color:var(--blue);
    background:rgba(0,215,255,0.07);
    transform:translateY(-2px);
    box-shadow:0 8px 22px rgba(0,215,255,0.14);
  }
  .bf-action-btn:active{transform:translateY(0);}
  #bfRandomize:hover svg{transform:rotate(18deg);}
  #bfFlipGradient:hover svg{transform:rotate(180deg);}
  #bfClear:hover svg{transform:scale(1.1);}
  .bf-compare-btn{
    flex-direction:row;gap:8px;padding:12px 16px;font-size:11px;
  }
  @media (max-width:400px){
    .bf-actions-row{grid-template-columns:1fr;}
    .bf-action-btn{flex-direction:row;justify-content:flex-start;padding:12px 16px;font-size:11.5px;}
  }
  #bfOrderBtn svg{width:15px;height:15px;flex-shrink:0;}

  .bf-footnote{text-align:center;color:var(--gray);font-size:11.5px;padding:10px 20px 60px;}

  #partnerPortalOverlay{
    position:fixed;inset:0;z-index:2100;background:var(--black);
    overflow-y:auto;
    opacity:0;pointer-events:none;transform:translateY(24px);
    transition:opacity .35s ease, transform .35s ease;
  }
  #partnerPortalOverlay.open{opacity:1;pointer-events:auto;transform:translateY(0);}

  .pp-login-wrap{
    min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px;
  }
  .pp-login-card{
    width:100%;max-width:380px;background:var(--panel-2);border:1px solid var(--panel-border);
    padding:40px 34px;position:relative;
  }
  .pp-login-card h2{font-size:22px;margin-bottom:8px;}
  .pp-login-card .pp-sub{color:var(--gray-light);font-size:13.5px;margin-bottom:28px;}
  .pp-login-card .field{margin-bottom:16px;}
  .pp-login-card label{display:block;font-size:12px;color:var(--gray-light);letter-spacing:0.06em;text-transform:uppercase;margin-bottom:7px;}
  .pp-login-card input{
    width:100%;background:var(--panel);border:1px solid var(--panel-border);color:var(--white);
    padding:12px 14px;font-family:var(--body);font-size:14px;border-radius:2px;
  }
  .pp-login-card input:focus{outline:none;border-color:var(--blue);}
  .pp-error{color:#ff6b6b;font-size:13px;margin-bottom:14px;display:none;}
  .pp-error.show{display:block;}
  .pp-close-login{
    position:absolute;top:16px;right:16px;background:none;border:none;color:var(--gray-light);
    cursor:pointer;padding:6px;
  }
  .pp-close-login svg{width:18px;height:18px;}
  .pp-close-login:hover{color:var(--white);}

  .pp-nav{
    position:sticky;top:0;z-index:10;background:rgba(0,0,0,0.9);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--panel-border);
    display:flex;align-items:center;justify-content:space-between;
    padding:18px clamp(20px,4vw,90px);
  }
  .pp-nav-right{display:flex;align-items:center;gap:18px;}
  .pp-welcome{font-size:13px;color:var(--gray-light);}
  .pp-welcome b{color:var(--white);}
  .pp-logout{
    font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
    color:var(--gray-light);background:none;border:1px solid var(--panel-border);padding:9px 16px;
    cursor:pointer;transition:border-color .2s ease, color .2s ease;
  }
  .pp-logout:hover{border-color:var(--blue);color:var(--blue);}

  .pp-catalog{padding:44px clamp(20px,4vw,90px) 140px;max-width:1300px;margin:0 auto;}
  .pp-cat-group{margin-bottom:44px;}
  .pp-cat-title{
    font-family:var(--display);font-size:13px;color:var(--blue);letter-spacing:0.12em;text-transform:uppercase;
    margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--panel-border);
  }
  .pp-row{
    display:grid;grid-template-columns:1fr auto auto auto;gap:20px;align-items:center;
    padding:16px 0;border-bottom:1px solid var(--panel-border);
  }
  .pp-row-name{font-size:14.5px;}
  .pp-row-price{font-family:var(--display);font-size:13px;color:var(--gray-light);white-space:nowrap;}
  .pp-qty{display:flex;align-items:center;border:1px solid var(--panel-border);}
  .pp-qty button{
    width:32px;height:32px;background:none;border:none;color:var(--gray-light);cursor:pointer;font-size:16px;
  }
  .pp-qty button:hover{color:var(--blue);}
  .pp-qty input{
    width:48px;text-align:center;background:none;border:none;border-left:1px solid var(--panel-border);
    border-right:1px solid var(--panel-border);color:var(--white);font-family:var(--body);font-size:14px;
    padding:6px 0;
  }
  .pp-row-subtotal{font-family:var(--display);font-size:13.5px;color:var(--white);min-width:80px;text-align:right;}
  @media (max-width:700px){
    .pp-row{grid-template-columns:1fr;gap:10px;padding:18px 0;}
    .pp-row-price,.pp-row-subtotal{text-align:left;}
  }

  /* ============ MARGIN CALCULATOR ============ */
  .pp-margin-calc{
    max-width:1300px;margin:0 auto;padding:0 clamp(20px,4vw,90px) 20px;
  }
  .pp-margin-card{
    border:1px solid var(--panel-border);border-radius:10px;background:var(--panel);
    padding:26px 28px;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr);gap:18px 20px;align-items:end;
  }
  .pp-margin-title{
    grid-column:1/-1;font-family:var(--display);font-size:13px;color:var(--blue);
    letter-spacing:0.1em;text-transform:uppercase;margin-bottom:2px;display:flex;align-items:center;gap:8px;
  }
  .pp-margin-title svg{width:15px;height:15px;}
  .pp-margin-field{display:flex;flex-direction:column;gap:6px;}
  .pp-margin-field label{font-size:11.5px;color:var(--gray-light);letter-spacing:0.04em;}
  .pp-margin-field select, .pp-margin-field input{
    background:rgba(255,255,255,0.03);border:1px solid var(--panel-border);border-radius:6px;
    color:var(--white);padding:0 12px;height:44px;box-sizing:border-box;font-family:var(--body);font-size:14px;
  }
  .pp-margin-field input:focus, .pp-margin-field select:focus{outline:none;border-color:var(--blue);}
  /* custom product picker */
  .pp-mpick{position:relative;min-width:0;}
  .pp-mpick-btn{
    width:100%;min-height:56px;display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;
    background:rgba(255,255,255,0.03);border:1px solid var(--panel-border);border-radius:10px;
    padding:7px 40px 7px 8px;color:var(--white);font-family:var(--body);position:relative;
    transition:border-color .2s,box-shadow .2s,background .2s;
  }
  .pp-mpick-btn:hover{border-color:rgba(0,215,255,.4);background:rgba(0,215,255,.03);}
  .pp-mpick.open .pp-mpick-btn,.pp-mpick-btn:focus-visible{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,215,255,.12);}
  .pp-mpick-btn::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;border-right:1.6px solid var(--blue);border-bottom:1.6px solid var(--blue);transform:translateY(-70%) rotate(45deg);transition:transform .25s;}
  .pp-mpick.open .pp-mpick-btn::after{transform:translateY(-30%) rotate(-135deg);}
  .pp-mpick .ppd-thumb{width:40px;height:40px;flex:0 0 40px;border-radius:8px;padding:5px;}
  .pp-mpick-txt{min-width:0;display:flex;flex-direction:column;gap:2px;}
  .pp-mpick-name{font-size:14.5px;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .pp-mpick-sub{font-size:11.5px;color:var(--gray-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .pp-mpick-sub .tag{color:var(--blue);font-family:var(--display);font-size:10px;letter-spacing:.1em;text-transform:uppercase;margin-right:6px;}
  .pp-mpick-pop{
    position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:60;display:none;
    background:#070a0e;border:1px solid rgba(0,215,255,.3);border-radius:14px;
    box-shadow:0 24px 60px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.4),0 0 40px rgba(0,215,255,.08);
    overflow:hidden;
  }
  .pp-mpick.up .pp-mpick-pop{top:auto;bottom:calc(100% + 8px);}
  .pp-mpick.open .pp-mpick-pop{display:block;animation:ppPickIn .18s ease-out;}
  @keyframes ppPickIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
  .pp-mpick-search{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.07);color:var(--gray-light);}
  .pp-mpick-search svg{width:16px;height:16px;flex:0 0 16px;}
  .pp-mpick-search input{flex:1;min-width:0;background:none!important;border:0!important;outline:none;box-shadow:none!important;padding:0!important;height:24px!important;border-radius:0!important;color:var(--white);font-family:var(--body);font-size:14px;}
  .pp-mpick-list{max-height:min(380px,50vh);overflow-y:auto;padding:6px;scrollbar-width:thin;scrollbar-color:rgba(0,215,255,.35) transparent;}
  .pp-mpick-list::-webkit-scrollbar{width:6px;}
  .pp-mpick-list::-webkit-scrollbar-thumb{background:rgba(0,215,255,.35);border-radius:6px;}
  .pp-mpick-cat{font-family:var(--display);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);padding:12px 10px 4px;}
  .pp-mpick-subh{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray);padding:8px 10px 3px;}
  .pp-mpick-opt{display:flex;align-items:center;gap:12px;padding:7px 10px;border-radius:9px;cursor:pointer;}
  .pp-mpick-opt .ppd-thumb{width:34px;height:34px;flex:0 0 34px;padding:4px;border-radius:7px;}
  .pp-mpick-opt .pp-mpick-txt{flex:1;}
  .pp-mpick-opt .pp-mpick-name{font-size:14px;white-space:normal;line-height:1.3;}
  .pp-mpick-opt .price{font-family:var(--display);font-size:12.5px;color:var(--gray-light);white-space:nowrap;}
  .pp-mpick-opt:hover,.pp-mpick-opt.hl{background:rgba(255,255,255,.05);}
  .pp-mpick-opt[aria-selected="true"]{background:rgba(0,215,255,.1);box-shadow:inset 3px 0 0 var(--blue);}
  .pp-mpick-opt[aria-selected="true"] .price{color:var(--blue);}
  .pp-mpick-empty{padding:18px 12px;font-size:13px;color:var(--gray-light);text-align:center;}
  .pp-margin-field > input{height:56px!important;border-radius:10px!important;}
  .pp-margin-result{
    grid-column:1/-1;min-width:0;
    display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;
    background:linear-gradient(90deg,rgba(0,215,255,0.08),rgba(0,215,255,0.02));
    border:1px solid var(--blue-dim);border-radius:10px;padding:16px 22px;
  }
  .pp-margin-result .pp-mr-main{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;min-width:0;}
  .pp-margin-result .label{font-size:11px;color:var(--gray-light);text-transform:uppercase;letter-spacing:0.08em;}
  .pp-margin-result .value{font-family:var(--display);font-size:26px;line-height:1;color:var(--blue);white-space:nowrap;}
  .pp-margin-result .value .unit{font-size:14px;color:var(--gray-light);margin-left:6px;letter-spacing:0.02em;}
  .pp-margin-result .pct{display:flex;gap:8px;flex-wrap:wrap;}
  .pp-margin-result .pct:empty{display:none;}
  .pp-mr-chip{font-size:12px;color:var(--gray-light);padding:6px 11px;border-radius:999px;border:1px solid var(--panel-border);background:rgba(255,255,255,0.03);white-space:nowrap;}
  .pp-mr-chip b{font-family:var(--display);font-weight:400;color:var(--white);margin-right:4px;}
  .pp-margin-result.neg{border-color:rgba(255,92,92,.45);background:linear-gradient(90deg,rgba(255,92,92,0.08),rgba(255,92,92,0.02));}
  .pp-margin-result.neg .value{color:#ff5c5c;}
  @media (max-width:900px){
    .pp-margin-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
    .pp-margin-card .pp-margin-field:nth-child(2){grid-column:1/-1;}
  }

  .pp-summary-bar{
    position:sticky;bottom:0;background:rgba(11,12,14,0.96);backdrop-filter:blur(10px);
    border-top:1px solid var(--panel-border);
    padding:18px clamp(20px,4vw,90px);
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
    margin-top:20px;
  }
  .pp-summary-total{font-family:var(--display);font-size:16px;}
  .pp-summary-total .amount{color:var(--blue);font-size:22px;margin-left:10px;}
  .pp-summary-actions{display:flex;gap:12px;flex-wrap:wrap;}
  .pp-btn-secondary{
    font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
    color:var(--white);background:none;border:1px solid var(--panel-border);padding:14px 22px;cursor:pointer;
    transition:border-color .2s ease;
  }
  .pp-btn-secondary:hover{border-color:var(--blue);}
  .pp-submit-btn{border:none;cursor:pointer;font-family:var(--display);}
  .pp-submit-btn:disabled{opacity:0.4;cursor:not-allowed;}

  .pp-success{
    max-width:480px;margin:120px auto;text-align:center;padding:0 20px;
  }
  .pp-success svg{width:60px;height:60px;color:var(--blue);margin-bottom:22px;}
  .pp-success h2{margin-bottom:12px;}
  .pp-success p{color:var(--gray-light);font-size:14.5px;margin-bottom:28px;}
  @media (max-width:600px){.gc-hero{padding:44px 0 30px;}}

  .reveal.visible{opacity:1;transform:translateY(0);}
  .reveal-left{opacity:0;transform:translateX(-50px);transition:opacity .9s cubic-bezier(.16,.8,.3,1), transform .9s cubic-bezier(.16,.8,.3,1);}
  .reveal-left.visible{opacity:1;transform:translateX(0);}
  .reveal-right{opacity:0;transform:translateX(50px);transition:opacity .9s cubic-bezier(.16,.8,.3,1), transform .9s cubic-bezier(.16,.8,.3,1);}
  .reveal-right.visible{opacity:1;transform:translateX(0);}
  .reveal-scale{opacity:0;transform:scale(0.92);transition:opacity .9s cubic-bezier(.16,.8,.3,1), transform .9s cubic-bezier(.16,.8,.3,1);}
  .reveal-scale.visible{opacity:1;transform:scale(1);}
  .stagger.visible > *{opacity:1;transform:translateY(0);}
  .stagger > *{opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s ease;}
  .stagger.visible > *:nth-child(1){transition-delay:.05s;}
  .stagger.visible > *:nth-child(2){transition-delay:.16s;}
  .stagger.visible > *:nth-child(3){transition-delay:.27s;}
  .stagger.visible > *:nth-child(4){transition-delay:.38s;}
  .stagger.visible > *:nth-child(5){transition-delay:.49s;}
  .stagger.visible > *:nth-child(6){transition-delay:.6s;}
  @media (prefers-reduced-motion:reduce){
    .reveal,.reveal-left,.reveal-right,.reveal-scale,.stagger > *{opacity:1!important;transform:none!important;transition:none!important;}
  }

  /* ===== Partner wizard — refreshed ===== */
  #contact .wizard{position:relative;border-radius:16px;padding:30px 30px 24px;border:1px solid rgba(0,215,255,.28);
      background:radial-gradient(ellipse at 100% 0%,rgba(0,215,255,.14),transparent 55%),radial-gradient(ellipse at 0% 100%,rgba(0,215,255,.06),transparent 50%),#07090c;
      box-shadow:0 30px 80px -40px rgba(0,215,255,.45),0 0 0 1px rgba(255,255,255,.02) inset;align-self:start;}
  #contact .wiz-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid var(--panel-border);}
  .wiz-kicker{font-family:var(--display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:6px;}
  .wiz-title{font-family:var(--display);font-weight:700;font-size:clamp(20px,1.8vw,26px);color:var(--white);line-height:1.15;}
  .wiz-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid rgba(0,215,255,.35);background:rgba(0,215,255,.08);color:var(--white);font-size:12px;white-space:nowrap;}
  .wiz-pill svg{width:14px;height:14px;color:var(--blue);}
  #contact .wiz-progress{margin-bottom:44px;}
  #contact .wiz-step-dot{width:34px;height:34px;position:relative;font-size:13px;transition:all .3s;}
  #contact .wiz-step-dot.active{background:rgba(0,215,255,.1);box-shadow:0 0 0 4px rgba(0,215,255,.12),0 0 16px rgba(0,215,255,.35);}
  #contact .wiz-step-dot.done{box-shadow:0 0 14px rgba(0,215,255,.5);}
  #contact .wiz-line{height:2px;border-radius:2px;}
  #contact .wiz-line::after{box-shadow:0 0 8px rgba(0,215,255,.8);}
  #contact .wiz-label{top:42px;font-family:var(--display);font-size:10px;letter-spacing:.12em;}
  #contact .wiz-step-dot.active .wiz-label{color:var(--white);}
  #contact #partnerForm{display:block;}
  #contact .wiz-panel,#contact .wiz-step{width:100%;}
  #contact .wiz-step{gap:16px 16px;}
  #contact .wiz-step h3{font-size:20px;}
  #contact .biz-card,#contact .channel-card{border-radius:12px;background:#0a0d11;}
  #contact .biz-card{padding:22px 20px;position:relative;}
  #contact .biz-card svg{width:30px;height:30px;padding:7px;box-sizing:content-box;border-radius:10px;background:rgba(0,215,255,.08);border:1px solid rgba(0,215,255,.25);}
  #contact .biz-card.selected,#contact .channel-card.selected{background:linear-gradient(180deg,rgba(0,215,255,.14),rgba(0,215,255,.04));box-shadow:0 0 0 1px var(--blue),0 0 24px rgba(0,215,255,.22);}
  #contact .biz-card.selected::after,#contact .channel-card.selected::after{content:"";position:absolute;top:10px;right:10px;width:18px;height:18px;border-radius:50%;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001018' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat;}
  #contact .channel-card{position:relative;padding:16px 12px;}
  #contact .field label{font-family:var(--display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-light);}
  #contact .field input,#contact .field textarea{border-radius:10px;background:#0a0d11;border:1px solid var(--panel-border);padding:13px 14px;font-size:15px;color:var(--white);transition:border-color .2s,box-shadow .2s;}
  #contact .field input:focus,#contact .field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,215,255,.15);}
  #contact .wiz-nav .btn{border-radius:10px;padding:14px 26px;box-shadow:0 10px 30px -10px rgba(0,215,255,.7);}
  #contact .wiz-nav .wiz-next::after,#contact #wizSubmit::after{content:" →";}
  #contact .wiz-step-dot.done .wiz-label{display:block;color:var(--blue);}
  #contact .wiz-progress .wiz-step-dot:first-child .wiz-label{left:0;transform:none;}
  #contact .wiz-progress .wiz-step-dot:last-child .wiz-label{left:auto;right:0;transform:none;}
  .wiz-trust{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:24px;padding-top:18px;border-top:1px solid var(--panel-border);}
  .wiz-trust > span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--gray-light);}
  .wiz-trust svg{width:14px;height:14px;color:var(--blue);}
  @media (max-width:560px){#contact .wizard{padding:22px 18px 18px;}#contact .wiz-head{flex-direction:column;}}

  /* ===== Hero — premium redesign ===== */
  .hero{padding:140px 0 150px;}
  .hero .wrap.hx{grid-template-columns:1.12fr .88fr;gap:36px;width:100%;}
  .hx-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 12px;border-radius:999px;border:1px solid rgba(0,215,255,.35);background:rgba(0,215,255,.07);font-family:var(--display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--white);margin-bottom:26px;}
  .hx-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 0 rgba(0,215,255,.7);animation:hxPulse 2s infinite;}
  @keyframes hxPulse{0%{box-shadow:0 0 0 0 rgba(0,215,255,.7)}70%{box-shadow:0 0 0 10px rgba(0,215,255,0)}100%{box-shadow:0 0 0 0 rgba(0,215,255,0)}}
  .hero .hx-copy h1{font-size:clamp(34px,4.1vw,60px);line-height:1.04;margin-bottom:26px;}
  .hero .hx-copy h1 .accent{background:linear-gradient(90deg,#00d7ff,#7ff0ff 50%,#00d7ff);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hxShine 5s linear infinite;}
  @keyframes hxShine{to{background-position:-200% 0}}
  .hero .hx-copy p.lead{font-size:17.5px;line-height:1.65;max-width:540px;color:var(--gray-light);margin-bottom:34px;}
  .hx-cta{box-shadow:0 14px 40px -12px rgba(0,215,255,.8);}
  .hx-cta::after{content:" →";}
  .hx-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px;}
  .hx-chip{display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px;padding:10px 14px;min-width:0;border:1px solid var(--panel-border);border-radius:10px;background:rgba(10,13,17,.7);backdrop-filter:blur(4px);}
  .hx-chip b{font-family:var(--display);font-size:16px;color:var(--white);white-space:nowrap;}
  .hx-chip span{font-size:10.5px;color:var(--gray-light);text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;}
  .hx-visual{position:relative;aspect-ratio:1/1;width:100%;max-width:620px;justify-self:center;}
  .hx-halo{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,rgba(0,215,255,.22),rgba(0,215,255,0) 65%);filter:blur(10px);animation:hxBreath 6s ease-in-out infinite;}
  @keyframes hxBreath{50%{transform:scale(1.06);opacity:.8}}
  .hx-ring{position:absolute;inset:3%;border-radius:50%;border:1px dashed rgba(0,215,255,.22);animation:hxSpin 60s linear infinite;}
  .hx-ring::before{content:"";position:absolute;inset:8%;border-radius:50%;border:1px solid rgba(0,215,255,.1);}
  @keyframes hxSpin{to{transform:rotate(360deg)}}
  .hx-photo{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain;animation:hxFloat 7s ease-in-out infinite;filter:drop-shadow(0 30px 50px rgba(0,215,255,.12));
      -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 58%,transparent 72%);mask-image:radial-gradient(circle at 50% 50%,#000 58%,transparent 72%);}
  @keyframes hxFloat{50%{transform:translateY(-12px)}}
  .hx-tag{position:absolute;display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:999px;background:rgba(7,9,12,.82);border:1px solid rgba(0,215,255,.38);backdrop-filter:blur(6px);font-size:13px;color:var(--white);white-space:nowrap;box-shadow:0 10px 30px -12px rgba(0,215,255,.55);opacity:0;animation:hxTagIn .8s cubic-bezier(.16,.8,.3,1) forwards,hxFloat 6s ease-in-out infinite;}
  .hx-tag-dot{width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 10px var(--blue);}
  .hx-tag-1{top:14%;right:2%;animation-delay:.6s,1.4s;}
  .hx-tag-2{top:48%;left:-4%;animation-delay:.9s,2.2s;}
  .hx-tag-3{bottom:12%;right:6%;animation-delay:1.2s,.8s;}
  @keyframes hxTagIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
  .hx-games{position:absolute;left:0;right:0;bottom:34px;z-index:1;display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;padding:0 24px;}
  .hx-games-label{font-family:var(--display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray);}
  .hx-games-row{display:flex;align-items:center;gap:26px;flex-wrap:wrap;justify-content:center;}
  .hx-game{display:inline-flex;align-items:center;gap:9px;opacity:.6;transition:opacity .3s;font-family:var(--display);font-size:13px;color:var(--white);}
  .hx-game:hover{opacity:1;}
  .hx-game img{height:22px;width:auto;}
  .hx-scroll{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);width:22px;height:36px;border:1.5px solid rgba(255,255,255,.3);border-radius:12px;z-index:1;}
  .hx-scroll span{position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--blue);animation:hxScroll 1.8s infinite;}
  @keyframes hxScroll{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
  @media (max-width:1100px){.hx-scroll{display:none;}}
  @media (max-width:900px){
    .hero{padding:120px 0 150px;}
    .hero .wrap.hx{grid-template-columns:1fr;gap:10px;}
    .hx-visual{max-width:440px;order:-1;margin-top:-10px;}
    .hx-tag{font-size:11.5px;padding:7px 11px;}
    .hx-tag-2{left:0;}
    .hx-badge{font-size:9.5px;letter-spacing:.1em;}
    .hx-chips{display:grid;grid-template-columns:1fr 1fr;}
    .hx-chip{align-items:center;}
  }
  @media (prefers-reduced-motion:reduce){.hx-photo,.hx-tag,.hx-ring,.hx-halo,.hx-dot,.hero .hx-copy h1 .accent{animation:none!important;opacity:1;}}

  /* ===== Hero — blueprint manufacturing animation ===== */
  .hx-visual.bp{aspect-ratio:1/1;border:1px solid rgba(0,215,255,.28);border-radius:14px;overflow:hidden;
     background:
       linear-gradient(rgba(0,215,255,.07) 1px,transparent 1px) 0 0/24px 24px,
       linear-gradient(90deg,rgba(0,215,255,.07) 1px,transparent 1px) 0 0/24px 24px,
       linear-gradient(rgba(0,215,255,.13) 1px,transparent 1px) 0 0/120px 120px,
       linear-gradient(90deg,rgba(0,215,255,.13) 1px,transparent 1px) 0 0/120px 120px,
       radial-gradient(circle at 50% 55%,rgba(0,90,130,.35),rgba(3,14,22,.95) 70%),#03101a;
     box-shadow:0 40px 90px -40px rgba(0,215,255,.45),inset 0 0 80px rgba(0,0,0,.6);}
  #bpSvg{position:absolute;inset:0;width:100%;height:100%;}
  .bp-steps{position:absolute;top:14px;left:14px;right:14px;display:grid;grid-template-columns:repeat(5,auto);gap:5px;z-index:2;}
  .bp-step{position:relative;overflow:hidden;display:flex;align-items:center;gap:5px;padding:8px 7px;border-radius:8px;border:1px solid rgba(0,215,255,.2);background:rgba(3,16,26,.8);font-family:var(--display);font-size:9.5px;white-space:nowrap;letter-spacing:.02em;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-light);transition:color .3s,border-color .3s;}
  .bp-step .bp-n{color:rgba(0,215,255,.55);font-size:9px;}
  @media (max-width:1400px){.bp-step .bp-n{display:none;}}
  .bp-step i{position:absolute;left:0;bottom:0;height:2px;width:calc(var(--p,0)*100%);background:var(--blue);box-shadow:0 0 8px var(--blue);}
  .bp-step.on{color:var(--white);border-color:rgba(0,215,255,.6);}
  .bp-step.on .bp-n{color:var(--blue);}
  .bp-step.done i{width:100%;opacity:.35;}
  .bp-title{position:absolute;right:14px;bottom:14px;display:flex;border:1px solid rgba(0,215,255,.35);border-radius:6px;overflow:hidden;background:rgba(3,16,26,.85);z-index:2;}
  .bp-title > div{display:flex;flex-direction:column;padding:6px 10px;gap:2px;}
  .bp-title > div + div{border-left:1px solid rgba(0,215,255,.35);}
  .bp-title b{font-family:var(--display);font-size:11px;letter-spacing:.08em;color:var(--white);font-weight:700;}
  .bp-title span{font-family:var(--display);font-size:9px;letter-spacing:.1em;color:rgba(0,215,255,.75);}
  .bp-corner{position:absolute;width:14px;height:14px;border-color:rgba(0,215,255,.6);border-style:solid;border-width:0;z-index:2;}
  .bp-corner.tl{top:6px;left:6px;border-top-width:1.5px;border-left-width:1.5px;}
  .bp-corner.tr{top:6px;right:6px;border-top-width:1.5px;border-right-width:1.5px;}
  .bp-corner.bl{bottom:6px;left:6px;border-bottom-width:1.5px;border-left-width:1.5px;}
  .bp-corner.br{bottom:6px;right:6px;border-bottom-width:1.5px;border-right-width:1.5px;display:none;}
  @media (max-width:560px){.bp-step{font-size:9px;padding:6px 6px;gap:4px;}.bp-step .bp-n{display:none;}.bp-title{transform:scale(.85);transform-origin:right bottom;}}

  /* ===== Stockists — refreshed ===== */
  .stockists-sub{margin-top:14px;font-size:16px;line-height:1.6;color:var(--gray-light);max-width:560px;}
  .stockists-body{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:stretch;}
  #stockists .stockists-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px;background:none;border:0;align-content:start;}
  #stockists .stockist-card{position:relative;flex-direction:row;align-items:center;gap:22px;padding:26px 28px;min-height:150px;border:1px solid var(--panel-border);border-radius:14px;
      background:radial-gradient(ellipse at 0% 0%,rgba(0,215,255,.1),transparent 55%),#07090c;}
  #stockists .stockist-card.featured{box-shadow:none;border-color:rgba(0,215,255,.45);}
  #stockists .stockist-card:hover{transform:translateY(-3px);border-color:rgba(0,215,255,.6);box-shadow:0 20px 50px -25px rgba(0,215,255,.55);}
  #stockists .stockist-logo{width:auto;height:56px;min-width:56px;max-width:200px;border-radius:12px;padding:10px 14px;background:#0b0e12;overflow:hidden;}
  #stockists .stockist-logo img{width:auto;height:100%;object-fit:contain;}
  #stockists .stockist-name{font-size:18px;margin-bottom:8px;}
  #stockists .stockist-badge{border-radius:999px;padding:5px 10px;font-size:10px;letter-spacing:.06em;margin-bottom:8px;}
  #stockists .stockist-loc{font-size:13.5px;}
  .stockist-info{flex:1;min-width:0;}
  .stockist-visit{margin-left:auto;flex:none;padding:12px 16px;border:1px solid rgba(0,215,255,.4);border-radius:10px;display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);}
  .stockist-visit span{transition:transform .25s;}
  .stockist-card:hover .stockist-visit span{transform:translateX(4px);}
  .stockists-cta{border:1px dashed rgba(0,215,255,.4);border-radius:14px;padding:28px;background:rgba(0,215,255,.04);display:flex;flex-direction:column;align-items:flex-start;}
  .sc-ico{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--blue);background:rgba(0,215,255,.08);border:1px solid rgba(0,215,255,.3);margin-bottom:18px;}
  .sc-ico svg{width:24px;height:24px;}
  .stockists-cta h3{font-size:19px;margin-bottom:10px;}
  .stockists-cta p{font-size:14px;line-height:1.6;color:var(--gray-light);margin-bottom:22px;}
  .sc-btn{margin-top:auto;}
  .sc-btn{white-space:nowrap;justify-content:center;width:100%;}
  .sc-btn::after{content:" →";}
  @media (max-width:900px){.stockists-body{grid-template-columns:1fr;}}
  @media (max-width:640px){#stockists .stockist-card{flex-direction:column;align-items:flex-start;}.stockist-visit{margin-left:0;}}

  /* ===== FAQ — refreshed ===== */
  .faq-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:60px;align-items:start;}
  .faq-side{position:sticky;top:110px;}
  .faq-side h2{margin-bottom:16px;}
  .faq-side-p{font-size:15.5px;line-height:1.65;color:var(--gray-light);margin-bottom:28px;}
  .faq-help{border:1px solid var(--panel-border);border-radius:14px;padding:22px;background:radial-gradient(ellipse at 100% 0%,rgba(0,215,255,.1),transparent 60%),#07090c;}
  .faq-help-t{font-family:var(--display);font-size:15px;color:var(--white);margin-bottom:8px;}
  .faq-mail{display:inline-block;color:var(--blue);font-size:15px;margin-bottom:18px;border-bottom:1px solid rgba(0,215,255,.35);}
  .faq-help-btn{display:flex;justify-content:center;width:100%;}
  #faq .faq-list{max-width:none;display:flex;flex-direction:column;gap:10px;}
  #faq .faq-item{border:1px solid var(--panel-border);border-radius:12px;background:#07090c;transition:border-color .3s,box-shadow .3s,background .3s;}
  #faq .faq-item:first-child{border-top:1px solid var(--panel-border);}
  #faq .faq-item:hover{border-color:rgba(0,215,255,.35);}
  #faq .faq-item.open{border-color:rgba(0,215,255,.55);background:linear-gradient(180deg,rgba(0,215,255,.06),rgba(0,215,255,0) 60%),#07090c;box-shadow:0 20px 50px -30px rgba(0,215,255,.55);}
  #faq .faq-q{padding:20px 22px;gap:16px;}
  .faq-n{flex:none;font-family:var(--display);font-size:12px;color:rgba(0,215,255,.6);width:22px;}
  .faq-qt{flex:1;font-family:var(--display);font-size:15.5px;color:var(--white);line-height:1.35;}
  #faq .faq-q .faq-icon{width:30px;height:30px;border-radius:50%;border:1px solid rgba(0,215,255,.35);}
  #faq .faq-q .faq-icon::before{left:9px;top:14px;width:12px;}
  #faq .faq-q .faq-icon::after{left:14px;top:9px;height:12px;}
  #faq .faq-item.open .faq-icon{background:var(--blue);}
  #faq .faq-item.open .faq-icon::before,#faq .faq-item.open .faq-icon::after{background:#001018;}
  #faq .faq-a p{padding:0 22px 22px 60px;font-size:14.5px;line-height:1.7;max-width:none;}
  @media (max-width:900px){.faq-wrap{grid-template-columns:1fr;gap:30px;}.faq-side{position:static;}#faq .faq-a p{padding-left:22px;}}

  .stockists-main{display:flex;flex-direction:column;gap:16px;}
  .stockists-trust{display:flex;flex-wrap:wrap;gap:10px;}
  .stockists-trust > span{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--panel-border);border-radius:10px;background:#07090c;font-size:13px;color:var(--gray-light);}
  .stockists-trust svg{width:15px;height:15px;color:var(--blue);}

  /* ===== Game catalogue overlay — refreshed ===== */
  #gameCatalogueOverlay .gc-hero{position:relative;overflow:hidden;
     background:radial-gradient(ellipse at 85% 40%,rgba(0,215,255,.14),transparent 55%),
       linear-gradient(rgba(0,215,255,.05) 1px,transparent 1px) 0 0/28px 28px,
       linear-gradient(90deg,rgba(0,215,255,.05) 1px,transparent 1px) 0 0/28px 28px,#030a10;}
  .gc-wm{position:absolute;right:4%;top:50%;transform:translateY(-50%);height:150%;width:auto;opacity:.08;pointer-events:none;}
  .gc-hero-in{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;}
  .gc-hero-in #gcTitle{font-size:clamp(34px,4.4vw,60px);}
  .gc-hero-in #gcIntro{max-width:620px;font-size:16px;line-height:1.6;}
  .gc-hero-side{display:flex;align-items:center;gap:16px;}
  .gc-count{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:92px;padding:12px 16px;border:1px solid rgba(0,215,255,.3);border-radius:12px;background:rgba(3,16,26,.8);}
  .gc-count b{font-family:var(--display);font-size:26px;color:var(--white);line-height:1;}
  .gc-count span{font-family:var(--display);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-top:5px;}
  .gc-hero-cta{box-shadow:0 14px 40px -12px rgba(0,215,255,.8);}
  .gc-hero-cta::after{content:" →";}
  .gc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
  .gc-card{display:flex;flex-direction:column;border:1px solid var(--panel-border);border-radius:14px;overflow:hidden;background:#07090c;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s;
     animation:gcIn .6s cubic-bezier(.16,.8,.3,1) both;animation-delay:calc(var(--i)*60ms);}
  @keyframes gcIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  .gc-card:hover{transform:translateY(-4px);border-color:rgba(0,215,255,.55);box-shadow:0 24px 60px -30px rgba(0,215,255,.7);}
  .gc-visual{position:relative;aspect-ratio:4/3;border-bottom:1px solid var(--panel-border);
     background:radial-gradient(circle at 50% 55%,rgba(0,90,130,.35),rgba(3,14,22,.95) 70%),
       linear-gradient(rgba(0,215,255,.06) 1px,transparent 1px) 0 0/20px 20px,
       linear-gradient(90deg,rgba(0,215,255,.06) 1px,transparent 1px) 0 0/20px 20px,#03101a;}
  .gc-ill{position:absolute;inset:22px;width:calc(100% - 44px);height:calc(100% - 44px);display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1);}
  .gc-card:hover .gc-ill{transform:scale(1.05);}
  .gc-ill .gc-glow{filter:drop-shadow(0 0 3px rgba(0,215,255,.75));}
  .gc-n{position:absolute;top:12px;left:14px;font-family:var(--display);font-size:11px;letter-spacing:.1em;color:rgba(0,215,255,.7);}
  .gc-body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px;flex:1;}
  .gc-tag{align-self:flex-start;font-family:var(--display);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);padding:5px 10px;border-radius:999px;background:rgba(0,215,255,.08);border:1px solid rgba(0,215,255,.25);}
  .gc-body h3{font-size:18px;line-height:1.25;}
  .gc-spec{font-size:13.5px;color:var(--gray-light);}
  .gc-link{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);}
  .gc-link svg{width:14px;height:14px;transition:transform .25s;}
  .gc-card:hover .gc-link svg{transform:translateX(4px);}
  @media (max-width:1000px){.gc-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:620px){.gc-grid{grid-template-columns:1fr;}.gc-hero-side{width:100%;}.gc-hero-cta{flex:1;justify-content:center;}}

  /* ===== Featured product — media column, photo, lightbox, "coming soon" ===== */
  .detail-media{display:flex;flex-direction:column;gap:14px;width:100%;max-width:560px;}
  .detail .detail-media .detail-visual{max-width:none;}
  .detail-gallery{display:flex;align-items:center;gap:14px;}
  .dg-thumb{position:relative;width:96px;height:96px;padding:0;border-radius:12px;overflow:hidden;border:1px solid rgba(0,215,255,.35);background:#000;cursor:zoom-in;flex:none;transition:border-color .25s,transform .25s,box-shadow .25s;}
  .dg-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s;}
  .dg-thumb:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 12px 30px -14px rgba(0,215,255,.7);}
  .dg-thumb:hover img{transform:scale(1.08);}
  .dg-zoom{position:absolute;right:6px;bottom:6px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.65);color:var(--white);display:flex;align-items:center;justify-content:center;}
  .dg-zoom svg{width:14px;height:14px;}
  .dg-hint{font-size:13px;color:var(--gray-light);}
  .lightbox{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.92);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:4vw;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;cursor:zoom-out;}
  .lightbox.open{opacity:1;visibility:visible;}
  .lightbox img{max-width:100%;max-height:100%;border-radius:10px;box-shadow:0 30px 90px rgba(0,0,0,.8);transform:scale(.96);transition:transform .35s cubic-bezier(.2,.7,.2,1);cursor:default;}
  .lightbox.open img{transform:none;}
  .lb-close{position:absolute;top:18px;right:22px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.5);color:#fff;font-size:26px;line-height:1;cursor:pointer;}
  .detail-na{display:none;gap:14px;align-items:flex-start;padding:18px 20px;border:1px dashed rgba(0,215,255,.45);border-radius:12px;background:rgba(0,215,255,.05);margin-bottom:24px;}
  .detail-na svg{width:24px;height:24px;color:var(--blue);flex:none;margin-top:2px;}
  .detail-na strong{display:block;font-family:var(--display);font-size:15px;color:var(--white);margin-bottom:5px;}
  .detail-na span{display:block;font-size:14px;line-height:1.55;color:var(--gray-light);}
  #detail.dt-na .detail-na{display:flex;}
  #detail.dt-na .detail-stats,#detail.dt-na .detail-specs,#detail.dt-na .detail-media{display:none;}
  #detail.dt-na .detail{grid-template-columns:1fr;max-width:820px;}

  .gc-visual.has-photo{background:#000;}
  .gc-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1);}
  .gc-card:hover .gc-photo{transform:scale(1.05);}
  .gc-visual.has-photo .gc-n{z-index:1;text-shadow:0 1px 4px #000;}

  /* ===== Bumper Guards — boutique showroom ===== */
  #bumperFitOverlay{--bfx-aura:rgba(0,215,255,.35);}
  #bumperFitOverlay::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
     background:radial-gradient(ellipse 45% 40% at 34% 18%,rgba(255,255,255,.07),transparent 70%),
                radial-gradient(ellipse 120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.65) 100%);}
  #bumperFitOverlay > *{position:relative;z-index:1;}
  #bumperFitOverlay .bf-hero{display:none;}
  #bumperFitOverlay .bf-stage{max-width:1320px;grid-template-columns:minmax(0,1fr) 420px;gap:64px;align-items:start;padding-top:56px;}
  #bumperFitOverlay .bf-preview-wrap{order:1;position:relative;top:auto;}
  #bumperFitOverlay .bf-controls{order:2;padding:34px 32px 30px;border-radius:20px;border:1px solid rgba(255,255,255,.08);
     background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));backdrop-filter:blur(18px);box-shadow:0 40px 100px -40px rgba(0,0,0,.9);}
  /* viewer on a plinth under a spotlight */
  #bumperFitOverlay .bf-viewer-stage{max-width:470px;}
  #bumperFitOverlay .bf-preview-wrap::before{content:"";position:absolute;left:50%;top:-6%;width:70%;height:95%;transform:translateX(-50%);pointer-events:none;
     background:radial-gradient(ellipse 50% 60% at 50% 0%,rgba(255,255,255,.10),transparent 70%);filter:blur(4px);}
  #bumperFitOverlay .bf-preview-wrap::after{content:"";display:block;width:58%;max-width:300px;height:30px;margin:-92px auto 0;border-radius:50%;
     background:radial-gradient(ellipse at center,rgba(0,0,0,.85),rgba(0,0,0,0) 70%);}
  .bfx-plinth{display:none;}
  #bumperFitOverlay .bf-viewer-stage::after{content:"";position:absolute;left:10%;right:10%;top:12%;bottom:8%;z-index:-1;border-radius:50%;
     background:radial-gradient(circle,var(--bfx-aura),transparent 68%);filter:blur(40px);opacity:.75;transition:background .6s;}
  /* panel head */
  .bfx-eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:16px;}
  .bfx-eyebrow span:first-child{width:22px;height:1px;background:rgba(255,255,255,.4);}
  .bfx-title{font-size:clamp(28px,2.6vw,38px);line-height:1.08;margin-bottom:12px;letter-spacing:.01em;}
  .bfx-sub{font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.6);margin-bottom:26px;}
  /* selected colour */
  .bfx-selected{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:14px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);margin-bottom:20px;}
  .bfx-sel-sw{position:relative;width:48px;height:48px;border-radius:50%;flex:none;overflow:hidden;box-shadow:inset 0 2px 6px rgba(255,255,255,.35),inset 0 -6px 12px rgba(0,0,0,.4),0 0 0 3px rgba(255,255,255,.08),0 8px 24px -6px var(--bfx-aura);}
  .bfx-sel-sw.glitter::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,var(--bf-swatch-glitter) 0 .8px,transparent 1.3px);background-size:6px 6px;opacity:.8;mix-blend-mode:screen;}
  .bfx-sel-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;}
  .bfx-sel-lbl{font-family:var(--display);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45);}
  #bumperFitOverlay .bfx-sel-name{font-family:var(--display);font-size:20px;color:var(--white);line-height:1.15;}
  .bfx-sel-idx{font-family:var(--display);font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.4);white-space:nowrap;}
  /* swatches: polished round "jewels" in a calm grid */
  #bumperFitOverlay .bf-swatch-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:12px 10px;padding:4px 2px 6px;height:auto!important;margin-bottom:26px;}
  #bumperFitOverlay .bf-swatch{position:relative!important;left:auto!important;top:auto!important;width:38px;height:38px;border-radius:50%;clip-path:none;justify-self:center;
     box-shadow:inset 0 2px 5px rgba(255,255,255,.35),inset 0 -5px 10px rgba(0,0,0,.35),0 4px 12px rgba(0,0,0,.5);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;animation:none!important;}
  #bumperFitOverlay .bf-swatch::before{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid transparent;transition:border-color .3s;}
  #bumperFitOverlay .bf-swatch:hover{transform:translateY(-3px) scale(1.08);box-shadow:inset 0 2px 5px rgba(255,255,255,.4),inset 0 -5px 10px rgba(0,0,0,.35),0 10px 20px rgba(0,0,0,.6);}
  #bumperFitOverlay .bf-swatch.selected{transform:scale(1.02);}
  #bumperFitOverlay .bf-swatch.selected::before{border-color:rgba(255,255,255,.85);}
  #bumperFitOverlay .bf-swatch::after{border-radius:50%;}
  .bfx-sec-lbl{font-family:var(--display);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45);margin:4px 0 10px;}
  #bumperFitOverlay .bf-drop{border-radius:12px;border-color:rgba(255,255,255,.14);background:rgba(0,0,0,.25);padding:14px 16px;}
  #bumperFitOverlay .bf-light-toggle{border-radius:12px;border-color:rgba(255,255,255,.1);background:rgba(0,0,0,.3);margin-top:16px;}
  #bumperFitOverlay .bf-light-btn{border-radius:9px;}
  #bumperFitOverlay .bf-light-btn.active{background:rgba(255,255,255,.1);}
  #bumperFitOverlay .bf-actions{margin-top:16px;}
  #bumperFitOverlay .bf-actions-row{grid-template-columns:repeat(3,1fr);}
  #bumperFitOverlay .bf-action-btn{border-radius:10px;border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.02);justify-content:center;font-size:10px;padding:11px 8px;}
  #bumperFitOverlay .bf-action-btn span{white-space:nowrap;}
  #bumperFitOverlay .bf-action-btn svg{color:rgba(255,255,255,.8);}
  #bumperFitOverlay .bf-compare-btn{justify-content:center;}
  #bumperFitOverlay #bfOrderBtn{justify-content:center;padding:17px 20px;border-radius:12px;letter-spacing:.12em;box-shadow:0 18px 40px -16px rgba(0,215,255,.8);}
  #bumperFitOverlay .bf-footnote{padding-top:30px;color:rgba(255,255,255,.35);}
  @media (max-width:980px){
    #bumperFitOverlay .bf-stage{grid-template-columns:1fr;gap:28px;}
    #bumperFitOverlay .bf-preview-wrap{position:relative;top:auto;}
    #bumperFitOverlay .bf-viewer-stage{max-width:340px;}
    #bumperFitOverlay .bf-controls{padding:24px 20px;}
    #bumperFitOverlay .bf-actions-row{grid-template-columns:1fr 1fr 1fr;}
  }

  /* ===== Assistant — refreshed ===== */
  #chatToggle{background:radial-gradient(circle at 30% 30%,#6ff0ff,var(--blue) 60%);box-shadow:0 12px 30px -8px rgba(0,215,255,.7),0 0 0 6px rgba(0,215,255,.12);}
  #chatPanel{width:390px;height:560px;border-radius:18px;overflow:hidden;border:1px solid rgba(0,215,255,.25);
     background:linear-gradient(180deg,rgba(12,16,22,.96),rgba(6,8,11,.97));backdrop-filter:blur(16px);box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.03) inset;}
  #chatPanel .chat-header{background:linear-gradient(90deg,rgba(0,215,255,.12),rgba(0,215,255,0) 70%);padding:14px 16px;gap:12px;}
  .chat-avatar{position:relative;width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--blue);background:rgba(0,215,255,.1);border:1px solid rgba(0,215,255,.35);box-shadow:0 0 18px rgba(0,215,255,.25);flex:none;}
  .chat-avatar svg{width:22px!important;height:22px!important;}
  .chat-avatar-dot{position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;border-radius:50%;background:#3ddc84;border:2px solid #0b0f14;}
  .chat-header-txt{flex:1;min-width:0;}
  #chatPanel .chat-header-status::before{display:none;}
  .chat-reset{width:32px;height:32px;border-radius:9px;border:1px solid rgba(255,255,255,.12);background:transparent;color:var(--gray-light);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .2s,border-color .2s;}
  .chat-reset:hover{color:var(--white);border-color:var(--blue);}
  .chat-reset svg{width:15px!important;height:15px!important;color:currentColor!important;}
  #chatPanel .chat-body{padding:18px 16px;gap:10px;}
  #chatPanel .chat-msg{border-radius:14px;padding:11px 14px;font-size:13.8px;line-height:1.55;animation:chatIn .35s cubic-bezier(.2,.8,.2,1);}
  #chatPanel .chat-msg.bot{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-top-left-radius:4px;}
  #chatPanel .chat-msg.user{background:linear-gradient(135deg,#29e3ff,var(--blue));border-top-right-radius:4px;}
  #chatPanel .chat-msg a{color:var(--blue);}
  #chatPanel .chat-msg strong{color:var(--white);}
  @keyframes chatIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  #chatPanel .chat-suggestions{flex-direction:row;flex-wrap:wrap;}
  #chatPanel .chat-suggestion{border-radius:999px;border-color:rgba(0,215,255,.3);background:rgba(0,215,255,.05);color:var(--white);}
  #chatPanel .chat-suggestion:hover{background:rgba(0,215,255,.14);}
  #chatPanel .chat-action{border-radius:999px;padding:9px 14px;margin-top:0;box-shadow:0 8px 20px -10px rgba(0,215,255,.8);}
  #chatPanel .chat-typing{border-radius:14px;border-top-left-radius:4px;background:rgba(255,255,255,.05);}
  #chatPanel .chat-input-row{padding:12px;gap:8px;background:rgba(0,0,0,.25);}
  #chatPanel .chat-input-row input{border-radius:12px;padding:12px 14px;background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);}
  #chatPanel .chat-input-row button{border-radius:12px;width:44px;}
  #chatPanel .chat-handoff{font-size:11.5px;background:rgba(0,0,0,.25);}
  #chatNudge{border-radius:14px;border-color:rgba(0,215,255,.3);box-shadow:0 20px 40px -20px rgba(0,0,0,.8);}
  @media (max-width:560px){#chatPanel{height:min(560px,calc(100vh - 120px));}}

  /* ===== Nav: partner-login icon + Buy button ===== */
  .nav-cta{gap:14px;}
  .nav-icon-btn{position:relative;width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--panel-border);color:var(--gray-light);transition:color .25s,border-color .25s,box-shadow .25s;flex:none;}
  .nav-icon-btn svg{width:19px;height:19px;}
  .nav-icon-btn:hover{color:var(--blue);border-color:var(--blue);box-shadow:0 0 16px -4px rgba(0,215,255,.6);}
  .nav-icon-btn::after{content:attr(title);position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,-4px);white-space:nowrap;padding:6px 10px;border-radius:8px;background:#0b0e12;border:1px solid var(--panel-border);font-family:var(--display);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--white);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;}
  .nav-icon-btn:hover::after{opacity:1;transform:translate(-50%,0);}
  .nav-buy{padding:14px 22px;}
  @media (max-width:980px){.nav-buy{padding:10px 14px;font-size:11px;}}
  .nav-mobile-only{display:none;}
  @media (max-width:520px){.nav-buy{display:none;}.nav-mobile-only{display:list-item;}}

  /* ===== Header / nav — refined ===== */
  header{background:linear-gradient(180deg,rgba(3,6,9,.82),rgba(3,6,9,.62));backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border-bottom-color:transparent;}
  header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,215,255,.35) 30%,rgba(0,215,255,.35) 70%,transparent);}
  header.scrolled{background:rgba(3,6,9,.9);}
  .nav-progress{position:absolute;left:0;bottom:0;height:2px;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--blue),#7ff0ff);box-shadow:0 0 10px rgba(0,215,255,.8);z-index:2;pointer-events:none;}
  header .logo svg{transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .3s;}
  header .logo:hover svg{transform:rotate(60deg);filter:drop-shadow(0 0 8px rgba(0,215,255,.8));}
  @media (min-width:981px){
    .nav-links{position:relative;gap:6px;padding:5px;border-radius:999px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025);}
    .nav-links li{position:relative;z-index:1;}
    .nav-links a{display:block;padding:9px 16px;border-radius:999px;}
    .nav-links a::after{display:none;}
    .nav-links a.active{color:var(--white);}
    .nav-indicator{position:absolute;left:0;top:5px;bottom:5px;border-radius:999px;background:rgba(0,215,255,.12);border:1px solid rgba(0,215,255,.35);box-shadow:0 0 18px -6px rgba(0,215,255,.7);opacity:0;z-index:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),width .35s cubic-bezier(.2,.8,.2,1),opacity .25s;pointer-events:none;}
  }
  @media (max-width:980px){.nav-indicator{display:none;}}
  .lang-wrap{position:relative;display:inline-flex;align-items:center;}
  .lang-wrap svg{position:absolute;left:11px;width:15px;height:15px;color:var(--gray-light);pointer-events:none;}
  .lang-wrap .lang-switch{padding-left:32px;border-radius:999px;height:42px;cursor:pointer;}
  .nav-buy{display:inline-flex;align-items:center;gap:8px;border-radius:999px;}
  .nav-buy svg{width:16px;height:16px;}
  .nav-cta .btn-primary{border-radius:999px;box-shadow:0 10px 30px -12px rgba(0,215,255,.9);}

  /* ===== Partner login — refreshed ===== */
  #partnerPortalOverlay .pp-login-wrap{background:
      radial-gradient(ellipse 50% 45% at 50% 40%,rgba(0,215,255,.14),transparent 70%),
      linear-gradient(rgba(0,215,255,.05) 1px,transparent 1px) 0 0/40px 40px,
      linear-gradient(90deg,rgba(0,215,255,.05) 1px,transparent 1px) 0 0/40px 40px,#030608;}
  #partnerPortalOverlay .pp-login-card{max-width:440px;padding:40px 38px 30px;border-radius:20px;border:1px solid rgba(0,215,255,.28);
      background:linear-gradient(180deg,rgba(14,19,25,.96),rgba(7,9,12,.98));box-shadow:0 40px 100px -40px rgba(0,215,255,.45),0 0 0 1px rgba(255,255,255,.03) inset;
      animation:pplIn .5s cubic-bezier(.16,.8,.3,1);}
  @keyframes pplIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
  .pp-close-login{border-radius:10px;}
  .ppl-head{display:flex;align-items:center;gap:14px;margin-bottom:22px;}
  .ppl-mark{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--blue);background:rgba(0,215,255,.08);border:1px solid rgba(0,215,255,.35);box-shadow:0 0 22px rgba(0,215,255,.25);}
  .ppl-mark svg{width:26px;height:26px;}
  .ppl-eyebrow{font-family:var(--display);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);}
  #partnerPortalOverlay .pp-login-card h2{font-size:28px;margin-bottom:10px;}
  #partnerPortalOverlay .pp-login-card .pp-sub{font-size:14.5px;line-height:1.6;margin-bottom:26px;}
  #partnerPortalOverlay .ppl-form{display:block;}
  #partnerPortalOverlay .pp-login-card .field{margin-bottom:18px;}
  #partnerPortalOverlay .pp-login-card label{font-family:var(--display);font-size:10.5px;letter-spacing:.14em;margin-bottom:8px;}
  .ppl-input{position:relative;display:flex;align-items:center;}
  .ppl-input > svg{position:absolute;left:14px;width:18px;height:18px;color:var(--gray-light);pointer-events:none;transition:color .2s;}
  #partnerPortalOverlay .ppl-input input{padding:14px 44px 14px 44px;border-radius:12px;background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1);font-size:15px;transition:border-color .2s,box-shadow .2s;}
  #partnerPortalOverlay .ppl-input input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,215,255,.15);}
  .ppl-input:focus-within > svg{color:var(--blue);}
  .ppl-eye{position:absolute;right:8px;width:32px;height:32px;border-radius:8px;border:0;background:transparent;color:var(--gray-light);cursor:pointer;display:flex;align-items:center;justify-content:center;}
  .ppl-eye svg{width:18px;height:18px;}
  .ppl-eye:hover,.ppl-eye.on{color:var(--blue);}
  #partnerPortalOverlay .ppl-submit{width:100%;justify-content:center;border:none;cursor:pointer;border-radius:12px;padding:16px;margin-top:6px;box-shadow:0 14px 34px -14px rgba(0,215,255,.85);}
  .ppl-submit::after{content:" →";}
  .ppl-help{margin-top:16px;font-size:13px;color:var(--gray-light);text-align:center;}
  .ppl-help a{color:var(--blue);}
  .ppl-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);margin:22px 0 18px;}
  .ppl-join{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--gray-light);}
  .ppl-join a{color:var(--white);font-family:var(--display);font-size:12px;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--blue);}
  .ppl-join a::after{content:" →";color:var(--blue);}
  .ppl-secure{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:22px;font-size:12px;color:var(--gray);}
  .ppl-secure svg{width:15px;height:15px;color:var(--blue);}
  @media (max-width:480px){#partnerPortalOverlay .pp-login-card{padding:32px 22px 24px;}}

  /* intro: official mark — outline draws in, then fills */
  .intro-mark-wrap svg{width:230px!important;height:264px!important;}
  .il-path{fill:var(--c);fill-opacity:0;stroke:var(--c);stroke-width:5;stroke-dasharray:1;stroke-dashoffset:1;
     animation:ilPathDraw .7s cubic-bezier(.4,0,.2,1) .05s forwards, ilPathFill .35s ease-out .7s forwards;}
  @keyframes ilPathDraw{to{stroke-dashoffset:0}}
  @keyframes ilPathFill{to{fill-opacity:1;stroke-opacity:0}}
  .chat-avatar svg{width:24px!important;height:26px!important;}
  .ppl-mark svg{width:26px!important;height:30px!important;}

  /* official logo lock-up (mark + wordmark) */
  .logo .logo-full{width:auto!important;height:40px!important;display:block;transform:none!important;filter:none;transition:filter .3s;}
  header .logo:hover .logo-full{transform:none!important;filter:drop-shadow(0 0 8px rgba(0,215,255,.55));}
  footer .logo .logo-full{height:48px!important;}
  @media (max-width:640px){.logo .logo-full{height:32px!important;}}


  /* ===== Intro: full official logo =====
     1) the cube mark is traced with a thin line, then fills in cyan
     2) the letters rise in one by one, left → right
     3) a short glow pulse before the intro fades into the site */
  .intro-logo{gap:0!important;}
  .intro-logo svg{width:min(760px,84vw)!important;height:auto!important;aspect-ratio:2084/588;overflow:visible;
     animation:ilLogoGlow 1s ease-out 1.55s both!important;}
  .il-mark{fill:#00d7ff;fill-opacity:0;stroke:#00d7ff;stroke-width:2.2;stroke-dasharray:1;stroke-dashoffset:1;
     animation:ilMarkDraw .8s cubic-bezier(.65,0,.35,1) .1s forwards, ilMarkFill .45s ease-out .75s forwards;}
  .il-let{fill:#ffffff;opacity:0;transform-box:fill-box;transform-origin:50% 100%;
     animation:ilLetIn .5s cubic-bezier(.2,.8,.2,1) var(--d) forwards;}
  @keyframes ilMarkDraw{to{stroke-dashoffset:0}}
  @keyframes ilMarkFill{to{fill-opacity:1;stroke-opacity:0}}
  @keyframes ilLetIn{0%{opacity:0;transform:translateY(22%) scale(.96)}100%{opacity:1;transform:none}}
  @keyframes ilLogoGlow{0%{filter:drop-shadow(0 0 0 rgba(0,215,255,0))}40%{filter:drop-shadow(0 0 18px rgba(0,215,255,.75))}100%{filter:drop-shadow(0 0 6px rgba(0,215,255,.35))}}
  @media (max-width:640px){.intro-mark-wrap.intro-logo{transform:none!important;}}
  @media (prefers-reduced-motion:reduce){.il-mark{fill-opacity:1;stroke:none;animation:none}.il-let{opacity:1;animation:none}}

  /* ===== Partner portal dashboard ===== */
  #ppCatalogWrap{background:radial-gradient(ellipse 60% 40% at 80% 0%,rgba(0,215,255,.08),transparent 60%),#030507;min-height:100vh;}
  #ppCatalogWrap .pp-nav{background:rgba(3,6,9,.85);backdrop-filter:blur(14px);border-bottom:1px solid rgba(0,215,255,.18);}
  .ppd{max-width:1320px;margin:0 auto;padding:36px 32px 120px;}
  .ppd-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;padding:30px 32px;border-radius:20px;border:1px solid rgba(0,215,255,.2);
     background:linear-gradient(rgba(0,215,255,.04) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgba(0,215,255,.04) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(135deg,rgba(0,215,255,.08),rgba(0,0,0,0) 60%),#070a0e;margin-bottom:26px;}
  .ppd-eyebrow{font-family:var(--display);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin-bottom:10px;}
  .ppd-hello h2{font-size:clamp(24px,2.6vw,34px);margin-bottom:8px;}
  .ppd-hello p{font-size:14.5px;color:var(--gray-light);max-width:560px;line-height:1.6;}
  .ppd-stats{display:flex;gap:12px;}
  .ppd-stat{min-width:120px;padding:14px 18px;border-radius:14px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:4px;}
  .ppd-stat b{font-family:var(--display);font-size:26px;color:var(--white);}
  .ppd-stat span{font-size:12px;color:var(--gray-light);}
  .ppd-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:26px;align-items:start;}
  .ppd-toolbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:18px;}
  .ppd-search{position:relative;flex:1;min-width:220px;}
  .ppd-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--gray-light);}
  .ppd-search input{width:100%;padding:13px 14px 13px 42px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:var(--white);font-size:14.5px;outline:none;}
  .ppd-search input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,215,255,.12);}
  .ppd-tabs{display:flex;gap:6px;flex-wrap:wrap;}
  .ppd-tab{padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:transparent;color:var(--gray-light);font-family:var(--display);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .2s;}
  .ppd-tab:hover{color:var(--white);border-color:rgba(0,215,255,.4);}
  .ppd-tab.on{background:rgba(0,215,255,.12);border-color:var(--blue);color:var(--white);}
  #ppCatalogWrap .pp-catalog{max-width:none;padding:0;margin:0;}
  #ppCatalogWrap .pp-cat-group{border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:6px 18px 12px;margin-bottom:18px;background:#07090c;}
  #ppCatalogWrap .pp-cat-title{display:flex;align-items:center;gap:10px;padding:16px 0 10px;border-bottom:1px solid rgba(255,255,255,.07);}
  #ppCatalogWrap .pp-cat-title span{font-size:11px;color:var(--gray-light);padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.06);letter-spacing:0;}
  .ppd-sub{font-family:var(--display);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-light);margin:16px 0 4px;}
  #ppCatalogWrap .pp-row{display:grid;grid-template-columns:52px minmax(0,1fr) 110px 128px 96px;gap:16px;align-items:center;padding:10px 10px;border-radius:12px;border-bottom:0;transition:background .2s,box-shadow .2s;}
  #ppCatalogWrap .pp-row:hover{background:rgba(255,255,255,.03);}
  #ppCatalogWrap .pp-row.in-cart{background:rgba(0,215,255,.06);box-shadow:inset 3px 0 0 var(--blue);}
  .ppd-thumb{width:52px;height:52px;border-radius:10px;background:#03101a;border:1px solid rgba(0,215,255,.2);display:flex;align-items:center;justify-content:center;padding:6px;}
  .ppd-thumb svg{width:100%;height:100%;}
  #ppCatalogWrap .pp-row-name{font-size:15px;color:var(--white);}
  .ppd-meta{font-size:12px;color:var(--gray-light);margin-top:3px;}
  #ppCatalogWrap .pp-row-price{font-family:var(--display);font-size:14px;color:var(--white);text-align:right;}
  #ppCatalogWrap .pp-row-price small{display:block;font-family:Inter,sans-serif;font-size:11px;color:var(--gray-light);}
  #ppCatalogWrap .pp-qty{border-radius:10px;overflow:hidden;border-color:rgba(255,255,255,.12);}
  #ppCatalogWrap .pp-qty button{width:36px;}
  #ppCatalogWrap .pp-qty button:hover{background:rgba(0,215,255,.15);color:var(--blue);}
  #ppCatalogWrap .pp-row-subtotal{text-align:right;font-family:var(--display);}
  #ppCatalogWrap .pp-row.in-cart .pp-row-subtotal{color:var(--blue);}
  .ppd-soon{padding:18px 0;color:var(--gray-light);font-size:14px;}
  .ppd-empty-search{display:none;padding:40px;text-align:center;color:var(--gray-light);border:1px dashed rgba(255,255,255,.12);border-radius:16px;}
  #ppCatalogWrap .pp-margin-calc{max-width:none;padding:0;margin:8px 0 0;}
  #ppCatalogWrap .pp-margin-card{border-radius:16px;}
  .ppd-cart{position:sticky;top:96px;display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:18px;border:1px solid rgba(0,215,255,.25);
     background:linear-gradient(180deg,rgba(14,19,25,.97),rgba(7,9,12,.98));box-shadow:0 30px 80px -40px rgba(0,215,255,.45);}
  .ppd-cart-head{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:15px;color:var(--white);}
  .ppd-cart-head svg{color:var(--blue);}
  .ppd-cart-count{margin-left:auto;min-width:28px;height:28px;padding:0 8px;border-radius:999px;background:var(--blue);color:#001018;font-size:12px;display:flex;align-items:center;justify-content:center;}
  .ppd-cart-list{display:flex;flex-direction:column;gap:8px;max-height:44vh;overflow:auto;}
  .ppd-line{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.03);}
  .ppd-line b{display:block;font-weight:500;font-size:13.5px;color:var(--white);}
  .ppd-line span{font-size:12px;color:var(--gray-light);}
  .ppd-line strong{font-family:var(--display);font-size:13px;color:var(--white);}
  .ppd-line button{width:24px;height:24px;border-radius:6px;border:0;background:transparent;color:var(--gray-light);font-size:18px;cursor:pointer;}
  .ppd-line button:hover{color:#ff6b6b;background:rgba(255,107,107,.1);}
  .ppd-cart-empty{flex-direction:column;align-items:center;gap:10px;padding:26px 10px;text-align:center;font-size:13.5px;color:var(--gray-light);border:1px dashed rgba(255,255,255,.12);border-radius:12px;}
  .ppd-cart-empty svg{color:rgba(0,215,255,.5);}
  .ppd-cart-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);font-family:var(--display);font-size:14px;color:var(--gray-light);}
  .ppd-cart-total .amount{font-size:28px;color:var(--blue);}
  .ppd-vat{font-size:11.5px;color:var(--gray);margin-top:-6px;}
  #ppOrderNote{width:100%;resize:vertical;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:var(--white);font-family:inherit;font-size:13.5px;outline:none;}
  #ppOrderNote:focus{border-color:var(--blue);}
  .ppd-cart .pp-submit-btn{width:100%;justify-content:center;border:none;border-radius:12px;padding:16px;cursor:pointer;box-shadow:0 14px 34px -14px rgba(0,215,255,.85);}
  .ppd-cart .pp-submit-btn:disabled{opacity:.4;box-shadow:none;cursor:not-allowed;}
  .ppd-cart .pp-btn-secondary{width:100%;border-radius:12px;padding:13px;}
  #ppCatalogWrap .pp-summary-bar{display:none;}
  .ppd-mobilebar{display:none;}
  /* ===== produktové fotky ===== */
  .dg-thumbs{display:flex;gap:10px;flex-wrap:wrap;}
  .gc-visual.has-photo{position:relative;}
  .gc-photo-alt{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .7s ease;}
  .gc-card:hover .gc-photo-alt{opacity:1;}
  @media (hover:none){.gc-photo-alt{display:none;}}
  .ppd-thumb .ppd-photo{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block;}
  .ppd-thumb:has(.ppd-photo){padding:0!important;overflow:hidden;}
  .lightbox .lb-nav{display:none;position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.5);color:#fff;font-size:30px;line-height:1;cursor:pointer;z-index:2;}
  .lightbox.multi .lb-nav{display:flex;align-items:center;justify-content:center;}
  .lightbox .lb-nav.prev{left:20px;} .lightbox .lb-nav.next{right:20px;}
  .lightbox .lb-nav:hover{border-color:var(--blue);color:var(--blue);}
  /* ===== portal: barvy Bumper Guard ===== */
  .ppc-toggle{justify-self:stretch;justify-content:center;display:inline-flex;align-items:center;gap:8px;padding:9px 10px;min-width:0;border-radius:10px;border:1px solid rgba(0,215,255,.35);background:rgba(0,215,255,.06);color:var(--white);font-family:var(--body);font-size:13px;cursor:pointer;white-space:nowrap;transition:all .2s;}
  .ppc-toggle:hover,.ppc-toggle.open{border-color:var(--blue);background:rgba(0,215,255,.12);}
  .ppc-dots{display:none;}
  .ppc-dots i{width:14px;height:14px;border-radius:50%;border:1.5px solid #07090c;margin-left:-5px;}
  .ppc-dots i:first-child{margin-left:0;}
  .ppc-panel{margin:4px 0 14px;padding:16px;border-radius:14px;border:1px solid rgba(0,215,255,.2);background:#05080b;animation:ppvIn .25s ease-out;}
  .ppc-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:space-between;}
  .ppc-fams{display:flex;gap:6px;flex-wrap:wrap;}
  .ppc-fam{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:transparent;color:var(--gray-light);font-size:12px;cursor:pointer;}
  .ppc-fam i{width:10px;height:10px;border-radius:50%;}
  .ppc-fam:hover{color:var(--white);} .ppc-fam.on{border-color:var(--blue);color:var(--white);background:rgba(0,215,255,.1);}
  .ppc-search{width:190px;padding:9px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:var(--white);font-size:13px;outline:none;}
  .ppc-search:focus{border-color:var(--blue);}
  .ppc-hint{font-size:12.5px;color:var(--gray);margin:12px 2px 10px;}
  .ppc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;}
  .ppc-item{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);transition:border-color .2s,background .2s;}
  .ppc-item.on{border-color:rgba(0,215,255,.45);background:rgba(0,215,255,.06);}
  .ppc-sw{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.18);position:relative;overflow:hidden;}
  .ppc-sw.glit::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,#ffd700 1px,transparent 1.5px) 0 0/6px 6px,radial-gradient(circle,#fff6b0 .8px,transparent 1.3px) 3px 2px/8px 8px;}
  .ppc-sw.clear{opacity:.6;}
  .ppc-txt{display:flex;flex-direction:column;min-width:0;line-height:1.25;}
  .ppc-txt b{font-family:var(--display);font-weight:400;font-size:12.5px;letter-spacing:.05em;color:var(--white);}
  .ppc-txt span{font-size:13px;color:var(--white);}
  .ppc-txt small{font-size:11px;color:var(--gray-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  #ppCatalogWrap .ppc-qty{border-radius:9px;overflow:hidden;border-color:rgba(255,255,255,.12);}
  #ppCatalogWrap .ppc-qty button{width:28px;}
  #ppCatalogWrap .ppc-qty input{width:40px;}
  .ppc-mini{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px;border:1px solid rgba(255,255,255,.25);}
  .ppm-btns{display:flex;gap:8px;flex-wrap:wrap;}
  @media (max-width:640px){
    .ppc-toggle{grid-area:q;justify-self:end;}
    .ppc-search{width:100%;}
    .ppc-grid{grid-template-columns:1fr;}
  }

  /* ===== portal: views ===== */
  .ppv-tabs{display:flex;justify-content:flex-start;max-width:none;padding:0;transition:none;gap:28px;margin:-6px 4px 22px;border-bottom:1px solid rgba(255,255,255,.08);overflow-x:auto;scrollbar-width:none;}
  .ppv-tabs::-webkit-scrollbar{display:none;}
  .ppv-tab{position:relative;display:flex;align-items:center;gap:8px;padding:14px 2px 15px;background:none;border:0;color:var(--gray-light);font-family:var(--display);font-size:13px;letter-spacing:.06em;cursor:pointer;white-space:nowrap;transition:color .2s;}
  .ppv-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--blue);box-shadow:0 0 12px rgba(0,215,255,.8);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.2,1);}
  .ppv-tab:hover{color:var(--white);}
  .ppv-tab.on{color:var(--white);}
  .ppv-tab.on::after{transform:scaleX(1);}
  .ppv-tab:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:4px;}
  .ppv-count[hidden]{display:none;}
  .ppv-count{min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:rgba(0,215,255,.14);color:var(--blue);font-family:var(--body);font-size:11.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;}
  .ppd-layout[hidden],.ppv-panel[hidden]{display:none!important;}
  .ppv-panel{animation:ppvIn .3s ease-out;}
  @keyframes ppvIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
  .ppv-head{margin:0 4px 22px;max-width:640px;}
  .ppv-head h3{font-size:clamp(20px,2vw,26px);margin-bottom:6px;}
  .ppv-head p{font-size:14.5px;line-height:1.6;color:var(--gray-light);}
  @media (prefers-reduced-motion:reduce){.ppv-panel{animation:none;}.ppv-tab::after{transition:none;}}

  /* ===== portal: stock / tiers / cartons ===== */
  .ppd-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;}
  .ppd-tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;line-height:1;padding:5px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.1);color:var(--gray-light);white-space:nowrap;}
  .ppd-tag.stock::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
  .ppd-tag.stock.in{color:#46e3a0;border-color:rgba(70,227,160,.25);}
  .ppd-tag.stock.low{color:#ffc44d;border-color:rgba(255,196,77,.3);}
  .ppd-tag.stock.lead{color:#9fb6ff;border-color:rgba(159,182,255,.3);}
  .ppd-tag.tier{color:var(--gray-light);}
  .ppd-tag.tier.hit{color:var(--blue);border-color:rgba(0,215,255,.45);background:rgba(0,215,255,.08);}
  .ppd-tag.pack{color:var(--gray-light);border-style:dashed;}
  #ppCatalogWrap .pp-row-price s{display:block;font-family:var(--body);font-size:11px;color:var(--gray);text-decoration-thickness:1px;}
  #ppCatalogWrap .pp-row-price.disc{color:var(--blue);}
  .ppd-line .ppd-disc{font-style:normal;color:var(--blue);margin-left:6px;}
  .ppd-line .ppd-next{display:block;margin-top:3px;font-size:11.5px;color:#9fb6ff;}
  .ppd-err{display:none;font-size:13px;line-height:1.5;color:#ff8a8a;padding:10px 12px;border-radius:10px;background:rgba(255,92,92,.08);border:1px solid rgba(255,92,92,.25);}
  .ppd-err.show{display:block;}
  .pp-success-meta{font-size:14px;color:var(--gray-light);margin-top:-4px;}
  .pp-success-meta b{color:var(--white);font-family:var(--display);font-weight:400;}
  .ppd-toast{position:fixed;left:50%;bottom:26px;z-index:2150;transform:translate(-50%,20px);opacity:0;pointer-events:none;max-width:min(560px,calc(100vw - 32px));padding:14px 18px;border-radius:12px;background:#07131a;border:1px solid rgba(0,215,255,.4);color:var(--white);font-size:14px;line-height:1.5;box-shadow:0 20px 50px rgba(0,0,0,.6);transition:opacity .25s,transform .25s;}
  .ppd-toast.show{opacity:1;transform:translate(-50%,0);}

  /* ===== portal: orders ===== */
  .ppo-list{display:flex;flex-direction:column;gap:12px;}
  .ppo{border:1px solid rgba(255,255,255,.08);border-radius:16px;background:#07090c;padding:18px 20px;transition:border-color .2s;}
  .ppo:hover{border-color:rgba(0,215,255,.25);}
  .ppo-head{display:grid;grid-template-columns:minmax(0,1.3fr) auto minmax(0,1fr) auto;gap:18px;align-items:center;}
  .ppo-id b{display:block;font-family:var(--display);font-weight:400;font-size:15px;color:var(--white);letter-spacing:.04em;}
  .ppo-id span{font-size:12.5px;color:var(--gray-light);}
  .ppo-st{justify-self:start;font-size:12px;padding:5px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);color:var(--gray-light);white-space:nowrap;}
  .ppo-st.received{color:var(--blue);border-color:rgba(0,215,255,.35);}
  .ppo-st.processing{color:#ffc44d;border-color:rgba(255,196,77,.35);}
  .ppo-st.shipped{color:#46e3a0;border-color:rgba(70,227,160,.35);}
  .ppo-st.cancelled{color:#ff8a8a;border-color:rgba(255,92,92,.3);}
  .ppo-sum{font-size:13px;color:var(--gray-light);}
  .ppo-total{font-family:var(--display);font-size:18px;color:var(--white);text-align:right;white-space:nowrap;}
  .ppo-foot{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.06);}
  .ppo-det{flex:1 1 320px;min-width:0;}
  .ppo-det summary{cursor:pointer;font-size:13px;color:var(--gray-light);list-style:none;display:inline-flex;align-items:center;gap:8px;}
  .ppo-det summary::-webkit-details-marker{display:none;}
  .ppo-det summary::before{content:"";width:7px;height:7px;border-right:1.5px solid var(--blue);border-bottom:1.5px solid var(--blue);transform:rotate(-45deg);transition:transform .2s;}
  .ppo-det[open] summary::before{transform:rotate(45deg);}
  .ppo-det summary:hover{color:var(--white);}
  .ppo-lines{width:100%;border-collapse:collapse;margin-top:12px;font-size:13.5px;}
  .ppo-lines td{padding:9px 6px;border-bottom:1px solid rgba(255,255,255,.05);color:var(--white);}
  .ppo-lines td small{display:block;color:var(--gray-light);font-size:11.5px;}
  .ppo-lines td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}
  .ppo-note{margin-top:10px;font-size:13px;color:var(--gray-light);}
  .ppo-act{display:flex;gap:8px;margin-left:auto;margin-top:-4px;}
  .ppo-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:transparent;color:var(--white);font-family:var(--body);font-size:13px;cursor:pointer;transition:all .2s;}
  .ppo-btn:hover{border-color:rgba(0,215,255,.5);color:var(--blue);}
  .ppo-btn.primary{background:var(--blue);border-color:var(--blue);color:#001018;font-weight:600;}
  .ppo-btn.primary:hover{box-shadow:0 10px 26px -10px rgba(0,215,255,.9);color:#001018;}
  .ppo-btn svg{width:16px;height:16px;}
  .ppo-empty{padding:44px 20px;text-align:center;border:1px dashed rgba(255,255,255,.12);border-radius:16px;color:var(--gray-light);font-size:14.5px;line-height:1.6;}
  .ppo-empty .ppo-btn{margin-top:16px;}
  .ppo-local{font-size:12px;color:var(--gray);margin:14px 4px 0;}
  @media (max-width:760px){
    .ppo{padding:16px;}
    .ppo-head{grid-template-columns:minmax(0,1fr) auto;row-gap:10px;}
    .ppo-st{grid-column:2;grid-row:1;justify-self:end;}
    .ppo-sum{grid-column:1;} .ppo-total{grid-column:2;}
    .ppo-act{width:100%;} .ppo-act .ppo-btn{flex:1;justify-content:center;}
  }

  /* ===== portal: materials ===== */
  .ppm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;}
  .ppm{display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:#07090c;min-height:200px;}
  .ppm.gen{border-color:rgba(0,215,255,.28);background:linear-gradient(160deg,rgba(0,215,255,.07),rgba(0,0,0,0) 55%),#07090c;}
  .ppm-ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#03101a;border:1px solid rgba(0,215,255,.22);color:var(--blue);}
  .ppm-ico svg{width:22px;height:22px;}
  .ppm h4{font-size:16px;font-weight:600;color:var(--white);}
  .ppm p{font-size:13.5px;line-height:1.55;color:var(--gray-light);flex:1;}
  .ppm .ppo-btn{align-self:flex-start;}
  .ppm-soon{align-self:flex-start;font-size:12.5px;color:var(--gray);padding:9px 0;}
  .ppm-size{font-size:12px;color:var(--gray);margin-left:4px;}

  .wiz-fail{display:none;margin-top:12px;font-size:13.5px;color:#ff8a8a;}
  .wiz-fail.show{display:block;}

  @media (max-width:1000px){
    .ppd-layout{grid-template-columns:minmax(0,1fr);}
    .ppd-main{min-width:0;}
    .ppd-cart{position:relative;top:auto;}
    .ppd-mobilebar.show{display:flex;position:sticky;margin:0 12px;bottom:12px;z-index:5;justify-content:space-between;align-items:center;padding:12px 14px 12px 20px;border-radius:14px;background:rgba(7,10,14,.95);border:1px solid rgba(0,215,255,.35);backdrop-filter:blur(12px);font-family:var(--display);color:var(--blue);font-size:18px;}
    .ppd-mobilebar button{border:0;border-radius:10px;padding:11px 16px;background:var(--blue);color:#001018;font-family:var(--display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;}
  }
  @media (max-width:640px){
    .ppd{padding:20px 14px 30px;}
    #ppCatalogWrap .pp-welcome{display:none;}
    .ppd-hero{padding:22px 18px;}
    .ppd-stats{width:100%;} .ppd-stat{flex:1;min-width:0;padding:12px;}
    #ppCatalogWrap .pp-row{grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"t n n" "t p q";row-gap:8px;}
    #ppCatalogWrap .pp-row .ppd-thumb{grid-area:t;width:44px;height:44px;}
    #ppCatalogWrap .pp-row .pp-row-name{grid-area:n;} #ppCatalogWrap .pp-row .pp-row-price{grid-area:p;text-align:left;} #ppCatalogWrap .pp-row .pp-qty{grid-area:q;}
    #ppCatalogWrap .pp-row .pp-row-subtotal{display:none;}
    #ppCatalogWrap .pp-margin-card{grid-template-columns:1fr!important;display:grid;}
    #ppCatalogWrap .pp-margin-card > *{grid-column:auto!important;min-width:0;}
  }