/* =========================
   easyStay — styles.css (FULL)
   (About = gri metalic, Tap-to-reveal ok)
   ========================= */

/* ---------- KNOBS (editezi ușor aici) ---------- */
:root{
  /* Culori */
  --bg:#0f1915;
  --text:#e9efe9; 
  --muted:#a6b5ad;
  --accent:#6c8768; 
  --accent-2:#89a38b;

  /* Umbre / radius / nav */
  --shadow:0 10px 30px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.5);
  --radius-xl:22px; 
  --radius-xxl:28px; 
  --nav-h:58px;

  /* NAV logo size */
  --brand-h:35px; /* 🔧 LOGO size desktop */

  /* Logo alignment lângă titluri (About/Why) */
  --logo-shift:.25em;

  /* SPAȚIERE DESKTOP (aerisire) */
  --hero-pt:64px;
  --h1-mb:40px;
  --kicker-mb:46px;
  --products-mt:50px;
  --grid-gap:16px;
  
  /* TIPOGRAFIE DESKTOP */
  --h1-size:clamp(48px,6.2vw,72px);
  --kicker-size:15px;
  --lead-max:940px;

  /* Card titles (grile About/Why) */
  --card-title-size:clamp(26px,4.2vw,34px);
  --card-title-mb:6px;
  --card-tagline-size:16px;

  /* HERO H1 gradient (alb -> gri-verzui foarte deschis) */
  --h1-grad:linear-gradient(180deg, #ffffff 0%, #dfe6e1 100%);

  /* Paletă “gri metalic” pentru ABOUT (ușor de tweak-uit) */
  --metal-top:#1a1f1d;
  --metal-bot:#171b1a;
  --metal-gloss:rgba(255,255,255,.08);
  --metal-border:rgba(255,255,255,.12);
  --metal-inset:rgba(255,255,255,.04);
  --metal-shadow:0 10px 24px rgba(0,0,0,.35);
  --metal-shadow-hover:0 20px 44px rgba(0,0,0,.55), 0 0 26px rgba(137,163,139,.25);
}

/* ---------- SECTION KNOBS (About & Why) ---------- */
:root{
  /* ABOUT (desktop) */
  --about-pt: 56px;
  --about-pb: 56px;
  --about-title-mb: 50px;
  --about-title-gap: 0px;
  --about-lead-mb: 26px;
  --about-grid-gap: 16px;
  --about-card-pad: 18px;
  --about-card-min-h: 220px;
  --about-wide-min-h: 240px;

  /* WHY (desktop) */
  --why-pt: 56px;
  --why-pb: 56px;
  --why-title-mb: 30px;
  --why-title-gap: 0px;
  --why-lead-mb: 32px;
  --why-grid-gap: 16px;
  --why-card-pad: 18px;
  --why-card-min-h: 220px;
  --why-wide-min-h: 240px;
}

/* Aplicare ABOUT */
#about.section{ padding-top:var(--about-pt); padding-bottom:var(--about-pb); }
#about .section__title{ margin-bottom:var(--about-title-mb); gap:var(--about-title-gap); }
#about .section__lead{ margin-bottom:var(--about-lead-mb); }
#about .about__grid{ gap:var(--about-grid-gap); }
#about .info{ padding:var(--about-card-pad); }
#about .reveal-card .flip__inner{ min-height:var(--about-card-min-h); }
#about .info--wide.reveal-card .flip__inner{ min-height:var(--about-wide-min-h); }

/* Aplicare WHY */
#why.section{ padding-top:var(--why-pt); padding-bottom:var(--why-pb); }
#why .section__title{ margin-bottom:var(--why-title-mb); gap:var(--why-title-gap); }
#why .section__lead{ margin-bottom:var(--why-lead-mb); }
#why .about__grid{ gap:var(--why-grid-gap); }
#why .info{ padding:var(--why-card-pad); }
#why .reveal-card .flip__inner{ min-height:var(--why-card-min-h); }
#why .info--wide.reveal-card .flip__inner{ min-height:var(--why-wide-min-h); }

/* ---------- MOBILE KNOBS (About & Why) ---------- */
@media (max-width:900px){
  :root{
    /* ABOUT mobile */
    --about-pt: 44px;
    --about-pb: 44px;
    --about-title-mb: 30px;
    --about-title-gap: 0px;
    --about-lead-mb: 25px;
    --about-grid-gap: 12px;
    --about-card-pad: 14px;
    --about-card-min-h: 220px;
    --about-wide-min-h: 240px;

    /* WHY mobile */
    --why-pt: 44px;
    --why-pb: 44px;
    --why-title-mb: 19px;
    --why-title-gap: 0px;
    --why-lead-mb: 30px;
    --why-grid-gap: 12px;
    --why-card-pad: 14px;
    --why-card-min-h: 220px;
    --why-wide-min-h: 320px;
  }
}

