/* Prohisob — responsive landing page. No external dependencies. */

:root {
  --paper:#f7f7f2;
  --ink:#171c20;
  --muted:#60676b;
  --yellow:#ffbc32;
  --line:#dcded8;
  --green:#268645;
  --radius:16px;
  --content:1240px
}

*,*::before,*::after {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.55
}

a {
  color:inherit;
  text-decoration:none
}

button,input {
  font:inherit
}

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

button {
  cursor:pointer
}

svg {
  display:block
}

button svg,a svg {
  flex-shrink:0
}

::selection {
  background:#ffda81;
  color:#171c20
}

:focus-visible {
  outline:3px solid #316bc4;
  outline-offset:5px
}

section[id] {
  scroll-margin-top:20px
}

button:disabled {
  cursor:default
}

h1,h2,h3,p {
  margin:0
}

img {
  max-width:100%
}

.container {
  width:min(var(--content),calc(100% - 96px));
  margin-inline:auto
}

.icon {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round
}

.icon-lg {
  width:32px;
  height:32px
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.skip-link {
  position:fixed;
  top:-70px;
  left:20px;
  z-index:99;
  background:var(--yellow);
  padding:12px 20px;
  border-radius:8px
}

.skip-link:focus {
  top:12px
}

.eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:1.9px;
  text-transform:uppercase
}

.eyebrow::before {
  content:"";
  width:8px;
  height:8px;
  flex:none;
  background:var(--yellow);
  border-radius:50%
}

.section-title {
  font-size:clamp(32px,4vw,52px);
  line-height:1.12;
  letter-spacing:-2.2px;
  font-weight:750
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:12px;
  line-height:1;
  font-size:28px;
  font-weight:800;
  letter-spacing:-1.5px
}

.brand-mark {
  display:grid;
  place-items:center;
  width:37px;
  height:37px;
  flex:none;
  border-radius:10px;
  background:var(--yellow);
  color:var(--ink);
  font-size:29px;
  font-weight:850;
  letter-spacing:-1.5px;
  box-shadow:inset 0 0 0 1px #e5a929
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:50px;
  padding:13px 22px;
  background:var(--yellow);
  border:1px solid transparent;
  border-radius:9px;
  font-size:15px;
  font-weight:700;
  line-height:1.4;
  transition:background .18s,transform .18s,box-shadow .18s
}

.button:hover {
  background:#ffca54;
  transform:translateY(-2px);
  box-shadow:0 7px 16px #c9992022
}

.button-outline {
  border-color:#71777a;
  background:transparent;
  box-shadow:none
}

.button-outline:hover {
  background:#eeeee8;
  box-shadow:none
}

.arrow {
  width:18px;
  height:18px
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:15px;
  font-weight:650
}

.text-link:hover {
  text-decoration:underline;
  text-underline-offset:5px
}

.play-icon {
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border:1.4px solid;
  border-radius:50%
}

.play-icon .icon {
  width:15px;
  height:15px
}

.site-header {
  position:sticky;
  top:0;
  z-index:30;
  background:#f7f7f2f0;
  backdrop-filter:blur(16px);
  border-bottom:1px solid transparent
}

.header-inner {
  min-height:98px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px
}

.desktop-nav {
  display:flex;
  gap:30px;
  margin-left:auto;
  margin-right:auto
}

.desktop-nav a {
  font-size:14px;
  font-weight:550;
  color:#30373a;
  transition:color .15s
}

.desktop-nav a:hover {
  color:#9b6500
}

.header-actions {
  display:flex;
  gap:25px;
  align-items:center
}

.login-link {
  font-size:14px;
  font-weight:600
}

.header-cta {
  min-height:44px;
  padding:11px 19px;
  font-size:14px
}

.menu-toggle {
  display:none;
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:1px solid var(--line);
  border-radius:8px
}

.mobile-nav {
  display:none;
  padding:4px 24px 22px;
  background:var(--paper);
  border-bottom:1px solid var(--line)
}

.mobile-nav a {
  display:block;
  padding:12px 0;
  font-size:16px
}

.mobile-nav[hidden] {
  display:none
}

.hero {
  position:relative;
  padding:46px 0 74px;
  overflow:hidden
}

.hero-grid {
  display:grid;
  grid-template-columns:.91fr 1.21fr;
  gap:40px;
  align-items:center;
  min-height:535px
}

.hero-copy {
  position:relative;
  z-index:2;
  padding-bottom:25px
}

.hero h1 {
  margin:24px 0 23px;
  font-size:clamp(47px,4.55vw,68px);
  line-height:1.035;
  letter-spacing:-3.4px;
  font-weight:800
}

.hero h1 span {
  display:block
}

.hero h1 mark {
  display:inline-block;
  color:var(--ink);
  background:var(--yellow);
  padding:1px 8px 7px;
  margin:7px 0 0 -8px;
  line-height:1.02
}

.hero-description {
  max-width:390px;
  color:#4e575d;
  font-size:18px;
  line-height:1.6;
  letter-spacing:-.35px
}

.hero-buttons {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:29px
}

.hero-buttons .button {
  min-height:54px
}

.device-note {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:25px;
  color:#71787c;
  font-size:12px
}

.device-note .icon {
  width:18px;
  height:18px
}

.device-note span {
  margin-left:5px
}

.hero-art {
  position:relative;
  padding:0 0 40px;
  min-width:0
}

.dashboard {
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  min-height:474px;
  background:#fff;
  border:1px solid #e0e3df;
  outline:5px solid #ffffff65;
  border-radius:15px;
  box-shadow:0 18px 48px #222d3213,0 3px 12px #222d320d;
  overflow:hidden
}

