@font-face { font-family: "Familjen"; src: url("/fonts/familjen.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --ink: #121212; --paper: #fff; --soft: #f3f3f1; --line: #e4e4e1; --mute: #5f5f5c;
  --red: #FFD23F; --red-deep: #F2BE00;
  --r1: 12px; --r2: 24px; --pill: 999px;
  --wrap: 1360px; --side: 40px;
  --t1: 72px; --t2: 40px; --t3: 24px; --t4: 16px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--t4)/1.5 "Familjen", "Helvetica Neue", Arial, sans-serif; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 400; letter-spacing: -.02em; text-wrap: balance; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--side)); margin: 0 auto; padding: 0 var(--side); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.label { color: var(--mute); }
::selection { background: var(--red); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
section[id] { scroll-margin-top: 96px; }

/* Butoane-pastilă, ca la referință: plin roșu, plin negru, contur. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: var(--pill);
  font: 500 var(--t4)/1 inherit; font-family: inherit; text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform .18s var(--ease), background .15s, color .15s, border-color .15s; }
.btn-red { background: var(--red); color: var(--ink); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-light { background: #fff; color: var(--ink); }
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
  .btn-red:hover { background: var(--red-deep); }
  .btn-ink:hover { background: #333; }
  .btn-line:hover { background: var(--ink); color: #fff; }
  .btn-light:hover { background: var(--soft); }
}
.btn:active { transform: translateY(1px) scale(.98); transition-duration: .06s; }
.row-btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* Antet: pastilă plutitoare. */
.top { position: sticky; top: 16px; z-index: 20; display: flex; justify-content: center; padding: 0 16px; margin-top: 16px; }
.top-in { display: flex; align-items: center; gap: 32px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--pill); padding: 8px 8px 8px 24px; transition: box-shadow .2s; }
body.scrolled .top-in { box-shadow: 0 8px 24px rgba(20,20,20,.08); }
.logo { display: block; width: 104px; color: var(--ink); }
.logo svg { display: block; width: 100%; height: auto; }
.nav { display: flex; gap: 24px; }
.nav a { text-decoration: none; color: var(--ink); padding: 8px 0; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 85%; transition: background-size .25s var(--ease); }
@media (hover: hover) { .nav a:hover { background-size: 100% 1px; } }

