:root{
    --paper:#F5F8FA;
    --panel:#EAF0F4;
    --panel-2:#DDE7ED;
    --ink:#0D1726;
    --muted:#607080;
    --line:#D3DEE5;
    --line-strong:#AABCC8;
    --accent:#17C3B2;
    --accent-deep:#0E9489;
    --clay:#5B5BD6;
    --ok:#16875F;
    --serif:'Space Grotesk','Helvetica Neue',Arial,sans-serif;
    --sans:'Inter','Helvetica Neue',Arial,sans-serif;
    --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
    --maxw:1180px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    /* faint architectural grid texture */
    background-image:
      linear-gradient(var(--line) 1px,transparent 1px),
      linear-gradient(90deg,var(--line) 1px,transparent 1px);
    background-size:34px 34px;
    background-position:center top;
    background-attachment:fixed;
    position:relative;
  }
  body::before{
    /* soften the grid so it reads as texture, not a table */
    content:"";position:fixed;inset:0;background:var(--paper);opacity:.95;z-index:-1;pointer-events:none;
  }
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  ::selection{background:var(--accent);color:var(--ink)}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
  .mono{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .clay{color:var(--clay)}


  /* ---------- header ---------- */
  header{
    position:sticky;top:0;z-index:50;
    background:rgba(245,248,250,.88);
    backdrop-filter:saturate(140%) blur(10px);
    border-bottom:1px solid var(--line-strong);
  }
  .nav{display:flex;align-items:center;gap:26px;height:66px}
  .brand{display:flex;align-items:center;gap:11px;cursor:pointer;margin-right:8px}
  .brand .mk{width:26px;height:26px;flex:none;position:relative}
  .brand .mk i{position:absolute;inset:0;border:2px solid var(--accent);border-radius:3px}
  .brand .mk i::after{content:"";position:absolute;inset:5px;background:var(--accent);border-radius:1px}
  .brand .name{font-family:var(--serif);font-weight:700;font-size:20px;letter-spacing:-.045em;text-transform:uppercase}
  .brand .name span{color:inherit}
  .brand .name .brand-dot{color:var(--accent);padding:0 .025em}
  .nav-links{display:flex;align-items:center;gap:3px;margin-left:auto}
  .nav-links a{
    font-size:13.5px;font-weight:500;color:var(--muted);
    padding:8px 11px;border-radius:4px;position:relative;transition:.18s;letter-spacing:.005em;
  }
  .nav-links a:hover{color:var(--ink)}
  .nav-links a.active{color:var(--ink)}
  .nav-links a.active::after{
    content:"";position:absolute;left:11px;right:11px;bottom:2px;height:2px;background:var(--accent);
  }
  .btn{
    font-family:var(--sans);font-weight:600;font-size:13.5px;
    display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:none;
    padding:11px 18px;border-radius:5px;transition:.2s;letter-spacing:.01em;
  }
  .btn-primary{background:var(--accent);color:#071411}
  .btn-primary:hover{background:var(--accent-deep);transform:translateY(-1px)}
  .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
  .btn-ghost:hover{border-color:var(--ink);background:var(--panel)}
  .btn .ar{transition:transform .2s}
  .btn:hover .ar{transform:translateX(3px)}
  .nav .btn{margin-left:14px}
  .menu-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line-strong);
    border-radius:4px;padding:7px 9px;cursor:pointer;flex-direction:column;gap:4px}
  .menu-toggle span{width:20px;height:2px;background:var(--ink);display:block}

  /* ---------- page system ---------- */
  main{min-height:60vh}
  .page{display:none;animation:pageIn .5s cubic-bezier(.2,.7,.3,1)}
  .page.active{display:block}
  @keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

  section.band{padding:76px 0;border-bottom:1px solid var(--line)}
  section.band.tight{padding:56px 0}

  /* section label / index */
  .ix{display:flex;align-items:baseline;gap:14px;margin-bottom:26px}
  .ix .no{font-family:var(--mono);font-size:12px;color:var(--clay);letter-spacing:.12em}
  .ix .lb{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .ix .ln{flex:1;height:1px;background:var(--line-strong);align-self:center;margin-left:6px}

  h1{font-family:var(--serif);font-weight:500;line-height:.98;letter-spacing:-.035em;
    font-size:clamp(40px,6.4vw,74px)}
  h2{font-family:var(--serif);font-weight:500;line-height:1.02;letter-spacing:-.025em;
    font-size:clamp(28px,4vw,44px)}
  h3{font-family:var(--serif);font-weight:600;font-size:22px;letter-spacing:-.015em;line-height:1.15}
  .lead{font-size:clamp(18px,2vw,21px);color:var(--muted);max-width:60ch;line-height:1.55}
  p{max-width:66ch}
  p+p{margin-top:16px}
  .em{color:var(--ink);font-style:italic;font-family:var(--sans)}

  /* ---------- hero ---------- */
  .hero{padding:64px 0 40px;position:relative;overflow:hidden}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
  .hero .ey{margin-bottom:22px}
  .hero h1{margin-bottom:24px}
  .hero h1 .k{color:var(--ink);font-style:normal;background:linear-gradient(transparent 72%,var(--accent) 72%);padding:0 .03em}
  .hero .lead{margin-bottom:32px}
  .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  .hero .fine{margin-top:26px;display:flex;gap:22px;flex-wrap:wrap}
  .hero .fine div{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
  .hero .fine b{color:var(--ink);font-weight:600}
  .tick{width:12px;height:4px;background:var(--accent);flex:none;border-radius:0}

  /* stagger */
  .st{opacity:0;transform:translateY(14px);animation:st .7s cubic-bezier(.2,.7,.3,1) forwards}
  .st.d1{animation-delay:.05s}.st.d2{animation-delay:.14s}.st.d3{animation-delay:.23s}
  .st.d4{animation-delay:.32s}.st.d5{animation-delay:.41s}
  @keyframes st{to{opacity:1;transform:none}}

  /* ---------- product mock ---------- */
  .mock{
    background:var(--panel);border:1px solid var(--line-strong);border-radius:8px;
    box-shadow:0 30px 60px -34px rgba(23,20,15,.5);overflow:hidden;position:relative;
  }
  .mock .bar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line-strong);background:var(--panel-2)}
  .mock .bar i{width:9px;height:9px;border-radius:50%;background:var(--line-strong)}
  .mock .bar .t{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:8px;letter-spacing:.08em}
  .mock .body{display:grid;grid-template-columns:1.4fr 1fr}
  .room-canvas{position:relative;min-height:320px;background:#d8d5cc;overflow:hidden}
  .room-canvas .room-scene{position:absolute;inset:0;width:100%;height:100%;display:block}
  .room-canvas::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(26,26,24,.08));}
  .surf{position:absolute;border:1.5px dashed var(--accent);border-radius:2px}
  .surf::before{content:attr(data-l);position:absolute;top:-9px;left:6px;background:var(--accent);
    color:var(--ink);font-family:var(--mono);font-size:9px;letter-spacing:.08em;padding:1px 5px;border-radius:2px}
  .surf i{position:absolute;width:6px;height:6px;border:1.5px solid var(--accent);background:var(--paper)}
  .surf i.tl{top:-3px;left:-3px}.surf i.tr{top:-3px;right:-3px}
  .surf i.bl{bottom:-3px;left:-3px}.surf i.br{bottom:-3px;right:-3px}
  .mock .panel{border-left:1px solid var(--line-strong);padding:16px;background:var(--panel);display:flex;flex-direction:column;gap:14px}
  .mock .pl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .swrow{display:flex;gap:7px}
  .sw{width:100%;height:30px;border-radius:3px;border:1px solid rgba(0,0,0,.08)}
  .sw.a{background:#b9905f}.sw.b{background:#8a8f83}.sw.c{background:#c7c0b2}.sw.d{background:#3d4a52}
  .sw.sel{outline:2px solid var(--accent);outline-offset:2px}
  .feat{display:flex;flex-wrap:wrap;gap:6px}
  .chip{font-family:var(--mono);font-size:10px;letter-spacing:.04em;border:1px solid var(--line-strong);
    padding:3px 8px;border-radius:20px;color:var(--muted);background:var(--paper)}
  .chip.on{background:var(--accent);color:var(--ink);border-color:var(--accent);font-weight:500}
  .costline{margin-top:auto;border-top:1px dashed var(--line-strong);padding-top:12px;display:flex;justify-content:space-between;align-items:flex-end}
  .costline .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .costline .v{font-family:var(--serif);font-size:26px;color:var(--ink)}
  .costline .v small{font-size:12px;color:var(--muted);font-family:var(--mono)}

  /* ---------- generic grids ---------- */
  .grid{display:grid;gap:0;border-top:1px solid var(--line-strong);border-left:1px solid var(--line-strong)}
  .g2{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(3,1fr)}
  .cell{border-right:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);
    padding:28px;background:var(--paper);transition:.22s;position:relative}
  .cell:hover{background:var(--panel)}
  .cell .cno{font-family:var(--mono);font-size:11px;color:var(--clay);letter-spacing:.12em;margin-bottom:14px;display:block}
  .cell h3{margin-bottom:9px}
  .cell p{font-size:15px;color:var(--muted);max-width:42ch}

  /* two-column prose */
  .cols2{display:grid;grid-template-columns:1fr 1fr;gap:48px}
  .stack>*+*{margin-top:16px}

  /* list checks */
  ul.checks{list-style:none;display:grid;gap:11px;margin-top:8px}
  ul.checks li{position:relative;padding-left:24px;font-size:15.5px;color:var(--muted);max-width:52ch}
  ul.checks li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;background:var(--accent);border-radius:1px}
  ul.checks li b{color:var(--ink);font-weight:600}

  /* steps */
  .steps{display:grid;gap:0;counter-reset:s;border-top:1px solid var(--line-strong)}
  .step{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:26px 8px;border-bottom:1px solid var(--line);align-items:baseline}
  .step .n{font-family:var(--serif);font-size:44px;color:var(--line-strong);line-height:1;transition:.2s;font-weight:600}
  .step:hover .n{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:6px;text-underline-offset:4px}
  .step h3{margin-bottom:6px}
  .step p{color:var(--muted);font-size:15.5px}

  /* callout / quote */
  .quote{border-left:3px solid var(--accent);padding:6px 0 6px 26px;margin:34px 0}
  .quote p{font-family:var(--serif);font-size:clamp(21px,2.6vw,28px);font-style:normal;color:var(--ink);line-height:1.3;max-width:42ch}

  .panelbox{background:var(--panel);border:1px solid var(--line-strong);border-radius:8px;padding:34px}

  /* pill row of stats */
  .kpis{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line-strong);border-radius:8px;overflow:hidden}
  .kpi{padding:24px;border-right:1px solid var(--line-strong);background:var(--paper)}
  .kpi:last-child{border-right:none}
  .kpi .n{font-family:var(--serif);font-size:34px;color:var(--ink);line-height:1;background:linear-gradient(transparent 72%,var(--accent) 72%);display:inline}
  .kpi .l{font-size:13px;color:var(--muted);margin-top:8px}

  /* roadmap */
  .road{display:grid;gap:0;border-left:2px solid var(--line-strong);margin-left:8px}
  .ph{padding:0 0 34px 30px;position:relative}
  .ph::before{content:"";position:absolute;left:-9px;top:4px;width:14px;height:14px;background:var(--paper);border:2px solid var(--ink)}
  .ph.done::before{background:var(--accent);border-color:var(--ink)}
  .ph .tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--clay)}
  .ph h3{margin:6px 0 8px}
  .ph p{color:var(--muted);font-size:15px}

  /* faq */
  .faq{border-top:1px solid var(--line-strong)}
  details{border-bottom:1px solid var(--line);padding:4px 0}
  details summary{cursor:pointer;list-style:none;padding:20px 40px 20px 4px;position:relative;
    font-family:var(--serif);font-size:19px;color:var(--ink)}
  details summary::-webkit-details-marker{display:none}
  details summary::after{content:"+";position:absolute;right:6px;top:18px;font-family:var(--mono);font-size:22px;color:var(--ink);background:var(--accent);width:26px;height:26px;line-height:24px;text-align:center;transition:.2s}
  details[open] summary::after{transform:rotate(45deg)}
  details .a{padding:0 4px 22px;color:var(--muted);font-size:15.5px;max-width:64ch}



  .contact-panel{display:grid;gap:18px;align-items:start}
  .contact-panel h2{max-width:18ch}
  .contact-panel p{color:var(--muted);max-width:54ch}
  .contact-panel .btn{width:max-content;margin-top:4px}
  .contact-address{display:flex;align-items:baseline;gap:18px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .contact-address-label{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
  .contact-address a{font-family:var(--serif);font-size:clamp(20px,2.5vw,28px);font-weight:600;color:var(--ink);word-break:break-word}
  .contact-address a:hover{color:var(--accent-deep)}

  /* team */
  .team{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line-strong);border-left:1px solid var(--line-strong)}
  .tm{border-right:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);padding:26px;background:var(--paper)}
  .tm .av{width:52px;height:52px;border:1.5px dashed var(--line-strong);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--muted);font-family:var(--mono);font-size:10px;margin-bottom:16px}
  .tm h3{font-size:19px}
  .tm .ro{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:4px 0 12px}
  .tm p{font-size:14px;color:var(--muted)}
  .team{grid-template-columns:repeat(4,1fr)}
  .tm{display:flex;flex-direction:column;min-height:100%}
  .tm .av{width:100%;height:auto;aspect-ratio:1/1;border:1px solid var(--line-strong);border-radius:0;overflow:hidden;background:var(--panel);margin-bottom:18px;color:var(--ink);font-family:var(--serif);font-size:34px;font-weight:600;letter-spacing:-.03em}
  .tm .av img{width:100%;height:100%;object-fit:cover}

  .tm .av.company-logo{background:#fff;padding:28px 18px}
  .tm .av.company-logo img{object-fit:contain}
  .tm .av.placeholder{background:linear-gradient(135deg,var(--panel),var(--panel-2));position:relative}
  .tm .av.placeholder::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:var(--accent)}
  .tm .team-link{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:18px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
  .tm .team-link::after{content:"↗";font-size:13px}
  .tm .team-link:hover{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:4px;text-underline-offset:4px}
  .partner-lockup{margin-top:28px;padding:24px;background:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
  .partner-lockup .partner-copy{color:var(--paper);max-width:52ch}
  .partner-lockup .partner-copy .mono{color:#AAA79F;margin-bottom:6px}
  .partner-lockup .partner-copy p{font-size:14px;color:#D6D3CB}
  .partner-lockup img{width:min(250px,62vw);height:auto}


  /* footer */
  footer{
    background:#08111D;
    color:#C8D3DA;
    padding:68px 0 26px;
    margin-top:0
  }
  footer a{
    color:#C8D3DA;
    transition:color .18s ease,opacity .18s ease
  }
  footer a:hover{color:#fff}

  .foot{
    display:grid;
    grid-template-columns:minmax(300px,1.35fr) minmax(150px,.62fr) minmax(160px,.68fr) minmax(250px,1fr);
    gap:48px;
    align-items:start
  }

  .foot-brand{padding-right:10px}
  .foot .brand{margin:0 0 18px;gap:12px}
  .foot .brand .mk{width:30px;height:30px}
  .foot .brand .mk i{border-color:var(--accent)}
  .foot .brand .mk i::after{background:var(--accent)}
  .foot .brand .name{color:#fff;font-size:23px}

  .foot h4{
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:#8495A2;
    margin-bottom:18px;
    font-weight:500
  }

  .foot ul{
    list-style:none;
    display:grid;
    gap:11px
  }

  .foot ul li a{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    font-size:14px
  }

  .foot p{
    margin:0;
    color:#8FA0AC;
    font-size:14px;
    line-height:1.65
  }

  .foot .bl{cursor:pointer}

  .foot-status{
    margin-top:22px;
    display:flex;
    align-items:flex-start;
    gap:10px;
    color:#718490;
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.06em;
    line-height:1.5;
    text-transform:uppercase
  }

  .foot-status span{
    width:7px;
    height:7px;
    margin-top:4px;
    flex:none;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 4px rgba(23,195,178,.12)
  }

  .foot-contact{
    padding:24px;
    border:1px solid #223241;
    border-radius:8px;
    background:rgba(255,255,255,.025)
  }

  .foot-contact p{
    margin-bottom:14px;
    font-size:13.5px
  }

  .foot-email{
    display:block;
    color:#fff;
    font-family:var(--serif);
    font-size:17px;
    font-weight:600;
    word-break:break-word
  }

  .foot-contact-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:18px;
    color:var(--accent);
    font-size:13px;
    font-weight:600
  }

  .foot-contact-link span{transition:transform .18s ease}
  .foot-contact-link:hover span{transform:translateX(3px)}

  .footbar{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:20px;
    margin-top:52px;
    padding-top:22px;
    border-top:1px solid #1D2A36
  }

  .footbar>span{
    color:#758795;
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:.08em
  }

  .footbar>span:last-child{text-align:right}

  .footbar-links{
    display:flex;
    align-items:center;
    gap:20px
  }

  .footbar-links a{
    color:#758795;
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:.08em
  }

  .footbar-links a:hover{color:#fff}

  .pagehead{padding:60px 0 30px;border-bottom:1px solid var(--line)}
  .pagehead h1{font-size:clamp(34px,5vw,58px);margin:16px 0}
  .pagehead .lead{max-width:64ch}

  .center-narrow{max-width:760px;margin:0 auto}

  /* reveal on scroll */
  .rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
  .rv.in{opacity:1;transform:none}

  @media(max-width:900px){
    .hero-grid{grid-template-columns:1fr;gap:40px}
    .cols2{grid-template-columns:1fr;gap:32px}
    .g3{grid-template-columns:1fr}
    .g2{grid-template-columns:1fr}
    .team{grid-template-columns:repeat(2,1fr)}
    .kpis{grid-template-columns:1fr}
    .kpi{border-right:none;border-bottom:1px solid var(--line-strong)}
    .mock .body{grid-template-columns:1fr}
    .mock .panel{border-left:none;border-top:1px solid var(--line-strong)}
    .foot{
      grid-template-columns:1.2fr .8fr .8fr;
      grid-template-areas:
        "brand product resources"
        "contact contact contact";
      gap:38px 30px
    }
    .foot-brand{grid-area:brand;padding-right:0}
    .foot-product{grid-area:product}
    .foot-resources{grid-area:resources}
    .foot-contact{grid-area:contact}
    .footbar{grid-template-columns:1fr auto;gap:16px}
    .footbar>span:last-child{display:none}
    .nav-links,.nav .btn{display:none}
    .nav-links.open{display:flex;position:absolute;top:66px;left:0;right:0;flex-direction:column;
      background:var(--paper);border-bottom:1px solid var(--line-strong);padding:14px 20px;gap:2px;box-shadow:0 20px 40px -20px rgba(0,0,0,.3)}
    .nav-links.open a{padding:12px 8px;font-size:15px}
    .nav-links.open .active::after{display:none}
    .menu-toggle{display:flex}
    .step{grid-template-columns:64px 1fr;gap:14px}
    .step .n{font-size:30px}
    .frow{grid-template-columns:1fr}
  }
  @media(max-width:620px){
    .team{grid-template-columns:1fr}
  }

  @media(max-width:600px){
    footer{padding:52px 0 22px}
    .foot{
      grid-template-columns:1fr 1fr;
      grid-template-areas:
        "brand brand"
        "product resources"
        "contact contact";
      gap:34px 22px
    }
    .foot-brand{grid-area:brand}
    .foot-product{grid-area:product}
    .foot-resources{grid-area:resources}
    .foot-contact{grid-area:contact}
    .foot .brand .name{font-size:21px}
    .foot h4{margin-bottom:14px}
    .foot ul{gap:9px}
    .foot ul li a{font-size:13.5px}
    .foot-contact{padding:20px}
    .foot-email{font-size:16px}
    .footbar{
      margin-top:38px;padding-top:18px;
      grid-template-columns:1fr;
      justify-items:start;gap:12px
    }
    .footbar-links{order:-1;gap:18px}
    .contact-address{align-items:flex-start;flex-direction:column;gap:6px}
    .contact-panel .btn{width:100%;justify-content:center}
  }

  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    .st,.rv{opacity:1;transform:none}
  }

/* ==========================================================================
   AI·PLIED refined responsive design layer
   Keeps the approved visual direction while improving hierarchy, spacing,
   component polish and behaviour across desktop, tablet and mobile.
   ========================================================================== */

:root{
  --paper:#F6F9FA;
  --panel:#EAF1F3;
  --panel-2:#DDE8EB;
  --ink:#0B1724;
  --muted:#5D6E7B;
  --line:#D4E0E5;
  --line-strong:#A9BDC6;
  --accent:#19C7B5;
  --accent-deep:#0B9286;
  --clay:#5757D8;
  --white:#FFFFFF;
  --navy:#07121E;
  --shadow-sm:0 8px 24px rgba(8,24,38,.07);
  --shadow-md:0 18px 46px rgba(8,24,38,.11);
  --shadow-lg:0 34px 80px rgba(8,24,38,.16);
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:22px;
  --maxw:1240px;
}

html{
  scroll-padding-top:88px;
}

body{
  font-size:16px;
  line-height:1.68;
  overflow-x:hidden;
  background-color:var(--paper);
  background-image:
    linear-gradient(rgba(143,169,179,.15) 1px,transparent 1px),
    linear-gradient(90deg,rgba(143,169,179,.15) 1px,transparent 1px);
  background-size:48px 48px;
}

body::before{
  opacity:1;
  background:
    radial-gradient(circle at 88% 4%,rgba(25,199,181,.13),transparent 32rem),
    radial-gradient(circle at 6% 42%,rgba(87,87,216,.07),transparent 34rem),
    linear-gradient(rgba(246,249,250,.92),rgba(246,249,250,.97));
}

a,
button,
summary{
  -webkit-tap-highlight-color:transparent;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid rgba(25,199,181,.42);
  outline-offset:4px;
}

.wrap{
  width:100%;
  max-width:var(--maxw);
  padding-inline:clamp(22px,3vw,40px);
}

.mono{
  font-size:11px;
  font-weight:500;
  letter-spacing:.17em;
}

/* Header */
header{
  top:0;
  border-bottom:1px solid rgba(133,158,169,.38);
  background:rgba(246,249,250,.82);
  box-shadow:0 1px 0 rgba(255,255,255,.7);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  backdrop-filter:saturate(160%) blur(18px);
}

.nav{
  height:76px;
  gap:24px;
}

.brand{
  gap:12px;
  flex:none;
}

.brand .mk{
  width:29px;
  height:29px;
}

.brand .mk i{
  border-width:2px;
  border-radius:5px;
  box-shadow:0 0 0 1px rgba(25,199,181,.08);
}

.brand .mk i::after{
  inset:6px;
  border-radius:2px;
}

.brand .name{
  font-size:21px;
  letter-spacing:-.05em;
}

.nav-links{
  gap:5px;
}

.nav-links a{
  padding:10px 11px;
  border-radius:8px;
  font-size:13px;
  transition:color .18s ease,background .18s ease;
}

.nav-links a:hover{
  background:rgba(221,232,235,.65);
}

.nav-links a.active,
.nav-links a[aria-current="page"]{
  color:var(--ink);
  background:rgba(255,255,255,.64);
}

.nav-links a.active::after,
.nav-links a[aria-current="page"]::after{
  left:11px;
  right:11px;
  bottom:4px;
  height:2px;
  border-radius:2px;
}

.nav .btn{
  margin-left:8px;
  white-space:nowrap;
}

.menu-toggle{
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:0;
  border-radius:10px;
  background:rgba(255,255,255,.6);
}

.menu-toggle span{
  width:19px;
  border-radius:2px;
}

/* Typography and spacing */
h1{
  max-width:14ch;
  font-size:clamp(48px,5.8vw,78px);
  font-weight:550;
  line-height:.98;
  letter-spacing:-.048em;
}

h2{
  font-size:clamp(32px,3.8vw,50px);
  font-weight:550;
  line-height:1.04;
  letter-spacing:-.037em;
}

h3{
  font-size:clamp(20px,1.7vw,24px);
  line-height:1.18;
}

.lead{
  max-width:62ch;
  color:#536675;
  font-size:clamp(18px,1.55vw,21px);
  line-height:1.62;
}

section.band{
  position:relative;
  padding:clamp(76px,8vw,108px) 0;
  border-bottom:1px solid rgba(170,190,199,.55);
}

section.band.tight{
  padding:clamp(62px,6vw,84px) 0;
}

section.band:nth-of-type(even){
  background:linear-gradient(180deg,rgba(234,241,243,.36),rgba(246,249,250,.16));
}

.ix{
  gap:16px;
  margin-bottom:34px;
}

.ix .no,
.ix .lb{
  font-size:10.5px;
  font-weight:500;
}

.ix .no{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:35px;
  height:25px;
  padding:0 8px;
  border:1px solid rgba(87,87,216,.25);
  border-radius:999px;
  background:rgba(87,87,216,.06);
  color:var(--clay);
}

.ix .ln{
  background:linear-gradient(90deg,var(--line-strong),transparent);
}

/* Buttons */
.btn{
  min-height:48px;
  padding:13px 20px;
  border-radius:10px;
  font-size:13.5px;
  box-shadow:none;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease,
    border-color .2s ease,
    color .2s ease;
}

.btn-primary{
  background:var(--accent);
  box-shadow:0 9px 22px rgba(25,199,181,.2);
}

.btn-primary:hover{
  background:#18BBAA;
  box-shadow:0 13px 28px rgba(25,199,181,.28);
  transform:translateY(-2px);
}

.btn-ghost{
  border-color:rgba(117,145,157,.65);
  background:rgba(255,255,255,.42);
}

.btn-ghost:hover{
  border-color:var(--ink);
  background:var(--white);
  box-shadow:var(--shadow-sm);
  transform:translateY(-2px);
}

.cta-row{
  gap:12px;
}

/* Hero */
.hero{
  padding:clamp(70px,7vw,105px) 0 clamp(72px,7vw,96px);
}

.hero::before{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  right:-170px;
  top:-170px;
  border-radius:50%;
  border:1px solid rgba(25,199,181,.18);
  box-shadow:
    0 0 0 70px rgba(25,199,181,.025),
    0 0 0 140px rgba(25,199,181,.018);
  pointer-events:none;
}

.hero-grid{
  grid-template-columns:minmax(0,1fr) minmax(520px,.96fr);
  gap:clamp(58px,6vw,92px);
}

.hero .ey{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:26px;
}

.hero .ey::before{
  content:"";
  width:28px;
  height:2px;
  border-radius:2px;
  background:var(--accent);
}

.hero h1{
  margin-bottom:28px;
}

.hero h1 .k{
  position:relative;
  background:none;
  padding:0;
  color:var(--ink);
}

.hero h1 .k::after{
  content:"";
  position:absolute;
  left:.02em;
  right:.02em;
  bottom:.03em;
  z-index:-1;
  height:.18em;
  border-radius:3px;
  background:var(--accent);
  opacity:.88;
}

.hero .lead{
  max-width:55ch;
  margin-bottom:34px;
}

.hero .fine{
  gap:10px;
  margin-top:29px;
}

.hero .fine div{
  min-height:35px;
  padding:7px 11px;
  border:1px solid rgba(169,189,198,.55);
  border-radius:999px;
  background:rgba(255,255,255,.52);
  color:#607380;
  font-size:12px;
}

.tick{
  width:7px;
  height:7px;
  border-radius:50%;
  box-shadow:0 0 0 4px rgba(25,199,181,.12);
}

/* Product mock */
.mock{
  isolation:isolate;
  border:1px solid rgba(142,167,177,.72);
  border-radius:var(--radius-lg);
  background:rgba(234,241,243,.84);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}

.mock::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  z-index:4;
  height:3px;
  background:linear-gradient(90deg,var(--accent),rgba(87,87,216,.8),transparent 88%);
}

.mock::after{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:-1;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.75),transparent 35%);
}

.mock .bar{
  min-height:43px;
  padding:11px 16px;
  background:rgba(221,232,235,.88);
}

.mock .bar i{
  width:8px;
  height:8px;
}

.mock .bar .t{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mock .body{
  grid-template-columns:minmax(0,1.48fr) minmax(225px,.72fr);
}

.room-canvas{
  min-height:430px;
  background:#CFD5D2;
}

.mock .panel{
  padding:22px 20px;
  gap:21px;
  background:rgba(238,244,246,.96);
}

.mock .pl{
  font-size:9.5px;
  font-weight:500;
}

.swrow{
  gap:9px;
}

.sw{
  height:38px;
  border-radius:7px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}

.sw.sel{
  outline-width:2px;
  outline-offset:3px;
}

.feat{
  gap:7px;
}

.chip{
  padding:5px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.75);
  font-size:9px;
}

.costline{
  gap:12px;
  padding-top:17px;
}

.costline .v{
  font-size:28px;
  font-weight:600;
  letter-spacing:-.03em;
}

/* Content columns and cards */
.cols2{
  grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:clamp(52px,7vw,92px);
  align-items:start;
}

.grid{
  gap:18px;
  border:0;
}

.g2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.g3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.cell{
  min-width:0;
  min-height:210px;
  padding:30px;
  overflow:hidden;
  border:1px solid rgba(160,184,194,.62);
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.66);
  box-shadow:0 1px 0 rgba(255,255,255,.8);
  transition:
    transform .25s cubic-bezier(.2,.7,.3,1),
    box-shadow .25s ease,
    border-color .25s ease,
    background .25s ease;
}

.cell::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:3px;
  background:linear-gradient(90deg,var(--accent),rgba(25,199,181,0));
  transform:scaleX(.28);
  transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}

