@font-face{font-family:"Unbounded";font-weight:500;font-display:swap;src:url(fonts/unbounded-cyrillic-500.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Unbounded";font-weight:500;font-display:swap;src:url(fonts/unbounded-latin-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-weight:400;font-display:swap;src:url(fonts/onest-cyrillic-400.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-weight:500;font-display:swap;src:url(fonts/onest-cyrillic-500.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-weight:600;font-display:swap;src:url(fonts/onest-cyrillic-600.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-weight:400;font-display:swap;src:url(fonts/onest-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-weight:500;font-display:swap;src:url(fonts/onest-latin-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-weight:600;font-display:swap;src:url(fonts/onest-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --sky:#e9f3fc;        /* page */
  --sky-deep:#d9eafa;   /* alternate band */
  --cloud:#fbfdff;      /* surfaces */
  --mist:#c4defa;       /* cloud shapes */
  --azure:#1f6fc4;      /* actions */
  --azure-dark:#175aa3;
  --ink:#10304f;        /* text */
  --slate:#46647f;      /* secondary text */
  --mint:#cbefe0;       /* "passed" */
  --mint-ink:#1b6f4e;
  --display:"Unbounded","Onest",system-ui,sans-serif;
  --body:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(16px,5vw,48px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sky);color:var(--ink);font:400 1.0625rem/1.65 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--azure);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px;z-index:50}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(1120px,100% - 2*var(--gutter));margin-inline:auto}
.wrap.narrow{max-width:760px;margin-inline:max(var(--gutter),calc((100% - 1120px)/2))}
.wrap.two{display:grid;gap:40px;grid-template-columns:1fr}

/* type scale: 1.0625 body, 1.25 lead, display via clamp */
h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.01em;line-height:1.15}
h2{font-size:clamp(1.5rem,3.4vw,2.1rem);max-width:22ch}
h3{font-size:1.125rem}
.section-title{margin-bottom:40px}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px var(--gutter);max-width:1216px;margin-inline:auto}
.mark{display:inline-flex;align-items:center;gap:10px;color:var(--azure);font:500 1.25rem var(--display);text-decoration:none}
.mark{color:var(--ink)}
.mark svg{color:var(--azure)}

