:root{
  --ink:#0f172a; --muted:#64748b; --blue:#2563eb; --purple:#7c3aed;
  --card:rgba(255,255,255,.80); --line:rgba(37,99,235,.14);
  --shadow:0 24px 70px rgba(15,23,42,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:Inter,Arial,sans-serif; color:var(--ink);
  background:radial-gradient(circle at 90% 12%,rgba(124,58,237,.23),transparent 28%),
             radial-gradient(circle at 8% 22%,rgba(37,99,235,.16),transparent 25%),
             radial-gradient(circle at 86% 72%,rgba(124,58,237,.18),transparent 25%),
             linear-gradient(135deg,#fff 0%,#f7fbff 45%,#f1f4ff 100%);
}
a{text-decoration:none;color:inherit}
.container{width:min(1180px,calc(100% - 40px));margin:auto}
.site-header{
  position:sticky; top:16px; z-index:50; width:min(1260px,calc(100% - 32px));
  margin:16px auto 0; padding:16px 28px; border-radius:28px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(255,255,255,.78); backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.85); box-shadow:0 16px 50px rgba(15,23,42,.09);
}
.brand{display:flex;align-items:center}
.real-logo{height:54px;width:auto;max-width:220px;object-fit:contain;display:block}
.nav{display:flex;align-items:center;gap:28px;font-weight:800;color:#1e293b}
.nav a:hover{color:var(--blue)}
.cta{padding:14px 22px;border-radius:18px;color:#fff!important;background:linear-gradient(135deg,var(--blue),var(--purple));box-shadow:0 14px 34px rgba(124,58,237,.28)}
.mobile-toggle{display:none;border:0;background:#fff;border-radius:12px;padding:10px;font-size:20px}
.nav-item{
  position:relative;
  padding:22px 0;
  margin:-22px 0;
}
.nav-item > a{
  display:inline-flex;
  align-items:center;
}
.nav-item::after{
  content:"";
  position:absolute;
  left:-30px;
  right:-30px;
  top:100%;
  height:22px;
}
.dropdown{
  position:absolute;
  top:calc(100% + 12px);
  left:50%;
  transform:translateX(-50%) translateY(10px);
  width:min(860px, calc(100vw - 80px));
  max-height:calc(100vh - 150px);
  overflow-y:auto;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  padding:18px;
  border-radius:24px;
  background:rgba(255,255,255,.98);
  border:1px solid rgba(37,99,235,.12);
  box-shadow:0 30px 90px rgba(15,23,42,.18);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:.2s;
  z-index:9999;
}
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.drop-link{
  display:flex;
  gap:12px;
  padding:12px;
  border-radius:16px;
  min-height:82px;
}
.drop-link:hover{background:#f4f7ff}
.drop-icon{
  width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(124,58,237,.12));
  color:var(--blue);
  flex:0 0 auto;
}
.drop-link b{display:block;color:#0f172a}
.drop-link small{
  display:block;
  color:#64748b;
  font-weight:600;
  line-height:1.35;
  margin-top:3px;
}
.hero{padding:100px 0 64px;text-align:center}
.badge{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;background:rgba(255,255,255,.74);border:1px solid var(--line);box-shadow:0 14px 40px rgba(15,23,42,.06);color:#1455d9;font-weight:900}
.icon{width:24px;height:24px}
.hero h1{font-size:clamp(44px,7vw,84px);line-height:1.05;letter-spacing:-4px;margin:28px auto 18px;max-width:1050px}
.gradient-text{background:linear-gradient(135deg,#2563eb,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{max-width:780px;margin:0 auto;color:#475569;font-size:21px;line-height:1.7}
.actions{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 24px;border-radius:18px;font-weight:900;border:1px solid var(--line)}
.btn.primary{background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;box-shadow:0 18px 42px rgba(37,99,235,.24)}
.btn.secondary{background:rgba(255,255,255,.72);color:#1455d9}
.trust{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;margin-top:30px;color:#64748b;font-weight:800}
.trust span:before{content:"✓";color:var(--purple);font-weight:900;margin-right:8px}
.section{padding:70px 0}
.section-title{font-size:42px;letter-spacing:-2px;margin:0 0 14px}
.section-lead{color:var(--muted);font-size:18px;max-width:760px;line-height:1.7;margin:0 0 34px}
.grid{display:grid;gap:22px}
.service-grid{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border:1px solid rgba(255,255,255,.85);border-radius:28px;padding:28px;box-shadow:var(--shadow);transition:.25s;position:relative;overflow:hidden}
.card:before{content:"";position:absolute;inset:-60px -80px auto auto;width:150px;height:150px;background:radial-gradient(circle,rgba(124,58,237,.16),transparent 70%)}
.card:hover{transform:translateY(-6px);box-shadow:0 30px 80px rgba(15,23,42,.15)}
.icon-wrap{width:58px;height:58px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(124,58,237,.12));color:var(--blue);margin-bottom:18px}
.card h3{margin:0 0 10px;font-size:22px}
.card p{color:#52627a;line-height:1.65;margin:0 0 18px}
.card-link{font-weight:900;color:#2563eb}
.arch-panel{margin-top:32px;background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.85);box-shadow:var(--shadow);border-radius:34px;padding:20px;overflow:hidden}
.arch-svg{width:100%;height:auto;display:block}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center}
.tech-pills{display:flex;flex-wrap:wrap;gap:12px}
.pill{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid var(--line);font-weight:800;color:#334155}
.page-hero{padding:76px 0 42px}
.page-hero h1{font-size:clamp(44px,6vw,76px);letter-spacing:-3px;line-height:1.05;margin:18px 0}
.page-hero p{font-size:20px;line-height:1.7;color:#475569;max-width:820px}
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:28px}
.kpi{background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:24px;padding:20px;font-weight:900}
.kpi small{display:block;color:#64748b;font-weight:700;margin-top:6px}
.info-grid{grid-template-columns:repeat(3,1fr)}
.list-card h2{font-size:22px}
.list-card ul{padding-left:20px;color:#475569;line-height:1.8}
.outcome-grid{grid-template-columns:repeat(4,1fr)}
.outcome{padding:22px;border-radius:24px;background:rgba(255,255,255,.72);border:1px solid var(--line);font-weight:900}
.footer{margin-top:70px;padding:48px 0;background:#0f172a;color:white}
.footer-inner{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footer p{color:#cbd5e1;max-width:540px;line-height:1.7}
.footer a{color:#cbd5e1;margin-right:18px}
@media(max-width:1000px){.dropdown{width:620px;grid-template-columns:1fr}.service-grid,.info-grid,.outcome-grid,.split,.kpi-row{grid-template-columns:1fr}}
@media(max-width:900px){
  .site-header{top:8px;border-radius:22px}.real-logo{height:42px;max-width:170px}
  .nav{display:none}.mobile-toggle{display:block}.hero{padding-top:72px}.hero h1{letter-spacing:-2px}
  .dropdown{
    position:static;
    transform:none;
    width:auto;
    max-height:none;
    overflow:visible;
    box-shadow:none;
    opacity:1;
    visibility:visible;
    display:grid;
    margin-top:10px;
  }
}
/* Case Studies Page */
.case-stack{display:grid;gap:34px}
.case-card{background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.88);border-radius:34px;padding:32px;box-shadow:0 24px 70px rgba(15,23,42,.10);overflow:hidden}
.case-header{max-width:980px;margin-bottom:24px}
.case-tag{display:inline-flex;padding:9px 14px;border-radius:999px;background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(124,58,237,.10));border:1px solid rgba(37,99,235,.16);color:#1455d9;font-weight:900;margin-bottom:12px}
.case-header h2{font-size:32px;letter-spacing:-1px;margin:0 0 12px}
.case-header p{color:#52627a;font-size:18px;line-height:1.65;margin:0}
.case-layout{display:grid;grid-template-columns:.95fr 1.05fr;gap:28px;align-items:start}
.case-layout h3{margin:18px 0 10px;font-size:20px}
.case-layout ul{margin:0;padding-left:20px;color:#475569;line-height:1.75}
.mini-arch{background:rgba(255,255,255,.66);border:1px solid rgba(37,99,235,.12);border-radius:28px;padding:20px}
.visual-flow{min-height:210px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;padding:22px;border-radius:22px;background:radial-gradient(circle at 80% 20%,rgba(124,58,237,.12),transparent 35%),linear-gradient(135deg,#fff,#f7fbff)}
.visual-flow span{display:inline-flex;align-items:center;justify-content:center;min-width:120px;min-height:58px;text-align:center;border-radius:18px;background:#fff;border:1px solid rgba(37,99,235,.16);box-shadow:0 14px 34px rgba(15,23,42,.08);font-weight:900;color:#0f172a;padding:10px}
.visual-flow b{font-size:24px;color:#2563eb}
@media(max-width:1000px){.case-layout{grid-template-columns:1fr}}


/* CONTACT PAGE */

.contact-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:28px;
  align-items:start;
}

.contact-card{
  background:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.88);
  border-radius:34px;
  padding:34px;
  box-shadow:0 24px 70px rgba(15,23,42,.10);
}

.contact-card h2{
  margin-top:0;
  font-size:34px;
  letter-spacing:-1px;
}

.contact-lead{
  color:#52627a;
  line-height:1.7;
  margin-bottom:28px;
}

.contact-form{
  display:grid;
  gap:22px;
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.field{
  display:grid;
  gap:10px;
}

.field label{
  font-weight:800;
  color:#0f172a;
}

.field input,
.field textarea,
.field select{
  width:100%;
  border:none;
  outline:none;
  padding:16px 18px;
  border-radius:18px;
  background:#f8fbff;
  border:1px solid rgba(37,99,235,.10);
  font-size:15px;
  color:#0f172a;
}

.field textarea{
  resize:vertical;
}

.submit-btn{
  border:none;
  cursor:pointer;
}

.contact-side{
  display:grid;
  gap:22px;
}

.info-panel{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.88);
  border-radius:28px;
  padding:28px;
  box-shadow:0 24px 70px rgba(15,23,42,.08);
}

.info-panel h3{
  margin-top:0;
  margin-bottom:18px;
  font-size:24px;
}

.info-list{
  padding-left:18px;
  color:#475569;
  line-height:1.9;
}

@media(max-width:1000px){

  .contact-grid{
    grid-template-columns:1fr;
  }

  .form-row{
    grid-template-columns:1fr;
  }

}


/* ABOUT PAGE EXPANSION */

.about-steps{
  display:grid;
  gap:16px;
  margin-top:28px;
}

.about-steps div{
  display:grid;
  grid-template-columns:62px 130px 1fr;
  gap:16px;
  align-items:start;
  padding:18px;
  border-radius:22px;
  background:rgba(255,255,255,.74);
  border:1px solid rgba(37,99,235,.12);
  box-shadow:0 14px 34px rgba(15,23,42,.06);
}

.about-steps b{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:16px;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  color:#fff;
}

.about-steps span{
  font-weight:900;
  color:#0f172a;
  padding-top:10px;
}

.about-steps p{
  margin:0;
  color:#52627a;
  line-height:1.6;
}

.vertical-flow{
  flex-direction:column;
  min-height:520px;
}

.tech-group-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
}

.about-cta{
  text-align:center;
}

.about-cta h2{
  font-size:36px;
  letter-spacing:-1px;
  margin-top:0;
}

.about-cta p{
  max-width:820px;
  margin:0 auto;
  color:#52627a;
  line-height:1.75;
}

@media(max-width:1000px){
  .tech-group-grid{
    grid-template-columns:1fr;
  }

  .about-steps div{
    grid-template-columns:1fr;
  }

  .vertical-flow{
    min-height:auto;
  }
}


/* Quadix refinements: vertical service dropdown and unique service icons */
.dropdown.dropdown-vertical{
  width: 430px;
  max-width: 430px;
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 12px;
  padding: 22px;
  left: 50%;
  transform: translateX(-50%);
}
.dropdown.dropdown-vertical .drop-link{
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
}
.dropdown.dropdown-vertical .drop-link small{
  display: block;
  line-height: 1.45;
  margin-top: 5px;
}
.drop-icon,.icon-wrap{
  color:#2563eb;
}
.drop-icon svg,.icon-wrap svg,.badge svg{
  width: 26px;
  height: 26px;
}
.icon-wrap svg{
  width: 30px;
  height: 30px;
}
@media(max-width: 900px){
  .dropdown.dropdown-vertical{
    width: 100%;
    max-width: 100%;
    left: auto;
    transform: none;
  }
}


/* Mobile/tablet navigation fix */
@media (max-width: 900px) {
  body {
    overflow-x: hidden;
  }

  .site-header {
    width: calc(100% - 32px);
    margin: 16px auto;
    padding: 14px 18px;
    border-radius: 24px;
    position: sticky;
    top: 12px;
    z-index: 9999;
  }

  .real-logo {
    max-width: 165px;
    height: auto;
  }

  .mobile-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
    font-size: 26px;
    line-height: 1;
    color: #0f172a;
    cursor: pointer;
  }

  .nav {
    display: none !important;
    position: absolute;
    left: 16px;
    right: 16px;
    top: calc(100% + 10px);
    background: #ffffff;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 24px;
    padding: 18px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.14);
    max-height: calc(100vh - 130px);
    overflow-y: auto;
  }

  .nav.open,
  .site-header.nav-open .nav {
    display: block !important;
  }

  .nav > a,
  .nav > .nav-item > a {
    display: block;
    padding: 14px 12px;
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    text-decoration: none;
    border-radius: 14px;
  }

  .nav > a:hover,
  .nav > .nav-item > a:hover {
    background: #f8fafc;
  }

  .nav-cta {
    margin-top: 10px;
    text-align: center;
    background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
    color: #ffffff !important;
    border-radius: 16px !important;
  }

  .nav-item {
    position: static;
  }

  .nav-item > a::after {
    content: " ▾";
    font-size: 14px;
  }

  .dropdown,
  .dropdown.dropdown-vertical {
    display: block !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 6px 0 10px 0 !important;
    padding: 8px !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #f8fafc !important;
    border-radius: 18px !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .dropdown .drop-link,
  .dropdown.dropdown-vertical .drop-link {
    display: grid !important;
    grid-template-columns: 38px 1fr !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 12px !important;
    border-radius: 14px !important;
    background: transparent !important;
    text-decoration: none !important;
  }

  .dropdown .drop-link:hover {
    background: #ffffff !important;
  }

  .drop-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: #eef2ff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .drop-icon svg {
    width: 21px !important;
    height: 21px !important;
  }

  .drop-link b {
    display: block;
    font-size: 15.5px;
    line-height: 1.25;
    color: #0f172a;
  }

  .drop-link small {
    display: none !important;
  }

  .hero {
    padding-top: 52px;
  }

  .hero h1 {
    font-size: clamp(40px, 10vw, 58px);
    line-height: 1.08;
  }

  .section-title {
    font-size: clamp(34px, 8vw, 48px);
  }

  .card,
  .premium-card,
  .about-card,
  .contact-card,
  .case-card {
    padding: 28px !important;
  }
}

@media (min-width: 901px) {
  .mobile-toggle {
    display: none !important;
  }
}


/* Footer and policy pages */
.site-footer{
  background:#0f172a;
  color:#ffffff;
  padding:70px 0 28px;
  margin-top:80px;
}
.footer-container{
  width:90%;
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.4fr 1fr 1.3fr 1fr;
  gap:34px;
}
.footer-brand h3{
  font-size:28px;
  margin:0 0 14px;
}
.footer-brand p,
.footer-note{
  color:#cbd5e1;
  line-height:1.75;
}
.footer-links h4{
  font-size:18px;
  margin:0 0 16px;
  color:#ffffff;
}
.footer-links a{
  display:block;
  color:#cbd5e1;
  text-decoration:none;
  margin:10px 0;
  line-height:1.45;
}
.footer-links a:hover{
  color:#ffffff;
}
.footer-bottom{
  width:90%;
  max-width:1200px;
  margin:45px auto 0;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.12);
  text-align:center;
  color:#cbd5e1;
}
.footer-bottom a{
  color:#93c5fd;
  text-decoration:none;
  margin:0 8px;
}
.footer-bottom span{
  color:#64748b;
}
.policy-content{
  background:#ffffff;
  border-radius:30px;
  padding:46px;
  box-shadow:0 14px 45px rgba(15,23,42,.07);
  border:1px solid rgba(37,99,235,.08);
}
.policy-content h2{
  margin-top:34px;
  font-size:28px;
}
.policy-content h2:first-child{
  margin-top:0;
}
.policy-content p,
.policy-content li{
  color:#475569;
  line-height:1.85;
  font-size:17px;
}
.policy-content ul{
  padding-left:22px;
}
.policy-meta{
  color:#64748b;
  margin-top:12px;
}
@media(max-width:900px){
  .footer-container{
    grid-template-columns:1fr;
  }
  .site-footer{
    padding:50px 0 24px;
  }
  .policy-content{
    padding:28px;
  }
  .footer-bottom a{
    display:inline-block;
    margin:6px 8px;
  }
}
/* Homepage problem cards with unique icons */

.problem-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:30px;
}

.problem-card{
  background:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.88);
  border-radius:34px;
  padding:38px;
  box-shadow:0 24px 70px rgba(15,23,42,.10);
  transition:.25s ease;
}

.problem-card:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 80px rgba(15,23,42,.15);
}

.problem-card h3{
  margin:0 0 18px;
  font-size:24px;
  line-height:1.3;
}

.problem-card p{
  color:#52627a;
  line-height:1.8;
  font-size:17px;
}

.problem-icon{
  width:76px;
  height:76px;
  border-radius:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:24px;
  background:linear-gradient(
    135deg,
    rgba(37,99,235,.12),
    rgba(124,58,237,.12)
  );
  color:#2563eb;
}

.problem-icon svg{
  width:34px;
  height:34px;
  stroke:#2563eb;
}

/* Force homepage problem icons to stay small after deployment */
.problem-icon{
  width:76px !important;
  height:76px !important;
  min-width:76px !important;
  min-height:76px !important;
  max-width:76px !important;
  max-height:76px !important;
  overflow:hidden !important;
}

.problem-icon svg{
  width:34px !important;
  height:34px !important;
  max-width:34px !important;
  max-height:34px !important;
  display:block !important;
}

/* Mobile Safari service-link click fix */
@media (max-width: 900px) {
  .dropdown .drop-link,
  .dropdown.dropdown-vertical .drop-link {
    position: relative !important;
    z-index: 10001 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: rgba(37,99,235,.15);
  }

  .dropdown .drop-link * {
    pointer-events: none !important;
  }
}