/* Elementum site — self-contained utilities (no CDN required) */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,sans-serif;background:#fff;color:#1e293b;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
.logo-font{font-family:'Calibri Light',Calibri,Carlito,'Segoe UI Light','Segoe UI',system-ui,sans-serif;font-weight:300!important;letter-spacing:.02em}

/* layout */
.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}
.inset-x-0{left:0;right:0}.top-0{top:0}.-top-3{top:-.75rem}.left-6{left:1.5rem}
.z-50{z-index:50}
.block{display:block}.inline-flex{display:inline-flex}.flex{display:flex}.grid{display:grid}.hidden{display:none}
.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}.items-start{align-items:flex-start}
.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}
.shrink-0,.flex-shrink-0{flex-shrink:0}
.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}
.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-10{gap:2.5rem}
.gap-12{gap:3rem}.gap-14{gap:3.5rem}.gap-16{gap:4rem}
.gap-x-10{column-gap:2.5rem}.gap-y-3{row-gap:.75rem}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.space-y-1>*+*{margin-top:.25rem}.space-y-2>*+*{margin-top:.5rem}.space-y-3>*+*{margin-top:.75rem}
.space-y-4>*+*{margin-top:1rem}.space-y-5>*+*{margin-top:1.25rem}
.w-full{width:100%}.w-1\.5{width:.375rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-10{width:2.5rem}.w-auto{width:auto}
.h-1\.5{height:.375rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-10{height:2.5rem}.h-16{height:4rem}
.max-w-xl{max-width:36rem}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-6xl{max-width:72rem}
.mx-auto{margin-left:auto;margin-right:auto}
.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}
.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-14{margin-top:3.5rem}.mt-16{margin-top:4rem}
.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}
.mb-12{margin-bottom:3rem}.mb-14{margin-bottom:3.5rem}
.pt-1{padding-top:.25rem}.pt-8{padding-top:2rem}.pt-12{padding-top:3rem}.pt-28{padding-top:7rem}
.pb-4{padding-bottom:1rem}.pb-16{padding-bottom:4rem}.pb-20{padding-bottom:5rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}
.py-8{padding-top:2rem;padding-bottom:2rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}
.py-20{padding-top:5rem;padding-bottom:5rem}
.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}
.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}
.px-7{padding-left:1.75rem;padding-right:1.75rem}.px-8{padding-left:2rem;padding-right:2rem}
.p-2{padding:.5rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}
.border{border-width:1px;border-style:solid}.border-2{border-width:2px;border-style:solid}
.border-b{border-bottom-width:1px;border-bottom-style:solid}
.border-t{border-top-width:1px;border-top-style:solid}
.border-y{border-top-width:1px;border-bottom-width:1px;border-top-style:solid;border-bottom-style:solid}
.border-slate-100{border-color:#f1f5f9}.border-slate-200{border-color:#e2e8f0}
.border-brand-300{border-color:#7cc5fb}.border-brand-500\/40{border-color:rgba(12,140,230,.4)}
.border-white\/10{border-color:rgba(255,255,255,.1)}
.rounded{border-radius:.25rem}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}
.rounded-xl{border-radius:.75rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}
.shadow-sm{box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}
.shadow-md{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
.shadow-brand-600\/20{box-shadow:0 10px 15px -3px rgba(0,111,196,.2)}
.shadow-brand-600\/25{box-shadow:0 10px 15px -3px rgba(0,111,196,.25)}
.bg-white{background-color:#fff}.bg-white\/10{background-color:rgba(255,255,255,.1)}
.bg-white\/95{background-color:rgba(255,255,255,.95)}
.bg-slate-50{background-color:#f8fafc}.bg-slate-50\/50{background-color:rgba(248,250,252,.5)}
.bg-slate-900{background-color:#0f172a}
.bg-brand-50{background-color:#f0f7ff}.bg-brand-50\/50{background-color:rgba(240,247,255,.5)}
.bg-brand-100{background-color:#e0effe}.bg-brand-500{background-color:#0c8ce6}
.bg-brand-600{background-color:#006fc4}.bg-brand-950{background-color:#072849}
.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}
.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}
.from-brand-50{--tw-gradient-from:#f0f7ff;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(240,247,255,0))}
.from-brand-600{--tw-gradient-from:#006fc4;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(0,111,196,0))}
.to-white{--tw-gradient-to:#fff}
.to-brand-800{--tw-gradient-to:#064b83}
.backdrop-blur{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}
.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}
.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-extrabold{font-weight:800}
.leading-none{line-height:1}.leading-tight{line-height:1.25}.leading-relaxed{line-height:1.625}
.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}
.uppercase{text-transform:uppercase}
.text-white{color:#fff}
.text-slate-300{color:#cbd5e1}.text-slate-400{color:#94a3b8}.text-slate-500{color:#64748b}
.text-slate-600{color:#475569}.text-slate-700{color:#334155}.text-slate-800{color:#1e293b}.text-slate-900{color:#0f172a}
.text-brand-50{color:#f0f7ff}.text-brand-100{color:#e0effe}.text-brand-200{color:#b9dffd}
.text-brand-300{color:#7cc5fb}.text-brand-600{color:#006fc4}.text-brand-700{color:#01599f}
.text-brand-800{color:#064b83}.text-brand-900{color:#0b3f6d}
.text-red-600{color:#dc2626}
.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.outline-none{outline:2px solid transparent;outline-offset:2px}
.resize-none{resize:none}
.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
.hover\:bg-brand-50:hover{background-color:#f0f7ff}
.hover\:bg-brand-700:hover{background-color:#01599f}
.hover\:bg-slate-50:hover{background-color:#f8fafc}
.hover\:border-brand-200:hover{border-color:#b9dffd}
.hover\:border-brand-300:hover{border-color:#7cc5fb}
.hover\:border-slate-300:hover{border-color:#cbd5e1}
.hover\:text-brand-700:hover{color:#01599f}
.hover\:text-brand-800:hover{color:#064b83}
.hover\:text-white:hover{color:#fff}
.hover\:text-slate-300:hover{color:#cbd5e1}
.hover\:shadow-md:hover{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}
.hover\:shadow-lg:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.group:hover .group-hover\:text-brand-700{color:#01599f}
.focus\:border-brand-500:focus{border-color:#0c8ce6}
.focus\:ring-2:focus{box-shadow:0 0 0 2px rgba(12,140,230,.2)}
.focus\:ring-brand-500\/20:focus{box-shadow:0 0 0 2px rgba(12,140,230,.2)}

@media (min-width:640px){
  .sm\:block{display:block}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sm\:col-span-2{grid-column:span 2/span 2}
  .sm\:w-auto{width:auto}.sm\:h-8{height:2rem}
  .sm\:gap-3{gap:.75rem}.sm\:gap-10{gap:2.5rem}
  .sm\:p-12{padding:3rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
  .sm\:py-20{padding-top:5rem;padding-bottom:5rem}.sm\:py-28{padding-top:7rem;padding-bottom:7rem}
  .sm\:pb-20{padding-bottom:5rem}.sm\:pb-28{padding-bottom:7rem}
  .sm\:pt-32{padding-top:8rem}.sm\:pt-36{padding-top:9rem}
  .sm\:text-left{text-align:left}.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}
  .sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}
  .sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-\[1\.7rem\]{font-size:1.7rem}
}
@media (min-width:768px){
  .md\:flex{display:flex}.md\:hidden{display:none}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1024px){
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
  .lg\:gap-16{gap:4rem}.lg\:text-6xl{font-size:3.75rem;line-height:1}
}

.max-w-md{max-width:28rem}
.overflow-hidden{overflow:hidden}
.mb-14{margin-bottom:3.5rem}
@media (min-width:1024px){.lg\:justify-end{justify-content:flex-end}}


/* —— Hero: full split background, floating app (no nested panel) —— */
.hero-section{
  position: relative;
  overflow: hidden;
  padding: 7rem 0 5rem;
  background: #eef6ff;
}
/* Full-bleed right panel (desktop) — slate runs to viewport edge */
.hero-split{
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 46%;
  background: linear-gradient(160deg, #8b9aab 0%, #64748b 55%, #556274 100%);
  z-index: 0;
}
.hero-inner{
  position: relative;
  z-index: 1;
}
.hero-copy{ position: relative; z-index: 2; }
.hero-visual{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
}
.hero-app-frame{
  width: 100%;
  max-width: 710px;
  border-radius: 0.75rem;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 25px 50px -12px rgba(15, 23, 42, 0.4),
    0 10px 20px -10px rgba(15, 23, 42, 0.25),
    0 0 0 1px rgba(15, 23, 42, 0.05);
}
.hero-app-frame img{
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 1024px){
  .hero-section{
    padding: 8rem 0 6.5rem;
    background: #eef6ff;
  }
  .hero-split{ display: block; }
  .hero-visual{
    justify-content: flex-end;
    padding: 0.5rem 0;
  }
  .hero-app-frame{ max-width: 710px; }
}

@media (max-width: 1023px){
  .hero-section{
    padding: 6.5rem 0 3.5rem;
    background: linear-gradient(180deg, #eef6ff 0%, #f8fafc 100%);
  }
  .hero-split{ display: none; }
  .hero-app-frame{ max-width: 420px; }
}

.bg-white\/80{background-color:rgba(255,255,255,.8)}
.hover\:bg-white\/80:hover{background-color:rgba(255,255,255,.8)}