:root {
  --ink: #171222;
  --muted: #6f6a78;
  --paper: #fbfafc;
  --panel: #ffffff;
  --line: #e8e3ec;
  --purple: #4f2198;
  --purple-2: #7b3fd1;
  --violet: #a685e8;
  --navy: #121021;
  --navy-2: #1b1630;
  --mint: #98f5df;
  --shadow: 0 20px 60px rgba(28, 18, 48, 0.11);
  --radius: 24px;
  --container: min(1180px, calc(100% - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
.container { width: var(--container); margin-inline: auto; }
.section { padding: 112px 0; }
.site-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: 84px;
  z-index: 50;
  transition: background .25s ease, box-shadow .25s ease, height .25s ease;
}
.site-header.scrolled {
  height: 72px;
  background: rgba(251, 250, 252, .92);
  backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(37, 25, 49, .09);
}
.nav-wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: flex; align-items: center; gap: 12px; position: relative; z-index: 2; }
.brand img { width: 44px; height: 48px; object-fit: contain; }
.brand-text { display: grid; line-height: 1.1; }
.brand-text strong { font-family: 'Space Grotesk', sans-serif; font-size: 18px; letter-spacing: -.02em; }
.brand-text small { margin-top: 5px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .15em; }
.site-header:not(.scrolled) .brand-text strong { color: #fff; }
.site-header:not(.scrolled) .brand-text small { color: rgba(255,255,255,.6); }
.site-header:not(.scrolled) .brand img { filter: brightness(0) invert(1); }
.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav a { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.78); transition: color .2s ease; }
.main-nav a:hover { color: #fff; }
.site-header.scrolled .main-nav a { color: #4f4858; }
.site-header.scrolled .main-nav a:hover { color: var(--purple); }
.main-nav .nav-cta {
  padding: 11px 18px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,.06);
}
.site-header.scrolled .main-nav .nav-cta { border-color: transparent; background: var(--purple); color: #fff; }
.menu-toggle { display: none; border: 0; background: transparent; padding: 8px; }
.menu-toggle span { display: block; width: 24px; height: 2px; margin: 5px; background: #fff; transition: transform .2s ease; }
.site-header.scrolled .menu-toggle span { background: var(--ink); }

.section-dark {
  background: radial-gradient(circle at 75% 20%, rgba(100, 59, 185, .2), transparent 35%), linear-gradient(145deg, #0c0a16 0%, #171025 60%, #110d1d 100%);
  color: #fff;
}
.hero { min-height: 780px; padding: 178px 0 50px; position: relative; overflow: hidden; }
.hero-grid {
  position: absolute; inset: 0; opacity: .12;
  background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, #000, transparent 86%);
}
.hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .24; }
.hero-glow-a { width: 370px; height: 370px; background: #804ed7; top: 80px; right: 5%; }
.hero-glow-b { width: 250px; height: 250px; background: #25d5be; bottom: 0; left: 5%; opacity: .09; }
.hero-layout { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: 80px; align-items: center; }
.eyebrow, .kicker { font-size: 12px; text-transform: uppercase; font-weight: 800; letter-spacing: .16em; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: #d7caef; }
.eyebrow span { width: 28px; height: 1px; background: var(--mint); }
.hero h1 { max-width: 760px; margin: 23px 0 24px; font-family: 'Space Grotesk', sans-serif; font-size: clamp(48px, 6.4vw, 82px); line-height: .97; letter-spacing: -.055em; }
.hero h1 em { color: #bba0ee; font-style: normal; }
.hero-lead { max-width: 680px; color: rgba(255,255,255,.68); font-size: 18px; line-height: 1.75; }
.hero-actions { display: flex; gap: 13px; margin-top: 36px; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; border-radius: 12px; border: 1px solid transparent; font-weight: 700; font-size: 14px; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: linear-gradient(135deg, #8453d8, #5e2aaf); color: #fff; box-shadow: 0 14px 32px rgba(103, 49, 183, .3); }
.button-ghost { border-color: rgba(255,255,255,.18); color: #fff; background: rgba(255,255,255,.04); }
.button-light { background: #fff; color: var(--purple); }
.button-white { background: #fff; color: #261637; }
.button-outline-white { border-color: rgba(255,255,255,.38); background: transparent; color: #fff; }
.trust-strip { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 46px; color: rgba(255,255,255,.48); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.trust-strip span { display: inline-flex; align-items: center; gap: 8px; }
.trust-strip span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #a88be0; }

.hero-visual { height: 480px; position: relative; }
.visual-orbit { position: absolute; border: 1px solid rgba(190, 164, 238, .18); border-radius: 50%; }
.orbit-one { width: 430px; height: 430px; right: 0; top: 15px; animation: spin 25s linear infinite; }
.orbit-two { width: 300px; height: 300px; right: 65px; top: 80px; border-style: dashed; animation: spin 18s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.system-card { position: absolute; border: 1px solid rgba(255,255,255,.13); background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.035)); backdrop-filter: blur(16px); box-shadow: 0 30px 70px rgba(0,0,0,.28); }
.system-card-main { width: 340px; height: 228px; right: 50px; top: 110px; padding: 25px; border-radius: 24px; transform: rotate(-3deg); }
.card-window-bar { display: flex; gap: 6px; margin-bottom: 26px; }
.card-window-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.3); }
.code-line { height: 9px; border-radius: 999px; margin-bottom: 10px; background: linear-gradient(90deg, #8e68d2, rgba(142,104,210,.15)); }
.code-line.wide { width: 86%; }
.code-line.medium { width: 63%; }
.code-line.short { width: 42%; }
.data-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.data-row div { padding: 12px 13px; border-radius: 12px; background: rgba(10,8,18,.28); display: grid; }
.data-row b { font-family: 'Space Grotesk'; font-size: 21px; color: #fff; }
.data-row span { font-size: 10px; color: rgba(255,255,255,.48); }
.system-card-small { width: 180px; padding: 18px; border-radius: 18px; display: grid; gap: 5px; }
.system-card-small strong { font-family: 'Space Grotesk'; font-size: 15px; }
.system-card-small small { color: rgba(255,255,255,.5); font-size: 10px; line-height: 1.45; }
.mini-icon { width: 36px; height: 36px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 10px; background: rgba(168, 139, 224, .16); color: #d4c2f4; font-size: 11px; font-weight: 800; }
.card-db { left: 8px; top: 64px; transform: rotate(5deg); animation: float 5s ease-in-out infinite; }
.card-web { right: 5px; bottom: 42px; transform: rotate(4deg); animation: float 6s ease-in-out infinite reverse; }
@keyframes float { 50% { transform: translateY(-10px) rotate(4deg); } }
.pulse-dot { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0 rgba(152,245,223,.4); animation: pulse 2.6s infinite; }
.pulse-a { top: 63px; right: 95px; }
.pulse-b { bottom: 86px; left: 92px; animation-delay: 1s; }
@keyframes pulse { 70% { box-shadow: 0 0 0 18px rgba(152,245,223,0); } 100% { box-shadow: 0 0 0 0 rgba(152,245,223,0); } }
.hero-foot { position: relative; z-index: 2; margin-top: 75px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.48); font-size: 13px; }
.hero-foot strong { color: rgba(255,255,255,.84); }

.kicker { display: inline-block; color: var(--purple); margin-bottom: 15px; }
.kicker-light { color: #cbb8ec; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 70px; margin-bottom: 48px; }
.section-heading h2, .strategy-copy h2, .about-panel h2, .faq-section h2, .contact-copy h2, dialog h2 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(38px, 4.7vw, 62px); line-height: 1.04; letter-spacing: -.045em; margin: 0; }
.section-heading > p { max-width: 460px; color: var(--muted); margin: 0 0 7px; }
.services-section { background: var(--paper); }
.service-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 30px; }
.service-filter { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 10px 16px; font-size: 13px; font-weight: 700; cursor: pointer; transition: .2s ease; }
.service-filter.active, .service-filter:hover { border-color: var(--purple); background: var(--purple); color: #fff; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.service-card { min-height: 318px; padding: 30px; background: #fff; border: 1px solid var(--line); border-radius: 20px; display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, opacity .25s ease; }
.service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(79,33,152,.2); }
.service-card.hidden { display: none; }
.service-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; margin-bottom: 28px; background: #f4effb; color: var(--purple); font-family: 'Space Grotesk'; font-size: 13px; font-weight: 700; }
.service-card h3 { font-family: 'Space Grotesk'; font-size: 21px; margin: 0 0 12px; }
.service-card p { color: var(--muted); font-size: 14px; margin: 0 0 22px; }
.text-link { margin-top: auto; padding: 0; border: 0; background: transparent; text-align: left; color: var(--purple); font-weight: 700; font-size: 13px; cursor: pointer; }
.text-link span { display: inline-block; transition: transform .2s ease; }
.text-link:hover span { transform: translateX(4px); }

.strategy-section { background: linear-gradient(135deg, #4f2198 0%, #31135f 100%); color: #fff; position: relative; overflow: hidden; }
.strategy-section::after { content: ''; position: absolute; width: 520px; height: 520px; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; right: -190px; top: -140px; }
.strategy-layout { position: relative; z-index: 2; display: grid; grid-template-columns: .8fr 1.2fr; gap: 110px; align-items: start; }
.strategy-copy p { color: rgba(255,255,255,.7); max-width: 510px; margin: 24px 0 32px; }
.process-list { display: grid; }
.process-list article { display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,.13); }
.process-list article:first-child { padding-top: 0; }
.process-list article > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); color: #d2c2ee; font-family: 'Space Grotesk'; font-size: 12px; }
.process-list h3 { margin: 0 0 5px; font-family: 'Space Grotesk'; font-size: 19px; }
.process-list p { margin: 0; color: rgba(255,255,255,.59); font-size: 13px; }

.experience-section { background: #f3f0f7; }
.logo-cloud { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid #dad4e1; border-left: 1px solid #dad4e1; }
.logo-cloud span { min-height: 108px; display: grid; place-items: center; text-align: center; padding: 18px; border-right: 1px solid #dad4e1; border-bottom: 1px solid #dad4e1; color: #514b58; font-family: 'Space Grotesk'; font-size: 15px; font-weight: 600; background: rgba(255,255,255,.42); transition: background .2s ease, color .2s ease; }
.logo-cloud span:hover { background: #fff; color: var(--purple); }
.experience-note { margin-top: 18px; color: #8b8591; font-size: 11px; }

.about-section { background: #fff; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: start; }
.about-panel p { color: var(--muted); max-width: 620px; }
.about-panel h2 { margin-bottom: 28px; }
.value-stack { display: grid; gap: 12px; }
.value-stack article { display: grid; grid-template-columns: 50px 1fr; gap: 18px; padding: 26px; border: 1px solid var(--line); border-radius: 18px; }
.value-mark { width: 45px; height: 45px; display: grid; place-items: center; background: var(--ink); color: #fff; border-radius: 13px; font-family: 'Space Grotesk'; }
.value-stack h3 { margin: 2px 0 5px; font-family: 'Space Grotesk'; font-size: 18px; }
.value-stack p { margin: 0; color: var(--muted); font-size: 13px; }

.faq-section { background: #faf8fb; border-top: 1px solid var(--line); }
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; }
.faq-intro { color: var(--muted); max-width: 470px; }
.accordion { border-top: 1px solid var(--line); }
.accordion-item { border-bottom: 1px solid var(--line); }
.accordion-item button { width: 100%; padding: 24px 0; display: flex; align-items: center; justify-content: space-between; border: 0; background: transparent; text-align: left; font-weight: 700; cursor: pointer; }
.accordion-item button b { font-size: 22px; font-weight: 400; color: var(--purple); }
.accordion-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.accordion-content p { overflow: hidden; color: var(--muted); font-size: 14px; margin: 0; }
.accordion-item.open .accordion-content { grid-template-rows: 1fr; }
.accordion-item.open .accordion-content p { padding-bottom: 24px; }

.contact-section { padding: 50px 0 90px; background: #faf8fb; }
.contact-card { min-height: 360px; padding: 58px; border-radius: 28px; display: flex; justify-content: space-between; align-items: center; gap: 50px; color: #fff; background: linear-gradient(135deg, #17101f 0%, #382061 100%); position: relative; overflow: hidden; box-shadow: 0 30px 90px rgba(34,20,49,.18); }
.contact-card::after { content: ''; position: absolute; width: 330px; height: 330px; right: -80px; bottom: -180px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 0 0 45px rgba(255,255,255,.03), 0 0 0 90px rgba(255,255,255,.02); }
.contact-copy { position: relative; z-index: 2; max-width: 690px; }
.contact-copy h2 { font-size: clamp(40px, 5vw, 64px); }
.contact-copy p { max-width: 600px; color: rgba(255,255,255,.62); }
.contact-actions { position: relative; z-index: 2; display: grid; gap: 11px; min-width: 210px; }

.site-footer { padding: 60px 0 26px; background: #0f0c15; color: #fff; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 60px; padding-bottom: 42px; }
.footer-brand img { filter: brightness(0) invert(1); }
.footer-brand .brand-text small { color: rgba(255,255,255,.4); }
.footer-grid > div { display: flex; flex-direction: column; gap: 8px; }
.footer-grid > div:first-child p { max-width: 380px; color: rgba(255,255,255,.44); font-size: 13px; }
.footer-grid > div:not(:first-child) strong { font-family: 'Space Grotesk'; margin-bottom: 7px; }
.footer-grid a, .footer-grid span { color: rgba(255,255,255,.48); font-size: 13px; }
.footer-grid a:hover { color: #fff; }
.footer-bottom { padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; gap: 20px; color: rgba(255,255,255,.3); font-size: 11px; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay { transition-delay: .12s; }

.service-modal, .consultation-modal { width: min(620px, calc(100% - 30px)); border: 0; border-radius: 24px; padding: 40px; box-shadow: 0 40px 110px rgba(15,8,24,.35); color: var(--ink); }
dialog::backdrop { background: rgba(12, 8, 18, .72); backdrop-filter: blur(8px); }
.modal-close { position: absolute; right: 18px; top: 16px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: #fff; font-size: 22px; cursor: pointer; }
dialog h2 { font-size: 38px; margin: 3px 0 14px; }
dialog > p { color: var(--muted); }
.modal-points { display: grid; gap: 10px; margin: 24px 0 30px; }
.modal-points span { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: #f6f2fa; font-size: 13px; }
.modal-points span::before { content: '✓'; color: var(--purple); font-weight: 800; }
.checklist { padding: 0; margin: 25px 0 30px; list-style: none; display: grid; gap: 10px; }
.checklist li { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; padding: 13px; border: 1px solid var(--line); border-radius: 13px; }
.checklist li > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: #f2ebf8; color: var(--purple); font-weight: 800; font-size: 12px; }
.checklist div { display: grid; }
.checklist small { color: var(--muted); margin-top: 2px; }

@media (max-width: 1000px) {
  .hero-layout, .strategy-layout, .about-grid, .faq-grid { grid-template-columns: 1fr; }
  .hero-visual { height: 400px; width: min(560px, 100%); margin-inline: auto; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .logo-cloud { grid-template-columns: repeat(3, 1fr); }
  .strategy-layout, .faq-grid { gap: 60px; }
  .contact-card { align-items: flex-start; flex-direction: column; }
  .contact-actions { display: flex; flex-wrap: wrap; }
}

@media (max-width: 780px) {
  :root { --container: min(100% - 28px, 1180px); }
  .section { padding: 82px 0; }
  .site-header { height: 72px; }
  .menu-toggle { display: block; position: relative; z-index: 3; }
  .main-nav { position: fixed; inset: 0; background: rgba(17,13,26,.98); display: flex; flex-direction: column; justify-content: center; gap: 26px; transform: translateY(-100%); transition: transform .28s ease; }
  .main-nav.open { transform: translateY(0); }
  .main-nav a, .site-header.scrolled .main-nav a { color: #fff; font-size: 18px; }
  .site-header.scrolled .menu-toggle.open span { background: #fff; }
  .site-header.scrolled .brand-text strong { color: var(--ink); }
  .site-header.scrolled .brand-text small { color: var(--muted); }
  .hero { padding-top: 145px; }
  .hero-layout { gap: 45px; }
  .hero h1 { font-size: clamp(46px, 13vw, 66px); }
  .hero-visual { height: 340px; }
  .system-card-main { width: 285px; height: 210px; right: 28px; top: 70px; }
  .card-db { left: 0; top: 20px; }
  .card-web { right: 0; bottom: 2px; }
  .orbit-one { width: 320px; height: 320px; }
  .orbit-two { width: 240px; height: 240px; }
  .hero-foot { margin-top: 50px; }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 20px; }
  .services-grid { grid-template-columns: 1fr; }
  .service-card { min-height: auto; }
  .logo-cloud { grid-template-columns: repeat(2, 1fr); }
  .contact-card { padding: 38px 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .brand-text small { display: none; }
  .hero-actions .button { width: 100%; }
  .trust-strip { gap: 12px; }
  .hero-visual { height: 300px; }
  .system-card-main { width: 245px; height: 190px; right: 12px; top: 60px; padding: 20px; }
  .system-card-small { width: 145px; padding: 13px; }
  .card-db { top: 4px; }
  .data-row { margin-top: 18px; }
  .orbit-one { width: 270px; height: 270px; }
  .orbit-two { width: 200px; height: 200px; right: 35px; }
  .section-heading h2, .strategy-copy h2, .about-panel h2, .faq-section h2 { font-size: 38px; }
  .logo-cloud { grid-template-columns: 1fr; }
  .contact-actions { display: grid; width: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > div:first-child { grid-column: auto; }
  .footer-bottom { flex-direction: column; }
  .service-modal, .consultation-modal { padding: 32px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Sattar Group 2026 business consulting refinements */
.brand-logo-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:48px; }
.brand-logo-card { min-height:118px; background:#fff; border:1px solid var(--line); border-radius:18px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:18px; text-align:center; box-shadow:0 8px 30px rgba(28,18,48,.045); }
.brand-logo-card img { width:46px; height:46px; object-fit:contain; border-radius:8px; }
.brand-logo-card span { font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:700; line-height:1.2; }
.contact-card-form { display:grid; grid-template-columns:.88fr 1.12fr; gap:50px; align-items:start; }
.contact-form-wrap { width:100%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); padding:28px; border-radius:20px; backdrop-filter:blur(10px); }
.contact-form { display:grid; gap:15px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.contact-form label { display:grid; gap:7px; color:rgba(255,255,255,.82); font-size:12px; font-weight:700; letter-spacing:.02em; }
.contact-form label span { color:#c7b0ef; }
.contact-form input, .contact-form textarea, .contact-form select { width:100%; border:1px solid rgba(255,255,255,.18); border-radius:11px; background:rgba(9,7,17,.42); color:#fff; padding:12px 13px; outline:none; transition:border .2s ease,background .2s ease; }
.contact-form select option { color:#171222; background:#fff; }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color:#b9a0e9; background:rgba(9,7,17,.62); }
.contact-form textarea { resize:vertical; min-height:128px; }
.form-submit { width:100%; margin-top:3px; }
.form-note { color:rgba(255,255,255,.56); }
.form-status { margin-bottom:14px; padding:12px 14px; border-radius:10px; font-size:13px; font-weight:700; }
.form-status.success { background:rgba(152,245,223,.14); border:1px solid rgba(152,245,223,.34); color:#d7fff5; }
.form-status.error { background:rgba(255,130,130,.12); border:1px solid rgba(255,130,130,.3); color:#ffe4e4; }
.contact-direct { margin-top:28px; display:grid; gap:4px; }
.contact-direct span { color:rgba(255,255,255,.58); font-size:12px; text-transform:uppercase; letter-spacing:.12em; font-weight:800; }
.contact-direct a { color:#fff; font-family:'Space Grotesk',sans-serif; font-size:24px; font-weight:700; }
.hp-field { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.logo-source-note { padding:0 0 26px; color:#77727e; }
.logo-source-note small { font-size:10px; line-height:1.5; }

@media (max-width:1000px) {
  .brand-logo-grid { grid-template-columns:repeat(3,1fr); }
  .contact-card-form { grid-template-columns:1fr; }
}
@media (max-width:780px) {
  .brand-logo-grid { grid-template-columns:repeat(2,1fr); }
  .form-row { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  .brand-logo-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .brand-logo-card { min-height:104px; padding:12px; }
  .brand-logo-card img { width:38px; height:38px; }
  .contact-form-wrap { padding:20px; }
}

/* Gutenberg editable-page adaptation for the original Sattar Group design */
.editable-homepage{overflow:hidden}.editable-homepage>.wp-block-group{margin-block-start:0}.editable-homepage :where(.wp-block-group,.wp-block-columns,.wp-block-column){box-sizing:border-box}.editable-homepage .wp-block-columns{margin-bottom:0}.editable-homepage p:first-child{margin-top:0}.editable-homepage p:last-child{margin-bottom:0}.sg-container{width:var(--container);margin-inline:auto!important}.sg-kicker{display:inline-block;color:var(--purple);margin:0 0 15px;font-size:12px;text-transform:uppercase;font-weight:800;letter-spacing:.16em}.sg-kicker-light{color:#cbb8ec}.sg-section-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(38px,4.7vw,62px)!important;line-height:1.04!important;letter-spacing:-.045em;margin:0!important}.sg-section-copy{color:var(--muted);margin:0 0 7px;font-size:16px;line-height:1.7}

/* Hero: same dark grid, glass cards and orbit feel as the earlier design */
.sg-hero{margin:0!important}.sg-hero::before{content:'';position:absolute;inset:0;opacity:.12;background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,#000,transparent 86%);pointer-events:none}.sg-hero::after{content:'';position:absolute;width:370px;height:370px;border-radius:50%;filter:blur(90px);opacity:.24;background:#804ed7;top:80px;right:5%;pointer-events:none}.sg-hero-grid{position:relative;z-index:2}.sg-hero-copy{position:relative;z-index:4}.sg-hero .sg-kicker{display:flex;align-items:center;gap:10px;color:#d7caef}.sg-hero .sg-kicker::before{content:'';width:28px;height:1px;background:var(--mint);flex:0 0 auto}.sg-hero-title{max-width:760px;margin:23px 0 24px!important;font-family:'Space Grotesk',sans-serif;font-size:clamp(48px,6.4vw,82px)!important;line-height:.97!important;letter-spacing:-.055em!important;color:#fff}.sg-hero-title em{color:#bba0ee;font-style:normal}.sg-hero-lead{max-width:680px;color:rgba(255,255,255,.68);font-size:18px;line-height:1.75}.sg-hero .wp-block-buttons{display:flex;gap:13px;margin-top:36px;flex-wrap:wrap}.sg-hero .wp-block-button__link,.sg-contact .wp-block-button__link,.sg-approach .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;border-radius:12px;font-weight:700;font-size:14px;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}.sg-hero .wp-block-button__link:hover,.sg-contact .wp-block-button__link:hover,.sg-approach .wp-block-button__link:hover{transform:translateY(-2px)}.sg-primary-button .wp-block-button__link{background:linear-gradient(135deg,#8453d8,#5e2aaf);color:#fff;box-shadow:0 14px 32px rgba(103,49,183,.3)}.sg-outline-button .wp-block-button__link{border:1px solid rgba(255,255,255,.18);color:#fff;background:rgba(255,255,255,.04)}.sg-white-button .wp-block-button__link{background:#fff;color:var(--purple)}.sg-trust{display:flex!important;flex-wrap:wrap;gap:20px;margin-top:46px;color:rgba(255,255,255,.48);font-size:12px;text-transform:uppercase;letter-spacing:.1em}.sg-trust p{display:inline-flex;align-items:center;gap:8px;margin:0}.sg-trust p::before{content:'';width:5px;height:5px;border-radius:50%;background:#a88be0}.sg-hero-foot{position:relative;z-index:2;margin-top:75px!important;padding-top:26px;border-top:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.48);font-size:13px}.sg-hero-foot p{margin:0}.sg-hero-foot strong{color:rgba(255,255,255,.84)}

/* Gutenberg-built version of the original floating system illustration */
.sg-stats{height:480px;position:relative!important;min-width:0}.sg-stats::before,.sg-stats::after{content:'';position:absolute;border:1px solid rgba(190,164,238,.18);border-radius:50%;pointer-events:none}.sg-stats::before{width:430px;height:430px;right:0;top:15px;animation:spin 25s linear infinite}.sg-stats::after{width:300px;height:300px;right:65px;top:80px;border-style:dashed;animation:spin 18s linear infinite reverse}.sg-system-main{width:340px!important;height:228px;right:50px!important;top:110px!important;padding:80px 25px 25px!important;z-index:3}.sg-system-main::before{content:'•••';position:absolute;left:25px;top:17px;color:rgba(255,255,255,.35);font-size:19px;letter-spacing:5px}.sg-system-main::after{content:'';position:absolute;left:25px;right:42px;top:61px;height:9px;border-radius:999px;background:linear-gradient(90deg,#8e68d2 0 86%,rgba(142,104,210,.15) 86%);box-shadow:0 19px 0 -1px rgba(142,104,210,.55),0 38px 0 -2px rgba(142,104,210,.32)}.sg-data-row{display:grid!important;grid-template-columns:1fr 1fr;gap:12px;margin-top:25px}.sg-metric{padding:12px 13px!important;border-radius:12px;background:rgba(10,8,18,.28)}.sg-metric h3{margin:0!important;font-family:'Space Grotesk';font-size:21px!important;line-height:1;color:#fff}.sg-metric p{margin:5px 0 0!important;font-size:10px;color:rgba(255,255,255,.48);text-transform:lowercase}.sg-system-small{z-index:4}.sg-system-small .sg-mini-icon{width:36px;height:36px;display:grid;place-items:center;margin:0 0 8px;border-radius:10px;background:rgba(168,139,224,.16);color:#d4c2f4;font-size:11px;font-weight:800}.sg-system-small h3{margin:0!important;font-family:'Space Grotesk';font-size:15px!important;color:#fff}.sg-system-small>p:last-child{margin:3px 0 0!important;color:rgba(255,255,255,.5);font-size:10px;line-height:1.45}.sg-system-web{left:8px!important;top:64px!important}.sg-system-marketing{right:5px!important;bottom:42px!important;left:auto!important;top:auto!important}

/* Services */
.sg-services{margin:0!important}.sg-heading-row{display:flex!important;justify-content:space-between;align-items:end;gap:70px;margin-bottom:48px}.sg-heading-row>div:first-child{flex:1}.sg-heading-row>.sg-section-copy{max-width:460px;flex:0 0 460px}.sg-service-row{display:grid!important;grid-template-columns:repeat(3,1fr);gap:18px!important;margin-bottom:18px!important}.sg-service-row>.wp-block-column{min-width:0}.sg-service-card{height:100%;min-height:270px;padding:30px!important;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 10px 35px rgba(27,17,44,.04);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;position:relative;overflow:hidden}.sg-service-card::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#7c49c5,#9b79dd);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}.sg-service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:#d9cce9}.sg-service-card:hover::after{transform:scaleX(1)}.sg-service-number{width:43px;height:43px;display:grid;place-items:center;margin:0 0 36px!important;border-radius:12px;background:#f2ecf8;color:var(--purple);font-size:11px;font-weight:800}.sg-service-card h3{font-family:'Space Grotesk';font-size:23px!important;line-height:1.15;margin:0 0 13px!important}.sg-service-card>p:last-child{color:var(--muted);font-size:14px;line-height:1.65;margin:0}

/* Approach: mirror the original purple split section */
.sg-approach{margin:0!important}.sg-approach-grid{display:grid!important;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}.sg-approach .sg-section-title{color:#fff}.sg-approach .sg-section-copy{color:rgba(255,255,255,.7);font-size:16px;line-height:1.75;margin-top:22px}.sg-approach .wp-block-buttons{margin-top:28px}.sg-process-list{display:grid!important;gap:0}.sg-process-card{display:grid!important;grid-template-columns:1fr;padding:22px 0!important;border-bottom:1px solid rgba(255,255,255,.14);background:transparent!important}.sg-process-card:first-child{border-top:1px solid rgba(255,255,255,.14)}.sg-process-number{margin:0 0 7px!important;color:#c9b7eb;font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:800}.sg-process-card h3{margin:0 0 4px!important;color:#fff;font-family:'Space Grotesk';font-size:20px!important}.sg-process-card>p:last-child{margin:0;color:rgba(255,255,255,.55);font-size:13px}

/* Experience */
.sg-experience{margin:0!important}.sg-brand-row{display:grid!important;grid-template-columns:repeat(5,1fr);gap:14px!important;margin-bottom:14px!important}.sg-brand-row>.wp-block-column{min-width:0}.sg-brand-card{min-height:118px;height:100%;background:#fff;border:1px solid var(--line);border-radius:18px;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px!important;text-align:center;box-shadow:0 8px 30px rgba(28,18,48,.045);transition:transform .2s ease,box-shadow .2s ease}.sg-brand-card:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(28,18,48,.08)}.sg-brand-card .wp-block-image{margin:0}.sg-brand-card img{width:46px;height:46px;object-fit:contain;border-radius:8px}.sg-brand-card p{margin:0!important;font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;line-height:1.2}.sg-experience-note{margin-top:20px;color:#77727e;font-size:11px;line-height:1.5}

/* About: original two-column panel with A/B/C markers */
.sg-about{margin:0!important}.sg-about-grid{display:grid!important;grid-template-columns:1.03fr .97fr;gap:80px;align-items:start}.about-panel{padding-right:10px}.about-panel .sg-section-copy{font-size:16px;line-height:1.75;margin-top:20px}.sg-value-stack{display:grid!important;gap:14px;counter-reset:sgvalue}.sg-value-card{counter-increment:sgvalue;position:relative;padding:24px 24px 24px 82px!important;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 8px 26px rgba(28,18,48,.04)}.sg-value-card::before{content:counter(sgvalue, upper-alpha);position:absolute;left:22px;top:22px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#efe8f6;color:var(--purple);font-family:'Space Grotesk';font-weight:800}.sg-value-card h3{margin:0 0 7px!important;font-family:'Space Grotesk';font-size:20px!important}.sg-value-card p{margin:0!important;color:var(--muted);font-size:14px}

/* FAQ using native editable Details blocks */
.sg-faq{margin:0!important}.sg-faq-grid{display:grid!important;grid-template-columns:.82fr 1.18fr;gap:80px;align-items:start}.sg-faq .sg-section-copy{margin-top:22px}.sg-faq .wp-block-details{margin:0;border-bottom:1px solid var(--line);background:transparent;padding:0}.sg-faq .wp-block-details:first-child{border-top:1px solid var(--line)}.sg-faq .wp-block-details summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;font-family:'Space Grotesk';font-size:17px;font-weight:700}.sg-faq .wp-block-details summary::-webkit-details-marker{display:none}.sg-faq .wp-block-details summary::after{content:'+';position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:24px;font-weight:400;color:var(--purple)}.sg-faq .wp-block-details[open] summary::after{content:'−'}.sg-faq .wp-block-details p{padding:0 40px 22px 0;margin:0;color:var(--muted);font-size:14px;line-height:1.7}

/* Contact: original dark call-to-action card, without the removed form */
.sg-contact{position:relative;margin:0!important;padding:105px 0;background:#15101f;color:#fff;overflow:hidden}.sg-contact::before{content:'';position:absolute;width:480px;height:480px;border-radius:50%;background:#7844c8;filter:blur(115px);opacity:.25;right:-80px;top:-190px}.sg-contact-grid{position:relative;z-index:2;display:grid!important;grid-template-columns:1fr auto;gap:70px;align-items:center;padding:48px 54px!important;border:1px solid rgba(255,255,255,.12);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));box-shadow:0 35px 90px rgba(0,0,0,.25)}.sg-contact .sg-section-title{color:#fff;max-width:760px}.sg-contact p{max-width:760px;color:rgba(255,255,255,.58);font-size:15px;line-height:1.75}.sg-contact .wp-block-buttons{display:grid;gap:11px;min-width:210px}.sg-contact .sg-white-button .wp-block-button__link{background:#fff;color:#261637}.sg-contact .sg-outline-button .wp-block-button__link{border-color:rgba(255,255,255,.38);background:transparent;color:#fff}

@media(max-width:1000px){.sg-hero-grid,.sg-approach-grid,.sg-about-grid,.sg-faq-grid{grid-template-columns:1fr}.sg-heading-row{display:block!important}.sg-heading-row>.sg-section-copy{max-width:540px;margin-top:20px}.sg-service-row{grid-template-columns:repeat(2,1fr)}.sg-brand-row{grid-template-columns:repeat(3,1fr)}.sg-stats{width:min(560px,100%);margin-inline:auto}.sg-contact-grid{grid-template-columns:1fr;gap:34px}.sg-contact .wp-block-buttons{display:flex;flex-wrap:wrap;min-width:0}}
@media(max-width:780px){.sg-hero{min-height:auto;padding:145px 0 54px}.sg-hero-title{font-size:clamp(44px,12vw,64px)!important}.sg-stats{height:380px}.sg-system-main{width:300px!important;height:215px;right:35px!important;top:95px!important}.sg-stats::before{width:340px;height:340px}.sg-stats::after{width:240px;height:240px}.sg-service-row{grid-template-columns:1fr}.sg-brand-row{grid-template-columns:repeat(2,1fr)}.sg-hero-foot{margin-top:50px!important}.sg-contact{padding:78px 0}.sg-contact-grid{padding:38px 28px!important}.sg-contact .wp-block-buttons{display:grid;width:100%}.sg-contact .wp-block-button__link{width:100%}.sg-about-grid,.sg-faq-grid,.sg-approach-grid{gap:55px}}
@media(max-width:520px){.sg-hero .wp-block-button{width:100%}.sg-hero .wp-block-button__link{width:100%}.sg-trust{gap:12px}.sg-stats{height:310px}.sg-system-main{width:245px!important;height:190px;right:12px!important;top:62px!important;padding:73px 18px 18px!important}.sg-system-main::before{left:18px}.sg-system-main::after{left:18px;right:25px}.sg-system-small{width:145px!important;padding:13px!important}.sg-system-web{top:4px!important}.sg-stats::before{width:270px;height:270px}.sg-stats::after{width:200px;height:200px;right:35px}.sg-data-row{margin-top:19px}.sg-metric{padding:9px!important}.sg-metric h3{font-size:18px!important}.sg-section-title{font-size:38px!important}.sg-brand-row{grid-template-columns:1fr 1fr;gap:10px!important}.sg-brand-card{min-height:104px;padding:12px!important}.sg-brand-card img{width:38px;height:38px}.sg-value-card{padding-left:72px!important}}

/* Hero balance fix: prevent the legacy .hero-grid decorative rule from fading the editable Gutenberg hero container. */
@media (min-width:1001px){
  .editable-homepage .sg-hero-grid{
    position:relative!important;
    inset:auto!important;
    opacity:1!important;
    background:none!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
    display:grid!important;
    grid-template-columns:minmax(0,1.08fr) minmax(470px,.92fr)!important;
    gap:46px!important;
    align-items:center!important;
  }
  .editable-homepage .sg-stats{
    width:100%!important;
    min-width:470px;
    height:520px;
    margin:0!important;
    border-radius:38px;
    background:radial-gradient(circle at 58% 45%,rgba(126,76,211,.17),rgba(126,76,211,.035) 44%,transparent 70%);
  }
  .editable-homepage .sg-stats::before{
    width:470px;
    height:470px;
    right:-8px;
    top:20px;
    border-color:rgba(205,181,247,.25);
  }
  .editable-homepage .sg-stats::after{
    width:326px;
    height:326px;
    right:64px;
    top:92px;
    border-color:rgba(205,181,247,.23);
  }
  .editable-homepage .sg-system-main{
    width:372px!important;
    height:242px;
    right:34px!important;
    top:126px!important;
    background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
    border-color:rgba(255,255,255,.19);
    box-shadow:0 34px 85px rgba(0,0,0,.34),0 0 55px rgba(125,76,208,.10);
  }
  .editable-homepage .sg-system-small{
    width:190px;
    background:linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.045));
    border-color:rgba(255,255,255,.18);
    box-shadow:0 24px 55px rgba(0,0,0,.28);
  }
  .editable-homepage .sg-system-web{left:0!important;top:57px!important;}
  .editable-homepage .sg-system-marketing{right:-2px!important;bottom:42px!important;}
}

/* Keep the same correction when the hero stacks on tablets. */
@media (max-width:1000px){
  .editable-homepage .sg-hero-grid{
    position:relative!important;
    inset:auto!important;
    opacity:1!important;
    background:none!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
}