/* =========================================================
   EXIF PRO PRODUCT PAGE
   ========================================================= */


/* =========================================================
   ENGLISH-ONLY PRODUCT PAGE
   ========================================================= */

   #arthouseLanguageSelect,
   #arthouseMobileLanguageSelect,
   #languageSelect,
   #mobileLanguageSelect,
   label[for="arthouseLanguageSelect"],
   label[for="arthouseMobileLanguageSelect"],
   label[for="languageSelect"],
   label[for="mobileLanguageSelect"] {
     display: none !important;
   }
   
   
   /* =========================================================
      GLOBAL REVEAL ANIMATIONS
      Used across every section on the page
      ========================================================= */
   
   body .reveal {
     opacity: 0;
   
     transform:
       translate3d(0, 30px, 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, 22px, 0)
       scale(0.97);
   }
   
   
   body .reveal.is-visible {
     opacity: 1;
   
     transform:
       translate3d(0, 0, 0)
       scale(1);
   }
   
   
   /* =========================================================
      HERO
      ========================================================= */
   
   .exif-hero {
     --exif-blue: #1488ff;
     --exif-blue-2: #2d6dff;
     --exif-cyan: #20c9ff;
     --exif-violet: #7968ff;
   
     --hero-bg: #050a12;
     --hero-bg-2: #091321;
   
     --hero-text: #f8fbff;
     --hero-heading: #ffffff;
   
     --hero-muted:
       rgba(224, 234, 248, 0.70);
   
     --hero-muted-strong:
       rgba(235, 243, 255, 0.86);
   
     --hero-line:
       rgba(255, 255, 255, 0.10);
   
     --hero-line-strong:
       rgba(255, 255, 255, 0.18);
   
     --hero-surface:
       rgba(255, 255, 255, 0.055);
   
     --hero-surface-hover:
       rgba(255, 255, 255, 0.085);
   
     --pointer-x: 76%;
     --pointer-y: 12%;
   
     position: relative;
   
     isolation: isolate;
   
     overflow: clip;
   
     padding:
       clamp(48px, 5vw, 72px)
       0
       clamp(64px, 6vw, 88px);
   
     color: var(--hero-text);
   
     background:
       radial-gradient(
         circle at 15% 0%,
         rgba(33, 135, 255, 0.15),
         transparent 32rem
       ),
       radial-gradient(
         circle at 88% 22%,
         rgba(121, 104, 255, 0.12),
         transparent 34rem
       ),
       linear-gradient(
         180deg,
         var(--hero-bg) 0%,
         var(--hero-bg-2) 56%,
         #07101b 100%
       );
   }
   
   
   /* Mouse-following glow */
   
   .exif-hero::before {
     content: "";
   
     position: absolute;
   
     inset: 0;
   
     z-index: -3;
   
     pointer-events: none;
   
     background:
       radial-gradient(
         520px circle
         at var(--pointer-x) var(--pointer-y),
         rgba(32, 201, 255, 0.12),
         transparent 72%
       );
   }
   
   
   /* Subtle texture */
   
   .exif-hero::after {
     content: "";
   
     position: absolute;
   
     inset: 0;
   
     z-index: -2;
   
     pointer-events: none;
   
     opacity: 0.18;
   
     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.68),
         transparent 72%
       );
   }
   
   
   .exif-hero > .container {
     position: relative;
   
     z-index: 2;
   
     width:
       min(
         calc(100% - 40px),
         1240px
       );
   
     max-width: none;
   
     margin-inline: auto;
   }
   
   
   /* =========================================================
      DECORATIVE HERO ORBS
      ========================================================= */
   
   .exif-hero-orb {
     position: absolute;
   
     z-index: -1;
   
     border-radius: 999px;
   
     pointer-events: none;
   
     filter: blur(16px);
   }
   
   
   .exif-hero-orb-one {
     width: 380px;
     height: 380px;
   
     top: 19%;
     left: -220px;
   
     background:
       rgba(20, 136, 255, 0.11);
   }
   
   
   .exif-hero-orb-two {
     width: 440px;
     height: 440px;
   
     top: 7%;
     right: -250px;
   
     background:
       rgba(121, 104, 255, 0.10);
   }
   
   
   /* =========================================================
      HERO COPY
      ========================================================= */
   
   .exif-hero-copy {
     width:
       min(
         100%,
         970px
       );
   
     margin-inline: auto;
   
     text-align: center;
   }
   
   
   .exif-eyebrow {
     display: inline-flex;
   
     align-items: center;
   
     gap: 9px;
   
     min-height: 36px;
   
     margin-bottom: 16px;
   
     padding:
       5px
       13px
       5px
       7px;
   
     border:
       1px solid
       rgba(84, 172, 255, 0.24);
   
     border-radius: 999px;
   
     color: #cae6ff;
   
     background:
       rgba(25, 124, 255, 0.08);
   
     box-shadow:
       inset 0 1px 0
       rgba(255, 255, 255, 0.055);
   
     font-size: 0.76rem;
   
     font-weight: 760;
   
     letter-spacing: 0.065em;
   
     text-transform: uppercase;
   }
   
   
   .exif-eyebrow-icon {
     display: grid;
   
     place-items: center;
   
     width: 25px;
     height: 25px;
   
     border-radius: 999px;
   
     color: #ffffff;
   
     background:
       linear-gradient(
         135deg,
         var(--exif-blue),
         var(--exif-violet)
       );
   
     box-shadow:
       0 7px 18px
       rgba(20, 136, 255, 0.28);
   
     font-size: 0.68rem;
   }
   
   
   .exif-hero h1 {
     width:
       min(
         100%,
         970px
       );
   
     margin:
       0
       auto;
   
     color: var(--hero-heading);
   
     font-size:
       clamp(
         2.85rem,
         5.4vw,
         5.5rem
       );
   
     font-weight: 820;
   
     line-height: 0.96;
   
     letter-spacing: -0.058em;
   }
   
   
   .exif-gradient-text {
     display: inline-block;
   
     color: transparent;
   
     background:
       linear-gradient(
         110deg,
         #ffffff 2%,
         #9cd8ff 35%,
         #5cb5ff 58%,
         #938aff 100%
       );
   
     -webkit-background-clip: text;
   
     background-clip: text;
   }
   
   
   .exif-hero-description {
     width:
       min(
         100%,
         760px
       );
   
     margin:
       20px
       auto
       0;
   
     color: var(--hero-muted);
   
     font-size:
       clamp(
         0.98rem,
         1.3vw,
         1.1rem
       );
   
     line-height: 1.7;
   }
   
   
   /* =========================================================
      HERO ACTIONS
      ========================================================= */
   
   .exif-hero-actions {
     display: flex;
   
     flex-wrap: wrap;
   
     align-items: stretch;
   
     justify-content: center;
   
     gap: 10px;
   
     margin-top: 22px;
   }
   
   
   .exif-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: 730;
   
     text-decoration: none;
   
     transition:
       transform 180ms ease,
       border-color 180ms ease,
       background 180ms ease,
       box-shadow 180ms ease;
   }
   
   
   .exif-button:hover {
     transform:
       translateY(-2px);
   }
   
   
   .exif-button:focus-visible {
     outline:
       3px solid
       rgba(67, 167, 255, 0.48);
   
     outline-offset: 3px;
   }
   
   
   .exif-button-primary {
     min-width: 202px;
   
     color: #07111f;
   
     background: #ffffff;
   
     box-shadow:
       0 14px 38px rgba(0, 0, 0, 0.22),
       inset 0 2px 0
       rgba(255, 255, 255, 0.72);
   }
   
   
   .exif-button-primary:hover {
     color: #07111f;
   
     background: #f2f7fc;
   
     box-shadow:
       0 18px 46px
       rgba(0, 0, 0, 0.28);
   }
   
   
   .exif-button-primary > i {
     font-size: 1.45rem;
   }
   
   
   .exif-button-copy {
     display: flex;
   
     flex-direction: column;
   
     align-items: flex-start;
   
     line-height: 1.03;
   }
   
   
   .exif-button-copy small {
     margin-bottom: 2px;
   
     font-size: 0.63rem;
   
     font-weight: 570;
   
     opacity: 0.75;
   }
   
   
   .exif-button-copy strong {
     font-size: 0.98rem;
   
     font-weight: 800;
   }
   
   
   .exif-button-secondary {
     color:
       var(--hero-muted-strong);
   
     border-color:
       var(--hero-line-strong);
   
     background:
       rgba(255, 255, 255, 0.055);
   
     backdrop-filter:
       blur(12px);
   }
   
   
   .exif-button-secondary:hover {
     color: #ffffff;
   
     border-color:
       rgba(86, 177, 255, 0.42);
   
     background:
       rgba(69, 153, 255, 0.09);
   }
   
   
   .exif-button-secondary i {
     font-size: 0.76rem;
   }
   
   
   /* =========================================================
      QUICK FACTS
      ========================================================= */
   
   .exif-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(--hero-line);
   
     border-radius: 14px;
   
     background:
       rgba(255, 255, 255, 0.035);
   
     backdrop-filter:
       blur(14px);
   }
   
   
   .exif-quick-fact {
     display: inline-flex;
   
     align-items: center;
   
     gap: 6px;
   
     min-height: 28px;
   
     padding:
       0
       8px;
   
     color:
       var(--hero-muted-strong);
   
     font-size: 0.74rem;
   
     font-weight: 690;
   
     white-space: nowrap;
   }
   
   
   .exif-quick-fact i {
     color: #62b8ff;
   
     font-size: 0.73rem;
   }
   
   
   .exif-quick-fact-metadata {
     min-width: 43px;
   
     justify-content: center;
   
     border-radius: 8px;
   
     color: #ddecff;
   
     background:
       rgba(55, 145, 255, 0.095);
   
     font-size: 0.67rem;
   
     letter-spacing: 0.045em;
   }
   
   
   .exif-quick-divider {
     display: block;
   
     width: 1px;
     height: 19px;
   
     margin-inline: 2px;
   
     background:
       var(--hero-line);
   }
   
   
   /* =========================================================
      HERO DEVICE IMAGE
   
      IMPORTANT:
      No background, no border, no black card.
      ========================================================= */
   
   .exif-device-showcase {
     position: relative;
   
     width:
       min(
         100%,
         1030px
       );
   
     margin:
       clamp(26px, 3vw, 38px)
       auto
       0;
   }
   
   
   .exif-device-stage {
     position: relative;
   
     width: 100%;
   
     overflow: visible;
   
     padding: 0;
   
     border: 0;
   
     border-radius: 0;
   
     background: transparent;
   
     box-shadow: none;
   }
   
   
   .exif-device-art {
     position: relative;
   
     z-index: 1;
   
     display: block;
   
     width: 100%;
   
     height: auto;
   
     object-fit: contain;
   
     background: transparent;
   
     filter:
       drop-shadow(
         0
         22px
         24px
         rgba(0, 0, 0, 0.16)
       );
   
     transition:
       transform 450ms
       cubic-bezier(
         0.22,
         1,
         0.36,
         1
       );
   }
   
   
   .exif-device-stage:hover
   .exif-device-art {
     transform:
       scale(1.006);
   }
   
   
   /* =========================================================
      HERO HIGHLIGHTS
      ========================================================= */
   
   .exif-hero-highlights {
     display: grid;
   
     grid-template-columns:
       repeat(
         4,
         minmax(0, 1fr)
       );
   
     gap: 10px;
   
     width:
       min(
         100%,
         1040px
       );
   
     margin:
       12px
       auto
       0;
   
     scroll-margin-top: 100px;
   }
   
   
   .exif-highlight-card {
     display: flex;
   
     align-items: flex-start;
   
     gap: 12px;
   
     min-width: 0;
   
     padding: 16px;
   
     border:
       1px solid
       var(--hero-line);
   
     border-radius: 16px;
   
     background:
       var(--hero-surface);
   
     backdrop-filter:
       blur(15px);
   
     transition:
       transform 180ms ease,
       border-color 180ms ease,
       background 180ms ease,
       box-shadow 180ms ease;
   }
   
   
   .exif-highlight-card:hover {
     transform:
       translateY(-3px);
   
     border-color:
       rgba(90, 174, 255, 0.30);
   
     background:
       var(--hero-surface-hover);
   
     box-shadow:
       0 15px 34px
       rgba(0, 0, 0, 0.14);
   }
   
   
   .exif-highlight-icon {
     display: grid;
   
     place-items: center;
   
     flex:
       0 0 36px;
   
     width: 36px;
     height: 36px;
   
     border-radius: 11px;
   
     color: #b9ddff;
   
     background:
       linear-gradient(
         145deg,
         rgba(33, 145, 255, 0.18),
         rgba(111, 95, 255, 0.11)
       );
   
     border:
       1px solid
       rgba(77, 166, 255, 0.14);
   }
   
   
   .exif-highlight-card h2 {
     margin:
       1px
       0
       5px;
   
     color:
       var(--hero-heading);
   
     font-size: 0.88rem;
   
     font-weight: 780;
   
     letter-spacing: -0.022em;
   }
   
   
   .exif-highlight-card p {
     margin: 0;
   
     color:
       var(--hero-muted);
   
     font-size: 0.73rem;
   
     line-height: 1.55;
   }
   
   
   /* =========================================================
      LOCATION SECTION
      ========================================================= */
   
   .location-section {
     --location-heading: #f8fbff;
   
     --location-text:
       rgba(224, 234, 248, 0.70);
   
     --location-strong:
       rgba(239, 246, 255, 0.90);
   
     --location-line:
       rgba(255, 255, 255, 0.10);
   
     --location-card:
       rgba(255, 255, 255, 0.045);
   
     position: relative;
   
     isolation: isolate;
   
     overflow: hidden;
   
     padding:
       clamp(76px, 8vw, 118px)
       0;
   
     border-top:
       1px solid
       rgba(255, 255, 255, 0.07);
   
     background:
       radial-gradient(
         circle at 79% 42%,
         rgba(33, 147, 255, 0.14),
         transparent 31rem
       ),
       radial-gradient(
         circle at 4% 95%,
         rgba(97, 89, 255, 0.10),
         transparent 29rem
       ),
       linear-gradient(
         135deg,
         #08111d 0%,
         #0a1726 50%,
         #08121f 100%
       );
   }
   
   
   .location-section > .container {
    position: relative;
  
    z-index: 2;
  
    width:
      min(
        calc(100% - 40px),
        1280px
      );
  
    max-width: none;
  
    margin-inline: auto;
  }
   
   .location-section {
    --location-heading: #f8fbff;
  
    --location-text:
      rgba(224, 234, 248, 0.70);
  
    --location-strong:
      rgba(239, 246, 255, 0.90);
  
    --location-line:
      rgba(255, 255, 255, 0.10);
  
    --location-card:
      rgba(255, 255, 255, 0.045);
  
    /* Cursor glow position */
    --location-pointer-x: 72%;
    --location-pointer-y: 45%;
  
    position: relative;
  
    isolation: isolate;
  
    overflow: hidden;
  
    padding:
      clamp(76px, 8vw, 118px)
      0;
  
    border-top:
      1px solid
      rgba(255, 255, 255, 0.07);
  
    background:
      radial-gradient(
        circle at 79% 42%,
        rgba(33, 147, 255, 0.14),
        transparent 31rem
      ),
      radial-gradient(
        circle at 4% 95%,
        rgba(97, 89, 255, 0.10),
        transparent 29rem
      ),
      linear-gradient(
        135deg,
        #08111d 0%,
        #0a1726 50%,
        #08121f 100%
      );
  }

  /* Cursor-following glow for location section */
