/* Penetration Diagram — shared CSS for homepage + product pages */
    /* PENETRATION DIAGRAM */
    .penetration-section{position:relative}
    .penetration-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}
    @media(max-width:900px){.penetration-grid{grid-template-columns:1fr;gap:48px}}

    .pd-frame{
      position:relative;
      width:100%;
      max-width:580px;
      aspect-ratio:5/6;
      margin:0 auto;
      background:linear-gradient(180deg,#080706 0%,#0c0908 50%,#100908 100%);
      border:1px solid var(--line);
      border-radius:var(--radius-lg);
      overflow:hidden;
      box-shadow:0 30px 80px rgba(0,0,0,0.5),inset 0 0 60px rgba(255,77,46,0.05)
    }

    /* Product source area at top */
    .pd-source{
      position:absolute;
      top:0;left:0;right:0;
      height:22%;
      display:flex;
      align-items:center;
      justify-content:center;
      z-index:3;
      pointer-events:none;
    }
    .pd-source img{
      max-height:92%;
      max-width:78%;
      width:auto;
      height:auto;
      object-fit:contain;
      filter:drop-shadow(0 0 24px rgba(255,77,46,0.5)) drop-shadow(0 0 48px rgba(255,77,46,0.25));
    }

    /* (LED dot row removed — light band now carries the visual) */

    /* Light zone (red beam hitting the skin) */
    .pd-light{
      position:absolute;
      top:22%;left:0;right:0;
      height:6%;
      background:linear-gradient(180deg,rgba(255,77,46,0.55) 0%,rgba(255,77,46,0.2) 50%,transparent 100%);
      animation:pd-light-pulse 4s ease-in-out infinite;
    }
    .pd-light::before,.pd-light::after{
      content:'';
      position:absolute;
      top:0;bottom:0;
      width:1px;
      background:linear-gradient(180deg,rgba(255,180,140,0.8) 0%,transparent 100%);
    }
    .pd-light::before{left:20%}
    .pd-light::after{right:20%}
    @keyframes pd-light-pulse{0%,100%{opacity:0.85}50%{opacity:1}}

    /* Large radial glow from behind the product */
    .pd-glow{
      position:absolute;
      top:11%;
      left:50%;
      transform:translate(-50%,-50%);
      width:110%;
      aspect-ratio:1/1;
      background:radial-gradient(ellipse 55% 65% at 50% 50%,
        rgba(255,77,46,0.55) 0%,
        rgba(255,77,46,0.35) 18%,
        rgba(255,77,46,0.18) 35%,
        rgba(255,77,46,0.06) 55%,
        transparent 75%);
      animation:pd-glow-pulse 4s ease-in-out infinite;
      pointer-events:none;
      z-index:1;
      filter:blur(6px);
    }
    @keyframes pd-glow-pulse{
      0%,100%{opacity:0.7;transform:translate(-50%,-50%) scale(1)}
      50%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}
    }
    .pd-glow{animation-duration:2.2s}

    /* SKIN callout — centered in the light band, with downward arrow */
    .pd-skin-top{
      position:absolute;
      top:22.5%;
      left:0;right:0;
      display:flex;
      flex-direction:column;
      align-items:center;
      z-index:5;
      pointer-events:none;
    }
    .pd-skin-top-label{
      font-family:'JetBrains Mono',monospace;
      font-size:22px;
      letter-spacing:0.3em;
      color:rgba(255,210,170,0.98);
      font-weight:600;
      text-transform:uppercase;
      line-height:1;
      text-shadow:0 0 14px rgba(255,77,46,0.7);
    }
    .pd-skin-top-head{
      width:0;
      height:0;
      border-left:8px solid transparent;
      border-right:8px solid transparent;
      border-top:10px solid rgba(255,210,170,0.95);
      margin-top:4px;
      filter:drop-shadow(0 0 4px rgba(255,77,46,0.7));
    }

    /* Skin layers */
    .pd-layer{position:absolute;left:0;right:0}
    .pd-epidermis{
      top:28%;height:11%;
      background:linear-gradient(180deg,rgba(255,77,46,0.12) 0%,rgba(255,77,46,0.22) 100%);
      border-top:1px solid rgba(255,120,80,0.5);
    }
    .pd-dermis{
      top:39%;height:24%;
      background:linear-gradient(180deg,rgba(220,60,30,0.28) 0%,rgba(160,30,15,0.38) 100%);
    }
    .pd-muscle{
      top:63%;height:37%;
      background:linear-gradient(180deg,rgba(140,25,12,0.45) 0%,rgba(80,12,5,0.55) 100%);
    }

    /* (Old SKIN boundary + bracket removed — replaced by .pd-skin-top callout) */

    /* Layer boundary tick lines (subtle scientific feel) */
    .pd-ticks{
      position:absolute;
      top:28%;left:0;right:0;height:11%;
      border-bottom:1px dashed rgba(255,255,255,0.06);
      pointer-events:none;
    }
    .pd-ticks::before{
      content:'';
      position:absolute;
      inset:0;
      background-image:repeating-linear-gradient(90deg,rgba(255,255,255,0.05) 0,rgba(255,255,255,0.05) 1px,transparent 1px,transparent 8px);
    }

    /* Cell dots that "activate" */
    .pd-cells{position:absolute;inset:0;pointer-events:none}
    .pd-cell{
      position:absolute;
      width:4px;height:4px;
      border-radius:50%;
      background:rgba(255,140,90,0.4);
      animation:pd-cell-activate 3.6s ease-in-out infinite;
    }
    @keyframes pd-cell-activate{
      0%,65%,100%{background:rgba(255,140,90,0.35);box-shadow:none;transform:scale(1)}
      20%,45%{
        background:rgba(255,210,160,1);
        box-shadow:0 0 8px rgba(255,200,140,0.9),0 0 18px rgba(255,120,70,0.6);
        transform:scale(1.8)
      }
    }

    /* Depth labels on the right */
    .pd-depth{
      position:absolute;
      right:10px;
      display:flex;align-items:center;gap:8px;
      font-family:'JetBrains Mono',monospace;
      font-size:13.5px;
      letter-spacing:0.12em;
      text-transform:uppercase;
      color:rgba(255,255,255,0.55);
      z-index:2;
    }
    .pd-depth-line{width:18px;height:1px;background:rgba(255,255,255,0.25)}
    .pd-depth-sub{color:rgba(255,77,46,0.7);font-size:12px;letter-spacing:0.15em}
    .pd-depth-epidermis{top:30%}
    .pd-depth-dermis{top:50%}
    .pd-depth-muscle{top:78%}

    /* Wavelength arrows on the left */
    .pd-arrow{
      position:absolute;
      left:12px;
      display:flex;align-items:center;gap:10px;
      font-family:'JetBrains Mono',monospace;
      font-size:20px;
      letter-spacing:0.12em;
      text-transform:uppercase;
      z-index:2;
    }
    .pd-arrow-660{top:42%;color:#ff8a6a}
    .pd-arrow-850{top:75%;color:#c97aff}
    .pd-arrow-shaft{
      width:120px;height:4px;position:relative;
      border-radius:2px;
    }
    .pd-arrow-660 .pd-arrow-shaft{background:linear-gradient(90deg,transparent,#ff7a5c 60%,#ff4d2e);box-shadow:0 0 10px rgba(255,77,46,0.7)}
    .pd-arrow-850 .pd-arrow-shaft{background:linear-gradient(90deg,transparent,#c97aff 60%,#9c2bff);box-shadow:0 0 10px rgba(156,43,255,0.7)}
    .pd-arrow-shaft::after{
      content:'';
      position:absolute;
      right:-2px;top:50%;
      width:0;height:0;
      transform:translateY(-50%);
      border-left:12px solid currentColor;
      border-top:6px solid transparent;
      border-bottom:6px solid transparent;
    }
    .pd-arrow-660 .pd-arrow-shaft::after{border-left-color:#ff4d2e}
    .pd-arrow-850 .pd-arrow-shaft::after{border-left-color:#9c2bff}

    /* Side text labels for the wavelength path (e.g. "Surface" "Deep") */
    .pd-arrow-target{
      position:absolute;
      left:50%;
      transform:translateX(-50%);
      text-align:center;
      font-family:'JetBrains Mono',monospace;
      font-size:13.5px;
      letter-spacing:0.2em;
      text-transform:uppercase;
      font-weight:500;
      z-index:2;
      text-shadow:0 0 12px rgba(0,0,0,0.8),0 0 4px rgba(0,0,0,0.6);
    }
    .pd-arrow-target-660{top:48%;color:#ffb088}
    .pd-arrow-target-850{top:81%;color:#d4a8ff}

    /* Corner monogram */
    .pd-corner{
      position:absolute;
      font-family:'JetBrains Mono',monospace;
      font-size:12px;
      letter-spacing:0.18em;
      color:rgba(255,255,255,0.2);
      text-transform:uppercase;
      z-index:2;
    }
    .pd-corner-tl{top:10px;left:12px}
    .pd-corner-br{bottom:10px;right:12px}

    /* Side content */
    .penetration-content h3{margin-bottom:12px;margin-top:32px}
    .penetration-content h3:first-child{margin-top:0}
    .penetration-content p{color:var(--ink-2);font-size:16px;line-height:1.7;margin-bottom:0}
    .penetration-content .pd-tag{
      display:inline-block;
      font-family:'JetBrains Mono',monospace;
      font-size:10px;
      letter-spacing:0.15em;
      text-transform:uppercase;
      margin-bottom:8px;
    }
    .penetration-content .pd-tag-660{color:#ff8a6a}
    .penetration-content .pd-tag-850{color:#c97aff}

    @media(max-width:768px){
      .pd-frame{max-width:420px}
      .pd-depth{font-size:10px;right:6px;gap:6px}
      .pd-depth-line{width:10px}
      .pd-depth-sub{font-size:9px}
      .pd-arrow{font-size:13px;left:8px;gap:6px}
      .pd-arrow-shaft{width:60px;height:3px}
      .pd-arrow-shaft::after{border-left:8px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent}
      .pd-arrow-target{font-size:10px}
      .pd-arrow-target-660{top:50%}
      .pd-arrow-target-850{top:82%}
      .pd-corner{font-size:9px}
    }