@font-face{font-family:"Montserrat";font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/Montserrat-Bold.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-weight:800;font-style:normal;font-display:swap;src:url(/fonts/Montserrat-ExtraBold.woff2) format("woff2")}
/* Umless — un singur stil pentru toate paginile.
   Ideea vizuală: subtitrarea. Galbenul e cel al cuvintelor-cheie din reeluri, roșul e tăietura. */
:root{
  --paper:#ffffff; --wash:#f1f2f4; --ink:#000000; --sub:#5f646d; --line:#dfe1e5;
  --yellow:#ffd60a; --cut:#ff3b30; --ok:#1f9d45; --blue:#0a66ff;
  --r:14px;
  --display:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --text:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.5 var(--text);-webkit-font-smoothing:antialiased}
a{color:inherit}
img,video{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:6px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.narrow{max-width:600px;margin:0 auto;padding:0 20px}
.hidden{display:none !important}

/* antet */
.top{display:flex;align-items:center;justify-content:space-between;padding-top:18px;padding-bottom:18px}
.logo{display:inline-flex;align-items:center;gap:9px;font:800 19px/1 var(--display);text-decoration:none;letter-spacing:-.3px}
.logo i{width:28px;height:28px;border-radius:8px;background:var(--yellow);display:grid;place-items:center;font-style:normal;font-size:16px}
.top nav{display:flex;gap:20px;font-size:15px}
.top nav a{text-decoration:none;color:var(--sub)}
.top nav a:hover{color:var(--ink)}
.top nav{align-items:center}
.top nav a{white-space:nowrap}
@media (max-width:480px){.top nav a.hide-s{display:none}}
.top .langs{display:inline-flex;gap:2px;border:1px solid var(--line);border-radius:999px;padding:2px}
.top .langs a{font-size:12px;font-weight:600;letter-spacing:.3px;padding:4px 8px;border-radius:999px;color:var(--sub)}
.top .langs a.on{background:var(--ink);color:#fff}

/* butoane */
.btn{appearance:none;border:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 16px/1 var(--display);
  padding:16px 22px;border-radius:12px;cursor:pointer;text-decoration:none;background:var(--yellow);color:#000}
.btn:hover{filter:brightness(.96)}
.btn:disabled{opacity:.45;cursor:default;filter:none}
.btn.dark{background:#000;color:#fff}
.btn.ghost{background:var(--wash);color:var(--ink)}
.btn.small{font-size:14px;padding:10px 14px;border-radius:10px}
.btn.wide{width:100%}

/* ===== landing ===== */
.hero{padding-top:56px;padding-bottom:40px}
.hero .say{font:800 clamp(34px,6.4vw,76px)/1.08 var(--display);letter-spacing:-1.5px;margin:0;max-width:16ch}
.say .w{white-space:nowrap}
.say .um{color:var(--sub);position:relative;display:inline-block;transition:opacity .35s, max-width .45s, margin .45s;max-width:6ch;overflow:hidden;vertical-align:bottom}
.say .um::after{content:"";position:absolute;left:-2%;right:-2%;top:54%;height:.09em;background:var(--cut);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.say.cut .um::after{transform:scaleX(1)}
.say.gone .um{opacity:0;max-width:0;margin:0 -.07em}
.say mark{background:var(--yellow);color:#000;padding:0 .08em;border-radius:.08em}
.hero .lede{font-size:clamp(18px,2.1vw,21px);color:var(--sub);max-width:36em;margin:28px 0 0}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:30px}
.hero .cta small{color:var(--sub);font-size:14px}
@media (prefers-reduced-motion:reduce){.say .um,.say .um::after{transition:none}}

section.block{padding:64px 0;border-top:1px solid var(--line)}
h2{font:800 clamp(26px,3.6vw,40px)/1.15 var(--display);letter-spacing:-.8px;margin:0 0 14px}
.intro{color:var(--sub);max-width:38em;margin:0 0 34px;font-size:18px}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s}
.steps li::before{content:counter(s);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#000;color:#fff;font:800 17px/1 var(--display);margin-bottom:14px}
.steps h3{font:700 19px/1.3 var(--display);margin:0 0 6px}
.steps p{margin:0;color:var(--sub)}

.show{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:center}
.show ul{list-style:none;padding:0;margin:0}
.show li{padding:14px 0;border-bottom:1px solid var(--line)}
.show li b{display:block;font-family:var(--display);font-weight:700}
.show li span{color:var(--sub);font-size:16px}
.phone{position:relative;aspect-ratio:9/16;border-radius:34px;background:#1d1f22;padding:9px;box-shadow:0 30px 60px -20px rgba(0,0,0,.35)}
.phone .screen{position:relative;width:100%;height:100%;border-radius:26px;overflow:hidden;background:linear-gradient(160deg,#41464d,#1b1d20)}
.phone video{width:100%;height:100%;object-fit:cover}
.phone .cap{position:absolute;left:8%;right:8%;bottom:24%;text-align:center;font:800 23px/1.2 var(--display);color:#fff;
  text-shadow:0 0 3px #000,0 0 3px #000,0 2px 8px rgba(0,0,0,.6)}
.phone .cap b{color:var(--yellow)}
.phone .note{position:absolute;left:7%;right:7%;top:7%;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);border-radius:16px;padding:10px 12px;font-size:12px;line-height:1.35;color:#000}
.phone .note b{display:block;font-size:13px}

.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:18px;align-items:stretch}
.plan{border:1.5px solid var(--line);border-radius:18px;padding:26px;display:flex;flex-direction:column}
.plan.featured{border-color:#000;box-shadow:inset 0 0 0 1.5px #000}
.plan h3{font:800 22px/1.2 var(--display);margin:0}
.plan .blurb{color:var(--sub);margin:4px 0 18px;font-size:16px;min-height:3em}
.plan .price{font:800 44px/1 var(--display);letter-spacing:-1px;white-space:nowrap}
.plan .price small{font:500 15px/1 var(--text);color:var(--sub);letter-spacing:0;margin-left:4px}
.plan .price s{display:block;font:600 17px/1.2 var(--text);color:var(--sub);letter-spacing:0;margin-bottom:4px;text-decoration-thickness:1.5px}
.plan .per{color:var(--sub);font-size:14px;margin-top:6px;min-height:1.5em}
.plan ul{list-style:none;padding:0;margin:20px 0 24px;flex:1}
.plan li{padding:6px 0 6px 26px;position:relative;font-size:16px}
.plan li::before{content:"";position:absolute;left:2px;top:13px;width:12px;height:7px;border-left:2.5px solid #000;border-bottom:2.5px solid #000;transform:rotate(-45deg)}
.plan .tag{align-self:flex-start;background:var(--yellow);font:700 13px/1 var(--display);padding:6px 9px;border-radius:7px;margin-bottom:12px}
.fine{color:var(--sub);font-size:14px;margin-top:18px}

.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;font:700 18px/1.35 var(--display);padding:16px 36px 16px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font:400 28px/1 var(--text);color:var(--sub)}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 18px;color:var(--sub);max-width:44em}

footer.site{border-top:1px solid var(--line);padding:36px 0 48px;color:var(--sub);font-size:14px}
footer.site .cols{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px}
footer.site a{color:var(--sub)}
footer.site .links{display:flex;gap:18px;flex-wrap:wrap}
.cards{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap}
.cards span,.cards img{height:26px;border:1px solid var(--line);border-radius:5px;padding:0 8px;display:inline-flex;align-items:center;font-weight:700;font-size:12px;color:#333;background:#fff}

@media (max-width:820px){
  .steps,.plans{grid-template-columns:1fr}
  .show{grid-template-columns:1fr}
  .show .phone{width:100%;max-width:280px;margin:0 auto}
  .top nav a.hide-m{display:none}
  .top nav{gap:12px;font-size:14px}
}

/* ===== formulare (checkout, cont) ===== */
.page{padding-top:20px;padding-bottom:64px}
.page h1{font:800 clamp(28px,5vw,40px)/1.12 var(--display);letter-spacing:-.8px;margin:18px 0 10px}
.page .lead{color:var(--sub);margin:0 0 26px}
.label{font-size:14px;color:var(--sub);margin:26px 2px 8px}
.group{background:var(--wash);border-radius:var(--r);overflow:hidden}
.row{display:flex;align-items:center;gap:12px;padding:12px 16px;min-height:50px;position:relative}
.row+.row::before{content:"";position:absolute;top:0;left:16px;right:0;border-top:1px solid var(--line)}
.grow{flex:1;min-width:0}
.meta{font-size:14px;color:var(--sub)}
input[type=text],input[type=email],input[type=tel],textarea,select{width:100%;border:0;background:transparent;color:var(--ink);font:inherit;outline:none;padding:0}
textarea{min-height:96px;resize:vertical;line-height:1.45}
textarea.mono{font:15px/1.5 ui-monospace,Menlo,monospace;min-height:120px}
::placeholder{color:#8a8f97}
label.check{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;font-size:15px}
label.check input{width:22px;height:22px;accent-color:#000;flex:none;margin:0}
label.check a{text-decoration:underline}
.msg{margin:12px 2px 0;font-size:15px;min-height:1px}
.msg.err{color:var(--cut)}
.summary{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border:1.5px solid #000;border-radius:var(--r);padding:16px 18px}
.summary b{font:800 18px/1.2 var(--display)}
.summary .amt{font:800 26px/1 var(--display);white-space:nowrap}
.summary .meta{margin-top:3px}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--wash);border-radius:11px;padding:3px}
.seg button{appearance:none;border:0;background:none;color:var(--ink);font:600 15px/1.2 var(--text);padding:10px 6px;border-radius:9px;cursor:pointer}
.seg button[aria-pressed=true]{background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.drop{display:block;border:2px dashed var(--line);border-radius:var(--r);padding:26px 16px;text-align:center;cursor:pointer;background:#fff}
.drop.over{border-color:#000}
.drop b{display:block;font:700 17px/1.3 var(--display);margin:6px 0 2px}
.file .ic{width:36px;height:36px;border-radius:9px;background:#fff;display:grid;place-items:center;flex:none}
.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x{appearance:none;border:0;background:none;color:var(--sub);font-size:22px;line-height:1;cursor:pointer;padding:4px}
.bar{height:4px;background:#d9dce1;border-radius:2px;overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;width:0;background:#000;transition:width .3s}
.file.ok .bar i{background:var(--ok)}
.notice{background:var(--wash);border-radius:var(--r);padding:16px 18px;font-size:15px;margin-top:16px}
.notice.warn{background:#fff4c2}
.notice.bad{background:#ffe3e1}

/* cont */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.stat{background:var(--wash);border-radius:var(--r);padding:18px}
.stat .n{font:800 40px/1 var(--display);letter-spacing:-1px}
.stat .meta{margin-top:6px}
.order{background:var(--wash);border-radius:var(--r);padding:14px 16px;margin-bottom:10px}
.order .head{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.order .head b{font-family:var(--display)}
.pill{display:inline-block;font-size:13px;font-weight:600;padding:3px 9px;border-radius:999px;background:#fff;margin-top:6px}
.pill.done{background:#d8f5df;color:var(--ok)}
.pill.work{background:#fff4c2}
.dl{display:flex;align-items:center;gap:10px;margin-top:10px}

/* pagini de text (termeni) */
.legal h2{font-size:24px;margin-top:36px}
.legal p,.legal li{color:#2b2e33;max-width:44em}

/* pagina unei comenzi */
.track li{display:flex;gap:14px;align-items:center;padding:12px 16px;position:relative}
.track li+li::before{content:"";position:absolute;top:0;left:54px;right:0;border-top:1px solid var(--line)}
.track .dot{width:24px;height:24px;border-radius:50%;border:2px solid #c9ccd2;flex:none;display:grid;place-items:center}
.track li.done .dot{background:var(--ok);border-color:var(--ok);color:#fff}
.track li.now .dot{border-color:#000;box-shadow:inset 0 0 0 4px var(--wash),inset 0 0 0 12px #000}
.track li.todo{color:var(--sub)}

/* oferta de lansare */
.launch{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;background:var(--yellow);border-radius:14px;padding:14px 18px;margin:-12px 0 26px}
.launch b{font:800 17px/1.2 var(--display)}
.launch span{font-size:15px}

/* progresul unui montaj, în cont */
.prog{background:#fff;border-radius:12px;padding:14px;margin-top:12px}
.prog-now{display:flex;align-items:center;gap:10px}
.prog-now b{font:700 16px/1.3 var(--display)}
.spin{width:16px;height:16px;border-radius:50%;border:2.5px solid #d9dce1;border-top-color:#000;flex:none;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
.prog .bar{margin-top:12px;height:6px;border-radius:3px}
.prog-steps{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:7px}
.prog-steps li{position:relative;padding-left:24px;font-size:14px;color:var(--sub)}
.prog-steps li::before{content:"";position:absolute;left:2px;top:4px;width:12px;height:12px;border-radius:50%;border:2px solid #c9ccd2;box-sizing:border-box}
.prog-steps li.ok{color:var(--ink)}
.prog-steps li.ok::before{background:var(--ok);border-color:var(--ok)}
.prog-steps li.cur{color:var(--ink);font-weight:700}
.prog-steps li.cur::before{border-color:#000;background:var(--yellow)}
.prog-at{margin-top:10px;font-size:12px}

/* alegerea atmosferei */
.looks{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:12px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory}
.look{appearance:none;text-align:left;border:2px solid transparent;background:var(--wash);border-radius:16px;padding:10px;cursor:pointer;scroll-snap-align:start;color:inherit;font:inherit}
.look.sel{border-color:#000;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.look .pics{display:grid;grid-template-columns:1fr 1fr;gap:4px;border-radius:10px;overflow:hidden}
.look img{width:100%;aspect-ratio:9/16;object-fit:cover;background:#ddd}
.look b{display:block;font:800 18px/1.2 var(--display);margin:10px 2px 0}
.look .mood{display:block;font-size:13px;color:var(--sub);margin:2px 2px 0}
.look .blurb{display:block;font-size:13px;line-height:1.4;margin:6px 2px 2px}
.order video.preview{display:block;width:100%;max-width:260px;aspect-ratio:9/16;margin:12px auto 4px;border-radius:14px;background:#000}