.cell .cno{
  margin-bottom:18px;
  color:var(--clay);
  font-size:10px;
  font-weight:500;
}

.cell h3{
  margin-bottom:12px;
}

.cell p{
  color:#60717E;
  font-size:14.5px;
  line-height:1.65;
}

@media(hover:hover){
  .cell:hover{
    z-index:1;
    border-color:rgba(25,199,181,.72);
    background:rgba(255,255,255,.92);
    box-shadow:var(--shadow-md);
    transform:translateY(-5px);
  }

  .cell:hover::before{
    transform:scaleX(1);
  }
}

ul.checks{
  gap:14px;
  margin-top:2px;
}

ul.checks li{
  min-height:28px;
  padding-left:34px;
  color:#5C6F7C;
  font-size:15px;
  line-height:1.58;
}

ul.checks li::before{
  top:2px;
  width:23px;
  height:23px;
  border-radius:7px;
  background:
    linear-gradient(135deg,var(--accent),#38D9C8);
  box-shadow:0 7px 14px rgba(25,199,181,.18);
}

ul.checks li::after{
  content:"";
  position:absolute;
  left:7px;
  top:8px;
  width:8px;
  height:4px;
  border-left:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  transform:rotate(-45deg);
}

/* Steps */
.steps{
  gap:13px;
  border:0;
}

.step{
  grid-template-columns:82px minmax(0,1fr);
  gap:26px;
  padding:26px 28px;
  align-items:center;
  border:1px solid rgba(160,184,194,.58);
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.62);
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}

