/* =========================================================
   Shalinkumar Game Studio — public site
   Palette: night-violet arcade with cyan / pink / sun accents
   ========================================================= */
:root {
  --ink: #0D0B26;
  --ink-2: #140F35;
  --panel: #1B1646;
  --panel-2: #231C57;
  --line: #342C74;
  --text: #EEEAFF;
  --muted: #A39CD0;
  --cyan: #3EF0E0;
  --cyan-deep: #16A99D;
  --pink: #FF4F8B;
  --pink-deep: #C22A63;
  --sun: #FFC94A;
  --sun-deep: #C9921A;
  --green: #6BFF8E;
  --display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --wrap: 1200px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ink); color: var(--text);
  font: 16px/1.65 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body::before { /* soft glow in the corners */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(60vw 50vh at 85% -10%, rgba(255,79,139,.16), transparent 70%),
              radial-gradient(50vw 50vh at -10% 30%, rgba(62,240,224,.10), transparent 70%);
}
img { max-width: 100%; display: block; }
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.1; margin: 0 0 .5em; font-weight: 700; letter-spacing: .01em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }
.center { text-align: center; }
.lead { font-size: 1.15rem; color: #D8D2FF; max-width: 62ch; }
.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
.wrap.narrow { max-width: 820px; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 4px; }
.hp { position: absolute; left: -9999px; opacity: 0; }
#stars { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* ---------- Loader ---------- */
#loader { position: fixed; inset: 0; z-index: 999; background: var(--ink); display: grid; place-items: center; transition: opacity .5s, visibility .5s; }
#loader.done { opacity: 0; visibility: hidden; }
/* Safety net: agar JavaScript fail ho jaye (ya logo image load na ho), loader
   khud 4 second baad hat jaata hai. Iske bina page hamesha ke liye dhaka reh
   jaata tha, jaisa lambi privacy policy par hua. */
#loader { animation: loader-failsafe .3s linear 4s forwards; }
@keyframes loader-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }
/* JS bilkul band ho to loader ka koi matlab hi nahi */
.no-js #loader { display: none !important; }
.loader-inner { width: min(320px, 80vw); text-align: center; }
.loader-logo { font: 700 3rem var(--display); color: var(--ink); background: var(--cyan); width: 96px; height: 96px; margin: 0 auto 24px; display: grid; place-items: center; border-radius: 20px; box-shadow: 0 8px 0 var(--cyan-deep), 0 0 50px rgba(62,240,224,.5); animation: bob 1.2s ease-in-out infinite; }
.loader-bar { height: 12px; border: 2px solid var(--line); border-radius: 99px; overflow: hidden; background: var(--ink-2); }
.loader-bar span { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--cyan) 0 12px, var(--pink) 12px 24px); transition: width .15s; }
.loader-text { margin-top: 12px; font-family: var(--display); color: var(--muted); }
@keyframes bob { 50% { transform: translateY(-8px); } }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--panel-2); --fg: var(--text); --sh: #120E30;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 1rem var(--display); letter-spacing: .02em; color: var(--fg); background: var(--bg);
  border: 0; border-radius: 10px; padding: 12px 20px; cursor: pointer; text-decoration: none !important;
  box-shadow: 0 4px 0 var(--sh); transition: transform .08s, box-shadow .08s, filter .2s; position: relative; white-space: nowrap;
}
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sh); }
.btn-primary { --bg: var(--cyan); --fg: #07201E; --sh: var(--cyan-deep); }
.btn-play { --bg: var(--sun); --fg: #2B1B00; --sh: var(--sun-deep); }
.btn-pink { --bg: var(--pink); --fg: #fff; --sh: var(--pink-deep); }
.btn-ghost { --bg: transparent; --sh: transparent; border: 2px solid var(--line); padding: 10px 18px; }
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }
.btn-sm { padding: 8px 14px; font-size: .9rem; }
.btn-ghost.btn-sm { padding: 6px 12px; }
.btn-lg { padding: 15px 26px; font-size: 1.1rem; }
.btn-block { width: 100%; }
.ico { flex: none; }

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 24px;
  padding: 12px max(20px, calc((100% - var(--wrap)) / 2)); background: rgba(13,11,38,.78);
  backdrop-filter: blur(14px); border-bottom: 1px solid rgba(52,44,116,.6); transition: padding .2s;
}
.nav.scrolled { padding-top: 8px; padding-bottom: 8px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font: 700 1.05rem var(--display); text-decoration: none !important; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; background: var(--pink); color: #fff; border-radius: 10px; font: 700 1rem var(--display); box-shadow: 0 3px 0 var(--pink-deep); transform: rotate(-6deg); transition: transform .3s; }
.brand:hover .brand-mark { transform: rotate(6deg) scale(1.08); }
.brand-mark.big { width: 64px; height: 64px; font-size: 1.6rem; margin: 0 auto 16px; }
.brand-text { max-width: 220px; line-height: 1.15; }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a { color: var(--muted); font: 600 .95rem var(--display); padding: 8px 12px; border-radius: 8px; text-decoration: none; position: relative; }
.nav-links a:hover, .nav-links a.active { color: var(--text); background: rgba(62,240,224,.08); }
.nav-links a.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; background: var(--cyan); border-radius: 2px; }
.nav-right { display: flex; gap: 10px; align-items: center; }
.nav-toggle { display: none; background: none; border: 0; color: var(--text); cursor: pointer; padding: 6px; }
.nav-mobile-auth { display: none; }
.player-chip { display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border: 2px solid var(--line); border-radius: 999px; color: var(--text); text-decoration: none !important; transition: border-color .2s; }
.player-chip:hover { border-color: var(--cyan); }
.avatar { --av: var(--cyan); width: 32px; height: 32px; border-radius: 50%; background: var(--av); color: var(--ink); font: 700 .85rem var(--display); display: grid; place-items: center; flex: none; }
.avatar.sm { width: 28px; height: 28px; font-size: .75rem; }
.chip-info { display: flex; flex-direction: column; gap: 3px; }
.chip-name { font: 600 .85rem var(--display); line-height: 1; }
.chip-xp { width: 64px; height: 5px; background: var(--ink-2); border-radius: 9px; overflow: hidden; }
.chip-xp i { display: block; height: 100%; background: var(--green); }
.chip-lv { font: 700 .8rem var(--display); color: var(--sun); }

/* ---------- Toasts ---------- */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; max-width: min(380px, calc(100% - 40px)); }
.toast { background: var(--panel-2); border: 2px solid var(--line); border-left: 6px solid var(--cyan); padding: 14px 18px; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.4); animation: toastIn .4s cubic-bezier(.2,1.4,.4,1) both; font-weight: 600; }
.toast-success { border-left-color: var(--green); }
.toast-error { border-left-color: var(--pink); }
.toast-info { border-left-color: var(--cyan); }
.toast-xp { border-left-color: var(--sun); background: linear-gradient(90deg, rgba(255,201,74,.18), var(--panel-2) 60%); }
.toast.out { animation: toastOut .3s forwards; }
@keyframes toastIn { from { transform: translateX(120%) scale(.9); opacity: 0; } }
@keyframes toastOut { to { transform: translateX(120%); opacity: 0; } }

