:root{
  --navy:#0A2540; --navy2:#0E3054; --navy3:#123C6B;
  --blue:#2563EB; --blue2:#3B82F6; --cyan:#38BDF8;
  --bg:#F4F7FA; --white:#FFFFFF; --ink:#12283F; --muted:#54697F;
  --line:#DDE5EE; --line2:#C7D7E8;
  --radius:14px; --shadow:0 6px 24px rgba(10,37,64,.08);
  --font-h:'Space Grotesk','Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --font-b:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-b); color:var(--ink); line-height:1.65; font-size:16px; -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1100px 560px at 88% -60px, rgba(59,130,246,.15), transparent 64%),
    radial-gradient(940px 520px at -8% 32%, rgba(56,189,248,.11), transparent 62%),
    radial-gradient(1040px 640px at 108% 68%, rgba(37,99,235,.09), transparent 62%),
    var(--bg)}
h1,h2,h3,h4{font-family:var(--font-h); line-height:1.25; color:var(--navy); letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,4.4vw,3.4rem)}
h2{font-size:clamp(1.6rem,2.8vw,2.3rem)}
h3{font-size:1.25rem}
p{color:var(--muted)}
a{color:var(--blue); text-decoration:none}
.container{max-width:1180px; margin:0 auto; padding:0 24px}
section{padding:88px 0}
.section-head{max-width:760px; margin:0 auto 52px; text-align:center; position:relative}
.section-head::before{content:""; position:absolute; left:50%; top:-64px; transform:translateX(-50%); width:460px; height:240px; background:radial-gradient(closest-side, rgba(59,130,246,.18), transparent 72%); pointer-events:none}
.section-head .kicker{display:inline-block; font-family:var(--font-h); font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); font-weight:600; margin-bottom:14px}
.section-head p{margin-top:14px; font-size:1.05rem}