.step .n{
  display:flex;
  align-items:center;
  justify-content:center;
  width:58px;
  height:58px;
  border:1px solid rgba(25,199,181,.45);
  border-radius:14px;
  background:rgba(25,199,181,.08);
  color:var(--ink);
  font-family:var(--mono);
  font-size:18px;
  font-weight:500;
  text-decoration:none;
}

.step h3{
  margin-bottom:7px;
}

.step p{
  color:#5C6F7C;
  font-size:15px;
}

@media(hover:hover){
  .step:hover{
    border-color:rgba(25,199,181,.75);
    background:rgba(255,255,255,.92);
    transform:translateX(5px);
  }

  .step:hover .n{
    color:var(--ink);
    text-decoration:none;
  }
}

/* Quotes, panels and KPIs */
.quote{
  position:relative;
  max-width:920px;
  margin:36px 0;
  padding:34px 38px 34px 46px;
  overflow:hidden;
  border:1px solid rgba(25,199,181,.36);
  border-left:4px solid var(--accent);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  background:
    linear-gradient(120deg,rgba(25,199,181,.10),rgba(255,255,255,.7) 62%);
  box-shadow:var(--shadow-sm);
}

.quote::after{
  content:"·";
  position:absolute;
  right:25px;
  top:-38px;
  color:rgba(25,199,181,.14);
  font-family:var(--serif);
  font-size:150px;
  line-height:1;
}

