:root {
  --ink: #0a0d0c;
  --paper: #f4f4ed;
  --lime: #c8ff2e;
  --lime-soft: #e6ff94;
  --mint: #82e6ba;
  --muted: #a4aaa5;
  --line: rgba(255,255,255,.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 86px; }
body {
  margin: 0;
  background: var(--ink);
  color: #f7f8f4;
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

.site-header {
  position: absolute;
  z-index: 20;
  inset: 0 0 auto;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header-inner { height: 86px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px 13px 13px 5px;
  background: var(--lime);
  color: var(--ink);
  font-weight: 900;
  letter-spacing: -.08em;
}
.brand-name { font-size: 19px; font-weight: 400; letter-spacing: -.04em; }
.brand-name b { font-weight: 800; }
.desktop-nav { display: flex; gap: 34px; color: #c6cbc7; font-size: 14px; }
.desktop-nav a { position: relative; transition: color .2s ease; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 2px; background: var(--lime); transition: right .2s ease; }
.desktop-nav a:hover, .desktop-nav a:focus-visible { color: #fff; }
.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after { right: 0; }
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 700;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.header-cta:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); }

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  padding: 156px 0 0;
  background:
    radial-gradient(circle at 70% 38%, rgba(56,137,98,.22), transparent 32%),
    linear-gradient(135deg, #080b0a 0%, #0e1612 58%, #09100c 100%);
}
.hero-grid {
  position: absolute;
  z-index: -3;
  inset: 0;
  opacity: .28;
  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: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}
.hero-glow { position: absolute; z-index: -2; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.hero-glow-one { width: 340px; height: 340px; background: rgba(200,255,46,.09); left: -180px; top: 120px; }
.hero-glow-two { width: 300px; height: 300px; background: rgba(67,195,140,.14); right: -160px; bottom: 80px; }
.hero-layout { display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; gap: 60px; min-height: 610px; }
.hero-copy { padding-bottom: 44px; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: #c9cec9; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; }
.eyebrow span { width: 30px; height: 2px; background: var(--lime); }
h1 { max-width: 720px; margin: 24px 0 22px; font-size: clamp(48px, 5.15vw, 76px); line-height: .99; letter-spacing: -.058em; font-weight: 720; }
h1 em { color: var(--lime); font-style: normal; }
.hero-copy > p { max-width: 620px; margin: 0; color: #b8beba; font-size: 18px; line-height: 1.72; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 33px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 54px; border-radius: 999px; padding: 0 24px; font-size: 14px; font-weight: 800; transition: transform .2s ease, background .2s ease, color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--lime); color: var(--ink); box-shadow: 0 16px 40px rgba(200,255,46,.14); }
.button-primary:hover { background: #dcff75; }
.button-ghost { border: 1px solid rgba(255,255,255,.21); color: #f3f5f1; }
.button-ghost:hover { background: rgba(255,255,255,.08); }
.proof-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.proof-row div { display: grid; gap: 6px; }
.proof-row strong { font-size: 14px; }
.proof-row span { color: #858d87; font-size: 11px; line-height: 1.4; }

.hero-visual { position: relative; min-height: 565px; display: grid; place-items: center; }
.orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(200,255,46,.18); }
.orbit-one { width: 520px; height: 520px; }
.orbit-two { width: 398px; height: 398px; border-color: rgba(255,255,255,.1); }
.orbit-one::before, .orbit-two::before { content: ""; position: absolute; top: 50%; left: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 18px var(--lime); }
.orbit-two::before { top: 6%; left: 73%; width: 7px; height: 7px; background: #fff; }
.phone-frame {
  position: relative;
  z-index: 2;
  width: 282px;
  height: 572px;
  padding: 8px;
  border-radius: 42px;
  border: 1px solid rgba(255,255,255,.3);
  background: linear-gradient(145deg, #343b37, #080a09 52%, #232a26);
  box-shadow: 0 50px 90px rgba(0,0,0,.6), 0 0 0 8px rgba(255,255,255,.025);
  transform: rotate(2.2deg);
}
.phone-speaker { position: absolute; z-index: 3; top: 17px; left: 50%; width: 80px; height: 22px; transform: translateX(-50%); border-radius: 999px; background: #060807; }
.phone-screen { position: relative; overflow: hidden; height: 100%; border-radius: 34px; padding: 44px 16px 12px; background: #edf0e9; color: #111613; }
.app-topbar { display: grid; grid-template-columns: 34px 1fr 22px; align-items: center; gap: 9px; }
.app-avatar { display: grid; place-items: center; height: 34px; border-radius: 11px; background: #101511; color: var(--lime); font-size: 10px; font-weight: 900; }
.app-topbar div { display: grid; gap: 2px; }
.app-topbar small { color: #7a817c; font-size: 7px; }
.app-topbar strong { font-size: 10px; }
.notification-dot { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #fff; font-size: 8px; font-weight: 800; }
.app-hero-card { position: relative; min-height: 164px; margin-top: 18px; overflow: hidden; border-radius: 24px; padding: 20px; background: #111813; color: #fff; }
.app-hero-card::after { content: ""; position: absolute; width: 160px; height: 160px; border: 32px solid rgba(200,255,46,.16); border-radius: 50%; right: -72px; bottom: -90px; }
.app-hero-card > small { color: var(--lime); font-size: 7px; font-weight: 900; letter-spacing: .16em; }
.app-hero-card > strong { display: block; margin-top: 18px; font-size: 20px; line-height: 1.08; letter-spacing: -.04em; }
.progress-ring { position: absolute; right: 18px; top: 48px; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: conic-gradient(var(--lime) 0 82%, rgba(255,255,255,.12) 82%); }
.progress-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #111813; }
.progress-ring span { position: relative; z-index: 1; font-size: 16px; font-weight: 900; }
.progress-ring small { font-size: 7px; }
.app-section-title { display: flex; justify-content: space-between; align-items: center; margin: 20px 3px 10px; }
.app-section-title strong { font-size: 11px; }
.app-section-title span { color: #6e766f; font-size: 7px; }
.task-card { display: grid; grid-template-columns: 34px 1fr 20px; align-items: center; gap: 9px; margin-top: 8px; padding: 10px; border-radius: 15px; background: #fff; box-shadow: 0 5px 18px rgba(31,45,36,.06); }
.task-card-active { background: #ddff76; }
.task-icon { display: grid; place-items: center; height: 34px; border-radius: 10px; background: #141a16; color: #fff; font-size: 8px; font-weight: 900; }
.task-card div { display: grid; gap: 3px; }
.task-card strong { font-size: 9px; }
.task-card small { color: #69716b; font-size: 7px; }
.task-card b { font-size: 11px; }
.app-nav { position: absolute; bottom: 12px; left: 12px; right: 12px; display: grid; grid-template-columns: repeat(3,1fr); padding: 8px 6px; border-radius: 16px; background: #fff; box-shadow: 0 5px 18px rgba(31,45,36,.08); }
.app-nav span { display: grid; place-items: center; gap: 2px; color: #8d938f; font-size: 11px; }
.app-nav span.is-active { color: #101511; }
.app-nav small { font-size: 5px; }
.floating-badge { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; min-width: 172px; padding: 11px; border: 1px solid rgba(255,255,255,.2); border-radius: 17px; background: rgba(15,23,18,.8); backdrop-filter: blur(14px); box-shadow: 0 16px 40px rgba(0,0,0,.3); }
.floating-badge > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--lime); color: var(--ink); font-size: 13px; font-weight: 900; }
.floating-badge div { display: grid; gap: 3px; }
.floating-badge b { font-size: 10px; }
.floating-badge small { color: #929a94; font-size: 7px; }
.badge-code { left: -5px; top: 160px; }
.badge-launch { right: -20px; bottom: 90px; }
.badge-launch > span { background: #fff; }

.tech-strip { display: grid; grid-template-columns: 1.7fr repeat(6, 1fr); align-items: center; gap: 12px; min-height: 106px; border-top: 1px solid var(--line); }
.tech-label { color: #808781; font-size: 10px; line-height: 1.55; text-transform: uppercase; letter-spacing: .1em; }
.tech-item { color: #a7aea9; font-size: 13px; font-weight: 800; text-align: center; }

.light-section { background: var(--paper); color: #121613; }
.section-kicker { display: inline-flex; align-items: center; gap: 10px; color: #626862; font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.section-kicker::before { content: ""; width: 28px; height: 2px; background: #121613; }
.section-kicker-dark { color: #9ba29c; }
.section-kicker-dark::before { background: var(--lime); }
.section-heading h2, .process-intro h2, .projects-heading h2, .why-copy h2, .faq-intro h2 {
  margin: 18px 0 0;
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.04;
  letter-spacing: -.052em;
}
.section-heading h2 em, .process-intro h2 em, .projects-heading h2 em, .why-copy h2 em, .faq-intro h2 em { font-style: normal; color: #727970; }
.split-heading { display: grid; grid-template-columns: 1.5fr .7fr; align-items: end; gap: 70px; }
.split-heading > p { margin: 0 0 3px; color: #626862; font-size: 15px; line-height: 1.75; }

.services-section { padding: 116px 0 126px; }
.services-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 68px; }
.service-card { position: relative; overflow: hidden; min-height: 356px; padding: 26px 24px 24px; border: 1px solid #d9dbd2; border-radius: 24px; background: #fbfcf7; transition: transform .25s ease, background .25s ease, border-color .25s ease; }
.service-card::after { content: ""; position: absolute; width: 130px; height: 130px; border: 1px solid rgba(17,22,19,.08); border-radius: 50%; right: -80px; top: -80px; transition: transform .3s ease; }
.service-card:hover { transform: translateY(-7px); background: #fff; border-color: #bdc3b8; }
.service-card:hover::after { transform: scale(1.7); }
.service-no { color: #949b93; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.service-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-top: 26px; border-radius: 17px; background: #141a16; color: var(--lime); font-size: 22px; }
.service-card h3 { margin: 30px 0 12px; font-size: 21px; letter-spacing: -.035em; }
.service-card p { margin: 0; color: #676e67; font-size: 13px; line-height: 1.72; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; }
.tag-row span { padding: 7px 9px; border: 1px solid #d8dcd3; border-radius: 999px; color: #646b64; font-size: 8px; font-weight: 800; }

.process-section { padding: 120px 0; background: #111713; color: #f5f6f2; }
.process-layout { display: grid; grid-template-columns: .83fr 1.17fr; gap: 120px; }
.process-intro { position: sticky; top: 60px; align-self: start; }
.process-intro h2 em { color: var(--lime); }
.process-intro p { max-width: 390px; margin: 24px 0; color: #9da49e; font-size: 15px; line-height: 1.75; }
.text-link { display: inline-flex; gap: 18px; align-items: center; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.3); font-size: 13px; font-weight: 800; }
.text-link span { color: var(--lime); }
.timeline { display: grid; }
.timeline-step { position: relative; display: grid; grid-template-columns: 58px 1fr 26px; gap: 23px; min-height: 145px; padding: 6px 0 32px; border-bottom: 1px solid rgba(255,255,255,.1); }
.timeline-step + .timeline-step { padding-top: 30px; }
.timeline-marker { position: relative; }
.timeline-marker span { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: var(--lime); font-size: 10px; font-weight: 900; }
.timeline-marker i { position: absolute; top: 48px; bottom: -48px; left: 24px; width: 1px; background: rgba(255,255,255,.1); }
.timeline-step h3 { margin: 6px 0 10px; font-size: 25px; letter-spacing: -.035em; }
.timeline-step p { max-width: 500px; margin: 0; color: #949c96; font-size: 13px; line-height: 1.7; }
.timeline-arrow { margin-top: 10px; color: #727a74; }

.projects-section { padding: 120px 0 132px; }
.projects-heading { margin-bottom: 60px; }
.projects-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.project-card { position: relative; overflow: hidden; min-height: 510px; border-radius: 30px; padding: 38px; display: grid; grid-template-rows: auto 1fr; }
.project-card:first-child { grid-column: 1 / -1; grid-template-columns: .78fr 1.22fr; grid-template-rows: 1fr; align-items: center; }
.project-education { background: #d9ff63; }
.project-social { background: #151916; color: #fff; }
.project-service { background: #dce3dc; }
.project-copy { position: relative; z-index: 2; max-width: 480px; }
.project-copy > span { font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.project-copy h3 { margin: 20px 0 14px; font-size: clamp(27px,3vw,42px); line-height: 1.06; letter-spacing: -.052em; }
.project-copy p { margin: 0; max-width: 420px; color: #616861; font-size: 13px; line-height: 1.7; }
.project-social .project-copy p { color: #989f99; }
.project-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 24px; }
.project-tags span { padding: 8px 10px; border: 1px solid rgba(17,22,19,.18); border-radius: 999px; font-size: 8px; font-weight: 800; }
.project-more { display: inline-flex; gap: 12px; margin-top: 22px; color: var(--violet); font-size: 10px; font-weight: 900; }
.project-social .project-tags span { border-color: rgba(255,255,255,.18); color: #c6cbc7; }
.project-art { position: relative; min-height: 280px; }
.project-card:first-child .project-art { height: 430px; }
.education-art { display: grid; place-items: end center; }
.mini-phone { position: absolute; bottom: -72px; width: 230px; height: 440px; overflow: hidden; border: 7px solid #111713; border-radius: 34px; background: #f7f8f2; box-shadow: 0 32px 55px rgba(25,34,24,.2); }
.mini-phone-front { right: 18%; padding: 58px 20px 20px; transform: rotate(5deg); }
.mini-phone-back { left: 17%; transform: rotate(-9deg) translateY(38px); background: #171d19; color: var(--lime); display: grid; place-items: center; font-size: 44px; font-weight: 900; }
.mini-phone-back i { position: absolute; inset: 90px -60px auto; height: 180px; border: 30px solid rgba(200,255,46,.15); border-radius: 50%; }
.mini-phone-front b { display: block; color: #7d847d; font-size: 9px; }
.mini-phone-front strong { display: block; margin: 8px 0 28px; font-size: 25px; line-height: 1.05; letter-spacing: -.05em; }
.mini-phone-front i { display: block; height: 54px; margin-top: 8px; border-radius: 14px; background: #e4e7df; }
.mini-phone-front i:nth-of-type(2) { background: #111713; }
.social-art { display: grid; place-items: center; }
.social-orb { display: grid; place-items: center; width: 190px; height: 190px; border: 1px solid rgba(200,255,46,.34); border-radius: 50%; box-shadow: 0 0 0 38px rgba(200,255,46,.05), 0 0 0 78px rgba(200,255,46,.025); }
.social-orb span { display: grid; place-items: center; width: 98px; height: 98px; border-radius: 50%; background: var(--lime); color: #111713; font-size: 29px; font-weight: 950; letter-spacing: -.08em; }
.social-line { position: absolute; height: 1px; background: rgba(200,255,46,.24); transform-origin: left; }
.line-one { width: 160px; left: 25%; top: 56%; transform: rotate(-25deg); }
.line-two { width: 130px; right: 18%; top: 38%; transform: rotate(38deg); }
.reaction { position: absolute; padding: 9px 12px; border: 1px solid rgba(255,255,255,.17); border-radius: 999px; background: rgba(255,255,255,.07); font-size: 8px; font-weight: 900; }
.reaction-one { left: 10%; bottom: 23%; }
.reaction-two { right: 8%; top: 18%; color: var(--lime); }
.service-art { display: grid; place-items: center; }
.dashboard-window { width: 92%; overflow: hidden; border-radius: 20px; background: #f8f9f4; box-shadow: 0 28px 60px rgba(32,45,35,.16); transform: perspective(700px) rotateX(8deg) rotateY(-8deg); }
.dash-head { display: flex; gap: 5px; padding: 11px 14px; background: #111713; }
.dash-head span { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
.dash-content { padding: 22px; }
.dash-content b { display: block; margin-bottom: 18px; }
.dash-content i { display: block; height: 36px; margin-top: 8px; border-radius: 8px; background: #e2e7df; }
.dash-content i:nth-of-type(2) { width: 82%; background: #cbff3c; }
.dash-content i:nth-of-type(3) { width: 64%; }

.why-section { padding: 120px 0; background: #101612; color: #fff; }
.why-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; align-items: center; }
.why-copy h2 em { color: var(--lime); }
.why-copy > p { max-width: 450px; margin: 24px 0 0; color: #9aa29b; font-size: 15px; line-height: 1.8; }
.why-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.why-cards article { min-height: 210px; padding: 25px; border: 1px solid rgba(255,255,255,.11); border-radius: 22px; background: rgba(255,255,255,.025); }
.why-cards article > span { color: var(--lime); font-size: 9px; font-weight: 900; }
.why-cards h3 { margin: 38px 0 9px; font-size: 18px; }
.why-cards p { margin: 0; color: #8f9791; font-size: 12px; line-height: 1.7; }

.faq-section { padding: 120px 0; }
.faq-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 110px; }
.faq-intro > p { max-width: 330px; color: #697069; font-size: 13px; line-height: 1.7; }
.faq-list { border-top: 1px solid #ccd0c8; }
.faq-list details { border-bottom: 1px solid #ccd0c8; }
.faq-list summary { position: relative; cursor: pointer; list-style: none; padding: 24px 48px 24px 0; font-size: 16px; font-weight: 800; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 5px; top: 20px; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #bbc1b8; border-radius: 50%; font-size: 16px; }
.faq-list details[open] summary::after { content: "−"; background: #111713; color: var(--lime); border-color: #111713; }
.faq-list details p { margin: -4px 45px 24px 0; color: #666d66; font-size: 13px; line-height: 1.7; }

.contact-section { position: relative; isolation: isolate; overflow: hidden; padding: 120px 0 126px; text-align: center; background: #121914; }
.contact-grid { position: absolute; z-index: -1; inset: 0; opacity: .3; 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: 62px 62px; mask-image: radial-gradient(circle at center, black, transparent 70%); }
.contact-section::before { content: ""; position: absolute; z-index: -1; width: 480px; height: 480px; border: 1px solid rgba(200,255,46,.12); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 0 90px rgba(200,255,46,.02), 0 0 0 180px rgba(200,255,46,.01); }
.contact-inner { display: grid; justify-items: center; }
.contact-kicker { color: var(--lime); font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.contact-inner h2 { max-width: 900px; margin: 24px auto; font-size: clamp(42px,5.5vw,72px); line-height: 1; letter-spacing: -.058em; }
.contact-inner h2 em { color: var(--lime); font-style: normal; }
.contact-inner > p { max-width: 580px; margin: 0; color: #9ba39d; font-size: 15px; line-height: 1.7; }
.contact-actions { display: flex; align-items: center; gap: 24px; margin-top: 34px; text-align: left; }
.contact-actions > span { color: #767f78; font-size: 9px; line-height: 1.55; }
footer { padding: 66px 0 22px; background: #090c0a; }
.footer-top { display: grid; grid-template-columns: 1fr 1.1fr 1fr; align-items: center; gap: 30px; padding-bottom: 50px; }
.footer-top > p { max-width: 340px; margin: 0; color: #777f79; font-size: 12px; line-height: 1.7; }
.footer-links { display: flex; justify-content: flex-end; gap: 22px; color: #a8aea9; font-size: 11px; }
.footer-links a:hover { color: var(--lime); }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); color: #5e655f; font-size: 9px; }

@media (max-width: 1040px) {
  .desktop-nav { display: none; }
  .hero-layout { grid-template-columns: 1fr 410px; gap: 24px; }
  .badge-code { left: -24px; }
  .badge-launch { right: -35px; }
  .tech-strip { grid-template-columns: repeat(3, 1fr); padding-block: 24px; }
  .tech-label { grid-column: 1 / -1; text-align: center; }
  .services-grid { grid-template-columns: repeat(2,1fr); }
  .process-layout, .why-grid { gap: 60px; }
  .mini-phone-front { right: 6%; }
  .mini-phone-back { left: 7%; }
}

@media (max-width: 820px) {
  .shell { width: min(100% - 32px, 680px); }
  .header-inner { height: 74px; }
  .brand-name { display: none; }
  .header-cta { padding: 10px 14px; font-size: 12px; }
  .hero { padding-top: 118px; }
  .hero-layout { grid-template-columns: 1fr; gap: 20px; }
  .hero-copy { padding-bottom: 0; text-align: center; }
  .eyebrow { justify-content: center; }
  h1 { margin-inline: auto; font-size: clamp(42px, 12vw, 64px); }
  .hero-copy > p { margin-inline: auto; font-size: 16px; }
  .hero-actions { justify-content: center; }
  .proof-row { max-width: 560px; margin-inline: auto; text-align: left; }
  .hero-visual { min-height: 610px; }
  .orbit-one { width: 520px; height: 520px; }
  .badge-code { left: max(0px, calc(50% - 250px)); }
  .badge-launch { right: max(0px, calc(50% - 250px)); }
  .split-heading, .process-layout, .why-grid, .faq-layout { grid-template-columns: 1fr; gap: 45px; }
  .split-heading { align-items: start; }
  .split-heading > p { max-width: 580px; }
  .process-intro { position: static; }
  .projects-grid { grid-template-columns: 1fr; }
  .project-card:first-child { grid-column: auto; grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .project-card { min-height: 590px; }
  .project-card:first-child .project-art { height: 390px; }
  .footer-top { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .footer-links { justify-content: center; }
}

@media (max-width: 540px) {
  .hero { padding-top: 104px; }
  .eyebrow { font-size: 9px; }
  h1 { font-size: 43px; }
  .hero-copy > p { font-size: 14px; line-height: 1.65; }
  .hero-actions { display: grid; }
  .button { width: 100%; }
  .proof-row { grid-template-columns: 1fr; gap: 13px; }
  .proof-row div { grid-template-columns: 110px 1fr; align-items: center; }
  .hero-visual { min-height: 560px; transform: scale(.9); margin: -22px -20px; }
  .orbit-one { width: 450px; height: 450px; }
  .orbit-two { width: 340px; height: 340px; }
  .phone-frame { width: 268px; height: 548px; }
  .floating-badge { min-width: 150px; }
  .badge-code { left: -12px; }
  .badge-launch { right: -12px; }
  .tech-strip { grid-template-columns: repeat(2,1fr); gap: 20px; }
  .services-section, .process-section, .projects-section, .why-section, .faq-section { padding: 84px 0; }
  .services-grid, .why-cards { grid-template-columns: 1fr; }
  .services-grid { margin-top: 42px; }
  .service-card { min-height: 330px; }
  .timeline-step { grid-template-columns: 48px 1fr; gap: 15px; }
  .timeline-arrow { display: none; }
  .timeline-marker span { width: 42px; height: 42px; }
  .timeline-marker i { left: 21px; top: 42px; }
  .project-card { min-height: 570px; padding: 28px; }
  .project-card:first-child .project-art { height: 350px; }
  .mini-phone { width: 175px; height: 350px; }
  .mini-phone-front { right: -5%; }
  .mini-phone-back { left: -7%; }
  .mini-phone-front { padding: 50px 14px 14px; }
  .mini-phone-front strong { font-size: 20px; }
  .why-cards article { min-height: 188px; }
  .contact-actions { flex-direction: column; text-align: center; }
  .footer-links { flex-wrap: wrap; }
  .footer-bottom { gap: 15px; flex-direction: column; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* Bright editorial theme */
:root {
  --ink: #111830;
  --paper: #f8f9ff;
  --lime: #d9ff57;
  --lime-soft: #efffc0;
  --mint: #78e5cd;
  --violet: #5b5df6;
  --blue: #3468ff;
  --cloud: #edf0ff;
  --muted: #687087;
  --line: rgba(17, 24, 48, .12);
}

body {
  background: #ffffff;
  color: var(--ink);
}

.site-header {
  position: fixed;
  color: var(--ink);
  border-bottom: 1px solid rgba(17, 24, 48, .08);
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 8px 32px rgba(42, 53, 95, .04);
}
.brand-mark {
  background: var(--violet);
  color: #ffffff;
  box-shadow: 0 9px 24px rgba(91, 93, 246, .24);
}
.desktop-nav { color: #5f667c; }
.desktop-nav a::after { background: var(--violet); }
.desktop-nav a:hover, .desktop-nav a:focus-visible { color: var(--ink); }
.header-cta {
  border-color: var(--ink);
  background: var(--ink);
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(17, 24, 48, .14);
}
.header-cta:hover { background: var(--violet); border-color: var(--violet); color: #ffffff; }

.hero {
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 21%, rgba(126, 142, 255, .35), transparent 28%),
    radial-gradient(circle at 73% 70%, rgba(217, 255, 87, .32), transparent 26%),
    radial-gradient(circle at 7% 42%, rgba(138, 232, 212, .23), transparent 25%),
    linear-gradient(145deg, #ffffff 0%, #f5f6ff 54%, #f8fff3 100%);
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -2;
  right: 5%;
  top: 20%;
  width: 470px;
  height: 470px;
  border-radius: 44% 56% 63% 37% / 40% 40% 60% 60%;
  background: linear-gradient(145deg, rgba(91, 93, 246, .16), rgba(217, 255, 87, .22));
  filter: blur(2px);
  transform: rotate(-10deg);
}
.hero-grid {
  opacity: .8;
  background-image:
    linear-gradient(rgba(35, 47, 90, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 47, 90, .045) 1px, transparent 1px);
}
.hero-glow-one { width: 420px; height: 420px; background: rgba(94, 224, 196, .16); }
.hero-glow-two { width: 420px; height: 420px; background: rgba(91, 93, 246, .18); }
.eyebrow { color: #5f687e; }
.eyebrow span { background: var(--violet); }
h1 { color: var(--ink); }
h1 em { color: var(--violet); }
.hero-copy > p { color: #626b81; }
.button-primary {
  background: var(--violet);
  color: #ffffff;
  box-shadow: 0 16px 35px rgba(91, 93, 246, .24);
}
.button-primary:hover { background: #4649df; }
.button-ghost {
  border-color: rgba(17, 24, 48, .17);
  background: rgba(255, 255, 255, .7);
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(17, 24, 48, .05);
}
.button-ghost:hover { background: #ffffff; }
.proof-row { border-color: rgba(17, 24, 48, .12); }
.proof-row strong { color: var(--ink); }
.proof-row span { color: #7d8496; }
.orbit { border-color: rgba(91, 93, 246, .22); }
.orbit-two { border-color: rgba(17, 24, 48, .1); }
.orbit-one::before, .orbit-two::before { background: var(--violet); box-shadow: 0 0 20px rgba(91, 93, 246, .5); }
.orbit-two::before { background: var(--lime); }
.phone-frame {
  border-color: rgba(255, 255, 255, .88);
  background: linear-gradient(145deg, #252d4a, #0e1428 52%, #434d70);
  box-shadow: 0 45px 90px rgba(62, 76, 130, .25), 0 0 0 9px rgba(255, 255, 255, .4);
  animation: phoneFloat 5s ease-in-out infinite;
}
.phone-screen { background: #f6f7fb; }
.app-avatar { background: var(--violet); color: #ffffff; }
.app-hero-card { background: linear-gradient(135deg, var(--violet), #416fff); }
.app-hero-card::after { border-color: rgba(217, 255, 87, .22); }
.app-hero-card > small { color: var(--lime); }
.progress-ring { background: conic-gradient(var(--lime) 0 82%, rgba(255,255,255,.18) 82%); }
.progress-ring::before { background: #5260f3; }
.task-card-active { background: var(--lime); }
.task-icon { background: var(--violet); }
.floating-badge {
  border-color: rgba(17, 24, 48, .1);
  background: rgba(255, 255, 255, .88);
  color: var(--ink);
  box-shadow: 0 18px 44px rgba(49, 61, 111, .13);
}
.floating-badge > span { background: var(--lime); }
.floating-badge small { color: #7c8395; }
.badge-launch > span { background: var(--violet); color: #ffffff; }
.tech-strip { border-color: rgba(17, 24, 48, .1); }
.tech-label { color: #7d8498; }
.tech-item { color: #4c546d; }

.light-section { background: #ffffff; color: var(--ink); }
.services-section { background: linear-gradient(180deg, #ffffff 0%, #f8f9ff 100%); }
.section-kicker { color: var(--violet); }
.section-kicker::before { background: var(--violet); }
.section-kicker-dark { color: var(--violet); }
.section-kicker-dark::before { background: var(--violet); }
.section-heading h2 em,
.process-intro h2 em,
.projects-heading h2 em,
.why-copy h2 em,
.faq-intro h2 em { color: var(--violet); }
.split-heading > p { color: #687087; }
.service-card {
  border-color: #e3e6f2;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 18px 50px rgba(44, 54, 95, .06);
}
.service-card:nth-child(2) { background: #f4f0ff; }
.service-card:nth-child(3) { background: #f0fbff; }
.service-card:nth-child(4) { background: #f8ffe7; }
.service-card:hover { border-color: rgba(91, 93, 246, .25); box-shadow: 0 28px 60px rgba(73, 82, 145, .11); }
.service-icon { background: var(--violet); color: #ffffff; box-shadow: 0 10px 24px rgba(91, 93, 246, .2); }
.service-card p, .tag-row span { color: #697188; }
.tag-row span { border-color: rgba(91, 93, 246, .16); background: rgba(255,255,255,.62); }

.process-section {
  background:
    radial-gradient(circle at 12% 18%, rgba(217,255,87,.34), transparent 22%),
    linear-gradient(145deg, #f1f3ff, #eef8ff);
  color: var(--ink);
}
.process-intro p { color: #677087; }
.text-link { border-color: rgba(17,24,48,.24); }
.text-link span { color: var(--violet); }
.timeline-step { border-color: rgba(17,24,48,.1); }
.timeline-marker span { border-color: var(--violet); background: var(--violet); color: #ffffff; box-shadow: 0 10px 24px rgba(91,93,246,.17); }
.timeline-marker i { background: rgba(91,93,246,.2); }
.timeline-step p { color: #6c7488; }
.timeline-arrow { color: var(--violet); }

.projects-section { background: #ffffff; }
.project-education { background: linear-gradient(135deg, #e9ff9e, #d8ff4f); }
.project-social { background: linear-gradient(145deg, #eeecff, #dce4ff); color: var(--ink); }
.project-service { background: linear-gradient(145deg, #e4f8ff, #eaf0ff); }
.project-copy p, .project-social .project-copy p { color: #626b81; }
.project-social .project-tags span { border-color: rgba(17,24,48,.18); color: #4e576e; }
.mini-phone { border-color: #222a47; box-shadow: 0 32px 55px rgba(50,61,112,.18); }
.mini-phone-back { background: var(--violet); color: #ffffff; }
.mini-phone-back i { border-color: rgba(217,255,87,.23); }
.mini-phone-front i:nth-of-type(2) { background: var(--violet); }
.social-orb { border-color: rgba(91,93,246,.34); box-shadow: 0 0 0 38px rgba(91,93,246,.07), 0 0 0 78px rgba(91,93,246,.035); }
.social-orb span { background: var(--violet); color: #ffffff; box-shadow: 0 14px 32px rgba(91,93,246,.24); }
.social-line { background: rgba(91,93,246,.28); }
.reaction { border-color: rgba(91,93,246,.18); background: rgba(255,255,255,.72); color: var(--ink); box-shadow: 0 8px 20px rgba(91,93,246,.08); }
.reaction-two { color: var(--violet); }
.dash-head { background: var(--violet); }
.dash-head span { background: var(--lime); }
.dash-content i:nth-of-type(2) { background: var(--lime); }

.why-section {
  background:
    radial-gradient(circle at 80% 20%, rgba(217,255,87,.35), transparent 24%),
    linear-gradient(140deg, #f6f3ff 0%, #e9eeff 100%);
  color: var(--ink);
}
.why-copy h2 em { color: var(--violet); }
.why-copy > p { color: #667087; }
.why-cards article {
  border-color: rgba(91,93,246,.12);
  background: rgba(255,255,255,.76);
  box-shadow: 0 16px 44px rgba(57,68,120,.07);
}
.why-cards article > span { color: var(--violet); }
.why-cards p { color: #697187; }

.faq-section { background: #ffffff; }
.faq-intro > p, .faq-list details p { color: #687087; }
.faq-list, .faq-list details { border-color: #dde1ed; }
.faq-list summary::after { border-color: #cdd2e2; color: var(--violet); }
.faq-list details[open] summary::after { background: var(--violet); border-color: var(--violet); color: #ffffff; }

.contact-section {
  color: #ffffff;
  background:
    radial-gradient(circle at 15% 16%, rgba(217,255,87,.3), transparent 25%),
    radial-gradient(circle at 82% 80%, rgba(108,232,213,.24), transparent 25%),
    linear-gradient(135deg, #655df6, #3468ff);
}
.contact-grid {
  opacity: .55;
  background-image: linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
}
.contact-section::before { border-color: rgba(255,255,255,.16); box-shadow: 0 0 0 90px rgba(255,255,255,.035), 0 0 0 180px rgba(255,255,255,.018); }
.contact-kicker { color: var(--lime); }
.contact-inner h2 em { color: var(--lime); }
.contact-inner > p { color: rgba(255,255,255,.78); }
.contact-section .button-primary { background: #ffffff; color: var(--violet); box-shadow: 0 16px 40px rgba(27,38,99,.2); }
.contact-section .button-primary:hover { background: var(--lime); }
.contact-actions > span { color: rgba(255,255,255,.7); }

footer { background: #ffffff; color: var(--ink); }
.footer-top > p { color: #747c90; }
.footer-links { color: #555e75; }
.footer-links a:hover { color: var(--violet); }
.footer-bottom { border-color: rgba(17,24,48,.1); color: #7f8799; }

@keyframes phoneFloat {
  0%, 100% { transform: rotate(2.2deg) translateY(0); }
  50% { transform: rotate(1deg) translateY(-12px); }
}

@media (max-width: 820px) {
  .site-header { background: rgba(255,255,255,.9); }
  .hero::after { right: -32%; top: 48%; }
}

@media (prefers-reduced-motion: reduce) {
  .phone-frame { animation: none; }
}

/* Multi-page content system */
.card-link {
  position: absolute;
  left: 24px;
  bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--violet);
  font-size: 10px;
  font-weight: 900;
}
.card-link span { transition: transform .2s ease; }
.service-card:hover .card-link span { transform: translateX(4px); }

.inner-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 146px 0 96px;
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 15%, rgba(91,93,246,.2), transparent 27%),
    radial-gradient(circle at 12% 86%, rgba(120,229,205,.19), transparent 24%),
    linear-gradient(145deg, #ffffff 0%, #f2f4ff 58%, #f8fff3 100%);
}
.inner-grid {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .7;
  background-image: linear-gradient(rgba(35,47,90,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(35,47,90,.04) 1px,transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 90%);
}
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 42px; color: #777f95; font-size: 11px; }
.breadcrumbs span { display: inline-flex; gap: 9px; }
.breadcrumbs i { color: #b7bdcc; font-style: normal; }
.breadcrumbs b { color: var(--violet); font-weight: 800; }
.page-kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--violet); font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.page-kicker::before { content: ""; width: 28px; height: 2px; background: var(--violet); }
.hub-hero h1, .detail-hero h1 {
  max-width: 930px;
  margin: 24px 0 24px;
  color: var(--ink);
  font-size: clamp(48px, 6vw, 80px);
  line-height: .98;
  letter-spacing: -.06em;
}
.hub-hero h1 em, .detail-hero h1 em { color: var(--violet); font-style: normal; }
.hub-hero > .shell > p { max-width: 720px; margin: 0; color: #616b83; font-size: 18px; line-height: 1.7; }
.detail-hero-layout { display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: 85px; }
.detail-hero-layout h1 { margin-bottom: 0; }
.hero-side-copy { padding-bottom: 8px; }
.hero-side-copy p { margin: 0 0 28px; color: #606a81; font-size: 16px; line-height: 1.75; }

.hub-content { padding: 112px 0 126px; }
.link-card-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 54px; }
.link-card-grid-wide { grid-template-columns: repeat(2,1fr); }
.link-card {
  position: relative;
  overflow: hidden;
  min-height: 310px;
  padding: 28px;
  border: 1px solid #e1e4ef;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 15px 44px rgba(48,59,109,.055);
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}
.link-card::after { content: ""; position: absolute; right: -72px; top: -72px; width: 150px; height: 150px; border-radius: 50%; background: rgba(91,93,246,.055); transition: transform .25s ease; }
.link-card:hover { transform: translateY(-6px); border-color: rgba(91,93,246,.25); box-shadow: 0 25px 58px rgba(48,59,109,.1); }
.link-card:hover::after { transform: scale(1.35); }
.link-card > span { color: var(--violet); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.link-card h3 { max-width: 330px; margin: 42px 0 13px; font-size: 23px; line-height: 1.08; letter-spacing: -.04em; }
.link-card p { margin: 0 0 28px; color: #697188; font-size: 13px; line-height: 1.7; }
.link-card b { position: absolute; left: 28px; bottom: 26px; display: flex; gap: 12px; color: var(--violet); font-size: 10px; }
.link-card b i { font-style: normal; }

.cluster-bridge { padding: 112px 0; background: linear-gradient(145deg, #161d3b, #23266a); color: #fff; }
.cluster-bridge-grid { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 100px; }
.cluster-bridge h2, .deliverables-layout h2 { margin: 20px 0; font-size: clamp(38px,4vw,58px); line-height: 1.03; letter-spacing: -.05em; }
.cluster-bridge h2 em, .deliverables-layout h2 em { color: var(--lime); font-style: normal; }
.cluster-bridge p { max-width: 480px; color: #adb4c9; line-height: 1.75; }
.mini-link-list { display: grid; }
.mini-link-list > a { display: grid; grid-template-columns: 42px 1fr; gap: 18px; align-items: start; padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.mini-link-list > a:first-child { border-top: 1px solid rgba(255,255,255,.12); }
.mini-link-list > a > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--lime); color: var(--ink); font-size: 13px; }
.mini-link-list div { display: grid; gap: 6px; }
.mini-link-list strong { font-size: 17px; }
.mini-link-list small { color: #99a2bb; font-size: 11px; line-height: 1.55; }
.hub-guides, .related-section { padding: 112px 0 126px; }
.home-solutions, .home-guides { padding: 116px 0 126px; }
.home-solutions { background: linear-gradient(180deg,#ffffff,#f5f7ff); }
.home-guides { background: #f5f7ff; }
.related-heading { margin-bottom: 10px; }
.related-heading h2 { max-width: 760px; }

.detail-intro { padding: 108px 0 120px; }
.prose-split { display: grid; grid-template-columns: .35fr 1fr; gap: 80px; align-items: start; }
.large-prose { max-width: 850px; }
.large-prose p { margin: 0; color: #343d56; font-size: clamp(20px,2.4vw,31px); line-height: 1.48; letter-spacing: -.025em; }
.large-prose p + p { margin-top: 24px; color: #70788c; font-size: 17px; line-height: 1.7; letter-spacing: 0; }
.highlight-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 70px; }
.highlight-grid article { min-height: 250px; padding: 24px; border: 1px solid #e1e4ee; border-radius: 22px; background: #f9faff; }
.highlight-grid article:nth-child(2) { background: #f3f0ff; }
.highlight-grid article:nth-child(3) { background: #edfbff; }
.highlight-grid article:nth-child(4) { background: #f7ffe6; }
.highlight-grid span { color: var(--violet); font-size: 9px; font-weight: 900; }
.highlight-grid h2 { margin: 68px 0 10px; font-size: 20px; letter-spacing: -.035em; }
.highlight-grid p { margin: 0; color: #687087; font-size: 12px; line-height: 1.7; }

.deliverables-section { padding: 112px 0; background: #111830; color: #fff; }
.deliverables-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 110px; }
.deliverables-layout > div > p { max-width: 450px; color: #9da5ba; font-size: 14px; line-height: 1.75; }
.deliverable-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.13); }
.deliverable-list li { display: grid; grid-template-columns: 55px 1fr; align-items: center; min-height: 70px; border-bottom: 1px solid rgba(255,255,255,.13); font-size: 16px; font-weight: 700; }
.deliverable-list span { color: var(--lime); font-size: 9px; }

.detail-process { padding: 112px 0 126px; }
.step-card-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 58px; }
.step-card-grid article { min-height: 285px; padding: 25px; border: 1px solid #e0e4ef; border-radius: 22px; background: #fff; }
.step-card-grid span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--violet); color: #fff; font-size: 9px; font-weight: 900; }
.step-card-grid h3 { margin: 60px 0 12px; font-size: 20px; letter-spacing: -.035em; }
.step-card-grid p { margin: 0; color: #687087; font-size: 12px; line-height: 1.7; }
.compact-faq { padding-top: 12px; }
.back-to-hub { margin-top: 36px; text-align: center; }
.back-to-hub a { display: inline-flex; gap: 12px; color: var(--violet); font-size: 12px; font-weight: 900; }

.inner-contact { padding: 78px 0; background: linear-gradient(135deg, #655df6, #3468ff); color: #fff; }
.inner-contact-grid { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 60px; }
.inner-contact h2 { max-width: 760px; margin: 14px 0 12px; font-size: clamp(34px,4vw,56px); line-height: 1.02; letter-spacing: -.05em; }
.inner-contact p { max-width: 650px; margin: 0; color: rgba(255,255,255,.75); line-height: 1.7; }
.button-light { background: #fff; color: var(--violet); box-shadow: 0 16px 38px rgba(24,33,91,.22); }
.button-light:hover { background: var(--lime); }

.guide-hero { padding-bottom: 108px; }
.guide-hero h1 { max-width: 980px; margin: 24px 0; color: var(--ink); font-size: clamp(50px,6vw,82px); line-height: .98; letter-spacing: -.06em; }
.guide-hero > .shell > p { max-width: 820px; margin: 0; color: #5e6880; font-size: 18px; line-height: 1.75; }
.guide-body { padding: 102px 0 120px; }
.guide-layout { display: grid; grid-template-columns: 280px 1fr; align-items: start; gap: 100px; }
.guide-toc { position: sticky; top: 116px; display: grid; padding: 22px; border: 1px solid #e0e4ef; border-radius: 20px; background: #f8f9ff; }
.guide-toc > strong { margin-bottom: 12px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.guide-toc > a { display: grid; grid-template-columns: 28px 1fr; gap: 7px; padding: 13px 0; border-bottom: 1px solid #e1e4ef; color: #657087; font-size: 11px; line-height: 1.45; }
.guide-toc > a > span { color: var(--violet); font-size: 8px; font-weight: 900; }
.guide-toc > a:last-child { display: flex; justify-content: space-between; margin-top: 10px; border: 0; color: var(--violet); font-weight: 900; }
.guide-article { max-width: 780px; }
.guide-article > section { scroll-margin-top: 120px; padding-bottom: 78px; }
.guide-article > section + section { padding-top: 74px; border-top: 1px solid #e2e5ee; }
.guide-article > section > span { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 22px; border-radius: 50%; background: var(--violet); color: #fff; font-size: 9px; font-weight: 900; }
.guide-article h2 { margin: 0 0 25px; font-size: clamp(30px,3vw,44px); line-height: 1.06; letter-spacing: -.045em; }
.guide-article p { margin: 0; color: #4e586f; font-size: 17px; line-height: 1.85; }
.guide-article p + p { margin-top: 20px; }
.guide-article ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 30px 0 0; padding: 0; list-style: none; }
.guide-article li { position: relative; padding: 16px 16px 16px 42px; border: 1px solid #e1e5ef; border-radius: 14px; background: #f9faff; color: #39435b; font-size: 12px; line-height: 1.5; }
.guide-article li::before { content: "✓"; position: absolute; left: 15px; top: 14px; color: var(--violet); font-weight: 900; }
.hub-service-links { background: #f5f7ff; }

.phase-section { padding: 100px 0 120px; }
.phase-row { display: grid; grid-template-columns: 80px 1.1fr .9fr; gap: 42px; align-items: start; padding: 50px 0; border-bottom: 1px solid #dfe3ed; }
.phase-row:first-child { border-top: 1px solid #dfe3ed; }
.phase-row > span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--violet); color: #fff; font-size: 10px; font-weight: 900; }
.phase-row h2 { margin: 0 0 13px; font-size: 28px; letter-spacing: -.04em; }
.phase-row p { max-width: 600px; margin: 0; color: #687087; line-height: 1.75; }
.phase-row ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.phase-row li { padding: 12px 14px; border-radius: 12px; background: #f4f5fb; color: #586179; font-size: 11px; }

.project-story-section { padding: 100px 0 40px; }
.project-story-list { display: grid; gap: 18px; }
.project-story { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; min-height: 430px; padding: 48px; border: 1px solid #e0e4ef; border-radius: 30px; background: linear-gradient(145deg,#f8f9ff,#f1f4ff); }
.project-story:nth-child(2) { background: linear-gradient(145deg,#f5f1ff,#ecf1ff); }
.project-story:nth-child(3) { background: linear-gradient(145deg,#effbff,#f5fff1); }
.project-story-head > span { color: var(--violet); font-size: 10px; font-weight: 900; }
.project-story-head small { display: block; margin: 52px 0 15px; color: #737c92; font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.project-story-head h2 { margin: 0; font-size: clamp(32px,3.6vw,50px); line-height: 1.03; letter-spacing: -.052em; }
.project-story-body { display: grid; align-content: center; gap: 28px; }
.project-story-body strong { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.project-story-body p { margin: 8px 0 0; color: #626c83; font-size: 14px; line-height: 1.7; }
.project-story-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.project-story-tags span { padding: 8px 11px; border: 1px solid rgba(91,93,246,.17); border-radius: 999px; color: #5f687e; font-size: 9px; font-weight: 800; }
.project-story-body > a { display: inline-flex; gap: 12px; color: var(--violet); font-size: 12px; font-weight: 900; }

.about-story { padding: 108px 0 120px; }
.value-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 80px; }
.value-grid article { min-height: 270px; padding: 25px; border: 1px solid #e0e4ef; border-radius: 22px; background: #f9faff; }
.value-grid article:nth-child(2) { background: #f4f0ff; }
.value-grid article:nth-child(3) { background: #edfbff; }
.value-grid article:nth-child(4) { background: #f7ffe8; }
.value-grid span { color: var(--violet); font-size: 9px; font-weight: 900; }
.value-grid h2 { margin: 75px 0 11px; font-size: 20px; letter-spacing: -.035em; }
.value-grid p { margin: 0; color: #687087; font-size: 12px; line-height: 1.7; }
.about-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.about-facts div { min-height: 150px; display: grid; align-content: end; gap: 8px; padding: 24px; border: 1px solid rgba(255,255,255,.13); border-radius: 20px; background: rgba(255,255,255,.04); }
.about-facts div:first-child { grid-column: 1 / -1; }
.about-facts strong { color: var(--lime); font-size: 25px; }
.about-facts span { color: #a6aec2; font-size: 11px; }

.contact-page-hero { padding-bottom: 110px; }
.contact-page-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 90px; align-items: end; }
.contact-page-grid h1 { max-width: 760px; margin: 24px 0; color: var(--ink); font-size: clamp(48px,5.6vw,76px); line-height: .99; letter-spacing: -.06em; }
.contact-page-grid h1 em { color: var(--violet); font-style: normal; }
.contact-page-grid > div:first-child > p { max-width: 650px; margin: 0; color: #606a81; font-size: 17px; line-height: 1.75; }
.contact-channel-card { display: grid; padding: 28px; border: 1px solid rgba(91,93,246,.16); border-radius: 24px; background: rgba(255,255,255,.78); box-shadow: 0 20px 58px rgba(48,59,109,.1); }
.contact-channel-card > span { margin-bottom: 12px; color: var(--violet); font-size: 9px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.contact-channel-card > a, .contact-channel-card > div { display: grid; gap: 6px; padding: 18px 0; border-bottom: 1px solid #e0e4ef; }
.contact-channel-card > div { border-bottom: 0; }
.contact-channel-card small { color: #7b8398; font-size: 9px; }
.contact-channel-card strong { font-size: 16px; }
.contact-prep { padding: 108px 0; }
.contact-prep-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 100px; }
.contact-prep-grid h2 { margin: 18px 0 14px; font-size: 48px; letter-spacing: -.05em; }
.contact-prep-grid > div > p { color: #697188; line-height: 1.75; }
.contact-prep ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid #dfe3ed; }
.contact-prep li { display: grid; grid-template-columns: 55px 1fr; gap: 20px; padding: 25px 0; border-bottom: 1px solid #dfe3ed; }
.contact-prep li > span { color: var(--violet); font-size: 9px; font-weight: 900; }
.contact-prep li strong { font-size: 17px; }
.contact-prep li p { margin: 7px 0 0; color: #697188; font-size: 12px; line-height: 1.6; }
.not-found-hero { min-height: 680px; display: grid; align-items: center; }

.footer-expanded { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr; gap: 55px; padding: 66px 0 52px; }
.footer-about { display: grid; align-content: start; gap: 20px; }
.footer-about p { max-width: 270px; margin: 0; color: #747c90; font-size: 12px; line-height: 1.7; }
.footer-about > span { color: #9399a8; font-size: 10px; }
.footer-column { display: grid; align-content: start; gap: 12px; }
.footer-column strong { margin-bottom: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .11em; }
.footer-column a { color: #667087; font-size: 11px; line-height: 1.4; }
.footer-column a:hover, .footer-column a.footer-more { color: var(--violet); }

@media (max-width: 1040px) {
  .link-card-grid { grid-template-columns: repeat(2,1fr); }
  .detail-hero-layout, .cluster-bridge-grid, .deliverables-layout { gap: 55px; }
  .highlight-grid, .step-card-grid { grid-template-columns: repeat(2,1fr); }
  .footer-expanded { grid-template-columns: repeat(2,1fr); }
  .value-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 820px) {
  .inner-hero { padding: 120px 0 74px; }
  .hub-hero h1, .detail-hero h1 { font-size: clamp(44px,12vw,66px); }
  .detail-hero-layout, .cluster-bridge-grid, .deliverables-layout, .prose-split { grid-template-columns: 1fr; gap: 40px; }
  .hero-side-copy { max-width: 620px; }
  .link-card-grid { grid-template-columns: 1fr; }
  .link-card { min-height: 280px; }
  .inner-contact-grid { grid-template-columns: 1fr; }
  .inner-contact-grid .button { width: max-content; }
  .guide-layout { grid-template-columns: 1fr; gap: 55px; }
  .guide-toc { position: static; }
  .phase-row, .project-story, .contact-page-grid, .contact-prep-grid { grid-template-columns: 1fr; gap: 28px; }
  .phase-row { grid-template-columns: 62px 1fr; }
  .phase-row ul { grid-column: 2; }
  .project-story { gap: 48px; }
  .project-story-head small { margin-top: 30px; }
}

@media (max-width: 540px) {
  .breadcrumbs { margin-bottom: 30px; }
  .hub-hero h1, .detail-hero h1 { font-size: 44px; }
  .hub-hero > .shell > p { font-size: 15px; }
  .hub-content, .detail-intro, .deliverables-section, .detail-process, .hub-guides, .related-section, .cluster-bridge { padding: 82px 0; }
  .highlight-grid, .step-card-grid, .footer-expanded { grid-template-columns: 1fr; }
  .highlight-grid article { min-height: 220px; }
  .inner-contact-grid .button { width: 100%; }
  .footer-expanded { gap: 36px; }
  .guide-hero h1 { font-size: 44px; }
  .guide-hero > .shell > p { font-size: 15px; }
  .guide-body { padding: 80px 0; }
  .guide-article p { font-size: 15px; }
  .guide-article ul { grid-template-columns: 1fr; }
  .value-grid, .about-facts { grid-template-columns: 1fr; }
  .about-facts div:first-child { grid-column: auto; }
  .phase-row { grid-template-columns: 1fr; }
  .phase-row ul { grid-column: auto; }
  .project-story { padding: 28px; }
  .contact-page-grid h1 { font-size: 44px; }
}

/* Unique service narratives */
.service-detail { --detail-accent: #5b5df6; --detail-soft: #eef0ff; }
.service-ios { --detail-accent: #3478f6; --detail-soft: #edf5ff; }
.service-android { --detail-accent: #15996f; --detail-soft: #eafaf3; }
.service-flutter { --detail-accent: #1aa8c8; --detail-soft: #eafaff; }
.service-react-native { --detail-accent: #5a61e8; --detail-soft: #eff0ff; }
.service-design { --detail-accent: #d74b88; --detail-soft: #fff0f7; }
.service-support { --detail-accent: #d17616; --detail-soft: #fff7e8; }
.service-consulting { --detail-accent: #7446d6; --detail-soft: #f5efff; }
.service-detail .page-kicker, .service-detail .section-kicker { color: var(--detail-accent); }
.service-detail .page-kicker::before, .service-detail .section-kicker::before { background: var(--detail-accent); }
.service-detail .button-primary { background: var(--detail-accent); }
.service-detail .detail-hero h1 em { color: var(--detail-accent); }
.service-detail-hero { padding-bottom: 46px; background: radial-gradient(circle at 84% 18%, var(--detail-soft), transparent 31%), linear-gradient(145deg,#fff,#f7f8ff); }
.service-proof-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 70px; overflow: hidden; border: 1px solid rgba(29,39,75,.1); border-radius: 18px 18px 0 0; background: rgba(29,39,75,.1); }
.service-proof-row div { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; min-height: 78px; padding: 18px; background: rgba(255,255,255,.82); }
.service-proof-row span { color: var(--detail-accent); font-size: 8px; font-weight: 900; }
.service-proof-row strong { font-size: 12px; }
.large-prose h2 { margin: 0 0 30px; max-width: 850px; color: var(--ink); font-size: clamp(32px,4vw,54px); line-height: 1.05; letter-spacing: -.05em; }
.large-prose h2 + p { color: #414b62; font-size: 20px; line-height: 1.65; letter-spacing: -.015em; }
.service-highlight-grid h3 { margin: 68px 0 10px; font-size: 20px; letter-spacing: -.035em; }
.service-highlight-grid article { background: var(--detail-soft); }
.service-highlight-grid article:nth-child(2), .service-highlight-grid article:nth-child(3), .service-highlight-grid article:nth-child(4) { background: #fff; }
.service-highlight-grid span, .service-step-grid span { color: var(--detail-accent); }
.service-signature { padding: 112px 0; color: #fff; background: #111830; }
.service-signature-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 95px; align-items: center; }
.service-signature-copy h2 { margin: 20px 0; font-size: clamp(38px,4vw,58px); line-height: 1.03; letter-spacing: -.052em; }
.service-signature-copy p { margin: 0; color: rgba(255,255,255,.66); font-size: 14px; line-height: 1.8; }
.service-signature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.service-signature-grid article { position: relative; min-height: 210px; padding: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 20px; background: rgba(255,255,255,.045); }
.service-signature-grid article::after { content: ""; position: absolute; right: -34px; top: -34px; width: 80px; height: 80px; border-radius: 50%; border: 1px solid rgba(255,255,255,.13); }
.service-signature-grid article > span { color: var(--lime); font-size: 8px; font-weight: 900; }
.service-signature-grid h3 { margin: 55px 0 10px; font-size: 18px; }
.service-signature-grid p { margin: 0; color: rgba(255,255,255,.62); font-size: 11px; line-height: 1.65; }
.service-ios-signature { background: radial-gradient(circle at 90% 8%,rgba(63,133,255,.24),transparent 26%),linear-gradient(145deg,#10182b,#152b50); }
.service-android-signature { background: radial-gradient(circle at 15% 80%,rgba(65,220,157,.2),transparent 25%),linear-gradient(145deg,#0e1c17,#17372c); }
.service-flutter-signature { background: linear-gradient(135deg,#0d2332,#104d66); }
.service-flutter-signature .service-signature-grid article, .service-react-native-signature .service-signature-grid article { min-height: 148px; }
.service-flutter-signature .service-signature-grid h3, .service-react-native-signature .service-signature-grid h3 { margin-top: 28px; }
.service-react-native-signature { background: radial-gradient(circle at 80% 20%,rgba(109,119,255,.28),transparent 30%),linear-gradient(145deg,#151734,#292d70); }
.service-design-signature { background: radial-gradient(circle at 15% 20%,rgba(255,110,174,.28),transparent 28%),linear-gradient(145deg,#31182a,#682c50); }
.service-design-signature .service-signature-grid article { border-radius: 34px 16px 34px 16px; }
.service-support-signature { background: linear-gradient(145deg,#2b2115,#5a3a13); }
.service-support-signature .service-signature-grid article::before { content: ""; position: absolute; right: 20px; bottom: 20px; width: 8px; height: 8px; border-radius: 50%; background: #ffb13b; box-shadow: 0 0 18px #ffb13b; }
.service-consulting-signature { background: radial-gradient(circle at 10% 80%,rgba(179,114,255,.25),transparent 30%),linear-gradient(145deg,#1d1633,#3a2468); }
.service-deliverables { background: #0b1022; }
.service-deliverables h2 { font-style: normal; }
.service-step-grid article { border-top: 4px solid var(--detail-accent); }
.service-step-grid span { background: var(--detail-accent); color: #fff; }

/* Solution pages use a role-flow-system narrative instead of the service template */
.solution-detail { --solution-accent: #5b5df6; --solution-soft: #f1f2ff; }
.solution-marketplace { --solution-accent: #7048e8; --solution-soft: #f3efff; }
.solution-commerce { --solution-accent: #e34d73; --solution-soft: #fff0f4; }
.solution-booking { --solution-accent: #147fc4; --solution-soft: #edf8ff; }
.solution-live { --solution-accent: #7c4dff; --solution-soft: #f2efff; }
.solution-field { --solution-accent: #158768; --solution-soft: #edfaf5; }
.solution-learning { --solution-accent: #e27b16; --solution-soft: #fff6e9; }
.solution-detail .page-kicker, .solution-detail .section-kicker { color: var(--solution-accent); }
.solution-detail .page-kicker::before, .solution-detail .section-kicker::before { background: var(--solution-accent); }
.solution-detail .button-primary { background: var(--solution-accent); }
.solution-hero { position: relative; isolation: isolate; overflow: hidden; padding: 146px 0 98px; color: var(--ink); background: radial-gradient(circle at 86% 20%,var(--solution-soft),transparent 32%),linear-gradient(145deg,#fff,#f7f8ff); }
.solution-hero-layout { display: grid; grid-template-columns: 1.12fr .88fr; gap: 85px; align-items: end; }
.solution-hero-copy h1 { max-width: 790px; margin: 24px 0; font-size: clamp(48px,5.8vw,78px); line-height: .98; letter-spacing: -.06em; }
.solution-hero-copy > p { max-width: 680px; margin: 0 0 30px; color: #606a81; font-size: 16px; line-height: 1.75; }
.solution-role-board { display: grid; padding: 20px; border: 1px solid rgba(29,39,75,.1); border-radius: 25px; background: rgba(255,255,255,.82); box-shadow: 0 24px 70px rgba(42,53,98,.1); }
.solution-role-board > span { padding: 7px 8px 16px; color: var(--solution-accent); font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.solution-role-board article { display: grid; grid-template-columns: 40px 1fr; gap: 15px; padding: 18px 8px; border-top: 1px solid #e0e4ef; }
.solution-role-board i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--solution-soft); color: var(--solution-accent); font-size: 8px; font-style: normal; font-weight: 900; }
.solution-role-board strong { font-size: 15px; }
.solution-role-board p { margin: 5px 0 0; color: #697188; font-size: 11px; line-height: 1.55; }
.solution-flow-section { padding: 28px 0; color: #fff; background: #111830; }
.solution-flow-label { display: block; margin-bottom: 16px; color: rgba(255,255,255,.48); font-size: 8px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.solution-flow { display: grid; grid-template-columns: repeat(5,1fr); margin: 0; padding: 0; list-style: none; }
.solution-flow li { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 8px; align-items: center; min-height: 52px; }
.solution-flow li > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--solution-accent); font-size: 7px; font-weight: 900; }
.solution-flow strong { font-size: 11px; }
.solution-flow i { position: absolute; right: 20px; color: rgba(255,255,255,.26); font-style: normal; }
.solution-model { padding: 112px 0 126px; }
.solution-model-intro { display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; align-items: start; }
.solution-model-intro h2, .solution-capabilities h2, .solution-success h2 { margin: 20px 0 0; font-size: clamp(38px,4vw,58px); line-height: 1.04; letter-spacing: -.052em; }
.solution-model-intro > div:last-child > p { margin: 0; color: #4f5970; font-size: 16px; line-height: 1.78; }
.solution-model-intro > div:last-child > p + p { margin-top: 18px; }
.solution-model-intro > div:last-child > strong { display: block; margin-top: 26px; padding-left: 18px; border-left: 3px solid var(--solution-accent); color: var(--ink); font-size: 17px; line-height: 1.6; }
.solution-layer-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 72px; }
.solution-layer-grid article { min-height: 260px; padding: 24px; border: 1px solid #e0e4ef; border-radius: 22px; background: #fff; }
.solution-layer-grid article:nth-child(2), .solution-layer-grid article:nth-child(4) { transform: translateY(18px); background: var(--solution-soft); }
.solution-layer-grid span { color: var(--solution-accent); font-size: 8px; font-weight: 900; }
.solution-layer-grid h3 { margin: 78px 0 11px; font-size: 19px; letter-spacing: -.035em; }
.solution-layer-grid p { margin: 0; color: #687087; font-size: 11px; line-height: 1.7; }
.solution-capabilities { padding: 112px 0; color: #fff; background: linear-gradient(145deg,#10162c,#1a2343); }
.solution-capabilities-layout { display: grid; grid-template-columns: 1.08fr .92fr; gap: 90px; }
.solution-capabilities .section-kicker { color: var(--solution-accent); }
.solution-capabilities h2 { max-width: 680px; }
.solution-highlight-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 48px; }
.solution-highlight-list article { padding: 20px; border: 1px solid rgba(255,255,255,.11); border-radius: 16px; background: rgba(255,255,255,.035); }
.solution-highlight-list strong { font-size: 13px; }
.solution-highlight-list p { margin: 8px 0 0; color: rgba(255,255,255,.58); font-size: 10px; line-height: 1.6; }
.solution-delivery-card { padding: 28px; border-radius: 28px; background: var(--solution-soft); color: var(--ink); transform: rotate(1deg); }
.solution-delivery-card > span { color: var(--solution-accent); font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.solution-delivery-card ol { margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(29,39,75,.12); }
.solution-delivery-card li { display: grid; grid-template-columns: 40px 1fr; align-items: center; min-height: 64px; border-bottom: 1px solid rgba(29,39,75,.12); font-size: 13px; font-weight: 750; }
.solution-delivery-card i { color: var(--solution-accent); font-size: 8px; font-style: normal; }
.solution-success { padding: 112px 0 126px; }
.solution-success-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 95px; align-items: start; }
.signal-list { display: grid; gap: 8px; margin-top: 35px; }
.signal-list span { display: grid; grid-template-columns: 32px 1fr; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 12px; background: var(--solution-soft); color: #3f4960; font-size: 11px; font-weight: 800; }
.signal-list i { color: var(--solution-accent); font-size: 8px; font-style: normal; }
.solution-process-list { border-top: 1px solid #dfe3ed; }
.solution-process-list article { display: grid; grid-template-columns: 45px 1fr; gap: 18px; padding: 28px 0; border-bottom: 1px solid #dfe3ed; }
.solution-process-list > article > span { color: var(--solution-accent); font-size: 9px; font-weight: 900; }
.solution-process-list h3 { margin: 0 0 8px; font-size: 20px; }
.solution-process-list p { margin: 0; color: #687087; font-size: 12px; line-height: 1.65; }
.solution-faq { padding-top: 10px; }

@media (max-width: 1040px) {
  .service-signature-layout, .solution-hero-layout, .solution-model-intro, .solution-capabilities-layout, .solution-success-layout { gap: 55px; }
  .solution-layer-grid { grid-template-columns: repeat(2,1fr); }
  .solution-layer-grid article:nth-child(2), .solution-layer-grid article:nth-child(4) { transform: none; }
}

@media (max-width: 820px) {
  .service-proof-row { grid-template-columns: 1fr; }
  .service-signature-layout, .solution-hero-layout, .solution-model-intro, .solution-capabilities-layout, .solution-success-layout { grid-template-columns: 1fr; }
  .solution-hero { padding-top: 120px; }
  .solution-flow { grid-template-columns: 1fr; gap: 8px; }
  .solution-flow li { grid-template-columns: 32px 1fr; }
  .solution-flow i { display: none; }
}

@media (max-width: 540px) {
  .service-signature, .solution-model, .solution-capabilities, .solution-success { padding: 82px 0; }
  .service-signature-grid, .solution-layer-grid, .solution-highlight-list { grid-template-columns: 1fr; }
  .service-signature-grid article { min-height: 185px; }
  .solution-hero-copy h1 { font-size: 44px; }
  .solution-role-board { padding: 14px; }
  .solution-delivery-card { transform: none; }
}

/* Guide pages carry a different decision lens per topic */
.guide-detail { --guide-accent: #5b5df6; --guide-soft: #f2f3ff; }
.guide-cost { --guide-accent: #d57614; --guide-soft: #fff5e7; }
.guide-technology { --guide-accent: #178bb5; --guide-soft: #ebf9ff; }
.guide-mvp { --guide-accent: #168663; --guide-soft: #ecfaf4; }
.guide-publishing { --guide-accent: #4e5ee8; --guide-soft: #eff1ff; }
.guide-detail .page-kicker, .guide-detail .section-kicker { color: var(--guide-accent); }
.guide-detail .page-kicker::before, .guide-detail .section-kicker::before { background: var(--guide-accent); }
.guide-detail .guide-hero { background: radial-gradient(circle at 84% 20%,var(--guide-soft),transparent 32%),linear-gradient(145deg,#fff,#f7f8ff); }
.guide-hero-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 80px; align-items: end; }
.guide-hero-layout > div > p { max-width: 820px; margin: 0; color: #5e6880; font-size: 18px; line-height: 1.75; }
.guide-lens { padding: 26px; border: 1px solid rgba(29,39,75,.1); border-radius: 24px; background: rgba(255,255,255,.82); box-shadow: 0 22px 60px rgba(42,53,98,.09); }
.guide-lens > span { color: var(--guide-accent); font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.guide-lens > strong { display: block; margin: 20px 0 24px; font-size: 23px; line-height: 1.15; letter-spacing: -.035em; }
.guide-lens ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid #e0e4ef; }
.guide-lens li { display: grid; grid-template-columns: 36px 1fr; align-items: center; min-height: 52px; border-bottom: 1px solid #e0e4ef; color: #59637a; font-size: 11px; font-weight: 750; }
.guide-lens i { color: var(--guide-accent); font-size: 8px; font-style: normal; }
.guide-detail .guide-toc > a > span, .guide-detail .guide-toc > a:last-child { color: var(--guide-accent); }
.guide-detail .guide-article > section > span { background: var(--guide-accent); }
.guide-detail .guide-article li::before { color: var(--guide-accent); }
.guide-detail .guide-article li { background: var(--guide-soft); }

@media (max-width: 820px) {
  .guide-hero-layout { grid-template-columns: 1fr; gap: 45px; }
}

@media (max-width: 540px) {
  .guide-hero-layout > div > p { font-size: 15px; }
}