/* ============================================================
   MIKEY & MACHINE — Page sections
   ============================================================ */

/* ---------- PROBLEMS ---------- */
#problems{background:var(--bg-2);}
.prob-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:920px;margin:0 auto;}
.prob{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
  border:1px solid var(--line);border-left:2px solid rgba(244,161,58,.5);border-radius:var(--r);
  padding:24px;transition:transform .25s,border-color .25s;}
.prob:hover{transform:translateY(-3px);border-left-color:var(--warn);}
.prob .ico{width:38px;height:38px;border-radius:10px;background:rgba(244,161,58,.1);
  border:1px solid rgba(244,161,58,.22);color:var(--warn);display:flex;align-items:center;justify-content:center;margin-bottom:15px;}
.prob .ico svg{width:19px;height:19px;}
.prob p.q{font-size:17px;font-weight:500;color:#eef1f6;margin:0 0 14px;line-height:1.45;text-wrap:pretty;}
.prob .cost{font-family:var(--mono);font-size:12px;color:var(--warn);}
.prob-foot{text-align:center;margin-top:38px;font-size:19px;color:var(--muted);}
.prob-foot b{color:#fff;font-weight:600;}

/* ---------- HOW IT WORKS ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1000px;margin:0 auto;position:relative;}
.step{position:relative;padding:30px 26px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008));border:1px solid var(--line);}
.step .num{font-family:var(--mono);font-size:13px;color:var(--blue-bright);letter-spacing:.1em;margin-bottom:18px;display:flex;align-items:center;gap:10px;}
.step .num .bar{flex:1;height:1px;background:var(--line);}
.step .sico{width:46px;height:46px;border-radius:12px;background:rgba(70,166,255,.1);
  border:1px solid var(--line-blue);color:var(--blue-bright);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.step .sico svg{width:23px;height:23px;}
.step h3{font-size:19px;margin-bottom:9px;}
.step p{margin:0;color:var(--muted);font-size:14.5px;}

/* ---------- SERVICES ---------- */
#services{background:var(--bg);}
.svc{max-width:var(--maxw);margin:0 auto;}
.svc-block{padding:64px 0;border-top:1px solid var(--line-2);}
.svc-block:first-of-type{border-top:0;padding-top:20px;}
.svc-head{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;max-width:880px;margin:0 0 32px;}
.svc-badge{width:54px;height:54px;border-radius:14px;background:rgba(70,166,255,.1);
  border:1px solid var(--line-blue);color:var(--blue-bright);display:flex;align-items:center;justify-content:center;flex:none;}
.svc-badge svg{width:26px;height:26px;}
.svc-num{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-bright);margin-bottom:10px;}
.svc-head h3{font-size:clamp(24px,2.7vw,32px);color:#fff;margin-bottom:14px;}
.svc-head p{color:var(--muted);font-size:16.5px;margin:0 0 12px;max-width:62ch;text-wrap:pretty;}
.svc-head p a{color:var(--blue-bright);}
.svc-head p a:hover{text-decoration:underline;}
.svc-for{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--blue-bright);
  background:rgba(70,166,255,.08);border:1px solid var(--line-blue);border-radius:99px;padding:7px 15px;margin-top:6px;font-weight:500;}
.ex-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:880px;margin:0 0 28px;}
.ex-grid.three{grid-template-columns:repeat(3,1fr);}
.ex{display:flex;gap:14px;align-items:flex-start;padding:20px;border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008));border:1px solid var(--line);
  transition:transform .25s,border-color .25s,box-shadow .25s;}
.ex:hover{transform:translateY(-3px);border-color:var(--line-blue);box-shadow:0 16px 44px -26px var(--blue-glow);}
.ex .ex-ico{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid var(--line);
  color:var(--blue-bright);display:flex;align-items:center;justify-content:center;flex:none;}