.quote p{
  position:relative;
  z-index:1;
  max-width:37ch;
  font-size:clamp(24px,2.4vw,31px);
  line-height:1.35;
}

.panelbox{
  padding:clamp(28px,4vw,46px);
  border:1px solid rgba(157,182,192,.62);
  border-radius:var(--radius-lg);
  background:
    linear-gradient(145deg,rgba(255,255,255,.82),rgba(234,241,243,.76));
  box-shadow:var(--shadow-md);
}

.kpis{
  gap:0;
  overflow:hidden;
  border:1px solid rgba(157,182,192,.65);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}

.kpi{
  padding:30px;
  background:rgba(255,255,255,.7);
}

.kpi .n{
  font-size:40px;
}

.kpi .l{
  margin-top:11px;
  color:#60717E;
  font-size:13px;
}

/* Roadmap */
.road{
  gap:12px;
  margin-left:0;
  border-left:0;
}

.ph{
  padding:27px 30px 27px 70px;
  border:1px solid rgba(160,184,194,.58);
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.62);
}

.ph::before{
  left:27px;
  top:30px;
  width:18px;
  height:18px;
  border:3px solid var(--ink);
  border-radius:50%;
  background:var(--paper);
  box-shadow:0 0 0 6px rgba(13,23,38,.045);
}

