/* Sticky Phone Button */
.phone {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1000;
}

.phone-btn {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25D366; /* verde WhatsApp */
  box-shadow: 0 0 15px rgba(37, 211, 102, 0.8), 0 0 30px rgba(37, 211, 102, 0.6);
  animation: glowPulse 1.5s infinite;
  transition: transform 0.2s ease-in-out;
}

.phone-btn:hover {
  transform: scale(1.08);
}

.phone-icon {
  width: 28px;
  height: 28px;
}

@keyframes glowPulse {
  0% {
    box-shadow: 0 0 8px rgba(37, 211, 102, 0.8), 0 0 16px rgba(37, 211, 102, 0.6);
  }
  50% {
    box-shadow: 0 0 18px rgba(37, 211, 102, 1), 0 0 36px rgba(37, 211, 102, 0.8);
  }
  100% {
    box-shadow: 0 0 8px rgba(37, 211, 102, 0.8), 0 0 16px rgba(37, 211, 102, 0.6);
  }
}
/* ===============================
   Design System — FaceNews
   =============================== */
:root {
  /* Colors */
  --bg: #0a0a0f;
  --card: rgba(255,255,255,0.06);
  --card-strong: rgba(255,255,255,0.12);
  --text: #e9ecf1;
  --muted: #a8b0c0;
  --primary: #4da3ff;
  --accent: #9b6bff;
  --success: #2ecc71;
  --warning: #ffcc00;
  --danger: #ff5d6c;
  --glass: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.16);

  /* Radius */
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;

  /* Shadows */
  --shadow-1: 0 0 1px rgba(255,255,255,.25), 0 25px 60px rgba(0,0,0,.55), 0 8px 24px rgba(0,0,0,.35);
  --shadow-glow: 0 0 0 1px rgba(77,163,255,.18), 0 0 32px rgba(77,163,255,.25), 0 0 64px rgba(155,107,255,.15);

  /* Gradient Hero */
  --grad-hero: radial-gradient(1200px 600px at 10% 10%, rgba(77,163,255,.25), transparent 60%), radial-gradient(900px 500px at 90% 20%, rgba(155,107,255,.25), transparent 55%), linear-gradient(180deg, #0a0a0f 0%, #090a10 100%);

  /* Effects */
  --blur: blur(14px);
}

/* ===============================
   Base / Reset
   =============================== */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.55; letter-spacing:.2px; -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none }
img{ max-width:100%; height:auto; display:block }
.container{ width:min(1200px, 92vw); margin-inline:auto }

/* ===============================
   Top Navigation (shared)
   =============================== */
.nav{
  position:sticky; top:0; z-index:80;
  background:linear-gradient(to bottom, rgba(10,10,15,.75), rgba(10,10,15,.35));
  border-bottom:1px solid var(--border);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0 }
.brand{ display:flex; align-items:center; gap:12px }

