/* ============================================================
   Appomatic — sections (lower page)
   ============================================================ */

.section{padding:clamp(80px,11vh,128px) 0}
.section-head{max-width:760px;margin-bottom:clamp(40px,6vh,64px)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head .eyebrow{margin-bottom:18px}
.section-head .h2{margin-bottom:18px}
.section-head .sub{font-size:clamp(15px,1.3vw,18px);color:var(--text-2);max-width:54ch;line-height:1.6}
.section-head.center .sub{margin-inline:auto}

.divider{height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent)}

/* ---------------- SERVICES ---------------- */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc{padding:30px 28px 28px;position:relative;overflow:hidden}
.svc:hover{transform:translateY(-4px);border-color:var(--border-2)}
.svc::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px 160px at 18% -10%, rgba(var(--accent-rgb),.10), transparent 60%);
  opacity:0;transition:opacity .4s;
}
.svc:hover::after{opacity:1}
.svc .ico{
  width:50px;height:50px;border-radius:13px;display:grid;place-items:center;margin-bottom:22px;
  background:rgba(var(--accent-rgb),.10);border:1px solid var(--accent-line);color:var(--accent);
}
.svc .ico svg{width:24px;height:24px}
.svc h3{font-size:20px;font-weight:700;letter-spacing:-.02em;margin-bottom:10px}
.svc p{font-size:14.5px;color:var(--text-2);line-height:1.6;margin-bottom:18px}
.svc .tags{display:flex;flex-wrap:wrap;gap:7px}
.svc .tags span{
  font-family:var(--mono);font-size:11px;color:var(--text-3);
  padding:4px 9px;border-radius:7px;border:1px solid var(--border);background:rgba(0,0,0,.02);
}
.svc .idx{
  position:absolute;top:24px;right:26px;font-family:var(--mono);font-size:12px;color:var(--text-3);letter-spacing:.05em;
}

/* ---------------- PROCESS ---------------- */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.proc{padding:32px 26px 30px;position:relative}
.proc:not(:last-child){border-right:1px solid var(--border)}
.proc .pnum{
  font-family:var(--mono);font-size:13px;color:var(--accent);letter-spacing:.1em;margin-bottom:38px;
  display:flex;align-items:center;gap:10px;
}
.proc .pnum .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px 1px rgba(var(--accent-rgb),.7)}
.proc h3{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-bottom:11px}
.proc p{font-size:14px;color:var(--text-2);line-height:1.6}
.process-wrap{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:linear-gradient(180deg,var(--panel),var(--bg-2))}

/* ---------------- TECH STACK ---------------- */
.stack{padding-block:clamp(64px,9vh,96px)}
.marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marquee + .marquee{margin-top:16px}
.mq-track{display:flex;gap:14px;width:max-content;animation:mq 38s linear infinite}
.marquee.rev .mq-track{animation-direction:reverse;animation-duration:46s}
.marquee:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.chip{
  display:inline-flex;align-items:center;gap:10px;flex:none;
  font-family:var(--mono);font-size:15px;font-weight:500;color:var(--text-2);
  padding:13px 22px;border-radius:12px;border:1px solid var(--border);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  transition:color .25s,border-color .25s;white-space:nowrap;
}
.chip:hover{color:var(--text);border-color:var(--border-2)}
.chip .bullet{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;opacity:.8}

/* ---------------- WHY US ---------------- */
.why-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,5vw,64px);align-items:center}
.why-points{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.feat{padding:24px 22px;border:1px solid var(--border);border-radius:var(--radius);background:rgba(0,0,0,.02);transition:border-color .3s,background .3s}
.feat:hover{border-color:var(--border-2);background:rgba(0,0,0,.04)}
.feat .ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:16px;background:rgba(var(--accent-rgb),.10);color:var(--accent);border:1px solid var(--accent-line)}
.feat .ico svg{width:20px;height:20px}
.feat h4{font-size:16.5px;font-weight:700;letter-spacing:-.01em;margin-bottom:7px}
.feat p{font-size:13.5px;color:var(--text-2);line-height:1.55}

.metric{
  position:relative;overflow:hidden;
  padding:44px 40px;border-radius:var(--radius-lg);
  border:1px solid var(--accent-line);
  background:
    radial-gradient(130% 120% at 80% 0%, rgba(var(--accent-rgb),.16), transparent 55%),
    linear-gradient(180deg,var(--panel-2),var(--panel));
}
.metric .eyebrow{margin-bottom:26px}
.metric .big{font-size:clamp(80px,11vw,128px);font-weight:800;letter-spacing:-.05em;line-height:.86}
.metric .big .x{color:var(--accent)}
.metric .mlabel{font-size:19px;font-weight:600;margin-top:14px;letter-spacing:-.01em}
.metric .mdesc{font-size:14px;color:var(--text-2);margin-top:12px;line-height:1.6;max-width:34ch}
.metric .spark{display:flex;align-items:flex-end;gap:7px;height:54px;margin-top:30px}
.metric .spark i{flex:1;background:rgba(var(--accent-rgb),.25);border-radius:4px 4px 0 0;border-top:2px solid var(--accent)}

