:root {
      --kk-blue:#00549b; --kk-red:#ed1b2f; --ink:#172033; --muted:#5f6b7a;
      --line:#dbe3ec; --soft:#f3f7fb; --white:#fff; --shadow:0 18px 55px rgba(23,32,51,.14);
      --radius:22px;
    }
    *{box-sizing:border-box} html{scroll-behavior:smooth}
    body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#fff;line-height:1.5}
    a{color:inherit} .page{overflow:hidden} .wrap{max-width:1180px;margin:0 auto}
    .section{padding:72px 24px}
    .topbar{padding:20px 24px;border-bottom:1px solid rgba(219,227,236,.9);background:rgba(255,255,255,.96);position:sticky;top:0;z-index:20;backdrop-filter:blur(10px)}
    .nav{display:flex;align-items:center;justify-content:space-between;gap:24px} .logo{display:block;width:240px;max-height:78px;object-fit:contain;object-position:left center}
    .contact{display:flex;align-items:center;gap:16px;font-weight:700;font-size:14px} .contact a{text-decoration:none} .dot{color:var(--kk-red)}
    .hero{padding:86px 24px 78px;background:linear-gradient(135deg,#eef6fc 0%,#fff 58%,#fff1f3 100%)}
    .hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:58px;align-items:center}
    .eyebrow{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--kk-red);font-weight:800;margin-bottom:16px}
    h1{font-size:clamp(42px,6vw,72px);line-height:1.02;letter-spacing:-.045em;margin:0 0 24px;max-width:850px}
    .lead{font-size:20px;color:var(--muted);max-width:700px;margin:0 0 30px}
    .actions{display:flex;flex-wrap:wrap;gap:14px} .btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 22px;border-radius:999px;text-decoration:none;font-weight:800;border:2px solid var(--kk-blue)}
    .btn.primary{background:var(--kk-blue);color:#fff} .btn.secondary{background:#fff;color:var(--kk-blue)}
    .hero-card{background:#fff;border:1px solid var(--line);border-radius:28px;padding:24px;box-shadow:var(--shadow)}
    .hero-card img{width:100%;height:360px;object-fit:cover;object-position:center;border-radius:18px;background:#fff}
    .benefit-strip{background:var(--ink);color:#fff;padding:24px} .benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center;font-weight:700}
    .intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:start} h2{font-size:clamp(34px,4vw,52px);line-height:1.08;letter-spacing:-.03em;margin:0 0 18px}
    .copy{font-size:18px;color:var(--muted)} .use-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
    .use{padding:22px;border-radius:18px;background:var(--soft);border:1px solid var(--line)} .use strong{display:block;margin-bottom:6px}
    .products{background:var(--soft)} .section-head{max-width:760px;margin-bottom:36px}
    .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:28px} .card{background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:0 10px 30px rgba(23,32,51,.07);display:flex;flex-direction:column}
    .card-media{height:280px;padding:22px;background:#fff} .card-media img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.28)}
    .card-body{padding:28px;display:flex;flex-direction:column;flex:1} .product-code{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--kk-red);font-weight:800}
    .card h3{font-size:28px;margin:8px 0 12px} .price{font-size:20px;font-weight:800;color:var(--kk-blue);margin:18px 0 8px} .price-note{font-size:13px;color:var(--muted)}
    .features{list-style:none;padding:0;margin:20px 0 24px} .features li{padding:10px 0;border-top:1px solid var(--line)} .features li:before{content:"+";color:var(--kk-red);font-weight:900;margin-right:10px}
    .card .btn{margin-top:auto;align-self:flex-start}
    .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:#fff} table{width:100%;border-collapse:collapse;min-width:760px} th,td{padding:16px;text-align:left;border-bottom:1px solid var(--line)} th{background:#e9eef4} td:first-child{font-weight:700}
    .note{font-size:14px;color:var(--muted);margin-top:14px}
    .timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .step{padding:26px;border:1px solid var(--line);border-radius:18px;background:#fff} .num{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--kk-blue);color:#fff;font-weight:800;margin-bottom:16px}
    .quote{background:linear-gradient(135deg,var(--ink),#273651);color:#fff} .quote-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:start} .quote .copy{color:#d9e0eb}
    form{background:#fff;color:var(--ink);padding:30px;border-radius:24px} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} label{font-size:13px;font-weight:800;display:block;margin-bottom:6px}
    input,select,textarea{width:100%;padding:14px 15px;border:1px solid #cfd8e3;border-radius:10px;font:inherit} textarea{min-height:130px;resize:vertical} .full{grid-column:1/-1}
    button{cursor:pointer} .form-note{font-size:13px;color:var(--muted);margin:12px 0 0}
    footer{padding:28px 24px;background:#0e1523;color:#fff} .footer-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
    @media(max-width:900px){.hero-grid,.intro-grid,.quote-grid{grid-template-columns:1fr} .cards{grid-template-columns:1fr} .timeline{grid-template-columns:repeat(2,1fr)} .hero-card img{height:300px}}
    @media(max-width:640px){.section{padding:54px 18px} .topbar{padding:14px 18px} .nav{align-items:flex-start} .logo{width:175px;max-height:58px} .contact{display:block;text-align:right;font-size:12px} .contact .dot{display:none} .contact a{display:block} .benefits,.use-grid,.timeline,.form-grid{grid-template-columns:1fr} h1{font-size:44px} .hero{padding:60px 18px} .full{grid-column:auto}}