/* theme.css — the colourful dark theme the client asked for (9 Oct 2026).
   Loaded last, so it restyles the surfaces without touching the layout files. */

:root {
  --bg: #0A1430;
  --bg-2: #070F26;
  --ink: #EAF0FD;
  --soft: #A7B5D6;
  --faint: #8191B5;

  --blue: #2BA6FF;
  --blue-dark: #1A7FD1;
  --blue-ink: #050C1C;
  --cyan: #22D3EE;
  --violet: #8B5CF6;
  --amber: #FFB020;
  --pink: #F472B6;

  --panel: rgba(255, 255, 255, .055);
  --panel-2: rgba(255, 255, 255, .085);
  --line: rgba(255, 255, 255, .12);
  --blue-tint: rgba(43, 166, 255, .12);
  --blue-line: rgba(43, 166, 255, .30);

  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .5);
  --grad: linear-gradient(120deg, var(--cyan), var(--blue) 45%, var(--violet));
}

/* ---------- page canvas with slow-moving colour ---------- */
html { background: var(--bg); }
body { background: var(--bg); color: var(--ink); }
body::before {
  content: ""; position: fixed; inset: -20vh -10vw; z-index: -2; pointer-events: none;
  background:
    radial-gradient(42vw 42vw at 12% 8%, rgba(34, 211, 238, .16), transparent 60%),
    radial-gradient(46vw 46vw at 88% 22%, rgba(139, 92, 246, .16), transparent 62%),
    radial-gradient(40vw 40vw at 70% 85%, rgba(43, 166, 255, .14), transparent 60%),
    radial-gradient(38vw 38vw at 18% 78%, rgba(244, 114, 182, .10), transparent 60%);
  animation: drift 26s ease-in-out infinite alternate;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 80%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 80%);
}
@keyframes drift { to { transform: translate3d(2%, -2%, 0) scale(1.06); } }

/* ---------- type ---------- */
h1, h2, h3, h4 { color: #fff; }
.lead, .small, p { color: var(--soft); }
.eyebrow { color: var(--cyan); }
.eyebrow::before { background: linear-gradient(90deg, var(--cyan), var(--violet)); }
a { color: var(--cyan); }
a:hover { color: #fff; }

/* a gradient second line in the hero */
.hero-accent { color: var(--cyan); }
.hero-accent .hero-rotate-text { background: var(--grad); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: sweep 9s linear infinite; }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) { .hero-accent .hero-rotate-text { -webkit-text-fill-color: var(--cyan); color: var(--cyan); } }
@keyframes sweep { to { background-position: 220% 0; } }

/* ---------- sections ---------- */
.sec, .sec.dark { background: transparent; background-image: none; }
.sec.dark { position: relative; }
.sec.dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(43, 166, 255, .14), transparent 70%),
    linear-gradient(180deg, #0F2252 0%, #122B63 48%, #0F2252 100%);
  border-top: 1px solid rgba(34, 211, 238, .30); border-bottom: 1px solid rgba(139, 92, 246, .30);
}
.page-hero { background: transparent; }
.page-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--violet), transparent); opacity: .5;
}
.page-hero { position: relative; }

