/* ============================================
   KaşFin — MAKE KAŞ GREAT AGAIN
   Theme: Wild MAGA Comic Pop-Art Campaign Rally
   Halftone dots, starburst, speech bubbles,
   thick outlines, POW! BOOM!, campaign energy
   Fonts: Bangers (display comic) + Space Grotesk (body)
   ============================================ */

/* --- Reset & Base --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --red: #C41E3A;
  --red-deep: #8B0000;
  --blue: #002868;
  --blue-bright: #0055AA;
  --white: #FFFFFF;
  --cream: #FFF8DC;
  --gold: #FFD700;
  --gold-deep: #DAA520;
  --black: #111111;
  --text: #1a1a1a;
  --text-muted: #555;
  --border: #ccc;

  /* Map old vars to new theme */
  --primary: var(--red);
  --primary-deep: var(--red-deep);
  --secondary: var(--gold);
  --secondary-warm: var(--gold-deep);
  --accent: var(--blue-bright);
  --accent-light: #3377cc;
  --dark: var(--black);
  --light: var(--cream);

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;
  --space-2xl: 12rem;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --outline: 4px solid var(--black);
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Space Grotesk', sans-serif;
  background: var(--cream);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
  position: relative;
}

/* --- Halftone dot overlay (comic texture) --- */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.06;
  background-image: radial-gradient(circle, #000 1px, transparent 1px);
  background-size: 8px 8px;
}

/* --- Typography --- */
h1, h2, h3, h4, h5 {
  font-family: 'Bangers', cursive;
  color: var(--black);
  line-height: 1.05;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 var(--gold), 6px 6px 0 rgba(0,0,0,0.15);
}

h1 {
  font-size: clamp(3.5rem, 8vw + 1rem, 8rem);
  letter-spacing: 0.05em;
}

h2 {
  font-size: clamp(2.2rem, 4vw + 1rem, 4.5rem);
  letter-spacing: 0.04em;
}

h3 {
  font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.5rem);
}

p {
  font-size: clamp(1rem, 0.3vw + 0.9rem, 1.15rem);
  max-width: 65ch;
}

a {
  color: var(--red);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--blue-bright);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- Utility --- */
.container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 3vw, 4rem);
}

.container--narrow {
  max-width: 960px;
}

.section {
  padding: clamp(5rem, 10vw, 10rem) 0;
  position: relative;
}

/* Comic zigzag border between sections */
.section + .section::before {
  content: '★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★';
  display: block;
  text-align: center;
  font-size: 1.2rem;
  color: var(--red);
  letter-spacing: 0.5em;
  position: absolute;
  top: -0.7em;
  left: 0; right: 0;
  z-index: 2;
}

.section--dark {
  background: var(--blue) !important;
  color: #fff;
  border: 6px solid var(--red);
  border-left: none;
  border-right: none;
}

.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: #fff;
  text-shadow: 3px 3px 0 var(--red), 6px 6px 0 rgba(0,0,0,0.3);
}

.section--dark p {
  color: rgba(255, 255, 255, 0.9);
}

.section--tinted {
  background: #ffe8e8;
  border-top: 6px dashed var(--red);
  border-bottom: 6px dashed var(--red);
}

.section--primary {
  background: var(--red);
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* Starburst behind primary section */
.section--primary::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 800px; height: 800px;
  background: conic-gradient(
    from 0deg,
    rgba(255,255,255,0.12) 0deg, transparent 15deg,
    rgba(255,255,255,0.12) 15deg, transparent 30deg,
    rgba(255,255,255,0.12) 30deg, transparent 45deg,
    rgba(255,255,255,0.12) 45deg, transparent 60deg,
    rgba(255,255,255,0.12) 60deg, transparent 75deg,
    rgba(255,255,255,0.12) 75deg, transparent 90deg,
    rgba(255,255,255,0.12) 90deg, transparent 105deg,
    rgba(255,255,255,0.12) 105deg, transparent 120deg,
    rgba(255,255,255,0.12) 120deg, transparent 135deg,
    rgba(255,255,255,0.12) 135deg, transparent 150deg,
    rgba(255,255,255,0.12) 150deg, transparent 165deg,
    rgba(255,255,255,0.12) 165deg, transparent 180deg,
    rgba(255,255,255,0.12) 180deg, transparent 195deg,
    rgba(255,255,255,0.12) 195deg, transparent 210deg,
    rgba(255,255,255,0.12) 210deg, transparent 225deg,
    rgba(255,255,255,0.12) 225deg, transparent 240deg,
    rgba(255,255,255,0.12) 240deg, transparent 255deg,
    rgba(255,255,255,0.12) 255deg, transparent 270deg,
    rgba(255,255,255,0.12) 270deg, transparent 285deg,
    rgba(255,255,255,0.12) 285deg, transparent 300deg,
    rgba(255,255,255,0.12) 300deg, transparent 315deg,
    rgba(255,255,255,0.12) 315deg, transparent 330deg,
    rgba(255,255,255,0.12) 330deg, transparent 345deg,
    rgba(255,255,255,0.12) 345deg, transparent 360deg
  );
  border-radius: 50%;
  animation: starburst-rotate 20s linear infinite;
  pointer-events: none;
}

