/* ============================================================
   PIKE — HOME PAGE STYLES
   ============================================================ */

/* === HERO === */
.hero{
  position:relative;
  min-height:100vh;
  background:var(--navy-deep);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  padding-top:var(--nav-h);
}
.hero-bg{
  position:absolute;inset:0;z-index:1;
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(19,31,69,.55) 0%, rgba(19,31,69,.35) 30%, rgba(19,31,69,.85) 100%);
}
.hero-bg img{width:100%;height:100%;object-fit:cover}

.hero-content{
  position:relative;z-index:5;
  max-width:1100px;
  padding:60px var(--gutter);
  text-align:center;
  width:100%;
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--font-ui);
  font-size:11px;letter-spacing:.5em;text-transform:uppercase;
  color:var(--gold-soft);font-weight:600;
  margin-bottom:36px;
  opacity:0;animation:heroFade 1s var(--ease-out) .8s forwards;
}
.hero-title{
  font-family:var(--font-display);
  font-size:clamp(64px,11vw,180px);
  line-height:.9;letter-spacing:.02em;
  color:var(--cream);
  margin-bottom:24px;
}
.hero-title .line{display:block;overflow:hidden}
.hero-title .line-inner{
  display:inline-block;
  transform:translateY(110%);
  animation:heroLine 1.2s var(--ease-out) forwards;
}
.hero-title .line:nth-child(1) .line-inner{animation-delay:.5s}
.hero-title .line:nth-child(2) .line-inner{animation-delay:.7s;color:var(--gold)}
.hero-title .line:nth-child(3) .line-inner{animation-delay:.9s}

.hero-tagline{
  font-family:var(--font-serif);font-style:italic;
  font-size:clamp(20px,2.4vw,28px);
  color:rgba(242,236,216,.85);
  margin:32px 0 48px;
  max-width:640px;margin-left:auto;margin-right:auto;
  opacity:0;animation:heroFade 1s var(--ease-out) 1.3s forwards;
}
.hero-cta-row{
  display:flex;gap:20px;justify-content:center;flex-wrap:wrap;
  opacity:0;animation:heroFade 1s var(--ease-out) 1.5s forwards;
}

@keyframes heroFade{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes heroLine{
  to{transform:translateY(0)}
}

/* === MARQUEE BAND === */
.marquee-band{
  background:var(--navy);color:var(--cream);
  padding:38px 0;
  border-top:1px solid rgba(184,151,74,.18);
  border-bottom:1px solid rgba(184,151,74,.18);
}
.marquee-band .marquee-item{color:var(--cream)}

/* === INTRO === */
.intro{
  background:var(--cream);
  padding:clamp(100px,12vw,160px) 0 clamp(80px,10vw,120px);
}
.intro-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:80px;align-items:center;
}
.intro-text .eyebrow{margin-bottom:28px}
.intro-text h2{margin-bottom:32px}
.intro-text p{
  font-family:var(--font-serif);
  font-size:19px;line-height:1.7;
  color:var(--ink);opacity:.82;
  margin-bottom:18px;
}

.intro-kpis{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:32px;margin-top:48px;
  padding-top:40px;border-top:1px solid rgba(184,151,74,.3);
}
.kpi{display:flex;flex-direction:column;gap:8px}
.kpi-num{
  font-family:var(--font-display);
  font-size:clamp(48px,6vw,72px);
  line-height:.9;color:var(--navy);
}
.kpi-label{
  font-family:var(--font-ui);
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink);opacity:.7;font-weight:600;
}

.intro-image{position:relative;aspect-ratio:4/5}
.intro-image img{width:100%;height:100%;object-fit:cover}
.intro-badge{
  position:absolute;top:24px;right:-30px;
  background:var(--red);color:var(--cream);
  padding:18px 26px;
  font-family:var(--font-display);
  font-size:18px;letter-spacing:.1em;
  z-index:3;
  box-shadow:0 12px 36px rgba(192,74,40,.3);
}

@media(max-width:880px){
  .intro-grid{grid-template-columns:1fr;gap:48px}
  .intro-kpis{grid-template-columns:1fr 1fr;gap:24px}
}