/* ---------- MOBILE KNOBS generale ---------- */
@media (max-width:900px){
  :root{
    --hero-pt:56px;
    --h1-size:clamp(34px,10.8vw,48px);
    --h1-mb:30px;
    --kicker-size:13px;
    --kicker-mb:45px;
    --products-mt:18px;
    --grid-gap:14px;

    --m-about-card-min-h:240px;
    --m-about-wide-min-h:280px;
    --m-about-card-pad:16px;
    --m-about-card-gap:12px;
    --m-card-shadow:0 6px 18px rgba(0,0,0,.35);
    --card-title-size:22px;
    --card-tagline-size:13px;
  }
}

/* ---------- RESET & LAYOUT ---------- */
*{box-sizing:border-box}
html,body{min-height:100%; overflow-x:hidden;} /* ✅ fix no horizontal move */
html{
  background: linear-gradient(180deg, var(--bg) 0%, #0c1713 35%, #09130f 65%, #040807 100%) fixed;
  background-repeat:no-repeat; background-size:100% 100%;
}
body{
  margin:0; color:var(--text);
  font:500 16px/1.5 ui-sans-serif,-apple-system,Segoe UI,Roboto,Inter,system-ui;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  position:relative;
  background-color:transparent; /* keep gradient */
}
img{display:block; max-width:100%; height:auto}
.container{width:min(1200px,92vw); margin-inline:auto}

/* ---------- BACKGROUND SHAPES ---------- */
.bg-shapes{position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; filter:blur(70px)}
.shape{position:absolute; border-radius:999px; opacity:.25}
.shape.s1{width:42vw; height:42vw; left:-12vw; top:-6vh; background:radial-gradient(closest-side, rgba(120,160,130,.85), transparent 70%)}
.shape.s2{width:36vw; height:36vw; right:-10vw; top:20vh; background:radial-gradient(closest-side, rgba(110,140,120,.7), transparent 70%)}
.shape.s3{width:48vw; height:48vw; left:10vw; bottom:-16vh; background:radial-gradient(closest-side, rgba(90,120,100,.6), transparent 70%)}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:20;
  backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(180deg,rgba(0,0,0,.55),transparent); /* ✅ blend mobil */
  transition:opacity .28s ease, transform .28s ease;
}
.nav--hidden{opacity:0; transform:translateY(-12px); pointer-events:none}
.nav__inner{display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); gap:16px; padding-right:12px}
.brand img{height:var(--brand-h)} /* 🔧 aici ajustezi logo desktop */
/* 🔧 pentru mobil ajustezi mai jos -- vezi media query */
.nav__actions{display:flex; gap:10px}
.pill{--pad:9px 14px; display:inline-flex; align-items:center; gap:.4ch; padding:var(--pad); border-radius:999px; background:#0e1915; color:#dfe6e1; text-decoration:none; font-weight:600; font-size:14px; border:1px solid rgba(255,255,255,.08)}
.pill--cta{
  background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.18), rgba(255,255,255,.02)),
              linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,.06));
  border-color: rgba(108,135,104,.55);
  box-shadow: 0 0 0 1px rgba(108,135,104,.55), 0 0 8px rgba(108,135,104,.45), 0 0 14px rgba(108,135,104,.28), inset 0 1px 0 rgba(255,255,255,.25);
}
.pill--cta span{opacity:.8}