@keyframes starburst-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.section--primary h2,
.section--primary h3 {
  color: #fff;
  text-shadow: 4px 4px 0 rgba(0,0,0,0.3);
  position: relative;
  z-index: 1;
}

.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--gold); }
.text-primary { color: var(--red); }
.text-accent { color: var(--blue-bright); }

/* --- Label / Tag --- */
.label {
  display: inline-block;
  font-family: 'Bangers', cursive;
  font-size: 1rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 0.4em 1.2em;
  border-radius: 0;
  background: var(--gold);
  color: var(--black);
  border: 3px solid var(--black);
  transform: rotate(-2deg);
  box-shadow: 4px 4px 0 var(--black);
}

.label--outline {
  background: transparent;
  border: 3px solid var(--red);
  color: var(--red);
  box-shadow: 4px 4px 0 var(--red);
}

.label--dark {
  background: var(--black);
  color: var(--gold);
  border-color: var(--gold);
  box-shadow: 4px 4px 0 var(--gold);
}

/* --- Button --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: 'Bangers', cursive;
  font-size: 1.2rem;
  padding: 0.8em 2em;
  border-radius: 0;
  border: 4px solid var(--black);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 6px 6px 0 var(--black);
  position: relative;
}

.btn:hover {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 var(--black);
}

.btn:active {
  transform: translate(6px, 6px);
  box-shadow: 0 0 0 var(--black);
}

.btn--primary {
  background: var(--red);
  color: #fff;
}

.btn--primary:hover {
  background: var(--red-deep);
  color: #fff;
}

.btn--secondary {
  background: var(--gold);
  color: var(--black);
}

.btn--secondary:hover {
  background: var(--gold-deep);
}

.btn--outline {
  background: transparent;
  border: 4px solid var(--black);
  color: var(--black);
}

.btn--outline:hover {
  background: var(--black);
  color: #fff;
}

.btn--white {
  background: #fff;
  color: var(--red);
  border-color: var(--red);
  box-shadow: 6px 6px 0 var(--red);
}

.btn--white:hover {
  background: var(--cream);
  box-shadow: 3px 3px 0 var(--red);
}

.btn--large {
  font-size: 1.4rem;
  padding: 1em 2.5em;
}

/* --- Navigation --- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--blue);
  border-bottom: 5px solid var(--red);
  transition: all 0.3s ease;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.nav__logo {
  font-family: 'Bangers', cursive;
  font-size: 2rem;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.05em;
  text-shadow: 2px 2px 0 var(--red);
}

.nav__logo span {
  color: var(--gold);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}

.nav__links a {
  font-family: 'Bangers', cursive;
  font-size: 1.1rem;
  font-weight: 400;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s;
  position: relative;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.nav__links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--gold);
  transition: width 0.3s ease;
}

.nav__links a:hover::after,
.nav__links a.active::after {
  width: 100%;
}

.nav__links a:hover {
  color: var(--gold);
}

.nav__links a.active {
  color: var(--gold);
}

.nav__cta {
  font-size: 1rem !important;
  padding: 0.4em 1.2em !important;
  background: var(--red) !important;
  color: #fff !important;
  border: 3px solid var(--gold) !important;
  box-shadow: 3px 3px 0 var(--gold) !important;
}

.nav__cta:hover {
  background: var(--red-deep) !important;
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--gold) !important;
}

.nav__lang {
  font-weight: 400 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.05em;
  padding: 0.3em 0.6em !important;
  border: 2px solid var(--gold) !important;
  border-radius: 0 !important;
  color: var(--gold) !important;
  transition: all 0.2s ease;
}

.nav__lang:hover {
  background: var(--gold) !important;
  color: var(--black) !important;
}

.nav__burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 24px;
  position: relative;
  z-index: 1001;
}

.nav__burger span {
  display: block;
  width: 100%;
  height: 3px;
  background: #fff;
  border-radius: 0;
  transition: all 0.3s ease;
  position: absolute;
  left: 0;
}

.nav__burger span:nth-child(1) { top: 0; }
.nav__burger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav__burger span:nth-child(3) { bottom: 0; }

/* --- Hero --- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 72px;
  background: var(--blue);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.3) saturate(0.7);
}

.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(0,40,104,0.92) 0%, rgba(196,30,58,0.7) 50%, rgba(255,215,0,0.3) 100%),
    repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(0,0,0,0.03) 4px, rgba(0,0,0,0.03) 5px);
}

.hero__content {
  position: relative;
  z-index: 1;
  padding: clamp(3rem, 6vw, 6rem) 0;
  max-width: 780px;
}

.hero__content .label {
  margin-bottom: var(--space-md);
  background: var(--gold);
  color: var(--black);
  border: 3px solid #fff;
  box-shadow: 4px 4px 0 #fff;
}

.hero__content h1 {
  color: #fff;
  margin-bottom: 0.3em;
  text-shadow: 5px 5px 0 var(--red), 10px 10px 0 rgba(0,0,0,0.3);
  font-size: clamp(4rem, 10vw + 1rem, 10rem);
}

.hero__content h1 .highlight {
  color: var(--gold);
  text-shadow: 5px 5px 0 var(--red-deep), 10px 10px 0 rgba(0,0,0,0.3);
}

.hero__subtitle {
  font-family: 'Bangers', cursive;
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  color: var(--gold);
  margin-bottom: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
}

.hero__text {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2.5rem;
  max-width: 550px;
  line-height: 1.7;
}

.hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* --- Feature Cards --- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.feature-card {
  background: #fff;
  border: 4px solid var(--black);
  padding: clamp(2rem, 3vw, 3rem);
  transition: all 0.2s ease;
  position: relative;
  overflow: visible;
  box-shadow: 8px 8px 0 var(--black);
}

/* Comic "POW!" style decoration on cards */
.feature-card:nth-child(1)::after {
  content: 'POW!';
  position: absolute;
  top: -18px; right: -12px;
  font-family: 'Bangers', cursive;
  font-size: 1.4rem;
  color: #fff;
  background: var(--red);
  padding: 0.2em 0.6em;
  border: 3px solid var(--black);
  transform: rotate(8deg);
  z-index: 2;
  box-shadow: 3px 3px 0 var(--black);
}