.ph.done::before{
  background:var(--accent);
  border-color:var(--ink);
}

.ph::after{
  content:"";
  position:absolute;
  left:35px;
  top:53px;
  bottom:-19px;
  width:1px;
  background:linear-gradient(var(--line-strong),transparent);
}

.ph:last-child::after{
  display:none;
}

.ph .tag{
  font-size:10px;
}

.ph h3{
  margin:8px 0 9px;
}

/* FAQ */
.faq{
  display:grid;
  gap:12px;
  border:0;
}

details{
  overflow:hidden;
  border:1px solid rgba(160,184,194,.58);
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.62);
  padding:0;
  transition:border-color .2s ease,background .2s ease;
}

details[open]{
  border-color:rgba(25,199,181,.75);
  background:rgba(255,255,255,.9);
}

details summary{
  padding:23px 66px 23px 24px;
  font-size:18px;
  font-weight:600;
}

details summary::after{
  right:20px;
  top:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:10px;
  background:rgba(25,199,181,.13);
  color:var(--ink);
  line-height:1;
}

details .a{
  padding:0 24px 25px;
  color:#5C6F7C;
}

/* Page headings */
.pagehead{
  position:relative;
  overflow:hidden;
  padding:clamp(68px,7vw,96px) 0 clamp(58px,6vw,78px);
  border-bottom:1px solid rgba(160,184,194,.55);
  background:
    radial-gradient(circle at 84% 15%,rgba(25,199,181,.13),transparent 25rem),
    linear-gradient(180deg,rgba(255,255,255,.52),rgba(234,241,243,.28));
}