/* ---------- HERO ---------- */
.hero{padding:var(--hero-pt) 0 18px; position:relative; z-index:1}
.hero__bg{position:absolute; inset:0; pointer-events:none}
.hero__bg::before{
  content:""; position:absolute; inset:-20% -10% auto -10%; height:60%;
  background: radial-gradient(60% 120% at 50% 0%, rgba(108,135,104,.38), transparent 60%),
              radial-gradient(60% 120% at 50% 100%, rgba(137,163,139,.22), transparent 60%);
  filter: blur(40px) saturate(120%);
  animation: floaty 12s ease-in-out infinite alternate;
}
@keyframes floaty{from{transform:translateY(0)} to{transform:translateY(18px)}}
.hero__title{
  font-weight:900; letter-spacing:-.02em; 
  font-size:var(--h1-size); line-height:1.08;
  text-align:center; margin:0 0 var(--h1-mb);
  background:var(--h1-grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  text-shadow:0 2px 10px rgba(0,0,0,.25);
}
/* 🔧 HERO kicker text mai mic + gri pe mobil */
.section__lead,
.hero__kicker{
  max-width:var(--lead-max);
  margin:0 auto var(--kicker-mb);
  text-align:center; 
  color:#d7e1da;
  font-size:var(--kicker-size);
  line-height:1.55;
}
.hero__kicker span{display:block}
@media (max-width:900px){
  .hero__kicker{font-size:12px; color:#b0bab4;} /* 🔧 aici faci textul mai mic/gri */
}

/* ---------- animație comună ---------- */
.reveal-up{opacity:0; transform:translateY(16px)}
.reveal-up.in{opacity:1; transform:translateY(0); transition:transform .7s cubic-bezier(.22,.8,.25,1), opacity .7s ease}

/* ---------- PRODUCTS (carduri cu IMAGINI) ---------- */
.products{position:relative; margin-top:var(--products-mt)}
.track{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{
  background:linear-gradient(180deg,#17241e,#101a16);
  border-radius:var(--radius-xxl); box-shadow:var(--shadow);
  overflow:hidden; position:relative;
}
.card .media{width:100%; height:100%; object-fit:cover; object-position:center}
.card::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:34%;
  pointer-events:none; z-index:1;
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 65%, rgba(0,0,0,0));
          mask-image: linear-gradient(to top, rgba(0,0,0,1) 65%, rgba(0,0,0,0));
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.22));
}
.card .media + .glass{
  position:absolute; left:18px; right:18px; bottom:16px; padding:0; z-index:2;
  background:transparent; border:none; box-shadow:none; backdrop-filter:none;
}
.card .glass .chip{
  display:inline-block; padding:6px 12px; border-radius:999px;
  font-weight:700; font-size:12px; color:#e7eee8;
  background:rgba(108,135,104,.28); border:1px solid rgba(108,135,104,.5);
  text-shadow:0 1px 2px rgba(0,0,0,.45); margin-bottom:8px;
}
.card .glass h3{margin:0 0 var(--card-title-mb); font-size:clamp(18px,2.6vw,22px); text-shadow:0 2px 6px rgba(0,0,0,.45), 0 0 1px rgba(0,0,0,.5)}
.card .glass p{margin:0; color:#cfe0d7; font-size:14px; line-height:1.45; text-shadow:0 1px 3px rgba(0,0,0,.35)}

/* UI slider */
.slider__ui{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:10px}
.slider__ui .nav{
  width:44px; height:36px; border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120% 160% at 30% 0%, rgba(255,255,255,.12), rgba(255,255,255,.02)),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(108,135,104,.35) inset;
  color:#e9efe9; font-size:20px; font-weight:800; display:grid; place-items:center; cursor:pointer; user-select:none;
}
@media (min-width:901px){.slider__ui, .slider__ui *{ display:none !important; }}

/* ---------- SECTION TITLES ---------- */
.section{padding:56px 0; position:relative; z-index:1}
.section__title{
  display:flex; justify-content:center; align-items:baseline; gap:8px; margin:0 0 10px; 
  font-size:clamp(28px,4.6vw,44px); font-weight:900; letter-spacing:-.02em; text-align:center;
}
.section__title > span{ display:inline-block; line-height:1; }
.logo-inline{height:1.05em; transform:translateY(var(--logo-shift))}