.ex .ex-ico svg{width:18px;height:18px;}
.ex h4{font-size:15.5px;margin-bottom:5px;color:#fff;}
.ex p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.5;}
.ex p strong{color:#fff;font-weight:600;}
.svc-cta{max-width:880px;}

/* SaaS comparison */
.cmp{max-width:880px;margin:0 0 28px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.cmp-row{display:grid;grid-template-columns:1fr 1fr;}
.cmp-row+.cmp-row{border-top:1px solid var(--line-2);}
.cmp-row>div{padding:15px 20px;font-size:14.5px;}
.cmp-row .pay{color:var(--muted);border-right:1px solid var(--line-2);display:flex;align-items:center;gap:10px;}
.cmp-row .pay .x{color:var(--bad);flex:none;}
.cmp-row .get{color:#fff;display:flex;align-items:center;gap:10px;}
.cmp-row .get .c{color:var(--good-bright);flex:none;}
.cmp-head>div{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;padding:13px 20px;background:rgba(255,255,255,.02);}
.cmp-head .pay{color:var(--bad);}
.cmp-head .get{color:var(--good-bright);}
.cmp-total>div{font-weight:700;font-family:var(--display);background:rgba(70,166,255,.05);}
.cmp-total .pay{color:var(--bad);}
.cmp-total .get{color:var(--good-bright);}

/* ---------- STATS ---------- */
#stats{background:linear-gradient(180deg,#05070c 0%,var(--bg) 100%);}
.bigstats{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin:0 0 56px;}
.bigstat{text-align:center;padding:24px 12px;border-radius:var(--r);border:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent);}
.bigstat .n{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.4vw,44px);color:#fff;
  letter-spacing:-.02em;text-shadow:0 0 34px rgba(31,143,255,.4);}
.bigstat .n .u{color:var(--blue-bright);}
.bigstat .l{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.4;}
.bigstat .src{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:6px;}
.charts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0 0 56px;}
.chartcard{padding:22px;border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008));border:1px solid var(--line);}
.chartcard h4{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:18px;}
.chart-box{position:relative;height:240px;}
.minis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 52px;}
.mini{padding:22px;border-radius:var(--r);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008));border:1px solid var(--line);}
.mini .n{font-family:var(--display);font-weight:700;font-size:30px;color:var(--blue-bright);margin-bottom:8px;}
.mini p{margin:0;font-size:14px;color:var(--muted);}
.mini .src{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:10px;}
.callout{max-width:760px;margin:0 auto;text-align:center;padding:44px 40px;border-radius:var(--r-xl);
  background:radial-gradient(120% 140% at 50% 0%,rgba(31,143,255,.12),rgba(255,255,255,.015));border:1px solid var(--line-blue);}
.callout h3{font-size:26px;color:#fff;margin-bottom:14px;}
.callout p{color:var(--muted);font-size:17px;margin:0 auto 28px;max-width:54ch;}

/* ---------- CASE STUDIES ---------- */
#cases{background:var(--bg-2);}
.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:1000px;margin:0 auto 44px;}
.casecard{padding:30px;border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));border:1px solid var(--line);}
.casecard .ch{display:flex;align-items:center;gap:13px;margin-bottom:20px;}
.casecard .ch .ico{width:42px;height:42px;border-radius:11px;background:rgba(70,166,255,.1);border:1px solid var(--line-blue);color:var(--blue-bright);display:flex;align-items:center;justify-content:center;flex:none;}
.casecard .ch .ico svg{width:21px;height:21px;}
.casecard .ch h3{font-size:19px;}
.casecard ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px;}
.casecard li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--muted);line-height:1.5;}
.casecard li .c{color:var(--good-bright);flex:none;margin-top:2px;}
.casemetrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:880px;margin:0 auto;}
.casemetric{text-align:center;}
.casemetric .n{font-family:var(--display);font-weight:700;font-size:clamp(28px,3vw,38px);color:#fff;text-shadow:0 0 30px rgba(31,143,255,.35);}
.casemetric .n .u{color:var(--blue-bright);}
.casemetric .l{font-size:13px;color:var(--muted);margin-top:6px;}

/* ---------- INDUSTRIES ---------- */
.ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:920px;margin:0 auto;}
.ind{display:block;padding:24px;border-radius:var(--r);text-align:left;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008));border:1px solid var(--line);
  transition:transform .25s,border-color .25s,box-shadow .25s;}
.ind:hover{transform:translateY(-3px);border-color:var(--line-blue);box-shadow:0 16px 44px -26px var(--blue-glow);}
.ind .ico{width:40px;height:40px;border-radius:10px;background:rgba(70,166,255,.1);border:1px solid var(--line-blue);color:var(--blue-bright);display:flex;align-items:center;justify-content:center;margin-bottom:15px;}
.ind .ico svg{width:20px;height:20px;}
.ind h3{font-size:16.5px;margin-bottom:6px;display:flex;align-items:center;justify-content:space-between;}
.ind h3 .arr{color:var(--faint);transition:transform .2s,color .2s;}
.ind:hover h3 .arr{color:var(--blue-bright);transform:translateX(3px);}
.ind p{margin:0;font-size:13.5px;color:var(--muted);}

