/* =========================================================
   NextLevel by Delia Dumitrache — Shared stylesheet
   Used across all pages (index, despre-noi, and future pages).
   Palette: dark + gold, with royal emerald green accents.
   ========================================================= */

:root{
  --dark:#050403;
  --ivory:#14110D;
  --ivory-deep:#0A0807;
  --surface:#1C1710;
  --plum:#F3E9D8;
  --plum-soft:#C7BBA6;
  --gold:#E3BB6D;
  --gold-deep:#B8863C;
  --rose:#B8863C;
  --rose-soft:rgba(212,175,106,0.16);
  --sage:#2F8F6B;
  --sage-soft:rgba(47,143,107,0.16);
  --violet:#3FA47A;
  --violet-deep:#4CAF7F;
  --violet-soft:rgba(63,164,122,0.22);
  --white:#FFFFFF;
  --shadow: 0 20px 60px -25px rgba(0,0,0,0.6);
  --radius-lg: 28px;
  --radius-md: 18px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  font-family:'Jost', sans-serif;
  background:var(--ivory);
  color:var(--plum);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:'Fraunces', serif;
  font-weight:500;
  line-height:1.15;
  color:var(--plum);
  letter-spacing:-0.01em;
}

a{color:inherit; text-decoration:none;}
ul{list-style:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}
:focus-visible{ outline: 2px solid var(--gold-deep); outline-offset: 3px; }

.eyebrow{
  font-family:'Jost', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.22em;
  font-size:0.72rem;
  font-weight:500;
  color:var(--gold-deep);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{ content:''; width:28px; height:1px; background:var(--gold-deep); display:inline-block; }

.container{ width:100%; max-width:1240px; margin:0 auto; padding:0 32px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 32px; border-radius:999px;
  font-size:0.92rem; font-weight:500; letter-spacing:0.02em;
  transition: all .35s cubic-bezier(.4,0,.2,1);
  border:1px solid transparent; white-space:nowrap;
}
.btn-primary{
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  color:var(--white);
  box-shadow: 0 12px 30px -10px rgba(169,130,79,0.55);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(169,130,79,0.65); }
.btn-ghost{ background:transparent; color:var(--plum); border-color: rgba(243,233,216,0.25); }
.btn-ghost:hover{ border-color: var(--plum); background: rgba(243,233,216,0.05); }
.btn-light{ background: var(--gold); color: var(--dark); box-shadow: var(--shadow); }
.btn-light:hover{ transform: translateY(-2px); }

/* ---------- Header ---------- */
header{ position:fixed; top:0; left:0; right:0; z-index:1000; padding:22px 0; transition: all .4s ease; }
header.scrolled{
  background: rgba(10,8,7,0.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding:14px 0;
  box-shadow: 0 8px 30px -20px rgba(0,0,0,0.55);
}
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:46px; width:46px; object-fit:cover; border-radius:50%; border:1px solid rgba(199,160,107,0.5); }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text strong{ font-family:'Fraunces', serif; font-size:1.05rem; font-weight:500; color:var(--plum); }
.brand-text span{ font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-deep); }

nav.main-nav{ display:flex; align-items:center; gap:30px; }
nav.main-nav a{ font-size:0.88rem; font-weight:400; color:var(--plum-soft); position:relative; padding:4px 0; transition: color .25s ease; }
nav.main-nav a::after{ content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px; background: var(--gold-deep); transition: width .3s ease; }
nav.main-nav a:hover{ color:var(--plum); }
nav.main-nav a:hover::after{ width:100%; }
nav.main-nav a.active{ color:var(--plum); }
nav.main-nav a.active::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:14px; }
.icon-link{
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(243,233,216,0.18);
  transition: all .3s ease; color:var(--plum);
}
.icon-link:hover{ background:var(--gold); color:var(--dark); border-color:var(--gold); }