.location-section::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 0;

  pointer-events: none;

  background:
    radial-gradient(
      600px circle
      at var(--location-pointer-x)
      var(--location-pointer-y),
      rgba(31, 168, 255, 0.18),
      rgba(49, 122, 255, 0.07) 32%,
      transparent 70%
    );

  transition:
    opacity 180ms ease;

  opacity: 1;
}

   
   /* Decorative color only, no image behind device mockup */
   
   .location-decoration {
    position: absolute;
  
    z-index: 1;
  
    border-radius: 999px;
  
    pointer-events: none;
  
    filter: blur(20px);
  }
   
   
   .location-decoration-one {
     width: 400px;
     height: 400px;
   
     right: -210px;
     top: 12%;
   
     background:
       rgba(32, 162, 255, 0.10);
   }
   
   
   .location-decoration-two {
     width: 360px;
     height: 360px;
   
     left: -230px;
     bottom: -80px;
   
     background:
       rgba(112, 95, 255, 0.09);
   }
   
   
   .location-layout {
     display: grid;
   
     grid-template-columns:
       minmax(360px, 0.78fr)
       minmax(520px, 1.22fr);
   
     gap:
       clamp(
         42px,
         5vw,
         78px
       );
   
     align-items: center;
   }
   
   
   /* =========================================================
      LOCATION COPY
      ========================================================= */
   
   .location-copy {
     min-width: 0;
   }
   
   
   .section-eyebrow {
     display: inline-flex;
   
     align-items: center;
   
     gap: 10px;
   
     margin-bottom: 18px;
   
     color: #79bdff;
   
     font-size: 0.74rem;
   
     font-weight: 800;
   
     letter-spacing: 0.09em;
   
     text-transform: uppercase;
   }
   
   
   .section-eyebrow-icon {
     display: grid;
   
     place-items: center;
   
     width: 32px;
     height: 32px;
   
     border-radius: 10px;
   
     color: #ffffff;
   
     background:
       linear-gradient(
         135deg,
         #1697ff,
         #386cef
       );
   
     box-shadow:
       0 9px 24px
       rgba(20, 130, 255, 0.25);
   }
   
   
   .location-title {
     max-width: 570px;
   
     margin: 0;
   
     color:
       var(--location-heading);
   
     font-size:
       clamp(
         2.45rem,
         4.4vw,
         4.65rem
       );
   
     font-weight: 820;
   
     line-height: 0.99;
   
     letter-spacing: -0.052em;
   }
   
   
   .location-title span {
     color: transparent;
   
     background:
       linear-gradient(
         105deg,
         #76c6ff,
         #3e93ff,
         #7a76ff
       );
   
     -webkit-background-clip: text;
   
     background-clip: text;
   }
   
   
   .location-description {
     max-width: 600px;
   
     margin:
       22px
       0
       0;
   
     color:
       var(--location-text);
   
     font-size: 1rem;
   
     line-height: 1.72;
   }
   
   
   /* =========================================================
      LOCATION FEATURES
      ========================================================= */
   
   .location-feature-grid {
     display: grid;
   
     grid-template-columns:
       repeat(
         2,
         minmax(0, 1fr)
       );
   
     gap: 10px;
   
     margin-top: 28px;
   }
   
   
   .location-feature {
     display: flex;
   
     align-items: flex-start;
   
     gap: 11px;
   
     padding: 14px;
   
     border:
       1px solid
       var(--location-line);
   
     border-radius: 15px;
   
     background:
       var(--location-card);
   
     backdrop-filter:
       blur(12px);
   
     transition:
       transform 180ms ease,
       border-color 180ms ease,
       background 180ms ease;
   }
   
   
   .location-feature:hover {
     transform:
       translateY(-2px);
   
     border-color:
       rgba(73, 168, 255, 0.28);
   
     background:
       rgba(255, 255, 255, 0.07);
   }
   
   
   .location-feature-icon {
     display: grid;
   
     place-items: center;
   
     flex:
       0 0 34px;
   
     width: 34px;
     height: 34px;
   
     border-radius: 10px;
   
     color: #7bc4ff;
   
     background:
       rgba(35, 139, 255, 0.11);
   
     border:
       1px solid
       rgba(50, 153, 255, 0.13);
   
     font-size: 0.78rem;
   }
   
   
   .location-feature h3 {
     margin:
       1px
       0
       5px;
   
     color:
       var(--location-heading);
   
     font-size: 0.85rem;
   
     font-weight: 780;
   
     letter-spacing: -0.018em;
   }
   
   
   .location-feature p {
     margin: 0;
   
     color:
       var(--location-text);
   
     font-size: 0.72rem;
   
     line-height: 1.55;
   }
   
   
   /* =========================================================
      LOCATION TAGS
      ========================================================= */
   
   .location-tags {
     display: flex;
   
     flex-wrap: wrap;
   
     gap: 7px;
   
     margin-top: 18px;
   }
   
   
   .location-tags span {
     display: inline-flex;
   
     align-items: center;
   
     gap: 7px;
   
     min-height: 34px;
   
     padding:
       0
       11px;
   
     border:
       1px solid
       var(--location-line);
   
     border-radius: 999px;
   
     color:
       var(--location-strong);
   
     background:
       rgba(255, 255, 255, 0.035);
   
     font-size: 0.7rem;
   
     font-weight: 690;
   }
   
   
   .location-tags i {
     color: #60b4ff;
   
     font-size: 0.68rem;
   }
   
   
   /* =========================================================
      LOCATION ARTWORK
   
      No background card.
      No frame.
      No rectangle behind image.
      ========================================================= */
   
      .location-media {
        position: relative;
      
        z-index: 2;
      
        display: flex;
      
        align-items: center;
      
        justify-content: center;
      
        width: 100%;
      
        min-width: 0;
      
        padding: 0;
      
        border: 0;
      
        background: transparent;
      
        box-shadow: none;
      
        perspective: 1200px;
      }
      
      
      .location-media img {
        display: block;
      
        width: 100%;
      
        max-width: 810px;
      
        height: auto;
      
        margin: 0 auto;
      
        object-fit: contain;
      
        background: transparent;
      
        filter:
          drop-shadow(
            0
            28px
            34px
            rgba(0, 0, 0, 0.22)
          );
      
        transform:
          translate3d(0, 0, 0)
          scale(1);
      
        transform-origin: center center;
      
        transition:
          transform 550ms
            cubic-bezier(0.22, 1, 0.36, 1),
          filter 550ms
            cubic-bezier(0.22, 1, 0.36, 1);
      }
      
      
      .location-media:hover img {
        transform:
          translate3d(0, -6px, 0)
          scale(1.012);
      
        filter:
          drop-shadow(
            0
            36px
            42px
            rgba(0, 0, 0, 0.28)
          );
      }
   
   
   /* =========================================================
      LIGHT THEME — HERO
      ========================================================= */
   
   html[data-theme="light"]
   .exif-hero {
     --hero-bg: #f7faff;
     --hero-bg-2: #edf4fb;
   
     --hero-text: #1e2938;
     --hero-heading: #07111e;
   
     --hero-muted:
       rgba(35, 51, 71, 0.67);
   
     --hero-muted-strong:
       rgba(24, 40, 59, 0.82);
   
     --hero-line:
       rgba(20, 48, 78, 0.11);
   
     --hero-line-strong:
       rgba(20, 48, 78, 0.17);
   
     --hero-surface:
       rgba(255, 255, 255, 0.64);
   
     --hero-surface-hover:
       rgba(255, 255, 255, 0.90);
   
     background:
       radial-gradient(
         circle at 13% 3%,
         rgba(34, 147, 255, 0.14),
         transparent 31rem
       ),
       radial-gradient(
         circle at 86% 17%,
         rgba(121, 104, 255, 0.10),
         transparent 33rem
       ),
       linear-gradient(
         180deg,
         var(--hero-bg),
         var(--hero-bg-2)
       );
   }
   
   
   html[data-theme="light"]
   .exif-hero::after {
     background-image:
       linear-gradient(
         rgba(24, 70, 110, 0.026) 1px,
         transparent 1px
       ),
       linear-gradient(
         90deg,
         rgba(24, 70, 110, 0.026) 1px,
         transparent 1px
       );
   }
   
   
   html[data-theme="light"]
   .exif-eyebrow {
     color: #1767bd;
   
     border-color:
       rgba(22, 121, 220, 0.16);
   
     background:
       rgba(37, 136, 233, 0.07);
   }
   
   
   html[data-theme="light"]
   .exif-gradient-text {
     color: transparent;
   
     background:
       linear-gradient(
         110deg,
         #07111e 0%,
         #166fc9 48%,
         #4962e9 100%
       );
   
     -webkit-background-clip: text;
   
     background-clip: text;
   }
   
   
   html[data-theme="light"]
   .exif-button-primary {
     color: #ffffff;
   
     background:
       linear-gradient(
         135deg,
         #147fe7,
         #3765ec
       );
   
     box-shadow:
       0 14px 34px
       rgba(35, 102, 215, 0.22);
   }
   
   
   html[data-theme="light"]
   .exif-button-primary:hover {
     color: #ffffff;
   
     background:
       linear-gradient(
         135deg,
         #0d73d6,
         #305be0
       );
   }
   
   
   html[data-theme="light"]
   .exif-button-secondary {
     color: #20354b;
   
     border-color:
       rgba(22, 59, 95, 0.13);
   
     background:
       rgba(255, 255, 255, 0.72);
   }
   
   
   html[data-theme="light"]
   .exif-button-secondary:hover {
     color: #0b57a5;
   
     border-color:
       rgba(29, 123, 214, 0.24);
   
     background: #ffffff;
   }
   
   
   html[data-theme="light"]
   .exif-quick-facts {
     background:
       rgba(255, 255, 255, 0.62);
   
     box-shadow:
       0 10px 28px
       rgba(58, 80, 110, 0.06);
   }
   
   
   html[data-theme="light"]
   .exif-quick-fact i {
     color: #167bd8;
   }
   
   
   html[data-theme="light"]
   .exif-quick-fact-metadata {
     color: #225f99;
   
     background:
       rgba(29, 129, 222, 0.08);
   }
   
   
   html[data-theme="light"]
   .exif-highlight-card {
     box-shadow:
       0 10px 28px
       rgba(38, 69, 101, 0.05);
   }
   
   
   html[data-theme="light"]
   .exif-highlight-icon {
     color: #176fc5;
   }
   
   
   /* =========================================================
      LIGHT THEME — LOCATION
      ========================================================= */
   
   html[data-theme="light"]
   .location-section {
     --location-heading: #081525;
   
     --location-text:
       rgba(41, 58, 78, 0.69);
   
     --location-strong:
       rgba(23, 43, 65, 0.88);
   
     --location-line:
       rgba(27, 71, 111, 0.10);
   
     --location-card:
       rgba(255, 255, 255, 0.68);
   
     border-top:
       1px solid
       rgba(28, 68, 107, 0.07);
   
     background:
       radial-gradient(
         circle at 78% 42%,
         rgba(66, 167, 255, 0.16),
         transparent 31rem
       ),
       radial-gradient(
         circle at 6% 92%,
         rgba(117, 108, 255, 0.09),
         transparent 30rem
       ),
       linear-gradient(
         135deg,
         #f7fbff 0%,
         #edf6ff 52%,
         #f8f9ff 100%
       );
   }
   
   
   html[data-theme="light"]
   .section-eyebrow {
     color: #176cc0;
   }
   
   
   html[data-theme="light"]
   .location-feature {
     box-shadow:
       0 12px 34px
       rgba(42, 74, 110, 0.055);
   }
   
   
   html[data-theme="light"]
   .location-feature:hover {
     background:
       rgba(255, 255, 255, 0.90);
   }
   
   
   html[data-theme="light"]
   .location-feature-icon {
     color: #176fc8;
   
     background:
       rgba(33, 135, 230, 0.08);
   }
   
   
   html[data-theme="light"]
   .location-tags span {
     background:
       rgba(255, 255, 255, 0.62);
   }
   
   
   /* =========================================================
      RESPONSIVE
      ========================================================= */
   
   @media (max-width: 1100px) {
   
     .exif-hero-highlights {
       grid-template-columns:
         repeat(
           2,
           minmax(0, 1fr)
         );
     }
   
   
     .location-layout {
       grid-template-columns:
         1fr;
   
       gap: 46px;
     }
   
   
     .location-copy {
       width:
         min(
           100%,
           760px
         );
   
       margin-inline: auto;
   
       text-align: center;
     }
   
   
     .location-title,
     .location-description {
       margin-left: auto;
   
       margin-right: auto;
     }
   
   
     .section-eyebrow {
       justify-content: center;
     }
   
   
     .location-tags {
       justify-content: center;
     }
   
   
     .location-media img {
       max-width: 900px;
     }
   
   }
   
   
   @media (max-width: 760px) {

    .exif-hero {
      padding:
        44px
        0
        62px;
    }
  
  
    .exif-hero > .container,
    .location-section > .container {
      width:
        min(
          calc(100% - 28px),
          1280px
        );
    }
  
  
    .exif-hero h1 {
      font-size:
        clamp(
          2.55rem,
          11.8vw,
          4.1rem
        );
  
      line-height: 0.98;
    }
  
  
    .exif-hero-description {
      margin-top: 18px;
  
      font-size: 0.96rem;
  
      line-height: 1.65;
    }
  
  
    .exif-hero-actions {
      margin-top: 21px;
    }
  
  
    .exif-device-showcase {
      margin-top: 28px;
    }
  
  
    .exif-hero-highlights {
      grid-template-columns: 1fr;
  
      gap: 8px;
  
      margin-top: 8px;
    }
  
  
    .location-section {
      padding:
        64px
        0;
    }
  
  
    .location-layout {
      gap: 34px;
    }
  
  
    .location-title {
      font-size:
        clamp(
          2.35rem,
          10vw,
          3.8rem
        );
    }
  
  
    .location-description {
      margin-top: 18px;
    }
  
  
    .location-feature-grid {
      margin-top: 23px;
    }
  
  
    /* Keep the entire device image inside the viewport */
    .location-media {
      width: 100%;
  
      max-width: 100%;
  
      overflow: visible;
  
      margin:
        4px
        auto
        0;
    }
  
  
    .location-media img {
      width: 100%;
  
      max-width: 100%;
  
      height: auto;
  
      margin: 0 auto;
  
      transform: none;
    }
  
  
    .location-media:hover img {
      transform:
        translateY(-3px)
        scale(1.004);
    }
  
  }
   
   
  @media (max-width: 580px) {

    .exif-eyebrow {
      margin-bottom: 14px;
  
      font-size: 0.66rem;
  
      letter-spacing: 0.05em;
    }
  
  
    .exif-hero-actions {
      display: grid;
  
      grid-template-columns: 1fr;
  
      width: 100%;
    }
  
  
    .exif-button {
      width: 100%;
    }
  
  
    .exif-quick-facts {
      width: 100%;
  
      gap: 4px;
  
      padding: 6px;
    }
  
  
    .exif-quick-fact {
      flex: 1 1 auto;
  
      justify-content: center;
    }
  
  
    .exif-quick-divider {
      display: none;
    }
  
  
    /* Location text switches to left alignment */
    .location-copy {
      width: 100%;
  
      text-align: left;
    }
  
  
    .section-eyebrow {
      justify-content: flex-start;
    }
  
  
    .location-feature-grid {
      grid-template-columns: 1fr;
    }
  
  
    .location-tags {
      justify-content: flex-start;
    }
  
  
    /* Important:
       never make the transparent device artwork wider than viewport */
    .location-media {
      width: 100%;
  
      max-width: 100%;
  
      margin: 4px 0 0;
  
      padding: 0;
  
      overflow: visible;
    }
  
  
    .location-media img {
      display: block;
  
      width: 100%;
  
      max-width: 100%;
  
      height: auto;
  
      margin: 0 auto;
    }
  
  }
   
   
   @media (max-width: 390px) {
   
     .exif-quick-fact {
       padding:
         0
         5px;
   
       font-size: 0.67rem;
     }
   
   
     .exif-quick-fact-metadata {
       min-width: 37px;
   
       font-size: 0.60rem;
     }
   
   }
   
   
   /* =========================================================
      REDUCED MOTION
      ========================================================= */
   
   @media (prefers-reduced-motion: reduce) {
   
     html {
       scroll-behavior: auto !important;
     }
   
   
     body .reveal,
     body .reveal.reveal-left,
     body .reveal.reveal-right,
     body .reveal.reveal-scale {
       opacity: 1 !important;
   
       transform: none !important;
   
       transition: none !important;
     }
   
   
     .exif-device-stage:hover
     .exif-device-art,
     .location-media:hover
     img {
       transform: none;
     }
   
   }


   /* third section */
   /* =========================================================
   DETAILS / ALBUM VIEW SECTION
   ========================================================= */

