/* 3DRoom design system — modern SaaS: graphite + warm copper accent, Inter, glass panels */
:root{
  --ink:#0f1115;--ink-2:#1b1f27;--ink-3:#2a2f3a;--mute:#6b7280;--mute-2:#9aa1ad;--line:#e7e5e0;--line-dark:rgba(255,255,255,.1);
  --paper:#ffffff;--paper-2:#f7f5f1;--paper-3:#efece6;--copper:#c2703f;--copper-2:#a85b2f;--copper-soft:#f3e3d7;--oak:#b98c62;--navy:#1f2b45;--ok:#2f8f5b;--err:#c0392b;
  --r:14px;--r-lg:22px;--shadow:0 10px 30px rgba(15,17,21,.08);--shadow-lg:0 30px 80px rgba(15,17,21,.18);
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--wrap:1180px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--paper);line-height:1.55;font-size:16px}
img,svg,video,canvas,iframe{max-width:100%;display:block}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.12;letter-spacing:-.02em;font-weight:700}
h1{font-size:clamp(2.2rem,5vw,4rem);font-weight:800}h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}h3{font-size:1.25rem}h4{font-size:1rem}
p{margin:0 0 1em}.lead{font-size:1.2rem;color:var(--mute);max-width:46rem}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;font-weight:700;color:var(--copper);margin:0 0 .9rem}
.wrap{width:min(var(--wrap),calc(100% - 40px));margin:0 auto}.narrow{max-width:720px}.inline{display:inline}
.section{padding:clamp(56px,8vw,112px) 0}.section--tight{padding:clamp(40px,5vw,72px) 0}.section--alt{background:var(--paper-2)}.section--dark{background:var(--ink);color:#fff}.section--dark .lead,.section--dark .mute{color:var(--mute-2)}.section--center{text-align:center}.section--center .lead{margin-inline:auto}
.section__head{max-width:760px;margin-bottom:clamp(28px,4vw,52px)}.section__head--center{margin-inline:auto;text-align:center}
.mute{color:var(--mute)}.small{font-size:.9rem}.grid{display:grid;gap:22px}.grid--2{grid-template-columns:repeat(2,1fr)}.grid--3{grid-template-columns:repeat(3,1fr)}.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.grid--4{grid-template-columns:repeat(2,1fr)}.grid--3{grid-template-columns:repeat(2,1fr)}}@media (max-width:640px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:999px;border:1px solid transparent;font-weight:600;font-size:.98rem;transition:transform .15s,box-shadow .15s,background .15s,border-color .15s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}
.btn--primary{background:var(--copper);color:#fff;box-shadow:0 8px 24px rgba(194,112,63,.32)}.btn--primary:hover{background:var(--copper-2)}
.btn--dark{background:var(--ink);color:#fff}.btn--dark:hover{background:var(--ink-3)}
.btn--light{background:#fff;color:var(--ink);border-color:var(--line)}.btn--light:hover{border-color:#cfcbc3}
.btn--ghost{background:transparent;border-color:currentColor;opacity:.85}.btn--ghost:hover{opacity:1;background:rgba(127,127,127,.08)}
.btn--sm{padding:9px 16px;font-size:.9rem}.btn--lg{padding:16px 30px;font-size:1.06rem}.btn--block{width:100%}
.btn[disabled]{opacity:.55;pointer-events:none}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:#0f1115;color:#fff;border-bottom:1px solid rgba(255,255,255,.07);box-shadow:0 1px 0 rgba(0,0,0,.4)}
.nav__in{display:flex;align-items:center;gap:26px;height:68px}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.nav__links{display:flex;gap:2px;margin-left:4px}.nav__links a{padding:8px 11px;border-radius:10px;font-size:.92rem;color:rgba(255,255,255,.78);white-space:nowrap}.nav__links a:hover,.nav__links a[aria-current]{color:#fff;background:rgba(255,255,255,.08)}
.nav__right{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}.nav__user{font-size:.92rem;color:rgba(255,255,255,.85);padding:8px 10px;white-space:nowrap}.nav .btn{white-space:nowrap}
.lang{font-size:.8rem;font-weight:700;letter-spacing:.08em;padding:7px 10px;border:1px solid rgba(255,255,255,.25);border-radius:8px;color:rgba(255,255,255,.85)}.lang:hover{border-color:#fff;color:#fff}
.burger{display:none;width:42px;height:42px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:transparent;flex-direction:column;align-items:center;justify-content:center;gap:5px}.burger span{width:18px;height:2px;background:#fff;display:block;transition:.2s}
.nav__ctam{display:none}
@media (max-width:1240px){.nav__ctam{display:block}.nav__links{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;background:var(--ink);padding:10px 16px 18px;border-bottom:1px solid var(--line-dark)}.nav--open .nav__links{display:flex}.nav__user{display:none}.burger{display:flex}.nav--open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}.nav--open .burger span:nth-child(2){opacity:0}.nav--open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}}
@media (max-width:520px){.nav__right .btn{display:none}}

/* hero */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero__bg{position:absolute;inset:0}.hero__bg iframe{width:100%;height:100%;border:0;opacity:.95}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,17,21,.92) 0%,rgba(15,17,21,.75) 38%,rgba(15,17,21,.15) 70%,rgba(15,17,21,.1) 100%)}
.hero__in{position:relative;min-height:min(86vh,820px);display:flex;align-items:center;padding:80px 0}
.hero__copy{max-width:600px}.hero__copy h1{margin-bottom:.5em}.hero__copy .lead{color:rgba(255,255,255,.78);font-size:1.22rem}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 18px}.hero__note{font-size:.88rem;color:rgba(255,255,255,.6)}
.hero__badges{display:flex;gap:18px;flex-wrap:wrap;margin-top:34px;font-size:.88rem;color:rgba(255,255,255,.75)}.hero__badges b{display:block;font-size:1.3rem;color:#fff}
.hero__hint{position:absolute;right:28px;bottom:22px;font-size:.78rem;color:rgba(255,255,255,.6);background:rgba(0,0,0,.35);padding:6px 10px;border-radius:8px;backdrop-filter:blur(6px)}
@media (max-width:900px){.hero__bg::after{background:linear-gradient(180deg,rgba(15,17,21,.6),rgba(15,17,21,.92))}.hero__in{min-height:auto;padding:70px 0 50px}.hero__hint{display:none}}

/* cards */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow)}.card h3{margin-top:14px}
.card--flat{box-shadow:none}.card--dark{background:var(--ink-2);border-color:var(--line-dark);color:#fff}.card--dark .mute{color:var(--mute-2)}
.icon{width:44px;height:44px;border-radius:12px;background:var(--copper-soft);color:var(--copper);display:inline-flex;align-items:center;justify-content:center;font-weight:800}
.steps{counter-reset:s}.step{position:relative;padding-left:64px}.step::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:-4px;width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem}
.tile{display:block;border-radius:var(--r-lg);overflow:hidden;background:var(--paper-2);border:1px solid var(--line);transition:transform .2s,box-shadow .2s}.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.tile__img{aspect-ratio:4/3;background:linear-gradient(135deg,#e9e3d9,#d6cdc0);object-fit:cover;width:100%}.tile__body{padding:16px 18px 18px}.tile__body h3{font-size:1.05rem;margin:0 0 4px}.tile__meta{font-size:.84rem;color:var(--mute)}
.chips{display:flex;gap:8px;flex-wrap:wrap}.chip{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:.9rem;font-weight:600;color:var(--ink);transition:.15s}.chip:hover{border-color:var(--copper)}.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.section--dark .chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}.section--dark .chip.on{background:var(--copper);border-color:var(--copper)}
.frame{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#d8d3cc;box-shadow:var(--shadow-lg);aspect-ratio:16/10}.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.frame__bar{position:absolute;left:14px;right:14px;bottom:14px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;z-index:2}
/* мобільний: бар ракурсів — тонка смужка внизу в один рядок зі скролом, щоб НЕ накривати дизайн (стосується всіх прев'ю: головна, /styles) */
@media (max-width:700px){
  .frame__bar{left:6px;right:6px;bottom:6px;gap:4px;flex-wrap:nowrap;align-items:flex-end}
  .frame__bar .glass{flex-wrap:nowrap;max-width:100%;overflow-x:auto;padding:3px;gap:2px;border-radius:12px;scrollbar-width:none}
  .frame__bar .glass::-webkit-scrollbar{display:none}
  .frame__bar .glass button{white-space:nowrap!important;font-size:.56rem;padding:4px 7px;border-radius:9px}
}
.glass{background:rgba(15,17,21,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:6px;display:inline-flex;gap:4px}.glass button{border:0;background:transparent;color:#fff;padding:8px 14px;border-radius:999px;font-size:.88rem;font-weight:600}.glass button:hover{background:rgba(255,255,255,.1)}.glass button.on{background:var(--copper)}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}.faq summary{cursor:pointer;font-weight:600;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;gap:12px}.faq summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--copper)}.faq details[open] summary::after{content:"–"}.faq details p{margin:10px 0 0;color:var(--mute)}
.pricing .card{display:flex;flex-direction:column}.price{font-size:2.6rem;font-weight:800;letter-spacing:-.03em}.price small{font-size:1rem;font-weight:500;color:var(--mute)}.pricing ul{list-style:none;padding:0;margin:16px 0 22px;display:grid;gap:8px}.pricing li::before{content:"✓";color:var(--ok);margin-right:8px;font-weight:700}.pricing .card--featured{border-color:var(--copper);box-shadow:0 30px 80px rgba(194,112,63,.2)}.pricing .card .btn{margin-top:auto}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--copper-soft);color:var(--copper-2);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.cta-band{background:linear-gradient(135deg,#1b1f27,#0f1115);color:#fff;border-radius:var(--r-lg);padding:clamp(32px,5vw,64px);display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}.cta-band h2{margin:0}.cta-band p{margin:6px 0 0;color:rgba(255,255,255,.7)}
.prose{max-width:760px}.prose h2{margin-top:2em;font-size:1.6rem}.prose h3{margin-top:1.6em}.prose img{border-radius:var(--r);margin:1.4em 0}.prose blockquote{border-left:3px solid var(--copper);margin:1.4em 0;padding:4px 18px;color:var(--mute);font-style:italic}.prose pre{background:var(--paper-2);padding:14px 16px;border-radius:var(--r);overflow:auto}.prose a{color:var(--copper-2);text-decoration:underline}.prose ul,.prose ol{padding-left:1.3em}
.form{display:grid;gap:14px;max-width:520px}.form label{display:grid;gap:6px;font-weight:600;font-size:.92rem}.form input,.form textarea,.form select{font:inherit;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;width:100%}.form input:focus,.form textarea:focus{outline:2px solid var(--copper);outline-offset:1px;border-color:transparent}.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media (max-width:560px){.form .row{grid-template-columns:1fr}}
.alert{padding:12px 16px;border-radius:12px;background:#eef7f1;border:1px solid #cfe7d7;color:#1f6b42;margin-bottom:16px}.alert--err{background:#fbeeea;border-color:#f0cdc4;color:#8d2d20}.alert--info{background:#eef2fb;border-color:#d2dcf4;color:#2c4a8e}
.table{width:100%;border-collapse:collapse;font-size:.93rem}.table th,.table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}.table th{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}
.breadcrumbs{font-size:.86rem;color:var(--mute);margin-bottom:14px}.breadcrumbs a:hover{color:var(--copper)}.breadcrumbs span{margin:0 6px}
.errbox{text-align:left;background:var(--paper-2);padding:12px;border-radius:10px;font-size:.8rem;overflow:auto}
.footer{background:var(--ink);color:rgba(255,255,255,.75);padding:60px 0 28px;font-size:.93rem}.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px}.footer h4{color:#fff;margin-bottom:12px}.footer a{display:block;padding:4px 0}.footer a:hover{color:#fff}.footer__brand .logo{color:#fff;margin-bottom:10px}.footer__brand p{max-width:300px}.lang--footer{display:inline-block;margin-top:8px}
.footer__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:20px;border-top:1px solid var(--line-dark);font-size:.84rem;color:rgba(255,255,255,.5)}
@media (max-width:860px){.footer__grid{grid-template-columns:1fr 1fr}}@media (max-width:520px){.footer__grid{grid-template-columns:1fr}}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.reveal{opacity:1;transform:none}}

/* логотип */
.logo{gap:9px}.logo__mark{display:inline-flex;width:var(--s);height:var(--s);flex:none;filter:drop-shadow(0 3px 8px rgba(194,112,63,.35))}.logo:hover .logo__mark{transform:translateY(-1px)}.logo__mark{transition:transform .2s}.logo__mark svg{display:block}
.logo__word{font-weight:700;letter-spacing:-.025em;font-size:1.18rem}.logo__word b{font-weight:800;background:linear-gradient(92deg,#f3c6a4,#c2703f);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav .logo__word,.footer .logo__word,.dz__top .logo__word{color:#fff}

/* фірмові іконки */
.ic{display:inline-block;vertical-align:middle;flex:none}.ic--inline{width:1em;height:1em;vertical-align:-.12em;margin-right:.1em}
.icon .ic,.bento__icon .ic{width:22px;height:22px;color:var(--copper)}.card--dark .icon .ic{color:#f3c6a4}.chip .ic--inline,.glass .ic--inline,.tb .ic--inline{color:currentColor}
.ic-star{color:#e9a27a}

/* меню акаунта */
.acct{position:relative}.acct__btn{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);padding:0;display:grid;place-items:center;cursor:pointer}.acct__btn:hover{border-color:#fff}
.acct__ava{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#f3c6a4,#c2703f);color:#0f1115;font-weight:800;font-size:.9rem;display:grid;place-items:center}
.acct__menu{display:none;position:absolute;right:0;top:calc(100% + 10px);min-width:240px;background:#151821;border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:8px;box-shadow:0 30px 60px rgba(0,0,0,.45);z-index:60}
.acct.open .acct__menu{display:block}.acct__who{padding:8px 10px 10px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:6px}.acct__who b{display:block;color:#fff}.acct__who small{color:rgba(255,255,255,.55);font-size:.8rem;word-break:break-all}
.acct__menu a,.acct__menu button{display:block;width:100%;text-align:left;padding:9px 10px;border-radius:9px;color:#fff;font-size:.92rem;background:transparent;border:0;cursor:pointer}.acct__menu a:hover,.acct__menu button:hover{background:rgba(255,255,255,.08)}