.dashboard-sidebar {
  background:#22292d;
  color:#c6cbcd;
  padding:22px 12px
}

.dashboard-sidebar .brand {
  color:#fff;
  font-size:17px;
  letter-spacing:-.5px;
  gap:7px;
  padding:0 3px;
  margin-bottom:30px
}

.dashboard-sidebar .brand-mark {
  width:24px;
  height:24px;
  border-radius:6px;
  font-size:20px
}

.mock-nav {
  display:flex;
  flex-direction:column;
  gap:6px
}

.mock-nav span {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:10px;
  line-height:1.5;
  padding:9px 8px;
  border-radius:6px
}

.mock-nav .icon {
  width:15px;
  height:15px;
  stroke-width:1.6
}

.mock-nav .active {
  background:#ffffff12;
  color:#fff
}

.mock-nav .active .icon {
  color:var(--yellow)
}

.dashboard-main {
  min-width:0;
  padding:21px 19px 30px
}

.dashboard-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:20px
}

.dashboard-top strong {
  font-size:17px;
  letter-spacing:-.6px;
  line-height:1.2
}

.date-label {
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid #ebede9;
  border-radius:6px;
  padding:7px;
  font-size:9px;
  white-space:nowrap;
  color:#60666d
}

.date-label .icon {
  width:12px;
  height:12px
}

.stat-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px
}

.mini-stat {
  padding:12px 10px;
  border:1px solid #e9ece7;
  border-radius:8px
}

.stat-label {
  display:flex;
  align-items:center;
  gap:6px;
  color:#848990;
  font-size:9px;
  margin-bottom:6px;
  white-space:nowrap
}

.stat-icon {
  display:grid;
  place-items:center;
  width:21px;
  height:21px;
  border-radius:5px;
  background:#fff3ca;
  color:#b57c00
}

.stat-icon .icon {
  width:13px;
  height:13px
}

.stat-icon.red {
  color:#d97575;
  background:#ffe8e8
}

.stat-icon.green {
  color:#438648;
  background:#e4f5df
}

.mini-stat strong {
  font-size:16px;
  letter-spacing:-.5px;
  white-space:nowrap;
  line-height:1.4
}

.mini-stat small {
  font-size:8px;
  font-weight:400;
  letter-spacing:0;
  color:#858a8f
}

.positive {
  color:var(--green)
}

.chart-panel {
  border:1px solid #e9ece7;
  border-radius:8px;
  margin-top:12px;
  padding:12px 12px 11px
}

.chart-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px
}

.chart-heading strong {
  font-size:10px
}

.chart-legend {
  display:flex;
  gap:9px;
  color:#7b8288;
  font-size:8px
}

.chart-legend span {
  display:inline-flex;
  align-items:center;
  gap:4px
}

.legend-dot {
  width:6px;
  height:6px;
  background:#ffca4a;
  border-radius:50%;
  display:inline-block
}

.legend-dot.gray {
  background:#98a0a8
}

.chart-body {
  position:relative;
  height:117px;
  display:flex;
  padding:0 2px 0 32px;
  border-bottom:1px solid #ebede9
}

.chart-scale {
  position:absolute;
  top:-5px;
  bottom:-5px;
  left:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  color:#949aa1;
  font-size:8px
}

.chart-grid {
  position:absolute;
  inset:0 0 0 32px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  pointer-events:none
}

.chart-grid i {
  border-top:1px solid #f1f2ef;
  width:100%
}

.chart-bars {
  position:relative;
  z-index:1;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:4px;
  height:100%
}

.bar-pair {
  display:flex;
  align-items:flex-end;
  gap:3px;
  width:100%;
  height:100%
}

.bar-pair i {
  display:block;
  flex:1;
  max-width:8px;
  height:var(--h);
  background:#ffd058
}

.bar-pair i+ i {
  background:#9ba2a9
}

.chart-dates {
  display:flex;
  justify-content:space-between;
  padding-left:33px;
  margin-top:8px;
  color:#969da3;
  font-size:8px
}

.recent-heading {
  display:flex;
  justify-content:space-between;
  margin:19px 0 9px;
  font-size:10px;
  font-weight:650
}

.recent-heading span+span {
  font-size:8px;
  color:#6b83a2;
  font-weight:400
}

.project-row {
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid #e9ece7;
  border-radius:7px;
  padding:10px 8px
}

.project-icon {
  display:grid;
  place-items:center;
  flex:none;
  width:28px;
  height:32px;
  background:#eef0e5;
  border-radius:5px;
  color:#7b8368
}

.project-icon .icon {
  width:20px;
  height:20px
}

.project-name {
  font-size:9px;
  font-weight:650;
  line-height:1.5;
  white-space:nowrap
}

.project-name small {
  display:block;
  font-size:8px;
  font-weight:400;
  color:#8a9097
}

.status-pill {
  font-size:8px;
  color:#3e8847;
  background:#e3f5df;
  border-radius:20px;
  padding:3px 6px;
  margin-left:auto;
  white-space:nowrap
}

.project-total {
  font-size:10px;
  font-weight:700;
  color:var(--green);
  margin-left:auto;
  white-space:nowrap
}

.project-total small {
  display:block;
  font-size:8px;
  color:#91969e;
  font-weight:400
}

.payment-toast {
  position:absolute;
  bottom:13px;
  left:-17px;
  display:flex;
  gap:12px;
  align-items:center;
  background:#fff;
  padding:16px 22px 16px 14px;
  border:1px solid #e6e9e3;
  border-radius:11px;
  box-shadow:0 9px 23px #232b2d19;
  width:290px;
  z-index:3
}

.check-circle {
  display:grid;
  place-items:center;
  width:37px;
  height:37px;
  border-radius:50%;
  background:var(--green);
  color:white;
  box-shadow:0 0 0 6px #e6f4e5;
  flex:none
}

