/* =====================================================================
   NETWERKS64 depth layer (depth.css)  ·  Rev. v5, 2026-08-03
   Loaded AFTER site.css and after each page's inline <style> block so it
   wins on equal specificity without editing ten inline blocks.

   Pure CSS. No JavaScript, no libraries, no new network requests beyond
   this file (~6KB). Every motion rule is disabled under
   prefers-reduced-motion. Layout, DOM and copy are untouched.
   ===================================================================== */

:root{
  /* Layered elevation ramp. Two shadows per level: a tight contact
     shadow that grounds the element, and a wide soft shadow that gives
     it height. Tinted with the brand ink, not pure black. */
  --e1: 0 1px 2px rgba(2,20,27,.06), 0 2px 6px rgba(2,20,27,.05);
  --e2: 0 2px 4px rgba(2,20,27,.06), 0 8px 20px rgba(2,20,27,.07);
  --e3: 0 4px 8px rgba(2,20,27,.07), 0 18px 40px rgba(2,20,27,.10);
  --e4: 0 8px 16px rgba(2,20,27,.08), 0 34px 70px rgba(2,20,27,.14);

  /* Top edge highlight. Reads as a lit bevel against the elevation. */
  --lip: inset 0 1px 0 rgba(255,255,255,.9);
  --lip-strong: inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(2,20,27,.05);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .28s;
}

/* ---------------------------------------------------------------
   1. Page field
   A fixed gradient mesh sits behind everything so scrolling content
   passes over a lit surface instead of flat #F8FAFC.
   --------------------------------------------------------------- */
body{
  background:
    radial-gradient(900px 620px at 12% -8%,  rgba(0,184,217,.10), transparent 62%),
    radial-gradient(760px 560px at 92% 4%,   rgba(74,230,71,.09),  transparent 60%),
    radial-gradient(1100px 800px at 50% 108%,rgba(0,144,168,.07),  transparent 64%),
    var(--bg);
  background-attachment: fixed;
}

/* ---------------------------------------------------------------
   2. Header — frosted glass, lifts off the page on scroll
   --------------------------------------------------------------- */