.feature-card:nth-child(2)::after {
  content: 'BOOM!';
  position: absolute;
  top: -18px; right: -12px;
  font-family: 'Bangers', cursive;
  font-size: 1.4rem;
  color: var(--black);
  background: var(--gold);
  padding: 0.2em 0.6em;
  border: 3px solid var(--black);
  transform: rotate(-5deg);
  z-index: 2;
  box-shadow: 3px 3px 0 var(--black);
}

.feature-card:nth-child(3)::after {
  content: 'WOW!';
  position: absolute;
  top: -18px; right: -12px;
  font-family: 'Bangers', cursive;
  font-size: 1.4rem;
  color: #fff;
  background: var(--blue-bright);
  padding: 0.2em 0.6em;
  border: 3px solid var(--black);
  transform: rotate(6deg);
  z-index: 2;
  box-shadow: 3px 3px 0 var(--black);
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--red);
}

.feature-card:nth-child(2)::before { background: var(--gold); }
.feature-card:nth-child(3)::before { background: var(--blue-bright); }

.feature-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 12px 12px 0 var(--black);
}

.feature-card__icon {
  width: 64px;
  height: 64px;
  border: 3px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  color: #fff;
  box-shadow: 4px 4px 0 var(--black);
}

.feature-card__icon--primary { background: var(--red); }
.feature-card__icon--secondary { background: var(--gold); color: var(--black); }
.feature-card__icon--accent { background: var(--blue-bright); }

.feature-card h3 {
  margin-bottom: 0.8rem;
  text-shadow: 2px 2px 0 var(--gold), 4px 4px 0 rgba(0,0,0,0.1);
}

.feature-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* --- Gallery Grid --- */
.gallery-section h2 {
  margin-bottom: 0.5rem;
}

.gallery-section .section-subtitle {
  margin-bottom: var(--space-lg);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  gap: 1.2rem;
}

.gallery-grid__item {
  border: 4px solid var(--black);
  overflow: hidden;
  position: relative;
  aspect-ratio: 4/3;
  box-shadow: 6px 6px 0 var(--black);
  transition: all 0.2s ease;
}

.gallery-grid__item:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--black);
}

.gallery-grid__item--tall {
  grid-row: span 2;
  aspect-ratio: auto;
}

.gallery-grid__item--wide {
  grid-column: span 2;
}

.gallery-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  filter: contrast(1.1) saturate(1.2);
}

.gallery-grid__item:hover img {
  transform: scale(1.08);
}

.gallery-grid__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.4s;
}

.gallery-grid__item:hover::after {
  opacity: 1;
}

.gallery-grid__caption {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  color: #fff;
  font-family: 'Bangers', cursive;
  font-size: 1.1rem;
  z-index: 1;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.4s ease;
  text-shadow: 2px 2px 0 var(--black);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.gallery-grid__item:hover .gallery-grid__caption {
  opacity: 1;
  transform: translateY(0);
}

/* --- Stats Row --- */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.stat-item {
  text-align: left;
  padding: clamp(1.5rem, 2vw, 2rem) 0;
  border-top: 5px solid var(--gold);
}

.stat-item__number {
  font-family: 'Bangers', cursive;
  font-size: clamp(2.5rem, 4vw, 4rem);
  color: #fff;
  letter-spacing: 0.03em;
  line-height: 1.1;
  margin-bottom: 0.3rem;
  text-shadow: 3px 3px 0 var(--red);
}

.stat-item__label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
}

