/* =====================================================================
   EgroFlow — index2683.css (landing page)
===================================================================== */

/* ---- nav ---- */
.nav{ position:sticky; top:0; z-index:60; padding-top:16px; }
.nav-inner{
  max-width:1180px; margin:0 auto; padding: 12px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  border-radius: 999px;
  background: var(--glass-fill);
  border:1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
}
.brand{ display:flex; align-items:center; gap:.6em; font-family:var(--font-display); font-weight:800; font-size:1.05rem; }
.brand img{ width:30px; height:30px; border-radius:8px; }
.nav-links{ display:flex; gap:1.8em; }
.nav-links a{ font-size:.92rem; color:var(--ink-1); transition:color .25s var(--ease); }
.nav-links a:hover{ color:var(--ink-0); }
.nav-cta{ padding:.7em 1.4em; font-size:.85rem; }
@media (max-width:760px){ .nav-links{ display:none; } }

/* ---- hero ---- */
.hero{
  display:grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap:40px; align-items:center;
  padding: 78px 24px 40px;
}
.hero h1{ font-size: clamp(2.4rem, 5vw, 3.6rem); line-height:1.04; margin-top:.5em; }
.grad-text{
  background: var(--grad-flow); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{ margin-top:1.1em; font-size:1.05rem; max-width:46ch; }
.hero-actions{ display:flex; gap:14px; margin-top:1.8em; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:34px; margin-top:2.6em; flex-wrap:wrap; }
.hero-stats div{ display:flex; flex-direction:column; }
.hero-stats b{ font-family:var(--font-display); font-size:1.4rem; }
.hero-stats span{ font-size:.78rem; color:var(--ink-2); }

.hero-stage{ position:relative; min-height:340px; display:flex; align-items:center; justify-content:center; overflow:hidden; max-width:100%; }
.hero-fan{ position:relative; width:100%; height:280px; max-width:100%; }
.hero-fan .biz-card{
  position:absolute; top:50%; left:50%;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.7);
  animation: cardFloat 7s ease-in-out infinite;
}
.hero-fan .biz-card:nth-child(1){ transform: translate(-50%,-50%) rotate(-12deg) translate(-70px, 10px); animation-delay:.2s; z-index:1; }
.hero-fan .biz-card:nth-child(2){ transform: translate(-50%,-50%) rotate(0deg) translate(0,-14px); animation-delay:0s; z-index:3; }
.hero-fan .biz-card:nth-child(3){ transform: translate(-50%,-50%) rotate(12deg) translate(70px, 10px); animation-delay:.4s; z-index:2; }
@keyframes cardFloat{
  0%,100%{ translate: 0 0; }
  50%{ translate: 0 -10px; }
}
@media (max-width:920px){
  .hero{ grid-template-columns:1fr; padding-top:56px; }
  .hero-stage{ min-height:240px; }
}
@media (max-width:600px){
  .hero-fan{ transform: scale(0.72); }
}
@media (max-width:460px){
  .hero-fan{ transform: scale(0.56); }
}
@media (max-width:360px){
  .hero-fan{ transform: scale(0.46); }
}

/* ---- sections ---- */
.section{ padding: 64px 24px; }
.section-title{ font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-top:.35em; max-width:20ch; }
.section-sub{ margin-top:.8em; max-width:60ch; }

.steps{ display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:16px; margin-top:2.4em; }
.step{ padding:26px 22px; display:flex; flex-direction:column; gap:10px; }
.step-index{ font-family:var(--font-display); font-weight:800; font-size:1rem; color:var(--teal); }
.step h3{ font-size:1.05rem; }
.step p{ font-size:.88rem; }
@media (max-width:920px){ .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }

/* ---- design preview grid ---- */
.preview-grid{
  margin-top:2.6em; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px;
}
.preview-cell{ display:flex; flex-direction:column; gap:10px; align-items:center; min-width:0; }
.preview-cell .card-thumb-wrap{ width:100%; aspect-ratio: 350/200; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:14px; min-width:0; }
.preview-cell span{ font-size:.78rem; color:var(--ink-2); font-family:var(--font-display); font-weight:600; }
.preview-cell .lock-badge{ font-size:.66rem; color:var(--ink-3); background:var(--glass-fill); border:1px solid var(--glass-border-soft); padding:.2em .7em; border-radius:999px; }
@media (max-width:920px){ .preview-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ---- faq ---- */
.faq-list{ margin-top:2.2em; display:flex; flex-direction:column; gap:12px; max-width:760px; }
.faq-item{ padding: 18px 22px; }
.faq-item summary{
  cursor:pointer; font-family:var(--font-display); font-weight:700; font-size:.98rem;
  list-style:none; display:flex; align-items:center; justify-content:space-between;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; font-size:1.3rem; color:var(--teal); transition:transform .3s var(--ease); }
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ margin-top:.9em; font-size:.9rem; }

/* ---- final cta ---- */
.cta-box{ text-align:center; padding:60px 30px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.cta-box h2{ font-size:clamp(1.6rem,3.4vw,2.2rem); }
.cta-box p{ max-width:44ch; }