/* ============================================================
   Vesolveit  |  WE SOLVE IT. YOU EVOLVE.
   Shared styles for all pages
   Brand: orange primary, yellow accent, white, navy ink
   Font: Montserrat
   ============================================================ */

:root {
  --orange:   #ff6a00;
  --orange-2: #ff8c00;
  --yellow:   #ffc700;
  --cream:    #fff3e0;
  --navy:     #0d1b2a;
  --ink:      #0d1b2a;
  --ink-soft: #55606e;
  --ink-dim:  #8a94a1;
  --bg:       #ffffff;
  --bg-soft:  #fff8f0;
  --bg-warm:  #fff1e0;
  --line:     #ececec;
  --line-2:   #e3e6ea;
  --radius:   20px;
  --radius-sm:14px;
  --shadow:   0 24px 60px -24px rgba(13,27,42,.28);
  --shadow-sm:0 10px 30px -14px rgba(13,27,42,.22);
  --max:      1160px;
  --font:     'Montserrat', system-ui, -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
h1, h2, h3, h4 { font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
a { color: inherit; }
img { max-width: 100%; display: block; }

.orange { color: var(--orange); }
.grad-text {
  background: linear-gradient(100deg, var(--orange), var(--yellow));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font); font-weight: 700; font-size: 15px; white-space: nowrap;
  padding: 13px 24px; border-radius: 999px; border: 2px solid transparent; cursor: pointer;
  text-decoration: none;
  background: linear-gradient(100deg, var(--orange), var(--orange-2));
  color: #fff;
  box-shadow: 0 12px 26px -12px rgba(255,106,0,.7);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -12px rgba(255,106,0,.8); }
.btn--lg { padding: 16px 32px; font-size: 16px; }
.btn--sm { padding: 10px 18px; font-size: 14px; }
.btn--full { width: 100%; }
.btn--ghost {
  background: transparent; color: var(--ink); border-color: var(--line-2); box-shadow: none;
}
.btn--ghost:hover { background: var(--bg-soft); border-color: var(--orange); color: var(--orange); box-shadow: none; }
.btn--light { background: #fff; color: var(--orange); box-shadow: none; }
.btn--light:hover { background: var(--cream); }

/* ---------- Eyebrow ---------- */
.eyebrow {
  display: inline-block; font-weight: 800; font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 16px;
}
.eyebrow--center { display: block; text-align: center; }

/* ---------- Brand / logo ---------- */
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex: 0 0 auto; }
.logo { width: 40px; height: 34px; flex: none; }
.brand__word { font-weight: 800; font-size: 22px; letter-spacing: -.02em; color: var(--orange); }
.brand__it { color: var(--orange); }
.brandimg { height: 34px; width: auto; max-width: none; flex: none; display: block; }
.footer .brandimg { height: 30px; }
@media (max-width: 560px) { .brandimg { height: 28px; } }
.nav--dark .brand__word { color: #fff; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 80;
  background: rgba(255,255,255,.85); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav__inner { display: flex; align-items: center; gap: 22px; height: 74px; }
.nav__links { display: flex; gap: 28px; margin-left: 18px; }
.nav__links a { text-decoration: none; color: var(--ink-soft); font-weight: 600; font-size: 15px; transition: color .15s; }
.nav__links a:hover, .nav__links a.active { color: var(--orange); }
.nav__cta { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.nav__toggle { display: none; margin-left: auto; background: none; border: none; font-size: 26px; color: var(--navy); cursor: pointer; }

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(255,199,0,.28), transparent 60%),
    radial-gradient(700px 500px at 5% 0%, rgba(255,106,0,.10), transparent 55%),
    var(--bg-soft);
  padding: 80px 0 90px;
  border-bottom: 1px solid var(--line);
}
.hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center; }
.hero__title { font-size: clamp(34px, 5vw, 56px); margin-bottom: 22px; }
.hero__lead { font-size: clamp(17px, 2vw, 19px); color: var(--ink-soft); max-width: 540px; margin-bottom: 30px; }
.hero__buttons { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }
.hero__tagline {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px;
  letter-spacing: .12em; color: var(--orange); background: #fff; border: 1px solid var(--line-2);
  padding: 8px 16px; border-radius: 999px; box-shadow: var(--shadow-sm);
}
.hero__tagline b { color: var(--navy); }

