/* Nextplay Studio — shared styles */
:root{
  /* Brand palette — from logo gradient (bottom-left -> top-right) */
  --brand-blue:#124678;
  --brand-indigo:#383274;
  --brand-purple:#56236A;
  --brand-magenta:#821F54;
  --brand-crimson:#9C1D46;
  --mark:#F7F7F7;
  --mark-shadow:#D2D3D8;

  --bg:#0A1830;
  --text:#F7F1F5;
  --muted:#B7B3C9;
  --muted-2:#8B87A0;
  --brand:var(--brand-purple);
  --accent:var(--brand-crimson);
  --pulse:var(--brand-magenta);
  --silver:#C7C4D6;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --shadow-lg:0 20px 50px rgba(0,0,0,.5);
  --brand-gradient:linear-gradient(45deg, var(--brand-blue) 0%, var(--brand-indigo) 25%, var(--brand-purple) 50%, var(--brand-magenta) 75%, var(--brand-crimson) 100%);
  --header-h:72px;
  --ease:cubic-bezier(.22,.9,.32,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{min-height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.6;
  color:var(--text);
  background:var(--bg);
}
/* Fixed to the viewport (not the document) so the ambient glow never runs out
   or seams partway down a long page — it looks identical no matter how far you've scrolled. */
.bg-fx{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1100px 750px at 15% -10%, rgba(56,50,116,.32), transparent 62%),
    radial-gradient(900px 700px at 100% 0%, rgba(156,29,70,.16), transparent 58%),
    radial-gradient(800px 650px at 50% 100%, rgba(86,35,106,.18), transparent 60%);
}
a{color:inherit; text-decoration:none}
.container{width:100%; max-width:1120px; margin:0 auto; padding:0 24px}
h1,h2,h3{font-family:"Baloo 2",Inter,system-ui,sans-serif; font-weight:700}
:focus-visible{outline:2px solid var(--brand-magenta); outline-offset:3px; border-radius:4px}

.skip-link{position:absolute; left:12px; top:-60px; z-index:100; background:var(--brand-purple); color:#fff; padding:10px 16px; border-radius:10px; transition:top .2s var(--ease)}
.skip-link:focus{top:12px}

/* Header */
header{position:sticky; top:0; z-index:30; backdrop-filter:saturate(180%) blur(10px); background:rgba(8,18,38,.78); border-bottom:1px solid rgba(199,196,214,.12)}
.nav{display:flex; align-items:center; justify-content:space-between; height:var(--header-h); position:relative}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.3px; font-size:1.05rem; font-family:"Baloo 2",Inter,sans-serif}
.logo{width:36px; height:36px; border-radius:10px; position:relative; overflow:hidden; flex:none}
.logo img{width:100%; height:100%; object-fit:cover; display:block}
nav[aria-label="Primary"] ul{display:flex; gap:4px; list-style:none; padding:0; margin:0}
nav[aria-label="Primary"] a{display:inline-block; padding:9px 14px; border-radius:10px; color:var(--muted); font-weight:600; font-size:.95rem; transition:.2s color ease,.2s background ease}
nav[aria-label="Primary"] a:hover{background:rgba(255,255,255,.08); color:var(--text)}
nav[aria-label="Primary"] a[aria-current="page"]{color:var(--text); background:rgba(130,31,84,.25)}

.nav-toggle{display:none; width:42px; height:42px; border-radius:10px; border:1px solid rgba(199,196,214,.18); background:rgba(255,255,255,.04); cursor:pointer; align-items:center; justify-content:center; flex:none}
.nav-toggle span{display:block; width:20px; height:2px; background:var(--text); position:relative; transition:.25s ease}
.nav-toggle span::before,.nav-toggle span::after{content:""; position:absolute; left:0; width:20px; height:2px; background:var(--text); transition:.25s ease}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:rotate(45deg); top:0}
.nav-toggle[aria-expanded="true"] span::after{transform:rotate(-45deg); top:0}

