:root{
    --bg:#0a0a0a; --bg2:#140000; --red:#ff1a1a; --red2:#e00000; --text:#eaeaea;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{margin:0;background:radial-gradient(1200px 800px at 50% 50%,var(--bg2) 0%,var(--bg) 65%);color:var(--text);font-family:Montserrat,system-ui,sans-serif;overflow-x:hidden}
  body.no-scroll{overflow:hidden;height:100vh}

  .container{min-height:100vh;display:grid;place-items:center;position:relative}

  /* INTRO SECTION */
  .intro{width:min(1400px,94vw);display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:center}
  .intro .photo{
    width:100%;aspect-ratio: 4 / 5; background:linear-gradient(135deg,#1a0000,#000);border-radius:16px;position:relative;overflow:hidden;
    box-shadow:0 20px 60px rgba(255,0,0,.15), 0 0 0 2px #300 inset;
    display:flex;align-items:center;justify-content:center
  }
  .intro .photo img{width:100%;height:100%;object-fit:cover;opacity:.95;filter:contrast(1.05) saturate(1.15)}
  /* subtle idle ease-in-out float */
  .intro .photo{animation: floatY 3.6s ease-in-out infinite}
  @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

  .intro .text{
    font-size:clamp(22px,3vw,34px);line-height:1.55;position:relative;font-family:"Share Tech Mono",monospace
  }
  .typewriter{
    display:inline-block;white-space:pre-wrap;border-right:2px solid var(--red);padding-right:6px;animation: caret 700ms steps(1) infinite
  }
  @keyframes caret{50%{border-color:transparent}}

  /* Glitch effect overlay */
  .glitch{position:relative;display:inline-block}
  .glitch::before,.glitch::after{
    content:attr(data-text);position:absolute;left:0;top:0;color:var(--red);mix-blend-mode:screen;clip-path:polygon(0 0,100% 0,100% 35%,0 35%);
    opacity:0;filter:brightness(1.4)
  }
  .glitch::after{clip-path:polygon(0 65%,100% 65%,100% 100%,0 100%)}
  .glitch-active::before{animation: g1 1000ms steps(12) infinite}
  .glitch-active::after{animation: g2 1000ms steps(12) infinite}
  @keyframes g1{0%{transform:translate(0,0)}20%{transform:translate(-2px,-1px)}40%{transform:translate(2px,1px)}60%{transform:translate(-1px,2px)}80%{transform:translate(1px,-2px)}100%{transform:translate(0,0)} }
  @keyframes g2{0%{transform:translate(0,0)}20%{transform:translate(2px,1px)}40%{transform:translate(-2px,-1px)}60%{transform:translate(1px,-2px)}80%{transform:translate(-1px,2px)}100%{transform:translate(0,0)} }

  /* Generic glitchy shake for any element (works for non-text too) */
  .glitch-anim{animation: gShake 1000ms steps(12)}
  @keyframes gShake{
    0%{transform:translate(0,0)}
    20%{transform:translate(-2px,1px)}
    40%{transform:translate(2px,-1px)}
    60%{transform:translate(-1px,-2px)}
    80%{transform:translate(1px,2px)}
    100%{transform:translate(0,0)}
  }

  .hidden{display:none}

  /* MAIN SECTION */
  .main{width:100%;min-height:100vh;display:grid;place-items:start center;position:relative;padding-top:clamp(24px,6vh,80px)}
  .headline{
    position:relative;text-align:center;width:100%
  }
  .headline .title{
    font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:transparent;
    -webkit-text-stroke: 2px rgba(255,26,26,.75); 
    font-size: clamp(42px, 12vw, 200px);
    text-shadow: 0 0 24px rgba(255,0,0,.25), 0 0 4px rgba(255,0,0,.8);
    /* Smooth transitions for scroll animation */
    transition: font-size 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    /* Ensure text stays centered when size changes */
    text-align: center;
    width: 100%;
    display: block;
    margin: 0 auto;
    transform-origin: center center;
  }
  .headline .overlay-img{
    position:absolute;left:50%;top:130%;transform:translate(-50%,-50%);display:grid;place-items:center;pointer-events:none;overflow:visible;width:100%;
  }
  .headline .overlay-img img{
    width:60vw;max-width:none;height:auto;display:block;margin:0 auto;
    /* Soft dark outline + subtle red glow */
    filter:
      drop-shadow(0 0 14px rgba(0,0,0,.65))
      drop-shadow(0 6px 28px rgba(0,0,0,.55))
      drop-shadow(0 0 3px rgba(0,0,0,.85))
      drop-shadow(0 16px 60px rgba(255,0,0,.22));
    /* Smooth transitions for scroll animation */
    opacity: 1;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    /* Keep original size - no initial scaling */
    transform: scale(1);
  }

  /* Hands background image styling */
  .headline .overlay-img .hands-bg{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(var(--hands-scale, 1.2));
    opacity: 0.5;
    z-index: 1;
    animation: handsSpin 8s linear infinite;
    /* Same size as ydz2 image */
    width: 60vw;
    max-width: none;
    height: auto;
    display: block;
    /* Smooth transitions for scroll animation */
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Ensure ydz2 image stays on top */
  .headline .overlay-img img:not(.hands-bg){
    position: relative;
    z-index: 2;
  }

  /* Spinning animation for hands - combines rotation with scale from CSS variable */
  @keyframes handsSpin{
    0% { transform: translate(-50%, -50%) scale(var(--hands-scale, 1.2)) rotate(0deg); }
    100% { transform: translate(-50%, -50%) scale(var(--hands-scale, 1.2)) rotate(360deg); }
  }

  /* Scroll arrows */
  .scroll-indicators{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
  .arrow{
    display:grid;place-items:center;width:64px;height:160px;opacity:.85;animation: bob 2.2s ease-in-out infinite
  }
  .arrow svg{width:44px;height:44px;filter:drop-shadow(0 0 12px rgba(255,0,0,.5))}
  .arrow svg polygon{fill:var(--red)}
  .arrow.left{margin-left:16px}
  .arrow.right{margin-right:16px}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
  .pulse polygon{animation:pulse 1.4s ease-in-out infinite}
  @keyframes pulse{0%,100%{fill:var(--red)}50%{fill:var(--red2)}}
  .scroll-indicators.fade-out{opacity:0;transition: opacity 400ms ease}

  /* About section */
  .about{position:relative;width:100%;min-height:60vh;margin-top:120px;display:grid;place-items:center}
  .about-inner{width:min(1200px,92vw);margin:0 auto;position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;justify-items:center}
  .about .center{z-index:3;position:relative;text-align:center;grid-column:2;justify-self:center}
  .about-text{font-family:"Share Tech Mono",monospace;font-size:clamp(22px,3vw,36px);letter-spacing:.03em}
  .about .side{opacity:.9; position:absolute; top:50%; z-index:2}
  .about .side.left{ left:0; transform: translate(-55%,-50%); }
  .about .side.right{ right:0; transform: translate(55%,-50%); }
  .about .icon{width:min(32vw,420px);height:auto;filter:drop-shadow(0 8px 30px rgba(0,0,0,.6));fill:#111}
  .about .left .icon-news{transform:rotate(-40deg)}
  /* Newspaper hover tilt */
  .about .left .news-link{display:inline-block}
  .about .left .news-link .icon-news{transition: transform 180ms ease}
  .about .left .news-link:hover .icon-news{transform:rotate(-46deg) translateY(-4px)}
  
  /* Newspaper text with arrow */
  .newspaper-text{
    position:absolute;
    top:-70px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    opacity:0;
    transition:opacity 400ms ease-in;
    pointer-events:none;
    z-index:10;
  }
  .newspaper-text.show{
    opacity:1;
  }
  .newspaper-arrow{
    width:24px;
    height:24px;
    filter:drop-shadow(0 0 8px rgba(255,0,0,.4));
  }
  .newspaper-arrow .arrow-svg{
    width:100%;
    height:100%;
    transform:rotate(180deg);
  }
  .newspaper-label{
    font-family:"Share Tech Mono",monospace;
    font-size:clamp(14px,1.8vw,18px);
    color:var(--text);
    text-shadow:0 0 8px rgba(255,0,0,.3);
    letter-spacing:.02em;
    white-space:nowrap;
  }
  .about .right .icon-phone{transform:scaleX(-1) rotate(40deg)}
  /* Shake on hover without altering base rotation */
  @keyframes shakePhone{0%,100%{transform:translate(0,0) scaleX(-1) rotate(40deg)}20%{transform:translate(-2px,0) scaleX(-1) rotate(40deg)}40%{transform:translate(2px,0) scaleX(-1) rotate(40deg)}60%{transform:translate(-1.5px,0) scaleX(-1) rotate(40deg)}80%{transform:translate(1.5px,0) scaleX(-1) rotate(40deg)}}
  .about .right .icon-phone:hover{animation:shakePhone .35s linear infinite}
  @media (prefers-reduced-motion: reduce){.about .right .icon-phone:hover{animation:none}}
  .about .eyes{position:absolute;inset:0;z-index:0;pointer-events:none;transform:translate(-10%,30%)}
  .about .g-eye{position:absolute;width:120px;height:120px}
  .about .g-eye .eye-outline{position:absolute;inset:0;width:100%;height:100%;
    stroke:#ff1a1a;stroke-width:4;fill:none;opacity:.9;filter: drop-shadow(0 0 18px rgba(255,0,0,.35));
  }
  .about .g-eye .pupil{position:absolute;left:50%;top:50%;width:26px;height:26px;border-radius:50%;background:#ff1a1a;box-shadow:0 0 10px rgba(255,0,0,.5);transform:translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px)))}
  .about .side{z-index:2}

  /* Phone hint label */
  .about .phone-hint{position:absolute;right:100%;top:56%;transform:translate(0,-50%);display:flex;align-items:center;gap:10px;font-family:"Share Tech Mono",monospace;font-size:clamp(14px,1.6vw,18px);letter-spacing:.04em;color:var(--text);opacity:.92;white-space:nowrap}
  .about .phone-hint .hint-text{color:var(--text)}
  .about .phone-hint .hint-arrow{width:34px;height:34px;filter:drop-shadow(0 0 10px rgba(255,0,0,.35))}
  .about .phone-hint .hint-arrow polygon{fill:var(--red)}

  /* About CTAs with lightning */
  .about-cta{position:relative;grid-column:2;justify-self:center;margin-top:60px;display:grid;place-items:center}
  .about-cta[aria-hidden="true"]{pointer-events:none}
  .about-cta .lightning-canvas{width:min(300px,36vw);height:min(300px,36vw);display:block;opacity:0;transform:translateY(6px) scale(.95);filter:drop-shadow(0 0 26px rgba(255,0,0,.55)) drop-shadow(0 0 10px rgba(255,0,0,.8));pointer-events:none;position:relative;z-index:1}
  .about-cta.strike .lightning-canvas{animation: strikeIn 420ms cubic-bezier(.2,.8,.1,1) forwards}
  @keyframes strikeIn{0%{opacity:0;transform:translateY(-20px) scale(.8)}60%{opacity:1;transform:translateY(0) scale(1.05)}100%{opacity:1;transform:translateY(0) scale(1)} }

  .cta-buttons{display:flex;gap:18px;margin-top:16px;opacity:0;transform:translateY(10px);position:relative;z-index:2}
  .about-cta.show-buttons .cta-buttons{animation: liquidIn 620ms cubic-bezier(.2,.7,.1,1) forwards}
  .cta-buttons.dissolve{animation: liquidOut 600ms cubic-bezier(.2,.7,.1,1) forwards}
  .btn-liquid{background:rgba(16,16,16,.9);border:1px solid #2a2a2a;color:#eaeaea;position:relative;overflow:hidden;box-shadow:0 0 18px rgba(255,26,26,.45), 0 0 3px rgba(255,26,26,1) inset;font-size:calc(1em * 1.9);padding:24px 32px}
  .btn-liquid:hover{box-shadow:0 0 28px rgba(255,26,26,.65), 0 0 3px rgba(255,26,26,1) inset}
  .btn-liquid::before,.btn-liquid::after{content:"";position:absolute;inset:-40% -20%;background:radial-gradient(120px 60px at 30% 40%, rgba(255,26,26,.35), transparent 60%);transform:translateX(-120%) rotate(8deg);opacity:.0}
  .btn-liquid::after{inset:-50% -30%;background:radial-gradient(160px 80px at 70% 60%, rgba(255,26,26,.22), transparent 60%);}
  .btn-liquid.alt{border-color:#3a3a3a}
  .about-cta.show-buttons .btn-liquid::before,.about-cta.show-buttons .btn-liquid::after{animation: liquidSweep 1200ms ease-out forwards}
  @keyframes liquidIn{0%{opacity:0;transform:translateY(16px) scale(.96)}60%{opacity:1;transform:translateY(-2px) scale(1.02)}100%{opacity:1;transform:translateY(0) scale(1)} }
  @keyframes liquidOut{0%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}100%{opacity:0;transform:translateY(16px) scale(.94);filter:blur(6px)} }
  @keyframes liquidSweep{0%{opacity:.0;transform:translateX(-120%) rotate(8deg)}30%{opacity:.35}100%{opacity:.0;transform:translateX(120%) rotate(8deg)} }

  @media (max-width: 860px){
    .about .phone-hint{right:auto;left:50%;top:calc(100% + 10px);transform:translate(-50%,0)}
  }

  /* Phone modal */
  .phone-modal{position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.6);backdrop-filter:blur(2px);z-index:1000}
  .phone-modal.hidden{display:none}
  .phone-frame{width:min(340px,90vw);height:560px;background:#0e0e0e;border:2px solid var(--red);border-radius:28px;box-shadow:0 20px 80px rgba(0,0,0,.6), 0 0 30px rgba(255,0,0,.15);position:relative;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
  .phone-notch{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);width:140px;height:22px;background:#090909;border-radius:12px}
  .phone-close{position:absolute;top:10px;right:12px;width:28px;height:28px;border-radius:50%;background:#1a1a1a;border:1px solid #444;color:#aaa;display:grid;place-items:center;cursor:pointer}
  .status-bar{margin-top:16px;color:var(--text);font-family:"Share Tech Mono",monospace;font-size:18px;opacity:.9}
  .app-list{margin-top:28px;display:flex;flex-direction:column;gap:18px;width:100%;align-items:center}
  .app-tile{width:88px;height:88px;border-radius:22px;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.45), 0 0 16px rgba(255,0,0,.08);border:1px solid #2a2a2a;text-decoration:none;transition:transform 120ms ease, box-shadow 120ms ease}
  .app-tile:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.55), 0 0 20px rgba(255,0,0,.12)}
  .app-tile img{width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
  .app-yt{background:#111}
  .app-tt{background:#111}
  .app-tg{background:#111}
  .app-snake{background:#111;display:grid;place-items:center}
  .app-snake svg{width:56px;height:56px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
  .phone-date{margin-top:auto;margin-bottom:8px;color:#bbb;font-family:"Share Tech Mono",monospace;font-size:14px;opacity:.9}

  /* App viewport within phone modal */
  .app-view{margin-top:16px;width:100%;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px}
  .app-view.hidden{display:none}
  /* Overlay the app view above app tiles for in-modal apps */
  .phone-frame{position:relative}
  .app-view{position:absolute;left:0;right:0;top:86px;bottom:54px;padding:0 20px;z-index:2;display:grid;place-items:center;align-content:center}

  /* Snake app UI */
  .snake-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:6px 8px 10px 8px}
  .snake-score{font-family:"Share Tech Mono",monospace;font-size:16px;color:var(--text)}
  .snake-field{width:100%;margin:0 auto;aspect-ratio:1/1;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);gap:2px;background:#0a0a0a;border:2px solid var(--red);box-shadow:0 0 16px rgba(255,0,0,.2) inset}
  .snake-cell{background:#111;border:1px solid #1a1a1a}
  .snake-cell.snake{background:#ff1a1a;box-shadow:0 0 10px rgba(255,26,26,.5)}
  .snake-cell.apple{background:#00f0ff;box-shadow:0 0 10px rgba(0,240,255,.8)}


  .app-view {
    width: 100%;
    display: flex;
    flex-direction: column; /* чтобы поле и кнопки шли вертикально */
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    text-align: center;
  }

  .snake-controls{margin-top:10px;display:grid;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(3,56px);gap:8px}
  .snake-controls .pad-spacer{visibility:hidden}
  .snake-btn{background:#150000;border:1px solid #2a2a2a;color:#ff1a1a;display:grid;place-items:center;border-radius:12px;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.45), 0 0 12px rgba(255,0,0,.1)}
  .snake-btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(0,0,0,.55), 0 0 16px rgba(255,0,0,.18)}
  .snake-btn svg{width:22px;height:22px;filter:drop-shadow(0 0 6px rgba(255,0,0,.35))}
  .snake-btn polygon{fill:#ff1a1a}

  /* Game over state */
  .snake-over .snake-cell.snake{background:#666;box-shadow:none}
  .snake-over .snake-btn{animation:dissolveBtn 420ms ease forwards}
  @keyframes dissolveBtn{0%{opacity:1;filter:blur(0)}100%{opacity:0;filter:blur(6px)}}

  .snake-restart{position:absolute;left:50%;transform:translateX(-50%);bottom:70px;display:none;z-index:3}
  .snake-over .snake-restart{display:block}
  .btn-restart{background:linear-gradient(180deg,var(--red),var(--red2));color:#fff;border:none;border-radius:12px;padding:10px 16px;cursor:pointer;box-shadow:0 10px 24px rgba(255,0,0,.25)}
  .btn-restart:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(255,0,0,.32)}

  @media (max-width: 860px){
    .intro{grid-template-columns:1fr;gap:20px}
    .intro .photo{order:1}
    .intro .text{order:2;text-align:center}
    .headline .overlay-img img{max-width:min(80vw,520px)}
  }

  /* COMMISSIONS SECTION */
  .commissions{position:relative;width:100%;min-height:100vh;display:grid;place-items:center;padding:0}
  .commissions-inner{width:100%;min-height:100vh;display:grid;place-items:center}
  .laptop{margin:-200px auto 0}
  .laptop{position:relative;width:min(1520px,92vw);height:1260px;perspective:1400px}
  .laptop .base{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:100%;height:12%;background:linear-gradient(180deg,#0a0a0a,#050505);border:2px solid #2a2a2a;border-radius:14px 14px 24px 24px;box-shadow:0 20px 70px rgba(0,0,0,.7), 0 0 30px rgba(255,0,0,.12) inset}
  .laptop .hinge{position:absolute;bottom:12%;left:50%;transform:translateX(-50%);width:86%;height:10px;background:#111;border:1px solid #2a2a2a;border-radius:8px}
  .laptop .lid{position:absolute;bottom:12%;left:50%;transform-origin:bottom center;transform:translateX(-50%) rotateX(88deg);width:86%;height:44%;background:linear-gradient(180deg,#0c0c0c,#111);border:2px solid #2a2a2a;border-bottom:0;border-radius:14px 14px 0 0;box-shadow:0 18px 60px rgba(255,0,0,.1)}
  .laptop.open .lid{transform:translateX(-50%) rotateX(0deg);transition:transform 1050ms cubic-bezier(.2,.7,.1,1)}
  .laptop.closing .lid{transition:transform 750ms cubic-bezier(.3,.7,.2,1)}
  .screen{position:absolute;inset:10px;bottom:auto;height:calc(100% - 20px);background:#050505;border-radius:10px;padding:16px;box-shadow:inset 0 0 0 2px #200, inset 0 0 24px rgba(255,0,0,.12);overflow:hidden}
  .screen::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 2px, rgba(255,0,0,.03) 2px 3px);pointer-events:none;mix-blend-mode:overlay}
  .terminal{position:absolute;inset:16px;background:#020202;border:1px solid #2a2a2a;border-radius:8px;padding:14px 16px;font-family:"Share Tech Mono",monospace;color:#c50707;text-shadow:0 0 8px rgba(0,255,120,.25);font-size:clamp(12px,1.6vw,16px);line-height:1.5;overflow:hidden}
  .terminal .t-line{font-size:3em}
  .terminal .cursor{display:inline-block;width:8px;height:1.1em;background:#8f4141;margin-left:4px;animation:blink 800ms steps(1) infinite}
  @keyframes blink{50%{opacity:0}}
  .matrix{position:absolute;inset:0;font-size:clamp(12px,1.6vw,16px);color:rgb(255, 0, 0);opacity:.2;pointer-events:none;white-space:pre;line-height:1.3;overflow:hidden}
  .term-hidden{opacity:0;pointer-events:none}
  .comm-content{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:translateY(8px);transition:opacity 300ms ease, transform 300ms ease}
  .comm-content.show{opacity:1;transform:translateY(0)}
  .comm-card{max-width:680px;text-align:center}
  .comm-title{font-weight:800;font-size:clamp(26px,4.8vw,46px);letter-spacing:.02em;margin:0 0 10px;text-shadow:0 0 18px rgba(255,0,0,.25), 0 0 2px rgba(255,0,0,.6)}
  .comm-sub{font-family:"Share Tech Mono",monospace;font-size:clamp(14px,2.6vw,20px);color:#ccc;margin:0 0 22px}
  .btn-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .btn{appearance:none;border:none;cursor:pointer;text-decoration:none;padding:12px 18px;border-radius:12px;font-weight:600;letter-spacing:.02em;transition:transform 120ms ease, box-shadow 120ms ease, background 120ms ease}
  .btn-primary{background:linear-gradient(180deg,var(--red),var(--red2));color:#fff;box-shadow:0 10px 24px rgba(255,0,0,.25)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(255,0,0,.32)}
  .btn-ghost{background:#101010;color:#ddd;border:1px solid #333}
  .btn-ghost:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.4)}
  /* Utility: grayscale */
  .grayscale{ filter: grayscale(1) contrast(0.9) brightness(0.9); }
  .grayscale:hover{ filter: grayscale(1) contrast(0.95) brightness(1); }
  .glitch-out{position:relative}
  .glitch-out::before,.glitch-out::after{content:attr(data-text);position:absolute;inset:0}
  .glitch-out::before{color:#f33;mix-blend-mode:screen;clip-path:polygon(0 0,100% 0,100% 38%,0 38%);animation:gOut1 420ms steps(10)}
  .glitch-out::after{color:#3ff;mix-blend-mode:screen;clip-path:polygon(0 62%,100% 62%,100% 100%,0 100%);animation:gOut2 420ms steps(10)}
  @keyframes gOut1{0%{transform:translate(0,0)}50%{transform:translate(-2px,-1px)}100%{transform:translate(0,0);opacity:0}}
  @keyframes gOut2{0%{transform:translate(0,0)}50%{transform:translate(2px,1px)}100%{transform:translate(0,0);opacity:0}}
  
  /* MONOMETER (sidebar) */
  .monometer{position:fixed;left:0;top:50%;transform:translate(-120%, -50%);width:150px;height:60vh;min-height:340px;z-index:900;pointer-events:none;transition:transform 420ms cubic-bezier(.2,.7,.2,1)}
  .monometer.visible{transform:translate(0, -50%)}
  .monometer .bar{position:absolute;left:56px;top:0;bottom:0;width:10px;border-radius:10px;background:linear-gradient(180deg, rgba(255,26,26,.95), rgba(224,0,0,.85));box-shadow:0 0 14px rgba(255,0,0,.25), 0 0 2px rgba(255,0,0,.8)}
  .monometer .mono-arrow{--arrowY:0px;position:absolute;left:16px;top:0;transform:translateY(var(--arrowY));width:32px;height:32px;opacity:1;transition:transform 120ms linear, opacity 260ms ease}
  .monometer .mono-arrow::before{content:"";display:block;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:16px solid var(--red);filter:drop-shadow(0 0 10px rgba(255,0,0,.45))}
  .monometer .mono-label{position:absolute;left:84px;top:0;transform:translate(0, calc(var(--arrowY) - 50%));padding:6px 10px;border-radius:10px;background:rgba(10,10,10,.82);border:1px solid #2a2a2a;color:var(--text);font-family:"Share Tech Mono",monospace;font-size:14px;letter-spacing:.02em;white-space:nowrap;opacity:0;transition:opacity 220ms ease, transform 120ms linear;will-change:transform}
  .monometer .mono-label.show{opacity:.96;transform:translate(0, calc(var(--arrowY) - 50%))}
  .monometer .dissolve{opacity:0;transform:translateY(calc(var(--arrowY) + 6px));transition:opacity 260ms ease, transform 260ms ease}
  .monometer .bar{overflow:hidden}
  .monometer .bar .mono-ticks{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;overflow:hidden}
  .monometer .bar .mono-ticks .tick{position:absolute;right:0px;width:6px;height:1px;background:#fff;border-radius:2px;opacity:.85;box-shadow:0 0 8px rgba(255,255,255,.25)}
  @media (max-width: 860px){ .monometer{height:42vh;min-height:240px} }

  /* INSPIRATION SECTION */
  .inspiration{
    position:relative;
    width:100%;
    min-height:60vh;
    display:grid;
    place-items:center;
    padding:0;
    background:radial-gradient(800px 600px at 50% 50%, rgba(255,26,26,.08) 0%, transparent 70%);
  }
  .inspiration-inner{
    width:100%;
    display:grid;
    place-items:center;
  }
  .skull-container{
    position:relative;
    width:min(1067px, 80vw);
    height:min(1067px, 80vw);
    display:grid;
    place-items:center;
  }
  .skull-svg{
    width:100%;
    height:100%;
    filter:drop-shadow(0 0 20px rgba(255,0,0,.3));
    transition:all 0.3s ease;
  }
  
  /* Combined skull cracking and splitting animation */
  .skull-parts.split .skull-outline-upper,
  .skull-parts.split .skull-outline-lower{
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: skullCrack 0.8s ease-in-out forwards;
  }
  .skull-parts.split .eye-socket,
  .skull-parts.split .nose,
  .skull-parts.split .tooth{
    transform-origin: center;
    animation: skullShake 0.8s ease-in-out forwards;
  }
  .skull-parts.split .crack{
    opacity: 0.8;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: crackAppear 0.6s ease-in-out 0.2s forwards;
  }
  .skull-parts.split .skull-upper{
    transform: translateY(-100px);
    transition: transform 0.8s ease-in-out 0.3s;
  }
  .skull-parts.split .skull-lower{
    transform: translateY(50px);
    transition: transform 0.8s ease-in-out 0.3s;
  }
  
  @keyframes skullCrack{
    0%{ stroke-dashoffset: 1000; }
    100%{ stroke-dashoffset: 0; }
  }
  @keyframes skullShake{
    0%, 100%{ transform: translate(0,0) rotate(0deg); }
    25%{ transform: translate(-2px, -1px) rotate(-1deg); }
    50%{ transform: translate(2px, 1px) rotate(1deg); }
    75%{ transform: translate(-1px, 2px) rotate(-0.5deg); }
  }
  @keyframes crackAppear{
    0%{ stroke-dashoffset: 200; opacity: 0; }
    100%{ stroke-dashoffset: 0; opacity: 1; }
  }
  
  /* Reverse animation for when scrolling back */
  .skull-parts.reforming .skull-outline-upper,
  .skull-parts.reforming .skull-outline-lower{
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
    animation: skullReform 0.6s ease-in-out forwards;
  }
  .skull-parts.reforming .eye-socket,
  .skull-parts.reforming .nose,
  .skull-parts.reforming .tooth{
    transform-origin: center;
    animation: skullSettle 0.6s ease-in-out forwards;
  }
  .skull-parts.reforming .crack{
    opacity: 0.8;
    stroke-dasharray: 200;
    stroke-dashoffset: 0;
    animation: crackDisappear 0.4s ease-in-out forwards;
  }
  .skull-parts.reforming .skull-upper{
    transform: translateY(0);
    transition: transform 0.6s ease-in-out;
  }
  .skull-parts.reforming .skull-lower{
    transform: translateY(0);
    transition: transform 0.6s ease-in-out;
  }
  
  @keyframes skullReform{
    0%{ stroke-dashoffset: 0; }
    100%{ stroke-dashoffset: 1000; }
  }
  @keyframes skullSettle{
    0%{ transform: translate(0,0) rotate(0deg); }
    100%{ transform: translate(0,0) rotate(0deg); }
  }
  @keyframes crackDisappear{
    0%{ stroke-dashoffset: 0; opacity: 1; }
    100%{ stroke-dashoffset: 200; opacity: 0; }
  }
  
  /* Cyberpunk text styling */
  .cyberpunk-text{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    opacity:0;
    pointer-events:none;
    z-index:10;
  }
  .cyberpunk-text.show{
    opacity:1;
    animation: cyberpunkAppear 0.8s ease-in forwards;
  }
  .cyberpunk-text.hide{
    opacity:0;
    animation: cyberpunkDisappear 0.6s ease-in forwards;
  }
  .cyberpunk-text .text-line{
    font-family:"Share Tech Mono", monospace;
    font-size:clamp(36px, 8vw, 64px);
    font-weight:600;
    color:#ff1a1a;
    text-shadow:
      0 0 20px rgba(255,26,26,0.8),
      0 0 40px rgba(255,26,26,0.6),
      0 0 60px rgba(255,26,26,0.4);
    letter-spacing:0.1em;
    text-transform:uppercase;
    white-space:nowrap;
  }
  
  @keyframes cyberpunkAppear{
    0%{
      opacity:0;
      transform:translate(-50%, -50%) scale(0.8);
      filter:blur(4px);
    }
    50%{
      opacity:0.8;
      transform:translate(-50%, -50%) scale(1.1);
      filter:blur(1px);
    }
    100%{
      opacity:1;
      transform:translate(-50%, -50%) scale(1);
      filter:blur(0);
    }
  }
  
  @keyframes cyberpunkDisappear{
    0%{
      opacity:1;
      transform:translate(-50%, -50%) scale(1);
      filter:blur(0);
    }
    100%{
      opacity:0;
      transform:translate(-50%, -50%) scale(0.8);
      filter:blur(4px);
    }
  }

  /* INSPIRATION GALLERY SECTION */
  .inspiration-gallery{
    position:relative;
    width:100%;
    min-height:100vh;
    background:radial-gradient(1200px 800px at 50% 50%, rgba(255,26,26,.12) 0%, transparent 70%);
    overflow:hidden;
    display:none;
  }
  .inspiration-gallery.active{
    display:block;
  }
  .gallery-container{
    position:relative;
    width:100%;
    height:100vh;
    display:flex;
    align-items:center;
  }
  
  /* Digital Clock */
  .digital-clock{
    position:fixed;
    right:0;
    top:0;
    width:120px;
    height:100vh;
    background:linear-gradient(180deg, rgba(0,0,0,0.9), rgba(20,0,0,0.95));
    border-left:2px solid #ff1a1a;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:100;
    box-shadow:-4px 0 20px rgba(255,0,0,0.3);
  }
  .clock-display{
    transform:rotate(90deg);
    text-align:center;
  }
  .time{
    font-family:"Share Tech Mono", monospace;
    font-size:clamp(24px, 3vw, 36px);
    color:#ff1a1a;
    text-shadow:
      0 0 10px rgba(255,26,26,0.8),
      0 0 20px rgba(255,26,26,0.6),
      0 0 30px rgba(255,26,26,0.4);
    letter-spacing:0.1em;
    font-weight:600;
  }
  
  /* Gallery Scroll */
  .gallery-scroll{
    margin-right:120px;
    height:100vh;
    overflow:visible;
    display:flex;
    align-items:center;
    padding:0 40px;
    scroll-behavior:smooth;
    transform:translateX(0);
    transition:transform 0.1s ease-out;
    width:100%;
  }
  .gallery-scroll::-webkit-scrollbar{
    display:none;
  }
  .gallery-scroll{
    -ms-overflow-style:none;
    scrollbar-width:none;
  }
  
  /* Gallery Items */
  .gallery-item{
    min-width:400px;
    width:400px;
    height:500px;
    margin:0 20px;
    background:linear-gradient(135deg, rgba(0,0,0,0.8), rgba(20,0,0,0.9));
    border:2px solid #ff1a1a;
    border-radius:16px;
    padding:20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    position:relative;
    overflow:hidden;
    transition:all 0.3s ease;
    box-shadow:0 10px 30px rgba(0,0,0,0.5), 0 0 20px rgba(255,0,0,0.2);
    flex-shrink:0;
  }
  .gallery-item:hover{
    transform:translateY(-10px) scale(1.02);
    box-shadow:0 20px 40px rgba(0,0,0,0.6), 0 0 30px rgba(255,0,0,0.3);
    border-color:#ff3333;
  }
  .gallery-item::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:repeating-linear-gradient(
      45deg,
      transparent,
      transparent 2px,
      rgba(255,26,26,0.03) 2px,
      rgba(255,26,26,0.03) 4px
    );
    pointer-events:none;
  }
  
  /* Gallery Images */
  .gallery-image{
    width:100%;
    height:200px;
    background:linear-gradient(135deg, #1a0000, #000);
    border:1px solid #333;
    border-radius:8px;
    margin-bottom:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
  }
  .gallery-image::after{
    content:"[IMAGE]";
    font-family:"Share Tech Mono", monospace;
    font-size:14px;
    color:#666;
    opacity:0.7;
  }
  /* Hide placeholder label when a real image is present */
  .gallery-image.has-image::after{display:none}
  .gallery-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    position:relative;
    z-index:1;
    border-radius:8px;
  }
  
  /* Gallery Content */
  .gallery-content{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .gallery-title{
    font-family:"Share Tech Mono", monospace;
    font-size:clamp(18px, 2.5vw, 24px);
    color:#ff1a1a;
    margin:0 0 15px 0;
    text-shadow:0 0 10px rgba(255,26,26,0.5);
    letter-spacing:0.05em;
    line-height:1.3;
  }
  .gallery-description{
    font-family:"Montserrat", sans-serif;
    font-size:clamp(14px, 1.8vw, 18px);
    color:#eaeaea;
    line-height:1.5;
    margin:0;
    opacity:0.9;
  }
  
  /* Cyberpunk effects */
  .gallery-item:nth-child(odd) .gallery-title{
    animation:glitchText 3s ease-in-out infinite;
  }
  .gallery-item:nth-child(even) .gallery-title{
    animation:glitchText 3s ease-in-out infinite 1.5s;
  }
  
  @keyframes glitchText{
    0%, 100%{ transform:translate(0,0); }
    20%{ transform:translate(-1px, 1px); }
    40%{ transform:translate(1px, -1px); }
    60%{ transform:translate(-1px, -1px); }
    80%{ transform:translate(1px, 1px); }
  }
  
  /* Responsive design */
  @media (max-width: 860px){
    .digital-clock{
      width:80px;
    }
    .gallery-scroll{
      margin-right:80px;
      padding:0 20px;
    }
    .gallery-item{
      min-width:300px;
      height:400px;
      margin:0 15px;
    }
    .time{
      font-size:clamp(18px, 2.5vw, 24px);
    }
  }

  /* NEWSPAPER TRANSITION OVERLAY */
  .newspaper-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease-in;
  }
  
  .newspaper-transition-overlay.active {
    opacity: 1;
    pointer-events: auto;
  }
  
  .newspaper-transition-overlay .black-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    transition: opacity 0.5s ease-in;
  }
  
  .newspaper-transition-overlay.active .black-screen {
    opacity: 1;
  }
  
  .newspaper-transition-overlay .red-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ff1a1a;
    clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
    transition: clip-path 0.8s ease-out;
  }
  
  .newspaper-transition-overlay.active .red-screen {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  
  .newspaper-transition-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Share Tech Mono", monospace;
    font-size: clamp(24px, 4vw, 48px);
    color: #fff;
    text-shadow: 
      0 0 20px rgba(255, 255, 255, 0.8),
      0 0 40px rgba(255, 255, 255, 0.6),
      0 0 60px rgba(255, 255, 255, 0.4);
    letter-spacing: 0.1em;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease-in;
    white-space: nowrap;
  }
  
  .newspaper-transition-overlay.active .newspaper-transition-text {
    opacity: 1;
  }
  
  .newspaper-transition-text .style-label {
    display: block;
    font-size: 0.7em;
    margin-bottom: 10px;
    opacity: 0.8;
  }
  
  .newspaper-transition-text .style-name {
    display: inline-block;
    border-right: 2px solid #fff;
    animation: caret 700ms steps(1) infinite;
  }
  
  .newspaper-transition-text .style-name.typing {
    animation: typewriter 0.1s steps(1) infinite;
  }
  
  @keyframes typewriter {
    0% { border-right-color: #fff; }
    50% { border-right-color: transparent; }
    100% { border-right-color: #fff; }
  }

  /* GRATITUDE SECTION (removed) */
  /* MOBILE OVERRIDES */
  @media (max-width: 860px){
    .container{padding-bottom:72px}
    .monometer{display:none}
    .about .eyes{display:none}
    .about .side{display:none}
    .newspaper-text{display:none}
    .digital-clock{display:none}

    /* ydz2 bigger and centered */
    .headline .overlay-img img{width:90vw}
    .headline .overlay-img .hands-bg{width:90vw;--hands-scale:1.1}

    /* buttons column and smaller */
    .cta-buttons{flex-direction:column;gap:12px}
    .btn-liquid{font-size:1rem;padding:14px 18px}

    /* hide desktop commissions, show simplified */
    .commissions{display:none}
    .commissions-mobile{display:block;padding:40px 20px}
    .commissions-mobile .cm-inner{max-width:560px;margin:0 auto;text-align:center;background:linear-gradient(180deg,#0b0b0b,#0f0f0f);border:1px solid #2a2a2a;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 20px rgba(255,0,0,.12);padding:24px}
    .commissions-mobile .cm-title{font-weight:800;font-size:26px;letter-spacing:.02em;margin:0 0 8px;text-shadow:0 0 14px rgba(255,0,0,.25)}
    .commissions-mobile .cm-sub{font-family:"Share Tech Mono",monospace;font-size:14px;color:#ccc;margin:0 0 16px}
    .commissions-mobile .cm-actions{display:flex;gap:10px;justify-content:center}

    /* hide desktop inspiration, show simplified with horizontal gallery */
    .inspiration,.inspiration-gallery{display:none}
    .inspiration-mobile{display:block;padding:10px 0 0}
    .inspiration-mobile .im-title{font-family:"Share Tech Mono",monospace;font-size:18px;color:#ff1a1a;text-align:center;margin:0 0 10px;text-shadow:0 0 12px rgba(255,0,0,.4)}
    .inspiration-mobile .im-scroll{display:flex;gap:12px;overflow-x:auto;padding:0 16px 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
    .inspiration-mobile .im-scroll::-webkit-scrollbar{display:none}
    .inspiration-mobile .im-item{flex:0 0 72%;max-width:72%;border:1px solid #333;border-radius:12px;background:#0e0e0e;box-shadow:0 8px 24px rgba(0,0,0,.45)}
    .inspiration-mobile .im-item img{width:100%;height:160px;object-fit:cover;border-radius:12px;display:block}

    /* mobile bottom dock */
    .mobile-dock{position:fixed;left:0;right:0;bottom:0;height:64px;background:rgba(10,10,10,.9);border-top:1px solid #2a2a2a;display:flex;justify-content:space-evenly;align-items:center;z-index:2000;backdrop-filter:blur(6px)}
    .mobile-dock .dock-btn{appearance:none;background:none;border:none;color:#eaeaea;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px}
    .mobile-dock .dock-icon{width:24px;height:24px;fill:#ff1a1a;filter:drop-shadow(0 0 8px rgba(255,0,0,.25))}
    .mobile-dock .dock-label{font-family:"Share Tech Mono",monospace;font-size:11px;opacity:.92}
  }

/* --- Improved MOBILE & DESKTOP separation --- */
@media (max-width: 860px) {
  .intro { display: none !important; }
  .inspiration, .inspiration-gallery { display: none !important; }
  #skullContainer, .skull-container, #cyberpunkText { display: none !important; }
  .gallery-scroll { display: none !important; }
  .monometer { display: none !important; }
  .gallery-mobile, .commissions-mobile, .inspiration-mobile, .mobile-dock { display: block !important; }
}
@media (min-width: 861px) {
  .gallery-mobile, .commissions-mobile, .inspiration-mobile, .mobile-dock { display: none !important; }
  .inspiration, .inspiration-gallery { display: block !important; }
  .intro { display: grid !important; }
}

/* Center & Enlarge ydz2 for mobile */
@media (max-width: 860px) {
  .headline { margin-top: 0 !important; }
  .headline .title { font-size: 2.6em !important; margin-bottom: 10px; }
  .headline .overlay-img {
    display: flex !important; flex-direction: column; align-items: center; justify-content: center; left: 50%; top: 30%; transform: translate(-50%, 0); width: 100vw; height: auto;
  }
  .headline .overlay-img img {
    width: 96vw !important;
    min-width: 50vh;
    height: auto !important;
    margin: 0 auto;
    display: block;
  }
  .scroll-indicators { position: static !important; display: flex !important; justify-content: center; gap: 56vw; margin-top: 15px; }
}

/* Mobile gallery: always centered, single card, no horizontal scroll! */
.gallery-mobile { display: none; width:100%; max-width: 100vw; margin:36px auto 0; }
@media (max-width: 860px) {
  .gallery-mobile { display: flex !important; align-items: center; justify-content: center; min-height: 230px; }
  .gm-container { display: flex; align-items: center; justify-content: center; width:100vw; max-width: 420px; margin: 0 auto; }
  .gm-arrow { background: #150000; color: #ff1a1a; border:none; border-radius:50%; width:38px; height:38px; font-size:1.7em; display:flex; align-items:center; justify-content:center; margin:0 6px; touch-action:manipulation; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.3); transition: background .2s; }
  .gm-arrow:active { background:#900; }
  .gm-card { background: #0e0e0e; border-radius:16px; border:1px solid #2a2a2a; box-shadow:0 8px 18px rgba(0,0,0,.25); width: 202px; min-width:202px; max-width:80vw; padding:12px 10px 14px 10px; display:flex; flex-direction:column; align-items:center; gap:10px; }
  .gm-img-wrap { width:100%; height:120px; display:flex; align-items:center; justify-content:center; border-radius:10px; overflow:hidden; }
  .gm-img-wrap img { width:100%; height:100%; object-fit:cover; border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,.18); }
  .gm-meta { text-align:center; margin-top:8px; }
  .gm-title { font-family:"Share Tech Mono",monospace; color:#ff1a1a; font-size:1.05em; font-weight:600; text-shadow:0 0 8px rgba(255,0,0,0.22); margin-bottom:3px; }
  .gm-desc { font-family:Montserrat,sans-serif; color:#eaeaea; font-size: 0.93em; opacity:0.92; }
}

/* Hide .im-scroll on mobile (move to only show on desktop) */
@media (max-width: 860px) {
  .im-scroll { display: none !important; }
}
@media (min-width: 861px) {
  .im-scroll { display: flex !important; }
}

/* Move gm-container (.gallery-mobile inner) up higher, ensure always visible above dock */
@media (max-width: 860px) {
  .gallery-mobile { margin: 8vw auto 70px auto !important; min-height: 210px; }
  .gm-container { margin-top: 0 !important; margin-bottom: 18px !important; padding-bottom: 4vw !important; }
}

/* Mobile dock: buttons close, not spaced out */
@media (max-width: 860px) {
  .mobile-dock {
    justify-content: center !important;
    gap: 24px !important;
  }
  .mobile-dock .dock-btn { margin: 0 2px !important; }
}

/* Bottom dock fix: sticky with safe area for both major mobile browsers */
@media (max-width: 860px) {
  .mobile-dock {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    background: rgba(10,10,10,0.93);
    border-top: 1px solid #2a2a2a;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(6px);
    padding-bottom: env(safe-area-inset-bottom); /* For iPhone notch etc */
    box-sizing: border-box;
  }
}

/* --- Desktop: Only show .digital-clock if .inspiration-gallery.active is present --- */
.digital-clock { display: none !important; }
.inspiration-gallery.active .digital-clock { display: flex !important; }

/* --- Desktop: Remove top margin from .main after intro for flush layout --- */
@media (min-width: 861px) {
  .main { margin-top: 0 !important; padding-top: 0 !important; }
}

/* --- Mobile: Center ydz2 in .headline .overlay-img, center arrows, fix overflow --- */
@media (max-width: 860px) {
  html, body, .container, .gallery-mobile, .inspiration-mobile { overflow-x: hidden !important; }
  .main { margin-top: 0 !important; padding-top: 0 !important; }
  .headline { margin-top: 0 !important; display:flex; flex-direction:column; align-items:center; justify-content:center; }
  .headline .overlay-img {
    position: static !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: auto;
    margin: 0 auto;
    transform: none !important;
  }
  .headline .overlay-img img { width: 90vw !important; max-width: 320px; height: auto !important; margin: 0 auto; display: block; }
  .scroll-indicators { position: static !important; margin-top: 18px !important; justify-content: center !important; gap: 45vw; }
}

/* Remove mobile gallery duplicate or side-scroll if present */
.gallery-scroll, .gallery-items, .gallery-mobile-dupe { display:none !important; }

/* --- MODERN MOBILE DOCK --- */
@media (max-width: 860px) {
  .mobile-dock {
      display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    gap: 2vw !important;
    width: 96vw !important;
    margin: 0 2vw !important;
    height: 54px !important;
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    background: none; border: none;
    z-index: 9999;
    box-sizing: border-box;
    padding: 0;
    backdrop-filter: blur(5px);
  }
  .dock-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 54px !important;
    margin: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    outline: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background: #18181b;
    color: #fff;
    border: none;
    font-size: 1.07em;
    box-shadow: 0 4px 12px rgba(0,0,0,0.13);
    transition: background .18s;
    touch-action: manipulation;
    cursor:pointer;
  }
  .dock-btn:active, .dock-btn:focus { background: #23232b; }
  .dock-btn:not(:last-child) { margin-right: 2vw !important; }
  .dock-icon-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width:100%; height:100%; font-size:1em;
  }
  .dock-icon {
    margin-right: 10px;
    width: 26px;
    height: 26px;
    fill: #ff1a1a;
    filter: drop-shadow(0 0 8px rgba(255,0,0,0.17));
    flex-shrink:0;
  }
  .dock-label {
    font-family: "Share Tech Mono",monospace;
    font-size: 1.02em;
    letter-spacing: 0.03em;
    color: #fff;
    user-select: none;
  }
}

/* --- PC: Make .gallery-scroll and .gallery-item visible inside .inspiration-gallery.active --- */
@media (min-width: 861px) {
  .inspiration-gallery.active .gallery-scroll { display: flex !important; }
  .inspiration-gallery.active .gallery-item { display: flex !important; }
}

/* Popup (shared style similar to index) */
.dim-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.0); pointer-events:none; transition: background 400ms ease; z-index: 9990 }
.dim-overlay.active{ background: rgba(0,0,0,.85); pointer-events:auto }
.popup{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index: 10000 }
.popup.hidden{ display:none }
.popup .popup-card{
  pointer-events:auto;
  max-width:min(92vw, 520px);
  background: #0f0b0b;
  color: var(--text);
  border: 2px solid var(--red);
  box-shadow: 0 0 24px rgba(255, 26, 26, 0.6), 0 0 48px rgba(255, 26, 26, 0.35);
  border-radius: 10px;
  padding: 20px 22px;
  text-align: center;
}
.popup .popup-title{ margin: 0 0 8px 0; font-weight: 700; letter-spacing: .04em }
.popup .popup-message{ margin: 0 0 12px 0; line-height: 1.5 }
.popup .popup-actions{ display:flex; justify-content:center }
.popup .btn{ background: transparent; color: var(--text); border: 1px solid var(--red); padding: 8px 16px; border-radius: 6px; cursor: pointer; box-shadow: 0 0 10px rgba(255, 26, 26, 0.4) inset }
.popup .btn:hover{ background: rgba(255, 26, 26, 0.08) }

@media (max-width: 860px) {
  .phone-modal .status-bar,
  .phone-modal .phone-date {
    display: none !important;
  }
}