
:root{--bg:#050914;--navy:#071222;--panel:#0d2138;--panel2:#10243a;--line:rgba(255,255,255,.13);--text:#f3f8ff;--muted:#9fb2c8;--teal:#16a2aa;--gold:#d9a642;--gold2:#f1cf83;--red:#b23a48;--shadow:0 30px 90px rgba(0,0,0,.42);--radius:30px}*{box-sizing:border-box}body{margin:0;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 16% -8%,rgba(22,162,170,.28),transparent 34%),radial-gradient(circle at 92% 5%,rgba(217,166,66,.22),transparent 28%),linear-gradient(180deg,#050914 0%,#071222 45%,#081325 100%);min-height:100vh}body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 75%)}a{color:var(--gold2);text-decoration:none}.container{width:min(1188px,calc(100% - 40px));margin:0 auto}.site-header{position:sticky;top:0;z-index:30;background:rgba(5,9,20,.76);border-bottom:1px solid var(--line);backdrop-filter:blur(18px)}.nav{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px}.logo{display:flex;align-items:center;gap:14px;color:var(--text)}.logo img{width:50px;height:50px;border-radius:16px;padding:4px;background:linear-gradient(180deg,#f8f2e6,#e8ddc9);box-shadow:0 14px 34px rgba(0,0,0,.35)}.logo-word{display:flex;flex-direction:column;line-height:1}.logo-word b{font-size:1.18rem;letter-spacing:.07em;text-transform:uppercase}.logo-word small{color:var(--muted);font-size:.73rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;margin-top:6px}.nav-links{display:flex;gap:8px;flex-wrap:wrap}.nav-links a{color:var(--muted);font-weight:800;font-size:.94rem;padding:11px 15px;border-radius:999px;border:1px solid transparent}.nav-links a[aria-current="page"],.nav-links a:hover{color:#fff;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.10)}.button{display:inline-flex;align-items:center;justify-content:center;padding:15px 22px;border-radius:999px;font-weight:900;letter-spacing:.02em;border:1px solid transparent;transition:.18s}.button:hover{transform:translateY(-2px)}.button.primary{background:linear-gradient(135deg,#f4cd76,#d8a33e 55%,#a87820);color:#071222;box-shadow:0 20px 42px rgba(217,166,66,.24)}.button.secondary{background:rgba(255,255,255,.065);border-color:rgba(255,255,255,.20);color:#fff}.button.teal{background:linear-gradient(135deg,#22c1c8,#10818b);color:#031017;box-shadow:0 20px 42px rgba(22,162,170,.22)}.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:9px 14px;border-radius:999px;color:var(--gold2);font-size:.82rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;background:rgba(217,166,66,.10);border:1px solid rgba(217,166,66,.18)}.eyebrow:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 6px rgba(217,166,66,.13)}h1,h2,h3{margin:0;line-height:1.02;letter-spacing:-.055em}h1{font-size:clamp(3.2rem,7.2vw,6.6rem)}h2{font-size:clamp(2.2rem,5vw,3.7rem);margin-bottom:14px}h3{font-size:1.35rem;margin-bottom:10px}.lead{font-size:clamp(1.06rem,2vw,1.25rem);line-height:1.72;color:var(--muted);max-width:720px}.hero{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:center;padding:76px 0 52px}.hero-copy h1{margin:22px 0 20px}.accent{color:var(--gold2);text-shadow:0 0 38px rgba(217,166,66,.18)}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.studio-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:34px}.studio-metric,.card{position:relative;overflow:hidden;border:1px solid var(--line);background:linear-gradient(180deg,rgba(16,36,58,.83),rgba(7,18,34,.90));box-shadow:0 24px 70px rgba(0,0,0,.28)}.studio-metric{padding:18px;border-radius:20px}.studio-metric strong{display:block;font-size:1.65rem}.studio-metric span{display:block;color:var(--muted);line-height:1.45;margin-top:5px;font-size:.94rem}.hero-stage{position:relative;min-height:650px}.studio-card{position:absolute;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}.logo-card{right:10%;top:12px;width:min(520px,92%);padding:16px;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(239,232,218,.95));transform:rotate(1.2deg)}.logo-card img{border-radius:22px;width:100%}.game-card{left:0;bottom:72px;width:88%;padding:16px;background:linear-gradient(180deg,rgba(16,36,58,.88),rgba(7,18,34,.95));transform:rotate(-1.4deg)}.screen-label{display:flex;align-items:center;justify-content:space-between;padding:0 4px 14px}.kicker{color:var(--teal);font-size:.82rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.tag{font-size:.82rem;color:var(--gold2);border:1px solid rgba(217,166,66,.28);border-radius:999px;padding:6px 10px}.feature-frame{border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.12)}.feature-frame img{width:100%}.floating-chip{position:absolute;right:0;bottom:18px;border-radius:22px;background:rgba(5,9,20,.82);border:1px solid rgba(255,255,255,.20);padding:18px 20px;box-shadow:0 20px 50px rgba(0,0,0,.3)}.floating-chip span{display:block;color:var(--muted);font-size:.92rem;margin-top:4px}.section{padding:42px 0 62px}.section-header{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}.section-header p{max-width:650px;color:var(--muted);line-height:1.7}.grid{display:grid;gap:22px}.grid.three{grid-template-columns:repeat(3,1fr)}.grid.two{grid-template-columns:repeat(2,1fr)}.card{border-radius:var(--radius);padding:27px}.card p,.card li{color:var(--muted);line-height:1.72}.meta{display:inline-flex;align-items:center;gap:9px;color:var(--teal);font-size:.84rem;letter-spacing:.13em;text-transform:uppercase;font-weight:900;margin-bottom:14px}.meta:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 6px rgba(22,162,170,.13)}.feature-showcase{display:grid;grid-template-columns:1fr .9fr;gap:22px}.media-card{padding:14px}.media-card img,.inline-image-card img{width:100%;border-radius:23px}.game-summary{display:grid;gap:22px;align-content:center}.badge-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.badge{border:1px solid var(--line);background:rgba(255,255,255,.055);color:#fff;border-radius:999px;padding:8px 12px;font-size:.82rem;font-weight:900}.badge.gold{background:rgba(217,166,66,.13);color:var(--gold2)}.badge.teal{background:rgba(22,162,170,.13);color:#91f1f5}.badge.red{background:rgba(178,58,72,.13);color:#ffc7d0}.value-list{display:grid;gap:14px}.value-list div{border-top:1px solid rgba(255,255,255,.09);padding-top:14px}.value-list div:first-child{border-top:0;padding-top:0}.value-list strong{display:block;margin-bottom:5px;color:#fff}.codebox{background:#030712;color:#eef5ff;border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:16px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.page-hero{padding:66px 0 24px}.page-hero h1{margin:18px 0 14px;font-size:clamp(2.8rem,6vw,4.9rem)}.page-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center}.content-page{padding-bottom:74px}.content-page section.card{margin:18px 0}.notice{margin:24px 0;padding:18px 20px;border-radius:20px;border:1px solid rgba(217,166,66,.22);background:rgba(217,166,66,.10);color:#f7deaa;line-height:1.7}.steps{counter-reset:step}.step{padding-left:60px}code.inline{color:#91f1f5}.site-footer{margin-top:24px;border-top:1px solid var(--line);background:rgba(4,8,17,.82)}.footer-grid{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:20px}.footer-links{display:flex;flex-wrap:wrap;gap:16px}.footer-links a{color:var(--muted);font-weight:800}.small{color:var(--muted);font-size:.94rem;line-height:1.62}@media(max-width:980px){.hero,.feature-showcase,.page-hero-grid{grid-template-columns:1fr}.grid.three,.grid.two,.studio-strip{grid-template-columns:1fr}.hero-stage{min-height:620px}.logo-card{right:0}}@media(max-width:760px){.container{width:min(1188px,calc(100% - 28px))}.nav{align-items:flex-start;flex-direction:column;padding:16px 0}.nav-links{width:100%;overflow-x:auto}.hero-stage{min-height:520px}.logo-card,.game-card{width:95%}.floating-chip{left:16px;right:auto}.footer-grid{display:block}.footer-grid{padding:24px 0}}

.logo-word small { text-transform: uppercase; letter-spacing: .09em; }
.nav { overflow: hidden; }
.nav-links { flex: 0 1 auto; }
.nav-links a { white-space: nowrap; }
.studio-hero { align-items: start; }
.studio-stack { position: relative; }
.studio-logo-panel {
  border-radius: 28px;
  overflow: hidden;
  background: #f4edde;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.16);
}
.studio-logo-panel img { width: 100%; }
.studio-release-card { max-width: 620px; margin-left: auto; }
.feature-top { overflow: hidden; }
.feature-top .micro { max-width: 260px; text-align: right; }
.hero-stats .stat strong { letter-spacing: .02em; }
.studio-card { min-height: 220px; }
.feature-strip {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 26px;
  align-items: stretch;
}
.mini-banner-card {
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(18,30,47,.94), rgba(12,22,36,.96));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 16px;
  display: flex;
  align-items: center;
}
.mini-banner-card img { border-radius: 16px; }
.feature-copy-card { overflow: hidden; }
.legal-page .card p + p { margin-top: 12px; }
.legal-page .card ul + p { margin-top: 14px; }
.footer-links a[href="puzzleiq.html"]::after { content: ""; }
@media (max-width: 980px) {
  .feature-strip { grid-template-columns: 1fr; }
  .feature-top .micro { max-width: none; text-align: left; }
}
@media (max-width: 760px) {
  .nav { overflow: visible; }
  .studio-card { min-height: auto; }
}