.menu-toggle{
  display:none; width:44px; height:44px; border-radius:50%;
  background:transparent; border:1px solid rgba(243,233,216,0.2);
  align-items:center; justify-content:center;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{
  content:''; display:block; width:18px; height:1px; background:var(--plum); position:relative; transition: all .3s ease;
}
.menu-toggle span::before{ position:absolute; top:-6px; }
.menu-toggle span::after{ position:absolute; top:6px; }

/* ---------- Section divider (arc) ---------- */
.divider{ display:flex; justify-content:center; padding:6px 0; }
.divider svg{ width:120px; height:26px; color:var(--gold-deep); opacity:0.55; }

/* ---------- Corner accent (used on inner pages) ---------- */
.corner-accent{ position:relative; height:0; }
.corner-accent svg{ position:absolute; width:160px; height:160px; pointer-events:none; }
.corner-accent.tl svg{ top:-40px; left:0; }
.corner-accent.br svg{ top:-120px; right:0; }

/* ---------- Reveal on scroll ---------- */
.reveal{
  opacity:0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1);
}
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- Statement band (shared pattern) ---------- */
.statement{
  position:relative;
  padding:120px 0;
  text-align:center;
  overflow:hidden;
}
.statement-arcs{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:1000px; height:1000px;
  opacity:0.7;
  pointer-events:none;
}
.statement-inner{ position:relative; z-index:2; max-width:760px; margin:0 auto; }
.statement h2{
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight:400;
  font-style:italic;
  margin-bottom:0;
}
.statement-lines{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:36px;
}
.statement-lines span{
  font-size:0.95rem;
  color:var(--plum-soft);
  letter-spacing:0.03em;
}
.statement-lines span.brand{
  font-family:'Fraunces', serif;
  font-size:1.5rem;
  color:var(--plum);
  font-weight:500;
  letter-spacing:0;
  margin-bottom:6px;
}

/* ---------- CTA band (shared) ---------- */
.cta-band{ margin: 0 auto 110px; max-width:1240px; padding:0 32px; }
.cta-inner{
  background: linear-gradient(120deg, #0A0806 0%, #171009 55%, #14201A 100%);
  border-radius: var(--radius-lg);
  padding:64px 60px;
  display:flex; align-items:center; justify-content:space-between; gap:40px;
  position:relative; overflow:hidden; color:var(--white);
}
.cta-inner .cta-arc{ position:absolute; right:-120px; top:-120px; width:420px; height:420px; opacity:0.25; pointer-events:none; }
.cta-inner h3{ color:var(--white); font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight:500; max-width:460px; position:relative; z-index:2; }
.cta-actions{ display:flex; gap:16px; flex-wrap:wrap; position:relative; z-index:2; }

/* ---------- Footer (shared) ---------- */
footer{ background: var(--ivory-deep); padding:80px 0 0; }
.footer-top{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap:50px; padding-bottom:60px; border-bottom:1px solid rgba(243,233,216,0.1); }
.footer-brand .brand{ margin-bottom:18px; }
.footer-brand p{ color:var(--plum-soft); font-size:0.92rem; max-width:280px; margin-bottom:22px; }
.social-row{ display:flex; gap:12px; }
.social-row a{ width:40px; height:40px; border-radius:50%; border:1px solid rgba(243,233,216,0.2); display:flex; align-items:center; justify-content:center; transition: all .3s ease; }
.social-row a:hover{ background:var(--gold-deep); border-color:var(--gold-deep); color:var(--white); }
.social-row a:nth-child(2):hover{ background:var(--violet-deep); border-color:var(--violet-deep); }
.social-row svg{ width:17px; height:17px; }

.footer-col h4{ font-family:'Jost', sans-serif; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.16em; font-weight:600; color:var(--gold-deep); margin-bottom:22px; }
.footer-col ul li{ margin-bottom:12px; }
.footer-col ul li a{ color:var(--plum-soft); font-size:0.92rem; transition: color .25s ease; }
.footer-col ul li a:hover{ color:var(--plum); }

.footer-contact li{ display:flex; align-items:center; gap:10px; color:var(--plum-soft); font-size:0.92rem; margin-bottom:16px; }
.footer-contact li svg{ width:16px; height:16px; color:var(--gold-deep); flex-shrink:0; }
.footer-contact li a{ color:var(--plum-soft); }
.footer-contact li a:hover{ color:var(--plum); }

.footer-bottom{ display:flex; align-items:center; justify-content:space-between; padding:26px 0; font-size:0.82rem; color:var(--plum-soft); flex-wrap:wrap; gap:12px; }


/* =========================================================
   HOME PAGE (index.html)
   ========================================================= */

.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:140px 0 90px;
  overflow:hidden;
}
.hero-arcs{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:1400px; height:1400px;
  z-index:0;
  opacity:0.9;
  pointer-events:none;
}
.hero-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap:64px;
  align-items:center;
  width:100%;
}
.hero-copy .eyebrow{ margin-bottom:22px; }
.hero-copy h1{
  font-size: clamp(2.6rem, 4.4vw, 3.85rem);
  font-weight:500;
  margin-bottom:22px;
}
.hero-copy h1 em{
  font-style:italic;
  font-weight:400;
  color:var(--gold-deep);
}
.hero-copy p.lead{
  font-size:1.08rem;
  color:var(--plum-soft);
  max-width:520px;
  margin-bottom:36px;
}
.hero-actions{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom:48px;
}
.hero-actions .phone-line{
  display:flex;
  flex-direction:column;
  font-size:0.85rem;
  color:var(--plum-soft);
}
.hero-actions .phone-line strong{
  font-family:'Fraunces', serif;
  font-size:1.02rem;
  color:var(--plum);
  font-weight:500;
}