/* Logo + monogram FN. */
.logo{
  width:50px; height:50px; border-radius:12px;
  background:
    radial-gradient(120% 120% at 10% 20%, rgba(77,163,255,.6), transparent 60%),
    radial-gradient(120% 120% at 90% 10%, rgba(155,107,255,.6), transparent 60%),
    linear-gradient(135deg,#0f1424,#1b1530 55%,#0b0e18);
  box-shadow:var(--shadow-glow);
  border:1px solid rgba(255,255,255,.18);
  animation: floaty 6s ease-in-out infinite;
  position:relative; display:flex; align-items:center; justify-content:center;
}
.logo span{
  font-family:"SF Pro Display", Inter, sans-serif;
  font-weight:900; font-size:25px; color:#fff;
  text-shadow:0 0 6px rgba(77,163,255,.8), 0 0 12px rgba(155,107,255,.6);
  letter-spacing:-1px;
}
.logo::after{ content:""; position:absolute; inset:-1px; border-radius:12px; border:1px solid rgba(255,255,255,.18) }
.brand h1{ font-size:18px; font-weight:800; letter-spacing:.4px }

.nav-links{ display:flex; gap:6px; align-items:center }
.nav-links a{ padding:10px 14px; border-radius:10px; color:var(--muted) }
.nav-links a:hover,
.nav-links a[aria-current="page"]{
  color:var(--text); background:var(--card); box-shadow:var(--shadow-1);
}
.cta-mini{
  padding:10px 14px; border-radius:12px;
  background:linear-gradient(180deg, rgba(77,163,255,.2), rgba(155,107,255,.22));
  border:1px solid rgba(255,255,255,.18); color:#eaf2ff; font-weight:600; box-shadow:var(--shadow-glow);
}

/* Mobile */
.menu-btn{ display:none }
@media (max-width:880px){
  .menu-btn{
    display:inline-flex; align-items:center; gap:8px; padding:10px 14px;
    border-radius:12px; background:var(--card); border:1px solid var(--border)
  }
  .nav-links{ display:none }
  .nav.open .nav-links{
    display:flex; position:absolute; left:4vw; right:4vw; top:68px;
    background:var(--glass); border:1px solid var(--border); border-radius:18px; padding:10px;
    flex-direction:column; box-shadow:var(--shadow-1)
  }
  .nav.open .nav-links a{ padding:12px 14px }
}

/* ===============================
   Hero Section
   =============================== */
.hero{ position:relative; isolation:isolate; overflow:hidden; background:var(--grad-hero) }
.hero::before{
  /* Grid glow */
  content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(800px 400px at 60% 80%, rgba(77,163,255,.18), transparent 60%),
    radial-gradient(900px 500px at 0% 0%, rgba(155,107,255,.14), transparent 55%);
  filter: blur(40px); z-index:-1;
}
.hero-inner{
  display:grid; grid-template-columns:1.1fr .9fr; gap:42px; align-items:center; padding:80px 0
}
@media (max-width:980px){ .hero-inner{ grid-template-columns:1fr; padding:64px 0 } }

h1{
  font-size:clamp(36px, 5.2vw, 64px); line-height:1.05; letter-spacing:-.5px;
  margin:0 0 12px; font-weight:900
}
.subtitle{ font-size:clamp(16px, 2vw, 20px); color:var(--muted); max-width:58ch }

.cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px }
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 18px; border-radius:16px; font-weight:700; letter-spacing:.3px;
  transition: transform .15s ease, box-shadow .2s ease, background .3s ease;
  border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.btn-primary{
  color:#0b1220; background: linear-gradient(180deg, #8ac2ff, #4da3ff 60%, #438bff); box-shadow:var(--shadow-glow)
}
.btn-primary:hover{ transform:translateY(-2px) scale(1.02) }
.btn-ghost{ color:#e9f2ff; background: rgba(255,255,255,.06) }
.btn-ghost:hover{ background: rgba(255,255,255,.12) }

.hero-card{
  border-radius: var(--radius-xl); padding:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--border); box-shadow: var(--shadow-1);
  position:relative; overflow:hidden; min-height:320px;
}
.hero-card .halo{
  position:absolute; inset:-40%;
  background:
    radial-gradient(600px 300px at 20% 80%, rgba(77,163,255,.18), transparent 55%),
    radial-gradient(650px 280px at 80% 20%, rgba(155,107,255,.25), transparent 60%);
  filter:blur(40px); pointer-events:none; z-index:0
}
.hero-metrics{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(2,1fr); gap:14px }
.metric{ padding:16px; border-radius:16px; background:var(--glass); border:1px solid var(--border); box-shadow:var(--shadow-1) }
.metric h3{ margin:0; font-size:28px }
.metric p{ margin:6px 0 0; color:var(--muted); font-size:14px }

/* ===============================
   Section: Services Preview
   =============================== */
section{ padding:72px 0 }
.section-title{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:26px }
.section-title h2{ font-size:clamp(26px, 3.2vw, 40px); margin:0; letter-spacing:-.2px }
.eyebrow{
  display:inline-block; padding:6px 10px; border-radius:999px; border:1px solid var(--border);
  color:var(--muted); background:rgba(255,255,255,.04); font-size:12px; letter-spacing:.4px
}

.grid{ display:grid; gap:18px }
.grid.cols-3{ grid-template-columns:repeat(3, 1fr) }
@media (max-width:980px){ .grid.cols-3{ grid-template-columns:1fr } }

.card{
  position:relative; overflow:hidden; border-radius:20px; padding:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--border); box-shadow: var(--shadow-1);
  transition: transform .15s ease, box-shadow .3s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-glow) }
