/*全宇電子shared stylesheet (cleaned: unused and overridden rules removed). */
:root { --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; line-height:1.6; }
a { color:inherit; text-decoration:none; }
.container { margin:auto; }
/* Header & Nav */
.topbar { z-index:100; inset:0 0 auto; color:#fff; }
.nav { display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; }
.brand-mark { display:grid; place-items:center; font-size:16px; font-weight:bold; }
.navlinks { display:flex; align-items:center; }
.navlinks a:hover { color:var(--cyan); }
.nav-cta, .button { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px; padding:12px 24px; font-size:14px; font-weight:700; transition:all .2s ease; cursor:pointer; border:none; }
.nav-cta { color:white; }
.nav-cta:hover, .button.primary:hover { background:#0879c7; transform:translateY(-2px); box-shadow:0 8px 20px rgba(21, 153, 238, 0.3); }
.menu-btn { display:none; border-radius:8px; padding:6px 12px; font-size:20px; cursor:pointer; }
/* Hero Section */
.hero { position:relative; overflow:hidden; display:flex; align-items:center; }
.hero:before { content:""; position:absolute; inset:0; }
.hero-inner { position:relative; z-index:1; display:grid; align-items:center; }
.eyebrow { text-transform:uppercase; font-weight:800; display:inline-block; margin-bottom:12px; }
.hero p { margin:0 0 32px; }
.button { border:1px solid rgba(255, 255, 255, 0.5); color:white; background:transparent; }
.button.primary { background:var(--blue); border-color:var(--blue); }
/* Sections Shared */
.section-head h2 { margin:10px 0 16px; color:var(--ink); }
.section-head p { line-height:1.7; margin:0; }
/* Capabilities */
.capabilities { background:#fff; }
.cap-grid { display:grid; grid-template-columns:repeat(3, 1fr); }
.cap-card { border:1px solid var(--line); background:#fff; transition:all .3s ease; }
.cap-card:hover { border-color:#83cfff; }
.icon-box { width:48px; height:48px; display:grid; place-items:center; margin-bottom:20px; }
.icon-box svg { width:24px; height:24px; stroke:currentColor; stroke-width:2; fill:none; }
.cap-card h3 { margin:0 0 10px; color:var(--ink); }
.cap-card p { margin:0; color:var(--muted); }
/* Process Section */
.steps { display:grid; grid-template-columns:repeat(5, 1fr); gap:15px; position:relative; margin-top:40px; }
.steps:before { content:""; position:absolute; top:32px; left:10%; right:10%; height:2px; z-index:0; }
.step { text-align:center; position:relative; z-index:1; }
.step-icon { width:64px; height:64px; margin:0 auto 16px; border-radius:50%; border:2px solid #7bcaff; display:grid; place-items:center; font-weight:bold; font-size:20px; }
.step strong { display:block; margin-bottom:6px; }
.step p { font-size:13px; margin:0; line-height:1.5; }
/* Interactive Estimator Component */
.estimator-box { background:#fff; border:1px solid var(--line); margin-top:40px; }
.estimator-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:15px; margin:25px 0; }
.est-option { border:1px solid var(--line); padding:18px; border-radius:12px; cursor:pointer; transition:all .2s ease; display:flex; align-items:center; gap:12px; }
.est-option:hover { border-color:var(--blue); background:#f4fbff; }
.est-option.active { border-color:var(--blue); background:#eef8ff; font-weight:bold; }
.est-option input { width:18px; height:18px; }
.est-result { color:#fff; padding:25px 30px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; }
/* Projects & Modal */
.project-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); }
.project-card { transition:all .3s ease; }
.project-card:hover { transform:translateY(-5px); }
.project-tag { font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:12px; }
.project-card h3 { margin:0 0 12px; }
.project-card p { margin:0 0 20px; }
.project-link { font-size:13px; font-weight:bold; display:inline-flex; align-items:center; gap:6px; }
/* Modal */
.modal-overlay { position:fixed; inset:0; backdrop-filter:blur(5px); display:grid; place-items:center; z-index:1000; opacity:0; pointer-events:none; transition:opacity .3s ease; padding:20px; }
.modal-overlay.active { opacity:1; pointer-events:auto; }
.modal-box { width:min(680px, 100%); padding:35px; position:relative; max-height:90vh; overflow-y:auto; }
.modal-close { position:absolute; top:20px; right:20px; background:none; border:none; font-size:24px; cursor:pointer; }
.modal-tech-list { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0; }
.tech-pill { padding:6px 14px; border-radius:20px; font-size:12px; }
/* Interactive Contact Form */
.contact-section { padding:90px 0; }
.contact-wrap { display:grid; grid-template-columns:1fr 1.2fr; align-items:start; }
.contact-info h2 { margin:0 0 16px; }
.contact-info p { color:var(--muted); margin-bottom:30px; }
.form-box { background:#fff; border:1px solid var(--line); }
.form-group { margin-bottom:20px; }
.form-group label { display:block; font-size:13px; font-weight:700; margin-bottom:8px; }
.form-control { width:100%; padding:14px 16px; border:1px solid var(--line); font-size:14px; outline:none; transition:border-color .2s; }
textarea.form-control { resize:vertical; min-height:120px; }
.submit-btn { width:100%; color:white; padding:15px; border:none; font-weight:bold; font-size:15px; cursor:pointer; }
.submit-btn:hover { background:#0879c7; }
.form-alert { display:none; padding:14px; border-radius:8px; font-size:14px; margin-bottom:20px; text-align:center; }
.form-alert.success { background:#d4edda; color:#155724; display:block; }
/* Footer */
footer { padding:45px 0 30px; font-size:13px; }
.footer-row { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; border-bottom:1px solid rgba(255, 255, 255, 0.1); padding-bottom:30px; margin-bottom:25px; }
.footer-links { display:flex; gap:24px; }
/* Responsive Design */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns:1fr; text-align:center; }
  .hero p { margin:0 auto 30px; }
  .cap-grid { grid-template-columns:repeat(2, 1fr); }
  .steps { grid-template-columns:1fr; gap:20px; }
  .steps:before { display:none; }
  .contact-wrap { grid-template-columns:1fr; }
}
@media (max-width: 600px) {
  .navlinks { display:none; position:absolute; top:82px; left:0; right:0; background:#07182b; padding:20px; flex-direction:column; border-bottom:1px solid rgba(255,255,255,0.1); }
  .navlinks.open { display:flex; }
  .menu-btn { display:block; }
  .cap-grid { grid-template-columns:1fr; }
}
/* CHUANYU refinement layer */
:root { --navy2:#102943; --max:1200px; }
body { letter-spacing:.005em; }
.container { width:min(var(--max), calc(100% - 56px)); }
.topbar { position:fixed; background:rgba(6,19,38,.88); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.nav { border-bottom-color:rgba(255,255,255,.10); }
.brand { gap:12px; }
.brand-mark { width:36px; height:36px; transform:none; }
.nav-cta { border-radius:8px; box-shadow:0 6px 18px rgba(8,127,196,.22); }
.hero-inner { gap:54px; }
.eyebrow { font-size:11px; letter-spacing:2.2px; color:#65dff0; }
h1 { font-size:clamp(38px,4.2vw,58px); line-height:1.16; letter-spacing:-1.6px; margin:14px 0 24px; }
.hero p { max-width:590px; line-height:1.9; }
.button:not(.primary) { border-color:rgba(255,255,255,.28); }
section { padding:100px 0; scroll-margin-top:76px; }
.section-head { margin-bottom:52px; }
.section-head h2 { font-size:clamp(29px,3vw,39px); letter-spacing:-1px; }
.section-head p { font-size:15px; }
.cap-grid { gap:18px; }
.cap-card { border-radius:12px; padding:30px 27px; min-height:220px; box-shadow:0 4px 16px rgba(13,42,70,.025); }
.cap-card:hover { transform:translateY(-4px); box-shadow:0 18px 38px rgba(12,71,115,.09); }
.cap-card h3 { font-size:18px; letter-spacing:-.2px; }
.cap-card p { font-size:13.5px; line-height:1.85; }
.approach { background:linear-gradient(180deg,#f4f8fc,#eef5fa); }
.step strong { font-size:14px; }
.estimator-box { border-radius:16px; padding:clamp(22px,4vw,40px); box-shadow:0 16px 40px rgba(11,39,66,.06); }
.projects { background:linear-gradient(145deg,#071426,#0a2037 70%,#071426); }
.project-grid { gap:20px; }
.project-card { padding:29px; }
.project-card h3 { font-size:19px; line-height:1.5; }
.project-card p { font-size:13.5px; line-height:1.85; }
.contact-section { background:linear-gradient(130deg,#f0f8fd,#f8fbfe 65%,#eaf5fc); }
.contact-wrap { gap:clamp(30px,5vw,64px); }
.contact-info h2 { font-size:clamp(30px,3vw,38px); line-height:1.28; letter-spacing:-.8px; }
.contact-info p { font-size:15px; line-height:1.9; }
.form-box { border-radius:15px; padding:clamp(24px,3.4vw,40px); box-shadow:0 18px 48px rgba(18,57,88,.08); }
.submit-btn { border-radius:8px; background:linear-gradient(100deg,#087fc4,#139edb); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid #67d9ef; outline-offset:3px; }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}
@media (max-width:900px) {
  .container { width:min(var(--max),calc(100% - 40px)); }
  .hero-inner { grid-template-columns:1fr; }
  .hero-inner > div:first-child > div { justify-content:center; }
  .cap-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .steps { grid-template-columns:1fr; gap:22px; }
  .steps:before { display:none; }
  .step { display:grid; grid-template-columns:64px 1fr; column-gap:18px; text-align:left; align-items:center; }
  .step-icon { grid-row:span 2; margin:0; }
  .step p { align-self:start; }
  .contact-wrap { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .container { width:calc(100% - 36px); }
  .brand-mark { width:32px; height:32px; font-size:14px; }
  .nav-cta { margin-left:auto; }
  .navlinks { gap:8px; align-items:stretch; }
  .navlinks a { padding:9px 4px; }
  .hero { min-height:620px; padding:130px 0 72px; }
  h1 { font-size:clamp(34px,9vw,44px); letter-spacing:-1.1px; }
  .hero p { font-size:14.5px; }
  section { padding:72px 0; }
  .section-head { margin-bottom:36px; }
  .cap-grid { grid-template-columns:1fr; }
  .cap-card { min-height:0; }
  .project-grid { grid-template-columns:1fr; }
  .est-result { align-items:flex-start; }
  .footer-links { flex-wrap:wrap; gap:14px 20px; }
  .modal-box { padding:28px 22px; }
}
/* V6: stronger B2B positioning, architecture and credibility */
.architecture { background:#fff; }
.architecture-panel { display:grid; grid-template-columns:.82fr 1.18fr; gap:44px; align-items:center; }
.architecture-copy h2 { font-size:clamp(29px,3vw,39px); line-height:1.25; letter-spacing:-.8px; margin:10px 0 18px; }
.architecture-copy p { color:var(--muted); line-height:1.9; font-size:15px; }
.architecture-points { list-style:none; padding:0; margin:24px 0 0; display:grid; gap:13px; }
.architecture-points li { display:flex; gap:12px; align-items:flex-start; font-size:14px; }
.architecture-points li:before { content:"✓"; display:grid; place-items:center; flex:0 0 24px; height:24px; border-radius:7px; background:#e7f7fb; color:#087fa8; font-weight:900; }
.system-map { padding:26px; color:#fff; box-shadow:0 24px 60px rgba(8,31,52,.14); }
.system-map-title { font-size:11px; letter-spacing:2px; font-weight:800; margin-bottom:18px; }
.map-layer { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.map-node { min-height:78px; display:flex; flex-direction:column; justify-content:center; text-align:center; padding:12px 8px; border:1px solid rgba(112,190,228,.3); border-radius:9px; }
.map-node strong { font-size:13px; color:#f3fbff; }
.map-node small { margin-top:5px; color:#9db9d0; }
.map-arrow { text-align:center; padding:9px 0; font-size:19px; }
.map-footnote { margin:16px 0 0; color:#9db9d0; font-size:11px; line-height:1.7; }
.why-us { background:#f4f8fc; }
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.why-card { background:#fff; border:1px solid #e0e9f1; border-radius:13px; padding:26px; }
.why-number { font-size:12px; color:#0a8bc9; font-weight:900; letter-spacing:1.5px; }
.why-card h3 { margin:12px 0 8px; font-size:18px; }
.why-card p { margin:0; color:var(--muted); font-size:13.5px; line-height:1.85; }
.industries { padding:68px 0; background:#fff; }
.industry-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.industry-card strong { display:block; margin-bottom:7px; }
.industry-card span { display:block; font-size:12px; line-height:1.7; }
.section-kicker { font-size:11px; letter-spacing:2px; color:#0789c8; font-weight:900; }
.project-note { margin:26px auto 0; max-width:800px; text-align:center; font-size:11px; line-height:1.8; }
.contact-checklist { display:grid; gap:10px; margin-top:25px; }
.contact-checklist span { display:flex; align-items:flex-start; gap:10px; font-size:13px; }
.contact-checklist span:before { content:"✓"; color:#087fc4; font-weight:900; }
.form-note { margin:12px 0 0; font-size:11px; line-height:1.7; }
.button:focus-visible, .project-card:focus-visible { outline:3px solid #5ee0ee; outline-offset:4px; }
.project-card { cursor:pointer; }
@media(max-width:900px) {
  .architecture-panel { grid-template-columns:1fr; gap:30px; }
  .why-grid { grid-template-columns:1fr 1fr; }
  .industry-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:600px) {
  .map-layer { grid-template-columns:1fr; }
  .map-node { min-height:62px; }
  .why-grid, .industry-grid { grid-template-columns:1fr; }
  .system-map { padding:18px; }
}
.navlinks a.active { color:var(--cyan); }
.page-hero { padding:155px 0 64px; color:#fff; background:radial-gradient(ellipse at 80% 40%, #07569b 0%, #0a2d50 25%, transparent 58%), linear-gradient(115deg,#061326 0%,#071a30 56%,#061326 100%); position:relative; overflow:hidden; }
.page-hero h1 { margin:8px 0 16px; }
.page-hero p { margin:0; line-height:1.8; }
.page-cta h2 { font-size:clamp(25px,3vw,34px); }
.page-cta p { max-width:680px; }
@media(max-width:600px) {
  .page-hero { padding:130px 0 48px; }
}
/* V9: visual polish layer */
h1, h2, h3 { text-wrap:balance; }
p { text-wrap:pretty; }
.navlinks a { position:relative; padding:6px 0; }
.navlinks a:after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; border-radius:2px; background:var(--cyan); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.navlinks a:hover:after, .navlinks a.active:after { transform:scaleX(1); }
.button span, .project-link { transition:transform .2s ease; }
.button:hover span { transform:translateX(3px); }
/* Hero */
@keyframes chipFloat {0%,100% { transform:perspective(700px) rotateX(55deg) rotateZ(-32deg) translateZ(0); } 50% { transform:perspective(700px) rotateX(55deg) rotateZ(-32deg) translateZ(14px); }}
@keyframes tagBob {0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); }}
/* Inner page hero */
.page-hero { padding-bottom:72px; }
.page-hero:before { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg,transparent,rgba(94,224,238,.45),transparent); }
.page-hero .eyebrow { padding:6px 12px; border:1px solid rgba(94,224,238,.3); border-radius:999px; letter-spacing:1.8px; }
/* Cards */
.cap-card, .why-card, .industry-card { position:relative; overflow:hidden; }
.cap-card:before, .why-card:before, .industry-card:before { content:""; position:absolute; left:0; right:0; top:0; height:3px; transform:scaleX(0); transform-origin:left; transition:transform .35s ease; }
.cap-card:hover:before, .why-card:hover:before, .industry-card:hover:before { transform:scaleX(1); }
.icon-box { transition:background .25s ease, color .25s ease; }
.why-card, .industry-card { transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.why-card:hover, .industry-card:hover { transform:translateY(-4px); border-color:#9fd8f5; box-shadow:0 16px 34px rgba(12,71,115,.08); }
.project-tag { display:inline-block; padding:5px 10px; font-size:11px; }
.project-card { display:flex; flex-direction:column; }
.project-card p { flex:1; }
.project-card:hover .project-link { transform:translateX(4px); }
.step-icon { transition:background .25s ease, color .25s ease, transform .25s ease; }
.step:hover .step-icon { background:linear-gradient(135deg,#087fc4,#22b4e6); color:#fff; border-color:transparent; transform:translateY(-3px); }
.map-node { transition:border-color .25s ease, background .25s ease; }
/* Estimator & form */
.est-option:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px rgba(8,127,196,.15); }
.est-option.active { box-shadow:inset 3px 0 0 var(--blue); }
#totalWeeks { transition:opacity .2s ease; }
.submit-btn { transition:transform .2s ease, box-shadow .2s ease; }
.submit-btn:hover { transform:translateY(-1px); box-shadow:0 10px 24px rgba(8,127,196,.28); }
/* Page CTA */
.page-cta { position:relative; overflow:hidden; }
.page-cta h2 { letter-spacing:-.6px; }
/* Modal */
.modal-box { transform:translateY(16px) scale(.98); transition:transform .3s ease; }
.modal-overlay.active .modal-box { transform:none; }
body.modal-open { overflow:hidden; }
/* Scroll reveal (only when JS is running) */
.js .reveal { opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; transition-delay:var(--d,0s); }
.js .reveal.in { opacity:1; transform:none; }
/* Collapse nav earlier so 7 links never overflow on tablets */
@media (max-width:1024px) {
  .navlinks { position:absolute; left:0; right:0; padding:16px 28px 22px; flex-direction:column; align-items:stretch; gap:4px; }
  .navlinks.open { display:flex; }
  .navlinks a { padding:11px 4px; border-bottom:1px solid rgba(255,255,255,.06); }
  .navlinks a:after { display:none; }
  .nav-cta { margin-left:auto; margin-right:12px; }
}
@media (max-width:600px) {
  .navlinks { padding:12px 20px 18px; }
  .page-cta { padding:60px 0; }
}
@media (prefers-reduced-motion:reduce) {
  .js .reveal { opacity:1; transform:none; }
}
/* V10: photography */
.hero:before { opacity:1; background:linear-gradient(90deg,#061326 0%,rgba(6,19,38,.94) 38%,rgba(6,19,38,.62) 70%,rgba(6,19,38,.48) 100%), radial-gradient(ellipse at 76% 45%,rgba(7,86,155,.35),transparent 60%); }
.page-hero.has-img { min-height:460px; display:flex; align-items:flex-end; background:linear-gradient(90deg,rgba(6,19,38,.96) 0%,rgba(6,19,38,.8) 42%,rgba(6,19,38,.35) 100%), var(--hero-img) center/cover no-repeat, #061326; }
.page-hero.has-img:after { display:none; }
.page-hero.has-img .container { width:min(var(--max), calc(100% - 56px)); }
.media-section { background:#fff; }
.media-section.tinted { background:var(--pale); }
.media-split { display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(32px,5vw,64px); align-items:center; }
.media-split.reverse .media-frame { order:2; }
.media-frame { position:relative; margin:0; overflow:hidden; aspect-ratio:4/3; background:#0b1d33; }
.media-frame img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s ease; }
.media-frame:hover img { transform:scale(1.04); }
.media-frame:after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); pointer-events:none; }
.media-badge { position:absolute; left:18px; bottom:18px; padding:9px 14px; font-size:12px; font-weight:700; letter-spacing:.5px; -webkit-backdrop-filter:blur(10px); }
.media-copy h2 { font-size:clamp(28px,3vw,38px); line-height:1.28; letter-spacing:-.8px; margin:10px 0 18px; }
.media-copy > p { color:var(--muted); line-height:1.9; font-size:15px; margin:0; }
.photo-banner { min-height:480px; display:flex; align-items:center; color:#fff; }
.photo-banner h2 { font-size:clamp(28px,3.4vw,44px); line-height:1.25; letter-spacing:-1px; margin:10px auto 16px; max-width:760px; }
.photo-banner p { max-width:640px; margin:0 auto; line-height:1.9; }
.project-card { overflow:hidden; }
.project-media { aspect-ratio:16/9; overflow:hidden; background:#0b1d33; position:relative; }
.project-media:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(12,34,56,.85)); }
.project-media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease, filter .6s ease; }
.project-card:hover .project-media img { transform:scale(1.05); filter:saturate(1); }
@media (max-width:900px) {
  .media-split, .media-split.reverse { grid-template-columns:1fr; }
  .media-split.reverse .media-frame { order:0; }
  .media-frame { aspect-ratio:16/10; }
  .page-hero.has-img { min-height:380px; }
  .page-hero.has-img .container { width:min(var(--max),calc(100% - 40px)); }
  .photo-banner { min-height:400px; }
}
@media (max-width:600px) {
  .page-hero.has-img .container { width:calc(100% - 36px); }
  .project-media { margin:-29px -29px 18px; }
}
/* V11: menu & page transitions */
.topbar { transition:background .25s ease, box-shadow .25s ease, transform .45s cubic-bezier(.6,0,.2,1); }
.topbar.nav-hidden { transform:translateY(-100%); }
.brand-mark { transition:transform .5s cubic-bezier(.5,-.4,.3,1.4), box-shadow .3s ease; }
.brand:hover .brand-mark { transform:rotate(-90deg) scale(1.06); }
/* Desktop: sliding indicator follows the hovered link */
@media (min-width:1025px) {
  .navlinks { position:relative; }
}
.navlinks a { transition:color .2s ease, transform .2s ease; }
.navlinks a:hover { transform:translateY(-1px); }
.navlinks.has-indicator a:after { display:none; }
.nav-indicator { position:absolute; left:0; bottom:-2px; width:0; border-radius:2px; pointer-events:none; opacity:0; transition:transform .4s cubic-bezier(.5,0,.15,1), width .4s cubic-bezier(.5,0,.15,1), opacity .25s ease; }
.nav-indicator.on { opacity:1; }
/* CTA shine sweep */
.nav-cta { position:relative; overflow:hidden; flex-shrink:0; white-space:nowrap; }
.brand, .menu-btn { flex-shrink:0; white-space:nowrap; }
.nav-cta:after { content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-20deg); transition:left .6s ease; }
.nav-cta:hover:after { left:120%; }
/* First-visit intro: header items drop in one by one */
.nav-intro .brand, .nav-intro .navlinks a, .nav-intro .nav-cta, .nav-intro .menu-btn { animation:navDrop .7s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(.12s + var(--i,0) * .06s); }
@keyframes navDrop {from { opacity:0; transform:translateY(-14px); } to { opacity:1; transform:none; }}
/* Page enter / leave */
main, footer { animation:pageIn .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pageIn {from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; }}
.page-leaving main, .page-leaving footer { animation:none; opacity:0; transform:translateY(-8px); transition:opacity .22s ease, transform .22s ease; }
.page-progress { position:fixed; z-index:200; top:0; left:0; height:2px; width:100%; transform:scaleX(0); transform-origin:left; pointer-events:none; }
.page-leaving .page-progress { transform:scaleX(.85); transition:transform .25s ease-out; }
/* Hamburger icon morphs into an X */
.menu-icon { position:relative; display:block; width:20px; height:14px; }
.menu-icon i { position:absolute; left:0; right:0; height:2px; border-radius:2px; background:currentColor; transition:top .3s ease .15s, transform .3s ease, opacity .2s ease, width .3s ease; }
.menu-icon i:nth-child(1) { top:0; }
.menu-icon i:nth-child(2) { top:6px; width:70%; }
.menu-icon i:nth-child(3) { top:12px; }
.menu-btn:hover .menu-icon i:nth-child(2) { width:100%; }
.menu-btn[aria-expanded="true"] .menu-icon i { transition:top .3s ease, transform .3s ease .15s, opacity .2s ease; }
.menu-btn[aria-expanded="true"] .menu-icon i:nth-child(1) { top:6px; transform:rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-icon i:nth-child(2) { opacity:0; transform:scaleX(0); }
.menu-btn[aria-expanded="true"] .menu-icon i:nth-child(3) { top:6px; transform:rotate(-45deg); }
.nav-backdrop { position:fixed; inset:0; z-index:99; background:rgba(3,10,20,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:opacity .35s ease, visibility 0s .35s; }
.menu-open .nav-backdrop { opacity:1; visibility:visible; transition:opacity .35s ease; }
.menu-open body { overflow:hidden; }
@media (max-width:1024px) {
  .menu-btn { display:grid; place-items:center; width:44px; height:40px; padding:0; transition:border-color .2s ease, background .2s ease; }
  .menu-btn:hover { border-color:var(--cyan); background:rgba(94,224,238,.08); }
  /* Panel unrolls from the top instead of popping in */
  .navlinks { display:flex; visibility:hidden; clip-path:inset(0 0 100% 0); transition:clip-path .45s cubic-bezier(.7,0,.2,1), visibility 0s .45s; }
  .navlinks.open { visibility:visible; clip-path:inset(0 0 0 0); transition:clip-path .55s cubic-bezier(.7,0,.2,1); }
  /* Links slide in one after another */
  .navlinks a { opacity:0; transform:translateX(-22px); transition:opacity .25s ease, transform .25s ease, color .2s ease, padding-left .25s ease; }
  .navlinks.open a { opacity:1; transform:none; transition:opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1), color .2s ease, padding-left .25s ease; transition-delay:calc(.15s + var(--i,0) * .05s), calc(.15s + var(--i,0) * .05s), 0s, 0s; }
  .navlinks a:hover, .navlinks a.active { padding-left:12px; }
  .nav-indicator { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .navlinks a, .navlinks.open a { opacity:1; transform:none; }
  main, footer, .page-leaving main, .page-leaving footer { opacity:1; transform:none; }
}
/* V13: light corporate theme (white header, light-grey sections, brand blue) */
:root { --navy:#012056; --blue:#0154A7; --cyan:#7FB8F0; --pale:#F3F3F3; }
body { font-family:"Kanit","Noto Sans TC",-apple-system,"Segoe UI","Microsoft JhengHei",sans-serif; }
/* Header */
.nav { height:88px; border-bottom:none; }
.brand { font-size:26px; font-weight:700; letter-spacing:-.3px; }
.brand-mark { border:none; color:#fff; border-radius:8px; }
.brand:hover .brand-mark { box-shadow:0 6px 16px rgba(1,84,167,.35); }
.navlinks { font-size:15px; gap:30px; }
.nav-cta, .button.primary, .submit-btn { background:var(--brand-grad); color:#fff; border:none; border-radius:999px; box-shadow:none; }
.nav-cta { padding:12px 24px; }
.nav-cta:hover, .button.primary:hover, .submit-btn:hover { background:var(--brand-grad); box-shadow:0 10px 24px rgba(1,84,167,.3); }
.menu-btn { border:1px solid #D5DAE0; }
.page-progress { background:var(--brand-grad); }
/* Buttons */
.button { border-radius:999px; padding:14px 30px; font-weight:600; }
/* Eyebrows and headings */
.section-head { text-align:left; max-width:none; margin:0 0 44px; }
.section-head h2, .media-copy h2, .architecture-copy h2, .contact-info h2, .page-cta h2, .estimator-box h2 { letter-spacing:-.5px; line-height:1.2; }
.section-head p { max-width:720px; }
/* Home hero: light grey with dotted texture and a slanted photo collage */
.hero { color:var(--body-text); }
.hero:before, .hero:after { display:none; }
.hero h1 { line-height:1.12; }
h1 span { display:inline-block; }
/* Inner page hero: grey text panel with a slanted photo on the right */
.page-hero, .page-hero.has-img { display:flex; align-items:center; }
.page-hero.has-img:before { content:""; position:absolute; right:0; bottom:0; left:auto; }
.page-hero .container { position:relative; z-index:1; }
.page-hero h1 { max-width:620px; font-size:clamp(34px,3.8vw,52px); line-height:1.18; }
.page-hero p { max-width:560px; }
/* Section backgrounds */
.capabilities, .architecture, .industries, .media-section { background:#fff; }
.approach, .why-us, .media-section.tinted, .contact-section, .page-cta, .projects { background:var(--gray-bg); }
.projects { color:var(--body-text); }
.page-cta { border-top:none; text-align:left; }
.page-cta .container { display:grid; grid-template-columns:1fr auto; gap:12px 40px; align-items:center; }
.page-cta h2 { margin:0; grid-column:1; }
.page-cta p { margin:0; grid-column:1; }
.page-cta .button { grid-column:2; grid-row:1 / span 2; }
/* Cards */
.cap-card, .why-card, .estimator-box, .form-box { border:1px solid var(--line); border-radius:6px; background:#fff; box-shadow:none; }
.cap-card:hover, .why-card:hover { border-color:transparent; box-shadow:0 18px 40px rgba(1,32,86,.12); }
.cap-card:before, .why-card:before, .industry-card:before { background:var(--brand-grad); }
.cap-card p, .why-card p { color:var(--body-text); }
.icon-box { border-radius:50%; }
.cap-card:hover .icon-box, .step:hover .step-icon { background:var(--brand-grad); color:#fff; }
/* Industry cards become photo tiles */
.industry-grid { gap:16px; }
.industry-card { min-height:280px; display:flex; flex-direction:column; justify-content:flex-end; border-radius:6px; padding:24px; color:#fff; transition:transform .35s ease, box-shadow .35s ease; }
.industry-card strong { color:#fff; font-size:20px; }
.industry-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(1,32,86,.25); }
/* Projects on light background */
.project-card { background:#fff; border:1px solid var(--line); border-radius:6px; }
.project-card:hover { border-color:transparent; box-shadow:0 18px 40px rgba(1,32,86,.12); }
.project-card p { color:var(--body-text); }
.project-media { margin:-29px -29px 22px; }
.project-media:after { display:none; }
.project-media img { filter:none; }
.project-tag { border:none; border-radius:999px; }
.modal-box { border-radius:8px; }
#modalDesc { color:var(--body-text) !important; }
#modalMetrics { color:var(--body-text) !important; }
/* Blue panels and banners */
.system-map { border-radius:6px; }
.system-map-title { color:#BFD8F5; }
.map-node small, .map-footnote { color:#C9DAEE; }
.photo-banner { text-align:left; }
.photo-banner h2 { margin-left:0; color:#fff; }
.photo-banner p { margin-left:0; color:#DCE6F3; }
.media-badge { border-radius:999px; box-shadow:0 8px 20px rgba(0,0,0,.12); }
.media-frame { border-radius:6px; }
/* Process, estimator, form */
.est-option.active, .est-option:hover { border-color:var(--brand); background:var(--brand-soft); box-shadow:inset 3px 0 0 var(--brand); }
.est-result { border-radius:6px; }
#totalWeeks { color:#fff !important; }
.est-result span { color:#C9DAEE !important; }
.form-control { border-radius:6px; }
/* Footer */
@media (max-width:1024px) {
  .navlinks { top:88px; }
  .page-hero.has-img:before { width:40%; }
}
@media (max-width:900px) {
  .page-hero.has-img { padding-bottom:230px; }
  .page-hero.has-img:before { top:auto; height:200px; width:100%; clip-path:polygon(0 18%,100% 0,100% 100%,0 100%); }
  .page-cta .container { grid-template-columns:1fr; }
  .page-cta .button { grid-column:1; grid-row:auto; justify-self:start; margin-top:10px; }
}
@media (max-width:600px) {
  .nav { height:70px; }
  .navlinks { top:70px; }
  .brand { font-size:18px; }
  .nav-cta { padding:9px 14px; font-size:12px; margin-right:8px; }
  .page-hero.has-img:before { height:170px; }
  .page-hero.has-img { padding:120px 0 200px; min-height:0; }
  .industry-card { min-height:220px; }
}
/* V14: dark display sections (stats, numbered benefits, FAQ) */
.faq { color:#fff; padding:110px 0; }
.faq .eyebrow { color:var(--sky); }
.display-title { font-weight:400; font-size:clamp(32px,4.2vw,58px); letter-spacing:-1.4px; line-height:1.12; margin:12px 0 0; }
.split-wrap { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px,6vw,90px); align-items:start; }
.split-head { position:sticky; top:120px; }
.split-head .button { margin-top:30px; }
.faq .display-title { color:#fff; }
.faq .split-head p { color:rgba(255,255,255,.6); margin:18px 0 0; line-height:1.8; }
.faq-list details { border-bottom:1px solid rgba(255,255,255,.16); }
.faq-list details:first-child { border-top:1px solid rgba(255,255,255,.16); }
.faq-list summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:26px 0; font-size:19px; color:#fff; transition:color .2s ease; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary:after { content:""; flex:0 0 34px; height:34px; border:1px solid rgba(255,255,255,.3); border-radius:50%; background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat, linear-gradient(currentColor,currentColor) center/1.5px 12px no-repeat; transition:transform .3s ease, background .3s ease, border-color .3s ease; }
.faq-list summary:hover { color:var(--sky); }
.faq-list details[open] summary:after { transform:rotate(45deg); }
.faq-list details p { margin:0 0 26px; padding-right:58px; color:rgba(255,255,255,.66); line-height:1.9; }
.faq-list details[open] p { animation:faqIn .35s ease; }
@keyframes faqIn {from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; }}
@media (max-width:900px) {
  .split-wrap { grid-template-columns:1fr; }
  .split-head { position:static; }
}
@media (max-width:600px) {
  .faq { padding:76px 0; }
  .faq-list summary { font-size:17px; }
  .faq-list details p { padding-right:0; }
}
/* V15: dark navy glass theme (matches the supplied mockup) */
:root { --bg:#071426; --bg2:#0B1D33; --panel:rgba(18,47,75,.5); --edge:rgba(112,190,228,.32); --edge-hi:rgba(94,224,238,.8); --accent:#087FC4; --accent2:#5EE0EE; --text-hi:#fff; --text-lo:#C6D5E6; --brand:#087FC4; --brand-dark:#08182B; --brand-soft:rgba(8,127,196,.14); --gray-bg:var(--bg2); --body-text:var(--text-lo); --ink:#fff; --muted:var(--text-lo); --line:rgba(112,190,228,.18); --onyx:#050F1D; --sky:#5EE0EE; --brand-grad:linear-gradient(90deg,#087FC4,#0569A8); }
html { background:var(--bg); }
body { background:var(--bg); color:var(--text-lo); }
::selection { background:rgba(94,224,238,.3); color:#fff; }
h1, h2, h3 { color:#fff; font-weight:600; }
h1 span { background:linear-gradient(90deg,#5EE0EE,#087FC4); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* Header */
.topbar, .topbar.scrolled { background:rgba(7,20,38,.72); color:#fff; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.topbar.scrolled { background:rgba(7,20,38,.94); box-shadow:0 1px 0 var(--line), 0 12px 30px rgba(0,0,0,.35); }
.brand { color:#fff; }
.brand-mark { background:linear-gradient(135deg,#5EE0EE,#087FC4 55%,#0569A8); }
.navlinks { color:#C7D6E5; font-weight:400; }
.navlinks a:hover, .navlinks a.active { color:var(--accent2); }
.nav-indicator { background:linear-gradient(90deg,#087FC4,#5EE0EE); box-shadow:0 0 10px rgba(94,224,238,.8); height:2px; }
.nav-cta { background:var(--accent); }
.nav-cta:hover { background:#139EDB; box-shadow:0 0 22px rgba(8,127,196,.55); }
.menu-btn { color:#fff; background:transparent; border-color:rgba(255,255,255,.3); }
.menu-btn:hover { background:rgba(8,127,196,.15); border-color:var(--accent2); }
/* Buttons: solid bright blue, or white outline pill */
.button.primary, .submit-btn { background:var(--accent); color:#fff; }
.button.primary:hover, .submit-btn:hover { background:#139EDB; box-shadow:0 0 24px rgba(8,127,196,.5); }
.button:not(.primary) { color:#fff; border:1.5px solid rgba(255,255,255,.75); background:rgba(255,255,255,.02); }
.button:not(.primary):hover { color:#fff; background:rgba(8,127,196,.18); border-color:var(--accent2); box-shadow:0 0 20px rgba(94,224,238,.25); }
/* Eyebrows & section heads */
.eyebrow, .section-kicker, .why-number { color:var(--accent2); letter-spacing:4px; font-weight:500; }
.section-head.center { text-align:center; margin:0 auto 40px; }
.eyebrow.line { display:inline-flex; align-items:center; gap:18px; }
.eyebrow.line:before, .eyebrow.line:after { content:""; width:min(180px,16vw); height:1px; background:linear-gradient(90deg,transparent,rgba(94,224,238,.6)); }
.eyebrow.line:after { background:linear-gradient(90deg,rgba(94,224,238,.6),transparent); }
.section-head h2, .media-copy h2, .architecture-copy h2, .contact-info h2, .page-cta h2, .estimator-box h2 { color:#fff; font-weight:600; font-size:clamp(28px,3vw,40px); }
.section-head p { color:var(--text-lo); margin-inline:auto; }
/* Section backgrounds */
.dk-section, .capabilities, .architecture, .industries, .media-section, .media-section.tinted, .approach, .why-us, .contact-section, .projects, .faq, #estimator { background:transparent; color:var(--text-lo); }
main > section:nth-of-type(even):not(.photo-banner):not(.hero):not(.page-hero) { background:linear-gradient(180deg,rgba(16,41,67,.55),rgba(7,20,38,0) 70%); }
main > section { position:relative; border-top:1px solid rgba(112,190,228,.12); }
main > section.hero, main > section.page-hero { border-top:none; }
.dk-section { padding:80px 0; }
/* Hero: full-bleed glowing PCB */
.hero:after { display:block; content:""; position:absolute; left:0; right:0; bottom:0; background:linear-gradient(180deg,transparent,var(--bg)); }
.hero-inner { grid-template-columns:1fr; }
.hero-inner > div { max-width:640px; position:relative; z-index:1; }
.hero h1 { color:#fff; font-size:clamp(38px,4.4vw,60px); font-weight:600; letter-spacing:-.5px; }
.hero p { color:#C7D6E5; font-size:17px; }
.hero .eyebrow { color:var(--accent2); letter-spacing:2px; }
.hero-actions { display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.hero-link { color:#C7D6E5; font-size:14px; }
.hero-link:hover { color:var(--accent2); }
/* Glass cards */
.cap-card, .why-card, .estimator-box, .form-box, .project-card, .feat-card, .cap-tile, .est-option { background:linear-gradient(180deg,rgba(18,47,75,.55),rgba(12,34,56,.75)); border:1px solid var(--edge); border-radius:12px; }
.cap-card:hover, .why-card:hover, .project-card:hover, .feat-card:hover, .cap-tile:hover { border-color:var(--edge-hi); box-shadow:0 0 0 1px rgba(94,224,238,.25), 0 18px 44px rgba(12,71,115,.35); }
.cap-card h3, .why-card h3, .project-card h3 { color:#fff; }
.cap-card p, .why-card p, .project-card p { color:var(--text-lo); }
.project-link { color:var(--accent2); }
.icon-box { background:rgba(8,127,196,.12); color:var(--accent2); box-shadow:0 0 18px rgba(8,127,196,.25); }
.cap-card:hover .icon-box { background:var(--accent); color:#fff; }
/* Home: capability tiles */
.cap-tiles { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; }
.cap-tile { display:flex; flex-direction:column; align-items:center; text-align:center; overflow:hidden; padding:0 0 22px; transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.cap-tile:hover { transform:translateY(-6px); }
.tile-img { display:block; width:100%; aspect-ratio:4/3; overflow:hidden; position:relative; }
.tile-img:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(7,20,38,0) 40%,rgba(16,41,67,.95)), rgba(8,127,196,.12); mix-blend-mode:normal; }
.tile-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.cap-tile:hover .tile-img img { transform:scale(1.07); }
.tile-ico { display:grid; place-items:center; width:46px; height:46px; margin:-12px auto 10px; position:relative; z-index:1; color:var(--accent2); filter:drop-shadow(0 0 8px rgba(94,224,238,.7)); }
.tile-ico svg { width:30px; height:30px; stroke:currentColor; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.cap-tile strong { color:#fff; font-weight:500; font-size:15px; line-height:1.45; padding:0 8px; }
.cap-tile small { display:block; font-size:12px; color:var(--text-lo); font-weight:400; }
/* Home: approach flow */
.approach-wrap { display:grid; grid-template-columns:.75fr 1.6fr; gap:40px; align-items:center; }
.approach-copy h2 { font-size:clamp(32px,3.4vw,46px); line-height:1.15; margin:10px 0 16px; }
.approach-copy p { color:var(--text-lo); margin:0 0 26px; line-height:1.8; }
.flow { position:relative; }
.flow-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.flow-step { position:relative; text-align:center; }
.flow-step:not(:last-child):after { content:"→"; position:absolute; right:-14px; top:30px; color:var(--accent2); font-size:22px; text-shadow:0 0 10px rgba(94,224,238,.8); }
.flow-ico { display:grid; place-items:center; width:84px; height:84px; margin:0 auto 14px; border-radius:50%; color:#CFEFFF; background:radial-gradient(circle,rgba(8,127,196,.28),rgba(12,34,56,.9) 70%); border:1.5px solid rgba(94,224,238,.7); box-shadow:0 0 22px rgba(8,127,196,.45), inset 0 0 18px rgba(94,224,238,.25); transition:transform .3s ease, box-shadow .3s ease; }
.flow-ico svg { width:36px; height:36px; stroke:currentColor; stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.flow-step:hover .flow-ico { transform:translateY(-4px); box-shadow:0 0 34px rgba(94,224,238,.7), inset 0 0 18px rgba(94,224,238,.35); }
.flow-step strong { color:#fff; font-weight:500; font-size:15px; line-height:1.45; }
.flow-line { position:relative; height:2px; margin:34px 4% 0; background:linear-gradient(90deg,rgba(8,127,196,.1),#087FC4 20%,#5EE0EE 50%,#087FC4 80%,rgba(8,127,196,.1)); box-shadow:0 0 12px rgba(94,224,238,.7); display:grid; grid-template-columns:repeat(5,1fr); }
.flow-line i { justify-self:center; width:9px; height:9px; margin-top:-4px; border-radius:50%; background:#BFF1FF; box-shadow:0 0 10px #5EE0EE, 0 0 18px #087FC4; }
/* Home: industry tiles */
.ind-tiles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.ind-tile { position:relative; min-height:150px; display:flex; align-items:center; gap:14px; padding:22px; border-radius:10px; overflow:hidden; border:1px solid var(--edge); background:linear-gradient(90deg,rgba(7,20,38,.85) 10%,rgba(7,20,38,.25) 75%), var(--img) center/cover no-repeat; transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.ind-tile:hover { transform:translateY(-5px); border-color:var(--edge-hi); box-shadow:0 18px 40px rgba(12,71,115,.35); }
.ind-tile .tile-ico { margin:0; flex:0 0 46px; }
.ind-tile strong { color:#fff; font-weight:500; font-size:16px; line-height:1.4; align-self:flex-end; }
/* Home: featured row */
.featured-grid { display:grid; grid-template-columns:.85fr 1.25fr 1fr; gap:26px; align-items:stretch; }
.feat-copy h2 { font-size:clamp(26px,2.6vw,34px); line-height:1.25; margin:10px 0 14px; }
.feat-copy p { color:var(--text-lo); margin:0 0 24px; line-height:1.8; }
.feat-card { display:grid; grid-template-columns:1fr 1fr; gap:18px; padding:14px; align-items:center; transition:border-color .3s ease, box-shadow .3s ease; }
.feat-card img { width:100%; height:100%; min-height:190px; object-fit:cover; border-radius:8px; display:block; }
.feat-card h3 { font-size:17px; font-weight:500; margin:0 0 12px; line-height:1.4; }
.feat-card ul { list-style:none; margin:0 0 16px; padding:0; display:grid; gap:8px; }
.feat-card li { font-size:13px; color:var(--text-lo); display:flex; gap:8px; }
.feat-card li:before { content:"✓"; color:var(--accent2); }
.feat-link { color:var(--accent2); font-size:14px; }
.feat-link span { display:inline-block; transition:transform .2s ease; }
.feat-card:hover .feat-link span { transform:translateX(4px); }
.feat-cta { position:relative; overflow:hidden; border-radius:14px; border:1px solid var(--edge-hi); padding:30px 28px; display:flex; flex-direction:column; justify-content:center; background:linear-gradient(90deg,rgba(7,20,38,.95) 30%,rgba(7,20,38,.3)), url("../images/ai/cta-earth.jpg") 70% center/cover no-repeat; box-shadow:0 0 30px rgba(8,127,196,.2); }
.feat-cta h2 { font-size:clamp(22px,2.2vw,28px); line-height:1.35; margin:0 0 22px; }
.feat-cta h2 span { display:inline; }
.feat-cta .button { align-self:flex-start; }
/* Inner page hero: dark photo hero */
.page-hero, .page-hero.has-img { color:#fff; background:linear-gradient(90deg,#071426 0%,rgba(7,20,38,.9) 40%,rgba(7,20,38,.45) 100%), radial-gradient(ellipse at 80% 40%,rgba(8,127,196,.3),transparent 60%), var(--hero-img, none) center/cover no-repeat, var(--bg); }
.page-hero.has-img:before { display:none; }
.page-hero:after { display:block; content:""; position:absolute; left:0; right:0; bottom:0; top:auto; width:auto; height:120px; opacity:1; background:linear-gradient(180deg,transparent,var(--bg)); }
.page-hero h1 { color:#fff; font-weight:600; }
.page-hero p { color:#C7D6E5; }
.page-hero .eyebrow { color:var(--accent2); background:rgba(8,127,196,.1); border-color:rgba(94,224,238,.35); }
/* Inner page components */
.industry-card { border:1px solid var(--edge); background:linear-gradient(180deg,rgba(7,20,38,.1) 30%,rgba(7,20,38,.92)), var(--card-img, none) center/cover no-repeat; }
.industry-card span { color:var(--text-lo); }
.system-map { background:linear-gradient(180deg,rgba(18,47,75,.6),rgba(12,34,56,.85)); border:1px solid var(--edge); }
.map-node { border-color:var(--edge); background:rgba(8,127,196,.08); }
.map-node:hover { border-color:var(--edge-hi); background:rgba(8,127,196,.16); }
.map-arrow { color:var(--accent2); }
.architecture-points li { color:#C7D6E5; }
.architecture-points li:before, .contact-checklist span:before { background:rgba(8,127,196,.15); color:var(--accent2); }
.contact-checklist span { color:#C7D6E5; }
.media-frame { box-shadow:0 0 0 1px var(--edge), 0 24px 50px rgba(0,0,0,.45); }
.media-badge { background:rgba(7,20,38,.75); color:#D8F6FF; border:1px solid var(--edge-hi); backdrop-filter:blur(8px); }
.photo-banner { background:linear-gradient(90deg,rgba(7,20,38,.92) 0%,rgba(16,41,67,.7) 100%), var(--banner-img) center/cover no-repeat, var(--bg); }
.photo-banner .eyebrow { color:var(--accent2); }
.steps:before { background:linear-gradient(90deg,#087FC4,#5EE0EE); box-shadow:0 0 10px rgba(94,224,238,.6); }
.step-icon { background:radial-gradient(circle,rgba(8,127,196,.25),rgba(12,34,56,.95) 70%); border-color:rgba(94,224,238,.7); color:#CFEFFF; box-shadow:0 0 18px rgba(8,127,196,.4); }
.step strong { color:#fff; }
.step p { color:var(--text-lo); }
.est-option { color:#C7D6E5; }
.est-option:hover, .est-option.active { background:rgba(8,127,196,.16); border-color:var(--edge-hi); box-shadow:inset 3px 0 0 var(--accent2); }
.est-option input { accent-color:var(--accent); }
.est-result { background:linear-gradient(90deg,#08182B,#0569A8); }
.est-result .button.primary { background:#fff; color:#08182B; }
.estimator-box h2 + p, .estimator-box p { color:var(--text-lo) !important; }
.project-tag { background:rgba(8,127,196,.15); color:var(--accent2); }
.project-note { color:#7F9BB8; }
.project-media { border-bottom:1px solid var(--edge); }
.modal-overlay { background:rgba(2,6,16,.8); }
.modal-box { background:linear-gradient(180deg,#0C2138,#0B1D33); border:1px solid var(--edge-hi); color:var(--text-lo); }
#modalTitle { color:var(--accent2) !important; }
#modalDesc, #modalMetrics { color:var(--text-lo) !important; }
.tech-pill { background:rgba(8,127,196,.15); color:#CFEFFF; border:1px solid var(--edge); }
.modal-box > div:last-child { background:rgba(7,20,38,.6) !important; border-color:var(--edge) !important; }
.modal-box > div:last-child strong { color:#fff !important; }
.modal-close { color:#9DB9D0; }
.form-group label { color:#fff; }
.form-control { background:rgba(255,255,255,.04); border-color:rgba(112,190,228,.3); color:#fff; }
.form-control::placeholder { color:#7F9BB8; }
.form-control:hover { border-color:rgba(112,190,228,.55); }
.form-control:focus { border-color:var(--accent2); box-shadow:0 0 0 3px rgba(94,224,238,.18); }
select.form-control option { background:#0C2138; color:#fff; }
.form-note { color:#7F9BB8; }
.contact-info a[href^="mailto"] { color:var(--accent2) !important; }
.contact-info strong { color:#fff; }
.faq { background:transparent; }
.faq-list details[open] summary:after { background-color:var(--accent2); border-color:var(--accent2); color:#03101F; }
/* Page CTA band: glass card over the earth photo */
.page-cta { background:transparent; }
.page-cta .container { padding:44px 48px; border-radius:16px; border:1px solid var(--edge-hi); background:linear-gradient(90deg,rgba(7,20,38,.95) 35%,rgba(7,20,38,.35)), url("../images/ai/cta-earth.jpg") 75% center/cover no-repeat; box-shadow:0 0 34px rgba(8,127,196,.2); }
.page-cta h2 { color:#fff; }
.page-cta p { color:#C7D6E5; }
/* Footer */
footer { background:#050F1D; color:var(--text-lo); border-top:1px solid var(--line); }
footer .brand { color:#fff; }
.footer-links a { color:#C4D2E1; }
.footer-links a:hover { color:var(--accent2); }
.footer-row { border-bottom-color:var(--line); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .project-card:focus-visible, .button:focus-visible { outline-color:var(--accent2); }
@media (max-width:1024px) {
  .navlinks { background:#07182B; border-bottom:1px solid var(--line); box-shadow:0 20px 40px rgba(0,0,0,.5); }
  .navlinks a { color:#C7D6E5; border-bottom-color:rgba(255,255,255,.06); }
  .navlinks a.active { color:var(--accent2); box-shadow:inset 3px 0 0 var(--accent2); }
  .cap-tiles { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .approach-wrap { grid-template-columns:1fr; }
  .featured-grid { grid-template-columns:1fr 1fr; }
  .feat-copy { grid-column:1 / -1; }
}
@media (max-width:900px) {
  .hero { min-height:0; background-position:center, center, 60% center, 0 0; }
  .hero-inner { text-align:left; }
  .hero p { margin:0 0 30px; }
  .ind-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .flow-steps { grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; }
  .flow-ico { width:62px; height:62px; }
  .flow-ico svg { width:28px; height:28px; }
  .flow-step strong { font-size:13px; }
  .flow-step:not(:last-child):after { right:-10px; top:20px; font-size:16px; }
  .page-hero.has-img, .page-hero { padding:130px 0 70px; min-height:0; }
  .page-cta .container { padding:32px 26px; }
}
@media (max-width:600px) {
  .cap-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ind-tiles, .featured-grid { grid-template-columns:1fr; }
  .feat-card { grid-template-columns:1fr; }
  .feat-card img { min-height:170px; }
  .flow-steps { grid-template-columns:1fr; gap:16px; }
  .flow-step { display:grid; grid-template-columns:62px 1fr; align-items:center; gap:16px; text-align:left; }
  .flow-ico { margin:0; }
  .flow-step:not(:last-child):after { display:none; }
  .flow-line { display:none; }
  .eyebrow.line:before, .eyebrow.line:after { width:28px; }
  .dk-section { padding:64px 0; }
  .hero h1 { font-size:clamp(32px,9vw,42px); }
}
/* One blue "colour" layer over every photo so mixed stock shots read as one set */
.tile-img:before, .ind-tile:before, .project-media:before, .media-frame:before, .page-hero.has-img:before, .industry-card:after { content:""; position:absolute; inset:0; display:block; background:#1560FF; mix-blend-mode:color; pointer-events:none; }
.tile-img:before { z-index:1; }
.tile-img:after { z-index:2; }
.ind-tile:before { z-index:0; border-radius:inherit; }
.ind-tile strong { position:relative; z-index:1; }
.project-media:before, .media-frame:before { z-index:1; }
.page-hero.has-img:before { width:auto; height:auto; clip-path:none; top:0; }
.industry-card { position:relative; }
.industry-card:after { z-index:0; border-radius:inherit; }
.industry-card strong, .industry-card span { position:relative; z-index:1; }
.feat-card img { filter:saturate(.55) brightness(.92); }
/* V17: white content sections between the dark ones; LT = light sections */
:root { --lt-ink:#12263A; --lt-text:#5D7085; --lt-line:#DCE6EF; --lt-accent:#087FC4; --lt-soft:#E8F6FF; }
main > section:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"], .page-cta) { background:#fff !important; color:var(--lt-text); border-top-color:var(--lt-line); }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) h2, :is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) h3 { color:var(--lt-ink); }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) p, :is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .section-head p { color:var(--lt-text); }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .eyebrow, :is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .section-kicker, :is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .why-number { color:var(--lt-accent); }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .eyebrow.line:before { background:linear-gradient(90deg,transparent,rgba(8,127,196,.45)); }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .eyebrow.line:after { background:linear-gradient(90deg,rgba(8,127,196,.45),transparent); }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .button:not(.primary) { color:var(--lt-ink); border-color:var(--lt-ink); background:transparent; }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .button:not(.primary):hover { color:#fff; background:var(--lt-ink); border-color:var(--lt-ink); box-shadow:none; }
/* Cards become white with a soft shadow */
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) :is(.cap-card, .shortcut-card, .why-card, .estimator-box, .form-box, .project-card, .feat-card, .cap-tile, .est-option) { background:#fff; border:1px solid var(--lt-line); box-shadow:0 4px 18px rgba(18,38,58,.05); }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) :is(.cap-card, .shortcut-card, .why-card, .project-card, .feat-card, .cap-tile):hover { border-color:#83CFFF; box-shadow:0 18px 40px rgba(8,127,196,.14); }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) :is(.cap-card, .why-card, .project-card, .shortcut-card) p { color:var(--lt-text); }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .icon-box { background:var(--lt-soft); color:var(--lt-accent); box-shadow:none; }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .cap-card:hover .icon-box { background:var(--lt-accent); color:#fff; }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) :is(.project-link, .feat-link, .shortcut-card a, .text-link) { color:var(--lt-accent); }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .project-tag { background:var(--lt-soft); color:var(--lt-accent); }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .project-note { color:#71849A; }
/* Home capability tiles on white */
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .tile-img:after { background:linear-gradient(180deg,rgba(255,255,255,0) 60%,#fff); }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .tile-ico { color:var(--lt-accent); filter:none; }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .cap-tile strong { color:var(--lt-ink); }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .cap-tile small { color:var(--lt-text); }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .feat-card h3 { color:var(--lt-ink); }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .feat-card li { color:var(--lt-text); }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .feat-card li:before { color:var(--lt-accent); }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .feat-card img { filter:none; }
/* Process steps, estimator, architecture, forms */
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .step-icon { background:#fff; color:var(--lt-accent); border-color:#B4DFF3; box-shadow:0 6px 18px rgba(8,127,196,.12); }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .step:hover .step-icon { background:var(--lt-accent); color:#fff; }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .step strong { color:var(--lt-ink); }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .steps:before { box-shadow:none; }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .est-option { color:var(--lt-ink); }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .est-option:hover, :is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .est-option.active { background:var(--lt-soft); border-color:var(--lt-accent); box-shadow:inset 3px 0 0 var(--lt-accent); }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .estimator-box p { color:var(--lt-text) !important; }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .architecture-points li, :is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .contact-checklist span { color:#29445D; }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .architecture-points li:before, :is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .contact-checklist span:before { background:var(--lt-soft); color:var(--lt-accent); }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .contact-info strong { color:var(--lt-ink); }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .contact-info a[href^="mailto"] { color:var(--lt-accent) !important; }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .form-group label { color:var(--lt-ink); }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .form-control { background:#fff; border-color:#DCE6EF; color:var(--lt-ink); }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .form-control::placeholder { color:#91A9BF; }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .form-control:focus { border-color:var(--lt-accent); box-shadow:0 0 0 3px rgba(8,127,196,.15); }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) select.form-control option { background:#fff; color:var(--lt-ink); }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .form-note { color:#71849A; }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .media-copy h2 { color:var(--lt-ink); }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .media-badge { background:#fff; color:var(--lt-accent); border-color:transparent; box-shadow:0 8px 20px rgba(18,38,58,.12); }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .media-frame { box-shadow:0 24px 50px rgba(18,38,58,.14); }
:is(.caps-home, .industries-home, .featured, .capabilities, .architecture, .industries, .approach, .media-section, .projects, .why-us, .contact-section, [id="estimator"]) .industry-card { box-shadow:0 10px 30px rgba(18,38,58,.12); }
/* Lighter photo tint now that half the page is white */
.tile-img:before, .ind-tile:before, .project-media:before, .media-frame:before, .industry-card:after { opacity:.28; }
/* Dark cards that sit inside light sections keep light text */
.featured .feat-cta h2 { color:#fff; }
.architecture .system-map p { color:#9DB9D0; }
/* V18: original palette restored; photos shown in their own colours */
.tile-img:before, .ind-tile:before, .project-media:before, .media-frame:before, .page-hero.has-img:before, .industry-card:after { opacity:0; }
.hero { background-color:#071426; }
main > section:is(.media-section.tinted, .projects, .contact-section, [id="estimator"], .why-us) { background:#F4F8FC !important; }
/* Dropdown menus (desktop: hover / focus; mobile: tap the chevron) */
.nav-drop { position:relative; display:flex; align-items:center; gap:2px; }
.drop-toggle { width:22px; height:22px; padding:0; border:0; background:none; color:inherit; cursor:pointer; display:grid; place-items:center; }
.drop-toggle:before { content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .25s ease; }
.nav-drop:hover .drop-toggle:before, .nav-drop.open .drop-toggle:before { transform:translateY(1px) rotate(-135deg); }
.drop-menu { position:absolute; top:calc(100% + 16px); left:-18px; min-width:230px; padding:8px; border-radius:10px; background:#07182B; border:1px solid rgba(112,190,228,.3); box-shadow:0 20px 44px rgba(0,0,0,.4); opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .22s ease, transform .22s ease, visibility 0s .22s; z-index:5; }
.drop-menu:before { content:""; position:absolute; left:0; right:0; top:-18px; height:18px; }
.nav-drop:hover .drop-menu, .nav-drop:focus-within .drop-menu, .nav-drop.open .drop-menu { opacity:1; visibility:visible; transform:none; transition:opacity .22s ease, transform .22s ease; }
.navlinks .drop-menu a { display:block; padding:10px 12px; border-radius:6px; font-size:14px; color:#C7D6E5; white-space:nowrap; transform:none; }
.navlinks .drop-menu a:after { display:none; }
.navlinks .drop-menu a:hover, .navlinks .drop-menu a:focus-visible { background:rgba(94,224,238,.1); color:var(--cyan); padding-left:16px; }
.navlinks .drop-menu a { transition:background .2s ease, color .2s ease, padding-left .2s ease; }
.cap-card, .project-card { scroll-margin-top:110px; }
@media (max-width:1024px) {
  .nav-drop { display:grid; grid-template-columns:1fr 44px; align-items:center; }
  .drop-toggle { width:44px; height:40px; }
  .drop-menu { position:static; grid-column:1 / -1; display:none; min-width:0; padding:0 0 8px 14px; background:transparent; border:0; box-shadow:none; opacity:1; visibility:visible; transform:none; }
  .drop-menu:before { display:none; }
  .nav-drop.open .drop-menu { display:block; }
  .navlinks .drop-menu a { padding:9px 10px; font-size:14px; border-bottom:0; }
}
/* Tighter vertical rhythm, closer to the reference */
.capabilities, .architecture, .industries, .media-section, .approach, .why-us, .projects, .contact-section, [id="estimator"], .faq { padding:72px 0; }
main > section.dk-section { padding:60px 0; }
.page-cta { padding:52px 0; }
.section-head, .section-head.center { margin-bottom:36px; }
.hero { min-height:600px; padding:140px 0 90px; }
.page-hero, .page-hero.has-img { min-height:360px; padding:140px 0 64px; }
/* Keep body copy at 14px or larger */
.cap-card p, .why-card p, .project-card p, .step p, .feat-card li, .industry-card span, .est-option, .map-node small { font-size:14px; }
.map-node small { font-size:12px; }
@media (max-width:900px) {
  .hero { padding:120px 0 72px; }
  .page-hero, .page-hero.has-img { padding:120px 0 56px; min-height:0; }
}
@media (max-width:600px) {
  .capabilities, .architecture, .industries, .media-section, .approach, .why-us, .projects, .contact-section, [id="estimator"], .faq { padding:56px 0; }
  main > section.dk-section { padding:52px 0; }
}
/* ==========================================================================
   V20: photo backgrounds come from inline background-image (paths stay
   relative to the page); the dark gradients live on an overlay layer.
   ========================================================================== */
.page-hero.has-img, .ind-tile, .industry-card, .photo-banner { background-size:cover; background-position:center; background-repeat:no-repeat; background-color:var(--bg); }
.page-hero.has-img:before { opacity:1; mix-blend-mode:normal; z-index:0; background:linear-gradient(90deg,#071426 0%,rgba(7,20,38,.9) 40%,rgba(7,20,38,.45) 100%), radial-gradient(ellipse at 80% 40%,rgba(8,127,196,.3),transparent 60%); }
.ind-tile:before { opacity:1; mix-blend-mode:normal; background:linear-gradient(90deg,rgba(7,20,38,.85) 10%,rgba(7,20,38,.25) 75%); }
.industry-card:after { opacity:1; mix-blend-mode:normal; background:linear-gradient(180deg,rgba(7,20,38,.1) 30%,rgba(7,20,38,.92)); }
.photo-banner { position:relative; }
.photo-banner:before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,20,38,.92) 0%,rgba(16,41,67,.7) 100%); }
.photo-banner .container { position:relative; z-index:1; }
/* ==========================================================================
   V21: AI-generated artwork (images/ai/, cropped from the owner's own generated mockup)
   ========================================================================== */
.hero { background:linear-gradient(90deg,#071426 0%,rgba(7,20,38,.92) 32%,rgba(7,20,38,.3) 60%,rgba(7,20,38,0) 100%), url("../images/ai/hero-chip-ai.jpg") right -200px center/auto 115% no-repeat, #071426; }
.hero:after { height:120px; }
@media (max-width:900px) {
  .hero { background:linear-gradient(180deg,rgba(7,20,38,.45) 0%,rgba(7,20,38,.9) 55%,#071426 100%), url("../images/ai/hero-chip-ai.jpg") center top/auto 75% no-repeat, #071426; }
}
@media (min-width:1500px) {
  .hero { background:linear-gradient(90deg,#071426 0%,rgba(7,20,38,.92) 32%,rgba(7,20,38,.3) 60%,rgba(7,20,38,0) 100%), url("../images/ai/hero-chip-ai.jpg") right -120px center/auto 150% no-repeat, #071426; }
}
/* V22: AI earth artwork for the call-to-action cards */
.feat-cta { background:linear-gradient(90deg,rgba(7,20,38,.95) 35%,rgba(7,20,38,.3)), url("../images/ai/cta-earth.jpg") right center/auto 110% no-repeat, #071426; }
.page-cta .container { background:linear-gradient(90deg,rgba(7,20,38,.97) 45%,rgba(7,20,38,.2)), url("../images/ai/cta-earth.jpg") right center/auto 150% no-repeat, #071426; }
/* ==========================================================================
   V25: home hero rebuilt as the wide banner from the owner's design
   (text left with a glowing bar, chip artwork on the right half)
   ========================================================================== */
.hero { min-height:0; height:calc(76px + max(380px, 100vw / 4.525)); padding:76px 0 0; display:flex; align-items:center; background:radial-gradient(ellipse at 22% 50%, rgba(28,78,150,.38), transparent 62%), linear-gradient(90deg,#040C1E 0%,#06132B 55%,#071733 100%); border-bottom:1px solid rgba(64,160,230,.25); }
.hero:before { display:block; content:""; position:absolute; top:76px; right:0; bottom:0; left:auto; width:56%; height:auto; opacity:1; background:url("../images/ai/hero-banner.jpg") 30% center/cover no-repeat; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%); mask-image:linear-gradient(90deg,transparent 0,#000 22%); }
.hero:after { display:none; }
.hero .container { position:relative; z-index:1; width:min(1320px, calc(100% - 56px)); }
.hero-copy { position:relative; padding-left:clamp(28px,4vw,62px); max-width:720px; }
.hero h1 { position:relative; margin:0 0 clamp(18px,2.2vw,34px); font-size:clamp(32px,3.3vw,62px); font-weight:600; line-height:1.2; letter-spacing:-.5px; color:#fff; }
.hero h1:before { content:""; position:absolute; left:calc(-1 * clamp(28px,4vw,62px)); top:4%; bottom:-24%; width:4px; border-radius:4px; background:linear-gradient(180deg,#7FE3FF,#2E9BEA); box-shadow:0 0 12px rgba(80,190,255,.9), 0 0 26px rgba(46,155,234,.6); }
.hero h1 span { display:inline; background:linear-gradient(90deg,#66CDF4,#3D9FDE); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p { margin:0; max-width:none; font-size:clamp(15px,1.3vw,23px); line-height:1.55; color:#E3ECF8; }
@media (max-width:900px) {
  .hero { height:auto; padding:calc(70px + 230px) 0 56px; }
  .hero:before { top:70px; bottom:auto; left:0; width:100%; height:250px; background-position:32% center; -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent); mask-image:linear-gradient(180deg,#000 55%,transparent); }
  .hero .container { width:calc(100% - 40px); }
}
/* V26: architecture diagram - solid deep navy with glowing cyan, no grey wash */
.system-map { background:radial-gradient(ellipse at 50% 0%, rgba(43,150,235,.32), transparent 60%), linear-gradient(160deg,#0A2148 0%,#071633 55%,#050F24 100%); border:1px solid rgba(94,224,238,.45); box-shadow:0 0 0 1px rgba(94,224,238,.08), 0 24px 60px rgba(4,14,36,.35), 0 0 40px rgba(43,150,235,.18); }
.system-map-title { color:#5EE0EE; text-shadow:0 0 10px rgba(94,224,238,.45); }
.map-node { background:linear-gradient(180deg,rgba(43,140,235,.22),rgba(10,40,90,.55)); border:1px solid rgba(94,224,238,.55); box-shadow:inset 0 0 16px rgba(94,224,238,.12), 0 0 14px rgba(43,150,235,.18); }
.map-node:hover { background:linear-gradient(180deg,rgba(43,150,235,.38),rgba(12,50,110,.7)); border-color:#7FE8F4; box-shadow:inset 0 0 18px rgba(94,224,238,.22), 0 0 22px rgba(94,224,238,.35); }
.map-node strong { color:#fff; }
.map-node small { color:#9FD8F0; }
.map-arrow { color:#5EE0EE; text-shadow:0 0 10px rgba(94,224,238,.8); }
.architecture .system-map p, .map-footnote { color:#8FB4D6; }
/* ==========================================================================
   V27: home page rebuilt from the Gemini design; new logo + footer site-wide
   ========================================================================== */

/* Logo: italic N mark + English name with Chinese name underneath */
.brand { gap:12px; }
.brand-mark, .brand:hover .brand-mark { width:auto; height:auto; padding:0; background:none; border:0; border-radius:0; box-shadow:none; transform:none; display:block; }
.brand-mark svg { display:block; width:44px; height:37px; filter:drop-shadow(0 0 8px rgba(53,180,255,.45)); }
.brand-name { display:flex; flex-direction:column; line-height:1.05; }
.brand-name b { font-size:19px; font-weight:700; letter-spacing:.5px; color:#fff; }
.brand-name small { margin-top:4px; font-size:12px; font-weight:500; letter-spacing:6px; color:#C7D6E5; }

/* Shared pill button */
.pill-btn { display:inline-flex; align-items:center; gap:10px; padding:12px 26px; border-radius:999px; background:linear-gradient(90deg,#0A84D6,#1FA8F0); color:#fff; font-size:16px; font-weight:600; box-shadow:0 0 20px rgba(31,168,240,.35); transition:box-shadow .2s ease, transform .2s ease; }
.pill-btn span { font-size:20px; line-height:1; transition:transform .2s ease; }
.pill-btn:hover { transform:translateY(-1px); box-shadow:0 0 28px rgba(31,168,240,.6); }
.pill-btn:hover span { transform:translateX(3px); }
.pill-btn.sm { padding:9px 20px; font-size:14px; }

/* Hero: three-line headline, glowing bar beside headline + subtitle, pill button */
.hero { height:calc(76px + max(420px, 100vw / 3.3)); }
.hero h1 { font-size:clamp(32px,3.4vw,60px); font-weight:700; line-height:1.18; margin:0 0 22px; }
.hero h1:before { display:none; }
.hero-copy:before { content:""; position:absolute; left:0; top:6px; bottom:74px; width:4px; border-radius:4px; background:linear-gradient(180deg,#7FE3FF,#2E9BEA); box-shadow:0 0 12px rgba(80,190,255,.9), 0 0 26px rgba(46,155,234,.6); }
.hero p { font-size:clamp(15px,1.25vw,20px); max-width:660px; }
.hero .pill-btn { margin-top:28px; }

/* Section heads (left aligned) */
.h-head { margin-bottom:30px; }
.h-head h2 { margin:0 0 10px; font-size:clamp(28px,2.6vw,40px); font-weight:700; letter-spacing:-.3px; color:#0B1B33; }
.h-head p { margin:0; max-width:720px; font-size:17px; line-height:1.6; color:#4A5B70; }

/* Full-stack ODM capability: six white icon cards */
main > section.h-odm, main > section.h-why { background:#fff !important; padding:56px 0 64px; }
.odm-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
.odm-card { display:flex; flex-direction:column; align-items:center; text-align:center; padding:26px 16px 24px; background:#fff; border:1px solid #E5EAF1; border-radius:10px; box-shadow:0 6px 20px rgba(11,27,51,.07); transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.odm-card:hover { transform:translateY(-4px); border-color:#A9C8F5; box-shadow:0 16px 36px rgba(21,118,210,.16); }
.odm-card svg { width:48px; height:48px; margin-bottom:14px; fill:none; stroke:#1576D2; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.odm-card h3 { display:flex; align-items:center; justify-content:center; min-height:2.6em; margin:0 0 12px; font-size:18px; font-weight:700; line-height:1.3; color:#0B1B33; }
.odm-card p { margin:0; font-size:14px; line-height:1.6; color:#5B6B80; }

/* Industry-focused solutions: dark band with three photo cards */
main > section.h-solutions { padding:56px 0 64px; background:radial-gradient(ellipse at 70% 0%,rgba(30,110,200,.35),transparent 55%), linear-gradient(180deg,#071733,#061229) !important; }
.h-solutions .h-head h2 { color:#fff; }
.h-solutions .h-head p { color:#C7D6E5; }
.sol-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.sol-card { position:relative; display:flex; align-items:flex-end; gap:14px; height:260px; padding:20px 22px; border-radius:10px; overflow:hidden; border:1px solid rgba(94,224,238,.55); box-shadow:0 0 18px rgba(43,150,235,.25); background-color:#071426; background-size:cover; background-position:center; transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.sol-card:before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,18,41,0) 35%,rgba(6,18,41,.92) 100%); }
.sol-card:hover { transform:translateY(-4px); border-color:#7FE8F4; box-shadow:0 0 28px rgba(94,224,238,.4); }
.sol-ico { position:relative; flex:0 0 46px; height:46px; color:#5EE0EE; filter:drop-shadow(0 0 6px rgba(94,224,238,.7)); }
.sol-ico svg { width:46px; height:46px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.sol-text { position:relative; display:flex; flex-direction:column; }
.sol-text strong { font-size:21px; font-weight:700; color:#fff; }
.sol-text small { margin-top:4px; font-size:14px; line-height:1.5; color:#D5E2F2; }

/* Why choose us: four columns with dividers */
.why-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.why-item { padding:4px 28px; border-left:1px solid #E3E8F0; }
.why-item:first-child { padding-left:0; border-left:0; }
.why-item svg { width:40px; height:40px; fill:none; stroke:#1576D2; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.why-item h3 { margin:14px 0 8px; font-size:22px; font-weight:700; color:#0B1B33; }
.why-item p { margin:0; font-size:15px; line-height:1.6; color:#4A5B70; }

/* Call to action: Earth on the left, glass card on the right */
main > section.h-cta { position:relative; overflow:hidden; padding:44px 0; background:#040C1E !important; }
.h-cta:before { content:""; position:absolute; left:0; top:0; bottom:0; width:62%; background:url("../images/ai/cta-earth.jpg") center/cover no-repeat; transform:scaleX(-1); -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 35%); mask-image:linear-gradient(90deg,transparent 0,#000 35%); }
.h-cta .container { position:relative; display:flex; justify-content:flex-end; }
.cta-glass { width:min(560px,100%); padding:30px 34px; border-radius:14px; border:1px solid rgba(94,224,238,.6); background:linear-gradient(135deg,rgba(14,40,80,.75),rgba(6,18,41,.85)); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:0 0 24px rgba(43,150,235,.35), inset 0 0 20px rgba(94,224,238,.08); }
.cta-glass h2 { margin:0 0 12px; font-size:clamp(26px,2.4vw,34px); font-weight:700; line-height:1.2; color:#fff; }
.cta-glass p { margin:0 0 22px; font-size:16px; line-height:1.6; color:#D5E2F2; }

/* Footer (all pages) */
footer.site-footer { padding:28px 0 18px; background:#040C1E; border-top:1px solid rgba(94,224,238,.15); }
.foot-main { display:flex; align-items:center; flex-wrap:wrap; gap:22px; padding-bottom:18px; border-bottom:1px solid rgba(199,214,229,.12); }
.foot-divider { width:1px; height:40px; background:rgba(199,214,229,.25); }
.foot-tag { margin:0; font-size:13px; line-height:1.5; color:#C7D6E5; }
.foot-links { display:flex; flex-wrap:wrap; gap:26px; margin-left:auto; }
.foot-links a { font-size:14px; color:#D6E2F3; transition:color .2s ease; }
.foot-links a:hover { color:var(--cyan); }
.foot-copy { padding-top:14px; font-size:12px; color:#7F9BB8; }

@media (max-width:1024px) {
  .odm-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .why-row { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:30px; }
  .why-item:nth-child(odd) { padding-left:0; border-left:0; }
  .foot-links { margin-left:0; width:100%; order:5; }
}
@media (max-width:900px) {
  .sol-grid { grid-template-columns:1fr; }
  .sol-card { height:220px; }
  .hero-copy:before { bottom:74px; }
  .h-cta:before { width:100%; opacity:.55; }
  .h-cta .container { justify-content:center; }
}
@media (max-width:600px) {
  .brand-mark svg { width:34px; height:29px; }
  .brand-name b { font-size:15px; }
  .brand-name small { font-size:10px; letter-spacing:4px; }
  .odm-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .odm-card { padding:20px 12px; }
  .why-row { grid-template-columns:1fr; }
  .why-item, .why-item:nth-child(odd) { padding:0 0 22px; border-left:0; border-bottom:1px solid #E3E8F0; }
  .why-item:last-child { border-bottom:0; }
  .foot-divider { display:none; }
  .cta-glass { padding:24px 22px; }
}

/* ==========================================================================
   V28: inner pages rebuilt from the Gemini 7-page design
   ========================================================================== */

/* Inner page hero: text + glowing bar on the left, photo fading in on the right */
main > section.ph { position:relative; display:flex; align-items:center; height:calc(76px + max(300px, 100vw / 5)); padding:76px 0 0; overflow:hidden; border-top:0; border-bottom:1px solid rgba(64,160,230,.25); background:radial-gradient(ellipse at 22% 50%,rgba(28,78,150,.38),transparent 62%), linear-gradient(90deg,#040C1E 0%,#06132B 55%,#071733 100%) !important; }
.ph-img { position:absolute; top:76px; right:0; bottom:0; width:56%; background-size:cover; background-position:center; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28%); mask-image:linear-gradient(90deg,transparent 0,#000 28%); }
.ph .container { position:relative; z-index:1; width:min(1320px, calc(100% - 56px)); }
.ph-copy { position:relative; max-width:560px; padding-left:clamp(28px,3.5vw,54px); }
.ph-copy:before { content:""; position:absolute; left:0; top:6px; bottom:6px; width:4px; border-radius:4px; background:linear-gradient(180deg,#7FE3FF,#2E9BEA); box-shadow:0 0 12px rgba(80,190,255,.9), 0 0 26px rgba(46,155,234,.6); }
.ph h1 { margin:0 0 14px; font-size:clamp(32px,3.2vw,54px); font-weight:700; line-height:1.15; color:#fff; }
.ph p { margin:0; font-size:clamp(15px,1.2vw,19px); line-height:1.6; color:#D5E2F2; }

/* Section shells */
main > section.s-white { padding:64px 0; background:#fff !important; }
main > section.s-grey { padding:64px 0; background:#F4F8FC !important; }
main > section.s-dark { padding:60px 0 64px; color:#C7D6E5; background:radial-gradient(ellipse at 50% 0%,rgba(30,110,200,.3),transparent 60%), linear-gradient(180deg,#071733,#061229) !important; }
.s-title { margin:0 0 26px; font-size:clamp(26px,2.4vw,36px); font-weight:700; letter-spacing:-.3px; color:#0B1B33; }
.s-title.center { text-align:center; }
.s-dark .s-title { color:#fff; }
.s-dark p { color:#C7D6E5; }

/* Two-column image + text */
.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,60px); align-items:center; }
.split.rev .split-media { order:2; }
.split-media img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:12px; box-shadow:0 18px 40px rgba(11,27,51,.14); }
.split-copy p { margin:0; font-size:17px; line-height:1.9; color:#4A5B70; }
.check-list { display:grid; gap:16px; margin:0; padding:0; list-style:none; }
.check-list li { display:flex; align-items:center; gap:12px; font-size:17px; color:#1F2D40; }
.check-list li:before { content:"✓"; display:grid; place-items:center; flex:0 0 26px; height:26px; border-radius:50%; border:1.5px solid #1576D2; color:#1576D2; font-size:13px; font-weight:700; }

/* Glass value cards (dark) */
.glass-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; max-width:980px; margin:0 auto; }
.glass-card { padding:30px 24px; text-align:center; border-radius:12px; border:1px solid rgba(94,224,238,.5); background:linear-gradient(180deg,rgba(20,60,120,.35),rgba(6,18,41,.6)); box-shadow:0 0 18px rgba(43,150,235,.2), inset 0 0 18px rgba(94,224,238,.06); transition:transform .3s ease, box-shadow .3s ease; }
.glass-card:hover { transform:translateY(-4px); box-shadow:0 0 28px rgba(94,224,238,.35), inset 0 0 18px rgba(94,224,238,.1); }
.glass-card svg, .icon-item svg { width:46px; height:46px; fill:none; stroke:#5EE0EE; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 6px rgba(94,224,238,.6)); }
.glass-card h3 { margin:14px 0 6px; font-size:20px; font-weight:700; color:#fff; }
.glass-card p { margin:0; font-size:14px; line-height:1.6; }

/* Icon row (dark) */
.icon-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:24px; text-align:center; }
.icon-item h3 { margin:12px 0 4px; font-size:17px; font-weight:600; color:#fff; }
.icon-item p { margin:0; font-size:14px; color:#A9BCD8; }

/* Image cards (services) */
.img-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.img-card { overflow:hidden; background:#fff; border:1px solid #E5EAF1; border-radius:12px; box-shadow:0 6px 20px rgba(11,27,51,.07); scroll-margin-top:110px; transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.img-card:hover { transform:translateY(-4px); border-color:#A9C8F5; box-shadow:0 16px 36px rgba(21,118,210,.16); }
.img-card img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.img-card div { padding:18px 20px 22px; }
.img-card h3 { margin:0 0 6px; font-size:19px; font-weight:700; color:#0B1B33; }
.img-card p { margin:0; font-size:14px; line-height:1.6; color:#5B6B80; }

/* Row list (industries, cases) */
.row-list { display:grid; gap:18px; }
.row-item { display:grid; grid-template-columns:240px 1fr 40px; align-items:center; gap:26px; padding:14px; background:#fff; border:1px solid #E5EAF1; border-radius:12px; box-shadow:0 6px 20px rgba(11,27,51,.07); cursor:pointer; scroll-margin-top:110px; transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.row-item:hover, .row-item:focus-visible { transform:translateY(-3px); border-color:#A9C8F5; box-shadow:0 16px 36px rgba(21,118,210,.16); }
.row-item img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:8px; }
.row-item h3 { margin:0 0 6px; font-size:20px; font-weight:700; color:#0B1B33; }
.row-item p { margin:0; font-size:15px; line-height:1.7; color:#4A5B70; }
.row-tag { display:inline-block; margin-bottom:6px; padding:3px 12px; border-radius:999px; background:#E8F2FD; color:#1576D2; font-size:12px; font-weight:600; }
.row-arrow { font-size:26px; color:#1576D2; transition:transform .2s ease; }
.row-item:hover .row-arrow { transform:translateX(5px); }
.row-note { margin:22px 0 0; text-align:center; font-size:13px; color:#71849A; }

/* Six process steps */
.steps6 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 50px; }
.step6 { position:relative; padding:26px 24px; background:#fff; border:1px solid #E5EAF1; border-radius:12px; box-shadow:0 6px 20px rgba(11,27,51,.07); }
.step6:not(:nth-child(3n)):after { content:"→"; position:absolute; top:50%; right:-37px; transform:translateY(-50%); font-size:24px; color:#1576D2; }
.step6 svg { width:40px; height:40px; fill:none; stroke:#1576D2; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.step6 .n { display:block; margin:12px 0 2px; font-size:14px; font-weight:700; color:#1576D2; }
.step6 h3 { margin:0 0 6px; font-size:19px; font-weight:700; color:#0B1B33; }
.step6 p { margin:0; font-size:14px; line-height:1.6; color:#5B6B80; }

/* End-to-end integration: stacked glowing layers */
.integ { display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:center; }
.integ-copy p { margin:0; font-size:17px; line-height:1.9; }
.stack { display:grid; gap:10px; }
.stack-layer { display:grid; grid-template-columns:1fr 190px; align-items:center; gap:20px; }
.plate { justify-self:end; width:var(--w); height:42px; border-radius:8px; transform:perspective(420px) rotateX(38deg); background:linear-gradient(90deg,rgba(43,140,235,.5),rgba(94,224,238,.3)); border:1px solid rgba(94,224,238,.75); box-shadow:0 0 18px rgba(43,150,235,.45), inset 0 0 14px rgba(94,224,238,.25); }
.stack-layer b { position:relative; padding-left:18px; font-size:15px; font-weight:600; color:#fff; }
.stack-layer b:before { content:""; position:absolute; left:0; top:50%; width:10px; height:1px; background:#5EE0EE; box-shadow:0 0 6px #5EE0EE; }

/* Contact: form card + info column */
.contact2 { display:grid; grid-template-columns:1.25fr .75fr; gap:40px; align-items:start; }
.form-card { padding:30px; background:#fff; border:1px solid #E5EAF1; border-radius:14px; box-shadow:0 10px 30px rgba(11,27,51,.08); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px 18px; }
.form-grid .full { grid-column:1 / -1; }
.contact2 .form-group label { color:#12263A; font-weight:600; }
.contact2 .form-control { background:#fff; border:1px solid #D5DCE6; color:#12263A; }
.contact2 .form-control::placeholder { color:#9AA6B8; }
.contact2 .form-control:focus { border-color:#1576D2; box-shadow:0 0 0 3px rgba(21,118,210,.15); }
.contact2 .pill-btn { border:0; cursor:pointer; font-family:inherit; }
.contact2 .form-note { margin-top:12px; color:#71849A; }
.info-list { display:grid; gap:18px; margin:0 0 24px; padding:0; list-style:none; }
.info-list li { display:flex; align-items:center; gap:14px; font-size:16px; color:#1F2D40; }
.info-list svg { flex:0 0 26px; width:26px; height:26px; fill:none; stroke:#1576D2; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.info-list a { color:#1576D2; font-weight:600; }
.info-col img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:12px; box-shadow:0 18px 40px rgba(11,27,51,.14); }

@media (max-width:1024px) {
  .img-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .steps6 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .step6:not(:nth-child(3n)):after { display:none; }
  .integ, .contact2 { grid-template-columns:1fr; }
}
@media (max-width:900px) {
  main > section.ph { height:auto; padding:calc(70px + 200px) 0 48px; }
  .ph-img { top:70px; left:0; width:100%; height:220px; bottom:auto; -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent); mask-image:linear-gradient(180deg,#000 55%,transparent); }
  .ph .container { width:calc(100% - 40px); }
  .split, .split.rev { grid-template-columns:1fr; }
  .split.rev .split-media { order:0; }
  .glass-grid { grid-template-columns:1fr; }
  .row-item { grid-template-columns:150px 1fr; }
  .row-arrow { display:none; }
}
@media (max-width:600px) {
  main > section.s-white, main > section.s-grey { padding:48px 0; }
  .img-grid, .steps6, .form-grid { grid-template-columns:1fr; }
  .row-item { grid-template-columns:1fr; }
  .stack-layer { grid-template-columns:1fr 130px; gap:12px; }
  .form-card { padding:22px; }
}

.split-media img, .img-card img, .row-item img, .info-col img { height:auto; }

/* ==========================================================================
   V29: more compact layout - shorter heroes, tighter sections, smaller type
   ========================================================================== */
.hero { height:calc(76px + max(340px, 100vw / 3.9)); }
.hero h1 { font-size:clamp(28px,2.8vw,48px); margin-bottom:16px; }
.hero p { font-size:clamp(14px,1.1vw,18px); }
.hero .pill-btn { margin-top:20px; }
main > section.ph { height:calc(76px + max(220px, 100vw / 6.5)); }
.ph h1 { font-size:clamp(26px,2.5vw,42px); margin-bottom:10px; }
.ph p { font-size:clamp(14px,1.05vw,17px); }

main > section.s-white, main > section.s-grey { padding:44px 0; }
main > section.s-dark { padding:42px 0 46px; }
main > section.h-odm, main > section.h-why { padding:42px 0 46px; }
main > section.h-solutions { padding:42px 0 46px; }
main > section.h-cta { padding:28px 0; }

.s-title { font-size:clamp(22px,2vw,30px); margin-bottom:20px; }
.h-head { margin-bottom:22px; }
.h-head h2 { font-size:clamp(23px,2.1vw,32px); margin-bottom:8px; }
.h-head p { font-size:15px; }

.pill-btn { padding:10px 22px; font-size:15px; }
.odm-grid { gap:14px; }
.odm-card { padding:20px 12px 18px; }
.odm-card svg { width:40px; height:40px; margin-bottom:10px; }
.odm-card h3 { font-size:16px; margin-bottom:8px; }
.odm-card p { font-size:13px; }
.sol-grid { gap:16px; }
.sol-card { height:210px; padding:16px 18px; }
.sol-ico, .sol-ico svg { width:40px; height:40px; flex-basis:40px; }
.sol-text strong { font-size:18px; }
.sol-text small { font-size:13px; }
.why-item svg { width:34px; height:34px; }
.why-item h3 { font-size:19px; margin:10px 0 6px; }
.why-item p { font-size:14px; }
.cta-glass { padding:22px 26px; }
.cta-glass h2 { font-size:clamp(21px,1.9vw,27px); margin-bottom:8px; }
.cta-glass p { font-size:15px; margin-bottom:16px; }

.split-copy p { font-size:16px; line-height:1.8; }
.check-list { gap:12px; }
.check-list li { font-size:16px; }
.split-media img, .info-col img { aspect-ratio:16/9; }
.glass-grid { gap:16px; max-width:900px; }
.glass-card { padding:22px 18px; }
.glass-card svg, .icon-item svg { width:40px; height:40px; }
.glass-card h3 { font-size:18px; margin:10px 0 4px; }
.icon-row { gap:18px; }
.icon-item h3 { font-size:15px; margin-top:10px; }
.icon-item p { font-size:13px; }
.img-grid { gap:18px; }
.img-card div { padding:14px 16px 16px; }
.img-card h3 { font-size:17px; }
.img-card p { font-size:13px; }
.row-list { gap:14px; }
.row-item { grid-template-columns:200px 1fr 36px; gap:20px; padding:12px; }
.row-item h3 { font-size:18px; }
.row-item p { font-size:14px; }
.steps6 { gap:18px 44px; }
.step6 { padding:20px; }
.step6 svg { width:34px; height:34px; }
.step6 .n { margin-top:8px; }
.step6 h3 { font-size:17px; }
.step6 p { font-size:13px; }
.plate { height:36px; }
.stack { gap:8px; }
.integ-copy p { font-size:16px; }
.form-card { padding:24px; }
.info-list { gap:14px; }
footer.site-footer { padding:22px 0 14px; }
.foot-main { padding-bottom:14px; }
.foot-copy { padding-top:10px; }
@media (max-width:900px) {
  .hero { height:auto; padding:calc(70px + 210px) 0 44px; }
  main > section.ph { height:auto; padding:calc(70px + 180px) 0 40px; }
  .ph-img { height:200px; }
  .sol-card { height:190px; }
  .row-item { grid-template-columns:140px 1fr; }
}
@media (max-width:600px) {
  main > section.s-white, main > section.s-grey, main > section.s-dark, main > section.h-odm, main > section.h-why, main > section.h-solutions { padding:36px 0; }
  .row-item { grid-template-columns:1fr; }
}