/* WITHBIG v21 — premium / fresh / modern layer (no heavy libs) */
:root{
  --ink:#0B1F1A; --green:#0E7A5A; --green2:#13956F; --cream:#F7F5F0;
  --paper:rgba(255,255,255,.82); --paper-solid:#fff;
  --muted:#5A6B64; --line:rgba(14,122,90,.12); --coral:#FF6B4A;
  --mint:#E4F4EE; --gold:#C9A227; --lilac:#6B5B95; --sky:#3A7CA5;
  --shadow:0 18px 50px rgba(11,31,26,.10); --shadow-lg:0 28px 70px rgba(11,31,26,.14);
  --r:24px;
  --grad-hero:linear-gradient(135deg,#E8F6F0 0%,#F8F4EC 42%,#FFF7EE 100%);
  --grad-page:linear-gradient(180deg,#F3FAF6 0%,#F8F5EF 38%,#F7F5F0 100%);
  --glass:rgba(255,255,255,.72);
  --glass-border:1px solid rgba(255,255,255,.55);
}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:var(--grad-page);
  background-attachment:fixed;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.wrap{width:min(1120px,calc(100% - 32px));margin:auto}

/* Nav glass */
header.wrap > nav, body > header .wrap nav, header > nav{
  backdrop-filter:saturate(1.2) blur(10px);
  -webkit-backdrop-filter:saturate(1.2) blur(10px);
}
.btn{
  border:0;border-radius:999px;padding:13px 20px;font-weight:900;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease, opacity .22s ease, color .22s ease;
  will-change:transform;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(14,122,90,.18)}
.btn:active{transform:none}
.btn:focus-visible{outline:3px solid rgba(14,122,90,.35);outline-offset:3px}
.primary{background:linear-gradient(135deg,var(--green),var(--green2));color:#fff;box-shadow:0 12px 28px rgba(14,122,90,.22)}
.dark{background:var(--ink);color:#fff}
.soft{background:var(--mint);color:var(--green)}

.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:950;color:var(--green)}
h1{font-size:clamp(34px,5.6vw,58px);line-height:1.05;letter-spacing:-.045em;margin:10px 0 14px}
h2{font-size:clamp(24px,3.5vw,36px);letter-spacing:-.03em;margin:0 0 10px}
.lead,.intro{color:#344A42;font-size:clamp(16px,2.2vw,19px);max-width:720px}

/* Elevated / glass cards */
.card, .benefit-card, .flowgrid .card, .valuecard, .community-card, .finishcard, .mode-card, .live-list-panel{
  border-radius:var(--r);
  box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease;
}
.card, .benefit-card{
  background:var(--glass);
  border:var(--glass-border);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.benefit-card:hover, .card:hover, .flowgrid .card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
}
.pill{
  border:1px solid var(--line);background:rgba(255,255,255,.85);padding:8px 12px;border-radius:999px;
  font-size:12px;font-weight:800;display:inline-block;
}

/* Hero premium */
.hero-premium{
  position:relative;
  padding:42px 0 28px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:40px;
  align-items:center;
}
.hero-premium::before{
  content:"";
  position:absolute;inset:0 0 auto 0;height:min(78vh,640px);z-index:-1;
  border-radius:36px;
  background:var(--grad-hero);
  background-size:200% 200%;
  animation:heroShift 18s ease-in-out infinite;
  opacity:.95;
  max-width:100%;
  pointer-events:none;
}
@keyframes heroShift{
  0%{background-position:0% 40%}
  50%{background-position:100% 60%}
  100%{background-position:0% 40%}
}
.hero-title{font-size:clamp(36px,6.2vw,64px);line-height:.98;letter-spacing:-.05em;margin:12px 0 18px;font-weight:950}
.hero-title .green{color:var(--green)}
.hero-lead{font-size:clamp(16px,2.1vw,19px);color:#344A42;max-width:560px;margin:0 0 22px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 10px}
.benefit-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0 8px;
}
.benefit-card{
  padding:16px 16px 14px;min-height:118px;
}
.benefit-card .ico{font-size:22px;line-height:1;margin-bottom:8px}
.benefit-card strong{display:block;font-size:14px;letter-spacing:-.01em;margin-bottom:4px}
.benefit-card p{margin:0;font-size:13px;color:var(--muted);line-height:1.4}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease, transform .55s ease}
.reveal.in{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.06s}.reveal-delay-2{transition-delay:.12s}
.reveal-delay-3{transition-delay:.18s}.reveal-delay-4{transition-delay:.24s}
.reveal-delay-5{transition-delay:.30s}.reveal-delay-6{transition-delay:.36s}

/* Section accents */
.section-accent-green{--accent:var(--green)}
.section-accent-coral{--accent:var(--coral)}
.section-accent-gold{--accent:var(--gold)}
.section-accent-lilac{--accent:var(--lilac)}
.section-accent-sky{--accent:var(--sky)}
.section .eyebrow{color:var(--accent, var(--green))}

/* Calendar learning UI */
.cal-legend-v21{
  display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px;
}
.cal-legend-v21 span{
  display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;
  background:rgba(255,255,255,.8);border:1px solid var(--line);font-size:12px;font-weight:800;
}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.cal .dow{font-size:11px;font-weight:850;color:var(--muted);text-align:center;padding:4px 0}
.cal .day{
  min-height:102px;border:1px solid var(--line);border-radius:16px;padding:8px;
  background:rgba(255,255,255,.88);cursor:pointer;font-size:12px;overflow:visible;
  transition:transform .2s ease, box-shadow .2s ease;
}
.cal .day:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.cal .day.empty{background:transparent;border:0;cursor:default;box-shadow:none}
.cal .day .n{font-weight:950;font-size:14px;display:flex;align-items:center;gap:4px}
.cal .day.post{background:linear-gradient(180deg,#F1EEFF,#F7F5FF)}
.cal .day.sarbatoare{background:linear-gradient(180deg,#E5F6EF,#F4FBF7)}
.cal .day.cruce{outline:2px solid var(--coral);outline-offset:0}
.cal .day.mosii{outline:2px solid #6b4f9a}
.cal .day.zi-libera{box-shadow:inset 0 -3px 0 #1a6b54}
.cal .day.dezlegare{background:linear-gradient(180deg,#FFF6E4,#FFFBF2)}
.cal .day.hartii{background:linear-gradient(180deg,#ECF9F3,#F7FCFA)}
.cal .day .day-title{margin-top:4px;line-height:1.25;overflow-wrap:normal;word-break:normal;white-space:normal;font-size:11px;color:#2A3C35}
.cal .day .day-badges{display:flex;flex-wrap:wrap;gap:3px;margin-top:6px}
.cal .day .badge{
  font-size:9px;font-weight:900;letter-spacing:.02em;padding:2px 6px;border-radius:999px;
  background:rgba(11,31,26,.06);color:#234;
}
.cal .day .badge.post{background:#EDE7F6;color:#4A3A7A}
.cal .day .badge.fish{background:#FFF0D6;color:#7A5208}
.cal .day .badge.free{background:#E4F4EE;color:var(--green)}
.cal .day .badge.feast{background:#FFE8E1;color:#9E3A2E}
.cal .day .cruce-mark{color:#b00020;font-weight:900}

.learn-panel{
  margin-top:16px;padding:22px;border-radius:22px;
  background:rgba(255,255,255,.88);border:1px solid var(--line);box-shadow:var(--shadow);
}
.learn-panel h3{margin:0 0 8px;font-size:20px;letter-spacing:-.02em}
.learn-panel .learn-meta{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.learn-panel details{
  border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin:8px 0;background:#FBFCFA;
}
.learn-panel details summary{
  cursor:pointer;font-weight:900;color:var(--green);list-style:none;
}
.learn-panel details summary::-webkit-details-marker{display:none}
.learn-panel details[open]{background:#F4FAF7}
.learn-panel .src{font-size:11px;color:var(--muted);margin-top:12px;line-height:1.45}
.learn-panel .src a{color:var(--green);font-weight:800;text-decoration:underline}

footer{margin:40px 0 28px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
footer a{color:var(--green);font-weight:800}

@media(max-width:900px){
  .hero-premium{grid-template-columns:1fr;gap:28px;padding-top:28px}
  .benefit-grid{grid-template-columns:1fr 1fr}
  .cal .day{min-height:78px}
}
@media(max-width:620px){
  .benefit-grid{grid-template-columns:1fr}
  .hero-ctas .btn{width:100%}
  .cal{gap:5px}
  .cal .day{min-height:64px;padding:5px;border-radius:12px}
  .cal .day .day-title{font-size:10px}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .hero-premium::before{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .btn,.card,.benefit-card,.cal .day{transition:none}
  .btn:hover,.benefit-card:hover,.card:hover,.cal .day:hover{transform:none}
}

/* v21 mobile fit — content must not rely on overflow clipping */
.hero-premium, .benefit-grid, .app, .wrap { max-width: 100%; box-sizing: border-box; min-width: 0; }
.hero-premium { overflow: visible; }
@media (max-width: 480px) {
  .benefit-grid { grid-template-columns: 1fr !important; }
  .hero-premium { grid-template-columns: 1fr !important; gap: 22px; padding-top: 22px; }
  .hero-premium::before { inset: 0 !important; border-radius: 0; }
  .hero-title { font-size: clamp(28px, 7.5vw, 36px) !important; line-height: 1.08 !important; }
  .hero-lead { font-size: 15px !important; max-width: 100%; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
  .cal .day .day-title { display: none !important; }
}