/* buttons */
.btn{appearance:none;border:0;cursor:pointer;background:var(--azure);color:#fff;font:600 1rem/1 var(--body);padding:16px 26px;border-radius:999px;transition:background .15s,transform .15s}
.btn:hover{background:var(--azure-dark)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.6;cursor:progress}
.btn-small{padding:12px 20px;font-size:.95rem}
.btn-large{padding:20px 34px;font-size:1.125rem}
.textlink{color:var(--azure-dark);font-weight:600;text-underline-offset:4px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:32px}

/* hero */
.hero{display:grid;gap:48px;align-items:center;width:min(1120px,100% - 2*var(--gutter));margin:clamp(24px,6vw,72px) auto clamp(56px,9vw,112px)}
.hero h1{font-size:clamp(2.25rem,7.4vw,4.75rem);line-height:1.05;letter-spacing:-.025em;max-width:13ch}
.tagline{margin-top:24px;font:600 1.25rem/1.4 var(--body);color:var(--azure-dark)}
.lead{margin-top:16px;max-width:52ch;color:var(--slate);font-size:1.125rem}
.hero-art{position:relative;min-height:330px}
.cloud{position:absolute;fill:var(--mist);width:min(100%,520px)}
.cloud-back{right:-4%;top:-10%;opacity:.7}
.cloud-front{left:-6%;bottom:-14%;fill:#fff;opacity:.9}
.log{position:relative;margin:36px auto 0;max-width:420px;padding:22px 24px;background:var(--cloud);border-radius:20px;box-shadow:0 18px 50px -20px rgba(16,48,79,.35);font:500 .95rem/1.9 ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;color:var(--ink)}
.log-line{opacity:0;animation:tick .35s ease-out forwards;animation-delay:calc(var(--i) * .65s + .4s)}
.l0{--i:0;color:var(--slate)}.l1{--i:1}.l2{--i:2}.l3{--i:3}.l4{--i:4}
.l5{--i:5.3;margin-top:10px;padding:8px 12px;border-radius:10px;background:var(--mint);color:var(--mint-ink);font-weight:600}
.log b{color:var(--mint-ink)}
@keyframes tick{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* bands: sky gets slightly deeper as the page goes "up" in altitude */
.prose-band,.help-band,.clouds-band,.cta-band,.experience,.steps-band,.services{padding:clamp(56px,8vw,104px) 0}
.prose-band{background:var(--cloud)}
.prose-band p,.clouds-band p{margin-top:20px;max-width:62ch;color:var(--slate);font-size:1.125rem}
.services{background:var(--sky)}
.help-band{background:var(--cloud)}
.help-band p{margin:16px 0 28px;color:var(--slate);font-size:1.125rem}
.clouds-band{background:var(--sky-deep)}
.experience{background:var(--cloud)}
.steps-band{background:var(--sky)}
.cta-band{background:var(--sky-deep);text-align:left}
.cta-band p{margin:16px 0 32px;color:var(--slate);font-size:1.125rem}

/* service groups: three layered bands rather than three identical cards */
.group{display:grid;gap:20px;padding:28px 0;border-top:2px solid var(--mist)}
.group:first-of-type{border-top:0;padding-top:0}
.group-head p{margin-top:8px;color:var(--slate)}
.items{display:grid;gap:18px}
.items li{max-width:62ch;padding-left:20px;position:relative;line-height:1.6}
.items li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:8px;border-radius:50%;background:var(--azure)}
.items strong{font-weight:600}
.g2 .items li::before{background:#6aa7e6}
.g3 .items li::before{background:#9cc6f0}

/* experience */
.experience h3{margin:0 0 12px;font-size:1rem;color:var(--azure-dark)}
.experience p{margin-top:16px;max-width:56ch;color:var(--slate)}
.experience h2+p{color:var(--ink)}
.plain{display:grid;gap:10px;margin-bottom:32px}
.plain li{padding-left:20px;position:relative;max-width:52ch}
.plain li::before{content:"✓";position:absolute;left:0;color:var(--mint-ink);font-weight:700}
.certs{margin-top:0!important}

/* steps: a real sequence, so numbers are information here */
.steps{display:grid;gap:20px;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:4px 16px;max-width:62ch}
.steps li::before{content:counter(s);grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--azure);color:#fff;font:500 1.1rem var(--display)}
.steps strong{font-weight:600;font-size:1.125rem;align-self:end}
.steps li{color:var(--slate)}
.steps li strong{color:var(--ink)}

.foot{padding:28px 0 40px;background:var(--sky-deep);color:var(--slate);font-size:.95rem}
.foot .wrap{display:flex;justify-content:space-between}

/* contact dialog */
dialog{border:0;padding:32px;border-radius:24px;background:var(--cloud);color:var(--ink);width:min(520px,100% - 32px);box-shadow:0 30px 80px -20px rgba(16,48,79,.5)}
dialog::backdrop{background:rgba(16,48,79,.45);backdrop-filter:blur(3px)}
dialog h2{font-size:1.4rem;max-width:none}
dialog p{margin-top:10px;color:var(--slate)}
.dlg-close{position:absolute;right:12px;top:12px;margin:0}
.x{appearance:none;border:0;background:transparent;font-size:1.8rem;line-height:1;width:44px;height:44px;border-radius:50%;cursor:pointer;color:var(--slate)}
.x:hover{background:var(--sky)}
.ts-box{margin-top:20px;min-height:70px}
textarea{width:100%;margin-top:20px;padding:16px;border:2px solid var(--mist);border-radius:14px;background:#fff;color:var(--ink);font:400 1rem/1.55 var(--body);resize:vertical;min-height:150px}
textarea::placeholder{color:#8a9aab;opacity:1}
textarea:focus{outline:none;border-color:var(--azure)}
.hint{font-size:.9rem}
.error{margin-top:12px;color:#a3281f;font-weight:500}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
dialog .actions{margin-top:20px}
[hidden]{display:none!important}

@media (min-width:880px){
  .hero{grid-template-columns:1.15fr 1fr}
  .hero-art{min-height:420px;display:grid;align-items:center}
  .log{margin:0 0 0 auto;width:100%}
  .group{grid-template-columns:minmax(220px,1fr) 2fr;gap:48px;padding:40px 0}
  .wrap.two{grid-template-columns:1fr 1fr;gap:72px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .log-line{animation:none;opacity:1}
  .btn{transition:none}
}