:root{
      --blue:#2E62E8; --blue-dk:#7A99F5; --blue-hover:#4E7BEC;
      --ink:#16181D; --paper:#FAF7F0;
      --dground:#14161A; --dtext:#F2EFE7;
      --steel:#6A6E76; --dsteel:#9A9EA6;
      --rule:#DAD5CA; --drule:#2C2F36;
    }
    *{margin:0;padding:0;box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{font-family:'Outfit',sans-serif;font-weight:300;font-size:17px;line-height:1.6;
      color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
    a{color:inherit}
    .dark{background:var(--dground);color:var(--dtext)}
    .dark .ac{color:var(--blue-dk)} .light .ac,.ac{color:var(--blue)}
    .wrap{max-width:1040px;margin:0 auto;padding:0 28px}

    /* nav */
    nav{position:sticky;top:0;z-index:50;background:var(--dground);color:var(--dtext);
      border-bottom:1px solid var(--drule)}
    nav .wrap{display:flex;align-items:center;gap:28px;height:60px}
    .nav-logo{font-size:22px;letter-spacing:-0.9px;text-decoration:none;line-height:1}
    .nav-logo b{font-weight:700;color:var(--blue-dk)}
    .nav-logo span{font-weight:300}
    nav .links{margin-left:auto;display:flex;align-items:center;gap:24px;font-size:15px;font-weight:400}
    nav .links a{text-decoration:none;opacity:.75;transition:opacity .15s}
    nav .links a:hover{opacity:1}
    .btn-gh{padding:7px 16px;border-radius:6px;background:var(--blue);color:#fff !important;
      opacity:1 !important;font-weight:500;text-decoration:none}
    .btn-gh:hover{background:var(--blue-hover)}
    @media(max-width:720px){nav .links a:not(.btn-gh){display:none}}

    /* shared */
    section{padding:96px 0}
    .overline{font-size:13px;font-weight:500;letter-spacing:3px;text-transform:uppercase;margin-bottom:20px}
    h1{font-size:clamp(32px,5vw,50px);font-weight:700;letter-spacing:-1.5px;line-height:1.12}
    h2{font-size:clamp(27px,4vw,38px);font-weight:700;letter-spacing:-1px;line-height:1.15}
    .lg{display:none}
    @media(min-width:760px){.lg{display:inline}}
    .sub{font-weight:300;margin-top:22px;line-height:1.65}
    .cta{display:inline-block;margin-top:36px;padding:12px 26px;border-radius:6px;background:var(--blue);
      color:#fff;font-weight:500;font-size:16px;text-decoration:none}
    .cta:hover{background:var(--blue-hover)}
    .cta2{display:inline-block;margin-top:36px;margin-left:12px;padding:12px 26px;border-radius:6px;
      font-weight:400;font-size:16px;text-decoration:none;box-shadow:inset 0 0 0 1px rgba(128,128,128,.55)}

    /* hero */
    .hero{padding:110px 0 100px;text-align:center}
    .hero img{width:min(320px,70vw);height:auto}
    .hero h1{margin-top:56px}
    .hero .sub{max-width:640px;margin-left:auto;margin-right:auto;font-size:19px;color:var(--dsteel)}

    /* idea */
    .idea .sub{max-width:680px;font-size:18px}
    .pair-table{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px}
    .pcard{border:1px solid var(--rule);border-radius:10px;padding:28px;background:#fff}
    .pcard h3{font-size:19px;font-weight:600;letter-spacing:-0.3px;margin-bottom:10px}
    .pcard p{font-size:16px;color:#3c3f45}
    .stack-line{margin-top:40px;max-width:680px;font-size:18px}
    .stack-line b{font-weight:500}
    .tags{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
    .tag{font-size:12px;font-weight:500;letter-spacing:2px;padding:7px 14px;border:1px solid var(--rule);
      border-radius:99px;color:var(--steel)}
    @media(max-width:720px){.pair-table{grid-template-columns:1fr}}

    /* crmthree */
    .plock{font-size:clamp(30px,4.6vw,44px);letter-spacing:-1.6px;line-height:1}
    .plock b{font-weight:700}
    .plock span{font-weight:300;color:var(--blue-dk)}
    .byline{font-size:14px;margin-top:8px;color:var(--dsteel)}
    .byline b{font-weight:700;color:var(--blue-dk)}
    .crm h2{margin-top:48px;max-width:640px}
    .crm .sub{max-width:640px;color:var(--dsteel)}
    /* carousel */
    .shots{margin-top:56px}
    .car-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
      -webkit-overflow-scrolling:touch;gap:32px}
    .car-track::-webkit-scrollbar{display:none}
    .slide{flex:0 0 100%;scroll-snap-align:center;min-width:0}
    .frame{border:1px solid var(--drule);border-radius:12px;overflow:hidden;background:#1b1e24}
    .frame .bar{display:flex;gap:6px;padding:11px 14px;border-bottom:1px solid var(--drule)}
    .frame .bar i{width:9px;height:9px;border-radius:50%;background:#3a3e46}
    .frame img{display:block;width:100%;height:auto}
    .cap{margin-top:18px;font-size:16px;color:var(--dsteel);max-width:640px}
    .cap b{color:var(--dtext);font-weight:600}
    .car-nav{display:flex;align-items:center;gap:18px;margin-top:22px}
    .car-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--drule);background:none;
      color:var(--dtext);font-size:17px;cursor:pointer;line-height:1}
    .car-btn:hover{border-color:var(--blue-dk);color:var(--blue-dk)}
    .dots{display:flex;gap:8px}
    .dot{width:8px;height:8px;border-radius:50%;background:var(--drule);border:none;padding:0;cursor:pointer}
    .dot.on{background:var(--blue-dk)}

    /* feature table */
    .feat-table{margin-top:44px;border-top:1px solid var(--rule)}
    .feat-table details{border-bottom:1px solid var(--rule)}
    .feat-table summary{display:grid;grid-template-columns:240px 1fr 24px;gap:20px;align-items:baseline;
      padding:16px 4px;cursor:pointer;list-style:none}
    .feat-table summary::-webkit-details-marker{display:none}
    .feat-table summary b{font-size:16.5px;font-weight:600;letter-spacing:-0.2px}
    .feat-table summary span{font-size:15.5px;font-weight:300;color:var(--steel)}
    .feat-table summary::after{content:"+";grid-column:3;justify-self:end;font-size:19px;font-weight:300;
      color:var(--blue);line-height:1;transition:transform .15s}
    .feat-table details[open] summary::after{content:"−"}
    .feat-table summary:hover b{color:var(--blue)}
    .feat-table details p{padding:0 4px 20px;max-width:680px;font-size:15.5px;color:#3c3f45;line-height:1.6}
    @media(max-width:720px){
      .feat-table summary{grid-template-columns:1fr 24px}
      .feat-table summary span{grid-column:1;grid-row:2}
      .feat-table summary::after{grid-column:2;grid-row:1}
    }

    /* implementations */
    .impls{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px}
    .impl{display:flex;flex-direction:column;border:1px solid #4a4f58;border-radius:10px;
      padding:24px 26px;background:rgba(255,255,255,.03);
      text-decoration:none;color:var(--dtext);transition:border-color .15s;position:relative}
    .impl:hover{border-color:var(--blue-dk)}
    .impl h3{font-size:20px;font-weight:600;letter-spacing:-0.4px}
    .impl .stack{font-size:14.5px;color:var(--dsteel);line-height:1.55;margin-top:8px;flex:1}
    .impl .byai{font-size:13.5px;font-weight:600;color:var(--dtext);margin-top:12px}
    .impl .rd{font-size:14px;color:var(--blue-dk);margin-top:10px;display:inline-block}
    .yourstack{margin-top:28px;font-size:17px;font-weight:300;color:var(--dsteel);max-width:680px;line-height:1.6}
    .yourstack b{font-weight:500;color:var(--dtext)}
    @media(max-width:840px){.impls{grid-template-columns:1fr}}

    .why{display:flex;gap:26px;align-items:center;margin-top:52px;padding:28px;border:1px solid var(--drule);
      border-radius:12px;background:rgba(255,255,255,.025);max-width:720px}
    .why img{width:112px;height:112px;border-radius:50%;object-fit:cover;flex-shrink:0}
    .why .name{font-size:14px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--dsteel);margin-bottom:8px}
    .why blockquote{font-size:17px;font-weight:300;line-height:1.55;font-style:normal}
    @media(max-width:640px){.why{flex-direction:column;text-align:center}}

    /* ways */
    .ways{counter-reset:w}
    .way-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;margin-top:44px}
    .way{border:1px solid var(--rule);border-radius:10px;padding:28px;background:#fff}
    .way .n{font-size:14px;font-weight:700;color:var(--blue);letter-spacing:1px}
    .way h3{font-size:20px;font-weight:600;letter-spacing:-0.3px;margin:8px 0 10px}
    .way p{font-size:15.5px;color:#3c3f45}
    @media(max-width:840px){.way-grid{grid-template-columns:1fr}}

    /* blog */
    .blog p.lead{color:var(--dsteel);max-width:560px;margin-top:18px}
    .post-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;margin-top:44px}
    .post{border:1px solid var(--drule);border-radius:10px;padding:26px;text-decoration:none;display:block;
      transition:border-color .15s}
    .post:hover{border-color:var(--blue-dk)}
    .post .date{font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--dsteel)}
    .post h3{font-size:19px;font-weight:600;letter-spacing:-0.3px;margin:10px 0 8px}
    .post p{font-size:15px;color:var(--dsteel)}
    @media(max-width:840px){.post-grid{grid-template-columns:1fr}}

    /* contact */
    .contact{text-align:center}
    .contact .label{font-size:15px;color:var(--steel)}
    .contact .mail{display:inline-block;font-size:clamp(22px,3.5vw,30px);font-weight:400;color:var(--blue);
      text-decoration:none;margin-top:10px}
    .contact .mail:hover{color:var(--blue-hover)}
    .contact .gh{margin-top:18px;font-size:15px;color:var(--steel)}
    .contact .gh a{color:var(--blue);text-decoration:none}

    /* footer */
    footer{padding:56px 0;text-align:center}
    footer img{width:150px;height:auto}
    .foot-links{margin-top:26px;font-size:14px;color:var(--dsteel)}
    .foot-links a{text-decoration:none;color:var(--dsteel)}
    .foot-links a:hover{color:var(--dtext)}
    .foot-egg{margin-top:22px;font-size:11px;font-weight:200;letter-spacing:2px;color:var(--dtext);opacity:.28}

    /* product pages: header block */
    .phead{padding:88px 0 72px}
    .phead .plock{font-size:clamp(34px,5vw,52px);letter-spacing:-2px}
    .phead h1{margin-top:44px;max-width:680px;font-size:clamp(30px,4.6vw,44px)}
    .phead .sub{max-width:640px;color:var(--dsteel)}
    .hcta{margin-top:8px}
    .hcta .cta,.hcta .cta2{margin-top:28px}
    .dlmeta{font-size:13px;font-weight:300;margin-top:14px;color:var(--dsteel);letter-spacing:.01em}
    .dlmeta a{color:var(--dsteel);text-decoration:underline;text-underline-offset:3px}
    .dlmeta a:hover{color:var(--dtext)}
    .crumb{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--dsteel);margin-bottom:28px}
    .crumb a{text-decoration:none;color:var(--dsteel)}
    .crumb a:hover{color:var(--dtext)}
    .status{display:inline-block;font-size:12px;font-weight:500;letter-spacing:2px;text-transform:uppercase;
      padding:6px 12px;border-radius:99px;border:1px solid #4a4f58;color:var(--dsteel);margin-left:14px;vertical-align:middle}

    /* homepage: product cards */
    .prods{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px}
    .prod{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:12px;padding:30px 30px 26px;
      background:#fff;text-decoration:none;color:var(--ink);transition:border-color .15s}
    .prod:hover{border-color:var(--blue)}
    .prod .pl{font-size:30px;letter-spacing:-1.2px;line-height:1}
    .prod .pl b{font-weight:700}.prod .pl span{font-weight:300;color:var(--blue)}
    .prod .pnum{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--steel);margin-top:10px}
    .prod p{font-size:15.5px;color:#3c3f45;margin-top:16px;flex:1;line-height:1.55}
    .prod .pfoot{display:flex;justify-content:space-between;align-items:center;margin-top:22px;font-size:14px}
    .prod .pfoot .go{color:var(--blue);font-weight:500}
    .prod .pfoot .st{font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--steel)}
    .prods-note{margin-top:22px;font-size:15px;color:var(--steel)}
    @media(max-width:720px){.prods{grid-template-columns:1fr}}