/* ---------------- PROJECTS ---------------- */
.proj-group{margin-bottom:52px}
.proj-group:last-child{margin-bottom:0}
.proj-group-label{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-2);border:1px solid var(--border);
  padding:7px 16px;border-radius:999px;margin-bottom:22px;
}
.proj-group-label svg{color:var(--accent);flex:none}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.proj{padding:26px 24px 22px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
.proj:hover{transform:translateY(-4px);border-color:var(--border-2)}
.proj::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(380px 140px at 20% -10%, rgba(var(--accent-rgb),.08), transparent 60%);
  opacity:0;transition:opacity .4s;
}
.proj:hover::after{opacity:1}
.proj-cat{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line);
  padding:3px 10px;border-radius:999px;align-self:flex-start;
}
.proj h3{font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.proj p{font-size:13.5px;color:var(--text-2);line-height:1.6}

@media (max-width:980px){.proj-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.proj-grid{grid-template-columns:1fr}}

/* ---------------- TESTIMONIALS ---------------- */
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tst{padding:30px 28px;display:flex;flex-direction:column;gap:22px}
.tst:hover{transform:translateY(-4px);border-color:var(--border-2)}
.tst .quote{font-size:16px;line-height:1.62;color:var(--text);letter-spacing:-.01em;flex:1}
.tst .quote::before{content:"“";color:var(--accent);font-size:40px;line-height:0;font-family:Georgia,serif;display:block;height:18px}
.tst .who{display:flex;align-items:center;gap:13px;padding-top:18px;border-top:1px solid var(--border)}
.tst .ava{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;font-size:15px;color:var(--accent);background:rgba(var(--accent-rgb),.12);border:1px solid var(--accent-line)}
.tst .nm{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.tst .rl{font-size:12.5px;color:var(--text-3);margin-top:2px}
.tst .stars{display:flex;gap:3px;color:var(--accent)}
.tst .stars svg{width:14px;height:14px}

/* ---------------- CTA ---------------- */
.cta-block{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(60px,9vh,96px) clamp(28px,6vw,80px);
  border-radius:var(--radius-lg);border:1px solid var(--border);
  background:
    radial-gradient(700px 360px at 50% -20%, rgba(var(--accent-rgb),.18), transparent 60%),
    linear-gradient(180deg,var(--panel-2),var(--bg-2));
}
.cta-block .logo-big{height:46px;width:auto;margin:0 auto 30px;opacity:.95}
.cta-block h2{font-size:clamp(34px,5vw,64px);font-weight:800;letter-spacing:-.035em;margin-bottom:20px;text-wrap:balance}
.cta-block p{font-size:clamp(15px,1.4vw,18px);color:var(--text-2);max-width:46ch;margin:0 auto 36px;line-height:1.6}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-note{margin-top:22px;font-family:var(--mono);font-size:12.5px;color:var(--text-3);letter-spacing:.02em}

/* ---------------- FOOTER ---------------- */
.footer{padding-top:72px;padding-bottom:40px;border-top:1px solid var(--border);margin-top:24px}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:56px}
.footer .brand{margin-bottom:18px}
.footer .fdesc{font-size:14px;color:var(--text-2);max-width:32ch;line-height:1.6}
.fcol h5{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin-bottom:18px}
.fcol a{display:block;font-size:14.5px;color:var(--text-2);padding:6px 0;transition:color .2s}
.fcol a:hover{color:var(--text)}
.footer-bot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:28px;border-top:1px solid var(--border)}
.hashtags{display:flex;gap:14px;flex-wrap:wrap}
.hashtags span{font-family:var(--mono);font-size:13px;color:var(--accent);opacity:.85}
.copyright{font-size:13px;color:var(--text-3)}

/* ---------------- MOBILE NAV ---------------- */
.nav-toggle{
  display:none;width:42px;height:42px;border-radius:11px;border:1px solid var(--border);
  background:rgba(0,0,0,.03);place-items:center;
}
.nav-toggle span{position:relative;width:18px;height:2px;background:var(--text);border-radius:2px;transition:.25s}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--text);border-radius:2px;transition:.25s}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
.nav.open .nav-toggle span{background:transparent}
.nav.open .nav-toggle span::before{top:0;transform:rotate(45deg)}
.nav.open .nav-toggle span::after{top:0;transform:rotate(-45deg)}

.mobile-menu{
  display:none;position:fixed;top:72px;left:0;right:0;z-index:49;
  background:rgba(255,255,255,.96);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  padding:18px var(--gutter) 26px;
  transform:translateY(-12px);opacity:0;pointer-events:none;transition:.28s var(--ease);
}
.nav.open + .mobile-menu{transform:none;opacity:1;pointer-events:auto}
.mobile-menu a{display:block;font-size:17px;font-weight:600;color:var(--text);padding:13px 4px;border-bottom:1px solid var(--border)}
.mobile-menu .btn{margin-top:18px;width:100%;justify-content:center}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:980px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .process-grid{grid-template-columns:repeat(2,1fr)}
  .proc:nth-child(2){border-right:none}
  .proc{border-bottom:1px solid var(--border)}
  .why-grid{grid-template-columns:1fr;gap:44px}
  .tst-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:980px){
  .nav-toggle{display:grid}
  .mobile-menu{display:block}
}
@media (max-width:600px){
  .services-grid{grid-template-columns:1fr}
  .process-grid{grid-template-columns:1fr}
  .proc{border-right:none!important}
  .why-points{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr;gap:30px}
  .footer-bot{flex-direction:column;align-items:flex-start}
}