.pagehead::after{
  content:"";
  position:absolute;
  right:6vw;
  bottom:-92px;
  width:240px;
  height:240px;
  border:1px solid rgba(25,199,181,.2);
  border-radius:50%;
  box-shadow:
    0 0 0 42px rgba(25,199,181,.025),
    0 0 0 84px rgba(25,199,181,.018);
}

.pagehead .wrap{
  position:relative;
  z-index:1;
}

.pagehead h1{
  max-width:16ch;
  margin:17px 0 22px;
  font-size:clamp(42px,5vw,65px);
}

.pagehead .lead{
  max-width:62ch;
}

/* Contact */
.contact-panel{
  gap:21px;
}

.contact-address{
  gap:22px;
  padding:19px 0;
  border-color:rgba(160,184,194,.62);
}

.contact-address a{
  font-size:clamp(22px,2.6vw,31px);
}

.contact-address a:hover{
  color:var(--accent-deep);
}

/* Team */
.team{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  border:0;
}

.tm{
  min-width:0;
  padding:18px 18px 22px;
  overflow:hidden;
  border:1px solid rgba(160,184,194,.6);
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.67);
  box-shadow:0 1px 0 rgba(255,255,255,.8);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}

.tm .av{
  aspect-ratio:1/1;
  margin-bottom:21px;
  border:0;
  border-radius:12px;
  background:var(--panel);
}

