/* azeri.ai studio look: deep indigo (not black) + lilac / sky blue / pink.
   Both pages use it (body.studio). Change the shades in the first block. */
.studio{
  --bg:#1d1850; --bg2:#241e5e; --surface:#2c2570; --line:rgba(255,255,255,.14);
  --lilac:#a78bfa; --lilac-d:#7c5cf0; --sky:#6cc3ff; --pink:#ff8fc7;
  --ink:#f5f2ff; --muted:#bdb7e6; --dark:#1c1840;
  --grad:linear-gradient(100deg,var(--lilac-d),var(--sky) 50%,var(--pink));
  --soft:linear-gradient(135deg,#261f66,#1f2a6b 50%,#3a2068);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* game-palette names remapped, so shared and page styles recolor themselves */
  --teal:#7c5cf0; --teal-d:#5a3fd6; --teal-dd:#141038; --teal-l:#e6dcff;
  --sand:var(--bg2); --sand-d:#463d96; --white:var(--surface); --gold:#ff8fc7; --gold-d:#e060a8;
  background:var(--bg);color:var(--ink);
}
.studio h2{letter-spacing:-1px}
.studio .eyebrow{color:#c3b2ff;font-family:var(--mono);letter-spacing:1px;font-weight:700}
.studio .eyebrow:before{background:var(--grad);border-radius:7px;transform:rotate(12deg);width:16px;height:16px}

/* header */
.studio .brand{color:#fff} .studio .brand b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.studio .brand i{background:var(--grad);box-shadow:0 4px 14px rgba(124,92,240,.5);color:#fff}
.studio header.solid{background:rgba(29,24,80,.82);box-shadow:0 4px 24px rgba(0,0,0,.25)}
.studio .nav nav a,.studio header.solid .nav nav a{color:var(--muted)}
.studio .nav nav a:hover,.studio header.solid .nav nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.studio .lang,.studio header.solid .lang{background:rgba(255,255,255,.08);border-color:var(--line)}
.studio .lang button,.studio header.solid .lang button{color:var(--muted)}
.studio .lang button.on{background:var(--grad);color:#fff!important}

/* buttons */
.studio .btn-gold{background:var(--grad);background-size:200% 100%;color:#fff;box-shadow:0 10px 34px rgba(124,92,240,.55);animation:gradmove 6s ease infinite}
.studio .btn-gold:active{box-shadow:0 4px 12px rgba(124,92,240,.4)}
.studio .btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:2px solid rgba(255,255,255,.3);backdrop-filter:none}
@keyframes gradmove{50%{background-position:100% 0}}

/* hero */
.studio .hero{color:var(--ink);background:var(--bg)}
.blobs{position:absolute;inset:0;overflow:hidden;filter:blur(80px);opacity:.6}
.blobs i{position:absolute;border-radius:50%;animation:drift 16s ease-in-out infinite alternate}
.blobs i:nth-child(1){width:46vw;height:46vw;left:-10vw;top:-12vw;background:#7c5cf0}
.blobs i:nth-child(2){width:40vw;height:40vw;right:-8vw;top:6vw;background:#2f8fe8;animation-duration:20s;animation-delay:-5s}
.blobs i:nth-child(3){width:38vw;height:38vw;left:28vw;bottom:-22vw;background:#e754a6;animation-duration:24s;animation-delay:-9s}
@keyframes drift{to{transform:translate(8vw,6vw) scale(1.2)}}
.studio .hero:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,#000 30%,transparent 80%);
  animation:gridmove 18s linear infinite}
@keyframes gridmove{to{background-position:56px 56px}}
.studio .kicker{background:rgba(255,255,255,.1);color:#ddd2ff;border:1px solid var(--line);backdrop-filter:blur(6px);font-family:var(--mono);letter-spacing:1px;font-weight:700}
.studio .kicker:before{content:"● ";color:#3ddc97;animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}
.studio .hero h1{text-shadow:none;letter-spacing:-2px}
.studio .hero h1 .w:nth-last-child(-n+2){background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.12em}
.studio .hero p.sub{color:var(--muted)}
.studio .floaters img{filter:drop-shadow(0 14px 18px rgba(0,0,0,.4))}
.studio .scrollhint{border-color:rgba(255,255,255,.4)}.studio .scrollhint:after{background:#fff}

/* marquee */
.studio .marquee{background:var(--grad);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.studio .marquee span{color:#fff}

/* what we do */
.do{padding-bottom:70px}
.dogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.docard{position:relative;border-radius:28px;padding:30px 28px 28px;background:linear-gradient(var(--bg2),var(--bg2)) padding-box,var(--grad) border-box;border:2px solid transparent;box-shadow:0 14px 40px rgba(0,0,0,.25)}
.docard .no{font-family:var(--mono);font-weight:700;color:var(--lilac);font-size:14px}
.docard img{width:84px;height:84px;object-fit:contain;margin:14px 0 16px;filter:drop-shadow(0 10px 14px rgba(0,0,0,.4))}
.docard b{display:block;font-size:26px;font-weight:900;letter-spacing:-.5px}
.docard p{margin:8px 0 18px;color:var(--muted)}
.docard i{font-style:normal;font-family:var(--mono);font-size:12.5px;font-weight:700;background:rgba(255,255,255,.1);color:#ddd2ff;padding:5px 12px;border-radius:99px}
.docard i:before{content:"● ";color:#3ddc97}
@media(max-width:860px){.dogrid{grid-template-columns:1fr}}

/* game card */
.studio .show{background:#322a80;box-shadow:0 30px 80px rgba(0,0,0,.4);border:1px solid var(--line)}
.studio .show .art:after{background:linear-gradient(90deg,transparent 60%,#322a80)}
.studio .show .tag{font-family:var(--mono);letter-spacing:1px;font-weight:700}
.studio .show .tag,.studio .show h3 small{color:#ffb3dc}
.studio .next{border-color:var(--sand-d);background:var(--soft);color:var(--muted)}
.studio .next .q{background:rgba(255,255,255,.1);color:var(--lilac)}
@media(max-width:860px){.studio .show .art:after{background:linear-gradient(180deg,transparent 60%,#322a80)}}

/* numbers */
.studio .numsec{background:var(--grad);background-size:200% 100%;animation:gradmove 14s ease infinite;padding:64px 0}
.studio .nums{margin-top:0;gap:0}
.studio .num{background:none;border:0;border-radius:0;padding:6px 34px;border-left:1.5px solid rgba(255,255,255,.35);backdrop-filter:none}
.studio .num:first-child{border-left:0;padding-left:0}
.studio .num b{color:#fff;font-family:inherit;font-weight:900;font-size:clamp(56px,7vw,104px);letter-spacing:-4px;line-height:.9;text-shadow:0 6px 24px rgba(40,20,120,.35)}
.studio .num span{display:block;margin-top:12px;font-family:var(--mono);font-size:13.5px;letter-spacing:2px;text-transform:uppercase;font-weight:700;opacity:.95}
@media(max-width:860px){.studio .nums{gap:30px 0}.studio .num{padding:0 20px}.studio .num:nth-child(odd){border-left:0;padding-left:0}}

/* about */
.studio #about{background:var(--soft)}
.studio .value,.studio .founder{box-shadow:0 10px 30px rgba(0,0,0,.25);border:1px solid var(--line)}
.studio .value{transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.studio .value:hover{transform:translateX(8px)}
.studio .founder .av{background:var(--grad)}
.studio .founder small{color:#c3b2ff;font-family:var(--mono)}
.studio .alinks a{border-color:var(--line);color:#ddd2ff;background:rgba(255,255,255,.08)}
.studio .orn{display:none}

/* contact */
.studio .contact{background:transparent;color:#fff}
.studio .contact .box{background:var(--grad);background-size:200% 100%;animation:gradmove 12s ease infinite;border-radius:40px;padding:60px 24px 64px;color:#fff;box-shadow:0 30px 80px rgba(0,0,0,.35);position:relative;overflow:hidden}
.studio .contact .btn-gold{background:#fff;color:var(--lilac-d);animation:none;box-shadow:0 10px 30px rgba(0,0,0,.2)}

/* footer */
.studio footer{background:#141038}
.studio footer a:hover{color:var(--pink)}

/* phone: keep floating pieces small and in the corners, away from the text */
@media(max-width:860px){
  .floaters img{width:46px!important}
  .floaters img:nth-child(1){left:5%!important;top:11%!important}
  .floaters img:nth-child(2){right:6%!important;top:12%!important}
  .floaters img:nth-child(3){left:6%!important;bottom:6%!important}
  .floaters img:nth-child(4){right:7%!important;bottom:7%!important}
  .studio .hero h1{letter-spacing:-1px}
}

/* ---------- game page (novruz.html) ---------- */
.studio .bwrap{background:linear-gradient(160deg,#fff,#e4dbff);box-shadow:0 0 0 6px #fff,0 0 0 10px var(--lilac),0 30px 70px rgba(0,0,0,.45)}
.studio .board{background:repeating-conic-gradient(rgba(124,92,240,.16) 0 25%,rgba(108,195,255,.12) 0 50%) 0 0/calc(200%/6) calc(200%/6)}
.studio .hero .logo{filter:drop-shadow(0 12px 24px rgba(0,0,0,.4))}
.studio .welcome .pic img.main{box-shadow:0 26px 60px rgba(0,0,0,.4)}
.studio .heroes{background:var(--soft)}
.studio .medal .m{background:radial-gradient(circle at 50% 35%,#fff,#d9ccff);box-shadow:0 0 0 4px var(--bg2),0 0 0 7px var(--sand-d),0 10px 20px rgba(0,0,0,.3)}
.studio .medal .m.drg{background:radial-gradient(circle,#ffe3f1,#c9b6ff)}
.studio .medal.on .m{box-shadow:0 0 0 4px var(--bg2),0 0 0 8px var(--pink),0 16px 30px rgba(255,143,199,.35)}
.studio .medal.on span{color:#fff}
.studio .stage{background:var(--surface);box-shadow:0 24px 60px rgba(0,0,0,.35);border:1px solid var(--line)}
.studio .stage h3{color:#fff}
.studio .world{background:linear-gradient(135deg,#17123f,#3d2a9c 55%,#7a3fb0);color:#fff}
.studio .world .eyebrow,.studio .dragon .eyebrow{color:#ffb3dc!important}
.studio .tour.last{background:linear-gradient(90deg,#d9efff,#fff,#ffe3f1);color:var(--dark)}
.studio .item,.studio .mech{background:linear-gradient(145deg,#372f85,#2a2470);box-shadow:0 8px 22px rgba(0,0,0,.25);border:1px solid var(--line)}
.studio .boost{background:linear-gradient(170deg,var(--lilac-d),var(--sky));box-shadow:0 20px 50px rgba(0,0,0,.3)}
.studio .boost:nth-child(even){background:linear-gradient(170deg,var(--pink),var(--lilac-d))}
.studio .boost:before{background:radial-gradient(rgba(255,255,255,.5),transparent 65%)}
.studio .dragon{background:radial-gradient(ellipse at 50% 125%,#ff8fc7 0%,#7c5cf0 38%,#141038 82%)}
.studio .stg b{border-color:rgba(255,255,255,.45)}
.studio .stg:not(:last-child):after{color:#fff}
.studio .fc{box-shadow:0 20px 44px rgba(0,0,0,.45);border-color:#fff;background:#fff}
.studio .cta{color:#fff}
.studio .cta .shade{background:linear-gradient(rgba(20,16,56,.55),rgba(70,45,170,.86))}
.studio .cta .btn-gold{background:#fff;color:var(--lilac-d);animation:none}