/* ---------- Hero (title screen) ---------- */
.hero { padding: clamp(40px, 8vh, 90px) 0 40px; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.hero-kicker { font: 600 .95rem var(--display); color: var(--green); display: flex; align-items: center; gap: 10px; }
.blink-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.hero-title { font-size: clamp(2.8rem, 7.6vw, 6.4rem); line-height: .95; margin: 10px 0 22px; letter-spacing: -.01em; }
.ht-line { display: block; }
.ht-outline { color: transparent; -webkit-text-stroke: 2px var(--cyan); text-shadow: 0 0 30px rgba(62,240,224,.35); }
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.glitch::before { color: var(--pink); transform: translate(-3px, 0); }
.glitch::after { color: var(--cyan); transform: translate(3px, 0); }
.glitch.go::before { opacity: .8; animation: glitchA .45s steps(2) both; }
.glitch.go::after { opacity: .8; animation: glitchB .45s steps(2) both; }
@keyframes glitchA { 0% { clip-path: inset(10% 0 60% 0); } 33% { clip-path: inset(50% 0 20% 0); transform: translate(-6px, 2px); } 66% { clip-path: inset(80% 0 5% 0); } 100% { clip-path: inset(0 0 100% 0); opacity: 0; } }
@keyframes glitchB { 0% { clip-path: inset(70% 0 10% 0); } 33% { clip-path: inset(20% 0 60% 0); transform: translate(6px, -2px); } 66% { clip-path: inset(5% 0 80% 0); } 100% { clip-path: inset(100% 0 0 0); opacity: 0; } }
.hero-sub { font: 600 clamp(1.15rem, 2vw, 1.45rem) var(--display); color: var(--sun); min-height: 1.6em; margin-bottom: 8px; }
.typed::after { content: "▌"; color: var(--sun); animation: blink .8s steps(2) infinite; margin-left: 2px; }
.hero-desc { max-width: 52ch; font-size: 1.05rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.press-start { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 4px 0 var(--cyan-deep), 0 0 0 10px rgba(62,240,224,0); } 0%, 100% { box-shadow: 0 4px 0 var(--cyan-deep), 0 0 0 0 rgba(62,240,224,.45); } }

.crt { position: relative; border-radius: var(--r-lg); padding: 14px; background: linear-gradient(160deg, #2A2266, #120E32); border: 2px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 0 0 6px rgba(0,0,0,.25); transform: perspective(1000px) rotateY(-8deg) rotateX(4deg); transition: transform .6s; }
.crt:hover { transform: perspective(1000px) rotateY(0) rotateX(0); }
.crt-media { --h: 200; aspect-ratio: 4/3; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, hsl(var(--h) 70% 45%), hsl(calc(var(--h) + 60) 70% 30%)); display: grid; place-items: center; }
.crt-media img { width: 100%; height: 100%; object-fit: cover; }
.crt-scan { position: absolute; inset: 14px 14px auto 14px; aspect-ratio: 4/3; border-radius: 14px; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 4px); mix-blend-mode: multiply; }
.crt-hud { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 6px 4px; }
.crt-hud strong { font-family: var(--display); font-size: 1.1rem; flex: 1; }
.crt-label { width: 100%; font-size: .8rem; color: var(--pink); font-weight: 700; }

.hud-bar { margin-top: 56px; display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--line); border-radius: var(--r); background: rgba(27,22,70,.6); backdrop-filter: blur(6px); }
.hud-bar > div { padding: 18px 22px; display: flex; flex-direction: column; }
.hud-bar > div + div { border-left: 2px dashed var(--line); }
.hud-num { font: 700 clamp(1.5rem, 3vw, 2.1rem) var(--display); color: var(--cyan); line-height: 1.1; }
.hud-label { color: var(--muted); font-size: .9rem; }

/* ---------- Sections ---------- */
.section { padding: clamp(56px, 9vw, 96px) 0; }
.section-tight { padding-top: 20px; }
.section-alt { background: linear-gradient(180deg, rgba(20,15,53,.0), rgba(20,15,53,.85) 12%, rgba(20,15,53,.85) 88%, rgba(20,15,53,0)); }
.sec-head { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 20px; margin-bottom: 30px; }
.sec-head h2 { margin: 0; }
.sec-head p { grid-column: 1; margin: 6px 0 0; }
.sec-link { grid-column: 2; grid-row: 1 / span 2; font: 600 .95rem var(--display); }
/* Breadcrumb — schema ke saath match karta hua, dikhne wala trail. */
.crumbs { padding: 14px 0 0; font-size: .84rem; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
.crumbs li { display: flex; align-items: center; min-width: 0; }
.crumbs li + li::before {
  content: "›"; margin: 0 8px; color: var(--muted); opacity: .6; flex: none;
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
/* Aakhri crumb lamba ho sakta hai (case study ka title) — phone par
   use kaat do, warna line toot ke do-teen row le leti hai. */
.crumbs [aria-current] {
  color: var(--text); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch;
}
@media (max-width: 560px) { .crumbs [aria-current] { max-width: 20ch; } }
.crumbs + .page-head,
.crumbs + .section { padding-top: 26px; }

.page-head { padding: 64px 0 30px; }
.page-head h1 { margin-bottom: 10px; }

/* ---------- Game cards ---------- */
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.game-card { background: var(--panel); border: 2px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; transition: border-color .25s, box-shadow .25s; transform-style: preserve-3d; will-change: transform; }
.game-card:hover { border-color: var(--cyan); box-shadow: 0 18px 40px rgba(0,0,0,.4), 0 0 0 1px var(--cyan), 0 0 30px rgba(62,240,224,.2); }
.gc-thumb { --h: 200; position: relative; aspect-ratio: 16/10; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, hsl(var(--h) 75% 50%), hsl(calc(var(--h) + 70) 70% 28%)); }
.gc-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.game-card:hover .gc-thumb img { transform: scale(1.07); }
/* Play Store ka icon square (512x512) hota hai. `cover` use landscape card me
   upar-neeche se kaat deta tha (chess ka ghoda aadha, Sudoku ka "6" zoom).
   Icon ko poora, square aur beech me dikhao — peeche halka gradient rahega. */
.gc-thumb.icon img {
  width: auto; height: 68%; max-width: 68%; aspect-ratio: 1; object-fit: contain;
  border-radius: 18%; box-shadow: 0 6px 20px rgba(0,0,0,.45);
}
.game-card:hover .gc-thumb.icon img { transform: scale(1.05); }
.gc-placeholder { font: 700 3rem var(--display); color: rgba(255,255,255,.9); text-shadow: 0 4px 0 rgba(0,0,0,.25); }
.gc-placeholder.big { font-size: 6rem; }
.gc-type { position: absolute; top: 10px; left: 10px; font: 700 .72rem var(--display); padding: 4px 9px; border-radius: 6px; background: rgba(13,11,38,.8); color: var(--cyan); backdrop-filter: blur(4px); }
.gc-type.playstore { color: var(--sun); }
.gc-hover-play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(13,11,38,.45); color: var(--cyan); opacity: 0; transition: opacity .25s; }
.gc-hover-play .ico { width: 64px; height: 64px; padding: 16px; background: var(--cyan); color: var(--ink); border-radius: 50%; transform: scale(.6); transition: transform .3s cubic-bezier(.2,1.6,.4,1); }
.gc-thumb:hover .gc-hover-play { opacity: 1; }
.gc-thumb:hover .gc-hover-play .ico { transform: scale(1); }
.gc-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.gc-top { display: flex; align-items: flex-start; gap: 10px; }
.gc-top h3 { flex: 1; margin-bottom: 6px; font-size: 1.15rem; }
.gc-top h3 a { color: var(--text); }
.gc-body p { font-size: .93rem; margin: 10px 0 14px; flex: 1; }
.gc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-block; font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(62,240,224,.1); color: var(--cyan); border: 1px solid rgba(62,240,224,.25); width: fit-content; }
.chip-playstore { color: var(--sun); background: rgba(255,201,74,.1); border-color: rgba(255,201,74,.3); }
.chip-btn { cursor: pointer; font-family: var(--body); }
.chip-btn.on { background: var(--cyan); color: var(--ink); }
.fav-btn { background: none; border: 2px solid var(--line); color: var(--muted); border-radius: 50%; width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer; flex: none; transition: color .2s, border-color .2s, transform .2s; }
.fav-btn:hover { color: var(--pink); border-color: var(--pink); }
.fav-btn.on { color: var(--pink); border-color: var(--pink); background: rgba(255,79,139,.12); }
.fav-btn.pop { animation: pop .4s cubic-bezier(.2,1.8,.4,1); }
.fav-btn.fav-wide { width: auto; border-radius: 10px; display: inline-flex; gap: 8px; padding: 0 16px; height: auto; }
@keyframes pop { 40% { transform: scale(1.35); } }

