:root {
  --teal-950: #052f34;
  --teal-900: #073f46;
  --teal-800: #075864;
  --teal-700: #087784;
  --teal-500: #13a3ad;
  --teal-100: #dff5f5;
  --orange: #f59a22;
  --orange-dark: #d97b07;
  --ink: #102326;
  --muted: #627477;
  --line: #dce7e8;
  --soft: #f4f9f9;
  --white: #ffffff;
  --shadow-sm: 0 12px 30px rgba(3, 55, 62, 0.08);
  --shadow-lg: 0 26px 70px rgba(3, 42, 48, 0.18);
  --radius-sm: 14px;
  --radius: 24px;
  --radius-lg: 34px;
  --container: min(1180px, calc(100% - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--white); line-height: 1.65; }
body.chat-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.container { width: var(--container); margin-inline: auto; }
.section-pad { padding: 104px 0; position: relative; }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 3000; background: var(--white); color: var(--teal-900); padding: 10px 16px; border-radius: 10px; box-shadow: var(--shadow-sm); }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.notice-bar { background: #fff7e9; border-bottom: 1px solid #f4d3a1; color: #6f470f; font-size: 13px; }
.notice-inner { min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 18px; text-align: center; }
.notice-close { border: 0; background: transparent; color: #8e5a12; font-size: 22px; line-height: 1; padding: 2px 8px; }

.site-header { position: sticky; top: 0; z-index: 1000; background: rgba(255,255,255,.92); border-bottom: 1px solid rgba(7,63,70,.08); backdrop-filter: blur(16px); }
.nav-wrap { min-height: 82px; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand img { width: 58px; height: 48px; object-fit: contain; object-position: left center; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.06; }
.brand-copy strong { color: var(--orange); font-size: 18px; letter-spacing: .04em; }
.brand-copy small { color: var(--teal-900); font-size: 11px; text-transform: uppercase; letter-spacing: .11em; margin-top: 4px; }
.main-nav { display: flex; align-items: center; gap: 24px; }
.main-nav a { font-size: 14px; font-weight: 650; color: #2f4447; position: relative; padding: 28px 0; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 18px; height: 2px; background: var(--orange); transition: .25s ease; }
.main-nav a:hover::after, .main-nav a.active::after { right: 0; }
.nav-cta { background: var(--teal-900); color: var(--white); padding: 12px 20px; border-radius: 999px; font-weight: 700; font-size: 14px; box-shadow: 0 10px 22px rgba(7,63,70,.16); }
.nav-cta:hover { background: var(--teal-800); transform: translateY(-1px); }
.menu-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.menu-toggle span { width: 20px; height: 2px; background: var(--teal-900); border-radius: 2px; transition: .25s; }

.hero { min-height: 720px; display: grid; align-items: center; overflow: hidden; background: linear-gradient(145deg, #f8fcfc 0%, #eef8f7 55%, #ffffff 100%); }
.hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(8,119,132,.08) 1px, transparent 0); background-size: 28px 28px; mask-image: linear-gradient(90deg, black, transparent 72%); }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(10px); opacity: .55; pointer-events: none; }
.hero-glow-one { width: 360px; height: 360px; background: rgba(19,163,173,.16); right: 16%; top: 6%; }
.hero-glow-two { width: 260px; height: 260px; background: rgba(245,154,34,.12); left: 6%; bottom: 0; }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.02fr .98fr; gap: 72px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--teal-700); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--orange); border-radius: 2px; }
.hero h1 { font-size: clamp(44px, 5.4vw, 72px); line-height: 1.04; letter-spacing: -.045em; margin: 20px 0 24px; max-width: 760px; }
.hero h1 span { color: var(--teal-700); }
.hero-copy > p { font-size: 18px; color: var(--muted); max-width: 640px; margin: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 34px 0 30px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent; font-weight: 750; transition: .25s ease; }
.btn-primary { background: var(--teal-900); color: var(--white); box-shadow: 0 14px 30px rgba(7,63,70,.18); }
.btn-primary:hover { background: var(--teal-800); transform: translateY(-2px); box-shadow: 0 18px 38px rgba(7,63,70,.24); }
.btn-secondary { background: var(--white); color: var(--teal-900); border-color: #cbdfe0; }
.btn-secondary:hover { border-color: var(--teal-500); transform: translateY(-2px); }
.hero-points { display: flex; flex-wrap: wrap; gap: 10px 20px; color: #496064; font-size: 13px; font-weight: 700; }
.hero-points span { display: inline-flex; align-items: center; gap: 8px; }
.hero-points span::before { content: "✓"; color: var(--orange-dark); font-weight: 900; }
.hero-visual { position: relative; min-height: 530px; }
.hero-photo { width: 100%; height: 530px; object-fit: cover; border-radius: 38px 110px 38px 38px; box-shadow: var(--shadow-lg); }
.hero-overlay { position: absolute; inset: 0; border-radius: 38px 110px 38px 38px; background: linear-gradient(180deg, rgba(5,47,52,.04), rgba(5,47,52,.48)); }
.floating-card { position: absolute; display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.95); padding: 13px 16px; border-radius: 16px; box-shadow: var(--shadow-sm); border: 1px solid rgba(255,255,255,.7); backdrop-filter: blur(10px); }
.floating-card strong, .floating-card small { display: block; }
.floating-card strong { color: var(--teal-950); font-size: 14px; }
.floating-card small { color: var(--muted); font-size: 11px; margin-top: 2px; }
.mini-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--teal-100); color: var(--teal-800); font-size: 11px; font-weight: 900; }
.float-one { left: -42px; bottom: 58px; animation: float 5s ease-in-out infinite; }
.float-two { right: -28px; top: 74px; animation: float 5.6s ease-in-out infinite reverse; }
.ai-orbit { position: absolute; right: 30px; bottom: 38px; width: 90px; height: 90px; border-radius: 50%; display: grid; place-items: center; background: rgba(7,63,70,.88); border: 1px solid rgba(255,255,255,.35); box-shadow: 0 14px 36px rgba(3,35,40,.25); }
.ai-orbit::before, .ai-orbit::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; }
.ai-orbit::before { inset: 10px; }
.ai-orbit::after { width: 8px; height: 8px; background: var(--orange); border: 0; top: 4px; left: 42px; box-shadow: 0 0 0 5px rgba(245,154,34,.2); }
.ai-orbit span { color: var(--white); font-size: 24px; font-weight: 900; letter-spacing: .06em; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.trust-strip { position: relative; z-index: 3; margin-top: -34px; }
.trust-grid { background: var(--white); border: 1px solid rgba(7,63,70,.08); border-radius: 24px; box-shadow: var(--shadow-sm); display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; }
.trust-grid div { padding: 22px 26px; position: relative; }
.trust-grid div:not(:last-child)::after { content: ""; position: absolute; top: 24%; right: 0; width: 1px; height: 52%; background: var(--line); }
.trust-grid strong, .trust-grid span { display: block; }
.trust-grid strong { color: var(--teal-900); font-size: 15px; }
.trust-grid span { color: var(--muted); font-size: 12px; margin-top: 3px; }

.split-layout { display: grid; grid-template-columns: .92fr 1.08fr; gap: 78px; align-items: center; }
.split-layout.reverse { grid-template-columns: 1.08fr .92fr; }
.image-stack { position: relative; }
.image-stack img { width: 100%; height: 470px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.image-stack::before { content: ""; position: absolute; width: 72%; height: 72%; background: var(--teal-100); border-radius: 34px; left: -22px; top: -22px; z-index: -1; }
.image-badge { position: absolute; right: -26px; bottom: 30px; background: var(--teal-900); color: var(--white); padding: 18px 22px; border-radius: 16px; box-shadow: var(--shadow-sm); }
.image-badge strong, .image-badge span { display: block; }
.image-badge strong { font-size: 15px; }
.image-badge span { font-size: 11px; color: rgba(255,255,255,.72); margin-top: 3px; }
.content-block h2, .section-heading h2, .contact-copy h2 { font-size: clamp(34px, 4vw, 52px); line-height: 1.12; letter-spacing: -.035em; margin: 16px 0 22px; }
.content-block > p { color: var(--muted); font-size: 17px; margin: 0 0 16px; }
.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 28px; }
.check-grid span { position: relative; padding-left: 28px; font-weight: 700; color: #30474a; font-size: 14px; }
.check-grid span::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--teal-100); color: var(--teal-800); font-size: 12px; }

.soft-section { background: var(--soft); }
.section-heading { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.section-heading p { color: var(--muted); font-size: 17px; margin: 0; }
.section-heading.light h2, .section-heading.light p, .section-heading.light .eyebrow { color: var(--white); }
.section-heading.light p { color: rgba(255,255,255,.7); }
.section-heading.left { text-align: left; margin: 0; }
.service-grid { display: grid; gap: 22px; }
.service-grid-four { grid-template-columns: repeat(4, 1fr); }
.service-card { background: var(--white); border: 1px solid rgba(7,63,70,.09); border-radius: var(--radius); padding: 28px; min-height: 330px; position: relative; overflow: hidden; transition: .3s ease; }
.service-card::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 4px; background: linear-gradient(90deg, var(--teal-500), var(--orange)); transition: .3s ease; }
.service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-sm); }
.service-card:hover::after { width: 100%; }
.service-number { position: absolute; right: 20px; top: 14px; color: rgba(7,63,70,.08); font-size: 52px; font-weight: 900; line-height: 1; }
.service-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; background: var(--teal-100); color: var(--teal-800); font-size: 24px; font-weight: 900; }
.service-card h3 { font-size: 21px; margin: 22px 0 12px; color: var(--teal-950); }
.service-card p { color: var(--muted); margin: 0 0 22px; font-size: 14px; }
.service-card a { color: var(--teal-700); font-weight: 800; font-size: 13px; display: inline-flex; gap: 7px; align-items: center; margin-top: auto; }

