/* ============================================================
   A Plus Games Studio — shared styles for sub-pages
   (service pages, guides). Mirrors the homepage design system.
============================================================ */
:root{
  --sky:#56CCF2;--orange:#FF7A00;--pink:#FF5C8A;--green:#3DDC97;
  --yellow:#FFD23F;--purple:#A855F7;--red:#EF4444;
  --dark:#16213E;--white:#fff;--bg:#EFF9FF;--bg2:#F8FEFF;
  --border:3px solid var(--dark);--r:18px;--r-lg:26px;--r-xl:36px;
  --sh:5px 5px 0 var(--dark);--sh-sm:3px 3px 0 var(--dark);--sh-lg:8px 8px 0 var(--dark);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Nunito',sans-serif;background:var(--bg);color:var(--dark);overflow-x:hidden}
a{text-decoration:none;color:inherit}
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:#ddf1fb}
::-webkit-scrollbar-thumb{background:var(--orange);border-radius:8px;border:2px solid var(--dark)}

.wrap{max-width:1160px;margin:0 auto;padding:0 28px}
h1,h2,h3{font-family:'Luckiest Guy',cursive;letter-spacing:.5px;line-height:1.08}
.tag{display:inline-flex;align-items:center;gap:7px;font-family:'Fredoka One',cursive;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--orange);margin-bottom:14px}
.tag::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--orange);flex-shrink:0}
.sec-title{font-size:clamp(2rem,4vw,3.2rem);margin-bottom:16px}
.sec-sub{font-size:1.05rem;color:#4a5568;max-width:640px;line-height:1.72;margin-bottom:48px}
section{padding:84px 0}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:'Fredoka One',cursive;font-size:17px;padding:14px 30px;border-radius:50px;border:var(--border);transition:all .15s;cursor:pointer}
.btn-o{background:var(--orange);color:#fff;box-shadow:var(--sh)}
.btn-o:hover{transform:translate(-3px,-3px);box-shadow:var(--sh-lg)}
.btn-w{background:#fff;color:var(--dark);box-shadow:var(--sh)}
.btn-w:hover{transform:translate(-3px,-3px);box-shadow:var(--sh-lg);background:var(--sky)}
.btn-p{background:var(--pink);color:#fff;box-shadow:var(--sh)}
.btn-p:hover{transform:translate(-3px,-3px);box-shadow:var(--sh-lg)}

/* NAV */
#nav{position:fixed;top:0;left:0;right:0;z-index:500;height:70px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;background:rgba(239,249,255,.93);backdrop-filter:blur(14px);border-bottom:3px solid var(--dark);box-shadow:0 3px 0 var(--dark)}
.nlogo{display:flex;align-items:center;gap:10px;cursor:pointer}
.nlogo-pill{width:42px;height:42px;background:var(--orange);border:var(--border);border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:'Luckiest Guy',cursive;font-size:17px;color:#fff;box-shadow:var(--sh-sm);transition:all .15s}
.nlogo:hover .nlogo-pill{transform:rotate(-8deg) scale(1.12)}
.nlogo-txt{font-family:'Luckiest Guy',cursive;font-size:18px}
.nlinks{display:flex;align-items:center;gap:4px}
.nlinks a{font-family:'Fredoka One',cursive;font-size:15px;padding:7px 18px;border-radius:50px;border:2px solid transparent;transition:all .2s}
.nlinks a:hover{background:var(--yellow);border-color:var(--dark);box-shadow:2px 2px 0 var(--dark)}
.ncta{background:var(--pink);color:#fff !important;border:var(--border) !important;box-shadow:var(--sh-sm);border-radius:50px}
.ncta:hover{transform:translate(-2px,-2px);box-shadow:var(--sh) !important}
.mtgl{display:none;background:none;border:var(--border);border-radius:10px;padding:6px 10px;font-size:18px;cursor:pointer;font-family:'Fredoka One',cursive}
#mnav{display:none;position:fixed;top:70px;left:0;right:0;z-index:499;background:#fff;border-bottom:var(--border);box-shadow:0 5px 0 var(--dark);padding:14px 28px 18px;flex-direction:column;gap:4px}
#mnav.open{display:flex}
#mnav a{font-family:'Fredoka One',cursive;font-size:18px;padding:10px 16px;border-radius:12px;border:2px solid transparent}
#mnav a:hover{background:var(--bg);border-color:var(--dark)}

/* PAGE HERO */
.phero{padding:130px 0 70px;background:linear-gradient(175deg,#CCF1FF 0%,#EFF9FF 60%,#fff 100%);position:relative;overflow:hidden}
.phero .wrap{position:relative;z-index:1}
.crumbs{font-family:'Fredoka One',cursive;font-size:13px;color:#6b7280;margin-bottom:18px}
.crumbs a:hover{color:var(--orange)}
.phero h1{font-size:clamp(2.3rem,5vw,3.8rem);line-height:1.07;margin-bottom:20px;max-width:880px}
.phero h1 .acc{color:var(--orange);position:relative;display:inline-block}
.phero h1 .acc::after{content:'';position:absolute;bottom:-3px;left:0;right:0;height:4px;background:var(--orange);border-radius:4px}
.phero p{font-size:1.15rem;color:#4a5568;line-height:1.72;max-width:640px;margin-bottom:32px}
.phero-btns{display:flex;flex-wrap:wrap;gap:14px}
.pbadge{display:inline-flex;align-items:center;gap:8px;background:var(--yellow);border:var(--border);border-radius:50px;padding:7px 20px;font-family:'Fredoka One',cursive;font-size:14px;box-shadow:var(--sh-sm);margin-bottom:22px}

/* CARDS / GRID */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
.card{padding:30px 26px;border:var(--border);border-radius:var(--r-lg);box-shadow:var(--sh);background:#fff;transition:all .2s;position:relative;overflow:hidden}
.card:hover{transform:translate(-4px,-4px);box-shadow:var(--sh-lg)}
.card .ico{width:64px;height:64px;border:var(--border);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:30px;margin-bottom:16px;box-shadow:var(--sh-sm)}
.card h3{font-family:'Fredoka One',cursive;font-size:1.25rem;margin-bottom:10px}
.card p{font-size:.92rem;color:#5a6a7a;line-height:1.62}
.card ul{list-style:none;margin-top:12px}
.card li{font-size:.9rem;color:#475569;padding:5px 0 5px 26px;position:relative;line-height:1.5}
.card li::before{content:'✓';position:absolute;left:0;color:var(--green);font-weight:900}

/* PRICING */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.ptier{background:#fff;border:var(--border);border-radius:var(--r-lg);padding:34px 28px;box-shadow:var(--sh);transition:all .2s;position:relative}
.ptier:hover{transform:translate(-4px,-4px);box-shadow:var(--sh-lg)}
.ptier.feature{border-color:var(--orange);border-width:4px}
.ptier .pribbon{position:absolute;top:-2px;right:22px;background:var(--orange);color:#fff;border:2px solid var(--dark);border-radius:0 0 10px 10px;padding:5px 14px;font-family:'Fredoka One',cursive;font-size:11px;box-shadow:2px 2px 0 var(--dark)}
.ptier h3{font-family:'Fredoka One',cursive;font-size:1.5rem;margin-bottom:6px}
.ptier .pamt{font-family:'Luckiest Guy',cursive;font-size:2.4rem;color:var(--orange);margin:10px 0}
.ptier .pdesc{font-size:.9rem;color:#5a6a7a;margin-bottom:18px;line-height:1.55;min-height:48px}
.ptier ul{list-style:none}
.ptier li{font-size:.9rem;color:#475569;padding:7px 0 7px 26px;position:relative;line-height:1.45}
.ptier li::before{content:'✓';position:absolute;left:0;color:var(--green);font-weight:900}

/* TABLE */
.tbl-wrap{overflow-x:auto;border:var(--border);border-radius:var(--r-lg);box-shadow:var(--sh);background:#fff}
table{border-collapse:collapse;width:100%;min-width:520px}
th,td{padding:14px 18px;text-align:left;font-size:.92rem;border-bottom:2px solid #e2e8f0}
th{font-family:'Fredoka One',cursive;background:var(--dark);color:#fff;font-size:.85rem}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--bg)}
td strong{font-weight:800}

/* PROSE */
.prose{max-width:760px}
.prose p{font-size:1.05rem;color:#3f4a5a;line-height:1.8;margin-bottom:20px}
.prose h2{font-size:clamp(1.6rem,3vw,2.3rem);margin:44px 0 16px}
.prose h3{font-family:'Fredoka One',cursive;font-size:1.3rem;margin:28px 0 10px}
.prose ul{margin:0 0 20px 4px;list-style:none}
.prose li{font-size:1.02rem;color:#3f4a5a;line-height:1.7;padding:6px 0 6px 28px;position:relative}
.prose li::before{content:'🎮';position:absolute;left:0;font-size:.9rem}

/* FAQ */
.faq{max-width:820px;margin:0 auto}
.faq details{background:#fff;border:var(--border);border-radius:var(--r);box-shadow:var(--sh-sm);margin-bottom:14px;overflow:hidden}
.faq summary{cursor:pointer;padding:20px 24px;font-family:'Fredoka One',cursive;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:1.6rem;color:var(--orange);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 24px 22px;font-size:.98rem;color:#5a6a7a;line-height:1.7}

/* CTA */
.cta-wrap{padding:90px 0;background:var(--orange);border-top:4px solid var(--dark);border-bottom:4px solid var(--dark);position:relative;overflow:hidden;text-align:center}
.cta-wrap::before{content:'';position:absolute;top:-60px;right:-60px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.1)}
.cta-wrap h2{font-size:clamp(2rem,4.5vw,3.2rem);color:#fff;margin-bottom:14px;text-shadow:3px 4px 0 rgba(0,0,0,.22);position:relative}
.cta-wrap p{font-size:1.1rem;color:rgba(255,255,255,.9);max-width:520px;margin:0 auto 34px;line-height:1.7;position:relative}
.cta-btns{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;position:relative}

/* FOOTER */
footer{background:var(--dark);color:#fff;border-top:4px solid var(--orange);padding:60px 0 26px}
.fg-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:42px}
.fbrand h2{font-size:1.5rem;margin-bottom:12px}
.fbrand p{font-size:.9rem;color:rgba(255,255,255,.6);line-height:1.65;max-width:340px;margin-bottom:16px}
.fcol h4{font-family:'Fredoka One',cursive;font-size:1.05rem;margin-bottom:14px;color:var(--yellow)}
.fcol a{display:block;font-size:.9rem;color:rgba(255,255,255,.7);padding:5px 0;transition:color .2s}
.fcol a:hover{color:#fff}
.fbot{border-top:2px solid rgba(255,255,255,.12);padding-top:22px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:.82rem;color:rgba(255,255,255,.45)}
.fbot span{color:var(--orange)}

/* ============ CASE STUDY ============ */
.cs-hero-grid{display:grid;grid-template-columns:1fr 360px;gap:48px;align-items:center}
.cs-art{aspect-ratio:1;border:var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-lg);display:flex;align-items:center;justify-content:center;font-size:140px;position:relative;overflow:hidden}
.cs-art::before{content:'';position:absolute;top:0;left:0;right:0;height:14px;background:var(--dark)}
.cs-meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.cs-pill{font-family:'Fredoka One',cursive;font-size:13px;padding:7px 16px;border:var(--border);border-radius:50px;box-shadow:var(--sh-sm);background:#fff}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px}
.stat-tile{background:#fff;border:var(--border);border-radius:var(--r-lg);box-shadow:var(--sh);padding:26px 20px;text-align:center}
.stat-tile .snum{font-family:'Luckiest Guy',cursive;font-size:2.4rem;color:var(--orange);display:block;line-height:1;margin-bottom:6px}
.stat-tile .slbl{font-family:'Fredoka One',cursive;font-size:.82rem;color:#5a6a7a}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.gtile{aspect-ratio:1;border:var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-sm);display:flex;align-items:center;justify-content:center;font-size:62px;transition:all .2s}
.gtile:hover{transform:translate(-3px,-3px) rotate(-2deg);box-shadow:var(--sh)}
.cs-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ============ LIMITED-TIME OFFER ============ */
.offer-wrap{background:repeating-linear-gradient(45deg,#FFD23F,#FFD23F 24px,#ffdf6b 24px,#ffdf6b 48px);border-top:4px solid var(--dark);border-bottom:4px solid var(--dark);padding:30px 0}
.offer{background:#fff;border:var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:28px 30px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.offer-flag{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;border:2px solid var(--dark);border-radius:50px;padding:5px 16px;font-family:'Fredoka One',cursive;font-size:12px;letter-spacing:1px;box-shadow:var(--sh-sm);margin-bottom:12px;animation:offerpulse 1.4s ease-in-out infinite}
@keyframes offerpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.offer h2{font-family:'Luckiest Guy',cursive;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.05;margin-bottom:8px}
.offer h2 span{color:var(--red)}
.offer .pricing{font-family:'Fredoka One',cursive;font-size:1.05rem}
.offer .pricing s{color:#9aa5b1;margin-right:8px}
.offer .pricing strong{color:var(--green);font-size:1.3rem}
.offer .slots{font-size:.85rem;color:#5a6a7a;font-weight:800;margin-top:4px}
.countdown{display:flex;gap:10px}
.cd-unit{background:var(--dark);border:2px solid var(--dark);border-radius:12px;box-shadow:var(--sh-sm);padding:10px 6px;min-width:58px;text-align:center;color:#fff}
.cd-num{font-family:'Luckiest Guy',cursive;font-size:1.7rem;line-height:1;display:block}
.cd-lbl{font-family:'Fredoka One',cursive;font-size:.62rem;text-transform:uppercase;letter-spacing:1px;color:var(--yellow)}
@media(max-width:600px){.offer{flex-direction:column;align-items:flex-start;text-align:left}}

/* RESPONSIVE */
@media(max-width:820px){
  .nlinks{display:none}
  .mtgl{display:block}
  .fg-grid{grid-template-columns:1fr 1fr;gap:28px}
  .cs-hero-grid{grid-template-columns:1fr;gap:32px}
  .cs-art{max-width:300px;font-size:110px}
}
@media(max-width:540px){
  .fg-grid{grid-template-columns:1fr}
}