:root{
  /* neutre */
  --cream:#f5f2ec;
  --ink:#1b1b20;
  --grey:#6b7280;
  --line:#e2e4ee;
  --line-soft:#eef0f7;
  --line-dark:rgba(245,242,236,.2);

  /* paletă */
  --teal:#31bcaf;
  --yellow:#fed815;
  --orange:#f1890f;
  --pink:#f85a7d;
  --violet:#8555cd;
  --blue:#0841c2;
  --coral:var(--pink);

  /* ancore închise, pentru suprafețe mari cu text alb */
  --blue-deep:#062e86;
  --violet-deep:#4a2799;
  --pink-deep:#a9174a;
  --orange-deep:#8c3d04;
  --teal-deep:#07514e;
  --night:#070d26;

  /* gradiente de suprafață */
  --g-dusk:linear-gradient(122deg,var(--blue) 0%,#4433c9 44%,var(--violet) 100%);
  --g-coral:linear-gradient(122deg,var(--pink-deep) 0%,#d92b62 55%,#e8447a 100%);
  --g-ember:linear-gradient(122deg,var(--orange-deep) 0%,#c25f07 55%,#e07d0d 100%);
  --g-lagoon:linear-gradient(122deg,#053f45 0%,var(--teal-deep) 55%,#0a7d76 100%);
  --g-orchid:linear-gradient(122deg,var(--violet-deep) 0%,#7443c4 55%,#a748c0 100%);
  --g-night:linear-gradient(122deg,var(--night) 0%,#1b1450 55%,#3b2091 100%);

  --s1:var(--pink);
  --s2:var(--orange);
  --s3:var(--yellow);
  --s4:var(--teal);
  --s5:var(--blue);
  --s6:var(--violet);
  --hue:var(--pink);

  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"DM Sans",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  /* ---- coloana optică ----
     --pad-x este distanța de la marginea ecranului până la linia de text.
     Aceeași valoare pe header, hero, benzi, blocuri și secțiuni. */
  --gutter:clamp(22px,5vw,72px);
  --max:1320px;
  --pad-x:max(var(--gutter),calc((100vw - var(--max)) / 2));
}

/* ---------- bază ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  position:relative;margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

.wrap{max-width:100%;margin:0;padding-inline:var(--pad-x)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.display{font-family:var(--display);font-weight:800;letter-spacing:-.045em;line-height:.98;margin:0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad-x);top:10px;z-index:1000;background:var(--ink);color:var(--cream);padding:10px 16px;border-radius:4px}

.section{padding:clamp(66px,10vh,120px) 0}

/* ---------- header ---------- */
.site-head{position:absolute;top:0;left:0;right:0;z-index:60;background:transparent;color:#fff}
.site-head__inner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:64px;margin:26px 0 0;max-width:100%;padding-inline:var(--pad-x);
}
.brand-group{display:flex;align-items:center;gap:14px;min-width:0}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-family:var(--display);font-weight:800;font-size:25px;letter-spacing:-.05em}
.brand__mark{
  width:18px;height:18px;border-radius:50%;flex:none;
  background:conic-gradient(from 0deg,var(--pink),var(--orange),var(--yellow),var(--teal),var(--blue),var(--violet),var(--pink));
  animation:spin 12s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.brand__tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.72);
  padding-left:14px;border-left:1px solid rgba(255,255,255,.3);white-space:nowrap;
}
.nav{display:flex;align-items:center;gap:2px}
.nav a{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;padding:9px 13px;border-radius:99px;color:rgba(255,255,255,.82);
  transition:background .18s,color .18s;
}
.nav a:hover{background:#fff;color:var(--blue)}
.nav-toggle{
  display:none;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:99px;
  padding:9px 16px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;cursor:pointer;
}

/* ---------- butoane ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;padding:16px 28px;border-radius:99px;border:1px solid transparent;
  background:var(--ink);color:var(--cream);cursor:pointer;
  transition:transform .22s cubic-bezier(.16,1,.3,1),background .22s,color .22s,border-color .22s;
}
.btn:hover{transform:translateY(-3px)}
.btn--light{background:#fff;color:var(--ink)}
.btn--ghost{background:transparent;color:inherit;border-color:currentColor}
.btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}

.ar{
  display:inline-block;text-decoration:none;margin-left:6px;
  font-size:1.05em;line-height:1;opacity:.72;
  transition:transform .25s cubic-bezier(.16,1,.3,1),opacity .25s;
}
.ar:hover{opacity:1;transform:translateX(6px)}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;color:#fff;
  padding:calc(90px + clamp(26px,4.5vh,62px)) var(--pad-x) clamp(70px,12vh,140px);
  background-image:var(--g-dusk);
  background-size:200% 200%;animation:drift 26s ease-in-out infinite;
}
@keyframes drift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero__in{position:relative;z-index:1;max-width:100%;margin:0}
.hero__kicker{
  display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.55);padding:9px 17px;border-radius:99px;margin:0 0 clamp(30px,4.5vh,52px);
}
.hero h1{font-size:clamp(40px,8vw,104px);margin:0 0 28px;max-width:14ch}
.hero h1 span{display:block}
.hero__lede{font-size:clamp(17px,1.95vw,22px);max-width:54ch;margin:0 0 36px;color:rgba(255,255,255,.94)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}

.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.15;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- benzi de gradient ---------- */
.gband{
  position:relative;overflow:hidden;color:#fff;
  padding:clamp(72px,12vh,136px) var(--pad-x);
  background-size:200% 200%;animation:drift 30s ease-in-out infinite;
}
.gband::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;opacity:.9;
  background:linear-gradient(90deg,var(--pink),var(--orange),var(--yellow),var(--teal),var(--blue),var(--violet));
}
.gband__in{position:relative;z-index:1;max-width:100%;margin:0}
.gband__num{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.8;margin:0 0 16px}
.gband h2{font-family:var(--display);font-weight:800;font-size:clamp(38px,7.4vw,96px);letter-spacing:-.05em;line-height:.96;margin:0 0 20px}
.gband p{margin:0;font-size:clamp(16.5px,1.75vw,20px);max-width:50ch;color:rgba(255,255,255,.93)}
.gband .btn{margin-top:32px}

.gband--web{background-image:var(--g-ember)}
.gband--print{background-image:var(--g-orchid)}
.gband--tools{background-image:var(--g-coral)}
.gband--folio{background-image:var(--g-night)}
.gband--contact{background-image:var(--g-night)}

/* ---------- două coloane gradient ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:0}
.duo__col{
  position:relative;overflow:hidden;color:#fff;
  padding:clamp(58px,9vh,110px) clamp(28px,4vw,56px);
  display:flex;flex-direction:column;
}
.duo__col:first-child{padding-left:var(--pad-x)}
.duo__col:last-child{padding-right:var(--pad-x)}
.duo__num{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.75;margin:0 0 18px}
.duo__col h2{font-family:var(--display);font-weight:800;font-size:clamp(34px,5.6vw,72px);letter-spacing:-.05em;line-height:.96;margin:0 0 16px}
.duo__col p{margin:0;font-size:clamp(16px,1.7vw,19px);max-width:38ch;color:rgba(255,255,255,.92);line-height:1.6}
.duo__col .ar{opacity:.8;margin-left:8px;font-size:1.1em}
.duo__col .ar:hover{opacity:1}

.duo--web .duo__col:first-child{background:var(--g-coral)}
.duo--web .duo__col:last-child{background:var(--g-ember)}
.duo--promo .duo__col:first-child{background:var(--g-orchid)}
.duo--promo .duo__col:last-child{background:var(--g-lagoon)}

/* ---------- blocuri de culoare ---------- */
.blocks,.blocks--six{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.block{
  position:relative;overflow:hidden;color:#fff;
  padding:clamp(38px,5vw,58px) clamp(26px,3.2vw,44px) clamp(42px,6vw,66px);
  min-height:clamp(250px,26vw,340px);display:flex;flex-direction:column;
}
.block::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .35s}
.block:hover::after{opacity:.07}
.block__num{font-family:var(--mono);font-size:11px;letter-spacing:.16em;opacity:.72;margin:0 0 auto}
.block h3{font-family:var(--display);font-weight:800;font-size:clamp(23px,2.6vw,34px);letter-spacing:-.04em;line-height:1.02;margin:26px 0 12px}
.block p{margin:0;font-size:15.5px;line-height:1.6;opacity:.92;max-width:34ch}

.block:nth-child(6n+1){background:linear-gradient(150deg,#d92b62,var(--pink-deep))}
.block:nth-child(6n+2){background:linear-gradient(150deg,#e07d0d,var(--orange-deep))}
.block:nth-child(6n+3){background:linear-gradient(150deg,var(--yellow),#d99e04);color:var(--ink)}
.block:nth-child(6n+4){background:linear-gradient(150deg,#0a7d76,var(--teal-deep))}
.block:nth-child(6n+5){background:linear-gradient(150deg,#2f57d8,var(--blue-deep))}
.block:nth-child(6n+6){background:linear-gradient(150deg,#7443c4,var(--violet-deep))}
.block--ink{background:var(--ink);color:var(--cream)}

/* ---------- servicii ---------- */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.pillar{border:1px solid var(--line);border-radius:12px;padding:30px 26px 34px;background:#fff;display:flex;flex-direction:column}
.pillar--dark{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.pillar:nth-child(1){--tone:var(--pink)}
.pillar:nth-child(2){--tone:var(--teal)}
.pillar:nth-child(3){--tone:var(--violet)}
.pillar:nth-child(4){--tone:var(--orange)}
.pillar__num{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;margin:0 0 16px;color:var(--tone)}
.pillar h3{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.04em;margin:0 0 12px}
.pillar > p{margin:0;font-size:15.5px;line-height:1.6;opacity:.86}
.pillar ul{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.pillar li{position:relative;padding-left:20px;font-size:15px;opacity:.9}
.pillar li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:2px;background:var(--tone)}
.pillar__link{
  margin-top:auto;padding-top:24px;align-self:flex-start;text-decoration:none;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tone);
  display:inline-flex;align-items:center;gap:9px;transition:gap .2s;
}
.pillar__link:hover{gap:15px}

/* ---------- contact ---------- */
.contact{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);
  align-items:start;max-width:100%;margin:0;position:relative;z-index:1;
}
.contact__aside h2{font-family:var(--display);font-weight:800;font-size:clamp(32px,5.4vw,64px);letter-spacing:-.05em;line-height:1;margin:0 0 18px}
.contact__aside p{max-width:38ch;color:rgba(255,255,255,.9)}
.contact__lines{margin-top:26px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.contact__lines a{
  font-family:var(--mono);font-size:15px;text-decoration:none;border:1px solid rgba(255,255,255,.45);
  padding:11px 20px;border-radius:99px;transition:background .2s,color .2s,border-color .2s;
}
.contact__lines a:hover{background:#fff;color:var(--ink);border-color:#fff}

.vcard{border-left:1px solid rgba(255,255,255,.5);padding-left:clamp(28px,4vw,56px)}
.vcard__label{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px;color:rgba(255,255,255,.72)}
.vcard__name{font-family:var(--display);font-weight:800;font-size:clamp(24px,3vw,32px);letter-spacing:-.04em;margin:0 0 24px}
.vcard__list{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.vcard__list li{font-size:17px;line-height:1.55}
.vcard__list li br{line-height:1.8}
.vcard__list span{color:rgba(255,255,255,.68)}
.vcard__list a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.42);padding-bottom:2px;transition:border-color .2s}
.vcard__list a:hover{border-color:#fff}

/* ---------- formular ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--grey);margin-bottom:7px}
.field input,.field textarea{
  width:100%;background:#fff;border:1px solid var(--line);border-radius:7px;
  padding:13px 14px;color:var(--ink);font-family:var(--body);font-size:16px;transition:border-color .2s;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--violet)}
.field textarea{min-height:128px;resize:vertical}
.hp{position:absolute;left:-9999px}
.form .btn{width:100%;justify-content:center}
.form__status{font-family:var(--mono);font-size:12px;color:#9b2f2a;margin-top:14px;min-height:18px}
.form__status[data-state="ok"]{color:var(--teal-deep)}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:#8c8f97;padding:26px 0}
.site-foot__inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center}
.site-foot .mono a{text-decoration:none;border-bottom:1px solid var(--line-dark)}
.site-foot .mono a:hover{color:var(--cream)}
.social{display:flex;flex-wrap:wrap;gap:6px}
.social a{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-decoration:none;
  padding:7px 13px;border-radius:99px;border:1px solid var(--line-dark);transition:color .2s,border-color .2s;
}
.social a:nth-child(1):hover{color:var(--blue);border-color:var(--blue)}
.social a:nth-child(2):hover{color:var(--pink);border-color:var(--pink)}
.social a:nth-child(3):hover{color:var(--teal);border-color:var(--teal)}
.social a:nth-child(4):hover{color:var(--yellow);border-color:var(--yellow)}
.social a:nth-child(5):hover{color:var(--violet);border-color:var(--violet)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.is-in{opacity:1;transform:none}

/* =========================================================
   Breakpoints
   ========================================================= */

/* prima coloană a grilei de blocuri urcă pe linia optică */
@media (min-width:901px){
  .blocks > *:nth-child(3n+1){padding-left:var(--pad-x)}
  .blocks > *:nth-child(3n){padding-right:var(--pad-x)}
}

@media (min-width:561px) and (max-width:900px){
  .blocks,.blocks--six{grid-template-columns:repeat(2,1fr)}
  .blocks > *:nth-child(2n+1){padding-left:var(--pad-x)}
  .blocks > *:nth-child(2n){padding-right:var(--pad-x)}
}

@media (max-width:860px){
  .brand__tag{display:none}
  .nav{
    position:fixed;inset:90px 0 auto;background:var(--blue-deep);
    flex-direction:column;align-items:stretch;gap:0;
    padding:20px var(--pad-x) 22px;display:none;
  }
  .nav.is-open{display:flex}
  .nav a{padding:15px 14px;border-radius:7px}
  .nav-toggle{display:block}

  .duo{grid-template-columns:1fr}
  .duo__col{padding-inline:var(--pad-x)
      
      
.duo__col{padding-block:56px 62px}
  .duo__num{margin-bottom:20px}
  .duo__col h2{margin-bottom:18px}
  .duo__col p{max-width:none}
  }


  .contact{grid-template-columns:1fr}
  .vcard{border-left:none;border-top:1px solid rgba(255,255,255,.5);padding-left:0;padding-top:32px}
}

@media (max-width:560px){
  .blocks,.blocks--six{grid-template-columns:1fr}
  .block{min-height:0;padding-inline:var(--pad-x)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
}