header.nav{
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(226,232,240,.85);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 8px 24px rgba(2,20,27,.06);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  header.nav{ background:#fff; }
}

/* Brand wordmark gets a hairline lift so it reads as the top plane. */
.brand{
  text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 2px 10px rgba(0,184,217,.18);
}
.brand b{ font-weight: inherit; }

/* Nav tabs: an underline that grows from the centre, no layout shift. */
.nav .tabs a{ position: relative; transition: color var(--dur) var(--ease); }
.nav .tabs a::after{
  content:""; position:absolute; left:50%; right:50%; bottom:0; height:2px;
  border-radius:2px; background: var(--cyan);
  transition: left var(--dur) var(--ease), right var(--dur) var(--ease);
}
.nav .tabs a:hover::after,
.nav .tabs a[aria-current="page"]::after{ left:0; right:0; }

/* ---------------------------------------------------------------
   3. Hero — mesh field plus a floating, tilted product plate
   --------------------------------------------------------------- */
.hero{
  position: relative;
  background:
    radial-gradient(680px 420px at 18% 8%,  rgba(0,184,217,.16), transparent 66%),
    radial-gradient(560px 400px at 88% 18%, rgba(74,230,71,.14),  transparent 62%),
    linear-gradient(160deg,#ffffff,#EAFBFF);
  overflow: hidden;
}
/* Faint engineering grid, fading out downward. Sets a floor plane. */
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(2,20,27,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(2,20,27,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
}
.hero .wrap{ position: relative; z-index: 1; }

/* The hero plate: perspective tilt, deep shadow, settles flat on hover. */
.hero-img{
  perspective: 1200px;
  box-shadow: var(--e4), var(--lip);
  border-color: rgba(226,232,240,.9);
  background: linear-gradient(180deg,#fff,#fbfeff);
  transform: perspective(1400px) rotateY(-7deg) rotateX(3deg) translateZ(0);
  transform-style: preserve-3d;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  will-change: transform;
}
.hero-img:hover{
  transform: perspective(1400px) rotateY(-2deg) rotateX(1deg) translateY(-6px);
  box-shadow: 0 12px 24px rgba(2,20,27,.10), 0 46px 90px rgba(2,20,27,.18), var(--lip);
}
.hero-img img{ box-shadow: 0 2px 10px rgba(2,20,27,.10); }
@media(max-width:900px){
  /* No tilt on narrow screens. A tilted plate at full width reads as broken. */
  .hero-img, .hero-img:hover{ transform:none; box-shadow: var(--e3), var(--lip); }
}

/* ---------------------------------------------------------------
   4. Buttons — extruded, and they physically press
   --------------------------------------------------------------- */
.btn, .buy-btn{
  position: relative;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), filter .16s var(--ease);
}
.btn-primary, .buy-btn{
  background: linear-gradient(180deg,#63f060,#3ed93b);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -2px 0 rgba(20,120,18,.45),
    0 4px 10px rgba(31,158,28,.24),
    0 12px 28px rgba(31,158,28,.22);
}
.btn-primary:hover, .buy-btn:hover{
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -2px 0 rgba(20,120,18,.45),
    0 8px 16px rgba(31,158,28,.26),
    0 20px 40px rgba(31,158,28,.26);
}
.btn-primary:active, .buy-btn:active{
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(20,120,18,.35),
    0 2px 6px rgba(31,158,28,.20);
}
.btn-secondary{
  background: linear-gradient(180deg,#fff,#f4f8fb);
  box-shadow: var(--e1), var(--lip-strong);
}
.btn-secondary:hover{
  transform: translateY(-2px);
  box-shadow: var(--e2), var(--lip-strong);
  border-color: rgba(0,184,217,.5);
}
.btn-secondary:active{ transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(2,20,27,.10); }

/* ---------------------------------------------------------------
   5. Cards — raised planes that lift toward the reader
   --------------------------------------------------------------- */
.card{
  position: relative;
  background: linear-gradient(180deg,#ffffff,#fbfdfe);
  border-color: rgba(226,232,240,.9);
  box-shadow: var(--e2), var(--lip);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: var(--e3), var(--lip);
}

/* Product cards get a real tilt. Perspective is on the grid so sibling
   cards share one vanishing point instead of each having its own. */
.grid-2, .grid-3{ perspective: 1600px; }
.product-card{
  background: linear-gradient(180deg,#ffffff,#fafdff);
  border-color: rgba(226,232,240,.9);
  box-shadow: var(--e3), var(--lip);
  transform-style: preserve-3d;
  transition: transform .38s var(--ease), box-shadow .38s var(--ease);
  will-change: transform;
}
.product-card:hover{
  transform: translateY(-8px) rotateX(3deg) scale(1.012);
  box-shadow: 0 10px 20px rgba(2,20,27,.09), 0 40px 80px rgba(2,20,27,.16), var(--lip);
}
/* Cover art sits above the card face, so the lift has parallax. */
.product-top img{
  box-shadow: 0 6px 14px rgba(2,20,27,.14), 0 18px 36px rgba(2,20,27,.10);
  transform: translateZ(28px);
  transition: transform .38s var(--ease), box-shadow .38s var(--ease);
}
.product-card:hover .product-top img{
  transform: translateZ(48px) translateY(-3px);
  box-shadow: 0 10px 20px rgba(2,20,27,.16), 0 28px 52px rgba(2,20,27,.14);
}

/* ---------------------------------------------------------------
   6. Stats — extruded tiles
   --------------------------------------------------------------- */
.stats{ gap:16px; }
.stat{
  padding: 14px 20px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.78));
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--e2), var(--lip);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.stat:hover{ transform: translateY(-3px); box-shadow: var(--e3), var(--lip); }
.stat b{ text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 3px 12px rgba(0,144,168,.22); }

/* Badges: small pills, slight lift so they don't sit flat on the mesh. */
.badge{ box-shadow: 0 1px 2px rgba(31,158,28,.10), var(--lip); }

/* ---------------------------------------------------------------
   7. File list — stacked rows, each one steps forward on hover
   --------------------------------------------------------------- */
.filelist>div{
  background: linear-gradient(180deg,#fff,#fcfeff);
  border-color: rgba(226,232,240,.9);
  box-shadow: var(--e1), var(--lip);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.filelist>div:hover{
  transform: translateX(4px) translateY(-2px);
  box-shadow: var(--e2), var(--lip);
  border-color: rgba(0,184,217,.35);
}
.tag{ box-shadow: 0 1px 2px rgba(0,184,217,.14), var(--lip); }

/* ---------------------------------------------------------------
   8. FAQ accordions
   --------------------------------------------------------------- */
details.qa{
  background: linear-gradient(180deg,#fff,#fcfeff);
  border-color: rgba(226,232,240,.9);
  box-shadow: var(--e1), var(--lip);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
details.qa:hover{ box-shadow: var(--e2), var(--lip); }
details.qa[open]{ box-shadow: var(--e3), var(--lip); transform: translateY(-2px); }
details.qa summary span{ transition: transform var(--dur) var(--ease); display:inline-block; }

/* ---------------------------------------------------------------
   9. Video frame and trust bar
   --------------------------------------------------------------- */
.video-frame{ box-shadow: var(--e4); border-color: rgba(226,232,240,.9); }
.trust-bar{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(238,249,253,.88));
  border-color: rgba(255,255,255,.9);
  box-shadow: var(--e2), var(--lip);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.trust-item{ transition: transform var(--dur) var(--ease); }
.trust-item:hover{ transform: translateY(-3px); }
.trust-icon{ filter: drop-shadow(0 3px 6px rgba(2,20,27,.16)); }

/* ---------------------------------------------------------------
   10. Footer — raised panel, not a flat slab
   --------------------------------------------------------------- */
footer.site{
  background: linear-gradient(180deg,#ffffff,#f7fbfd);
  border-top: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 -1px 0 rgba(255,255,255,.9) inset, 0 -14px 34px rgba(2,20,27,.05);
}
.foot-grid a{ transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); display:inline-block; }
.foot-grid a:hover{ transform: translateX(3px); }

/* ---------------------------------------------------------------
   11. Section rhythm — alternating planes read as stacked slabs
   --------------------------------------------------------------- */
.section:nth-of-type(even){
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
}

/* ---------------------------------------------------------------
   12. Accessibility and print
   Every transform and transition above is opt-out. Nothing here
   carries meaning that is lost when motion is off.
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .hero-img,.hero-img:hover,
  .product-card,.product-card:hover,
  .product-top img,.product-card:hover .product-top img,
  .card:hover,.stat:hover,.filelist>div:hover,
  .btn:hover,.buy-btn:hover,.trust-item:hover,
  .foot-grid a:hover,details.qa[open]{
    transform:none !important;
  }
}
@media print{
  body{ background:#fff; }
  header.nav,.hero,.card,.product-card,.stat,.filelist>div,details.qa,footer.site,.trust-bar{
    box-shadow:none !important; transform:none !important; background:#fff !important;
  }
}

/* =====================================================================
   PART 2 — dimensional pass
   Scroll-driven entrances via the CSS view timeline. No JavaScript.
   Browsers without `animation-timeline` support skip the whole block and
   render the finished state, so nothing can end up stuck invisible.
   ===================================================================== */

/* ---------------------------------------------------------------
   13. Hero plate — stacked planes behind the cover art
   Two pseudo-elements sit behind the plate in 3D space, so the hero
   reads as a stack of sheets rather than one flat rectangle.
   --------------------------------------------------------------- */
@media(min-width:901px){
  .hero-img{
    transform: perspective(1400px) rotateY(-11deg) rotateX(5deg) translateZ(0);
  }
  .hero-img::before,
  .hero-img::after{
    content:""; position:absolute; inset:0; border-radius:18px;
    pointer-events:none; z-index:-1;
    border:1px solid rgba(226,232,240,.9);
    background: linear-gradient(180deg,#fff,#f4fbfe);
  }
  .hero-img::before{
    transform: translateZ(-42px) translateX(24px) translateY(16px) scale(.985);
    box-shadow: 0 22px 44px rgba(2,20,27,.10);
    opacity:.85;
  }
  .hero-img::after{
    transform: translateZ(-84px) translateX(48px) translateY(32px) scale(.97);
    box-shadow: 0 26px 50px rgba(2,20,27,.08);
    opacity:.6;
  }
  .hero-img:hover{
    transform: perspective(1400px) rotateY(-4deg) rotateX(2deg) translateY(-8px);
  }
}

/* Contact shadow on the floor beneath the hero plate. */
.hero-home .wrap > div:last-child{ position:relative; }
@media(min-width:901px){
  .hero-home .wrap > div:last-child::after{
    content:""; position:absolute; left:8%; right:8%; bottom:-34px; height:34px;
    background: radial-gradient(60% 100% at 50% 0%, rgba(2,20,27,.22), transparent 72%);
    filter: blur(10px); pointer-events:none;
  }
}

/* ---------------------------------------------------------------
   14. Scroll-driven entrances
   Elements start pitched back and below the plane, then rotate up and
   settle as they enter the viewport. Progress is tied to scroll
   position, not to a timer, so it never runs ahead of the reader.
   --------------------------------------------------------------- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){

    /* Transform only. No opacity anywhere in these keyframes: an element
       that never receives scroll progress must still be fully readable.
       Copy on a store page is never allowed to depend on an animation. */
    @keyframes rise{
      from{ transform: perspective(1200px) translateY(30px) translateZ(-70px) rotateX(9deg); }
      to  { transform: perspective(1200px) translateY(0)    translateZ(0)     rotateX(0deg); }
    }
    @keyframes rise-soft{
      from{ transform: perspective(1000px) translateY(18px) rotateX(6deg); }
      to  { transform: perspective(1000px) translateY(0)    rotateX(0deg); }
    }
    @keyframes slide-in{
      from{ transform: translateX(-14px) translateZ(-34px); }
      to  { transform: translateX(0)     translateZ(0); }
    }

    .card, .product-card{
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 92%;
      transform-origin: 50% 100%;
    }
    /* .stat is deliberately excluded: it renders above the fold, where a
       scroll timeline has no room to run. Hover depth only. */
    .trust-bar, .video-frame{
      animation: rise-soft linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 92%;
    }
    .filelist > div{
      animation: slide-in linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 90%;
    }
    details.qa{
      animation: rise-soft linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 92%;
    }

    /* Hover still owns the transform once an element has landed, so the
       entrance and the lift never fight each other. */
    .card:hover, .product-card:hover,
    .stat:hover, .filelist > div:hover{ animation: none; }

  }
}

/* ---------------------------------------------------------------
   15. Hero mesh parallax
   The grid floor drifts slower than the copy on top of it.
   --------------------------------------------------------------- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference) and (min-width:901px){
    @keyframes floor-drift{
      from{ transform: translateY(-4%) scale(1.04); }
      to  { transform: translateY(6%)  scale(1.04); }
    }
    .hero::before{
      animation: floor-drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}

/* ---------------------------------------------------------------
   16. Depth cues that do not depend on motion at all
   These hold on every browser and under reduced motion, so the site
   still reads dimensional with animation entirely off.
   --------------------------------------------------------------- */
.section .wrap > .grid-2,
.section .wrap > .grid-3{ transform-style: preserve-3d; }

/* Kickers sit slightly proud of their card face. */
.card .kicker, .product-title .kicker{
  text-shadow: 0 1px 0 rgba(255,255,255,.95);
}

/* Headline gets a single soft cast shadow. Enough to lift it off the
   mesh, not enough to hurt contrast. */
.hero h1{ text-shadow: 0 1px 0 rgba(255,255,255,.65), 0 12px 30px rgba(2,20,27,.10); }

/* Product cover plates keep a visible edge so the translateZ reads. */
.product-top img{ border:1px solid rgba(226,232,240,.9); background:#fff; }

/* Buy button on product cards: brighter extrusion, it is the money CTA. */
.product-actions .btn-primary{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -3px 0 rgba(20,120,18,.5),
    0 6px 14px rgba(31,158,28,.30),
    0 16px 34px rgba(31,158,28,.24);
}