/* --- Service Blocks --- */
.service-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 5vw, 6rem);
  align-items: center;
}

.service-block--reverse {
  direction: rtl;
}

.service-block--reverse > * {
  direction: ltr;
}

.service-block + .service-block {
  margin-top: clamp(5rem, 10vw, 10rem);
}

.service-block__visual {
  position: relative;
}

.service-block__image {
  border: 5px solid var(--black);
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: 10px 10px 0 var(--red);
}

.service-block__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.1) saturate(1.15);
}

.service-block__image--secondary {
  position: absolute;
  bottom: -2rem;
  right: -2rem;
  width: 45%;
  border: 4px solid var(--black);
  overflow: hidden;
  box-shadow: 6px 6px 0 var(--gold);
  aspect-ratio: 1;
  z-index: 2;
}

.service-block__image--secondary img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-block__content {
  padding: var(--space-md) 0;
}

.service-block__content .label {
  margin-bottom: 1.5rem;
}

.service-block__content h2 {
  margin-bottom: 1rem;
}

.service-block__content > p {
  color: var(--text-muted);
  margin-bottom: 2rem;
}

.service-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.service-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.service-list li i {
  color: var(--red);
  margin-top: 0.2em;
  flex-shrink: 0;
}

/* --- Cat Banner --- */
.cat-banner {
  background: var(--gold);
  border: 5px solid var(--black);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  box-shadow: 10px 10px 0 var(--black);
  position: relative;
}

/* Speech bubble on cat banner */
.cat-banner::after {
  content: 'MEOW!';
  position: absolute;
  top: 20px; right: 30%;
  font-family: 'Bangers', cursive;
  font-size: 2rem;
  color: var(--red);
  background: #fff;
  padding: 0.3em 0.8em;
  border: 3px solid var(--black);
  border-radius: 20px 20px 20px 0;
  box-shadow: 3px 3px 0 var(--black);
  z-index: 2;
  transform: rotate(-3deg);
}

.cat-banner__content {
  padding: clamp(2.5rem, 4vw, 4rem);
}

.cat-banner__content h3 {
  color: var(--black);
  margin-bottom: 0.5rem;
}

.cat-banner__content p {
  color: rgba(26, 35, 50, 0.7);
}

.cat-banner__image {
  height: 100%;
  min-height: 280px;
}

.cat-banner__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- About / Market --- */
.market-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(3rem, 5vw, 6rem);
  align-items: start;
}

.market-stat {
  background: #fff;
  padding: 1.5rem;
  border-left: 6px solid var(--red);
  border: 3px solid var(--black);
  border-left: 6px solid var(--red);
  margin-bottom: 1rem;
  box-shadow: 5px 5px 0 var(--black);
}

.market-stat__value {
  font-family: 'Bangers', cursive;
  font-size: 2rem;
  color: var(--red);
  letter-spacing: 0.02em;
}

.market-stat__desc {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.market-visual {
  position: relative;
}

.market-visual__image {
  border: 5px solid var(--black);
  overflow: hidden;
  box-shadow: 10px 10px 0 var(--blue);
}

.market-visual__image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.market-visual__float {
  position: absolute;
  bottom: -1.5rem;
  left: -1.5rem;
  width: 55%;
  border: 4px solid var(--black);
  overflow: hidden;
  box-shadow: 6px 6px 0 var(--red);
  z-index: 2;
}

.market-visual__float img {
  width: 100%;
  height: auto;
}

/* --- Business Model Cards --- */
.biz-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.biz-card {
  background: rgba(255, 255, 255, 0.1);
  border: 3px solid rgba(255, 215, 0, 0.5);
  padding: clamp(1.5rem, 2.5vw, 2.5rem);
  transition: all 0.2s ease;
  box-shadow: 5px 5px 0 rgba(255, 215, 0, 0.3);
}

.biz-card:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 rgba(255, 215, 0, 0.4);
}

.biz-card h4 {
  font-family: 'Bangers', cursive;
  font-size: 1.5rem;
  margin-bottom: 0.8rem;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.3);
}

.biz-card p,
.biz-card li {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
}

.biz-card ul {
  list-style: none;
  margin-top: 0.5rem;
}

.biz-card ul li {
  padding: 0.3rem 0;
  padding-left: 1.2rem;
  position: relative;
}

.biz-card ul li::before {
  content: '★';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 0.7rem;
  top: 0.5em;
}

/* --- Roadmap --- */
.roadmap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: var(--space-lg);
}

.roadmap__step {
  position: relative;
  padding: 2rem 1.5rem;
  background: #fff;
  border: 4px solid var(--black);
  transition: all 0.2s ease;
  box-shadow: 6px 6px 0 var(--black);
}

.roadmap__step:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--black);
}

.roadmap__step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
}

.roadmap__step:nth-child(1)::before { background: var(--red); }
.roadmap__step:nth-child(2)::before { background: var(--gold); }
.roadmap__step:nth-child(3)::before { background: var(--blue-bright); }
.roadmap__step:nth-child(4)::before { background: var(--black); }

