/* === Portall Brand Palette (tints 25/50/75/100) === */
:root {
  /* Main */
  --blue-25:#CFC3ED; --blue-50:#9F87DB; --blue-75:#6F4BC9; --blue-100:#3F0FB7;
  --tangelo-25:#FDD3C5; --tangelo-50:#FAA78B; --tangelo-75:#F87B51; --tangelo-100:#F54F17;
  --sky-25:#D6F1F9; --sky-50:#ADE4F2; --sky-75:#84D6EC; --sky-100:#5BC8E5;

  /* Secondary */
  --amber-25:#FFF0BF; --amber-50:#FFE080; --amber-75:#FFD140; --amber-100:#FFC100;
  --aqua-25:#E5FBF5; --aqua-50:#CBF8EA; --aqua-75:#B0F4E0; --aqua-100:#96F0D5;

  /* Legacy token remaps (brand-only) */
  --blue: var(--blue-100);
  --orange: var(--tangelo-100);
  --sky: var(--sky-100);
  --indigo: var(--blue-75);          /* previously var(--blue-75) → use blue-75 */
  --deep: var(--blue-100);           /* previously var(--blue-100) → unify to blue-100 */

  --text: var(--sky-25);             /* on-dark text substitute */
  --muted: var(--sky-50);
  --accent-warm: var(--amber-75);

  /* Neutrals from brand only */
  --on-dark: var(--sky-25);          /* use for text/icons over dark surfaces */
  --on-dark-weak: var(--sky-50);
  --on-warm: var(--blue-100);

  /* Shadow/overlays using color-mix with brand */
  --shadow-1: color-mix(in srgb, var(--blue-100) 28%, transparent);
  --shadow-2: color-mix(in srgb, var(--blue-100) 45%, transparent);

  --ring-weak: color-mix(in srgb, var(--on-dark) 18%, transparent);
  --fill-weak: color-mix(in srgb, var(--on-dark) 8%, transparent);
  --fill-mid: color-mix(in srgb, var(--on-dark) 12%, transparent);
}

/* =======================
   Portall — Global Styles
   ======================= */

/* Brand tokens */
:root {
  --blue: #3F0FB7;      /* Medium Blue */
  --orange: #F54F17;    /* Tangelo   */
  --sky: #5BC8E5;       /* Sky Blue  */
  --deep: var(--blue-100);      /* Deep Blue */
  --indigo: var(--blue-75);    /* Indigo    */
  --text: var(--sky-25);
  --muted: var(--sky-50);

  --radius: 16px;
  --pad: clamp(18px, 2.5vw, 28px);
  --max: 1120px;

  --e1: 0 6px 22px color-mix(in srgb, var(--blue-100) 28%, transparent);
  --e2: 0 16px 44px color-mix(in srgb, var(--blue-100) 32%, transparent);
}

/* =======================
   Base layout
   ======================= */
body {
  margin: 0;
  color: var(--text);
  font-family: "Montserrat", "Inter", system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  background: var(--deep);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container {
  max-width: var(--max);
  padding: 0 var(--pad);
  margin: 0 auto;
}

h1 {
  font-weight: 900;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.1;
  margin: 0 0 .5rem;
}

h2 {
  font-weight: 800;
  font-size: clamp(26px, 3.2vw, 40px);
  margin: 0 0 .5rem;
}

p.lead {
  color: var(--muted);
  font-size: clamp(16px, 2vw, 18px);
}
.site-header .brand {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* =======================
   HERO
   ======================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--on-dark);
  overflow: hidden;
  isolation: isolate;
  background-color: var(--blue-100);
}

/* Background image — correct scale & alignment */
.hero-bg {
  position: absolute;
  inset: 0;
  background: url("assets/hero_bg.png") center center / cover no-repeat;
  background-position: 60% center;
  z-index: -2;
  filter: brightness(1.08) saturate(120%);
}

/* Fade below hero */
.hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--blue-100) 0%, transparent) 0%, var(--blue-100) 100%);
  z-index: -1;
}

/* Text content */
.hero-content {
  max-width: 900px;
  padding: clamp(20px, 4vw, 60px);
}

.hero h1 {
  font-weight: 900;
  font-size: clamp(42px, 7vw, 92px);
  line-height: 1.06;
  color: var(--on-dark);
  margin: 0 0 1rem;
}

.hero .lead {
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 500;
  color: var(--muted);
  line-height: 1.45;
  margin-bottom: 2rem;
}

.hero .brand {
  color: var(--sky-75);
  font-weight: 700;
}

.hero .accent {
  display: inline;
  color: var(--amber-75);
  font-weight: 700;
}


/* =======================
   HERO CTA BUTTON
   ======================= */
.btn-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  background: linear-gradient(180deg, var(--blue-75) 0%, var(--blue-100) 100%);
  color: var(--on-dark);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  padding: 10px 28px;
  border-radius: 9999px;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 0 25px color-mix(in srgb, var(--blue-75) 32%, transparent);
}

.btn-hero:hover {
  background: linear-gradient(180deg, var(--blue-50) 0%, var(--blue-75) 100%);
  transform: translateY(-1px);
}
/* Desktop: make hero shorter + tighter typography */
@media (min-width: 1200px) {
  .hero {
    min-height: 62vh;        /* was 100vh */
    max-height: 860px;        /* safety cap on very large monitors */
    padding: 72px 0 96px;     /* space without needing full height */
  }

  .hero-content {
    max-width: 760px;         /* a bit narrower text block */
  }

  .hero h1 {
    font-size: clamp(42px, 5vw, 68px);
  }

  .hero .lead {
    font-size: clamp(18px, 1.4vw, 22px);
  }

  /* shorter fade so it doesn't feel so tall */
  .hero::after {
    height: 120px;            /* was 200px */
  }
}
/* === HERO mobile fix: raise text higher so CTA stays visible === */
@media (max-width: 768px) {
  .hero {
    min-height: 100dvh;           /* dynamic viewport height for mobile */
    display: flex;
    align-items: flex-start;       /* move content toward the top */
    justify-content: center;
    padding-top: 10vh;             /* move text higher */
    padding-bottom: 6vh;
    text-align: center;
  }

  .hero-content {
    margin-top: 0;
    padding: 0 1.2rem;
  }

  .hero h1 {
    font-size: clamp(36px, 9vw, 56px);
  }

  .hero .lead {
    font-size: clamp(16px, 4vw, 20px);
    margin-bottom: 1.2rem;
  }

  .btn-hero {
    margin-top: 0.3rem;
  }
}

/* =======================
   UNIVERSAL BUTTON BASE
   (smaller padding + consistent text)
   ======================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 10px 26px;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  border-radius: 9999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--on-dark);
  box-shadow: var(--e1);
}

/* Hover lift for all buttons */
.btn:hover {
  transform: translateY(-1px);
}

/* =======================
   BUTTON COLOR VARIANTS
   ======================= */

/* Blue (Primary) */
.btn-primary {
  background: var(--blue);
  box-shadow: var(--e1);
}
.btn-primary:hover {
  background: var(--blue-75);
}

/* Red (brand orange) */
.btn-red {
  background: var(--orange);
  box-shadow: var(--e1);
}
.btn-red:hover {
  background: var(--tangelo-75);
}

/* Indigo (purple) */
.btn-purple {
  background: var(--indigo);
  box-shadow: var(--e1);
}
.btn-purple:hover {
  background: var(--blue-75);
}

/* Ghost (transparent) */
.btn-ghost {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--on-dark) 28%, transparent);
  color: var(--on-dark);
}
.btn-ghost:hover {
  background: color-mix(in srgb, var(--on-dark) 8%, transparent);
}

