/* ===== Mogi Center — base ===== */
:root{
  --black: #0d0d0f;
  --near-black: #141416;
  --dark-2: #1b1b1e;
  --red: #e2131c;
  --red-dark: #b80f16;
  --white: #ffffff;
  --gray-50: #f6f6f7;
  --gray-100: #eceded;
  --gray-400: #9a9aa0;
  --gray-600: #57575c;
  --gray-900: #222225;
  --font-head: 'Oswald', sans-serif;
  --font-body: 'Inter', sans-serif;
  --container: 1180px;
  --radius: 10px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
body{
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-body);
  color: var(--gray-900);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4{ font-family: var(--font-head); text-transform: uppercase; letter-spacing: .01em; margin: 0 0 .5em; color: var(--near-black); }
p{ margin: 0 0 1em; color: var(--gray-600); }
svg{ width: 22px; height: 22px; flex-shrink: 0; }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.w-red{ color: var(--red); }

/* ===== Buttons ===== */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: .04em;
  font-size: 14px; font-weight: 500;
  padding: 13px 26px; border-radius: 4px; border: 2px solid transparent;
  cursor: pointer; transition: all .2s ease; white-space: nowrap;
}
.btn-primary{ background: var(--red); color: var(--white); border-color: var(--red); }
.btn-primary:hover{ background: var(--red-dark); border-color: var(--red-dark); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(226,19,28,.35); }
.btn-outline{ background: transparent; color: var(--near-black); border-color: var(--near-black); }
.btn-outline:hover{ background: var(--near-black); color: var(--white); transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }
.btn-lg{ padding: 16px 32px; font-size: 15px; }
.btn-sm{ padding: 9px 18px; font-size: 12.5px; }

/* ===== Header ===== */
.site-header{
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(13,13,15,.92); backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.header-inner{ display: flex; align-items: center; gap: 16px; height: 108px; }
.brand{ display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand-logo{ height: 92px; width: auto; transition: transform .2s; }
.brand:hover .brand-logo{ transform: scale(1.04); }

.main-nav{ display: flex; gap: 20px; }
.main-nav a{
  position: relative; color: var(--gray-400); font-family: var(--font-head); font-size: 13px;
  text-transform: uppercase; letter-spacing: .06em; font-weight: 500;
  transition: color .2s; padding-bottom: 4px;
}
.main-nav a::after{
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.main-nav a:hover{ color: var(--white); }
.main-nav a:hover::after{ transform: scaleX(1); }

.header-actions{ display: flex; align-items: center; gap: 14px; }
.header-phone{ display: flex; align-items: center; gap: 6px; color: var(--white); font-size: 14px; font-weight: 600; }
.header-phone svg{ width: 17px; height: 17px; color: var(--red); }

.nav-toggle{ display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle span{ width: 24px; height: 2px; background: var(--white); }

/* ===== Hero ===== */
.hero{
  position: relative; overflow: hidden;
  min-height: 92vh; display: flex; align-items: flex-end;
  padding-top: 108px;
}
.hero-bg{ position: absolute; inset: -20px; overflow: hidden; will-change: transform; }
.hero-bg-inner{
  position: absolute; inset: 0; background-size: cover; background-position: center;
  animation: heroZoom 22s ease-in-out infinite alternate;
}
.hero-overlay{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,.72) 55%, rgba(10,10,12,.95) 100%);
}
@keyframes heroZoom{
  from{ transform: scale(1); }
  to{ transform: scale(1.1); }
}
.hero-inner{ position: relative; z-index: 2; padding-bottom: 90px; max-width: 780px; }
.eyebrow, .section-eyebrow{
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: .12em;
  color: var(--red); font-size: 13px; font-weight: 600; margin-bottom: 14px;
}
.hero h1{ color: var(--white); font-size: 52px; line-height: 1.1; margin-bottom: 20px; }
.hero-rotate{
  display: inline-block; transition: opacity .35s ease, transform .35s ease;
}
.hero-rotate.is-swapping{ opacity: 0; transform: translateY(10px); }
.hero-sub{ color: rgba(255,255,255,.82); font-size: 17px; max-width: 560px; margin-bottom: 34px; }
.hero-cta{ display: flex; gap: 16px; flex-wrap: wrap; }
.hero .btn-outline{ color: var(--white); border-color: rgba(255,255,255,.6); }
.hero .btn-outline:hover{ background: var(--white); color: var(--near-black); }

.scroll-cue{
  position: absolute; z-index: 2; left: 50%; bottom: 28px; transform: translateX(-50%);
  width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.5); border-radius: 14px;
}
.scroll-cue span{
  position: absolute; top: 7px; left: 50%; width: 4px; height: 8px; margin-left: -2px;
  background: var(--red); border-radius: 2px; animation: scrollCue 1.8s ease infinite;
}
@keyframes scrollCue{
  0%{ opacity: 1; transform: translateY(0); }
  70%{ opacity: 0; transform: translateY(14px); }
  100%{ opacity: 0; transform: translateY(14px); }
}

/* ===== Stats strip ===== */
.stats-strip{ background: var(--near-black); padding: 30px 0; }
.stats-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat{ display: flex; align-items: center; gap: 14px; }
.stat svg{ color: var(--red); width: 30px; height: 30px; }
.stat strong{ display: block; color: var(--white); font-family: var(--font-head); font-size: 15px; text-transform: uppercase; letter-spacing: .02em; }
.stat span{ color: var(--gray-400); font-size: 13px; }

/* ===== Sections ===== */
.section{ padding: 96px 0; }
.section-dark{ background: var(--near-black); }
.section-dark h2, .section-dark p{ color: var(--white); }
.section-dark p{ color: var(--gray-400); }
.section-head{ text-align: center; max-width: 620px; margin: 0 auto 56px; }
.section-head h2{ font-size: 36px; }
.section-lead{ font-size: 16px; margin: 0; }
.rating-badge{
  display: inline-flex; align-items: baseline; gap: 8px; margin-top: 16px;
  color: var(--red); letter-spacing: 3px; font-size: 17px;
}
.rating-badge span{ color: var(--white); font-family: var(--font-head); letter-spacing: .03em; font-size: 13px; text-transform: uppercase; }

/* ===== About ===== */
.about-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.about-media{ border-radius: var(--radius); overflow: hidden; }
.about-media img{ border-radius: var(--radius); width: 100%; height: 460px; object-fit: cover; transition: transform .5s ease; }
.about-media:hover img{ transform: scale(1.05); }
.about-content h2{ font-size: 34px; margin-bottom: 22px; }
.about-content p{ margin-bottom: 20px; }
.about-content .btn{ margin-top: 8px; }

/* ===== Services ===== */
.services-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.service-card{
  background: var(--dark-2); border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius);
  padding: 34px 28px; transition: transform .25s ease, border-color .25s, box-shadow .25s;
}
.service-card:hover{ transform: translateY(-6px); border-color: var(--red); box-shadow: 0 16px 32px rgba(0,0,0,.35); }
.service-icon{
  width: 56px; height: 56px; border-radius: 50%; background: rgba(226,19,28,.12);
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
  transition: transform .3s ease, background .3s ease;
}
.service-card:hover .service-icon{ transform: rotate(-8deg) scale(1.1); background: var(--red); }
.service-icon svg{ color: var(--red); width: 28px; height: 28px; transition: color .3s ease; }
.service-card:hover .service-icon svg{ color: var(--white); }
.service-card h3{ color: var(--white); font-size: 18px; margin-bottom: 10px; }
.service-card p{ color: var(--gray-400); font-size: 14.5px; margin: 0; }

