/* Homepage. SA Digital Labs palette (navy #1B3A5C / #0A0F1E, teal #00BCD4 / #0097A7, light #F4F7FC). Scoped to .hm */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&display=swap');

body:has(.hm){background:#F4F7FC}
body:has(.hm) .navbar{background:rgba(244,247,252,.92)!important;border-bottom:1px solid #DCE5EF;box-shadow:none!important;backdrop-filter:blur(8px)}
body:has(.hm) .navbar *{color:#1B3A5C}
body:has(.hm) .navbar .site-logo span{background:linear-gradient(135deg,#0097A7,#00BCD4);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body:has(.hm) .navbar__cta{background:#1B3A5C!important;color:#fff!important;box-shadow:none!important;border-radius:999px!important}
body:has(.hm) .navbar__link.active,body:has(.hm) .navbar__link:hover{color:#007686!important}
body:has(.hm) #scroll-progress{background:#0097A7!important;box-shadow:none!important}
body:has(.hm) .floating-cta__btn,body:has(.hm) .back-to-top{background:#1B3A5C!important;color:#fff!important;box-shadow:0 6px 18px rgba(27,58,92,.25)!important;border:0!important}
body:has(.hm) .navbar__dropdown-menu-inner{background:#fff!important;border:1px solid #DCE5EF!important;box-shadow:0 12px 30px rgba(27,58,92,.12)!important}

.hm{--navy:#1B3A5C;--navy-2:#2C5F8C;--ink:#0A0F1E;--teal:#00BCD4;--teal-d:#007686;--paper:#F4F7FC;--band:#E8EFF7;--rule:#D6E0EB;--soft:#4B6785;
  --p-teal:#D7F2F6;--p-navy:#DDE6F1;--p-sky:#E3EEF9;--p-mist:#E6F0F2;
  color:var(--ink);font-family:'Inter',system-ui,sans-serif;font-size:17px;line-height:1.65;background:var(--paper)}
.hm h1,.hm h2,.hm h3{font-family:'Newsreader',Georgia,serif;font-weight:400;color:var(--ink);letter-spacing:-.015em}
.hm a.hm-link{color:var(--navy);text-decoration:underline;text-decoration-color:rgba(27,58,92,.35);text-underline-offset:3px}
.hm a.hm-link:hover{color:var(--teal-d)}
.hm-wrap{max-width:1180px;margin:0 auto;padding:0 1.5rem}
.hm-narrow{max-width:680px;margin:0 auto}
.hm-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.25rem;border-radius:999px;font-size:.95rem;font-weight:500;text-decoration:none;transition:background .2s,border-color .2s}
.hm-btn--dark{background:var(--navy);color:#fff}
.hm-btn--dark:hover{background:var(--ink)}
.hm-btn--light{background:#fff;color:var(--navy);border:1px solid var(--rule)}
.hm-btn--light:hover{border-color:var(--navy)}
.hm-chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--soft);background:#fff;border:1px solid var(--rule);border-radius:999px;padding:.3rem .75rem}
.hm-chip i{width:7px;height:7px;border-radius:50%;background:var(--teal)}



/* bands and section heads */
.hm-band{background:var(--band)}
.hm-sec{padding:7rem 0}
.hm-head{text-align:center;max-width:720px;margin:0 auto 4rem}
.hm-head h2{font-size:clamp(2.2rem,4vw,3.2rem);line-height:1.1;margin:.9rem 0 .9rem}
.hm-head p{color:#3E5670;margin:0}

/* story rows (what we build) */
.hm-story{display:grid;grid-template-columns:1fr 1.15fr;gap:4rem;align-items:center;padding:3.5rem 0;border-top:1px solid var(--rule)}
.hm-story:first-of-type{border-top:0}
.hm-story.flip .hm-story__text{order:2}
.hm-meta{font-size:.82rem;color:var(--soft);letter-spacing:.02em}
.hm-story h3{font-size:clamp(1.7rem,2.6vw,2.2rem);line-height:1.15;margin:.6rem 0 .9rem}
.hm-story p{color:#3E5670;margin:0 0 1rem}

/* illustrated panels */
.hm-panel{position:relative;border-radius:22px;padding:2.25rem;min-height:330px;display:grid;place-items:center;overflow:hidden}
.hm-panel::before{content:'';position:absolute;inset:0;background:
  radial-gradient(circle at 15% 20%,rgba(255,255,255,.55) 0 2px,transparent 3px) 0 0/34px 34px;opacity:.55;pointer-events:none}
.hm-panel svg.lines{position:absolute;inset:0;width:100%;height:100%;opacity:.5;pointer-events:none}
.p-teal{background:var(--p-teal)}.p-navy{background:var(--p-navy)}.p-sky{background:var(--p-sky)}.p-mist{background:var(--p-mist)}
.ui{position:relative;z-index:1;background:#fff;border-radius:14px;box-shadow:0 18px 40px rgba(27,58,92,.14);font-size:.78rem;color:var(--ink)}
/* phone */
.ui-phone{width:200px;padding:14px 12px 16px;border-radius:26px;border:6px solid var(--ink)}
.ui-phone .bar{height:6px;width:60px;border-radius:9px;background:#E3EAF2;margin:0 auto 12px}
.ui-phone h5{font:600 .9rem 'Inter';margin:0 0 8px}
.slot{display:flex;justify-content:space-between;align-items:center;border:1px solid #E3EAF2;border-radius:10px;padding:8px 10px;margin-bottom:6px}
.slot.on{border-color:var(--teal);background:#F0FBFD}
.slot b{font-weight:600}
.ui-phone .go{margin-top:10px;background:var(--navy);color:#fff;text-align:center;border-radius:10px;padding:8px;font-weight:600}
/* dashboard */
.ui-dash{width:min(100%,420px);padding:16px}
.ui-dash .row{display:flex;gap:10px;margin-bottom:12px}
.kpi{flex:1;border:1px solid #E3EAF2;border-radius:10px;padding:8px 10px}
.kpi span{display:block;color:var(--soft);font-size:.7rem}
.kpi b{font:600 1.05rem 'Inter'}
.bars{display:flex;align-items:flex-end;gap:8px;height:110px;padding:8px 6px 0;border-top:1px solid #E3EAF2}
.bars i{flex:1;border-radius:5px 5px 0 0;background:var(--p-navy)}
.bars i:nth-child(odd){background:var(--navy-2)}
.bars i:last-child{background:var(--teal)}
/* pricing */
.ui-price{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px;width:min(100%,430px)}
.plan{border:1px solid #E3EAF2;border-radius:10px;padding:10px;text-align:center}
.plan.pick{border-color:var(--teal);box-shadow:0 0 0 3px #D7F2F6}
.plan h6{font:600 .8rem 'Inter';margin:0 0 4px;color:var(--soft)}
.plan b{display:block;font:600 1.15rem 'Inter';margin-bottom:8px}
.plan i{display:block;height:5px;border-radius:5px;background:#E3EAF2;margin:5px 0}
.plan .cta{margin-top:8px;font-size:.7rem;padding:5px;border-radius:7px;background:var(--navy);color:#fff}
/* website */
.ui-site{width:min(100%,440px);overflow:hidden}
.ui-site .chrome{display:flex;gap:5px;padding:9px 12px;border-bottom:1px solid #E3EAF2}
.ui-site .chrome i{width:8px;height:8px;border-radius:50%;background:#DCE5EF}
.ui-site .sh{padding:18px 16px;background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff}
.ui-site .sh b{display:block;font:500 1.05rem 'Newsreader';margin-bottom:6px}
.ui-site .sh span{display:inline-block;background:var(--teal);color:var(--ink);border-radius:999px;padding:3px 10px;font-weight:600;font-size:.7rem}
.ui-site .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px}
.ui-site .cols i{height:46px;border-radius:8px;background:var(--p-sky)}

/* process */
.hm-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.hm-step{border-top:1px solid var(--navy);padding-top:1.25rem}
.hm-step .hm-meta{display:block;margin-bottom:.6rem}
.hm-step h3{font-size:1.45rem;margin:0 0 .5rem}
.hm-step p{color:#3E5670;font-size:.95rem;margin:0}

/* dark band */
.hm-dark{background:#0A0F1E;color:#E8EDF4}
.hm-dark h2,.hm-dark h3{color:#fff}
.hm-dark .hm-head p,.hm-dark p{color:#9AAFC8}
.hm-ways{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.hm-way{border:1px solid rgba(154,175,200,.22);border-radius:18px;padding:1.75rem;background:rgba(255,255,255,.02)}
.hm-way .hm-meta{color:var(--teal)}
.hm-way h3{font-size:1.5rem;margin:.5rem 0 .6rem}
.hm-way p{font-size:.95rem;margin:0}

/* faq */
.hm-faq details{border-top:1px solid var(--rule);padding:1.2rem 0}
.hm-faq details:last-child{border-bottom:1px solid var(--rule)}
.hm-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;font-family:'Newsreader',Georgia,serif;font-size:1.3rem}
.hm-faq summary::-webkit-details-marker{display:none}
.hm-faq summary::after{content:'+';color:var(--teal-d);font-family:'Inter';transition:transform .2s}
.hm-faq details[open] summary::after{transform:rotate(45deg)}
.hm-faq details p{color:#3E5670;margin:.7rem 0 0;max-width:600px}

/* closing */
.hm-close{text-align:center;padding:7rem 0}
.hm-close h2{font-size:clamp(2.4rem,4.6vw,3.8rem);line-height:1.08;margin:0 auto 1rem;max-width:16ch}
.hm-close p{color:#3E5670;max-width:520px;margin:0 auto 2rem}
.hm-close .hm-actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}

/* footer on this page: brand navy */
body:has(.hm) .footer{background:#0A0F1E!important}

@media(max-width:980px){
  .hm-hero{min-height:0;padding-bottom:4rem}
  .hm-story,.hm-story.flip{grid-template-columns:1fr;gap:2rem}
  .hm-story.flip .hm-story__text{order:0}
  .hm-steps{grid-template-columns:repeat(2,1fr)}
  .hm-ways{grid-template-columns:1fr}
}
@media(max-width:600px){.hm-steps{grid-template-columns:1fr}.hm-sec{padding:3.5rem 0}.ui-price{grid-template-columns:1fr 1fr}.ui-price .plan:last-child{display:none}}