/* === Portal button — seamless flowing border, pill stays fixed === */
.btn-portal{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* slimmer, lighter text */
  padding: 9px 24px;
  font-size: 15px;
  font-weight: 500;      /* not bold */
  text-transform: none;  /* remove ALL CAPS */
  color: var(--on-dark);

  background: var(--deep);
  border-radius: 9999px;
  border: none;          /* ring is drawn by ::before */
  overflow: hidden;
  z-index: 0;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

.btn-portal span{
  position: relative;
  z-index: 1;
}

/* Border ring with a seamless, infinite flow */
.btn-portal::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  /* thickness of the ring */
  padding: 4px;

  /* Start and end color are the SAME -> no seam on loop */
  background: linear-gradient(
    90deg,
    var(--sky) 0%,
    var(--blue) 25%,
    var(--indigo) 50%,
    var(--orange) 75%,
    var(--sky) 100%
  );
  background-size: 400% 100%;
  animation: portalFlow 6s linear infinite;
  will-change: background-position;

  /* Punch a hole for the inner fill so only the ring shows */
  -webkit-mask: linear-gradient(color-mix(in srgb, var(--blue-100) 100%, transparent) 0 0) content-box, linear-gradient(color-mix(in srgb, var(--blue-100) 100%, transparent) 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: 0;
}

/* Optional subtle breathing (opacity) without moving the shape */
.btn-portal::after{
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: transparent;
  animation: portalPulse 2.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes portalFlow{
  0%   { background-position:   0% 50%; }
  100% { background-position: 100% 50%; }
}

@keyframes portalPulse{
  0%, 100% { box-shadow: 0 0 0 color-mix(in srgb, var(--on-dark) 0%, transparent); }
  50%      { box-shadow: 0 0 12px color-mix(in srgb, var(--on-dark) 6%, transparent) inset; }
}

/* Hover/active polish */
.btn-portal:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--on-dark) 8%, transparent);
}
.btn-portal:active{ transform: translateY(0); }

/* Mobile tuning */
@media (max-width:600px){
  .btn-portal{
    font-size: 14px;
    padding: 8px 20px;
  }
}



/* =======================
   RESPONSIVE BUTTONS
   ======================= */
@media (max-width: 600px) {
  .btn,
  .btn-hero,
  .btn-portal {
    font-size: 15px;
    padding: 8px 20px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--blue-100) 25%, transparent);
  }
}

/* =======================
    HEADER
    ======================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 999; /* was 50 – creștem ca să fie peste tot */
  background: color-mix(in srgb, var(--blue-100) 88%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--on-dark) 15%, transparent);
  backdrop-filter: blur(8px);
}
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}
.logo { height: 28px; }

/* Desktop Navigation */
.desktop-nav {
  display: flex;
  gap: 24px;
}
.desktop-nav a {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  /* Add smooth transition for hover effects */
  transition: color 0.3s ease, transform 0.3s ease;
}
.desktop-nav a:hover,
.desktop-nav a:focus { /* Add focus state for accessibility */
  color: var(--sky); /* Your vibrant sky blue */
  transform: translateY(-2px); /* Subtle lift effect */
  outline: none; /* Remove default focus outline if you have a custom one */
}

/* Hamburger */
#navToggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
}
#navToggle .bar {
  height: 3px;
  width: 100%;
  background: var(--on-dark);
  border-radius: 2px;
  transition: all 0.3s ease; /* For potential future animation when active */
}

/* Mobile menu */
.mobile-menu {
  display: none;             /* ascuns implicit */
  position: absolute;
  right: var(--pad);
  top: 100%;
  background: rgba(11, 6, 64, .97); /* --deep with alpha */
  border: 1px solid color-mix(in srgb, var(--on-dark) 20%, transparent);
  border-radius: 8px;
  margin-top: 6px;
  padding: 8px;
  min-width: 200px;
  box-shadow: var(--e2); /* Assuming --e2 is defined for shadow */
  flex-direction: column;
  z-index: 1000;             /* peste conținut */
}
.mobile-menu a {
  display: block;
  text-align: left;
  padding: 10px 12px;
  color: var(--text); /* Use var for consistency */
  text-decoration: none;
  font-weight: 600;
  border-radius: 6px;
  /* Add smooth transition for hover effects */
  transition: background-color 0.3s ease, color 0.3s ease;
}
.mobile-menu a:hover,
.mobile-menu a:focus { /* Add focus state for accessibility */
  background: rgba(91, 200, 229, 0.15); /* A subtle, translucent version of --sky */
  color: var(--sky); /* Highlight text with --sky */
  outline: none; /* Remove default focus outline */
}

/* când e deschisă din JS */
.mobile-menu.open { display: flex; }

/* Responsive nav */
@media (max-width: 768px) {
  .desktop-nav { display: none; }
  #navToggle { display: flex; margin-right: max(12px, env(safe-area-inset-right)); }
  .mobile-menu { right: max(12px, env(safe-area-inset-right)); }
  .site-header .brand { margin-left: max(12px, env(safe-area-inset-left)); }
}

/* decorurile nu blochează click-urile (dacă există) */
.site-bg, .site-grain { pointer-events: none; }

/* =======================
   DIVIDER PORTAL
   ======================= */
.divider-portal {
  height: 2px;
  margin: 0 auto;
  max-width: var(--max);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--on-dark) 30%, transparent), transparent);
  position: relative;
  opacity: 0.5;
}
.divider-portal::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--on-dark) 25%, transparent), transparent 70%);
  filter: blur(8px);
}

/* =======================
   LAYOUT HELPERS
   ======================= */
section.section { padding: 80px 0; text-align: center; }

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
}





/* ===== About Section ===== */
.about-section {
  background: linear-gradient(180deg, var(--blue-75) 0%, var(--blue-100) 100%);
  color: var(--on-dark);
  padding: 100px 0;
}

.about-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 48px;
  max-width: 1120px;
  margin: 0 auto;
}

/* ===== Dragoș photo & info ===== */
.about-left {
  flex: 1 1 280px;
  text-align: center;
}

.about-photo {
  width: 280px;
  max-width: 100%;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
  background: radial-gradient(circle, rgba(139,109,255,0.25), transparent 70%);
  margin-bottom: 16px;
  box-shadow: 0 0 25px rgba(139, 109, 255, 0.25);
}

.about-name {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 8px 0 4px;
}

.about-title {
  font-size: 0.95rem;
  color: var(--muted);
}

/* ===== Right content ===== */
.about-right {
  flex: 2 1 520px;
}

.about-right .section-title {
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

.about-right p {
  font-size: 1rem;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 1.2rem;
}

/* =======================
   ABOUT SECTION - SKILLS (Pill-style, mobile-friendly expand)
   ======================= */

/* skill pills */
/* =======================
   ABOUT SECTION - SKILLS
   ======================= */

/* Titlu secțiune */
.altst-skills-heading {
  font-size: 1.8rem;
  color: var(--sky);
  text-align: center;
  margin-top: 50px;
  margin-bottom: 30px;
  font-weight: 700;
}

/* Container pastile */
.altst-skills-container {
  display: flex;
  flex-wrap: wrap;           /* permite rânduri multiple */
  justify-content: center;   /* centrat pe desktop */
  gap: 10px;
  max-width: 1000px;
  margin: 0 auto 60px auto;
}

/* Pastilă (buton) */
.altst-skill-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--deep);
  color: var(--sky);
  border: 1px solid color-mix(in srgb, var(--on-dark) 10%, transparent);
  border-radius: 24px;
  padding: 6px 12px;         /* puțin mai mic, ca să nu taie prima literă */
  line-height: 1;
  font-weight: 500;
  font-size: 0.9rem;         /* un pic mai mic */
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* Icon în pastilă */
.altst-skill-icon {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
  color: var(--sky);
  transition: color .2s ease;
}

/* Textul extensibil (label) — ascuns implicit
   Folosim visibility: hidden ca să nu se vadă "o dungă" din prima literă */