/* ===== Gallery ===== */
.gallery-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 260px; gap: 16px;
}
.gallery-item{ position: relative; overflow: hidden; border-radius: var(--radius); display: block; }
.gallery-item img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, filter .5s ease; filter: saturate(.9); }
.gallery-item:hover img{ transform: scale(1.1) rotate(.5deg); filter: saturate(1.15); }
.gallery-item::after{
  content: attr(data-caption); position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 16px; font-size: 13px; font-weight: 600; color: var(--white);
  background: linear-gradient(0deg, rgba(0,0,0,.8), rgba(0,0,0,0));
  opacity: 0; transition: opacity .25s;
}
.gallery-item:hover::after{ opacity: 1; }
.gallery-item:nth-child(1){ grid-column: span 2; grid-row: span 2; }

/* ===== Testimonials ===== */
.testimonials-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testimonial-card{
  background: var(--dark-2); border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius);
  padding: 30px 26px; transition: transform .25s ease, border-color .25s, box-shadow .25s;
}
.testimonial-card:hover{ transform: translateY(-6px); border-color: rgba(226,19,28,.5); box-shadow: 0 16px 32px rgba(0,0,0,.35); }
.stars{ color: var(--red); letter-spacing: 3px; font-size: 15px; margin-bottom: 14px; }
.testimonial-card p{ color: var(--gray-100); font-size: 14.5px; font-style: italic; margin-bottom: 18px; }
.testimonial-name{ font-family: var(--font-head); text-transform: uppercase; font-size: 13px; letter-spacing: .05em; color: var(--red); }

/* ===== CTA band ===== */
.cta-band{ background: linear-gradient(120deg, var(--red-dark), var(--red)); padding: 56px 0; }
.cta-band-inner{ display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta-band h2{ color: var(--white); font-size: 26px; margin-bottom: 6px; }
.cta-band p{ color: rgba(255,255,255,.9); margin: 0; }
.cta-band .btn-primary{ background: var(--near-black); border-color: var(--near-black); }
.cta-band .btn-primary:hover{ background: var(--black); }

/* ===== Location ===== */
.location-grid{ display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: stretch; }
.location-info h2{ font-size: 34px; margin-bottom: 30px; }
.info-block{ display: flex; gap: 16px; margin-bottom: 26px; align-items: flex-start; }
.info-block svg{ color: var(--red); margin-top: 2px; }
.info-block strong{ display: block; font-family: var(--font-head); text-transform: uppercase; font-size: 13.5px; letter-spacing: .04em; color: var(--near-black); margin-bottom: 4px; }
.info-block p{ margin: 0; font-size: 14.5px; }
.info-block a:hover{ color: var(--red); }
.location-map{ min-height: 420px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--gray-100); }
.location-map iframe{ width: 100%; height: 100%; min-height: 420px; }

