/* Tudox: pagina principală */

/* ---------------------------------------------------------------- hero */
.tx-hero{position:relative;color:#fff;background-color:var(--blue);
  background-image:
    linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:-1px -1px}
.hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:center;
  padding-block:clamp(48px,6vw,88px) clamp(56px,6vw,80px)}
.hero-copy h1{color:#fff;font-size:clamp(2.3rem,3.9vw,3.6rem)}
.nb{display:inline-block}
.hero-lead{margin-top:24px;max-width:46ch;color:var(--blue-soft);font-size:1.08rem;line-height:1.65}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero-call{margin-top:22px;color:var(--blue-soft);font-size:.95rem}
.hero-call a{color:#fff;font-weight:600;text-decoration:none;border-bottom:2px solid rgba(255,255,255,.35)}
.hero-call a:hover{border-color:var(--orange)}
.hero-visual{position:relative}

.tx-drawing{width:100%;height:auto;overflow:visible}
.tx-drawing .floor{stroke:#fff;stroke-width:2;fill:none}
.tx-drawing .hatch{stroke:rgba(255,255,255,.28);stroke-width:1.2;fill:none}
.tx-drawing .up{fill:var(--blue-p);stroke:#fff;stroke-width:2;stroke-linejoin:miter}
.tx-drawing .g-holes rect{fill:#9fc0e0}
.tx-drawing .g-holes .plate{fill:#fff}
.tx-drawing .g-load rect{fill:rgba(255,255,255,.045);stroke:#d4e3f1;stroke-width:1.3;stroke-opacity:.72}
.tx-drawing .g-load path{fill:none;stroke:#d4e3f1;stroke-width:1.3;stroke-opacity:.72}
.tx-drawing .g-load .wrap{stroke-opacity:.38}
.tx-drawing .ext{fill:none;stroke:rgba(201,216,231,.5);stroke-width:1}
.tx-drawing .dim{fill:none;stroke:var(--blue-soft);stroke-width:1.3}
.tx-drawing .dim-t{font:600 17px var(--f-tech);fill:#fff;letter-spacing:.03em}

.titleblock{position:absolute;right:0;bottom:0;width:min(440px,78%);display:grid;grid-template-columns:1.45fr 1fr 1fr;
  background:var(--blue);border:1.5px solid rgba(255,255,255,.8);font-family:var(--f-tech)}
.titleblock > div{padding:6px 12px 8px;border-left:1px solid rgba(255,255,255,.4)}
.titleblock > div:nth-child(2){border-left:0}
.titleblock .tb-brand{grid-column:1/-1;border-left:0;border-bottom:1px solid rgba(255,255,255,.4);display:flex;justify-content:space-between;
  align-items:baseline;gap:12px;background:rgba(255,255,255,.08)}
.titleblock .tb-brand dt{font:600 .98rem/1.25 var(--f-sans);color:#fff;letter-spacing:-.01em}
.titleblock .tb-brand dd{font-size:1rem;color:var(--blue-soft);font-weight:500}
.titleblock dt{font-size:.8rem;font-weight:500;color:var(--blue-soft);letter-spacing:.03em;line-height:1.2}
.titleblock dd{font-size:1.1rem;font-weight:600;color:#fff;line-height:1.2;letter-spacing:.01em}

@media (prefers-reduced-motion:no-preference){
  .tx-drawing .d{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1s cubic-bezier(.45,0,.2,1) forwards}
  .tx-drawing .floor{animation-delay:.1s}
  .tx-drawing .up{fill-opacity:0;animation:draw 1s .25s cubic-bezier(.45,0,.2,1) forwards,fillin .5s 1s forwards}
  .tx-drawing .g-holes{opacity:0;animation:fade .4s 1.05s forwards}
  .tx-drawing .beam{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0);
    animation:beam .42s cubic-bezier(.3,.7,.2,1) forwards;animation-delay:calc(1.1s + var(--i) * .055s)}
  .tx-drawing .g-load{opacity:0;animation:fade .7s 1.75s forwards}
  .tx-drawing .g-dim .d{animation-delay:1.95s;animation-duration:.8s}
  .tx-drawing .dim-t,.tx-drawing .hatch{opacity:0;animation:fade .45s 2.35s forwards}
  .titleblock{opacity:0;transform:translateY(8px);animation:rise .5s 2.4s forwards}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fillin{to{fill-opacity:1}}
@keyframes fade{to{opacity:1}}
@keyframes beam{to{transform:scaleX(1)}}

@media (max-width:1100px){
  .titleblock{position:relative;width:100%;margin-top:0}
  .tx-drawing{margin-bottom:-12%}
}
@media (max-width:600px){
  .tx-drawing .dim-t{font-size:27px}
  .hero-cta .btn{flex:1 1 100%}
}
@media (max-width:900px){.hero-in{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){
  .titleblock{grid-template-columns:1fr 1fr}
  .titleblock > div:nth-child(2){grid-column:1/-1;border-bottom:1px solid rgba(255,255,255,.4)}
  .titleblock > div:nth-child(3){border-left:0}
  .titleblock .tb-brand{flex-direction:column;gap:0}
}

/* ---------------------------------------------------------------- categorii */
.bento{display:grid;grid-template-columns:1.35fr 1fr 1fr;grid-template-rows:repeat(2,minmax(230px,268px));gap:16px}
.tile{position:relative;display:flex;align-items:flex-end;overflow:hidden;border-radius:12px;background:var(--steel-2);color:#fff;text-decoration:none;isolation:isolate}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.tile::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(24,58,92,0) 30%,rgba(24,58,92,.55) 62%,rgba(18,44,70,.94) 100%)}
.tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--orange);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s ease}
.tile:hover::after,.tile:focus-visible::after{transform:scaleX(1)}
.tile-txt{display:block;padding:20px 22px 22px}
.tile-t{display:block;font-weight:600;font-size:1.2rem;line-height:1.25}
.tile-d{display:block;margin-top:4px;font-size:.92rem;line-height:1.45;color:rgba(255,255,255,.86);max-width:36ch}
.tile-big{grid-row:span 2}
.tile-big .tile-txt{padding:28px 30px 30px}
.tile-big .tile-t{font-size:clamp(1.5rem,2.2vw,1.9rem);font-weight:700;letter-spacing:-.015em}
.tile-big .tile-d{font-size:1rem}
@media (prefers-reduced-motion:reduce){.tile::after{transition:none}}
.more-cats{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:22px}
.more-l{color:var(--muted);font-weight:500;margin-right:4px}
.more-cats ul{display:flex;flex-wrap:wrap;gap:8px}
.more-cats li a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1.5px solid var(--line);border-radius:999px;
  text-decoration:none;color:var(--blue-ink);font-weight:500;font-size:.92rem;background:#fff}
.more-cats li a:hover{border-color:var(--blue)}
.more-cats .link-strong{margin-left:auto}
@media (max-width:900px){
  .bento{grid-template-columns:1fr 1fr;grid-template-rows:none}
  .tile-big{grid-column:1/-1;grid-row:auto;aspect-ratio:16/9;min-height:280px}
  .tile{min-height:210px}
  .more-cats .link-strong{margin-left:0}
}
@media (max-width:560px){
  .bento{grid-template-columns:1fr}
  .tile-big{aspect-ratio:4/3;min-height:0}
  .tile{min-height:190px}
}

/* ---------------------------------------------------------------- configurator */
.cfg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.cfg-copy p{margin-top:18px;color:var(--blue-soft);max-width:50ch;font-size:1.05rem}
.cfg-fields{margin:28px 0 32px;display:grid;gap:8px;max-width:440px}
.cfg-fields li{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:46px;padding:0 14px 0 16px;
  border:1px solid rgba(255,255,255,.28);border-radius:8px;background:rgba(255,255,255,.05);font-size:.95rem}
.cfg-fields li span:last-child{font:600 1rem var(--f-tech);color:var(--blue-soft);letter-spacing:.04em;padding:3px 10px;border-radius:6px;background:rgba(255,255,255,.08)}
.cfg-visual{border-radius:16px;overflow:hidden;background:#fff;border:6px solid rgba(255,255,255,.12);background-clip:padding-box}
.cfg-visual img{width:100%;aspect-ratio:1/1;object-fit:cover}
@media (max-width:900px){.cfg{grid-template-columns:1fr}.cfg-visual{max-width:520px}}

/* ---------------------------------------------------------------- servicii: ruleta cu etape */
.steps{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px;padding-top:86px;counter-reset:step}
.steps::before{content:"";position:absolute;left:0;right:0;top:0;height:40px;border-radius:4px;background-color:var(--orange);
  background-image:linear-gradient(90deg,#fff 0 2px,transparent 2px),linear-gradient(90deg,rgba(255,255,255,.85) 0 1px,transparent 1px);
  background-size:60px 18px,12px 9px;background-repeat:repeat-x;box-shadow:inset 0 -4px 0 rgba(0,0,0,.1)}
.step{position:relative}
.step-n{position:absolute;top:-66px;left:0;display:grid;place-items:center;width:46px;height:46px;border-radius:8px;background:var(--blue);color:#fff;
  font:700 1.5rem/1 var(--f-tech);box-shadow:0 0 0 4px #fff}
.step-n::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:18px;background:var(--blue);transform:translateX(-50%)}
.step h3{margin-bottom:8px}
.step h3 a{text-decoration:none}
.step h3 a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:4px}
.step p{color:var(--muted);font-size:.95rem;line-height:1.55}
.extra{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:clamp(48px,6vw,72px)}
.extra-i{display:flex;gap:14px;align-items:flex-start;padding:20px;border:1.5px solid var(--line);border-radius:12px;text-decoration:none;color:var(--text);transition:border-color .15s}
.extra-i:hover{border-color:var(--blue)}
.extra-i .ic{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:var(--steel);color:var(--blue)}
.extra-i .ic .i{width:24px;height:24px}
.extra-i b{display:block;color:var(--blue-ink);font-weight:600;line-height:1.3}
.extra-i span span{display:block;margin-top:4px;font-size:.88rem;line-height:1.45;color:var(--muted)}
@media (max-width:1100px){.extra{grid-template-columns:1fr 1fr}}
@media (max-width:900px){
  .steps{grid-template-columns:1fr;gap:30px;padding:0 0 0 76px}
  .steps::before{left:0;right:auto;top:0;bottom:0;width:36px;height:auto;
    background-image:linear-gradient(#fff 0 2px,transparent 2px),linear-gradient(rgba(255,255,255,.85) 0 1px,transparent 1px);
    background-size:16px 60px,8px 12px;background-repeat:repeat-y}
  .step-n{top:-2px;left:-62px;box-shadow:0 0 0 4px #fff}
  .step-n::after{display:none}
}
@media (max-width:560px){.extra{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- proiecte si noutati */
.news{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,3vw,40px);align-items:start}
.news-feat a.nf-img{display:block;border-radius:14px;overflow:hidden;background:var(--steel-2)}
.news-feat img{width:100%;aspect-ratio:3/2;object-fit:cover}
.news-feat .nf-txt{margin-top:20px;max-width:56ch}
.news-feat h3{font-size:clamp(1.3rem,2vw,1.6rem);margin-top:4px;letter-spacing:-.015em}
.news-feat h3 a,.news-list a{text-decoration:none}
.news-feat h3 a:hover{color:var(--blue)}
.news-feat p{margin-top:8px;color:var(--muted)}
.news-list{display:grid}
.news-list li + li{border-top:1px solid var(--line)}
.news-list a{display:grid;grid-template-columns:132px 1fr;gap:18px;align-items:center;padding:16px 0}
.news-list li:first-child a{padding-top:0}
.news-list img,.news-list .ph{width:132px;aspect-ratio:4/3;object-fit:cover;border-radius:8px;background:var(--steel-2)}
.news-t{display:block;font-weight:600;color:var(--blue-ink);line-height:1.35;margin-top:2px}
.news-list a:hover .news-t{color:var(--blue);text-decoration:underline;text-underline-offset:4px}
@media (max-width:900px){.news{grid-template-columns:1fr}}
@media (max-width:420px){.news-list a{grid-template-columns:96px 1fr;gap:14px}.news-list img,.news-list .ph{width:96px}}

/* ---------------------------------------------------------------- clienti */
.clients{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,72px);align-items:center}
.clients-copy h2{font-size:clamp(2rem,3.4vw,3rem);line-height:1.08}
.clients-copy p{margin-top:18px;color:var(--blue-soft);font-size:1.05rem;max-width:40ch}
.logo-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,1vw,12px)}
.logo-grid li{aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 8px 18px rgba(10,30,52,.22)}
.logo-grid img{width:100%;height:100%;object-fit:cover}
@media (max-width:1024px){.clients{grid-template-columns:minmax(0,1fr)}.clients-copy p{max-width:56ch}.logo-grid{max-width:760px}}
@media (max-width:640px){
  .logo-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .logo-grid li{border-radius:12px;box-shadow:0 6px 14px rgba(10,30,52,.22)}
}

/* ---------------------------------------------------------------- pareri */
.rev{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,36px);align-items:center}
.rev h2{color:#fff}
.rev-note{margin-top:14px;color:rgba(255,255,255,.88);max-width:30ch}
.bubble{position:relative;background:#fff;color:var(--blue-ink);border-radius:18px;padding:26px 26px 24px;margin-bottom:18px}
.bubble::after{content:"";position:absolute;left:34px;bottom:-16px;width:30px;height:18px;background:#fff;clip-path:polygon(0 0,100% 0,0 100%)}
.stars{display:flex;gap:4px;color:#f5a524}
.stars .i{width:22px;height:22px}
.bubble blockquote p{margin-top:14px;font-size:1.06rem;line-height:1.55}
.bubble figcaption{margin-top:16px;font-size:.9rem;color:var(--muted)}
.bubble figcaption b{display:block;color:var(--blue-ink);font-size:1rem}
@media (max-width:1024px){.rev{grid-template-columns:1fr 1fr}.rev-head{grid-column:1/-1}}
@media (max-width:640px){.rev{grid-template-columns:1fr}}