.altst-skill-label {
  display: inline-block;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  visibility: hidden;        /* previne apariția unei fâșii din prima literă */
  white-space: nowrap;
  padding-left: 0;           /* evită golul când e închis */
  transition: max-width .28s ease, opacity .2s ease;
  will-change: max-width, opacity;
}

/* Stare deschisă (tap) — arată tot textul */
.altst-skill-pill[data-expanded="true"] .altst-skill-label {
  max-width: 26ch;           /* ajustează per texte (22–30ch) */
  opacity: 1;
  visibility: visible;
  padding-left: .2ch;        /* spațiu mic ca prima literă să nu pară lipită */
}

/* Focus accesibil (tastatură) */
.altst-skill-pill:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
}

@media (hover: hover) and (min-width: 641px){
  /* evităm reflow-ul altor pastile când una se mărește */
  .altst-skills-container { flex-wrap: nowrap; overflow: visible; }
  .altst-skill-pill { flex: 0 0 auto; }

  /* feedback vizual pe hover */
  .altst-skill-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--tangelo-100, #F54F17) 20%, transparent);
  }

  /* extindere la hover – dar prin atributul setat de JS, nu prin :hover */
  .altst-skill-pill[data-hover="true"] {
    background-color: var(--tangelo-100, #F54F17);
    color: var(--text);
  }
  .altst-skill-pill[data-hover="true"] .altst-skill-icon { color: var(--text); }
  .altst-skill-pill[data-hover="true"] .altst-skill-label {
    max-width: 26ch;
    opacity: 1;
    visibility: visible;
    padding-left: .2ch;
  }
}

/* ===== Mobil + stare activă (tap) ===== */
.altst-skill-pill[data-expanded="true"]{
  background-color: var(--tangelo-100, #F54F17);
  color: var(--text);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--tangelo-100, #F54F17) 25%, transparent);
}
.altst-skill-pill[data-expanded="true"] .altst-skill-icon { color: var(--text); }
.altst-skill-pill[data-expanded="true"] .altst-skill-label{
  max-width: 26ch;
  opacity: 1;
  visibility: visible;
  padding-left: .2ch;
}

/* Mobil: pastila deschisă coboară pe rând propriu (fără flicker) */
@media (max-width: 640px){
  .altst-skills-container{ flex-wrap: wrap; overflow-x: visible; }
  .altst-skill-pill[data-expanded="true"]{
    flex: 1 1 100%;
    width: 100%;
    justify-content: flex-start;
    max-width: 100%;
  }
}

/* -----------------------
   Responsive
   ----------------------- */
@media (max-width: 640px) {
  /* Permitem wrap și coborâm pastila deschisă pe rând propriu */
  .altst-skills-container {
    flex-wrap: wrap;
    overflow-x: visible;
    justify-content: flex-start;   /* aliniere naturală pe mobil */
    padding: 0 var(--pad, 16px);
    margin-bottom: 40px;
  }
  .altst-skill-pill[data-expanded="true"] {
    flex: 1 1 100%;
    width: 100%;
    justify-content: flex-start;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .altst-skills-heading {
    font-size: 1.6rem;
    margin-top: 30px;
    margin-bottom: 20px;
  }
}

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  .altst-skill-label { transition: none; }
  .altst-skill-pill { transition: none; }
}


/* Portal-style animated ring around Dragoș’s photo */
.about-photo-wrap {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  padding: 3px; /* ring thickness */
  background: conic-gradient(
    from 0deg,
    var(--sky),
    var(--blue),
    var(--indigo),
    var(--orange),
    var(--sky)
  );
  animation: photoRingFlow 6s linear infinite;
}

.about-photo {
  display: block;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--blue-100);
}

@keyframes photoRingFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* ===== Highlighter pen effect ===== */

:root{
  --indigo-light-1: var(--blue-75);
  --indigo-light-2: var(--blue-50);
}

.mark{
  position: relative;
  display: inline-block;
  color: inherit;             /* keep your text color */
  z-index: 0;
}

.mark::before{
  content: "";
  position: absolute;
  /* a “swipe” under the baseline */
  inset: 58% 0 0 0;           /* top/right/bottom/left */
  border-radius: 6px;
  z-index: -1;
  opacity: .9;
  transform: rotate(-1.2deg);

  /* Use color-mix for precise, lighter brand purple */
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--indigo), white 55%) 0%,
      color-mix(in srgb, var(--indigo), white 40%) 100%
    );
  /* Fallback when color-mix isn't supported */
  background:
    linear-gradient(90deg, var(--indigo-light-2) 0%, var(--indigo-light-1) 100%);
}

/* (Optional) thinner version */
.mark--thin::before{
  inset: 68% 0 0 0;
  border-radius: 4px;
  opacity: .85;
}

/* (Optional) thicker, hero-style swipe */
.mark--thick::before{
  inset: 45% -2px -2px -2px;
  border-radius: 8px;
  opacity: .92;
}

/* ===== Growth Audit Popup ===== */
.popup-wrapper{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11,6,64,.6);
  backdrop-filter: blur(8px);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

.popup-wrapper.active{
  opacity: 1;
  pointer-events: auto;
}

.popup-content h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--on-dark);
  margin-top: 0;
  margin-bottom: 12px;
  line-height: 1.3;
}

.popup-content p {
  color: var(--muted);
  margin: 8px 0;
  font-size: 0.95rem;
  line-height: 1.55;
}

.popup-list {
  text-align: left;
  color: var(--on-dark);
  margin: 16px 0 12px;
  padding-left: 20px;
  list-style: none;
  font-size: 0.9rem;
}
.popup-list li {
  margin-bottom: 6px;
  line-height: 1.45;
  background: linear-gradient(120deg, rgba(91,200,229,0.25), color-mix(in srgb, var(--blue-75) 25%, transparent));
  border-radius: 6px;
  padding: 4px 8px;
  display: inline-block;
}

.popup-note {
  font-size: 0.9rem;
  color: var(--sky);
  font-style: italic;
  margin-top: 6px;
}


.popup-close{
  position: absolute;
  top: 16px;
  right: 22px;
  background: none;
  border: none;
  font-size: 1.8rem;
  color: var(--on-dark);
  cursor: pointer;
  transition: opacity .2s ease;
}
.popup-close:hover{ opacity: .7; }

@keyframes popupIn{
  from{ transform: translateY(20px); opacity:0; }
  to{ transform: translateY(0); opacity:1; }
}


/* Popup list with Font Awesome icons */
.popup-list{
  text-align:left;
  color:var(--on-dark);
  margin:16px 0 12px;
  padding:0;
  list-style:none;
}

.popup-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:10px;
  line-height:1.45;
  /* subtle brand highlighter behind each line */
  background: linear-gradient(120deg, rgba(91,200,229,0.18), color-mix(in srgb, var(--blue-75) 18%, transparent));
  border-radius:8px;
  padding:8px 10px;
}

.popup-list i{
  font-size:18px;
  line-height:1;
  margin-top:2px; /* optical align with first text line */
  color:var(--sky-75);  /* brand cyan-blue */
  flex:0 0 auto;
}

.popup-list span{
  flex:1 1 auto;
}
/* Mobile responsiveness */
@media (max-width: 768px) {
  .about-container {
    flex-direction: column;
    text-align: center
  }
}

/* =======================
   PAIN POINT — 70/30, equal heights, no overlap
   ======================= */
.pain-section { padding: 96px 0; }

/* Title full width */
#pain-title{
  margin: 0 0 18px;
  text-align: center;
}

/* Split: 70% / 30% — both columns same height */
.pain-split{
  display: grid;
  grid-template-columns: 7fr 3fr;     /* 70 / 30 */
  column-gap: 36px;
  row-gap: 16px;
  align-items: stretch;               /* makes the two columns equal-height */
}
.pain-left, .pain-right{ min-width: 0; }