/* Comic step numbers */
.roadmap__step:nth-child(1)::after { content: '#1'; }
.roadmap__step:nth-child(2)::after { content: '#2'; }
.roadmap__step:nth-child(3)::after { content: '#3'; }
.roadmap__step:nth-child(4)::after { content: '#4'; }

.roadmap__step::after {
  position: absolute;
  top: -16px; right: 12px;
  font-family: 'Bangers', cursive;
  font-size: 1.5rem;
  color: #fff;
  background: var(--red);
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--black);
  box-shadow: 3px 3px 0 var(--black);
}

.roadmap__date {
  font-family: 'Bangers', cursive;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--red);
  margin-bottom: 0.8rem;
}

.roadmap__step h4 {
  font-family: 'Bangers', cursive;
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  text-shadow: 2px 2px 0 var(--gold);
}

.roadmap__step p {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* --- Team --- */
.team-card {
  display: flex;
  align-items: center;
  gap: 2rem;
  background: #fff;
  padding: 2rem;
  border: 4px solid var(--black);
  max-width: 500px;
  box-shadow: 8px 8px 0 var(--red);
}

.team-card__avatar {
  width: 90px;
  height: 90px;
  background: var(--gold);
  border: 4px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black);
  font-family: 'Bangers', cursive;
  font-size: 2.5rem;
  flex-shrink: 0;
  box-shadow: 4px 4px 0 var(--black);
}

.team-card__info h4 {
  font-family: 'Bangers', cursive;
  font-size: 1.5rem;
  margin-bottom: 0.2rem;
}

.team-card__info p {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* --- Contact Form --- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(3rem, 5vw, 6rem);
  align-items: start;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  font-family: 'Bangers', cursive;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: var(--black);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 1rem 1.2rem;
  border: 3px solid var(--black);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  color: var(--text);
  background: #fff;
  transition: border-color 0.3s, box-shadow 0.3s;
  outline: none;
  box-shadow: 4px 4px 0 var(--black);
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--red);
  box-shadow: 4px 4px 0 var(--red);
}

.form-group textarea {
  resize: vertical;
  min-height: 140px;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.contact-info__item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.contact-info__icon {
  width: 52px;
  height: 52px;
  background: var(--red);
  border: 3px solid var(--black);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  box-shadow: 3px 3px 0 var(--black);
}

.contact-info__text h4 {
  font-family: 'Bangers', cursive;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

.contact-info__text p {
  font-size: 1rem;
  color: var(--black);
}

.contact-map {
  margin-top: 2rem;
  background: var(--blue);
  border: 4px solid var(--black);
  padding: 3rem;
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 8px 8px 0 var(--red);
}

.contact-map::before {
  content: '★ KAŞ ★';
  position: absolute;
  top: 10px; right: 10px;
  font-family: 'Bangers', cursive;
  font-size: 0.8rem;
  color: var(--gold);
  letter-spacing: 0.1em;
}

.contact-map i {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  display: block;
  opacity: 0.9;
}

.contact-map h4 {
  font-family: 'Bangers', cursive;
  font-size: 1.8rem;
  color: #fff;
  margin-bottom: 0.3rem;
  text-shadow: 2px 2px 0 var(--red);
}

.contact-map p {
  opacity: 0.9;
  max-width: none;
}

.social-links {
  display: flex;
  gap: 0.8rem;
  margin-top: 2rem;
}

.social-links a {
  width: 48px;
  height: 48px;
  background: var(--blue);
  border: 3px solid var(--black);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all 0.2s ease;
  box-shadow: 3px 3px 0 var(--black);
}

.social-links a:hover {
  background: var(--red);
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--black);
}

/* --- Contact Hero Image --- */
.contact-hero-image {
  border: 5px solid var(--black);
  overflow: hidden;
  margin-bottom: var(--space-lg);
  max-height: 400px;
  box-shadow: 10px 10px 0 var(--red);
}

.contact-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Footer --- */
.footer {
  background: var(--black);
  color: rgba(255, 255, 255, 0.7);
  padding: clamp(4rem, 6vw, 6rem) 0 2rem;
  border-top: 8px solid var(--red);
  position: relative;
}

/* Footer stars */
.footer::before {
  content: '★ MAKE KAŞ GREAT AGAIN ★';
  position: absolute;
  top: -1.5em;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bangers', cursive;
  font-size: 1rem;
  color: var(--gold);
  background: var(--red);
  padding: 0.3em 1.5em;
  border: 3px solid var(--gold);
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 3px dashed rgba(255, 255, 255, 0.15);
}

.footer__brand {
  font-family: 'Bangers', cursive;
  font-size: 2rem;
  color: #fff;
  margin-bottom: 1rem;
  display: block;
  text-shadow: 2px 2px 0 var(--red);
  letter-spacing: 0.05em;
}

.footer__brand span {
  color: var(--gold);
}

.footer__desc {
  font-size: 0.9rem;
  line-height: 1.7;
  max-width: 320px;
}

.footer h5 {
  font-family: 'Bangers', cursive;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  margin-bottom: 1.2rem;
}

.footer__links {
  list-style: none;
}

.footer__links li + li {
  margin-top: 0.6rem;
}

.footer__links a {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.3s;
}

.footer__links a:hover {
  color: var(--gold);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
}

/* --- Page Header (for inner pages) --- */
.page-header {
  padding: clamp(8rem, 14vw, 12rem) 0 clamp(4rem, 6vw, 6rem);
  background: var(--blue);
  color: #fff;
  position: relative;
  overflow: hidden;
  border-bottom: 6px solid var(--red);
}

/* Starburst on page header */
.page-header::before {
  content: '';
  position: absolute;
  top: -30%; right: -10%;
  width: 500px; height: 500px;
  background: conic-gradient(
    from 0deg,
    rgba(255,215,0,0.1) 0deg, transparent 20deg,
    rgba(255,215,0,0.1) 20deg, transparent 40deg,
    rgba(255,215,0,0.1) 40deg, transparent 60deg,
    rgba(255,215,0,0.1) 60deg, transparent 80deg,
    rgba(255,215,0,0.1) 80deg, transparent 100deg,
    rgba(255,215,0,0.1) 100deg, transparent 120deg,
    rgba(255,215,0,0.1) 120deg, transparent 140deg,
    rgba(255,215,0,0.1) 140deg, transparent 160deg,
    rgba(255,215,0,0.1) 160deg, transparent 180deg,
    rgba(255,215,0,0.1) 180deg, transparent 200deg,
    rgba(255,215,0,0.1) 200deg, transparent 220deg,
    rgba(255,215,0,0.1) 220deg, transparent 240deg,
    rgba(255,215,0,0.1) 240deg, transparent 260deg,
    rgba(255,215,0,0.1) 260deg, transparent 280deg,
    rgba(255,215,0,0.1) 280deg, transparent 300deg,
    rgba(255,215,0,0.1) 300deg, transparent 320deg,
    rgba(255,215,0,0.1) 320deg, transparent 340deg,
    rgba(255,215,0,0.1) 340deg, transparent 360deg
  );
  border-radius: 50%;
  animation: starburst-rotate 25s linear infinite;
  pointer-events: none;
}

.page-header::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(196, 30, 58, 0.15), transparent 70%);
  pointer-events: none;
}

