:root{--u:min(0.10080645vw,1.4516px);--navy:#151a23;--blue:#2169fb;--text:#101723;--muted:#747f91}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(80*var(--u))}
body{margin:0;color:var(--text);background:#f7faff;font-family:"Noto Sans CJK SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,a{font:inherit;-webkit-tap-highlight-color:transparent}
button{cursor:pointer}a{text-decoration:none;color:inherit}
img{max-width:none}h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid #82a6ff;outline-offset:3px}
.skip-link{position:absolute;left:10px;top:-60px;z-index:100;background:#fff;color:#000;padding:10px}.skip-link:focus{top:10px}
.design-frame{position:relative;width:calc(992*var(--u));max-width:100%;margin:auto}
.design-container{position:relative;width:calc(872*var(--u));max-width:calc(100% - 30px);margin:auto}
.image-crop{position:relative;overflow:hidden;isolation:isolate}
.image-crop>img{position:absolute;max-width:none;width:calc(992*var(--u));height:calc(1586*var(--u));object-fit:fill}
.site-header{position:fixed;z-index:50;top:0;left:0;width:100%;height:calc(62*var(--u));color:#f6f8ff;background:#131b28;transition:box-shadow .18s,border-color .18s;border-bottom:1px solid #ffffff0b}
.site-header.is-scrolled{background:#131b28;border-bottom-color:#ffffff1b;box-shadow:0 9px 24px #0b14242b}
.header-inner{height:100%;display:grid;grid-template-columns:calc(253*var(--u)) 1fr auto;align-items:center;gap:0}
.brand{display:flex;align-items:center;width:calc(156*var(--u));height:calc(52*var(--u))}
.brand img{height:calc(52*var(--u));width:calc(156*var(--u));object-fit:contain;object-position:left center;transform:translateX(calc(-11*var(--u)))}
.main-nav{display:flex;align-items:center;gap:calc(37*var(--u));white-space:nowrap}
.main-nav a{position:relative;padding:calc(11*var(--u)) 0;font-size:calc(9*var(--u));font-weight:500;letter-spacing:.05em;color:#fff;transition:color .15s}
.main-nav a:hover,.main-nav a.active{color:#3984ff}
.main-nav a.active::after{content:"";position:absolute;left:0;bottom:calc(4*var(--u));height:calc(2*var(--u));width:100%;background:#2874ff}
.header-cta{justify-self:end;display:flex;align-items:center;gap:calc(13*var(--u));border:1px solid #2473ff;border-radius:calc(11*var(--u));font-size:calc(10*var(--u));color:#4b96ff;background:transparent;padding:calc(7*var(--u)) calc(22*var(--u));height:calc(30*var(--u));min-width:calc(105*var(--u));justify-content:center}
.header-cta:hover{background:#246af724;color:#fff}
.header-cta svg{width:calc(13*var(--u));height:calc(13*var(--u));stroke-width:1.8}
.mobile-menu-button{display:none}

/* Hero: the actual layout illustration is taken from the selected source, without re-generating it. */
.hero{height:calc(470*var(--u));background:radial-gradient(circle at 76% 45%,#202d44 0%,#171d28 40%,#131923 80%);color:#fff;overflow:hidden}
.hero-frame{height:100%}
.hero-art{position:absolute;top:calc(52*var(--u));left:calc(420*var(--u));width:calc(572*var(--u));height:calc(418*var(--u));pointer-events:none}
.hero-art img{left:calc(-420*var(--u));top:calc(-52*var(--u))}
.hero-copy{position:absolute;left:calc(60*var(--u));top:calc(109*var(--u));width:calc(430*var(--u));z-index:2}
.hero-eyebrow{font-size:calc(13*var(--u));letter-spacing:calc(2.1*var(--u));font-weight:400;line-height:1.5;margin:0 0 calc(7*var(--u))}
.hero h1{font-size:calc(59*var(--u));font-weight:900;line-height:1.15;letter-spacing:calc(-3*var(--u));margin:0 0 calc(17*var(--u))}
.hero h1 span{color:#2876ff}
.hero-description{font-size:calc(11.5*var(--u));line-height:1.73;color:#e0e4ed;letter-spacing:calc(.3*var(--u))}
.hero-actions{display:flex;gap:calc(14*var(--u));margin-top:calc(20*var(--u))}
.button{display:inline-flex;align-items:center;justify-content:center;gap:calc(11*var(--u));border-radius:calc(8*var(--u));border:1px solid transparent;min-height:calc(37*var(--u));padding:calc(7*var(--u)) calc(25*var(--u));font-size:calc(11*var(--u));font-weight:600;white-space:nowrap;transition:transform .18s,background .18s}
.button svg{width:calc(14*var(--u));height:calc(14*var(--u));stroke-width:1.8}
.button:hover{transform:translateY(-2px)}
.button-blue{background:#1769fc;color:white;border-color:#2978ff;box-shadow:0 5px 15px #0855ed24}
.button-blue:hover{background:#0057ed}
.button-clear{background:#131a23b0;color:white;border-color:#d6dce7}
.button-clear:hover{background:#ffffff1c}
.hero-side-caption{display:none}

/* Very compact, art-directed services grid matching source. */
.services{height:calc(406*var(--u));background:#f9fbff}
.section-heading{position:relative}
.section-kicker{font-family:Arial,sans-serif;font-size:calc(8.8*var(--u));letter-spacing:calc(1.7*var(--u));font-weight:600;color:#637292;margin-bottom:calc(6*var(--u))}
.section-heading h2,.about h2{font-size:calc(30*var(--u));font-weight:900;letter-spacing:calc(-1.2*var(--u));line-height:1.18}
.services-heading{height:calc(80*var(--u));padding-top:calc(23*var(--u))}
.services-heading .heading-rule{display:none}
.section-intro{font-size:calc(10.2*var(--u));color:#5a6679;line-height:1.8;white-space:nowrap}
.services-heading .section-intro{position:absolute;top:calc(52*var(--u));left:calc(619*var(--u))}
.service-rows{width:100%}
.service-row{display:grid;grid-template-columns:calc(40*var(--u)) calc(80*var(--u)) calc(200*var(--u)) calc(280*var(--u)) 1fr;align-items:center;height:calc(108.7*var(--u));border-bottom:1px solid #edf1f7;position:relative}
.service-row:last-child{border-bottom:0}
.service-index{font-family:Arial,sans-serif;color:#0d63f8;font-size:calc(16*var(--u));font-weight:500}
.service-icon{width:calc(43*var(--u));height:calc(47*var(--u));margin-left:calc(19*var(--u));display:grid;place-items:center;color:#2169fb}
.service-icon svg{height:calc(31*var(--u));width:calc(31*var(--u));stroke-width:1.65}
.service-name{border:0;padding:0;margin:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.service-name h3{font-size:calc(19*var(--u));line-height:1.3;font-weight:800;margin-bottom:calc(6*var(--u));white-space:nowrap}
.service-name span{font-family:Arial,sans-serif;font-size:calc(8*var(--u));letter-spacing:calc(1.4*var(--u));color:#74829a}
.service-desc{font-size:calc(10.3*var(--u));line-height:1.75;color:#5d6879;white-space:nowrap;align-self:center}
.service-art{width:calc(245*var(--u));height:calc(100*var(--u));justify-self:end;pointer-events:none;mix-blend-mode:multiply;mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 88%,transparent 100%)}
.service-art img{left:calc(-650*var(--u))}
.art-mini img{top:calc(-548*var(--u))}.art-web img{top:calc(-656*var(--u))}.art-code img{top:calc(-765*var(--u))}

/* Portfolio */
.cases{height:calc(345*var(--u));background:#fff}
.cases-heading{height:calc(87*var(--u));padding-top:calc(20*var(--u))}
.cases-heading .heading-rule{position:absolute;left:calc(143*var(--u));top:calc(55*var(--u));width:calc(101*var(--u));height:1px;background:#c6d0dc}
.cases-heading .section-intro{position:absolute;left:calc(269*var(--u));top:calc(46*var(--u))}
.case-grid{display:grid;grid-template-columns:calc(292*var(--u)) calc(268*var(--u)) calc(288*var(--u));gap:calc(12*var(--u))}
.case-card{min-width:0;border-right:1px solid #e4eaf3}
.case-card:last-child{border-right:0}
.case-photo{border:0;display:block;padding:0;width:100%;height:calc(151*var(--u));background:#e7edf9;border-radius:calc(5*var(--u));overflow:hidden;text-align:left;cursor:pointer}
.case-photo img{display:block;width:100%;height:100%;max-width:100%;object-fit:cover;transition:transform .2s,filter .2s}
.case-photo:hover img{transform:scale(1.035);filter:brightness(1.05)}
.case-text{padding-top:calc(11*var(--u));padding-right:calc(10*var(--u))}
.case-text h3{font-size:calc(14*var(--u));font-weight:800;line-height:1.35;margin-bottom:calc(4*var(--u))}
.case-text p{font-size:calc(10.4*var(--u));line-height:1.45;color:#5b687c}

/* Founders are an understated, compact horizontal strip, no invented personal identities. */
.about{height:calc(174*var(--u));background:#f5f8fd;overflow:hidden}
.about-inner{height:100%;display:grid;grid-template-columns:calc(420*var(--u)) calc(255*var(--u)) calc(255*var(--u))}
.about-intro{padding-top:calc(18*var(--u))}
.about-intro h2{margin-bottom:calc(5*var(--u))}
.about-intro>p:not(.section-kicker){font-size:calc(9.6*var(--u));line-height:1.5;color:#536276;max-width:calc(408*var(--u))}
.founder{display:flex;align-items:start;height:100%;padding-top:calc(18*var(--u));border-right:1px solid #e4eaf3}
.founder-visual{width:calc(85*var(--u));height:calc(144*var(--u));flex:none}
.founder-visual img{top:calc(-1238*var(--u))}
.founder-tech .founder-visual img{left:calc(-479*var(--u))}
.founder-business .founder-visual img{left:calc(-736*var(--u))}
.founder-info{padding-top:calc(19*var(--u));padding-left:calc(20*var(--u));white-space:nowrap}
.founder-role{font-size:calc(10*var(--u));color:#5e687c;margin-bottom:calc(5*var(--u))}
.founder-years{display:flex;align-items:end;color:#1c65ed;margin-bottom:calc(3*var(--u))}
.founder-years strong{font-size:calc(34*var(--u));font-weight:700;line-height:1}
.founder-years span{font-size:calc(11*var(--u));color:#1d2534;margin-left:calc(4*var(--u));margin-bottom:calc(3*var(--u));font-weight:700}
.founder-info h3{font-size:calc(10*var(--u));font-weight:700;margin:0 0 calc(8*var(--u))}
.founder-info>p:last-child{font-size:calc(9.4*var(--u));line-height:1.5;color:#8a93a5}

/* CTA architectural crop and one-line footer. */
.contact{height:calc(143*var(--u));background:#151a22;color:#fff;overflow:hidden}
.contact-frame{height:100%}
.contact-art{position:absolute;left:calc(375*var(--u));top:0;width:calc(617*var(--u));height:100%;pointer-events:none}
.contact-art img{left:calc(-375*var(--u));top:calc(-1395*var(--u))}
.contact-copy{position:relative;z-index:1;padding-left:calc(60*var(--u));padding-top:calc(12*var(--u))}
.contact .section-kicker{color:#a7b0c3;font-size:calc(8*var(--u));margin-bottom:calc(3*var(--u))}
.contact h2{font-size:calc(29*var(--u));line-height:1.1;letter-spacing:calc(-1*var(--u));font-weight:900;margin-bottom:calc(7*var(--u))}
.contact-copy>p:not(.section-kicker){font-size:calc(9.7*var(--u));line-height:1.4;color:#b8c1d1;margin-bottom:calc(8*var(--u))}
.contact .button{height:calc(25*var(--u));min-height:0;padding:calc(4*var(--u)) calc(26*var(--u));font-size:calc(10*var(--u));border-radius:calc(7*var(--u))}
.site-footer{height:calc(52*var(--u));background:#111721;color:#d4dce8;border-top:1px solid #ffffff11}
.footer-inner{height:100%;display:flex;align-items:center;justify-content:space-between}
.footer-brand img{width:calc(123*var(--u));height:calc(42*var(--u));object-fit:contain;object-position:left;transform:translateX(calc(-7*var(--u)))}
.footer-copyright{text-align:right;color:#b9c2d0;font-size:calc(8.5*var(--u));line-height:1.55;white-space:nowrap}
.footer-icp{transition:color .15s}.footer-icp:hover{color:#fff}

/* Dialogs and keyboard feedback */
dialog{border:0;border-radius:8px;padding:0;box-shadow:0 24px 85px #0d152858;max-height:min(90vh,800px);max-width:min(650px,calc(100vw - 32px));overflow-y:auto;color:#172033}
dialog::backdrop{background:#101725df;backdrop-filter:blur(3px)}
.case-dialog{width:640px;background:white}.case-dialog>img{width:100%;height:240px;object-fit:cover;display:block}
.dialog-close{position:absolute;right:16px;top:16px;z-index:2;background:#fff;color:#2c3a50;border:1px solid #dae3f0;border-radius:5px;font-size:12px;padding:8px 12px}
.dialog-close{display:inline-flex;align-items:center;gap:8px}.dialog-close svg{width:14px;height:14px}
.dialog-body{padding:37px 43px 42px}.dialog-body h2{font-size:28px;margin:0 0 15px}.dialog-body>p:not(.section-kicker){font-size:13px;line-height:1.9;color:#66758b}.dialog-body .section-kicker{font-size:10px;color:#2a70ed}
.dialog-body ul{padding-left:20px;color:#4d5b70;font-size:13px;line-height:2;margin:16px 0}
.dialog-body .dialog-note{font-size:11px!important;color:#8995a7!important;margin:20px 0}
.dialog-body .button{min-height:39px;font-size:12px}
.contact-dialog{width:450px;background:white}.contact-dialog .dialog-body{padding-top:55px}
.contact-qr{width:220px;margin:22px auto 10px;padding:9px;background:#fff;border:1px solid #e1e8f2;border-radius:8px;box-shadow:0 8px 24px #17315c12}
.contact-qr img{display:block;width:100%;height:auto;max-width:100%}
.contact-dialog .dialog-body .contact-qr-caption{text-align:center;font-size:12px;color:#59708f}
.contact-office{min-height:94px;display:flex;align-items:flex-start;justify-content:center;flex-direction:column;gap:9px;padding:19px 22px;background:#f2f6fd;border-left:3px solid #2169fb;border-radius:4px;color:#5e6c80;margin:21px 0 16px}
.contact-office strong{font-size:12px;font-weight:700;color:#59708f}.contact-office span{font-size:13px;font-weight:600;color:#1c2a40;line-height:1.65}
.toast{position:fixed;z-index:100;bottom:28px;left:50%;transform:translate(-50%,20px);background:#1c2a45;color:#fff;padding:12px 20px;border-radius:5px;font-size:12px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.toast.visible{opacity:1;transform:translate(-50%,0)}

@media(max-width:820px){
  :root{--u:1px}
  html{scroll-padding-top:64px}
  .design-frame{width:100%}
  .design-container{width:calc(100% - 40px);max-width:560px}
  .site-header{height:65px;background:#131b28}
  .header-inner{display:flex;gap:12px;align-items:center}
  .brand{width:133px;height:55px;flex:none}.brand img{width:133px;height:51px;transform:none}
  .main-nav{position:absolute;top:65px;left:-20px;width:calc(100% + 40px);display:none;flex-direction:column;background:#182437;padding:15px 24px;align-items:stretch;gap:0;box-shadow:0 20px 32px #0d162a66}
  .main-nav.open{display:flex}.main-nav a{font-size:13px;padding:13px 0;border-bottom:1px solid #ffffff18}.main-nav a.active::after{bottom:8px;width:20px}
  .header-cta{margin-left:auto;min-width:90px;height:31px;font-size:10px;gap:6px;padding:7px 8px;border-radius:7px}
  .header-cta svg{width:13px;height:13px}.mobile-menu-button{display:block;border:1px solid #6387c3;background:#152134;color:white;border-radius:6px;padding:8px 11px;font-size:11px}
  .hero{height:700px;background:linear-gradient(150deg,#141923,#17263b 85%)}
  .hero-art{left:0;top:280px;width:100%;height:420px;opacity:.95;overflow:hidden}
  .hero-art img{width:900px;height:auto;top:-48px;left:calc(50% - 580px)}
  .hero-copy{top:115px;left:20px;width:calc(100% - 40px);max-width:520px}
  .hero-eyebrow{font-size:11px;letter-spacing:2px;margin-bottom:12px}
  .hero h1{font-size:clamp(40px,9.7vw,59px);letter-spacing:-2px;line-height:1.2;margin-bottom:15px}
  .hero-description{font-size:11.5px;line-height:1.85;max-width:360px}
  .hero-description br{display:none}.hero-actions{gap:9px;margin-top:18px}
  .button{font-size:12px;min-height:42px;padding:9px 18px;border-radius:6px;gap:13px}
  .hero-side-caption{right:20px;bottom:25px;font-size:7px}
  .services{height:auto;padding:56px 0 34px}
  .section-kicker{font-size:9px;letter-spacing:2px;margin-bottom:8px}
  .section-heading h2,.about h2{font-size:30px;letter-spacing:-1px}
  .services-heading{height:auto;padding:0 0 24px}.services-heading .heading-rule{display:none}
  .section-intro,.services-heading .section-intro,.cases-heading .section-intro{position:static;font-size:11px;white-space:normal;margin-top:12px;max-width:340px;line-height:1.8}
  .service-row{height:auto;min-height:190px;display:grid;grid-template-columns:34px 50px 1fr;column-gap:4px;row-gap:0;padding:19px 0;border-bottom:1px solid #dfe7f3}
  .service-index{font-size:17px;align-self:start;padding-top:12px}
  .service-icon{grid-column:2;grid-row:1;width:43px;height:45px;margin:0;border:0}
  .service-icon svg{height:30px;width:30px}
  .service-name{grid-column:3;grid-row:1;align-self:start;margin:0;border:0;padding-top:5px}
  .service-name h3{font-size:19px;margin-bottom:6px}.service-name span{font-size:8px}
  .service-desc{grid-column:2/4;grid-row:2;font-size:11px;white-space:normal;line-height:1.8;margin:10px 0 0}
  .service-desc br{display:none}
  .service-art{grid-column:2/4;grid-row:3;width:245px;max-width:100%;height:90px;margin-top:8px;justify-self:end}
  .service-art img{width:992px;height:1586px}
  .art-mini img{left:-635px;top:-559px}.art-web img{left:-640px;top:-666px}.art-code img{left:-640px;top:-777px}
  .cases{height:auto;padding:53px 0 56px}
  .cases-heading{height:auto;padding:0 0 24px}
  .cases-heading .heading-rule{display:none}
  .case-grid{display:grid;grid-template-columns:1fr;gap:24px}
  .case-card{border:0}.case-photo{height:auto;aspect-ratio:1.9;width:100%;border-radius:6px;background-position:center;background-size:cover}
  .case-text{padding-top:14px}.case-text h3{font-size:17px;margin-bottom:6px}.case-text p{font-size:12px;line-height:1.75}.case-text br{display:none}
  .about{height:auto;padding:46px 0 42px}
  .about-inner{display:grid;grid-template-columns:1fr;gap:14px}
  .about-intro{grid-column:1;padding:0 0 8px}
  .about-intro h2{margin-bottom:12px}
  .about-intro>p:not(.section-kicker){font-size:12px;line-height:1.85;max-width:100%}.about-intro br{display:none}
  .founder{height:auto;padding:17px 0 0;display:block;border-right:0;border-top:1px solid #dfe6f1}
  .founder-visual{display:none}.founder-info{padding:0;white-space:normal}.founder-role{font-size:11px;margin-bottom:10px}
  .founder-years strong{font-size:44px}.founder-years span{font-size:12px}.founder-info h3{font-size:14px;margin:9px 0}.founder-info>p:last-child{font-size:12px;line-height:1.7}.founder-info br{display:none}
  .contact{height:260px}.contact-art{left:20%;width:80%;height:202px;opacity:.8;mask-image:linear-gradient(to bottom,#000 0%,#000 65%,transparent 100%)}.contact-art img{width:1400px;height:auto;top:-1969px;left:-600px}
  .contact-copy{padding:43px 20px;max-width:480px}.contact .section-kicker{font-size:9px;margin-bottom:8px}.contact h2{font-size:32px;margin-bottom:13px}
  .contact-copy>p:not(.section-kicker){font-size:12px;line-height:1.75;max-width:300px}.contact-copy br{display:none}
  .contact .button{min-height:38px;font-size:12px;padding:9px 22px;margin-top:9px}
  .site-footer{height:auto;min-height:150px}.footer-inner{display:flex;align-items:start;flex-wrap:wrap;gap:10px;padding:27px 0}
  .footer-brand{width:100%}.footer-brand img{width:115px;height:43px;transform:none}
  .footer-copyright{text-align:left;font-size:10px;white-space:normal}
  .dialog-body{padding:30px 23px}.dialog-body h2{font-size:25px}.case-dialog>img{height:170px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important}}