:root{
      --bg:#0a0b0c; --ink:#eceff3; --muted:#aab0bb;
      --line:rgba(255,255,255,.10); --panel:rgba(255,255,255,.05);
      --glass:rgba(255,255,255,.04); --a1:#00C9FF; --a2:#92FE9D;
      --radius:22px; --blur:blur(12px);
    }
   html, body { height: 100%; }
        html,body {
            margin: 0;
            font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
            background: #0b0b0b;
            color: #e8e8e8;
            line-height: 1.55;
            overflow-x: hidden;
		width: 100%;
		 max-width: 100%;
	position: relative;
        }
	* {
    box-sizing: border-box;
}
    .section{width:min(1200px,92%); margin:0 auto; padding:clamp(64px,7.5vw,120px) 0; position:relative; z-index:1}
    h1,h2,h3{font-family:"Space Grotesk",Inter,sans-serif; letter-spacing:.2px; margin:0 0 .6rem}
    .eyebrow{color:var(--muted); text-transform:uppercase; letter-spacing:.22em; font-size:.78rem}

    /* ===== STARS CANVAS (behind everything) ===== */
    #savenzer-index-stars {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: transparent;
}


    /* ===== soft glowing orbs like About page ===== */
    .savenzer-index-orb{position:fixed; border-radius:50%; filter:blur(100px);
      opacity:.32; z-index:-2; pointer-events:none; animation:orbMove 80s ease-in-out infinite}
    .savenzer-index-orb.one{width:46vw;height:46vw;left:-12vw;top:-10vh;
      background:radial-gradient(circle at 40% 40%, var(--a1), transparent 60%)}
    .savenzer-index-orb.two{width:38vw;height:38vw;right:-10vw;bottom:-6vh;
      background:radial-gradient(circle at 60% 60%, var(--a2), transparent 60%); animation-delay:6s}
    @keyframes orbMove{0%,100%{transform:translate(0,0)}50%{transform:translate(26px,22px)}}

    /* ===== HERO ===== */
    .savenzer-contactus-hero{
      min-height:88vh; display:grid; place-items:center; text-align:center; position:relative; overflow:hidden;
    }
    .savenzer-contactus-hero header{position:relative; z-index:2}
    .savenzer-contactus-hero h1{
      font-size:clamp(2.6rem,6.2vw,4.6rem); font-weight:800;
      background:linear-gradient(135deg,var(--a1),var(--a2));
      -webkit-background-clip:text; background-clip:text; color:transparent;
    }
    .savenzer-contactus-hero p{max-width:860px; margin:10px auto 0; color:var(--muted); font-size:1.08rem; line-height:1.7}
    .hero-divider{margin-top:28px; height:1px; width:100%;
      background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.14),rgba(255,255,255,0))}
    /* SVG rings behind hero (CSS rotate) */
    .rings-wrap{position:absolute; inset:0; display:grid; place-items:center; z-index:1; pointer-events:none; opacity:.65; filter:drop-shadow(0 6px 30px rgba(0,201,255,.12))}
    .rings-wrap svg{width:min(70vw,900px); height:auto}
    .rings-wrap g{animation:spinRings 36s linear infinite; transform-origin:50% 50%}
    @keyframes spinRings{to{transform:rotate(360deg)}}

    /* ===== INFO CARDS GRID ===== */
    .savenzer-contactus-info-grid{margin-top:80px;
      display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
    .info-card{
      background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
      padding:26px; text-align:left; backdrop-filter:var(--blur);
      transition:transform .25s ease, box-shadow .25s ease;
    }
    .info-card:hover{transform:translateY(-6px); box-shadow:0 16px 40px rgba(0,201,255,.12)}
    .info-top{display:flex; align-items:center; gap:12px; margin-bottom:8px}
    .info-top svg{width:26px; height:26px; stroke:url(#sz-grad)}
    .info-card p{margin:.2rem 0; color:var(--muted)}

    /* ===== OFFICES ===== */
    .savenzer-contactus-offices .office-grid{
      display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px;
    }
    .office{background:var(--glass); border:1px solid var(--line); border-radius:var(--radius);
      padding:22px; backdrop-filter:var(--blur); transition:transform .25s ease}
    .office:hover{transform:translateY(-6px)}
    .office h4{color:var(--a1); margin:0 0 6px}

    /* ===== FORM SECTION (two panels) ===== */
    .savenzer-contactus-form{
      margin-top:120px; display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start;
    }
    .form-panel{
      background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
      padding:30px; backdrop-filter:var(--blur);
    }
    .form-panel h2{margin-bottom:6px}
    .form-group{position:relative; margin:20px 0}
    .form-group input, .form-group textarea{
      width:100%; background:transparent; color:var(--ink);
      border:1px solid rgba(255,255,255,.18); border-radius:10px; padding:14px 14px;
      font-size:1rem; transition:.25s ease;
    }
    .form-group label{
      position:absolute; top:14px; left:14px; color:var(--muted); font-size:.95rem;
      pointer-events:none; transition:.25s ease; background:rgba(0,0,0,.25); padding:0 6px; border-radius:6px;
    }
    .form-group input:focus, .form-group textarea:focus{
      border-color:var(--a1); box-shadow:0 0 8px rgba(0,201,255,.28);
    }
    .form-group input:focus+label, .form-group textarea:focus+label,
    .form-group input:valid+label, .form-group textarea:valid+label{
      top:-10px; left:10px; font-size:.8rem; color:var(--a1);
    }
    .savenzer-btn{
      width:100%; background:linear-gradient(135deg,var(--a1),var(--a2));
      color:#050607; font-weight:800; border:none; padding:14px 20px;
      border-radius:12px; cursor:pointer; transition:.25s ease;
    }
    .savenzer-btn:hover{transform:translateY(-2px); opacity:.95}

    /* SVG list styling */
    .savenzer-contactus-list{list-style:none; padding:0; margin:22px 0 0; display:flex; flex-direction:column; gap:12px}
    .savenzer-contactus-list li{display:flex; align-items:center; gap:10px; color:var(--muted); line-height:1.6}
    .savenzer-contactus-list svg{width:20px; height:20px; stroke:url(#sz-grad)}

    /* ===== MAP ===== */
    .savenzer-contactus-map{margin-top:120px; border-radius:var(--radius); overflow:hidden;
      box-shadow:0 12px 40px rgba(0,0,0,.40)}
    .savenzer-contactus-map iframe{width:100%; height:420px; border:0; display:block}

    /* ===== CTA ===== */
    .savenzer-contactus-cta{text-align:center; margin-top:120px}
    .savenzer-contactus-cta h2{
      font-size:2rem; margin-bottom:12px;
      background:linear-gradient(135deg,var(--a1),var(--a2)); -webkit-background-clip:text; color:transparent;
    }
    .savenzer-contactus-cta p{max-width:760px; margin:0 auto 20px; color:var(--muted)}
    .savenzer-contactus-cta .btn{
      display:inline-block; padding:12px 26px; border-radius:999px;
      background:linear-gradient(135deg,var(--a1),var(--a2)); color:#050607; font-weight:800; text-decoration:none;
      transition:.2s ease;
    }
    .savenzer-contactus-cta .btn:hover{opacity:.9; transform:translateY(-2px)}

    /* ===== RESPONSIVE ===== */
    @media (max-width:1100px){
      .savenzer-contactus-info-grid{grid-template-columns:repeat(2,1fr)}
      .savenzer-contactus-offices .office-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width:780px){
      .savenzer-contactus-form{grid-template-columns:1fr}
      .savenzer-contactus-info-grid{grid-template-columns:1fr}
      .savenzer-contactus-offices .office-grid{grid-template-columns:1fr}
    }