.page-header .label {
  margin-bottom: 1.5rem;
}

.page-header h1 {
  color: #fff;
  max-width: 700px;
  text-shadow: 4px 4px 0 var(--red), 8px 8px 0 rgba(0,0,0,0.2);
}

.page-header p {
  color: rgba(255, 255, 255, 0.85);
  margin-top: 1rem;
  max-width: 560px;
}

/* --- Section Headers --- */
.section-header {
  margin-bottom: clamp(3rem, 5vw, 5rem);
}

.section-header .label {
  margin-bottom: 1rem;
}

.section-header p {
  color: var(--text-muted);
  margin-top: 0.8rem;
}

.section-header--left {
  max-width: 600px;
}

/* --- Asymmetric offset --- */
.offset-left {
  padding-left: clamp(0rem, 5vw, 6rem);
}

.offset-right {
  padding-right: clamp(0rem, 5vw, 6rem);
}

/* --- Divider --- */
.divider {
  width: 60px;
  height: 5px;
  background: var(--red);
  margin: 2rem 0;
}

/* --- Dog image section for about --- */
.about-image-accent {
  border: 4px solid var(--black);
  overflow: hidden;
  max-width: 380px;
  margin-top: 2rem;
  box-shadow: 6px 6px 0 var(--gold);
  position: relative;
}

.about-image-accent::after {
  content: 'WOOF!';
  position: absolute;
  top: 10px; right: 10px;
  font-family: 'Bangers', cursive;
  font-size: 1.3rem;
  color: #fff;
  background: var(--red);
  padding: 0.2em 0.5em;
  border: 2px solid var(--black);
  transform: rotate(5deg);
  box-shadow: 2px 2px 0 var(--black);
}

.about-image-accent img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* =============================================
   MAGA STYLE — "MAKE KAS GREAT AGAIN"
   ============================================= */

/* --- MAGA Top Banner --- */
.maga-banner {
  background: var(--red);
  color: #fff;
  text-align: center;
  padding: 0.8rem 1rem;
  font-family: 'Bangers', cursive;
  font-size: clamp(0.9rem, 2vw, 1.3rem);
  text-transform: uppercase;
  letter-spacing: 5px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  line-height: 1.3;
  box-shadow: 0 4px 20px rgba(196, 30, 58, 0.5);
  border-bottom: 4px solid var(--gold);
}

.maga-banner__text {
  display: inline-block;
  animation: maga-flash 2s ease-in-out infinite;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.3);
}

@keyframes maga-flash {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.02); text-shadow: 0 0 30px rgba(255, 215, 0, 0.8); }
}

