/* /public/css/index-style.css */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;600;800&display=swap');

:root{
  --primary:#007bff;
  --primary-dark:#0056b3;
  --text:#003366;
  --white:#fff;

  --glass-bg:rgba(255,255,255,.18);
  --glass-border:rgba(255,255,255,.3);
  --glass-blur:blur(14px);

  --chip-bg:rgba(255,255,255,.15);
  --chip-ripple:rgba(0,123,255,.28);

  --shadow:0 8px 40px rgba(0, 102, 204, .22);
  --shadow-soft:0 4px 16px rgba(0,102,204,.12);
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; padding:0; font-family:'Heebo', system-ui, Segoe UI, sans-serif; direction:rtl;
  color:var(--text);
  background:radial-gradient(circle at top, #eaf4ff 0%, #d7eaff 50%, #bcd4f5 100%);
  overflow-x:hidden; position:relative;
}

/* Watermark עדין */
body::before{
  content:''; position:fixed; top:50%; left:50%; width:720px; height:720px;
  background:url('/img/logo_transparent.png') no-repeat center/contain;
  transform:translate(-50%, -50%); opacity:.035; pointer-events:none; z-index:0;
  animation:breathe 10s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.02)}}

/* Loader */
#loader-wrapper{
  position:fixed; inset:0;
  background:radial-gradient(circle at top, #eaf4ff 0%, #d7eaff 50%, #bcd4f5 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  z-index:9999; transition:opacity .6s ease;
}
.sky{ width:320px; height:160px; margin-bottom:16px; filter: drop-shadow(0 6px 18px rgba(0,102,204,.2)); }
.loading-text{ font-size:1.15rem; font-weight:700 }

/* Topbar */
.topbar{
  width:100%; display:flex; justify-content:flex-end; align-items:center;
  padding:12px 30px; background-color:rgba(255,255,255,.6); backdrop-filter:blur(6px);
  box-shadow:0 2px 10px rgba(0,102,204,.1); border-bottom:1px solid #cce0ff;
  position:sticky; top:0; z-index:10;
}
.navbar{ display:flex; gap:10px }
.btn-chip{
  background:var(--chip-bg); color:var(--text);
  border:2px solid var(--primary); border-radius:999px; padding:8px 16px;
  font-weight:800; cursor:pointer; position:relative; overflow:hidden; transition:.25s; backdrop-filter:blur(6px);
}
.btn-chip::before{
  content:""; position:absolute; top:50%; left:50%; width:0; height:0;
  background:var(--chip-ripple); border-radius:50%; transform:translate(-50%,-50%);
  transition:width .4s ease, height .4s ease; z-index:0;
}
.btn-chip:hover::before{ width:280%; height:280% }
.btn-chip:hover{ color:#fff; background:var(--primary); box-shadow:0 0 12px rgba(0,123,255,.35) }

/* Main / Hero */
.main-layout{
  display:flex; gap:40px; align-items:center; justify-content:center;
  padding:38px 24px; max-width:1200px; margin:0 auto; position:relative; z-index:1;
}
.logo-center{ flex:1; display:flex; justify-content:center; align-items:center; min-width:260px }
.logo-center img{ width:100%; max-width:460px; height:auto; animation:fadeIn .9s ease both }
@keyframes fadeIn{ from{opacity:0; transform:scale(.96)} to{opacity:1; transform:none} }

.form-container{
  flex:1; min-width:320px; max-width:620px;
  background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:20px;
  backdrop-filter:var(--glass-blur); box-shadow:var(--shadow); padding:34px 28px; animation:rise .7s ease both;
}
@keyframes rise{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }

.form-container h1{
  margin:0 0 8px; text-align:center; font-size:2rem; color:#004c99; font-weight:800;
  text-shadow:0 0 8px rgba(0,102,204,.16);
}
.hero-subtitle{
  margin:0 auto 16px; text-align:center; font-size:1.1rem; color:#003366cc; max-width:36ch;
}

/* CTA buttons */
.buttons-row{ display:flex; gap:12px; margin-top:16px }
.buttons-row button{
  flex:1; padding:14px; border:none; border-radius:12px; font-size:1.08rem; font-weight:800; cursor:pointer; transition:.25s;
}
.btn-save{ background:linear-gradient(90deg, var(--primary), #00a2ff); color:#fff; box-shadow:0 0 15px rgba(0,136,255,.35) }
.btn-save:hover{ transform:translateY(-2px); filter:saturate(1.05) }
.btn-clear{ background:rgba(0,0,0,.12); color:var(--text) }
.btn-clear:hover{ transform:translateY(-2px) }

/* Features */
.features-grid{
  display:grid; grid-template-columns:repeat(3, minmax(160px,1fr)); gap:14px; margin-top:18px;
}
.feature{
  background:rgba(255,255,255,.86); border:1px solid rgba(0,102,204,.18); border-radius:14px;
  box-shadow:var(--shadow-soft); padding:18px; text-align:center; transition:.25s;
}
.feature:hover{ transform:translateY(-4px) }
.feature .icon{ font-size:1.6rem; margin-bottom:8px }
.feature h3{ margin:0 0 6px; font-size:1.05rem; color:#0a3c6d }
.feature p{ margin:0; color:#234a72; font-size:.98rem }

/* CTA section */
.cta-section{
  text-align:center; padding:36px 20px; margin:6px auto 40px; max-width:980px;
  background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:18px;
  backdrop-filter:var(--glass-blur); box-shadow:var(--shadow-soft);
}
.cta-section h2{ margin:0 0 6px; color:#004c99; font-weight:800 }
.cta-section p{ margin:0; color:#003366d0 }

/* Footer + Version bar */
.footer{
  background:#003366; color:#fff; text-align:center; padding:28px; font-size:.95rem; margin-top:30px;
}
.version-bar{
  background:#007bff; color:#fff; text-align:center; padding:10px; font-weight:800;
}

/* Reveal animation */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s ease }
.reveal.active{ opacity:1; transform:none }

/* Responsive */
@media (max-width:980px){
  .main-layout{ flex-direction:column; gap:22px }
  .logo-center img{ max-width:340px }
  .features-grid{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:620px){
  .buttons-row{ flex-direction:column }
  .features-grid{ grid-template-columns:1fr }
  .topbar{ padding:12px 18px }
}