/* ---------- ABOUT/WHY GRID ---------- */
.about__grid{display:grid; gap:var(--grid-gap); grid-template-columns:repeat(12,1fr)}
.info{
  grid-column:span 6; background:linear-gradient(180deg,#14211b,#0f1915);
  border-radius:var(--radius-xl); padding:18px; border:1px solid rgba(255,255,255,.06); 
  box-shadow:var(--shadow); position:relative;
}
.info--wide{grid-column:span 12}
#about .info{
  background:
    radial-gradient(120% 140% at 50% 0%, var(--metal-gloss), transparent 60%),
    linear-gradient(180deg, var(--metal-top) 0%, var(--metal-bot) 100%);
  border:1px solid var(--metal-border);
  box-shadow: var(--metal-shadow), inset 0 1px 0 var(--metal-inset);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
#about .info:hover{transform: translateY(-3px); box-shadow: var(--metal-shadow-hover), inset 0 1px 0 var(--metal-inset); border-color: rgba(255,255,255,.14);}
#about .info::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)); mix-blend-mode:overlay; opacity:.45;}

/* REVEAL 3D */
.reveal-card{position:relative; overflow:hidden; padding:0}
.reveal-card .flip{perspective:1200px}
.reveal-card .flip__inner{position:relative; min-height:200px; transform-style:preserve-3d; transition:transform .6s cubic-bezier(.22,.8,.25,1)}
.reveal-card .face{position:absolute; inset:0; backface-visibility:hidden; border-radius:var(--radius-xl); display:grid; place-items:center; padding:22px; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;}
.reveal-card .face--back{transform:rotateY(180deg)}
.reveal-card.is-flipped .flip__inner{transform:rotateY(180deg)}
.frontCenter{text-align:center}
.massive{font-weight:900; letter-spacing:-.02em; font-size:var(--card-title-size); margin:0 0 var(--card-title-mb)}
.tagline{color:var(--accent-2); font-weight:400; letter-spacing:.02em; margin:0; font-size:var(--card-tagline-size)}
.back__center{text-align:center; max-width:560px}
.green-list{list-style:disc; text-align:left; margin:0; padding:0 0 0 1.2em}
.green-list li{color:var(--accent-2); margin:.28em 0}
.tiny-reveal{margin-top:12px; padding:6px 10px; border-radius:999px; background:#0f1915; color:#e6ede7; border:1px solid rgba(255,255,255,.1); font-weight:600; font-size:12px; position:relative; z-index:3; pointer-events:auto;}
.reveal-card[data-hint="off"] .tiny-reveal{ display:none; }

/* ---------- CTA ---------- */
.cta{padding:34px 0 70px; text-align:center}
.cta__card{background:none; border:none; box-shadow:none; padding:0;}
.cta__card h3{margin:0 0 8px; font-size:clamp(22px,3.8vw,32px); font-weight:900; letter-spacing:-.01em}
.cta__card p{margin:0 0 16px; color:#cbd4ce; font-size:var(--kicker-size)}

/* ---------- FOOT ---------- */
.foot{padding:18px 0 40px; color:#aab7b0; text-align:center; font-size:13px}

/* ---------- MOBILE ---------- */
@media (max-width:900px){
  .nav__actions .pill{display:none;}
  .nav__actions .pill--cta{display:inline-flex;} /* ✅ doar Request Product pe mobil */
  .brand img{ height:35px; } /* 🔧 LOGO mobil mai mare */
  .track{display:flex; gap:14px; padding:4px 3vw; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 3vw; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; -ms-overflow-style:none; scrollbar-width:none; touch-action:pan-x;} /* ✅ fix scroll vertical */
  .track::-webkit-scrollbar{display:none}
  .card{flex:0 0 84vw; scroll-snap-align:center; border-radius:22px; background:transparent; box-shadow:none; overflow:hidden;}
  .card .media{width:100%; height:auto; border-radius:inherit;}
  .card::before{display:block; border-radius:inherit;}
  .card .media + .glass{display:block; border-radius:inherit;}
  .about__grid{ gap: var(--m-about-card-gap); }
  .info, .info--wide{ grid-column:span 12; padding: var(--m-about-card-pad); box-shadow: var(--m-card-shadow);}
  .reveal-card .face{ padding: var(--m-about-card-pad); }
  .reveal-card .flip__inner{ min-height: var(--m-about-card-min-h); }
  .info--wide.reveal-card .flip__inner{ min-height: var(--m-about-wide-min-h); }
  .massive{ font-size: var(--card-title-size); line-height: 1.16; }
  .tagline{ font-size: var(--card-tagline-size); line-height: 1.35; }
  .green-list li{ font-size: 13px; line-height: 1.4; }
}

html {
  background-color: #000; /* negru pentru overscroll */
}

body {
  background-color: #0f1915; /* ce culoare are site-ul tău */
  margin: 0;
  min-height: 100vh;
}

.header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: #0f1915; /* culoarea site-ului tău ca să nu se vadă alb */
}

.hero-title {
  scroll-margin-top: 80px; /* ajustează în funcție de înălțimea headerului */
}
/* Linie fină sub header doar pe mobil */
@media (max-width: 768px) {
  header.nav {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* linie albă foarte discretă */
  }
}
/* Mobile tweaks for Get Product button */
/* Mobile tweaks for Get Product button */

/* Arată butonul de jos pe mobil */
@media (max-width: 768px) {
  #contact {
    display: block !important;
    padding: 40px 20px !important;
    text-align: center;
  }

  #contact .cta__title,
  #contact .cta__lead {
    font-size: 14px;
    margin-bottom: 12px;
  }

  #contact .pill--cta {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(0.9); /* mai mic pe mobil */
    transform-origin: center;
  }
}
@media (max-width: 768px) {
  .pill--cta {
    transform: scale(0.85);    /* micșorat, dar cu aceleași stiluri (glow, radius, shadow) */
    transform-origin: top right;
    position: absolute;
    top: 12px;
    right: 12px;
  }

  header.nav {
    position: relative;
  }
}

@media (max-width: 768px) {
  #contact .pill--cta {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-top: 16px;
    transform: scale(0.9);
  }
}
@media (max-width: 900px) {
  #contact .pill--cta {
    display: inline-flex !important;
  }
}
/* Mobile: doar butonul de NAV îl micșorez și îl pun în colț */
@media (max-width: 768px) {
  .nav__actions .pill--cta {
    transform: scale(0.85);
    transform-origin: top right;
    position: absolute;
    top: 12px;
    right: 12px;
  }

  header.nav { position: relative; }

  /* Butonul de jos (#contact) NU mai e afectat */
  #contact .pill--footer {
    display: inline-flex !important;
    position: static !important;
    transform: none !important;
    margin-top: 16px;
  }
}