.details-section {
  --details-heading: #f8fbff;

  --details-text:
    rgba(224, 234, 248, 0.70);

  --details-strong:
    rgba(239, 246, 255, 0.92);

  --details-line:
    rgba(255, 255, 255, 0.10);

  --details-card:
    rgba(255, 255, 255, 0.045);

  --details-pointer-x: 28%;
  --details-pointer-y: 46%;

  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 22% 46%,
      rgba(71, 126, 255, 0.14),
      transparent 32rem
    ),
    radial-gradient(
      circle at 91% 8%,
      rgba(109, 86, 255, 0.10),
      transparent 28rem
    ),
    linear-gradient(
      140deg,
      #07101b 0%,
      #0a1422 48%,
      #09111d 100%
    );
}


/* Cursor-following glow */

.details-section::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 0;

  pointer-events: none;

  background:
    radial-gradient(
      620px circle
      at var(--details-pointer-x)
      var(--details-pointer-y),
      rgba(51, 151, 255, 0.16),
      rgba(80, 91, 255, 0.055) 34%,
      transparent 72%
    );
}


/* Main container */

.details-section > .container {
  position: relative;

  z-index: 2;

  width:
    min(
      calc(100% - 40px),
      1280px
    );

  max-width: none;

  margin-inline: auto;
}


