:root {

  /* Colors */

  --pk-primary: #1a1a1a;

  /* Dark Grey (Standard PinUp Background) */

  --pk-secondary: #252525;

  /* Lighter Dark Grey */

  --pk-accent: #eb1c24;

  /* PinUp Red */

  --pk-accent-hover: #c9121a;

  --pk-teal: #00b69b;

  /* PinUp Teal/Green */

  --pk-text: #334155;

  --pk-text-light: #94a3b8;

  --pk-white: #ffffff;

  --pk-bg: #f8fafc;

  --pk-border: #e2e8f0;

  --pk-success: #00b69b;

  /* Use Teal for success too */



  /* Spacing */

  --sp-xs: 0.25rem;

  --sp-sm: 0.5rem;

  --sp-md: 1rem;

  --sp-lg: 1.5rem;

  --sp-xl: 2rem;

  --sp-2xl: 4rem;



  /* Typography */

  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;



  /* Misc */

  --radius-sm: 4px;

  --radius-md: 8px;

  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);

  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);

  --header-height: 70px;

}



/* Reset & Base */

* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



body {

  font-family: var(--font-main);

  background-color: var(--pk-bg);

  color: var(--pk-text);

  line-height: 1.6;

  padding-top: var(--header-height);

}



a {

  text-decoration: none;

  color: inherit;

}



ul {

  list-style: none;

}



img {

  max-width: 100%;

  height: auto;

  display: block;

}



/* Utilities */

.container {

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 var(--sp-md);

}



.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: var(--sp-sm) var(--sp-lg);

  font-weight: 600;

  border-radius: var(--radius-md);

  transition: all 0.2s ease;

  cursor: pointer;

  border: none;

  font-size: 1rem;

}



.btn-primary {

  background-color: var(--pk-accent);

  color: var(--pk-white);

  /* White text on Red */

}



.btn-primary:hover {

  background-color: var(--pk-accent-hover);

  transform: translateY(-1px);

}



.btn-secondary {

  background-color: transparent;

  border: 2px solid var(--pk-white);

  color: var(--pk-white);

}



.btn-secondary:hover {

  background-color: var(--pk-white);

  color: var(--pk-primary);

}



.btn-outline {

  border: 2px solid var(--pk-teal);

  color: var(--pk-teal);

  /* Teal text */

}



.btn-outline:hover {

  background-color: var(--pk-teal);

  color: var(--pk-white);

}



.text-center {

  text-align: center;

}



.my-lg {

  margin-top: var(--sp-lg);

  margin-bottom: var(--sp-lg);

}



/* Header */

.header {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: var(--header-height);

  background-color: var(--pk-primary);

  color: var(--pk-white);

  z-index: 1000;

  box-shadow: var(--shadow-md);

}



.header-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  height: 100%;

}



.logo {

  font-size: 1.5rem;

  font-weight: 800;

  color: var(--pk-accent);

  /* Red Logo */

  text-transform: uppercase;

  letter-spacing: -1px;

}



.nav-desktop {

  display: none;

}



.nav-desktop ul {

  display: flex;

  gap: var(--sp-lg);

}



.nav-desktop a {

  font-weight: 500;

  opacity: 0.9;

}



.nav-desktop a:hover {

  opacity: 1;

  color: var(--pk-teal);

  /* Teal hover for links */

}



.burger {

  display: block;

  font-size: 1.5rem;

  cursor: pointer;

  color: var(--pk-white);

}



/* Mobile Menu */

.mobile-menu {

  position: fixed;

  top: var(--header-height);

  left: 0;

  width: 100%;

  background-color: var(--pk-secondary);

  padding: var(--sp-lg);

  transform: translateY(-150%);

  transition: transform 0.3s ease-in-out;

  z-index: 999;

  text-align: center;

}



.mobile-menu.active {

  transform: translateY(0);

}



.mobile-menu li {

  margin-bottom: var(--sp-md);

}



.mobile-menu a {

  color: var(--pk-white);

  font-size: 1.1rem;

  font-weight: 600;

}



/* Hero Section */

