/* Main CSS Variables and Base Styles */
:root {
  --bg: #05060a;
  --header-height: 80px;
  --grad-anim: conic-gradient(from 0deg at 50% 50%, #00d4ff, #0099ff, #ffd700, #ff6b35, #00ff88, #00d4ff);
  --glass: rgba(255, 255, 255, .06);
  --glass-2: rgba(255, 255, 255, .10);
  --border: rgba(255, 255, 255, .20);
  --text: #edf3ff;
  --muted: #9fb0d3;
  --neon-1: #00d4ff;
  --neon-2: #3a86ff;
  --neon-3: #ffd000;
  --neon-4: #35e1ff;
  --neon-5: #00ff88;
  --success: #00ff88;
  --warning: #ffd700;
  --error: #ff6b35;
  --radius: 20px;
  --radius-sm: 14px;
  --glow-1: 0 0 20px rgba(0, 212, 255, .4);
  --glow-2: 0 0 30px rgba(0, 153, 255, .35);
  --glow-3: 0 0 25px rgba(255, 215, 0, .3);
  --glow-4: 0 0 35px rgba(255, 107, 53, .35);
}

* { box-sizing: border-box; }

html {
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-gutter: stable both-edges;
}

body {
  height: 100%;
  margin: 0;
  font-family: "Heebo", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1400px 800px at 5% -5%, rgba(0, 212, 255, .35), transparent 70%),
    radial-gradient(1300px 750px at 95% 5%, rgba(0, 153, 255, .30), transparent 65%),
    radial-gradient(1200px 700px at 50% 50%, rgba(255, 215, 0, .18), transparent 60%),
    radial-gradient(1000px 600px at -5% 95%, rgba(255, 107, 53, .22), transparent 70%),
    radial-gradient(800px 500px at 105% 105%, rgba(0, 255, 136, .16), transparent 80%),
    var(--bg);
  position: relative;
  width: 100%;
  max-width: 100%;
}

/* ensure content isn't covered by fixed header */
body { padding-top: var(--header-height); }

@media (max-width: 640px) {
  :root { --header-height: 110px; }
  .header { height: var(--header-height); }
}
/* Hero */
.hero { padding: 60px 0 30px; position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,212,255,.10), transparent 70%);
  animation: hero-glow 4s ease-in-out infinite alternate; pointer-events: none;
}
@keyframes hero-glow { 0% { opacity:.3; transform: scale(1);} 100% { opacity:.55; transform: scale(1.08);} }

.h-eyebrow {
  display: inline-flex; gap: 10px; align-items: center; color: #fff;
  font-weight: 900; letter-spacing: .12em; text-transform: uppercase; font-size: 12px;
  border: 1px solid var(--neon-1);
  background: linear-gradient(135deg, var(--neon-1), var(--neon-2));
  border-radius: 999px; padding: 10px 16px;
  box-shadow: var(--glow-1), var(--glow-2);
  animation: eyebrow-pulse 2.2s ease-in-out infinite;
  position: relative; overflow: hidden;
}
.h-eyebrow::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.30), transparent);
  animation: eyebrow-shine 3s ease-in-out infinite;
}
@keyframes eyebrow-pulse { 0%,100% { transform: scale(1);} 50% { transform: scale(1.04);} }
@keyframes eyebrow-shine { 0% { transform: translateX(-100%);} 100% { transform: translateX(100%);} }

h1 {
  margin: 20px 0 10px; font-size: 52px; font-weight: 1000; letter-spacing: -.03em;
  background: linear-gradient(135deg, #fff, var(--neon-1), var(--neon-2), var(--neon-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 40px rgba(0, 212, 255, .35);
  animation: title-glow 3s ease-in-out infinite alternate; position: relative;
}
h1::after{ content:""; position:absolute; inset:auto 0 -6px 0; height:2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); filter: blur(1px); }
@keyframes title-glow { 0% { filter: brightness(1);} 100% { filter: brightness(1.18);} }

.hero-sub { color: var(--muted); margin: 0 0 24px; font-size: 18px; line-height: 1.6; animation: fade-in-up 1s ease-out 0.4s both; }
@keyframes fade-in-up { from { opacity:0; transform: translateY(26px);} to { opacity:1; transform: translateY(0);} }

.cta-row { display: flex; gap: 10px; flex-wrap: wrap }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: var(--radius); border: 1px solid var(--neon-1);
  background: linear-gradient(135deg, var(--neon-1), var(--neon-2), var(--neon-3));
  color: #fff; text-decoration: none; padding: 14px 22px;
  font-weight: 900; font-size: 15px; letter-spacing: .4px;
  position: relative; overflow: hidden; transition: all .25s cubic-bezier(0.4,0,0.2,1);
  box-shadow: var(--glow-1), var(--glow-2); animation: btn-glow 2s ease-in-out infinite alternate;
}
.btn::before { content:''; position:absolute; inset:0; border-radius: var(--radius); background: linear-gradient(135deg, var(--neon-4), var(--neon-5)); opacity:0; transition: opacity .25s; }
.btn::after { content:''; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); transform: translateX(-100%); transition: transform .55s ease; }
.btn:hover { transform: translateY(-3px); box-shadow: var(--glow-1), var(--glow-2), var(--glow-3), 0 20px 40px rgba(0,0,0,.35); border-color: var(--neon-4); }
.btn:hover::before { opacity:.25; }
.btn:hover::after { transform: translateX(100%); }
@keyframes btn-glow { 0% { box-shadow: var(--glow-1), var(--glow-2);} 100% { box-shadow: var(--glow-1), var(--glow-2), var(--glow-3);} }

