/* =====================================================================
   SOFTWARE & APP DEVELOPMENT — page-specific styles
   Reuses tokens + chrome from styles.css (:root --grad/--muted/--navh/
   --ease, .mp-sec, .mp-kicker, .mp-title, .mp-grad, .nh-btn, .wd-cta).
   Everything here is namespaced .sd-* so it cannot leak onto other pages.
   Motion is compositor-only (transform/opacity/filter); reveal/scrub is
   handled by js/anim.js (data-reveal / data-reveal-stagger).
   ===================================================================== */

/* ---- shared centred section header (mirrors website-design .wd-head) ---- */
.sd-head{text-align:center;max-width:48rem;margin:0 auto clamp(1.4rem,3vh,2.4rem)}
.sd-head .mp-kicker{margin-left:auto;margin-right:auto;margin-bottom:.7rem}
.sd-head__title{font-size:clamp(1.7rem,3.6vw,3rem);margin-bottom:.5rem}
.sd-head__sub{font-size:clamp(.85rem,1.25vw,1rem);line-height:1.6;color:var(--muted);font-weight:300;margin:0}

/* the mp-sec band is min-height:100svh + centred by styles.css; relax it so
   our taller content sections breathe and sit naturally in the flow */
.sd-sec{min-height:auto;padding:clamp(4rem,9vh,7rem) clamp(1.2rem,5vw,3rem) clamp(3rem,7vh,5rem)}
.sd-sec__inner{width:100%;max-width:1180px;margin:0 auto}