/* Push nav down for MAGA banner */
.nav {
  top: 44px !important;
}

.hero {
  padding-top: 116px !important;
}

.page-header {
  padding-top: clamp(10rem, 16vw, 14rem) !important;
}

/* --- Hero MAGA Ribbon --- */
.maga-ribbon {
  position: absolute;
  top: 40px;
  right: -40px;
  background: var(--red);
  color: #fff;
  font-family: 'Bangers', cursive;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  padding: 0.5em 4em;
  transform: rotate(45deg);
  z-index: 5;
  box-shadow: 0 4px 15px rgba(0,0,0,0.4);
  pointer-events: none;
  border: 2px solid var(--gold);
}

/* --- Pop-up floating images --- */
.maga-popup {
  position: fixed;
  z-index: 900;
  cursor: grab;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.4));
}

.maga-popup.active {
  opacity: 1;
  pointer-events: auto;
}

.maga-popup img {
  width: 220px;
  height: auto;
  border: 5px solid var(--black);
  display: block;
  box-shadow: 6px 6px 0 var(--red);
}

.maga-popup__close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 32px;
  height: 32px;
  background: var(--red);
  color: #fff;
  border: 3px solid var(--black);
  font-family: 'Bangers', cursive;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: transform 0.2s;
  z-index: 2;
  box-shadow: 2px 2px 0 var(--black);
}

.maga-popup__close:hover {
  transform: scale(1.2) rotate(90deg);
  background: var(--gold);
  color: var(--black);
}

/* Pop-up: Money */
.maga-popup--money {
  bottom: 120px;
  left: -300px;
}