.empty { text-align: center; padding: 50px 20px; border: 2px dashed var(--line); border-radius: var(--r); }
.empty-icon { font-size: 3rem; margin-bottom: 10px; animation: bob 2s ease-in-out infinite; }

/* ---------- Filters ---------- */
.filters { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 24px; }
.tabs { display: inline-flex; gap: 4px; padding: 5px; background: var(--ink-2); border: 2px solid var(--line); border-radius: 12px; flex-wrap: wrap; }
.tab { font: 600 .95rem var(--display); color: var(--muted); background: none; border: 0; padding: 9px 16px; border-radius: 8px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.tab:hover { color: var(--text); }
.tab.active { background: var(--cyan); color: var(--ink); }
.tab .count { font-style: normal; font-size: .75rem; background: var(--pink); color: #fff; border-radius: 99px; padding: 0 7px; }
/* Tabs aur genre chips ab <a> hain (server-side filter), to underline hata do. */
.tab, .genre-row .chip-btn { text-decoration: none; }
.search { flex: 1; min-width: 220px; max-width: 360px; }
.search-wrap { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 240px; flex-wrap: wrap; }
.search-wrap .search { flex: 1; min-width: 160px; }

/* Result count + per-page chooser */
.list-meta {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
}
.list-meta p { margin: 0; font-size: .92rem; }
.per-page { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.per-page select {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 10px; font: inherit; font-size: .9rem; cursor: pointer;
}

/* Pagination */
.pager-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap; margin-top: 34px;
}
.pager { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pager a {
  min-width: 38px; height: 38px; padding: 0 10px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--line);
  text-decoration: none; font: 600 .9rem var(--display);
}
.pager a:hover { color: var(--text); border-color: var(--cyan); }
.pager a.on { background: var(--cyan); color: var(--ink); border-color: var(--cyan); }
.pager .gap { color: var(--muted); padding: 0 2px; }

/* Homepage ka "See more games" button */
.see-more { display: flex; justify-content: center; margin-top: 28px; }
.see-more .muted { font-weight: 400; }
.genre-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.no-results { text-align: center; padding: 30px; }

/* ---------- Services / about ---------- */
.services { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.service { padding: 24px; border-left: 3px solid var(--line); transition: border-color .3s, background .3s; border-radius: 0 var(--r) var(--r) 0; }
.service:hover { border-color: var(--pink); background: rgba(255,79,139,.05); }
.service-icon { font-size: 2rem; display: block; margin-bottom: 10px; }
.service h3 { font-size: 1.15rem; }
.about-teaser { display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; align-items: center; }
.mv { display: grid; gap: 16px; }
.mv-wide { grid-template-columns: 1fr 1fr; }
.mv-item { background: var(--panel); border: 2px solid var(--line); border-radius: var(--r); padding: 22px 24px; position: relative; overflow: hidden; }
.mv-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--sun); }
.mv-item + .mv-item::before { background: var(--pink); }
.mv-item h4 { color: var(--sun); font-size: 1rem; }
.mv-item + .mv-item h4 { color: var(--pink); }
.mv-item p { margin: 0; font-size: 1.05rem; }
.about-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; }

/* Ek line wali page heading.
   "About Shalinkumar Game Studio" 1200px me bhi default size par do line
   le leti thi. clamp() isse available chaudai ke hisaab se chhota kar deta
   hai, aur nowrap pakka karta hai ki ye kabhi tuute nahi. Chhoti screen par
   neeche wala media block ise wapas normal wrapping par le aata hai. */
.page-title-1line {
  white-space: nowrap;
  font-size: clamp(1.6rem, 4.6vw, 3.1rem);
  line-height: 1.12;
}

/* About page ka lead — heading ke neeche, left column me. */
.about-lead { margin-bottom: 26px; }

.prose { max-width: 68ch; font-size: 1.05rem; color: #DCD6FF; }

/* Text apne column ki poori chaudai le.
   Aam tor par .prose par 68ch ki readability limit hoti hai, par yahan
   column khud hi 1.5fr ka hai — limit lagne se text box ke kinare se
   pehle hi ruk jaata tha aur dayein taraf khali patti dikhti thi.
   Ye rule .prose ke BAAD hona zaroori hai, warna 68ch jeet jaata hai. */
.prose-full { max-width: none; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 700; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; counter-reset: s; }
.steps li { counter-increment: s; background: var(--panel); border: 2px solid var(--line); border-radius: var(--r); padding: 20px; position: relative; }
.steps li::before { content: "Stage " counter(s); display: block; font: 700 .8rem var(--display); color: var(--green); margin-bottom: 8px; }
.steps b { display: block; font: 700 1.1rem var(--display); margin-bottom: 4px; }
.steps span { color: var(--muted); font-size: .92rem; }

/* ---------- CTA panels ---------- */
.cta-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cta-panel { display: block; padding: 36px; border-radius: var(--r-lg); color: var(--text); text-decoration: none !important; position: relative; overflow: hidden; border: 2px solid var(--line); transition: transform .3s, border-color .3s; }
.cta-panel:hover { transform: translateY(-4px); }
.cta-client { background: linear-gradient(140deg, rgba(62,240,224,.16), var(--panel) 60%); }
.cta-client:hover { border-color: var(--cyan); }
.cta-team { background: linear-gradient(140deg, rgba(255,201,74,.16), var(--panel) 60%); }
.cta-team:hover { border-color: var(--sun); }
.cta-emoji { font-size: 2.6rem; display: block; margin-bottom: 12px; }
.cta-panel p { color: var(--muted); max-width: 40ch; }

/* ---------- Social ---------- */
.socials { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }
.social { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--text); background: var(--panel-2); border: 2px solid var(--line); transition: transform .2s, background .2s, color .2s; }
/* Icon ko box ke hisaab se bhariye. Pehle box 42px ka tha par icon sirf
   20px ka (width/height attribute se) — aadhe se kam bhara dikhta tha.
   CSS attribute ko override karti hai, isliye har jagah ek jaisa rahega. */