/* LEFT — 2×2 grid, stable rows */
.pain-left{ isolation: isolate; }
.pain-left .pain-list{
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  grid-auto-rows: minmax(118px, auto);  /* consistent row height */
  align-content: start;
  gap: 18px;
  margin: 0; padding: 0; list-style: none;
}

.pain-item{
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 12px;
  background: color-mix(in srgb, var(--on-dark) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-dark) 12%, transparent);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--e1);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pain-item:hover{ transform: translateY(-2px); box-shadow: var(--e2); border-color: color-mix(in srgb, var(--on-dark) 18%, transparent); }
.pain-icon{
  display: inline-grid; place-items: center;
  width: 48px; height: 48px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--on-dark) 18%, transparent);
  background: linear-gradient(135deg,color-mix(in srgb, var(--orange) 28%, transparent),color-mix(in srgb, var(--blue-100) 20%, transparent));
}
.pain-icon i{ color:var(--on-dark); font-size:18px; }
.pain-item p{ margin:0; color:var(--text); line-height:1.55; font-size:1rem; }
.pain-item p strong{ color: var(--accent-warm, var(--amber-75)); font-weight:700; }

/* RIGHT — card equals column height */
.pain-right{
  display: grid;                      /* allow stretching with align-items:stretch */
}
.pain-right-box{
  height: 100%;                       /* match left column height */
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  justify-content: center;            /* center content inside */
  text-align: left;

  background: color-mix(in srgb, var(--on-dark) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-dark) 12%, transparent);
  border-radius: 16px;
  padding: 22px 20px;
  box-shadow: var(--e1);
}
.pain-right-text{
  margin: 0 0 10px;
  color: var(--text);
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.55;
}

/* CTA button compact */
.pain-cta{
  align-self: flex-start;
  width: fit-content;
  padding: 10px 18px;
  margin-top: 12px;
}
/* === PAIN right: centered block with tighter spacing === */

/* make both columns equal height so we can center inside the right one */
.pain-split{
  align-items: stretch;              /* equal column heights */
}

/* center the text + button block and tighten gaps */
.pain-right{
  display: flex;
  flex-direction: column;
  align-items: center;               /* center horizontally */
  justify-content: center;           /* center vertically */
  gap: 6px;                          /* tighter than before */
  text-align: center;
}

.pain-right-text{
  margin: 0;                         /* remove extra vertical space */
  line-height: 1.45;                 /* a bit tighter */
}

.pain-cta{
  align-self: center;                /* keep button centered */
  margin-top: 4px;                   /* tiny breathing room */
  padding: 10px 18px;                /* compact width (hugs text) */
}

/* on mobile we stack, so no need to keep equal-height columns */
@media (max-width: 980px){
  .pain-split{ align-items: start; }
}

/* Mobile */
@media (max-width: 980px){
  #pain-title { text-align: center; }
  .pain-split { grid-template-columns: 1fr; align-items: start; }
  .pain-left .pain-list { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .pain-right-box { height: auto; text-align: center; margin: 0 auto; }
  .pain-cta { align-self: center; }
}


/* =======================
   CUM FUNCȚIONEAZĂ
   ======================= */
.altst-method-section {
  padding: 80px 0;
  background: linear-gradient(180deg, var(--deep) 0%, var(--indigo) 100%);
  color: var(--text);
  text-align: center;
}

.altst-section-heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--sky);
  margin-bottom: 25px;
  padding: 3px;
}

.altst-lead-text {
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 900px;
  margin: 0 auto 50px auto;
  color: var(--muted);
  padding: 3px;
}

.altst-method-name {
  font-weight: 600;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--sky);
  text-underline-offset: 4px;
  transition: text-decoration-color 0.3s ease;
}

.altst-method-name:hover {
  text-decoration-color: var(--orange);
}


/* ===== LADDER (solid red rail; no gaps; number watermark) ===== */
.altst-method-section .altst-section-container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);               /* mobile side padding for the section */
}

.method-ladder{
  position: relative;
  isolation: isolate;
  max-width: 1120px;
  margin: 28px auto 6px;
}

/* Grid */
.steps{
  --rail: var(--orange);
  --dot: 12px;
  --lineY: 24px;                        /* top line inside card (desktop) */
  --gapX: clamp(12px, 1.8vw, 20px);
  --overlap: 3px;                       /* tiny extension so halves meet perfectly */
  display: grid;
  grid-template-columns: repeat(5, minmax(160px,1fr));
  gap: var(--gapX);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Card */
.step{
  position: relative;
  background: color-mix(in srgb, var(--on-dark) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-dark) 14%, transparent);
  border-radius: 14px;
  padding: 44px 16px 16px;              /* room for line + number */
  text-align: center;
  color: var(--text);
  box-shadow: var(--e1);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.step:hover{ transform: translateY(-2px); box-shadow: var(--e2); border-color: color-mix(in srgb, var(--on-dark) 22%, transparent); }

/* CONTINUOUS RAIL (split per-card; halves overlap a few px) */
.step::before,
.step::after{
  content:"";
  position:absolute;
  top: var(--lineY);
  height: 2px;                          /* slimmer */
  background: var(--rail);
  border-radius: 999px;
  z-index: 1;                           /* under bullet, above bg */
}

/* center → left (+ half gap + overlap) */
.step::before{
  left: 50%;
  width: calc(50% + var(--gapX)/2 + var(--overlap));
  transform: translateX(-100%);
}

/* center → right (+ half gap + overlap) */
.step::after{
  left: 50%;
  width: calc(50% + var(--gapX)/2 + var(--overlap));
}

/* no rail before the 1st bullet / after the 5th */
.steps .step:first-child::before{ display: none; }
.steps .step:last-child::after { display: none;  }

/* Bullet sits exactly on the rail center */
.bullet{
  position: absolute;
  left: 50%;
  top: var(--lineY);
  transform: translate(-50%, -50%);
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--rail);              /* solid red */
  z-index: 2;
}

/* Watermark number between bg and text */
.step-body{ position: relative; z-index: 1; }
.step-body::before{
  content: attr(data-step);
  position: absolute;
  top: -4px;                            /* slightly above text */
  left: 50%;
  transform: translateX(-50%);
  font-weight: 900;
  font-size: clamp(42px, 5vw, 64px);
  letter-spacing: -0.02em;
  color: transparent;                   /* outline-only look */
  -webkit-text-stroke: 2px color-mix(in srgb, var(--on-dark) 10%, transparent);
  opacity: .95;
  z-index: 0;
  pointer-events: none;
}

/* Text below line */
.step h3{
  margin: 6px 0 6px;
  font-weight: 800;
  color: var(--on-dark);
  font-size: clamp(15px, 1.2vw, 17px);
}
.step p{
  margin: 0;
  color: var(--muted);
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.45;
}

/* ===== Mobile: vertical rail INSIDE cards (left), continuous with no gaps ===== */
@media (max-width: 900px){
  .steps{
    grid-template-columns: 1fr;
    --gapX: 14px;
    --overlap: 4px;                     /* a tad more to kill rounding gaps */
  }

  .step{
    text-align: left;
    padding: 18px 16px 18px 68px;       /* space for rail + bullet on the left */
  }

  /* convert halves to vertical halves around center */
  .step::before,
  .step::after{
    left: 28px;                         /* inside the card, left side */
    width: 2px;
    border-radius: 999px;
  }
  .step::before{
    top: 50%;
    height: calc(50% + var(--gapX)/2 + var(--overlap));
    transform: translateY(-100%);       /* up from center */
  }
  .step::after{
    top: 50%;
    height: calc(50% + var(--gapX)/2 + var(--overlap));
  }
  .steps .step:first-child::before{ display: none; }
  .steps .step:last-child::after { display: none;  }

  .bullet{
    left: 28px;                         /* centered on the rail */
    top: 50%;
    transform: translate(-50%, -50%);
  }

  /* watermark number moves left a bit so it peeks behind title */
  .step-body::before{
    left: 56px;
    transform: none;
    font-size: clamp(34px, 8vw, 48px);
  }

  /* extra side padding for the whole section on small screens */
  .altst-method-section .altst-section-container{
    padding-left: 18px;
    padding-right: 18px;
  }
}
/* secțiunea are padding pe mobil (poți lăsa cum e deja la tine) */
.method-ladder{ position: relative; isolation: isolate; max-width: 1120px; margin: 28px auto 6px; }

