/* =========================================================
   STREAMCAMERA PRODUCT PAGE
   ========================================================= */


/* =========================================================
   ENGLISH ONLY
   ========================================================= */

   #arthouseLanguageSelect,
   #arthouseMobileLanguageSelect,
   #languageSelect,
   #mobileLanguageSelect,
   label[for="arthouseLanguageSelect"],
   label[for="arthouseMobileLanguageSelect"],
   label[for="languageSelect"],
   label[for="mobileLanguageSelect"] {
     display: none !important;
   }
   
   
   /* =========================================================
      GLOBAL REVEAL
      ========================================================= */
   
   body .reveal {
     opacity: 0;
   
     transform:
       translate3d(0, 28px, 0);
   
     transition:
       opacity 760ms
         cubic-bezier(0.22, 1, 0.36, 1),
       transform 760ms
         cubic-bezier(0.22, 1, 0.36, 1);
   
     transition-delay:
       var(--reveal-delay, 0ms);
   
     will-change:
       opacity,
       transform;
   }
   
   
   body .reveal.reveal-left {
     transform:
       translate3d(-34px, 0, 0);
   }
   
   
   body .reveal.reveal-right {
     transform:
       translate3d(34px, 0, 0);
   }
   
   
   body .reveal.reveal-scale {
     transform:
       translate3d(0, 20px, 0)
       scale(0.97);
   }
   
   
   body .reveal.is-visible {
     opacity: 1;
   
     transform:
       translate3d(0, 0, 0)
       scale(1);
   }
   
   
   /* =========================================================
      HERO
      ========================================================= */
   
   .stream-hero {
     --stream-yellow: #ffcb18;
     --stream-yellow-bright: #ffd92f;
   
     --stream-red: #ff3b30;
     --stream-orange: #ff7a18;
   
     --stream-heading: #ffffff;
   
     --stream-text:
       rgba(235, 237, 242, 0.72);
   
     --stream-strong:
       rgba(249, 250, 252, 0.91);
   
     --stream-line:
       rgba(255, 255, 255, 0.10);
   
     --stream-card:
       rgba(255, 255, 255, 0.045);
   
     --pointer-x: 76%;
     --pointer-y: 18%;
   
     position: relative;
   
     isolation: isolate;
   
     overflow: hidden;
   
     padding:
       clamp(52px, 5.2vw, 78px)
       0
       clamp(66px, 6.5vw, 94px);
   
     color: #ffffff;
   
     background:
       radial-gradient(
         circle at 18% 0%,
         rgba(255, 198, 31, 0.10),
         transparent 31rem
       ),
       radial-gradient(
         circle at 88% 24%,
         rgba(255, 61, 38, 0.10),
         transparent 33rem
       ),
       linear-gradient(
         180deg,
         #050505 0%,
         #090a0c 55%,
         #08090b 100%
       );
   }
   
   
   /* Cursor glow */
   
   .stream-hero::before {
     content: "";
   
     position: absolute;
     inset: 0;
   
     z-index: -2;
   
     pointer-events: none;
   
     background:
       radial-gradient(
         560px circle
         at var(--pointer-x)
         var(--pointer-y),
         rgba(255, 197, 24, 0.14),
         rgba(255, 76, 35, 0.045) 38%,
         transparent 72%
       );
   }
   
   
   /* Grid texture */
   
   .stream-hero::after {
     content: "";
   
     position: absolute;
     inset: 0;
   
     z-index: -3;
   
     pointer-events: none;
   
     opacity: 0.16;
   
     background-image:
       linear-gradient(
         rgba(255, 255, 255, 0.018) 1px,
         transparent 1px
       ),
       linear-gradient(
         90deg,
         rgba(255, 255, 255, 0.018) 1px,
         transparent 1px
       );
   
     background-size:
       48px 48px;
   
     mask-image:
       linear-gradient(
         to bottom,
         rgba(0, 0, 0, 0.65),
         transparent 74%
       );
   }
   
   
   .stream-hero > .container {
     position: relative;
   
     z-index: 2;
   
     width:
       min(
         calc(100% - 40px),
         1240px
       );
   
     max-width: none;
   
     margin-inline: auto;
   }
   
   
   /* =========================================================
      BACKGROUND ORBS
      ========================================================= */
   
   .stream-hero-orb {
     position: absolute;
   
     z-index: -1;
   
     border-radius: 999px;
   
     pointer-events: none;
   
     filter: blur(20px);
   }
   
   
   .stream-hero-orb-yellow {
     width: 400px;
     height: 400px;
   
     left: -235px;
     top: 20%;
   
     background:
       rgba(255, 205, 30, 0.095);
   }
   
   
   .stream-hero-orb-red {
     width: 430px;
     height: 430px;
   
     right: -250px;
     top: 8%;
   
     background:
       rgba(255, 65, 45, 0.075);
   }
   
   
   /* =========================================================
      COPY
      ========================================================= */
   
   .stream-hero-copy {
     width:
       min(
         100%,
         1000px
       );
   
     margin-inline: auto;
   
     text-align: center;
   }
   
   
   .stream-eyebrow {
     display: inline-flex;
   
     align-items: center;
   
     gap: 9px;
   
     min-height: 36px;
   
     margin-bottom: 17px;
   
     padding:
       5px
       13px
       5px
       7px;
   
     border:
       1px solid
       rgba(255, 204, 28, 0.21);
   
     border-radius: 999px;
   
     color: #ffdc62;
   
     background:
       rgba(255, 196, 15, 0.055);
   
     box-shadow:
       inset 0 1px 0
       rgba(255, 255, 255, 0.04);
   
     font-size: 0.75rem;
   
     font-weight: 800;
   
     letter-spacing: 0.07em;
   
     text-transform: uppercase;
   }
   
   
   .stream-eyebrow-icon {
     display: grid;
   
     place-items: center;
   
     width: 25px;
     height: 25px;
   
     border-radius: 999px;
   
     color: #151515;
   
     background:
       linear-gradient(
         135deg,
         var(--stream-yellow-bright),
         var(--stream-orange)
       );
   
     box-shadow:
       0 7px 18px
       rgba(255, 165, 21, 0.20);
   
     font-size: 0.67rem;
   }
   
   
   .stream-hero h1 {
     width:
       min(
         100%,
         1000px
       );
   
     margin:
       0
       auto;
   
     color:
       var(--stream-heading);
   
     font-size:
       clamp(
         2.9rem,
         5.5vw,
         5.6rem
       );
   
     font-weight: 840;
   
     line-height: 0.96;
   
     letter-spacing: -0.06em;
   }
   
   
   .stream-gradient-text {
     display: inline-block;
   
     color: transparent;
   
     background:
       linear-gradient(
         105deg,
         #fff3a5 0%,
         #ffd42c 38%,
         #ff9726 68%,
         #ff5b3d 100%
       );
   
     -webkit-background-clip: text;
   
     background-clip: text;
   }
   
   
   .stream-hero-description {
     width:
       min(
         100%,
         790px
       );
   
     margin:
       20px
       auto
       0;
   
     color:
       var(--stream-text);
   
     font-size:
       clamp(
         0.98rem,
         1.3vw,
         1.1rem
       );
   
     line-height: 1.7;
   }
   
   
   /* =========================================================
      ACTIONS
      ========================================================= */
   
   .stream-hero-actions {
     display: flex;
   
     flex-wrap: wrap;
   
     align-items: stretch;
   
     justify-content: center;
   
     gap: 10px;
   
     margin-top: 23px;
   }
   
   
   .stream-button {
     display: inline-flex;
   
     align-items: center;
   
     justify-content: center;
   
     gap: 11px;
   
     min-height: 52px;
   
     padding:
       0
       19px;
   
     border:
       1px solid
       transparent;
   
     border-radius: 13px;
   
     font-size: 0.91rem;
   
     font-weight: 740;
   
     text-decoration: none;
   
     transition:
       transform 180ms ease,
       border-color 180ms ease,
       background 180ms ease,
       box-shadow 180ms ease;
   }
   
   
   .stream-button:hover {
     transform:
       translateY(-2px);
   }
   
   
   .stream-button-primary {
     min-width: 205px;
   
     color: #111111;
   
     background:
       linear-gradient(
         135deg,
         #ffdb38,
         #ffb51f
       );
   
     box-shadow:
       0 15px 40px
       rgba(255, 161, 12, 0.17);
   }
   
   
   .stream-button-primary:hover {
     color: #111111;
   
     background:
       linear-gradient(
         135deg,
         #ffe25a,
         #ffc12c
       );
   }
   
   
   .stream-button-primary > i {
     font-size: 1.45rem;
   }
   
   
   .stream-button-copy {
     display: flex;
   
     flex-direction: column;
   
     align-items: flex-start;
   
     line-height: 1.03;
   }
   
   
   .stream-button-copy small {
     margin-bottom: 2px;
   
     font-size: 0.62rem;
   
     font-weight: 600;
   
     opacity: 0.72;
   }
   
   
   .stream-button-copy strong {
     font-size: 0.96rem;
   
     font-weight: 820;
   }
   
   
   .stream-button-secondary {
     color:
       var(--stream-strong);
   
     border-color:
       rgba(255, 255, 255, 0.13);
   
     background:
       rgba(255, 255, 255, 0.045);
   
     backdrop-filter:
       blur(12px);
   }
   
   
   .stream-button-secondary:hover {
     color: #ffffff;
   
     border-color:
       rgba(255, 205, 43, 0.26);
   
     background:
       rgba(255, 203, 25, 0.055);
   }
   
   
   /* =========================================================
      QUICK FACTS
      ========================================================= */
   
   .stream-quick-facts {
     display: flex;
   
     flex-wrap: wrap;
   
     align-items: center;
   
     justify-content: center;
   
     gap: 7px;
   
     width: fit-content;
   
     max-width: 100%;
   
     margin:
       16px
       auto
       0;
   
     padding: 7px;
   
     border:
       1px solid
       var(--stream-line);
   
     border-radius: 14px;
   
     background:
       rgba(255, 255, 255, 0.03);
   
     backdrop-filter:
       blur(14px);
   }
   
   
   .stream-quick-fact {
     display: inline-flex;
   
     align-items: center;
   
     gap: 6px;
   
     min-height: 28px;
   
     padding:
       0
       8px;
   
     color:
       var(--stream-strong);
   
     font-size: 0.73rem;
   
     font-weight: 690;
   }
   
   
   .stream-quick-fact i {
     color:
       var(--stream-yellow);
   
     font-size: 0.72rem;
   }
   
   
   .stream-quick-divider {
     display: block;
   
     width: 1px;
     height: 19px;
   
     margin-inline: 2px;
   
     background:
       var(--stream-line);
   }
   
   
   .stream-quick-spec {
     display: inline-flex;
   
     align-items: center;
   
     justify-content: center;
   
     min-height: 28px;
   
     padding:
       0
       9px;
   
     border-radius: 8px;
   
     color: #ffdd69;
   
     background:
       rgba(255, 197, 21, 0.075);
   
     font-size: 0.66rem;
   
     font-weight: 800;
   
     letter-spacing: 0.04em;
   }
   
   
   /* =========================================================
      DEVICE ARTWORK
      ========================================================= */
   
   .stream-device-showcase {
     position: relative;
   
     width:
       min(
         100%,
         1080px
       );
   
     margin:
       clamp(27px, 3vw, 40px)
       auto
       0;
   }
   
   
   .stream-device-stage {
     position: relative;
   
     width: 100%;
   
     overflow: visible;
   
     padding: 0;
   
     background: transparent;
   }
   
   
   .stream-device-glow {
     position: absolute;
   
     width: 72%;
     height: 58%;
   
     left: 14%;
     top: 19%;
   
     z-index: 0;
   
     border-radius: 999px;
   
     pointer-events: none;
   
     background:
       linear-gradient(
         90deg,
         rgba(255, 205, 27, 0.10),
         rgba(255, 70, 38, 0.075)
       );
   
     filter:
       blur(100px);
   }
   
   
   .stream-device-art {
     position: relative;
   
     z-index: 1;
   
     display: block;
   
     width: 100%;
   
     height: auto;
   
     object-fit: contain;
   
     background: transparent;
   
     filter:
       drop-shadow(
         0
         26px
         30px
         rgba(0, 0, 0, 0.30)
       );
   
     transition:
       transform 500ms
         cubic-bezier(0.22, 1, 0.36, 1),
       filter 500ms
         cubic-bezier(0.22, 1, 0.36, 1);
   }
   
   
   .stream-device-stage:hover
   .stream-device-art {
     transform:
       translateY(-4px)
       scale(1.006);
   
     filter:
       drop-shadow(
         0
         34px
         40px
         rgba(0, 0, 0, 0.36)
       );
   }
   
   
   /* =========================================================
      HIGHLIGHTS
      ========================================================= */
   
   .stream-hero-highlights {
     display: grid;
   
     grid-template-columns:
       repeat(
         4,
         minmax(0, 1fr)
       );
   
     gap: 10px;
   
     width:
       min(
         100%,
         1060px
       );
   
     margin:
       10px
       auto
       0;
   
     scroll-margin-top: 100px;
   }
   
   
   .stream-highlight-card {
     display: flex;
   
     align-items: flex-start;
   
     gap: 12px;
   
     min-width: 0;
   
     padding: 16px;
   
     border:
       1px solid
       var(--stream-line);
   
     border-radius: 16px;
   
     background:
       var(--stream-card);
   
     backdrop-filter:
       blur(15px);
   
     transition:
       transform 180ms ease,
       border-color 180ms ease,
       background 180ms ease,
       box-shadow 180ms ease;
   }
   
   
   .stream-highlight-card:hover {
     transform:
       translateY(-3px);
   
     border-color:
       rgba(255, 204, 31, 0.22);
   
     background:
       rgba(255, 255, 255, 0.065);
   
     box-shadow:
       0
       16px
       36px
       rgba(0, 0, 0, 0.16);
   }
   
   
   .stream-highlight-icon {
     display: grid;
   
     place-items: center;
   
     flex:
       0 0 36px;
   
     width: 36px;
     height: 36px;
   
     border-radius: 11px;
   
     color:
       #ffd743;
   
     background:
       linear-gradient(
         145deg,
         rgba(255, 203, 24, 0.11),
         rgba(255, 66, 38, 0.06)
       );
   
     border:
       1px solid
       rgba(255, 204, 37, 0.10);
   }
   
   
   .stream-highlight-card h2 {
     margin:
       1px
       0
       5px;
   
     color:
       var(--stream-heading);
   
     font-size: 0.88rem;
   
     font-weight: 790;
   
     letter-spacing: -0.02em;
   }
   
   
   .stream-highlight-card p {
     margin: 0;
   
     color:
       var(--stream-text);
   
     font-size: 0.73rem;
   
     line-height: 1.55;
   }
   
   
   /* =========================================================
      LIGHT THEME
      ========================================================= */
   
   html[data-theme="light"]
   .stream-hero {
     --stream-heading: #111317;
   
     --stream-text:
       rgba(43, 47, 56, 0.68);
   
     --stream-strong:
       rgba(29, 33, 40, 0.86);
   
     --stream-line:
       rgba(38, 42, 49, 0.10);
   
     --stream-card:
       rgba(255, 255, 255, 0.70);
   
     background:
       radial-gradient(
         circle at 16% 4%,
         rgba(255, 200, 35, 0.16),
         transparent 31rem
       ),
       radial-gradient(
         circle at 87% 22%,
         rgba(255, 82, 55, 0.09),
         transparent 31rem
       ),
       linear-gradient(
         180deg,
         #fcfcfb,
         #f4f5f7 56%,
         #fafafa
       );
   }
   
   
   html[data-theme="light"]
   .stream-hero::after {
     background-image:
       linear-gradient(
         rgba(33, 37, 43, 0.024) 1px,
         transparent 1px
       ),
       linear-gradient(
         90deg,
         rgba(33, 37, 43, 0.024) 1px,
         transparent 1px
       );
   }
   
   
   html[data-theme="light"]
   .stream-eyebrow {
     color: #a85f00;
   
     border-color:
       rgba(214, 139, 13, 0.17);
   
     background:
       rgba(255, 184, 25, 0.075);
   }
   
   
   html[data-theme="light"]
   .stream-gradient-text {
     background:
       linear-gradient(
         105deg,
         #372400 0%,
         #d98700 45%,
         #e55320 100%
       );
   
     -webkit-background-clip: text;
   
     background-clip: text;
   }
   
   
   html[data-theme="light"]
   .stream-button-secondary {
     color: #24282e;
   
     border-color:
       rgba(33, 37, 44, 0.12);
   
     background:
       rgba(255, 255, 255, 0.76);
   }
   
   
   html[data-theme="light"]
   .stream-quick-facts {
     background:
       rgba(255, 255, 255, 0.68);
   
     box-shadow:
       0
       12px
       32px
       rgba(50, 56, 65, 0.055);
   }
   
   
   html[data-theme="light"]
   .stream-highlight-card {
     box-shadow:
       0
       12px
       30px
       rgba(48, 53, 60, 0.045);
   }
   
   
   /* =========================================================
      RESPONSIVE
      ========================================================= */
   
   @media (max-width: 1100px) {
   
     .stream-hero-highlights {
       grid-template-columns:
         repeat(
           2,
           minmax(0, 1fr)
         );
     }
   
   }
   
   
   @media (max-width: 760px) {
   
     .stream-hero {
       padding:
         44px
         0
         62px;
     }
   
   
     .stream-hero > .container {
       width:
         min(
           calc(100% - 28px),
           1240px
         );
     }
   
   
     .stream-hero h1 {
       font-size:
         clamp(
           2.55rem,
           11.5vw,
           4rem
         );
   
       line-height: 0.98;
     }
   
   
     .stream-hero-description {
       margin-top: 18px;
   
       font-size: 0.96rem;
   
       line-height: 1.65;
     }
   
   
     .stream-hero-actions {
       margin-top: 21px;
     }
   
   
     .stream-device-showcase {
       width: 100%;
   
       max-width: 100%;
   
       margin-top: 28px;
     }
   
   
     .stream-device-art {
       width: 100%;
   
       max-width: 100%;
   
       height: auto;
     }
   
   
     .stream-hero-highlights {
       grid-template-columns: 1fr;
   
       gap: 8px;
   
       margin-top: 7px;
     }
   
   }
   
   
   @media (max-width: 580px) {
   
     .stream-eyebrow {
       margin-bottom: 14px;
   
       font-size: 0.65rem;
     }
   
   
     .stream-hero-actions {
       display: grid;
   
       grid-template-columns: 1fr;
   
       width: 100%;
     }
   
   
     .stream-button {
       width: 100%;
     }
   
   
     .stream-quick-facts {
       width: 100%;
   
       gap: 4px;
   
       padding: 6px;
     }
   
   
     .stream-quick-fact {
       flex: 1 1 auto;
   
       justify-content: center;
     }
   
   
     .stream-quick-divider {
       display: none;
     }
   
   
     .stream-device-showcase,
     .stream-device-stage,
     .stream-device-art {
       width: 100%;
   
       max-width: 100%;
     }
   
   }
   
   
   @media (prefers-reduced-motion: reduce) {
   
     body .reveal,
     body .reveal.reveal-left,
     body .reveal.reveal-right,
     body .reveal.reveal-scale {
       opacity: 1 !important;
   
       transform: none !important;
   
       transition: none !important;
     }
   
   
     .stream-device-stage:hover
     .stream-device-art {
       transform: none;
     }
   
   }

   /* =========================================================
   SHARED STREAMCAMERA SECTION EYEBROW
   ========================================================= */

