/* ============================================================
   StefanIonutCraciun.ro — Global Stylesheet
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --green:      #16a34a;
  --green-deep: #15803d;
  --green-pale: #dcfce7;
  --sky:        #0ea5e9;
  --sky-deep:   #0284c7;
  --sky-pale:   #e0f2fe;
  --amber:      #f59e0b;
  --amber-deep: #d97706;
  --amber-pale: #fef3c7;
  --terra:      #ea580c;
  --white:      #ffffff;
  --paper:      #f8fffe;
  --mint:       #f0fdf4;
  --skyblush:   #f0f9ff;
  --ink:        #0f2417;
  --ink-mid:    #2d5a3d;
  --ink-dim:    #6b9e7e;

  --serif: 'Playfair Display', Georgia, serif;
  --sans:  'DM Sans', system-ui, sans-serif;

  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow:    0 4px 20px rgba(0,0,0,0.1);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.14);

  --transition: 0.25s ease;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink);
  background: var(--white);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; }
ul, ol { list-style:none; }
button { font-family:var(--sans); cursor:pointer; }
input, textarea, select { font-family:var(--sans); }

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--green-pale); }
::-webkit-scrollbar-thumb { background:var(--green); border-radius:2px; }

/* ── Skip Link ─────────────────────────────────────────────── */
.skip-link {
  position:absolute; top:-40px; left:16px; z-index:9999;
  background:var(--green); color:#fff;
  padding:8px 16px; border-radius:0 0 8px 8px;
  font-size:.85rem; font-weight:500;
  text-decoration:none;
  transition:top 0.25s;
}
.skip-link:focus { top:0; }

/* ── Custom Cursor ─────────────────────────────────────────── */
.cursor {
  width:10px; height:10px;
  background:var(--green); border-radius:50%;
  position:fixed; top:0; left:0;
  pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .2s,height .2s,background .2s;
}
.cursor-ring {
  width:36px; height:36px;
  border:2px solid rgba(22,163,74,.4); border-radius:50%;
  position:fixed; top:0; left:0;
  pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%);
  transition:transform .3s ease;
}
body:has(a:hover) .cursor { background:var(--sky); }

/* ── Layout ────────────────────────────────────────────────── */
.container       { max-width:1200px; margin:0 auto; padding:0 52px; }
.container-wide  { max-width:1440px; margin:0 auto; padding:0 52px; }
.container-narrow{ max-width:820px;  margin:0 auto; padding:0 52px; }

section.section  { padding:110px 0; }

/* ── Typography Helpers ────────────────────────────────────── */
.eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-size:.65rem; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--green); margin-bottom:14px;
}
.eyebrow::before { content:''; width:28px; height:2px; background:currentColor; border-radius:1px; }
.eyebrow.sky   { color:var(--sky-deep); }
.eyebrow.amber { color:var(--amber-deep); }

.sec-title {
  font-family:var(--serif);
  font-size:clamp(2.2rem,4vw,3.6rem);
  font-weight:700; line-height:1.15; color:var(--ink);
}
.sec-title em       { font-style:italic; color:var(--green); }
.sec-title em.sky   { color:var(--sky-deep); }
.sec-title em.amber { color:var(--amber-deep); }

.lead { font-family:var(--serif); font-size:1.2rem; line-height:1.65; margin-bottom:18px; }
.body-text { color:var(--ink-mid); font-size:.97rem; line-height:1.85; margin-bottom:18px; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 30px; border-radius:var(--radius-sm);
  font-family:var(--sans); font-size:.82rem; font-weight:500;
  letter-spacing:.03em; text-decoration:none;
  border:2px solid transparent;
  transition:all var(--transition); cursor:pointer;
}
.btn-green  { background:var(--green);    color:#fff; border-color:var(--green); }
.btn-green:hover  { background:var(--green-deep); border-color:var(--green-deep); transform:translateY(-3px); box-shadow:0 10px 32px rgba(22,163,74,.38); }
.btn-sky    { background:var(--sky);      color:#fff; border-color:var(--sky); }
.btn-sky:hover    { background:var(--sky-deep);   transform:translateY(-3px); box-shadow:0 10px 32px rgba(14,165,233,.38); }
.btn-amber  { background:var(--amber);    color:#fff; border-color:var(--amber); }
.btn-amber:hover  { background:var(--amber-deep); transform:translateY(-3px); box-shadow:0 10px 32px rgba(245,158,11,.38); }
.btn-outline-g    { background:transparent; color:var(--green-deep); border-color:var(--green); }
.btn-outline-g:hover { background:var(--green-pale); transform:translateY(-2px); }
.btn-ghost { background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.38); backdrop-filter:blur(6px); }
.btn-ghost:hover { background:rgba(255,255,255,.24); transform:translateY(-2px); }

/* ── Tags / Chips ──────────────────────────────────────────── */
.tag { padding:7px 16px; border-radius:100px; font-size:.75rem; font-weight:500; }
.tag.tg { background:var(--green-pale); color:var(--green-deep); }
.tag.tb { background:var(--sky-pale);   color:var(--sky-deep); }
.tag.ta { background:var(--amber-pale); color:var(--amber-deep); }

/* ── Flash Messages ────────────────────────────────────────── */
.flash {
  position:fixed; top:80px; left:50%; transform:translateX(-50%);
  z-index:200; padding:14px 28px; border-radius:var(--radius-sm);
  font-size:.9rem; font-weight:500;
  animation:flashIn .4s ease;
  max-width:90vw; text-align:center;
}
.flash-success { background:var(--green-pale); color:var(--green-deep); border:1px solid var(--green); }
.flash-error   { background:#fef2f2;           color:#b91c1c;            border:1px solid #f87171; }
@keyframes flashIn { from{opacity:0;transform:translateX(-50%) translateY(-10px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }

/* ── Back to Top ───────────────────────────────────────────── */
.back-to-top {
  position:fixed; bottom:32px; right:32px; z-index:50;
  width:48px; height:48px; border-radius:50%;
  background:var(--green); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(22,163,74,.4);
  opacity:0; transform:translateY(20px);
  transition:all var(--transition);
  pointer-events:none;
}
.back-to-top.visible { opacity:1; transform:translateY(0); pointer-events:all; }
.back-to-top:hover { background:var(--green-deep); transform:translateY(-3px); }

/* ── Reveal Animations ─────────────────────────────────────── */
.reveal   { opacity:0; transform:translateY(36px); transition:opacity .75s ease,transform .75s ease; }
.reveal-l { opacity:0; transform:translateX(-36px); transition:opacity .75s ease,transform .75s ease; }
.reveal-r { opacity:0; transform:translateX(36px); transition:opacity .75s ease,transform .75s ease; }
.reveal.v,.reveal-l.v,.reveal-r.v { opacity:1; transform:none; }

/* ── Responsive ────────────────────────────────────────────── */
@media(max-width:960px) {
  .container,.container-wide,.container-narrow { padding:0 24px; }
  .cursor,.cursor-ring { display:none; }
}
@media(max-width:640px) {
  section.section { padding:72px 0; }
}