.tm .av img{
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}

.tm .av.company-logo{
  border:1px solid rgba(160,184,194,.45);
  border-radius:12px;
  padding:clamp(22px,3vw,38px) 20px;
}

.tm h3{
  font-size:19px;
}

.tm .ro{
  margin:6px 0 13px;
  color:var(--accent-deep);
  font-size:9.5px;
}

.tm p{
  color:#61727E;
  font-size:13.5px;
  line-height:1.62;
}

.tm .team-link{
  padding-top:21px;
  color:var(--ink);
}

@media(hover:hover){
  .tm:hover{
    border-color:rgba(25,199,181,.68);
    box-shadow:var(--shadow-md);
    transform:translateY(-5px);
  }

  .tm:hover .av img{
    transform:scale(1.025);
  }
}

/* Footer */
footer{
  position:relative;
  overflow:hidden;
  padding:76px 0 28px;
  background:
    radial-gradient(circle at 10% 10%,rgba(25,199,181,.10),transparent 30rem),
    var(--navy);
}

footer::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(128,161,173,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(128,161,173,.08) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.65),transparent 80%);
}

footer .wrap{
  position:relative;
  z-index:1;
}

.foot{
  grid-template-columns:minmax(300px,1.42fr) minmax(140px,.62fr) minmax(150px,.68fr) minmax(250px,.95fr);
  gap:clamp(35px,4.2vw,58px);
}

.foot .brand{
  margin-bottom:20px;
}

.foot-brand>p{
  max-width:32ch;
  color:#9AAAB4;
}

.foot h4{
  margin-bottom:20px;
  color:#7F929F;
}

.foot ul{
  gap:12px;
}

.foot ul li a{
  position:relative;
  color:#BAC7CE;
}

.foot ul li a::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:1px;
  height:1px;
  background:var(--accent);
  transition:right .2s ease;
}

.foot ul li a:hover::after{
  right:0;
}

.foot-status{
  margin-top:25px;
}