.digital-section { background: radial-gradient(circle at 80% 0%, rgba(19,163,173,.22), transparent 30%), linear-gradient(145deg, var(--teal-950), #062b31 72%); overflow: hidden; }
.digital-section::before { content: ""; position: absolute; inset: 0; 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: 44px 44px; }
.digital-section .container { position: relative; z-index: 1; }
.digital-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.digital-card { background: rgba(255,255,255,.065); border: 1px solid rgba(255,255,255,.12); border-radius: 26px; padding: 32px; color: var(--white); backdrop-filter: blur(12px); transition: .3s ease; }
.digital-card:hover { transform: translateY(-6px); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.22); }
.digital-card.featured { background: linear-gradient(135deg, rgba(19,163,173,.25), rgba(255,255,255,.08)); border-color: rgba(92,222,225,.34); box-shadow: inset 0 0 0 1px rgba(92,222,225,.05); }
.digital-card-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pill { display: inline-flex; padding: 7px 11px; border-radius: 999px; background: rgba(83,224,188,.14); color: #8cf1d5; border: 1px solid rgba(83,224,188,.24); font-size: 10px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.pill-upcoming { background: rgba(245,154,34,.13); color: #ffc77b; border-color: rgba(245,154,34,.25); }
.pill-ongoing { background: rgba(111,126,255,.15); color: #c5cbff; border-color: rgba(143,154,255,.32); }
.digital-code { color: rgba(255,255,255,.22); font-weight: 900; letter-spacing: .08em; font-size: 18px; }
.digital-card h3 { font-size: 27px; margin: 20px 0 10px; }
.digital-card > p { color: rgba(255,255,255,.67); margin: 0 0 18px; }
.digital-card ul { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 18px; }
.digital-card li { color: rgba(255,255,255,.82); font-size: 13px; padding-left: 18px; position: relative; }
.digital-card li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.text-link { background: transparent; border: 0; padding: 0; color: var(--orange); font-weight: 800; font-size: 13px; }
.text-link:hover { color: var(--orange-dark); }

.chatbot-showcase { display: grid; grid-template-columns: 1fr .9fr; gap: 84px; align-items: center; }
.comparison-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 28px 0 30px; }
.comparison-grid > div { border: 1px solid var(--line); border-radius: 18px; padding: 20px; background: var(--soft); }
.comparison-grid strong { display: block; color: var(--teal-950); margin: 12px 0 6px; }
.comparison-grid p { margin: 0; font-size: 13px; color: var(--muted); }
.comparison-label { display: inline-flex; padding: 5px 9px; border-radius: 999px; background: var(--teal-100); color: var(--teal-800); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.comparison-label.alt { background: #fff0dc; color: #a95c00; }
.demo-window { max-width: 440px; width: 100%; margin-left: auto; background: var(--white); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-lg); overflow: hidden; transform: rotate(1deg); }
.demo-head { min-height: 74px; display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--teal-900); color: var(--white); }
.demo-avatar { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--orange); color: #3c2609; font-weight: 900; }
.demo-head strong, .demo-head small { display: block; }
.demo-head small { color: rgba(255,255,255,.68); font-size: 11px; margin-top: 2px; }
.online-dot { margin-left: auto; width: 10px; height: 10px; border-radius: 50%; background: #49e3a2; box-shadow: 0 0 0 5px rgba(73,227,162,.12); }
.demo-body { min-height: 360px; padding: 22px; background: #f7fbfb; }
.demo-message { max-width: 82%; padding: 11px 14px; border-radius: 15px; margin-bottom: 12px; font-size: 13px; line-height: 1.45; }
.demo-message.bot { background: var(--white); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.demo-message.user { background: var(--teal-800); color: var(--white); margin-left: auto; border-bottom-right-radius: 5px; }
.demo-choices { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 22px; }
.demo-choices span { border: 1px solid #b9d8da; color: var(--teal-800); background: var(--white); border-radius: 999px; padding: 7px 10px; font-size: 10px; font-weight: 750; }
.demo-input { min-height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; color: #87989b; font-size: 13px; border-top: 1px solid var(--line); }
.demo-input span { color: var(--teal-700); font-size: 18px; }

.process-section { background: var(--soft); }
.process-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.process-step { background: var(--white); border: 1px solid rgba(7,63,70,.08); border-radius: 20px; padding: 24px 20px; position: relative; }
.process-step:not(:last-child)::after { content: "→"; position: absolute; right: -14px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--teal-900); color: var(--white); display: grid; place-items: center; z-index: 2; font-size: 13px; }
.process-step > span { color: var(--orange-dark); font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.process-step h3 { margin: 12px 0 8px; font-size: 18px; color: var(--teal-950); }
.process-step p { color: var(--muted); font-size: 12px; margin: 0; }

.sectors-section { overflow: hidden; }
.sector-cloud { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.sector-cloud span { padding: 10px 14px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); color: #365053; font-size: 12px; font-weight: 750; }

.faq-section { background: #fbfdfd; border-top: 1px solid rgba(7,63,70,.06); border-bottom: 1px solid rgba(7,63,70,.06); }
.faq-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 80px; align-items: start; }
.accordion { display: grid; gap: 12px; }
.accordion details { border: 1px solid var(--line); border-radius: 16px; background: var(--white); padding: 0 20px; }
.accordion summary { list-style: none; padding: 18px 36px 18px 0; cursor: pointer; font-weight: 800; color: var(--teal-950); position: relative; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-100); color: var(--teal-800); font-size: 18px; }
.accordion details[open] summary::after { content: "−"; }
.accordion details p { color: var(--muted); margin: -3px 0 18px; font-size: 14px; }

.contact-section { background: linear-gradient(145deg, #082f35, #063d45); color: var(--white); overflow: hidden; }
.contact-section::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: rgba(19,163,173,.16); filter: blur(10px); right: -180px; top: -180px; }
.contact-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .86fr 1.14fr; gap: 74px; align-items: start; }
.contact-copy .eyebrow { color: #8de8eb; }
.contact-copy p { color: rgba(255,255,255,.68); font-size: 16px; }
.contact-list { display: grid; gap: 12px; margin-top: 28px; }
.contact-list > a, .contact-list > div { display: flex; align-items: center; gap: 14px; padding: 13px 0; color: var(--white); }
.contact-list > a > span, .contact-list > div > span { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #7ee2e5; }
.contact-list small, .contact-list strong { display: block; }
.contact-list small { color: rgba(255,255,255,.5); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.contact-list strong { font-size: 13px; margin-top: 2px; }
.contact-form { background: var(--white); color: var(--ink); border-radius: 26px; padding: 30px; box-shadow: var(--shadow-lg); }
.contact-form label { display: grid; gap: 7px; color: #364b4e; font-size: 12px; font-weight: 800; margin-bottom: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; border: 1px solid #cfdddf; border-radius: 12px; background: #fbfdfd; padding: 12px 13px; color: var(--ink); outline: none; transition: .2s; font-weight: 500; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--teal-500); box-shadow: 0 0 0 4px rgba(19,163,173,.10); background: var(--white); }
.contact-form textarea { resize: vertical; }
.form-submit { width: 100%; border: 0; }
.form-note { color: #829194; font-size: 10px; line-height: 1.5; margin: 12px 2px 0; text-align: center; }

.site-footer { background: #041f23; color: rgba(255,255,255,.68); padding: 64px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 54px; }
.footer-brand img { width: 96px; height: 70px; object-fit: contain; object-position: left center; filter: drop-shadow(0 4px 14px rgba(0,0,0,.2)); }
.footer-brand p { max-width: 330px; font-size: 13px; margin: 16px 0 0; }
.footer-grid h3 { color: var(--white); font-size: 13px; margin: 0 0 16px; text-transform: uppercase; letter-spacing: .12em; }
.footer-grid > div:not(:first-child) { display: flex; flex-direction: column; align-items: flex-start; }
.footer-grid a { font-size: 12px; margin: 0 0 10px; }
.footer-grid a:hover { color: #79e1e4; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(255,255,255,.08); margin-top: 44px; padding-top: 22px; font-size: 11px; }

.chat-launcher { position: fixed; right: 22px; bottom: 22px; z-index: 1300; min-height: 54px; display: flex; align-items: center; gap: 10px; padding: 0 18px 0 14px; border: 0; border-radius: 999px; background: var(--teal-900); color: var(--white); box-shadow: 0 18px 45px rgba(3,42,48,.34); font-weight: 800; }
.chat-launcher:hover { background: var(--teal-800); transform: translateY(-2px); }
.chat-launcher.hidden { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); }
.chat-launcher svg { width: 25px; height: 25px; fill: var(--white); }
.chatbot { position: fixed; right: 22px; bottom: 88px; z-index: 1400; width: min(390px, calc(100vw - 28px)); max-height: min(650px, calc(100vh - 120px)); display: grid; grid-template-rows: auto minmax(180px,1fr) auto auto auto; background: var(--white); border-radius: 22px; box-shadow: 0 30px 80px rgba(3,31,36,.34); border: 1px solid rgba(7,63,70,.1); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(16px) scale(.96); transform-origin: bottom right; transition: .22s ease; }
.chatbot.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.chatbot-header { min-height: 72px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--teal-900); color: var(--white); }
.chat-avatar { width: 43px; height: 43px; border-radius: 14px; background: var(--orange); color: #402606; display: grid; place-items: center; font-weight: 900; }
.chatbot-header strong, .chatbot-header small { display: block; }
.chatbot-header strong { font-size: 14px; }
.chatbot-header small { color: rgba(255,255,255,.66); font-size: 10px; margin-top: 2px; }
.chatbot-header small span { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #52e5a6; margin-right: 4px; }
.chatbot-header button { margin-left: auto; width: 36px; height: 36px; border-radius: 11px; border: 0; background: rgba(255,255,255,.08); color: var(--white); font-size: 23px; line-height: 1; }
.chatbot-messages { overflow-y: auto; padding: 18px 15px 8px; background: #f6fbfb; }
.chat-row { display: flex; margin-bottom: 10px; }
.chat-row.user { justify-content: flex-end; }
.chat-bubble { max-width: 84%; padding: 10px 12px; border-radius: 15px; font-size: 12px; line-height: 1.48; white-space: pre-line; }
.chat-row.bot .chat-bubble { background: var(--white); border: 1px solid var(--line); border-bottom-left-radius: 5px; color: #35494c; }
.chat-row.user .chat-bubble { background: var(--teal-800); color: var(--white); border-bottom-right-radius: 5px; }
.chat-time { display: block; margin-top: 4px; opacity: .55; font-size: 8px; }
.quick-replies { display: flex; gap: 7px; overflow-x: auto; padding: 9px 12px 10px; background: #f6fbfb; scrollbar-width: none; }
.quick-replies::-webkit-scrollbar { display: none; }
.quick-replies button { flex: 0 0 auto; border: 1px solid #bad7d9; background: var(--white); color: var(--teal-800); border-radius: 999px; padding: 7px 10px; font-size: 10px; font-weight: 750; }
.quick-replies button:hover { background: var(--teal-100); }
.chatbot-input { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--white); }
.chatbot-input input { flex: 1; border: 0; outline: 0; padding: 8px 4px; font-size: 12px; min-width: 0; }
.chatbot-input button { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 12px; background: var(--teal-800); color: var(--white); font-size: 15px; }
.chatbot-footer { text-align: center; color: #8a999b; font-size: 8px; padding: 5px 10px 8px; background: var(--white); }

.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 1; transform: none; transition: transform .3s ease; }
.js .reveal.visible { opacity: 1; transform: none; }

@media (max-width: 1080px) {
  .nav-wrap { gap: 18px; }
  .main-nav { gap: 16px; }
  .main-nav a { font-size: 13px; }
  .hero-grid { gap: 44px; }
  .service-grid-four { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(3, 1fr); }
  .process-step:nth-child(3)::after { display: none; }
}

@media (max-width: 880px) {
  :root { --container: min(100% - 32px, 760px); }
  .section-pad { padding: 78px 0; }
  .menu-toggle { display: flex; order: 3; }
  .nav-cta { margin-left: auto; }
  .main-nav { position: fixed; top: 82px; left: 16px; right: 16px; flex-direction: column; align-items: stretch; gap: 0; background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 10px; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: .22s; }
  .main-nav.open { opacity: 1; visibility: visible; transform: translateY(0); }
  .main-nav a { padding: 13px 14px; border-radius: 10px; }
  .main-nav a:hover { background: var(--soft); }
  .main-nav a::after { display: none; }
  .hero { min-height: auto; }
  .hero-grid, .split-layout, .split-layout.reverse, .chatbot-showcase, .faq-layout, .contact-grid { grid-template-columns: 1fr; }
  .hero-grid { gap: 52px; }
  .hero-copy { text-align: center; }
  .hero-copy .eyebrow { justify-content: center; }
  .hero-copy > p { margin-inline: auto; }
  .hero-actions, .hero-points { justify-content: center; }
  .hero-visual { max-width: 650px; width: 100%; margin-inline: auto; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid div:nth-child(2)::after { display: none; }
  .split-layout { gap: 52px; }
  .split-layout.reverse .content-block { order: 1; }
  .split-layout.reverse .image-stack { order: 2; }
  .digital-grid { grid-template-columns: 1fr; }
  .demo-window { margin-inline: auto; }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .process-step:nth-child(2)::after, .process-step:nth-child(4)::after { display: none; }
  .process-step:nth-child(3)::after { display: grid; }
  .faq-layout { gap: 36px; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  :root { --container: calc(100% - 24px); }
  .notice-inner { min-height: 44px; text-align: left; }
  .notice-inner span { flex: 1; }
  .nav-wrap { min-height: 72px; }
  .brand img { width: 48px; height: 40px; }
  .brand-copy strong { font-size: 16px; }
  .brand-copy small { font-size: 9px; }
  .nav-cta { display: none; }
  .main-nav { top: 72px; }
  .hero h1 { font-size: 42px; }
  .hero-copy > p { font-size: 16px; }
  .hero-actions .btn { width: 100%; }
  .hero-visual { min-height: 430px; }
  .hero-photo { height: 430px; border-radius: 28px 70px 28px 28px; }
  .hero-overlay { border-radius: 28px 70px 28px 28px; }
  .float-one { left: 10px; bottom: 24px; }
  .float-two { right: 8px; top: 24px; }
  .floating-card { padding: 10px 12px; }
  .mini-icon { width: 36px; height: 36px; }
  .floating-card strong { font-size: 12px; }
  .floating-card small { font-size: 9px; }
  .ai-orbit { display: none; }
  .trust-strip { margin-top: -18px; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-grid div { padding: 17px 15px; }
  .trust-grid strong { font-size: 13px; }
  .trust-grid span { font-size: 10px; }
  .image-stack img { height: 350px; }
  .image-badge { right: 12px; bottom: 14px; }
  .check-grid, .service-grid-four, .comparison-grid, .form-row, .process-grid, .footer-grid { grid-template-columns: 1fr; }
  .digital-card { padding: 24px; }
  .digital-card ul { grid-template-columns: 1fr; }
  .process-step::after { display: none !important; }
  .contact-form { padding: 22px 18px; }
  .footer-bottom { flex-direction: column; }
  .chat-launcher { right: 14px; bottom: 14px; width: 54px; padding: 0; justify-content: center; }
  .chat-launcher span { display: none; }
  .chatbot { right: 14px; bottom: 78px; max-height: calc(100vh - 92px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   SRSB three-page premium update
   Home + About + Contact, with section dropdown navigation
   ========================================================= */

:root {
  --navy-950: #06151f;
  --navy-900: #0a202c;
  --violet: #6f3cff;
  --cyan: #4be3e5;
  --glass: rgba(255,255,255,.08);
}

html { scroll-padding-top: 118px; }
body { overflow-x: hidden; }
section[id], main[id] { scroll-margin-top: 118px; }

/* Navigation dropdowns */
.site-header { z-index: 1200; }
.main-nav { overflow: visible; }
.nav-group { position: relative; display: flex; align-items: center; }
.nav-parent { white-space: nowrap; }
.submenu-toggle {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  margin-left: -14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--teal-900);
  font-size: 15px;
  line-height: 1;
  transition: transform .22s ease, background .22s ease;
}
.nav-group:hover .submenu-toggle,
.nav-group:focus-within .submenu-toggle,
.nav-group.submenu-open .submenu-toggle { transform: rotate(180deg); background: var(--teal-100); }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  width: 310px;
  padding: 11px;
  border: 1px solid rgba(18, 89, 96, .14);
  border-radius: 18px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 24px 70px rgba(4, 36, 43, .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.98);
  transform-origin: top left;
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}
.nav-dropdown::before {
  content: "";
  position: absolute;
  left: 28px;
  top: -7px;
  width: 13px;
  height: 13px;
  transform: rotate(45deg);
  background: white;
  border-left: 1px solid rgba(18, 89, 96, .14);
  border-top: 1px solid rgba(18, 89, 96, .14);
}
.nav-group:hover > .nav-dropdown,
.nav-group:focus-within > .nav-dropdown,
.nav-group.submenu-open > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.nav-dropdown > a,
.mega-dropdown > div > a {
  display: grid;
  gap: 2px;
  padding: 11px 12px !important;
  border-radius: 12px;
  color: var(--teal-950) !important;
}
.nav-dropdown a::after { display: none !important; }
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible { background: linear-gradient(90deg, var(--teal-100), #f6ffff); }
.nav-dropdown strong { font-size: 12px; line-height: 1.25; }
.nav-dropdown small { color: #6b7e81; font-size: 9px; line-height: 1.35; font-weight: 600; }
.mega-dropdown {
  left: 50%;
  width: 650px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  transform-origin: top center;
  transform: translate(-50%, 10px) scale(.98);
  padding: 14px;
}
.nav-group:hover > .mega-dropdown,
.nav-group:focus-within > .mega-dropdown,
.nav-group.submenu-open > .mega-dropdown { transform: translate(-50%, 0) scale(1); }
.mega-dropdown::before { left: 50%; margin-left: -7px; }
.mega-dropdown > div { padding: 5px; }
.mega-dropdown > div + div { border-left: 1px solid var(--line); padding-left: 15px; }
.dropdown-label {
  display: block;
  padding: 5px 11px 8px;
  color: var(--teal-600);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Shared premium graphic interactions */
.interactive-panel,
.capability-card,
.service-card,
.digital-card,
.process-step,
.guide-card,
.value-card {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.interactive-panel,
.capability-card,
.process-step,
.guide-card,
.value-card { transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease, border-color .32s ease, background .32s ease; }
.interactive-panel:hover,
.interactive-panel:focus-visible,
.interactive-panel.touch-active,
.process-step:hover,
.process-step:focus-visible,
.process-step.touch-active,
.guide-card:hover,
.guide-card:focus-visible,
.guide-card.touch-active,
.value-card:hover,
.value-card:focus-visible,
.value-card.touch-active { transform: translateY(-7px); }
.interactive-panel:focus-visible,
.capability-card:focus-visible,
.service-card:focus-visible,
.digital-card:focus-visible,
.process-step:focus-visible,
.guide-card:focus-visible,
.value-card:focus-visible { box-shadow: 0 0 0 4px rgba(75,227,229,.2), var(--shadow-sm); }

/* Premium home hero inspired by the supplied visual reference */
.home-hero {
  position: relative;
  color: var(--white);
  background:
    radial-gradient(circle at 13% 26%, rgba(111,60,255,.35), transparent 27%),
    radial-gradient(circle at 86% 18%, rgba(50,216,218,.23), transparent 28%),
    radial-gradient(circle at 64% 88%, rgba(139,42,255,.2), transparent 32%),
    linear-gradient(145deg, #07151f 0%, #0a2730 54%, #071923 100%);
  overflow: hidden;
}
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .28;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, black, transparent 92%);
}
.home-hero::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  left: -220px;
  bottom: -170px;
  border: 1px solid rgba(75,227,229,.18);
  border-radius: 50%;
  box-shadow: 0 0 0 48px rgba(111,60,255,.06), 0 0 0 96px rgba(75,227,229,.035);
}
.home-hero .container { position: relative; z-index: 2; }
.home-hero h1 { color: white; text-shadow: 0 12px 34px rgba(0,0,0,.22); }
.home-hero .hero-copy > p { color: rgba(255,255,255,.74); }
.home-hero .eyebrow { color: #8beaec; border-color: rgba(139,234,236,.25); background: rgba(255,255,255,.05); }
.home-hero .hero-points span { color: rgba(255,255,255,.84); }
.home-hero .hero-points span::before { box-shadow: 0 0 18px rgba(75,227,229,.8); }
.home-hero .btn-secondary { color: white; border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.06); }
.home-hero .btn-secondary:hover { background: rgba(255,255,255,.13); }
.home-hero .hero-photo { box-shadow: 0 30px 100px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.08); }
.home-hero .hero-overlay { background: linear-gradient(180deg, rgba(7,21,31,.1), rgba(7,21,31,.52)); }
.home-hero .floating-card { background: rgba(7,25,35,.82); color: white; border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(16px); box-shadow: 0 18px 50px rgba(0,0,0,.24); }
.home-hero .floating-card small { color: rgba(255,255,255,.64); }
.home-hero .ai-orbit { box-shadow: 0 14px 50px rgba(111,60,255,.4); }

/* Home history and capability sections */
.home-about { position: relative; overflow: hidden; }
.home-about::after { content:""; position:absolute; width:330px; height:330px; border-radius:50%; right:-190px; top:70px; background:rgba(75,227,229,.09); filter:blur(4px); }
.image-orbit {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(75,227,229,.45);
  color: white;
  background: rgba(4,35,42,.8);
  box-shadow: 0 0 25px rgba(75,227,229,.22);
  backdrop-filter: blur(9px);
  animation: orbitFloat 4.8s ease-in-out infinite;
}
.image-orbit span { font-weight: 900; letter-spacing: .08em; }
.orbit-small { width: 58px; height: 58px; left: -18px; bottom: 108px; }
.orbit-large { width: 76px; height: 76px; right: -18px; top: 38px; animation-delay: -2s; background: linear-gradient(145deg, rgba(111,60,255,.88), rgba(5,55,64,.9)); }
@keyframes orbitFloat { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(5deg); } }
.image-stack:hover .image-orbit,
.image-stack:focus-visible .image-orbit,
.image-stack.touch-active .image-orbit { box-shadow: 0 0 42px rgba(75,227,229,.48); }
.mini-timeline { display: grid; grid-template-columns: 1fr 34px 1fr 34px 1fr; align-items: center; margin: 28px 0 22px; }
.mini-timeline > div { min-height: 120px; padding: 16px 14px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: 0 10px 30px rgba(4,43,50,.05); }
.mini-timeline b { display:block; color: var(--teal-700); font-size: 19px; }
.mini-timeline span { display:block; margin:6px 0 4px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.mini-timeline strong { color:var(--teal-950); font-size:12px; line-height:1.35; }
.mini-timeline i { height:1px; background:linear-gradient(90deg,var(--teal-400),var(--violet)); position:relative; }
.mini-timeline i::after { content:""; position:absolute; right:-2px; top:-3px; width:7px; height:7px; border-radius:50%; background:var(--violet); }
.about-link { margin-top: 6px; color: var(--orange); }
.about-link:hover { color: var(--orange-dark); }

.services-overview {
  position: relative;
  background: linear-gradient(180deg, #fbffff, #f4fbfc);
  overflow: hidden;
}
.services-overview::before,
.services-overview::after { content:""; position:absolute; border-radius:50%; filter:blur(2px); }
.services-overview::before { width:330px; height:330px; left:-170px; bottom:-140px; background:rgba(111,60,255,.08); }
.services-overview::after { width:280px; height:280px; right:-120px; top:30px; background:rgba(75,227,229,.12); }
.capability-grid { position:relative; z-index:1; display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.capability-card {
  position: relative;
  min-height: 410px;
  padding: 34px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 30px;
  color: white;
  box-shadow: 0 24px 65px rgba(4,40,47,.16);
}
.capability-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 28%,rgba(3,18,26,.88)); z-index:0; }
.workforce-capability { background: radial-gradient(circle at 78% 18%, rgba(75,227,229,.28), transparent 31%), linear-gradient(145deg,#0a4650,#08262e); }
.digital-capability { background: radial-gradient(circle at 79% 20%, rgba(75,227,229,.25), transparent 30%), radial-gradient(circle at 22% 4%, rgba(111,60,255,.4),transparent 32%), linear-gradient(145deg,#171233,#082c36); }
.capability-card > * { position:relative; z-index:2; }
.capability-card:hover,
.capability-card:focus-visible,
.capability-card.touch-active { transform:translateY(-9px) scale(1.012); box-shadow:0 34px 85px rgba(4,40,47,.25); }
.capability-number { position:absolute; left:30px; top:24px; font-size:13px; font-weight:900; letter-spacing:.14em; color:rgba(255,255,255,.55); }
.capability-card small { color:#83ecee; font-weight:900; text-transform:uppercase; letter-spacing:.12em; }
.capability-card h3 { margin:10px 0 10px; font-size:clamp(29px,3vw,39px); }
.capability-card p { max-width:520px; color:rgba(255,255,255,.69); margin:0 0 22px; }
.capability-card strong { display:inline-flex; gap:10px; align-items:center; color:white; font-size:13px; }
.capability-card strong span { transition:transform .25s ease; }
.capability-card:hover strong span,
.capability-card:focus-visible strong span { transform:translateX(7px); }
.capability-graphic { position:absolute; z-index:1; right:24px; top:36px; width:190px; height:170px; opacity:.92; transition:transform .45s ease; }
.capability-card:hover .capability-graphic,
.capability-card:focus-visible .capability-graphic,
.capability-card.touch-active .capability-graphic { transform:translateY(-8px) rotate(2deg) scale(1.04); }
.people-graphic i { position:absolute; width:54px; height:54px; border-radius:50%; border:2px solid rgba(255,255,255,.8); background:linear-gradient(145deg,#6f3cff,#22b8c4); box-shadow:0 0 35px rgba(75,227,229,.22); }
.people-graphic i::after { content:""; position:absolute; width:72px; height:55px; left:-11px; top:46px; border:2px solid rgba(255,255,255,.52); border-radius:40px 40px 18px 18px; }
.people-graphic i:nth-child(1){left:10px;top:36px}.people-graphic i:nth-child(2){left:68px;top:3px}.people-graphic i:nth-child(3){right:4px;top:38px}
.people-graphic b { position:absolute; left:22px; right:10px; bottom:4px; height:2px; background:linear-gradient(90deg,transparent,#4be3e5,transparent); box-shadow:0 0 18px #4be3e5; }
.tech-graphic i { position:absolute; inset:14px 16px 22px; border:2px solid rgba(255,255,255,.62); border-radius:24px; box-shadow:inset 0 0 32px rgba(111,60,255,.28),0 0 36px rgba(75,227,229,.13); }
.tech-graphic i::before,.tech-graphic i::after { content:""; position:absolute; border-radius:50%; background:#4be3e5; box-shadow:0 0 16px #4be3e5; }
.tech-graphic i::before { width:10px;height:10px;left:25px;top:30px;box-shadow:55px 28px 0 #6f3cff,100px -5px 0 #4be3e5; }
.tech-graphic i::after { height:2px;width:100px;left:24px;top:52px;border-radius:2px;background:linear-gradient(90deg,#4be3e5,#6f3cff);transform:rotate(14deg); }
.tech-graphic b { position:absolute; width:48px;height:48px;left:70px;top:58px;border-radius:16px;background:linear-gradient(145deg,#6f3cff,#13a3ad);box-shadow:0 0 30px rgba(111,60,255,.65); }
.tech-graphic b::after { content:"AI"; position:absolute; inset:0; display:grid; place-items:center; color:white; font-size:14px; }
.tech-graphic em { position:absolute; left:52px; right:52px; bottom:3px; height:8px; border-radius:50%; background:rgba(75,227,229,.25); filter:blur(6px); }

.service-card[id], .digital-card[id] { scroll-margin-top: 135px; }
.service-card:hover,
.service-card:focus-visible,
.service-card.touch-active { transform:translateY(-9px); box-shadow:0 22px 55px rgba(4,48,56,.14); border-color:rgba(19,163,173,.28); }
.service-card:hover .service-icon,
.service-card:focus-visible .service-icon,
.service-card.touch-active .service-icon { transform:rotate(-5deg) scale(1.08); box-shadow:0 10px 28px rgba(19,163,173,.19); }
.service-icon { transition:transform .28s ease, box-shadow .28s ease; }
.digital-card:hover,
.digital-card:focus-visible,
.digital-card.touch-active { transform:translateY(-8px); box-shadow:0 20px 65px rgba(0,0,0,.18); }
.demo-window { transition:transform .35s ease, box-shadow .35s ease; }
.demo-window:hover,
.demo-window:focus-within { transform:rotate(0) translateY(-7px); box-shadow:0 34px 85px rgba(3,35,42,.24); }

/* About page */
.inner-hero {
  position:relative;
  min-height:560px;
  display:flex;
  align-items:center;
  overflow:hidden;
  color:white;
  background:linear-gradient(145deg,#071721,#0a343b 62%,#10142c);
}
.inner-grid-bg { position:absolute; inset:0; opacity:.22; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:50px 50px; mask-image:linear-gradient(to bottom,black,transparent); }
.inner-glow { position:absolute; width:460px; height:460px; border-radius:50%; filter:blur(4px); }
.glow-a { right:-130px; top:-120px; background:radial-gradient(circle,rgba(111,60,255,.38),transparent 68%); }
.glow-b { right:4%; top:-90px; background:radial-gradient(circle,rgba(75,227,229,.25),transparent 69%); }
.inner-hero-grid { position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:70px; align-items:center; padding-block:110px 90px; }
.inner-hero-copy h1 { margin:17px 0 20px; max-width:760px; font-size:clamp(44px,5.5vw,72px); line-height:1.03; letter-spacing:-.045em; }
.inner-hero-copy > p { max-width:650px; color:rgba(255,255,255,.72); font-size:18px; }
.inner-hero .eyebrow { color:#85eaec; background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); }
.breadcrumb { display:flex; gap:10px; align-items:center; margin-top:28px; font-size:12px; color:rgba(255,255,255,.48); }
.breadcrumb a { color:#80e6e8; }
.journey-graphic { min-height:350px; position:relative; }
.journey-ring { position:absolute; width:260px;height:260px; left:50%;top:50%; transform:translate(-50%,-50%); border:1px solid rgba(75,227,229,.38); border-radius:50%; box-shadow:0 0 0 42px rgba(111,60,255,.055),0 0 0 84px rgba(75,227,229,.035); animation:ringPulse 5s ease-in-out infinite; }
.journey-ring::before,.journey-ring::after { content:"";position:absolute;border-radius:50%; }
.journey-ring::before { inset:45px;border:1px dashed rgba(255,255,255,.28); }
.journey-ring::after { width:12px;height:12px;left:10px;top:55px;background:#4be3e5;box-shadow:0 0 18px #4be3e5; }
@keyframes ringPulse { 50% { transform:translate(-50%,-50%) scale(1.04); opacity:.8; } }
.year-float { position:absolute; width:215px; padding:19px; border-radius:19px; color:white; background:rgba(5,27,37,.84); border:1px solid rgba(255,255,255,.14); box-shadow:0 22px 55px rgba(0,0,0,.24); backdrop-filter:blur(15px); }
.year-float b,.year-float strong,.year-float small { display:block; }
.year-float b { color:#70e3e5; font-size:21px; }
.year-float strong { margin:6px 0; font-size:13px; }
.year-float small { color:rgba(255,255,255,.55); font-size:9px; text-transform:uppercase; letter-spacing:.1em; }
.y2021 { left:0; top:30px; }
.y2025 { right:0; top:115px; }
.ynow { left:30px; bottom:1px; background:linear-gradient(145deg,rgba(111,60,255,.78),rgba(5,54,63,.9)); }
.year-float:hover,.year-float:focus-visible,.year-float.touch-active { box-shadow:0 28px 70px rgba(0,0,0,.33),0 0 30px rgba(75,227,229,.17); }
.company-story blockquote { margin:25px 0 0; padding:20px 22px; border-left:4px solid var(--teal-500); border-radius:0 16px 16px 0; background:var(--soft); color:var(--teal-950); font-weight:750; }
.story-shape { position:absolute; width:110px;height:110px;left:-34px;bottom:-28px;border:1px solid rgba(111,60,255,.28);border-radius:30px;transform:rotate(16deg);z-index:-1;box-shadow:0 0 0 18px rgba(75,227,229,.045); }
.journey-section { position:relative; background:radial-gradient(circle at 82% 10%,rgba(111,60,255,.27),transparent 30%),linear-gradient(145deg,#061b25,#073842); overflow:hidden; }
.journey-section::before { content:"";position:absolute;inset:0;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:46px 46px; }
.journey-section .container { position:relative;z-index:1; }
.journey-timeline { max-width:1020px; margin:60px auto 0; position:relative; }
.journey-timeline::before { content:"";position:absolute;left:120px;top:22px;bottom:22px;width:2px;background:linear-gradient(#4be3e5,#6f3cff,#4be3e5);box-shadow:0 0 15px rgba(75,227,229,.35); }
.journey-item { display:grid;grid-template-columns:92px 58px 1fr;align-items:center;margin-bottom:26px;color:white; }
.journey-year { font-size:21px;font-weight:900;text-align:right;color:#7ce8ea; }
.journey-dot { width:16px;height:16px;border-radius:50%;margin:auto;background:#4be3e5;border:4px solid #0a333b;box-shadow:0 0 0 3px rgba(75,227,229,.3),0 0 20px rgba(75,227,229,.5);z-index:2; }
.journey-card { padding:25px 27px;border-radius:22px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px); }
.journey-item:hover .journey-card,.journey-item:focus-visible .journey-card,.journey-item.touch-active .journey-card { background:rgba(255,255,255,.11);border-color:rgba(75,227,229,.35); }
.journey-card > span { color:#74e3e5;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.13em; }
.journey-card h3 { margin:8px 0 8px;font-size:23px; }
.journey-card p { margin:0 0 14px;color:rgba(255,255,255,.65);font-size:13px; }
.journey-card > div { display:flex;flex-wrap:wrap;gap:8px; }
.journey-card small { padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.08);font-size:9px;color:rgba(255,255,255,.72); }
.mission-vision { background:#f7fcfc; }
.mission-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:24px; }
.mission-card { min-height:440px;padding:38px;border:1px solid var(--line);border-radius:30px;background:white;box-shadow:0 20px 60px rgba(4,40,47,.07);overflow:hidden;position:relative; }
.mission-card.vision { background:linear-gradient(145deg,#092e36,#161536);color:white;border-color:rgba(255,255,255,.1); }
.mission-card h2 { margin:18px 0 16px;font-size:clamp(31px,3vw,43px);line-height:1.1; }
.mission-card p { color:var(--muted); }
.mission-card.vision p { color:rgba(255,255,255,.66); }
.mission-card.vision .eyebrow { color:#7ce9eb; }
.mission-symbol { width:145px;height:145px;margin-left:auto;position:relative;transition:transform .4s ease; }
.mission-card:hover .mission-symbol,.mission-card:focus-visible .mission-symbol,.mission-card.touch-active .mission-symbol { transform:rotate(8deg) scale(1.05); }
.target-symbol i { position:absolute;border:2px solid var(--teal-400);border-radius:50%;inset:0;box-shadow:0 0 30px rgba(75,227,229,.13); }
.target-symbol i:nth-child(2){inset:28px;border-color:var(--violet)}.target-symbol i:nth-child(3){inset:58px;background:var(--teal-500);border:0;box-shadow:0 0 20px rgba(75,227,229,.6)}
.eye-symbol { border:2px solid rgba(117,229,232,.65);border-radius:75% 10% 75% 10%;transform:rotate(45deg); }
.eye-symbol i:first-child { position:absolute;inset:34px;border-radius:50%;border:2px solid #7be7e9; }
.eye-symbol i:last-child { position:absolute;inset:57px;border-radius:50%;background:#6f3cff;box-shadow:0 0 24px #6f3cff; }
.values-section { overflow:hidden; }
.values-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
.value-card { min-height:240px;padding:26px;border:1px solid var(--line);border-radius:22px;background:white;position:relative;overflow:hidden; }
.value-card::after { content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-40px;bottom:-40px;background:rgba(75,227,229,.11);transition:transform .35s ease; }
.value-card:hover,.value-card:focus-visible,.value-card.touch-active { box-shadow:0 22px 50px rgba(4,42,49,.1);border-color:rgba(19,163,173,.28); }
.value-card:hover::after,.value-card:focus-visible::after,.value-card.touch-active::after { transform:scale(1.7); }
.value-card > span { color:var(--violet);font-size:11px;font-weight:900;letter-spacing:.12em; }
.value-card h3 { margin:42px 0 10px;color:var(--teal-950);font-size:22px; }
.value-card p { margin:0;color:var(--muted);font-size:13px; }
.next-chapter { background:linear-gradient(180deg,#f7fcfc,#fff); }
.next-chapter-grid { display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center; }
.next-chapter .btn { margin-top:28px; }
.evolution-graphic { min-height:500px;position:relative; }
.evolution-graphic::before { content:"";position:absolute;width:350px;height:350px;left:50%;top:50%;transform:translate(-50%,-50%);border:1px dashed rgba(19,163,173,.38);border-radius:50%;animation:spinSlow 28s linear infinite; }
@keyframes spinSlow { to { transform:translate(-50%,-50%) rotate(360deg); } }
.evolution-core { position:absolute;width:190px;height:190px;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;text-align:center;padding:30px;border-radius:50%;background:linear-gradient(145deg,#092e36,#17143b);color:white;box-shadow:0 28px 70px rgba(4,32,39,.25),0 0 0 20px rgba(75,227,229,.06);z-index:2; }
.evolution-core:hover,.evolution-core:focus-visible,.evolution-core.touch-active { transform:translate(-50%,-53%) scale(1.03); }
.evolution-core img { width:82px;height:60px;object-fit:contain;filter:drop-shadow(0 5px 15px rgba(0,0,0,.25)); }
.evolution-core strong { font-size:12px; }
.evolution-node { position:absolute;width:105px;height:105px;border-radius:25px;display:grid;place-items:center;text-align:center;background:white;border:1px solid var(--line);box-shadow:0 16px 40px rgba(4,40,47,.11);z-index:3;animation:nodeFloat 5s ease-in-out infinite; }
.evolution-node b,.evolution-node small { display:block; }.evolution-node b{color:var(--teal-800)}.evolution-node small{color:var(--muted);font-size:9px}
.n-hr{left:5%;top:12%}.n-web{right:5%;top:10%;animation-delay:-1s}.n-faq{right:0;bottom:13%;animation-delay:-2s}.n-ai{left:44%;bottom:-1%;animation-delay:-3s}.n-auto{left:0;bottom:15%;animation-delay:-4s}
@keyframes nodeFloat { 50% { transform:translateY(-10px);box-shadow:0 24px 48px rgba(4,40,47,.16); } }
.about-cta { background:#071e28;padding-top:0; }
.cta-panel { min-height:260px;display:flex;align-items:center;justify-content:space-between;gap:40px;padding:48px 54px;border-radius:32px;color:white;background:radial-gradient(circle at 78% 20%,rgba(75,227,229,.2),transparent 32%),radial-gradient(circle at 12% 80%,rgba(111,60,255,.35),transparent 36%),linear-gradient(145deg,#102f3a,#171434);border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 80px rgba(0,0,0,.22); }
.cta-panel h2 { margin:10px 0 8px;font-size:clamp(32px,4vw,48px); }.cta-panel p{margin:0;color:rgba(255,255,255,.65)}
.btn-light { flex:0 0 auto;background:white;color:var(--teal-950); }.btn-light:hover{background:#dffbfb;transform:translateY(-2px)}

/* Contact page */
.contact-orbit { min-height:350px;position:relative; }
.contact-orbit::before,.contact-orbit::after { content:"";position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%); }
.contact-orbit::before { width:285px;height:285px;border:1px solid rgba(75,227,229,.34);box-shadow:0 0 0 45px rgba(111,60,255,.05); }
.contact-orbit::after { width:205px;height:205px;border:1px dashed rgba(255,255,255,.22);animation:spinContact 22s linear infinite; }
@keyframes spinContact { to { transform:translate(-50%,-50%) rotate(360deg); } }
.contact-core { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:145px;height:145px;border-radius:50%;display:grid;place-content:center;text-align:center;background:linear-gradient(145deg,#6f3cff,#0d8790);box-shadow:0 22px 60px rgba(0,0,0,.3),0 0 35px rgba(75,227,229,.2);z-index:2; }
.contact-core strong{font-size:25px}.contact-core small{color:rgba(255,255,255,.7);font-size:10px;margin-top:4px}
.contact-float { position:absolute;display:flex;align-items:center;gap:9px;padding:12px 15px;border-radius:16px;color:white;background:rgba(6,29,39,.84);border:1px solid rgba(255,255,255,.14);box-shadow:0 16px 40px rgba(0,0,0,.2);backdrop-filter:blur(12px);font-size:11px;font-weight:750;z-index:3; }
.contact-float b { width:31px;height:31px;display:grid;place-items:center;border-radius:10px;background:rgba(75,227,229,.15);color:#7ce8ea; }
.cf-email{left:0;top:35px}.cf-phone{right:0;top:132px}.cf-whatsapp{left:40px;bottom:8px}
.contact-float:hover,.contact-float:focus-visible,.contact-float.touch-active { color:white;box-shadow:0 24px 55px rgba(0,0,0,.3),0 0 24px rgba(75,227,229,.15); }
.contact-page-main { background:linear-gradient(180deg,#f7fcfc,#fff); }
.contact-page-grid { display:grid;grid-template-columns:.86fr 1.14fr;gap:70px;align-items:start; }
.contact-info h2 { margin:14px 0 15px;font-size:clamp(36px,4vw,52px); }.contact-info>p{color:var(--muted);font-size:16px}
.contact-method-list { display:grid;gap:12px;margin-top:28px; }
.contact-method { display:grid;grid-template-columns:48px 1fr auto;gap:14px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:18px;background:white; }
.contact-method:hover,.contact-method:focus-visible,.contact-method.touch-active { box-shadow:0 18px 45px rgba(4,40,47,.09);border-color:rgba(19,163,173,.32); }
.contact-method>span { width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:var(--teal-100);color:var(--teal-800);font-weight:900; }
.contact-method small,.contact-method strong,.contact-method p { display:block;margin:0; }.contact-method small{color:var(--teal-600);font-size:9px;text-transform:uppercase;letter-spacing:.1em}.contact-method strong{color:var(--teal-950);font-size:13px;margin:3px 0}.contact-method p{color:var(--muted);font-size:10px}.contact-method>b{color:var(--teal-600)}
.candidate-warning { display:flex;gap:13px;margin-top:22px;padding:17px;border-radius:17px;background:#fff8eb;border:1px solid #f4d69f;color:#6d4b18; }
.candidate-warning>b { flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#f5a62d;color:white; }.candidate-warning p{margin:0;font-size:11px}.candidate-warning strong{display:block;margin-bottom:4px}
.contact-page-form { padding:34px;box-shadow:0 28px 75px rgba(4,40,47,.12);border:1px solid rgba(7,63,70,.08); }
.form-heading { margin-bottom:23px; }.form-heading>span{color:var(--teal-600);font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.13em}.form-heading h2{margin:7px 0 6px;font-size:31px}.form-heading p{margin:0;color:var(--muted);font-size:12px}
.consent-row { display:flex!important;grid-template-columns:none!important;align-items:flex-start!important;gap:9px!important;font-weight:600!important;font-size:10px!important; }.consent-row input{width:auto!important;margin-top:2px}
.requirement-guide { background:#061d27;color:white;position:relative;overflow:hidden; }
.requirement-guide::before { content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 10%,rgba(111,60,255,.28),transparent 29%),linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:auto,46px 46px,46px 46px; }
.requirement-guide .container{position:relative;z-index:1}.requirement-guide .section-heading h2,.requirement-guide .section-heading .eyebrow{color:white}.requirement-guide .section-heading p{color:rgba(255,255,255,.65)}
.guide-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:18px; }
.guide-card { min-height:255px;padding:25px;border-radius:22px;background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.11);backdrop-filter:blur(9px); }
.guide-card:hover,.guide-card:focus-visible,.guide-card.touch-active{background:rgba(255,255,255,.1);border-color:rgba(75,227,229,.32);box-shadow:0 20px 55px rgba(0,0,0,.18)}
.guide-card>span{color:#6fe4e6;font-size:10px;font-weight:900;letter-spacing:.12em}.guide-card h3{margin:48px 0 10px;font-size:20px}.guide-card p{margin:0;color:rgba(255,255,255,.62);font-size:12px}
.location-section { background:#f8fcfc; }
.location-grid { display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;font-size:14px; }
.map-art { min-height:430px;position:relative;border-radius:30px;overflow:hidden;background:linear-gradient(145deg,#dff5f5,#c8e8ea);box-shadow:0 22px 65px rgba(4,40,47,.13);border:1px solid rgba(7,63,70,.08); }
.map-pattern { position:absolute;inset:0;opacity:.48;background-image:linear-gradient(30deg,rgba(7,63,70,.08) 12%,transparent 12.5%,transparent 87%,rgba(7,63,70,.08) 87.5%,rgba(7,63,70,.08)),linear-gradient(150deg,rgba(7,63,70,.08) 12%,transparent 12.5%,transparent 87%,rgba(7,63,70,.08) 87.5%,rgba(7,63,70,.08));background-size:50px 88px; }
.road { position:absolute;height:18px;border-radius:999px;background:white;box-shadow:0 2px 8px rgba(4,40,47,.1); }.road::after{content:"";position:absolute;left:0;right:0;top:8px;border-top:2px dashed #b1cfd1}.road-a{width:120%;left:-10%;top:39%;transform:rotate(-18deg)}.road-b{width:110%;left:-5%;top:62%;transform:rotate(22deg)}.road-c{width:82%;left:8%;top:18%;transform:rotate(57deg)}
.map-pin { position:absolute;left:53%;top:45%;width:66px;height:66px;border-radius:50% 50% 50% 4px;transform:rotate(-45deg);background:linear-gradient(145deg,#6f3cff,#0f9aa4);box-shadow:0 16px 36px rgba(61,44,170,.35);z-index:4;animation:pinBounce 3s ease-in-out infinite; }.map-pin span{position:absolute;inset:19px;border-radius:50%;background:white}
@keyframes pinBounce{50%{transform:rotate(-45deg) translate(7px,-7px)}}
.map-label { position:absolute;left:58%;top:62%;z-index:5;padding:11px 14px;border-radius:13px;background:#092e36;color:white;box-shadow:0 12px 30px rgba(4,40,47,.24); font-size:20px; line-height:1.3; }.map-label strong,.map-label small{display:block}.map-label strong{font-size:20px; font-weight:800;}.map-label small{color:rgba(255,255,255,.6);font-size:14px}
.location-facts { display:grid;grid-template-columns:repeat(2,1fr);gap:13px;margin:25px 0; }.location-facts>div{padding:16px;border:1px solid var(--line);border-radius:15px;background:white}.location-facts small,.location-facts strong{display:block}.location-facts small{color:var(--teal-600);font-size:9px;text-transform:uppercase;letter-spacing:.1em}.location-facts strong{margin-top:5px;color:var(--teal-950);font-size:12px}

/* Five-column footer for the three-page architecture */
.footer-grid { grid-template-columns:1.55fr repeat(4,1fr);gap:38px; }
@media (max-width: 1080px) {
  .mega-dropdown { width:570px; }
  .mini-timeline { grid-template-columns:1fr;gap:10px; }.mini-timeline i{width:1px;height:18px;margin:auto}.mini-timeline i::after{right:-3px;top:auto;bottom:-1px}
  .values-grid { grid-template-columns:repeat(2,1fr); }
  .guide-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:repeat(3,1fr); }
}

@media (max-width: 880px) {
  html { scroll-padding-top: 100px; }
  section[id], main[id], .service-card[id], .digital-card[id] { scroll-margin-top:100px; }
  .main-nav { overflow-y:auto;max-height:calc(100vh - 100px); }
  .nav-group { display:grid;grid-template-columns:1fr auto;align-items:center;border-radius:12px; }
  .nav-group>.nav-parent { grid-column:1;grid-row:1;margin:0; }
  .submenu-toggle { grid-column:2;grid-row:1;margin:0 5px 0 0;width:42px;height:42px; }
  .nav-dropdown,
  .mega-dropdown { position:static;grid-column:1/-1;width:auto;display:none;opacity:1;visibility:visible;transform:none!important;box-shadow:none;border:0;border-radius:12px;background:var(--soft);margin:0 4px 7px;padding:7px; }
  .nav-group.submenu-open>.nav-dropdown { display:grid; }
  .nav-dropdown::before { display:none; }
  .mega-dropdown { grid-template-columns:1fr; }
  .mega-dropdown>div+div { border-left:0;border-top:1px solid var(--line);padding-left:5px;padding-top:10px; }
  .nav-dropdown>a,.mega-dropdown>div>a { padding:10px!important; }
  .capability-grid,
  .inner-hero-grid,
  .mission-grid,
  .next-chapter-grid,
  .contact-page-grid,
  .location-grid { grid-template-columns:1fr; }
  .capability-card { min-height:385px; }
  .inner-hero { min-height:auto; }
  .inner-hero-grid { padding-block:82px;gap:36px; }
  .journey-graphic,.contact-orbit { max-width:620px;width:100%;margin:auto; }
  .journey-timeline::before { left:89px; }
  .journey-item { grid-template-columns:68px 42px 1fr; }
  .next-chapter-grid,.location-grid { gap:50px; }
  .evolution-graphic { max-width:620px;width:100%;margin:auto; }
  .cta-panel { flex-direction:column;align-items:flex-start; }
  .footer-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 600px) {
  .home-hero::after { display:none; }
  .capability-card { min-height:440px;padding:25px; }
  .capability-graphic { width:150px;height:145px;right:12px;top:44px;transform:scale(.85);transform-origin:top right; }
  .capability-card h3 { font-size:29px; }
  .orbit-small { left:4px; }.orbit-large{right:4px;}
  .inner-hero-copy h1 { font-size:42px; }
  .inner-hero-copy>p { font-size:15px; }
  .journey-graphic { min-height:450px; }
  .journey-ring { width:210px;height:210px; }
  .year-float { width:180px;padding:15px; }.y2021{left:0;top:20px}.y2025{right:0;top:165px}.ynow{left:12px;bottom:0}
  .journey-timeline { margin-top:35px; }
  .journey-timeline::before { left:9px; }
  .journey-item { grid-template-columns:1fr;gap:9px;padding-left:30px;position:relative; }
  .journey-year { text-align:left; }.journey-dot{position:absolute;left:2px;top:7px;width:15px;height:15px}.journey-card{padding:21px}
  .values-grid,.guide-grid,.location-facts { grid-template-columns:1fr; }
  .mission-card { min-height:auto;padding:26px; }.mission-symbol{width:110px;height:110px}.target-symbol i:nth-child(2){inset:22px}.target-symbol i:nth-child(3){inset:45px}.eye-symbol i:first-child{inset:26px}.eye-symbol i:last-child{inset:44px}
  .value-card { min-height:210px; }
  .evolution-graphic { min-height:440px;transform:scale(.88);transform-origin:center; }
  .evolution-graphic::before{width:310px;height:310px}.evolution-core{width:160px;height:160px}.evolution-node{width:88px;height:88px}.n-ai{left:39%}
  .cta-panel { padding:34px 25px;border-radius:25px; }.cta-panel .btn{width:100%;}
  .contact-orbit { min-height:430px; }.contact-orbit::before{width:230px;height:230px}.contact-orbit::after{width:170px;height:170px}.contact-core{width:125px;height:125px}.cf-email{left:0;top:25px}.cf-phone{right:0;top:190px}.cf-whatsapp{left:15px;bottom:20px}
  .contact-page-form { padding:24px 18px; }
  .map-art { min-height:340px; }.map-label{left:48%;top:66%}
  .footer-grid { grid-template-columns:1fr; }
}

@media (hover: none) {
  .nav-group:hover > .nav-dropdown { opacity:0;visibility:hidden; }
  .nav-group.submenu-open > .nav-dropdown { opacity:1;visibility:visible; }
}


/* Services page */
.services-hero { background:radial-gradient(circle at 17% 18%,rgba(19,163,173,.24),transparent 30%),radial-gradient(circle at 84% 24%,rgba(111,60,255,.28),transparent 32%),linear-gradient(145deg,#051d28,#073b45 58%,#111431); }
.services-hero .inner-hero-grid { min-height:680px; }
.service-constellation { position:relative;min-height:470px;isolation:isolate; }
.constellation-ring { position:absolute;left:50%;top:50%;border:1px solid rgba(112,229,231,.28);border-radius:50%;transform:translate(-50%,-50%); }
.ring-one { width:290px;height:290px;box-shadow:0 0 55px rgba(19,163,173,.09); }
.ring-two { width:430px;height:430px;border-style:dashed;animation:constellationSpin 26s linear infinite; }
@keyframes constellationSpin { to { transform:translate(-50%,-50%) rotate(360deg); } }
.constellation-core { position:absolute;left:50%;top:50%;width:165px;height:165px;display:grid;place-content:center;text-align:center;border-radius:50%;transform:translate(-50%,-50%);background:linear-gradient(145deg,#10a3ad,#5637d9);border:1px solid rgba(255,255,255,.32);box-shadow:0 25px 75px rgba(0,0,0,.35),inset 0 0 35px rgba(255,255,255,.12);color:white;z-index:3; }
.constellation-core strong { font-size:31px;letter-spacing:.08em; }.constellation-core small{font-size:9px;color:rgba(255,255,255,.72);text-transform:uppercase;letter-spacing:.12em;margin-top:5px}
.constellation-node { position:absolute;z-index:4;min-width:112px;padding:13px 15px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(12px);color:white;text-align:center;box-shadow:0 14px 36px rgba(0,0,0,.2); }
.constellation-node b,.constellation-node span { display:block; }.constellation-node b{font-size:11px;color:#76e7e9;letter-spacing:.08em}.constellation-node span{font-size:10px;margin-top:4px;color:rgba(255,255,255,.72)}
.constellation-node:hover,.constellation-node:focus-visible,.constellation-node.touch-active { background:rgba(255,255,255,.14);border-color:rgba(112,229,231,.45);transform:translateY(-7px) scale(1.04); }
.node-recruit{left:4%;top:9%}.node-staff{right:2%;top:15%}.node-web{right:1%;bottom:11%}.node-chat{left:2%;bottom:12%}.node-auto{left:50%;top:1%;transform:translateX(-50%)}.node-auto:hover,.node-auto:focus-visible,.node-auto.touch-active{transform:translateX(-50%) translateY(-7px) scale(1.04)}
.service-jump-wrap { position:sticky;top:78px;z-index:800;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);box-shadow:0 8px 28px rgba(4,40,47,.05); }
.service-jump-bar { min-height:58px;display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none; }.service-jump-bar::-webkit-scrollbar{display:none}.service-jump-bar a{flex:0 0 auto;padding:8px 12px;border-radius:999px;color:#42595c;font-size:11px;font-weight:800}.service-jump-bar a:hover{background:var(--teal-100);color:var(--teal-800)}
.service-intro { background:linear-gradient(180deg,#fff,#f5fbfb); }
.service-detail-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:42px; }
.service-detail-card { scroll-margin-top:155px;min-height:650px;display:flex;flex-direction:column;border:1px solid rgba(7,63,70,.09);border-radius:28px;overflow:hidden;background:white;box-shadow:0 22px 65px rgba(4,40,47,.075);transition:.32s ease; }
.service-detail-card:hover,.service-detail-card:focus-visible,.service-detail-card.touch-active { transform:translateY(-8px);box-shadow:0 30px 80px rgba(4,40,47,.14);border-color:rgba(19,163,173,.28); }
.detail-visual { min-height:235px;position:relative;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#062c35,#0c5962); }
.detail-visual::before { content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:34px 34px; }
.detail-visual>span { position:absolute;left:24px;top:20px;color:rgba(255,255,255,.45);font-size:12px;font-weight:900;letter-spacing:.13em; }
.detail-copy { padding:30px;display:flex;flex-direction:column;flex:1; }.detail-label{color:var(--teal-600);font-size:9px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}.detail-copy h3{margin:10px 0 12px;font-size:29px;color:var(--teal-950)}.detail-copy>p{color:var(--muted);font-size:14px;margin:0 0 20px}
.check-list { list-style:none;padding:0;margin:0 0 22px;display:grid;gap:10px; }.check-list li{position:relative;padding-left:25px;color:#40575a;font-size:12px}.check-list li::before{content:"✓";position:absolute;left:0;top:-1px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--teal-100);color:var(--teal-700);font-weight:900;font-size:10px}
.outcome-tags { display:flex;flex-wrap:wrap;gap:7px;margin:0 0 22px; }.outcome-tags span{padding:7px 9px;border-radius:999px;background:#f3f9f9;border:1px solid var(--line);color:#607275;font-size:9px;font-weight:800}.detail-copy .text-link{margin-top:auto}
.people-cluster,.staff-flow,.payroll-stack,.lifecycle-loop { position:relative;width:190px;height:145px;z-index:2;transition:transform .4s ease; }.service-detail-card:hover .people-cluster,.service-detail-card:hover .staff-flow,.service-detail-card:hover .payroll-stack,.service-detail-card:hover .lifecycle-loop{transform:translateY(-6px) scale(1.04)}
.people-cluster i { position:absolute;top:25px;width:48px;height:48px;border-radius:50%;background:linear-gradient(145deg,#58e0e3,#7a55ff);box-shadow:0 0 0 10px rgba(255,255,255,.05); }.people-cluster i:nth-child(1){left:10px}.people-cluster i:nth-child(2){left:71px;top:5px}.people-cluster i:nth-child(3){right:10px}.people-cluster b{position:absolute;left:12px;right:12px;bottom:5px;height:62px;border-radius:50% 50% 18px 18px;background:linear-gradient(90deg,rgba(88,224,227,.35),rgba(122,85,255,.45));border:1px solid rgba(255,255,255,.18)}
.staff-flow i{position:absolute;width:50px;height:50px;border-radius:16px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22)}.staff-flow i:nth-child(1){left:4px;top:50px}.staff-flow i:nth-child(2){left:70px;top:8px}.staff-flow i:nth-child(3){right:4px;top:50px}.staff-flow b{position:absolute;left:25px;right:25px;bottom:5px;height:2px;background:linear-gradient(90deg,#60e4e7,#8c6aff)}
.payroll-visual{background:linear-gradient(145deg,#123c42,#44317f)}.payroll-stack i{position:absolute;left:50%;transform:translateX(-50%);width:130px;height:82px;border-radius:17px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08)}.payroll-stack i:nth-child(1){top:5px;z-index:3;display:grid;place-items:center;color:white;font-style:normal;font-size:38px;font-weight:900;background:linear-gradient(145deg,rgba(19,163,173,.65),rgba(111,60,255,.55))}.payroll-stack i:nth-child(2){top:29px;left:46%;z-index:2}.payroll-stack i:nth-child(3){top:52px;left:42%;z-index:1}
.lifecycle-loop{border:1px dashed rgba(255,255,255,.3);border-radius:50%;width:175px;height:175px;animation:constellationSpin 22s linear infinite}.lifecycle-loop i{position:absolute;width:38px;height:38px;border-radius:13px;background:linear-gradient(145deg,#56dfe2,#7a55ff);box-shadow:0 8px 18px rgba(0,0,0,.25)}.lifecycle-loop i:nth-child(1){left:68px;top:-18px}.lifecycle-loop i:nth-child(2){right:-18px;top:68px}.lifecycle-loop i:nth-child(3){left:68px;bottom:-18px}.lifecycle-loop i:nth-child(4){left:-18px;top:68px}
.digital-services-page { position:relative;overflow:hidden;background:radial-gradient(circle at 13% 12%,rgba(19,163,173,.20),transparent 27%),radial-gradient(circle at 90% 16%,rgba(111,60,255,.26),transparent 28%),linear-gradient(145deg,#051b26,#082f39 55%,#151331); }
.digital-grid-bg { position:absolute;inset:0;opacity:.55;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:48px 48px; }.digital-services-page .container{position:relative;z-index:1}
.solution-detail-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:43px; }
.solution-detail-card { scroll-margin-top:155px;min-height:645px;padding:31px;border-radius:28px;background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px);color:white;transition:.32s ease;display:flex;flex-direction:column; }
.solution-detail-card:hover,.solution-detail-card:focus-visible,.solution-detail-card.touch-active { transform:translateY(-8px);background:rgba(255,255,255,.095);border-color:rgba(101,229,231,.34);box-shadow:0 25px 70px rgba(0,0,0,.23); }.solution-detail-card.featured{background:linear-gradient(145deg,rgba(19,163,173,.22),rgba(111,60,255,.12));border-color:rgba(101,229,231,.3)}
.solution-top{display:flex;align-items:center;justify-content:space-between}.solution-top>b{color:rgba(255,255,255,.52);font-size:12px;letter-spacing:.11em}.solution-detail-card h3{font-size:28px;margin:22px 0 12px}.solution-detail-card>p{color:rgba(255,255,255,.66);font-size:14px;margin:0 0 20px}.solution-detail-card ul{list-style:none;padding:0;margin:0 0 25px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}.solution-detail-card li{position:relative;padding-left:18px;color:rgba(255,255,255,.82);font-size:12px}.solution-detail-card li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--orange)}.solution-detail-card .text-link{margin-top:auto;text-align:left}
.browser-graphic,.chat-graphic,.ai-graphic,.automation-graphic { height:190px;margin:25px 0 2px;border-radius:20px;background:rgba(2,17,24,.34);border:1px solid rgba(255,255,255,.11);position:relative;overflow:hidden;transition:transform .4s ease; }.solution-detail-card:hover .browser-graphic,.solution-detail-card:hover .chat-graphic,.solution-detail-card:hover .ai-graphic,.solution-detail-card:hover .automation-graphic{transform:translateY(-5px) scale(1.015)}
.browser-graphic>div{height:30px;display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid rgba(255,255,255,.1)}.browser-graphic>div i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35)}.browser-graphic section{position:absolute;inset:48px 20px 19px;border-radius:13px;background:linear-gradient(145deg,rgba(19,163,173,.23),rgba(111,60,255,.25));padding:18px}.browser-graphic section span{display:block;width:40%;height:8px;border-radius:99px;background:#6ce5e7}.browser-graphic section strong{display:block;width:75%;height:17px;border-radius:4px;background:rgba(255,255,255,.78);margin-top:12px}.browser-graphic section small{display:block;width:56%;height:7px;border-radius:99px;background:rgba(255,255,255,.28);margin-top:10px}.browser-graphic section em{display:block;width:76px;height:25px;border-radius:99px;background:#f2a43a;margin-top:17px}
.chat-graphic{padding:22px}.chat-line{height:42px;border-radius:14px;margin-bottom:13px}.chat-line.bot{width:72%;background:rgba(255,255,255,.14);border-bottom-left-radius:4px}.chat-line.user{width:61%;margin-left:auto;background:linear-gradient(90deg,#0fa1ab,#6f3cff);border-bottom-right-radius:4px}.chat-options{display:flex;gap:7px}.chat-options i{height:24px;flex:1;border-radius:999px;border:1px solid rgba(108,229,231,.36);background:rgba(255,255,255,.05)}
.ai-graphic{display:grid;place-items:center}.ai-core{width:82px;height:82px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#18a9b3,#6f3cff);font-weight:900;font-size:24px;box-shadow:0 0 0 22px rgba(91,89,255,.08),0 0 55px rgba(59,209,215,.25)}.ai-graphic i{position:absolute;width:14px;height:14px;border-radius:50%;background:#66e4e6;box-shadow:0 0 15px #66e4e6}.ai-graphic i:nth-child(2){left:16%;top:25%}.ai-graphic i:nth-child(3){right:17%;top:22%}.ai-graphic i:nth-child(4){right:20%;bottom:19%}.ai-graphic i:nth-child(5){left:20%;bottom:17%}
.automation-graphic{display:flex;align-items:center;justify-content:center;gap:9px;padding:20px}.automation-graphic span{width:74px;height:58px;display:grid;place-items:center;border-radius:15px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.17);font-size:9px;font-weight:900;color:#80e8ea}.automation-graphic i{width:35px;height:2px;background:linear-gradient(90deg,#5fe2e5,#8b67ff);position:relative}.automation-graphic i::after{content:"";position:absolute;right:-1px;top:-3px;border-left:6px solid #8b67ff;border-top:4px solid transparent;border-bottom:4px solid transparent}
.chatbot-comparison { background:#f7fbfb; }.comparison-layout{display:grid;grid-template-columns:1.08fr .92fr;gap:70px;align-items:center}.comparison-table{margin-top:27px;border:1px solid var(--line);border-radius:19px;overflow:hidden;background:white}.comparison-row{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line);font-size:11px}.comparison-row:last-child{border-bottom:0}.comparison-row span{color:var(--muted)}.comparison-row strong{color:var(--teal-900)}.comparison-head{background:var(--teal-950);color:white}.comparison-head span,.comparison-head strong{color:white}.service-demo{max-width:470px;margin-left:auto}.demo-live-button{width:100%;border:0;border-top:1px solid var(--line);background:white;padding:15px;color:var(--teal-800);font-weight:900}.demo-live-button:hover{background:var(--teal-100)}
.services-cta { background:#071e28;padding-top:0; }.services-cta .cta-panel{margin-top:0}
@media (max-width:1080px){.service-detail-grid,.solution-detail-grid{grid-template-columns:1fr}.service-detail-card,.solution-detail-card{min-height:auto}.solution-detail-card ul{grid-template-columns:1fr}.services-hero .inner-hero-grid{min-height:auto}.comparison-layout{grid-template-columns:1fr}.service-demo{margin:0;max-width:100%}}
@media (max-width:880px){.service-jump-wrap{top:70px}.service-constellation{max-width:620px;width:100%;margin:auto}.service-detail-card[id],.solution-detail-card[id]{scroll-margin-top:145px}}
@media (max-width:600px){.service-constellation{min-height:430px;transform:scale(.88);transform-origin:center}.ring-two{width:370px;height:370px}.ring-one{width:250px;height:250px}.constellation-core{width:145px;height:145px}.node-recruit{left:-3%}.node-staff{right:-5%}.node-web{right:-5%}.node-chat{left:-4%}.detail-copy{padding:24px 20px}.detail-copy h3,.solution-detail-card h3{font-size:25px}.solution-detail-card{padding:24px 20px}.comparison-row{grid-template-columns:1.15fr 1fr 1fr;padding:11px 10px;font-size:9px}.automation-graphic{gap:5px}.automation-graphic span{width:58px}.automation-graphic i{width:18px}}
@media (prefers-reduced-motion:reduce){.ring-two,.lifecycle-loop{animation:none}}

/* =========================================================
   3D service sphere update + logo-only header
   ========================================================= */

/* The logo file already contains the SRSB wordmark, so no extra header text is needed. */
.site-header .brand {
  min-width: 142px;
  gap: 0;
}
.site-header .brand img {
  width: 142px;
  height: 52px;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 5px 12px rgba(4, 56, 63, .10));
  transition: transform .25s ease, filter .25s ease;
}
.site-header .brand:hover img,
.site-header .brand:focus-visible img {
  transform: translateY(-1px) scale(1.025);
  filter: drop-shadow(0 8px 17px rgba(4, 56, 63, .16));
}

/* Services hero: 3D central sphere and revolving service bubbles. */
.service-sphere-system {
  position: relative;
  min-height: 570px;
  width: 100%;
  max-width: 590px;
  margin-inline: auto;
  isolation: isolate;
  perspective: 1100px;
  --orbit-size: 440px;
  --bubble-size: 88px;
}

.sphere-space {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  pointer-events: none;
}
.space-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, #fff 0 9%, #7af0f2 22%, #5e38d7 72%);
  box-shadow: 0 0 18px rgba(105, 232, 235, .75), 0 0 35px rgba(111, 60, 255, .35);
  animation: sphereDotFloat 5.8s ease-in-out infinite;
}
.dot-a { left: 10%; top: 20%; width: 18px; height: 18px; }
.dot-b { right: 8%; top: 16%; animation-delay: -1.4s; }
.dot-c { right: 13%; bottom: 15%; width: 15px; height: 15px; animation-delay: -2.8s; }
.dot-d { left: 7%; bottom: 21%; width: 8px; height: 8px; animation-delay: -4.1s; }
.dot-e { left: 50%; top: 5%; width: 7px; height: 7px; animation-delay: -2s; }
@keyframes sphereDotFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .7; }
  50% { transform: translate3d(0, -14px, 24px) scale(1.12); opacity: 1; }
}

.sphere-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 470px;
  height: 185px;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  border: 1px solid rgba(112, 229, 231, .26);
  box-shadow: 0 0 42px rgba(58, 211, 217, .09);
  pointer-events: none;
}
.ring-back {
  z-index: 1;
  border-style: dashed;
  opacity: .65;
}
.ring-front {
  z-index: 5;
  clip-path: inset(50% 0 0 0);
  border-color: rgba(148, 119, 255, .42);
  box-shadow: 0 18px 40px rgba(92, 55, 217, .16);
}

.sphere-core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 202px;
  height: 202px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: grid;
  place-content: center;
  justify-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 31% 24%, rgba(255,255,255,.95) 0 2%, rgba(130,247,249,.88) 5%, rgba(21,172,181,.88) 20%, transparent 42%),
    radial-gradient(circle at 64% 70%, rgba(125,79,255,.72), transparent 45%),
    linear-gradient(145deg, #0b8590 0%, #083e5a 45%, #351a7a 100%);
  border: 1px solid rgba(255,255,255,.38);
  box-shadow:
    0 34px 80px rgba(0,0,0,.43),
    0 0 75px rgba(69,224,227,.26),
    inset -24px -30px 48px rgba(5,10,35,.48),
    inset 18px 15px 30px rgba(255,255,255,.20);
  animation: sphereCoreFloat 5.4s ease-in-out infinite;
}
.sphere-core::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 0 38px rgba(255,255,255,.09);
}
.sphere-core::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: -12%;
  height: 24%;
  border-radius: 50%;
  background: rgba(0,0,0,.42);
  filter: blur(18px);
  z-index: -1;
}
.sphere-core strong {
  position: relative;
  z-index: 3;
  color: #ffffff;
  font-family: var(--font-display, Arial, sans-serif);
  font-size: 36px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .08em;
  text-shadow: 0 5px 18px rgba(0,0,0,.28);
}
.sphere-core small {
  position: relative;
  z-index: 3;
  margin-top: 10px;
  color: rgba(255,255,255,.84);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.sphere-shine {
  position: absolute;
  z-index: 2;
  width: 78px;
  height: 42px;
  left: 27px;
  top: 25px;
  border-radius: 50%;
  background: rgba(255,255,255,.30);
  filter: blur(4px);
  transform: rotate(-28deg);
}
.sphere-grid {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: .20;
  background-image:
    repeating-radial-gradient(ellipse at center, transparent 0 18px, rgba(255,255,255,.45) 19px 20px),
    linear-gradient(90deg, transparent 48%, rgba(255,255,255,.35) 49% 51%, transparent 52%);
  mix-blend-mode: screen;
}
@keyframes sphereCoreFloat {
  0%, 100% { transform: translate(-50%, -50%) translateY(0) rotate(-1deg); }
  50% { transform: translate(-50%, -50%) translateY(-9px) rotate(1.5deg); }
}

.sphere-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: var(--orbit-size);
  height: var(--orbit-size);
  margin: calc(var(--orbit-size) / -2) 0 0 calc(var(--orbit-size) / -2);
  border-radius: 50%;
  pointer-events: none;
  animation: serviceBubbleOrbit var(--duration) linear infinite;
  animation-delay: var(--delay);
}
.service-orbit-1, .service-orbit-3, .service-orbit-5, .service-orbit-7, .service-orbit-9 { z-index: 6; }
.service-orbit-2, .service-orbit-4, .service-orbit-6, .service-orbit-8 { z-index: 2; }

.service-bubble {
  position: absolute;
  right: calc(var(--bubble-size) / -2);
  top: 50%;
  width: var(--bubble-size);
  height: var(--bubble-size);
  margin-top: calc(var(--bubble-size) / -2);
  border-radius: 50%;
  pointer-events: auto;
  outline: none;
}
.bubble-counter {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: serviceBubbleCounterOrbit var(--duration) linear infinite;
  animation-delay: var(--delay);
}
.bubble-face {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.92) 0 3%, rgba(113,238,240,.66) 9%, transparent 31%),
    radial-gradient(circle at 68% 73%, rgba(128,81,255,.62), transparent 46%),
    linear-gradient(145deg, rgba(9,147,158,.96), rgba(49,25,119,.97));
  border: 1px solid rgba(255,255,255,.40);
  box-shadow:
    0 18px 40px rgba(0,0,0,.30),
    0 0 28px rgba(70,224,227,.18),
    inset -11px -14px 22px rgba(4,8,36,.36),
    inset 8px 7px 16px rgba(255,255,255,.14);
  transition: transform .30s ease, box-shadow .30s ease, border-color .30s ease, filter .30s ease;
}
.bubble-face::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.12);
}
.bubble-face b,
.bubble-face small {
  position: relative;
  z-index: 2;
  display: block;
}
.bubble-face b {
  color: #8df1f2;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .08em;
}
.bubble-face small {
  max-width: 70px;
  margin-top: 7px;
  color: rgba(255,255,255,.88);
  font-size: 9px;
  line-height: 1.15;
  font-weight: 800;
}
.service-bubble:hover .bubble-face,
.service-bubble:focus-visible .bubble-face,
.service-bubble.touch-active .bubble-face {
  transform: scale(1.18) translateY(-3px);
  border-color: rgba(255,255,255,.78);
  filter: saturate(1.18) brightness(1.08);
  box-shadow:
    0 26px 55px rgba(0,0,0,.37),
    0 0 38px rgba(93,239,241,.48),
    0 0 72px rgba(116,73,255,.30),
    inset -11px -14px 22px rgba(4,8,36,.28),
    inset 8px 7px 16px rgba(255,255,255,.22);
}
.service-sphere-system.orbit-paused .sphere-orbit,
.service-sphere-system.orbit-paused .bubble-counter {
  animation-play-state: paused;
}
@keyframes serviceBubbleOrbit {
  to { transform: rotate(360deg); }
}
@keyframes serviceBubbleCounterOrbit {
  to { transform: rotate(-360deg); }
}

/* Give each bubble a slightly different visual weight. */
.service-orbit-2 .service-bubble,
.service-orbit-6 .service-bubble,
.service-orbit-8 .service-bubble { --bubble-size: 78px; }
.service-orbit-3 .service-bubble { --bubble-size: 82px; }
.service-orbit-4 .service-bubble,
.service-orbit-7 .service-bubble { --bubble-size: 92px; }

@media (max-width: 1080px) {
  .service-sphere-system {
    min-height: 540px;
  }
}

@media (max-width: 600px) {
  .site-header .brand {
    min-width: 110px;
  }
  .site-header .brand img {
    width: 110px;
    height: 44px;
  }
  .service-sphere-system {
    min-height: 450px;
    max-width: 420px;
    transform: none;
    --orbit-size: 330px;
    --bubble-size: 69px;
  }
  .sphere-core {
    width: 154px;
    height: 154px;
  }
  .sphere-core strong { font-size: 28px; }
  .sphere-core small { font-size: 7px; }
  .sphere-ring {
    width: 350px;
    height: 138px;
  }
  .bubble-face b { font-size: 11px; }
  .bubble-face small { max-width: 56px; font-size: 7px; }
  .service-orbit-2 .service-bubble,
  .service-orbit-6 .service-bubble,
  .service-orbit-8 .service-bubble { --bubble-size: 62px; }
  .service-orbit-3 .service-bubble { --bubble-size: 65px; }
  .service-orbit-4 .service-bubble,
  .service-orbit-7 .service-bubble { --bubble-size: 72px; }
}

@media (max-width: 390px) {
  .service-sphere-system {
    min-height: 410px;
    --orbit-size: 280px;
    --bubble-size: 61px;
  }
  .sphere-core { width: 136px; height: 136px; }
  .sphere-core strong { font-size: 25px; }
  .sphere-ring { width: 300px; height: 116px; }
  .service-orbit-2 .service-bubble,
  .service-orbit-6 .service-bubble,
  .service-orbit-8 .service-bubble { --bubble-size: 55px; }
  .service-orbit-3 .service-bubble { --bubble-size: 58px; }
  .service-orbit-4 .service-bubble,
  .service-orbit-7 .service-bubble { --bubble-size: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .sphere-core,
  .sphere-orbit,
  .bubble-counter,
  .space-dot {
    animation: none !important;
  }
  .service-orbit-1 { transform: rotate(0deg); }
  .service-orbit-2 { transform: rotate(40deg); }
  .service-orbit-3 { transform: rotate(80deg); }
  .service-orbit-4 { transform: rotate(120deg); }
  .service-orbit-5 { transform: rotate(160deg); }
  .service-orbit-6 { transform: rotate(200deg); }
  .service-orbit-7 { transform: rotate(240deg); }
  .service-orbit-8 { transform: rotate(280deg); }
  .service-orbit-9 { transform: rotate(320deg); }
}


/* =========================================================
   Page-specific motion system + social footer
   Home: connected business flow
   About: animated company timeline trail
   Services: existing 3D service sphere
   Contact: communication signal animation
   ========================================================= */

/* Header and footer logo remain image-only. */
.site-header .brand,
.footer-brand-link {
  width: auto;
  min-width: 0;
}
.site-header .brand img {
  width: 92px;
  height: 58px;
  object-fit: contain;
}
.footer-brand-link { display: inline-flex; }
.footer-brand-link img { margin: 0; }

/* HOME — people-to-digital data flow over the hero image. */
.home-data-flow {
  position: absolute;
  inset: 7% 4% 7% 4%;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  border-radius: 34px;
}
.home-data-flow::before {
  content: "";
  position: absolute;
  inset: 12% 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(77,226,229,.16), transparent 66%);
  animation: homeFlowGlow 5.5s ease-in-out infinite;
}
.flow-path {
  position: absolute;
  height: 2px;
  transform-origin: left center;
  background: linear-gradient(90deg, transparent, rgba(113,232,235,.82), rgba(139,94,255,.55), transparent);
  filter: drop-shadow(0 0 8px rgba(85,229,232,.65));
  opacity: .8;
}
.flow-path::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 42px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #bdfcff, transparent);
  animation: homePathScan 4.2s linear infinite;
}
.flow-path-a { width: 54%; left: 18%; top: 31%; transform: rotate(14deg); }
.flow-path-b { width: 48%; left: 21%; top: 63%; transform: rotate(-19deg); }
.flow-path-c { width: 42%; left: 31%; top: 48%; transform: rotate(2deg); }
.flow-path-b::after { animation-delay: -1.4s; }
.flow-path-c::after { animation-delay: -2.8s; }
.flow-node {
  position: absolute;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(145deg, rgba(5,54,64,.86), rgba(108,59,231,.72));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 16px 34px rgba(2,16,31,.28), 0 0 24px rgba(65,221,224,.2);
  backdrop-filter: blur(10px);
  animation: homeNodeDrift 5.2s ease-in-out infinite;
}
.flow-node b { font-size: 15px; letter-spacing: .08em; }
.flow-node small { font-size: 8px; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.flow-node-people { left: 8%; top: 17%; }
.flow-node-web { right: 8%; top: 22%; animation-delay: -1.7s; }
.flow-node-chat { right: 17%; bottom: 12%; animation-delay: -3.4s; }
.flow-pulse {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d5ffff;
  box-shadow: 0 0 0 7px rgba(88,230,233,.14), 0 0 22px rgba(119,240,242,.9);
  animation: homePulseTravel 6s ease-in-out infinite;
}
.flow-pulse-a { left: 25%; top: 32%; }
.flow-pulse-b { left: 43%; top: 61%; animation-delay: -2s; }
.flow-pulse-c { left: 56%; top: 47%; animation-delay: -4s; }
@keyframes homePathScan { from { transform: translateX(-50px); } to { transform: translateX(410px); } }
@keyframes homeNodeDrift { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(1.5deg); } }
@keyframes homeFlowGlow { 0%,100% { opacity: .45; transform: scale(.96); } 50% { opacity: .9; transform: scale(1.06); } }
@keyframes homePulseTravel { 0%,100% { opacity: .2; transform: translate(0,0) scale(.75); } 45% { opacity: 1; transform: translate(75px,-20px) scale(1); } 70% { opacity: .75; transform: translate(130px,24px) scale(.8); } }

/* ABOUT — a moving light follows the company journey. */
.about-time-trail {
  position: absolute;
  inset: 38px 28px;
  z-index: 1;
  pointer-events: none;
}
.time-trail-line {
  position: absolute;
  left: 15%;
  right: 15%;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(85,224,227,.78), rgba(135,87,255,.8), transparent);
  box-shadow: 0 0 16px rgba(91,228,231,.34);
  transform: rotate(-18deg);
}
.time-trail-line::before {
  content: "";
  position: absolute;
  inset: -11px 0;
  border-top: 1px dashed rgba(255,255,255,.13);
}
.time-trail-dot {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #8ff4f5;
  box-shadow: 0 0 0 7px rgba(83,225,228,.09), 0 0 22px rgba(101,237,239,.7);
}
.dot-start { left: 16%; top: 64%; }
.dot-middle { left: 49%; top: 49%; }
.dot-end { right: 15%; top: 33%; }
.time-trail-pulse {
  position: absolute;
  left: 16%;
  top: 64%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 18px #7feff1, 0 0 38px rgba(126,82,255,.85);
  animation: aboutJourneyTravel 7s ease-in-out infinite;
}
@keyframes aboutJourneyTravel {
  0%, 10% { left: 16%; top: 64%; transform: scale(.75); opacity: .5; }
  42%, 52% { left: 49%; top: 49%; transform: scale(1.05); opacity: 1; }
  84%, 94% { left: 82%; top: 33%; transform: scale(.85); opacity: .85; }
  100% { left: 16%; top: 64%; transform: scale(.75); opacity: .25; }
}
.journey-graphic .year-float { z-index: 3; }

/* CONTACT — message signal, ripples and a moving envelope. */
.contact-message-motion {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.message-ripple {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 116px;
  height: 116px;
  border: 1px solid rgba(95,232,234,.48);
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(.5);
  opacity: 0;
  animation: contactSignalRipple 4.8s ease-out infinite;
}
.ripple-two { animation-delay: -1.6s; }
.ripple-three { animation-delay: -3.2s; }
.message-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9bf7f7;
  box-shadow: 0 0 15px rgba(104,238,240,.9);
  animation: contactParticleFloat 4.6s ease-in-out infinite;
}
.particle-one { left: 24%; top: 28%; }
.particle-two { right: 20%; top: 34%; animation-delay: -1.5s; }
.particle-three { left: 32%; bottom: 18%; animation-delay: -3s; }
.message-envelope {
  position: absolute;
  left: calc(50% - 15px);
  top: calc(50% - 15px);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  color: #051f27;
  background: linear-gradient(145deg,#c7ffff,#63e0e3);
  box-shadow: 0 10px 28px rgba(74,230,233,.28);
  font-size: 15px;
  animation: contactEnvelopeRoute 7.5s ease-in-out infinite;
}
@keyframes contactSignalRipple { 0% { transform: translate(-50%,-50%) scale(.45); opacity: .7; } 100% { transform: translate(-50%,-50%) scale(2.65); opacity: 0; } }
@keyframes contactParticleFloat { 0%,100% { transform: translateY(0) scale(.7); opacity: .45; } 50% { transform: translateY(-18px) scale(1.2); opacity: 1; } }
@keyframes contactEnvelopeRoute {
  0%,100% { transform: translate(0,0) rotate(-5deg); }
  25% { transform: translate(98px,-86px) rotate(8deg); }
  50% { transform: translate(122px,72px) rotate(-4deg); }
  75% { transform: translate(-98px,74px) rotate(6deg); }
}
.contact-orbit .contact-core,
.contact-orbit .contact-float { z-index: 3; }

/* FOOTER — logo only, social icons, and subtle animated background. */
.site-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.site-footer::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  left: -220px;
  bottom: -350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(58,214,218,.17), transparent 66%);
  animation: footerGlowBreath 8s ease-in-out infinite;
  z-index: -1;
}
.footer-motion {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.footer-motion span {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(126,241,243,.72);
  box-shadow: 0 0 18px rgba(99,231,234,.7);
  animation: footerParticleDrift 12s linear infinite;
}
.footer-motion span:nth-child(1) { left: 12%; bottom: -12px; animation-delay: -1s; }
.footer-motion span:nth-child(2) { left: 38%; bottom: -12px; animation-delay: -5s; width: 4px; height: 4px; }
.footer-motion span:nth-child(3) { left: 67%; bottom: -12px; animation-delay: -8s; }
.footer-motion span:nth-child(4) { left: 88%; bottom: -12px; animation-delay: -3s; width: 5px; height: 5px; }
.footer-grid { grid-template-columns: 1.55fr repeat(4, minmax(0, 1fr)); gap: 34px; }
.footer-socials {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
.footer-socials .social-link {
  width: 42px;
  height: 42px;
  margin: 0;
  display: grid;
  place-items: center;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.06);
  color: #fff;
  transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.footer-socials .social-link svg { width: 20px; height: 20px; fill: currentColor; }
.footer-socials .social-link:hover,
.footer-socials .social-link:focus-visible {
  color: #fff;
  transform: translateY(-5px) rotate(-2deg);
  border-color: rgba(120,237,240,.48);
  background: linear-gradient(145deg, rgba(21,153,163,.78), rgba(105,60,219,.76));
  box-shadow: 0 12px 26px rgba(0,0,0,.24), 0 0 22px rgba(76,219,223,.18);
}
@keyframes footerGlowBreath { 0%,100% { opacity: .5; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes footerParticleDrift { 0% { transform: translateY(0) translateX(0); opacity: 0; } 15% { opacity: .85; } 75% { opacity: .55; } 100% { transform: translateY(-360px) translateX(48px); opacity: 0; } }

@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1.3fr repeat(2, minmax(0,1fr)); }
  .footer-grid > div:last-child { grid-column: auto; }
}
@media (max-width: 760px) {
  .home-data-flow { inset: 7% 2%; }
  .flow-node { width: 58px; height: 58px; border-radius: 17px; }
  .flow-node b { font-size: 12px; }
  .flow-node small { font-size: 7px; }
  .flow-node-people { left: 3%; }
  .flow-node-web { right: 3%; }
  .flow-node-chat { right: 9%; bottom: 7%; }
  .about-time-trail { inset: 48px 8px; }
  .time-trail-line { left: 11%; right: 11%; }
  .contact-envelope-route { animation-duration: 9s; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; }
}
@media (max-width: 500px) {
  .site-header .brand img { width: 76px; height: 48px; }
  .home-data-flow { opacity: .88; }
  .flow-path { opacity: .55; }
  .flow-node-chat { right: 4%; }
  .about-time-trail { opacity: .78; }
  .message-envelope { animation-name: contactEnvelopeRouteMobile; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
}
@keyframes contactEnvelopeRouteMobile {
  0%,100% { transform: translate(0,0) rotate(-4deg); }
  33% { transform: translate(58px,-72px) rotate(7deg); }
  66% { transform: translate(-58px,72px) rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .home-data-flow *,
  .about-time-trail *,
  .contact-message-motion *,
  .footer-motion *,
  .site-footer::before { animation: none !important; }
}

/* =========================================================
   Full-cover hero, upgraded typography and About-page refresh
   ========================================================= */
:root {
  --font-body: "Manrope", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Outfit", "Manrope", ui-sans-serif, system-ui, sans-serif;
  --hero-shadow: 0 2px 0 rgba(2, 23, 31, .82), 0 7px 0 rgba(3, 48, 58, .38), 0 20px 46px rgba(0, 0, 0, .38);
}

body { font-family: var(--font-body); }
h1, h2, h3, h4, .btn, .nav-parent, .main-nav > a { font-family: var(--font-display); }

/* Plain navbar labels: dropdowns still appear on desktop hover, without caret icons. */
.submenu-toggle { display: none !important; }
.nav-group { gap: 0; }
.nav-group > .nav-parent { padding-inline: 0; }
.brand img { width: 70px; height: 54px; }

/* Full-cover homepage hero */
.hero.home-hero-cover {
  min-height: calc(100vh - 120px);
  padding: 80px 0;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(3, 18, 27, .95) 0%, rgba(4, 34, 43, .86) 44%, rgba(10, 18, 45, .58) 74%, rgba(3, 15, 22, .78) 100%),
    url("../images/team-discussion.jpg") center 42% / cover no-repeat;
  isolation: isolate;
}
.hero.home-hero-cover::before {
  z-index: 0;
  opacity: .42;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(90deg, #000, rgba(0,0,0,.28), transparent 92%);
}
.hero.home-hero-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 28%, rgba(80, 230, 233, .16), transparent 23%),
    radial-gradient(circle at 66% 72%, rgba(112, 60, 255, .18), transparent 27%),
    linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.32));
}
.home-hero-cover .hero-grid { z-index: 3; min-height: 620px; }
.home-hero-cover .hero-copy { max-width: 720px; }
.home-hero-cover .eyebrow {
  color: #9af3f2;
  background: rgba(7, 30, 39, .42);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: 9px 14px;
  backdrop-filter: blur(12px);
}
.home-hero-cover .hero-copy > p { color: rgba(255,255,255,.82); text-shadow: 0 2px 16px rgba(0,0,0,.38); }
.home-hero-cover .hero-points { color: rgba(255,255,255,.8); }
.home-hero-cover .hero-points span::before { color: #76f0e8; }
.home-hero-cover .btn-primary { background: linear-gradient(135deg, #10a8b2, #08727f); box-shadow: 0 18px 46px rgba(2, 15, 22, .34); }
.home-hero-cover .btn-secondary { color: #fff; background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.30); backdrop-filter: blur(14px); }
.home-hero-cover .btn-secondary:hover { background: rgba(255,255,255,.17); }
.home-hero-cover .hero-photo,
.home-hero-cover .hero-overlay { display: none; }
.home-hero-cover .hero-visual {
  min-height: 560px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 46% 54% 48% 52% / 42% 43% 57% 58%;
  background: radial-gradient(circle at 48% 44%, rgba(75,227,229,.14), rgba(111,60,255,.08) 42%, rgba(3,21,30,.18) 67%, transparent 69%);
  box-shadow: inset 0 0 90px rgba(75,227,229,.08), 0 30px 90px rgba(0,0,0,.24);
  backdrop-filter: blur(2px);
  animation: heroVisualMorph 12s ease-in-out infinite;
}
@keyframes heroVisualMorph {
  0%,100% { border-radius: 46% 54% 48% 52% / 42% 43% 57% 58%; transform: translateY(0); }
  50% { border-radius: 55% 45% 58% 42% / 48% 58% 42% 52%; transform: translateY(-10px); }
}
.home-hero-cover .floating-card { background: rgba(4,28,37,.74); border-color: rgba(255,255,255,.15); color: #fff; }
.home-hero-cover .floating-card strong { color: #fff; }
.home-hero-cover .floating-card small { color: rgba(255,255,255,.66); }
.home-hero-cover .mini-icon { color: #eaffff; background: linear-gradient(145deg, rgba(75,227,229,.34), rgba(111,60,255,.24)); }

/* Refined 3D/extruded heading treatment */
.hero h1,
.inner-hero-copy h1 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.038em;
  text-shadow: var(--hero-shadow);
  text-wrap: balance;
}
.hero h1 span {
  color: transparent;
  background: linear-gradient(95deg, #77f0eb 0%, #55d7e8 43%, #b29aff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 3px 0 rgba(10,71,82,.72), 0 7px 20px rgba(75,227,229,.24);
}
.content-block h2,
.section-heading h2,
.contact-copy h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.028em; }

/* Full-cover background heroes for internal pages */
.inner-hero {
  min-height: calc(100vh - 120px);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  isolation: isolate;
}
.inner-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(2,17,25,.96) 0%, rgba(4,40,48,.82) 47%, rgba(10,18,43,.61) 78%, rgba(3,14,23,.80) 100%);
}
.about-hero { background-image: url("../images/talent-consultation.jpg"); background-position: center 42%; }
.services-hero { background-image: url("../images/office-meeting.jpg"); background-position: center 45%; }
.contact-hero { background-image: url("../images/team-discussion.jpg"); background-position: center 42%; }
.inner-hero .inner-grid-bg,
.inner-hero .inner-glow { z-index: 1; }
.inner-hero-grid { z-index: 3; min-height: 680px; padding-block: 80px; }
.inner-hero-copy > p { color: rgba(255,255,255,.83); text-shadow: 0 2px 18px rgba(0,0,0,.42); }
.inner-hero .breadcrumb { color: rgba(255,255,255,.66); }
.inner-hero .breadcrumb strong { color: #fff; }

/* About hero: transformation graphic, not a timeline */
.about-transform-graphic { position: relative; min-height: 500px; width: 100%; }
.transform-orbit { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(126,236,237,.34); transform: translate(-50%,-50%); }
.transform-orbit::before { content: ""; position: absolute; width: 13px; height: 13px; border-radius: 50%; background: #73ebea; box-shadow: 0 0 22px #73ebea; }
.orbit-one { width: 285px; height: 285px; animation: aboutOrbitSpin 17s linear infinite; }
.orbit-one::before { left: 18px; top: 58px; }
.orbit-two { width: 430px; height: 430px; border-style: dashed; opacity: .76; animation: aboutOrbitSpinReverse 25s linear infinite; }
.orbit-two::before { right: 29px; bottom: 73px; background: #a98aff; box-shadow: 0 0 22px #8d68ff; }
@keyframes aboutOrbitSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes aboutOrbitSpinReverse { to { transform: translate(-50%,-50%) rotate(-360deg); } }
.transform-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 190px; height: 190px; border-radius: 50%; display: grid; place-content: center; justify-items: center; text-align: center;
  background: radial-gradient(circle at 32% 25%, rgba(255,255,255,.28), transparent 20%), linear-gradient(145deg, rgba(13,167,177,.96), rgba(76,45,190,.96));
  border: 1px solid rgba(255,255,255,.35); box-shadow: inset -20px -24px 50px rgba(4,22,42,.33), inset 18px 14px 35px rgba(255,255,255,.12), 0 28px 80px rgba(0,0,0,.36);
  animation: transformCoreFloat 5.8s ease-in-out infinite;
}
.transform-core img { width: 72px; height: 58px; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0,0,0,.24)); }
.transform-core strong { font-size: 21px; color: #fff; letter-spacing: .08em; }
.transform-core small { max-width: 120px; color: rgba(255,255,255,.70); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
@keyframes transformCoreFloat { 50% { transform: translate(-50%,calc(-50% - 9px)) rotate(2deg); } }
.transform-card {
  position: absolute; width: 210px; padding: 17px 18px; border-radius: 18px;
  background: rgba(4,25,35,.75); border: 1px solid rgba(255,255,255,.16); color: #fff;
  box-shadow: 0 20px 56px rgba(0,0,0,.30); backdrop-filter: blur(15px); animation: transformCardFloat 6s ease-in-out infinite;
}
.transform-card span,.transform-card b,.transform-card small { display: block; }
.transform-card span { color: #77ecea; font-size: 9px; text-transform: uppercase; letter-spacing: .11em; }
.transform-card b { margin: 6px 0; font-family: var(--font-display); font-size: 14px; line-height: 1.25; }
.transform-card small { color: rgba(255,255,255,.58); font-size: 10px; }
.transform-start { left: 0; top: 54px; }
.transform-became { right: 0; top: 195px; animation-delay: -2s; }
.transform-now { left: 44px; bottom: 22px; background: linear-gradient(135deg, rgba(16,135,148,.82), rgba(84,48,184,.80)); animation-delay: -4s; }
@keyframes transformCardFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* Simple company evolution sequence: no timeline line or timeline dots */
.evolution-section { background: radial-gradient(circle at 84% 12%, rgba(111,60,255,.22), transparent 30%), linear-gradient(145deg,#061b25,#073842); }
.evolution-path-cards { display: grid; grid-template-columns: 1fr 110px 1fr 110px 1fr; align-items: stretch; gap: 12px; margin-top: 54px; }
.evolution-path-card { min-height: 290px; padding: 30px; border-radius: 26px; color: #fff; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 24px 64px rgba(0,0,0,.18); position: relative; overflow: hidden; }
.evolution-path-card::before { content: ""; position: absolute; width: 170px; height: 170px; border-radius: 50%; right: -70px; bottom: -75px; background: rgba(255,255,255,.08); }
.evolution-path-card:hover,.evolution-path-card:focus-visible,.evolution-path-card.touch-active { transform: translateY(-8px); border-color: rgba(118,238,237,.44); box-shadow: 0 30px 78px rgba(0,0,0,.28); }
.start-card { background: linear-gradient(145deg, rgba(8,104,115,.82), rgba(6,44,55,.88)); }
.became-card { background: linear-gradient(145deg, rgba(78,48,174,.85), rgba(19,54,83,.90)); }
.future-card { background: linear-gradient(145deg, rgba(9,149,153,.86), rgba(81,43,176,.86)); }
.evolution-label { display: inline-flex; padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.10); color: #b2fbf7; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.evolution-path-card h3 { margin: 54px 0 14px; font-size: 25px; line-height: 1.15; }
.evolution-path-card p { margin: 0; color: rgba(255,255,255,.70); font-size: 13px; }
.evolution-arrow { display: grid; place-content: center; justify-items: center; color: rgba(255,255,255,.66); text-transform: uppercase; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.evolution-arrow i { width: 48px; height: 48px; margin-top: 10px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 22px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.15); color: #78eae9; box-shadow: 0 0 28px rgba(75,227,229,.12); }

/* Compact evolution wording on homepage About section */
.evolution-summary { display: grid; grid-template-columns: 1fr auto 1.2fr auto 1fr; gap: 12px; align-items: center; margin: 28px 0 24px; }
.evolution-summary > div { min-height: 90px; padding: 14px 15px; border-radius: 16px; background: linear-gradient(145deg,#f2fbfb,#fff); border: 1px solid #d7e9ea; }
.evolution-summary small,.evolution-summary strong { display: block; }
.evolution-summary small { color: var(--teal-700); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.evolution-summary strong { margin-top: 6px; color: var(--teal-950); font-family: var(--font-display); font-size: 12px; line-height: 1.3; }
.evolution-summary > span { color: var(--violet); font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; text-align: center; }

/* Higher colour contrast in Our Values */
.values-section { background: linear-gradient(180deg, #ffffff, #f4f9fa); }
.value-card { border-width: 1px; box-shadow: 0 14px 40px rgba(4,42,49,.06); }
.value-card:nth-child(1) { background: linear-gradient(145deg,#e8fbfa,#ffffff); border-color:#9ddedc; }
.value-card:nth-child(2) { background: linear-gradient(145deg,#fff4dd,#ffffff); border-color:#f1c879; }
.value-card:nth-child(3) { background: linear-gradient(145deg,#edf0ff,#ffffff); border-color:#b9c1f8; }
.value-card:nth-child(4) { background: linear-gradient(145deg,#f3ebff,#ffffff); border-color:#cfb2f7; }
.value-card:nth-child(5) { background: linear-gradient(145deg,#eaf8ee,#ffffff); border-color:#a9ddb8; }
.value-card:nth-child(6) { background: linear-gradient(145deg,#ffeceb,#ffffff); border-color:#f1b8b1; }
.value-card:nth-child(1) > span { color:#057d80; }
.value-card:nth-child(2) > span { color:#b26900; }
.value-card:nth-child(3) > span { color:#4c5bb7; }
.value-card:nth-child(4) > span { color:#7041af; }
.value-card:nth-child(5) > span { color:#287c41; }
.value-card:nth-child(6) > span { color:#b14d43; }
.value-card::after { opacity: .6; }

/* Long address support */
.footer-grid p,
.contact-method strong,
.location-facts strong { overflow-wrap: anywhere; }

@media (max-width: 1080px) {
  .home-hero-cover .hero-grid { grid-template-columns: 1fr 1fr; gap: 38px; }
  .evolution-path-cards { grid-template-columns: 1fr 72px 1fr 72px 1fr; }
  .transform-card { width: 190px; }
}

@media (max-width: 880px) {
  /* Mobile navbar remains deliberately simple: direct page links, no dropdown arrows. */
  .nav-group { display: block; }
  .nav-dropdown,
  .mega-dropdown { display: none !important; }
  .main-nav .nav-parent { width: 100%; }

  .hero.home-hero-cover,
  .inner-hero { min-height: auto; }
  .home-hero-cover .hero-grid { grid-template-columns: 1fr; min-height: 0; padding-block: 46px; }
  .home-hero-cover .hero-copy { max-width: 760px; }
  .home-hero-cover .hero-visual { min-height: 470px; max-width: 680px; width: 100%; margin-inline: auto; }
  .inner-hero-grid { min-height: 0; padding-block: 82px; }
  .evolution-path-cards { grid-template-columns: 1fr; gap: 18px; }
  .evolution-arrow { grid-template-columns: auto auto; gap: 10px; place-content: center; }
  .evolution-arrow i { transform: rotate(90deg); margin: 0; }
  .evolution-summary { grid-template-columns: 1fr; }
  .evolution-summary > span { padding: 2px 0; }
}

@media (max-width: 600px) {
  .hero.home-hero-cover { padding: 54px 0 66px; background-position: 58% center; }
  .home-hero-cover .hero-grid { padding-block: 12px; }
  .hero h1,
  .inner-hero-copy h1 { font-size: clamp(39px, 12vw, 54px); text-shadow: 0 2px 0 rgba(2,23,31,.76), 0 5px 22px rgba(0,0,0,.42); }
  .home-hero-cover .hero-visual { min-height: 410px; border-radius: 34px; }
  .home-hero-cover .float-one { left: 8px; bottom: 34px; }
  .home-hero-cover .float-two { right: 7px; top: 44px; }
  .inner-hero { background-position: 58% center; }
  .about-transform-graphic { min-height: 460px; transform: scale(.90); transform-origin: center; }
  .orbit-two { width: 370px; height: 370px; }
  .transform-core { width: 160px; height: 160px; }
  .transform-card { width: 174px; padding: 14px; }
  .transform-start { left: -8px; top: 38px; }
  .transform-became { right: -10px; top: 205px; }
  .transform-now { left: 16px; bottom: 4px; }
  .evolution-path-card { min-height: 245px; padding: 24px; }
  .evolution-path-card h3 { margin-top: 38px; font-size: 22px; }
  .value-card { min-height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual,
  .transform-orbit,
  .transform-core,
  .transform-card { animation: none !important; }
}


/* PHP forms, privacy and status pages */
.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}
.field-hint{display:block;color:#6c7e80;font-size:10px;font-weight:600;margin-top:2px}
.form-submit:disabled{opacity:.72;cursor:wait;transform:none!important}
.contact-forms-shell{min-width:0}
.form-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;padding:7px;border:1px solid rgba(7,63,70,.10);border-radius:18px;background:rgba(255,255,255,.78);box-shadow:0 12px 34px rgba(7,63,70,.08)}
.form-tab{border:0;border-radius:12px;padding:12px 10px;background:transparent;color:#476164;font:800 11px/1.25 Manrope,sans-serif;cursor:pointer;transition:.22s ease}
.form-tab:hover,.form-tab:focus-visible{background:#eef8f8;color:var(--teal-800)}
.form-tab.active{background:linear-gradient(135deg,var(--teal-700),var(--teal-500));color:#fff;box-shadow:0 9px 22px rgba(19,163,173,.22)}
.form-panel[hidden]{display:none!important}
.form-panel.active{animation:formPanelIn .35s ease both}
@keyframes formPanelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.consent-row a{color:var(--teal-700);text-decoration:underline;text-underline-offset:2px}

.policy-hero{position:relative;overflow:hidden;min-height:440px;display:flex;align-items:center;padding:110px 0 80px;color:#fff;background:linear-gradient(135deg,#032d33 0%,#075b64 52%,#151a48 100%)}
.policy-hero .container{position:relative;z-index:2;max-width:980px;text-align:center}
.policy-hero h1{font-family:Outfit,sans-serif;font-size:clamp(46px,8vw,92px);line-height:.98;margin:14px 0 20px;text-shadow:0 5px 0 rgba(0,0,0,.16),0 18px 40px rgba(0,0,0,.25)}
.policy-hero p{max-width:820px;margin:0 auto;color:#d8f2f3;font-size:clamp(15px,2vw,19px)}
.date-pill{display:inline-flex;margin-top:24px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px);font-weight:800;font-size:12px}
.policy-orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.48;animation:policyFloat 8s ease-in-out infinite}
.policy-orb-one{width:290px;height:290px;right:8%;top:12%;background:radial-gradient(circle at 30% 28%,#fff 0 2%,#58e6e2 12%,#0b6b75 48%,transparent 70%)}
.policy-orb-two{width:170px;height:170px;left:7%;bottom:5%;background:radial-gradient(circle at 35% 30%,#fff 0 2%,#b88cff 14%,#502095 52%,transparent 72%);animation-delay:-3s}
@keyframes policyFloat{50%{transform:translateY(-18px) rotate(10deg)}}
.policy-main{background:linear-gradient(180deg,#f5fbfb,#eef6f7)}
.policy-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:30px;align-items:start}
.policy-sidebar{position:sticky;top:110px;padding:24px;border-radius:22px;background:#fff;border:1px solid #dfeaec;box-shadow:var(--shadow-md)}
.policy-sidebar h3{font:800 20px/1.2 Outfit,sans-serif;color:var(--teal-900);margin-bottom:12px}
.policy-sidebar a{display:block;padding:10px 4px;border-bottom:1px solid #edf2f3;color:#506568;font-size:12px;font-weight:800;transition:.2s}
.policy-sidebar a:hover{color:var(--teal-600);padding-left:9px}
.policy-content{padding:clamp(24px,4vw,48px);border-radius:26px;background:#fff;border:1px solid #dfeaec;box-shadow:var(--shadow-md)}
.policy-content .section{padding:0 0 30px;margin:0 0 30px;border-bottom:1px solid #e7eff0;scroll-margin-top:110px}
.policy-content .section:last-child{border:0;padding:0;margin:0}
.policy-content h2{font:800 clamp(24px,3vw,34px)/1.2 Outfit,sans-serif;color:var(--teal-800);margin-bottom:14px}
.policy-content h3{font:800 19px/1.3 Outfit,sans-serif;color:var(--ink);margin:22px 0 10px}
.policy-content p,.policy-content li{color:#42585b;font-size:14px;line-height:1.8}
.policy-content p{margin-bottom:12px}
.policy-content ul{padding-left:20px;margin:10px 0 18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 24px}
.policy-content .single-list{grid-template-columns:1fr}
.policy-content a{color:var(--teal-700);font-weight:800}
.policy-content .contact-box{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px;padding:22px;border-radius:18px;background:linear-gradient(135deg,#eaf8f8,#f8ffff);border-left:5px solid var(--teal-500)}
.policy-content .contact-item strong{display:block;color:var(--teal-900);margin-bottom:3px}

.status-main{min-height:70vh;background:#eef7f7}
.status-section{position:relative;overflow:hidden;min-height:72vh;display:grid;place-items:center;padding:90px 20px;background:radial-gradient(circle at 20% 20%,rgba(45,213,204,.18),transparent 28%),linear-gradient(135deg,#032f35,#075d66 58%,#151b47);color:#fff}
.status-card{position:relative;z-index:2;width:min(680px,100%);padding:clamp(30px,6vw,58px);text-align:center;border-radius:30px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);box-shadow:0 30px 80px rgba(0,0,0,.26);backdrop-filter:blur(18px)}
.status-icon{width:82px;height:82px;margin:0 auto 20px;display:grid;place-items:center;border-radius:50%;font:800 42px/1 Outfit,sans-serif;background:linear-gradient(145deg,#62eee7,#19a7b1);box-shadow:0 14px 35px rgba(31,218,208,.32),inset 0 2px 4px rgba(255,255,255,.5)}
.status-error .status-icon{background:linear-gradient(145deg,#ffbc7d,#ef6f52);box-shadow:0 14px 35px rgba(239,111,82,.34),inset 0 2px 4px rgba(255,255,255,.5)}
.status-card h1{font:800 clamp(42px,7vw,72px)/1 Outfit,sans-serif;margin:12px 0 18px;text-shadow:0 5px 0 rgba(0,0,0,.16)}
.status-card>p{max-width:540px;margin:0 auto 26px;color:#daf4f5;line-height:1.75}
.status-card small{display:block;margin-top:22px;color:#c9e7e9}.status-card small a{color:#fff;font-weight:800}
.status-particles span{position:absolute;border-radius:50%;background:rgba(255,255,255,.18);animation:statusDrift 7s ease-in-out infinite}
.status-particles span:nth-child(1){width:90px;height:90px;left:8%;top:18%}.status-particles span:nth-child(2){width:34px;height:34px;right:16%;top:24%;animation-delay:-2s}.status-particles span:nth-child(3){width:130px;height:130px;right:6%;bottom:10%;animation-delay:-4s}.status-particles span:nth-child(4){width:48px;height:48px;left:18%;bottom:14%;animation-delay:-1s}
@keyframes statusDrift{50%{transform:translateY(-22px) translateX(10px)}}
.footer-bottom a{color:#d7f4f4;font-weight:800}

@media(max-width:900px){.policy-layout{grid-template-columns:1fr}.policy-sidebar{position:static}.policy-sidebar a{display:inline-block;margin-right:12px;border:0}.policy-content ul{grid-template-columns:1fr}.form-tabs{grid-template-columns:1fr}.contact-forms-shell{width:100%}}
@media(max-width:600px){.policy-hero{min-height:360px;padding:80px 0 60px}.policy-content .contact-box{grid-template-columns:1fr}.policy-sidebar a{display:block;margin:0}.status-section{padding:70px 14px}.status-card{border-radius:22px}.status-card .hero-actions{display:grid}.status-card .btn{width:100%}}
@media(prefers-reduced-motion:reduce){.policy-orb,.status-particles span,.form-panel.active{animation:none!important}}

/* =========================================================
   Final visual scope correction
   Only the Home hero uses a full teal cover treatment.
   Internal pages keep their original page-specific hero design.
   ========================================================= */

/* Flat, modern typography — no 3D/extruded text treatment. */
.hero h1,
.inner-hero-copy h1,
.hero h1 span {
  text-shadow: none !important;
}
.hero h1 span {
  color: #9cf6f0 !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Home only: full-cover teal hero with a unique animated SVG visual. */
.hero.home-hero-cover {
  min-height: calc(100vh - 120px);
  padding: 82px 0;
  color: #fff;
  background:
    radial-gradient(circle at 82% 20%, rgba(120, 239, 235, .17), transparent 27%),
    radial-gradient(circle at 66% 82%, rgba(121, 92, 255, .16), transparent 30%),
    linear-gradient(135deg, #052b33 0%, #075b61 44%, #073f52 72%, #071f31 100%) !important;
  isolation: isolate;
}
.hero.home-hero-cover::before {
  z-index: 0;
  opacity: .42;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) !important;
  background-size: 58px 58px !important;
  mask-image: linear-gradient(90deg, #000, rgba(0,0,0,.45), transparent 94%);
}
.hero.home-hero-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 22, 29, .30), transparent 58%),
    radial-gradient(circle at 50% 50%, transparent 34%, rgba(0, 17, 25, .22) 100%) !important;
}
.home-hero-cover .hero-grid {
  grid-template-columns: minmax(0, 1.03fr) minmax(480px, .97fr);
  min-height: 620px;
  gap: 54px;
}
.home-hero-cover .hero-copy { max-width: 720px; }
.home-hero-cover .hero-copy > p {
  color: rgba(239, 255, 255, .82);
  text-shadow: none !important;
}
.home-hero-cover .eyebrow {
  color: #b8fffb;
  background: rgba(3, 36, 43, .38);
  border-color: rgba(184, 255, 251, .18);
}
.home-hero-cover .hero-points { color: rgba(239,255,255,.82); }
.home-hero-cover .hero-visual,
.home-hero-cover .home-svg-stage {
  min-height: 570px;
  display: grid;
  place-items: center;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  animation: none !important;
  overflow: visible;
}
.home-svg-shell {
  width: min(100%, 700px);
  position: relative;
  filter: drop-shadow(0 34px 56px rgba(0, 19, 26, .25));
}
.home-solution-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.home-solution-svg .svg-grid path {
  fill: none;
  stroke: #d8ffff;
  stroke-width: 1;
}
.home-solution-svg .svg-ambient {
  transform-origin: 360px 310px;
  animation: homeSvgOrbit 24s linear infinite;
}
.home-solution-svg .svg-core-halo {
  transform-origin: 360px 310px;
  animation: homeSvgPulse 4.8s ease-in-out infinite;
}
.home-solution-svg .svg-connectors use {
  animation: homeSvgDash 9s linear infinite;
}
.home-solution-svg .svg-connectors use:nth-child(2),
.home-solution-svg .svg-connectors use:nth-child(4) {
  animation-direction: reverse;
}
.home-solution-svg .svg-hub {
  transform-origin: 360px 310px;
  animation: homeSvgHubFloat 5.6s ease-in-out infinite;
}
.home-solution-svg .svg-service-node {
  transform-box: fill-box;
  transform-origin: center;
}
.home-solution-svg .svg-sparkles circle {
  animation: homeSvgSparkle 3.2s ease-in-out infinite;
}
.home-solution-svg .svg-sparkles circle:nth-child(2) { animation-delay: -.8s; }
.home-solution-svg .svg-sparkles circle:nth-child(3) { animation-delay: -1.6s; }
.home-solution-svg .svg-sparkles circle:nth-child(4) { animation-delay: -2.4s; }
.home-solution-svg .svg-sparkles circle:nth-child(5) { animation-delay: -1.1s; }
@keyframes homeSvgOrbit { to { transform: rotate(360deg); } }
@keyframes homeSvgDash { to { stroke-dashoffset: -150; } }
@keyframes homeSvgPulse {
  0%, 100% { transform: scale(1); opacity: .72; }
  50% { transform: scale(1.055); opacity: 1; }
}
@keyframes homeSvgHubFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@keyframes homeSvgSparkle {
  0%, 100% { opacity: .28; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.35); }
}

/* Internal pages: restore the original page-specific hero scale and backgrounds. */
.inner-hero {
  min-height: 560px !important;
  background-image: none !important;
  background-position: initial !important;
  background-size: initial !important;
}
.inner-hero::after { display: none !important; }
.about-hero {
  background:
    radial-gradient(circle at 88% 12%, rgba(111, 60, 255, .28), transparent 32%),
    linear-gradient(145deg, #071721, #0a343b 62%, #10142c) !important;
}
.services-hero {
  background:
    radial-gradient(circle at 17% 18%, rgba(19,163,173,.24), transparent 30%),
    radial-gradient(circle at 84% 24%, rgba(111,60,255,.28), transparent 32%),
    linear-gradient(145deg,#051d28,#073b45 58%,#111431) !important;
}
.contact-hero {
  background:
    radial-gradient(circle at 88% 10%, rgba(75,227,229,.24), transparent 31%),
    linear-gradient(145deg, #071721, #0a343b 62%, #10142c) !important;
}
.inner-hero-grid {
  min-height: 0 !important;
  padding-block: 110px 90px !important;
}
.inner-hero-copy > p {
  color: rgba(255,255,255,.72) !important;
  text-shadow: none !important;
}

@media (max-width: 1080px) {
  .home-hero-cover .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(420px, .9fr);
    gap: 34px;
  }
}

@media (max-width: 880px) {
  .hero.home-hero-cover { min-height: auto; }
  .home-hero-cover .hero-grid {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-block: 44px;
  }
  .home-hero-cover .home-svg-stage { min-height: 500px; }
  .home-svg-shell { max-width: 660px; }
  .inner-hero-grid { padding-block: 82px !important; }
}

@media (max-width: 600px) {
  .hero.home-hero-cover { padding: 54px 0 64px; }
  .hero h1,
  .inner-hero-copy h1 {
    text-shadow: none !important;
  }
  .home-hero-cover .home-svg-stage { min-height: 365px; }
  .home-svg-shell { width: 115%; margin-inline: -7.5%; }
}

@media (prefers-reduced-motion: reduce) {
  .home-solution-svg *,
  .home-solution-svg animateMotion,
  .home-solution-svg animateTransform {
    animation: none !important;
  }
}


/* =========================================================
   Corrected visual update
   - Teal full-cover background only on Home
   - Clean flat SVG network, no 3D text
   - About evolution shown without dates or timeline
   ========================================================= */

.hero.home-hero-refined {
  min-height: 690px;
  padding: 76px 0 84px;
  color: #fff;
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 80% 15%, rgba(91, 220, 218, .17), transparent 27%),
    radial-gradient(circle at 72% 86%, rgba(112, 91, 238, .13), transparent 31%),
    linear-gradient(135deg, #04323a 0%, #07575d 48%, #07394d 76%, #071f31 100%);
}
.home-hero-refined::before,
.home-hero-refined::after { display: none !important; }
.home-hero-pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .34;
  background-image:
    linear-gradient(rgba(255,255,255,.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.038) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.72) 58%, transparent 100%);
}
.home-hero-refined .hero-grid {
  grid-template-columns: minmax(0, 1.04fr) minmax(470px, .96fr);
  gap: 48px;
  min-height: 530px;
}
.home-hero-refined .hero-copy { max-width: 680px; }
.home-hero-refined .eyebrow {
  color: #bafff9;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid rgba(186,255,249,.16);
  background: rgba(2,35,42,.28);
}
.home-hero-refined h1 {
  max-width: 700px;
  margin: 22px 0 24px;
  font-family: Outfit, Manrope, sans-serif;
  font-size: clamp(44px, 4.4vw, 72px);
  line-height: 1.02;
  letter-spacing: -.045em;
  text-shadow: none !important;
}
.home-hero-refined h1 span {
  color: #9cf5ef !important;
  text-shadow: none !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
.home-hero-refined .hero-copy > p {
  max-width: 625px;
  color: rgba(237,255,255,.79);
  font-size: 17px;
  line-height: 1.75;
  text-shadow: none !important;
}
.home-hero-refined .btn-primary {
  background: #fff;
  color: #06444c;
  box-shadow: 0 16px 36px rgba(0,20,28,.22);
}
.home-hero-refined .btn-primary:hover { background: #eafffd; color: #043a42; }
.home-hero-refined .btn-secondary {
  color: #fff;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.28);
  backdrop-filter: blur(10px);
}
.home-hero-refined .btn-secondary:hover { background: rgba(255,255,255,.14); }
.hero-service-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 27px; }
.hero-service-tags span {
  padding: 8px 12px;
  border: 1px solid rgba(188,255,250,.15);
  border-radius: 999px;
  color: rgba(235,255,255,.78);
  background: rgba(4,35,44,.27);
  font-size: 11px;
  font-weight: 750;
}
.home-network-stage {
  min-height: 540px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: visible;
}
.home-network-svg {
  display: block;
  width: min(100%, 660px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 30px 44px rgba(0,18,25,.22));
}
.home-network-svg .network-grid path { fill: none; stroke: #d9ffff; stroke-width: 1; }
.home-network-svg .network-rings { transform-origin: 340px 282px; animation: refinedRing 28s linear infinite; }
.home-network-svg .network-lines use { animation: refinedDash 8s linear infinite; }
.home-network-svg .network-lines use:nth-child(even) { animation-direction: reverse; }
.home-network-svg .network-core { transform-origin: 340px 282px; animation: refinedCore 5.4s ease-in-out infinite; }
.home-network-svg .network-card { transform-box: fill-box; transform-origin: center; }
.home-network-svg .card-workforce { animation: refinedFloatA 5.6s ease-in-out infinite; }
.home-network-svg .card-web { animation: refinedFloatB 6.1s ease-in-out infinite; }
.home-network-svg .card-chat { animation: refinedFloatA 6.4s ease-in-out infinite reverse; }
.home-network-svg .card-auto { animation: refinedFloatB 5.9s ease-in-out infinite reverse; }
.home-network-svg .network-sparks circle { animation: refinedSpark 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.home-network-svg .network-sparks circle:nth-child(2) { animation-delay: -.7s; }
.home-network-svg .network-sparks circle:nth-child(3) { animation-delay: -1.4s; }
.home-network-svg .network-sparks circle:nth-child(4) { animation-delay: -2.1s; }
.home-network-svg .network-sparks circle:nth-child(5) { animation-delay: -1.1s; }
@keyframes refinedRing { to { transform: rotate(360deg); } }
@keyframes refinedDash { to { stroke-dashoffset: -130; } }
@keyframes refinedCore { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes refinedFloatA { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes refinedFloatB { 0%,100%{transform:translateY(0)} 50%{transform:translateY(7px)} }
@keyframes refinedSpark { 0%,100%{opacity:.35;transform:scale(.8)} 50%{opacity:1;transform:scale(1.35)} }

.company-evolution-line {
  margin: 27px 0 22px;
  display: grid;
  grid-template-columns: 1fr auto 1.35fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.company-evolution-line > span {
  min-height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(5,47,52,.055);
}
.company-evolution-line small { color: var(--teal-700); font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .1em; }
.company-evolution-line strong { margin-top: 5px; color: var(--teal-950); font-size: 12px; line-height: 1.35; }
.company-evolution-line i { color: var(--teal-600, #0a8d96); font-style: normal; font-size: 20px; }

.about-capability-visual {
  min-height: 420px;
  position: relative;
  max-width: 620px;
  margin-inline: auto;
}
.about-capability-lines { position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.about-capability-lines path { fill:none; stroke:#83ebe6; stroke-opacity:.34; stroke-width:2; stroke-dasharray:7 11; animation:refinedDash 9s linear infinite; }
.about-capability-core {
  position:absolute; left:50%; top:50%; z-index:2;
  width:178px; min-height:142px;
  transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-radius:34px;
  color:#fff;
  background:linear-gradient(145deg,rgba(15,131,140,.95),rgba(58,51,141,.88));
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 24px 54px rgba(0,15,25,.32);
  animation:refinedCore 5.5s ease-in-out infinite;
}
.about-capability-core img { width:68px; height:54px; object-fit:contain; margin-bottom:8px; }
.about-capability-core strong { font-size:13px; }
.about-capability-node {
  position:absolute; z-index:2; width:190px; padding:17px 18px;
  border-radius:20px; color:#fff;
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(12px);
  box-shadow:0 16px 38px rgba(0,13,22,.2);
}
.about-capability-node span { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:10px; background:rgba(121,239,233,.14); color:#95f2ed; font-size:9px; font-weight:900; }
.about-capability-node b,.about-capability-node small { display:block; }
.about-capability-node b { margin-top:9px; font-size:16px; }
.about-capability-node small { margin-top:3px; color:rgba(255,255,255,.58); font-size:9px; }
.about-node-workforce { left:2%; top:8%; animation:refinedFloatA 5.7s ease-in-out infinite; }
.about-node-digital { right:0; top:8%; animation:refinedFloatB 6.1s ease-in-out infinite; }
.about-node-automation { left:50%; bottom:0; transform:translateX(-50%); animation:aboutBottomFloat 6.3s ease-in-out infinite; }
@keyframes aboutBottomFloat { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,-7px)} }

.evolution-copy-section { background:linear-gradient(145deg,#f3fbfb,#fff); border-block:1px solid rgba(7,63,70,.07); }
.evolution-copy-grid { display:grid; grid-template-columns:.82fr 1.18fr; gap:72px; align-items:start; }
.evolution-copy-panel { display:grid; gap:14px; }
.evolution-copy-panel > div {
  padding:24px 26px;
  border-radius:20px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 12px 32px rgba(4,43,50,.055);
  position:relative;
  overflow:hidden;
}
.evolution-copy-panel > div::before { content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(#13a3ad,#7157dc); }
.evolution-copy-panel small { color:var(--teal-700); font-size:10px; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }
.evolution-copy-panel h3 { margin:7px 0 7px; color:var(--teal-950); font-size:22px; }
.evolution-copy-panel p { margin:0; color:var(--muted); font-size:14px; }

@media (max-width: 980px) {
  .home-hero-refined .hero-grid { grid-template-columns:1fr; gap:20px; }
  .home-hero-refined .hero-copy { max-width:780px; }
  .home-network-stage { min-height:500px; }
  .home-network-svg { max-width:650px; }
  .evolution-copy-grid { grid-template-columns:1fr; gap:35px; }
}
@media (max-width: 720px) {
  .hero.home-hero-refined { min-height:auto; padding:58px 0 68px; }
  .home-hero-refined h1 { font-size:clamp(40px,11vw,58px); }
  .home-network-stage { min-height:390px; margin-top:8px; }
  .home-network-svg { width:112%; margin-inline:-6%; }
  .company-evolution-line { grid-template-columns:1fr; }
  .company-evolution-line i { transform:rotate(90deg); justify-self:center; }
  .about-capability-visual { min-height:520px; }
  .about-capability-core { top:47%; }
  .about-node-workforce { left:0; top:2%; }
  .about-node-digital { right:0; top:2%; }
  .about-node-automation { bottom:2%; }
}
@media (max-width: 520px) {
  .home-hero-refined .hero-actions { display:grid; }
  .home-hero-refined .btn { width:100%; }
  .home-network-stage { min-height:330px; }
  .hero-service-tags span { width:100%; text-align:center; }
  .about-capability-node { width:165px; padding:14px; }
  .about-capability-core { width:150px; min-height:126px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-network-svg *, .about-capability-visual * { animation:none !important; }
}

/* Internal page heroes stay compact; only Home uses a full-cover hero. */
body:not([data-page="home"]) .inner-hero {
  min-height: 430px !important;
}
body:not([data-page="home"]) .inner-hero-grid,
body:not([data-page="home"]) .services-hero .inner-hero-grid {
  min-height: 0 !important;
  padding-block: 66px !important;
}
body:not([data-page="home"]) .inner-hero-copy h1 {
  font-size: clamp(40px, 4.6vw, 62px) !important;
  max-width: 680px;
}
body:not([data-page="home"]) .about-capability-visual,
body:not([data-page="home"]) .contact-orbit,
body:not([data-page="home"]) .services-orbit-stage {
  transform: scale(.88);
}
@media (max-width: 880px) {
  body:not([data-page="home"]) .inner-hero-grid,
  body:not([data-page="home"]) .services-hero .inner-hero-grid {
    padding-block: 58px !important;
  }
  body:not([data-page="home"]) .about-capability-visual,
  body:not([data-page="home"]) .contact-orbit,
  body:not([data-page="home"]) .services-orbit-stage {
    transform: none;
  }
}


/* =========================================================
   Service orbit alignment safeguard
   Scoped class names prevent About-page orbit rules from
   changing the position or size of the service bubbles.
   ========================================================= */
.service-sphere-system .sphere-core {
  left: 50%;
  top: 50%;
}
.service-sphere-system .sphere-orbit {
  left: 50%;
  top: 50%;
  width: var(--orbit-size);
  height: var(--orbit-size);
  margin: calc(var(--orbit-size) / -2) 0 0 calc(var(--orbit-size) / -2);
  border: 0;
  opacity: 1;
  transform-origin: 50% 50%;
  animation-name: serviceBubbleOrbit;
  animation-duration: var(--duration);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: var(--delay);
}
.service-sphere-system .sphere-orbit::before,
.service-sphere-system .sphere-orbit::after {
  content: none;
}


/* =========================================================
   Client carousel + industries served update
   ========================================================= */
.pill.pill-upcoming-lower {
  padding: 5px 10px;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: none;
  color: #ffb14a;
  background: rgba(245, 154, 34, .12);
  border-color: rgba(245, 154, 34, .38);
  box-shadow: inset 0 0 0 1px rgba(245, 154, 34, .04);
}

.client-showcase-full {
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 20%, rgba(19, 163, 173, .10), transparent 28%),
    radial-gradient(circle at 88% 80%, rgba(245, 154, 34, .08), transparent 24%),
    #f7fbfb;
  border-top: 1px solid rgba(7, 63, 70, .07);
  border-bottom: 1px solid rgba(7, 63, 70, .07);
}
.client-showcase-full .section-heading { margin-bottom: 36px; }
.client-carousel-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  position: relative;
  padding: 8px 0 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.client-carousel-bleed::before,
.client-carousel-bleed::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  width: clamp(28px, 5vw, 90px);
  pointer-events: none;
}
.client-carousel-bleed::before { left: 0; background: linear-gradient(90deg, #f7fbfb, transparent); }
.client-carousel-bleed::after { right: 0; background: linear-gradient(270deg, #f7fbfb, transparent); }
.client-logo-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: srsbClientMarquee 48s linear infinite;
}
.client-logo-group {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-right: 22px;
}
.client-logo-slide {
  flex: 0 0 clamp(190px, 14vw, 240px);
  height: 112px;
  display: grid;
  place-items: center;
  padding: 20px 26px;
  border-radius: 22px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(7,63,70,.09);
  box-shadow: 0 14px 34px rgba(4,45,51,.08);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.client-logo-slide:hover,
.client-logo-slide:focus-within {
  transform: translateY(-6px);
  border-color: rgba(19,163,173,.32);
  box-shadow: 0 22px 46px rgba(4,45,51,.13);
}
.client-logo-slide img {
  width: 100%;
  height: 72px;
  object-fit: contain;
  filter: saturate(.94) contrast(1.03);
}
.client-carousel-bleed:hover .client-logo-track,
.client-carousel-bleed:focus-within .client-logo-track { animation-play-state: paused; }
@keyframes srsbClientMarquee { to { transform: translateX(-50%); } }

.industries-served-section {
  background:
    linear-gradient(rgba(7,63,70,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,63,70,.035) 1px, transparent 1px),
    #ffffff;
  background-size: 42px 42px;
  overflow: hidden;
}
.industry-domain-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 20px;
  margin-top: 44px;
}
.industry-domain-card {
  min-height: 230px;
  padding: 28px;
  border-radius: 24px;
  background: linear-gradient(145deg, #ffffff, #f5fbfb);
  border: 1px solid rgba(7,63,70,.10);
  box-shadow: 0 16px 42px rgba(4,44,50,.07);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  position: relative;
  overflow: hidden;
}
.industry-domain-card::after {
  content: "";
  position: absolute;
  right: -32px;
  bottom: -45px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(19,163,173,.12), rgba(245,154,34,.10));
  transition: transform .35s ease;
}
.industry-domain-card:hover,
.industry-domain-card:focus-visible,
.industry-domain-card.touch-active {
  transform: translateY(-7px);
  border-color: rgba(19,163,173,.30);
  box-shadow: 0 25px 58px rgba(4,44,50,.13);
}
.industry-domain-card:hover::after,
.industry-domain-card:focus-visible::after { transform: scale(1.18); }
.industry-domain-code {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #ffffff;
  background: linear-gradient(145deg, var(--teal-700), var(--teal-950));
  box-shadow: 0 12px 24px rgba(7,63,70,.16);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .07em;
}
.industry-domain-card:nth-child(3n+2) .industry-domain-code { background: linear-gradient(145deg, #5a47bd, #273679); }
.industry-domain-card:nth-child(3n) .industry-domain-code { background: linear-gradient(145deg, var(--orange), #c66d00); }
.industry-domain-card h3 {
  margin: 22px 0 10px;
  color: var(--teal-950);
  font-size: 20px;
  line-height: 1.25;
  position: relative;
  z-index: 1;
}
.industry-domain-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  position: relative;
  z-index: 1;
}

@media (max-width: 980px) {
  .industry-domain-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .client-logo-slide { flex-basis: 210px; }
}
@media (max-width: 620px) {
  .client-carousel-bleed {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2%, #000 98%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 2%, #000 98%, transparent 100%);
  }
  .client-logo-group { gap: 14px; padding-right: 14px; }
  .client-logo-slide { flex-basis: 170px; height: 94px; padding: 16px 20px; border-radius: 18px; }
  .client-logo-slide img { height: 58px; }
  .industry-domain-grid { grid-template-columns: 1fr; gap: 16px; }
  .industry-domain-card { min-height: 0; padding: 24px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .client-logo-track { animation: none; }
  .client-carousel-bleed { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scrollbar-width: thin; }
  .client-logo-group[aria-hidden="true"] { display: none; }
}


/* Impact statistics requested for the Home page */
.impact-stats-section {
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 0%, rgba(49, 181, 187, .22), transparent 34%),
    radial-gradient(circle at 92% 100%, rgba(245, 154, 34, .12), transparent 30%),
    linear-gradient(135deg, #073f46 0%, #092f35 58%, #163e3a 100%);
}
.impact-stats-section::before {
  content: "";
  position: absolute;
  inset: 0;
  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: 48px 48px;
  pointer-events: none;
}
.impact-stats-section .container { position: relative; z-index: 1; }
.impact-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
.impact-stat-card {
  min-height: 300px;
  padding: 34px 30px;
  border: 1px solid rgba(157, 222, 220, .24);
  border-radius: 30px;
  background: rgba(3, 39, 44, .78);
  color: var(--white);
  box-shadow: 0 20px 48px rgba(0, 21, 25, .18);
  backdrop-filter: blur(10px);
  transition: transform .28s ease, border-color .28s ease, background .28s ease;
}
.impact-stat-card:hover,
.impact-stat-card.touch-active {
  transform: translateY(-7px);
  border-color: rgba(245, 154, 34, .58);
  background: rgba(4, 48, 54, .92);
}
.impact-stat-card > strong {
  display: block;
  color: var(--orange);
  font-family: var(--font-display);
  font-size: clamp(52px, 5vw, 78px);
  line-height: 1;
  letter-spacing: -.04em;
  margin-bottom: 22px;
}
.impact-stat-card h3 {
  color: var(--white);
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.25;
  margin: 0 0 16px;
}
.impact-stat-card p {
  color: rgba(255,255,255,.78);
  font-size: 15px;
  line-height: 1.75;
  margin: 0;
}

/* Keep the requested upcoming note small and orange beside the service title. */
.upcoming-inline {
  color: var(--orange);
  font-family: var(--font-body);
  font-size: .48em;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
  vertical-align: middle;
}

/* Match the footer address with the other footer item typography. */
.footer-grid > div:not(:first-child) p {
  color: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.65;
  margin: 0 0 10px;
}

@media (max-width: 1080px) {
  .impact-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .impact-stat-card { min-height: 250px; }
}

@media (max-width: 620px) {
  .impact-stats-grid { grid-template-columns: 1fr; }
  .impact-stat-card { min-height: auto; padding: 28px 24px; }
  .impact-stat-card > strong { font-size: 54px; }
}


/* =========================================================
   SRSB CHATBOT — RESPONSIVE SYMBOLS, LOGO AND FORM REDIRECTS
   ========================================================= */
.chat-launcher .chat-launcher-logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: 9px;
  padding: 3px;
  background: #fff;
}

.chat-avatar {
  overflow: hidden;
  padding: 4px;
  background: #fff;
}

.chat-avatar img,
.chat-message-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.chat-message-logo {
  flex: 0 0 29px;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  margin-right: 7px;
  padding: 3px;
  overflow: hidden;
  border: 1px solid rgba(7,63,70,.12);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(7,63,70,.08);
}

.chat-row.bot {
  align-items: flex-end;
}

.chat-answer-symbol {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 7px;
  border-radius: 9px;
  background: var(--teal-100);
  font-size: 15px;
}

.chat-message-copy {
  white-space: pre-line;
}

.quick-replies button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  white-space: nowrap;
}

.quick-reply-symbol {
  font-size: 14px;
  line-height: 1;
}

.chat-response-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.chat-response-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 35px;
  padding: 8px 11px;
  border: 1px solid #bad6d8;
  border-radius: 10px;
  background: #fff;
  color: var(--teal-800);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.chat-response-action:hover,
.chat-response-action:focus-visible {
  transform: translateY(-1px);
  border-color: var(--teal-500);
  background: var(--teal-100);
  outline: none;
}

.chat-response-action.primary {
  border-color: var(--teal-800);
  background: var(--teal-800);
  color: #fff;
}

@media (max-width: 640px) {
  .chatbot {
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
    grid-template-rows: auto minmax(0,1fr) auto auto auto;
    transform-origin: center bottom;
  }

  .chatbot-header {
    padding-top: max(12px, env(safe-area-inset-top));
  }

  .chatbot-messages {
    padding: 16px 11px 8px;
  }

  .chat-bubble {
    max-width: calc(100% - 40px);
  }

  .quick-replies {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .quick-replies::-webkit-scrollbar {
    display: none;
  }

  .chat-response-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .chat-response-action {
    width: 100%;
    min-height: 42px;
  }

  .chatbot-input {
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 380px) {
  .chat-message-logo {
    display: none;
  }

  .chat-bubble {
    max-width: 92%;
  }
}


/* =========================================================
   FINAL RESPONSIVE CHATBOT CONTROLS
   ========================================================= */

.chatbot {
  grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
}

.chatbot-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.chatbot-header-actions button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  margin: 0;
  border: 0;
  border-radius: 11px;
  background: rgba(255,255,255,.09);
  color: #fff;
  font-size: 21px;
  line-height: 1;
  transition: background .2s ease, transform .2s ease;
}

.chatbot-header-actions button:hover,
.chatbot-header-actions button:focus-visible {
  background: rgba(255,255,255,.18);
  transform: translateY(-1px);
  outline: none;
}

#chatRefresh {
  font-size: 22px;
  font-weight: 700;
}

.chat-upload-bar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 9px 11px;
  border-top: 1px solid rgba(7,63,70,.08);
  background: #eef5f5;
}

.chat-upload-bar button {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #bdd7d9;
  border-radius: 11px;
  background: #fff;
  color: var(--teal-800);
  font-size: 10px;
  font-weight: 800;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.chat-upload-bar button:hover,
.chat-upload-bar button:focus-visible {
  transform: translateY(-1px);
  border-color: var(--teal-500);
  background: var(--teal-100);
  outline: none;
}

.chat-response-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.chat-message-copy {
  white-space: pre-line;
}

@media (max-width: 640px) {
  .chatbot {
    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  }

  .chat-upload-bar {
    grid-template-columns: 1fr 1fr;
    padding: 8px 10px;
  }

  .chat-upload-bar button {
    min-height: 43px;
    font-size: 10px;
  }

  .chatbot-header-actions button {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
}

@media (max-width: 360px) {
  .chat-upload-bar {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   BUSINESS INTELLIGENCE + MICROSOFT POWER AUTOMATE
   ========================================================= */

.bi-dashboard-graphic,
.power-automate-graphic {
  min-height: 132px;
  margin: 20px 0 22px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(7,63,70,.72), rgba(35,31,97,.72)),
    radial-gradient(circle at 20% 20%, rgba(103,235,226,.2), transparent 45%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.bi-dashboard-graphic {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  grid-template-rows: 1fr 42px;
  gap: 10px;
  padding: 16px;
  overflow: hidden;
}

.bi-chart {
  position: relative;
  overflow: hidden;
  border-radius: 13px;
  background: rgba(255,255,255,.08);
}

.bi-chart-a::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 10%;
  bottom: 18%;
  height: 55%;
  border-radius: 7px 7px 3px 3px;
  background:
    linear-gradient(to top,
      rgba(74,226,220,.92) 0 36%,
      transparent 36% 100%);
  box-shadow:
    30px 10px 0 rgba(92,172,244,.82),
    60px -8px 0 rgba(178,112,248,.8),
    90px 18px 0 rgba(245,166,55,.86);
}

.bi-chart-b::before {
  content: "";
  position: absolute;
  width: 62px;
  height: 62px;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: conic-gradient(#5ee4de 0 38%, #8077ec 38% 70%, #f5a637 70% 100%);
  -webkit-mask: radial-gradient(circle, transparent 0 45%, #000 47%);
  mask: radial-gradient(circle, transparent 0 45%, #000 47%);
}

.bi-kpi {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.bi-kpi i {
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
}

.power-automate-graphic {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 14px;
}

.power-automate-graphic span {
  min-width: 74px;
  min-height: 48px;
  display: grid;
  place-items: center;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(13,153,164,.92), rgba(73,51,173,.86));
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  box-shadow: 0 12px 25px rgba(2,20,31,.22);
}

.power-automate-graphic i {
  position: relative;
  width: 34px;
  height: 2px;
  background: linear-gradient(90deg, #78eee8, #a996ff);
}

.power-automate-graphic i::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid #c8fffb;
  border-right: 2px solid #c8fffb;
  transform: translateY(-50%) rotate(45deg);
}

@media (max-width: 520px) {
  .power-automate-graphic {
    gap: 5px;
    padding-inline: 8px;
  }

  .power-automate-graphic span {
    min-width: 62px;
    min-height: 44px;
    font-size: 8px;
  }

  .power-automate-graphic i {
    width: 20px;
  }
}

.footer-status {
  color: #ffbd69;
  font-size: .82em;
}


/* =========================================================
   POWER AUTOMATE — DETAILED HOME PAGE SECTION
   ========================================================= */

.power-automate-home-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 12%, rgba(45, 211, 201, .12), transparent 31%),
    radial-gradient(circle at 92% 82%, rgba(122, 102, 246, .14), transparent 34%),
    linear-gradient(180deg, #071e25 0%, #0a2830 100%);
}

.power-automate-home-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 42px 42px;
}

.power-automate-home-section .container {
  position: relative;
  z-index: 1;
}

.power-automate-home-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  align-items: end;
  gap: 36px;
  margin-bottom: 34px;
}

.power-automate-home-heading h2 {
  max-width: 760px;
  margin-bottom: 0;
}

.power-automate-heading-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
}

.power-automate-heading-copy p {
  margin: 0;
  color: rgba(235, 249, 249, .76);
}

.power-automate-service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.power-automate-service-card {
  position: relative;
  overflow: hidden;
  padding: 27px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 25px;
  background:
    linear-gradient(145deg, rgba(9, 55, 64, .94), rgba(18, 38, 75, .91));
  box-shadow:
    0 24px 52px rgba(0, 10, 18, .26),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.power-automate-service-card::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -85px;
  top: -92px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(87, 232, 222, .17), transparent 68%);
}

.power-automate-card-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 14px;
}

.power-automate-card-head h3 {
  margin: 0;
}

.power-automate-card-code {
  flex: 0 0 auto;
  min-width: 52px;
  min-height: 52px;
  display: grid;
  place-items: center;
  padding: 8px;
  border: 1px solid rgba(144, 246, 239, .25);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(24, 181, 179, .28), rgba(94, 74, 210, .34));
  color: #c9fffb;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.power-automate-service-card > p {
  position: relative;
  z-index: 1;
  color: rgba(235, 249, 249, .74);
}

.power-automate-card-columns {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 21px;
}

.power-automate-card-columns > div {
  padding: 17px;
  border-radius: 17px;
  background: rgba(255,255,255,.045);
}

.power-automate-card-columns h4 {
  margin: 0 0 11px;
  color: #8ef4ed;
  font-size: .88rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.power-automate-card-columns ul {
  margin: 0;
  padding-left: 18px;
}

.power-automate-card-columns li {
  margin: 7px 0;
  color: rgba(240, 249, 250, .78);
  font-size: .92rem;
}

.power-automate-home-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 28px;
  padding: 27px 30px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(17, 150, 154, .19), rgba(91, 69, 192, .22));
}

.power-automate-home-cta h3 {
  max-width: 720px;
  margin: 5px 0 0;
}

@media (max-width: 900px) {
  .power-automate-home-heading,
  .power-automate-service-grid {
    grid-template-columns: 1fr;
  }

  .power-automate-home-cta {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 620px) {
  .power-automate-service-card {
    padding: 21px;
  }

  .power-automate-card-columns {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .power-automate-home-cta {
    padding: 23px;
  }
}
/* POWER AUTOMATION TEXT AND BUTTON FIX */

.power-automate-home-section {
  color: #f4ffff;
}

.power-automate-home-section .eyebrow {
  color: #56dfe2;
}

/* Main heading */
.power-automate-home-heading h2 {
  color: #ffffff;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.26);
}

/* Introduction paragraph */
.power-automate-heading-copy p {
  color: rgba(240, 252, 252, 0.84);
}

/* Card headings */
.power-automate-service-card h3,
.power-automate-card-head h3 {
  color: #ffffff;
}

/* Card descriptions */
.power-automate-service-card > p {
  color: rgba(240, 252, 252, 0.84);
}

/* Inner Services and Examples boxes */
.power-automate-card-columns > div {
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.06);
}

.power-automate-card-columns li {
  color: rgba(245, 252, 253, 0.88);
}

/* Bottom CTA area */
.power-automate-home-cta {
  border-color: rgba(106, 235, 227, 0.22);
  background:
    radial-gradient(
      circle at 12% 50%,
      rgba(37, 202, 198, 0.12),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      rgba(10, 69, 78, 0.96),
      rgba(31, 43, 91, 0.96)
    );

  box-shadow: 0 20px 48px rgba(0, 10, 18, 0.25);
}

.power-automate-home-cta h3 {
  color: #ffffff;
  line-height: 1.35;
}

/* Improved orange CTA button */
.power-automate-home-cta .btn-primary {
  flex: 0 0 auto;
  min-height: 52px;
  padding: 0 25px;

  border: 1px solid rgba(255, 219, 161, 0.7);
  border-radius: 14px;

  background: linear-gradient(135deg, #f59a22, #ffb94f);
  color: #082f35;

  font-size: 0.92rem;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;

  box-shadow: 0 14px 30px rgba(245, 154, 34, 0.24);
}

.power-automate-home-cta .btn-primary:hover,
.power-automate-home-cta .btn-primary:focus-visible {
  background: linear-gradient(135deg, #ffad38, #ffc66d);
  color: #052f34;

  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(245, 154, 34, 0.34);
  outline: none;
}

@media (max-width: 900px) {
  .power-automate-home-cta .btn-primary {
    width: 100%;
    white-space: normal;
    text-align: center;
  }
}
/* Hide permanent Resume and JD upload bar */
.chat-upload-bar {
  display: none !important;
}