/* Theme "soft tint" (owner pick, 2026-10-24): warm paper page, ink-navy bands,
   orange italic accent, coloured dots matching each mockup's accent. Loaded last. */
:root{--paper:#f7f5f1;--ink:#11131a;--ink2:#262b3a;--accent:#d9542b;--accent-dk:#ff8a63}
html,.shell{background:var(--ink)}
.page{background:var(--paper)}.page .page-grid{opacity:.5}
.band,.cbox,.menu{background:var(--ink)}
.pill.dark{background:var(--ink)}.pill.dark:hover{background:var(--ink2)}
h1 em,h2 em,.title em{color:var(--accent)}
.cbox h2 em{color:var(--accent-dk)}
.pains .pain:nth-child(1){--ac:#ff4a1c}.pains .pain:nth-child(2){--ac:#16a34a}.pains .pain:nth-child(3){--ac:#2f80ed}.pains .pain:nth-child(4){--ac:#d6409f}.pains .pain:nth-child(5){--ac:#5a49d6}
.pain-q,.eyebrow{display:flex;align-items:center;gap:10px}
.pain-q::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--ac,var(--accent));box-shadow:0 0 0 4px color-mix(in srgb,var(--ac,var(--accent)) 18%,transparent);flex:none}
.eyebrow::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(217,84,43,.18);flex:none}
.svc-list li:hover strong{color:var(--accent)}
.case:hover{background:#efece6}
::-webkit-scrollbar-thumb{background-color:rgba(17,19,26,.3)}
/* hard-clip the sheet's rounded top: masked/composited children (grid svg) escaped
   border-radius+overflow clipping in Chrome and painted into the corner */
.page{clip-path:inset(0 round 40px 40px 0 0)}

/* one primary action colour: every "write to us" / send button is the accent */
.hdr-in .pill.dark,#leadForm button[type=submit],.menu .pill.light{background:var(--accent);color:#fff}
.hdr-in .pill.dark:hover,#leadForm button[type=submit]:hover,.menu .pill.light:hover{background:#c2471f}
/* voice note, minimal: a single round mic button inside the message box */
#leadForm .fld.full{position:relative}
#leadForm .fld.full textarea{padding-right:64px}
.vrec[data-state=idle]{position:absolute;right:12px;bottom:12px;margin:0;padding:0;border:0;background:none}
.vrec .v-start{width:40px;height:40px;padding:0;border-radius:50%;justify-content:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff}
.vrec .v-start:hover{background:var(--accent);border-color:var(--accent)}
.vrec .v-start span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vrec .v-start::after{content:attr(data-tip);position:absolute;right:0;bottom:calc(100% + 8px);white-space:nowrap;font:500 12px/1 var(--sans);background:#fff;color:#11131a;padding:6px 10px;border-radius:8px;opacity:0;transform:translateY(4px);transition:.2s;pointer-events:none}
.vrec .v-start:hover::after,.vrec .v-start:focus-visible::after{opacity:1;transform:none}
/* live / done states: quiet inline row, no boxed panel */
.vrec[data-state=live],.vrec[data-state=done]{margin-top:10px;padding:0;border:0;background:none}
.vrec .vbtn.ghost{background:none;border:0;color:rgba(255,255,255,.6);padding:0 8px}
.vrec .vbtn.ghost:hover{color:#fff}
/* phone: the AI "answer source" card used max-content width and ran off-screen */
@media(max-width:639px){
  .mk-f:has(>.mk-pop){left:12px!important;right:12px!important;width:auto!important}
  .mk-pop{width:100%!important;min-width:0!important;max-width:100%!important;flex:1 1 auto!important}
  .mk-pop,.mk-pop *{white-space:normal!important}
}
html{scrollbar-width:none}html::-webkit-scrollbar{display:none;width:0;height:0}

/* iOS Safari/Chrome (WebKit) inflates "small" text blocks on phones, which breaks the em-sized mockups; keep text at its CSS size. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* case "how it's built" chips: readable tags with a quiet label in front */
.cs-det{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px;padding:0;list-style:none}
.cs-det::before{content:"";font:600 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#8a857c;margin-right:4px}
html[lang=uk] .cs-det::before{content:"Що отримали:"}html[lang=ru] .cs-det::before{content:"Что получили:"}html[lang=en] .cs-det::before{content:"Result:"}
.cs-det li{font:500 13px/1 var(--sans);color:#3b3934;background:#fff;border:1px solid #e3ded4;border-radius:999px;padding:7px 12px}
/* "write-up in the blog" links: label on its own line, links as one clean row of pills */
.case-blog{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:20px}
.case-blog>span{flex-basis:100%;font:600 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#8a857c}
.case-blog a{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;background:var(--ink,#11131a);color:#fff;font:600 14px/1 var(--sans);text-decoration:none;border:0}
.case-blog a:hover{background:var(--accent)}
.case-blog a .arr{width:14px;height:14px}
/* phones: floating cards around each mockup stacked below the stage and made every
   illustration very tall with empty gaps (owner, 2026-10-25) — show only the screen */
@media(max-width:640px){
  .pain-vis .mk-f,.svc-img .mk-f{display:none!important}
  .mk-stage:not(.mk-stk){margin-bottom:0!important}
  .pains{gap:72px}
}
/* no dots before labels (owner: dots read as AI). The label itself carries the colour */
.pain-q::before,.eyebrow::before,.cs-tag::before{display:none!important;content:none!important}
.pain-q{color:var(--ac,var(--accent));gap:0}
.eyebrow{color:var(--accent)}
.cs-head .cs-dot{display:none!important}
@media(max-width:640px){.pains{gap:56px}}
/* hero CTA: one quiet primary + a text link, sits under the lead */
.hero-cta{display:flex;align-items:center;gap:20px;margin-top:32px;flex-wrap:wrap}
.hero-cta .go{height:48px;padding:0 24px;font-size:16px;background:var(--accent);color:#fff}
.hero-cta .go:hover{background:#c2471f}
.hero-tg{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--sans);color:var(--ink,#11131a);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px;opacity:.75}
.hero-tg:hover{opacity:1}
/* intro: allow skipping with a tap */
#intro{cursor:pointer}#intro.skip{animation:introOut .35s cubic-bezier(.76,0,.24,1) forwards!important}
@media(max-width:640px){.pain-vis.fi,.svc-img.fi{opacity:1!important;transform:none!important}}
/* blog write-up link: a quiet text link, not a heavy pill */
.case-blog a{background:none!important;color:var(--ink,#11131a)!important;padding:0!important;border-radius:0!important;border-bottom:1.5px solid var(--accent)!important;font:600 15px/1.4 var(--sans)!important}
.case-blog a:hover{color:var(--accent)!important}
.case-blog{gap:6px 18px}
/* chips: lighter so they read as notes, not buttons */
.cs-det li{background:transparent;border-color:#ddd7cc;color:#55524b;font-weight:500;padding:6px 11px}
/* clients band CTA sits at the far right of the title row on every width */
.band-h{display:flex;align-items:center;gap:16px}
.band-h .c-cta{margin-left:auto;white-space:nowrap;flex:none}
@media(max-width:639px){.band-h i{display:none}.band-h .c-cta{font-size:14px}}
/* open menu: the close button's negative margin pulled it onto the CTA pill */
.menu .burger{margin:0;flex:none}
.menu .hdr-r{gap:10px}

/* gauge arc rode up over the "plan" heading on phones */
.s-gauge .s-gw{margin-top:.9em;position:relative;z-index:0}
.s-gauge .s-ch{position:relative;z-index:1}
/* phones: no orphan words, lighter header row, less empty space under the hero */
.hero .lead{text-wrap:pretty}
@media(max-width:639px){
  .hdr-in .hdr-r{gap:14px}
  .hdr-in .pill.dark{padding:0 14px!important;height:38px!important;font-size:14px!important;gap:0!important}
  .hdr-in .pill.dark svg,.hdr-in .pill.dark .ic{display:none!important}
  .hdr-in .burger{margin:0!important;flex:none}
  .hdr-in .hdr-row{gap:8px}
  .lang-trigger{padding:0 6px}
  .band{margin-top:56px}
}
@media(max-width:360px){.hdr-in .logo{font-size:19px}.hdr-in .logo svg{width:24px}}
@media(max-width:639px){.hero{margin-top:72px}}
/* header pill on phones: text only, no icon */
@media(max-width:639px){.hdr-r>.pill.dark::before{display:none!important}}
/* clients band: readable CTA, softer and wider edge fade, optically balanced logos */
.band-h .c-cta{color:#e9e6df!important;opacity:1}
.band-h .c-cta:hover{color:#fff!important}
.mq{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%)!important;mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%)!important}
@media(max-width:639px){.mq{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%,#000 74%,transparent 100%)!important;mask-image:linear-gradient(90deg,transparent 0,#000 26%,#000 74%,transparent 100%)!important}}
.clients .l-srt{height:28px!important;opacity:.92}
.clients .l-med{height:56px!important}
.clients .l-marco{height:40px!important}
.clients .l-kip{height:40px!important}
.clients .l-aroma{height:40px!important}
.clients .l-wild{height:44px!important}
.clients .w-nor{font-size:19px!important}
.clients .w-yul{font-size:26px!important}

/* services rows: hover slides with transform so text never re-wraps */
@media(hover:hover){.svc-list li:hover{padding-left:0!important}.svc-list li>strong,.svc-list li>span{transition:transform .35s cubic-bezier(.22,.61,.36,1)}.svc-list li:hover>strong,.svc-list li:hover>span{transform:translateX(12px)}}