.check-circle .icon {
  width:21px;
  height:21px;
  stroke-width:2.2
}

.toast-label {
  font-size:10px;
  font-weight:700
}

.toast-amount {
  font-size:15px;
  font-weight:750;
  margin-top:1px
}

.toast-note {
  font-size:9px;
  color:#868e91;
  margin-top:2px
}

.sample-caption {
  text-align:right;
  color:#8a9092;
  font-size:10px;
  margin-top:13px
}

.annotation {
  position:absolute;
  color:#9caaa9;
  font-size:10px;
  font-style:italic;
  letter-spacing:1.5px;
  line-height:1.8;
  transform:rotate(-7deg);
  left:16px;
  bottom:12px
}

.registration-mark {
  position:absolute;
  width:38px;
  height:38px;
  pointer-events:none;
  opacity:.4
}

.registration-mark:before,.registration-mark:after {
  content:"";
  position:absolute;
  background:#9aa8a7
}

.registration-mark:before {
  width:38px;
  height:1px;
  top:18px
}

.registration-mark:after {
  height:38px;
  width:1px;
  left:18px
}

.mark-a {
  top:0;
  left:10px
}

.mark-b {
  right:10px;
  bottom:10px
}

.capability-strip {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid #cdd2cb;
  border-bottom:1px solid #cdd2cb;
  padding:25px 0
}

.capability {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:17px;
  font-size:14px;
  font-weight:550;
  position:relative;
  padding:0 12px
}

.capability+.capability:before {
  content:"";
  width:1px;
  height:27px;
  background:#d7dcd4;
  position:absolute;
  left:0
}

.capability .icon {
  width:30px;
  height:30px;
  stroke-width:1.45
}

.features {
  padding:65px 0 74px
}

.section-heading-row {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:45px;
  margin:19px 0 34px
}

.section-heading-row .section-title {
  max-width:680px
}

.section-intro {
  font-size:15px;
  line-height:1.7;
  color:#687074;
  max-width:300px;
  padding-bottom:3px
}

.bento-grid {
  display:grid;
  grid-template-columns:1.04fr 1fr 1.04fr;
  gap:16px
}

.feature-card {
  padding:25px 22px 23px;
  border-radius:11px;
  background:#fff;
  min-width:0;
  border:1px solid #efefe8
}

