/* =========================================================================
   MAKTONIC — AI Services page
   Loaded after main.css, which supplies the tokens, nav, footer and buttons.
   Everything here is scoped to sections that only exist on this page.
   ========================================================================= */

/* ================================================================== HERO */
.svc-hero{position:relative;overflow:hidden}
.svc-hero_container{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-20);
  align-items:center;height:100vh;min-height:48rem;
  padding-top:var(--s-120);padding-bottom:var(--s-120);
}
.svc-hero_content{display:flex;flex-direction:column;gap:var(--s-24);max-width:35rem}
.svc-hero_content h1{margin:0}
.svc-hero_content .text--l{color:var(--gray-700)}
.svc-hero_buttons{display:flex;flex-wrap:wrap;gap:var(--s-12);margin-top:var(--s-8)}

.svc-hero_visual{
  position:relative;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
}
/* radiating guides + rings behind the panel */
.svc-hero_bg{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:0}
.svc-hero_line{position:absolute;width:0;height:220vh;border-right:1px solid var(--gray-100)}
.svc-hero_line.l2{transform:rotate(72deg)}
.svc-hero_line.l3{transform:rotate(144deg)}
.svc-hero_line.l4{transform:rotate(216deg)}
.svc-hero_line.l5{transform:rotate(288deg)}
.svc-hero_ring{position:absolute;aspect-ratio:1;border:1px solid var(--gray-100);border-radius:50%}
.svc-hero_ring.r1{width:30rem}
.svc-hero_ring.r2{width:52rem}

/* --- the morning-brief panel ------------------------------------------
   Four states play on a loop: rows land one by one carrying a count, the
   approve button starts working, then each row resolves to a green check. */
.svc-brief{
  position:relative;z-index:1;width:100%;max-width:30rem;
  background:var(--white);border-radius:var(--s-24);padding:1.75rem;
  box-shadow:-18px 34px 64px rgba(8,144,108,.16),-5px 8px 20px rgba(8,144,108,.10);
}
.svc-brief_head{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1.5rem}
.svc-brief_title{font-size:1.375rem;font-weight:700;letter-spacing:var(--ls-3);color:var(--black)}
.svc-brief_sub{font-size:.9375rem;color:var(--gray-500);letter-spacing:var(--ls-1)}