.sd-eyebrow{color:#cdb8ff}

/* small leading icon inside nh buttons (matches website-design helper).
   .nh-btn__lead is also used by the shared .wd-cta "Call Now" button; its
   rule lives in website-design.css which this page does not load, so define
   it here too. */
.nh-btn .sd-btn__lead,.nh-btn__lead{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* =====================================================================
   1 · HERO  — copy column + glass "terminal" showcase
   ===================================================================== */
.sd-hero{position:relative;z-index:1;min-height:100svh;display:flex;align-items:center;overflow:hidden;
  padding:calc(var(--navh) + 3vh) clamp(1.2rem,5vw,5rem) 4vh}
.sd-hero__grid{width:100%;max-width:1280px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
#navDots{display:none}

.sd-badge{display:inline-flex;align-items:center;gap:.55rem;padding:.42rem .95rem;border-radius:999px;margin-bottom:1.3rem;
  border:1px solid rgba(168,85,247,.42);background:rgba(168,85,247,.06);
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:#e9e3ff}
.sd-badge i{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:linear-gradient(135deg,#ff2e9a,#a855f7);
  box-shadow:0 0 8px rgba(168,85,247,.9)}
.sd-hero__title{font-size:clamp(2.2rem,4.6vw,4rem);line-height:1;font-weight:300;text-transform:uppercase;
  letter-spacing:.01em;color:#fff;margin:0}
.sd-hero__title b{font-weight:500;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sd-hero__body{position:relative;padding-left:1.1rem;font-size:clamp(.9rem,1.2vw,1.05rem);line-height:1.7;color:var(--muted);
  font-weight:300;max-width:34rem;margin:1.5rem 0 1.8rem}
.sd-hero__body::before{content:"";position:absolute;left:0;top:.25em;bottom:.25em;width:2px;border-radius:2px;
  background:linear-gradient(180deg,#ff2e9a,#a855f7,#3b82f6)}
.sd-hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:1.9rem}
.sd-hero__mini{list-style:none;display:flex;flex-wrap:wrap;align-items:center;padding:0;margin:0}
.sd-hero__mini li{display:inline-flex;align-items:center;gap:.45rem;font-size:.58rem;letter-spacing:.07em;
  text-transform:uppercase;font-weight:600;color:#b7b2c9}
.sd-hero__mini li:not(:last-child){margin-right:.8rem;padding-right:.8rem;border-right:1px solid rgba(255,255,255,.16)}
.sd-hero__mini svg{width:15px;height:15px;fill:none;stroke:#d06bf0;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* terminal showcase */
.sd-term{position:relative;border-radius:15px;overflow:hidden;background:#0b0817;
  border:1px solid rgba(168,85,247,.3);
  box-shadow:0 50px 110px -40px rgba(120,40,210,.7),0 0 0 1px rgba(255,255,255,.04);
  transform:rotate(-.6deg);transition:transform .6s var(--ease),box-shadow .6s}
.sd-term:hover{transform:rotate(0deg) translateY(-3px);box-shadow:0 60px 130px -40px rgba(120,40,210,.85)}
.sd-term__bar{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;
  background:linear-gradient(180deg,#181230,#110c20);border-bottom:1px solid rgba(168,85,247,.16)}
.sd-term__dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.sd-term__dot:nth-child(1){background:#ff5f57}
.sd-term__dot:nth-child(2){background:#febc2e}
.sd-term__dot:nth-child(3){background:#28c840}
.sd-term__title{margin:0 auto;font-size:.64rem;letter-spacing:.04em;color:#9a93b3}
.sd-term__body{position:relative;padding:clamp(1rem,2vw,1.5rem);font-family:"SFMono-Regular",ui-monospace,"Cascadia Code",Menlo,Consolas,monospace;
  font-size:clamp(.7rem,1vw,.82rem);line-height:1.85;color:#cdc7df;min-height:clamp(210px,30vh,300px);overflow:hidden;
  background:radial-gradient(130% 130% at 80% 18%,#1a1030 0,#100a20 50%,#080510 100%)}
.sd-term__line{display:block;white-space:pre-wrap;word-break:break-word;min-height:1.85em}
.sd-term__prompt{color:#ff7ac8}
.sd-term__cmd{color:#fff}
.sd-term__flag{color:#7fd0ff}
.sd-term__ok{color:#5fe39a}
.sd-term__dim{color:#7c768f}
.sd-term__caret{display:inline-block;width:.55em;height:1.05em;vertical-align:-.18em;margin-left:2px;border-radius:1px;
  background:#ff7ac8;animation:sdBlink 1.05s steps(1) infinite}
@keyframes sdBlink{50%{opacity:0}}

/* live caret used while the signature type-on runs: solid + glow while typing,
   then it walks down each line (placed via JS). */
.sd-term__caret--live{box-shadow:0 0 9px rgba(255,122,200,.85)}
/* the resting caret in the markup is the no-JS / reduced-motion end state;
   hide it only while the JS-driven type-on is actively running */
.sd-term.is-typing .sd-term__caret:not(.sd-term__caret--live){display:none}

/* subtle scanline sweep over the terminal — decorative, motion-only.
   Sits inside the clipped .sd-term__body; never intercepts pointer events. */
.sd-term__scan{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;
  background:linear-gradient(180deg,transparent 0,rgba(255,122,200,.06) 46%,rgba(127,208,255,.05) 54%,transparent 100%);
  mix-blend-mode:screen}
.sd-term.is-typing .sd-term__scan,.sd-term.is-typed .sd-term__scan{opacity:1;animation:sdScan 5.4s linear infinite}
@keyframes sdScan{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}
/* faint static CRT line texture, always on once the terminal is live (cheap) */
.sd-term.is-typing .sd-term__body,.sd-term.is-typed .sd-term__body{
  background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.022) 0,rgba(255,255,255,.022) 1px,transparent 1px,transparent 3px),
    radial-gradient(130% 130% at 80% 18%,#1a1030 0,#100a20 50%,#080510 100%)}

/* light section parallax driven by js/software-development.js (--sdp -1..1) */
[data-sd-parallax]{will-change:transform;transform:translate3d(0,calc(var(--sdp,0) * var(--sd-par-amt,20px) * -1),0)}
.sd-deliver[data-sd-parallax]{--sd-par-amt:22px}
.sd-rel-grid[data-sd-parallax]{--sd-par-amt:18px}

@media (prefers-reduced-motion:reduce){
  .sd-term__scan{display:none!important}
  .sd-term.is-typing .sd-term__body,.sd-term.is-typed .sd-term__body{animation:none!important}
  [data-sd-parallax]{transform:none!important;will-change:auto}
}

/* =====================================================================
   2 · SUB-SERVICES grid
   ===================================================================== */
.sd-svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:clamp(.9rem,1.8vw,1.3rem)}
.sd-svc{position:relative;display:flex;flex-direction:column;padding:clamp(1.3rem,2.4vw,1.7rem);border-radius:16px;
  border:1px solid rgba(168,85,247,.22);background:linear-gradient(168deg,rgba(22,15,40,.62),rgba(11,9,21,.5));
  box-shadow:0 28px 60px -34px rgba(70,25,150,.55);overflow:hidden;
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.sd-svc::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--grad);opacity:.5;transform:scaleX(0);
  transform-origin:left;transition:transform .45s var(--ease),opacity .35s}
.sd-svc:hover{transform:translateY(-5px);border-color:rgba(168,85,247,.5);box-shadow:0 40px 80px -34px rgba(120,40,210,.7)}
.sd-svc:hover::before{transform:scaleX(1);opacity:1}
.sd-svc__ico{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:12px;margin-bottom:1rem;
  border:1px solid rgba(168,85,247,.42);background:linear-gradient(150deg,rgba(168,85,247,.22),rgba(255,46,154,.08));
  color:#d6a3ff;box-shadow:inset 0 0 16px -6px rgba(168,85,247,.6)}
.sd-svc__ico svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sd-svc__h{font-size:1.06rem;font-weight:600;color:#fff;margin:0 0 .45rem;letter-spacing:.01em}
.sd-svc__p{font-size:.86rem;line-height:1.62;color:var(--muted);font-weight:300;margin:0}
.sd-svc__tag{margin-top:1rem;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#b9a3ff}

/* =====================================================================
   3 · PROCESS / how it works
   ===================================================================== */
.sd-proc{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:clamp(1rem,2vw,1.4rem)}
.sd-step{position:relative;padding:clamp(1.3rem,2.2vw,1.6rem);border-radius:16px;
  border:1px solid rgba(255,255,255,.08);background:linear-gradient(168deg,rgba(20,14,36,.55),rgba(10,8,19,.45));
  transition:transform .35s var(--ease),border-color .35s}
.sd-step:hover{transform:translateY(-4px);border-color:rgba(168,85,247,.4)}
.sd-step__no{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;margin-bottom:1rem;
  font-weight:600;font-size:1rem;color:#fff;background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.4);
  box-shadow:inset 0 0 18px -6px rgba(168,85,247,.6)}
.sd-step__no b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sd-step__h{font-size:1rem;font-weight:600;color:#fff;margin:0 0 .4rem}
.sd-step__p{font-size:.84rem;line-height:1.6;color:var(--muted);font-weight:300;margin:0}

/* =====================================================================
   4 · WHY / deliverables  (split: copy + feature list)
   ===================================================================== */
.sd-why{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.sd-why__h{font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.1;font-weight:300;text-transform:uppercase;color:#fff;margin:0 0 1rem}
.sd-why__h b{font-weight:500;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sd-why__body{font-size:clamp(.88rem,1.2vw,1rem);line-height:1.72;color:var(--muted);font-weight:300;margin:0 0 1.4rem}
.sd-why__stats{display:flex;flex-wrap:wrap;gap:.7rem}
.sd-stat{flex:1 1 8rem;padding:.9rem 1rem;border-radius:13px;border:1px solid rgba(168,85,247,.24);
  background:linear-gradient(168deg,rgba(22,15,40,.6),rgba(11,9,21,.45))}
.sd-stat b{display:block;font-size:1.25rem;font-weight:600;color:#fff;letter-spacing:.01em}
.sd-stat span{display:block;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#9a93b3;font-weight:600;margin-top:.2rem}

.sd-deliver{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.sd-deliver li{position:relative;display:flex;gap:.85rem;padding:1rem 1.1rem;border-radius:14px;
  border:1px solid rgba(255,255,255,.08);background:linear-gradient(168deg,rgba(20,14,36,.5),rgba(10,8,19,.4))}
.sd-deliver__ico{display:inline-grid;place-items:center;width:34px;height:34px;flex:0 0 auto;border-radius:10px;
  border:1px solid rgba(168,85,247,.4);background:rgba(168,85,247,.1);color:#d6a3ff}
.sd-deliver__ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sd-deliver__txt b{display:block;font-size:.92rem;color:#fff;font-weight:600;margin-bottom:.15rem}
.sd-deliver__txt span{display:block;font-size:.82rem;line-height:1.55;color:var(--muted);font-weight:300}

/* =====================================================================
   5 · PACKAGES  (carry-over cards, restyled to the house tier look)
   ===================================================================== */
.sd-pkg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(.9rem,1.8vw,1.3rem)}
.sd-pkg{position:relative;display:flex;flex-direction:column;padding:clamp(1.4rem,2.4vw,1.8rem);border-radius:18px;
  border:1px solid rgba(168,85,247,.22);background:linear-gradient(178deg,rgba(24,16,42,.66),rgba(11,9,21,.5));
  box-shadow:0 30px 64px -36px rgba(70,25,150,.55);transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.sd-pkg:hover{transform:translateY(-5px);border-color:rgba(168,85,247,.5);box-shadow:0 44px 90px -36px rgba(120,40,210,.72)}
.sd-pkg--feature{border-color:rgba(255,46,154,.5)}
.sd-pkg--feature::before{content:"Most Popular";position:absolute;top:-1px;right:1.2rem;transform:translateY(-50%);
  padding:.28rem .8rem;border-radius:999px;font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#fff;
  background:var(--grad);box-shadow:0 8px 22px -8px rgba(255,46,154,.8)}
.sd-pkg__name{font-size:.96rem;font-weight:600;color:#fff;margin:0 0 .5rem;letter-spacing:.01em}
.sd-pkg__price{font-size:clamp(1.7rem,3vw,2.1rem);font-weight:600;margin:0 0 .25rem;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sd-pkg__per{font-size:.9rem;font-weight:400;color:#8a87a0;-webkit-text-fill-color:#8a87a0}
.sd-pkg__note{font-size:.74rem;letter-spacing:.04em;color:#8a87a0;margin:0 0 1.1rem}
.sd-pkg__list{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:.5rem}
.sd-pkg__list li{position:relative;padding-left:1.5rem;font-size:.85rem;line-height:1.5;color:var(--muted)}
.sd-pkg__list li::before{content:"";position:absolute;left:0;top:.35em;width:13px;height:13px;border-radius:50%;
  background:rgba(168,85,247,.18);box-shadow:inset 0 0 0 1px rgba(168,85,247,.5)}
.sd-pkg__list li::after{content:"";position:absolute;left:4px;top:.62em;width:5px;height:2.5px;border-left:1.5px solid #d6a3ff;
  border-bottom:1.5px solid #d6a3ff;transform:rotate(-45deg)}
.sd-pkg .nh-btn{margin-top:auto;width:100%}
.sd-pkg__cat{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#b9a3ff;margin:0 0 1.1rem}
.sd-pkg-note{text-align:center;color:#8a87a0;font-size:.88rem;margin:1.6rem auto 0;max-width:42rem;line-height:1.6}
.sd-pkg-note a{color:#b9a3ff}

/* group subhead within the packages section */
.sd-pkg-group{margin:2.2rem 0 1rem;text-align:center}
.sd-pkg-group h3{font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:#cdb8ff;margin:0}

/* =====================================================================
   6 · FAQ
   ===================================================================== */
.sd-faq{max-width:54rem;margin:0 auto;display:grid;gap:.8rem}
.sd-faq__item{border:1px solid rgba(255,255,255,.09);border-radius:14px;overflow:hidden;
  background:linear-gradient(168deg,rgba(20,14,36,.5),rgba(10,8,19,.4))}
.sd-faq__item[open]{border-color:rgba(168,85,247,.4)}
.sd-faq__q{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.05rem 1.3rem;font-size:.96rem;font-weight:600;color:#fff}
.sd-faq__q::-webkit-details-marker{display:none}
.sd-faq__q::after{content:"";flex:0 0 auto;width:11px;height:11px;border-right:2px solid #b9a3ff;border-bottom:2px solid #b9a3ff;
  transform:rotate(45deg);transition:transform .3s var(--ease);margin-top:-3px}
.sd-faq__item[open] .sd-faq__q::after{transform:rotate(-135deg);margin-top:3px}
.sd-faq__a{padding:0 1.3rem 1.2rem;font-size:.88rem;line-height:1.68;color:var(--muted);font-weight:300;margin:0}

/* =====================================================================
   7 · RELATED services cross-links
   ===================================================================== */
.sd-rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(.9rem,1.8vw,1.3rem)}
.sd-rel{display:flex;flex-direction:column;padding:clamp(1.3rem,2.2vw,1.6rem);border-radius:16px;text-decoration:none;
  border:1px solid rgba(168,85,247,.22);background:linear-gradient(168deg,rgba(22,15,40,.6),rgba(11,9,21,.46));
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.sd-rel:hover{transform:translateY(-4px);border-color:rgba(168,85,247,.5);box-shadow:0 36px 76px -34px rgba(120,40,210,.66)}
.sd-rel__ico{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:11px;margin-bottom:.9rem;
  border:1px solid rgba(168,85,247,.4);background:rgba(168,85,247,.1);color:#d6a3ff}
.sd-rel__ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sd-rel__h{font-size:1rem;font-weight:600;color:#fff;margin:0 0 .35rem}
.sd-rel__p{font-size:.82rem;line-height:1.55;color:var(--muted);font-weight:300;margin:0 0 .9rem}
.sd-rel__go{margin-top:auto;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#b9a3ff;
  display:inline-flex;align-items:center;gap:.4rem}
.sd-rel:hover .sd-rel__go{color:#fff}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:920px){
  .sd-hero__grid,.sd-why{grid-template-columns:1fr;gap:clamp(1.6rem,5vw,2.4rem)}
  .sd-term{order:2;transform:none}
  .sd-why__order-visual{order:2}
}
@media (max-width:520px){
  .sd-hero__cta .nh-btn,.sd-hero__cta .sd-hero__cta-btn{flex:1 1 100%;justify-content:center}
  .sd-hero__mini li{font-size:.55rem}
  .sd-faq__q{font-size:.9rem}
}