/* =========================================================
   BACKGROUND DECORATION
   ========================================================= */

.details-decoration {
  position: absolute;

  z-index: 1;

  border-radius: 999px;

  pointer-events: none;

  filter: blur(22px);
}


.details-decoration-one {
  width: 420px;
  height: 420px;

  left: -250px;
  top: 16%;

  background:
    rgba(35, 139, 255, 0.09);
}


.details-decoration-two {
  width: 350px;
  height: 350px;

  right: -210px;
  bottom: -80px;

  background:
    rgba(110, 91, 255, 0.08);
}


/* =========================================================
   TWO-COLUMN LAYOUT

   Image left
   Copy right
   ========================================================= */

.details-layout {
  display: grid;

  grid-template-columns:
    minmax(520px, 1.18fr)
    minmax(360px, 0.82fr);

  gap:
    clamp(
      48px,
      6vw,
      86px
    );

  align-items: center;
}


/* =========================================================
   DETAILS ARTWORK
   ========================================================= */

.details-media {
  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  min-width: 0;

  padding: 0;

  background: transparent;

  perspective: 1200px;
}


.details-media-glow {
  position: absolute;

  z-index: 0;

  width: 72%;
  height: 55%;

  left: 14%;
  top: 23%;

  border-radius: 999px;

  pointer-events: none;

  background:
    rgba(49, 137, 255, 0.15);

  filter:
    blur(90px);
}


.details-media img {
  position: relative;

  z-index: 1;

  display: block;

  width: 100%;

  max-width: 790px;

  height: auto;

  margin: 0 auto;

  object-fit: contain;

  background: transparent;

  filter:
    drop-shadow(
      0
      30px
      38px
      rgba(0, 0, 0, 0.25)
    );

  transform:
    translate3d(0, 0, 0)
    scale(1);

  transform-origin:
    center center;

  transition:
    transform 540ms
      cubic-bezier(0.22, 1, 0.36, 1),
    filter 540ms
      cubic-bezier(0.22, 1, 0.36, 1);
}


.details-media:hover img {
  transform:
    translate3d(0, -6px, 0)
    scale(1.01);

  filter:
    drop-shadow(
      0
      38px
      46px
      rgba(0, 0, 0, 0.30)
    );
}


/* =========================================================
   DETAILS COPY
   ========================================================= */

.details-copy {
  min-width: 0;
}


.details-eyebrow {
  margin-bottom: 18px;

  color: #82c5ff;
}


.details-eyebrow-icon {
  background:
    linear-gradient(
      135deg,
      #378fff,
      #625ff2
    );
}


.details-title {
  max-width: 560px;

  margin: 0;

  color:
    var(--details-heading);

  font-size:
    clamp(
      2.4rem,
      4.15vw,
      4.45rem
    );

  font-weight: 820;

  line-height: 0.99;

  letter-spacing: -0.052em;
}


.details-title span {
  display: inline;

  color: transparent;

  background:
    linear-gradient(
      105deg,
      #83caff,
      #4e99ff,
      #7b77ff
    );

  -webkit-background-clip: text;

  background-clip: text;
}


.details-description {
  max-width: 590px;

  margin:
    21px
    0
    0;

  color:
    var(--details-text);

  font-size: 1rem;

  line-height: 1.72;
}


/* =========================================================
   IPAD / IPHONE LAYOUT CALLOUT
   ========================================================= */

.details-layout-callout {
  display: grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items: stretch;

  gap: 13px;

  margin-top: 25px;

  padding: 14px;

  border:
    1px solid
    var(--details-line);

  border-radius: 17px;

  background:
    rgba(255, 255, 255, 0.045);

  backdrop-filter:
    blur(14px);
}


.details-layout-device {
  display: flex;

  align-items: flex-start;

  gap: 10px;

  min-width: 0;
}


.details-device-icon {
  display: grid;

  place-items: center;

  flex:
    0 0 34px;

  width: 34px;
  height: 34px;

  border-radius: 10px;

  color: #80c7ff;

  background:
    rgba(45, 143, 255, 0.11);

  border:
    1px solid
    rgba(66, 157, 255, 0.13);
}


.details-layout-device strong {
  display: block;

  margin-bottom: 3px;

  color:
    var(--details-heading);

  font-size: 0.8rem;

  font-weight: 780;
}


.details-layout-device span {
  display: block;

  color:
    var(--details-text);

  font-size: 0.69rem;

  line-height: 1.46;
}


.details-layout-divider {
  width: 1px;

  min-height: 48px;

  background:
    var(--details-line);
}


/* =========================================================
   FEATURE LIST
   ========================================================= */

.details-feature-list {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 9px;

  margin-top: 18px;
}


.details-feature {
  display: flex;

  align-items: flex-start;

  gap: 10px;

  padding: 13px;

  border:
    1px solid
    var(--details-line);

  border-radius: 14px;

  background:
    var(--details-card);

  backdrop-filter:
    blur(12px);

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}


.details-feature:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(80, 167, 255, 0.27);

  background:
    rgba(255, 255, 255, 0.067);
}


.details-feature-icon {
  display: grid;

  place-items: center;

  flex:
    0 0 32px;

  width: 32px;
  height: 32px;

  border-radius: 9px;

  color: #78c1ff;

  background:
    rgba(41, 138, 255, 0.10);

  border:
    1px solid
    rgba(53, 151, 255, 0.12);

  font-size: 0.74rem;
}


.details-feature h3 {
  margin:
    1px
    0
    4px;

  color:
    var(--details-heading);

  font-size: 0.81rem;

  font-weight: 780;

  letter-spacing: -0.017em;
}


.details-feature p {
  margin: 0;

  color:
    var(--details-text);

  font-size: 0.69rem;

  line-height: 1.52;
}


/* =========================================================
   STATUS TAG EXAMPLES
   ========================================================= */

.details-status-preview {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-top: 17px;
}