.hero {

  background: linear-gradient(135deg, var(--pk-primary) 0%, var(--pk-secondary) 100%);

  color: var(--pk-white);

  padding: var(--sp-2xl) 0;

  text-align: center;

}



.hero h1 {

  font-size: 2.5rem;

  margin-bottom: var(--sp-md);

  line-height: 1.2;

}



.hero p {

  font-size: 1.1rem;

  opacity: 0.9;

  margin-bottom: var(--sp-lg);

  max-width: 600px;

  margin-left: auto;

  margin-right: auto;

}



.hero-actions {

  display: flex;

  justify-content: center;

  gap: var(--sp-md);

  flex-wrap: wrap;

}



/* Feature Blocks */

.features {

  padding: var(--sp-2xl) 0;

}



.features-grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: var(--sp-lg);

  margin-top: var(--sp-xl);

}



.feature-card {

  background: var(--pk-white);

  padding: var(--sp-lg);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-sm);

  text-align: center;

  border: 1px solid var(--pk-border);

}



.feature-icon {

  font-size: 2rem;

  margin-bottom: var(--sp-sm);

  color: var(--pk-accent-hover);

}



.feature-card h3 {

  margin-bottom: var(--sp-sm);

}



/* Game Categories */

.categories {

  background-color: var(--pk-white);

  padding: var(--sp-2xl) 0;

}



.cat-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: var(--sp-md);

}



.cat-card {

  position: relative;

  border-radius: var(--radius-lg);

  overflow: hidden;

  aspect-ratio: 16/10;

  background-color: #eee;

}



.cat-card img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.3s;

}



.cat-card:hover img {

  transform: scale(1.05);

}



.cat-label {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  background: rgba(0, 0, 0, 0.7);

  color: white;

  padding: var(--sp-sm);

  font-weight: 600;

  text-align: center;

}



/* Bonus Table */

.bonus-section {

  padding: var(--sp-2xl) 0;

}



.bonus-table {

  width: 100%;

  border-collapse: collapse;

  background: var(--pk-white);

  box-shadow: var(--shadow-sm);

  border-radius: var(--radius-md);

  overflow: hidden;

  margin-top: var(--sp-lg);

}



.bonus-table th,

.bonus-table td {

  padding: var(--sp-md);

  text-align: left;

  border-bottom: 1px solid var(--pk-border);

}



.bonus-table th {

  background-color: var(--pk-primary);

  color: var(--pk-white);

}



/* Steps */

.steps {

  background-color: var(--pk-bg);

  padding: var(--sp-xl) 0;

}



.steps-intro {

  max-width: 900px;

  margin-bottom: 3rem;

  color: var(--pk-text);

  line-height: 1.6;

}



.steps-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  gap: var(--sp-lg);

  margin-bottom: 2rem;

}



.step-card {

  background-color: var(--pk-white);

  padding: var(--sp-lg);

  border: 1px solid var(--pk-border);

  border-radius: var(--rd-lg);

  display: flex;

  flex-direction: column;

  height: 100%;

}



.step-badge {

  background-color: rgba(0, 182, 155, 0.1);

  color: var(--pk-teal);

  font-weight: 700;

  padding: 0.25rem 0.75rem;

  border-radius: var(--rd-sm);

  display: inline-block;

  margin-bottom: 1rem;

  font-size: 0.9rem;

}



.step-card h3 {

  font-size: 1.25rem;

  margin-bottom: 0.75rem;

  color: var(--pk-secondary);

}



.step-card p {

  color: var(--pk-text);

  font-size: 0.95rem;

  line-height: 1.5;

  margin-bottom: 1.5rem;

  flex-grow: 1;

}



.step-img-container {

  margin-top: auto;

  border-radius: 8px;

  overflow: hidden;

  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

}



.step-img-container img {

  width: 100%;

  height: auto;

  display: block;

}



.btn-step {

  width: 100%;

  background-color: var(--pk-teal);

  color: #fff;

  border: none;

  padding: 0.75rem;

  font-weight: 700;

  text-transform: uppercase;

  margin: 1rem 0;

  cursor: pointer;

  border-radius: var(--rd-sm);

  transition: opacity 0.2s;

}