/* Final layout fixes for public studio version */
.button.ghost {
  background: transparent;
  border-color: rgba(217,166,66,.32);
  color: var(--gold2);
}
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px;
}
.stat {
  display: block;
  min-height: 118px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(16,36,58,.83), rgba(7,18,34,.90));
  box-shadow: 0 24px 70px rgba(0,0,0,.22);
}
.stat strong {
  display: block;
  font-size: 1.65rem;
  margin-bottom: 6px;
}
.stat span {
  display: block;
  color: var(--muted);
  line-height: 1.45;
  font-size: .94rem;
}
.grid > .studio-card,
section .studio-card {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: auto !important;
  min-height: 220px;
}
.visual-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg,rgba(16,36,58,.88),rgba(7,18,34,.95));
  box-shadow: var(--shadow);
}
.feature-panel { padding: 16px; }
.feature-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 4px 14px;
}
.feature-top strong { font-size: 1.15rem; }
.studio-stack { display: grid; gap: 22px; }
.studio-logo-panel { padding: 14px; }
.studio-logo-panel img { border-radius: 22px; }
.feature-strip-section { padding-top: 0; }
.feature-copy-card .lead { font-size: 1.08rem; }
@media(max-width:980px){
  .hero-stats{grid-template-columns:1fr;}
}