/* ===== Footer ===== */
.site-footer{ background: var(--black); padding-top: 70px; }
.footer-grid{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 50px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-logo{ width: 240px; height: auto; }
.footer-brand p{ color: var(--gray-400); font-size: 14px; margin: 16px 0 20px; max-width: 260px; }
.footer-social{ display: flex; gap: 14px; }
.footer-social a{
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center; color: var(--white); transition: all .2s;
}
.footer-social a:hover{ background: var(--red); border-color: var(--red); }
.footer-social svg{ width: 17px; height: 17px; }
.footer-col h4{ color: var(--white); font-size: 14px; letter-spacing: .05em; margin-bottom: 18px; }
.footer-col a, .footer-col p{ display: block; color: var(--gray-400); font-size: 14px; margin-bottom: 10px; }
.footer-col a:hover{ color: var(--red); }
.footer-bottom{ padding: 22px 0; }
.footer-bottom p{ color: var(--gray-600); font-size: 12.5px; margin: 0; text-align: center; }

/* ===== WhatsApp float ===== */
.whatsapp-float{
  position: fixed; bottom: 26px; right: 26px; z-index: 900;
  width: 60px; height: 60px; border-radius: 50%; background: #25D366; color: var(--white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.3); transition: transform .2s;
}
.whatsapp-float::before{
  content: ''; position: absolute; inset: 0; border-radius: 50%; background: #25D366;
  animation: waPulse 2.4s ease-out infinite; z-index: -1;
}
@keyframes waPulse{
  0%{ transform: scale(1); opacity: .55; }
  100%{ transform: scale(1.9); opacity: 0; }
}
.whatsapp-float:hover{ transform: scale(1.08); }

/* ===== Scroll reveal ===== */
[data-reveal]{
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
[data-reveal="left"]{ transform: translateX(-42px); }
[data-reveal="right"]{ transform: translateX(42px); }
[data-reveal].in-view,
[data-reveal="left"].in-view,
[data-reveal="right"].in-view{
  opacity: 1; transform: none;
}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1; transform: none; transition: none; }
  .hero-bg{ animation: none; }
  .scroll-cue span{ animation: none; }
  .whatsapp-float::before{ animation: none; display: none; }
  html{ scroll-behavior: auto; }
}

/* ===== Lightbox ===== */
.lightbox{
  position: fixed; inset: 0; background: rgba(10,10,12,.94); z-index: 2000;
  display: none; align-items: center; justify-content: center; flex-direction: column; padding: 40px;
}
.lightbox.active{ display: flex; }
.lightbox img{ max-width: 90vw; max-height: 78vh; border-radius: 6px; }
.lightbox p{ color: var(--white); margin-top: 16px; font-family: var(--font-head); letter-spacing: .03em; }
.lightbox-close{
  position: absolute; top: 24px; right: 32px; background: none; border: none; color: var(--white);
  font-size: 38px; line-height: 1; cursor: pointer;
}

/* ===== Scroll shadow state ===== */
.site-header.scrolled{ box-shadow: 0 6px 24px rgba(0,0,0,.35); }

/* ===== Responsive ===== */
@media (max-width: 1140px){
  .main-nav, .header-phone{ display: none; }
  .nav-toggle{ display: flex; }
  .about-grid, .location-grid{ grid-template-columns: 1fr; }
  .about-media img{ height: 320px; }
  .services-grid, .testimonials-grid{ grid-template-columns: repeat(2, 1fr); }
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .hero h1{ font-size: 40px; }
  .stats-grid{ grid-template-columns: repeat(2, 1fr); }

  .main-nav.open{
    display: flex; position: absolute; top: 108px; left: 0; right: 0; background: var(--near-black);
    flex-direction: column; padding: 20px 24px; gap: 4px; border-top: 1px solid rgba(255,255,255,.08);
  }
  .main-nav.open a{ padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
}

@media (max-width: 620px){
  .services-grid, .testimonials-grid{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; gap: 10px; }
  .gallery-item:nth-child(1){ grid-column: span 2; grid-row: span 1; }
  .footer-grid{ grid-template-columns: 1fr; }
  .hero h1{ font-size: 32px; }
  .hero-sub{ font-size: 15px; }
  .cta-band-inner{ flex-direction: column; align-items: flex-start; }
  .section{ padding: 64px 0; }
  .header-actions .btn-sm{ padding: 8px 10px; font-size: 10.5px; }
  .header-inner{ gap: 8px; height: 92px; }
  .brand-logo{ height: 68px; }
  .main-nav.open{ top: 92px; }
  .footer-bottom{ padding-bottom: 90px; }
}

.btn-text-short{ display: none; }
@media (max-width: 360px){
  .btn-text-full{ display: none; }
  .btn-text-short{ display: inline; }
}