.hero-features{
  display:grid;
  grid-template-columns: repeat(2, auto);
  gap:14px 40px;
}
.hero-features li{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:0.88rem;
  color:var(--plum-soft);
}
.hero-features li svg{
  flex-shrink:0;
  width:18px; height:18px;
  color:var(--gold-deep);
}

.hero-visual{ position:relative; }
.hero-visual-frame{
  position:relative;
  border-radius: var(--radius-lg);
  overflow:hidden;
  aspect-ratio: 1/1;
  box-shadow: var(--shadow);
}
.hero-visual-frame img{ width:100%; height:100%; object-fit:cover; }
.hero-visual-frame::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(5,4,3,0) 45%, rgba(5,4,3,0.65) 100%);
}
.hero-badge{
  position:absolute;
  bottom:-28px; left:-28px;
  background:var(--surface);
  border: 1px solid rgba(212,175,106,0.2);
  border-radius: var(--radius-md);
  padding:20px 26px;
  box-shadow: var(--shadow);
  display:flex;
  align-items:center;
  gap:14px;
  z-index:3;
}
.hero-badge .dot{
  width:44px; height:44px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--sage), var(--dark));
  display:flex; align-items:center; justify-content:center;
  color:var(--white);
  flex-shrink:0;
}
.hero-badge .dot svg{ width:20px; height:20px; }
.hero-badge strong{ font-family:'Fraunces', serif; display:block; font-size:1rem; font-weight:500; }
.hero-badge span{ font-size:0.78rem; color:var(--plum-soft); }

/* ---------- About / intro ---------- */
.about{ padding:120px 0 100px; position:relative; }
.about-grid{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap:70px;
  align-items:start;
}
.about-heading h2{ font-size: clamp(2rem, 3vw, 2.7rem); margin: 18px 0 24px; }
.about-heading p.lead{ color:var(--plum-soft); font-size:1.02rem; max-width:420px; }
.about-copy p{ color:var(--plum-soft); font-size:1.02rem; margin-bottom:20px; max-width:640px; }
.about-copy p.cta-line{
  font-family:'Fraunces', serif;
  font-style:italic;
  color:var(--plum);
  font-size:1.2rem;
  margin-top:32px;
}

.why-list{
  margin-top:40px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:22px 28px;
}
.why-item{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:18px;
  border-radius:16px;
  border:1px solid rgba(199,160,107,0.5);
  transition: background .3s ease;
}
.why-item:hover{ background: var(--ivory-deep); }
.why-item .ico{
  width:40px; height:40px;
  border-radius:50%;
  background: var(--rose-soft);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  color:var(--gold-deep);
}
.why-item:nth-child(2n) .ico{ background: var(--violet-soft); color: var(--violet-deep); }
.why-item .ico svg{ width:19px; height:19px; }
.why-item p{ font-size:0.92rem; color:var(--plum); font-weight:500; padding-top:8px; }