.feature-yellow {
  background:linear-gradient(125deg,#fff4cf,#fcf5db);
  border-color:#f8edc9
}

.feature-sage {
  background:#eaf1e3;
  border-color:#e7eddd
}

.feature-top {
  display:flex;
  gap:15px;
  align-items:flex-start
}

.feature-icon {
  display:grid;
  place-items:center;
  width:43px;
  height:46px;
  flex:none;
  background:#f4f5f0;
  border-radius:9px;
  color:#283138
}

.feature-yellow .feature-icon {
  background:#ffdd7d
}

.feature-sage .feature-icon {
  background:#d5e7c5
}

.feature-card h3 {
  font-size:19px;
  line-height:1.28;
  font-weight:750;
  letter-spacing:-.6px
}

.feature-card p {
  color:#737b7b;
  font-size:14px;
  line-height:1.6;
  margin-top:8px
}

.feature-demo {
  margin-top:27px;
  border-radius:9px;
  background:#fff;
  min-height:146px;
  padding:23px 17px
}

.mini-finance {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px
}

.mini-finance div+div {
  border-left:1px solid #e9ece8;
  padding-left:10px
}

.mini-finance small {
  display:block;
  font-size:11px;
  color:#8b9297;
  margin-bottom:6px
}

.mini-finance strong {
  font-size:19px;
  letter-spacing:-.5px;
  white-space:nowrap;
  font-weight:650
}

.mini-finance div:first-child strong {
  color:#d89700
}

.mini-finance div:nth-child(2) strong {
  color:#e65c5c
}

.finance-bar {
  display:flex;
  height:17px;
  overflow:hidden;
  border-radius:6px;
  margin:27px 3px 0
}

.finance-bar i:nth-child(1) {
  width:49%;
  background:#ffc32b
}

.finance-bar i:nth-child(2) {
  width:33%;
  background:#9a9ca0
}

.finance-bar i:nth-child(3) {
  width:18%;
  background:#53a064
}

.worker-list {
  padding:0 13px;
  margin-top:24px;
  border:1px solid #f0f1ec
}

.worker {
  display:flex;
  align-items:center;
  gap:14px;
  padding:15px 0
}

.worker+ .worker {
  border-top:1px solid #eef0ea
}

.avatar {
  width:38px;
  height:38px;
  flex:none;
  background:#fff3ce;
  color:#927010;
  border:1px solid #f2e1a6;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:13px;
  font-weight:700
}

.avatar-gray {
  background:#edf0ee;
  border-color:#e0e5df;
  color:#677575
}

.worker-info {
  flex:1;
  min-width:0
}

.worker-name {
  font-size:11px;
  font-weight:650;
  margin-bottom:4px
}

.worker-line {
  display:flex;
  justify-content:space-between;
  gap:8px;
  line-height:1.7;
  font-size:9px;
  color:#8b9298
}

.worker-line b {
  color:#313b42;
  font-size:10px;
  font-weight:650
}

.worker-line b.debt {
  color:#df5757
}

.receipt-demo {
  display:flex;
  gap:13px;
  align-items:center;
  padding:17px 13px
}

.receipt {
  flex:1;
  background:#fff;
  box-shadow:0 3px 12px #1c282012;
  min-width:0;
  padding:12px 10px;
  border:1px solid #eceee9;
  border-top:2px dashed #e7ebe4
}

.receipt h4 {
  font-size:8px;
  margin:0 0 10px;
  letter-spacing:.2px;
  padding-bottom:8px;
  border-bottom:1px solid #ebede8;
  text-align:center
}

.receipt-line {
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:8px;
  line-height:1.9;
  color:#7e868a
}

.receipt-total {
  font-size:8px;
  font-weight:700;
  text-align:right;
  border-top:1px dashed #cad2c8;
  margin-top:7px;
  padding-top:7px
}

.attachment {
  width:75px;
  flex:none;
  text-align:center;
  font-size:11px;
  line-height:1.4;
  color:#566260
}

.attachment .icon {
  width:32px;
  height:32px;
  margin:0 auto 12px;
  stroke-width:1.45
}

.feature-detail-note {
  margin-top:19px;
  font-size:10px;
  color:#8c928b;
  text-align:right
}

@media(min-width:1440px) {
  .hero h1 {
    font-size:70px
  }

  .hero-grid {
    gap:49px
  }

  .dashboard {
    grid-template-columns:145px minmax(0,1fr)
  }

  .dashboard-main {
    padding:23px 22px 30px
  }

  .mini-stat strong {
    font-size:18px
  }

  .dashboard-top strong {
    font-size:19px
  }

  .dashboard {
    min-height:490px
  }

  .chart-body {
    height:133px
  }

  .hero {
    padding-top:56px
  }

}

@media(max-width:1150px) {
  .container {
    width:calc(100% - 56px)
  }

  .desktop-nav {
    gap:18px
  }

  .header-inner {
    gap:22px
  }

  .header-actions {
    gap:18px
  }

  .hero-grid {
    grid-template-columns:.86fr 1.14fr;
    gap:28px;
    min-height:500px
  }

  .hero h1 {
    font-size:54px;
    letter-spacing:-2.8px
  }

  .hero-description {
    font-size:16px
  }

  .hero-buttons {
    gap:9px
  }

  .hero-buttons .button {
    padding-inline:15px;
    font-size:13px
  }

  .dashboard {
    grid-template-columns:103px minmax(0,1fr)
  }

  .dashboard-sidebar {
    padding:22px 7px
  }

  .dashboard-sidebar .brand {
    font-size:13px;
    gap:5px
  }

  .mock-nav span {
    font-size:8px;
    gap:5px;
    padding-inline:6px
  }

  .dashboard-main {
    padding:21px 13px
  }

  .dashboard-top strong {
    font-size:15px
  }

  .date-label {
    font-size:8px;
    padding:6px 4px
  }

  .stat-grid {
    gap:5px
  }

  .mini-stat {
    padding:10px 7px
  }

  .mini-stat strong {
    font-size:14px
  }

  .mini-stat small {
    display:none
  }

  .stat-label {
    font-size:8px;
    gap:4px
  }

  .stat-icon {
    width:18px;
    height:18px
  }

  .payment-toast {
    width:260px;
    padding:13px 16px
  }

  .feature-card {
    padding:22px 17px
  }

  .feature-top {
    gap:11px
  }

  .feature-icon {
    width:36px;
    height:40px
  }

  .feature-icon .icon {
    width:26px;
    height:26px
  }

  .feature-card h3 {
    font-size:17px
  }

  .feature-card p {
    font-size:13px
  }

  .feature-demo {
    padding-inline:12px
  }

  .mini-finance {
    gap:6px
  }

  .mini-finance div+div {
    padding-left:6px
  }

  .mini-finance strong {
    font-size:17px
  }

  .worker {
    gap:10px
  }

  .attachment {
    width:62px
  }

  .annotation {
    display:none
  }

}

@media(max-width:900px) {
  .header-inner {
    min-height:82px
  }

  .desktop-nav {
    display:none
  }

  .header-actions {
    margin-left:auto
  }

  .menu-toggle {
    display:flex
  }

  .mobile-nav:not([hidden]) {
    display:block
  }

  .hero {
    padding:30px 0 48px
  }

  .hero-grid {
    grid-template-columns:1fr;
    gap:36px;
    min-height:auto
  }

  .hero-copy {
    max-width:560px;
    padding-bottom:0
  }

  .hero h1 {
    font-size:clamp(53px,8vw,74px)
  }

  .hero-description {
    max-width:440px;
    font-size:18px
  }

  .hero-art {
    width:100%;
    max-width:680px;
    margin-inline:auto;
    padding:0 8px 40px
  }

  .dashboard {
    grid-template-columns:142px minmax(0,1fr);
    min-height:472px
  }

  .dashboard-sidebar {
    padding:23px 12px
  }

  .dashboard-sidebar .brand {
    font-size:17px;
    gap:7px
  }

  .mock-nav span {
    font-size:10px;
    gap:9px;
    padding:9px 8px
  }

  .dashboard-main {
    padding:24px 20px
  }

  .dashboard-top strong {
    font-size:19px
  }

  .date-label {
    font-size:10px;
    padding:7px
  }

  .mini-stat {
    padding:13px 10px
  }

  .stat-grid {
    gap:9px
  }

  .mini-stat strong {
    font-size:18px
  }

  .stat-label {
    font-size:10px;
    gap:6px
  }

  .stat-icon {
    width:22px;
    height:22px
  }

  .chart-body {
    height:120px
  }

  .chart-heading strong {
    font-size:12px
  }

  .chart-legend {
    font-size:9px
  }

  .project-name {
    font-size:10px
  }

  .project-total {
    font-size:12px
  }

  .status-pill {
    font-size:9px
  }

  .payment-toast {
    left:0;
    width:284px
  }

  .hero-buttons .button {
    padding:14px 22px;
    font-size:15px
  }

  .capability-strip {
    grid-template-columns:repeat(2,1fr);
    row-gap:24px
  }

  .capability:nth-child(3):before {
    display:none
  }

  .section-heading-row {
    gap:25px;
    align-items:flex-start
  }

  .section-intro {
    max-width:250px;
    font-size:14px
  }

  .section-title {
    font-size:39px
  }

  .bento-grid {
    grid-template-columns:1fr
  }

  .feature-card {
    padding:26px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px;
    align-items:center
  }

  .feature-top {
    gap:16px
  }

  .feature-card h3 {
    font-size:21px
  }

  .feature-card p {
    font-size:15px
  }

  .feature-demo {
    margin-top:0;
    min-height:155px
  }

  .feature-detail-note {
    grid-column:1/-1;
    margin-top:-15px
  }

  .feature-icon {
    width:43px;
    height:46px
  }

  .mini-finance strong {
    font-size:19px
  }

  .worker-list {
    padding-inline:15px
  }

  .worker {
    padding-block:13px
  }

  .worker-line {
    font-size:10px
  }

  .worker-line b {
    font-size:11px
  }

  .receipt-demo {
    padding:18px;
    gap:16px
  }

  .receipt-line,.receipt-total,.receipt h4 {
    font-size:9px
  }

  .attachment {
    width:80px
  }

}

@media(max-width:560px) {
  .container {
    width:calc(100% - 40px)
  }

  .header-inner {
    min-height:78px;
    gap:12px
  }

  .brand {
    font-size:24px;
    gap:9px
  }

  .brand-mark {
    width:33px;
    height:33px;
    font-size:26px;
    border-radius:8px
  }

  .header-actions {
    gap:12px
  }

  .header-cta,.login-link {
    display:none
  }

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

  .hero {
    padding:25px 0 31px
  }

  .hero h1 {
    font-size:clamp(44px,11.7vw,64px);
    letter-spacing:-2.5px;
    margin-top:22px
  }

  .hero h1 mark {
    padding-bottom:6px
  }

  .eyebrow {
    font-size:10px;
    letter-spacing:1.6px
  }

  .hero-description {
    font-size:16px;
    max-width:350px
  }

  .hero-buttons {
    gap:9px;
    margin-top:24px
  }

  .hero-buttons .button {
    font-size:13px;
    padding:12px 14px;
    gap:9px;
    min-height:49px
  }

  .play-icon {
    width:25px;
    height:25px
  }

  .device-note {
    font-size:11px;
    margin-top:20px
  }

  .hero-grid {
    gap:32px
  }

  .hero-art {
    padding-inline:0;
    padding-bottom:39px
  }

  .dashboard {
    grid-template-columns:51px minmax(0,1fr);
    min-height:348px;
    border-radius:11px;
    outline-width:3px
  }

  .dashboard-sidebar {
    padding:17px 8px
  }

  .dashboard-sidebar .brand {
    padding:0 5px;
    margin-bottom:24px
  }

  .dashboard-sidebar .brand-word {
    display:none
  }

  .dashboard-sidebar .brand-mark {
    width:22px;
    height:22px;
    font-size:18px
  }

  .mock-nav {
    gap:8px
  }

  .mock-nav span {
    justify-content:center;
    padding:7px 5px
  }

  .mock-nav span em {
    display:none
  }

  .mock-nav .icon {
    width:16px;
    height:16px
  }

  .dashboard-main {
    padding:16px 10px 20px
  }

  .dashboard-top {
    margin-bottom:15px;
    gap:6px
  }

  .dashboard-top strong {
    font-size:13px;
    letter-spacing:-.3px
  }

  .date-label {
    font-size:7px;
    gap:4px;
    padding:5px
  }

  .date-label .icon {
    width:10px;
    height:10px
  }

  .stat-grid {
    gap:5px
  }

  .mini-stat {
    padding:8px 5px
  }

  .stat-label {
    gap:3px;
    font-size:7px
  }

  .stat-icon {
    width:15px;
    height:15px
  }

  .stat-icon .icon {
    width:10px;
    height:10px
  }

  .mini-stat strong {
    font-size:11px;
    letter-spacing:-.4px
  }

  .chart-panel {
    padding:9px 8px;
    margin-top:9px
  }

  .chart-heading {
    margin-bottom:15px
  }

  .chart-heading strong {
    font-size:8px
  }

  .chart-legend {
    font-size:6px;
    gap:5px
  }

  .legend-dot {
    width:4px;
    height:4px
  }

  .chart-body {
    height:93px;
    padding-left:25px
  }

  .chart-grid {
    left:25px
  }

  .chart-bars {
    gap:3px
  }

  .bar-pair {
    gap:2px
  }

  .chart-scale,.chart-dates {
    font-size:6px
  }

  .chart-dates {
    padding-left:25px
  }

  .recent-heading {
    margin-top:15px;
    font-size:8px
  }

  .recent-heading span+span {
    font-size:6px
  }

  .project-row {
    gap:6px;
    padding:8px 5px
  }

  .project-icon {
    width:24px;
    height:29px
  }

  .project-name {
    font-size:8px;
    white-space:normal
  }

  .project-name small {
    font-size:6px
  }

  .status-pill {
    font-size:6px;
    padding:2px 4px
  }

  .project-total {
    font-size:8px
  }

  .project-total small {
    font-size:6px
  }

  .payment-toast {
    width:229px;
    bottom:8px;
    left:10px;
    padding:12px;
    gap:11px;
    border-radius:8px
  }

  .check-circle {
    width:28px;
    height:28px;
    box-shadow:0 0 0 4px #e6f4e5
  }

  .check-circle .icon {
    width:17px;
    height:17px
  }

  .toast-label {
    font-size:8px
  }

  .toast-amount {
    font-size:12px
  }

  .toast-note {
    font-size:7px
  }

  .sample-caption {
    font-size:8px;
    margin-top:10px
  }

  .registration-mark {
    display:none
  }

  .capability-strip {
    padding:23px 0;
    row-gap:23px
  }

  .capability {
    gap:9px;
    padding:0 6px;
    font-size:11px;
    justify-content:flex-start
  }

  .capability:nth-child(2n) {
    padding-left:17px
  }

  .capability .icon {
    width:25px;
    height:25px
  }

  .features {
    padding:43px 0 45px
  }

  .section-heading-row {
    display:block;
    margin-top:15px;
    margin-bottom:25px
  }

  .section-title {
    font-size:34px;
    letter-spacing:-1.6px
  }

  .section-intro {
    max-width:100%;
    margin-top:16px;
    font-size:14px
  }

  .bento-grid {
    gap:14px
  }

  .feature-card {
    display:block;
    padding:25px 21px
  }

  .feature-card h3 {
    font-size:21px
  }

  .feature-card p {
    font-size:14px
  }

  .feature-demo {
    margin-top:24px;
    min-height:152px;
    padding:23px 20px
  }

  .mini-finance strong {
    font-size:clamp(15px,4.4vw,21px)
  }

  .mini-finance small {
    font-size:12px
  }

  .worker-list {
    padding:0 17px
  }

  .worker {
    padding:15px 0
  }

  .worker-name {
    font-size:12px
  }

  .worker-line {
    font-size:11px
  }

  .worker-line b {
    font-size:12px
  }

  .avatar {
    width:41px;
    height:41px
  }

  .receipt-demo {
    padding:18px
  }

  .receipt-line,.receipt-total,.receipt h4 {
    font-size:10px
  }

  .attachment {
    font-size:13px;
    width:85px
  }

  .feature-detail-note {
    margin-top:15px;
    font-size:10px
  }

}

.telegram-section {
  background:#22292d;
  color:#fff;
  overflow:hidden;
  position:relative
}

.telegram-grid {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  align-items:center;
  gap:70px;
  min-height:455px;
  padding-top:49px
}

.telegram-copy {
  padding:0 0 45px
}

.telegram-label {
  display:flex;
  align-items:center;
  gap:20px;
  font-size:11px;
  font-weight:550;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#e1e5e6;
  margin-bottom:27px
}

.telegram-label .icon {
  width:37px;
  height:37px;
  stroke-width:1.4;
  color:var(--yellow)
}

.telegram-copy h2 {
  font-size:clamp(32px,3.6vw,48px);
  line-height:1.12;
  letter-spacing:-1.8px;
  font-weight:700;
  max-width:680px
}

.telegram-copy>p {
  font-size:18px;
  color:#bcc4c8;
  line-height:1.6;
  margin-top:20px;
  max-width:520px
}

.telegram-copy .text-link {
  color:var(--yellow);
  margin-top:28px;
  font-size:16px
}

.bot-benefits {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:25px;
  color:#9ca9ac;
  font-size:12px
}

.bot-benefits span {
  display:flex;
  align-items:center;
  gap:6px
}

.bot-benefits .icon {
  width:14px;
  height:14px;
  color:#b6c7ab
}

.phone-stage {
  position:relative;
  align-self:end;
  display:flex;
  justify-content:center;
  height:405px;
  overflow:hidden
}

.bot-phone {
  position:relative;
  flex:none;
  width:284px;
  height:508px;
  background:#f7f8fa;
  color:#222b32;
  border:6px solid #161b1d;
  border-radius:39px 39px 0 0;
  outline:2px solid #abb0ad;
  box-shadow:0 0 0 5px #3c4344,0 15px 40px #0004;
  overflow:hidden;
  margin-top:7px
}

.phone-status {
  height:37px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 22px 0;
  font-size:9px;
  font-weight:750;
  position:relative
}

.phone-notch {
  position:absolute;
  top:5px;
  left:50%;
  transform:translateX(-50%);
  width:81px;
  height:23px;
  background:#151a1e;
  border-radius:16px
}

.status-marks {
  display:flex;
  gap:4px;
  align-items:center
}

.signal {
  display:flex;
  align-items:flex-end;
  gap:2px;
  height:9px
}

.signal i {
  width:2px;
  background:#252c30
}

.signal i:nth-child(1) {
  height:3px
}

.signal i:nth-child(2) {
  height:5px
}

.signal i:nth-child(3) {
  height:7px
}

.signal i:nth-child(4) {
  height:9px
}

.battery {
  width:15px;
  height:8px;
  border:1px solid #343a3b;
  border-radius:2px;
  position:relative;
  margin-left:3px
}

.battery:before {
  content:"";
  position:absolute;
  inset:1px;
  background:#343a3b
}

.battery:after {
  content:"";
  position:absolute;
  right:-3px;
  top:2px;
  height:2px;
  width:1px;
  background:#343a3b
}

.bot-header {
  display:flex;
  align-items:center;
  gap:9px;
  padding:14px 16px 13px;
  border-bottom:1px solid #e7ece6;
  background:#fff
}

.bot-header .brand-mark {
  width:31px;
  height:31px;
  font-size:24px;
  border-radius:50%;
  box-shadow:none
}

.bot-header-text {
  font-size:13px;
  font-weight:700;
  line-height:1.3
}

.bot-header-text small {
  display:block;
  color:#939ca1;
  font-size:10px;
  font-weight:400
}

.bot-chat {
  padding:17px 13px 23px;
  background:#eef2eb;
  min-height:299px;
  display:flex;
  flex-direction:column;
  gap:13px
}

.chat-date {
  align-self:center;
  font-size:8px;
  color:#8b9490;
  background:#e1e7de;
  padding:3px 9px;
  border-radius:9px;
  margin-bottom:3px
}

.chat-bubble {
  max-width:94%;
  padding:10px 12px;
  font-size:10px;
  line-height:1.6;
  box-shadow:0 1px 2px #24322609;
  position:relative
}

.outgoing {
  align-self:flex-end;
  background:#ffdd77;
  border-radius:12px 12px 2px 12px
}

.incoming {
  align-self:flex-start;
  background:#fff;
  border-radius:12px 12px 12px 2px;
  min-width:215px
}

.chat-bubble time {
  float:right;
  color:#899180;
  font-size:7px;
  line-height:1.4;
  margin:7px 0 0 11px
}

.chat-bubble .chat-success {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:11px;
  font-weight:650;
  color:#263932;
  margin-bottom:5px
}

.chat-success .icon {
  width:20px;
  height:20px;
  background:#43a65c;
  color:white;
  border-radius:50%;
  padding:3px;
  stroke-width:2.5
}

.chat-meta {
  color:#7c8883;
  font-size:9px;
  line-height:1.9;
  margin-top:6px
}

.chat-remaining {
  border-top:1px solid #e6ece3;
  margin-top:9px;
  padding-top:7px;
  font-size:10px
}

.chat-input {
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 14px;
  color:#bbc3c9;
  font-size:10px;
  background:#fff;
  border-top:1px solid #e6ebe3
}

.chat-input .icon {
  width:19px;
  height:19px;
  color:#93a0ad
}

.chat-input>span {
  flex:1;
  border:1px solid #ebeeee;
  border-radius:20px;
  padding:7px 10px
}

.chat-send {
  width:25px;
  height:25px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#6483b0
}

.chat-send .icon {
  width:13px;
  height:13px;
  color:white
}

.bot-sample {
  font-size:10px!important;
  color:#a1adaf!important;
  margin-top:20px!important
}

.steps-section {
  padding:85px 0 77px
}

.steps-header {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:25px;
  margin-bottom:40px
}

.steps-header h2 {
  margin-top:18px
}

.steps-header>p {
  max-width:260px;
  font-size:15px;
  color:#697276
}

.steps-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px
}