/* Erou: colaj în ramă neagră, titlul în card alb suprapus. */
.hero { position: relative; margin-top: 24px; }
.bento { background: var(--ink); border-radius: var(--r2); padding: 12px; display: grid; grid-template-columns: 1.15fr .85fr .9fr 1.1fr; grid-template-rows: 330px 330px; gap: 12px; }
.tile { position: relative; overflow: hidden; border-radius: var(--r1); background: #222; margin: 0; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.t-a { grid-column: 1 / 3; grid-row: 1 / 3; }
.t-b { grid-column: 3; grid-row: 1; }
.t-c { grid-column: 4; grid-row: 1 / 3; }
.t-d { grid-column: 3; grid-row: 2; }
.hero-card { position: absolute; z-index: 2; left: 0; top: 0; background: #fff; border-radius: 0 0 calc(var(--r2) + 12px) 0; padding: 0 40px 32px 0; max-width: 652px; }
.hero-card::after, .hero-card::before { content: ""; position: absolute; width: 24px; height: 24px; background: radial-gradient(circle at 100% 100%, transparent 23px, #fff 24px); }
.hero-card::after { right: -36px; top: 0; }
.hero-card::before { left: 0; bottom: -36px; }
.hero-card h1 { font-size: var(--t1); line-height: 1.02; margin: 8px 0 24px; }
.hero-card .label { font-size: var(--t4); }

/* Cine suntem. */
.intro { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; padding: 120px 0 80px; }
.intro h2 { font-size: var(--t2); line-height: 1.15; margin-bottom: 32px; max-width: 900px; }

/* Povestea numelui, în locul siglelor de clienți. */
.story { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; align-items: center; padding: 40px; background: var(--soft); border-radius: var(--r2); }
.story .mark { width: 40px; color: var(--ink); }
.story p { font-size: var(--t3); line-height: 1.35; max-width: 860px; }

/* Lucrări: două coloane decalate. */
.work { padding: 120px 0 40px; }
.work-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 48px; }
.work-head h2 { font-size: var(--t2); line-height: 1.15; }
.work-head p { color: var(--mute); max-width: 520px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.grid .proj:nth-child(even) { margin-top: 120px; }
.proj { display: block; text-decoration: none; margin-bottom: 64px; }
.proj .frame::after { content: ""; position: absolute; right: 24px; top: 24px; width: 12px; height: 12px; border-radius: 50%; background: var(--red); transform: scale(0); transition: transform .3s var(--ease); }
@media (hover: hover) { .proj:hover .frame::after { transform: scale(1); } .proj:hover .go { text-decoration-color: var(--red); text-decoration-thickness: 3px; } }
.proj .meta { color: var(--mute); margin-bottom: 4px; }
.proj h3 { font-size: var(--t3); line-height: 1.3; max-width: 560px; }
.proj .go { display: inline-block; margin-top: 8px; text-decoration: underline; text-underline-offset: 4px; }
.like { text-align: center; padding: 40px 0 120px; }
.like h2 { font-size: var(--t2); line-height: 1.15; margin-bottom: 24px; }

/* Oferta: secțiune neagră cu lista mare. */
.offer { background: var(--ink); color: #fff; border-radius: var(--r2) var(--r2) 0 0; padding: 96px 0 0; }
.offer-head { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 40px; align-items: start; margin-bottom: 64px; }
.offer-head .label { color: #a9a9a5; }
.offer-head h2 { font-size: var(--t2); line-height: 1.15; }
.offer-head p { color: #cfcfcb; }
.list { list-style: none; margin: 0 0 0 calc(33.333% + 16px); padding: 0 0 32px; }
.list li { display: grid; grid-template-columns: 1fr 280px; gap: 24px; align-items: baseline; padding: 16px 0; }
.list b { font-weight: 400; font-size: var(--t1); line-height: 1.05; letter-spacing: -.02em; }
.list span { color: #cfcfcb; }

/* Cum lucrăm: poză mare cu cardul pașilor suprapus. */
.how { background: linear-gradient(var(--ink) 50%, var(--paper) 50%); padding: 96px 0 0; }
.how-box { position: relative; border-radius: var(--r2); overflow: hidden; min-height: 600px; }
.how-box > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.how-card { position: relative; margin: 40px; background: #fff; border-radius: var(--r2); padding: 32px; max-width: 520px; }
.how-card h2 { font-size: var(--t2); line-height: 1.15; margin-bottom: 24px; }
.how-card ol { margin: 0; padding: 0; list-style: none; counter-reset: pas; }
.how-card li { counter-increment: pas; display: grid; grid-template-columns: 32px 1fr; gap: 8px; padding: 8px 0; }
.how-card li::before { content: counter(pas) "."; color: var(--mute); }

/* Despre: declarație pe două coloane, text pentru Google. */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 120px 0; }
.about h2 { font-size: var(--t2); line-height: 1.15; }
.about .txt p + p { margin-top: 16px; }
.about .txt { color: #333; max-width: 600px; }

/* Bandă care curge. */
.marquee { overflow: hidden; padding: 24px 0 96px; }
.marquee-in { display: flex; width: max-content; animation: curge 40s linear infinite; }
.marquee span { font-size: var(--t1); line-height: 1.1; letter-spacing: -.03em; white-space: nowrap; padding-right: .3em; }
@keyframes curge { to { transform: translateX(-50%); } }

/* Întrebări. */
.faq { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; padding: 0 0 120px; }
.faq h2 { font-size: var(--t2); line-height: 1.15; }
.faq details { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 20px 0; font-size: var(--t3); line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: none; width: 12px; height: 12px; margin-top: 8px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); transition: transform .25s var(--ease); }
.faq details[open] summary i { transform: rotate(-135deg); margin-top: 16px; }
@media (hover: hover) { .faq summary:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--red); text-decoration-thickness: 3px; } }
.faq details p { padding: 0 48px 24px 0; color: #333; max-width: 720px; }

/* Subsol: card negru rotunjit. */
.foot { padding: 0 20px 20px; }
.foot-in { background: var(--ink); color: #fff; border-radius: var(--r2); padding: 64px 64px 32px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.foot h2 { font-size: var(--t2); line-height: 1.15; margin-bottom: 24px; }
.foot .label { color: #a9a9a5; margin-bottom: 12px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { padding: 4px 0; }
.foot li a { text-decoration: none; }
@media (hover: hover) { .foot li a:hover { text-decoration: underline; text-underline-offset: 4px; } }
.foot .big { font-size: var(--t1); line-height: 1; letter-spacing: -.03em; margin: 80px 0 32px; }
.foot-bar { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; border-top: 1px solid #3a3a38; padding-top: 20px; color: #a9a9a5; }
.foot-bar .logo { width: 88px; color: #fff; }


/* Ecrane reale în colaj: se văd de sus, ca site-ul deschis. */
.tile.scr img { object-position: left top; }
.t-c.scr img, .t-d.scr img { object-position: center top; }
.t-c.scr { background: #fff; }

/* Lucrările: ecranul de desktop și cel de telefon, pe culoarea firmei. */
.frame { position: relative; display: block; margin: 0 0 16px; border-radius: var(--r2); overflow: hidden; aspect-ratio: 4 / 3; background: #ECECE9; }
.frame .d { position: absolute; left: 7%; top: 10%; width: 74%; border-radius: var(--r1); overflow: hidden; outline: 1px solid rgba(20,20,20,.08); }
.frame .t { position: absolute; right: 6%; top: 26%; width: 23%; border-radius: 20px; overflow: hidden; border: 4px solid var(--ink); background: var(--ink); }
.frame img { width: 100%; height: auto; }
.about .story { color: var(--mute); }

/* Meniul de pe telefon. */
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; min-height: 44px; padding: 0 16px; display: flex; align-items: center; border: 1px solid var(--ink); border-radius: var(--pill); }
.menu summary::-webkit-details-marker { display: none; }
.menu nav { position: absolute; right: 0; top: 52px; display: flex; flex-direction: column; min-width: 200px; background: #fff; border: 1px solid var(--line); border-radius: var(--r1); padding: 8px; box-shadow: 0 12px 32px rgba(20,20,20,.12); }
.menu nav a { padding: 12px; text-decoration: none; border-radius: 8px; }
.menu nav a:hover { background: var(--soft); }
@media (max-width: 760px) { .menu { display: block; } .top-in > .btn { display: none; } }

/* Contactul apare doar după ce avem numărul (vezi pagina.js). */
.fara-tel [data-contact] { display: none !important; }
.callbar { display: none; }

@media (max-width: 1100px) {
  :root { --t1: 56px; --t2: 32px; --side: 24px; }
  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: 300px 220px 220px; }
  .t-a { grid-column: 1 / 3; grid-row: 1; } .t-b { grid-column: 1; grid-row: 2; } .t-c { grid-column: 2; grid-row: 2 / 4; } .t-d { grid-column: 1; grid-row: 3; }
  .hero-card { position: static; max-width: none; padding: 0 0 24px; border-radius: 0; }
  .hero-card::after, .hero-card::before { display: none; }
  .offer-head { grid-template-columns: 1fr 2fr; } .offer-head p { grid-column: 2; }
  .list { margin-left: 0; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .nav { gap: 16px; }
}
@media (max-width: 760px) {
  :root { --t1: 44px; --t2: 30px; --t3: 20px; --side: 16px; }
  .top { top: 8px; margin-top: 8px; padding: 0 8px; }
  .top-in { width: 100%; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 16px; }
  .nav { display: none; }
  .logo { width: 92px; }
  .bento { grid-template-rows: 220px 160px 160px; gap: 8px; padding: 8px; }
  .intro, .story, .work-head, .about, .faq, .offer-head { grid-template-columns: 1fr; gap: 16px; }
  .offer-head p { grid-column: auto; }
  .intro { padding: 72px 0 48px; }
  .story .mark { width: 32px; }
  .story { padding: 24px; }
  .work { padding-top: 72px; }
  .grid { grid-template-columns: 1fr; }
  .grid .proj:nth-child(even) { margin-top: 0; }
  .proj { margin-bottom: 40px; }
  .like { padding: 16px 0 72px; }
  .offer { padding-top: 64px; }
  .list li { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
  .how { padding-top: 64px; }
  .how-box { min-height: 0; display: flex; flex-direction: column; }
  .how-box > img { position: static; height: 240px; }
  .how-card { margin: 0; border-radius: 0 0 var(--r2) var(--r2); border: 1px solid var(--line); border-top: 0; padding: 24px; }
  .about { padding: 72px 0; }
  .marquee { padding-bottom: 56px; }
  .faq { padding-bottom: 72px; }
  .faq details p { padding-right: 0; }
  .foot { padding: 0 8px 8px; }
  .foot-in { padding: 40px 20px 24px; }
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
  .foot .big { margin-top: 48px; }
  body:not(.fara-tel) .callbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 30; }
  body:not(.fara-tel) { padding-bottom: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .marquee-in { animation: none; }
}
.intro-p { margin-top: 24px; max-width: 640px; font-size: var(--t3); line-height: 1.4; color: var(--mute); }
.about .nume-poveste { color: var(--mute); }
.offer .extra { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; padding: 48px 0 32px; }
.offer .extra .label { color: #a9a9a5; }
.list2 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 32px 40px; }
.list2 li { display: grid; gap: 8px; }
.list2 b { font-weight: 400; font-size: var(--t3); line-height: 1.3; }
.list2 span { color: #cfcfcb; }
@media (max-width: 760px) { .offer .extra, .list2 { grid-template-columns: 1fr; gap: 16px; } .list2 { gap: 24px; } }
.lang { text-decoration: none; font-weight: 500; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--pill); }
@media (hover: hover) { .lang:hover { background: var(--soft); } }
@media (max-width: 760px) { .top-in .lang { margin-left: auto; } }
.t-c img { object-position: 38% center; }
.t-a img { object-position: center 70%; }

/* Erou fără ramă: titlul sus, ilustrația dedesubt, pe alb. */

/* Cum lucrăm: ilustrația lângă pași, fără fond negru. */
.how { background: none; padding: 96px 0 0; }
.how-box { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; min-height: 0; border-radius: 0; overflow: visible; }
.how-box > img { position: static; width: 100%; height: auto; object-fit: contain; }
.how-card { margin: 0; padding: 0; max-width: none; border: 0; }
@media (max-width: 760px) {
  .hero { padding-top: 24px; }
  .hero-ilu { margin-top: 32px; }
  .how-box { grid-template-columns: 1fr; gap: 24px; }
  .how-box > img { height: auto; }
  .how-card { border: 0; padding: 0; border-radius: 0; }
}

/* Colajul revine: ramă neagră cu separări, titlul deasupra (fără suprapunere), ilustrații pe alb. */
@media (min-width: 1101px) {
  .hero-card { width: calc((100% - 60px) / 2 + 24px); max-width: none; padding: 0 32px 32px 0; border-right: 12px solid var(--ink); border-bottom: 12px solid var(--ink); border-bottom-right-radius: 36px; }
  .hero-card::before, .hero-card::after { display: none; }
}
.bento.ilu .tile { background: #fff; }
.bento.ilu .tile img { object-fit: contain; padding: 16px; }
.bento.ilu .t-a img { object-fit: cover; padding: 0; object-position: 70% 75%; }
@media (max-width: 1100px) { .hero-card { margin-bottom: 8px; } .bento.ilu { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto 160px; } .bento.ilu .t-a { grid-column: 1 / 4; grid-row: 1; aspect-ratio: 16 / 10; } .bento.ilu .t-b { grid-column: 1; grid-row: 2; } .bento.ilu .t-c { grid-column: 2; grid-row: 2; } .bento.ilu .t-d { grid-column: 3; grid-row: 2; } }
@media (max-width: 760px) { .bento.ilu { grid-template-rows: auto 112px; } .bento.ilu .tile img { padding: 8px; } }
.faq details:first-of-type { border-top: 0; }

/* Prețul: secțiune luminoasă, ușor de citit (în locul celei negre). */
.pret { background: var(--soft); border-radius: var(--r2) var(--r2) 0 0; padding: 96px 0 96px; }
.pret-head { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; margin-bottom: 64px; }
.pret-head h2 { font-size: var(--t1); line-height: 1.05; margin-bottom: 24px; }
.pret-head p:not(.label) { font-size: var(--t3); line-height: 1.4; color: #333; max-width: 760px; }
.factori { margin: 0 0 80px calc(33.333% + 16px); background: #fff; border-radius: var(--r2); padding: 32px 40px; display: grid; gap: 24px; }
.factori > div { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: baseline; }
.factori b { font-weight: 400; font-size: var(--t2); line-height: 1.15; letter-spacing: -.02em; }
.factori span { color: var(--mute); }
.how { padding-top: 96px; }
@media (max-width: 1100px) { .factori { margin-left: 0; } }
@media (max-width: 760px) {
  .pret { padding: 64px 0; }
  .pret-head { grid-template-columns: 1fr; gap: 16px; }
  .pret-head h2 { font-size: var(--t2); }
  .factori { margin-bottom: 48px; padding: 24px; }
  .factori > div { grid-template-columns: 1fr; gap: 4px; }
}
.bento.ilu .t-a img { object-position: center 70%; }
.bento.ilu .t-b img { object-fit: cover; padding: 0; }
@media (min-width: 1101px) { .bento.ilu .t-a { display: flex; align-items: flex-end; } .bento.ilu .t-a img { object-fit: contain; object-position: center bottom; padding: 16px; height: 75%; } }
.bento.ilu .t-b img { object-fit: contain; padding: 12px; }
@media (min-width: 1101px) { .bento.ilu .t-c img { object-fit: contain; padding: 8px; } }

/* Colțuri rotunjite peste tot în colaj și pe imagini. */
.bento.ilu .tile { border-radius: var(--r1); }
.bento.ilu .tile img { border-radius: 0; }
@media (min-width: 1101px) {
  .bento.ilu .t-a img { height: 70%; }
  .bento.ilu .t-c img { padding: 24px; }
}
.how-box > img, .proj .frame, .frame .d, .faq details, .pret .factori { border-radius: var(--r2); }
.frame .d { border-radius: var(--r1); }
@media (max-width: 1100px) { .bento.ilu .t-a img { object-fit: contain; padding: 8px; } }

/* Ilustrațiile colajului, desenate pe forma fiecărei casete. */
.bento.ilu .tile img { object-fit: contain; padding: 16px; height: 100%; }
@media (min-width: 1101px) { .bento.ilu .t-a { display: block; } .bento.ilu .t-a img { object-fit: cover; object-position: center bottom; padding: 0; height: 100%; } .bento.ilu .t-c img { padding: 24px 16px; } }
@media (max-width: 1100px) { .bento.ilu .t-a img { object-fit: cover; object-position: center 85%; padding: 0; } .bento.ilu .tile img { padding: 8px; } }
@media (min-width: 1101px) { .bento.ilu .t-a img { object-fit: contain; object-position: center bottom; padding: 0 24px 16px; } }

/* Colțurile unde cardul atinge rama: rotunjite (colț întors), și strada centrată în partea vizibilă. */
@media (min-width: 1101px) {
  .hero .hero-card::before, .hero .hero-card::after { display: block; content: ""; position: absolute; width: 24px; height: 24px; background: radial-gradient(circle at 100% 100%, transparent 23px, #fff 24px); }
  .hero .hero-card::after { right: -24px; top: 0; }
  .hero .hero-card::before { left: 0; bottom: -24px; }
  .bento.ilu .t-a img { object-fit: contain; object-position: center; padding: 291px 32px 24px; }
}

/* Colajul cu fotografii reale și site-urile noastre plutind peste ele (ca la Wix și Shopify). */
.bento.ilu.foto .tile { position: relative; background: #ddd; }
.bento.ilu.foto .tile > img { object-fit: cover; padding: 0; height: 100%; width: 100%; }
.bento.ilu.foto .t-a > img { object-position: center 30%; }
.bento.ilu.foto .t-c > img { object-position: 40% center; }
.bento.ilu.foto .win, .bento.ilu.foto .tel { position: absolute; overflow: hidden; background: #fff; }
.bento.ilu.foto .win img, .bento.ilu.foto .tel img { width: 100%; height: auto; padding: 0; object-fit: initial; }
.bento.ilu.foto .win { left: 24px; bottom: 24px; width: 52%; border-radius: var(--r1); border: 4px solid #fff; }
.bento.ilu.foto .tel { right: 24px; bottom: 24px; width: 44%; border-radius: 24px; border: 6px solid var(--ink); }
@media (max-width: 760px) { .bento.ilu.foto .win { left: 8px; bottom: 8px; width: 48%; border-width: 2px; } .bento.ilu.foto .tel { display: none; } }

@media (min-width: 1101px) { .bento.ilu.foto .t-a > img { padding: 0; object-fit: cover; object-position: center 35%; } }
@media (max-width: 1100px) { .bento.ilu.foto .t-a > img { padding: 0; } .bento.ilu.foto .tile > img { padding: 0; } }
@media (min-width: 1101px) { .bento.ilu.foto .t-a > img { position: absolute; left: 0; bottom: 0; height: calc(100% - 291px); object-position: center 25%; } .bento.ilu.foto .t-a { background: #fff; } }

/* ===== Colajul animat: lucrările noastre reale, în lucru (model: cardurile de pe webflow.com, pagină reală plus unealta peste ea). ===== */
.bento.anim .tile { position: relative; background: #fff; display: grid; place-items: center; overflow: hidden; }
.bento.anim .tile > div { width: 100%; height: 100%; position: relative; }
.bento.anim .tile img { width: auto; height: auto; padding: 0; object-fit: fill; }
.bento.anim { --loop: 10s; }
@media (min-width: 1101px) { .bento.anim .t-a > div { position: absolute; left: 0; right: 0; bottom: 0; height: calc(100% - 291px); } }

/* 1. Schița paginii Casa Strunga devine site-ul adevărat când apeși „Publică”, apoi vine o rezervare. */
.sc-site { display: grid; place-items: center; padding: 24px; }
.win2 { position: relative; width: min(88%, 480px); background: #fff; border: 2px solid var(--ink); border-radius: 16px; overflow: hidden; box-shadow: 8px 8px 0 var(--ink); }
.win2 .bar { display: flex; gap: 4px; align-items: center; padding: 4px 4px 4px 12px; border-bottom: 2px solid var(--ink); }
.win2 .bar span { width: 8px; height: 8px; border-radius: 50%; background: #E6E6E3; }
.win2 .bar span:first-child { background: var(--red); }
.win2 .bar em { flex: 1; margin-left: 8px; font-style: normal; font-size: 12px; color: var(--mute); }
.win2 .pub { font-size: 12px; font-weight: 500; background: var(--red); color: var(--ink); padding: 4px 12px; border-radius: 8px; animation: pub var(--loop) infinite; }
.pg { position: relative; aspect-ratio: 16 / 10; background: #fff; }
.wf i { position: absolute; background: #EDEDEA; border-radius: 4px; animation: blk var(--loop) infinite both; }
.wf .w-nav { left: 4%; right: 4%; top: 2%; height: 4%; animation-delay: .1s; }
.wf .w-i1 { left: 4%; width: 25%; top: 10%; height: 49%; animation-delay: .3s; }
.wf .w-i2 { left: 31%; width: 18%; top: 10%; height: 34%; animation-delay: .5s; }
.wf .w-i3 { left: 50%; width: 18%; top: 10%; height: 34%; animation-delay: .7s; }
.wf .w-t1 { left: 72%; width: 14%; top: 24%; height: 5%; animation-delay: .9s; }
.wf .w-t2 { left: 72%; width: 20%; top: 32%; height: 12%; animation-delay: 1.1s; }
.bento.anim .pg .real { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 100% 0 0); animation: wipe var(--loop) infinite; }
.cur { position: absolute; width: 24px; height: 24px; left: 70%; top: 110%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 9-6.5 1.5L16 20l-3 1.5-3.5-7.5L4 19z' fill='%23121212' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; animation: cur var(--loop) infinite; }
.toast { position: absolute; left: 24px; bottom: 24px; display: flex; gap: 8px; align-items: center; background: var(--ink); color: #fff; font-size: 13px; padding: 8px 16px 8px 8px; border-radius: 8px; animation: tst var(--loop) infinite both; }
.toast .ic { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--red); color: var(--ink); font-size: 13px; font-weight: 700; }
@keyframes blk { 0% { opacity: 0; transform: translateY(8px); } 6%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes cur { 0%, 10% { left: 70%; top: 110%; } 22% { left: 90%; top: 4%; transform: none; } 24% { left: 90%; top: 4%; transform: scale(.8); } 26% { left: 90%; top: 4%; transform: none; } 40%, 88% { left: 76%; top: 72%; } 100% { left: 70%; top: 110%; } }
@keyframes pub { 0%, 23% { transform: none; } 24% { transform: scale(.9); } 26%, 100% { transform: none; } }
@keyframes wipe { 0%, 26% { clip-path: inset(0 100% 0 0); opacity: 1; } 40%, 88% { clip-path: inset(0 0 0 0); opacity: 1; } 96% { clip-path: inset(0 0 0 0); opacity: 0; } 100% { clip-path: inset(0 100% 0 0); opacity: 0; } }
@keyframes tst { 0%, 44% { opacity: 0; transform: translateY(12px); } 50%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(12px); } }

/* 2. Căutarea „dentist Sibiu”: Reper urcă pe primul loc. */
.sc-g { display: grid; align-content: center; gap: 8px; padding: 24px; }
.sc-g .q { display: flex; gap: 8px; align-items: center; border: 2px solid var(--ink); border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-bottom: 8px; }
.sc-g .mg { width: 12px; height: 12px; border: 2px solid var(--ink); border-radius: 50%; position: relative; flex: none; }
.sc-g .mg::after { content: ""; position: absolute; width: 6px; height: 2px; background: var(--ink); right: -6px; bottom: -3px; transform: rotate(45deg); }
.sc-g .res { position: relative; display: grid; gap: 4px; padding: 8px 12px; border-radius: 12px; background: #F4F4F2; }
.sc-g .res b { font-size: 13px; font-weight: 500; } .sc-g .res i { height: 6px; width: 70%; background: #E0E0DC; border-radius: 6px; }
.sc-g .r-you { display: flex; gap: 8px; align-items: center; background: #fff; border: 2px solid var(--red); animation: up var(--loop) infinite; z-index: 1; }
.bento.anim .sc-g .r-you img { width: 24px; flex: none; }
.sc-g .r-you > div { display: grid; gap: 4px; flex: 1; }
.sc-g .r-o1 { animation: dn1 var(--loop) infinite; } .sc-g .r-o2 { animation: dn1 var(--loop) infinite; }
.sc-g .st { position: absolute; right: 12px; top: 8px; color: var(--red); font-size: 18px; transform: scale(0); animation: pop var(--loop) infinite; }
.sc-g .badge { justify-self: start; font-size: 12px; font-weight: 500; background: var(--red); padding: 4px 12px; border-radius: 8px; animation: fade var(--loop) infinite both; }
@keyframes up { 0%, 18% { transform: translateY(0); } 34%, 86% { transform: translateY(calc(-200% - 16px)); } 96%, 100% { transform: translateY(0); } }
@keyframes dn1 { 0%, 18% { transform: none; } 34%, 86% { transform: translateY(calc(100% + 8px)); } 96%, 100% { transform: none; } }
@keyframes pop { 0%, 34% { transform: scale(0); } 40% { transform: scale(1.3); } 44%, 86% { transform: scale(1); } 94%, 100% { transform: scale(0); } }
@keyframes fade { 0%, 40% { opacity: 0; } 46%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } }

/* 3. Site-ul Casa 1562 pe telefon: derulezi, apoi intră o programare. */
.sc-ph { display: grid; place-items: center; padding: 24px; }
.ph { position: relative; width: min(78%, 260px); aspect-ratio: 9 / 17; border: 8px solid var(--ink); border-radius: 32px; background: #fff; overflow: hidden; }
.ph .nt { position: absolute; z-index: 2; top: 8px; left: 50%; width: 64px; height: 16px; margin-left: -32px; background: var(--ink); border-radius: 16px; }
.ph .scr { position: absolute; inset: 32px 0 0; overflow: hidden; }
.bento.anim .ph .scr img { display: block; width: 100%; height: auto; animation: scr var(--loop) infinite; }
.ph .n { position: absolute; z-index: 3; left: 8px; right: 8px; top: 32px; display: grid; gap: 4px; background: #fff; border-radius: 16px; padding: 8px 12px; font-size: 12px; border: 2px solid var(--ink); animation: nt1 var(--loop) infinite both; }
.ph .n b { font-weight: 500; } .ph .n span { color: var(--mute); }
@keyframes scr { 0%, 10% { transform: none; } 56%, 88% { transform: translateY(-40%); } 98%, 100% { transform: none; } }
@keyframes nt1 { 0%, 58% { opacity: 0; transform: translateY(-16px) scale(.96); } 64%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }

/* 4. Sigla Fingerling: semnul, numele și culorile apar pe rând. */
.sc-br { display: grid; place-items: start center; padding: 24px 24px 64px; }
.kit { width: min(84%, 248px); border: 2px solid var(--ink); border-radius: 16px; padding: 16px; display: grid; gap: 12px; justify-items: center; background: #fff; }
.bento.anim .kit .semn { width: 64px; height: 64px; animation: ks1 var(--loop) infinite both; }
.bento.anim .kit .nume { width: 140px; animation: ks2 var(--loop) infinite both; }
.kit .sw { display: flex; gap: 8px; }
.kit .sw span { width: 24px; height: 24px; border-radius: 50%; background: var(--c); border: 1px solid #E0E0DC; animation: ks3 var(--loop) infinite both; }
.kit .sw span:nth-child(2) { animation-delay: .2s; } .kit .sw span:nth-child(3) { animation-delay: .4s; }
.okc { position: absolute; left: 50%; bottom: 24px; white-space: nowrap; background: var(--ink); color: #fff; font-size: 12px; padding: 8px 16px; border-radius: 8px; animation: okc var(--loop) infinite both; }
@keyframes ks1 { 0%, 6% { opacity: 0; transform: scale(.6) rotate(-12deg); } 14% { opacity: 1; transform: scale(1.08); } 18%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes ks2 { 0%, 20% { opacity: 0; clip-path: inset(0 100% 0 0); } 32%, 88% { opacity: 1; clip-path: inset(0 0 0 0); } 96%, 100% { opacity: 0; } }
@keyframes ks3 { 0%, 34% { opacity: 0; transform: scale(0); } 40% { opacity: 1; transform: scale(1.2); } 44%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(0); } }
@keyframes okc { 0%, 50% { opacity: 0; transform: translate(-50%, 12px); } 56%, 88% { opacity: 1; transform: translate(-50%, 0); } 96%, 100% { opacity: 0; transform: translate(-50%, 12px); } }

/* Pe telefon: site-ul sus, căutarea și sigla dedesubt. */
@media (max-width: 1100px) { .bento.anim .t-a { min-height: 260px; } }
@media (max-width: 760px) {
  .bento.anim { grid-template-columns: 1fr 1fr; grid-template-rows: 288px 232px; }
  .bento.anim .t-a { grid-column: 1 / 3; grid-row: 1; aspect-ratio: auto; min-height: 0; }
  .bento.anim .t-b { grid-column: 1; grid-row: 2; } .bento.anim .t-d { grid-column: 2; grid-row: 2; } .bento.anim .t-c { display: none; }
  .sc-site { padding: 12px 12px 56px; } .sc-g, .sc-br { padding: 12px; }
  .win2 { width: 80%; }
  .toast { left: 8px; bottom: 8px; font-size: 11px; }
  .sc-g .q, .sc-g .res b, .okc { font-size: 11px; }
  .sc-g .r-o2, .sc-g .badge { display: none; }
  .sc-g .r-you { animation-name: up1; } .bento.anim .sc-g .r-you img { width: 16px; }
  .sc-br { padding-bottom: 48px; } .kit { width: 92%; padding: 12px 8px; gap: 8px; } .bento.anim .kit .semn { width: 48px; height: 48px; } .bento.anim .kit .nume { width: 100%; max-width: 120px; }
  .okc { bottom: 8px; padding: 4px 8px; }
}
@keyframes up1 { 0%, 18% { transform: translateY(0); } 34%, 86% { transform: translateY(calc(-100% - 8px)); } 96%, 100% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .bento.anim * { animation: none !important; }
  .wf i, .toast, .sc-g .badge, .ph .n, .kit *, .okc { opacity: 1 !important; transform: none !important; }
  .pg .real, .kit .nume { clip-path: none !important; }
  .okc { transform: translateX(-50%) !important; }
  .sc-g .st { transform: none !important; }
  .cur { display: none; }
}

/* ===== „Ce putem face”: grilă de celule cu vizualul lucrului și numele dedesubt (model: framer.com, „a full platform”). ===== */
.pret .ce-facem { display: block; margin-top: 80px; }
.sv-head { display: grid; gap: 8px; margin-bottom: 32px; max-width: 640px; }
.sv-h { font-size: var(--t2); line-height: 1.1; font-weight: 500; letter-spacing: -.5px; }
.sv-head p { color: var(--mute); }
.sv-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; }
.sv { background: #fff; display: grid; grid-template-rows: 1fr auto; gap: 24px; padding: 24px; min-height: 320px; transition: background-color .2s ease; }
.sv .vis { display: grid; place-items: center; min-height: 176px; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
@media (hover: hover) { .sv:hover .vis { transform: translateY(-4px); } }
.sv-t { display: grid; gap: 4px; justify-items: start; }
.sv-t h3 { font-size: var(--t3); line-height: 1.25; font-weight: 500; }
.sv-t p { color: var(--mute); }
.sv-t .btn { margin-top: 12px; }
.sv { grid-column: span 2; }
.c-site, .c-seo, .c-care { grid-column: span 4; } .c-app { grid-row: span 2; } .c-any { grid-column: 1 / -1; grid-template-rows: none; grid-template-columns: auto 1fr; align-items: center; min-height: 0; }
.c-any .sv-t { grid-template-columns: 1fr auto; align-items: center; column-gap: 24px; } .c-any .sv-t h3, .c-any .sv-t p { grid-column: 1; } .c-any .sv-t .btn { grid-row: 1 / 3; grid-column: 2; margin: 0; }
.c-any { background: var(--red); } .c-any .vis { min-height: 0; } .c-any .sv-t p { color: var(--ink); }
.sv img { display: block; }

.m-win { width: min(100%, 520px); border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; background: #fff; }
.m-bar { display: flex; gap: 4px; padding: 8px 12px; border-bottom: 2px solid var(--ink); }
.m-bar span { width: 8px; height: 8px; border-radius: 50%; background: #E6E6E3; } .m-bar span:first-child { background: var(--red); }
.m-win img { width: 100%; height: auto; }

.m-ph { position: relative; width: 208px; height: 400px; border: 8px solid var(--ink); border-radius: 36px; background: #fff; overflow: hidden; }
.m-nt { position: absolute; top: 8px; left: 50%; width: 64px; height: 16px; margin-left: -32px; background: var(--ink); border-radius: 16px; }
.m-app { position: absolute; inset: 40px 12px 12px; display: flex; flex-direction: column; gap: 12px; }
.m-ttl { font-size: 20px; font-weight: 500; display: flex; justify-content: space-between; align-items: center; }
.m-ttl em { font-style: normal; font-size: 12px; background: var(--red); padding: 2px 8px; border-radius: 8px; }
.m-app ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.m-app li { display: grid; gap: 2px; padding: 8px 12px; background: var(--soft); border-radius: 12px; font-size: 13px; }
.m-app li b { font-weight: 500; } .m-app li span { color: var(--mute); }
.m-app li:first-child { background: #fff; border: 2px solid var(--ink); }
.m-tab { margin-top: auto; display: flex; justify-content: space-around; padding-top: 8px; border-top: 1px solid var(--line); }
.m-tab i { width: 20px; height: 20px; border-radius: 8px; background: #E6E6E3; } .m-tab i.on { background: var(--ink); }

.m-prod { position: relative; display: flex; gap: 12px; align-items: center; padding: 12px; border: 2px solid var(--ink); border-radius: 16px; background: #fff; }
.m-prod img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; }
.m-prod > div { display: grid; gap: 8px; justify-items: start; } .m-prod b { font-weight: 500; }
.m-add { font-size: 13px; font-weight: 500; background: var(--ink); color: #fff; padding: 4px 12px; border-radius: 8px; }
.m-cart { position: absolute; right: -12px; top: -12px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--red); border: 2px solid var(--ink); font-size: 13px; font-weight: 700; }

.m-cal { display: grid; gap: 12px; justify-items: start; padding: 16px; border: 2px solid var(--ink); border-radius: 16px; background: #fff; }
.m-cal b { font-weight: 500; }
.m-sl { display: flex; gap: 8px; } .m-sl span { font-size: 13px; padding: 4px 12px; border-radius: 8px; background: var(--soft); } .m-sl .on { background: var(--ink); color: #fff; }
.m-ok { font-size: 13px; font-weight: 500; background: var(--red); padding: 4px 12px; border-radius: 8px; }

.m-dash { width: min(100%, 240px); display: grid; gap: 12px; padding: 16px; border: 2px solid var(--ink); border-radius: 16px; background: #fff; }
.m-dash b { font-weight: 500; font-size: 14px; }
.m-bars { display: flex; align-items: flex-end; gap: 8px; height: 96px; } .m-bars span { flex: 1; background: #E6E6E3; border-radius: 4px 4px 0 0; } .m-bars span:nth-child(4), .m-bars span:last-child { background: var(--red); }

.m-logo { display: grid; gap: 16px; justify-items: center; }
.m-logo img { width: 96px; height: 96px; border-radius: 16px; }
.m-sw { display: flex; gap: 8px; } .m-sw span { width: 24px; height: 24px; border-radius: 50%; border: 1px solid #E0E0DC; }

.m-g { width: min(100%, 260px); display: grid; gap: 8px; }
.m-q { display: flex; gap: 8px; align-items: center; border: 2px solid var(--ink); border-radius: 8px; padding: 8px 12px; font-size: 13px; background: #fff; }
.m-mg { width: 12px; height: 12px; border: 2px solid var(--ink); border-radius: 50%; position: relative; flex: none; }
.m-mg::after { content: ""; position: absolute; width: 6px; height: 2px; background: var(--ink); right: -6px; bottom: -3px; transform: rotate(45deg); }
.m-r { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--soft); font-size: 13px; }
.m-r.on { background: #fff; border: 2px solid var(--red); }
.m-r img { width: 24px; height: 24px; } .m-r div { display: grid; gap: 2px; } .m-r b { font-weight: 500; } .m-r span { color: var(--mute); min-height: 8px; }

.m-log { list-style: none; padding: 0; margin: 0; width: min(100%, 400px); display: grid; gap: 8px; }
.m-log li { display: flex; gap: 12px; align-items: center; padding: 8px 12px; background: #fff; border: 2px solid var(--ink); border-radius: 12px; font-size: 14px; }
.m-log i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--red); font-style: normal; font-size: 12px; font-weight: 700; flex: none; }
.m-log span { flex: 1; } .m-log em { font-style: normal; color: var(--mute); font-size: 13px; }

.m-plus { width: 96px; height: 96px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--ink); font-size: 48px; line-height: 1; background: #fff; }

@media (max-width: 1100px) {
  .sv-grid { grid-template-columns: 1fr 1fr; }
  .sv { grid-column: auto; } .c-site, .c-seo, .c-care, .c-any { grid-column: 1 / -1; } .c-app { grid-row: span 2; }
}
@media (max-width: 760px) {
  .pret .ce-facem { margin-top: 56px; }
  .sv-h { font-size: 32px; }
  .sv-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; background: none; border: 0; border-radius: 0; margin: 0 calc(-1 * var(--side)); padding: 0 var(--side) 8px; scroll-padding: 0 var(--side); scrollbar-width: none; }
  .sv-grid::-webkit-scrollbar { display: none; }
  .sv, .c-site, .c-seo, .c-care, .c-any { flex: 0 0 84%; scroll-snap-align: start; border: 1px solid var(--line); border-radius: var(--r2); min-height: 400px; }
  .m-ph { transform: scale(.8); margin: -40px 0; }
  .c-any { grid-template-columns: 1fr; grid-template-rows: 1fr auto; } .c-any .vis { min-height: 176px; } .c-any .sv-t { grid-template-columns: 1fr; } .c-any .sv-t .btn { grid-row: auto; grid-column: auto; margin-top: 12px; }
  .sv { min-height: 0; padding: 20px; gap: 20px; }
  .sv .vis { min-height: 0; }
}

/* ===== Refacerea neoficială Dr. Blaga: înainte și după, pe toată lățimea grilei. ===== */
.grid .proj.ba { grid-column: 1 / -1; margin-top: 0; }
.ba-pics { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 16px; }
.ba-pics figure { margin: 0; display: grid; gap: 8px; }
.ba-img { position: relative; display: block; border-radius: var(--r2); overflow: hidden; aspect-ratio: 16 / 10; background: #ECECE9; outline: 1px solid rgba(20, 20, 20, .08); }
.ba-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ba-pics figure { position: relative; }
.ba-tag { position: absolute; z-index: 1; left: 16px; bottom: 48px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 500; padding: 4px 12px; border-radius: 8px; }
.ba-tag.y { background: var(--red); }
.ba-pics figcaption { color: var(--mute); font-size: 14px; }
.ba-nota { color: var(--mute); max-width: 640px; margin-top: 4px; }
.ba-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
@media (max-width: 760px) { .ba-pics { grid-template-columns: 1fr; gap: 16px; } }
.t-c .sc-ph { place-items: center; padding: 32px 24px; }
.t-c .ph { width: min(100%, 320px); aspect-ratio: auto; height: 100%; }