/* ---------- header ---------- */
header{position:sticky; top:0; z-index:100; background:rgba(255,255,255,.88); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.nav-wrap{max-width:1180px; margin:0 auto; padding:0 24px; height:70px; display:flex; align-items:center; gap:22px}
.brand{display:flex; align-items:center; gap:11px; margin-right:auto}
.brand svg{display:block}
.brand .word{font-family:var(--font-h); font-weight:700; font-size:1.32rem; color:var(--navy); letter-spacing:.06em}
.brand .word span{color:var(--blue)}
nav.main{display:flex; gap:2px}
nav.main a{font-size:.88rem; font-weight:500; color:var(--ink); padding:8px 10px; border-radius:8px; white-space:nowrap; transition:.18s}
nav.main a:hover{background:#EAF1FA; color:var(--blue)}
nav.main a.active{color:var(--blue); background:#E7EFFC}
.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--font-h); font-weight:600; font-size:.95rem; padding:12px 24px; border-radius:10px; border:1px solid transparent; cursor:pointer; transition:.2s}
.btn-primary{background:var(--blue); color:#fff; box-shadow:0 4px 14px rgba(37,99,235,.28)}
.btn-primary:hover{background:#1D4FD7; transform:translateY(-1px)}
.btn-ghost{border-color:var(--line2); color:var(--navy); background:#fff}
.btn-ghost:hover{border-color:var(--blue); color:var(--blue)}
.btn-light{background:#fff; color:var(--navy)}
.btn-light:hover{background:#EAF1FA}
.btn-outline-light{border-color:rgba(255,255,255,.45); color:#fff}
.btn-outline-light:hover{border-color:#fff; background:rgba(255,255,255,.08)}
.nav-cta{padding:9px 18px; font-size:.88rem}
.lang-sw{display:flex; border:1px solid var(--line2); border-radius:99px; overflow:hidden; flex-shrink:0}
.lang-sw a{font-family:var(--font-h); font-size:.8rem; font-weight:600; padding:7px 13px; color:var(--muted)}
.lang-sw a.on{background:var(--navy); color:#fff}
.menu-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px}

/* ---------- heroes ---------- */
.hero{position:relative; color:#fff; overflow:hidden; background:#081C33 url("assets/bg-home.jpg") center/cover no-repeat; padding:0; display:flex; align-items:center; aspect-ratio:2/1; max-height:780px; width:100%}
.hero::before{content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(8,28,51,.70) 0%, rgba(10,37,64,.45) 45%, rgba(18,60,107,.22) 100%)}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 62%, rgba(8,28,51,.38) 100%)}
.hero .container{position:relative; z-index:2; padding-top:118px; padding-bottom:118px}
.hero h1,.hero p.lead{text-shadow:0 2px 20px rgba(8,28,51,.5)}
.hero .kicker{display:inline-block; font-family:var(--font-h); font-size:.82rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan); font-weight:600; margin-bottom:20px; padding:6px 14px; border:1px solid rgba(56,189,248,.35); border-radius:99px}
.hero h1{color:#fff; max-width:820px}
.hero h1 em{font-style:normal; color:var(--cyan)}
.hero p.lead{margin:22px 0 36px; font-size:1.18rem; color:#C3D4E8; max-width:640px}
.hero-cta{display:flex; gap:16px; flex-wrap:wrap}
.hero-tune{margin-top:56px; display:flex; flex-wrap:wrap; gap:10px}
.hero-tune span{font-family:var(--font-h); font-size:.82rem; color:#CFE0F2; padding:7px 15px; border-radius:99px; border:1px solid rgba(159,193,230,.35); background:rgba(255,255,255,.05)}
.page-hero{position:relative; color:#fff; overflow:hidden; padding:0; background-color:#0A2540; background-size:cover; background-position:center; display:flex; align-items:center; aspect-ratio:2/1; max-height:660px; width:100%}
.page-hero::before{content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(8,28,51,.68) 0%, rgba(10,37,64,.42) 50%, rgba(18,60,107,.18) 100%)}
.page-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 66%, rgba(8,28,51,.32) 100%)}
.page-hero .container{position:relative; z-index:2; padding-top:84px; padding-bottom:84px}
.page-hero h1{text-shadow:0 2px 20px rgba(8,28,51,.5)}
.page-hero p{text-shadow:0 1px 12px rgba(8,28,51,.45)}
.page-hero h1{color:#fff; max-width:800px}
.page-hero p{margin-top:16px; font-size:1.1rem; color:#C3D4E8; max-width:680px}
.crumb{font-size:.85rem; color:#9FBCDF; margin-bottom:18px; font-family:var(--font-h); letter-spacing:.04em}
.crumb a{color:#C3D4E8}
.crumb a:hover{color:#fff}

/* ---------- cards & grids ---------- */
.grid{display:grid; gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow); transition:.22s; position:relative; overflow:hidden}
.card::after{content:""; position:absolute; left:0; top:0; height:3px; width:100%; background:linear-gradient(90deg,var(--blue),var(--cyan)); opacity:0; transition:.25s}
.card:hover{transform:translateY(-4px); box-shadow:0 14px 34px rgba(10,37,64,.12); border-color:var(--line2)}
.card:hover::after{opacity:1}
.card h3{margin-bottom:10px}
.card .icon{width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#E7EFFC,#DCEBFF); margin-bottom:18px}
.platform-card{position:relative; overflow:hidden}
.platform-card .tag{font-family:var(--font-h); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); font-weight:600}
.platform-card ul{list-style:none; margin:16px 0 22px}
.platform-card ul li{padding:7px 0 7px 26px; position:relative; color:var(--muted); font-size:.96rem}
.platform-card ul li::before{content:""; position:absolute; left:0; top:14px; width:14px; height:14px; border-radius:4px; background:linear-gradient(135deg,var(--blue),var(--cyan)); opacity:.85; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.app-tile{text-align:left; padding:28px}
.app-tile h3{font-size:1.08rem; margin:14px 0 8px}
.app-tile p{font-size:.92rem}
.app-tile .go{margin-top:14px; display:inline-flex; align-items:center; gap:6px; font-family:var(--font-h); font-weight:600; font-size:.88rem; color:var(--blue); transition:gap .2s}
.link-more{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-h); font-weight:600; font-size:.92rem; color:var(--blue); transition:gap .2s}
.link-more:hover{gap:11px}

/* ---------- process ---------- */
.process{display:grid; grid-template-columns:repeat(5,1fr); gap:0}
.step{position:relative; padding:0 16px; text-align:center}
.step .num{width:58px; height:58px; margin:0 auto 18px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-family:var(--font-h); font-weight:700; font-size:1.25rem; color:#fff; background:linear-gradient(135deg,var(--blue),var(--cyan)); box-shadow:0 6px 16px rgba(37,99,235,.3); position:relative; z-index:2}
.step::before{content:""; position:absolute; top:29px; left:-50%; width:100%; height:2px; background:linear-gradient(90deg,var(--line2),var(--blue2)); z-index:1}
.step:first-child::before{display:none}
.step h3{font-size:1.02rem; margin-bottom:8px}
.step p{font-size:.88rem}

/* ---------- pillars / misc ---------- */
.pillars{background:linear-gradient(135deg,#0A2540,#123C6B); border-radius:20px; padding:64px 56px; color:#fff}
.pillars h2{color:#fff}
.pillars .grid-4{margin-top:40px}
.pillars .grid-3{margin-top:40px}
.pillar{border:1px solid rgba(159,193,230,.28); border-radius:14px; padding:26px; background:rgba(255,255,255,.04)}
.pillar h3{color:#fff; font-size:1.05rem; margin:14px 0 8px}
.pillar p{color:#AFC6DF; font-size:.9rem}
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chips span{font-family:var(--font-h); font-size:.85rem; font-weight:500; color:var(--navy); padding:8px 16px; border-radius:99px; background:#EAF1FA; border:1px solid var(--line2)}
.note-band{margin-top:26px; padding:18px 22px; border-left:4px solid var(--blue); background:#EAF1FA; border-radius:0 10px 10px 0; font-size:.94rem; color:var(--ink)}
.note-band em{font-style:normal; color:var(--blue); font-weight:600}

/* ---------- CTA ---------- */
.cta-band{background:linear-gradient(120deg,#0A2540 0%,#123C6B 100%); border-radius:20px; padding:64px 56px; display:flex; align-items:center; justify-content:space-between; gap:40px; color:#fff; position:relative; overflow:hidden}
.cta-band::after{content:""; position:absolute; right:-80px; top:-80px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle, rgba(56,189,248,.25), transparent 70%)}
.cta-band h2{color:#fff; max-width:560px}
.cta-band p{color:#C3D4E8; margin-top:12px; max-width:520px}

/* ---------- two-col ---------- */
.two-col{display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center}
.two-col h2{margin-bottom:18px}
.two-col p+p{margin-top:14px}
.list-check{list-style:none; margin-top:22px}
.list-check li{padding:10px 0 10px 34px; position:relative; color:var(--ink); font-weight:500}
.list-check li::before{content:""; position:absolute; left:0; top:12px; width:20px; height:20px; border-radius:6px; background:#E7EFFC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}
.figure-card{background:var(--white); border:1px solid var(--line); border-radius:20px; padding:36px; box-shadow:var(--shadow)}

/* ---------- forms ---------- */
.form-card{background:#fff; border:1px solid var(--line); border-radius:20px; padding:44px; box-shadow:var(--shadow)}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.form-grid .full{grid-column:1/-1}
label{display:block; font-family:var(--font-h); font-weight:600; font-size:.85rem; color:var(--navy); margin-bottom:7px}
input,select,textarea{width:100%; padding:12px 15px; border:1px solid var(--line2); border-radius:10px; font-family:var(--font-b); font-size:.95rem; color:var(--ink); background:#FBFDFF; transition:.18s}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.12); background:#fff}
textarea{min-height:120px; resize:vertical}
.form-success{display:none; text-align:center; padding:48px 20px}
.form-success .ok{width:72px; height:72px; margin:0 auto 22px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--blue),var(--cyan))}
.stepper{display:flex; gap:8px; margin-bottom:30px}
.stepper span{flex:1; height:5px; border-radius:99px; background:var(--line)}
.stepper span.on{background:var(--blue)}
.mailto-hint{margin-top:16px; font-size:.85rem; color:var(--muted); text-align:center}
.mailto-hint a{font-weight:600}

/* ---------- footer ---------- */
footer{background:var(--navy); color:#AFC6DF}
footer .container{padding:72px 24px 0}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:44px; padding-bottom:52px}
.foot-grid h4{color:#fff; font-size:.95rem; margin-bottom:18px}
.foot-grid a{display:block; color:#AFC6DF; font-size:.92rem; padding:5px 0}
.foot-grid a:hover{color:#fff}
.foot-brand p{font-size:.92rem; color:#8FA9C6; margin-top:16px; max-width:320px}
.foot-mail{display:inline-block; margin-top:14px; font-family:var(--font-h); font-weight:600; color:#fff !important; font-size:.95rem !important}
.foot-bottom{border-top:1px solid rgba(159,193,230,.2); padding:24px 0; font-size:.82rem; color:#7E9CBE}
.foot-bottom .container{padding:0 24px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}

/* ---------- articles ---------- */
.article-card h3{font-size:1.12rem}
.article-card .meta{font-size:.8rem; color:var(--blue); font-family:var(--font-h); font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px}
.case-card{border-left:4px solid var(--blue)}
.case-card .ind{font-family:var(--font-h); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); font-weight:600; margin-bottom:10px}

/* ---------- responsive ---------- */
@media(max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .process{grid-template-columns:repeat(2,1fr); gap:32px}
  .step::before{display:none}
  .two-col{grid-template-columns:1fr; gap:40px}
  nav.main{display:none}
  .menu-toggle{display:block}
  nav.main.open{display:flex; position:absolute; top:70px; left:0; right:0; flex-direction:column; gap:2px; background:#fff; border-bottom:1px solid var(--line); padding:14px 24px 20px; box-shadow:var(--shadow); z-index:99}
  .cta-band{flex-direction:column; align-items:flex-start; padding:48px 36px}
  .pillars{padding:48px 32px}
  .hero,.page-hero{aspect-ratio:auto; max-height:none; display:block}
  .nav-wrap{gap:12px; padding:0 16px}
  .nav-cta{padding:8px 14px; font-size:.82rem}
}
@media(max-width:640px){
  section{padding:64px 0}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .pillars .grid-4{margin-top:28px}
  .form-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr; gap:32px}
  .hero .container{padding-top:84px; padding-bottom:84px}
  .page-hero .container{padding-top:64px; padding-bottom:64px}
  .nav-cta{display:none}
  .lang-sw a{padding:6px 10px; font-size:.75rem}
  .brand .word{font-size:1.15rem}
  .form-card{padding:28px 20px}
  .cta-band,.pillars{padding:40px 24px}
  .hero-tune{margin-top:36px}
}