/* Shared look for graveyardstudios.art: the landing page and /Digital-Products.
   Legal pages use legal.css; /app keeps its own inline styles. */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#060608;color:#fff}
:root{
  --sys:Geist,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --bg:#060608;
  --ink:#fff;
  --ink-2:rgba(255,255,255,.72);
  --ink-3:rgba(255,255,255,.48);
  --ink-4:rgba(255,255,255,.3);
  --line:rgba(255,255,255,.1);
  --line-2:rgba(255,255,255,.2);
  --glass:rgba(255,255,255,.04);
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:24px;
}
@media(min-width:768px){:root{--gutter:48px}}
@media(min-width:1024px){:root{--gutter:64px}}
body{font-family:var(--sys)}
a{text-decoration:none;color:inherit}
::selection{background:#fff;color:#000}
:focus-visible{outline:1px solid rgba(255,255,255,.7);outline-offset:3px;border-radius:6px}

/* Ambient background: two slow aurora blobs + film grain */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(120% 120% at 78% 40%,#15151c,#060608 64%)}
.ambient .aurora{position:absolute;inset:-20%;filter:blur(60px);opacity:.5}
.ambient .aurora i{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.ambient .a1{width:52vmax;height:52vmax;left:-8vmax;top:-14vmax;background:radial-gradient(circle,rgba(120,86,180,.24),transparent 62%);animation:drift1 34s ease-in-out infinite}
.ambient .a2{width:44vmax;height:44vmax;right:-6vmax;top:12vmax;background:radial-gradient(circle,rgba(232,183,97,.12),transparent 60%);animation:drift2 42s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(9vmax,7vmax) scale(1.15)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-8vmax,6vmax) scale(1.2)}}
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.045;mix-blend-mode:overlay;background-image:radial-gradient(rgba(255,255,255,.85) .5px,transparent .6px);background-size:3px 3px}

/* Nav */
.nav{position:relative;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:20px var(--gutter)}
.nav .logo{font-size:17px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.nav .links{display:flex;gap:30px}
.nav .links a{font-size:14px;color:var(--ink-3);transition:color .25s}
.nav .links a:hover,.nav .links a[aria-current]{color:#fff}
.nav .right{display:flex;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#fff;color:#000;border-radius:999px;padding:9px 20px;font:500 14px/1 var(--sys);border:1px solid #fff;cursor:pointer;white-space:nowrap;transition:transform .35s var(--ease),background .25s,color .25s,border-color .25s}
.btn:hover{transform:translateY(-1px)}
.btn svg{transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn.ghost{background:transparent;color:#fff;border-color:var(--line-2)}
.btn.ghost:hover{border-color:rgba(255,255,255,.55)}
.btn.lg{padding:14px 26px;font-size:15px}
.ham{display:none;position:relative;z-index:50;height:40px;width:40px;align-items:center;justify-content:center;background:none;border:0;color:#fff;cursor:pointer}
.ham svg{position:absolute;transition:transform .3s,opacity .3s}.ham .x{transform:rotate(-90deg) scale(.5);opacity:0}
.menu-open .ham .m{transform:rotate(90deg) scale(.5);opacity:0}.menu-open .ham .x{transform:none;opacity:1}
.menu{position:fixed;inset:0;z-index:30;background:rgba(4,4,6,.97);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.menu-open .menu{opacity:1;pointer-events:auto}
.menu .inner{display:flex;flex-direction:column;justify-content:center;height:100%;padding:0 32px;gap:2px;transform:translateY(24px);opacity:0;transition:all .5s var(--ease) .08s}
.menu-open .menu .inner{transform:none;opacity:1}
.menu .inner a{padding:10px 0;font-size:30px;font-weight:500;color:rgba(255,255,255,.9);letter-spacing:-.02em}
.menu .inner .btn{margin-top:24px;width:fit-content;font-size:16px;padding:14px 28px;color:#000}
@media(max-width:860px){.nav .links,.nav .right .btn{display:none}.ham{display:flex}}

/* Footer strip */
.foot{position:relative;z-index:10;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:18px var(--gutter) 22px;border-top:1px solid rgba(255,255,255,.06);font-size:12px;color:var(--ink-4)}
.foot .services{display:flex;flex-wrap:wrap;gap:6px 18px;letter-spacing:.18em;text-transform:uppercase;font-size:10px}
.foot nav{display:flex;gap:18px}
.foot a{transition:color .2s}.foot a:hover{color:#fff}

/* Entrance */
.rise{opacity:0;transform:translateY(18px);filter:blur(8px);animation:rise 1s var(--ease) forwards}
@keyframes rise{to{opacity:1;transform:none;filter:blur(0)}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rise{opacity:1;transform:none;filter:none}
  html{scroll-behavior:auto}
}