/* ---------- Estimate mockup (hero + product) ---------- */
.est {
  display: grid; grid-template-columns: 1fr auto 1.15fr; gap: 14px; align-items: center;
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow);
}
.est__doc, .est__result { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.est__doc { background: #fafbfc; }
.est__cap { font-size: 12px; font-weight: 700; color: var(--ink-dim); padding: 10px 12px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 6px; }
.est__lines { padding: 14px; display: grid; gap: 8px; }
.est__lines i { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #e9edf1, #f4f6f8); }
.est__lines i:nth-child(1) { width: 80%; } .est__lines i:nth-child(2) { width: 95%; }
.est__lines i:nth-child(3) { width: 60%; } .est__lines i:nth-child(4) { width: 88%; }
.est__draw { height: 66px; margin: 6px 14px 14px; border: 1px dashed var(--line-2); border-radius: 8px;
  background: repeating-linear-gradient(45deg, #f4f6f8 0 8px, #fff 8px 16px); position: relative; }
.est__draw::after { content: "Drawing"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; color: var(--ink-dim); font-weight: 700; }
.est__arrow { text-align: center; }
.est__arrow b { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--yellow)); color: #fff; font-size: 12px; font-weight: 800; margin: 0 auto 4px; box-shadow: 0 8px 18px -6px rgba(255,106,0,.7); }
.est__arrow small { font-size: 11px; color: var(--ink-dim); font-weight: 700; }
.est__result { background: #fff; }
.est__row { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; font-size: 13px; border-bottom: 1px solid var(--line); }
.est__row span { color: var(--ink-soft); }
.est__row b { font-weight: 700; }
.est__total { display: flex; align-items: center; justify-content: space-between; padding: 12px; background: var(--bg-warm); font-weight: 800; }
.est__total b { color: var(--orange); font-size: 17px; }
.est__pill { display: inline-block; margin: 10px 12px; font-size: 12px; font-weight: 700; color: #1a7f4b; background: #e6f6ec; padding: 4px 10px; border-radius: 999px; }

/* ---------- Marquee (rolling clients) ---------- */
.marquee { padding: 26px 0; background: #fff; border-bottom: 1px solid var(--line); overflow: hidden; }
.marquee__label { text-align: center; color: var(--ink-dim); font-size: 14px; font-weight: 600; margin-bottom: 18px; }
.marquee__mask { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: 56px; width: max-content; animation: marquee 26s linear infinite; }
.marquee__track span { font-weight: 800; font-size: 22px; letter-spacing: .03em; color: #b9c0c8; white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.section { padding: 92px 0; }
.section--soft { background: var(--bg-soft); }
.section--warm { background: var(--bg-warm); }
.section--navy { background: var(--navy); color: #fff; }
.section--navy .section__sub, .section--navy .card p { color: #b9c3cf; }
.section__head { max-width: 780px; margin: 0 auto 52px; text-align: center; }
.section__head h2 { font-size: clamp(28px, 4.2vw, 44px); }
.section__sub { margin-top: 16px; font-size: 18px; color: var(--ink-soft); }

/* ---------- Cards ---------- */
.cards { display: grid; gap: 20px; }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 26px; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.section--navy .card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); box-shadow: none; }
.card__ic {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 24px;
  background: linear-gradient(135deg, var(--cream), #fff); border: 1px solid var(--line); margin-bottom: 16px;
}
.section--navy .card__ic { background: rgba(255,106,0,.15); border-color: rgba(255,106,0,.3); }
.card h3 { font-size: 20px; margin-bottom: 8px; }
.card p { color: var(--ink-soft); font-size: 15px; }

/* ---------- Split rows ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split--rev .split__text { order: 2; }
.split__text h2 { font-size: clamp(26px, 3.6vw, 40px); margin-bottom: 18px; }
.split__text > p { color: var(--ink-soft); font-size: 17px; margin-bottom: 20px; }
.ticks { list-style: none; display: grid; gap: 13px; margin: 20px 0 24px; }
.ticks li { position: relative; padding-left: 30px; color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
.ticks li::before {
  content: "✔"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 6px;
  background: rgba(255,106,0,.12); color: var(--orange); font-size: 12px; font-weight: 800;
  display: grid; place-items: center;
}

/* ---------- Problem callout ---------- */
.callout {
  background: #fff; border: 1px solid var(--line-2); border-left: 5px solid var(--orange);
  border-radius: var(--radius); padding: 28px 30px; box-shadow: var(--shadow-sm);
}
.callout p { font-size: 17px; color: var(--ink-soft); }
.callout p + p { margin-top: 14px; }
.callout b { color: var(--ink); }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 24px 20px; }
.step b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; margin-bottom: 14px;
  background: linear-gradient(135deg, var(--orange), var(--yellow)); color: #fff; font-size: 15px; }
.step p { font-size: 14px; color: var(--ink-soft); }

/* ---------- Pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pillar { text-align: center; }
.pillar__ic { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px; display: grid; place-items: center; font-size: 24px;
  background: rgba(255,106,0,.14); border: 1px solid rgba(255,106,0,.28); }
.pillar h3 { font-size: 18px; margin-bottom: 6px; }
.pillar p { font-size: 14px; color: var(--ink-soft); }
.section--navy .pillar p { color: #b9c3cf; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat-box { text-align: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 18px; box-shadow: var(--shadow-sm); }
.stat-box b { display: block; font-size: 42px; background: linear-gradient(100deg, var(--orange), var(--yellow)); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.stat-box span { display: block; margin-top: 8px; color: var(--ink-soft); font-size: 14px; }

/* ---------- Testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.quote { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); }
.quote__stars { color: var(--yellow); font-size: 16px; margin-bottom: 12px; letter-spacing: 2px; }
.quote p { font-size: 16px; margin-bottom: 20px; }
.quote footer { display: flex; align-items: center; gap: 12px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--orange), var(--yellow)); }
.quote footer b { display: block; }
.quote footer span { font-size: 13px; color: var(--ink-dim); }

/* ---------- Priority band ---------- */
.priority { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.priority__text h2 { font-size: clamp(26px, 3.6vw, 40px); margin-bottom: 16px; }
.priority__text p { color: #b9c3cf; font-size: 18px; }
.priority__list { display: grid; gap: 14px; }
.priority__list div { display: flex; gap: 14px; align-items: flex-start; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-sm); padding: 18px; }
.priority__list b { color: var(--orange); font-size: 22px; flex: none; }
.priority__list span { color: #d3dae2; font-size: 15px; }

/* ---------- FAQ ---------- */
.faq { max-width: 800px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: 20px 22px; font-weight: 700; font-size: 17px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--orange); font-size: 24px; font-weight: 700; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 22px 22px; color: var(--ink-soft); }

/* ---------- CTA / contact catcher ---------- */
.catcher { text-align: center; }
.catcher .section__head { margin-bottom: 30px; }
.contact-card {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; text-align: left;
  background: #fff; border: 1px solid var(--line-2); border-radius: 28px; padding: 46px; box-shadow: var(--shadow);
}
.contact-card h2 { font-size: clamp(26px, 3.6vw, 38px); margin-bottom: 16px; }
.contact-card p { color: var(--ink-soft); font-size: 18px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 7px; }
.field input, .field textarea {
  width: 100%; padding: 13px 15px; border-radius: 12px; border: 1px solid var(--line-2);
  background: var(--bg-soft); font-family: var(--font); font-size: 15px; color: var(--ink); resize: vertical;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--orange); background: #fff; }
.form-note { margin-top: 12px; min-height: 18px; text-align: center; font-weight: 700; color: #1a7f4b; }

/* ---------- Page hero (inner pages) ---------- */
.pagehero { background: var(--navy); color: #fff; padding: 70px 0; }
.pagehero .eyebrow { color: var(--yellow); }
.pagehero h1 { font-size: clamp(32px, 5vw, 52px); margin-bottom: 16px; }
.pagehero p { color: #b9c3cf; font-size: 19px; max-width: 640px; }

/* ---------- Photo placeholder ---------- */
.photo {
  border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden;
  background: linear-gradient(135deg, var(--cream), #fff); aspect-ratio: 4 / 3;
  display: grid; place-items: center; color: var(--ink-dim); font-weight: 700; text-align: center; padding: 20px;
}
.photo small { display: block; font-weight: 600; font-size: 12px; margin-top: 6px; color: var(--ink-dim); }

/* ---------- Blog / case cards ---------- */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.post { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; text-decoration: none; color: inherit; display: block; }
.post:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.post__img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; display: flex; align-items: flex-end; padding: 16px;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1px, transparent 0) 0 0 / 15px 15px,
    linear-gradient(135deg, #ff8a1e 0%, #ff6a00 55%, #e24e00 100%); }
.post__img::after { content: ""; position: absolute; top: -45%; right: -15%; width: 65%; height: 130%; background: radial-gradient(circle, rgba(255,255,255,.28), transparent 70%); pointer-events: none; }
.post__ic { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); width: 104px; height: 104px; filter: brightness(0) invert(1); opacity: .16; pointer-events: none; }
.post__label { position: relative; z-index: 1; color: #fff; font-weight: 800; font-size: 15px; line-height: 1.25; text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.post__body { padding: 22px; }
.post__tag { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); }
.post h3 { font-size: 19px; margin: 8px 0; }
.post__body p { color: var(--ink-soft); font-size: 14px; }

/* Featured in + events (content page) */
.press { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 10px; }
.press__item { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease; }
.press__item:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.press__logo { font-weight: 800; font-size: 20px; color: var(--navy); letter-spacing: -.01em; }
.press__note { color: var(--ink-soft); font-size: 14px; line-height: 1.5; margin: 10px 0 14px; }
.press__link { color: var(--orange); font-weight: 700; font-size: 14px; }
.events { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 10px; }
.event { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.event__cover { aspect-ratio: 4 / 3; background: linear-gradient(135deg, #eef1f5, #dbe2ea); display: grid; place-items: center; }
.event__cover img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.event__body { padding: 18px; }
.event__tag { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); }
.event h3 { font-size: 17px; margin: 6px 0; }
.event__body p { color: var(--ink-soft); font-size: 14px; margin: 0; }
@media (max-width: 860px) { .press, .events { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .press, .events { grid-template-columns: 1fr; } }

/* Work-in-progress blur overlay */
.wip { position: relative; }
.wip .press, .wip .events { filter: blur(7px); opacity: .5; pointer-events: none; user-select: none; }
.wip__overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; pointer-events: none; }
.wip__badge { display: inline-flex; align-items: center; gap: 14px; background: rgba(255,255,255,.94); border: 1px solid var(--line-2); border-radius: 18px; padding: 16px 24px; box-shadow: var(--shadow); }
.wip__text b { display: block; font-weight: 800; color: var(--navy); font-size: 16px; }
.wip__text span { font-size: 13px; color: var(--ink-soft); }
.wip__rig { width: 46px; height: 46px; flex: none; }
.wip__bit { animation: wipDrill 1.1s ease-in-out infinite; }
@keyframes wipDrill { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .wip__bit { animation: none; } }

/* ---------- Footer ---------- */
.footer { background: var(--navy); color: #b9c3cf; padding: 60px 0 30px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer__tag { font-weight: 800; letter-spacing: .1em; font-size: 12px; color: var(--yellow); margin: 12px 0 10px; }
.footer__brand p { font-size: 14px; max-width: 260px; }
.footer h4 { color: #fff; font-size: 14px; margin-bottom: 14px; letter-spacing: .04em; }
.footer a { display: block; text-decoration: none; color: #b9c3cf; font-size: 14px; margin-bottom: 9px; transition: color .15s; }
.footer a:hover { color: var(--yellow); }
.footer__copy { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; color: #8a94a1; }

/* ---------- Orange icon system ---------- */
.ic { display:inline-block; width:24px; height:24px; background-repeat:no-repeat; background-position:center; background-size:contain; vertical-align:middle; }
.ic--inline { width:16px; height:16px; vertical-align:-3px; margin-right:6px; }
.pillar__ic .ic { width:26px; height:26px; }
.ic-clock{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");}
.ic-target{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");}
.ic-phone{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");}
.ic-mail{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");}
.ic-globe{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");}
.ic-search{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");}
.ic-monitor{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3C/svg%3E");}
.ic-check{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");}
.ic-users{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");}
.ic-shield{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");}
.ic-trending{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 6 13.5 16.5 8.5 11.5 1 19'/%3E%3Cpolyline points='17 6 23 6 23 12'/%3E%3C/svg%3E");}
.ic-folder{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");}
.ic-box{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='16.5' y1='9.4' x2='7.5' y2='4.21'/%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'/%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'/%3E%3C/svg%3E");}
.ic-phoneapp{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2' ry='2'/%3E%3Cline x1='12' y1='18' x2='12.01' y2='18'/%3E%3C/svg%3E");}
.ic-money{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='1' x2='12' y2='23'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");}
.ic-file{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E");}
.ic-gear{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");}
.ic-barchart{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='20' x2='12' y2='10'/%3E%3Cline x1='18' y1='20' x2='18' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='16'/%3E%3C/svg%3E");}
.ic-grid{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E");}
.ic-tool{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");}
.ic-briefcase{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");}
.ic-zap{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E");}
.ic-calc{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cline x1='8' y1='6' x2='16' y2='6'/%3E%3Cline x1='8' y1='11' x2='8' y2='11'/%3E%3Cline x1='12' y1='11' x2='12' y2='11'/%3E%3Cline x1='16' y1='11' x2='16' y2='18'/%3E%3Cline x1='8' y1='15' x2='8' y2='15'/%3E%3Cline x1='12' y1='15' x2='12' y2='15'/%3E%3C/svg%3E");}

/* ---------- ROI box (products) ---------- */
.roi { background: var(--bg-warm); border: 1px solid #ffe0bd; border-radius: 14px; padding: 14px 18px; font-size: 15px; color: var(--ink-soft); margin: 6px 0 22px; }
.roi b { color: var(--orange); }
.prod__lead { color: var(--ink-soft); font-size: 17px; }
.prod__lead b { color: var(--ink); }

/* ---------- Estimate calculator ---------- */
.calc { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: start; }
.calc__form { background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); }
.calc__row { margin-bottom: 18px; }
.calc__row > label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.calc select, .calc input[type=number], .calc input[type=text] { width: 100%; padding: 13px 15px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-soft); font-family: var(--font); font-size: 15px; color: var(--ink); }
.calc select:focus, .calc input:focus { outline: none; border-color: var(--orange); background: #fff; }
.calc__checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.calc__check { display: flex; align-items: center; gap: 10px; background: var(--bg-soft); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; font-size: 14px; font-weight: 600; cursor: pointer; }
.calc__check input { width: 18px; height: 18px; accent-color: var(--orange); }
.calc__result { position: sticky; top: 92px; background: var(--navy); color: #fff; border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); }
.calc__result h3 { color: #fff; font-size: 18px; margin-bottom: 4px; }
.calc__hint { color: #b9c3cf; font-size: 14px; margin-bottom: 20px; }
.calc__price { font-size: 38px; font-weight: 800; background: linear-gradient(100deg, var(--orange), var(--yellow)); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.15; }
.calc__price small { display: block; font-size: 13px; font-weight: 600; color: #8a94a1; margin-top: 8px; -webkit-text-fill-color: #8a94a1; }
.calc__note { color: #b9c3cf; font-size: 13px; margin-top: 18px; }
.calc__lead { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); display: none; }
.calc__lead.show { display: block; }
.calc__lead input { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #fff; font-family: var(--font); font-size: 14px; margin-bottom: 10px; }
.calc__lead input::placeholder { color: #8a94a1; }
.calc__lead input:focus { outline: none; border-color: var(--orange); }
@media (max-width: 820px) { .calc { grid-template-columns: 1fr; } .calc__result { position: static; } .calc__checks { grid-template-columns: 1fr; } }

/* ---------- Hero six-shot gallery ---------- */
.hero__gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.shot { background: #fff; border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; }
.shot:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.shot__bar { height: 24px; background: var(--bg-soft); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 5px; padding: 0 10px; }
.shot__bar i { width: 6px; height: 6px; border-radius: 50%; background: #d9dee6; }
.shot__body { padding: 14px; display: flex; flex-direction: column; gap: 9px; min-height: 96px; }
.shot__ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, var(--cream), #fff); border: 1px solid var(--line); }
.shot__label { font-size: 13px; font-weight: 800; color: var(--ink); }
.shot__lines { display: grid; gap: 6px; margin-top: auto; }
.shot__lines i { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--cream), #eef1f5); }
.shot__lines i:last-child { width: 70%; }
.hero__gallery-note { margin-top: 14px; text-align: center; font-size: 14px; color: var(--ink-dim); font-weight: 600; }

/* ---------- Problem grid (pain) ---------- */
.paingrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pain { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 34px; box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.pain:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pain::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--orange), var(--yellow)); }
.pain__num { position: absolute; top: 16px; right: 24px; font-family: var(--font); font-size: 64px; font-weight: 800; color: var(--bg-warm); line-height: 1; letter-spacing: -.03em; }
.pain__head { display: flex; align-items: center; gap: 13px; margin-bottom: 12px; position: relative; }
.pain__ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--cream), #fff); border: 1px solid var(--line); flex: none; }
.pain h3 { font-size: 20px; }
.pain p { color: var(--ink-soft); font-size: 15px; position: relative; max-width: 92%; }

/* ---------- Step badge (how we work) ---------- */
.stepbadge { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font); font-weight: 800; font-size: 18px; color: #0c1400; background: linear-gradient(135deg, var(--orange), var(--yellow)); margin-bottom: 16px; }

@media (max-width: 760px) { .paingrid { grid-template-columns: 1fr; } }

/* ---------- Case studies / use cases ---------- */
/* ---------- Use cases (result led) ---------- */
.ucases { display: flex; flex-direction: column; gap: 18px; }
.ucase { display: grid; grid-template-columns: 260px 1fr; align-items: stretch; background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; }
.ucase:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.ucase__metric { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 34px 30px; color: #fff; background: linear-gradient(160deg, #ff8a1e, var(--orange)); overflow: hidden; }
.ucase__metric::after { content: ""; position: absolute; right: -40px; bottom: -55px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.12); }
.ucase__metric b { font-size: 58px; font-weight: 800; line-height: .95; letter-spacing: -1px; }
.ucase__metric b i { font-style: normal; font-size: 34px; font-weight: 700; vertical-align: super; }
.ucase__metric span { font-size: 15px; font-weight: 700; }
.ucase__metric em { font-style: normal; font-size: 12.5px; font-weight: 600; opacity: .9; margin-top: 8px; position: relative; }
.ucase__body { padding: 30px 34px; display: flex; flex-direction: column; gap: 12px; }
.ucase__head { display: flex; align-items: center; gap: 12px; }
.ucase__head h3 { font-size: 21px; }
.ucase__tag { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); background: var(--bg-warm); padding: 4px 11px; border-radius: 999px; }
.ucase__arc { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 14px; font-weight: 700; }
.ucase__arc .was { color: var(--ink-dim); text-decoration: line-through; text-decoration-color: rgba(13,27,42,.25); }
.ucase__arc .arrow { color: var(--orange); font-weight: 800; }
.ucase__arc .now { color: var(--ink); }
.ucase__body > p { color: var(--ink-soft); font-size: 15px; }
@media (max-width: 720px) { .ucase { grid-template-columns: 1fr; } .ucase__metric { flex-direction: row; align-items: baseline; gap: 14px; padding: 22px 26px; } .ucase__metric em { margin-top: 0; } }

/* ---------- Problem: big outlined-number rows ---------- */
.leakrows { border-top: 1px solid var(--line); }
.leak { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 34px; padding: 34px 10px; border-bottom: 1px solid var(--line); transition: padding-left .25s ease, background .25s ease; }
.leak::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(180deg, var(--orange), var(--yellow)); border-radius: 0 4px 4px 0; transition: width .25s ease; }
.leak:hover { padding-left: 26px; background: var(--bg-soft); }
.leak:hover::before { width: 5px; }
.leak__num { font-family: var(--font); font-weight: 800; font-size: clamp(46px, 6.5vw, 82px); line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.6px var(--orange); min-width: 1.7em; transition: color .25s ease, -webkit-text-stroke .25s ease; }
.leak:hover .leak__num { color: var(--orange); -webkit-text-stroke: 0; }
.leak__body h3 { font-size: clamp(20px, 2.4vw, 26px); margin-bottom: 8px; }
.leak__body p { color: var(--ink-soft); font-size: 16px; max-width: 640px; }
.leak__ic { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, var(--cream), #fff); border: 1px solid var(--line); flex: none; }
.leak__ic .ic { width: 26px; height: 26px; }
@media (max-width: 700px) { .leak { grid-template-columns: auto 1fr; gap: 18px; } .leak__ic { display: none; } }

/* ---------- Process: connected timeline ---------- */
.timeline { position: relative; max-width: 940px; margin: 8px auto 0; }
.timeline::before { content: ''; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 2px; background: rgba(255,255,255,.14); transform: translateX(-50%); }
.tl { position: relative; width: 50%; padding: 16px 44px; box-sizing: border-box; }
.tl--left { left: 0; text-align: right; }
.tl--right { left: 50%; }
.tl__node { position: absolute; top: 24px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font); font-weight: 800; font-size: 18px; color: #0c1400; background: linear-gradient(135deg, var(--orange), var(--yellow)); box-shadow: 0 0 0 6px var(--navy), 0 0 22px rgba(255,140,0,.5); z-index: 2; }
.tl--left .tl__node { right: -23px; }
.tl--right .tl__node { left: -23px; }
.tl__card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 22px 24px; transition: transform .2s ease, border-color .2s ease; }
.tl__card:hover { transform: translateY(-3px); border-color: rgba(255,140,0,.4); }
.tl__card h3 { color: #fff; font-size: 19px; margin-bottom: 8px; }
.tl__card p { color: #b9c3cf; font-size: 15px; }
@media (max-width: 760px) {
  .timeline::before { left: 22px; }
  .tl { width: 100%; left: 0 !important; text-align: left !important; padding: 14px 0 14px 62px; }
  .tl__node { left: 0 !important; right: auto !important; }
}

/* ---------- Process (how we work) ---------- */
.process { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; }
.process__head { position: sticky; top: 96px; }
.process__head h2 { font-size: clamp(26px, 3.4vw, 38px); margin: 8px 0 16px; }
.process__head p { color: #b9c3cf; font-size: 17px; margin-bottom: 26px; }
.process__list { display: grid; }
.pstep { display: grid; grid-template-columns: auto 1fr; gap: 20px; padding: 24px 4px; border-top: 1px solid rgba(255,255,255,.12); align-items: start; transition: padding-left .2s ease; }
.pstep:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.pstep:hover { padding-left: 12px; }
.pstep__n { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font); font-weight: 800; font-size: 17px; color: var(--orange); border: 1.5px solid rgba(255,140,0,.5); background: rgba(255,140,0,.08); flex: none; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.pstep:hover .pstep__n { background: linear-gradient(135deg, var(--orange), var(--yellow)); color: #0c1400; border-color: transparent; }
.pstep h3 { color: #fff; font-size: 19px; margin-bottom: 6px; }
.pstep p { color: #b9c3cf; font-size: 15px; }
@media (max-width: 900px) { .process { grid-template-columns: 1fr; gap: 32px; } .process__head { position: static; } }

/* ---------- Nav spacing: group links near the CTA ---------- */
.nav__links { margin-left: auto; }
.nav__cta { margin-left: 26px; }

/* ---------- Hero palette (tall feature panels) ---------- */
.hero__palette { display: flex; gap: 12px; justify-content: center; }
.pcard { flex: 1; max-width: 134px; background: #fff; border: 1px solid var(--line-2); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); transition: transform .2s ease; }
.pcard:hover { transform: translateY(-6px); }
.pcard:nth-child(odd) { margin-top: 30px; }
.pcard__screen { aspect-ratio: 9 / 16; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 16px; }
.pcard:nth-child(1) .pcard__screen { background: linear-gradient(180deg, #fff6ec, #ffe9d2); }
.pcard:nth-child(2) .pcard__screen { background: linear-gradient(180deg, #ffedd6, #ffdcb0); }
.pcard:nth-child(3) .pcard__screen { background: linear-gradient(180deg, #ffe3bd, #ffcf95); }
.pcard:nth-child(4) .pcard__screen { background: linear-gradient(180deg, #ffd9a3, #ffc27a); }
.pcard__ic { width: 44px; height: 44px; border-radius: 12px; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.pcard__ic .ic { width: 22px; height: 22px; }
.pcard__lines { display: grid; gap: 7px; width: 100%; }
.pcard__lines i { height: 7px; border-radius: 4px; background: rgba(255,255,255,.8); }
.pcard__lines i:nth-child(2) { width: 80%; }
.pcard__lines i:nth-child(3) { width: 58%; }
.pcard__label { padding: 12px 8px; text-align: center; font-size: 12px; font-weight: 800; color: var(--ink); }
@media (max-width: 940px) { .hero__palette { max-width: 440px; margin: 0 auto; } }

/* ---------- Who we are ---------- */
.who { background: radial-gradient(720px 420px at 100% -10%, rgba(255,140,0,.10), transparent 60%), var(--bg); }
.who__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.who__text h2 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 18px; }
.who__text p { color: var(--ink-soft); font-size: 17px; margin-bottom: 16px; }
.who__text .btn { margin-top: 8px; }
.who__caps { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cap { display: flex; align-items: center; gap: 13px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow-sm); font-weight: 700; font-size: 15px; transition: transform .2s ease, border-color .2s ease; }
.cap:hover { transform: translateY(-3px); border-color: rgba(255,140,0,.4); }
.cap__ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg, var(--cream), #fff); border: 1px solid var(--line); flex: none; }
.cap__ic .ic { width: 22px; height: 22px; }
@media (max-width: 900px) { .who__grid { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 480px) { .who__caps { grid-template-columns: 1fr; } }

/* ---------- Reality bento ---------- */
.bento { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: auto auto; gap: 18px; }
.bento__big { grid-column: 1; grid-row: 1 / span 2; background: linear-gradient(160deg, rgba(255,106,0,.20), rgba(255,140,0,.04)); border: 1px solid rgba(255,140,0,.35); border-radius: 20px; padding: 34px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.bento__tag { display: inline-block; font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); margin-bottom: 12px; }
.bento__big h3 { color: #fff; font-size: clamp(23px, 2.6vw, 30px); line-height: 1.15; }
.bento__big p { color: #d3dae2; font-size: 16px; }
.bcard { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 24px; transition: transform .2s ease, border-color .2s ease; }
.bcard:hover { transform: translateY(-3px); border-color: rgba(255,140,0,.35); }
.bnum { display: block; font-weight: 800; font-size: 13px; letter-spacing: .1em; color: var(--orange); margin-bottom: 10px; }
.bcard h3 { color: #fff; font-size: 18px; margin-bottom: 7px; }
.bcard p { color: #b9c3cf; font-size: 14px; }
@media (max-width: 860px) { .bento { grid-template-columns: 1fr 1fr; } .bento__big { grid-column: 1 / span 2; grid-row: auto; } }
@media (max-width: 520px) { .bento { grid-template-columns: 1fr; } .bento__big { grid-column: 1; } }

/* ---------- Testimonials (voices) ---------- */
.voices { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; align-items: stretch; }
.voice__col { display: grid; grid-template-rows: 1fr 1fr; gap: 22px; }
.voice { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 30px 30px 26px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; }
.voice:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.voice--lead { background: linear-gradient(165deg, #fff, var(--bg-warm)); border-color: rgba(255,140,0,.28); padding: 40px 38px 34px; }
.voice--lead::before { content: "\201C"; position: absolute; top: 18px; right: 30px; font-family: var(--font); font-weight: 800; font-size: 96px; line-height: 1; color: rgba(255,140,0,.14); }
.voice__rate { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.voice__stars { color: #ff9d00; letter-spacing: 3px; font-size: 16px; }
.voice__badge { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--orange); background: rgba(255,140,0,.12); padding: 4px 11px; border-radius: 999px; }
.voice .voice__stars { margin-bottom: 14px; }
.voice__quote { color: var(--ink); position: relative; z-index: 1; margin-bottom: 22px; }
.voice--lead .voice__quote { font-size: 22px; font-weight: 600; line-height: 1.5; }
.voice__col .voice__quote { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.voice__by { display: flex; align-items: center; gap: 13px; margin-top: auto; }
.voice__av { width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 15px; color: #3d1a00; background: linear-gradient(135deg, var(--yellow), var(--orange)); }
.voice__by b { display: block; font-size: 15px; }
.voice__by span { font-size: 13px; color: var(--ink-dim); }
@media (max-width: 860px) { .voices { grid-template-columns: 1fr; } .voice--lead .voice__quote { font-size: 19px; } }

/* ---------- What makes us different ---------- */
.diffwrap { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.diffcol { border-radius: 22px; padding: 34px; }
.diffcol h3 { font-size: 20px; margin-bottom: 12px; }
.diffcol--old { background: #f1f3f6; border: 1px solid var(--line); }
.diffcol--old h3 { color: var(--ink-dim); }
.diffcol--new { background: linear-gradient(160deg, var(--navy), #17253c); border: 1px solid rgba(255,140,0,.3); color: #fff; box-shadow: var(--shadow); }
.diffrow { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid rgba(13,27,42,.08); font-size: 15px; font-weight: 600; }
.diffcol--old .diffrow { color: var(--ink-soft); }
.diffcol--new .diffrow { border-top-color: rgba(255,255,255,.1); }
.diffrow:first-of-type { border-top: none; }
.diffx { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: #e3e6ea; color: #98a1ad; font-weight: 800; font-size: 12px; flex: none; }
.diffcheck { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: rgba(255,140,0,.2); flex: none; }
@media (max-width: 760px) { .diffwrap { grid-template-columns: 1fr; } }

/* ---------- Notify (calculator coming soon) ---------- */
.soon { display: block; width: max-content; margin: 0 auto 18px; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--orange); background: var(--warm); border: 1px solid #ffddb8; padding: 6px 14px; border-radius: 999px; }
.notify { display: flex; flex-direction: column; align-items: center; }
.notify-card { max-width: 480px; width: 100%; margin: 26px auto 0; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 30px 30px 26px; box-shadow: var(--shadow); }
.notify-card.in { animation: notifyIn .35s ease; }
@keyframes notifyIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.notify-card__title { font-size: 20px; margin-bottom: 6px; }
.notify-card__sub { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 20px; }
.notify-card .form-note:not(:empty) { margin-top: 4px; font-weight: 700; color: #1a7d34; background: #eafbee; border: 1px solid #bfe9c9; border-radius: 11px; padding: 13px 16px; }

/* ---------- Video embed + gallery + solution CTA ---------- */
.media-showcase { margin-top: 50px; }
.shot-img { width: 100%; border-radius: 18px; border: 1px solid var(--line); box-shadow: var(--shadow); display: block; }
.video-embed { position: relative; width: 100%; max-width: 920px; margin: 0 auto; height: 0; padding-bottom: min(56.25%, 518px); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); background: #000; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 28px; max-width: 920px; margin-left: auto; margin-right: auto; }
.gallery img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .2s ease; }
.gallery img:hover { transform: scale(1.02); }
.sol-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (max-width: 520px) { .sol-cta .btn { width: 100%; text-align: center; } }
.ticks--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; margin-top: 22px; }
@media (max-width: 700px) { .ticks--2 { grid-template-columns: 1fr; } }
.gallery__hint { text-align: center; color: var(--ink-dim); font-size: 13px; margin: 26px 0 0; }
.zoomable { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; background: rgba(6,10,16,.9); display: none; align-items: center; justify-content: center; z-index: 2000; padding: 24px; cursor: zoom-out; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 96vw; max-height: 92vh; border-radius: 10px; box-shadow: 0 24px 70px rgba(0,0,0,.6); }
.lightbox__close { position: absolute; top: 18px; right: 24px; color: #fff; font-size: 34px; font-weight: 700; line-height: 1; cursor: pointer; opacity: .8; }
.lightbox__close:hover { opacity: 1; }

/* ---------- Market overlap bubbles ---------- */
.market { overflow: hidden; }
.market__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.market__text h2 { font-size: clamp(26px, 3.6vw, 40px); margin-bottom: 16px; }
.market__text p { color: var(--ink-soft); font-size: 17px; margin-bottom: 24px; }
.bubbles { position: relative; height: 400px; }
.bubble { position: absolute; border-radius: 50%; display: grid; place-content: center; text-align: center; padding: 10px; color: #7a3500; background: radial-gradient(circle at 35% 30%, rgba(255,192,122,.92), rgba(255,120,20,.6)); border: 1.5px solid rgba(255,140,0,.5); mix-blend-mode: multiply; transition: transform .25s ease; }
.bubble:hover { transform: scale(1.06); z-index: 5; }
.bubble b { display: block; font-size: 15px; font-weight: 800; line-height: 1.1; }
.bubble small { font-size: 11px; font-weight: 700; opacity: .85; }
@media (max-width: 900px) { .market__grid { grid-template-columns: 1fr; gap: 30px; } .bubbles { width: 400px; margin: 0 auto; } }
@media (max-width: 520px) { .bubbles { zoom: 0.80; } }
@media (max-width: 380px) { .bubbles { zoom: 0.66; } }

/* ---------- Case study ---------- */
.casewrap { max-width: 820px; margin: 0 auto; }
.case-note { display: inline-block; font-size: 13px; color: var(--ink-dim); background: var(--bg-warm); border: 1px solid #ffddb8; padding: 7px 14px; border-radius: 999px; margin-bottom: 20px; }
.case-p { color: var(--ink-soft); font-size: 17px; line-height: 1.7; margin-top: 6px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 10px; }
.kpis--3 { grid-template-columns: repeat(3, 1fr); }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px 16px; box-shadow: var(--shadow-sm); text-align: center; }
.kpi b { display: block; font-size: 32px; font-weight: 800; line-height: 1; background: linear-gradient(100deg, var(--orange), #ff8a1e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpi span { display: block; margin-top: 8px; font-size: 13px; color: var(--ink-soft); }
@media (max-width: 760px) { .kpis { grid-template-columns: 1fr 1fr; } }
/* Case study mobile polish */
@media (max-width: 560px) {
  .pagehero { padding: 46px 0; }
  .pagehero h1 { font-size: 29px; }
  .pagehero p { font-size: 16px; }
  .kpi { padding: 16px 12px; }
  .kpi b { font-size: 22px; }
  .kpi span { font-size: 12px; margin-top: 6px; }
  .case-p, .callout p { font-size: 16px; }
  .section__sub { font-size: 16px; }
  .section__head { margin-bottom: 34px; }
  .est__row { flex-wrap: wrap; gap: 2px 10px; }
  .est__row b, .est__total b { font-size: 13px; }
  .casewrap .case-note { font-size: 12px; }
}

/* ---------- Team ---------- */
.team { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 720px; margin: 0 auto; }
.tmember { text-align: center; }
.tmember__photo { width: 100%; max-width: 300px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 20px; border: 1px solid var(--line); box-shadow: var(--shadow); margin: 0 auto 16px; display: block; background: var(--bg-warm); }
.tmember h3 { font-size: 20px; margin-bottom: 4px; }
.tmember p { color: var(--ink-soft); font-size: 15px; }
@media (max-width: 560px) { .team { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- Honeypot (spam trap, hidden from humans) ---------- */
.hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .nav__inner { gap: 12px; }
  .brand { margin-right: auto; }
  .nav__links { position: absolute; top: 74px; left: 0; right: 0; flex-direction: column; background: #fff; padding: 16px 24px; gap: 4px; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm); display: none; margin-left: 0; }
  .nav__links.open { display: flex; }
  .nav__links a { padding: 12px 0; font-size: 16px; }
  .nav__toggle { display: block; order: 5; margin-left: 0; }
  .nav__cta { margin-left: 0; }
  .hero__inner, .split, .priority, .contact-card { grid-template-columns: 1fr; gap: 36px; }
  .split--rev .split__text { order: 0; }
  .cards--4, .cards--3, .stats, .pillars, .quotes, .posts, .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  /* keep ONE conversion button visible in the header; hide the ghost "Let's talk" */
  .nav__cta .btn--ghost { display: none; }
  .nav__cta { margin-left: 0; }
  .nav__cta .btn { padding: 9px 15px; font-size: 13px; white-space: nowrap; }
  .nav__inner { gap: 8px; }
  .brandimg { height: 26px; }
  .langtoggle a { width: 34px; }
  .langtoggle::before { width: 34px; transform: translateX(calc(var(--i, 0) * 34px)); }
}
@media (max-width: 560px) {
  .cards--4, .cards--3, .cards--2, .stats, .pillars, .quotes, .posts, .steps { grid-template-columns: 1fr; }
  .est { grid-template-columns: 1fr; }
  .est__arrow { transform: rotate(90deg); }
  .section { padding: 62px 0; }
  .container { padding: 0 18px; }
  .contact-card { padding: 28px 22px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 22px; }
  .hero__palette { flex-wrap: wrap; }
  .pcard { flex: 0 0 calc(50% - 8px); max-width: none; }
  .ticks--2 { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; }
}

/* ---------- Language toggle (EN / LT sliding switch) ---------- */
.langtoggle { position: relative; display: inline-flex; margin-left: 20px; padding: 3px; background: #eef0f3; border: 1px solid var(--line); border-radius: 999px; box-shadow: inset 0 1px 2px rgba(13,27,42,.06); flex: none; }
.langtoggle::before { content: ""; position: absolute; top: 3px; left: 3px; width: 44px; height: calc(100% - 6px); border-radius: 999px; background: linear-gradient(135deg, var(--orange), #ff8a1e); box-shadow: 0 2px 6px rgba(255,106,0,.4); transform: translateX(calc(var(--i, 0) * 44px)); transition: transform .32s cubic-bezier(.34, 1.56, .64, 1); }
.langtoggle a { position: relative; z-index: 1; width: 44px; text-align: center; padding: 6px 0; font-size: 12px; font-weight: 800; letter-spacing: .05em; color: var(--ink-dim); text-decoration: none; cursor: pointer; transition: color .2s ease; }
.langtoggle a.active { color: #fff; }
.langtoggle a:not(.active):hover { color: var(--orange); }
@media (max-width: 640px) { .langtoggle { margin-left: 12px; } }

/* ---------- Clients come back (100%) ---------- */
.retain__grid { display: grid; grid-template-columns: minmax(220px, 290px) 1fr; gap: clamp(26px, 5vw, 62px); align-items: start; }
.retain__num { text-align: center; padding: 40px 22px; border-radius: 24px;
  background: linear-gradient(160deg, rgba(255,106,0,.13), rgba(255,199,0,.05));
  border: 1px solid rgba(255,140,0,.28); box-shadow: var(--shadow-sm); }
.retain__big { display: block; font-size: clamp(62px, 9vw, 102px); font-weight: 800; line-height: .9; letter-spacing: -.035em;
  background: linear-gradient(100deg, var(--orange), var(--yellow)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.retain__cap { display: block; margin-top: 12px; font-weight: 800; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.retain__body h2 { font-size: clamp(25px, 3.2vw, 38px); line-height: 1.14; margin: 4px 0 16px; }
.retain__lead { color: var(--ink-soft); font-size: 17px; max-width: 58ch; }
.retain__pts { display: grid; gap: 20px; margin-top: 32px; }
.retain__pt { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.retain__pt .ic { width: 26px; height: 26px; margin-top: 2px; }
.retain__pt h3 { font-size: 17px; margin-bottom: 4px; }
.retain__pt p { color: var(--ink-soft); font-size: 15.5px; }
@media (max-width: 860px) {
  .retain__grid { grid-template-columns: 1fr; }
  .retain__num { padding: 28px 18px; }
  .retain__big { font-size: 68px; }
}

/* ---------- Copy solution description button ---------- */
.btn--copy.is-copied { border-color: var(--orange); color: var(--orange); background: var(--bg-soft); }

/* ---------- Screenshot carousel ---------- */
.shots { max-width: 980px; margin: 28px auto 0; outline: none; }
.shots:not(.is-ready) { min-height: 240px; }
.shots__bar { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-bottom: 12px; }
.shots__count { font-size: 13px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.shots__nav { display: flex; gap: 8px; }
.shots__btn, .shots__edge {
  display: grid; place-items: center; cursor: pointer; border: 0; padding: 0;
  background: linear-gradient(100deg, var(--orange), var(--orange-2)); color: #fff;
  border-radius: 999px; box-shadow: 0 10px 22px -10px rgba(255,106,0,.8);
  transition: transform .15s ease, box-shadow .15s ease;
}
.shots__btn { width: 40px; height: 40px; }
.shots__btn svg, .shots__edge svg { width: 21px; height: 21px; }
.shots__btn:hover, .shots__edge:hover { transform: scale(1.07); }
.shots__btn:active, .shots__edge:active { transform: scale(.96); }
.shots__stage { position: relative; border-radius: 18px; overflow: hidden; background: #fff;
  border: 1px solid var(--line); box-shadow: var(--shadow); }
.shots__img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; cursor: zoom-in; }
.shots__edge { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; opacity: .92; }
.shots__edge:hover { transform: translateY(-50%) scale(1.07); }
.shots__edge:active { transform: translateY(-50%) scale(.96); }
.shots__edge--prev { left: 14px; }
.shots__edge--next { right: 14px; }
.shots__thumbs { display: flex; gap: 10px; margin-top: 14px; overflow-x: auto; padding-bottom: 6px;
  scrollbar-width: thin; }
.shots__thumb { flex: 0 0 96px; padding: 0; border: 2px solid transparent; border-radius: 10px;
  background: none; cursor: pointer; overflow: hidden; line-height: 0; opacity: .55;
  transition: opacity .15s ease, border-color .15s ease; }
.shots__thumb img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; }
.shots__thumb:hover { opacity: .85; }
.shots__thumb.is-active { opacity: 1; border-color: var(--orange); }
@media (max-width: 640px) {
  .shots__edge { width: 38px; height: 38px; }
  .shots__edge--prev { left: 8px; }
  .shots__edge--next { right: 8px; }
  .shots__thumb { flex: 0 0 72px; }
  .shots__btn { width: 36px; height: 36px; }
}

/* ---------- Hero palette: smaller on phones ---------- */
@media (max-width: 640px) {
  .hero__palette { max-width: 322px; gap: 9px; }
  .pcard { max-width: 100px; border-radius: 15px; }
  .pcard:nth-child(odd) { margin-top: 22px; }
  .pcard__screen { gap: 11px; padding: 11px; }
  .pcard__ic { width: 33px; height: 33px; border-radius: 9px; }
  .pcard__ic .ic { width: 17px; height: 17px; }
  .pcard__lines { gap: 5px; }
  .pcard__lines i { height: 5px; }
  .pcard__label { padding: 9px 5px; font-size: 10px; }
}

/* ---------- Repair scene illustration above testimonials ---------- */
.repairscene { max-width: 1040px; margin: 0 auto clamp(26px, 4vw, 44px); }
.repairscene svg { display: block; width: 100%; height: auto; }
@media (max-width: 640px) { .repairscene { margin-bottom: 24px; } }

/* ---------- Big footer ---------- */
.footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 44px 36px; align-items: start; }
.footer__col h4 { color: #fff; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 15px; }
.footer__h4--gap { margin-top: 26px; }
.footer__more { color: var(--orange) !important; font-weight: 800; margin-top: 4px; }
.footer__more:hover { color: var(--yellow) !important; }
.footer__social { display: flex; gap: 10px; margin: 20px 0 18px; }
.sbtn { display: grid !important; place-items: center; width: 40px; height: 40px; margin: 0 !important;
  border-radius: 999px; color: #fff !important;
  background: linear-gradient(100deg, var(--orange), var(--orange-2));
  box-shadow: 0 10px 22px -12px rgba(255,106,0,.9);
  transition: transform .15s ease, filter .15s ease; }
.sbtn svg { width: 20px; height: 20px; }
.sbtn:hover { transform: translateY(-2px); filter: brightness(1.08); color: #fff !important; }
.footer__contact a { font-weight: 700; color: #e7edf3; }
.footer__contact a:hover { color: var(--yellow); }
.footer__legal { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); }
.footer__reg { font-size: 12.5px; color: #7f8a97; margin: 0 0 12px; line-height: 1.7; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; font-size: 13px; color: #8a94a1; }
.footer__bottom a { display: inline-block !important; margin: 0 !important; font-size: 13px; }
@media (max-width: 980px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; gap: 34px; }
  .footer__brand p { max-width: none; }
}

/* ---------- Summary block ---------- */
.sumgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 980px; margin: 0 auto; }
.sumcard { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px 22px;
  box-shadow: var(--shadow-sm); }
.sumcard__n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  font-weight: 800; font-size: 15px; color: #fff;
  background: linear-gradient(100deg, var(--orange), var(--orange-2)); }
.sumcard h3 { font-size: 16px; margin-bottom: 7px; }
.sumcard p { color: var(--ink-soft); font-size: 15px; line-height: 1.65; }
.sumhint { text-align: center; color: var(--ink-soft); font-size: 14px; margin: 26px 0 20px; }
@media (max-width: 760px) { .sumgrid { grid-template-columns: 1fr; } }

/* ---------- Play icon ---------- */
.ic-play{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='10 8 16 12 10 16' fill='%23ff6a00'/%3E%3C/svg%3E");}

/* ---------- Related market studies under each solution ---------- */
.related { margin-top: 30px; padding: 26px 24px; border-radius: 18px;
  background: linear-gradient(150deg, rgba(255,106,0,.07), rgba(255,199,0,.03));
  border: 1px solid rgba(255,140,0,.26); }
.related__h { font-size: 17px; margin-bottom: 6px; }
.related__sub { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 16px; }
.related__links { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 10px; align-items: stretch; }
.related__link { display: flex; align-items: center; background: #fff; border: 1px solid var(--line-2);
  border-radius: 14px; padding: 11px 15px; font-size: 13.5px; font-weight: 700; color: var(--ink);
  line-height: 1.35; text-decoration: none; min-width: 0;
  transition: border-color .15s ease, color .15s ease, transform .15s ease; }
.related__link:hover { border-color: var(--orange); color: var(--orange); transform: translateY(-1px); }
/* YouTube nuoroda rodoma tik PDF, svetaineje video ir taip yra iterptas */
.related__vid { display: none; }
@media (max-width: 560px) {
  .related { padding: 20px 16px; }
  .related__links { grid-template-columns: 1fr; gap: 8px; }
  .related__link { font-size: 13.5px; padding: 10px 13px; }
}

/* ---------- Print and save as PDF ---------- */
@media print {
  @page { size: A4; margin: 14mm 13mm 16mm; }

  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  html, body { background: #fff !important; color: #16202b !important; font-size: 10.5pt; }

  /* animacijos isjungimas spaudoje, kitaip kortelės lieka nematomos */
  .reveal, .reveal.in { opacity: 1 !important; transform: none !important;
    transition: none !important; animation: none !important; }


  .header, .footer, .lightbox, .nav, .hamburger, .langtoggle, .langsw,
  .sol-cta, .sumbtns, .sumhint, .video-embed, .gallery__hint,
  .shots__bar, .shots__edge, .btn, .wip__overlay, .wip,
  .marquee, .notify-card, form, .field, .breadcrumbs { display: none !important; }

  .section { padding: 7mm 0 0 !important; background: #fff !important; border: 0 !important; }
  .section--soft, .section--navy, .pagehero, .related { background: #fff !important; }
  .section--navy h2, .section--navy h3, .section--navy p,
  .section--navy .card h3, .section--navy .card p { color: #16202b !important; }
  .container { max-width: none !important; padding: 0 !important; }

  /* firmine antraste */
  .printhead { display: flex !important; align-items: flex-end; justify-content: space-between;
    gap: 14px; padding-bottom: 4mm; margin-bottom: 7mm; border-bottom: 3px solid #ff6a00; }
  .printhead img { width: 40mm; height: auto; }
  .printhead span { font-size: 8.5pt; color: #ff6a00; font-weight: 700; text-align: right; line-height: 1.6; }

  /* firmine poraste */
  .printfoot { display: block !important; margin-top: 9mm; padding: 5mm 6mm;
    border-radius: 3mm; background: #fff4e9 !important; border: 1px solid #ffc89a;
    font-size: 10pt; color: #16202b; line-height: 1.8; break-inside: avoid; }
  .printfoot b { display: block; font-size: 12pt; color: #ff6a00; margin-bottom: 1.5mm; }
  .printfoot i { display: block; font-style: normal; color: #55606e; margin-top: 2.5mm;
    padding-top: 2.5mm; border-top: 1px solid #ffc89a; font-size: 9pt; }

  h1 { font-size: 19pt !important; line-height: 1.18 !important; color: #16202b !important;
       margin-bottom: 3mm !important; }
  h2 { font-size: 13.5pt !important; line-height: 1.25 !important; color: #16202b !important;
       padding-left: 4mm; border-left: 1.2mm solid #ff6a00; margin-bottom: 3mm !important; }
  h3 { font-size: 11pt !important; color: #16202b !important; }
  p, li { font-size: 10pt !important; line-height: 1.6 !important; color: #38424f !important; }
  .prod__lead, .section__sub, .case-p { font-size: 10.5pt !important; }
  .eyebrow { color: #ff6a00 !important; font-size: 8.5pt !important; letter-spacing: .14em !important; }

  .kpis { display: grid !important; grid-template-columns: repeat(4, 1fr) !important;
    gap: 3mm !important; margin: 4mm 0 !important; }
  .kpis--3 { grid-template-columns: repeat(3, 1fr) !important; }
  .kpi { border: 1px solid #ffd3ab !important; background: #fff8f1 !important; box-shadow: none !important;
    padding: 3.5mm 2mm !important; border-radius: 2mm !important; break-inside: avoid; }
  .kpi b { font-size: 14pt !important; color: #ff6a00 !important; -webkit-text-fill-color: #ff6a00 !important;
    background: none !important; }
  .kpi span { font-size: 8pt !important; color: #55606e !important; }

  .cards, .sumgrid, .ticks--2 { display: grid !important; grid-template-columns: 1fr 1fr !important;
    gap: 3mm !important; }
  .cards--3, .cards--4 { grid-template-columns: 1fr 1fr !important; }
  .card, .sumcard { border: 1px solid #e6e9ee !important; background: #fff !important;
    box-shadow: none !important; padding: 3.5mm !important; border-radius: 2mm !important;
    break-inside: avoid; }
  .card__ic { display: none !important; }
  .sumcard__n { background: #ff6a00 !important; color: #fff !important; width: 7mm; height: 7mm;
    font-size: 9pt; }
  .ticks li { font-size: 10pt !important; }
  .roi, .callout { background: #fff4e9 !important; border: 1px solid #ffc89a !important;
    border-radius: 2mm !important; padding: 3.5mm !important; break-inside: avoid; }

  /* VISOS nuotraukos i PDF */
  .shots { max-width: none !important; margin: 4mm 0 0 !important; }
  .shots__stage { border: 1px solid #e6e9ee !important; border-radius: 2mm !important;
    box-shadow: none !important; break-inside: avoid; }
  .shots__img { aspect-ratio: auto !important; max-height: 95mm; object-fit: contain !important;
    background: #fff !important; }
  .shots__thumbs { display: grid !important; grid-template-columns: 1fr 1fr !important;
    gap: 3mm !important; overflow: visible !important; margin-top: 3mm !important; padding: 0 !important; }
  .shots__thumb { flex: none !important; width: auto !important; opacity: 1 !important;
    border: 1px solid #e6e9ee !important; border-radius: 2mm !important; break-inside: avoid; }
  .shots__thumb img { aspect-ratio: auto !important; object-fit: contain !important;
    max-height: 60mm; background: #fff !important; }

  /* nuorodos matomos popieriuje */
  .related { display: block !important; border: 1px solid #ffc89a !important;
    border-radius: 2mm !important; padding: 4mm !important; margin-top: 5mm !important;
    break-inside: avoid; }
  .related__h { font-size: 11pt !important; color: #ff6a00 !important; }
  .related__links { display: block !important; }
  .related__link { display: block !important; border: 0 !important; background: none !important;
    padding: 0 0 1.5mm !important; font-size: 9.5pt !important; font-weight: 700 !important;
    color: #16202b !important; }
  .related__link::after, .related__vid::after {
    content: " " attr(data-url); font-weight: 400; color: #ff6a00; font-size: 8.5pt; }
  .related__vid { display: block !important; margin-top: 3mm !important; font-size: 9.5pt !important;
    font-weight: 700 !important; color: #16202b !important; }
  .related__vid .ic { display: none !important; }

  /* sekciju i break-inside NEIMAME: jos ilgesnes uz lapa ir pirmas lapas liktu tuscias */
  .card, .sumcard, .kpi, .callout, .quote, .roi, .ticks li { break-inside: avoid; }
  .printhead { break-after: avoid; }
  h1, h2, h3 { break-after: avoid; }
  a { color: inherit !important; text-decoration: none !important; }

  /* vieno sprendimo spausdinimas */
  body.printing-one .section:not(.is-printing):not(.printonly) { display: none !important; }
  body.printing-one .pagehero, body.printing-one .marquee, body.printing-one .market { display: none !important; }
  body.printing-one .section.is-printing { padding-top: 0 !important; }
  body.printing-one .split { display: block !important; }
}

.printhead, .printfoot { display: none; }

/* ---------- Printable solution document ---------- */
.pdfdoc { display: none; }

@media print {
  body.printing-doc > *:not(.pdfdoc) { display: none !important; }
  body.printing-doc .pdfdoc { display: block !important; }
  body.printing-doc { background: #fff !important; }

  .pdfdoc { font-family: var(--font), Montserrat, Arial, sans-serif; color: #16202b; }

  .pdf__cover { padding-bottom: 6mm; margin-bottom: 7mm; border-bottom: 3px solid #ff6a00; }
  .pdf__logo { width: 42mm; height: auto; display: block; margin-bottom: 7mm; }
  .pdf__eyebrow { display: block; font-size: 8.5pt; font-weight: 800; letter-spacing: .16em;
    text-transform: uppercase; color: #ff6a00; margin-bottom: 2.5mm; }
  .pdf__title { font-size: 24pt; font-weight: 800; line-height: 1.12; letter-spacing: -.02em;
    margin: 0 0 4mm; color: #16202b; }
  .pdf__kicker { font-size: 10.5pt; color: #55606e; margin: 0; max-width: 150mm; }

  .pdf__b { margin-bottom: 7mm; break-inside: avoid; }
  .pdf__b h2 { font-size: 13pt !important; font-weight: 800; color: #16202b !important;
    padding-left: 4mm; border-left: 1.2mm solid #ff6a00; margin: 0 0 3mm !important; }
  .pdf__b p { font-size: 10.5pt; line-height: 1.65; color: #38424f; margin: 0; }
  .pdf__hl { background: #fff4e9; border: 1px solid #ffc89a; border-radius: 2mm;
    padding: 4mm !important; }

  .pdf__list { margin: 0; padding-left: 0; list-style: none; }
  .pdf__list li { position: relative; padding-left: 7mm; margin-bottom: 2.5mm;
    font-size: 10.5pt; line-height: 1.55; color: #38424f; break-inside: avoid; }
  .pdf__list li::before { content: ""; position: absolute; left: 0; top: 1.6mm;
    width: 3.4mm; height: 3.4mm; border-radius: 50%; background: #ff6a00; }

  .pdf__shots { break-inside: auto; }
  .pdf__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; }
  .pdf__grid img { width: 100%; height: auto; max-height: 62mm; object-fit: contain;
    border: 1px solid #e6e9ee; border-radius: 2mm; background: #fff; break-inside: avoid; }
  .pdf__grid img:first-child { grid-column: 1 / -1; max-height: 100mm; }

  .pdf__cases { margin: 0; padding: 0; list-style: none; }
  .pdf__cases li { margin-bottom: 3mm; break-inside: avoid; }
  .pdf__cases a { text-decoration: none; }
  .pdf__cases b { display: block; font-size: 10.5pt; color: #16202b; }
  .pdf__url { display: block; font-size: 9pt; color: #ff6a00; word-break: break-all; }

  .pdf__contact { margin-top: 9mm; padding: 6mm; border-radius: 3mm;
    background: #fff4e9; border: 1px solid #ffc89a; break-inside: avoid; }
  .pdf__contact h2 { font-size: 13pt; font-weight: 800; color: #ff6a00; margin: 0 0 3mm;
    padding: 0; border: 0; }
  .pdf__contact p { font-size: 10.5pt; line-height: 1.8; color: #16202b; margin: 0; }
  .pdf__contact a { color: #16202b; text-decoration: none; }
  .pdf__note { margin-top: 3mm !important; padding-top: 3mm; border-top: 1px solid #ffc89a;
    font-size: 9.5pt !important; color: #55606e !important; }
}