/* Local font files */
    @font-face{
      font-family:"HelveticaNeueLocal";
      src:url("fonts/helveticaroman.otf") format("opentype");
      font-weight:700; font-style:normal; font-display:swap;
    }
    @font-face{
      font-family:"TimesCondensedLocal";
      src:url("fonts/timescondensed.otf") format("opentype");
      font-weight:400; font-style:normal; font-display:swap;
    }

    :root{
      --bg:#000; --fg:#fff;

      /* desktop left/right page padding */
      --pagePad:6vw;

      /* image tilt/scale */
      --tiltA:-6deg; --tiltB:6deg; --tiltC:-8deg;

      /* ring spacing around copy */
      --ringGap: clamp(8px, 1.2vw, 16px);

      /* how far to pull the right stack of images toward the text */
      --stackShift: clamp(-160px, -9vw, -48px);

      /* how much to lift pic4 so its top is slightly cropped */
      --pic4Lift: clamp(22px, 8vh, 70px);

      /* extra nudge for pic3 so it doesn't overlap headline */
      --pic3ShiftAdjust: clamp(48px, 6vw, 120px);
    }

    *{box-sizing:border-box}
    html,body{
      height:100%; margin:0;
      background:var(--bg); color:var(--fg);
      font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
      overflow:hidden; /* one-page desktop; relaxed on mobile */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .frame{ height:100%; width:100%; padding-inline:var(--pagePad); display:flex; }
    .page{ display:flex; height:100%; width:100%; }

    /* === Desktop layout === */
    .left{
      flex:0 0 75%; height:100%; position:relative;
      display:grid;
      grid-template-columns: minmax(260px, 1fr) 1.15fr minmax(260px, 1fr);
      grid-template-rows: 1fr auto 1fr;
      gap:var(--ringGap);
      align-items:center; justify-items:center;
      padding-block: clamp(16px, 3vh, 32px);
    }
    .right{ flex:0 0 25%; height:100%; overflow:hidden; background:#000; }

    .hero-video{ 
      width:100%; height:100%; object-fit:contain; object-position:center; 
      pointer-events:none; display:block; background:#000; 
    }

    .hero{ grid-column:2; grid-row:2; width:min(560px, 42vw); z-index:5; text-align:left; position:relative; }

    /* App icon + corner-overlap pic2 */
    .appicon-wrap{ position:relative; display:inline-block; }
    .appicon-bg{
      position:absolute; top:-110px; left:-110px; width:288px; height:192px; object-fit:cover; border-radius:14px;
      box-shadow:0 12px 40px rgba(0,0,0,.55); opacity:.95; z-index:2; user-select:none; pointer-events:none;
      --tx:0px; --ty:0px; --rot:var(--tiltA); transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); transform-origin:center center;
    }
    .appicon{
      position:relative; z-index:6; width:140px; height:140px; object-fit:cover; border-radius:30px;
      box-shadow: 0 0 0 1px rgba(255,255,255,.95), 0 8px 28px rgba(0,0,0,.55);
      transform:translate(12px,20px); background:#000;
    }

    /* Fonts per request (desktop) */
    .subhead{ margin:18px 0 6px 0; font-family:"HelveticaNeueLocal","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:700; font-size:30px; letter-spacing:.02em; opacity:.9; }
    .headline{
      font-family:"TimesCondensedLocal","Times New Roman MT Condensed","Times New Roman",Times,serif;
      font-size:80px; line-height:1.02; font-weight:400; font-stretch:condensed; margin:0 0 14px 0; position:relative; z-index:7;
    }
    .headline .amp{ display:inline-block }

    /* Store badge + corner-overlap pic5 */
    .store-wrap{ 
      position:relative; display:inline-block; 
      /* Variables power consistent press on desktop + mobile */
      --store-x: 22px; 
      --store-y: -10px; 
      --press-offset: 4px;
    }
    .store-bg{
      position:absolute; top:24px; left:-112px; width:312px; height:204px; object-fit:cover; border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.55);
      opacity:.95; z-index:2; user-select:none; pointer-events:none;
      --tx:0px; --ty:0px; --rot:var(--tiltB); transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); transform-origin:center center;
    }

    /* Press-down effect */
    .store-link{ display:inline-block; position:relative; cursor:pointer; -webkit-tap-highlight-color: transparent; }
    .store-badge{ 
      position:relative; z-index:6; width:200px; height:auto; display:block; 
      transform: translate(var(--store-x), var(--store-y));
      filter: drop-shadow(0 8px 24px rgba(0,0,0,.55));
      transition: transform 120ms cubic-bezier(.2,.7,.2,1), filter 120ms ease;
    }
    .store-badge:hover{ transform: translate(var(--store-x), var(--store-y)); }
    .store-link:active .store-badge,
    .store-link.is-pressed .store-badge{
      transform: translate(var(--store-x), calc(var(--store-y) + var(--press-offset)));
      filter: drop-shadow(0 4px 12px rgba(0,0,0,.45));
    }

    /* Additional links section */
    .additional-links {
      margin-top: 4px;
      position: relative;
      z-index: 7;
      margin-left: 100px;
    }
    
    .additional-links a {
      display: block;
      font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 11px;
      color: rgba(255,255,255,0.85);
      text-decoration: underline;
      margin-bottom: 4px;
      transition: color 0.2s ease;
      line-height: 1.4;
    }
    
    .additional-links a:hover {
      color: #fff;
    }

    /* Ring photos on outskirts */
    .ring{
      width: clamp(220px, 28vw, 360px);
      aspect-ratio: 3 / 2;
      border-radius:16px;
      object-fit:cover;
      box-shadow:0 14px 48px rgba(0,0,0,.6);
      user-select:none; pointer-events:none; z-index:3; position:relative; transform-origin:center center;
    }

    .tl { grid-column:1; grid-row:1; --tx:22px; --ty:-12px; --rot:var(--tiltA); transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); }
    .ml { grid-column:1; grid-row:2; --tx:28px; --ty:14px; --rot:var(--tiltC); transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); }

    /* RIGHT stack — pulled left toward the text */
    .tr { grid-column:3; grid-row:1; --tx: var(--stackShift); --ty: calc(-1 * var(--pic4Lift)); --rot: var(--tiltB); transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); }
    .mr { grid-column:3; grid-row:2; --tx: calc(var(--stackShift) + var(--pic3ShiftAdjust)); --ty: 0px; --rot: var(--tiltB); transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); }
    .br { grid-column:3; grid-row:3; --tx: var(--stackShift); --ty: 0px; --rot: var(--tiltA); transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); }

    /* Burst animation for surrounding images */
    @keyframes burstOut {
      0%   { transform: translate(calc(var(--tx) * .12), calc(var(--ty) * .12)) rotate(var(--rot)) scale(.86); opacity:0; filter: blur(6px); }
      60%  { transform: translate(calc(var(--tx) * 1.05), calc(var(--ty) * 1.05)) rotate(var(--rot)) scale(1.03); opacity:1; filter: blur(0px); }
      100% { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(1); opacity:1; filter:none; }
    }
    .burst { animation: burstOut 900ms cubic-bezier(.18,.72,.2,1.02) both; animation-delay: var(--delay, 0ms); will-change: transform, opacity, filter; }
    @media (prefers-reduced-motion: reduce) { .burst { animation: none; } }

    /* Footer (matches page padding & uses Roboto Mono 11px) */
    .footer{
      position:fixed; left:0; right:0; bottom:0; padding:10px var(--pagePad);
      display:flex; justify-content:flex-end; align-items:center; gap:10px;
      font-family:"Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size:11px; color:rgba(255,255,255,0.85); z-index:999; background:transparent; pointer-events:auto;
    }
    /* Always underline footer links */
    .footer a{ 
      color:rgba(255,255,255,0.85); 
      text-decoration: underline;
      transition: color 0.2s ease; 
    }
    .footer a:hover{ color:#fff; }

    /* Subtle grain */
    .grain{ position:fixed; inset:0; pointer-events:none; opacity:.04; background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/></filter><rect width="160" height="160" filter="url(%23n)" opacity="0.25"/></svg>') repeat; }

    img{max-width:100%}
    ::-webkit-scrollbar{display:none}

    /* Mobile gallery styles - images surrounding content */
    .mobile-gallery{
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
    }
    
    .gallery-item{
      position: absolute;
      width: clamp(140px, 35vw, 200px);
      height: clamp(95px, 23vw, 133px);
      border-radius: 12px;
      object-fit: cover;
      box-shadow: 0 8px 24px rgba(0,0,0,0.5);
      opacity: 0.9;
      z-index: 1;
    }
    
    /* Position images around the content - allow cutoff */
    .gallery-item:nth-child(1){ top: 10%; left: -15%; transform: rotate(-15deg); }
    .gallery-item:nth-child(2){ top: 5%; right: -20%; transform: rotate(12deg); }
    .gallery-item:nth-child(3){ top: 45%; left: -25%; transform: rotate(-8deg); }
    .gallery-item:nth-child(4){ top: 50%; right: -15%; transform: rotate(18deg); }
    .gallery-item:nth-child(5){ bottom: 15%; left: 50%; transform: translateX(-50%) rotate(-5deg); }

    /* ===================== Responsive ===================== */
    @media (max-width: 1200px){
      .hero{ width:min(560px, 54vw); }
      .headline{ font-size: clamp(56px, 6.2vw, 80px); }
      .store-badge{ width:190px; }
      .appicon{ width:130px; height:130px; }
      .right{ flex-basis:32%; }
      .left{ flex-basis:68%; }
      .ring{ width: clamp(210px, 26vw, 340px); }
      .left{ grid-template-columns: minmax(240px, 1fr) 1.1fr minmax(240px, 1fr); }
    }

    /* Tablets */
    @media (max-width: 960px){
      .frame{ padding-inline: clamp(16px, 4vw, 36px); }
      .left{ grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; }
      .hero{ grid-column:1 / -1; grid-row:2; width:min(640px, 90%); margin-inline:auto; text-align:center; }
      .subhead{ font-size: clamp(20px, 2.6vw, 28px); }
      .headline{ font-size: clamp(48px, 8vw, 72px); line-height: 1.04; }
      .tr{ grid-column:2; grid-row:1; --tx: 12px; --ty: -12px; }
      .mr{ grid-column:2; grid-row:3; --tx: 18px; --ty: 8px; }
      .tl{ grid-column:1; grid-row:1; --tx: -10px; --ty: -6px; }
      .ml{ grid-column:1; grid-row:3; --tx: -6px; --ty: 10px; }
      .ring{ width: clamp(200px, 44vw, 320px); }
      .store-wrap, .appicon-wrap{ display:inline-block; }
      .appicon{ transform: translate(0, 0); }
      .appicon-bg{ top:-80px; left:-80px; width:240px; height:160px; }
      .store-bg{ left:-84px; width:260px; height:170px; }
      .additional-links { margin-left: 0; text-align: center; }
    }

    /* Phones */
    @media (max-width: 700px){
      html,body{ height:auto; overflow:auto; }
      .page{ flex-direction:column; height:auto; min-height:100vh; }
      .left, .right{ flex: 0 0 auto; height:auto; }
      .left{ 
        display:flex; 
        align-items: center;
        justify-content: center;
        padding: clamp(20px, 6vw, 40px) clamp(16px, 4vw, 24px); 
        background: linear-gradient(180deg, #000 0%, #0a0a0a 100%);
        position: relative;
        min-height: 70vh;
        overflow: hidden;
      }
      .ring{ display: none; }
      .mobile-gallery{ display: block; }
      .hero{ 
        width:100%; max-width: 320px; margin: 0 auto; 
        padding: clamp(30px, 7vw, 50px) clamp(20px, 5vw, 30px); 
        text-align:center; 
        position: relative;
        z-index: 10;
        background: rgba(0,0,0,0.7);
        border-radius: 20px;
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255,255,255,0.1);
      }
      .subhead{ font-size: clamp(18px, 4.6vw, 24px); margin: 12px 0 8px; opacity: 0.95; letter-spacing: 0.01em; }
      .headline{ font-size: clamp(36px, 10.5vw, 52px); line-height: 1.08; margin-bottom: clamp(16px, 4vw, 24px); letter-spacing: -0.01em; }
      .appicon-wrap{ margin-bottom: clamp(16px, 4vw, 24px); }
      .appicon{ 
        width: clamp(100px, 25vw, 128px); 
        height: clamp(100px, 25vw, 128px); 
        border-radius: clamp(22px, 6vw, 30px);
        transform: none;
        box-shadow: 0 0 0 1px rgba(255,255,255,.9), 0 12px 36px rgba(0,0,0,.7);
      }
      .appicon-bg{ display: none; }
      .store-wrap{ --store-x: 0px; --store-y: 0px; --press-offset: 3px; margin-top: clamp(12px, 3vw, 20px); }
      .store-badge{ width: clamp(160px, 40vw, 200px); }
      .store-bg{ display: none; }
      .additional-links { margin-left: 0; text-align: center; margin-top: 12px; }
      .right{ 
        width:100%; 
        background: linear-gradient(180deg, #0a0a0a 0%, #000 100%);
        padding: clamp(20px, 5vw, 32px) clamp(16px, 4vw, 24px) clamp(24px, 6vw, 40px);
      }
      .hero-video{ 
        width:100%; 
        height: auto;
        aspect-ratio: 9/16;
        min-height: 400px;
        max-height: 70vh;
        border-radius: 16px;
        box-shadow: 0 16px 48px rgba(0,0,0,0.6);
        object-fit: contain; 
        background: #000;
      }
      .footer{ 
        position:static; 
        padding: clamp(20px, 5vw, 32px) clamp(16px, 4vw, 24px); 
        justify-content:center; 
        flex-wrap:wrap; 
        gap: clamp(12px, 3vw, 20px); 
        background: linear-gradient(180deg, #000 0%, #0a0a0a 100%);
        border-top: 1px solid rgba(255,255,255,0.1);
        text-align: center;
      }
      .footer .copyright{ 
        order:0; 
        width: 100%; 
        margin-bottom: 8px; 
        font-size: clamp(10px, 2.8vw, 12px);
      }
      .footer a{ 
        font-size: clamp(10px, 2.8vw, 12px);
        padding: 8px 12px;
        border-radius: 6px;
        transition: background-color 0.2s ease, color 0.2s ease;
        text-decoration: underline; /* keep underlined on mobile too */
      }
      .footer a:hover{ background-color: rgba(255,255,255,0.1); }
    }

    /* Small phones */
    @media (max-width: 380px){
      .headline{ font-size: clamp(32px, 11.5vw, 42px); }
      .appicon{ width: clamp(90px, 23vw, 110px); height: clamp(90px, 23vw, 110px); }
      .store-badge{ width: clamp(150px, 38vw, 180px); }
      .gallery-item{ width: clamp(120px, 32vw, 160px); height: clamp(80px, 21vw, 107px); }
      .hero-video{ aspect-ratio: 9/16; min-height: 350px; max-height: 60vh; }
      .left{ padding: clamp(16px, 5vw, 28px) clamp(12px, 3vw, 20px); }
      .right{ padding: clamp(16px, 4vw, 24px) clamp(12px, 3vw, 20px) clamp(20px, 5vw, 28px); }
    }

    /* Landscape phones */
    @media (max-width: 700px) and (orientation: landscape) and (max-height: 500px) {
      .page{ flex-direction: row; }
      .left{ flex: 1 1 60%; padding: 16px; display: flex; align-items: center; justify-content: center; }
      .right{ flex: 1 1 40%; }
      .mobile-gallery{ display: none; }
      .hero{ padding: 12px 0; }
      .headline{ font-size: clamp(28px, 6vw, 40px); margin-bottom: 12px; }
      .subhead{ font-size: clamp(14px, 3vw, 18px); margin: 8px 0 4px; }
      .appicon{ width: 80px; height: 80px; border-radius: 18px; }
      .store-badge{ width: 140px; }
      .additional-links { margin-top: 8px; }
      .additional-links a { font-size: 10px; margin-bottom: 2px; }
      .hero-video{ height: 100%; border-radius: 0; }
      .footer{ display: none; }
    }

    /* Touch-friendly + perf */
    @media (max-width: 700px) {
      .footer a{ min-height: 44px; display: flex; align-items: center; justify-content: center; }
      .hero, .ring, .appicon-bg, .store-bg{ 
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
      .mobile-gallery{ -webkit-transform: translateZ(0); transform: translateZ(0); }
    }

    /* HiDPI tweak */
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .hero-video, .ring, .appicon, .gallery-item{
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
      }
    }

    /* Dark mode support */
    @media (prefers-color-scheme: dark) {
      :root{ --bg:#000; --fg:#fff; }
    }

    /* Safe area insets */
    @supports (padding: max(0px)) {
      .frame{ padding-left: max(var(--pagePad), env(safe-area-inset-left)); padding-right: max(var(--pagePad), env(safe-area-inset-right)); }
      @media (max-width: 700px) {
        .left{ padding-top: max(clamp(20px, 6vw, 40px), env(safe-area-inset-top)); }
        .footer{ padding-bottom: max(clamp(20px, 5vw, 32px), env(safe-area-inset-bottom)); }
      }
    }