/* ---------- Services ---------- */
.services{ padding:100px 0 120px; background: var(--ivory-deep); position:relative; overflow:hidden; }
.services-arc-bg{ position:absolute; top:-200px; right:-260px; width:700px; height:700px; opacity:0.5; pointer-events:none; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 64px; position:relative; z-index:2; }
.section-head .eyebrow{ justify-content:center; margin-bottom:18px; }
.section-head .eyebrow::before{ display:none; }
.section-head h2{ font-size: clamp(2rem, 3.2vw, 2.7rem); margin-bottom:16px; }
.section-head p{ color:var(--plum-soft); font-size:1.02rem; }

.services-grid{ position:relative; z-index:2; display:grid; grid-template-columns: repeat(3, 1fr); gap:26px; }
.service-card{
  background: var(--surface);
  border: 1px solid rgba(212,175,106,0.14);
  border-radius: var(--radius-md);
  padding:36px 30px;
  display:flex;
  flex-direction:column;
  gap:18px;
  transition: transform .4s cubic-bezier(.4,0,.2,1), box-shadow .4s ease, border-color .4s ease;
  box-shadow: 0 10px 30px -20px rgba(0,0,0,0.5);
}
.service-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow); border-color: rgba(212,175,106,0.35); }
.service-card .ico{
  width:58px; height:58px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--rose-soft), var(--sage-soft));
  display:flex; align-items:center; justify-content:center;
  color:var(--gold-deep);
}
.service-card .ico svg{ width:26px; height:26px; }
/* gentle rotation of accent color across the grid: gold / emerald / gold */
.service-card:nth-child(3n+2) .ico{ background: linear-gradient(135deg, var(--violet-soft), var(--rose-soft)); color: var(--violet-deep); }
.service-card:nth-child(3n+3) .ico{ background: linear-gradient(135deg, var(--rose-soft), rgba(212,175,106,0.30)); color: var(--gold-deep); }
.service-card:nth-child(3n+2) .learn{ color: var(--violet-deep); }
.service-card h3{ font-size:1.18rem; font-weight:500; }
.service-card p{ font-size:0.9rem; color:var(--plum-soft); }
.service-card .learn{
  margin-top:auto;
  font-size:0.82rem;
  font-weight:500;
  color:var(--gold-deep);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.service-card .learn svg{ width:14px; height:14px; transition: transform .3s ease;}
.service-card:hover .learn svg{ transform: translateX(4px); }


/* =========================================================
   DESPRE NOI PAGE (despre-noi.html)
   ========================================================= */

.page-hero{ position:relative; padding:170px 0 90px; overflow:hidden; }
.ph-cluster{ position:absolute; top:-140px; right:-160px; width:620px; height:620px; pointer-events:none; z-index:0; }
.page-hero .container{ position:relative; z-index:2; }
.page-hero-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:64px; align-items:center; }
.page-hero-copy .eyebrow{ margin-bottom:20px; }
.page-hero-copy h1{ font-size: clamp(2.4rem, 4vw, 3.4rem); margin-bottom:22px; }
.page-hero-copy h1 em{ font-style:italic; font-weight:400; color:var(--gold-deep); }
.page-hero-copy p{ font-size:1.05rem; color:var(--plum-soft); max-width:480px; }

.page-hero-visual{ position:relative; }
.ph-frame{
  position:relative;
  border-radius: var(--radius-lg);
  overflow:hidden;
  aspect-ratio: 5/6;
  box-shadow: var(--shadow);
}
.ph-frame img{ width:100%; height:100%; object-fit:cover; }
.ph-frame::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(5,4,3,0) 55%, rgba(5,4,3,0.5) 100%);
}
.ph-ring{ position:absolute; bottom:-34px; right:-34px; width:130px; height:130px; z-index:3; pointer-events:none; }

/* ---------- Story sections ---------- */
.story{ padding:90px 0; position:relative; }
.story-grid{ display:grid; grid-template-columns: 0.95fr 1.05fr; gap:70px; align-items:center; }
.story-grid.reverse .story-visual{ order:2; }
.story-grid.reverse .story-copy{ order:1; }