.card h3{ margin:6px 0 6px; font-size:22px }
.card p{ margin:0; color:var(--muted) }
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; font-size:12px;
  color:#0b1220; background:linear-gradient(180deg,#c9d8ff,#8ac2ff); border:1px solid rgba(255,255,255,.25)
}
.accent-line{ height:1px; background:linear-gradient(90deg, rgba(77,163,255,.6), rgba(155,107,255,.6)); margin:12px 0 }

.card .icon{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(77,163,255,.25), rgba(155,107,255,.25));
  border:1px solid rgba(255,255,255,.18)
}
.card .arrow{ position:absolute; right:18px; bottom:18px; opacity:.9 }

/* Wobble / parallax card */
.wobble{ will-change:transform; transform-style:preserve-3d }

/* ===============================
   Section: PoD / PoS
   =============================== */
.pill{
  display:inline-flex; gap:8px; align-items:center; padding:10px 12px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--muted); font-size:12px
}
.list{ display:grid; gap:12px }
.list-item{ display:flex; gap:12px; padding:12px 14px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid var(--border) }
.list-item strong{ font-weight:700 }

/* ===============================
   Footer (shared)
   =============================== */
footer{
  padding:40px 0 60px; border-top:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02))
}
.footer-grid{ display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:24px }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr } }
footer small{ color:var(--muted) } /* fix: selector corect pe elementul <footer> */
.contact a{ display:inline-flex; align-items:center; gap:10px; padding:8px 0 }

/* ===============================
   Scroll reveal
   =============================== */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease }
.reveal.show{ opacity:1; transform: translateY(0) }

/* ===============================
   Animations
   =============================== */
@keyframes floaty{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-4px) }
}

/* ===============================
   Reduced motion
   =============================== */
