/*
  Blue / White Technology Theme
  Visual direction: bright, precise, spacious, contemporary technology.
*/

:root {
  --ink: #08204a;
  --ink-2: #0c2f66;
  --ink-3: #184982;
  --paper: #f7faff;
  --white: #ffffff;
  --text: #0b2450;
  --muted: #637b9c;
  --line: #dbe8fa;
  --teal: #1268ff;
  --teal-light: #42c8ff;
  --mint: #edf6ff;
  --orange: #7658ff;
  --blue: #1268ff;
  --cyan: #28c8ff;
  --violet: #775cff;
  --shadow: 0 24px 70px rgba(30, 101, 208, .14);
}

body {
  color: var(--text);
  background: #fff;
  font-family: "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Microsoft YaHei", sans-serif;
}

h1, h2, h3, .brand-copy strong { font-family: "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", sans-serif; }

/* Navigation */
.site-header,
.site-header.is-scrolled,
.case-header {
  color: var(--text);
  background: rgba(255, 255, 255, .86);
  border-bottom: 1px solid rgba(29, 111, 255, .11);
  box-shadow: 0 10px 40px rgba(25, 91, 183, .06);
  backdrop-filter: blur(22px) saturate(145%);
}

.brand-mark {
  background: linear-gradient(145deg, #176eff, #35c7ff);
  box-shadow: 0 10px 26px rgba(23, 110, 255, .27);
}

.brand-copy strong { color: #0b2b61; font-weight: 900; }
.brand-copy small { color: #4184d3; opacity: 1; }
.desktop-nav a { color: #536d92; font-weight: 600; }
.desktop-nav a:hover, .desktop-nav a.active { color: var(--blue); }
.desktop-nav a::after { background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.header-cta {
  color: #fff;
  border: 0;
  background: linear-gradient(105deg, #176dff, #5d71ff);
  box-shadow: 0 10px 25px rgba(23, 109, 255, .2);
}
.header-cta span { color: #fff; }
.header-cta:hover { color: #fff; background: linear-gradient(105deg, #0b5fe9, #4860f0); }
.menu-button { border-color: #ccdcf4; }
.menu-button span { background: var(--blue); }
.mobile-nav { background: rgba(248, 252, 255, .98); }
.mobile-nav a { color: #183762; border-bottom-color: #dbe8fa; }

/* Hero */
.hero {
  color: var(--text);
  background:
    radial-gradient(circle at 82% 19%, rgba(40, 200, 255, .25), transparent 23%),
    radial-gradient(circle at 13% 70%, rgba(118, 88, 255, .1), transparent 24%),
    linear-gradient(135deg, #fff 0%, #f7fbff 46%, #eef7ff 100%);
}

.hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 760px;
  height: 760px;
  right: -210px;
  top: -275px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, rgba(23, 109, 255, .16), rgba(40, 200, 255, .02), rgba(118, 88, 255, .12), rgba(23, 109, 255, .16));
  filter: blur(1px);
  opacity: .8;
}

.hero::after {
  content: "DIGITAL SYSTEMS";
  position: absolute;
  z-index: 0;
  left: -20px;
  bottom: 95px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(19, 104, 255, .07);
  font-size: clamp(80px, 10vw, 150px);
  font-weight: 900;
  letter-spacing: -.05em;
  white-space: nowrap;
}

.hero-grid, .contact-grid {
  opacity: .54;
  background-image: linear-gradient(rgba(26, 111, 255, .075) 1px, transparent 1px), linear-gradient(90deg, rgba(26, 111, 255, .075) 1px, transparent 1px);
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
}

.hero-orbit { border-color: rgba(21, 106, 255, .12); }
.orbit-one { box-shadow: inset 0 0 70px rgba(39, 197, 255, .05); }
.eyebrow { color: var(--blue); font-weight: 800; }
.eyebrow span { background: linear-gradient(90deg, var(--blue), var(--cyan)); box-shadow: 0 0 15px rgba(40, 200, 255, .45); }

.hero h1 {
  color: #092557;
  font-weight: 950;
  letter-spacing: -.07em;
  text-shadow: 0 9px 22px rgba(29, 93, 178, .1);
}

.hero h1 em {
  position: relative;
  display: inline-block;
  color: transparent;
  background: linear-gradient(95deg, #1268ff 3%, #24bfff 54%, #7658ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 12px 20px rgba(21, 110, 255, .16));
}

.hero h1 em::after {
  content: "";
  position: absolute;
  left: 3%;
  bottom: -11px;
  width: 42%;
  height: 5px;
  border-radius: 5px;
  background: linear-gradient(90deg, #1268ff, #35d5ff, transparent);
  box-shadow: 0 0 20px rgba(40, 200, 255, .48);
}

.hero-lead { color: #587293; }
.button-primary {
  color: #fff;
  border: 0;
  background: linear-gradient(105deg, #1268ff, #6b65ff);
  box-shadow: 0 14px 32px rgba(18, 104, 255, .22);
}
.button-primary:hover { background: linear-gradient(105deg, #055be8, #5954ec); }
.button-ghost { color: #1e4d88; border-color: #b8d1f5; background: rgba(255,255,255,.72); }
.button-ghost:hover { color: var(--blue); border-color: var(--blue); background: #fff; }
.hero-meta { border-top-color: #d7e6f8; }
.hero-meta strong { color: #0a2d63; }
.hero-meta span { color: #7590af; }

.browser-card {
  border-color: rgba(39, 120, 236, .18);
  box-shadow: 0 36px 90px rgba(37, 99, 180, .2), 0 0 0 8px rgba(255,255,255,.45);
}
.browser-top { color: #6680a0; background: #f8fbff; border-color: #e0ebf9; }
.browser-top > b { background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.hero-browser { transform: perspective(1200px) rotateY(-2deg) rotateX(1deg); }
.phone-card { border-color: #fff; box-shadow: 0 26px 70px rgba(38, 99, 186, .23); }
.hero-status { color: #246099; border-color: rgba(23, 109, 255, .15); background: rgba(255,255,255,.88); }
.hero-status i { background: #24bf87; box-shadow: 0 0 0 5px rgba(36, 191, 135, .1); }
.metric-card { color: #0d2f61; border: 1px solid #e0ebf8; box-shadow: 0 18px 55px rgba(31, 100, 192, .17); }
.metric-card span { color: #7088a5; }
.hero-bottom { color: #8aa1bc; }
.hero-bottom i { background: #cbdcf0; }

/* Trust and section typography */
.trust-strip { background: rgba(255,255,255,.96); border-color: var(--line); }
.trust-grid > div { border-color: var(--line); }
.trust-grid b { color: var(--blue); }
.trust-grid span { color: #102f61; }
.trust-grid small { color: #748aa5; }
.section-index { color: var(--blue); font-weight: 900; }
.section-heading h2, .ecosystem-copy h2, .about-copy h2, .contact h2,
.story-copy h2, .gallery-heading h2 {
  position: relative;
  color: #092657;
  font-weight: 950;
  letter-spacing: -.065em;
}
.section-heading h2::after, .ecosystem-copy h2::after, .about-copy h2::after {
  content: "";
  display: block;
  width: 58px;
  height: 4px;
  margin-top: 20px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  box-shadow: 0 0 18px rgba(40, 200, 255, .25);
}
.section-heading > p { color: #637b9c; }

/* Capabilities */
.services {
  position: relative;
  background:
    radial-gradient(circle at 92% 10%, rgba(40,200,255,.13), transparent 23%),
    linear-gradient(180deg, #f7fbff, #fff);
}
.service-grid { gap: 16px; border: 0; }
.service-card {
  min-height: 430px;
  overflow: hidden;
  border: 1px solid #dbe8fa !important;
  border-radius: 20px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 16px 55px rgba(41, 96, 170, .08);
}
.service-card::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -75px;
  top: -75px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(40,200,255,.2), transparent 67%);
}
.service-card:hover, .service-card.featured {
  color: #fff;
  border-color: transparent !important;
  background: linear-gradient(145deg, #176cff, #367dff 54%, #685fff);
  box-shadow: 0 28px 70px rgba(26, 103, 235, .24);
}
.service-number { color: #7c9bc4; font-weight: 800; }
.service-card:hover .service-number, .service-card.featured .service-number { color: #bdeaff; }
.service-icon { color: var(--blue); }
.service-card.featured .service-icon, .service-card:hover .service-icon { color: #71ddff; }
.service-card:hover .icon-system i, .service-card.featured .icon-system i { background: #246ff0; }
.service-card h3 { color: #102f61; font-weight: 900; }
.service-card:hover h3, .service-card.featured h3 { color: #fff; }
.service-card p { color: #657c9b; }
.service-card:hover p, .service-card.featured p { color: rgba(255,255,255,.72); }
.service-card ul { color: #6f86a3; }
.service-card:hover ul, .service-card.featured ul { color: rgba(255,255,255,.72); }
.service-card ul li::before { color: var(--cyan); }
.service-arrow { color: var(--blue); }
.service-card:hover .service-arrow, .service-card.featured .service-arrow { color: #9fe9ff; }

.capability {
  color: #fff;
  background:
    radial-gradient(circle at 88% 18%, rgba(43,202,255,.25), transparent 26%),
    radial-gradient(circle at 12% 92%, rgba(119,92,255,.2), transparent 24%),
    linear-gradient(145deg, #071d4d 0%, #0b3c8f 52%, #123472 100%);
}
.capability::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 76px 76px; pointer-events: none; }
.capability .section-index { color: #7edfff; }
.capability-intro h2 { color: #fff; font-weight: 950; }
.capability-intro h2 em { color: transparent; background: linear-gradient(95deg, #6fe7ff, #b7c7ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.capability-intro > p { color: rgba(224,239,255,.7); }
.capability-grid { overflow: hidden; border-color: rgba(184,218,255,.22); border-radius: 24px; box-shadow: 0 28px 80px rgba(0,25,78,.28); }
.capability-card { border-color: rgba(184,218,255,.19); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025)); }
.capability-card:hover { background: linear-gradient(160deg, rgba(69,173,255,.28), rgba(122,96,255,.18)); }
.capability-card > span, .capability-card li::before { color: #70ddff; }
.capability-card strong { color: #fff; font-weight: 900; }
.capability-card p { color: rgba(220,236,255,.66); }
.capability-card ul { color: rgba(229,241,255,.78); }
.capability-statement { border-color: rgba(184,218,255,.2); border-radius: 18px; background: rgba(255,255,255,.075); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.capability-statement > span, .capability-statement b { color: #7de4ff; }
.capability-statement a { border-color: rgba(255,255,255,.36); border-radius: 10px; background: rgba(255,255,255,.08); }
.capability-statement a:hover { color: #0a2a60; background: #fff; }

/* Cases */
.cases {
  position: relative;
  color: var(--text);
  background:
    linear-gradient(rgba(22,104,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22,104,255,.045) 1px, transparent 1px),
    linear-gradient(180deg, #edf5ff 0%, #f9fcff 65%, #fff 100%);
  background-size: 78px 78px, 78px 78px, auto;
}
.cases::before {
  content: "CASE / SELECTED WORK";
  position: absolute;
  right: 2%;
  top: 82px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(22, 104, 255, .09);
  font-size: clamp(46px, 6vw, 92px);
  font-weight: 900;
  letter-spacing: -.04em;
}
.section-heading.light h2 { color: #092657; }
.section-heading.light > p { color: #637b9c; }
.case-feature {
  overflow: hidden;
  color: var(--text);
  border: 1px solid #d4e5fa;
  border-radius: 26px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 28px 85px rgba(30, 92, 172, .14);
}
.case-image-wrap { margin: 18px; border-radius: 16px; background: #eaf4ff; }
.case-image-wrap::after { background: linear-gradient(90deg, transparent 72%, rgba(18,104,255,.06)); }
.case-view { color: #fff; border-radius: 10px; background: linear-gradient(100deg, var(--blue), #5d67ff); box-shadow: 0 12px 30px rgba(18,104,255,.22); }
.case-view b { color: #fff; }
.case-kicker { color: var(--blue); }
.case-kicker i { color: #6b55e9; border-color: rgba(107,85,233,.25); background: #f0edff; }
.case-copy h3 { color: #0a2a5c; font-weight: 950; }
.case-copy > p { color: #647c9d; }
.tags li { color: #416993; border-color: #d8e7f8; background: #f7fbff; }
.case-card {
  overflow: hidden;
  border: 1px solid #dbe8fa;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 55px rgba(37, 91, 163, .09);
}
.case-card-image { margin: 12px; border-radius: 13px; }
.case-card-image span { color: #fff; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--cyan)); }
.case-card-copy { padding: 12px 24px 27px; }
.case-card-copy small { color: var(--blue); }
.case-card-copy h3 { color: #0b2a5d; font-weight: 900; }
.case-card-copy p { color: #657c9b; }
.more-work { border-color: #d5e4f6; }
.more-work p { color: #617896; }
.more-work a { color: var(--blue); font-weight: 700; }

.ai-feature {
  color: #0b2b5e;
  border-color: #cfe2f8;
  border-radius: 28px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 32px 90px rgba(28,91,178,.16);
}
.ai-feature::before { content: "AI"; position: absolute; left: -12px; bottom: -70px; color: transparent; -webkit-text-stroke: 1px rgba(18,104,255,.055); font-size: 260px; font-weight: 950; line-height: 1; pointer-events: none; }
.ai-overline span { color: #fff; border-radius: 7px; background: linear-gradient(105deg, var(--blue), var(--violet)); }
.ai-overline i { color: #6a4de4; border: 1px solid #ddd5ff; border-radius: 7px; background: #f3f0ff; }
.ai-feature-copy h3 em { color: var(--blue); }
.ai-feature-copy > p:not(.ai-overline) { color: #637b9c; }
.ai-tags li { color: #336baf; border: 1px solid #d3e4f7; border-radius: 8px; background: #f5faff; }
.ai-delivery-note { color: #657c9a; border-left: 3px solid var(--blue); border-radius: 0 10px 10px 0; background: #f1f7ff; }
.ai-delivery-note b { color: #174f96; }
.ai-actions > a:not(.button) { color: var(--blue); font-weight: 750; }
.ai-feature-visual { background: radial-gradient(circle at 74% 22%, rgba(40,200,255,.25), transparent 26%), linear-gradient(145deg, #082753, #0b4385 62%, #176dff); }
.ai-console-shot { border: 1px solid rgba(168,220,255,.3); border-radius: 18px; box-shadow: 0 30px 70px rgba(2,22,54,.34); }
.ai-console-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 65%, rgba(3,20,45,.65)); pointer-events: none; }
.ai-console-shot figcaption { z-index: 1; color: rgba(255,255,255,.76); }
.ai-console-shot figcaption span { color: #fff; }
.ai-report-mini { border: 5px solid #fff; border-radius: 12px; background: #fff; box-shadow: 0 18px 48px rgba(1,20,50,.32); }
.ai-report-mini figcaption { color: #285f9d; background: #fff; }
.ai-vision-badge { color: #fff; }
.ai-vision-badge strong { text-shadow: 0 0 24px rgba(104,220,255,.55); }
.ai-vision-badge span { color: #8edfff; }
.ai-proof-grid { border-top: 1px solid #d8e7f8; background: linear-gradient(90deg, #f8fbff, #eef6ff); }
.ai-proof-grid > div { border-right: 1px solid #d8e7f8; }
.ai-proof-grid > div:last-child { border-right: 0; }
.ai-proof-grid b { color: var(--blue); }
.ai-proof-grid strong { color: #12386d; }
.ai-proof-grid span { color: #7085a0; }
.ai-flow-preview { border: 1px solid #d5e5f8; border-radius: 20px; background: #eaf4ff; box-shadow: 0 18px 55px rgba(31,91,171,.1); }
.ai-flow-preview span { color: #fff; border-radius: 8px; background: linear-gradient(105deg, var(--blue), var(--violet)); box-shadow: 0 10px 28px rgba(18,104,255,.24); }
.ai-evidence-copy { border: 1px solid #d5e5f8; border-radius: 20px; background: #fff; box-shadow: 0 18px 55px rgba(31,91,171,.08); }
.ai-evidence-copy small { color: var(--blue); }
.ai-evidence-copy h4 { color: #0b2d61; }
.ai-evidence-copy ul { color: #637b9c; }
.ai-evidence-copy li::before { color: var(--cyan); }

/* Process */
.process { background: #fff; }
.process-line, .process-step { border-color: #d7e5f7; }
.process-line span { background: linear-gradient(90deg, var(--blue), var(--cyan), rgba(18,104,255,.07)); }
.process-step i { background: var(--blue); box-shadow: 0 0 0 1px var(--blue), 0 0 18px rgba(18,104,255,.35); }
.process-step small, .process-step b { color: var(--blue); }
.process-step h3 { color: #0b2d61; }
.process-step p { color: #6a809d; }

/* Multi-terminal ecosystem */
.ecosystem {
  background:
    radial-gradient(circle at 76% 50%, rgba(40,200,255,.16), transparent 28%),
    linear-gradient(125deg, #eff7ff, #f9fcff 50%, #edf5ff);
}
.ecosystem-copy > p:not(.section-index) { color: #637b9c; }
.ecosystem-pills span { color: #2468b5; border-color: #c8dcf6; background: rgba(255,255,255,.78); }
.eco-center { border-color: #bad8ff; background: rgba(255,255,255,.94); box-shadow: 0 25px 65px rgba(30,105,204,.16); }
.eco-center::after { border-color: rgba(18,104,255,.25); }
.eco-center span { color: #2f6eb5; }
.eco-node { border-color: #d0e2f8; background: rgba(255,255,255,.94); box-shadow: 0 15px 45px rgba(27,90,172,.1); }
.eco-node > i { background: linear-gradient(145deg, var(--blue), var(--cyan)); box-shadow: 0 7px 20px rgba(18,104,255,.2); }
.eco-node b { color: #113567; }
.eco-node span { color: #6e85a1; }
.eco-lines path { stroke: rgba(18,104,255,.4); }

/* About */
.about {
  position: relative;
  color: var(--text);
  background: #fff;
}
.about::before {
  content: "";
  position: absolute;
  inset: 55px 4%;
  border-radius: 36px;
  background: linear-gradient(120deg, #edf6ff, #f8fbff 55%, #eef2ff);
}
.about-layout { position: relative; z-index: 1; }
.about-number {
  color: #fff;
  border: 0;
  border-radius: 28px;
  background: linear-gradient(145deg, #1469ff, #27b9ff 62%, #775cff);
  box-shadow: 0 30px 70px rgba(20,105,255,.22);
}
.about-number::before, .about-number::after { border-color: rgba(255,255,255,.62); }
.about-number strong { color: #fff; text-shadow: 0 12px 30px rgba(0,44,132,.25); }
.about-number span { color: rgba(255,255,255,.74); }
.about-copy > p:not(.section-index) { color: #637b9c; }
.about-values { border-color: #d6e4f6; }
.about-values b { color: #0d3267; }
.about-values span { color: #7086a2; }

/* Contact */
.contact {
  color: var(--text);
  background:
    radial-gradient(circle at 18% 25%, rgba(40,200,255,.2), transparent 25%),
    radial-gradient(circle at 88% 75%, rgba(119,92,255,.12), transparent 25%),
    linear-gradient(135deg, #eff7ff, #f9fcff);
}
.contact-grid { opacity: .35; }
.contact h2 em {
  color: transparent;
  background: linear-gradient(95deg, var(--blue), var(--cyan), var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.contact-copy > p:not(.section-index) { color: #637b9c; }
.contact-direct { border-color: var(--blue); }
.contact-direct span { color: #6a82a0; }
.contact-direct strong { color: #0a2b5e; }
.contact-direct a { width: fit-content; color: #41698f; font-size: 12px; transition: color .2s ease; }
.contact-direct a:hover { color: var(--blue); }
.contact-form { position: relative; border: 1px solid #d5e5f8; border-radius: 24px; box-shadow: 0 30px 90px rgba(30, 97, 188, .15); }
.contact-form::after { content: "INQUIRY"; position: absolute; z-index: 0; right: 18px; top: 16px; color: transparent; -webkit-text-stroke: 1px rgba(18,104,255,.075); font-size: 49px; font-weight: 900; letter-spacing: -.05em; pointer-events: none; }
.contact-form > * { position: relative; z-index: 1; }
.contact-form-head > span { color: var(--blue); }
.contact-form-head h3 { color: #0a2b5e; }
.contact-form-head p { color: #6f86a4; }
.contact-form input, .contact-form select, .contact-form textarea { color: #173b68; border-color: #dbe7f6; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #9aabc0; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--blue); box-shadow: 0 1px 0 var(--blue); }
.contact-form .form-consent input { box-shadow: none; accent-color: var(--blue); }
.contact-panel { position: relative; overflow: hidden; padding: 38px; border: 1px solid #d5e5f8; border-radius: 24px; background: rgba(255,255,255,.92); box-shadow: 0 30px 90px rgba(30,97,188,.15); }
.contact-panel::after { content: "CONTACT"; position: absolute; right: -6px; top: 18px; color: transparent; -webkit-text-stroke: 1px rgba(18,104,255,.08); font-size: 62px; font-weight: 900; letter-spacing: -.05em; }
.contact-panel-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.contact-panel-head i { width: 38px; height: 1px; background: linear-gradient(90deg,var(--blue),var(--cyan)); }
.contact-panel > strong { position: relative; z-index: 1; display: block; margin-top: 28px; color: #0a2b5e; font-size: 23px; }
.contact-phone { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-top: 12px; padding-bottom: 22px; color: #0b2d61; border-bottom: 1px solid #dbe8fa; font-size: clamp(25px,3vw,38px); font-weight: 900; letter-spacing: -.035em; }
.contact-phone > span { flex: 0 0 auto; padding: 10px 12px; color: #fff; border-radius: 9px; background: linear-gradient(105deg,var(--blue),var(--violet)); font-size: 10px; font-weight: 700; letter-spacing: 0; }
.contact-email { position: relative; z-index: 1; display: grid; gap: 6px; margin-top: 21px; }
.contact-email b { color: #748aa6; font-size: 10px; }
.contact-email span { color: #285f9d; font-size: 14px; }
.contact-ready { position: relative; z-index: 1; margin-top: 30px; padding: 20px; border-radius: 14px; background: #f2f7ff; }
.contact-ready small { color: #6680a0; font-size: 10px; }
.contact-ready ul { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; color: #365f8c; font-size: 11px; }
.contact-ready li::before { content: "+"; margin-right: 8px; color: var(--blue); }

/* Footer */
.site-footer {
  color: rgba(255,255,255,.72);
  background: linear-gradient(115deg, #0b55d9, #176dff 55%, #655be9);
}
.site-footer .brand-copy strong { color: #fff; }
.site-footer .brand-copy small { color: #c6eaff; }
.footer-top, .footer-bottom { border-color: rgba(255,255,255,.18); }
.footer-contact { display: inline-block; margin-top: 8px; color: rgba(255,255,255,.86); }
.footer-bottom a { color: #bcecff; }

/* Case detail */
.case-page { background: #fff; }
.case-hero {
  color: var(--text);
  background:
    radial-gradient(circle at 70% 25%, rgba(40,200,255,.22), transparent 26%),
    radial-gradient(circle at 18% 55%, rgba(118,88,255,.09), transparent 22%),
    linear-gradient(145deg, #fff, #f2f8ff);
}
.case-hero .hero-grid { opacity: .45; }
.back-link { color: #6e86a4; }
.case-hero h1 { color: #092657; font-weight: 950; text-shadow: 0 12px 28px rgba(31,92,171,.1); }
.case-hero h1 em {
  color: transparent;
  background: linear-gradient(95deg, var(--blue), var(--cyan), var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: normal;
}
.case-hero-copy > p:not(.eyebrow) { color: #5f7797; }
.case-hero-tags span { color: #376898; border-color: #cfe0f5; background: rgba(255,255,255,.68); }
.case-hero-screen .browser-card { box-shadow: 0 40px 100px rgba(31,91,171,.2), 0 0 0 9px rgba(255,255,255,.55); }
.case-facts { background: #f6faff; border-color: var(--line); }
.case-facts-grid div { border-color: var(--line); }
.case-facts-grid small { color: var(--blue); }
.case-facts-grid b { color: #173865; }
.story-aside span, .story-lead, .challenge-grid p, .solution-list p { color: #657c9b; }
.challenge-grid, .challenge-grid article, .solution-list, .solution-list article { border-color: #dbe8fa; }
.challenge-grid b, .solution-list article > span { color: var(--blue); }
.challenge-grid h3, .solution-list h3 { color: #0c3064; }
.case-solution { background: #f5f9ff; }
.case-gallery {
  color: var(--text);
  background:
    linear-gradient(rgba(18,104,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,104,255,.045) 1px, transparent 1px),
    linear-gradient(180deg, #edf5ff, #fff);
  background-size: 76px 76px, 76px 76px, auto;
}
.gallery-heading > p:not(.section-index) { color: #637b9c; }
.gallery-main { border: 1px solid #d5e5f8; border-radius: 20px; box-shadow: 0 30px 75px rgba(29,92,177,.13); }
.detail-crop { border: 1px solid #d8e7f8; border-radius: 15px; box-shadow: 0 15px 45px rgba(29,92,177,.09); }
.detail-note { color: #fff; border: 0; border-radius: 15px; background: linear-gradient(145deg, #176cff, #635fe9); box-shadow: 0 18px 48px rgba(25,101,229,.2); }
.detail-note b { color: #bfefff; }
.detail-note p { color: rgba(255,255,255,.78); }
.case-architecture { background: linear-gradient(135deg, #eef7ff, #f9fcff); }
.architecture-board { border-color: #cfe1f8; border-radius: 24px; background: rgba(255,255,255,.88); box-shadow: 0 22px 70px rgba(31,91,171,.1); }
.arch-ends article { border-color: #dbe8fa; border-radius: 14px; box-shadow: 0 10px 35px rgba(31,91,171,.06); }
.arch-ends i { background: linear-gradient(135deg, var(--blue), var(--cyan)); }
.arch-bus { color: #276ab8; }
.arch-services article { color: #275e9c; border-color: #cfe1f7; background: #edf6ff; }
.case-next { color: #fff; background: linear-gradient(105deg, #105edc, #1a78ff 55%, #625bec); }
.next-layout h2 { color: #fff; }
.next-layout p:not(.section-index) { color: rgba(255,255,255,.72); }
.next-layout .section-index { color: #bcecff; }

@media (max-width: 820px) {
  .site-header, .site-header.is-scrolled, .case-header { background: rgba(255,255,255,.94); }
  .hero::after { bottom: 150px; font-size: 78px; }
  .hero h1 { text-shadow: 0 7px 18px rgba(29,93,178,.09); }
  .hero h1 em::after { bottom: -6px; height: 3px; }
  .hero-visual { margin-top: 36px; }
  .trust-grid > div { border-color: var(--line); }
  .service-grid { gap: 13px; }
  .service-card { min-height: 350px; border-radius: 17px; }
  .case-feature { border-radius: 20px; }
  .case-image-wrap { margin: 10px; }
  .case-card { border-radius: 17px; }
  .ai-feature { border-radius: 20px; }
  .ai-feature-visual { border-radius: 0; }
  .ai-proof-grid > div { border-bottom: 1px solid #d8e7f8; }
  .ai-proof-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
  .process-step { border-color: #d7e5f7; }
  .about::before { inset: 30px 8px; border-radius: 24px; }
  .about-number { border-radius: 22px; }
  .contact-form { border-radius: 18px; }
  .contact-panel { margin-top: 48px; padding: 28px 20px; border-radius: 18px; }
  .contact-phone { align-items: flex-start; flex-direction: column; font-size: 28px; }
  .case-hero h1 { font-size: 48px; }
  .case-hero-screen { margin-top: 42px; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 48px; line-height: 1.05; }
  .hero-lead { color: #5d7697; }
  .section-heading h2, .ecosystem-copy h2, .about-copy h2, .contact h2 { font-size: 34px; }
  .cases::before { top: 58px; font-size: 45px; }
  .case-copy h3 { font-size: 30px; }
  .case-hero h1 { font-size: 43px; }
}