/* ---------- TRUST ---------- */
#trust{background:var(--bg);}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:880px;margin:0 auto 40px;}
.trust-item{text-align:center;padding:26px 18px;border-radius:var(--r);border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(255,255,255,.025),transparent);}
.trust-item .ico{width:46px;height:46px;border-radius:12px;background:rgba(70,166,255,.1);border:1px solid var(--line-blue);color:var(--blue-bright);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
.trust-item .ico svg{width:23px;height:23px;}
.trust-item p{margin:0;font-size:14.5px;font-weight:600;color:#eef1f6;}
.trust-note{text-align:center;color:var(--muted);font-size:18px;max-width:60ch;margin:0 auto 52px;text-wrap:pretty;}
.tools{text-align:center;}
.tools .lbl{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:20px;}
.tools-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
.tools-row span{font-family:var(--mono);font-size:13.5px;color:var(--muted);padding:8px 16px;border:1px solid var(--line);border-radius:99px;transition:color .15s,border-color .15s;}
.tools-row span:hover{color:#fff;border-color:var(--line-blue);}

/* ---------- FAQ ---------- */
#faq{background:var(--bg-2);}
.faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
.faq-item{border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.006));overflow:hidden;transition:border-color .2s;}
.faq-item.open{border-color:var(--line-blue);}
.faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;color:#fff;
  font-family:var(--display);font-weight:600;font-size:16.5px;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.faq-q .pm{flex:none;width:22px;height:22px;position:relative;}
.faq-q .pm::before,.faq-q .pm::after{content:'';position:absolute;background:var(--blue-bright);transition:transform .25s,opacity .25s;}
.faq-q .pm::before{top:10px;left:3px;right:3px;height:2px;border-radius:2px;}
.faq-q .pm::after{left:10px;top:3px;bottom:3px;width:2px;border-radius:2px;}
.faq-item.open .faq-q .pm::after{transform:scaleY(0);opacity:0;}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-a-in{padding:0 22px 20px;color:var(--muted);font-size:15px;line-height:1.6;}

/* ---------- FINAL CTA ---------- */
#final{background:var(--bg);}
.finalbox{max-width:780px;margin:0 auto;text-align:center;padding:60px 48px;border-radius:var(--r-xl);position:relative;overflow:hidden;
  background:radial-gradient(130% 150% at 50% 0%,rgba(31,143,255,.14),rgba(255,255,255,.015));border:1px solid var(--line-blue);}
.finalbox h2{font-size:clamp(28px,3.6vw,42px);color:#fff;margin-bottom:16px;}
.finalbox p{color:var(--muted);font-size:17px;max-width:56ch;margin:0 auto 8px;text-wrap:pretty;}
.finalbox .small{font-size:14px;color:var(--faint);margin-bottom:30px;}
.finalbox .after{margin-top:24px;font-size:13.5px;color:var(--faint);}

/* ---------- FOOTER ---------- */
footer{background:var(--bg);border-top:1px solid var(--line);padding:64px 0 40px;}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px;}
.foot-brand .brand{margin-bottom:14px;}
.foot-brand p{color:var(--muted);font-size:14px;margin:0 0 8px;max-width:30ch;}
.foot-brand .loc{font-family:var(--mono);font-size:12.5px;color:var(--faint);display:flex;align-items:center;gap:7px;}
.foot-col h4{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:16px;font-weight:500;}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.foot-col a{color:var(--muted);font-size:14px;transition:color .15s;}
.foot-col a:hover{color:#fff;}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:28px;border-top:1px solid var(--line-2);font-size:13.5px;color:var(--faint);}
.foot-bottom a{color:var(--muted);}
.foot-bottom a:hover{color:#fff;}

/* ---------- Responsive ---------- */
@media (max-width:920px){
  .prob-grid,.ex-grid,.ex-grid.three,.case-grid,.charts,.minis{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .bigstats{grid-template-columns:repeat(2,1fr);}
  .ind-grid,.trust-grid{grid-template-columns:repeat(2,1fr);}
  .casemetrics{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1fr 1fr;gap:30px;}
  .foot-brand{grid-column:1/-1;}
  .svc-head{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .section{padding:72px 0;}
  .wrap{padding:0 20px;}
  .bigstats,.ind-grid,.trust-grid,.casemetrics{grid-template-columns:1fr;}
  .cmp-row{grid-template-columns:1fr;}
  .cmp-row .pay{border-right:0;border-bottom:1px solid var(--line-2);}
  .foot-grid{grid-template-columns:1fr;}
  .foot-bottom{flex-direction:column;align-items:flex-start;}
}