.step {
  border-top:1px solid #d3d9cf;
  padding-top:21px;
  position:relative
}

.step-number {
  font-size:13px;
  font-weight:700;
  color:#9e781c;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:#fff0bc;
  margin-bottom:22px
}

.step h3 {
  font-size:21px;
  letter-spacing:-.6px;
  line-height:1.3;
  margin-bottom:12px
}

.step p {
  font-size:15px;
  line-height:1.8;
  color:#6d7678;
  max-width:335px
}

.more-capabilities {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-block:1px solid #dce1d6;
  padding:28px 0;
  margin-top:50px;
  gap:30px
}

.more-capability {
  display:flex;
  align-items:flex-start;
  gap:14px
}

.more-capability>.icon {
  color:#687767;
  width:25px;
  height:25px;
  flex:none;
  margin-top:3px
}

.more-capability h3 {
  font-size:15px;
  line-height:1.4;
  margin-bottom:5px;
  font-weight:650
}

.more-capability p {
  font-size:13px;
  color:#7b8483;
  line-height:1.65
}

.faq-section {
  padding:17px 0 82px
}

.faq-layout {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:80px
}

.faq-intro h2 {
  margin-top:20px;
  font-size:42px;
  letter-spacing:-1.8px;
  line-height:1.15
}

.faq-intro p {
  margin-top:20px;
  color:#727b7f;
  font-size:15px;
  line-height:1.8;
  max-width:280px
}