.steps{
  --rail: var(--orange);
  --dot: 24px;                       /* mai vizibil, pentru cifră */
  --lineY: 24px;
  --gapX: clamp(12px, 1.8vw, 20px);
  --overlap: 3px;                    /* elimină orice micro-gol */
  display: grid;
  grid-template-columns: repeat(5, minmax(160px,1fr));
  gap: var(--gapX);
  list-style: none;
  margin: 0; padding: 0;
}

/* Cardul */
.step{
  position: relative;
  background: color-mix(in srgb, var(--on-dark) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-dark) 14%, transparent);
  border-radius: 14px;
  padding: 46px 18px 16px;           /* puțin mai mult top pentru linie + badge */
  text-align: center;
  color: var(--text);
  box-shadow: var(--e1);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.step:hover{ transform: translateY(-2px); box-shadow: var(--e2); border-color: color-mix(in srgb, var(--on-dark) 22%, transparent); }

/* Linia continuă (jumătăți care se suprapun un pic) */
.step::before, .step::after{
  content:"";
  position:absolute;
  top: var(--lineY);
  height: 2px;
  background: var(--rail);
  border-radius: 999px;
  z-index: 1;
}
.step::before{ left:50%; width:calc(50% + var(--gapX)/2 + var(--overlap)); transform:translateX(-100%); }
.step::after { left:50%; width:calc(50% + var(--gapX)/2 + var(--overlap)); }
.steps .step:first-child::before{ display:none; }
.steps .step:last-child::after { display:none;  }

/* BADGE: cifră în disc roșu, centrat exact pe linie */
.bullet{
  position: absolute;
  left: 50%;
  top: var(--lineY);
  transform: translate(-50%, -50%);
  width: var(--dot); height: var(--dot);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;

  background: var(--orange);
  color: var(--on-dark);                    /* contrast bun pe roșu */
  font-weight: 900;
  font-size: 12px;                   /* cifră clară */
  line-height: 1;
  letter-spacing: .2px;
  font-variant-numeric: tabular-nums;
  
  z-index: 2;
}

/* Titluri & text */
.step h3{ margin: 8px 0 6px; font-weight: 800; color:var(--on-dark); font-size: clamp(15px, 1.2vw, 17px); }
.step p { margin: 0; color: var(--muted); font-size: clamp(13px, 1.05vw, 15px); line-height: 1.45; }

/* ===== MOBIL: timeline vertical în interiorul cardului ===== */
@media (max-width: 900px){
  .steps{ grid-template-columns:1fr; --gapX:14px; --overlap:4px; gap: var(--gapX); }

  .step{
    text-align: left;
    padding: 18px 18px 18px 74px;  /* loc pt rail + badge în stânga */
  }

  /* rail devine vertical, fără întreruperi */
  .step::before, .step::after{ left: 30px; width: 2px; border-radius: 999px; }
  .step::before{ top:50%; height:calc(50% + var(--gapX)/2 + var(--overlap)); transform:translateY(-100%); }
  .step::after { top:50%; height:calc(50% + var(--gapX)/2 + var(--overlap)); }
  .steps .step:first-child::before{ display:none; }
  .steps .step:last-child::after { display:none;  }

  .bullet{
    left: 30px; top:50%;
    transform: translate(-50%, -50%);
    width: 22px; height: 22px;     /* ușor mai mic pe mobil */
    font-size: 11px;
  }
}


/* =======================
   SERVICII
   ======================= */
.services-section {
  background: linear-gradient(180deg, var(--blue-100), var(--blue-75));
  text-align: center;
  padding: 120px 0;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 48px;
}
.service-card {
  background: color-mix(in srgb, var(--on-dark) 8%, transparent);
  border-radius: 16px;
  padding: 32px 24px;
  box-shadow: var(--e1);
}
.service-card h3 {
  color: var(--sky);
  margin-bottom: 12px;
}
.service-card p {
  color: var(--muted);
  min-height: 90px;
}
.progress-bar {
  height: 6px;
  background: color-mix(in srgb, var(--on-dark) 10%, transparent);
  border-radius: 3px;
  margin: 16px 0 24px;
  overflow: hidden;
}
.progress-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--orange), var(--sky));
}
/* =======================
   TESTIMONIALE + CAROUSEL
   ======================= */
/* ===== DOVADĂ (cases + testimonials) ===== */
.proof-section { background: linear-gradient(180deg,var(--blue-100) 0%,var(--blue-100) 100%); padding: 120px 0; text-align: center; }
.u-accent{color:var(--accent-warm);font-weight:600}.u-sky{color:var(--sky);font-weight:600}.u-orange{color:var(--orange);font-weight:600}.u-indigo{color:var(--indigo);font-weight:700}
.lead-accent{max-width:70ch;margin:10px auto 32px}

/* Cards */
.cases-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin:0 auto 32px;text-align:left}
.case-card{position:relative;background:color-mix(in srgb, var(--on-dark) 6%, transparent);border:1px solid color-mix(in srgb, var(--on-dark) 12%, transparent);border-radius:14px;padding:16px 16px 14px;box-shadow:var(--e1);transition:transform .2s ease,box-shadow .2s ease}
.case-card:hover{transform:translateY(-2px);box-shadow:var(--e2)}
.case-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;border-radius:14px 14px 0 0;opacity:.9}
.is-carrefour::before{background:linear-gradient(90deg,var(--sky),var(--orange))}   
.is-envisia::before{background:linear-gradient(90deg,var(--sky),var(--indigo))}
.is-otp::before{background: linear-gradient(90deg, var(--aqua-100), var(--sky))}              

.case-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.case-logo{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:10px;background:color-mix(in srgb, var(--on-dark) 6%, transparent);border:1px solid color-mix(in srgb, var(--on-dark) 12%, transparent)}
.case-logo img{max-width:32px;max-height:24px;display:block;filter:brightness(1)} /* logo Envisia e deja alb, restul color */

.case-card h3{margin:0;font-size:1.05rem;color:var(--on-dark)}
.case-story{color:var(--muted);margin:6px 0 10px;font-size:.98rem}

.case-metrics{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 10px}
.case-metrics li{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;color:var(--text);background:color-mix(in srgb, var(--on-dark) 8%, transparent);border:1px solid color-mix(in srgb, var(--on-dark) 12%, transparent);border-radius:999px;padding:6px 10px}
.case-metrics i{color:var(--sky)}
.case-note{font-size:.85rem;color:var(--muted);margin:0}