/* Buttons & pills */
.btn{padding:13px 22px; border-radius:12px; font-weight:700; border:1px solid transparent; cursor:pointer; transition:.2s transform var(--ease),.2s box-shadow var(--ease); font-size:1rem; font-family:inherit}
.btn.primary{background:var(--brand-gradient); color:#FFFFFF; box-shadow:0 8px 24px rgba(130,31,84,.35)}
.btn.primary:hover{transform:translateY(-2px); box-shadow:0 12px 32px rgba(130,31,84,.5)}
.btn.ghost{border-color:rgba(199,196,214,.4); color:var(--silver); background:rgba(199,196,214,.06)}
.btn.ghost:hover{background:rgba(199,196,214,.14); transform:translateY(-2px)}
.pill{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:rgba(86,35,106,.28); color:var(--silver); font-size:.85rem; font-weight:600; border:1px solid rgba(130,31,84,.4)}
.pill.soon{background:rgba(18,70,120,.3); border-color:rgba(56,50,116,.5)}

/* Hero */
.hero{position:relative; padding:64px 0 80px; overflow:hidden}
.hero::before,.hero::after{content:""; position:absolute; width:640px; height:640px; border-radius:50%; z-index:-1; animation:drift 16s ease-in-out infinite alternate; pointer-events:none}
.hero::before{background:radial-gradient(circle, rgba(56,50,116,.6) 0%, rgba(56,50,116,.25) 40%, transparent 70%); top:-280px; left:-220px}
.hero::after{background:radial-gradient(circle, rgba(156,29,70,.5) 0%, rgba(156,29,70,.2) 40%, transparent 70%); bottom:-300px; right:-220px; animation-delay:-8s}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(40px,30px)}}
.hero-grid{display:grid; grid-template-columns:1.15fr 1fr; align-items:center; gap:44px}
.eyebrow{display:inline-flex; align-items:center; gap:8px; color:var(--silver); font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:.78rem; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid rgba(199,196,214,.15)}
h1{font-size:clamp(2.1rem, 3.2vw + 1.1rem, 3.6rem); line-height:1.08; margin:.6rem 0 1rem; letter-spacing:-.01em}
.lead{color:var(--muted); font-size:1.08rem; max-width:56ch}
.cta{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap}
.grad-text{background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; color:transparent}

.stat-strip{display:flex; gap:28px; margin-top:40px; flex-wrap:wrap}
.stat-strip .stat b{display:block; font-family:"Baloo 2",Inter,sans-serif; font-size:1.5rem; color:var(--text)}
.stat-strip .stat span{color:var(--muted-2); font-size:.85rem}

.hero-card{background:linear-gradient(180deg, rgba(56,50,116,.18), rgba(156,29,70,.08)); border:1px solid rgba(199,196,214,.12); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:22px}
.hero-art{aspect-ratio:16/11; border-radius:12px; overflow:hidden; position:relative; background:#0A1830}
.hero-art img{width:100%; height:100%; object-fit:cover; display:block}

/* Sections */
section{padding:50px 0}
#games,#tabletop,#coming-soon,#process{scroll-margin-top:calc(var(--header-h) + 16px)}
.section-head{display:flex; flex-direction:column; gap:12px; margin-bottom:8px}
.section-title{font-size:clamp(1.5rem, 1.6vw + .9rem, 2.3rem); margin:12px 0 4px; color:var(--text)}
.section-lead{color:var(--muted); max-width:62ch; font-size:1.02rem}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:28px}
.card{background:linear-gradient(180deg, rgba(56,50,116,.16), rgba(10,24,48,.6)); border:1px solid rgba(199,196,214,.1); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
.card h3{margin:10px 0 8px; color:#FFFFFF}

/* Product / game cards (mobile games, tabletop, coming soon) */
.products{display:grid; grid-template-columns:repeat(2,1fr); gap:26px; margin-top:32px}
.product-card{background:linear-gradient(180deg, rgba(56,50,116,.16), rgba(10,24,48,.6)); border:1px solid rgba(199,196,214,.12); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; transition:.35s transform var(--ease),.35s box-shadow var(--ease),.35s border-color var(--ease)}
.product-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(130,31,84,.45)}
.product-image{width:100%; aspect-ratio:16/10; overflow:hidden}
.product-image img{width:100%; height:100%; object-fit:cover; display:block; transition:.5s transform var(--ease)}
.product-card:hover .product-image img{transform:scale(1.06)}
.product-image.art{display:flex; align-items:center; justify-content:center}
.product-image.art svg{width:100%; height:100%; transition:.5s transform var(--ease)}
.product-card:hover .product-image.art svg{transform:scale(1.04)}
.product-content{padding:22px}
.product-content h3{margin:8px 0 8px; font-size:1.35rem; color:#FFFFFF}
.product-meta{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 12px}
.product-content p:not(.product-meta){margin:0; color:var(--muted); line-height:1.6}
.badge-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.store-badge{display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:10px; background:rgba(0,0,0,.35); border:1px solid rgba(199,196,214,.18); color:var(--text); font-size:.85rem; font-weight:600; transition:.2s background ease,.2s transform var(--ease)}
.store-badge:hover{background:rgba(0,0,0,.55); transform:translateY(-2px)}

.single{grid-template-columns:1fr}
.tabletop-card{display:grid; grid-template-columns:1fr 1.2fr}
.tabletop-card .product-image{aspect-ratio:auto; height:100%}

/* Process */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:28px; counter-reset:step}
.step{background:linear-gradient(180deg, rgba(56,50,116,.14), rgba(10,24,48,.5)); border:1px solid rgba(199,196,214,.1); border-radius:14px; padding:20px; position:relative}
.step b{color:var(--accent); font-family:"Baloo 2",Inter,sans-serif}

/* CTA Banner */
.cta-band{display:flex; gap:18px; align-items:center; justify-content:space-between; background:linear-gradient(90deg, rgba(56,50,116,.28), rgba(156,29,70,.2)); border:1px solid rgba(199,196,214,.12); border-radius:var(--radius); padding:22px 26px; margin-top:40px; flex-wrap:wrap}

/* Reveal-on-scroll */
.reveal{opacity:0; transform:translateY(18px); transition:.6s opacity var(--ease),.6s transform var(--ease)}
.reveal.in-view{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
  .hero::before,.hero::after{animation:none}
  *{transition-duration:.01ms !important; animation-duration:.01ms !important}
}

/* Footer */
footer{padding:48px 0 32px; color:var(--muted); border-top:1px solid rgba(199,196,214,.12); position:relative}
footer::before{content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--brand-gradient)}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px}
.footer-brand{display:flex; align-items:center; gap:10px; font-weight:800; font-family:"Baloo 2",Inter,sans-serif; color:var(--text); margin-bottom:10px}
.footer-brand img{width:30px; height:30px; border-radius:8px}
.footer-col h4{color:var(--text); font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; margin:0 0 12px}
.footer-col ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.footer-col a:hover{color:var(--text)}
.footer-bottom{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:36px; padding-top:20px; border-top:1px solid rgba(199,196,214,.1); font-size:.9rem}