/* === MENU PREVIEW === */
.menu-preview{
  background:var(--cream-warm);
  position:relative;
}
.menu-preview-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:32px;margin-top:60px;
}
.menu-card{
  background:var(--cream);
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.menu-card:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 60px rgba(28,43,94,.18);
}
.menu-card-img{
  aspect-ratio:1/1;
  overflow:hidden;
  position:relative;
}
.menu-card-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease-out);
}
.menu-card:hover .menu-card-img img{transform:scale(1.08)}
.menu-card-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(28,43,94,.4));
  opacity:0;transition:opacity .4s var(--ease-out);
}
.menu-card:hover .menu-card-img::after{opacity:1}

.menu-card-flag{
  position:absolute;top:16px;left:16px;
  font-family:var(--font-ui);font-size:10px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;
  background:var(--navy);color:var(--cream);
  padding:6px 12px;z-index:2;
}
.menu-card-body{
  padding:24px 24px 28px;
  display:flex;flex-direction:column;gap:6px;
}
.menu-card-name{
  font-family:var(--font-display);
  font-size:28px;letter-spacing:.04em;
  color:var(--navy);line-height:1;
}
.menu-card-origin{
  font-family:var(--font-serif);
  font-style:italic;font-size:14px;
  color:var(--ink);opacity:.7;
}
.menu-card-price{
  font-family:var(--font-ui);
  font-size:16px;letter-spacing:.06em;font-weight:600;
  color:var(--red);
  margin-top:8px;
}

.menu-preview-cta{margin-top:60px;text-align:center}

@media(max-width:980px){.menu-preview-grid{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(max-width:560px){.menu-preview-grid{grid-template-columns:1fr}}

/* === DNA SENSORIAL === */
.dna{
  background:var(--navy-deep);color:var(--cream);
  position:relative;overflow:hidden;
}
.dna .light-beam{top:-100px;right:-50px}
.dna-grid{
  display:grid;grid-template-columns:1.1fr 1fr;
  gap:80px;align-items:center;
  position:relative;z-index:2;
}
.dna-text h2{
  font-size:clamp(48px,7vw,96px);
  color:var(--cream);
  margin-bottom:32px;
}
.dna-text h2 em{
  color:var(--gold);font-style:normal;
  font-family:var(--font-serif);
}
.dna-text p{
  font-family:var(--font-serif);
  font-size:19px;line-height:1.7;
  color:rgba(242,236,216,.82);
  margin-bottom:18px;
}

.dna-mosaic{
  display:grid;grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto auto;
  gap:14px;
  grid-template-areas:
    "a a"
    "b c"
    "d c";
}
.dna-mosaic .m1{grid-area:a;aspect-ratio:16/10;overflow:hidden}
.dna-mosaic .m2{grid-area:b;aspect-ratio:1/1;overflow:hidden}
.dna-mosaic .m3{grid-area:c;aspect-ratio:auto;overflow:hidden;position:relative}
.dna-mosaic .m4{grid-area:d;aspect-ratio:1/1;overflow:hidden}
.dna-mosaic img{width:100%;height:100%;object-fit:cover}

@media(max-width:980px){
  .dna-grid{grid-template-columns:1fr;gap:48px}
  .dna-mosaic{grid-template-columns:1fr 1fr;grid-template-areas:"a a" "b c" "d c"}
}

/* === SHOWCASE === */
.showcase{
  background:var(--cream);
  position:relative;
}
.showcase-row{
  display:grid;grid-template-columns:1fr 1fr;
  gap:80px;align-items:center;
  margin-bottom:120px;
}
.showcase-row.flip{direction:rtl}
.showcase-row.flip > *{direction:ltr}
.showcase-row:last-child{margin-bottom:0}
.showcase-img{
  position:relative;aspect-ratio:4/5;overflow:hidden;
}
.showcase-img img{width:100%;height:100%;object-fit:cover}
.showcase-text .eyebrow{margin-bottom:24px}
.showcase-text h2{
  font-size:clamp(40px,5vw,68px);margin-bottom:24px;
}
.showcase-text p{
  font-family:var(--font-serif);font-size:18px;line-height:1.7;
  margin-bottom:18px;opacity:.82;
}

@media(max-width:880px){
  .showcase-row,.showcase-row.flip{grid-template-columns:1fr;direction:ltr;gap:40px;margin-bottom:80px}
}

/* === FRANCHISE TEASER === */
.franchise-teaser{
  background:var(--navy);
  color:var(--cream);
  position:relative;overflow:hidden;
}
.franchise-teaser-bg{
  position:absolute;inset:0;z-index:0;
  opacity:.18;
}
.franchise-teaser-bg img{width:100%;height:100%;object-fit:cover}
.franchise-teaser-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(28,43,94,.5),rgba(19,31,69,.95));
}
.franchise-teaser-inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1.1fr;
  gap:80px;align-items:center;
}