.disabled-button { cursor: default; pointer-events: none; opacity: .85; }
.mini-banner-card { overflow: hidden; min-width: 0; }
.mini-banner-card img { width: 100%; max-width: 100%; height: auto; display: block; }
.feature-strip > * { min-width: 0; }


/* Public business/PuzzleIQ revision */
.business-hero .hero-copy h1 { max-width: 680px; }
.app-stage { min-height: 640px; }
.app-logo-card { right: 3%; top: 10px; width: min(540px, 93%); opacity: .98; }
.floating-featured-app {
  left: 0;
  bottom: 92px;
  width: 88%;
  text-decoration: none;
  color: var(--text);
}
.floating-featured-app:hover { transform: rotate(-1.4deg) translateY(-3px); text-decoration: none; }
.app-chip { right: 0; bottom: 38px; z-index: 3; }
.app-screens-section { padding-top: 34px; }
.phone-row,
.screenshot-gallery {
  display: grid;
  gap: 24px;
}
.phone-row { grid-template-columns: 1.05fr .85fr .85fr; align-items: start; }
.screenshot-gallery { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; }
.phone-shot {
  margin: 0;
  border-radius: 34px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(16,36,58,.92), rgba(7,18,34,.96));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.phone-shot img {
  width: 100%;
  border-radius: 27px;
  display: block;
}
.phone-shot figcaption {
  color: var(--muted);
  font-weight: 800;
  text-align: center;
  padding: 12px 4px 4px;
}
.main-shot { transform: translateY(-16px); }
.cta-card {
  display: grid;
  grid-template-columns: 1.2fr auto;
  gap: 22px;
  align-items: center;
}
.feature-copy-card h2 { max-width: 650px; }
.inline-image-card { padding: 14px; }
.inline-image-card img { border-radius: 22px; }
@media(max-width:1100px){
  .screenshot-gallery{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:980px){
  .phone-row,.screenshot-gallery,.cta-card{grid-template-columns:1fr;}
  .app-stage{min-height:600px;}
  .main-shot{transform:none;}
}
@media(max-width:760px){
  .app-stage{min-height:520px;}
  .app-logo-card{width:95%;}
  .floating-featured-app{width:95%;bottom:78px;}
  .app-chip{left:16px;right:auto;bottom:22px;}
}

/* Homepage hero overlay fix: keep the Google Play feature card as a neat floating card over the Perry Games logo */
.app-stage > .studio-card {
  position: absolute !important;
  min-height: auto !important;
}
.app-stage > .app-logo-card {
  left: 0 !important;
  right: auto !important;
  top: 34px !important;
  bottom: auto !important;
  width: min(570px, 84%) !important;
  transform: rotate(1.2deg) !important;
  z-index: 1;
}
.app-stage > .floating-featured-app {
  left: auto !important;
  right: 0 !important;
  top: 248px !important;
  bottom: auto !important;
  width: min(440px, 60%) !important;
  transform: rotate(-1.4deg) !important;
  z-index: 4;
  text-decoration: none;
}
.app-stage > .floating-featured-app:hover {
  transform: rotate(-1.4deg) translateY(-3px) !important;
}
.app-stage > .app-chip {
  right: 4% !important;
  bottom: 46px !important;
  z-index: 5;
}
.app-stage .screen-label {
  gap: 14px;
}
.app-stage .screen-label .tag {
  white-space: nowrap;
}

@media(max-width:980px){
  .app-stage{min-height:680px;}
  .app-stage > .app-logo-card{width:88% !important; top:18px !important;}
  .app-stage > .floating-featured-app{width:72% !important; top:360px !important; right:0 !important;}
  .app-stage > .app-chip{left:20px !important; right:auto !important; bottom:24px !important;}
}
@media(max-width:760px){
  .app-stage{min-height:585px;}
  .app-stage > .app-logo-card{width:96% !important; top:10px !important;}
  .app-stage > .floating-featured-app{width:88% !important; top:310px !important; right:0 !important;}
  .app-stage > .app-chip{left:14px !important; right:14px !important; bottom:10px !important;}
}


/* Highscore update */
.highscore-showcase{
  display:grid;
  grid-template-columns:1.05fr .62fr;
  gap:30px;
  align-items:center;
}
.highscore-copy-card{
  min-height:360px;
  display:grid;
  align-content:center;
}
.highscore-copy-card:after{
  content:"🏆";
  position:absolute;
  right:26px;
  top:22px;
  font-size:3.4rem;
  opacity:.22;
  filter:drop-shadow(0 14px 24px rgba(217,166,66,.22));
}
.highscore-phone{
  margin:0 auto;
  max-width:330px;
}
.highscore-phone img{
  border:1px solid rgba(217,166,66,.35);
  box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 6px rgba(217,166,66,.08);
}
.highscore-section .badge-row,
.highscore-detail-section .badge-row{margin-bottom:4px;}
@media(max-width:980px){
  .highscore-showcase{grid-template-columns:1fr;}
  .highscore-phone{max-width:300px;}
}