/* About page */
.page-hero{padding:48px 0 32px}
.values{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:26px}
.value{background:linear-gradient(180deg, rgba(56,50,116,.14), rgba(10,24,48,.5)); border:1px solid rgba(199,196,214,.1); border-radius:14px; padding:22px; transition:.3s transform var(--ease),.3s border-color var(--ease)}
.value:hover{transform:translateY(-4px); border-color:rgba(130,31,84,.4)}
.value h3{margin:10px 0 8px; color:#FFFFFF}
.value p{margin:0; color:var(--muted)}

.team{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:24px}
.member{display:grid; grid-template-columns:88px 1fr; gap:16px; align-items:center}
.avatar{width:88px; height:100px; border-radius:18px; overflow:hidden; background:radial-gradient(100px 80px at 25% 25%, rgba(56,50,116,.5), rgba(156,29,70,.3)), var(--bg); border:1px solid rgba(199,196,214,.15); position:relative}
.avatar img{width:100%; height:100%; object-fit:cover; display:block}
.role{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:rgba(86,35,106,.28); color:var(--silver); font-size:.85rem; border:1px solid rgba(130,31,84,.4)}
h3{margin:.1rem 0 .2rem; color:#FFFFFF}
p{margin:.2rem 0 0; color:var(--muted)}

/* Contact page */
.grid{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:start}
form{display:grid; gap:16px}
label{font-weight:600; color:var(--silver); font-size:.92rem}
.input, textarea{width:100%; padding:13px 14px; background:#071122; color:var(--text); border:1px solid rgba(199,196,214,.16); border-radius:12px; outline:none; font-family:inherit; font-size:.98rem; transition:.2s border-color ease,.2s box-shadow ease}
.input:focus, textarea:focus{border-color:var(--brand-purple); box-shadow:0 0 0 4px rgba(86,35,106,.25)}
textarea{min-height:140px; resize:vertical}
.row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.hint{color:var(--muted-2); font-size:.9rem; margin-top:6px}
.info-list{display:grid; gap:10px}
#toast{position:fixed; right:20px; bottom:24px; padding:14px 18px; border-radius:12px; background:linear-gradient(135deg, rgba(56,50,116,.4), rgba(156,29,70,.3)); color:var(--text); border:1px solid rgba(199,196,214,.18); box-shadow:var(--shadow-lg); opacity:0; transform:translateY(10px); transition:.25s ease; z-index:50}
#toast.show{opacity:1; transform:translateY(0)}

/* Responsive */
@media (max-width: 980px){
  .hero{padding:40px 0 56px}
  .hero-grid{grid-template-columns:1fr}
  .stat-strip{gap:22px}

  .nav-toggle{display:inline-flex}
  nav[aria-label="Primary"]{position:absolute; top:calc(var(--header-h) - 1px); left:0; right:0; background:#0c1730; border-bottom:1px solid rgba(199,196,214,.14); max-height:0; overflow:hidden; transition:.3s max-height var(--ease); box-shadow:var(--shadow-lg)}
  nav[aria-label="Primary"].open{max-height:400px}
  nav[aria-label="Primary"] ul{flex-direction:column; gap:2px; padding:10px 20px 18px}
  nav[aria-label="Primary"] a{display:block; padding:12px 14px}

  .steps{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:1fr 1fr}
  .products{grid-template-columns:1fr}
  .tabletop-card{grid-template-columns:1fr}
  .team{grid-template-columns:1fr 1fr}
  .values{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .cards,.steps,.values{grid-template-columns:1fr}
  .cta{flex-direction:column; align-items:stretch}
  .cta .btn{text-align:center}
  .team{grid-template-columns:1fr}
  .member{grid-template-columns:72px 1fr}
  .avatar{width:72px; height:72px}
  .row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .stat-strip{gap:18px 28px}
}