.story-visual{ position:relative; }
.story-frame{
  position:relative;
  border-radius: var(--radius-lg);
  overflow:hidden;
  aspect-ratio: 4/5;
  box-shadow: var(--shadow);
}
.story-frame img{ width:100%; height:100%; object-fit:cover; }
.story-orbit{ position:absolute; z-index:0; pointer-events:none; }
.story-grid:not(.reverse) .story-orbit{ top:-60px; left:-70px; width:220px; height:220px; }
.story-grid.reverse .story-orbit{ bottom:-60px; right:-70px; width:220px; height:220px; }

.story-copy .eyebrow{ margin-bottom:18px; }
.story-copy h2{ font-size: clamp(1.9rem, 2.9vw, 2.5rem); margin-bottom:22px; }
.story-copy p{ color:var(--plum-soft); font-size:1.02rem; margin-bottom:18px; max-width:560px; }
.story-copy p:last-of-type{ margin-bottom:0; }
.story-copy p.pull{
  font-family:'Fraunces', serif;
  font-style:italic;
  color:var(--plum);
  font-size:1.15rem;
  margin-top:26px;
}

/* ---------- Values strip ---------- */
.values{ padding:40px 0 110px; position:relative; }
.values-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:22px; }
.value-card{
  background: var(--surface);
  border: 1px solid rgba(212,175,106,0.14);
  border-radius: var(--radius-md);
  padding:32px 26px;
  text-align:center;
  box-shadow: 0 10px 30px -20px rgba(0,0,0,0.5);
  transition: transform .4s cubic-bezier(.4,0,.2,1), box-shadow .4s ease, border-color .4s ease;
}
.value-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(212,175,106,0.35); }
.value-card .ico{
  width:56px; height:56px;
  border-radius:50%;
  margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--rose-soft), var(--sage-soft));
  color: var(--gold-deep);
}
.value-card:nth-child(2n) .ico{ background: linear-gradient(135deg, var(--violet-soft), var(--rose-soft)); color: var(--violet-deep); }
.value-card .ico svg{ width:24px; height:24px; }
.value-card h3{ font-size:1.02rem; font-weight:500; margin-bottom:10px; }
.value-card p{ font-size:0.86rem; color:var(--plum-soft); }


/* =========================================================
   RESPONSIVE (shared breakpoints for all pages)
   ========================================================= */

@media (max-width: 1024px){
  /* index.html */
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; max-width:440px; margin:0 auto; }
  .about-grid{ grid-template-columns:1fr; gap:40px; }
  .services-grid{ grid-template-columns: repeat(2,1fr); }

  /* despre-noi.html */
  .page-hero-grid{ grid-template-columns:1fr; }
  .page-hero-visual{ order:-1; max-width:440px; margin:0 auto; }
  .story-grid{ grid-template-columns:1fr; gap:40px; }
  .story-grid.reverse .story-visual, .story-grid.reverse .story-copy{ order:0; }
  .story-visual{ max-width:440px; margin:0 auto; }
  .values-grid{ grid-template-columns: repeat(2,1fr); }

  /* shared */
  .footer-top{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 780px){
  nav.main-nav{
    position:fixed;
    top:0; right:0;
    height:100vh;
    width:min(320px, 82vw);
    background:var(--ivory);
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    padding:40px;
    gap:26px;
    transform: translateX(100%);
    transition: transform .4s cubic-bezier(.4,0,.2,1);
    box-shadow: -20px 0 60px rgba(0,0,0,0.35);
    overflow-y:auto;
  }
  nav.main-nav.open{ transform:translateX(0); }
  .menu-toggle{ display:flex; }
  .header-actions .icon-link{ display:none; }

  /* index.html */
  .hero-features{ grid-template-columns:1fr; }
  .why-list{ grid-template-columns:1fr; }
  .services-grid{ grid-template-columns:1fr; }

  /* despre-noi.html */
  .values-grid{ grid-template-columns:1fr; }

  /* shared */
  .cta-inner{ flex-direction:column; text-align:center; padding:48px 30px; }
  .cta-actions{ justify-content:center; }
  .footer-top{ grid-template-columns:1fr; gap:36px; }
  .footer-bottom{ flex-direction:column; text-align:center; }
  .container{ padding:0 22px; }
}