:root{
  --bg:#ffffff;
  --bg-soft:#f7f9fc;
  --bg-tint:#f1f6fb;
  --card:#ffffff;
  --card-2:#fbfdff;
  --text:#17243a;
  --heading:#0f1b32;
  --muted:#5b6880;
  --line:#d9e3ef;
  --line-strong:#c9d6e5;
  --primary:#6a1b9a;
  --primary-2:#7c3aed;
  --secondary:#1fc3db;
  --accent:#8dc63f;
  --deep:#12203c;
  --shadow-sm:0 10px 24px rgba(15, 27, 50, .06);
  --shadow-md:0 18px 45px rgba(15, 27, 50, .10);
  --shadow-lg:0 28px 70px rgba(15, 27, 50, .14);
  --radius-lg:28px;
  --radius-md:22px;
  --radius-sm:16px;
  --container:1200px;
  --transition:220ms ease;
}
*,
*::before,
*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(124,58,237,.06), transparent 30%),
    radial-gradient(circle at top right, rgba(141,198,63,.07), transparent 28%),
    linear-gradient(180deg, #fbfdff 0%, #ffffff 15%, #ffffff 100%);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p,li{font-size:1rem}
p{margin:0 0 1rem}
h1,h2,h3,h4{
  margin:0 0 .85rem;
  color:var(--heading);
  line-height:1.12;
  letter-spacing:-0.03em;
}
h1{font-size:clamp(2.7rem, 5vw, 4.8rem)}
h2{font-size:clamp(2rem, 3vw, 3.2rem)}
h3{font-size:1.22rem}
ul{padding-left:1.15rem}
.container{
  width:min(var(--container), calc(100% - 2rem));
  margin-inline:auto;
}
.skip-link{
  position:absolute;
  left:-9999px;
  top:1rem;
  z-index:999;
  padding:.85rem 1rem;
  border-radius:999px;
  background:var(--deep);
  color:#fff;
  box-shadow:var(--shadow-md);
}
.skip-link:focus{left:1rem}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  margin-bottom:1rem;
  color:var(--primary);
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.eyebrow::before{
  content:"";
  width:12px;
  height:12px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
  box-shadow:0 0 0 6px rgba(124,58,237,.08);
}
.muted{color:var(--muted)}

.site-header{
  position:sticky;
  top:0;
  z-index:120;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(217,227,239,.8);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  min-height:92px;
}
.brand{
  display:flex;
  align-items:center;
  gap:.95rem;
}
.brand img{
  width:62px;
  height:62px;
  border-radius:20px;
  object-fit:cover;
  box-shadow:0 12px 26px rgba(106,27,154,.16);
}
.brand-copy{
  display:grid;
  gap:.15rem;
}
.brand-copy strong{
  color:var(--heading);
  font-size:1.02rem;
  font-weight:800;
}
.brand-copy span{
  color:var(--muted);
  font-size:.9rem;
}
.site-nav{
  display:flex;
  align-items:center;
  gap:1.2rem;
}
.site-nav ul{
  list-style:none;
  display:flex;
  align-items:center;
  gap:1.35rem;
  margin:0;
  padding:0;
}
.site-nav a{
  font-weight:700;
  color:#24324a;
  transition:color var(--transition);
}
.site-nav a:hover,
.site-nav a:focus-visible{
  color:var(--primary);
}
.nav-cta{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-left:1rem;
}
.nav-toggle{
  display:none;
  border:0;
  background:transparent;
  padding:.4rem;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:24px;
  height:2px;
  margin:5px 0;
  background:var(--heading);
  transition:transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:.95rem 1.35rem;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:800;
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition), color var(--transition);
}
.btn:hover,
.btn:focus-visible{
  transform:translateY(-2px);
}
.btn-primary{
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  color:#fff;
  box-shadow:0 18px 34px rgba(90,46,168,.2);
}
.btn-primary:hover,
.btn-primary:focus-visible{
  box-shadow:0 22px 40px rgba(90,46,168,.28);
}
.btn-outline{
  background:#fff;
  border-color:var(--line);
  color:var(--heading);
}
.btn-outline:hover,
.btn-outline:focus-visible{
  border-color:var(--primary);
  color:var(--primary);
}
.text-link{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  color:var(--primary);
  font-weight:800;
}
.text-link::after{
  content:"→";
  transition:transform var(--transition);
}
.text-link:hover::after,
.text-link:focus-visible::after{
  transform:translateX(3px);
}