/* ===== Carousel (clickable, z-index corect) ===== */
.t-carousel{position:relative;max-width:860px;margin:40px auto 0;padding:12px 52px}
.t-slides{position:relative;z-index:1;min-height:220px}
.t-slide{position:absolute;inset:0;z-index:1;opacity:0;transform:translateY(8px) scale(.99);transition:opacity .5s ease,transform .5s ease;display:grid;place-items:center;gap:14px;padding:28px 22px;border-radius:16px;background:color-mix(in srgb, var(--on-dark) 6%, transparent);border:1px solid color-mix(in srgb, var(--on-dark) 12%, transparent);box-shadow:var(--e1)}
.t-slide.active{opacity:1;transform:translateY(0) scale(1);position:relative}
.t-slide i.fa-quote-left{font-size:24px;color:var(--accent-warm);opacity:.9}
.t-slide blockquote{margin:0;font-size:clamp(18px,2.2vw,22px);line-height:1.5;color:var(--on-dark);max-width:60ch}
.t-slide figcaption{display:flex;gap:10px;align-items:baseline;font-size:.95rem}
.t-author{color:var(--accent-warm);font-weight:700}.t-company{color:var(--muted);font-weight:600}
.t-nav{position:absolute;z-index:5;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:9999px;border:1px solid color-mix(in srgb, var(--on-dark) 18%, transparent);background:color-mix(in srgb, var(--on-dark) 6%, transparent);display:grid;place-items:center;cursor:pointer;transition:transform .2s ease,background .2s ease,border-color .2s ease}
.t-nav:hover{transform:translateY(-50%) scale(1.05);background:color-mix(in srgb, var(--on-dark) 10%, transparent)}
.t-prev{left:0}.t-next{right:0}.t-nav i{color:var(--sky);font-size:16px}
.t-dots{position:relative;z-index:5;display:flex;justify-content:center;gap:8px;margin-top:18px}
.t-dot{width:10px;height:10px;border-radius:50%;background:color-mix(in srgb, var(--on-dark) 28%, transparent);border:0;cursor:pointer;transition:background .25s ease,transform .25s ease}
.t-dot.active{background:var(--sky);transform:scale(1.15)}

@media (max-width:680px){
  .t-carousel{padding:8px 12px}
  .t-nav{display:none}
  .t-slide{padding:22px 16px}
}


/* =======================
   CONTACT — final
   ======================= */
:root {
  --accent-warm: var(--amber-75); /* same warm yellow as hero */
}

.contact-section {
  background: var(--blue-100);
  padding: 120px 0;
}

/* Two-column layout */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: start;
}

/* --- Left side --- */
.contact-left h2 {
  margin-top: 0;
  line-height: 1.2;
}

.contact-left .lead {
  margin: 16px 0 24px;
  max-width: 60ch;
  font-size: 1.1rem;
  color: var(--text);
}

/* Highlighted phrase */
.highlight {
  color: var(--accent-warm);
  font-weight: 600;
}

/* --- Right side --- */
.contact-right { text-align: left; }

.contact-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  font-size: 1.1rem;
  line-height: 1.45;
}

.contact-info p {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.contact-info i {
  color: var(--sky);
  font-size: 1.25rem;
  width: 24px;
  text-align: center;
  flex: 0 0 24px; /* keeps perfect left alignment */
}

/* Unified color for links + address (email, LinkedIn, address) */
#contact .contact-info a,
#contact .contact-info a:visited,
#contact .contact-info a:active,
#contact .contact-info .contact-text {
  color: var(--accent-warm);
  text-decoration: none;
  font-weight: 600;
  transition: color .2s ease;
}

#contact .contact-info a:hover {
  color: var(--amber-50);
}

/* --- Responsive --- */
/* Mobile: stack columns + add space under CTA */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  #contact .contact-info { margin-top: 40px; }
}

/* Desktop/wide: slightly smaller text for elegance */
@media (min-width: 1200px) {
  #contact .contact-left h2 {
    font-size: clamp(28px, 2.8vw, 42px);
    line-height: 1.15;
  }
  .contact-left .lead { font-size: 1rem; }
  .contact-info { font-size: 1rem; }
}

/* =======================
   FOOTER (clean)
   ======================= */
.site-footer {
  background: linear-gradient(180deg, var(--blue-100) 0%, var(--blue-100) 70%);
  border-top: 1px solid color-mix(in srgb, var(--on-dark) 12%, transparent);
  padding: 64px 0 28px;
  color: var(--text);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr; /* brand wider */
  gap: 32px;
  align-items: start;
}

.footer-logo { height: 28px; margin-bottom: 12px; opacity: .95; }

.footer-copy {
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.65;
  margin: 0 0 10px;
}

/* warm/brand accents in copy */
.u-accent { color: var(--sky); font-weight: 600; }

/* Legal + contact */
.footer-legal h3,
.footer-contact-title {
  font-size: 1rem;
  letter-spacing: .3px;
  margin: 8px 0 10px;
  color: var(--accent-warm, var(--amber-75));
}

.legal-list { list-style: none; padding: 0; margin: 0 0 14px; }
.legal-list li { margin: 8px 0; }
.legal-list a {
  color: var(--text);
  text-decoration: none;
  transition: color .2s ease;
}
.legal-list a:hover { color: var(--accent-warm, var(--amber-75)); }

/* Icons-only contact (no underline ever) */
.footer-icons { display: flex; gap: 12px; margin-top: 6px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 9999px;
  background: color-mix(in srgb, var(--on-dark) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-dark) 12%, transparent);
  box-shadow: var(--e1);
  text-decoration: none !important;           /* <-- no underline */
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.icon-btn i { font-size: 18px; color: var(--sky); text-decoration: none; }
.icon-btn:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--on-dark) 9%, transparent);
  border-color: color-mix(in srgb, var(--on-dark) 20%, transparent);
}

/* Bottom line */
.footer-bottom {
  border-top: 1px dashed color-mix(in srgb, var(--on-dark) 12%, transparent);
  margin-top: 28px; padding-top: 16px; text-align: center;
}
.footer-rights { color: var(--muted); font-size: 0.9rem; margin: 0; }

/* Responsive */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-copy { font-size: 0.95rem; }
}


/* SECTION BACKGROUND */
:root{
  /* size & position of the orange glow */
  --sec-accent-size: 800px 520px;
  --sec-accent-pos: 98% 96%;
  --sec-accent-alpha: 0.20;             

  /* fallback accent color (no color-mix support) */
  --sec-accent-color: rgba(245,79,23,var(--sec-accent-alpha));
}

/* Prefer modern color mixing when available */
@supports (background: color-mix(in srgb, red, transparent)) {
  :root{
    /* ~12% of brand orange mixed with transparent = gentle hint */
    --sec-accent-color: color-mix(in srgb, var(--orange) 22%, transparent);
  }
}

/* Hero: add a subtle overlay on top of your bg image */
.hero{ position: relative; isolation: isolate; }
.hero::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  /* tiny glow in bottom-right only */
  background:
    radial-gradient(var(--sec-accent-size) at var(--sec-accent-pos),
      var(--sec-accent-color), transparent 60%);
  z-index:-1; /* stays behind content (your ::after fade still works) */
}

/* All other sections: blue base + tiny orange hint in bottom-right */
.pain-section,
.cum-section,
.method-section,
.services-section,
.proof-section,
.testimonials-section,
.contact-section,
.about-section,
.site-footer{
  background:
    radial-gradient(var(--sec-accent-size) at var(--sec-accent-pos),
      var(--sec-accent-color), transparent 60%),
    /* keep your blue/indigo foundation (80% visual weight) */
        linear-gradient(180deg, #26007B 0%, var(--deep) 100%);

}

/* Responsiveness: slightly smaller, lower accent on mobile */
@media (max-width: 680px){
  :root{
    --sec-accent-size: 560px 360px;
    --sec-accent-pos: 98% 92%;
    --sec-accent-alpha: 0.18; /* a touch stronger on small screens if desired */
  }
}
/* ===== Portal Expand (add-on) ===== */
/* Completely namespaced; no global selectors, no resets */
.portal-expand {
  /* optional width limit; remove if you want it fluid */
  max-width: 720px;
  margin: 16px auto;
}

/* remove the default marker; keep keyboard focus styles accessible */
.portal-expand__toggle {
  list-style: none;
  position: relative;
}
.portal-expand__toggle::-webkit-details-marker { display: none; }

/* When closed, it looks/behaves like your .btn-portal (already on the element) */
/* Open state: keep the same pill but give it an “active” feel */
.portal-expand[open] .portal-expand__toggle {
  /* subtle active highlight using your palette */
  box-shadow: 0 8px 22px color-mix(in srgb, var(--blue-100) 28%, transparent);
}
.portal-expand[open] .portal-expand__toggle::after {
  content: "–";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  line-height: 1;
  opacity: .9;
  color: var(--sky);
}
.portal-expand:not([open]) .portal-expand__toggle::after {
  content: "+";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  line-height: 1;
  opacity: .9;
  color: var(--sky);
}

/* The panel: brand-aligned card */
.portal-expand__panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height .45s cubic-bezier(.65,0,.076,1), 
              opacity .35s ease, 
              transform .35s ease;

  margin-top: 10px;
  padding: 0 16px;

  background: color-mix(in srgb, var(--on-dark) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-dark) 12%, transparent);
  border-radius: var(--radius, 16px);
  box-shadow: var(--e1, 0 6px 22px color-mix(in srgb, var(--blue-100) 28%, transparent));
  color: var(--text);
}