.faq-intro .text-link {
  margin-top:23px
}

.faq-list {
  border-top:1px solid #d5dcd2
}

.faq-list details {
  border-bottom:1px solid #d5dcd2
}

.faq-list summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  font-size:16px;
  font-weight:600;
  line-height:1.5;
  padding:21px 0
}

.faq-list summary::-webkit-details-marker {
  display:none
}

.faq-list summary .icon {
  width:18px;
  height:18px;
  flex:none;
  color:#768577;
  transition:transform .18s
}

.faq-list details[open] summary .icon {
  transform:rotate(45deg)
}

.faq-list details p {
  color:#6c7678;
  font-size:15px;
  line-height:1.8;
  padding-bottom:23px;
  padding-right:24px
}

.closing-cta {
  padding:0 0 62px
}

.closing-inner {
  background:var(--yellow);
  border-radius:15px;
  padding:43px 48px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:35px
}

.closing-inner h2 {
  font-size:35px;
  font-weight:750;
  line-height:1.17;
  letter-spacing:-1.1px
}

.closing-inner p {
  font-size:15px;
  margin-top:10px;
  color:#675528;
  max-width:650px
}

.button-dark {
  flex:none;
  background:#20272b;
  color:#fff;
  min-width:178px;
  border-color:#20272b
}