.details-status {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  min-height: 33px;

  padding:
    0
    10px;

  border:
    1px solid
    var(--details-line);

  border-radius: 999px;

  color:
    var(--details-strong);

  background:
    rgba(255, 255, 255, 0.035);

  font-size: 0.68rem;

  font-weight: 700;
}


.details-status i {
  font-size: 0.67rem;
}


.details-status-favorite i {
  color: #ff5d76;
}


.details-status-rating i {
  color: #ffb43f;
}


.details-status-location i {
  color: #49a8ff;
}


.details-status-ai i {
  color: #a688ff;
}


/* =========================================================
   LIGHT THEME
   ========================================================= */

html[data-theme="light"]
.details-section {
  --details-heading: #081525;

  --details-text:
    rgba(41, 58, 78, 0.69);

  --details-strong:
    rgba(23, 43, 65, 0.90);

  --details-line:
    rgba(27, 71, 111, 0.10);

  --details-card:
    rgba(255, 255, 255, 0.66);

  border-top:
    1px solid
    rgba(28, 68, 107, 0.07);

  background:
    radial-gradient(
      circle at 22% 46%,
      rgba(73, 161, 255, 0.15),
      transparent 32rem
    ),
    radial-gradient(
      circle at 92% 10%,
      rgba(120, 108, 255, 0.08),
      transparent 28rem
    ),
    linear-gradient(
      140deg,
      #f7fbff 0%,
      #f0f6fd 50%,
      #faf9ff 100%
    );
}


html[data-theme="light"]
.details-eyebrow {
  color: #176cc0;
}


html[data-theme="light"]
.details-layout-callout,
html[data-theme="light"]
.details-feature {
  box-shadow:
    0 12px 32px
    rgba(42, 74, 110, 0.05);
}


html[data-theme="light"]
.details-layout-callout {
  background:
    rgba(255, 255, 255, 0.64);
}


html[data-theme="light"]
.details-feature:hover {
  background:
    rgba(255, 255, 255, 0.90);
}


html[data-theme="light"]
.details-device-icon,
html[data-theme="light"]
.details-feature-icon {
  color: #1874c9;

  background:
    rgba(31, 128, 221, 0.08);
}


html[data-theme="light"]
.details-status {
  background:
    rgba(255, 255, 255, 0.65);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

  .details-layout {
    grid-template-columns: 1fr;

    gap: 48px;
  }


  .details-media {
    order: 1;
  }


  .details-copy {
    order: 2;

    width:
      min(
        100%,
        760px
      );

    margin-inline: auto;

    text-align: center;
  }


  .details-title,
  .details-description {
    margin-left: auto;

    margin-right: auto;
  }


  .details-eyebrow {
    justify-content: center;
  }


  .details-status-preview {
    justify-content: center;
  }


  .details-media img {
    max-width: 950px;
  }

}


@media (max-width: 760px) {

  .details-section {
    padding:
      66px
      0;
  }


  .details-section > .container {
    width:
      min(
        calc(100% - 28px),
        1280px
      );
  }


  .details-layout {
    gap: 32px;
  }


  .details-media {
    width: 100%;

    max-width: 100%;

    margin:
      0
      auto;

    overflow: visible;
  }


  .details-media img {
    width: 100%;

    max-width: 100%;

    height: auto;

    margin:
      0
      auto;
  }


  .details-title {
    font-size:
      clamp(
        2.35rem,
        10vw,
        3.8rem
      );
  }


  .details-layout-callout {
    grid-template-columns:
      1fr;

    gap: 12px;

    text-align: left;
  }


  .details-layout-divider {
    width: 100%;

    height: 1px;

    min-height: 1px;
  }


  .details-feature-list {
    grid-template-columns: 1fr;

    text-align: left;
  }

}


@media (max-width: 580px) {

  .details-copy {
    width: 100%;

    text-align: left;
  }


  .details-eyebrow {
    justify-content: flex-start;
  }


  .details-status-preview {
    justify-content: flex-start;
  }


  .details-media {
    width: 100%;

    max-width: 100%;

    margin: 0;

    padding: 0;
  }


  .details-media img {
    width: 100%;

    max-width: 100%;

    margin: 0 auto;
  }

}