.maga-popup--money.active {
  animation: popFromLeft 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes popFromLeft {
  0% { left: -300px; transform: rotate(-12deg) scale(0.6); }
  60% { left: 30px; transform: rotate(3deg) scale(1.05); }
  100% { left: 20px; transform: rotate(-4deg) scale(1); }
}

/* Pop-up: Cat */
.maga-popup--cat {
  top: 180px;
  right: -300px;
}

.maga-popup--cat.active {
  animation: popFromRight 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes popFromRight {
  0% { right: -300px; transform: rotate(12deg) scale(0.6); }
  60% { right: 30px; transform: rotate(-3deg) scale(1.05); }
  100% { right: 20px; transform: rotate(5deg) scale(1); }
}

/* =============================================
   CAT CHATBOX WIDGET — Comic style
   ============================================= */

.chat-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 950;
  font-family: 'Space Grotesk', sans-serif;
}

.chat-bubble {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
  transition: transform 0.15s ease;
}

.chat-bubble.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  animation: chatBounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes chatBounceIn {
  0% { opacity: 0; transform: scale(0) translateY(30px); }
  50% { opacity: 1; transform: scale(1.15) translateY(-5px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.chat-bubble__avatar {
  width: 65px;
  height: 65px;
  overflow: hidden;
  border: 4px solid var(--black);
  box-shadow: 4px 4px 0 var(--red);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.chat-bubble:hover .chat-bubble__avatar {
  animation: catWobble 0.5s ease;
}

@keyframes catWobble {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(-10deg) scale(1.1); }
  40% { transform: rotate(8deg); }
  60% { transform: rotate(-5deg); }
  80% { transform: rotate(3deg); }
  100% { transform: rotate(0deg) scale(1); }
}

.chat-bubble__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-bubble__text {
  background: var(--gold);
  padding: 10px 16px;
  border: 3px solid var(--black);
  box-shadow: 4px 4px 0 var(--black);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--black);
  max-width: 220px;
  line-height: 1.4;
  position: relative;
  font-family: 'Bangers', cursive;
  letter-spacing: 0.03em;
}

/* Comic speech bubble pointer */
.chat-bubble__text::after {
  content: '';
  position: absolute;
  bottom: 8px;
  right: -14px;
  width: 0;
  height: 0;
  border-left: 14px solid var(--gold);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.chat-panel {
  width: 350px;
  height: 450px;
  background: var(--cream);
  border: 4px solid var(--black);
  box-shadow: 10px 10px 0 var(--red);
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: chatPanelIn 0.35s ease;
}

.chat-panel.active {
  display: flex;
}

@keyframes chatPanelIn {
  0% { opacity: 0; transform: translateY(20px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.chat-panel__header {
  background: var(--red);
  color: #fff;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 3px solid var(--black);
}

.chat-panel__header-avatar {
  width: 44px;
  height: 44px;
  overflow: hidden;
  border: 3px solid var(--gold);
  flex-shrink: 0;
}

.chat-panel__header-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-panel__header-title {
  font-family: 'Bangers', cursive;
  font-size: 1.2rem;
  flex: 1;
  letter-spacing: 0.05em;
}

.chat-panel__header-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  opacity: 0.8;
  transition: all 0.2s;
  line-height: 1;
  padding: 4px;
}

.chat-panel__header-close:hover {
  opacity: 1;
  transform: rotate(90deg);
}

.chat-panel__body {
  flex: 1;
  padding: 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.chat-panel__message {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.chat-panel__message-avatar {
  width: 36px;
  height: 36px;
  overflow: hidden;
  border: 2px solid var(--black);
  flex-shrink: 0;
}

.chat-panel__message-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-panel__message-text {
  background: #fff;
  padding: 10px 14px;
  border: 2px solid var(--black);
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.5;
  max-width: 240px;
  box-shadow: 3px 3px 0 var(--black);
}

.chat-panel__form {
  padding: 14px 18px;
  border-top: 3px solid var(--black);
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
}

.chat-panel__form input,
.chat-panel__form textarea {
  width: 100%;
  padding: 8px 12px;
  border: 2px solid var(--black);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.82rem;
  outline: none;
  transition: border-color 0.3s;
  color: var(--text);
  box-shadow: 2px 2px 0 var(--black);
}

.chat-panel__form input:focus,
.chat-panel__form textarea:focus {
  border-color: var(--red);
  box-shadow: 2px 2px 0 var(--red);
}

.chat-panel__form textarea {
  resize: none;
  min-height: 50px;
}

.chat-panel__form button {
  background: var(--red);
  color: #fff;
  border: 3px solid var(--black);
  padding: 8px 16px;
  font-family: 'Bangers', cursive;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 var(--black);
}

.chat-panel__form button:hover {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--black);
}

.chat-panel__thanks {
  text-align: center;
  padding: 30px 18px;
  font-family: 'Bangers', cursive;
  font-size: 1.2rem;
  color: var(--red);
  line-height: 1.5;
  letter-spacing: 0.03em;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
  .features-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-grid__item--tall {
    grid-row: span 1;
  }

  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-block {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .service-block--reverse {
    direction: ltr;
  }

  .market-grid {
    grid-template-columns: 1fr;
  }

  .biz-grid {
    grid-template-columns: 1fr;
  }

  .roadmap {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cat-banner {
    grid-template-columns: 1fr;
  }

  .cat-banner__image {
    min-height: 220px;
  }
}

@media (max-width: 768px) {
  .nav__links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 360px;
    height: 100vh;
    background: var(--blue);
    flex-direction: column;
    padding: 6rem 2rem 2rem;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.3);
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 1.5rem;
    z-index: 1000;
    border-left: 5px solid var(--red);
  }

  .nav__links.active {
    right: 0;
  }

  .nav__burger {
    display: block;
  }

  .nav__burger.active span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }

  .nav__burger.active span:nth-child(2) {
    opacity: 0;
  }

  .nav__burger.active span:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
  }

  .hero__content h1 {
    font-size: clamp(2.5rem, 10vw, 4.5rem);
  }

  .gallery-grid {
    grid-template-columns: 1fr 1fr;
  }

  .gallery-grid__item--wide {
    grid-column: span 1;
  }

  .stats-row {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }

  .roadmap {
    grid-template-columns: 1fr;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer__bottom {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }

  .service-block__image--secondary {
    bottom: -1rem;
    right: -1rem;
    width: 40%;
  }

  .offset-left,
  .offset-right {
    padding-left: 0;
    padding-right: 0;
  }

  /* MAGA responsive */
  .maga-banner {
    font-size: 0.7rem;
    letter-spacing: 2px;
    padding: 0.5rem;
  }

  .nav {
    top: 36px !important;
  }

  .hero {
    padding-top: 108px !important;
  }

  .maga-popup img {
    width: 150px;
  }

  .maga-ribbon {
    font-size: 0.65rem;
    top: 28px;
    right: -45px;
  }

  .chat-panel {
    width: calc(100vw - 40px);
    max-width: 350px;
    height: 420px;
  }

  .chat-bubble__text {
    max-width: 170px;
    font-size: 0.82rem;
  }
}

@media (max-width: 480px) {
  .hero {
    min-height: 90vh;
  }

  .hero__actions {
    flex-direction: column;
  }

  .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .stats-row {
    grid-template-columns: 1fr;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .team-card {
    flex-direction: column;
    text-align: center;
  }

  .maga-popup img {
    width: 120px;
  }

  .maga-popup--money.active {
    animation: popFromLeftMobile 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }

  @keyframes popFromLeftMobile {
    0% { left: -200px; transform: rotate(-12deg) scale(0.6); }
    100% { left: 10px; transform: rotate(-4deg) scale(1); }
  }

  .maga-popup--cat.active {
    animation: popFromRightMobile 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }

  @keyframes popFromRightMobile {
    0% { right: -200px; transform: rotate(12deg) scale(0.6); }
    100% { right: 10px; transform: rotate(5deg) scale(1); }
  }

  /* Feature card decorations smaller on mobile */
  .feature-card:nth-child(1)::after,
  .feature-card:nth-child(2)::after,
  .feature-card:nth-child(3)::after {
    font-size: 1rem;
    top: -14px; right: -8px;
  }
}