.social .ico { width: 100%; height: 100%; }
.social:hover { transform: translateY(-3px) rotate(-4deg); }
.social-youtube:hover { background: #FF0033; border-color: #FF0033; color: #fff; }
.social-instagram:hover { background: #E1306C; border-color: #E1306C; color: #fff; }
.social-linkedin:hover { background: #0A66C2; border-color: #0A66C2; color: #fff; }
.social-facebook:hover { background: #1877F2; border-color: #1877F2; color: #fff; }
.social-playstore:hover { background: #01875F; border-color: #01875F; color: #fff; }
.social-twitter:hover { background: #fff; color: #000; }
.social-discord:hover { background: #5865F2; border-color: #5865F2; color: #fff; }
.socials.big .social { width: 50px; height: 50px; }
/* `auto-fit` ek akele tile ko poori width tak kheench deta tha (ek hi social
   link hone par wo 1200px ka ban jaata tha). Flex + fixed basis se har tile
   apni hi naap ka rehta hai, chahe 1 ho ya 12. */
.social-tiles { display: flex; flex-wrap: wrap; gap: 16px; }
.social-tiles .social-tile { flex: 0 1 180px; }
/* Phone par 180px ki do tiles ek line me fit nahi hoti, aur grow band hone
   ki wajah se ek hi aati thi — daayein poori jagah khali reh jaati thi.
   Grid se hamesha theek do column bante hain, chaudai jitni bhi ho. */
@media (max-width: 600px) {
  .social-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .social-tiles .social-tile { flex: none; padding: 20px 10px; gap: 8px; font-size: .9rem; text-align: center; }
}
/* bahut chhoti screen par label ko todne ki jagah do */
@media (max-width: 360px) {
  .social-tiles { gap: 10px; }
  .social-tiles .social-tile { padding: 18px 6px; font-size: .82rem; }
}
.social-tile { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 16px; border-radius: var(--r); background: var(--panel); border: 2px solid var(--line); color: var(--text); font: 600 1rem var(--display); text-decoration: none !important; transition: transform .25s, border-color .25s, color .25s; }
.social-tile:hover { transform: translateY(-5px); }
.social-tile.social-youtube:hover { border-color: #FF0033; color: #FF5470; }
.social-tile.social-instagram:hover { border-color: #E1306C; color: #FF6FA3; }
.social-tile.social-linkedin:hover { border-color: #0A66C2; color: #5AA7FF; }
.social-tile.social-playstore:hover { border-color: #01875F; color: #3EE6A5; }
.social-tile.social-facebook:hover { border-color: #1877F2; color: #6FAEFF; }
.social-tile.social-discord:hover { border-color: #5865F2; color: #9AA2FF; }

/* ---------- Forms ---------- */
.card-panel { background: var(--panel); border: 2px solid var(--line); border-radius: var(--r); padding: 26px; margin-bottom: 20px; }
.form { display: flex; flex-direction: column; gap: 16px; }
.form h2, .form h3 { margin-bottom: 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field > span { font-weight: 700; font-size: .92rem; }
.input { width: 100%; font: inherit; color: var(--text); background: var(--ink-2); border: 2px solid var(--line); border-radius: 10px; padding: 11px 14px; transition: border-color .2s, box-shadow .2s; }
.input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(62,240,224,.15); }
.input::placeholder { color: #6E67A0; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
textarea.input { resize: vertical; }
input[type=file].input { padding: 9px; }
input[type=file]::file-selector-button { font: 600 .85rem var(--display); background: var(--panel-2); color: var(--text); border: 0; border-radius: 6px; padding: 7px 12px; margin-right: 12px; cursor: pointer; }
.err { color: var(--pink); font-style: normal; font-size: .86rem; font-weight: 600; }
.check-row { display: flex; flex-wrap: wrap; gap: 8px; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.check-row .check span { padding: 7px 14px; border: 2px solid var(--line); border-radius: 999px; font-weight: 600; font-size: .9rem; transition: all .2s; }
.check-row .check input { position: absolute; opacity: 0; }
.check-row .check input:checked + span { background: var(--cyan); color: var(--ink); border-color: var(--cyan); }
.check-row .check input:focus-visible + span { outline: 3px solid var(--sun); }
.req-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.req-type { position: relative; cursor: pointer; }
.req-type input { position: absolute; opacity: 0; }
.req-type span { display: block; height: 100%; padding: 14px; border: 2px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.02); transition: border-color .2s, background .2s, transform .2s, box-shadow .2s; }
.req-type b { display: block; font-family: var(--display); font-size: .98rem; }
.req-type small { display: block; margin-top: 4px; color: var(--muted); font-size: .8rem; }
.req-type:hover span { transform: translateY(-2px); }
.req-type input:checked + span { border-color: var(--pink); background: rgba(255,79,139,.1); box-shadow: 0 0 22px rgba(255,79,139,.25); }
.req-type input:focus-visible + span { outline: 3px solid var(--sun); }
@media (max-width: 640px) { .req-types { grid-template-columns: 1fr; } }
.alert { padding: 12px 16px; border-radius: 10px; font-weight: 600; }
.alert-error { background: rgba(255,79,139,.12); border: 2px solid var(--pink); color: #FFB3CC; }
.form-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px; align-items: start; }
.side-info { position: sticky; top: 100px; padding: 10px 0; }
.mini-steps { padding-left: 20px; color: var(--muted); }
.mini-steps li { margin-bottom: 10px; }
.mini-steps li::marker { color: var(--cyan); font-weight: 700; }
.side-contact { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.side-contact a { display: inline-flex; gap: 8px; align-items: center; }
.perks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; font-size: 1.02rem; }
.success-card { text-align: center; padding: 50px 30px; background: var(--panel); border: 2px solid var(--green); border-radius: var(--r-lg); }
.swatches { display: flex; gap: 10px; }
.swatch input { position: absolute; opacity: 0; }
.swatch span { display: block; width: 36px; height: 36px; border-radius: 50%; background: var(--c); border: 3px solid transparent; cursor: pointer; transition: transform .2s; }
.swatch input:checked + span { border-color: #fff; transform: scale(1.12); }

/* ---------- Careers ---------- */
.roles { display: grid; gap: 14px; }
.role { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 22px 24px; background: var(--panel); border: 2px solid var(--line); border-radius: var(--r); transition: border-color .2s; }
.role:hover { border-color: var(--sun); }
.role h3 { margin-bottom: 8px; }
.role-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.role p { margin: 0; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 32px; align-items: start; }
.contact-cards { display: grid; gap: 12px; }
.contact-card { display: flex; gap: 16px; align-items: center; padding: 18px 20px; background: var(--panel); border: 2px solid var(--line); border-radius: var(--r); color: var(--text); text-decoration: none !important; transition: border-color .2s, transform .2s; }
a.contact-card:hover { border-color: var(--cyan); transform: translateX(4px); }
.contact-card .ico { color: var(--cyan); }
.contact-card b { display: block; font-family: var(--display); color: var(--muted); font-size: .85rem; }
.map { margin-top: 30px; border-radius: var(--r); overflow: hidden; border: 2px solid var(--line); }
.map iframe { width: 100%; height: 360px; border: 0; display: block; }

/* ---------- Auth ---------- */
.auth { min-height: 75vh; display: grid; place-items: center; padding: 50px 20px; }
.auth-box { width: min(460px, 100%); display: flex; flex-direction: column; gap: 16px; }
.auth-top { text-align: center; }
.auth-top h1 { font-size: 2rem; }

/* ---------- Game detail & player ---------- */
.gd-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; }
.gd-media { --h: 200; border-radius: var(--r-lg); overflow: hidden; border: 2px solid var(--line); background: linear-gradient(135deg, hsl(var(--h) 70% 45%), hsl(calc(var(--h) + 60) 70% 28%)); min-height: 300px; display: grid; place-items: center; }
.gd-media img { width: 100%; height: 100%; object-fit: cover; }
.gd-media .video-frame { width: 100%; }
/* Play Store icon (square) ko yahan bhi poora dikhao, kata hua nahi */
.gd-media.icon { padding: 38px; }
.gd-media.icon img { width: auto; height: auto; max-width: 260px; max-height: 260px; aspect-ratio: 1; object-fit: contain; border-radius: 20%; box-shadow: 0 10px 34px rgba(0,0,0,.5); }
.gd-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.gd-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0 14px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; margin-bottom: 14px; }
.video-frame { position: relative; aspect-ratio: 16/9; background: #000; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.player-page { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
.player-bar { display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: var(--ink-2); border-bottom: 2px solid var(--line); }
.player-title { flex: 1; font-family: var(--display); font-size: 1.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-tools { display: flex; gap: 8px; }
/* grid ki jagah flex: grid item me `height: 100%` sahi se resolve nahi hoti,
   jisse fixed-ratio games stage se bade ho jaate the. */
.player-stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; background: #000; min-height: 0; }
.player-stage iframe { width: 100%; height: 100%; border: 0; background: #000; }
/* Fixed-ratio games (portrait / square).
   Pehle `display: grid` + `height: 100%` tha. Grid item me percentage height
   theek resolve nahi hoti, to aspect-ratio ne width se height nikaal li aur
   iframe stage se bada ho gaya — game upar-neeche se kat raha tha.
   Flex me height:100% definite container ke against sahi resolve hoti hai,
   aur max-width game ko chaudi window me bhi andar rakhta hai. */
/* Stage ko container bana do, taaki cqw/cqh iski asli naap dein.
   Isse game ko dono taraf ki jagah ek saath naapi ja sakti hai. */
.player-stage.portrait, .player-stage.square { container-type: size; }

/* Responsive builds (landscape) poora stage bharte hain — unka canvas
   `position: fixed; inset: 0` hai aur game apni UI khud fit karta hai,
   isliye koi fixed ratio nahi thopna chahiye. Sirf bahut chaudi monitor
   par ek upper limit rakhi hai, taaki game aadhi screen chaudi patti na
   ban jaaye — baaki jagah stage ke kaale background me chali jaati hai. */
.player-stage.landscape iframe { max-width: 1600px; margin-inline: auto; }

/* width = jo bhi chhota ho: available chaudai, ya (available oonchai x ratio).
   Isi se game hamesha poora dikhta hai — chaudi window me bhi, patli me bhi,
   fullscreen me bhi. Na kata hua, na khincha hua. */
.player-stage.square iframe {
  aspect-ratio: 1;
  width: min(100cqw, 100cqh);
  height: auto;
}
.player-stage.portrait iframe {
  aspect-ratio: 9 / 16;
  width: min(100cqw, calc(100cqh * 9 / 16));
  height: auto;
}
.player-boot { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: var(--muted); pointer-events: none; transition: opacity .4s; }
.player-boot.hide { opacity: 0; }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 300; display: none; place-items: center; padding: 20px; }
.modal.open { display: grid; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(5,4,20,.85); backdrop-filter: blur(4px); }
.modal-box { position: relative; width: min(960px, 100%); border-radius: var(--r); overflow: hidden; border: 2px solid var(--line); animation: zoomIn .35s cubic-bezier(.2,1.3,.4,1); }
.modal-close { position: absolute; top: 8px; right: 8px; z-index: 2; background: var(--ink); color: var(--text); border: 0; border-radius: 50%; width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer; }
@keyframes zoomIn { from { transform: scale(.85); opacity: 0; } }

/* ---------- Dashboard ---------- */
.player-card { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; padding: 30px; border-radius: var(--r-lg); background: linear-gradient(120deg, var(--panel-2), var(--panel) 50%, rgba(255,79,139,.15)); border: 2px solid var(--line); }
.pc-avatar { --av: var(--cyan); position: relative; width: 110px; height: 110px; border-radius: 28px; background: var(--av); color: var(--ink); font: 700 2.6rem var(--display); display: grid; place-items: center; box-shadow: 0 8px 0 rgba(0,0,0,.35); transform: rotate(-4deg); }
.pc-lv { position: absolute; bottom: -12px; right: -12px; background: var(--sun); color: #2B1B00; font: 700 .9rem var(--display); padding: 4px 10px; border-radius: 8px; transform: rotate(4deg); box-shadow: 0 3px 0 var(--sun-deep); }
.pc-main h1 { margin-bottom: 6px; }
.pc-main > p:first-child { margin: 0; }
.pc-rank { display: inline-flex; gap: 6px; align-items: center; font: 600 .95rem var(--display); color: var(--sun); margin-bottom: 14px; }
.xpbar { height: 16px; border-radius: 99px; background: var(--ink); border: 2px solid var(--line); overflow: hidden; margin-bottom: 8px; }
.xpbar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(-45deg, var(--green) 0 10px, #4FE077 10px 20px); border-radius: 99px; transition: width 1.4s cubic-bezier(.2,.8,.2,1); box-shadow: 0 0 20px rgba(107,255,142,.5); }
.pc-actions { display: flex; flex-direction: column; gap: 10px; }
.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 24px 0; }
.dash-stats > div { background: var(--panel); border: 2px solid var(--line); border-radius: var(--r); padding: 18px 20px; display: flex; flex-direction: column; }
.dash-stats b { font: 700 1.8rem var(--display); color: var(--cyan); }
.dash-stats span { color: var(--muted); font-size: .9rem; }
.dash-tabs { margin-bottom: 20px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeUp .35s both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } }
.dash-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.badge { text-align: center; padding: 14px 8px; border-radius: 12px; border: 2px dashed var(--line); opacity: .5; filter: grayscale(1); }
.badge.got { opacity: 1; filter: none; border-style: solid; border-color: var(--sun); background: rgba(255,201,74,.07); }
.badge span { font-size: 1.8rem; display: block; }
.badge b { display: block; font-family: var(--display); font-size: .92rem; }
.badge small { color: var(--muted); font-size: .75rem; line-height: 1.3; display: block; }
.leaders { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.leaders li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--ink-2); }
.leaders li.me { outline: 2px solid var(--cyan); }
.leaders .pos { font: 700 1rem var(--display); color: var(--sun); width: 22px; }
.leaders .lname { flex: 1; font-weight: 600; }
.leaders .lxp { font-size: .85rem; color: var(--muted); }
.recent-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.recent { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: var(--ink-2); color: var(--text); text-decoration: none !important; border: 2px solid transparent; transition: border-color .2s; }
.recent:hover { border-color: var(--cyan); }
.recent b, .recent small { display: block; }
.recent-thumb { --h: 200; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; flex: none; display: grid; place-items: center; font: 700 1.1rem var(--display); background: linear-gradient(135deg, hsl(var(--h) 70% 50%), hsl(calc(var(--h) + 60) 70% 30%)); }
.recent-thumb img { width: 100%; height: 100%; object-fit: cover; }
.recent-go { margin-left: auto; color: var(--cyan); }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.panel-head h3 { margin: 0; }
.req-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 6px; }
.req-top b { font-family: var(--display); font-size: 1.1rem; }
.studio-reply { background: rgba(62,240,224,.07); border-left: 4px solid var(--cyan); padding: 12px 16px; border-radius: 0 10px 10px 0; margin: 12px 0; }
.studio-reply b { color: var(--cyan); font-size: .9rem; }
.studio-reply p { margin: 4px 0 0; }
.status { display: inline-block; font: 700 .78rem var(--display); padding: 4px 10px; border-radius: 6px; background: var(--panel-2); color: var(--muted); white-space: nowrap; }
.s-new { background: rgba(62,240,224,.15); color: var(--cyan); }
.s-in_review, .s-shortlisted { background: rgba(140,124,255,.2); color: #BDB2FF; }
.s-quoted, .s-interview { background: rgba(255,201,74,.18); color: var(--sun); }
.s-in_progress { background: rgba(255,138,61,.18); color: #FFB27A; }
.s-completed, .s-hired { background: rgba(107,255,142,.16); color: var(--green); }
.s-rejected { background: rgba(255,79,139,.15); color: var(--pink); }
.track { list-style: none; display: flex; padding: 0; margin: 14px 0 0; gap: 4px; }
.track li { flex: 1; font-size: .75rem; color: var(--muted); padding-top: 10px; border-top: 4px solid var(--line); }
.track li.done { border-color: var(--green); color: var(--text); }
.status-note { color: var(--pink); margin-top: 10px; }

/* ---------- Footer ---------- */
.footer { border-top: 2px solid var(--line); margin-top: 40px; padding: 56px 0 28px; background: var(--ink-2); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
.footer h4 { font-size: 1rem; color: var(--muted); }
.footer-grid > div:not(:first-child) { display: flex; flex-direction: column; gap: 10px; }
.footer-grid a { color: var(--text); }
.footer-grid span, .footer-grid a { display: inline-flex; gap: 8px; align-items: center; }
.footer-about { max-width: 42ch; margin-top: 14px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .88rem; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
/* JS band ho to sab kuch turant dikhe — koi animation nahi */
.no-js .reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
/* Safety net: content tab tak chhupa hai jab tak JS use dikhata nahi. Agar JS
   fail ho jaye (ya observer trigger na ho) to page hamesha khali rehta tha.
   Ye 2.5s baad content khud dikha deta hai; .in lagne par koi asar nahi. */
.reveal { animation: reveal-failsafe .4s ease 2.5s forwards; }
@keyframes reveal-failsafe { to { opacity: 1; transform: none; } }

/* confetti for the easter egg */
.confetti { position: fixed; top: -20px; width: 10px; height: 14px; z-index: 400; pointer-events: none; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav-links { position: fixed; inset: 64px 0 auto 0; flex-direction: column; background: var(--ink-2); padding: 16px 20px 24px; border-bottom: 2px solid var(--line); transform: translateY(-120%); transition: transform .35s; margin: 0; max-height: calc(100vh - 64px); overflow: auto; }
  .nav-links.open { transform: none; }
  .nav-links a { padding: 12px; font-size: 1.05rem; }
  .nav-links a.active::after { display: none; }
  .nav-mobile-auth { display: flex; flex-direction: column; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
  .nav-toggle { display: block; }
  .nav-right { margin-left: auto; }
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .hero-grid, .about-teaser, .about-grid, .form-layout, .contact-grid, .gd-grid, .dash-grid, .cta-duo { grid-template-columns: 1fr; }
  /* Chhoti screen par heading ko ek line me rakhna zidd hai — wo ya to
     page se bahar niklegi ya itni chhoti ho jayegi ki padhi na jaye.
     Yahan normal wrapping wapas. */
  .page-title-1line { white-space: normal; font-size: clamp(1.7rem, 7vw, 2.4rem); }
  .crt { transform: none; }
  .hud-bar { grid-template-columns: 1fr 1fr; }
  .hud-bar > div:nth-child(3) { border-left: 0; }
  .hud-bar > div:nth-child(n+3) { border-top: 2px dashed var(--line); }
  .player-card { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .pc-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .dash-stats { grid-template-columns: 1fr 1fr; }
  .side-info { position: static; }
  .mv-wide { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .hide-sm { display: none; }
  .brand-text { display: none; }
  .form-row { grid-template-columns: 1fr; }
  .sec-head { grid-template-columns: 1fr; }
  .sec-link { grid-column: 1; grid-row: auto; margin-top: 8px; }
  .role { flex-direction: column; align-items: flex-start; }
  .steps { grid-template-columns: 1fr; }
  .player-tools .btn span, .player-title { font-size: .95rem; }
  .chip-info { display: none; }
  .track li { font-size: .65rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Privacy policy / legal pages ---------- */
.legal-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
.legal-grid.no-toc { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.legal-toc { position: sticky; top: 96px; background: var(--panel); border: 2px solid var(--line); border-radius: var(--r); padding: 18px; max-height: calc(100vh - 120px); overflow: auto; }
.legal-toc h4 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.legal-toc nav { display: grid; gap: 2px; }
.legal-toc a { color: var(--muted); padding: 7px 10px; border-radius: 8px; border-left: 3px solid transparent; font-size: .92rem; line-height: 1.35; text-decoration: none; transition: color .2s, background .2s, border-color .2s; }
.legal-toc a:hover { color: var(--text); background: rgba(255,255,255,.04); }
.legal-toc a.on { color: var(--cyan); border-left-color: var(--cyan); background: rgba(62,240,224,.07); }
.legal-body { padding: clamp(20px, 4vw, 44px); color: #DCD6FF; font-size: 1.02rem; line-height: 1.75; overflow-wrap: anywhere; }
.legal-body > :first-child { margin-top: 0; }
.legal-body h2 { font-size: clamp(1.25rem, 2.4vw, 1.55rem); color: var(--text); margin: 2em 0 .6em; padding-top: .4em; scroll-margin-top: 100px; }
.legal-body h2::before { content: ""; display: block; width: 44px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--cyan), var(--pink)); margin-bottom: 14px; }
.legal-body h3 { font-size: 1.12rem; color: var(--text); margin: 1.5em 0 .5em; }
.legal-body h4 { font-size: 1rem; color: var(--sun); margin: 1.3em 0 .4em; }
.legal-body p { margin: 0 0 1em; }
.legal-body ul, .legal-body ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.legal-body li { margin: .35em 0; }
.legal-body ul li::marker { color: var(--cyan); }
.legal-body strong { color: var(--text); }
.legal-body a { color: var(--cyan); }
.legal-body blockquote { margin: 1em 0; padding: 12px 18px; border-left: 3px solid var(--sun); background: rgba(255,201,74,.06); border-radius: 0 10px 10px 0; }
.legal-body hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.legal-body table { width: 100%; border-collapse: collapse; margin: 1em 0 1.4em; font-size: .95rem; display: block; overflow-x: auto; }
.legal-body th, .legal-body td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; vertical-align: top; }
.legal-body th { background: var(--panel-2); color: var(--text); }
.legal-foot { margin-top: 2.4em !important; padding-top: 1.2em; border-top: 1px dashed var(--line); }
.form-consent { margin: 10px 0 0; text-align: center; }
.form-consent a { color: var(--cyan); }
@media (max-width: 900px) {
  .legal-grid { grid-template-columns: 1fr; }
  .legal-toc { position: static; max-height: none; }
}
@media print {
  .site-header, .footer, .legal-toc, #starfield { display: none !important; }
  .legal-body { background: #fff; color: #000; border: 0; }
  .legal-body h2, .legal-body h3, .legal-body strong { color: #000; }
}

/* ---------- Studio logo (Admin → Branding se set hota hai) ---------- */
/* Logo lagte hi mark ka pink box, tilt aur shadow hat jaata hai,
   taaki aapka apna logo saaf dikhe — placeholder "SK" par ye sab rehta hai. */
.brand-mark.has-logo {
  background: none;
  box-shadow: none;
  transform: none;
  border-radius: 10px;
  overflow: hidden;
  width: 44px;
  height: 44px;
}
.brand:hover .brand-mark.has-logo { transform: scale(1.06); }
.brand-logo-img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 10px; }

.loader-logo:has(.loader-logo-img) {
  background: none;
  box-shadow: none;
  border-radius: 20px;
  overflow: hidden;
}
.loader-logo-img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* mobile par nav ka logo thoda chhota */
@media (max-width: 600px) {
  .brand-mark.has-logo { width: 38px; height: 38px; }
}

/* ---------- Cookie consent (GA4 ke liye, EU/UK clients) ---------- */
.cookie-bar {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90;
  max-width: 560px; margin: 0 auto; padding: 16px 18px;
  background: var(--panel); border: 2px solid var(--line); border-radius: var(--r);
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  display: none; gap: 14px; align-items: center; flex-wrap: wrap;
}
.cookie-bar.show { display: flex; }
.cookie-bar p { margin: 0; flex: 1 1 260px; font-size: .92rem; color: var(--muted); line-height: 1.5; }
.cookie-bar p a { color: var(--cyan); }
.cookie-bar .cookie-actions { display: flex; gap: 8px; flex: 0 0 auto; }
@media (max-width: 600px) {
  .cookie-bar { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px; }
  /* Column me flex-basis HEIGHT hoti hai, WIDTH nahi. `flex: 1 1 260px`
     paragraph ko 260px lamba kar deta tha aur neeche badi khali jagah
     chhod deta tha — text chahe 3 line ka hi ho. */
  .cookie-bar p { flex: 0 0 auto; font-size: .88rem; }
  .cookie-bar .cookie-actions { justify-content: stretch; }
  .cookie-bar .cookie-actions .btn { flex: 1; }
}

/* ---------- Store icons ---------- */
/* Google Play ka logo apne brand rango me hai (4 rangeen hisse). Hover par
   hum background badalte hain, to icon ko safed kar do warna rangeen logo
   hare background par ganda lagta hai. */
.social-playstore svg path { transition: fill .2s; }
.social-playstore:hover svg path { fill: #fff !important; }

/* Naye stores ke brand colours */
.social-appstore:hover    { background: #0D96F6; border-color: #0D96F6; color: #fff; }
.social-windows:hover     { background: #00A4EF; border-color: #00A4EF; color: #fff; }
.social-playstation:hover { background: #003791; border-color: #003791; color: #fff; }
.social-oculus:hover      { background: #1C2B33; border-color: #1C2B33; color: #fff; }
.social-itch:hover        { background: #FA5C5C; border-color: #FA5C5C; color: #fff; }

/* Bahut saare icons hon to wrap ho jayein, ek line me na thuse.
   justify-content yahan bhi chahiye — ye rule upar wale ke baad aata hai. */
.socials { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ---------- Account dropdown (Log out yahan hai) ---------- */
/* Pehle logout link sirf mobile menu me tha, desktop par kahin nahi tha. */
.user-menu { position: relative; }
.user-menu .player-chip { background: none; font: inherit; cursor: pointer; }
.chip-caret { color: var(--muted); font-size: .7rem; transition: transform .2s; }
.user-menu.open .chip-caret { transform: rotate(180deg); }

.user-dropdown {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  min-width: 232px; padding: 8px;
  background: var(--panel); border: 2px solid var(--line); border-radius: var(--r);
  box-shadow: 0 16px 44px rgba(0,0,0,.5);
  display: none; flex-direction: column; gap: 2px;
}
.user-menu.open .user-dropdown { display: flex; }
.ud-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; display: grid; gap: 2px; }
.ud-head b { font: 600 .95rem var(--display); }
.ud-head small { font-size: .78rem; overflow-wrap: anywhere; }
.user-dropdown a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px;
  color: var(--text); font: 600 .92rem var(--display); text-decoration: none !important;
}
.user-dropdown a:hover { background: rgba(62,240,224,.09); color: var(--cyan); }
.user-dropdown a.ud-out { color: #FF8FB0; margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 9px 9px; padding-top: 11px; }
.user-dropdown a.ud-out:hover { background: rgba(255,79,139,.12); color: var(--pink); }

/* Mobile par chip chhota, dropdown poori chaudai */
@media (max-width: 600px) {
  .chip-info { display: none; }
  .user-dropdown { right: -6px; min-width: 210px; }
}
/* Account page ka log out button — baaki se alag dikhe */
.btn-logout { color: #FF8FB0; }
.btn-logout:hover { border-color: var(--pink); color: var(--pink); }

/* ---------- Ek-page auth (email pehle) ---------- */
.auth-logo-img { width: 100%; height: 100%; object-fit: contain; }
/* Step 2 par pakki hui email, badalne ke link ke saath */
.auth-email {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; margin-bottom: 16px;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 10px;
  font-size: .92rem;
}
.auth-email span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.auth-email b { font-weight: 600; overflow-wrap: anywhere; }
.auth-email a { flex: none; font: 600 .85rem var(--display); color: var(--cyan); }

/* ---------- Content sections (hire page etc.) ---------- */
.prose h2 { margin: 2.2em 0 .6em; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: #D8D2FF; }
.svc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin: 1.2em 0 0; }
.svc-item { padding: 18px; background: var(--panel); border: 2px solid var(--line); border-radius: var(--r); }
.svc-item h3 { font-size: 1.05rem; margin-bottom: .4em; display: flex; gap: 8px; align-items: center; }
.svc-item p { margin: 0; font-size: .93rem; }

.faq-list { display: grid; gap: 10px; margin-top: 1em; }
.faq-item { background: var(--panel); border: 2px solid var(--line); border-radius: var(--r); padding: 14px 18px; }
.faq-item summary { cursor: pointer; font: 600 1rem var(--display); list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--cyan); font-size: 1.3rem; line-height: 1; flex: none; }
.faq-item[open] summary::after { content: "−"; }
.faq-item[open] summary { margin-bottom: 10px; }
.faq-item p { margin: 0; font-size: .95rem; }

/* ---------- Testimonials ---------- */
.tm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.tm-card {
  --h: 200;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel); border: 2px solid var(--line); border-radius: var(--r);
  transition: border-color .25s, transform .25s;
}
.tm-card:hover { border-color: var(--cyan); transform: translateY(-3px); }

/* video / audio ka clickable thumbnail */
.tm-media {
  position: relative; display: block; width: 100%; aspect-ratio: 16/9;
  border: 0; padding: 0; cursor: pointer; overflow: hidden;
  background: linear-gradient(135deg, hsl(var(--h) 70% 45%), hsl(calc(var(--h) + 60) 70% 28%));
}
.tm-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.tm-card:hover .tm-media img { transform: scale(1.05); }
.tm-play {
  position: absolute; inset: 0; margin: auto; width: 62px; height: 62px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(13,11,38,.72); color: var(--cyan); backdrop-filter: blur(4px);
  transition: transform .25s, background .25s;
}
.tm-media:hover .tm-play { transform: scale(1.12); background: var(--cyan); color: var(--ink); }
.tm-badge {
  position: absolute; top: 10px; left: 10px; font: 700 .7rem var(--display);
  padding: 4px 9px; border-radius: 6px; background: rgba(13,11,38,.8); color: var(--sun);
  text-transform: uppercase; letter-spacing: .06em;
}
/* audio ke liye halki si wave animation */
.tm-wave { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 4px; height: 26px; align-items: flex-end; }
.tm-wave i { width: 4px; border-radius: 2px; background: var(--cyan); opacity: .85; animation: tm-bounce 1.1s ease-in-out infinite; }
.tm-wave i:nth-child(1) { height: 30%; animation-delay: 0s; }
.tm-wave i:nth-child(2) { height: 65%; animation-delay: .12s; }
.tm-wave i:nth-child(3) { height: 100%; animation-delay: .24s; }
.tm-wave i:nth-child(4) { height: 48%; animation-delay: .36s; }
.tm-wave i:nth-child(5) { height: 85%; animation-delay: .48s; }
.tm-wave i:nth-child(6) { height: 40%; animation-delay: .6s; }
.tm-wave i:nth-child(7) { height: 70%; animation-delay: .72s; }
@keyframes tm-bounce { 50% { transform: scaleY(.35); } }
@media (prefers-reduced-motion: reduce) { .tm-wave i { animation: none; } }

.tm-body { padding: 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.tm-stars { color: var(--line); font-size: 1rem; letter-spacing: 2px; line-height: 1; }
.tm-stars .on { color: var(--sun); }
.tm-quote { margin: 0; color: #D8D2FF; line-height: 1.65; flex: 1; }
.tm-quote::before { content: "\201C"; color: var(--cyan); font: 700 1.6rem var(--display); line-height: 0; margin-right: 4px; vertical-align: -6px; }
.tm-more {
  align-self: flex-start; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--cyan); font: 600 .92rem var(--display); text-decoration: underline; text-underline-offset: 3px;
}
.tm-more:hover { color: var(--text); }
.tm-who { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.tm-avatar { --av: var(--cyan); width: 42px; height: 42px; flex: none; border-radius: 50%; overflow: hidden; background: var(--av); color: var(--ink); font: 700 .9rem var(--display); display: grid; place-items: center; }
.tm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tm-name { display: flex; flex-direction: column; min-width: 0; }
.tm-name b { font: 600 .95rem var(--display); }
.tm-name small { color: var(--muted); font-size: .82rem; }

/* ---------- Testimonial popup ---------- */
.tm-modal-box { width: min(760px, 100%); max-height: 88vh; display: flex; flex-direction: column; }
.tm-modal-inner { overflow-y: auto; padding: 30px; display: flex; flex-direction: column; gap: 18px; }
.tm-modal-inner .video-frame, .tm-modal-inner video { width: 100%; border-radius: var(--r); overflow: hidden; background: #000; }
.tm-modal-inner audio { width: 100%; }
.tm-modal-who { display: flex; align-items: center; gap: 14px; }
.tm-modal-who .tm-avatar { width: 54px; height: 54px; font-size: 1.05rem; }
.tm-modal-who b { display: block; font: 700 1.1rem var(--display); }
.tm-modal-who small { color: var(--muted); }
/* poora text — lamba ho to yahi scroll hoga */
.tm-modal-text { color: #D8D2FF; line-height: 1.8; white-space: pre-line; }

@media (max-width: 600px) {
  .tm-grid { grid-template-columns: 1fr; gap: 16px; }
  .tm-body { padding: 18px; }
  .tm-modal-inner { padding: 22px 18px; }
}

/* ---------- Case studies ---------- */
/* Bilkul .game-grid jaisa — taaki case study aur game cards ek hi naap ke
   dikhein. Pehle 320px tha, jisse cards bade aur icons bhi bade lagte the. */
.cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.cs-card {
  --h: 200;
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none !important;
  background: var(--panel); border: 2px solid var(--line); border-radius: var(--r);
  color: var(--text); transition: border-color .25s, transform .25s;
}
.cs-card:hover { border-color: var(--cyan); transform: translateY(-4px); }
.cs-cover {
  position: relative; display: block; aspect-ratio: 16/10; overflow: hidden;
  background: linear-gradient(135deg, hsl(var(--h) 70% 45%), hsl(calc(var(--h) + 60) 70% 28%));
  display: grid; place-items: center;
}
/* Bilkul wahi naap jo game cards (.gc-thumb.icon) par hai — dono jagah icon
   ek jaisa dikhna chahiye. `cover` se square icon crop ho jaata tha
   (chess ka "CHESS" text kat raha tha), isliye `contain` + 68%. */
.cs-cover img {
  width: auto; height: 68%; max-width: 68%; aspect-ratio: 1; object-fit: contain;
  border-radius: 18%; box-shadow: 0 6px 20px rgba(0,0,0,.45);
  transition: transform .45s;
}
/* Humare apne banaye game icons 16:10 hain, square nahi. Inhe square frame
   me daalne se upar-neeche kat jaata tha aur 18% radius kone bhi chhil deta
   tha. Wide icon ko poora dikhao — ratio apna rakhne do. */
.cs-cover.wide img {
  width: 78%; max-width: 78%; height: auto; aspect-ratio: auto;
  border-radius: 10px;
}
.cs-card:hover .cs-cover img { transform: scale(1.05); }
.cs-placeholder { font: 700 2.4rem var(--display); color: rgba(255,255,255,.9); }
.cs-badge {
  position: absolute; top: 12px; left: 12px; font: 700 .7rem var(--display);
  padding: 4px 10px; border-radius: 6px; background: rgba(13,11,38,.82); color: var(--cyan);
  text-transform: uppercase; letter-spacing: .07em;
}
.cs-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cs-title { font: 700 1.1rem var(--display); line-height: 1.3; }
.cs-sub { color: var(--muted); font-size: .93rem; line-height: 1.6; flex: 1; }
.cs-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-meta i { font-style: normal; font-size: .76rem; padding: 3px 9px; border-radius: 6px; background: var(--panel-2); color: var(--muted); }
.cs-more { font: 600 .88rem var(--display); color: var(--cyan); margin-top: 4px; }
.cs-card:hover .cs-more { text-decoration: underline; text-underline-offset: 3px; }

/* detail page */
/* Cover aksar Play Store ka square icon hota hai. Use poori chaudai par
   khinchne ke bajaye beech me rakho, peeche halka gradient — warna square
   icon ek chaudi patti me bhadda lagta hai. */
.cs-hero {
  border-radius: var(--r-lg); overflow: hidden; border: 2px solid var(--line);
  margin-bottom: 26px; aspect-ratio: 16/9;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--panel-2), var(--ink-2));
}
.cs-hero img { max-width: min(100%, 46%); max-height: 84%; width: auto; height: auto; display: block; border-radius: 16%; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
/* 16:10 icon par 16% radius ek tedha ellipse banata hai aur kone chheel deta
   hai. Chaude icon ko zyada jagah aur seedha radius do. */
.cs-hero.wide img { max-width: min(100%, 72%); border-radius: 14px; }
.cs-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px;
  margin: 0 0 22px; padding: 20px; background: var(--panel); border: 2px solid var(--line); border-radius: var(--r);
}
.cs-facts dt { font: 600 .74rem var(--display); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.cs-facts dd { margin: 0; font-weight: 600; }
.cs-tech { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.cs-prose h2 { margin-top: 1.9em; }
.cs-prose h2:first-child { margin-top: 0; }
.cs-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }

@media (max-width: 600px) {
  .cs-grid { grid-template-columns: 1fr; gap: 16px; }
  .cs-facts { padding: 16px; gap: 12px; }
}

/* ---------- Nav dropdown (Services) ---------- */
.nav-drop { position: relative; display: flex; align-items: center; }
.nav-drop-btn {
  background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  color: var(--muted); font: 600 .95rem var(--display); padding: 8px 12px; border-radius: 8px;
}
.nav-drop-btn:hover, .nav-drop-btn.active { color: var(--text); background: rgba(62,240,224,.08); }
.nav-caret { font-size: .7rem; transition: transform .2s; }
.nav-drop.open .nav-caret { transform: rotate(180deg); }
.nav-drop-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; min-width: 260px; padding: 8px;
  background: var(--panel); border: 2px solid var(--line); border-radius: var(--r);
  box-shadow: 0 16px 44px rgba(0,0,0,.5); display: none; flex-direction: column; gap: 2px;
}
.nav-drop.open .nav-drop-menu { display: flex; }
.nav-drop-menu a {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 9px;
  color: var(--text); text-decoration: none !important;
}
.nav-drop-menu a:hover, .nav-drop-menu a.on { background: rgba(62,240,224,.09); }
.nav-drop-menu a b { font: 600 .93rem var(--display); }
.nav-drop-menu a small { color: var(--muted); font-size: .8rem; }
.nav-drop-menu a:hover b, .nav-drop-menu a.on b { color: var(--cyan); }

/* Mobile: dropdown khula hua hi rehta hai, nested menu jagah kha jaata hai */
@media (max-width: 900px) {
  .nav-drop { display: block; }
  .nav-drop-btn { display: none; }
  .nav-drop-menu {
    position: static; display: flex; min-width: 0; padding: 0; margin: 4px 0;
    background: none; border: 0; box-shadow: none;
  }
  .nav-drop-menu a { padding: 8px 12px; }
  .nav-drop-menu a small { display: none; }
}

/* ---------- Service page head ---------- */
.eyebrow {
  display: inline-block; font: 700 .76rem var(--display); letter-spacing: .14em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 10px;
  padding: 5px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--panel);
}
.head-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.prose code { background: var(--panel-2); padding: 2px 7px; border-radius: 5px; font-size: .88em; }