/* ============================================================
   HERO — Masthead "Grand · Gelato" (B2B top hero)
   Όλα scoped κάτω από .hero-mast ώστε να μη "διαρρέει" τίποτα.
   Κληρονομεί τα CSS tokens (--chocolate-plum, --pink-orchid,
   --mint-cream κ.λπ.) από το style.css. Τα 3 extra tokens
   (pink-deep / mint-deep / ease) ζουν τοπικά στο .hero-mast.
   Entrance animations κουμπώνουν στο body.hero-ready (preloader).
   ============================================================ */

.hero-mast{
  --hm-pink-deep:#D88FB8;
  --hm-mint-deep:#B6E3D4;
  --hm-ease:cubic-bezier(.16,1,.3,1);
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding-top:var(--nav-height,80px);
  overflow:hidden;
  background:
    radial-gradient(55% 60% at 72% 45%, rgba(230,173,206,.30), transparent 62%),
    linear-gradient(170deg,#F4FBF8 0%, var(--mint-cream) 55%, #E6F2EC 100%);
}

/* --- floating particles --- */
.hero-mast .hm-particles{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-mast .hm-particle{
  position:absolute;border-radius:50%;background:rgba(255,255,255,.7);
  animation:hmFloatP 13s linear infinite;
}
@keyframes hmFloatP{
  0%  {transform:translateY(110vh) scale(0);opacity:0}
  10% {opacity:1}
  90% {opacity:1}
  100%{transform:translateY(-12vh) translateX(28px) scale(.6);opacity:0}
}

/* --- grid: copy (left) + masthead cluster (right) --- */
.hero-mast .hm-grid{
  position:relative;z-index:3;display:grid;
  grid-template-columns:.92fr 1.08fr;align-items:center;gap:2rem;width:100%;
}

/* ---- left: copy ---- */
.hero-mast .hm-copy{max-width:480px}
.hero-mast .hm-tagline{
  font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.12;
  color:var(--chocolate-plum);margin-bottom:1.2rem;
}
.hero-mast .hm-tagline .accent{color:var(--hm-pink-deep)}
.hero-mast .hm-sub{font-size:1rem;line-height:1.7;color:var(--rosy-granite);max-width:440px}
.hero-mast .hm-partner{
  display:inline-flex;align-items:center;gap:.7rem;margin:1.6rem 0 1rem;
  font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--chocolate-plum);
}
.hero-mast .hm-partner::before{content:"";width:26px;height:1px;background:var(--pink-orchid)}
.hero-mast .hm-cta-row{display:flex;gap:.9rem;flex-wrap:wrap}
.hero-mast .hm-btn{
  display:inline-flex;align-items:center;gap:.55rem;padding:.95rem 2rem;border-radius:999px;
  font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  transition:transform .35s var(--hm-ease),box-shadow .35s var(--hm-ease),background .35s,color .35s;
}
.hero-mast .hm-btn-primary{background:var(--chocolate-plum);color:var(--mint-cream);box-shadow:0 10px 26px rgba(92,71,72,.2)}
.hero-mast .hm-btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(92,71,72,.3)}
.hero-mast .hm-btn-outline{border:1.5px solid var(--chocolate-plum);color:var(--chocolate-plum)}
.hero-mast .hm-btn-outline:hover{background:var(--chocolate-plum);color:var(--mint-cream);transform:translateY(-3px)}

/* ---- right: Grand [cone] Gelato cluster ---- */
.hero-mast .hm-masthead{
  display:grid;grid-template-columns:auto auto auto;
  align-items:center;justify-content:center;gap:clamp(.2rem,1vw,1rem);
}
.hero-mast .hm-word{
  font-family:var(--font-display);font-style:italic;font-weight:500;line-height:.9;
  font-size:clamp(2rem,4.6vw,4.4rem);color:var(--chocolate-plum);white-space:nowrap;
}
.hero-mast .hm-word.left{text-align:right}
.hero-mast .hm-word.right{
  font-style:normal;font-family:var(--font-body);font-weight:300;letter-spacing:.03em;
  text-transform:uppercase;font-size:clamp(1.6rem,3.6vw,3.1rem);text-align:left;
}
.hero-mast .hm-word .dot{color:var(--hm-pink-deep)}