/* =========================================================
   PHOTO DETAILS SECTION
   ========================================================= */

   .photo-details-section {
    --photo-details-heading: #f8fbff;
  
    --photo-details-text:
      rgba(224, 234, 248, 0.70);
  
    --photo-details-strong:
      rgba(239, 246, 255, 0.92);
  
    --photo-details-line:
      rgba(255, 255, 255, 0.10);
  
    --photo-details-card:
      rgba(255, 255, 255, 0.045);
  
    --photo-details-pointer-x: 74%;
    --photo-details-pointer-y: 45%;
  
    position: relative;
  
    isolation: isolate;
  
    overflow: hidden;
  
    padding:
      clamp(78px, 8vw, 122px)
      0;
  
    border-top:
      1px solid
      rgba(255, 255, 255, 0.07);
  
    background:
      radial-gradient(
        circle at 78% 45%,
        rgba(36, 145, 255, 0.14),
        transparent 32rem
      ),
      radial-gradient(
        circle at 8% 92%,
        rgba(117, 89, 255, 0.09),
        transparent 30rem
      ),
      linear-gradient(
        135deg,
        #08111d 0%,
        #0b1726 52%,
        #09131f 100%
      );
  }
  
  
  /* Mouse-following section glow */
  
  .photo-details-section::before {
    content: "";
  
    position: absolute;
    inset: 0;
  
    z-index: 0;
  
    pointer-events: none;
  
    background:
      radial-gradient(
        620px circle
        at var(--photo-details-pointer-x)
        var(--photo-details-pointer-y),
        rgba(35, 162, 255, 0.17),
        rgba(66, 97, 255, 0.055) 34%,
        transparent 72%
      );
  }
  
  
  .photo-details-section > .container {
    position: relative;
  
    z-index: 2;
  
    width:
      min(
        calc(100% - 40px),
        1280px
      );
  
    max-width: none;
  
    margin-inline: auto;
  }
  
  
  /* =========================================================
     DECORATION
     ========================================================= */
  
  .photo-details-decoration {
    position: absolute;
  
    z-index: 1;
  
    border-radius: 999px;
  
    pointer-events: none;
  
    filter: blur(22px);
  }
  
  
  .photo-details-decoration-one {
    width: 400px;
    height: 400px;
  
    right: -230px;
    top: 10%;
  
    background:
      rgba(32, 158, 255, 0.09);
  }
  
  
  .photo-details-decoration-two {
    width: 350px;
    height: 350px;
  
    left: -220px;
    bottom: -100px;
  
    background:
      rgba(115, 90, 255, 0.08);
  }
  
  
  /* =========================================================
     LAYOUT
     ========================================================= */
  
  .photo-details-layout {
    display: grid;
  
    grid-template-columns:
      minmax(360px, 0.80fr)
      minmax(540px, 1.20fr);
  
    gap:
      clamp(
        46px,
        6vw,
        88px
      );
  
    align-items: center;
  }
  
  
  /* =========================================================
     COPY
     ========================================================= */
  
  .photo-details-copy {
    min-width: 0;
  }
  
  
  .photo-details-eyebrow {
    margin-bottom: 18px;
  
    color: #79bdff;
  }
  
  
  .photo-details-eyebrow-icon {
    background:
      linear-gradient(
        135deg,
        #188eff,
        #5d6bf2
      );
  }
  
  
  .photo-details-title {
    max-width: 570px;
  
    margin: 0;
  
    color:
      var(--photo-details-heading);
  
    font-size:
      clamp(
        2.45rem,
        4.3vw,
        4.55rem
      );
  
    font-weight: 820;
  
    line-height: 0.99;
  
    letter-spacing: -0.052em;
  }
  
  
  .photo-details-title span {
    color: transparent;
  
    background:
      linear-gradient(
        105deg,
        #79c6ff,
        #4996ff,
        #7b76ff
      );
  
    -webkit-background-clip: text;
  
    background-clip: text;
  }
  
  
  .photo-details-description {
    max-width: 590px;
  
    margin:
      22px
      0
      0;
  
    color:
      var(--photo-details-text);
  
    font-size: 1rem;
  
    line-height: 1.72;
  }
  
  
  /* =========================================================
     FEATURE LIST
     ========================================================= */
  
  .photo-details-feature-list {
    display: grid;
  
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  
    gap: 10px;
  
    margin-top: 28px;
  }
  
  
  .photo-details-feature {
    display: flex;
  
    align-items: flex-start;
  
    gap: 11px;
  
    padding: 14px;
  
    border:
      1px solid
      var(--photo-details-line);
  
    border-radius: 15px;
  
    background:
      var(--photo-details-card);
  
    backdrop-filter:
      blur(12px);
  
    transition:
      transform 180ms ease,
      border-color 180ms ease,
      background 180ms ease;
  }
  
  
  .photo-details-feature:hover {
    transform:
      translateY(-2px);
  
    border-color:
      rgba(72, 168, 255, 0.28);
  
    background:
      rgba(255, 255, 255, 0.07);
  }
  
  
  .photo-details-feature-icon {
    display: grid;
  
    place-items: center;
  
    flex:
      0 0 34px;
  
    width: 34px;
    height: 34px;
  
    border-radius: 10px;
  
    color: #7fc5ff;
  
    background:
      rgba(37, 140, 255, 0.11);
  
    border:
      1px solid
      rgba(57, 154, 255, 0.13);
  
    font-size: 0.76rem;
  }
  
  
  .photo-details-feature h3 {
    margin:
      1px
      0
      5px;
  
    color:
      var(--photo-details-heading);
  
    font-size: 0.84rem;
  
    font-weight: 780;
  
    letter-spacing: -0.018em;
  }
  
  
  .photo-details-feature p {
    margin: 0;
  
    color:
      var(--photo-details-text);
  
    font-size: 0.71rem;
  
    line-height: 1.54;
  }
  
  
  /* =========================================================
     METADATA GROUP CHIPS
     ========================================================= */
  
  .photo-details-groups {
    display: flex;
  
    flex-wrap: wrap;
  
    gap: 7px;
  
    margin-top: 18px;
  }
  
  
  .photo-details-groups span {
    display: inline-flex;
  
    align-items: center;
  
    gap: 6px;
  
    min-height: 34px;
  
    padding:
      0
      11px;
  
    border:
      1px solid
      var(--photo-details-line);
  
    border-radius: 999px;
  
    color:
      var(--photo-details-strong);
  
    background:
      rgba(255, 255, 255, 0.035);
  
    font-size: 0.69rem;
  
    font-weight: 720;
  }
  
  
  .photo-details-groups span:not(
    .photo-details-group-location
  ):not(
    .photo-details-group-ai
  ) {
    min-width: 46px;
  
    justify-content: center;
  
    color: #8bc9ff;
  
    letter-spacing: 0.04em;
  }
  
  
  .photo-details-group-location i {
    color: #50adff;
  }
  
  
  .photo-details-group-ai i {
    color: #a98aff;
  }
  
  
  /* =========================================================
     IMAGE
     No fake background/frame around the PNG
     ========================================================= */
  
  .photo-details-media {
    position: relative;
  
    display: flex;
  
    align-items: center;
  
    justify-content: center;
  
    width: 100%;
  
    min-width: 0;
  
    padding: 0;
  
    background: transparent;
  
    perspective: 1200px;
  }
  
  
  .photo-details-media-glow {
    position: absolute;
  
    z-index: 0;
  
    width: 74%;
    height: 56%;
  
    left: 13%;
    top: 22%;
  
    border-radius: 999px;
  
    pointer-events: none;
  
    background:
      rgba(48, 145, 255, 0.15);
  
    filter:
      blur(95px);
  }
  
  
  .photo-details-media img {
    position: relative;
  
    z-index: 1;
  
    display: block;
  
    width: 100%;
  
    max-width: 835px;
  
    height: auto;
  
    margin:
      0
      auto;
  
    object-fit: contain;
  
    background: transparent;
  
    filter:
      drop-shadow(
        0
        30px
        40px
        rgba(0, 0, 0, 0.25)
      );
  
    transform:
      translate3d(0, 0, 0)
      scale(1);
  
    transform-origin:
      center center;
  
    transition:
      transform 540ms
        cubic-bezier(0.22, 1, 0.36, 1),
      filter 540ms
        cubic-bezier(0.22, 1, 0.36, 1);
  }
  
  
  .photo-details-media:hover img {
    transform:
      translate3d(0, -6px, 0)
      scale(1.01);
  
    filter:
      drop-shadow(
        0
        38px
        48px
        rgba(0, 0, 0, 0.30)
      );
  }
  
  
  /* =========================================================
     LIGHT THEME
     ========================================================= */
  
  html[data-theme="light"]
  .photo-details-section {
    --photo-details-heading: #081525;
  
    --photo-details-text:
      rgba(41, 58, 78, 0.69);
  
    --photo-details-strong:
      rgba(23, 43, 65, 0.90);
  
    --photo-details-line:
      rgba(27, 71, 111, 0.10);
  
    --photo-details-card:
      rgba(255, 255, 255, 0.68);
  
    border-top:
      1px solid
      rgba(28, 68, 107, 0.07);
  
    background:
      radial-gradient(
        circle at 78% 44%,
        rgba(61, 162, 255, 0.15),
        transparent 32rem
      ),
      radial-gradient(
        circle at 8% 92%,
        rgba(120, 108, 255, 0.08),
        transparent 30rem
      ),
      linear-gradient(
        135deg,
        #f7fbff 0%,
        #edf6ff 52%,
        #faf9ff 100%
      );
  }
  
  
  html[data-theme="light"]
  .photo-details-eyebrow {
    color: #176cc0;
  }
  
  
  html[data-theme="light"]
  .photo-details-feature {
    box-shadow:
      0 12px 34px
      rgba(42, 74, 110, 0.05);
  }
  
  
  html[data-theme="light"]
  .photo-details-feature:hover {
    background:
      rgba(255, 255, 255, 0.92);
  }
  
  
  html[data-theme="light"]
  .photo-details-feature-icon {
    color: #1975ca;
  
    background:
      rgba(31, 129, 222, 0.08);
  }
  
  
  html[data-theme="light"]
  .photo-details-groups span {
    background:
      rgba(255, 255, 255, 0.64);
  }
  
  
  /* =========================================================
     RESPONSIVE
     ========================================================= */
  
  @media (max-width: 1100px) {
  
    .photo-details-layout {
      grid-template-columns: 1fr;
  
      gap: 46px;
    }
  
  
    .photo-details-copy {
      order: 1;
  
      width:
        min(
          100%,
          760px
        );
  
      margin-inline: auto;
  
      text-align: center;
    }
  
  
    .photo-details-media {
      order: 2;
    }
  
  
    .photo-details-title,
    .photo-details-description {
      margin-left: auto;
  
      margin-right: auto;
    }
  
  
    .photo-details-eyebrow {
      justify-content: center;
    }
  
  
    .photo-details-groups {
      justify-content: center;
    }
  
  
    .photo-details-media img {
      max-width: 940px;
    }
  
  }
  
  
  @media (max-width: 760px) {
  
    .photo-details-section {
      padding:
        66px
        0;
    }
  
  
    .photo-details-section > .container {
      width:
        min(
          calc(100% - 28px),
          1280px
        );
    }
  
  
    .photo-details-layout {
      gap: 34px;
    }
  
  
    .photo-details-title {
      font-size:
        clamp(
          2.35rem,
          10vw,
          3.8rem
        );
    }
  
  
    .photo-details-description {
      margin-top: 18px;
    }
  
  
    .photo-details-feature-list {
      grid-template-columns: 1fr;
  
      text-align: left;
    }
  
  
    .photo-details-media {
      width: 100%;
  
      max-width: 100%;
  
      margin:
        0
        auto;
  
      overflow: visible;
    }
  
  
    .photo-details-media img {
      width: 100%;
  
      max-width: 100%;
  
      height: auto;
  
      margin:
        0
        auto;
    }
  
  }
  
  
  @media (max-width: 580px) {
  
    .photo-details-copy {
      width: 100%;
  
      text-align: left;
    }
  
  
    .photo-details-eyebrow {
      justify-content: flex-start;
    }
  
  
    .photo-details-groups {
      justify-content: flex-start;
    }
  
  
    .photo-details-feature-list {
      margin-top: 23px;
    }
  
  
    .photo-details-media {
      width: 100%;
  
      max-width: 100%;
  
      margin: 0;
  
      padding: 0;
    }
  
  
    .photo-details-media img {
      display: block;
  
      width: 100%;
  
      max-width: 100%;
  
      height: auto;
  
      margin:
        0
        auto;
    }
  
  }

  /* =========================================================
   SETTINGS & EDIT METADATA
   ========================================================= */

.edit-section {
  --edit-heading: #f8fbff;
  --edit-text: rgba(224, 234, 248, 0.70);
  --edit-strong: rgba(239, 246, 255, 0.92);
  --edit-line: rgba(255, 255, 255, 0.10);
  --edit-card: rgba(255, 255, 255, 0.045);

  --edit-pointer-x: 27%;
  --edit-pointer-y: 46%;

  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 23% 43%,
      rgba(45, 153, 255, 0.14),
      transparent 32rem
    ),
    radial-gradient(
      circle at 92% 87%,
      rgba(82, 112, 255, 0.09),
      transparent 30rem
    ),
    linear-gradient(
      140deg,
      #07101b 0%,
      #0a1523 50%,
      #09121f 100%
    );
}


.edit-section::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 0;

  pointer-events: none;

  background:
    radial-gradient(
      620px circle
      at var(--edit-pointer-x)
      var(--edit-pointer-y),
      rgba(41, 158, 255, 0.16),
      rgba(67, 99, 255, 0.05) 34%,
      transparent 72%
    );
}


.edit-section > .container {
  position: relative;

  z-index: 2;

  width:
    min(
      calc(100% - 40px),
      1280px
    );

  max-width: none;

  margin-inline: auto;
}


.edit-decoration {
  position: absolute;

  z-index: 1;

  border-radius: 999px;

  pointer-events: none;

  filter: blur(22px);
}


.edit-decoration-one {
  width: 410px;
  height: 410px;

  left: -250px;
  top: 12%;

  background:
    rgba(30, 151, 255, 0.08);
}


.edit-decoration-two {
  width: 350px;
  height: 350px;

  right: -220px;
  bottom: -80px;

  background:
    rgba(102, 86, 255, 0.08);
}


/* Layout */

.edit-layout {
  display: grid;

  grid-template-columns:
    minmax(520px, 1.16fr)
    minmax(370px, 0.84fr);

  gap:
    clamp(
      48px,
      6vw,
      86px
    );

  align-items: center;
}


/* Image */

.edit-media {
  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  min-width: 0;

  background: transparent;

  perspective: 1200px;
}


.edit-media-glow {
  position: absolute;

  z-index: 0;

  width: 72%;
  height: 55%;

  left: 14%;
  top: 22%;

  border-radius: 999px;

  pointer-events: none;

  background:
    rgba(48, 144, 255, 0.14);

  filter:
    blur(95px);
}


.edit-media img {
  position: relative;

  z-index: 1;

  display: block;

  width: 100%;

  max-width: 820px;

  height: auto;

  margin: 0 auto;

  object-fit: contain;

  background: transparent;

  filter:
    drop-shadow(
      0
      30px
      40px
      rgba(0, 0, 0, 0.25)
    );

  transition:
    transform 540ms
      cubic-bezier(0.22, 1, 0.36, 1),
    filter 540ms
      cubic-bezier(0.22, 1, 0.36, 1);
}


.edit-media:hover img {
  transform:
    translateY(-6px)
    scale(1.01);

  filter:
    drop-shadow(
      0
      38px
      48px
      rgba(0, 0, 0, 0.30)
    );
}