.stream-section-eyebrow {
    display: inline-flex;
  
    align-items: center;
  
    gap: 10px;
  
    margin-bottom: 18px;
  
    color: #ffd85a;
  
    font-size: 0.74rem;
  
    font-weight: 800;
  
    letter-spacing: 0.09em;
  
    text-transform: uppercase;
  }
  
  
  .stream-section-eyebrow-icon {
    display: grid;
  
    place-items: center;
  
    width: 32px;
    height: 32px;
  
    border-radius: 10px;
  
    color: #151515;
  
    background:
      linear-gradient(
        135deg,
        #ffdc3c,
        #ff8c22
      );
  
    box-shadow:
      0 9px
      24px
      rgba(255, 155, 20, 0.20);
  }
  
  
  /* =========================================================
     REMOTE STREAMING SECTION
     ========================================================= */
  
  .remote-stream-section {
    --remote-heading: #f8f8f8;
  
    --remote-text:
      rgba(232, 234, 239, 0.70);
  
    --remote-strong:
      rgba(248, 249, 251, 0.91);
  
    --remote-line:
      rgba(255, 255, 255, 0.10);
  
    --remote-card:
      rgba(255, 255, 255, 0.045);
  
    --remote-pointer-x: 74%;
    --remote-pointer-y: 44%;
  
    position: relative;
  
    isolation: isolate;
  
    overflow: hidden;
  
    padding:
      clamp(80px, 8vw, 122px)
      0;
  
    border-top:
      1px solid
      rgba(255, 255, 255, 0.07);
  
    background:
      radial-gradient(
        circle at 77% 45%,
        rgba(255, 193, 24, 0.11),
        transparent 31rem
      ),
      radial-gradient(
        circle at 5% 90%,
        rgba(255, 68, 40, 0.075),
        transparent 29rem
      ),
      linear-gradient(
        135deg,
        #08090b 0%,
        #0d0e11 52%,
        #090a0d 100%
      );
  }
  
  
  /* Cursor-following glow */
  
  .remote-stream-section::before {
    content: "";
  
    position: absolute;
    inset: 0;
  
    z-index: 0;
  
    pointer-events: none;
  
    background:
      radial-gradient(
        620px circle
        at var(--remote-pointer-x)
        var(--remote-pointer-y),
        rgba(255, 198, 27, 0.13),
        rgba(255, 78, 39, 0.04) 36%,
        transparent 72%
      );
  }
  
  
  .remote-stream-section > .container {
    position: relative;
  
    z-index: 2;
  
    width:
      min(
        calc(100% - 40px),
        1280px
      );
  
    max-width: none;
  
    margin-inline: auto;
  }
  
  
  /* =========================================================
     DECORATION
     ========================================================= */
  
  .remote-stream-decoration {
    position: absolute;
  
    z-index: 1;
  
    border-radius: 999px;
  
    pointer-events: none;
  
    filter: blur(22px);
  }
  
  
  .remote-stream-decoration-one {
    width: 390px;
    height: 390px;
  
    right: -230px;
    top: 12%;
  
    background:
      rgba(255, 191, 24, 0.07);
  }
  
  
  .remote-stream-decoration-two {
    width: 350px;
    height: 350px;
  
    left: -225px;
    bottom: -90px;
  
    background:
      rgba(255, 67, 43, 0.055);
  }
  
  
  /* =========================================================
     LAYOUT
     ========================================================= */
  
  .remote-stream-layout {
    display: grid;
  
    grid-template-columns:
      minmax(390px, 0.90fr)
      minmax(410px, 0.70fr);
  
    gap:
      clamp(
        52px,
        7vw,
        105px
      );
  
    align-items: center;
  }
  
  
  /* =========================================================
     COPY
     ========================================================= */
  
  .remote-stream-copy {
    min-width: 0;
  }
  
  
  .remote-stream-title {
    max-width: 650px;
  
    margin: 0;
  
    color:
      var(--remote-heading);
  
    font-size:
      clamp(
        2.5rem,
        4.5vw,
        4.8rem
      );
  
    font-weight: 830;
  
    line-height: 0.98;
  
    letter-spacing: -0.055em;
  }
  
  
  .remote-stream-title span {
    color: transparent;
  
    background:
      linear-gradient(
        105deg,
        #fff0a0,
        #ffd22d 46%,
        #ff8b25 100%
      );
  
    -webkit-background-clip: text;
  
    background-clip: text;
  }
  
  
  .remote-stream-description {
    max-width: 640px;
  
    margin:
      22px
      0
      0;
  
    color:
      var(--remote-text);
  
    font-size: 1rem;
  
    line-height: 1.72;
  }
  
  
  /* =========================================================
     CONNECTION FLOW
     ========================================================= */
  
  .remote-connection-flow {
    display: grid;
  
    grid-template-columns:
      minmax(0, 1fr)
      auto
      auto
      minmax(0, 1fr);
  
    gap: 12px;
  
    align-items: center;
  
    margin-top: 27px;
  
    padding: 14px;
  
    border:
      1px solid
      var(--remote-line);
  
    border-radius: 17px;
  
    background:
      rgba(255, 255, 255, 0.04);
  
    backdrop-filter:
      blur(14px);
  }
  
  
  .remote-flow-device {
    display: flex;
  
    align-items: center;
  
    gap: 10px;
  
    min-width: 0;
  }
  
  
  .remote-flow-icon {
    display: grid;
  
    place-items: center;
  
    flex: 0 0 36px;
  
    width: 36px;
    height: 36px;
  
    border-radius: 11px;
  
    color: #171717;
  
    background:
      linear-gradient(
        135deg,
        #ffdb39,
        #ff9920
      );
  }
  
  
  .remote-flow-device strong {
    display: block;
  
    color:
      var(--remote-heading);
  
    font-size: 0.78rem;
  
    font-weight: 780;
  }
  
  
  .remote-flow-device span {
    display: block;
  
    margin-top: 2px;
  
    color:
      var(--remote-text);
  
    font-size: 0.65rem;
  }
  
  
  .remote-flow-middle {
    display: flex;
  
    flex-direction: column;
  
    gap: 4px;
  
    text-align: center;
  }
  
  
  .remote-flow-middle span {
    display: inline-flex;
  
    align-items: center;
  
    justify-content: center;
  
    gap: 5px;
  
    color:
      var(--remote-text);
  
    font-size: 0.62rem;
  
    white-space: nowrap;
  }
  
  
  .remote-flow-middle i {
    color: #ffd644;
  }
  
  
  .remote-flow-arrow {
    color:
      rgba(255, 215, 69, 0.75);
  
    font-size: 0.8rem;
  }
  
  
  /* =========================================================
     FEATURE GRID
     ========================================================= */
  
  .remote-stream-feature-grid {
    display: grid;
  
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  
    gap: 9px;
  
    margin-top: 11px;
  }
  
  
  .remote-stream-feature {
    display: flex;
  
    align-items: flex-start;
  
    gap: 10px;
  
    padding: 13px;
  
    border:
      1px solid
      var(--remote-line);
  
    border-radius: 14px;
  
    background:
      var(--remote-card);
  
    backdrop-filter:
      blur(12px);
  
    transition:
      transform 180ms ease,
      border-color 180ms ease,
      background 180ms ease;
  }
  
  
  .remote-stream-feature:hover {
    transform:
      translateY(-2px);
  
    border-color:
      rgba(255, 205, 45, 0.22);
  
    background:
      rgba(255, 255, 255, 0.065);
  }
  
  
  .remote-stream-feature-icon {
    display: grid;
  
    place-items: center;
  
    flex: 0 0 33px;
  
    width: 33px;
    height: 33px;
  
    border-radius: 10px;
  
    color: #ffd748;
  
    background:
      linear-gradient(
        145deg,
        rgba(255, 203, 26, 0.11),
        rgba(255, 71, 39, 0.055)
      );
  
    border:
      1px solid
      rgba(255, 202, 35, 0.10);
  
    font-size: 0.72rem;
  }
  
  
  .remote-stream-feature h3 {
    margin:
      1px
      0
      4px;
  
    color:
      var(--remote-heading);
  
    font-size: 0.8rem;
  
    font-weight: 780;
  
    letter-spacing: -0.016em;
  }
  
  
  .remote-stream-feature p {
    margin: 0;
  
    color:
      var(--remote-text);
  
    font-size: 0.68rem;
  
    line-height: 1.52;
  }
  
  
  /* =========================================================
     USE CASE TAGS
     ========================================================= */
  
  .remote-use-cases {
    display: flex;
  
    flex-wrap: wrap;
  
    gap: 7px;
  
    margin-top: 17px;
  }
  
  
  .remote-use-cases span {
    display: inline-flex;
  
    align-items: center;
  
    gap: 6px;
  
    min-height: 33px;
  
    padding:
      0
      10px;
  
    border:
      1px solid
      var(--remote-line);
  
    border-radius: 999px;
  
    color:
      var(--remote-strong);
  
    background:
      rgba(255, 255, 255, 0.03);
  
    font-size: 0.67rem;
  
    font-weight: 690;
  }
  
  
  .remote-use-cases i {
    color: #ffd443;
  
    font-size: 0.65rem;
  }
  
  
  /* =========================================================
     IMAGE
     ========================================================= */
  
  .remote-stream-media {
    position: relative;
  
    display: flex;
  
    align-items: center;
  
    justify-content: center;
  
    min-width: 0;
  
    perspective: 1200px;
  }
  
  
  .remote-stream-media-glow {
    position: absolute;
  
    z-index: 0;
  
    width: 80%;
    height: 68%;
  
    left: 10%;
    top: 16%;
  
    border-radius: 999px;
  
    pointer-events: none;
  
    background:
      linear-gradient(
        180deg,
        rgba(255, 204, 29, 0.12),
        rgba(255, 81, 40, 0.07)
      );
  
    filter:
      blur(95px);
  }
  
  
  .remote-stream-image-frame {
    position: relative;
  
    z-index: 1;
  
    width:
      min(
        100%,
        480px
      );
  
    overflow: hidden;
  
    border:
      1px solid
      rgba(255, 255, 255, 0.11);
  
    border-radius: 30px;
  
    background: #111111;
  
    box-shadow:
      0
      32px
      60px
      rgba(0, 0, 0, 0.35);
  
    transition:
      transform 520ms
        cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 520ms
        cubic-bezier(0.22, 1, 0.36, 1);
  }
  
  
  .remote-stream-image-frame:hover {
    transform:
      translateY(-6px)
      scale(1.008);
  
    box-shadow:
      0
      42px
      76px
      rgba(0, 0, 0, 0.42);
  }
  
  
  .remote-stream-image-frame > img {
    display: block;
  
    width: 100%;
  
    height: auto;
  
    aspect-ratio: 941 / 1672;
  
    object-fit: cover;
  }
  
  
  /* =========================================================
     IMAGE OVERLAYS
     ========================================================= */
  
  .remote-live-badge {
    position: absolute;
  
    top: 18px;
    left: 18px;
  
    display: inline-flex;
  
    align-items: center;
  
    gap: 7px;
  
    min-height: 31px;
  
    padding:
      0
      11px;
  
    border:
      1px solid
      rgba(255, 255, 255, 0.16);
  
    border-radius: 999px;
  
    color: #ffffff;
  
    background:
      rgba(9, 10, 12, 0.72);
  
    backdrop-filter:
      blur(14px);
  
    font-size: 0.68rem;
  
    font-weight: 740;
  }
  
  
  .remote-live-dot {
    display: block;
  
    width: 7px;
    height: 7px;
  
    border-radius: 999px;
  
    background: #ff4037;
  
    box-shadow:
      0
      0
      0
      4px
      rgba(255, 64, 55, 0.12);
  }
  
  
  .remote-monitor-badge {
    position: absolute;
  
    right: 17px;
    bottom: 18px;
  
    display: flex;
  
    align-items: center;
  
    gap: 10px;
  
    padding:
      11px
      13px;
  
    border:
      1px solid
      rgba(255, 255, 255, 0.15);
  
    border-radius: 14px;
  
    color: #ffffff;
  
    background:
      rgba(8, 9, 11, 0.76);
  
    backdrop-filter:
      blur(18px);
  
    box-shadow:
      0
      14px
      30px
      rgba(0, 0, 0, 0.23);
  }
  
  
  .remote-monitor-badge > i {
    color: #ffd438;
  
    font-size: 0.9rem;
  }
  
  
  .remote-monitor-badge strong {
    display: block;
  
    font-size: 0.72rem;
  
    font-weight: 780;
  }
  
  
  .remote-monitor-badge span {
    display: block;
  
    margin-top: 2px;
  
    color:
      rgba(235, 237, 242, 0.67);
  
    font-size: 0.61rem;
  }
  
  
  /* =========================================================
     LIGHT THEME
     ========================================================= */
  
  html[data-theme="light"]
  .remote-stream-section {
    --remote-heading: #15171b;
  
    --remote-text:
      rgba(48, 52, 59, 0.68);
  
    --remote-strong:
      rgba(31, 35, 42, 0.88);
  
    --remote-line:
      rgba(39, 43, 49, 0.10);
  
    --remote-card:
      rgba(255, 255, 255, 0.69);
  
    background:
      radial-gradient(
        circle at 77% 45%,
        rgba(255, 195, 27, 0.15),
        transparent 31rem
      ),
      radial-gradient(
        circle at 6% 90%,
        rgba(255, 87, 46, 0.08),
        transparent 29rem
      ),
      linear-gradient(
        135deg,
        #fcfcfb 0%,
        #f5f6f7 52%,
        #fafafa 100%
      );
  }
  
  
  html[data-theme="light"]
  .stream-section-eyebrow {
    color: #a45e00;
  }
  
  
  html[data-theme="light"]
  .remote-stream-title span {
    background:
      linear-gradient(
        105deg,
        #bc7200,
        #e78a00 48%,
        #db5424
      );
  
    -webkit-background-clip: text;
  
    background-clip: text;
  }
  
  
  html[data-theme="light"]
  .remote-connection-flow,
  html[data-theme="light"]
  .remote-stream-feature {
    box-shadow:
      0
      12px
      32px
      rgba(48, 53, 60, 0.05);
  }
  
  
  html[data-theme="light"]
  .remote-stream-feature:hover {
    background:
      rgba(255, 255, 255, 0.92);
  }
  
  
  html[data-theme="light"]
  .remote-use-cases span {
    background:
      rgba(255, 255, 255, 0.66);
  }
  
  
  /* =========================================================
     RESPONSIVE
     ========================================================= */
  
  @media (max-width: 1100px) {
  
    .remote-stream-layout {
      grid-template-columns: 1fr;
  
      gap: 48px;
    }
  
  
    .remote-stream-copy {
      width:
        min(
          100%,
          770px
        );
  
      margin-inline: auto;
  
      text-align: center;
    }
  
  
    .remote-stream-title,
    .remote-stream-description {
      margin-left: auto;
  
      margin-right: auto;
    }
  
  
    .stream-section-eyebrow {
      justify-content: center;
    }
  
  
    .remote-use-cases {
      justify-content: center;
    }
  
  
    .remote-stream-image-frame {
      width:
        min(
          100%,
          520px
        );
    }
  
  }
  
  
  @media (max-width: 760px) {
  
    .remote-stream-section {
      padding:
        66px
        0;
    }
  
  
    .remote-stream-section > .container {
      width:
        min(
          calc(100% - 28px),
          1280px
        );
    }
  
  
    .remote-stream-layout {
      gap: 36px;
    }
  
  
    .remote-stream-title {
      font-size:
        clamp(
          2.35rem,
          10vw,
          3.8rem
        );
    }
  
  
    .remote-stream-description {
      margin-top: 18px;
    }
  
  
    .remote-connection-flow {
      grid-template-columns:
        1fr;
  
      gap: 12px;
  
      text-align: left;
    }
  
  
    .remote-flow-middle {
      flex-direction: row;
  
      justify-content: flex-start;
  
      flex-wrap: wrap;
    }
  
  
    .remote-flow-arrow {
      display: none;
    }
  
  
    .remote-stream-feature-grid {
      grid-template-columns: 1fr;
  
      text-align: left;
    }
  
  
    .remote-stream-media {
      width: 100%;
  
      max-width: 100%;
    }
  
  
    .remote-stream-image-frame {
      width:
        min(
          100%,
          460px
        );
  
      margin-inline: auto;
    }
  
  }
  
  
  @media (max-width: 580px) {
  
    .remote-stream-copy {
      width: 100%;
  
      text-align: left;
    }
  
  
    .stream-section-eyebrow {
      justify-content: flex-start;
    }
  
  
    .remote-use-cases {
      justify-content: flex-start;
    }
  
  
    .remote-stream-image-frame {
      width: 100%;
  
      max-width: 100%;
  
      border-radius: 22px;
    }
  
  
    .remote-live-badge {
      top: 12px;
      left: 12px;
    }
  
  
    .remote-monitor-badge {
      right: 12px;
      bottom: 12px;
    }
  
  }

  /* =========================================================
   DUAL CAMERA SECTION
   ========================================================= */