/* ---------- hero ---------- */
.hero { background: linear-gradient(160deg, #0B1735 0%, #0A1430 55%, #0B1026 100%); }
.hero-media::after { background: linear-gradient(180deg, rgba(8, 16, 38, .68) 0%, rgba(8, 16, 38, .80) 55%, rgba(10, 20, 48, .96) 100%); }
.hero p { color: rgba(234, 240, 253, .9); }
.hero .eyebrow { color: var(--cyan); }
.hero .eyebrow::before { background: linear-gradient(90deg, var(--cyan), var(--violet)); }

/* ---------- buttons ---------- */
.btn-primary, .btn-blue { background: var(--grad); background-size: 200% 100%; color: #04101F; font-weight: 800; box-shadow: 0 10px 28px rgba(34, 211, 238, .28); border: 0; }
.btn-primary:hover, .btn-blue:hover { background-position: 100% 0; color: #04101F; box-shadow: 0 14px 34px rgba(139, 92, 246, .38); }
.btn-outline { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .28); backdrop-filter: blur(8px); }
.btn-outline:hover { background: rgba(255, 255, 255, .14); border-color: var(--cyan); color: #fff; }
.btn-white { background: #fff; color: #0A1430; }
.btn-white:hover { background: var(--cyan); color: #04101F; }
.btn-ghost { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .34); color: #fff; }
.btn-ghost:hover { background: #fff; color: #0A1430; }

/* ---------- glass cards ---------- */
.offer, .review, .contact-card, .why-grid li, .steps li, .areas li, .counters li, .rating-card, .panel-cards li, .faq-item, .arro {
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(10px); color: var(--ink);
}
.offer:hover, .areas li:hover { border-color: rgba(34, 211, 238, .5); box-shadow: 0 1px 0 rgba(255, 255, 255, .08), 0 22px 50px rgba(0, 0, 0, .5); transform: translateY(-5px); }
.offer h3, .why-grid li h3, .steps li h3, .areas b, .panel-cards b, .review .who b, .faq-item summary { color: #fff; }
.offer p, .why-grid li p, .steps li p, .areas p, .panel-cards p, .review p, .faq-a, .contact-card p { color: var(--soft); }
.offer .ico, .why-grid .ico, .contact-list .ico { background: rgba(34, 211, 238, .14); color: var(--cyan); border: 1px solid rgba(34, 211, 238, .28); }
.offer-more { color: var(--cyan); }
.chip { background: rgba(255, 255, 255, .07); border-color: var(--line); color: #fff; }
.pill { background: rgba(34, 211, 238, .14); color: var(--cyan); }
.facts li { background: var(--panel); border-color: var(--line); }
.facts b { color: var(--cyan); }
.facts span { color: var(--soft); }
.steps b { color: var(--violet); }

/* ticks in cyan */
.ticks li { color: var(--soft); }
.ticks li::before { background-color: rgba(34, 211, 238, .16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322D3EE' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); }

/* panel list on the home page */
.panel-list li { background: rgba(255, 255, 255, .06); border-color: var(--line); color: #fff; }
.panel-list li::before { background: var(--cyan); box-shadow: 0 0 10px rgba(34, 211, 238, .9); }

/* ---------- header ---------- */
.site-header { background: rgba(10, 20, 48, .72); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.site-header.is-scrolled { background: rgba(8, 16, 38, .92); border-color: rgba(255, 255, 255, .12); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.nav a { color: #DCE6FA; }
.nav a:hover, .nav a.is-active { color: #fff; }
.nav a::after { background: linear-gradient(90deg, var(--cyan), var(--violet)); }
.header-phone { color: #fff; }
.header-phone svg { color: var(--cyan); }
.burger { background: rgba(255, 255, 255, .06); border-color: var(--line); }
.burger span { background: #fff; }
.round-call { background: var(--grad); color: #04101F; }

/* mobile drawer */
.drawer { background: #0A1430; border-left: 1px solid var(--line); }
.drawer .nav a { border-bottom: 1px solid rgba(255, 255, 255, .08); color: #fff; }
.drawer-close { background: rgba(255, 255, 255, .06); border-color: var(--line); color: #fff; }

/* ---------- client logos need a light plate to stay readable ---------- */
.logo-marquee { background: #fff; border-radius: 18px; padding: 10px 0; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.logo-track img { mix-blend-mode: normal; opacity: 1; }
.clients-label { color: var(--faint); }
.clients-also { color: var(--soft); }

/* ---------- media ---------- */
.story-media, .tile, .video-card { border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.story-media.is-product { background: #fff; }
.story-media figcaption, .tile figcaption { background: linear-gradient(180deg, transparent, rgba(5, 12, 28, .92)); }
.video-card button { background: rgba(8, 16, 38, .35); }
.video-card .play { background: var(--grad); color: #04101F; }

/* ---------- reviews ---------- */
.rating-card .big { color: #fff; }
.rating-card .big small { color: var(--faint); }
.stars { color: var(--amber); }
.review .avatar { background: var(--grad); color: #04101F; }
.review .who span { color: var(--faint); }
.slider-dot::before { background: rgba(255, 255, 255, .28); }
.slider-dot.is-on::before { background: var(--cyan); box-shadow: 0 0 10px rgba(34, 211, 238, .9); }
.slider-prev, .slider-next { background: rgba(255, 255, 255, .06); border-color: var(--line); color: #fff; }
.slider-prev:hover, .slider-next:hover { background: rgba(34, 211, 238, .18); border-color: var(--cyan); }

/* ---------- FAQ ---------- */
.faq-item[open] { border-color: rgba(34, 211, 238, .45); box-shadow: 0 0 0 1px rgba(34, 211, 238, .15), var(--shadow); }
.faq-item summary::after { background: rgba(34, 211, 238, .16); color: var(--cyan); }

/* ---------- form ---------- */
.field label { color: #DCE6FA; }
.field input, .field select, .field textarea { background: rgba(255, 255, 255, .05); border-color: var(--line); color: #fff; }
.field input::placeholder, .field textarea::placeholder { color: rgba(167, 181, 214, .6); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(34, 211, 238, .18); }
.field select option { background: #0A1430; color: #fff; }
.form-hint { color: var(--faint); }
.form-done { background: rgba(34, 211, 238, .12); border-color: rgba(34, 211, 238, .4); color: #EAF0FD; }
.form-done b { color: var(--cyan); }
.form-fail { background: rgba(244, 114, 182, .12); border: 1px solid rgba(244, 114, 182, .45); color: #EAF0FD; }
.field-error { color: var(--pink); }
.field-error::before { background: var(--pink); color: #0A1430; }
.contact-list b { color: #fff; }
.contact-list a, .contact-list span { color: var(--soft); }
.map { border-color: var(--line); background: var(--panel); }

/* ---------- numbers and call-to-action bands ---------- */
.counters b { color: #fff; }
.counters b small { color: var(--cyan); }
.counters li > span { color: var(--soft); }
.cta-band { position: relative; }
.sec.dark.cta-band::before {
  background:
    radial-gradient(60% 90% at 15% 50%, rgba(34, 211, 238, .30), transparent 70%),
    radial-gradient(60% 90% at 85% 50%, rgba(139, 92, 246, .34), transparent 70%),
    linear-gradient(120deg, #0B1A3F, #0D2050);
  border-top: 1px solid rgba(34, 211, 238, .35); border-bottom: 1px solid rgba(139, 92, 246, .35);
}

/* ---------- footer ---------- */
.footer { background: linear-gradient(180deg, rgba(7, 15, 38, .6), #060D22); border-top: 1px solid rgba(255, 255, 255, .08); color: var(--soft); }
.footer a { color: var(--soft); } .footer a:hover { color: var(--cyan); }
.footer h4 { color: #fff; }
.socials a { background: rgba(255, 255, 255, .07); border: 1px solid var(--line); color: #fff; }
.socials a:hover { background: var(--grad); color: #04101F; }
.footer-bottom { border-color: rgba(255, 255, 255, .1); color: var(--faint); }

/* ---------- floating and sticky ---------- */
.wa-float { background: var(--grad); color: #04101F; box-shadow: 0 12px 30px rgba(34, 211, 238, .4); }
.wa-float:hover { color: #04101F; }
.sticky-bar { background: rgba(8, 16, 38, .92); border-top: 1px solid var(--line); backdrop-filter: blur(12px); }
.video-toggle { background: rgba(8, 16, 38, .5); border-color: rgba(255, 255, 255, .35); }
.video-toggle:hover { background: var(--cyan); color: #04101F; }

/* ---------- a glowing divider under each section heading ---------- */
.sec-head .eyebrow { position: relative; }

@media (prefers-reduced-motion: reduce) {
  body::before, .hero-accent { animation: none; }
}

/* ===== Light sections, so the page alternates instead of running all dark ===== */
.sec.light { background: #FFFFFF; }
.sec.light::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(38vw 30vw at 88% 10%, rgba(34, 211, 238, .10), transparent 60%),
  radial-gradient(34vw 28vw at 8% 88%, rgba(139, 92, 246, .10), transparent 60%); }
.sec.light { position: relative; }
.sec.light h2, .sec.light h3, .sec.light h4, .sec.light .facts b, .sec.light .areas b,
.sec.light .panel-cards b, .sec.light .review .who b, .sec.light .faq-item summary,
.sec.light .rating-card .big, .sec.light .counters b { color: #0A1430; }
.sec.light p, .sec.light .lead, .sec.light .small, .sec.light .ticks li, .sec.light .faq-a { color: #4A5870; }
.sec.light .eyebrow { color: #1A7FD1; }
.sec.light a { color: #1A7FD1; }
.sec.light a:hover { color: #0A1430; }
.sec.light .offer, .sec.light .review, .sec.light .contact-card, .sec.light .why-grid li,
.sec.light .steps li, .sec.light .areas li, .sec.light .rating-card, .sec.light .panel-cards li,
.sec.light .faq-item, .sec.light .facts li {
  background: #fff; border: 1px solid #E3E9F4; box-shadow: 0 1px 2px rgba(10, 20, 48, .04), 0 14px 36px rgba(10, 20, 48, .08); backdrop-filter: none; color: #0A1430;
}
.sec.light .offer:hover, .sec.light .areas li:hover { border-color: rgba(34, 211, 238, .7); box-shadow: 0 18px 44px rgba(26, 127, 209, .18); }
.sec.light .offer .ico, .sec.light .why-grid .ico, .sec.light .contact-list .ico { background: rgba(34, 211, 238, .14); border-color: rgba(26, 127, 209, .25); color: #1A7FD1; }
.sec.light .offer-more { color: #1A7FD1; }
.sec.light .chip { background: rgba(26, 127, 209, .08); border-color: rgba(26, 127, 209, .22); color: #1A7FD1; }
.sec.light .panel-list li { background: rgba(26, 127, 209, .07); border-color: rgba(26, 127, 209, .2); color: #0A1430; }
.sec.light .ticks li::before { background-color: rgba(26, 127, 209, .12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A7FD1' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); }
.sec.light .btn-outline { background: #fff; color: #1A7FD1; border-color: rgba(26, 127, 209, .45); }
.sec.light .btn-outline:hover { background: rgba(34, 211, 238, .12); border-color: #22D3EE; color: #0A1430; }
.sec.light .btn-white { background: linear-gradient(120deg, #22D3EE, #2BA6FF 45%, #8B5CF6); color: #04101F; }
.sec.light .story-media, .sec.light .tile, .sec.light .video-card { border-color: #E3E9F4; box-shadow: 0 18px 44px rgba(10, 20, 48, .14); }
.sec.light .slider-prev, .sec.light .slider-next { background: #fff; border-color: #E3E9F4; color: #1A7FD1; }
.sec.light .slider-dot::before { background: #C8D4EA; }
.sec.light .field label { color: #0A1430; }
.sec.light .field input, .sec.light .field select, .sec.light .field textarea { background: #fff; border-color: #D8E1F0; color: #0A1430; }
.sec.light .field input::placeholder, .sec.light .field textarea::placeholder { color: #93A1BC; }
.sec.light .field select option { background: #fff; color: #0A1430; }
.sec.light .form-hint, .sec.light .review .who span, .sec.light .rating-card .big small { color: #6B7A96; }
.sec.light .contact-list b { color: #0A1430; }
.sec.light .contact-list a, .sec.light .contact-list span { color: #4A5870; }
.sec.light .map { border-color: #E3E9F4; background: #F4F7FC; }
.sec.light .faq-item[open] { border-color: #22D3EE; box-shadow: 0 0 0 1px rgba(34, 211, 238, .25), 0 14px 36px rgba(10, 20, 48, .10); }
.sec.light .faq-item summary::after { background: rgba(26, 127, 209, .12); color: #1A7FD1; }
.sec.light .clients-label { color: #6B7A96; }
.sec.light .logo-marquee { background: transparent; box-shadow: none; }

/* ===== more colour: a gradient rule that draws itself under every heading ===== */
.sec-head h2, .story-text h2 { position: relative; padding-bottom: 14px; }
.sec-head h2::after, .story-text h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, #22D3EE, #2BA6FF 50%, #8B5CF6);
  transition: width .9s cubic-bezier(.2, .8, .2, 1) .15s;
}
.sec-head.center h2::after { left: 50%; transform: translateX(-50%); }
.is-in .sec-head h2::after, .sec-head.is-in h2::after, .is-in.story-text h2::after { width: 86px; }
.sec-head.center.is-in h2::after { width: 110px; }

/* ===== text animation: the parts of a heading block arrive one after another ===== */
.js .sec-head > *, .js .story-text > * { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.js .sec-head.is-in > *, .js .story-text.is-in > * { opacity: 1; transform: none; }
.js .sec-head.is-in > *:nth-child(1), .js .story-text.is-in > *:nth-child(1) { transition-delay: .02s; }
.js .sec-head.is-in > *:nth-child(2), .js .story-text.is-in > *:nth-child(2) { transition-delay: .12s; }
.js .sec-head.is-in > *:nth-child(3), .js .story-text.is-in > *:nth-child(3) { transition-delay: .22s; }
.js .sec-head.is-in > *:nth-child(4), .js .story-text.is-in > *:nth-child(4) { transition-delay: .32s; }
.js .sec-head.is-in > *:nth-child(5), .js .story-text.is-in > *:nth-child(5) { transition-delay: .42s; }
.js .sec-head.is-in > *:nth-child(6), .js .story-text.is-in > *:nth-child(6) { transition-delay: .52s; }

/* the eyebrow line grows in */
.eyebrow::before { transition: width .7s cubic-bezier(.2,.8,.2,1) .1s; }
.js .sec-head:not(.is-in) .eyebrow::before, .js .story-text:not(.is-in) .eyebrow::before { width: 0; }

@media (prefers-reduced-motion: reduce) {
  .js .sec-head > *, .js .story-text > * { opacity: 1; transform: none; transition: none; }
  .sec-head h2::after, .story-text h2::after { transition: none; width: 86px; }
}

/* ===== picture on each service card ===== */
.offer { padding: 0 !important; overflow: hidden; }
.offer-img { display: block; aspect-ratio: 1200 / 800; overflow: hidden; background: #0A1430; }
.offer-img img { width: 100%; height: 100%; object-fit: cover; transition: filter .5s ease; }
.offer:hover .offer-img img { filter: saturate(1.12) brightness(1.05); }
.offer > .ico { margin: -28px 0 0 20px; position: relative; z-index: 1; background: var(--bg); border: 1px solid var(--line); }
.sec.light .offer > .ico { background: #fff; border-color: #E3E9F4; }
.offer > h3 { margin: 14px 20px 0; }
.offer > p { margin: 8px 20px 0; }
.offer > .offer-more { margin: 12px 20px 20px; }

/* ===== small animations (Aji, 17 Oct): no content, no layout ===== */

/* a gradient line draws across the top edge of a band as it scrolls in */
.sec.dark::after, .sec.light::after {
  content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 0; z-index: 1;
  background: var(--grad); opacity: .95; pointer-events: none;
  transition: width 1.2s cubic-bezier(.2, .8, .2, 1) .1s;
}
.js .sec.is-in::after { width: 100%; }

/* lazy pictures arrive soft and sharpen (the client logos are too small for this) */
.js img[loading="lazy"] { filter: blur(14px); opacity: .5; transition: filter .9s ease, opacity .9s ease; }
.js img[loading="lazy"].is-loaded { filter: none; opacity: 1; }
.js .logo-track img, .js .logo-track img.is-loaded { filter: none; opacity: 1; transition: none; }

/* the hero video breathes very slowly (the poster image keeps its scroll parallax) */
.hero-media video.is-ready { animation: heroBreathe 32s ease-in-out infinite alternate; }
@keyframes heroBreathe { to { transform: scale(1.06); } }

/* a highlight sweeps across a primary button on hover */
.btn { position: relative; overflow: hidden; }
.btn-primary::after, .btn-white::after {
  content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .42), transparent);
  transform: skewX(-20deg); transition: left .75s ease;
}
.btn-primary:hover::after, .btn-white:hover::after { left: 130%; }

/* reading progress: a thin gradient line along the bottom of the sticky header */
.site-header::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; pointer-events: none;
  width: calc(var(--progress, 0) * 100%); background: var(--grad); opacity: .9;
  transition: width .15s linear;
}

/* ---------- quote popup, in the dark theme ---------- */
.quote-box { background: #0E1B3C; border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.quote-close { background: rgba(255, 255, 255, .08); border-color: var(--line); color: #fff; }
.quote-close:hover { background: var(--cyan); color: #04101F; }
.quote-head h3 { color: #fff; }
.quote-head p { color: var(--soft); }
.quote-head .eyebrow { color: var(--cyan); }