/* Copy */

.edit-copy {
  min-width: 0;
}


.edit-eyebrow {
  margin-bottom: 18px;

  color: #7bc2ff;
}


.edit-eyebrow-icon {
  background:
    linear-gradient(
      135deg,
      #168eff,
      #5c68ef
    );
}


.edit-title {
  max-width: 580px;

  margin: 0;

  color:
    var(--edit-heading);

  font-size:
    clamp(
      2.4rem,
      4.15vw,
      4.45rem
    );

  font-weight: 820;

  line-height: 0.99;

  letter-spacing: -0.052em;
}


.edit-title span {
  color: transparent;

  background:
    linear-gradient(
      105deg,
      #7dc8ff,
      #4b98ff,
      #7975ff
    );

  -webkit-background-clip: text;

  background-clip: text;
}


.edit-description {
  max-width: 590px;

  margin:
    21px
    0
    0;

  color:
    var(--edit-text);

  font-size: 1rem;

  line-height: 1.72;
}


/* Main edit block */

.edit-group {
  margin-top: 25px;

  padding: 15px;

  border:
    1px solid
    var(--edit-line);

  border-radius: 17px;

  background:
    var(--edit-card);

  backdrop-filter:
    blur(14px);
}


.edit-group-heading {
  display: flex;

  align-items: center;

  gap: 11px;

  margin-bottom: 13px;
}


.edit-group-icon {
  display: grid;

  place-items: center;

  flex: 0 0 36px;

  width: 36px;
  height: 36px;

  border-radius: 11px;

  color: #82c7ff;

  background:
    rgba(37, 141, 255, 0.11);

  border:
    1px solid
    rgba(58, 153, 255, 0.13);
}


.edit-group-heading strong {
  display: block;

  color:
    var(--edit-heading);

  font-size: 0.88rem;

  font-weight: 790;
}


.edit-group-heading span {
  display: block;

  margin-top: 2px;

  color:
    var(--edit-text);

  font-size: 0.69rem;
}


.edit-chip-grid {
  display: flex;

  flex-wrap: wrap;

  gap: 6px;
}


.edit-chip-grid span {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  min-height: 31px;

  padding:
    0
    9px;

  border-radius: 9px;

  color:
    var(--edit-strong);

  background:
    rgba(255, 255, 255, 0.055);

  font-size: 0.66rem;

  font-weight: 690;
}


.edit-chip-grid i {
  color: #69b7ff;

  font-size: 0.63rem;
}


/* Smaller feature cards */

.edit-mini-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 9px;

  margin-top: 10px;
}


.edit-mini-card {
  display: flex;

  gap: 10px;

  padding: 13px;

  border:
    1px solid
    var(--edit-line);

  border-radius: 14px;

  background:
    var(--edit-card);

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}


.edit-mini-card:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(76, 167, 255, 0.26);

  background:
    rgba(255, 255, 255, 0.065);
}


.edit-mini-icon {
  display: grid;

  place-items: center;

  flex: 0 0 32px;

  width: 32px;
  height: 32px;

  border-radius: 9px;

  color: #78c0ff;

  background:
    rgba(34, 139, 255, 0.10);

  font-size: 0.72rem;
}


.edit-mini-card h3 {
  margin:
    1px
    0
    4px;

  color:
    var(--edit-heading);

  font-size: 0.79rem;

  font-weight: 770;
}


.edit-mini-card p {
  margin: 0;

  color:
    var(--edit-text);

  font-size: 0.68rem;

  line-height: 1.51;
}


/* Settings summary */

.settings-strip {
  display: flex;

  align-items: flex-start;

  gap: 12px;

  margin-top: 10px;

  padding: 14px;

  border:
    1px solid
    rgba(71, 164, 255, 0.19);

  border-radius: 15px;

  background:
    linear-gradient(
      135deg,
      rgba(33, 142, 255, 0.09),
      rgba(82, 95, 255, 0.06)
    );
}


.settings-strip-icon {
  display: grid;

  place-items: center;

  flex: 0 0 36px;

  width: 36px;
  height: 36px;

  border-radius: 10px;

  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #168cff,
      #556ef5
    );
}


.settings-strip strong {
  color:
    var(--edit-heading);

  font-size: 0.84rem;

  font-weight: 790;
}


.settings-strip p {
  margin:
    4px
    0
    0;

  color:
    var(--edit-text);

  font-size: 0.7rem;

  line-height: 1.53;
}


/* =========================================================
   AI & PROVENANCE
   ========================================================= */

.provenance-section {
  --provenance-heading: #f8fbff;
  --provenance-text: rgba(226, 232, 246, 0.70);
  --provenance-strong: rgba(243, 245, 255, 0.92);
  --provenance-line: rgba(255, 255, 255, 0.10);
  --provenance-card: rgba(255, 255, 255, 0.045);

  --provenance-pointer-x: 75%;
  --provenance-pointer-y: 45%;

  position: relative;

  isolation: isolate;

  overflow: hidden;

  padding:
    clamp(82px, 8vw, 126px)
    0;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.07);

  background:
    radial-gradient(
      circle at 77% 43%,
      rgba(122, 72, 255, 0.15),
      transparent 32rem
    ),
    radial-gradient(
      circle at 7% 85%,
      rgba(34, 142, 255, 0.10),
      transparent 30rem
    ),
    linear-gradient(
      135deg,
      #080b16 0%,
      #111023 52%,
      #0a101c 100%
    );
}


.provenance-section::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 0;

  pointer-events: none;

  background:
    radial-gradient(
      640px circle
      at var(--provenance-pointer-x)
      var(--provenance-pointer-y),
      rgba(127, 71, 255, 0.17),
      rgba(39, 136, 255, 0.055) 35%,
      transparent 72%
    );
}


.provenance-section > .container {
  position: relative;

  z-index: 2;

  width:
    min(
      calc(100% - 40px),
      1280px
    );

  max-width: none;

  margin-inline: auto;
}


.provenance-decoration {
  position: absolute;

  z-index: 1;

  border-radius: 999px;

  pointer-events: none;

  filter: blur(22px);
}


.provenance-decoration-one {
  width: 420px;
  height: 420px;

  right: -240px;
  top: 8%;

  background:
    rgba(124, 72, 255, 0.09);
}


.provenance-decoration-two {
  width: 330px;
  height: 330px;

  left: -210px;
  bottom: -70px;

  background:
    rgba(36, 145, 255, 0.07);
}


.provenance-layout {
  display: grid;

  grid-template-columns:
    minmax(370px, 0.82fr)
    minmax(530px, 1.18fr);

  gap:
    clamp(
      48px,
      6vw,
      86px
    );

  align-items: center;
}


/* Copy */

.provenance-copy {
  min-width: 0;
}


.provenance-eyebrow {
  margin-bottom: 18px;

  color: #b59cff;
}


.provenance-eyebrow-icon {
  background:
    linear-gradient(
      135deg,
      #8d56ff,
      #536df4
    );
}


.provenance-title {
  max-width: 590px;

  margin: 0;

  color:
    var(--provenance-heading);

  font-size:
    clamp(
      2.45rem,
      4.25vw,
      4.55rem
    );

  font-weight: 820;

  line-height: 0.99;

  letter-spacing: -0.052em;
}


.provenance-title span {
  color: transparent;

  background:
    linear-gradient(
      105deg,
      #ba99ff,
      #8e6dff,
      #5ba9ff
    );

  -webkit-background-clip: text;

  background-clip: text;
}


.provenance-description {
  max-width: 600px;

  margin:
    22px
    0
    0;

  color:
    var(--provenance-text);

  font-size: 1rem;

  line-height: 1.72;
}


/* Features */

.provenance-feature-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 9px;

  margin-top: 27px;
}


.provenance-feature {
  display: flex;

  align-items: flex-start;

  gap: 10px;

  padding: 13px;

  border:
    1px solid
    var(--provenance-line);

  border-radius: 14px;

  background:
    var(--provenance-card);

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}


.provenance-feature:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(146, 108, 255, 0.26);

  background:
    rgba(255, 255, 255, 0.066);
}


.provenance-feature-icon {
  display: grid;

  place-items: center;

  flex: 0 0 33px;

  width: 33px;
  height: 33px;

  border-radius: 10px;

  font-size: 0.72rem;
}


.provenance-purple {
  color: #c4a6ff;

  background:
    rgba(143, 86, 255, 0.12);
}


.provenance-blue {
  color: #75c0ff;

  background:
    rgba(46, 146, 255, 0.11);
}


.provenance-violet {
  color: #c38dff;

  background:
    rgba(163, 83, 255, 0.11);
}


.provenance-intelligence {
  color: #64c6ff;

  background:
    linear-gradient(
      135deg,
      rgba(38, 148, 255, 0.13),
      rgba(124, 74, 255, 0.12)
    );
}


.provenance-feature h3 {
  margin:
    1px
    0
    4px;

  color:
    var(--provenance-heading);

  font-size: 0.8rem;

  font-weight: 780;
}


.provenance-feature p {
  margin: 0;

  color:
    var(--provenance-text);

  font-size: 0.68rem;

  line-height: 1.52;
}


/* Evidence warning */

.provenance-note {
  display: flex;

  align-items: flex-start;

  gap: 10px;

  margin-top: 11px;

  padding: 13px;

  border:
    1px solid
    rgba(157, 122, 255, 0.18);

  border-radius: 14px;

  background:
    rgba(128, 79, 255, 0.055);
}


.provenance-note > i {
  margin-top: 3px;

  color: #a98bff;

  font-size: 0.76rem;
}


.provenance-note p {
  margin: 0;

  color:
    var(--provenance-text);

  font-size: 0.69rem;

  line-height: 1.53;
}


/* Image */

.provenance-media {
  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  min-width: 0;

  background: transparent;
}


.provenance-media-glow {
  position: absolute;

  z-index: 0;

  width: 72%;
  height: 55%;

  left: 14%;
  top: 22%;

  border-radius: 999px;

  pointer-events: none;

  background:
    rgba(126, 75, 255, 0.15);

  filter:
    blur(100px);
}