.hero-mast .hm-product{position:relative;z-index:4;width:clamp(400px,48vw,700px);margin:0 .2rem}
.hero-mast .hm-glow{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:130%;aspect-ratio:1;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(230,173,206,.5),rgba(230,173,206,.1) 48%,transparent 70%);
  filter:blur(6px);

}

.hero-mast .hm-masthead{
  transform:translateX(80px);
}
.hero-mast .hm-img{width:100%;filter:drop-shadow(0 22px 32px rgba(92,71,72,.28))}

@keyframes hmBreathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.07)}}
@keyframes hmFloaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(-1.4deg)}}

/* ===== ENTRANCE — μετά τον preloader (body.hero-ready) ===== */
.hero-mast .hm-tagline,
.hero-mast .hm-sub,
.hero-mast .hm-partner,
.hero-mast .hm-cta-row{opacity:0;transform:translateY(20px)}
.hero-mast .hm-word.left{opacity:0;transform:translateX(-50px)}
.hero-mast .hm-word.right{opacity:0;transform:translateX(50px)}
.hero-mast .hm-product{opacity:0;transform:translateY(60px) scale(.9);filter:blur(9px)}
.hero-mast .hm-glow{opacity:0}

body.hero-ready .hero-mast .hm-tagline{animation:hmUp .9s var(--hm-ease) .2s forwards}
body.hero-ready .hero-mast .hm-sub{animation:hmUp .9s var(--hm-ease) .34s forwards}
body.hero-ready .hero-mast .hm-partner{animation:hmUp .8s var(--hm-ease) .48s forwards}
body.hero-ready .hero-mast .hm-cta-row{animation:hmUp .8s var(--hm-ease) .58s forwards}
body.hero-ready .hero-mast .hm-word.left{animation:hmInL 1s var(--hm-ease) .4s forwards}
body.hero-ready .hero-mast .hm-word.right{animation:hmInR 1s var(--hm-ease) .4s forwards}
body.hero-ready .hero-mast .hm-product{animation:hmProd 1.2s var(--hm-ease) .55s forwards, hmFloaty 6s ease-in-out 1.8s infinite}
body.hero-ready .hero-mast .hm-glow{animation:hmGlowIn 1.3s var(--hm-ease) .6s forwards, hmBreathe 7s ease-in-out 2s infinite}

@keyframes hmUp{to{opacity:1;transform:translateY(0)}}
@keyframes hmInL{to{opacity:1;transform:translateX(0)}}
@keyframes hmInR{to{opacity:1;transform:translateX(0)}}
@keyframes hmProd{to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes hmGlowIn{to{opacity:1}}

/* ===== Responsive (ευθυγραμμισμένο με το υπόλοιπο site @980px) ===== */
@media(max-width:980px){
  .hero-mast{padding:calc(var(--nav-height,56px) + 1.5rem) 0 2.5rem !important;align-items:flex-start}
  .hero-mast .hm-grid{grid-template-columns:1fr;gap:1.4rem;text-align:center}

  /* .hm-copy "ξεδιπλώνεται" ώστε τα παιδιά του (τίτλος, sub, partner, cta)
     να γίνουν direct items του .hm-grid και να μπορούμε να τα σειριοθετήσουμε
     ελεύθερα με order, μαζί με το .hm-masthead (εικόνα) */
  .hero-mast .hm-copy{display:contents}

  .hero-mast .hm-tagline{order:1;margin-bottom:0}
  .hero-mast .hm-masthead{order:2;transform:none;margin:.2rem auto 0}
  .hero-mast .hm-sub{order:3;margin:0 auto}
  .hero-mast .hm-partner{order:4;justify-content:center;margin:-.6rem 0 -.5rem}
  .hero-mast .hm-cta-row{order:5;justify-content:center}

  .hero-mast .hm-product{width:min(82vw,380px);margin:0 auto}
}

@media(prefers-reduced-motion:reduce){
  .hero-mast .hm-tagline,
  .hero-mast .hm-sub,
  .hero-mast .hm-partner,
  .hero-mast .hm-cta-row,
  .hero-mast .hm-word,
  .hero-mast .hm-product,
  .hero-mast .hm-glow{
    opacity:1!important;transform:none!important;filter:none!important;animation:none!important;
  }
}