.dual-camera-section {
    --dual-heading: #f8f8f8;
  
    --dual-text:
      rgba(232, 234, 239, 0.70);
  
    --dual-strong:
      rgba(248, 249, 251, 0.91);
  
    --dual-line:
      rgba(255, 255, 255, 0.10);
  
    --dual-card:
      rgba(255, 255, 255, 0.045);
  
    --dual-pointer-x: 28%;
    --dual-pointer-y: 45%;
  
    position: relative;
  
    isolation: isolate;
  
    overflow: hidden;
  
    padding:
      clamp(80px, 8vw, 124px)
      0;
  
    border-top:
      1px solid
      rgba(255, 255, 255, 0.07);
  
    background:
      radial-gradient(
        circle at 24% 44%,
        rgba(255, 192, 25, 0.11),
        transparent 31rem
      ),
      radial-gradient(
        circle at 91% 90%,
        rgba(255, 70, 40, 0.07),
        transparent 29rem
      ),
      linear-gradient(
        140deg,
        #07080a 0%,
        #0d0e11 50%,
        #090a0c 100%
      );
  }
  
  
  /* Cursor glow */
  
  .dual-camera-section::before {
    content: "";
  
    position: absolute;
    inset: 0;
  
    z-index: 0;
  
    pointer-events: none;
  
    background:
      radial-gradient(
        620px circle
        at var(--dual-pointer-x)
        var(--dual-pointer-y),
        rgba(255, 198, 28, 0.13),
        rgba(255, 78, 40, 0.04) 36%,
        transparent 72%
      );
  }
  
  
  .dual-camera-section > .container {
    position: relative;
  
    z-index: 2;
  
    width:
      min(
        calc(100% - 40px),
        1280px
      );
  
    max-width: none;
  
    margin-inline: auto;
  }
  
  
  /* =========================================================
     DECORATION
     ========================================================= */
  
  .dual-camera-decoration {
    position: absolute;
  
    z-index: 1;
  
    border-radius: 999px;
  
    pointer-events: none;
  
    filter: blur(22px);
  }
  
  
  .dual-camera-decoration-one {
    width: 400px;
    height: 400px;
  
    left: -245px;
    top: 12%;
  
    background:
      rgba(255, 195, 26, 0.07);
  }
  
  
  .dual-camera-decoration-two {
    width: 350px;
    height: 350px;
  
    right: -225px;
    bottom: -90px;
  
    background:
      rgba(255, 66, 38, 0.055);
  }
  
  
  /* =========================================================
     LAYOUT
     ========================================================= */
  
  .dual-camera-layout {
    display: grid;
  
    grid-template-columns:
      minmax(500px, 1.08fr)
      minmax(390px, 0.92fr);
  
    gap:
      clamp(
        50px,
        6vw,
        92px
      );
  
    align-items: center;
  }
  
  
  /* =========================================================
     IMAGE
     ========================================================= */
  
  .dual-camera-media {
    position: relative;
  
    display: flex;
  
    align-items: center;
  
    justify-content: center;
  
    min-width: 0;
  
    background: transparent;
  
    perspective: 1200px;
  }
  
  
  .dual-camera-media-glow {
    position: absolute;
  
    z-index: 0;
  
    width: 74%;
    height: 58%;
  
    left: 13%;
    top: 20%;
  
    border-radius: 999px;
  
    pointer-events: none;
  
    background:
      linear-gradient(
        180deg,
        rgba(255, 199, 28, 0.11),
        rgba(255, 72, 40, 0.06)
      );
  
    filter:
      blur(100px);
  }
  
  
  .dual-camera-media img {
    position: relative;
  
    z-index: 1;
  
    display: block;
  
    width: 100%;
  
    max-width: 760px;
  
    height: auto;
  
    margin: 0 auto;
  
    object-fit: contain;
  
    background: transparent;
  
    filter:
      drop-shadow(
        0
        30px
        42px
        rgba(0, 0, 0, 0.30)
      );
  
    transition:
      transform 540ms
        cubic-bezier(0.22, 1, 0.36, 1),
      filter 540ms
        cubic-bezier(0.22, 1, 0.36, 1);
  }
  
  
  .dual-camera-media:hover img {
    transform:
      translateY(-6px)
      scale(1.009);
  
    filter:
      drop-shadow(
        0
        40px
        50px
        rgba(0, 0, 0, 0.36)
      );
  }
  
  
  /* =========================================================
     COPY
     ========================================================= */
  
  .dual-camera-copy {
    min-width: 0;
  }
  
  
  .dual-camera-title {
    max-width: 610px;
  
    margin: 0;
  
    color:
      var(--dual-heading);
  
    font-size:
      clamp(
        2.45rem,
        4.25vw,
        4.6rem
      );
  
    font-weight: 830;
  
    line-height: 0.99;
  
    letter-spacing: -0.052em;
  }
  
  
  .dual-camera-title span {
    color: transparent;
  
    background:
      linear-gradient(
        105deg,
        #fff0a0,
        #ffd22d 48%,
        #ff8c25 100%
      );
  
    -webkit-background-clip: text;
  
    background-clip: text;
  }
  
  
  .dual-camera-description {
    max-width: 610px;
  
    margin:
      22px
      0
      0;
  
    color:
      var(--dual-text);
  
    font-size: 1rem;
  
    line-height: 1.72;
  }
  
  
  /* =========================================================
     CAMERA SELECTOR
     ========================================================= */
  
  .dual-camera-selector {
    display: grid;
  
    grid-template-columns:
      minmax(0, 1fr)
      auto
      minmax(0, 1fr);
  
    gap: 11px;
  
    align-items: center;
  
    margin-top: 26px;
  
    padding: 14px;
  
    border:
      1px solid
      var(--dual-line);
  
    border-radius: 17px;
  
    background:
      rgba(255, 255, 255, 0.04);
  
    backdrop-filter:
      blur(14px);
  }
  
  
  .dual-camera-selector-item {
    display: flex;
  
    align-items: center;
  
    gap: 10px;
  
    min-width: 0;
  }
  
  
  .dual-camera-number {
    display: grid;
  
    place-items: center;
  
    flex: 0 0 36px;
  
    width: 36px;
    height: 36px;
  
    border-radius: 11px;
  
    color: #181818;
  
    background:
      linear-gradient(
        135deg,
        #ffdc3c,
        #ff9921
      );
  
    font-size: 0.8rem;
  
    font-weight: 850;
  }
  
  
  .dual-camera-selector-item strong {
    display: block;
  
    color:
      var(--dual-heading);
  
    font-size: 0.78rem;
  
    font-weight: 780;
  }
  
  
  .dual-camera-selector-item span {
    display: block;
  
    margin-top: 2px;
  
    color:
      var(--dual-text);
  
    font-size: 0.64rem;
  
    line-height: 1.42;
  }
  
  
  .dual-camera-selector-link {
    display: grid;
  
    place-items: center;
  
    width: 28px;
    height: 28px;
  
    border-radius: 999px;
  
    color: #ffd743;
  
    background:
      rgba(255, 204, 30, 0.08);
  
    border:
      1px solid
      rgba(255, 205, 34, 0.12);
  
    font-size: 0.62rem;
  }
  
  
  /* =========================================================
     FEATURES
     ========================================================= */
  
  .dual-camera-feature-grid {
    display: grid;
  
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  
    gap: 9px;
  
    margin-top: 11px;
  }
  
  
  .dual-camera-feature {
    display: flex;
  
    align-items: flex-start;
  
    gap: 10px;
  
    padding: 13px;
  
    border:
      1px solid
      var(--dual-line);
  
    border-radius: 14px;
  
    background:
      var(--dual-card);
  
    backdrop-filter:
      blur(12px);
  
    transition:
      transform 180ms ease,
      border-color 180ms ease,
      background 180ms ease;
  }
  
  
  .dual-camera-feature:hover {
    transform:
      translateY(-2px);
  
    border-color:
      rgba(255, 204, 40, 0.22);
  
    background:
      rgba(255, 255, 255, 0.065);
  }
  
  
  .dual-camera-feature-icon {
    display: grid;
  
    place-items: center;
  
    flex: 0 0 33px;
  
    width: 33px;
    height: 33px;
  
    border-radius: 10px;
  
    color: #ffd747;
  
    background:
      linear-gradient(
        145deg,
        rgba(255, 202, 26, 0.11),
        rgba(255, 71, 40, 0.055)
      );
  
    border:
      1px solid
      rgba(255, 202, 34, 0.10);
  
    font-size: 0.71rem;
  }
  
  
  .dual-camera-feature h3 {
    margin:
      1px
      0
      4px;
  
    color:
      var(--dual-heading);
  
    font-size: 0.79rem;
  
    font-weight: 780;
  
    letter-spacing: -0.016em;
  }
  
  
  .dual-camera-feature p {
    margin: 0;
  
    color:
      var(--dual-text);
  
    font-size: 0.68rem;
  
    line-height: 1.52;
  }
  
  
  /* =========================================================
     RECORDING MODES
     ========================================================= */
  
  .dual-recording-modes {
    display: grid;
  
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  
    gap: 9px;
  
    margin-top: 11px;
  }
  
  
  .dual-recording-mode {
    display: flex;
  
    align-items: center;
  
    gap: 10px;
  
    padding: 13px;
  
    border:
      1px solid
      rgba(255, 205, 41, 0.14);
  
    border-radius: 14px;
  
    background:
      linear-gradient(
        135deg,
        rgba(255, 198, 24, 0.075),
        rgba(255, 75, 40, 0.04)
      );
  }
  
  
  .dual-recording-mode-icon {
    display: grid;
  
    place-items: center;
  
    flex: 0 0 34px;
  
    width: 34px;
    height: 34px;
  
    border-radius: 10px;
  
    color: #181818;
  
    background:
      linear-gradient(
        135deg,
        #ffdb3b,
        #ff9d22
      );
  
    font-size: 0.72rem;
  }
  
  
  .dual-recording-mode strong {
    display: block;
  
    color:
      var(--dual-heading);
  
    font-size: 0.78rem;
  
    font-weight: 790;
  }
  
  
  .dual-recording-mode span {
    display: block;
  
    margin-top: 2px;
  
    color:
      var(--dual-text);
  
    font-size: 0.64rem;
  
    line-height: 1.42;
  }
  
  
  /* =========================================================
     NOTE
     ========================================================= */
  
  .dual-camera-note {
    display: flex;
  
    align-items: flex-start;
  
    gap: 9px;
  
    margin-top: 10px;
  
    padding:
      12px
      13px;
  
    border:
      1px solid
      rgba(255, 255, 255, 0.08);
  
    border-radius: 13px;
  
    background:
      rgba(255, 255, 255, 0.025);
  }
  
  
  .dual-camera-note > i {
    margin-top: 3px;
  
    color: #ffd545;
  
    font-size: 0.7rem;
  }
  
  
  .dual-camera-note p {
    margin: 0;
  
    color:
      var(--dual-text);
  
    font-size: 0.66rem;
  
    line-height: 1.5;
  }
  
  
  /* =========================================================
     LIGHT THEME
     ========================================================= */
  
  html[data-theme="light"]
  .dual-camera-section {
    --dual-heading: #15171b;
  
    --dual-text:
      rgba(48, 52, 59, 0.68);
  
    --dual-strong:
      rgba(31, 35, 42, 0.88);
  
    --dual-line:
      rgba(39, 43, 49, 0.10);
  
    --dual-card:
      rgba(255, 255, 255, 0.69);
  
    background:
      radial-gradient(
        circle at 23% 44%,
        rgba(255, 196, 30, 0.15),
        transparent 31rem
      ),
      radial-gradient(
        circle at 91% 89%,
        rgba(255, 87, 47, 0.08),
        transparent 29rem
      ),
      linear-gradient(
        140deg,
        #fcfcfb 0%,
        #f5f6f7 52%,
        #fafafa 100%
      );
  }
  
  
  html[data-theme="light"]
  .dual-camera-title span {
    background:
      linear-gradient(
        105deg,
        #bd7200,
        #e58a00 48%,
        #db5525
      );
  
    -webkit-background-clip: text;
  
    background-clip: text;
  }
  
  
  html[data-theme="light"]
  .dual-camera-selector,
  html[data-theme="light"]
  .dual-camera-feature {
    box-shadow:
      0
      12px
      32px
      rgba(48, 53, 60, 0.05);
  }
  
  
  html[data-theme="light"]
  .dual-camera-feature:hover {
    background:
      rgba(255, 255, 255, 0.92);
  }
  
  
  html[data-theme="light"]
  .dual-camera-note {
    background:
      rgba(255, 255, 255, 0.54);
  }
  
  
  /* =========================================================
     RESPONSIVE
     ========================================================= */
  
  @media (max-width: 1100px) {
  
    .dual-camera-layout {
      grid-template-columns: 1fr;
  
      gap: 46px;
    }
  
  
    .dual-camera-media {
      order: 1;
    }
  
  
    .dual-camera-copy {
      order: 2;
  
      width:
        min(
          100%,
          770px
        );
  
      margin-inline: auto;
  
      text-align: center;
    }
  
  
    .dual-camera-title,
    .dual-camera-description {
      margin-left: auto;
  
      margin-right: auto;
    }
  
  
    .dual-camera-copy
    .stream-section-eyebrow {
      justify-content: center;
    }
  
  
    .dual-camera-media img {
      max-width: 820px;
    }
  
  }
  
  
  @media (max-width: 760px) {
  
    .dual-camera-section {
      padding:
        66px
        0;
    }
  
  
    .dual-camera-section > .container {
      width:
        min(
          calc(100% - 28px),
          1280px
        );
    }
  
  
    .dual-camera-layout {
      gap: 34px;
    }
  
  
    .dual-camera-title {
      font-size:
        clamp(
          2.35rem,
          10vw,
          3.8rem
        );
    }
  
  
    .dual-camera-description {
      margin-top: 18px;
    }
  
  
    .dual-camera-selector {
      grid-template-columns: 1fr;
  
      text-align: left;
    }
  
  
    .dual-camera-selector-link {
      display: none;
    }
  
  
    .dual-camera-feature-grid,
    .dual-recording-modes {
      grid-template-columns: 1fr;
  
      text-align: left;
    }
  
  
    .dual-camera-media {
      width: 100%;
  
      max-width: 100%;
    }
  
  
    .dual-camera-media img {
      width: 100%;
  
      max-width: 100%;
  
      height: auto;
    }
  
  }
  
  
  @media (max-width: 580px) {
  
    .dual-camera-copy {
      width: 100%;
  
      text-align: left;
    }
  
  
    .dual-camera-copy
    .stream-section-eyebrow {
      justify-content: flex-start;
    }
  
  
    .dual-camera-media {
      width: 100%;
  
      max-width: 100%;
  
      margin: 0;
  
      padding: 0;
    }
  
  
    .dual-camera-media img {
      display: block;
  
      width: 100%;
  
      max-width: 100%;
  
      margin: 0 auto;
    }
  
  }

  /* =========================================================
   FINAL APP STORE CTA
   ========================================================= */