/* Open state animation */
.portal-expand[open] .portal-expand__panel {
  max-height: 640px; /* big enough for typical content; adjust as needed */
  opacity: 1;
  transform: translateY(0);
  padding: 16px 16px 18px;
}

/* Panel inner typography */
.portal-expand__title {
  margin: 0 0 8px;
  font-size: 1.15rem;
  color: var(--on-dark);
}

/* Optional: focus ring for accessibility (matches your theme) */
.portal-expand__toggle:focus-visible {
  outline: 3px solid rgba(91,200,229,.6); /* --sky glow */
  outline-offset: 4px;
  border-radius: 9999px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .portal-expand__panel {
    transition: none;
  }
}

/* === Popup card styling (subtle rounded box) === */
.popup-card {
  background: color-mix(in srgb, var(--blue-100) 92%, transparent);   
  border: 1px solid color-mix(in srgb, var(--on-dark) 12%, transparent);
  border-radius: 20px;
  box-shadow: 0 8px 28px color-mix(in srgb, var(--blue-100) 45%, transparent);
  max-width: 520px;
  width: 90%;
  padding: 32px 24px;
  position: relative;
  animation: popupIn 0.35s ease;
}

/* Center it in the screen, with padding from edges */
.popup-wrapper {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--blue-100) 60%, transparent);
  backdrop-filter: blur(8px);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  padding: 24px; /* adds breathing room around card on mobile */
}

.popup-wrapper.active {
  opacity: 1;
  pointer-events: auto;
}

/* Adjust content */
.popup-content {
  text-align: left;
  color: var(--text);
}

.popup-content h3 {
  text-align: center;
  margin-bottom: 18px;
}

.popup-list {
  margin-top: 12px;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .popup-card {
    padding: 24px 18px;
    border-radius: 16px;
  }
}
/* === GLOBAL CENTERED TEXT (safe baseline) === */
/* Applies to all main sections and container blocks, 
   but doesn't interfere with grid or flex layouts */

section,
.container,
[class*="section"],
[class*="grid"] > * {
  text-align: center;
}

/* Exceptions: keep structured areas left-aligned */
.pain-split *,
.services-grid *,
.about-container *,
.contact-grid *,
.footer-grid *,
.cases-grid * {
  text-align: left;
}
.footer-contact p {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
  color: var(--text);
}

.footer-contact i {
  color: var(--sky);
  width: 22px;
  text-align: center;
}

.footer-contact a {
  color: var(--accent-warm);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-contact a:hover {
  color: var(--amber-50);
}
/* === Footer with middle spacer === */
.footer-grid--wide {
  display: grid;
  grid-template-columns: 1.4fr 0.4fr 1fr; /* narrower left, blank middle, normal right */
  gap: 32px;
  align-items: start;
}

/* Blank middle column */
.footer-spacer {
  /* purely visual breathing space */
  content: "";
}

/* Mobile: stack neatly */
@media (max-width: 900px) {
  .footer-grid--wide {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .footer-spacer {
    display: none;
  }
}
/* === Footer Contact Icon Animations === */

/* Subtle glow & hover motion */
.footer-contact a,
.footer-icons .icon-btn {
  position: relative;
  transition: transform 0.25s ease, color 0.25s ease, box-shadow 0.3s ease;
}

.footer-contact a:hover i,
.footer-icons .icon-btn:hover i {
  color: var(--sky);
}

.footer-contact a:hover,
.footer-icons .icon-btn:hover {
  transform: translateY(-3px);
  color: var(--sky);
  text-shadow: 0 0 8px rgba(91, 200, 229, 0.6);
}

/* Pulse glow for LinkedIn */
.footer-contact a[href*="linkedin"]:hover i,
.footer-icons a[href*="linkedin"]:hover i {
  animation: pulseSky 1.6s ease-in-out infinite;
}

/* Wobble for Email (envelope) */
.footer-contact a[href^="mailto"]:hover i,
.footer-icons a[href^="mailto"]:hover i {
  animation: wobbleMail 0.9s ease-in-out;
}

/* Keyframes */
@keyframes pulseSky {
  0%, 100% { text-shadow: 0 0 6px rgba(91,200,229,0.3); transform: scale(1); }
  50% { text-shadow: 0 0 16px rgba(91,200,229,0.8); transform: scale(1.15); }
}

@keyframes wobbleMail {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg); }
  50% { transform: rotate(6deg); }
  75% { transform: rotate(-4deg); }
}
/* ===== Full-screen sections (don’t alter your internal grids) ===== */
:root { --header-h: 64px; } /* fallback; JS below sets exact value */

/* Make key sections fill the screen (minus the sticky header) */
.hero,
.pain-section,
.services-section,
.proof-section,
.contact-section,
.about-section,
.altst-method-section,
.section,                   /* your generic .section */
.site-footer {              /* include footer/contact if you want it to snap too */
  min-height: calc(100vh - var(--header-h));
}

/* Smooth one-at-a-time snapping */
body.snap {
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;  /* prevents overscroll chaining */
}

/* Every full-height section snaps to the top edge */
.hero,
.pain-section,
.services-section,
.proof-section,
.contact-section,
.about-section,
.altst-method-section,
.section,
.site-footer {
  scroll-snap-align: start;
  scroll-snap-stop: always; /* makes the browser “commit” to the section */
}

/* Anchor links don’t hide under the sticky header */
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

/* If an inner scroller exists (carousels, code blocks), disable snap inside */
.snap-ignore { scroll-snap-align: none !important; }

/* === EXCLUDE FOOTER FROM FULL-SCREEN & SNAP === */
.site-footer {
  min-height: auto !important;
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}

/* === CTA: keep it within one screen and centered, without oversize === */
#CTA {
  /* include padding inside the height calc so it never exceeds viewport */
  box-sizing: border-box;
  min-height: calc(100svh - var(--header-h)); /* stays one screen tall */
  padding: clamp(48px, 6vw, 88px) 0;          /* saner vertical padding */
  scroll-snap-align: start;                    /* still snaps like others */
}

#CTA .contact-centered {
  max-width: 760px;
  margin: 0 auto;
}

/* === Pain: 2×2 cards on top, CTA block under (centered) === */
.pain-split{
  display: flex !important;        /* override old grid */
  flex-direction: column;          /* left first, then right under */
  align-items: center;             /* center the whole column */
  gap: 40px;
}

/* Keep the cards as 2×2, centered as a block */
.pain-left{ width: 100%; }
.pain-left .pain-list{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 18px;
  max-width: 920px;                /* keeps a nice line-length */
  margin: 0 auto;                  /* center the grid block */
}