.provenance-media img {
  position: relative;

  z-index: 1;

  display: block;

  width: 100%;

  max-width: 830px;

  height: auto;

  margin: 0 auto;

  object-fit: contain;

  background: transparent;

  filter:
    drop-shadow(
      0
      32px
      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);
}


.provenance-media:hover img {
  transform:
    translateY(-6px)
    scale(1.01);

  filter:
    drop-shadow(
      0
      40px
      50px
      rgba(0, 0, 0, 0.34)
    );
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.exif-final-cta {
  position: relative;

  padding:
    clamp(70px, 7vw, 104px)
    0;

  overflow: hidden;

  background:
    #060d17;
}


.exif-final-cta > .container {
  width:
    min(
      calc(100% - 40px),
      1180px
    );

  max-width: none;

  margin-inline: auto;
}


.exif-final-card {
  position: relative;

  isolation: isolate;

  overflow: hidden;

  display: grid;

  grid-template-columns:
    1fr
    auto;

  gap: 42px;

  align-items: center;

  padding:
    clamp(30px, 4vw, 52px);

  border:
    1px solid
    rgba(255, 255, 255, 0.11);

  border-radius: 30px;

  background:
    linear-gradient(
      135deg,
      rgba(20, 112, 218, 0.19),
      rgba(87, 75, 232, 0.14)
    );

  box-shadow:
    0
    30px
    90px
    rgba(0, 0, 0, 0.30);
}


.exif-final-glow {
  position: absolute;

  z-index: -1;

  border-radius: 999px;

  filter: blur(70px);

  pointer-events: none;
}


.exif-final-glow-one {
  width: 350px;
  height: 350px;

  left: -100px;
  top: -160px;

  background:
    rgba(27, 150, 255, 0.24);
}


.exif-final-glow-two {
  width: 320px;
  height: 320px;

  right: -80px;
  bottom: -180px;

  background:
    rgba(116, 78, 255, 0.20);
}


.exif-final-kicker {
  display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 12px;

  color: #83c6ff;

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.exif-final-copy h2 {
  max-width: 700px;

  margin: 0;

  color: #ffffff;

  font-size:
    clamp(
      2.25rem,
      4.4vw,
      4.3rem
    );

  font-weight: 820;

  line-height: 0.98;

  letter-spacing: -0.05em;
}


.exif-final-copy h2 span {
  color: transparent;

  background:
    linear-gradient(
      105deg,
      #88ceff,
      #589dff,
      #967cff
    );

  -webkit-background-clip: text;

  background-clip: text;
}


.exif-final-copy > p {
  max-width: 680px;

  margin:
    18px
    0
    0;

  color:
    rgba(229, 237, 249, 0.70);

  font-size: 0.97rem;

  line-height: 1.68;
}


.exif-final-platforms {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 18px;
}


.exif-final-platforms span {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  min-height: 32px;

  padding:
    0
    10px;

  border:
    1px solid
    rgba(255, 255, 255, 0.10);

  border-radius: 999px;

  color:
    rgba(239, 246, 255, 0.84);

  background:
    rgba(255, 255, 255, 0.045);

  font-size: 0.68rem;

  font-weight: 700;
}


.exif-final-platforms i {
  color: #75beff;
}


/* CTA button */

.exif-final-action {
  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 12px;
}


.exif-final-store-button {
  display: flex;

  align-items: center;

  gap: 12px;

  min-width: 218px;

  padding:
    13px
    20px;

  border-radius: 15px;

  color: #07111e;

  background: #ffffff;

  text-decoration: none;

  box-shadow:
    0
    18px
    46px
    rgba(0, 0, 0, 0.25);

  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}


.exif-final-store-button:hover {
  color: #07111e;

  transform:
    translateY(-3px);

  background: #f4f7fb;

  box-shadow:
    0
    24px
    56px
    rgba(0, 0, 0, 0.32);
}


.exif-final-store-button > i {
  font-size: 1.7rem;
}


.exif-final-store-button > span {
  display: flex;

  flex-direction: column;

  line-height: 1.04;
}


.exif-final-store-button small {
  font-size: 0.63rem;

  opacity: 0.70;
}


.exif-final-store-button strong {
  font-size: 1rem;

  font-weight: 800;
}


.exif-final-private {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  color:
    rgba(230, 240, 251, 0.66);

  font-size: 0.68rem;

  font-weight: 680;
}


.exif-final-private i {
  color: #69baff;
}


/* =========================================================
   LIGHT THEME — EDIT
   ========================================================= */

html[data-theme="light"]
.edit-section {
  --edit-heading: #081525;
  --edit-text: rgba(41, 58, 78, 0.69);
  --edit-strong: rgba(23, 43, 65, 0.90);
  --edit-line: rgba(27, 71, 111, 0.10);
  --edit-card: rgba(255, 255, 255, 0.66);

  background:
    radial-gradient(
      circle at 23% 43%,
      rgba(63, 164, 255, 0.15),
      transparent 32rem
    ),
    linear-gradient(
      140deg,
      #f7fbff,
      #eef6ff 52%,
      #faf9ff
    );
}


html[data-theme="light"]
.edit-feature,
html[data-theme="light"]
.edit-group,
html[data-theme="light"]
.edit-mini-card {
  box-shadow:
    0
    12px
    32px
    rgba(42, 74, 110, 0.05);
}


html[data-theme="light"]
.edit-mini-card:hover {
  background:
    rgba(255, 255, 255, 0.92);
}


html[data-theme="light"]
.edit-chip-grid span {
  background:
    rgba(28, 112, 196, 0.065);
}


/* =========================================================
   LIGHT THEME — PROVENANCE
   ========================================================= */

html[data-theme="light"]
.provenance-section {
  --provenance-heading: #101523;
  --provenance-text: rgba(47, 56, 77, 0.69);
  --provenance-strong: rgba(25, 34, 53, 0.91);
  --provenance-line: rgba(59, 51, 104, 0.10);
  --provenance-card: rgba(255, 255, 255, 0.68);

  background:
    radial-gradient(
      circle at 76% 44%,
      rgba(128, 98, 255, 0.14),
      transparent 32rem
    ),
    radial-gradient(
      circle at 7% 87%,
      rgba(55, 155, 255, 0.10),
      transparent 29rem
    ),
    linear-gradient(
      135deg,
      #faf9ff,
      #f3f2ff 50%,
      #f7fbff
    );
}


html[data-theme="light"]
.provenance-feature {
  box-shadow:
    0
    12px
    32px
    rgba(62, 55, 100, 0.05);
}


html[data-theme="light"]
.provenance-feature:hover {
  background:
    rgba(255, 255, 255, 0.94);
}


/* =========================================================
   LIGHT THEME — CTA
   ========================================================= */

html[data-theme="light"]
.exif-final-cta {
  background:
    #f4f8fd;
}


html[data-theme="light"]
.exif-final-card {
  border-color:
    rgba(35, 77, 118, 0.10);

  background:
    linear-gradient(
      135deg,
      rgba(224, 242, 255, 0.92),
      rgba(236, 232, 255, 0.88)
    );

  box-shadow:
    0
    28px
    70px
    rgba(47, 76, 108, 0.10);
}


html[data-theme="light"]
.exif-final-copy h2 {
  color: #081525;
}


html[data-theme="light"]
.exif-final-copy > p {
  color:
    rgba(41, 58, 78, 0.68);
}


html[data-theme="light"]
.exif-final-platforms span {
  color: #29415a;

  border-color:
    rgba(28, 70, 107, 0.10);

  background:
    rgba(255, 255, 255, 0.54);
}


html[data-theme="light"]
.exif-final-private {
  color:
    rgba(36, 56, 76, 0.67);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

  .edit-layout,
  .provenance-layout {
    grid-template-columns: 1fr;

    gap: 46px;
  }


  .edit-media {
    order: 1;
  }


  .edit-copy {
    order: 2;
  }


  .edit-copy,
  .provenance-copy {
    width:
      min(
        100%,
        760px
      );

    margin-inline: auto;

    text-align: center;
  }


  .edit-title,
  .edit-description,
  .provenance-title,
  .provenance-description {
    margin-left: auto;

    margin-right: auto;
  }


  .edit-eyebrow,
  .provenance-eyebrow {
    justify-content: center;
  }


  .provenance-copy {
    order: 1;
  }


  .provenance-media {
    order: 2;
  }


  .edit-media img,
  .provenance-media img {
    max-width: 940px;
  }

}


@media (max-width: 760px) {

  .edit-section,
  .provenance-section {
    padding:
      66px
      0;
  }


  .edit-section > .container,
  .provenance-section > .container {
    width:
      min(
        calc(100% - 28px),
        1280px
      );
  }


  .edit-title,
  .provenance-title {
    font-size:
      clamp(
        2.35rem,
        10vw,
        3.8rem
      );
  }


  .edit-mini-grid,
  .provenance-feature-grid {
    grid-template-columns: 1fr;

    text-align: left;
  }


  .edit-media,
  .provenance-media {
    width: 100%;

    max-width: 100%;
  }


  .edit-media img,
  .provenance-media img {
    width: 100%;

    max-width: 100%;

    height: auto;
  }


  .exif-final-card {
    grid-template-columns: 1fr;

    gap: 28px;
  }


  .exif-final-action {
    align-items: flex-start;
  }

}


@media (max-width: 580px) {

  .edit-copy,
  .provenance-copy {
    width: 100%;

    text-align: left;
  }


  .edit-eyebrow,
  .provenance-eyebrow {
    justify-content: flex-start;
  }


  .edit-group {
    margin-top: 23px;
  }


  .exif-final-cta > .container {
    width:
      calc(100% - 28px);
  }


  .exif-final-card {
    padding: 24px;

    border-radius: 22px;
  }


  .exif-final-store-button {
    width: 100%;

    justify-content: center;
  }


  .exif-final-action {
    width: 100%;
  }

}