.stream-final-cta {
    --final-pointer-x: 50%;
    --final-pointer-y: 45%;
  
    position: relative;
  
    isolation: isolate;
  
    overflow: hidden;
  
    padding:
      clamp(72px, 7vw, 110px)
      0;
  
    border-top:
      1px solid
      rgba(255, 255, 255, 0.07);
  
    background:
      linear-gradient(
        180deg,
        #07080a 0%,
        #050506 100%
      );
  }
  
  
  .stream-final-cta::before {
    content: "";
  
    position: absolute;
    inset: 0;
  
    z-index: 0;
  
    pointer-events: none;
  
    background:
      radial-gradient(
        650px circle
        at var(--final-pointer-x)
        var(--final-pointer-y),
        rgba(255, 198, 28, 0.11),
        rgba(255, 74, 38, 0.035) 38%,
        transparent 72%
      );
  }
  
  
  .stream-final-cta > .container {
    position: relative;
  
    z-index: 2;
  
    width:
      min(
        calc(100% - 40px),
        1160px
      );
  
    max-width: none;
  
    margin-inline: auto;
  }
  
  
  /* =========================================================
     CARD
     ========================================================= */
  
  .stream-final-card {
    position: relative;
  
    isolation: isolate;
  
    overflow: hidden;
  
    display: grid;
  
    grid-template-columns:
      auto
      minmax(0, 1fr)
      auto;
  
    gap:
      clamp(
        24px,
        3.5vw,
        48px
      );
  
    align-items: center;
  
    padding:
      clamp(
        28px,
        4vw,
        48px
      );
  
    border:
      1px solid
      rgba(255, 255, 255, 0.11);
  
    border-radius: 30px;
  
    background:
      linear-gradient(
        135deg,
        rgba(255, 202, 28, 0.075),
        rgba(255, 255, 255, 0.035) 47%,
        rgba(255, 66, 38, 0.055)
      );
  
    box-shadow:
      0
      34px
      90px
      rgba(0, 0, 0, 0.34),
      inset
      0
      1px
      0
      rgba(255, 255, 255, 0.05);
  
    backdrop-filter:
      blur(18px);
  }
  
  
  /* =========================================================
     BACKGROUND GLOWS
     ========================================================= */
  
  .stream-final-glow {
    position: absolute;
  
    z-index: -1;
  
    border-radius: 999px;
  
    pointer-events: none;
  
    filter: blur(75px);
  }
  
  
  .stream-final-glow-yellow {
    width: 360px;
    height: 360px;
  
    left: -140px;
    top: -180px;
  
    background:
      rgba(255, 201, 24, 0.18);
  }
  
  
  .stream-final-glow-red {
    width: 330px;
    height: 330px;
  
    right: -120px;
    bottom: -190px;
  
    background:
      rgba(255, 69, 40, 0.14);
  }
  
  
  /* =========================================================
     APP ICON
     ========================================================= */
  
  .stream-final-icon-wrap {
    position: relative;
  
    flex: 0 0 auto;
  
    width:
      clamp(
        94px,
        9vw,
        122px
      );
  
    height:
      clamp(
        94px,
        9vw,
        122px
      );
  
    border-radius:
      25%;
  
    filter:
      drop-shadow(
        0
        20px
        26px
        rgba(0, 0, 0, 0.32)
      );
  
    transition:
      transform 320ms
      cubic-bezier(0.22, 1, 0.36, 1);
  }
  
  
  .stream-final-icon-wrap:hover {
    transform:
      translateY(-4px)
      rotate(-2deg)
      scale(1.025);
  }
  
  
  .stream-final-icon-wrap img {
    display: block;
  
    width: 100%;
    height: 100%;
  
    border-radius: inherit;
  
    object-fit: cover;
  }
  
  
  /* =========================================================
     COPY
     ========================================================= */
  
  .stream-final-copy {
    min-width: 0;
  }
  
  
  .stream-final-kicker {
    display: flex;
  
    align-items: center;
  
    gap: 8px;
  
    margin-bottom: 11px;
  
    color: #ffd95a;
  
    font-size: 0.69rem;
  
    font-weight: 800;
  
    letter-spacing: 0.075em;
  
    text-transform: uppercase;
  }
  
  
  .stream-final-live-dot {
    display: block;
  
    flex: 0 0 7px;
  
    width: 7px;
    height: 7px;
  
    border-radius: 999px;
  
    background: #ff4138;
  
    box-shadow:
      0
      0
      0
      4px
      rgba(255, 65, 56, 0.12);
  }
  
  
  .stream-final-copy h2 {
    max-width: 670px;
  
    margin: 0;
  
    color: #ffffff;
  
    font-size:
      clamp(
        2.1rem,
        4vw,
        4rem
      );
  
    font-weight: 830;
  
    line-height: 0.99;
  
    letter-spacing: -0.052em;
  }
  
  
  .stream-final-copy h2 span {
    color: transparent;
  
    background:
      linear-gradient(
        105deg,
        #fff0a0 0%,
        #ffd52f 44%,
        #ff8e24 76%,
        #ff6541 100%
      );
  
    -webkit-background-clip: text;
  
    background-clip: text;
  }
  
  
  .stream-final-copy > p {
    max-width: 680px;
  
    margin:
      15px
      0
      0;
  
    color:
      rgba(232, 235, 240, 0.69);
  
    font-size: 0.91rem;
  
    line-height: 1.65;
  }
  
  
  /* =========================================================
     FEATURE PILLS
     ========================================================= */
  
  .stream-final-specs {
    display: flex;
  
    flex-wrap: wrap;
  
    gap: 6px;
  
    margin-top: 16px;
  }
  
  
  .stream-final-specs span {
    display: inline-flex;
  
    align-items: center;
  
    gap: 6px;
  
    min-height: 31px;
  
    padding:
      0
      9px;
  
    border:
      1px solid
      rgba(255, 255, 255, 0.09);
  
    border-radius: 999px;
  
    color:
      rgba(246, 247, 249, 0.82);
  
    background:
      rgba(255, 255, 255, 0.035);
  
    font-size: 0.64rem;
  
    font-weight: 700;
  }
  
  
  .stream-final-specs i {
    color: #ffd644;
  
    font-size: 0.62rem;
  }
  
  
  /* =========================================================
     ACTION
     ========================================================= */
  
  .stream-final-action {
    display: flex;
  
    flex-direction: column;
  
    align-items: center;
  
    gap: 13px;
  
    min-width: 224px;
  }
  
  
  /* App Store button */
  
  .stream-final-store-button {
    display: flex;
  
    align-items: center;
  
    justify-content: center;
  
    gap: 12px;
  
    width: 100%;
  
    min-width: 224px;
  
    padding:
      13px
      20px;
  
    border:
      1px solid
      rgba(255, 218, 63, 0.40);
  
    border-radius: 15px;
  
    color: #151515;
  
    background:
      linear-gradient(
        135deg,
        #ffe153,
        #ffb820
      );
  
    text-decoration: none;
  
    box-shadow:
      0
      17px
      42px
      rgba(255, 155, 15, 0.18);
  
    transition:
      transform 180ms ease,
      background 180ms ease,
      box-shadow 180ms ease;
  }
  
  
  .stream-final-store-button:hover {
    color: #111111;
  
    transform:
      translateY(-3px);
  
    background:
      linear-gradient(
        135deg,
        #ffe96d,
        #ffc72e
      );
  
    box-shadow:
      0
      24px
      52px
      rgba(255, 156, 15, 0.25);
  }
  
  
  .stream-final-store-button:focus-visible {
    outline:
      3px solid
      rgba(255, 208, 46, 0.42);
  
    outline-offset: 4px;
  }
  
  
  .stream-final-store-button > i {
    font-size: 1.72rem;
  }
  
  
  .stream-final-store-button > span {
    display: flex;
  
    flex-direction: column;
  
    align-items: flex-start;
  
    line-height: 1.04;
  }
  
  
  .stream-final-store-button small {
    font-size: 0.62rem;
  
    font-weight: 580;
  
    opacity: 0.72;
  }
  
  
  .stream-final-store-button strong {
    font-size: 1rem;
  
    font-weight: 820;
  }
  
  
  /* =========================================================
     DEVICE SUPPORT
     ========================================================= */
  
  .stream-final-devices {
    display: flex;
  
    flex-wrap: wrap;
  
    align-items: center;
  
    justify-content: center;
  
    gap:
      5px
      10px;
  
    max-width: 260px;
  }
  
  
  .stream-final-devices span {
    display: inline-flex;
  
    align-items: center;
  
    gap: 5px;
  
    color:
      rgba(230, 233, 239, 0.64);
  
    font-size: 0.62rem;
  
    font-weight: 660;
  }
  
  
  .stream-final-devices i {
    color:
      rgba(255, 213, 57, 0.82);
  
    font-size: 0.61rem;
  }
  
  
  /* =========================================================
     LIGHT THEME
     ========================================================= */
  
  html[data-theme="light"]
  .stream-final-cta {
    background:
      linear-gradient(
        180deg,
        #f6f7f8,
        #fbfbfb
      );
  }
  
  
  html[data-theme="light"]
  .stream-final-card {
    border-color:
      rgba(52, 53, 55, 0.10);
  
    background:
      linear-gradient(
        135deg,
        rgba(255, 228, 106, 0.26),
        rgba(255, 255, 255, 0.82) 47%,
        rgba(255, 111, 70, 0.10)
      );
  
    box-shadow:
      0
      28px
      70px
      rgba(50, 53, 58, 0.09);
  }
  
  
  html[data-theme="light"]
  .stream-final-copy h2 {
    color: #15171b;
  }
  
  
  html[data-theme="light"]
  .stream-final-copy h2 span {
    background:
      linear-gradient(
        105deg,
        #a35c00,
        #dd8500 48%,
        #dd5424
      );
  
    -webkit-background-clip: text;
  
    background-clip: text;
  }
  
  
  html[data-theme="light"]
  .stream-final-copy > p {
    color:
      rgba(47, 51, 58, 0.68);
  }
  
  
  html[data-theme="light"]
  .stream-final-kicker {
    color: #9d5b00;
  }
  
  
  html[data-theme="light"]
  .stream-final-specs span {
    color:
      rgba(36, 39, 44, 0.79);
  
    border-color:
      rgba(45, 48, 53, 0.09);
  
    background:
      rgba(255, 255, 255, 0.60);
  }
  
  
  html[data-theme="light"]
  .stream-final-devices span {
    color:
      rgba(42, 46, 51, 0.67);
  }
  
  
  html[data-theme="light"]
  .stream-final-devices i {
    color: #d68500;
  }
  
  
  /* =========================================================
     RESPONSIVE
     ========================================================= */
  
  @media (max-width: 980px) {
  
    .stream-final-card {
      grid-template-columns:
        auto
        minmax(0, 1fr);
  
      gap:
        24px
        28px;
    }
  
  
    .stream-final-action {
      grid-column:
        1 / -1;
  
      width: 100%;
  
      flex-direction: row;
  
      justify-content: flex-start;
  
      align-items: center;
    }
  
  
    .stream-final-store-button {
      width: auto;
    }
  
  
    .stream-final-devices {
      justify-content: flex-start;
  
      max-width: none;
    }
  
  }
  
  
  @media (max-width: 680px) {
  
    .stream-final-cta {
      padding:
        62px
        0;
    }
  
  
    .stream-final-cta > .container {
      width:
        calc(100% - 28px);
    }
  
  
    .stream-final-card {
      grid-template-columns: 1fr;
  
      gap: 22px;
  
      padding: 25px;
  
      border-radius: 23px;
  
      text-align: center;
    }
  
  
    .stream-final-icon-wrap {
      margin-inline: auto;
    }
  
  
    .stream-final-kicker {
      justify-content: center;
    }
  
  
    .stream-final-copy h2,
    .stream-final-copy > p {
      margin-left: auto;
  
      margin-right: auto;
    }
  
  
    .stream-final-specs {
      justify-content: center;
    }
  
  
    .stream-final-action {
      grid-column: auto;
  
      flex-direction: column;
  
      align-items: center;
    }
  
  
    .stream-final-store-button {
      width: 100%;
  
      max-width: 340px;
    }
  
  
    .stream-final-devices {
      justify-content: center;
    }
  
  }