.hero{
  position:relative;
  padding:5rem 0 4rem;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 10% 0%, rgba(124,58,237,.08), transparent 24%),
    radial-gradient(circle at 90% 20%, rgba(31,195,219,.10), transparent 22%),
    radial-gradient(circle at 85% 100%, rgba(141,198,63,.10), transparent 18%);
  pointer-events:none;
}
.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);
  gap:2.4rem;
  align-items:center;
}
.hero-copy p,
.page-hero p,
.compact-hero p{
  color:var(--muted);
  max-width:64ch;
  font-size:1.05rem;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.85rem;
  margin-top:1.7rem;
}
.hero-media{
  position:relative;
}
.hero-media::after{
  content:"";
  position:absolute;
  inset:auto 6% -18px 6%;
  height:38px;
  background:radial-gradient(ellipse at center, rgba(19,32,60,.16), transparent 70%);
  filter:blur(10px);
  z-index:-1;
}
.hero-media img{
  border-radius:34px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-lg);
}
.trust-points{
  display:flex;
  flex-wrap:wrap;
  gap:.85rem;
  list-style:none;
  padding:0;
  margin:1.8rem 0 0;
}
.trust-points li{
  padding:.8rem 1rem;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  font-weight:600;
}
.trust-points li::before{
  content:"";
  display:inline-block;
  width:10px;
  height:10px;
  margin-right:.55rem;
  border-radius:999px;
  background:linear-gradient(135deg, var(--primary), var(--accent));
}
.page-hero,
.compact-hero{
  padding:4.5rem 0 1.3rem;
}
.inner-hero{
  padding-top:4.4rem;
}
.service-hero .hero-copy p{
  max-width:70ch;
}

.section{
  padding:5rem 0;
}
.section-soft{
  background:
    linear-gradient(180deg, rgba(247,250,252,.8), rgba(247,250,252,.96)),
    radial-gradient(circle at top right, rgba(31,195,219,.06), transparent 24%);
}
.section-header{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:1rem;
  margin-bottom:2rem;
}
.section-header.single{
  margin-bottom:2.2rem;
}

.cards-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1.4rem;
}
.service-card{
  position:relative;
  background:linear-gradient(180deg, #ffffff, #fcfdff);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow-sm);
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.service-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
  border-color:var(--line-strong);
}
.service-card img{
  aspect-ratio:16/9;
  object-fit:cover;
  background:var(--bg-tint);
}
.service-card-body{
  display:grid;
  gap:.7rem;
  padding:1.5rem;
}
.service-card h3{
  margin-bottom:.2rem;
}
.service-card p{
  margin:0;
  color:var(--muted);
}

.split-grid{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(340px,.96fr);
  gap:1.6rem;
  align-items:center;
}
.align-start{align-items:start}
.feature-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1rem;
}
.feature-grid.wide{
  grid-template-columns:repeat(3, minmax(0,1fr));
}
.feature-card,
.info-card,
.side-card,
.contact-panel,
.enquiry-card,
.plan-card,
.faq-card,
.mini-card,
.timeline-item,
.faq-item{
  position:relative;
  background:linear-gradient(180deg, #ffffff, #fbfdff);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
}
.feature-card,
.info-card,
.side-card,
.contact-panel,
.enquiry-card,
.plan-card,
.faq-card,
.mini-card,
.faq-item{
  padding:1.4rem;
}
.feature-card::before,
.info-card::before,
.side-card::before,
.contact-panel::before,
.enquiry-card::before,
.plan-card::before,
.faq-card::before,
.mini-card::before,
.faq-item::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  opacity:.85;
}
.feature-card p,
.info-card p,
.side-card p,
.contact-panel p,
.enquiry-card p,
.plan-card p,
.faq-card p,
.mini-card p,
.faq-item p{
  color:var(--muted);
}
.highlight-card{
  background:
    radial-gradient(circle at top right, rgba(141,198,63,.08), transparent 26%),
    linear-gradient(180deg, #fff, #fbfcff);
}
.plan-spotlight{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:1.6rem;
  align-items:center;
}
.plan-copy p{color:var(--muted)}
.check-list{
  display:grid;
  gap:.8rem;
  margin:1.4rem 0 1.6rem;
}
.check-list p{
  margin:0;
  padding:1rem 1rem 1rem 3.15rem;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  position:relative;
}
.check-list p::before{
  content:"✓";
  position:absolute;
  left:1rem;
  top:50%;
  transform:translateY(-50%);
  width:1.55rem;
  height:1.55rem;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:.95rem;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg, var(--primary), var(--accent));
}
.stack-list{
  margin:0;
  padding-left:1.25rem;
}
.stack-list li + li{margin-top:.65rem}
.info-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1rem;
}
.contact-banner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1.5rem;
  padding:1.8rem;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:
    radial-gradient(circle at top right, rgba(31,195,219,.08), transparent 24%),
    linear-gradient(180deg, #ffffff, #fbfdff);
  box-shadow:var(--shadow-md);
}
.contact-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.85rem;
}
.contact-actions.stacked{
  flex-direction:column;
  align-items:flex-start;
}
.contact-list p{margin:.6rem 0}
.mini-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1rem;
}
.mini-card h3{margin-bottom:.35rem}
.timeline{
  display:grid;
  gap:1rem;
}
.timeline-item{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:1rem;
  align-items:start;
  padding:1rem;
}
.timeline-item span{
  width:64px;
  height:64px;
  border-radius:20px;
  display:grid;
  place-items:center;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  box-shadow:0 14px 28px rgba(106,27,154,.16);
}
.timeline-item p{margin:0;color:var(--muted)}
.faq-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1rem;
}
.faq-item h3{margin-bottom:.45rem}

