:root {
      --navy: #071944;
      --blue: #075fd8;
      --blue-2: #0a76ff;
      --ice: #eef7ff;
      --soft: #f7fbff;
      --line: #d8e8ff;
      --text: #14213d;
      --muted: #63708a;
      --card: rgba(255,255,255,.86);
      --shadow: 0 22px 60px rgba(7, 25, 68, .12);
      --radius: 28px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 10% 10%, rgba(10,118,255,.12), transparent 28%),
        radial-gradient(circle at 90% 5%, rgba(168,224,255,.32), transparent 24%),
        linear-gradient(180deg, #ffffff 0%, #f4f9ff 52%, #ffffff 100%);
    }
    a { color: inherit; text-decoration: none; }
    .wrap { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
    header {
      position: sticky; top: 0; z-index: 30;
      backdrop-filter: blur(18px);
      background: rgba(255,255,255,.78);
      border-bottom: 1px solid rgba(216,232,255,.8);
    }
    .nav { height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
    .brand { display:flex; align-items:center; gap: 12px; font-weight: 900; font-size: 1.45rem; color: var(--blue); letter-spacing: -.03em; }
    .logo { width: 42px; height: 42px; border-radius: 12px; background: var(--blue); display: grid; place-items: center; color:white; box-shadow: 0 12px 25px rgba(7,95,216,.25); }
    .logo svg { width: 27px; height: 27px; }
    .navlinks { display: flex; gap: 24px; align-items: center; font-weight: 700; color: #45506b; font-size: .95rem; }
    .btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius: 999px; padding: 13px 20px; font-weight: 850; transition:.2s ease; border:1px solid transparent; }
    .btn.primary { color: white; background: linear-gradient(135deg, var(--blue), var(--blue-2)); box-shadow: 0 18px 36px rgba(7,95,216,.24); }
    .btn.primary:hover { transform: translateY(-2px); box-shadow: 0 22px 42px rgba(7,95,216,.30); }
    .btn.ghost { color: var(--blue); border-color: var(--line); background: rgba(255,255,255,.75); }
    .hero { padding: 82px 0 48px; }
    .hero-grid { display:grid; grid-template-columns: 1fr .92fr; gap: 46px; align-items:center; }
    .eyebrow { display:inline-flex; align-items:center; gap:10px; padding: 8px 13px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.75); color:var(--blue); font-weight:850; font-size:.88rem; }
    .eyebrow span { width:9px; height:9px; border-radius:50%; background:var(--blue-2); box-shadow:0 0 0 6px rgba(10,118,255,.12); }
    h1 { margin: 22px 0 18px; font-size: clamp(3rem, 6vw, 5.7rem); line-height:.94; color:var(--navy); letter-spacing:-.07em; }
    .lead { max-width: 660px; font-size: clamp(1.12rem, 1.8vw, 1.38rem); line-height:1.65; color:#485672; margin: 0 0 30px; }
    .actions { display:flex; flex-wrap:wrap; gap: 14px; margin-bottom: 34px; }
    .metrics { display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; max-width:670px; }
    .metric { background: var(--card); border:1px solid var(--line); border-radius:22px; padding:20px; box-shadow: 0 15px 35px rgba(7,25,68,.07); }
    .metric strong { display:block; color:var(--blue); font-size:1.8rem; letter-spacing:-.04em; }
    .metric span { color:var(--muted); font-weight:700; font-size:.88rem; }
    .diagram-card { position: relative; min-height: 560px; border-radius: 40px; background: rgba(255,255,255,.68); border:1px solid var(--line); box-shadow: var(--shadow); overflow:hidden; padding: 26px; }
    .diagram-card:before { content:""; position:absolute; inset:45px; border:8px solid rgba(7,95,216,.12); border-radius:50%; }
    .center { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:205px; height:205px; border-radius:50%; background:linear-gradient(180deg,#fff,#f4f9ff); border:1px solid var(--line); display:grid; place-items:center; text-align:center; box-shadow: 0 18px 45px rgba(7,25,68,.12); z-index:3; }
    .center .logo { margin:0 auto 10px; width:58px; height:58px; border-radius:17px; }
    .center b { color:var(--blue); font-size:1.7rem; line-height:1; }
    .center small { display:block; margin-top:8px; color:var(--navy); font-weight:800; line-height:1.25; }
    .node { position:absolute; z-index:4; width:220px; background:#fff; border:1px solid var(--line); border-radius:22px; padding:18px; box-shadow:0 18px 42px rgba(7,25,68,.11); }
    .node h3 { margin:0 0 8px; color:var(--navy); font-size:1rem; letter-spacing:-.02em; }
    .node p { margin:0; color:var(--muted); font-size:.82rem; line-height:1.45; font-weight:650; }
    .node .ico { width:46px; height:46px; border-radius:50%; background:var(--ice); display:grid; place-items:center; color:var(--blue); margin-bottom:10px; font-size:1.45rem; font-weight:900; }
    .n1 { left:50%; top:20px; transform:translateX(-50%); }
    .n2 { right:20px; top:150px; }
    .n3 { right:88px; bottom:38px; }
    .n4 { left:88px; bottom:38px; }
    .n5 { left:20px; top:150px; }
    section { padding: 74px 0; }
    .section-head { max-width:780px; margin-bottom: 34px; }
    .kicker { color:var(--blue); font-size:.9rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
    h2 { margin:10px 0 14px; color:var(--navy); font-size:clamp(2.1rem,4vw,3.4rem); line-height:1.05; letter-spacing:-.055em; }
    .section-head p { color:var(--muted); font-size:1.12rem; line-height:1.65; }
    .cards { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
    .card { background:rgba(255,255,255,.84); border:1px solid var(--line); border-radius: var(--radius); padding:28px; box-shadow:0 18px 45px rgba(7,25,68,.08); }
    .card .ico { width:54px; height:54px; border-radius:17px; background:var(--ice); color:var(--blue); display:grid; place-items:center; font-size:1.55rem; margin-bottom:18px; }
    .card h3 { margin:0 0 12px; color:var(--navy); font-size:1.25rem; }
    .card p { color:var(--muted); line-height:1.6; margin:0; }
    .process { display:grid; grid-template-columns: repeat(5,1fr); gap:14px; }
    .step { position:relative; background:#fff; border:1px solid var(--line); border-radius:24px; padding:22px; box-shadow:0 15px 35px rgba(7,25,68,.06); }
    .step b { display:block; color:var(--blue); font-size:1.9rem; margin-bottom:10px; }
    .step h3 { margin:0 0 8px; color:var(--navy); }
    .step p { margin:0; color:var(--muted); font-size:.92rem; line-height:1.5; }
    .cta { border-radius:40px; background:linear-gradient(135deg, var(--navy), #063b91 70%, var(--blue)); color:white; padding:52px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:28px; box-shadow:0 28px 70px rgba(7,25,68,.22); }
    .cta h2 { color:white; margin-top:0; }
    .cta p { color:#dbe9ff; font-size:1.1rem; line-height:1.65; max-width:680px; }
    footer { padding:32px 0 44px; color:#66738d; }
    .foot { display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding-top:24px; }
    @media (max-width: 980px) {
      .hero-grid, .cta { grid-template-columns:1fr; }
      .diagram-card { min-height: 710px; }
      .n1{top:20px}.n2{right:20px;top:185px}.n5{left:20px;top:185px}.n3{right:20px;bottom:25px}.n4{left:20px;bottom:25px}
      .cards, .process { grid-template-columns:1fr 1fr; }
      .navlinks { display:none; }
    }
    @media (max-width: 640px) {
      .wrap { width: min(100% - 24px, 1180px); }
      .hero { padding-top: 48px; }
      .metrics, .cards, .process { grid-template-columns:1fr; }
      .diagram-card { display:none; }
      .cta { padding:32px 24px; }
      .foot { flex-direction:column; }
      h1 { font-size:3.25rem; }
    }