.btn-step:hover {

  opacity: 0.9;

}



/* Mobile App Section */

.app-section {

  background-color: var(--pk-primary);

  color: var(--pk-white);

  padding: var(--sp-2xl) 0;

  overflow: hidden;

}



.app-container {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: var(--sp-2xl);

}



.app-content {

  flex: 1;

}



.app-content h2 {

  font-size: 2.5rem;

  margin-bottom: var(--sp-md);

  color: var(--pk-white);

}



.app-content p {

  font-size: 1.1rem;

  margin-bottom: var(--sp-xl);

  opacity: 0.9;

  line-height: 1.6;

}



.app-buttons {

  display: flex;

  gap: var(--sp-md);

  flex-wrap: wrap;

}



.btn-download {

  display: inline-flex;

  align-items: center;

  gap: 0.75rem;

  background-color: rgba(255, 255, 255, 0.1);

  border: 1px solid rgba(255, 255, 255, 0.2);

  padding: 0.75rem 1.5rem;

  border-radius: var(--rd-md);

  color: var(--pk-white);

  text-decoration: none;

  transition: all 0.3s ease;

}



.btn-download:hover {

  background-color: var(--pk-accent);

  border-color: var(--pk-accent);

  transform: translateY(-2px);

}



.btn-download span {

  display: flex;

  flex-direction: column;

  line-height: 1.2;

}



.btn-download small {

  font-size: 0.75rem;

  opacity: 0.8;

}



.btn-download strong {

  font-size: 1rem;

}



.app-image {

  flex: 1;

  display: flex;

  justify-content: center;

}



.app-image img {

  max-width: 100%;

  max-height: 500px;

  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5));

}



@media (max-width: 768px) {

  .app-container {

    flex-direction: column-reverse;

    text-align: center;

  }



  .app-buttons {

    justify-content: center;

  }

}



/* FAQ */

.faq {

  padding: var(--sp-2xl) 0;

}



.faq-item {

  background: var(--pk-white);

  border: 1px solid var(--pk-border);

  border-radius: var(--radius-md);

  margin-bottom: var(--sp-sm);

  overflow: hidden;

}



.faq-question {

  padding: var(--sp-md);

  font-weight: 600;

  cursor: pointer;

  display: flex;

  justify-content: space-between;

  align-items: center;

  background-color: #fff;

}



.faq-question::after {

  content: '+';

  font-size: 1.2rem;

}



.faq-item.active .faq-question::after {

  content: '-';

}



.faq-answer {

  display: none;

  padding: var(--sp-md);

  border-top: 1px solid var(--pk-border);

  color: var(--pk-text-light);

}



.faq-item.active .faq-answer {

  display: block;

}



/* Footer */

.footer {

  background-color: var(--pk-secondary);

  color: var(--pk-white);

  padding: var(--sp-2xl) 0 var(--sp-lg);

  margin-top: var(--sp-2xl);

}



.footer-cols {

  display: grid;

  grid-template-columns: 1fr;

  gap: var(--sp-xl);

  margin-bottom: var(--sp-xl);

}



.footer h4 {

  color: var(--pk-accent);

  margin-bottom: var(--sp-md);

}



.footer ul li {

  margin-bottom: var(--sp-sm);

}



.footer a {

  opacity: 0.7;

}



.footer a:hover {

  opacity: 1;

}



.disclaimer {

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  padding-top: var(--sp-lg);

  font-size: 0.9rem;

  opacity: 0.6;

  text-align: center;

}



/* Media Queries */

@media (min-width: 768px) {

  .nav-desktop {

    display: block;

  }



  .burger {

    display: none;

  }



  .mobile-menu {

    display: none;

  }



  /* Hide fully on desktop */



  .features-grid {

    grid-template-columns: repeat(3, 1fr);

  }



  .cat-grid {

    grid-template-columns: repeat(4, 1fr);

  }



  .footer-cols {

    grid-template-columns: repeat(4, 1fr);

  }



  .hero h1 {

    font-size: 3.5rem;

  }

}