:root{
      --bg: #f6f8fb;
      --panel:#ffffff;
      --ink:#0f172a;
      --muted:#475569;
      --accent:#2563eb;
      --accent2:#3b82f6;
      --border:#e5e7eb;
      --radius:16px;
      --shadow:0 10px 30px rgba(2,6,23,.08);
      --maxw:1120px;
    }
    *{box-sizing:border-box}
    body{margin:0;font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Arial;color:var(--ink);line-height:1.55;background:var(--bg)}
    a{color:var(--accent);text-decoration:none}
    .container{max-width:var(--maxw);margin-inline:auto;padding:20px}

    header{
      position:sticky; top:0; z-index:40;
      background:rgba(255,255,255,.9);
      backdrop-filter:saturate(120%) blur(8px);
      border-bottom:1px solid var(--border);
    }
    .nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
    .brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:-.015em;color:var(--accent)}
    .brand img{height:48px;width:auto;border-radius:50%}
    .nav-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
    .chip{padding:10px 14px;border:1px solid var(--border);border-radius:12px;background:#fff;color:var(--ink);font-weight:700}
    .btn{padding:12px 16px;border-radius:12px;border:0;color:#fff;font-weight:800;cursor:pointer;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 10px 26px rgba(37,99,235,.22)}
    .btn:hover{filter:brightness(1.02)}
    .btn.secondary{background:#fff;color:var(--ink);border:1px solid var(--border);box-shadow:none}

    .hero{padding:60px 20px;text-align:center}
    h1{margin:0 0 10px;font-size:clamp(28px,5.2vw,44px);line-height:1.1;color:var(--accent)}
    .lead{max-width:720px;margin:0 auto 22px;color:var(--muted);font-size:clamp(15px,2vw,18px)}

    .steps{display:grid;gap:22px;margin-top:40px}
    @media(min-width:800px){.steps{grid-template-columns:repeat(3,1fr)}}
    .step{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;text-align:center}
    .step h3{margin:0 0 10px;color:var(--accent)}
    .step p{margin:0;color:var(--muted)}

    footer{margin:50px 0 16px;text-align:center;color:var(--muted);font-size:13px}
    footer a{color:var(--accent)}
  div#container
{
   width: 1302px;
   position: relative;
   margin: 0 auto 0 auto;
   text-align: left;
}
body
{
   background-color: #87CEEB;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 21px;
   line-height: 1.1875;
   margin: 0;
   text-align: center;
}
a
{
   color: #000000;
   text-decoration: underline;
}
a:hover
{
   color: #000000;
   text-decoration: underline;
}
@media only screen and (min-width: 1280px) and (max-width: 1301px)
{
div#container
{
   width: 1280px;
}
body
{
   background-color: #87CEEB;
   background-image: none;
}
}
@media only screen and (min-width: 768px) and (max-width: 1279px)
{
div#container
{
   width: 768px;
}
body
{
   background-color: #87CEEB;
   background-image: none;
}
}
@media only screen and (max-width: 767px)
{
div#container
{
   width: 320px;
}
body
{
   background-color: #87CEEB;
   background-image: none;
}
}