:root{
  --fixed-width:1100px;
  --muted:#6b7280;
  --accent1:#f0b63a;
  --accent2:#39a0b4;
  --accent3:#7c4dff;
  --radius:12px;
  --sans: "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:var(--sans);background:linear-gradient(180deg,#fefcf9 0%,#f1efe4 40%,#eaf4f9 100%);color:#081226}

/* large decorative background (SVG waves) fixed and covers viewport; body gradient ensures color beyond viewport */
.bg-abstract-card{
  position:fixed;
  inset:0;
  z-index:-200;
  pointer-events:none;
}
.bg-abstract-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="2000" height="1200" viewBox="0 0 800 600"><rect width="800" height="600" fill="%23f5f3e7"/><path fill="%23f1c232" d="M0,400 Q200,300 400,400 T800,400 L800,600 L0,600 Z" opacity="0.85"/><path fill="%2340b4e5" d="M0,420 Q200,320 400,420 T800,420 L800,600 L0,600 Z" opacity="0.7"/><path fill="%230d1b2a" d="M0,440 Q200,340 400,440 T800,440 L800,600 L0,600 Z" opacity="0.5"/></svg>');
  background-size:cover;
  background-position:center;
  opacity:1;
  transform:translateZ(0);
}

/* Particles container */
.particles {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-150;
  overflow:hidden;
}
.particle {
  position:absolute;
  width:12px;
  height:12px;
  border-radius:50%;
  opacity:0.85;
  filter:drop-shadow(0 6px 14px rgba(12,20,30,0.08));
  animation:floaty 14s ease-in-out infinite;
}
@keyframes floaty{
  0%{transform:translateY(0) translateX(0) scale(1)}
  25%{transform:translateY(-30px) translateX(12px) scale(1.04)}
  50%{transform:translateY(-60px) translateX(-8px) scale(1)}
  75%{transform:translateY(-30px) translateX(6px) scale(0.96)}
  100%{transform:translateY(0) translateX(0) scale(1)}
}

/* content layout */
.content-wrap{position:relative;z-index:10;max-width:var(--fixed-width);margin:160px auto 80px;background:transparent;min-height:60vh;padding:20px;}
.site-header-fixed{position:fixed;top:12px;left:50%;transform:translateX(-50%);width:var(--fixed-width);background:rgba(255,255,255,0.92);backdrop-filter:blur(6px);box-shadow:0 6px 18px rgba(12,20,30,0.06);border-radius:10px;z-index:40}
.header-fixed-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;}
.header-left .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#0b1220}
.logo-h{width:64px;height:64px}
.brand-text{line-height:1}
.brand-name{font-weight:800;font-size:18px}
.brand-sub{font-size:12px;color:var(--muted)}
.company-header-h{height:64px;object-fit:contain}

/* nav */
.main-nav{width:var(--fixed-width);margin:0 auto;position:fixed;top:98px;left:50%;transform:translateX(-50%);z-index:39;background:transparent;padding:8px 0;}
.main-nav ul{display:flex;list-style:none;gap:18px;padding:8px 14px;margin:0;justify-content:center}
.main-nav a{text-decoration:none;font-weight:700;color:#081226;padding:8px 12px;border-radius:8px}
.main-nav a.cta{background:linear-gradient(90deg,var(--accent2),var(--accent3));color:white}

/* page shell and cards */
.page-shell{background:rgba(255,255,255,0.75);padding:28px;border-radius:12px;box-shadow:0 10px 30px rgba(12,20,30,0.04);position:relative;z-index:5}
h1{margin-top:0}

/* three feature bars above columns as in user's image */
.feature-bars{display:flex;gap:18px;margin-bottom:18px}
.feature-bars .bar{flex:1;height:12px;border-radius:8px}
.bar.gold{background:linear-gradient(90deg,var(--accent1),#f3d06e)}
.bar.teal{background:linear-gradient(90deg,var(--accent2),#5bb7c5)}
.bar.purple{background:linear-gradient(90deg,var(--accent3),#a67cff)}

/* three columns */
.three-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:12px}
.three-cols .col{background:#fff;padding:16px;border-radius:10px;box-shadow:0 8px 20px rgba(12,20,30,0.04)}
.three-cols h3{margin-top:0}

/* footer */
.site-footer{max-width:var(--fixed-width);margin:28px auto;padding:18px;display:flex;align-items:center;gap:12px;z-index:10}

/* responsive */
@media (max-width:1100px){
  .site-header-fixed, .main-nav, .site-footer, .content-wrap{left:0;transform:none;width:1100px}
}
@media (max-width:900px){
  .three-cols{grid-template-columns:1fr}
  .main-nav ul{flex-wrap:wrap;justify-content:center}
}

.main-nav a.active{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:white}