:root{
      --ink:#0a0a0a;
      --coal:#171717;
      --ghost:#ffffff;
      --expo:cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Base */
    body{
      background: var(--ink);
      color: var(--ghost);
      font-family: Montserrat, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
      text-rendering: geometricPrecision;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* Modern_Shinobi: sharp cuts + ink/smoke */
    .shinobi-grid{
      background-image:
        linear-gradient(135deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 100%),
        linear-gradient(45deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 100%);
      background-size: 56px 56px, 44px 44px;
      background-position: 0 0, 12px 8px;
      mask-image: radial-gradient(closest-side, rgba(0,0,0,0.95), rgba(0,0,0,0.2));
    }

    .cutline{
      position: relative;
      isolation: isolate;
    }
    .cutline:before{
      content:"";
      position:absolute;
      inset:-2px;
      z-index:-1;
      background:
        linear-gradient(115deg, transparent 0 40%, rgba(255,255,255,0.10) 40% 41%, transparent 41% 100%),
        linear-gradient(300deg, transparent 0 55%, rgba(255,255,255,0.10) 55% 56%, transparent 56% 100%);
      opacity:.75;
      pointer-events:none;
      filter: blur(0.2px);
    }

    /* Parallelogram controls */
    .para{
      clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
    }
    .para-soft{
      clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
    }

    /* Diagonal section separators */
    .slice-divider{
      position: relative;
      height: 56px;
      overflow: hidden;
      background: transparent;
    }
    .slice-divider svg{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      display:block;
    }

    /* Reveal animation (smooth, clean) */
    .reveal{
      opacity: 0;
      transform: translateY(18px);
      transition: opacity .9s var(--expo), transform .9s var(--expo);
      will-change: opacity, transform;
    }
    .reveal.is-in{
      opacity: 1;
      transform: translateY(0);
    }

    /* Subtle glow on hover */
    .hover-glow{
      transition: box-shadow .35s var(--expo), transform .35s var(--expo), border-color .35s var(--expo), background-color .35s var(--expo);
    }
    .hover-glow:hover{
      box-shadow: 0 0 0 1px rgba(255,255,255,0.22), 0 18px 60px rgba(0,0,0,0.6);
      transform: translateY(-2px);
      border-color: rgba(255,255,255,0.26);
    }

    /* Hero fog canvas */
    #fogCanvas{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      display:block;
      pointer-events:none;
      opacity: 0.95;
      mix-blend-mode: screen;
    }

    /* Crisp focus */
    :focus-visible{
      outline: 2px solid rgba(255,255,255,0.65);
      outline-offset: 3px;
    }

    /* Motion accessibility */
    @media (prefers-reduced-motion: reduce){
      .reveal{ transition: none; transform: none; opacity: 1; }
      .hover-glow{ transition: none; }
      #fogCanvas{ display:none; }
    }


    @keyframes scanline {
        0% { transform: translateY(-100%); opacity: 0; }
        50% { opacity: 1; }
        100% { transform: translateY(200%); opacity: 0; }
    }
    .group:hover .scan-effect {
        animation: scanline 2s linear infinite;
    }

 
    .ninja-card {
        clip-path: polygon(
            20px 0, 100% 0, 
            100% calc(100% - 20px), calc(100% - 20px) 100%, 
            0 100%, 0 20px
        );
    }

   @media (max-width: 380px) {
	.trouble {
	font-size: 20px !important;	
}

}

.clip-path-slant { clip-path: polygon(0 0, 100% 0, 100% 80%, 90% 100%, 0 100%); }
                @keyframes progress {
                    0% { width: 0%; opacity: 1; }
                    50% { width: 80%; opacity: 1; }
                    100% { width: 100%; opacity: 0; }
                }



  @keyframes marquee {
                    0% { transform: translateX(0); }
                    100% { transform: translateX(-50%); }
                }