.franchise-teaser h2{
  font-size:clamp(44px,6vw,84px);
  color:var(--cream);
  margin-bottom:24px;
}
.franchise-teaser h2 em{font-family:var(--font-serif);font-style:italic;color:var(--gold);font-weight:400}
.franchise-teaser p{
  font-family:var(--font-serif);
  font-size:19px;line-height:1.65;
  color:rgba(242,236,216,.8);
  margin-bottom:32px;
}

.franchise-numbers{
  display:grid;grid-template-columns:1fr 1fr;
  gap:32px;
  padding:48px;
  border:1px solid rgba(184,151,74,.3);
  background:rgba(28,43,94,.5);
  position:relative;
}
.franchise-numbers .num-block{position:relative}
.franchise-numbers .num-block + .num-block::before{
  content:"";position:absolute;left:-16px;top:10%;bottom:10%;
  width:1px;background:rgba(184,151,74,.3);
}
.num-block h3{
  font-family:var(--font-display);
  font-size:clamp(40px,5vw,68px);
  color:var(--gold-soft);line-height:1;margin-bottom:8px;
}
.num-block .label{
  font-family:var(--font-ui);
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(242,236,216,.7);font-weight:600;
}
.num-block .meta{
  font-family:var(--font-serif);font-style:italic;
  font-size:14px;color:rgba(242,236,216,.6);
  margin-top:4px;
}

@media(max-width:880px){
  .franchise-teaser-inner{grid-template-columns:1fr;gap:48px}
  .franchise-numbers{grid-template-columns:1fr;gap:24px;padding:32px}
  .franchise-numbers .num-block + .num-block::before{
    left:0;right:0;top:-12px;bottom:auto;width:100%;height:1px;
  }
}

/* === PARTNERS BAR === */
.partners{
  background:var(--cream-deep);
  padding:60px 0;
  border-top:1px solid rgba(184,151,74,.3);
  border-bottom:1px solid rgba(184,151,74,.3);
}
.partners-title{
  text-align:center;
  font-family:var(--font-ui);
  font-size:11px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--ink);opacity:.6;font-weight:600;
  margin-bottom:36px;
}
.partners-grid{
  display:grid;grid-template-columns:repeat(8,1fr);
  gap:24px;align-items:center;
}
.partner{
  text-align:center;
  font-family:var(--font-display);
  font-size:18px;letter-spacing:.06em;
  color:var(--navy);
  opacity:.62;
  transition:opacity .3s var(--ease-out);
  padding:14px 4px;
}
.partner:hover{opacity:1}
@media(max-width:980px){.partners-grid{grid-template-columns:repeat(4,1fr);gap:18px}}
@media(max-width:560px){.partners-grid{grid-template-columns:repeat(2,1fr)}}

/* === CULTURE STRIP === */
.culture{
  background:var(--cream);
  padding:120px 0;
}
.culture-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.culture-item{
  position:relative;aspect-ratio:3/4;
  overflow:hidden;
  cursor:pointer;
}
.culture-item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease-out);
}
.culture-item:hover img{transform:scale(1.06)}
.culture-item-label{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(180deg,transparent,rgba(19,31,69,.92));
  color:var(--cream);
  padding:60px 18px 22px;
  font-family:var(--font-display);
  font-size:24px;letter-spacing:.06em;
  text-align:center;
}
.culture-item-flag{
  font-family:var(--font-ui);
  font-size:10px;letter-spacing:.36em;text-transform:uppercase;
  color:var(--gold-soft);
  display:block;margin-bottom:4px;font-weight:600;
}
@media(max-width:880px){.culture-grid{grid-template-columns:repeat(2,1fr)}}