/* Romanian website-creation funnel: builds on /home.css (same tokens, fonts, sections). */
.builder{margin:0;width:100%;max-width:580px;justify-self:center}
.build-svg{width:100%;height:auto;overflow:visible;font-family:var(--body)}
.build-svg *{transform-box:fill-box}
.build-svg{--bc:#b45309}
.bc{fill:var(--bc);transition:fill .5s}
.lap,.ph{filter:drop-shadow(0 26px 34px rgba(2,12,40,.35))}
.bt-url{fill:var(--slate);font-family:var(--mono)}
.bt-name{fill:var(--navy);font-weight:700}
.bt-hero{fill:#fff;font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 86}
.bt-hero-s,.bt-hero-s2{fill:#fff;font-family:var(--display);font-weight:700}
.bt-btn{fill:var(--bc);font-weight:700}
.bt-wa{fill:#fff;font-weight:700}
.bt-b{fill:var(--navy);font-weight:700}
.bt-s{fill:var(--slate)}
.bld{opacity:0;transform:translateY(10px);transition:opacity .35s,transform .45s cubic-bezier(.2,.9,.3,1.25)}
.bld.on{opacity:1;transform:none}
.badge{opacity:0;transform:translateY(14px) scale(.94);transform-origin:left center;transition:opacity .4s,transform .5s cubic-bezier(.2,.9,.3,1.3);filter:drop-shadow(0 18px 26px rgba(2,12,40,.35))}
.badge.on{opacity:1;transform:none}
.build-svg.fade .bld,.build-svg.fade .badge{opacity:0;transition-duration:.35s}
/* clock illustration */
.clock-ring{stroke-dasharray:226;stroke-dashoffset:226;animation:clockfill 6s linear infinite}
@keyframes clockfill{to{stroke-dashoffset:0}}
.hand-m{transform-origin:0 100%;animation:spin 6s linear infinite}
.hand-h{transform-origin:0 50%;animation:spin 72s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.paused .art *{animation-play-state:paused}
.form-foot{font-size:13px;color:var(--slate);text-align:center;margin-top:8px}
@media (prefers-reduced-motion:reduce){.bld,.badge{opacity:1;transform:none}.clock-ring{stroke-dashoffset:0}}

/* ===== Lead funnel layout ===== */
.funnel-page .top-row{justify-content:space-between}
.f-hero{padding:clamp(28px,5vw,64px) 0 clamp(48px,6vw,80px)}
.f-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;grid-template-areas:"head form" "checks form";gap:22px clamp(32px,5vw,72px);align-items:start}
.f-head{grid-area:head}
.f-checks{grid-area:checks}
.f-form{grid-area:form;scroll-margin-top:84px;box-shadow:0 30px 60px -28px rgba(2,12,40,.55)}
.f-hero h1{font-size:clamp(42px,6.2vw,82px)}
.f-hero .lede{margin-top:20px}
.f-checks{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:12px}
.f-checks li{display:flex;align-items:center;gap:12px;font-weight:500;font-size:17px;color:#fff}
.f-checks svg{width:24px;height:24px;flex:none}
.f-checks circle{fill:#fff}
.f-checks path{fill:none;stroke:var(--signal);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.f-form-title{font:800 28px/1.05 var(--display);font-variation-settings:"wdth" 86;letter-spacing:-.02em;margin-bottom:6px}
.f-form-sub{color:var(--slate);font-size:15px;margin-bottom:18px}
.f-form .field{margin-bottom:13px}
.f-submit{font-size:17px;padding:19px 24px;box-shadow:0 12px 24px -12px rgba(8,102,255,.7)}
.f-show{padding:clamp(56px,8vw,104px) 0;background:#fff}
.f-show-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:center}
.f-show h2{font-size:clamp(34px,4.4vw,56px);font-variation-settings:"wdth" 84;font-weight:800;margin-bottom:18px}
.f-show p{color:var(--slate);margin-bottom:28px;max-width:32em}
.f-show .builder{max-width:560px}
.f-steps h2{font-size:clamp(34px,4.4vw,56px);font-variation-settings:"wdth" 84;font-weight:800;margin-bottom:32px}
.steps-3{grid-template-columns:repeat(3,1fr)}
.funnel-page .steps li{opacity:1;transform:none}
.f-cta-row{margin-top:32px}
.f-final{background:var(--navy);color:#fff;padding:clamp(48px,7vw,88px) 0}
.f-final-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.f-final h2{font-size:clamp(30px,4vw,50px);font-variation-settings:"wdth" 84;font-weight:800;max-width:16em}
.f-final em{font-style:normal;color:#7fb0ff}
.f-final .btn{background:var(--signal);color:#fff}
.funnel-page .foot-row p:last-child{margin-left:auto}
@media (max-width:980px){
 .f-hero-grid{grid-template-columns:1fr;grid-template-areas:"head" "form" "checks"}
 .f-show-grid{grid-template-columns:1fr}
 .steps-3{grid-template-columns:1fr}
}
@media (max-width:720px){.funnel-page .foot-row p:last-child{margin-left:0}.f-form-title{font-size:24px}}
.f-hero-grid{grid-template-rows:auto 1fr}
.hero .f-form .btn{background:var(--signal);color:#fff}
.hero .f-form .btn:hover{background:var(--signal-deep)}

/* info sections */
.f-info,.f-get{padding:clamp(56px,8vw,104px) 0}
.f-info{background:#fff}
.f-get{background:var(--signal);color:#fff}
.f-info h2,.f-get h2{font-size:clamp(32px,4.4vw,56px);font-variation-settings:"wdth" 84;font-weight:800;max-width:18em;margin-bottom:clamp(28px,4vw,44px)}
.f-why{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.f-why article{background:var(--paper);border-radius:var(--r);padding:26px 24px;border-top:4px solid var(--signal)}
.f-why h3{font-size:22px;margin-bottom:10px}
.f-why p{color:var(--slate);font-size:16px}
.f-get-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.f-get-grid li{display:flex;gap:16px;align-items:flex-start;background:#fff;color:var(--ink);border-radius:var(--r);padding:22px}
.f-get-grid h3{font-size:21px;margin-bottom:6px}
.f-get-grid p{color:var(--slate);font-size:16px}
.f-sections{margin-top:36px;padding:28px;border-radius:var(--r);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25)}
.f-sections h3{font-size:22px;margin-bottom:16px;color:#fff}
.f-sections ul{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.f-sections li{background:#fff;color:var(--navy);font-weight:600;font-size:14px;border-radius:99px;padding:9px 14px}
.f-sections p{color:#fff;font-size:15px}
.f-get .btn{background:#fff;color:var(--signal)}
/* steps on white so the blue sections alternate */
.funnel-page .f-steps{background:#fff;color:var(--ink)}
.funnel-page .f-steps .steps li{background:var(--paper)}
.funnel-page .f-steps .steps li:not(:last-child)::after{border-top-color:var(--signal)}
.funnel-page .f-steps .btn{background:var(--signal);color:#fff}
.funnel-page .faq{background:var(--paper)}
@media (max-width:980px){.f-why{grid-template-columns:1fr}.f-get-grid{grid-template-columns:1fr}}

/* ===== 2D animated illustrations ===== */
.f-why .art{width:150px;height:auto;margin:0 0 14px}
.f-get-grid .art{width:110px;height:auto;flex:none;margin-top:0;background:var(--paper);border-radius:12px;padding:6px}
.f-get-grid li{align-items:center}
.f-steps .steps .art{width:130px;margin-bottom:10px}
.art *{transform-box:fill-box}
/* google search: query types, results appear, first one is yours */
.typing{transform-origin:left;animation:typeq 5s steps(14) infinite}
@keyframes typeq{0%{transform:scaleX(0)}35%,100%{transform:scaleX(1)}}
.caret{animation:blink 1s steps(2,start) infinite}
.res{opacity:0;animation:res 5s infinite}
.r1{animation-delay:1.9s}.r2{animation-delay:2.2s}.r3{animation-delay:2.5s}
@keyframes res{0%{opacity:0;transform:translateY(6px)}8%,80%{opacity:1;transform:none}92%,100%{opacity:0}}
.r1 rect:first-child{animation:glow 5s infinite;animation-delay:1.9s}
@keyframes glow{0%,20%{stroke-width:2}30%{stroke-width:4}40%,100%{stroke-width:2}}
/* palette: brand colour swaps on the mock page */
.swap,.swap-btn{animation:brand 6s infinite}
@keyframes brand{0%,30%{fill:#0866ff}33%,63%{fill:#db2777}66%,96%{fill:#0f766e}100%{fill:#0866ff}}
.sw{transform-origin:center;animation:swp 6s infinite}
.s2{animation-delay:2s}.s3{animation-delay:4s}
@keyframes swp{0%,4%{transform:scale(1)}10%{transform:scale(1.25)}18%,100%{transform:scale(1)}}
/* text: lines get written, pen moves */
.ln{transform-origin:left;animation:write 5s cubic-bezier(.3,.7,.3,1) infinite}
.l2{animation-delay:.3s}.l3{animation-delay:.6s}.l4{animation-delay:.9s}.l5{animation-delay:1.2s}
@keyframes write{0%{transform:scaleX(0)}18%,85%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}
.pen{animation:pen 5s ease-in-out infinite}
@keyframes pen{0%{transform:translate(-50px,-44px)}20%{transform:translate(-20px,-28px)}40%{transform:translate(-30px,-14px)}60%,100%{transform:translate(0,0)}}
/* contact: phone rings, chat arrives */
.ring{transform-origin:center bottom;animation:ring 3s infinite}
@keyframes ring{0%,40%,100%{transform:none}44%{transform:rotate(-8deg)}48%{transform:rotate(8deg)}52%{transform:rotate(-6deg)}56%{transform:rotate(6deg)}60%{transform:none}}
.wave{opacity:0;animation:wv 3s infinite}
.w2{animation-delay:.2s}
@keyframes wv{0%,40%{opacity:0}48%,62%{opacity:1}75%,100%{opacity:0}}
.bubble{transform-origin:left bottom;animation:pop 3s cubic-bezier(.2,.9,.3,1.3) infinite}
.b2{animation-delay:.5s}
@keyframes pop{0%{transform:scale(0);opacity:0}15%,85%{transform:none;opacity:1}100%{transform:none;opacity:0}}
.dot{animation:bounce2 1s ease-in-out infinite}
.d2{animation-delay:.15s}.d3{animation-delay:.3s}
@keyframes bounce2{0%,60%,100%{transform:none}30%{transform:translateY(-4px)}}
/* form: fields fill, button pressed, tick */
.fill{transform-origin:left;transform:scaleX(0);animation:fillf 5s steps(10) infinite}
.f2{animation-delay:.8s}.f3{animation-delay:1.6s}
@keyframes fillf{0%{transform:scaleX(0)}16%,85%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}
.send{transform-origin:center;animation:press 5s infinite}
@keyframes press{0%,52%{transform:none}56%{transform:scale(.92)}60%,100%{transform:none}}
.tick{stroke-dasharray:40;stroke-dashoffset:40;animation:tickd 5s infinite}
@keyframes tickd{0%,58%{stroke-dashoffset:40}68%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
/* live: published badge + confetti */
.live-badge{transform-origin:center;animation:livep 4s cubic-bezier(.2,.9,.3,1.4) infinite}
@keyframes livep{0%,20%{transform:scale(0)}35%,90%{transform:scale(1)}100%{transform:scale(0)}}
.cf{opacity:0;animation:conf 4s ease-out infinite}
.c2{animation-delay:.1s}.c3{animation-delay:.2s}.c4{animation-delay:.15s}
@keyframes conf{0%,30%{opacity:0;transform:translateY(8px)}40%{opacity:1}75%,100%{opacity:0;transform:translateY(-14px)}}
.paused .art *,.paused.art *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.typing,.fill,.ln{transform:none}.res,.bubble,.cf,.live-badge{opacity:1;transform:none}.tick{stroke-dashoffset:0}}
@media (max-width:720px){.f-get-grid .art{width:76px}.f-why .art{width:130px}}
/* Proiecte realizate: real client sites, scroll strip on phones */
.f-work{padding:clamp(48px,7vw,88px) 0;background:#fff}
.f-work h2{font-size:clamp(32px,4.4vw,56px);font-variation-settings:"wdth" 84;font-weight:800;margin-bottom:clamp(22px,3vw,36px)}
.w-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.w-open{display:block;width:100%;text-decoration:none;color:inherit}.w-open:focus-visible .w-frame{outline:3px solid var(--signal);outline-offset:3px}
.w-frame{display:block;position:relative}.w-zoom{position:absolute;right:10px;bottom:10px;background:rgba(6,26,69,.82);color:#fff;font-size:13px;font-weight:600;border-radius:99px;padding:6px 12px}
.w-open:hover img{transform:scale(1.02)}.w-frame img{transition:transform .3s}
.w-frame{border-radius:12px;overflow:hidden;background:var(--paper);border:1px solid #dde2ea;box-shadow:0 10px 28px -14px rgba(6,26,69,.35)}
.w-bar{display:flex;gap:5px;padding:8px 10px;background:#eef2f8;border-bottom:1px solid #dde2ea}
.w-bar i{width:7px;height:7px;border-radius:50%;background:#c3cbd8}
.w-frame img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;object-position:top}
.w-cap{display:flex;flex-direction:column;margin-top:10px}
.w-cap b{font-size:16px;color:var(--ink)}
.w-cap span{font-size:14px;color:var(--slate)}
@media (max-width:980px){.w-list{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0;padding:0 0 8px;scrollbar-width:none}.w-list::-webkit-scrollbar{display:none}.w-list li{flex:0 0 78%;scroll-snap-align:start}}
@media (max-width:980px){
 .f-steps .steps li{display:grid;grid-template-columns:88px 1fr;column-gap:16px;align-items:start;padding:18px}
 .f-steps .steps li .art{grid-row:1/4;width:88px;margin:0}
 .f-steps .steps li .step-n{justify-self:start}
 .f-steps .steps h3{font-size:21px;margin-bottom:4px}
 .f-steps .steps p{font-size:15px}
}
.w-dialog{border:0;padding:0;border-radius:14px;width:min(1100px,94vw);max-height:92vh;background:#fff;overflow:auto}
.w-dialog::backdrop{background:rgba(6,26,69,.75)}
.w-dialog img{display:block;width:100%;height:auto}
.w-dialog .dialog-close{position:absolute;top:8px;right:8px;z-index:2;background:#fff;border-radius:50%;width:38px;height:38px;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.w-dialog-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:16px 18px}
.w-dialog-foot b{font-size:18px;color:var(--ink)}
.w-more a{display:flex;flex-direction:column;justify-content:center;gap:8px;height:100%;min-height:200px;box-sizing:border-box;padding:22px;border-radius:12px;background:var(--signal);color:#fff;text-decoration:none}
.w-more b{font-size:30px;line-height:1.05;font-variation-settings:"wdth" 84;font-weight:800}
.w-more span{font-size:15px;line-height:1.4;opacity:.92}
.w-more em{font-style:normal;font-weight:700;font-size:15px;margin-top:6px;text-decoration:underline;text-underline-offset:3px}
@media (max-width:400px){.f-get-grid h3,.steps h3{font-size:18px}.f-get-grid .art{width:72px}.f-get-grid li{gap:12px;padding:18px}}
@media (max-width:1100px){.w-more b{font-size:24px}}
@media (max-width:400px){.process .steps li{grid-template-columns:64px 1fr;column-gap:12px;padding:16px}.process .steps li .art{width:64px}.process .steps h3{font-size:18px}}