@media (prefers-reduced-motion:reduce){
  .btn,.card,.hero-inner,.reveal{ transition:none }
  .logo{ animation:none }
}
```


 :root{
      --bg:#0a0a0f; --card:rgba(255,255,255,.06); --card-strong:rgba(255,255,255,.12);
      --text:#e9ecf1; --muted:#a8b0c0; --primary:#4da3ff; --accent:#9b6bff;
      --success:#2ecc71; --warning:#ffcc00; --danger:#ff5d6c;
      --glass:rgba(255,255,255,.08); --border:rgba(255,255,255,.16);
      --radius-xl:24px; --radius-lg:18px; --radius-md:14px; --radius-sm:10px;
      --shadow-1:0 0 1px rgba(255,255,255,.25), 0 25px 60px rgba(0,0,0,.55), 0 8px 24px rgba(0,0,0,.35);
      --shadow-glow:0 0 0 1px rgba(77,163,255,.18), 0 0 32px rgba(77,163,255,.25), 0 0 64px rgba(155,107,255,.15);
      --grad-hero:radial-gradient(1200px 600px at 10% 10%, rgba(77,163,255,.25), transparent 60%), radial-gradient(900px 500px at 90% 20%, rgba(155,107,255,.25), transparent 55%), linear-gradient(180deg, #0a0a0f 0%, #090a10 100%);
    }
    *{box-sizing:border-box}
    body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,"Segoe UI",Roboto,Helvetica,Arial;line-height:1.55;letter-spacing:.2px;-webkit-font-smoothing:antialiased}
    a{color:inherit;text-decoration:none}
    .container{width:min(1200px,92vw);margin-inline:auto}
    /* Nav */
    .nav{position:sticky;top:0;z-index:80;backdrop-filter:saturate(160%) blur(10px);background:linear-gradient(to bottom, rgba(10,10,15,.75), rgba(10,10,15,.35));border-bottom:1px solid var(--border)}
    .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
    .brand{display:flex;align-items:center;gap:12px}
    .logo{width:42px;height:42px;border-radius:12px;position:relative;overflow:hidden;background:radial-gradient(120% 120% at 10% 20%, rgba(77,163,255,.6), transparent 60%),radial-gradient(120% 120% at 90% 10%, rgba(155,107,255,.55), transparent 60%),linear-gradient(135deg,#0f1424,#1b1530 55%,#0b0e18);box-shadow:var(--shadow-glow)}
    .logo::after{content:"";position:absolute;inset:-1px;border-radius:12px;border:1px solid rgba(255,255,255,.18)}
    .brand h1{font-size:18px;font-weight:800}
    .nav-links{display:flex;gap:6px;align-items:center}
    .nav-links a{padding:10px 14px;border-radius:10px;color:var(--muted)}
    .nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text);background:rgb(16 30 35 / 95%);box-shadow:var(--shadow-1)}
    .cta-mini{padding:10px 14px;border-radius:12px;background:linear-gradient(180deg, rgba(77,163,255,.2), rgba(155,107,255,.22));border:1px solid rgba(255,255,255,.18);color:#eaf2ff;font-weight:600;box-shadow:var(--shadow-glow)}
    .menu-btn{display:none}
    @media (max-width:880px){.menu-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;background:var(--card);border:1px solid var(--border)}.nav-links{display:none}.nav.open .nav-links{display:flex;position:absolute;left:4vw;right:4vw;top:68px;background:rgb(16 30 35 / 95%);border:1px solid var(--border);border-radius:18px;padding:10px;flex-direction:column;box-shadow:var(--shadow-1)}.nav.open .nav-links a{padding:12px 14px}}
    /* Hero */
    .hero{position:relative;isolation:isolate;overflow:hidden;background:var(--grad-hero)}
    .hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:42px;align-items:center;padding:80px 0}
    @media (max-width:980px){.hero-inner{grid-template-columns:1fr;padding:64px 0}}
    h1{font-size:clamp(36px,5.2vw,64px);line-height:1.05;letter-spacing:-.5px;margin:0 0 12px;font-weight:900}
    .subtitle{font-size:clamp(16px,2vw,20px);color:var(--muted);max-width:58ch}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 18px;border-radius:16px;font-weight:700;letter-spacing:.3px;transition: transform .15s ease, box-shadow .2s ease, background .3s ease;border:1px solid rgba(255,255,255,.16);backdrop-filter: blur(6px)}
    .btn-primary{color:#0b1220;background:linear-gradient(180deg,#8ac2ff,#4da3ff 60%,#438bff);box-shadow:var(--shadow-glow)}
    .btn-ghost{color:#e9f2ff;background:rgba(255,255,255,.06)}
    .hero-card{border-radius:24px;padding:22px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid var(--border);box-shadow:var(--shadow-1);position:relative;overflow:hidden;min-height:320px}
    .halo{position:absolute;inset:-40%;background:radial-gradient(600px 300px at 20% 80%, rgba(77,163,255,.18), transparent 55%),radial-gradient(650px 280px at 80% 20%, rgba(155,107,255,.25), transparent 60%);filter:blur(40px);pointer-events:none;z-index:0}
    .hero-metrics{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
    .metric{padding:16px;border-radius:16px;background:var(--glass);border:1px solid var(--border);box-shadow:var(--shadow-1)}
    .metric h3{margin:0;font-size:22px}
    .metric p{margin:6px 0 0;color:var(--muted);font-size:14px}
    /* Sections */
    section{padding:72px 0}
    .section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:26px}
    .section-title h2{font-size:clamp(26px,3.2vw,40px);margin:0;letter-spacing:-.2px}
    .eyebrow{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid var(--border);color:var(--muted);background:rgba(255,255,255,.04);font-size:12px;letter-spacing:.4px}
    .grid{display:grid;gap:18px}
    .cols-3{grid-template-columns:repeat(3,1fr)}
    .cols-4{grid-template-columns:repeat(4,1fr)}
    .cols-2{grid-template-columns:repeat(2,1fr)}
    @media (max-width:980px){.cols-4,.cols-3,.cols-2{grid-template-columns:1fr}}
    .card{position:relative;overflow:hidden;border-radius:20px;padding:20px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid var(--border);box-shadow:var(--shadow-1);transition: transform .15s ease, box-shadow .3s ease}
    .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-glow)}
    .card h3{margin:6px 0 6px;font-size:22px}
    .card p{margin:0;color:var(--muted)}
    .chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;font-size:12px;color:#0b1220;background:linear-gradient(180deg,#c9d8ff,#8ac2ff);border:1px solid rgba(255,255,255,.25)}
    .features{display:grid;gap:10px;margin-top:12px}
    .features li{list-style:none;display:flex;gap:10px;align-items:flex-start}
    footer{padding:40px 0 60px;border-top:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02))}
    .footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:24px}
    @media (max-width:900px){.footer-grid{grid-template-columns:1fr}}
    .footer small{color:var(--muted)}
    .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
    .reveal.show{opacity:1;transform:translateY(0)}
    .wobble{will-change:transform;transform-style:preserve-3d}




 :root{
      --bg:#0a0a0f; --card:rgba(255,255,255,.06); --card-strong:rgba(255,255,255,.12);
      --text:#e9ecf1; --muted:#a8b0c0; --primary:#4da3ff; --accent:#9b6bff;
      --success:#2ecc71; --warning:#ffcc00; --danger:#ff5d6c;
      --glass:rgba(255,255,255,.08); --border:rgba(255,255,255,.16);
      --radius-xl:24px; --radius-lg:18px; --radius-md:14px; --radius-sm:10px;
      --shadow-1:0 0 1px rgba(255,255,255,.25), 0 25px 60px rgba(0,0,0,.55), 0 8px 24px rgba(0,0,0,.35);
      --shadow-glow:0 0 0 1px rgba(77,163,255,.18), 0 0 32px rgba(77,163,255,.25), 0 0 64px rgba(155,107,255,.15);
      --grad-hero:radial-gradient(1200px 600px at 10% 10%, rgba(77,163,255,.25), transparent 60%), radial-gradient(900px 500px at 90% 20%, rgba(155,107,255,.25), transparent 55%), linear-gradient(180deg, #0a0a0f 0%, #090a10 100%);
    }
    *{box-sizing:border-box}
    body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,"Segoe UI",Roboto,Helvetica,Arial;line-height:1.55;letter-spacing:.2px;-webkit-font-smoothing:antialiased}
    a{color:inherit;text-decoration:none}
    .container{width:min(1200px,92vw);margin-inline:auto}
    /* Nav */
    .nav{position:sticky;top:0;z-index:80;backdrop-filter:saturate(160%) blur(10px);background:linear-gradient(to bottom, rgba(10,10,15,.75), rgba(10,10,15,.35));border-bottom:1px solid var(--border)}
    .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
    .brand{display:flex;align-items:center;gap:12px}
    .logo{width:42px;height:42px;border-radius:12px;position:relative;overflow:hidden;background:radial-gradient(120% 120% at 10% 20%, rgba(77,163,255,.6), transparent 60%),radial-gradient(120% 120% at 90% 10%, rgba(155,107,255,.55), transparent 60%),linear-gradient(135deg,#0f1424,#1b1530 55%,#0b0e18);box-shadow:var(--shadow-glow)}
    .logo::after{content:"";position:absolute;inset:-1px;border-radius:12px;border:1px solid rgba(255,255,255,.18)}
    .brand h1{font-size:18px;font-weight:800}
    .nav-links{display:flex;gap:6px;align-items:center}
    .nav-links a{padding:10px 14px;border-radius:10px;color:var(--muted)}
    .nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text);background:var(--card);box-shadow:var(--shadow-1)}
    .cta-mini{padding:10px 14px;border-radius:12px;background:linear-gradient(180deg, rgba(77,163,255,.2), rgba(155,107,255,.22));border:1px solid rgba(255,255,255,.18);color:#eaf2ff;font-weight:600;box-shadow:var(--shadow-glow)}
    .menu-btn{display:none}
    @media (max-width:880px){.menu-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;background:rgb(16 30 35 / 95%);border:1px solid var(--border)}.nav-links{display:none}.nav.open .nav-links{display:flex;position:absolute;left:4vw;right:4vw;top:68px;background:rgb(16 30 35 / 95%);border:1px solid var(--border);border-radius:18px;padding:10px;flex-direction:column;box-shadow:var(--shadow-1)}.nav.open .nav-links a{padding:12px 14px}}
    /* Hero */
    .hero{position:relative;isolation:isolate;overflow:hidden;background:var(--grad-hero)}
    .hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:42px;align-items:center;padding:80px 0}
    @media (max-width:980px){.hero-inner{grid-template-columns:1fr;padding:64px 0}}
    h1{font-size:clamp(36px,5.2vw,64px);line-height:1.05;letter-spacing:-.5px;margin:0 0 12px;font-weight:900}
    .subtitle{font-size:clamp(16px,2vw,20px);color:var(--muted);max-width:58ch}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 18px;border-radius:16px;font-weight:700;letter-spacing:.3px;transition: transform .15s ease, box-shadow .2s ease, background .3s ease;border:1px solid rgba(255,255,255,.16);backdrop-filter: blur(6px)}
    .btn-primary{color:#0b1220;background:linear-gradient(180deg,#8ac2ff,#4da3ff 60%,#438bff);box-shadow:var(--shadow-glow)}
    .btn-ghost{color:#e9f2ff;background:rgba(255,255,255,.06)}
    .hero-card{border-radius:24px;padding:22px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid var(--border);box-shadow:var(--shadow-1);position:relative;overflow:hidden;min-height:320px}
    .halo{position:absolute;inset:-40%;background:radial-gradient(600px 300px at 20% 80%, rgba(77,163,255,.18), transparent 55%),radial-gradient(650px 280px at 80% 20%, rgba(155,107,255,.25), transparent 60%);filter:blur(40px);pointer-events:none;z-index:0}
    .hero-metrics{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
    .metric{padding:16px;border-radius:16px;background:var(--glass);border:1px solid var(--border);box-shadow:var(--shadow-1)}
    .metric h3{margin:0;font-size:22px}
    .metric p{margin:6px 0 0;color:var(--muted);font-size:14px}
    /* Sections */
    section{padding:72px 0}
    .section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:26px}
    .section-title h2{font-size:clamp(26px,3.2vw,40px);margin:0;letter-spacing:-.2px}
    .eyebrow{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid var(--border);color:var(--muted);background:rgba(255,255,255,.04);font-size:12px;letter-spacing:.4px}
    .grid{display:grid;gap:18px}
    .cols-3{grid-template-columns:repeat(3,1fr)}
    .cols-4{grid-template-columns:repeat(4,1fr)}
    .cols-2{grid-template-columns:repeat(2,1fr)}
    @media (max-width:980px){.cols-4,.cols-3,.cols-2{grid-template-columns:1fr}}
    .card{position:relative;overflow:hidden;border-radius:20px;padding:20px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid var(--border);box-shadow:var(--shadow-1);transition: transform .15s ease, box-shadow .3s ease}
    .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-glow)}
    .card h3{margin:6px 0 6px;font-size:22px}
    .card p{margin:0;color:var(--muted)}
    .chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;font-size:12px;color:#0b1220;background:linear-gradient(180deg,#c9d8ff,#8ac2ff);border:1px solid rgba(255,255,255,.25)}
    .features{display:grid;gap:10px;margin-top:12px}
    .features li{list-style:none;display:flex;gap:10px;align-items:flex-start}
    footer{padding:40px 0 60px;border-top:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02))}
    .footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:24px}
    @media (max-width:900px){.footer-grid{grid-template-columns:1fr}}
    .footer small{color:var(--muted)}
    .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
    .reveal.show{opacity:1;transform:translateY(0)}
    .wobble{will-change:transform;transform-style:preserve-3d}
    
      /* Stilul grilei pe desktop */
  .diferente-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 22px;
  }

  /* Responsivitate */
  @media (max-width: 900px) {
    .diferente-grid {
      grid-template-columns: 1fr;
    }
  }
  
   .metodologia-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  @media (max-width: 1024px) {
    .metodologia-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 768px) {
    .metodologia-grid {
      grid-template-columns: 1fr;
    }
  }
  
.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 coloane egale pe desktop */
  gap: 32px;
  align-items: start;
}

@media (max-width: 980px) {
  .card-grid {
    grid-template-columns: 1fr; /* pe mobil o singură coloană */
    text-align: center; /* centrează conținutul */
  }

  .card-grid .cta-row {
    justify-content: center; /* centrează butoanele */
  }

  .card-grid form {
    max-width: 420px; /* să nu fie lat cât tot ecranul */
    margin: 0 auto;   /* centrează formularul */
  }
}

.form-alert.success { color:#2ecc71; font-weight:600; }
.form-alert.error   { color:#ff5d6c; font-weight:600; }