.site-footer{
  padding:4rem 0 1.2rem;
  background:
    radial-gradient(circle at top left, rgba(124,58,237,.14), transparent 26%),
    linear-gradient(180deg, #101a2f, #121f38);
  color:#eef4fb;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:1.6rem;
}
.site-footer h3{
  color:#ffffff;
  margin-bottom:.7rem;
}
.site-footer p,
.site-footer li{
  color:rgba(238,244,251,.82);
  margin:.35rem 0;
}
.site-footer a:hover,
.site-footer a:focus-visible{
  color:#ffffff;
}
.footer-links{
  list-style:none;
  padding:0;
  margin:0;
}
.footer-links li + li{margin-top:.4rem}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:1.8rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.12);
}
.site-footer .muted{color:rgba(238,244,251,.68)}

@media (max-width: 1100px){
  .cards-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .feature-grid.wide{grid-template-columns:repeat(2, minmax(0,1fr))}
  .info-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .mini-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width: 900px){
  .nav-toggle{display:block}
  .site-nav{
    position:absolute;
    inset:92px 1rem auto 1rem;
    display:none;
    flex-direction:column;
    align-items:stretch;
    padding:1rem;
    background:#ffffff;
    border:1px solid var(--line);
    border-radius:24px;
    box-shadow:var(--shadow-md);
  }
  .site-nav.is-open{display:flex}
  .site-nav ul{
    flex-direction:column;
    align-items:flex-start;
    gap:1rem;
  }
  .nav-cta{
    margin-left:0;
    flex-direction:column;
  }
  .nav-cta .btn{width:100%}
  .hero-grid,
  .split-grid,
  .plan-spotlight,
  .footer-grid{
    grid-template-columns:1fr;
  }
  .contact-banner{
    flex-direction:column;
    align-items:flex-start;
  }
  .hero{padding-top:3.4rem}
}
@media (max-width: 640px){
  h1{font-size:clamp(2.3rem, 9vw, 3.4rem)}
  h2{font-size:clamp(1.75rem, 7vw, 2.45rem)}
  .container{width:min(var(--container), calc(100% - 1rem))}
  .header-inner{min-height:82px}
  .brand img{width:54px;height:54px}
  .brand-copy span{font-size:.8rem}
  .section{padding:3.6rem 0}
  .cards-grid,
  .feature-grid,
  .feature-grid.wide,
  .faq-grid,
  .info-grid,
  .mini-grid{grid-template-columns:1fr}
  .service-card-body,
  .feature-card,
  .info-card,
  .side-card,
  .contact-panel,
  .enquiry-card,
  .plan-card,
  .faq-card,
  .mini-card,
  .faq-item{padding:1.2rem}
  .timeline-item{grid-template-columns:54px 1fr}
  .timeline-item span{width:54px;height:54px;border-radius:16px}
  .trust-points li{width:100%}
}