.btn-outline { background: transparent; color: var(--text); border: 1px solid var(--border); box-shadow: none; animation: none; }
.btn-outline:hover { background: linear-gradient(135deg, var(--neon-1), var(--neon-2)); color: #fff; border-color: var(--neon-1); box-shadow: var(--glow-1), var(--glow-2); }
/* Hero card countdown (kept) */
.hero-card {
  border: 1px solid var(--border); 
  border-radius: var(--radius); 
  padding: 24px;
  background: linear-gradient(180deg, var(--glass-2), var(--glass));
  box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset;
  backdrop-filter: blur(20px); 
  position: relative; 
  overflow: hidden; 
  animation: card-float 6s ease-in-out infinite;

  /* --- אופציה להזיז את כל הכרטיס למטה --- */
  margin-top: 50px; /* שנה את המספר לפי הצורך */
}

.hero-card::before {
  content: ''; 
  position: absolute; 
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 0, 110, .10), rgba(131, 56, 236, .10), rgba(58, 134, 255, .10));
  opacity: .5; 
  animation: card-glow 4s ease-in-out infinite alternate;
}

@keyframes card-float { 
  0%,100% { transform: translateY(0);} 
  50% { transform: translateY(-5px);} 
}

@keyframes card-glow { 
  0% { opacity:.3;} 
  100% { opacity:.7;} 
}

.countdown { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 16px; 
  position: relative; 
  z-index: 1; 
}

.cd-item {
  background: var(--glass); 
  border: 1px solid var(--border); 
  border-radius: var(--radius);
  padding: 16px; 
  text-align: center; 
  box-shadow: 0 8px 32px rgba(0,0,0,.30);
  backdrop-filter: blur(10px); 
  transition: all .25s; 
  position: relative; 
  overflow: hidden;
}

.cd-item::before { 
  content: ''; 
  position: absolute; 
  inset: 0; 
  background: linear-gradient(135deg, var(--neon-1), var(--neon-2)); 
  opacity: 0; 
  transition: opacity .25s; 
  border-radius: var(--radius); 
}

.cd-item:hover { 
  transform: translateY(-4px); 
  border-color: var(--neon-1); 
  box-shadow: var(--glow-1), 0 12px 40px rgba(0,0,0,.4); 
}

.cd-item:hover::before { 
  opacity: .08; 
}

.cd-num { 
  font-size: 32px; 
  font-weight: 1000; 
  background: linear-gradient(135deg, #fff, var(--neon-1), var(--neon-2)); 
  -webkit-background-clip: text; 
  background-clip: text; 
  color: transparent; 
  position: relative; 
  z-index: 1; 
  animation: number-pulse 2s ease-in-out infinite; 
}

@keyframes number-pulse { 
  0%,100% { transform: scale(1);} 
  50% { transform: scale(1.08);} 
}

.cd-label { 
  color: var(--muted); 
  font-size: 12px; 
  font-weight: 800; 
  letter-spacing: .4px; 
  position: relative; 
  z-index: 1; 
}

/* Ensure countdown items appear in a single row on narrow screens (mobile) */
@media (max-width: 600px) {
  .countdown {
    display: flex;
    gap: 10px;
    align-items: stretch;
    overflow-x: auto; /* allow horizontal scroll if space is tight */
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }

  .countdown .cd-item {
    flex: 0 0 22%; /* four items fit horizontally (approx) */
    min-width: 18%;
    box-sizing: border-box;
    padding: 10px 8px;
    transform-origin: center;
  }
/* סגנון גלילת תמונות */
.image-gallery {
  position: relative;
}

.main-image {
  width: 100%;
  height: auto;
  display: block;
}

.image-scroll {
  display: flex;
  overflow-x: scroll;
  margin-top: 10px;
  border-bottom: 2px solid #ccc; /* קו מתחת */
  padding-bottom: 5px;
}

.thumb-image {
  width: 60px;
  height: 60px;
  margin-right: 10px;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.thumb-image:hover {
  transform: scale(1.1);
}

.image-scroll::-webkit-scrollbar {
  height: 5px;
}

.image-scroll::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 5px;
}

.image-scroll::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

  /* Slightly reduce number and label sizes on mobile so everything fits on one line */
  .cd-num { font-size: 20px; }
  .cd-label { font-size: 11px; }
}