/* Shared by every page: menus (Services / Solutions / Company), mobile menu,
   enquiry form extras and the "Inquiry received" dialog. Generated service,
   solution and industry pages also use the .pg-* page styles below. */

/* ---------- Dropdown menus ---------- */
.nav { position: sticky; }
.dd { position: static; }
.dd-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; font: 500 14px "Poppins", system-ui, sans-serif; color: var(--ink, #1B1740); cursor: pointer; }
.dd-btn svg { width: 14px; height: 14px; transition: transform .2s; }
.dd-btn[aria-expanded="true"] { color: var(--violet, #7B5CFF); }
.dd-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.dd-btn:hover { color: var(--violet, #7B5CFF); }
.mega { position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); width: min(1040px, calc(100vw - 32px)); background: #fff; border: 1px solid rgba(27, 23, 64, .1); border-radius: 24px; box-shadow: 0 30px 60px -24px rgba(15, 12, 41, .45); padding: 22px; z-index: 60; animation: ddIn .2s ease both; text-align: left; }
.mega.sm { width: min(560px, calc(100vw - 32px)); }
.mega[hidden] { display: none; }
@keyframes ddIn { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 14px; }
.mega-grid.c2 { grid-template-columns: 1fr 1fr; }
.mg h6 { margin: 4px 10px 8px; font: 700 11.5px/1 "Poppins", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--violet, #7B5CFF); }
.mg a { display: flex; gap: 11px; align-items: flex-start; padding: 10px; border-radius: 14px; text-decoration: none; color: var(--ink, #1B1740); }
.mg a:hover, .mg a:focus-visible { background: #F4F1FF; }
.mg i { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(135deg, rgba(34,211,238,.14), rgba(109,93,252,.16), rgba(232,69,140,.14)); color: #6D5DFC; }
.mg i svg { width: 19px; height: 19px; }
.mg b { display: block; font-size: 14px; line-height: 1.3; font-weight: 600; }
.mg small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--ink-soft, #57527A); }
.mega-foot { margin-top: 14px; padding: 14px 10px 2px; border-top: 1px solid rgba(27, 23, 64, .1); font-size: 14px; color: var(--ink-soft, #57527A); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.mega-foot a { color: var(--violet, #7B5CFF); font-weight: 600; text-decoration: none; }
@media (max-width: 1180px) and (min-width: 1001px) { .mega-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Mobile menu ---------- */
.burger { display: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(27, 23, 64, .12); background: #fff; padding: 0; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 4px; }
.burger span { width: 18px; height: 2px; border-radius: 2px; background: var(--ink, #1B1740); transition: transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mnav { margin: 10px auto 0; max-width: 1040px; max-height: calc(100svh - 110px); overflow-y: auto; background: #fff; border-radius: 22px; box-shadow: 0 24px 50px -20px rgba(15, 12, 41, .45); padding: 10px 12px 16px; display: grid; }
.mnav[hidden] { display: none; }
.mnav > a, .mnav summary { padding: 13px 10px; border-bottom: 1px solid rgba(27, 23, 64, .1); text-decoration: none; color: var(--ink, #1B1740); font-weight: 600; font-size: 16px; cursor: pointer; }
.mnav summary { list-style: none; display: flex; justify-content: space-between; }
.mnav summary::-webkit-details-marker { display: none; }
.mnav summary::after { content: "+"; color: var(--violet, #7B5CFF); font-size: 20px; line-height: 1; }
.mnav details[open] summary::after { content: "–"; }
.mnav details > div { display: grid; padding: 4px 0 8px 10px; }
.mnav details a { padding: 8px 10px; font-size: 14.5px; color: var(--ink-soft, #57527A); text-decoration: none; }
.mn-g { margin: 10px 10px 2px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--violet, #7B5CFF); }
.mnav .btn { margin-top: 14px; justify-content: center; }
@media (max-width: 1000px) {
  .nav-links { display: none !important; }
  .burger { display: inline-flex; }
  .nav-in > .btn-grad { display: none; }
  .nav-in { justify-content: space-between; }
}

/* ---------- Enquiry form extras + success dialog ---------- */
.form-card .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-card .row2 > * { min-width: 0; }
@media (max-width: 560px) { .form-card .row2 { grid-template-columns: 1fr; } }
.form-card .phone-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 12px; }
.form-card .privacy { text-align: center; font-size: 12.5px; color: var(--ink-soft, #57527A); margin: 0; }
.form-card .form-note.ok { color: #0E8F5B; font-weight: 600; }
.form-card .form-note.err { color: #C2334D; }
.ok-modal { border: 0; padding: 0; border-radius: 26px; width: min(440px, calc(100vw - 32px)); box-shadow: 0 40px 80px -30px rgba(15, 12, 41, .6); font-family: "Poppins", system-ui, sans-serif; color: #1B1740; }
.ok-modal::backdrop { background: rgba(15, 12, 41, .55); backdrop-filter: blur(4px); }
.ok-modal .in { padding: 34px 28px 26px; text-align: center; }
.ok-modal .tick { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #22D3EE, #6D5DFC 55%, #E8458C); box-shadow: 0 14px 30px -10px rgba(109, 93, 252, .7); }
.ok-modal .tick svg { width: 32px; height: 32px; }
.ok-modal h3 { margin: 0 0 8px; font-size: 22px; }
.ok-modal p { margin: 0 0 6px; color: #57527A; font-size: 15px; }
.ok-modal .acts { display: grid; gap: 10px; margin-top: 20px; }
.ok-modal .acts a, .ok-modal .acts button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 13px 18px; border-radius: 999px; font: 600 15px "Poppins", system-ui, sans-serif; text-decoration: none; cursor: pointer; border: 0; }
.ok-modal .wa { background: #1FA855; color: #fff; }
.ok-modal .dl { background: #F4F1FF; color: #5B3FD9; }
.ok-modal .close { background: none; color: #57527A; }
@media (prefers-reduced-motion: reduce) { .mega { animation: none; } }

/* ---------- Generated pages ---------- */
.pg-hero { padding: 120px 0 72px; margin-top: -78px; }
.crumbs { font-size: 13.5px; color: #B9B2E8; margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs a { color: #D9D4F7; text-decoration: none; } .crumbs a:hover { color: #fff; }
.pg-hero .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #E9A6F2; }
.pg-hero .eyebrow i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #C4B5FD; background: linear-gradient(135deg, rgba(34,211,238,.2), rgba(109,93,252,.28), rgba(232,69,140,.2)); }
.pg-hero .eyebrow i svg { width: 22px; height: 22px; }
.pg-hero h1 { font-size: clamp(32px, 5vw, 54px); line-height: 1.1; letter-spacing: -1px; margin: 18px 0 16px; max-width: 18ch; }
.pg-hero h1 em { font-style: normal; background: linear-gradient(90deg, #22D3EE, #A78BFA 45%, #F472B6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pg-hero .lead { color: #D3CEF5; font-size: clamp(16px, 1.8vw, 19px); max-width: 60ch; }
.pg-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: 999px; font: 600 15px/1 "Poppins", system-ui, sans-serif; color: #fff; text-decoration: none; border: 1.5px solid rgba(255,255,255,.28); }
.btn-ghost:hover { border-color: #fff; }
.pg-sec { padding: 80px 0; }
.pg-sec.alt { background: #F7F5FF; }
.pg-sec h2 { font-size: clamp(26px, 3.4vw, 38px); margin: 0 0 10px; }
.pg-sec .sub { color: #57527A; max-width: 62ch; margin: 0 0 34px; }
.feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.feat { background: #fff; border: 1px solid rgba(27,23,64,.09); border-radius: 20px; padding: 22px; box-shadow: 0 16px 34px -26px rgba(72, 48, 160, .35); }
.feat b { display: flex; gap: 10px; align-items: center; font-size: 16.5px; }
.feat b::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, #22D3EE, #6D5DFC, #E8458C); }
.feat p { margin: 8px 0 0; color: #57527A; font-size: 14.5px; }
.pains { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 8px; }
.pains li { list-style: none; padding: 16px 18px; border-radius: 16px; background: #FFF5F7; border: 1px solid #F8D7E0; color: #7A2C45; font-size: 15px; }
.pains { padding: 0; }
.steps5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; counter-reset: s; padding: 0; }
.steps5 li { list-style: none; position: relative; background: #fff; border-radius: 18px; padding: 20px 18px; border: 1px solid rgba(27,23,64,.09); }
.steps5 li::before { counter-increment: s; content: counter(s); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; font-weight: 700; background: linear-gradient(135deg, #6D5DFC, #E8458C); margin-bottom: 12px; }
.steps5 b { display: block; font-size: 15.5px; }
.steps5 span { display: block; margin-top: 6px; color: #57527A; font-size: 14px; }
@media (max-width: 1000px) { .steps5 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps5 { grid-template-columns: 1fr; } }
.why4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.why4 div { padding: 22px; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.why4 b { display: block; font-size: 16px; color: #fff; }
.why4 span { display: block; margin-top: 6px; color: #C9C3F2; font-size: 14.5px; }
.rel { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.rel a { display: flex; gap: 12px; align-items: center; padding: 16px; border-radius: 18px; background: #fff; border: 1px solid rgba(27,23,64,.09); text-decoration: none; color: #1B1740; transition: border-color .2s, transform .2s; }
.rel a:hover { border-color: #A78BFA; transform: translateY(-2px); }
.rel i { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #6D5DFC; background: linear-gradient(135deg, rgba(34,211,238,.14), rgba(109,93,252,.16), rgba(232,69,140,.14)); }
.rel i svg { width: 22px; height: 22px; }
.rel b { font-size: 15px; line-height: 1.3; }
.pg-faq { display: grid; gap: 10px; max-width: 860px; }
.pg-faq details { border-radius: 16px; background: #F4F1FF; padding: 16px 20px; }
.pg-faq summary { cursor: pointer; list-style: none; font-weight: 600; display: flex; justify-content: space-between; gap: 16px; }
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary::after { content: "+"; color: #7B5CFF; font-size: 22px; line-height: 1; transition: transform .2s; }
.pg-faq details[open] summary::after { transform: rotate(45deg); }
.pg-faq p { margin: 10px 0 0; color: #57527A; }
.pg-contact { display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items: start; }
.pg-contact .info h2 { color: #fff; }
.pg-contact .info p { color: #C9C3F2; }
.pg-contact .info ul { padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.pg-contact .info li { list-style: none; color: #E6E1FF; }
.pg-contact .info li::before { content: "✓"; color: #A78BFA; font-weight: 700; margin-right: 10px; }
.pg-contact .info .reach { display: grid; gap: 8px; margin-top: 26px; }
.pg-contact .info .reach a { color: #fff; text-decoration: none; font-weight: 600; }
@media (max-width: 900px) { .pg-contact { grid-template-columns: 1fr; } .pg-hero { padding-top: 110px; } }

/* Footer services row (same on every page) */
.foot > .f-svc { grid-column: 1 / -1; padding-bottom: 28px; border-bottom: 1px solid var(--navy-3, #221D4A); }
.f-svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 24px; }
.f-svc h6 { margin: 0 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #A78BFA; }
@media (max-width: 1000px) { .f-svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .f-svc-grid { grid-template-columns: 1fr; } }
/* Links inside the menus keep their own colours (the nav sets all links to ink) */
.nav-links .mega-foot a { color: var(--violet, #7B5CFF); font-weight: 600; }
.nav-links .mg a { font-size: inherit; }
/* Menu items line up: dropdown buttons and plain links share one centre line */
.nav-links { align-items: center; }
.nav-links > a, .nav-links .dd-btn { display: inline-flex; align-items: center; height: 38px; line-height: 1; font-size: 14px; font-weight: 500; }

/* legal pages: privacy, terms, data deletion */
.legal-hero { padding-bottom: 56px; }
.legal-hero h1 { max-width: none; }
.legal-hero .updated { color: #A9A3D6; font-size: 14px; margin-top: 10px; }
.legal { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; }
.legal-toc { position: sticky; top: 96px; font-size: 14px; }
.legal-toc ol { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.legal-toc a { color: #4B4675; text-decoration: none; }
.legal-toc a:hover { color: #6D5DFC; }
.legal article { max-width: 72ch; color: #2A2650; line-height: 1.7; }
.legal article section { scroll-margin-top: 96px; }
.legal article section + section { margin-top: 36px; }
.legal article h2 { font-size: 22px; margin: 0 0 10px; color: #14112E; }
.legal article ul, .legal article ol { padding-left: 20px; display: grid; gap: 8px; }
.legal article a { color: #5B4BE0; }
.foot-bottom .legal-links a { color: inherit; text-decoration: none; }
.foot-bottom .legal-links a:hover { color: #fff; }
.form-card .privacy a { color: inherit; }
@media (max-width: 860px) {
  .legal { grid-template-columns: 1fr; gap: 24px; }
  .legal-toc { position: static; }
}

/* How we work page */
.hw { display: grid; gap: 56px; }
.hw-head { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 20px; }
.hw-head > span { font-family: ui-monospace, Menlo, monospace; font-size: 13px; font-weight: 700; color: #6D5DFC; background: #ECE8FF; border-radius: 10px; padding: 8px 10px; flex: none; }
.hw-head h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 6px; color: #14112E; }
.hw-head p { margin: 0; color: #57527A; }
.hw-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.hw-card { background: #fff; border: 1px solid #E7E3F7; border-radius: 18px; padding: 20px; box-shadow: 0 10px 30px -18px rgba(40, 30, 110, .25); }
.hw-card b { display: block; color: #14112E; margin-bottom: 6px; }
.hw-card p { margin: 0; color: #4B4675; font-size: 14.5px; line-height: 1.6; }
.hw-cta { margin-top: 0; padding-top: 72px; }
.hw-link { margin-top: 18px; }
/* Testimonials (shown only when real quotes exist) */
.tms { padding: 80px 0; }
.tm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 24px; }
.tm { margin: 0; background: #fff; border: 1px solid #E7E3F7; border-radius: 20px; padding: 22px; }
.tm blockquote { margin: 0 0 14px; font-size: 16px; line-height: 1.6; color: #2A2650; }
.tm figcaption b { display: block; color: #14112E; } .tm figcaption span { font-size: 13px; color: #57527A; }
@media (max-width: 640px) { .hw-head { flex-direction: column; gap: 10px; } }