:root{--bg:#06101d;--bg2:#0a192b;--paper:#f3f7fb;--ink:#0b1929;--muted:#8ea1b4;--cyan:#45e2ff;--blue:#6585ff;--green:#5df0bd;--line:rgba(255,255,255,.11);--lightline:rgba(11,25,41,.11);--max:1220px}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:76px}body{font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;background:var(--bg);color:#fff;line-height:1.7;overflow-x:hidden}a{text-decoration:none;color:inherit}button{font:inherit}.container{width:min(calc(100% - 42px),var(--max));margin:auto}.kicker{color:var(--cyan);font-size:11px;font-weight:800;letter-spacing:.18em;margin-bottom:14px}.section{padding:112px 0}.light{background:var(--paper);color:var(--ink)}.dark{background:var(--bg);color:#fff}.mix{background:radial-gradient(circle at 12% 15%,rgba(69,226,255,.09),transparent 30%),linear-gradient(180deg,#0a192b,#06101d);color:#fff}.head{display:flex;justify-content:space-between;align-items:end;gap:55px;margin-bottom:58px}.head h2,.title h2{font-size:clamp(34px,4.4vw,58px);line-height:1.15;letter-spacing:-.045em}.head>p{max-width:420px;color:var(--muted);font-size:14px}
header{position:fixed;z-index:1000;inset:0 0 auto;height:76px;transition:.3s}header.scrolled{background:rgba(4,12,22,.86);border-bottom:1px solid var(--line);backdrop-filter:blur(18px)}nav{height:100%;display:flex;align-items:center;width:min(calc(100% - 42px),var(--max));margin:auto}.brand{display:flex;align-items:center;gap:12px}.mark{width:29px;height:29px;border:1px solid rgba(69,226,255,.55);border-radius:50%;position:relative;box-shadow:0 0 18px rgba(69,226,255,.16)}.mark:before{content:"";position:absolute;inset:7px;border:1px solid var(--cyan);border-radius:50%}.mark:after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:var(--cyan);top:3px;right:4px;box-shadow:0 0 10px var(--cyan)}.brand b{font-size:16px}.brand small{display:block;font-size:8px;color:var(--muted);letter-spacing:.25em}.links{display:flex;gap:28px;margin-left:auto;list-style:none}.links a{font-size:13px;color:#acbccb;position:relative}.links a:hover,.links a.active{color:#fff}.links a:after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:1px;background:var(--cyan);transform:scaleX(0);transition:.25s}.links a:hover:after,.links a.active:after{transform:scaleX(1)}.navcta{margin-left:26px;padding:9px 17px;border:1px solid rgba(69,226,255,.35);border-radius:999px;color:var(--cyan);font-size:12px}.menu{display:none;margin-left:auto;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.05)}.menu span{display:block;width:18px;height:1px;background:#fff;margin:5px auto;transition:.25s}
.hero{min-height:100svh;position:relative;display:grid;align-items:center;padding:130px 0 80px;overflow:hidden;background:radial-gradient(circle at 8% 20%,rgba(69,226,255,.12),transparent 31%),radial-gradient(circle at 90% 60%,rgba(101,133,255,.17),transparent 38%),linear-gradient(135deg,#030912,#071422 52%,#0a1830)}.hero .container{position:relative;display:grid;grid-template-columns:.92fr 1.08fr;gap:60px;align-items:center}.pill{display:inline-flex;align-items:center;gap:9px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;color:#aab9c8;font-size:9px;letter-spacing:.15em;margin-bottom:24px}.pill i{width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 10px var(--green)}h1{font-size:clamp(52px,6.6vw,88px);line-height:1.03;letter-spacing:-.06em}h1 em{font-style:normal;color:transparent;background:linear-gradient(90deg,var(--cyan),#a1b0ff,var(--green));background-clip:text}.lead{margin-top:28px;max-width:650px;color:#aab9c8;font-size:clamp(16px,1.5vw,20px)}.actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:36px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:52px;padding:0 24px;border-radius:999px;border:1px solid transparent;font-size:13px;font-weight:750;transition:.25s}.btn:hover{transform:translateY(-2px)}.primary{color:#03121c;background:linear-gradient(135deg,var(--cyan),#8af3ff);box-shadow:0 14px 36px rgba(69,226,255,.2)}.ghost{border-color:var(--line);background:rgba(255,255,255,.04)}
.position{padding:86px 0}.position .container{display:grid;grid-template-columns:1.05fr .95fr;gap:90px;align-items:center}.position p{color:#5d7083;font-size:17px}.formula{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:28px}.formula span{padding:9px 13px;border:1px solid var(--lightline);border-radius:999px;background:#fff;font-size:12px;font-weight:700}.formula b{color:#7a8da0}

.services{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.service{position:relative;min-height:430px;padding:31px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.045);transition:.3s}.service:hover{transform:translateY(-7px);border-color:rgba(69,226,255,.32)}.service.featured{border-color:rgba(69,226,255,.36);background:radial-gradient(circle at 85% 10%,rgba(69,226,255,.14),transparent 28%),rgba(255,255,255,.05)}.recommend{position:absolute;right:24px;top:0;padding:6px 10px;border-radius:0 0 8px 8px;background:var(--cyan);color:#03121c;font-size:7px;font-weight:900}.service small{color:#71879a;letter-spacing:.13em}.service h3{margin-top:42px;font-size:25px;line-height:1.25}.service p{margin-top:17px;color:var(--muted);font-size:13px}.service ul{margin-top:27px;display:grid;gap:11px;list-style:none}.service li{position:relative;padding-left:18px;color:#c2d0da;font-size:12px}.service li:before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--cyan)}
.evolve{display:grid;grid-template-columns:repeat(7,auto);gap:16px;align-items:stretch;margin-top:60px}.evolve article{padding:23px;border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.04);min-width:0}.evolve article span{color:var(--cyan);font-size:8px}.evolve h3{margin-top:20px;font-size:16px}.evolve p{margin-top:9px;color:var(--muted);font-size:11px}.evolve i{align-self:center;color:var(--cyan);font-style:normal}.note{margin-top:22px;color:#71869a;font-size:10px}
.contact{position:relative;overflow:hidden;padding:105px 0;background:linear-gradient(135deg,rgba(69,226,255,.08),transparent 37%),linear-gradient(120deg,#06101d,#0b1c31)}.contact .container{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:75px;align-items:center}.contact h2{font-size:clamp(42px,6vw,76px);line-height:1.05;letter-spacing:-.055em}.contact p{margin-top:22px;color:var(--muted);font-size:16px}.contactactions{display:grid;gap:13px}.contactactions p{text-align:center;font-size:11px}
footer{padding:38px 0;background:#030a12;border-top:1px solid var(--line);color:#72879a}.foot{display:grid;grid-template-columns:1fr auto;gap:25px}.foot strong{color:#fff;font-size:13px}.foot small{display:block;margin-top:5px}.footlinks{display:flex;gap:19px;font-size:10px}.copy{grid-column:1/-1;padding-top:19px;border-top:1px solid rgba(255,255,255,.06);font-size:9px}
.reveal{opacity:0;transform:translateY(22px);transition:.75s}.reveal.visible{opacity:1;transform:none}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1030px){.links{position:fixed;top:76px;left:16px;right:16px;display:grid;gap:0;padding:13px;border:1px solid var(--line);border-radius:17px;background:rgba(4,12,22,.97);opacity:0;pointer-events:none;transform:translateY(-10px);transition:.25s}.links.open{opacity:1;pointer-events:auto;transform:none}.links a{display:block;padding:12px}.links a:after{display:none}.menu{display:block}.navcta{margin-left:auto;margin-right:12px}.hero .container{grid-template-columns:1fr;text-align:center}.hero-copy{max-width:800px;margin:auto}.lead{margin-left:auto;margin-right:auto}.actions{justify-content:center}.position .container,.contact .container{grid-template-columns:1fr}.services{grid-template-columns:1fr}.evolve{grid-template-columns:1fr}.evolve i{justify-self:center;transform:rotate(90deg)}}
@media(max-width:680px){.container,nav,.hero .container{width:min(calc(100% - 28px),var(--max))}.section{padding:82px 0}.brand small,.navcta{display:none}.hero{padding-top:110px}.hero h1{font-size:clamp(45px,15vw,66px)}.head{align-items:start;flex-direction:column;gap:20px}.head h2,.title h2{font-size:35px}.position{padding:68px 0}.position .container{gap:35px}.contact h2{font-size:46px}.foot{grid-template-columns:1fr}.footlinks{flex-wrap:wrap}.copy{grid-column:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}


/* =========================================================
   Multi-page website additions
   ========================================================= */

.page-main {
    padding-top: 76px;
    background: var(--bg);
}

.page-hero {
    position: relative;
    min-height: 580px;
    display: grid;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 10% 20%, rgba(69,226,255,.12), transparent 32%),
        radial-gradient(circle at 88% 52%, rgba(101,133,255,.18), transparent 38%),
        linear-gradient(135deg,#030912,#071422 52%,#0a1830);
}

.page-hero-short {
    min-height: 470px;
}

.page-grid {
    position: absolute;
    z-index: -2;
    inset: 0;
    opacity: .2;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
    background-size: 70px 70px;
    mask-image: linear-gradient(#000,transparent 96%);
}

.page-hero-inner {
    display: grid;
    grid-template-columns: minmax(0,1.1fr) minmax(330px,.9fr);
    gap: 70px;
    align-items: center;
    padding-top: 70px;
    padding-bottom: 70px;
}

.page-hero-copy {
    max-width: 820px;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 34px;
    color: #70869a;
    font-size: 11px;
}

.breadcrumb a:hover {
    color: var(--cyan);
}

.page-hero h1 {
    max-width: 900px;
    font-size: clamp(46px,6vw,78px);
    line-height: 1.06;
    letter-spacing: -.055em;
}

.page-hero-copy > p:not(.breadcrumb):not(.kicker) {
    max-width: 740px;
    margin-top: 26px;
    color: #a8b8c7;
    font-size: clamp(16px,1.5vw,19px);
}

.page-orbit {
    position: relative;
    justify-self: center;
    display: grid;
    place-items: center;
    width: min(36vw,390px);
    aspect-ratio: 1;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 50%;
    background: radial-gradient(circle,rgba(69,226,255,.12),transparent 54%);
}

.page-orbit::before,
.page-orbit::after {
    position: absolute;
    border-radius: 50%;
    content: "";
}

.page-orbit::before {
    inset: 10%;
    border: 1px dashed rgba(69,226,255,.28);
    animation: spin 18s linear infinite;
}

.page-orbit::after {
    inset: 23%;
    border: 1px solid rgba(101,133,255,.24);
}

.orbit-core {
    position: relative;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 40%;
    aspect-ratio: 1;
    border: 1px solid rgba(69,226,255,.42);
    border-radius: 50%;
    color: var(--cyan);
    background: rgba(4,15,25,.82);
    box-shadow: 0 0 45px rgba(69,226,255,.2);
    font-size: clamp(25px,4vw,50px);
    font-weight: 800;
    text-align: center;
}

.orbit-core small {
    display: block;
    color: #768ca0;
    font-size: 7px;
    letter-spacing: .12em;
}

.page-orbit > i {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 16px var(--cyan);
}

.page-orbit > i:nth-child(2) { top: 12%; left: 48%; }
.page-orbit > i:nth-child(3) { right: 10%; bottom: 31%; background: var(--blue); }
.page-orbit > i:nth-child(4) { bottom: 14%; left: 25%; background: var(--green); }

.detail-grid,
.case-grid,
.belief-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 22px;
}

.detail-card,
.case-card,
.belief-card {
    position: relative;
    padding: 34px;
    border: 1px solid var(--lightline);
    border-radius: 22px;
    background: rgba(255,255,255,.62);
    transition: .28s ease;
}

.detail-card:hover,
.case-card:hover,
.belief-card:hover {
    background: #fff;
    box-shadow: 0 20px 55px rgba(11,25,41,.09);
    transform: translateY(-5px);
}

.detail-card > span,
.belief-card > span {
    color: #8aa1b4;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
}

.detail-card h3,
.case-card h3,
.belief-card h3 {
    margin-top: 30px;
    font-size: 25px;
    line-height: 1.25;
}

.detail-card > p,
.case-card > p,
.belief-card > p {
    margin-top: 13px;
    color: #617487;
    font-size: 14px;
}

.detail-card ul,
.tech-detail ul {
    display: grid;
    gap: 9px;
    margin-top: 24px;
    list-style: none;
}

.detail-card li,
.tech-detail li {
    position: relative;
    padding-left: 18px;
    color: #53677b;
    font-size: 12px;
}

.detail-card li::before,
.tech-detail li::before {
    position: absolute;
    top: 9px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #258098;
    content: "";
}

.architecture-flow,
.safety-chain {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
    gap: 13px;
    align-items: stretch;
}

.architecture-flow article,
.safety-chain article {
    min-width: 0;
    padding: 24px 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255,255,255,.045);
}

.architecture-flow small {
    color: var(--cyan);
    font-size: 8px;
    letter-spacing: .13em;
}

.architecture-flow h3,
.safety-chain h3 {
    margin-top: 20px;
    font-size: 17px;
    line-height: 1.3;
}

.architecture-flow p,
.safety-chain p {
    margin-top: 10px;
    color: var(--muted);
    font-size: 11px;
}

.architecture-flow > i,
.safety-chain > i {
    align-self: center;
    color: var(--cyan);
    font-style: normal;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 15px;
}

.process-card {
    min-height: 240px;
    padding: 25px;
    border: 1px solid var(--lightline);
    border-radius: 19px;
    background: rgba(255,255,255,.62);
}

.process-card b {
    color: #258098;
    font-size: 10px;
    letter-spacing: .13em;
}

.process-card h3 {
    margin-top: 40px;
    font-size: 19px;
}

.process-card p {
    margin-top: 11px;
    color: #617487;
    font-size: 12px;
}

.page-cta {
    padding: 70px 0;
    background: #030a12;
}

.cta-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 48px;
    border: 1px solid var(--line);
    border-radius: 26px;
    background:
        radial-gradient(circle at 85% 20%,rgba(69,226,255,.13),transparent 28%),
        linear-gradient(135deg,#091827,#0c2137);
}

.cta-panel h2 {
    max-width: 760px;
    font-size: clamp(28px,3.6vw,46px);
    line-height: 1.15;
    letter-spacing: -.04em;
}

.case-no {
    color: #8ba2b4;
    font-size: 10px;
    letter-spacing: .13em;
}

.case-card dl {
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 9px 14px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--lightline);
}

.case-card dt {
    color: #8299ac;
    font-size: 11px;
}

.case-card dd {
    color: #344b60;
    font-size: 12px;
}

.suitability {
    display: grid;
    grid-template-columns: .78fr 1.22fr;
    gap: 80px;
    align-items: start;
}

.fit-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 16px;
}

.fit-card {
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255,255,255,.045);
}

.fit-card span {
    color: var(--cyan);
    font-size: 9px;
    letter-spacing: .13em;
}

.fit-card h3 {
    margin-top: 24px;
    font-size: 18px;
}

.fit-card p {
    margin-top: 9px;
    color: var(--muted);
    font-size: 12px;
}

.split-section {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 80px;
    align-items: start;
}

.page-copy {
    margin-top: 22px;
    color: #617487;
    font-size: 16px;
}

.check-panel {
    padding: 34px;
    border: 1px solid var(--lightline);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(11,25,41,.07);
}

.check-list {
    display: grid;
    gap: 15px;
    list-style: none;
}

.check-list li {
    position: relative;
    padding: 14px 14px 14px 45px;
    border-radius: 12px;
    color: #40566b;
    background: #f3f7fb;
    font-size: 13px;
}

.check-list li::before {
    position: absolute;
    top: 50%;
    left: 17px;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #05212b;
    background: var(--cyan);
    content: "✓";
    font-size: 10px;
    font-weight: 900;
    transform: translateY(-50%);
}

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

.tech-detail {
    min-height: 390px;
    padding: 36px;
    border: 1px solid var(--line);
    border-radius: 23px;
    background: rgba(255,255,255,.045);
    transition: .28s ease;
}

.tech-detail:hover {
    border-color: rgba(69,226,255,.34);
    background: rgba(69,226,255,.055);
    transform: translateY(-5px);
}

.tech-detail > span {
    color: var(--cyan);
    font-size: 9px;
    letter-spacing: .14em;
}

.tech-detail h2 {
    margin-top: 45px;
    font-size: 30px;
    line-height: 1.2;
}

.tech-detail > p {
    margin-top: 17px;
    color: var(--muted);
    font-size: 14px;
}

.tech-detail li {
    color: #b7c6d2;
}

.tech-detail li::before {
    background: var(--cyan);
}

.safety-chain article {
    border-color: var(--lightline);
    background: rgba(255,255,255,.62);
}

.safety-chain article b {
    color: #258098;
    font-size: 9px;
    letter-spacing: .13em;
}

.safety-chain article h3 {
    color: var(--ink);
}

.safety-chain article p {
    color: #617487;
}

.about-page {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 90px;
}

.about-statement {
    display: grid;
    gap: 24px;
    color: #5e7184;
    font-size: 18px;
}

.belief-card {
    border-color: var(--line);
    background: rgba(255,255,255,.045);
}

.belief-card:hover {
    border-color: rgba(69,226,255,.32);
    background: rgba(69,226,255,.055);
}

.belief-card h3 {
    color: #fff;
}

.belief-card > p {
    color: var(--muted);
}

.profile-list {
    overflow: hidden;
    border: 1px solid var(--lightline);
    border-radius: 22px;
    background: #fff;
}

.profile-list > div {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 30px;
    padding: 23px 27px;
    border-bottom: 1px solid var(--lightline);
}

.profile-list > div:last-child {
    border-bottom: 0;
}

.profile-list span {
    color: #849bad;
    font-size: 11px;
}

.profile-list b {
    color: #263d52;
    font-size: 13px;
    font-weight: 650;
}

.contact-info-list {
    margin-top: 38px;
    overflow: hidden;
    border: 1px solid var(--lightline);
    border-radius: 18px;
    background: #fff;
}

.contact-info-list > div {
    display: grid;
    gap: 6px;
    padding: 20px;
    border-bottom: 1px solid var(--lightline);
}

.contact-info-list > div:last-child {
    border-bottom: 0;
}

.contact-info-list span {
    color: #879daf;
    font-size: 10px;
}

.contact-info-list b {
    color: #2b4257;
    font-size: 13px;
    word-break: break-word;
}

.inquiry-form {
    padding: 34px;
    border: 1px solid var(--lightline);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 24px 65px rgba(11,25,41,.08);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px;
}

.form-field {
    display: grid;
    gap: 8px;
}

.form-field.full {
    grid-column: 1 / -1;
}

.form-field span {
    color: #40566b;
    font-size: 11px;
    font-weight: 700;
}

.form-field input,
.form-field textarea {
    width: 100%;
    border: 1px solid #d5e0e9;
    border-radius: 12px;
    outline: none;
    color: var(--ink);
    background: #f8fafc;
    font: inherit;
    font-size: 13px;
    transition: .2s;
}

.form-field input {
    height: 48px;
    padding: 0 14px;
}

.form-field textarea {
    padding: 13px 14px;
    resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus {
    border-color: #258098;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37,128,152,.08);
}

.form-submit {
    margin-top: 24px;
    border: 0;
    cursor: pointer;
}

.form-note {
    margin-top: 14px;
    color: #8a9eaf;
    font-size: 10px;
}

body[data-page="contact"] .navcta {
    color: #03121c;
    background: var(--cyan);
}

@media (max-width: 1030px) {
    .page-hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .page-hero-copy {
        margin: 0 auto;
    }

    .breadcrumb,
    .page-hero .actions {
        justify-content: center;
    }

    .page-orbit {
        width: min(65vw,370px);
    }

    .architecture-flow,
    .safety-chain,
    .process-grid {
        grid-template-columns: 1fr;
    }

    .architecture-flow > i,
    .safety-chain > i {
        justify-self: center;
        transform: rotate(90deg);
    }

    .suitability,
    .split-section,
    .about-page {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .process-card {
        min-height: auto;
    }
}

@media (max-width: 680px) {
    .page-main {
        padding-top: 70px;
    }

    .page-hero {
        min-height: auto;
    }

    .page-hero-inner {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .page-hero h1 {
        font-size: 43px;
    }

    .page-orbit {
        width: min(82vw,340px);
    }

    .detail-grid,
    .case-grid,
    .belief-grid,
    .fit-grid,
    .tech-page-grid,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .detail-card,
    .case-card,
    .belief-card,
    .tech-detail,
    .inquiry-form {
        padding: 25px;
    }

    .tech-detail {
        min-height: auto;
    }

    .cta-panel {
        align-items: flex-start;
        flex-direction: column;
        padding: 30px 24px;
    }

    .cta-panel .btn {
        width: 100%;
    }

    .profile-list > div {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .form-field.full {
        grid-column: auto;
    }
}

/* =========================================================
   Global typography
   ========================================================= */

:root {
    --font-main:
        "HarmonyOS Sans SC",
        "PingFang SC",
        "Microsoft YaHei",
        "Noto Sans SC",
        Arial,
        sans-serif;

    --font-english:
        Inter,
        Arial,
        sans-serif;

    --text-line-height: 1.75;
    --text-letter-spacing: 0.02em;

    --heading-line-height: 1.16;
    --heading-letter-spacing: -0.035em;
}

body {
    font-family: var(--font-main);
    line-height: var(--text-line-height);
    letter-spacing: var(--text-letter-spacing);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-main);
    line-height: var(--heading-line-height);
    letter-spacing: var(--heading-letter-spacing);
}

h1 {
    font-weight: 680;
}

h2 {
    font-weight: 650;
}

h3 {
    font-weight: 620;
}

p,
li,
dd {
    line-height: 1.8;
    letter-spacing: 0.025em;
}

.links a,
.navcta,
.btn,
button {
    font-family: var(--font-main);
    letter-spacing: 0.04em;
}

.kicker,
.brand small,
.breadcrumb,
.tech-detail > span,
.service small,
.detail-card > span,
.belief-card > span,
.architecture-flow small,
.case-no {
    font-family: var(--font-english);
    letter-spacing: 0.16em;
}

/* 覆盖原有高优先级标题字距，确保全站一致 */
.hero h1,
.page-hero h1,
.head h2,
.title h2,
.contact h2,
.cta-panel h2,
.tech-detail h2 {
    line-height: var(--heading-line-height);
    letter-spacing: var(--heading-letter-spacing);
}

/* 导航与按钮使用更清晰的紧凑行高 */
.links a,
.navcta,
.btn,
button {
    line-height: 1.2;
}


/* =========================================================
   V5 conversion, evidence and social system
   ========================================================= */

/* 六项导航的响应式阈值更早触发 */
@media (max-width: 1180px) {
    .links {
        position: fixed;
        top: 76px;
        left: 16px;
        right: 16px;
        display: grid;
        gap: 0;
        padding: 13px;
        border: 1px solid var(--line);
        border-radius: 17px;
        background: rgba(4,12,22,.97);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-10px);
        transition: .25s;
    }

    .links.open {
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    .links a {
        display: block;
        padding: 12px;
    }

    .links a::after {
        display: none;
    }

    .menu {
        display: block;
    }

    .navcta {
        margin-left: auto;
        margin-right: 12px;
    }
}

.home-summary-grid,
.home-case-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 17px;
}

.home-summary-card,
.home-case-card {
    position: relative;
    min-height: 270px;
    padding: 27px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255,255,255,.045);
    transition: transform .28s ease, border-color .28s ease, background .28s ease;
}

.home-summary-card:hover,
.home-case-card:hover {
    border-color: rgba(69,226,255,.34);
    background: rgba(69,226,255,.06);
    transform: translateY(-6px);
}

.home-summary-card > span,
.home-case-card > span {
    color: var(--cyan);
    font-size: 9px;
    letter-spacing: .14em;
}

.home-summary-card h3,
.home-case-card h3 {
    margin-top: 45px;
    font-size: 21px;
}

.home-summary-card p,
.home-case-card p {
    margin-top: 12px;
    color: var(--muted);
    font-size: 12px;
}

.home-summary-card b {
    position: absolute;
    bottom: 25px;
    left: 27px;
    color: var(--cyan);
    font-size: 11px;
}

.demo-media {
    position: relative;
    display: block;
    min-height: 390px;
    overflow: hidden;
    border: 1px solid var(--lightline);
    border-radius: 25px;
    background:
        radial-gradient(circle at 60% 40%,rgba(69,226,255,.16),transparent 25%),
        linear-gradient(135deg,#0b2236,#07131f);
    box-shadow: 0 26px 70px rgba(11,25,41,.17);
}

.video-grid {
    position: absolute;
    inset: 0;
    opacity: .55;
    background-image:
        linear-gradient(rgba(69,226,255,.07) 1px,transparent 1px),
        linear-gradient(90deg,rgba(69,226,255,.07) 1px,transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(circle,#000,transparent 76%);
}

.video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    padding-left: 5px;
    border: 1px solid rgba(69,226,255,.48);
    border-radius: 50%;
    color: var(--cyan);
    background: rgba(4,15,25,.78);
    box-shadow: 0 0 35px rgba(69,226,255,.2);
    transform: translate(-50%,-50%);
    transition: .25s ease;
}

.demo-media:hover .video-play {
    color: #03121c;
    background: var(--cyan);
    transform: translate(-50%,-50%) scale(1.07);
}

.section-more {
    display: flex;
    justify-content: center;
    margin-top: 36px;
}

.home-service-row {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 20px;
}

.home-service-card {
    min-height: 235px;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255,255,255,.045);
    transition: .28s;
}

.home-service-card:hover {
    transform: translateY(-6px);
    border-color: rgba(69,226,255,.34);
}

.home-service-card.featured {
    border-color: rgba(69,226,255,.34);
    background: radial-gradient(circle at 85% 15%,rgba(69,226,255,.12),transparent 29%),rgba(255,255,255,.05);
}

.home-service-card small {
    color: var(--cyan);
    font-size: 8px;
    letter-spacing: .14em;
}

.home-service-card h3 {
    margin-top: 45px;
    font-size: 23px;
}

.home-service-card p {
    margin-top: 12px;
    color: var(--muted);
    font-size: 12px;
}

/* 演示页 */
.demo-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 22px;
}

.demo-card {
    overflow: hidden;
    border: 1px solid var(--lightline);
    border-radius: 23px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(11,25,41,.07);
}

.demo-card .demo-media {
    min-height: 235px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.demo-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    color: var(--cyan);
    font-size: 8px;
    letter-spacing: .14em;
}

.demo-body {
    padding: 27px;
}

.demo-body > small {
    color: #258098;
    font-size: 8px;
    letter-spacing: .14em;
}

.demo-body h3 {
    margin-top: 22px;
    font-size: 23px;
}

.demo-body > p {
    margin-top: 12px;
    color: #617487;
    font-size: 13px;
}

.demo-body ul {
    display: grid;
    gap: 8px;
    margin-top: 22px;
    list-style: none;
}

.demo-body li {
    position: relative;
    padding-left: 16px;
    color: #52677b;
    font-size: 11px;
}

.demo-body li::before {
    position: absolute;
    top: 8px;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #258098;
    content: "";
}

.demo-status {
    display: inline-flex;
    margin-top: 24px;
    padding: 7px 10px;
    border-radius: 999px;
    color: #7b4e00;
    background: #fff1cf;
    font-size: 9px;
}

.case-template-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 16px;
}

.case-template-card {
    min-height: 220px;
    padding: 25px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255,255,255,.045);
}

.case-template-card span {
    color: var(--cyan);
    font-size: 9px;
}

.case-template-card h3 {
    margin-top: 34px;
    font-size: 19px;
}

.case-template-card p {
    margin-top: 10px;
    color: var(--muted);
    font-size: 12px;
}

.evidence-layout {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 80px;
}

.evidence-list {
    display: grid;
    gap: 13px;
}

.evidence-list > div {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 24px;
    padding: 21px;
    border: 1px solid var(--lightline);
    border-radius: 16px;
    background: #fff;
}

.evidence-list b {
    color: #258098;
}

.evidence-list p {
    color: #5f7285;
    font-size: 13px;
}

/* 兼容性 */
.compatibility-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 20px;
}

.compat-card {
    min-height: 330px;
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: 21px;
    background: rgba(255,255,255,.045);
}

.compat-status {
    display: inline-flex;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
}

.compat-card.verified .compat-status {
    color: #063126;
    background: var(--green);
}

.compat-card h3 {
    margin-top: 35px;
    font-size: 22px;
}

.compat-card p {
    margin-top: 13px;
    color: var(--muted);
    font-size: 13px;
}

.compat-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 25px;
}

.compat-tags b {
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: #afc0ce;
    font-size: 9px;
}

.compat-note {
    margin-top: 23px;
    padding: 18px 20px;
    border-left: 2px solid var(--cyan);
    color: var(--muted);
    background: rgba(69,226,255,.05);
    font-size: 12px;
}

.compat-note strong {
    color: #fff;
}

/* 联系页表单 */
.contact-v5-layout {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: 65px;
    align-items: start;
}

.contact-v5-intro h2 {
    font-size: clamp(34px,4vw,52px);
    line-height: 1.15;
}

.contact-v5-intro > p:not(.kicker) {
    margin-top: 20px;
    color: #617487;
}

.contact-tabs-wrap {
    min-width: 0;
}

.contact-panel {
    display: none;
}

.contact-panel.active {
    display: block;
    animation: panelIn .35s ease;
}

.form-intro {
    margin-bottom: 28px;
}

.form-intro small {
    color: #258098;
    font-size: 8px;
    letter-spacing: .14em;
}

.form-intro h3 {
    margin-top: 13px;
    font-size: 25px;
}

.form-intro p {
    margin-top: 9px;
    color: #617487;
    font-size: 12px;
}

/* 社交媒体 */
.footer-brand-block {
    display: grid;
    align-content: start;
    justify-items: start;
}

.footer-brand-block small {
    display: block;
    margin-top: 5px;
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 37px;
    height: 37px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    color: #8fa4b7;
    background: rgba(255,255,255,.035);
    transition: .25s;
}

.social-link svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.social-link span {
    font-family: Arial,sans-serif;
    font-size: 14px;
    font-weight: 800;
}

.social-link:hover {
    color: #04131d;
    border-color: var(--cyan);
    background: var(--cyan);
    box-shadow: 0 10px 26px rgba(69,226,255,.2);
    transform: translateY(-3px);
}

/* 法律页面 */
.legal-hero {
    padding: 145px 0 75px;
    background:
        radial-gradient(circle at 10% 30%,rgba(69,226,255,.1),transparent 30%),
        linear-gradient(135deg,#030912,#0a192b);
}

.legal-hero h1 {
    font-size: clamp(44px,6vw,72px);
}

.legal-hero > .container > p:last-child {
    max-width: 720px;
    margin-top: 20px;
    color: var(--muted);
}

.legal-content {
    max-width: 900px;
}

.legal-content h2 {
    margin-top: 42px;
    font-size: 24px;
}

.legal-content h2:first-child {
    margin-top: 0;
}

.legal-content p {
    margin-top: 13px;
    color: #52677b;
}

.legal-note {
    margin-top: 45px !important;
    padding: 18px;
    border-left: 2px solid #258098;
    background: #eaf1f7;
    font-size: 12px;
}

@media (max-width: 1050px) {
    .home-summary-grid,
    .home-case-grid,
    .demo-grid,
    .compatibility-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .evidence-layout,
    .contact-v5-layout {
        grid-template-columns: 1fr;
    }

    .case-template-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 680px) {
    .home-summary-grid,
    .home-case-grid,
    .home-service-row,
    .demo-grid,
    .case-template-grid,
    .compatibility-grid {
        grid-template-columns: 1fr;
    }

    .home-summary-card,
    .home-case-card {
        min-height: 225px;
    }

    .evidence-list > div {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .social-link {
        width: 40px;
        height: 40px;
    }
}