.button-dark:hover {
  background:#353e43;
  color:#fff;
  box-shadow:0 5px 15px #20272b20
}

.site-footer {
  border-top:1px solid var(--line)
}

.footer-main {
  padding:37px 0;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:40px
}

.footer-brand p {
  font-size:13px;
  color:#7b8485;
  margin-top:14px;
  max-width:285px;
  line-height:1.7
}

.footer-links {
  display:flex;
  gap:26px;
  flex-wrap:wrap;
  padding-top:6px;
  font-size:13px;
  color:#576264
}

.footer-links a:hover {
  color:#966706;
  text-decoration:underline;
  text-underline-offset:4px
}

.footer-bottom {
  padding:18px 0;
  border-top:1px solid #e0e4dc;
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:11px;
  color:#86908e
}

.footer-bottom a:hover {
  color:#4a5857
}

@media(max-width:1150px) {
  .telegram-grid {
    gap:40px
  }

  .telegram-copy h2 {
    font-size:39px
  }

  .telegram-copy>p {
    font-size:17px
  }

  .faq-layout {
    gap:45px
  }

  .steps-grid {
    gap:27px
  }

  .closing-inner {
    padding:37px 33px
  }

  .closing-inner h2 {
    font-size:32px
  }

}

@media(max-width:900px) {
  .telegram-grid {
    gap:25px;
    grid-template-columns:1fr .9fr;
    padding-top:45px;
    min-height:445px
  }

  .telegram-copy h2 {
    font-size:33px
  }

  .telegram-copy>p {
    font-size:16px
  }

  .telegram-label {
    gap:14px;
    font-size:10px;
    margin-bottom:23px
  }

  .telegram-label .icon {
    width:31px;
    height:31px
  }

  .bot-benefits {
    gap:10px;
    font-size:11px
  }

  .phone-stage {
    height:366px
  }

  .bot-phone {
    width:258px
  }

  .incoming {
    min-width:197px
  }

  .telegram-copy {
    padding-bottom:40px
  }

  .steps-section {
    padding-top:62px;
    padding-bottom:55px
  }

  .steps-header>p {
    max-width:210px;
    font-size:14px
  }

  .step h3 {
    font-size:18px
  }

  .step p {
    font-size:14px
  }

  .more-capabilities {
    gap:20px;
    padding-block:25px
  }

  .more-capability {
    gap:10px
  }

  .more-capability>.icon {
    width:20px;
    height:20px
  }

  .more-capability h3 {
    font-size:14px
  }

  .more-capability p {
    font-size:12px
  }

  .faq-layout {
    gap:35px;
    grid-template-columns:.8fr 1.2fr
  }

  .faq-intro h2 {
    font-size:35px
  }

  .faq-list summary {
    font-size:14px
  }

  .faq-list details p {
    font-size:14px
  }

  .closing-inner {
    padding:33px 30px
  }

  .closing-inner h2 {
    font-size:29px
  }

  .closing-inner p {
    font-size:14px
  }

  .closing-inner {
    gap:20px
  }

  .closing-inner .button {
    font-size:14px;
    padding-inline:18px;
    min-width:160px
  }

  .footer-main {
    gap:25px
  }

  .footer-links {
    gap:18px;
    font-size:12px
  }

}