.foot-contact{
  padding:25px;
  border-color:#263846;
  border-radius:14px;
  background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

.foot-email{
  font-size:18px;
}

.footbar{
  margin-top:58px;
  padding-top:23px;
}

/* Responsive refinement */
@media(max-width:1120px){
  .nav{
    gap:18px;
  }

  .nav-links a{
    padding-inline:8px;
    font-size:12.5px;
  }

  .nav .btn{
    display:none;
  }

  .hero-grid{
    grid-template-columns:minmax(0,.93fr) minmax(470px,1.07fr);
    gap:48px;
  }

  .room-canvas{
    min-height:400px;
  }

  .team{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:900px){
  body{
    background-attachment:scroll;
  }

  .nav{
    height:68px;
  }

  .nav-links.open{
    top:68px;
    max-height:calc(100vh - 68px);
    padding:16px clamp(22px,3vw,40px) 22px;
    overflow:auto;
    border-bottom:1px solid rgba(133,158,169,.5);
    background:rgba(246,249,250,.98);
    box-shadow:0 22px 42px rgba(8,24,38,.14);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
  }

  .nav-links.open a{
    padding:13px 12px;
    border-bottom:1px solid rgba(169,189,198,.32);
    border-radius:8px;
    font-size:15px;
  }

  .nav-links.open a:last-child{
    border-bottom:0;
  }

  .hero{
    padding-top:64px;
  }

  .hero-grid{
    grid-template-columns:1fr;
    gap:50px;
  }

  .hero-grid>div:first-child{
    max-width:720px;
  }

  .mock{
    width:min(100%,790px);
    margin-inline:auto;
  }

  .mock .body{
    grid-template-columns:1fr;
  }

  .room-canvas{
    min-height:0;
    aspect-ratio:16/10;
  }

  .mock .panel{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
    border-top:1px solid var(--line-strong);
    border-left:0;
  }

  .costline{
    grid-column:1/-1;
  }

  .g3{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .g2{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .cols2{
    grid-template-columns:1fr;
    gap:38px;
  }

  .foot{
    grid-template-columns:1.1fr .75fr .75fr;
    grid-template-areas:
      "brand product resources"
      "contact contact contact";
    gap:42px 30px;
  }

  .foot-contact{
    max-width:none;
  }
}

@media(max-width:720px){
  .wrap{
    padding-inline:22px;
  }

  h1{
    font-size:clamp(43px,12vw,58px);
  }

  h2{
    font-size:clamp(31px,8.7vw,40px);
  }

  section.band{
    padding:68px 0;
  }

  section.band.tight{
    padding:58px 0;
  }

  .pagehead{
    padding:58px 0 52px;
  }

  .pagehead h1{
    font-size:clamp(40px,11vw,54px);
  }

  .g2,
  .g3{
    grid-template-columns:1fr;
  }

  .cell{
    min-height:0;
    padding:25px;
  }

  .team{
    grid-template-columns:1fr;
  }

  .tm{
    padding:17px 17px 22px;
  }

  .tm .av{
    aspect-ratio:4/3;
  }

  .tm .av img{
    object-position:center 32%;
  }

  .tm .av.company-logo{
    aspect-ratio:4/3;
  }

  .step{
    grid-template-columns:62px minmax(0,1fr);
    gap:18px;
    padding:22px;
  }

  .step .n{
    width:50px;
    height:50px;
    border-radius:12px;
    font-size:15px;
  }

  .quote{
    padding:29px 25px 29px 30px;
  }

  .quote p{
    font-size:clamp(22px,6vw,28px);
  }

  .kpis{
    grid-template-columns:1fr;
  }

  .kpi{
    border-right:0;
    border-bottom:1px solid var(--line-strong);
  }

  .kpi:last-child{
    border-bottom:0;
  }

  .ph{
    padding:25px 22px 25px 60px;
  }

  .ph::before{
    left:22px;
  }

  .ph::after{
    left:30px;
  }
}

@media(max-width:600px){
  .hero{
    padding:48px 0 62px;
  }

  .hero::before{
    display:none;
  }

  .hero .ey{
    margin-bottom:20px;
  }

  .hero h1{
    margin-bottom:23px;
  }

  .hero .lead{
    margin-bottom:28px;
  }

  .cta-row{
    align-items:stretch;
  }

  .cta-row>.btn{
    width:100%;
    justify-content:center;
  }

  .hero .fine{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }

  .hero .fine div{
    width:100%;
    justify-content:flex-start;
  }

  .mock{
    border-radius:16px;
  }

  .mock .bar{
    padding-inline:13px;
  }

  .mock .bar .t{
    font-size:9.5px;
  }

  .room-canvas{
    aspect-ratio:4/3;
  }

  .mock .panel{
    grid-template-columns:1fr;
    padding:19px 17px;
  }

  .costline{
    grid-column:auto;
  }

  .costline .v{
    font-size:25px;
  }

  .ix{
    gap:10px;
    margin-bottom:27px;
  }

  .ix .lb{
    letter-spacing:.12em;
  }

  .ix .ln{
    min-width:20px;
  }

  .panelbox{
    padding:25px 21px;
    border-radius:16px;
  }

  .contact-address{
    flex-direction:column;
    align-items:flex-start;
    gap:5px;
  }

  details summary{
    padding:20px 58px 20px 20px;
    font-size:17px;
  }

  details summary::after{
    right:14px;
    top:14px;
  }

  details .a{
    padding:0 20px 22px;
  }

  footer{
    padding:58px 0 24px;
  }

  .foot{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "brand brand"
      "product resources"
      "contact contact";
    gap:38px 22px;
  }

  .foot-brand{
    max-width:480px;
  }

  .foot-contact{
    padding:22px;
  }

  .footbar{
    grid-template-columns:1fr;
    justify-items:start;
    gap:12px;
    margin-top:40px;
  }

  .footbar-links{
    order:-1;
  }
}

@media(max-width:420px){
  .wrap{
    padding-inline:18px;
  }

  .brand .name{
    font-size:19px;
  }

  .menu-toggle{
    width:42px;
    height:42px;
  }

  h1{
    font-size:42px;
  }

  .lead{
    font-size:17px;
  }

  .btn{
    min-height:47px;
    padding-inline:17px;
  }

  .cell{
    padding:23px 21px;
  }

  .foot{
    gap:34px 16px;
  }

  .foot h4{
    font-size:9.5px;
  }

  .foot ul li a{
    font-size:13px;
  }

  .foot-email{
    font-size:16px;
  }
}

@supports not (backdrop-filter:blur(1px)){
  header,
  .nav-links.open{
    background:rgba(246,249,250,.98);
  }
}

@media(prefers-reduced-motion:reduce){
  .cell,
  .step,
  .tm,
  .btn,
  .tm .av img,
  .foot ul li a::after{
    transition:none!important;
  }
}