.svc-brief_rows{display:block}
.svc-brief_row{
  --tint:var(--gray-50); --tile:var(--gray-100); --pip:var(--gray-100); --ink:var(--gray-600);
  display:flex;align-items:center;gap:.875rem;overflow:hidden;
  padding:.875rem 1rem;margin-bottom:.75rem;border-radius:var(--s-16);
  background-color:var(--tint);
}
.svc-brief_row.is--green {--tint:#e9f6f1;--tile:#d3ece2;--pip:#cbe8dc;--ink:#08906c}
.svc-brief_row.is--blue  {--tint:#eaf2f9;--tile:#d5e6f3;--pip:#cde1f0;--ink:#3b7fa8}
.svc-brief_row.is--purple{--tint:#f3edfa;--tile:#e5dbf4;--pip:#ded2f1;--ink:#8f4cc2}
.svc-brief_row.is--coral {--tint:#fceeeb;--tile:#f8ded8;--pip:#f6d6ce;--ink:#c8503c}

.svc-brief_row .ico{
  width:3rem;height:3rem;flex:none;border-radius:.875rem;
  background-color:var(--tile);color:var(--ink);
  display:grid;place-items:center;
}
.svc-brief_row .ico svg{width:1.375rem;height:1.375rem}

.svc-brief_row .txt{display:flex;flex-direction:column;gap:.15rem;min-width:0;flex:1}
.svc-brief_row .t{font-size:1.0625rem;font-weight:700;letter-spacing:var(--ls-3);color:var(--black)}
/* idle and resolved captions sit on top of each other, so swapping them
   cross-fades instead of nudging the row height */
.svc-brief_row .s{position:relative;display:block;font-size:.875rem;letter-spacing:var(--ls-1);line-height:1.35}
.svc-brief_row .s > span{display:block}
.svc-brief_row .s-idle{color:var(--gray-500)}
.svc-brief_row .s-done{position:absolute;inset:0;opacity:0;color:var(--green-500);font-weight:500}

/* the badge stacks its three states the same way */
.svc-brief_row .badge{
  position:relative;width:2.125rem;height:2.125rem;flex:none;margin-left:auto;
  border-radius:50%;background-color:var(--pip);color:var(--ink);
}
.svc-brief_row .badge > span{position:absolute;inset:0;display:grid;place-items:center}
.svc-brief_row .b-n{font-size:.8125rem;font-weight:700;letter-spacing:-.02em}
.svc-brief_row .b-dots{opacity:0;gap:.14rem;grid-auto-flow:column}
.svc-brief_row .b-dots i{
  width:.22rem;height:.22rem;border-radius:50%;background:currentColor;
  animation:brief-dot 1.05s ease-in-out infinite;
}
.svc-brief_row .b-dots i:nth-child(2){animation-delay:.16s}
.svc-brief_row .b-dots i:nth-child(3){animation-delay:.32s}
@keyframes brief-dot{0%,100%{opacity:.35}50%{opacity:1}}
.svc-brief_row .b-ok{opacity:0;color:#fff}
.svc-brief_row .b-ok::before{
  content:"";position:absolute;inset:0;border-radius:50%;background:var(--green-500);
}
.svc-brief_row .b-ok svg{position:relative;width:.8125rem;height:.8125rem}

.svc-brief_cta{
  position:relative;width:100%;height:3.5rem;margin-top:.75rem;
  border-radius:var(--btn-radius);background-color:var(--green-500);color:var(--white);
  font-size:1.0625rem;font-weight:500;letter-spacing:var(--ls-3);
  display:grid;place-items:center;overflow:hidden;
}
.svc-brief_cta > span{position:absolute;inset:0;display:grid;place-items:center}
.svc-brief_cta .c-busy{opacity:0}

/* ============================================================ DEMO PANEL */
.svc-demo-title{
  width:100%;max-width:55rem;margin-inline:auto;margin-bottom:var(--s-32);
  text-align:center;
}
.svc-demo{
  position:relative;width:100%;border-radius:var(--s-24);overflow:hidden;
  background:linear-gradient(180deg,var(--gray-100),var(--gray-50));
  min-height:34rem;display:grid;place-items:center;padding:var(--s-60) var(--s-24);
}
.svc-demo_phone{
  position:relative;width:17rem;aspect-ratio:9/18.5;
  border-radius:2.25rem;background:var(--white);padding:.6rem;
  box-shadow:0 40px 80px rgba(43,77,96,.22),0 8px 20px rgba(43,77,96,.12);
}
.svc-demo_screen{
  height:100%;border-radius:1.75rem;background:var(--gray-50);overflow:hidden;
  display:flex;flex-direction:column;gap:.45rem;padding:1.6rem .6rem .6rem;
}
.svc-demo_notch{
  position:absolute;top:1.1rem;left:50%;transform:translateX(-50%);
  width:4.5rem;height:.4rem;border-radius:1rem;background:var(--gray-200);z-index:2;
}
.svc-demo_row{
  display:flex;align-items:center;gap:.45rem;background:#fff;border-radius:.7rem;
  padding:.45rem .5rem;font-size:.5rem;letter-spacing:0;
  box-shadow:0 2px 5px rgba(0,0,0,.05);
}
.svc-demo_row .d{width:.9rem;height:.9rem;border-radius:.3rem;flex:none;background:var(--green-100)}
.svc-demo_row .d.b{background:var(--blue-100)}
.svc-demo_row .d.c{background:var(--coral-100)}
.svc-demo_row .d.p{background:var(--purple-100)}
.svc-demo_row .ln{height:.3rem;border-radius:1rem;background:var(--gray-200);flex:1}
.svc-demo_row .pill{
  margin-left:auto;font-size:.4rem;padding:.12rem .3rem;border-radius:1rem;
  background:var(--green-100);color:var(--green-500);white-space:nowrap;
}

/* ========================================================= AGENTS INTRO */
/* Heading runs full width on the left; the description is pushed right so the
   left third stays open — the same offset the homepage execution gap uses. */
.svc-agents-head{max-width:46rem}
.svc-agents_descr{display:flex;flex-direction:column;gap:var(--s-24);width:100%}
.svc-agents_descr .title--m.is--green{color:var(--green-500)}
@media (min-width:1280px){
  .svc-agents_descr{width:62%;margin-left:auto}
}

/* ====================================================== WORKFLOW SCROLL */
.svc-flow{background-color:var(--green-500);color:var(--white)}
.svc-flow_container{
  z-index:1;width:100%;max-width:var(--container);margin-inline:auto;
  display:flex;align-items:flex-start;gap:5rem;
}

/* sticky left rail with cross-fading cards */
.svc-flow_left{
  z-index:2;position:sticky;top:0;flex:none;width:24.375rem;height:100vh;
  display:flex;align-items:center;
}
.svc-flow_card{
  position:absolute;width:100%;opacity:0;
  display:flex;flex-direction:column;gap:var(--s-32);
}
.svc-flow_cover{
  aspect-ratio:1.77;border-radius:var(--s-16);background:var(--gray-50);
  width:100%;overflow:hidden;
}
.svc-flow_cover img{width:100%;height:100%;object-fit:cover;display:block}
.svc-flow_quote{font-size:var(--f-title-s);line-height:var(--lh-130);font-weight:500;letter-spacing:var(--ls-3)}

/* the numbered pip that sits on the divider line */
.svc-flow_pip{
  position:absolute;top:0;right:-5rem;transform:translateX(50%);
  width:var(--s-48);height:var(--s-48);border-radius:50%;
  border:1px solid var(--green-300);background:var(--green-500);
  display:grid;place-items:center;font-size:var(--f-text-l);
}

/* adjacent-section markers on the divider */
.svc-flow_link{
  position:absolute;right:-5rem;transform:translateX(100%);
  display:flex;align-items:center;gap:var(--s-18);
  color:var(--green-200);font-size:var(--f-text-l);white-space:nowrap;
  opacity:0;pointer-events:none;
}
.svc-flow_link.is--top{top:5rem}
.svc-flow_link.is--bottom{bottom:2.5rem}
.svc-flow_link .dot{
  width:var(--s-12);height:var(--s-12);border-radius:50%;
  border:1px solid var(--green-300);background:var(--green-500);
  transform:translateX(-45%);flex:none;
}

/* right column: one full-height block per workflow */
.svc-flow_right{
  z-index:1;flex:1;min-width:0;
  border-left:1px solid var(--green-300);padding-left:5rem;position:relative;
}
.svc-flow_block{display:flex;align-items:center;width:100%;min-height:100vh;padding-block:var(--s-80)}
.svc-flow_content{display:flex;flex-direction:column;gap:var(--s-64);width:100%}
.svc-flow_top{display:flex;flex-direction:column;gap:var(--s-16)}
.svc-flow_top h2{margin:0}
.svc-flow_sub{max-width:35rem;color:var(--green-100)}
.svc-flow_list{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s-40)}
.svc-flow_item{display:flex;flex-direction:column;gap:var(--s-20)}
.svc-flow_item .ico{width:1.5rem;height:1.5rem;color:var(--green-200);flex:none}
.svc-flow_item .ico svg{width:100%;height:100%}
.svc-flow_item-text{display:flex;flex-direction:column;gap:var(--s-16)}
.svc-flow_item .text--s{color:var(--green-100);opacity:.85}
/* the card that stands in for the sticky rail on narrow screens */
.svc-flow_card--inline{display:none}

/* ========================================================= GUIDE CIRCLES */
.svc-guide{
  width:100%;height:200vh;padding-top:var(--s-120);
  display:flex;flex-direction:column;gap:var(--s-60);
}
.svc-guide_head{width:100%;max-width:var(--container);margin-inline:auto}
.svc-guide_sticky{position:sticky;top:25vh;width:100%;overflow:hidden}
/* Left-aligned, not centred: the row is wider than the container, and
   centring would push the first circle half off-screen before any scrolling
   has happened. Starting flush left sends all the overflow to the right,
   which is what the scrub then travels through. */
.svc-guide_container{
  width:100%;max-width:var(--container);margin-inline:auto;
  display:flex;justify-content:flex-start;align-items:flex-start;
}
.svc-guide_row{display:flex;align-items:center;justify-content:flex-start;will-change:transform}
.svc-guide_circle{
  flex:none;width:32rem;height:32rem;border-radius:50%;
  border:1px solid var(--gray-200);background-color:var(--gray-50);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s-24);text-align:center;
}
.svc-guide_circle.is--accent{
  border-color:var(--coral-500);background-color:var(--coral-500);color:var(--white);
}
.svc-guide_circle .ico{width:1.75rem;height:1.75rem}
.svc-guide_circle .ico svg{width:100%;height:100%}
.svc-guide_text{display:flex;flex-direction:column;gap:var(--s-12);align-items:center;width:15rem}
.svc-guide_text .text--xl{color:var(--gray-600)}
.svc-guide_circle.is--accent .text--xl{color:rgba(255,255,255,.85)}

/* =============================================== ANIMATED STATEMENT (narrow) */
.svc-statement{max-width:37.5rem;margin-inline:auto}

/* ============================================================ INTEGRATION */
.svc-stack-section{
  position:relative;width:100%;overflow:hidden;
  padding-top:var(--s-120);padding-bottom:var(--s-120);
  background-color:var(--black);color:var(--white);
}
.svc-stack-section .section_chips{color:var(--green-200)}
.svc-stack-section .hiw-title p{color:rgba(255,255,255,.72)}
.svc-stack_heading{display:flex;flex-direction:column;gap:var(--s-24);max-width:42rem}
.svc-stack{
  position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;
  align-items:center;gap:var(--s-60);margin-top:var(--s-60);
}
.svc-stack_list{display:flex;flex-direction:column;gap:var(--s-24)}
.svc-stack_benefit{display:flex;align-items:center;gap:var(--s-12)}
.svc-stack_benefit .marker{
  width:var(--s-32);height:var(--s-32);flex:none;border-radius:50%;
  border:1px solid var(--green-300);color:var(--green-300);
  display:grid;place-items:center;
}
.svc-stack_benefit .marker svg{width:.875rem;height:.875rem}

/* orbiting tool tiles around the mark */
.svc-orbit{position:relative;aspect-ratio:1;width:100%;max-width:30rem;margin-inline:auto}
.svc-orbit_rings{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.svc-orbit_ring{position:absolute;aspect-ratio:1;border:1px solid rgba(255,255,255,.12);border-radius:50%}
.svc-orbit_ring.o1{width:56%}
.svc-orbit_ring.o2{width:82%}
.svc-orbit_ring.o3{width:100%}
.svc-orbit_core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:5.5rem;height:5.5rem;border-radius:1.5rem;background:var(--green-500);
  display:grid;place-items:center;z-index:2;
  box-shadow:0 20px 50px rgba(8,144,108,.4);
}
.svc-orbit_core img{width:56%;height:auto}
.svc-orbit_tile{
  position:absolute;left:50%;top:50%;
  width:3.5rem;height:3.5rem;margin:-1.75rem 0 0 -1.75rem;
  border-radius:1rem;background:var(--white);
  display:grid;place-items:center;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
}
.svc-orbit_tile span{
  font-size:var(--f-text-s);font-weight:700;letter-spacing:-.04em;color:var(--gray-800);
}
.svc-orbit_tile svg{width:1.5rem;height:1.5rem}

/* ============================================================== RESPONSIVE */
@media (max-width:1279px){
  .svc-flow_list{grid-template-columns:1fr;gap:var(--s-24)}
  .svc-flow_item{flex-direction:row;gap:var(--s-16);align-items:flex-start}
  .svc-flow_content{gap:var(--s-40)}
  .svc-flow_left{width:20rem}
  .svc-flow_container{gap:3rem}
  .svc-flow_right{padding-left:3rem}
  .svc-flow_pip,.svc-flow_link{right:-3rem}
  .svc-guide_circle{width:26rem;height:26rem}
}

@media (max-width:991px){
  .svc-hero_container{
    grid-template-columns:1fr;height:auto;min-height:0;gap:var(--s-60);
    padding-top:8.625rem;padding-bottom:var(--s-80);
  }
  .svc-hero_content{max-width:none}
  .svc-hero_ring.r2{width:44rem}

  .svc-demo{min-height:0;padding:var(--s-40) var(--s-24)}
  .svc-demo_phone{width:14rem}

  /* the rail becomes an inline card above each block */
  .svc-flow_container{flex-direction:column;gap:var(--s-40)}
  .svc-flow_left{display:none}
  .svc-flow_right{border-left:0;padding-left:0}
  .svc-flow_block{min-height:0;padding-block:var(--s-60);align-items:flex-start}
  .svc-flow_card--inline{
    display:flex;flex-direction:column;gap:var(--s-24);margin-bottom:var(--s-32);
  }
  .svc-flow_pip,.svc-flow_link{display:none}

  .svc-guide{height:auto;padding-top:var(--s-80);padding-bottom:var(--s-80)}
  .svc-guide_sticky{position:static;overflow:visible}
  .svc-guide_container{overflow-x:auto;scrollbar-width:none}
  .svc-guide_container::-webkit-scrollbar{display:none}
  .svc-guide_row{justify-content:flex-start;gap:var(--s-20)}
  .svc-guide_circle{width:20rem;height:20rem}
  .svc-guide_text{width:13rem}

  .svc-stack{grid-template-columns:1fr;gap:var(--s-40)}
  .svc-stack-section{padding-block:var(--s-80)}
}

@media (max-width:600px){
  .svc-hero_buttons .button{width:100%}
  .svc-hero_buttons{width:100%}
  .svc-brief{max-width:none}
  .svc-demo_phone{width:12rem}
  .svc-guide_circle{width:17rem;height:17rem}
  .svc-guide_text{width:11rem}
  .svc-orbit{max-width:20rem}
  .svc-orbit_tile{width:2.75rem;height:2.75rem;margin:-1.375rem 0 0 -1.375rem;border-radius:.85rem}
  .svc-flow_quote{font-size:var(--f-title-xs)}
}