@media(max-width:650px) {
  .telegram-grid {
    display:flex;
    flex-direction:column;
    gap:20px;
    padding-top:40px
  }

  .telegram-copy {
    width:100%;
    padding-bottom:10px
  }

  .telegram-copy h2 {
    font-size:36px;
    letter-spacing:-1.2px;
    max-width:460px
  }

  .telegram-copy>p {
    font-size:16px;
    max-width:420px;
    margin-top:16px
  }

  .telegram-label {
    margin-bottom:21px
  }

  .telegram-copy .text-link {
    margin-top:23px;
    font-size:15px
  }

  .bot-benefits {
    font-size:12px;
    gap:13px;
    margin-top:23px
  }

  .phone-stage {
    width:100%;
    height:349px;
    align-self:center;
    margin-top:5px
  }

  .bot-phone {
    width:277px
  }

  .steps-section {
    padding:49px 0 42px
  }

  .steps-header {
    display:block;
    margin-bottom:30px
  }

  .steps-header>p {
    max-width:330px;
    margin-top:17px;
    font-size:14px
  }

  .steps-header h2 {
    font-size:33px
  }

  .steps-grid {
    grid-template-columns:1fr;
    gap:24px
  }

  .step {
    padding-top:22px;
    padding-left:55px
  }

  .step-number {
    position:absolute;
    left:0;
    top:24px;
    width:34px;
    height:34px;
    font-size:12px
  }

  .step h3 {
    font-size:20px;
    margin-bottom:9px
  }

  .step p {
    font-size:14px;
    max-width:100%
  }

  .more-capabilities {
    grid-template-columns:1fr;
    gap:23px;
    margin-top:31px
  }

  .more-capability {
    gap:15px
  }

  .more-capability>.icon {
    width:25px;
    height:25px
  }

  .more-capability h3 {
    font-size:16px
  }

  .more-capability p {
    font-size:14px
  }

  .faq-section {
    padding:5px 0 44px
  }

  .faq-layout {
    grid-template-columns:1fr;
    gap:27px
  }

  .faq-intro h2 {
    font-size:34px
  }

  .faq-intro p {
    max-width:350px;
    margin-top:16px;
    font-size:14px
  }

  .faq-intro .text-link {
    margin-top:15px;
    font-size:14px
  }

  .faq-list summary {
    font-size:15px;
    padding-block:19px
  }

  .faq-list details p {
    font-size:14px;
    padding-right:12px
  }

  .closing-cta {
    padding-bottom:40px
  }

  .closing-inner {
    display:block;
    padding:30px 24px;
    border-radius:12px
  }

  .closing-inner h2 {
    font-size:30px;
    letter-spacing:-1px
  }

  .closing-inner p {
    margin-top:14px;
    font-size:14px;
    line-height:1.75
  }

  .closing-inner .button {
    margin-top:24px;
    min-height:48px
  }

  .footer-main {
    flex-direction:column;
    gap:24px;
    padding-block:30px
  }

  .footer-links {
    font-size:13px;
    gap:14px 22px
  }

  .footer-brand p {
    font-size:13px;
    max-width:320px
  }

  .footer-bottom {
    font-size:10px;
    gap:10px;
    flex-wrap:wrap;
    padding-block:18px
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }

}