/* CTA block centered under the grid */
.pain-right{
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Your global 'exceptions' set .pain-split * { text-align:left }.
   Override ONLY for the CTA area so it's centered. */
.pain-section .pain-right, 
.pain-section .pain-right *{
  text-align: center !important;
}

/* Mobile: gracefully collapse cards to 1 column */
@media (max-width: 680px){
  .pain-left .pain-list{ grid-template-columns: 1fr; }
}
/* === Testimonials (Proof Section) — compact 3-column layout fits one screen === */
@media (min-width: 1100px) {
  .proof-section {
    box-sizing: border-box;
    min-height: calc(100svh - var(--header-h));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 0 64px;
  }

  .proof-section .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 1180px; /* allow 3 cards side-by-side comfortably */
  }

  /* === Title and lead tighter === */
  #proof-title {
    margin-bottom: 6px;
    font-size: clamp(28px, 2.2vw, 38px);
  }
  .lead.lead-accent {
    font-size: clamp(15px, 1.1vw, 18px);
    line-height: 1.45;
    max-width: 70ch;
    margin-bottom: 16px;
  }

  /* === Case cards remain 3-column grid === */
  .cases-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr)); /* 3 columns */
    gap: 18px; /* reduced gap */
    margin: 0 auto 14px;
    max-width: 100%;
  }

  .case-card {
    padding: 16px 14px 12px;
    border-radius: 12px;
  }
  .case-card h3 {
    font-size: 1rem;
  }
  .case-story {
    font-size: 0.9rem;
    line-height: 1.45;
    margin: 6px 0 8px;
  }
  .case-metrics {
    gap: 6px;
    margin-bottom: 6px;
  }
  .case-metrics li {
    font-size: 0.85rem;
    padding: 5px 9px;
  }
  .case-note {
    font-size: 0.8rem;
  }

  /* === Carousel: narrower and shorter === */
  .t-carousel {
    max-width: 720px;   /* narrower look */
    padding: 8px 24px;
    margin-top: 10px;
  }
  .t-slides {
    min-height: 160px;
  }
  .t-slide {
    padding: 18px 16px;
    gap: 10px;
  }
  .t-slide blockquote {
    font-size: clamp(16px, 1.2vw, 20px);
    line-height: 1.4;
  }
  .t-slide figcaption {
    font-size: 0.9rem;
  }
  .t-slide i.fa-quote-left {
    font-size: 20px;
  }

  /* Dots and arrows tighter */
  .t-dots { margin-top: 12px; gap: 6px; }
  .t-nav { width: 36px; height: 36px; }
}

/* Smaller desktops (900–1099px): slightly reduce card count to 2 columns for balance */
@media (min-width: 900px) and (max-width: 1099px) {
  .cases-grid {
    grid-template-columns: repeat(2, minmax(280px, 1fr));
  }
}
/* === Privacy Policy Page  === */
.page--policy {
  background: 
    radial-gradient(var(--sec-accent-size) at var(--sec-accent-pos),
      var(--sec-accent-color), transparent 60%),
    linear-gradient(180deg, var(--indigo) 0%, var(--deep) 100%);
  color: var(--text);
  line-height: 1.65;
  
}
.page--policy .container,
.page--policy section,
.page--policy [class*="section"],
.page--policy [class*="grid"] > * {
  text-align: left !important;
}


/* Title + intro */
.page--policy .page-title {
  font-weight: 900;
  font-size: clamp(32px, 5vw, 56px);
  color: var(--sky);
  margin-bottom: 0.8rem;
  text-align: left;
}

.page--policy .lead {
  color: var(--muted);
  font-size: 1.05rem;
  text-align: left;
  max-width: 700px;
  margin: 0 auto 2rem;
}

/* Table of Contents */
.page--policy .toc {
  background: color-mix(in srgb, var(--on-dark) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-dark) 12%, transparent);
  border-radius: 16px;
  box-shadow: var(--e1);
  max-width: 620px;
  margin: 0 auto 3rem;
  padding: 1.4rem 1.8rem;
  text-align: left;
}

.page--policy .toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}

.page--policy .toc li {
  counter-increment: toc;
  margin: 0.4rem 0;
  color: var(--text);
  font-weight: 500;
}

.page--policy .toc li::before {
  content: counter(toc) ".";
  color: var(--amber-75);
  margin-right: 0.4rem;
  font-weight: 700;
}

.page--policy .toc a {
  color: var(--sky);
  text-decoration: none;
  transition: color 0.2s ease;
}

.page--policy .toc a:hover {
  color: var(--amber-75);
}

/* Sections */
.section--content {
  background: color-mix(in srgb, var(--on-dark) 5%, transparent);
  border-radius: 20px;
  box-shadow: var(--e1);
  padding: 2.5rem 1.8rem;
  max-width: 880px;
  margin: 0 auto 3rem;
}

.policy-block h2 {
  font-size: 1.4rem;
  color: var(--sky);
  font-weight: 700;
  margin-bottom: 0.8rem;
  border-left: 4px solid var(--tangelo-100);
  padding-left: 0.6rem;
}

.policy-block p {
  color: var(--on-dark);
  margin: 0.6rem 0 1rem;
  font-size: 1rem;
}

.policy-block ul {
  margin: 0.6rem 0 1rem 1.2rem;
  padding: 0;
}

.policy-block li {
  list-style: disc;
  margin-bottom: 0.4rem;
  color: var(--muted);
}

.policy-block strong {
  color: var(--amber-75);
}

.policy-block a {
  color: var(--sky);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.25s ease;
}

.policy-block a:hover {
  color: var(--amber-75);
}

/* Footer area */
.section--footer {
  background: var(--deep);
  color: var(--on-dark);
  text-align: left;
  border-top: 1px solid color-mix(in srgb, var(--on-dark) 12%, transparent);
  padding: 2rem 1rem 3rem;
}

.section--footer a {
  color: var(--sky);
  margin: 0 0.5rem;
  font-weight: 600;
  text-decoration: none;
}

.section--footer a:hover {
  color: var(--amber-75);
}

.section--footer .small {
  display: block;
  margin-top: 0.8rem;
  font-size: 0.85rem;
  opacity: 0.8;
}

/* Responsive */
@media (max-width: 768px) {
  .section--content {
    padding: 1.8rem 1.2rem;
  }
  .policy-block h2 {
    font-size: 1.25rem;
  }
}
/* === Vertically center content inside each full-screen section === */
.hero,
.pain-section,
.services-section,
.proof-section,
.contact-section,
.about-section,
.altst-method-section,
#CTA {
  display: flex;
  flex-direction: column;
  justify-content: center;   /* centers vertically */
  align-items: center;       /* centers horizontally (optional) */
  text-align: center;        /* keeps text centered */
}

/* Keep internal containers from stretching */
.hero .container,
.pain-section .container,
.services-section .container,
.proof-section .container,
.contact-section .container,
.about-section .container,
.altst-method-section .altst-section-container,
#CTA .container {
  margin: 0 auto;
}

/* Scoatem bulleturile implicite, dacă nu erau deja */
.pain-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* === Pain accordion - transparent, păstrează stilul existent === */
.pain-section .pain-item.accordion-item {
  background: transparent;
  box-shadow: none;
  border-color: color-mix(in srgb, var(--on-dark) 18%, transparent);
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center; /* face titlul centrat vertical */
}

/* containerul din dreapta iconitei – full width pe acordon deschis */
.accordion-main.full {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* titlul - centrat vertical datorită align-items center in grid */
.accordion-toggle {
  display: flex;
  align-items: center; /* centru vertical */
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

/* titlu - bold și ocupă toată lățimea alocată */
.accordion-title {
  font-weight: 700;
  color: var(--accent-warm, var(--amber-75));
  flex: 1;
}

/* sageata */
.accordion-arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: transform 0.2s ease;
}

/* panelul de text – acum întinde 100% pe lățimea cardului */
.accordion-panel {
  width: 100%;
  grid-column: span 2; /* EXTREM de important – trece peste icon și devine full width */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.25s ease;
  font-size: 0.95rem;
  color: var(--text);
  padding-top: 6px;
}

.accordion-item.is-open .accordion-panel {
  opacity: 1;
}

/* rotim sageata */
.accordion-item.is-open .accordion-arrow {
  transform: rotate(180deg);
}

/* hover subtil */
.pain-section .pain-item.accordion-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--e1);
  border-color: color-mix(in srgb, var(--on-dark) 24%, transparent);
}