.hero { position: relative; overflow: hidden; background: radial-gradient(circle at 86% 18%, rgba(23, 109, 255, 0.1), transparent 29%), linear-gradient(180deg, #fff 0%, #fbfdff 63%, var(--mist) 100%); }
.hero::before { position: absolute; top: 116px; right: max(-90px, calc((100vw - 1220px) / 2 - 120px)); width: min(560px, 46vw); height: min(480px, 40vw); background: url("../images/zhikai-logo.png") center / contain no-repeat; content: ""; opacity: 0.035; pointer-events: none; }
.home-section > .container { width: min(var(--container), calc(100% - 56px)); margin-right: auto; margin-left: auto; }
.hero-shell { position: relative; z-index: 2; min-height: 640px; padding: 144px 0 52px; }
.grid-2col { display: flex; align-items: stretch; gap: 60px; }
.grid-2col > .left-content,
.grid-2col > .right-content { min-width: 0; }
.left-content,
.right-content { display: flex; flex-direction: column; justify-content: center; }
.left-content h1,
.left-content h2 { margin-bottom: 20px; line-height: 1.2; }
.left-content p { max-width: 420px; opacity: .82; }
.hero-shell.grid-2col > .left-content { flex: 1 1 54%; }
.hero-shell.grid-2col > .right-content { flex: 0 1 440px; align-items: center; }
.hero-copy { position: relative; padding: clamp(28px, 4vw, 54px) 0; }
.hero-copy::after { display: block; width: min(280px, 62%); height: 1px; margin-top: 30px; background: linear-gradient(90deg, rgba(23,109,255,.42), rgba(16,185,200,.18), transparent); content: ""; }
.hero h1 { display: grid; gap: 3px; max-width: 760px; margin-bottom: 22px; color: var(--ink); font-size: clamp(54px, 5vw, 76px); line-height: 1.04; letter-spacing: 0; }
.hero h1 span { display: block; }
.hero-position { max-width: 760px; margin-bottom: 20px; color: var(--navy); font-size: clamp(19px, 1.65vw, 25px); line-height: 1.55; font-weight: 760; }
.hero-lead { max-width: 760px; margin-bottom: 34px; color: var(--muted); font-size: 17px; line-height: 1.95; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.delivery-board { position: relative; width: 100%; max-width: 440px; padding: 24px; border: 1px solid rgba(7, 27, 49, 0.1); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,251,254,.92)), var(--paper); box-shadow: var(--shadow-lift); }
.board-top { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line-soft); }
.board-top span { display: block; margin-bottom: 10px; color: var(--blue); font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.board-top strong { display: block; margin-bottom: 8px; color: var(--ink); font-size: 21px; line-height: 1.28; }
.board-top p { margin-bottom: 0; color: var(--muted); font-size: 13px; line-height: 1.72; }
.delivery-timeline { position: relative; display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.delivery-timeline::before { position: absolute; top: 18px; bottom: 18px; left: 16px; width: 1px; background: var(--line); content: ""; }
.delivery-timeline li { position: relative; display: grid; grid-template-columns: 34px minmax(0,1fr); grid-template-areas: "num title" "num desc"; gap: 12px; align-items: center; }
.delivery-timeline li span { grid-area: num; position: relative; z-index: 2; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(23,109,255,.24); border-radius: 50%; color: var(--blue); background: #f7fbff; font-size: 10px; font-weight: 900; }
.delivery-timeline li strong { grid-area: title; color: var(--ink); font-size: 15px; line-height: 1.24; }
.delivery-timeline li small { grid-area: desc; color: var(--muted); font-size: 12px; }
.board-foot { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.board-foot strong, .board-foot span { display: block; }
.board-foot strong { color: var(--navy); font-size: 19px; line-height: 1.2; }
.board-foot span { color: var(--muted); font-size: 12px; }
.hero-proofbar { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); width: min(var(--container), calc(100% - 56px)); margin: 0 auto; border-top: 1px solid var(--line); }
.hero-proofbar span { min-height: 72px; padding: 22px 0; color: #536274; font-size: 15px; font-weight: 760; }
.solution-panel { min-height: 520px; }
.solution-panel.grid-2col > .left-content { flex: 0 1 40%; }
.solution-panel.grid-2col > .right-content { flex: 1 1 60%; }
.solution-panel .left-content { position: relative; overflow: hidden; padding: clamp(32px, 4vw, 48px); border: 1px solid rgba(7,27,49,.09); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,251,254,.76)); box-shadow: 0 14px 36px rgba(7,27,49,.06); }
.solution-panel .left-content::after { position: absolute; right: -42px; bottom: -42px; width: 170px; height: 170px; border: 1px solid rgba(23,109,255,.12); border-radius: 50%; content: ""; }
.home-products, .cases { background: var(--paper); }
.solutions, .news { background: var(--mist); }
.product-grid, .case-grid, .news-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; width: min(var(--container), calc(100% - 40px)); margin: 0 auto; }
.product-card, .case-card, .news-card { position: relative; border: 1px solid rgba(7,27,49,.1); border-radius: var(--radius-md); background: var(--paper); box-shadow: var(--shadow-soft); transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.product-card:hover, .case-card:hover, .news-card:hover { border-color: rgba(23,109,255,.28); box-shadow: var(--shadow-lift); transform: translateY(-4px); }
.product-card { display: flex; min-height: 350px; flex-direction: column; padding: 28px; }
.card-index { width: fit-content; margin-bottom: 36px; padding: 6px 10px; border-radius: 999px; color: var(--blue); background: rgba(23,109,255,.08); font-size: 12px; font-weight: 900; }
.product-card h3, .case-card h3, .news-card h3 { margin-bottom: 12px; color: var(--ink); font-size: 22px; line-height: 1.28; }
.product-card p, .case-card p, .news-card p { margin-bottom: 0; color: var(--muted); line-height: 1.8; }
.mini-screen { display: grid; gap: 9px; margin: auto 0 22px; padding-top: 26px; }
.mini-screen span { display: block; height: 12px; border-radius: 999px; background: linear-gradient(90deg, rgba(23,109,255,.18), rgba(16,185,200,.12)); }
.mini-screen span:nth-child(1) { width: 80%; } .mini-screen span:nth-child(2) { width: 58%; } .mini-screen span:nth-child(3) { width: 72%; }
.solution-list { display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.solution-list article { display: flex; min-height: 188px; flex-direction: column; padding: 24px 26px; border: 1px solid rgba(7,27,49,.09); border-radius: var(--radius-md); background: rgba(255,255,255,.8); box-shadow: 0 14px 32px rgba(7,27,49,.06); }
.solution-list span { display: inline-flex; margin-bottom: 16px; color: var(--blue); font-size: 13px; font-weight: 900; }
.solution-list h3 { margin-bottom: 10px; color: var(--ink); font-size: 23px; line-height: 1.32; }
.case-card { overflow: hidden; }
.case-visual { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; min-height: 190px; padding: 24px; align-content: end; background: linear-gradient(135deg, rgba(7,27,49,.92), rgba(23,109,255,.68)), var(--navy); }
.case-visual span { display: grid; min-height: 42px; align-items: center; padding: 0 12px; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-sm); color: rgba(255,255,255,.88); background: rgba(255,255,255,.08); font-size: 13px; font-weight: 800; }
.case-body { padding: 24px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.tags span, .news-card > span { padding: 6px 9px; border-radius: 999px; color: #235b8f; background: #eef7ff; font-size: 12px; font-weight: 800; }
.news-card { min-height: 260px; padding: 28px; }
.news-card > span { display: inline-flex; margin-bottom: 26px; }
.section-actions { display: flex; justify-content: center; width: min(var(--container), calc(100% - 40px)); margin: 34px auto 0; }
.about-band { display: grid; grid-template-columns: minmax(0,.95fr) minmax(330px,.66fr); gap: clamp(34px,6vw,80px); width: min(var(--container), calc(100% - 40px)); margin: 0 auto; padding: 94px 0; align-items: center; }
.about-content h2 { margin-bottom: 16px; color: var(--navy); font-size: clamp(31px,3vw,46px); line-height: 1.15; }
.about-content p { max-width: 720px; color: var(--muted); font-size: 17px; line-height: 1.85; }
.about-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.about-stats div { min-height: 128px; padding: 22px; border: 1px solid rgba(7,27,49,.1); border-radius: var(--radius-md); background: #fbfdff; }
.about-stats strong, .about-stats span { display: block; }
.about-stats strong { margin-bottom: 8px; color: var(--navy); font-size: 28px; line-height: 1.2; }
.about-stats span { color: var(--muted); font-size: 14px; }
.contact-band { padding: 0 0 88px; }
.contact-inner { display: flex; width: min(var(--container), calc(100% - 40px)); margin: 0 auto; align-items: center; justify-content: space-between; gap: 36px; padding: clamp(34px,5vw,58px); border-radius: var(--radius-lg); color: #fff; background: linear-gradient(135deg, rgba(7,27,49,.98), rgba(13,42,70,.94)), var(--navy); box-shadow: var(--shadow-lift); }
.contact-inner .section-kicker, .contact-inner h2, .contact-inner p { color: #fff; }
.contact-inner p:not(.section-kicker) { max-width: 650px; margin-bottom: 0; opacity: .76; }
.contact-inner .btn-primary { flex: 0 0 auto; background: #fff; color: var(--navy); }
@media (max-width:1080px){ .grid-2col{flex-direction:column;gap:34px}.left-content,.right-content{justify-content:flex-start}.hero-shell,.solution-panel{min-height:0}.hero-shell.grid-2col>.right-content{width:100%;max-width:680px;align-items:stretch}.delivery-board{max-width:none}.solution-panel .left-content{padding:34px}.product-grid,.case-grid,.news-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){ .hero{min-height:auto}.hero::before{top:92px;right:-110px;width:310px;height:260px}.home-section > .container{width:calc(100% - 32px)}.hero-shell{padding:118px 0 28px}.grid-2col{gap:26px}.left-content p{max-width:none}.hero-copy{padding:0}.hero-copy::after{margin-top:24px}.hero h1{font-size:clamp(39px,11vw,46px);line-height:1.08}.hero-position{font-size:18px}.hero-lead{font-size:15px;line-height:1.82}.hero-actions{display:grid;gap:12px}.hero-actions .btn,.contact-inner .btn{width:100%}.delivery-board{padding:22px;border-radius:var(--radius-md)}.board-foot{grid-template-columns:1fr}.hero-proofbar{grid-template-columns:repeat(2,minmax(0,1fr));width:calc(100% - 32px);gap:0 18px}.hero-proofbar span{min-height:auto;padding:13px 0;font-size:13px}.product-grid,.case-grid,.news-grid,.about-band,.contact-inner{width:calc(100% - 32px)}.product-grid,.case-grid,.news-grid{grid-template-columns:1fr}.product-card,.solution-list article,.news-card{padding:22px}.solution-list article{min-height:auto}.solution-panel .left-content{padding:26px 22px;border-radius:var(--radius-md)}.product-card{min-height:auto}.card-index{margin-bottom:24px}.case-visual{min-height:172px;padding:18px}.case-body{padding:22px}.about-band{padding:68px 0}.about-stats{grid-template-columns:1fr}.about-stats div{min-height:auto}.contact-band{padding-bottom:62px}.contact-inner{display:grid;gap:24px;padding:28px 22px;border-radius:var(--radius-md)} }