:root{
  --bg:#060812;
  --bg2:#070B18;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.09);
  --border: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --faint: rgba(255,255,255,.50);

  /* Primary accent palette */
  --a:#60A5FA;
  --a2:#2563EB;
  --a3:#1D4ED8;
  --aSoft: rgba(37,99,235,.18);

  --b:#FBBF24;
  --c:#A78BFA;
  --danger:#FB7185;
  --ok:#34D399;

  --shadow: 0 20px 70px rgba(0,0,0,.52);
  --radius: 18px;
  --radius2: 26px;
  --max: 1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 10% 10%, rgba(34,211,238,.18), transparent 60%),
    radial-gradient(1000px 650px at 90% 20%, rgba(251,191,36,.14), transparent 60%),
    radial-gradient(900px 600px at 45% 92%, rgba(167,139,250,.12), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2) 55%, var(--bg));
  overflow-x:hidden;
}

body:before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.10'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  opacity:.24;
}

a{color:inherit; text-decoration:none}
.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:40px 18px 0;
  width:100%;
  flex:1;
  display:flex;
  flex-direction:column;
}
main.wrap > section#top{padding-top:18px}

.skip{
  position:absolute; left:-999px; top:10px;
  padding:10px 12px; border-radius: 12px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.5);
}
.skip:focus{left:14px; z-index:1000}

/* Navigation */
.masthead{
  position: sticky;
  top: 14px;
  z-index: 50;
  width:min(var(--max), calc(100% - 24px));
  margin:0 auto;
}

.logo-box{
  position:fixed;
  top:12px;
  left:14px;
  z-index:60;
}

.site-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
}

.site-logo-img{
  display:block;
  width:290px;
  height:auto;
  max-height:290px;
  object-fit:contain;
  mix-blend-mode: normal;
  filter: none;
}

.masthead .nav{
  width:100%;
}

.nav{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  min-height:64px;
  margin-top:84px;
  padding:12px 14px;
  background: rgba(10,14,28,.56);
  border:1px solid var(--border);
  backdrop-filter: blur(14px);
  border-radius: 999px;
  box-shadow: 0 12px 48px rgba(0,0,0,.45);
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

.nav.scrolled{
  background: rgba(10,14,28,.74);
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 18px 56px rgba(0,0,0,.52);
}

@media (max-width: 1200px){
  .masthead{width:min(var(--max), calc(100% - 20px))}
  .site-logo-img{
    width:210px;
    max-height:210px;
  }
}

@media (max-width: 980px){
  .logo-box{top:8px; left:10px}
  .masthead{
    top:10px;
  }
  .nav{margin-top:54px}
  .site-logo-img{
    width:110px;
    max-height:110px;
  }
}

@media (max-width: 768px){
  .logo-box{left:8px; top:8px}
  .masthead{
    top:8px;
  }
  .nav{margin-top:42px}

  .site-logo-img{
    width:84px;
    max-height:84px;
  }
}

@media (max-width: 420px){
  .logo-box{left:6px; top:6px}
  .site-logo-img{
    width:68px;
    max-height:68px;
  }
}

.nav-links{
  position:relative;
  display:flex; gap:10px; flex-wrap:wrap;
  font-size:14px; color:var(--muted);
}
.nav-links a{
  position: relative;
  z-index: 1;
  padding:8px 10px; border-radius:999px;
  border:1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.nav-links a:hover{
  color:var(--text);
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.10);
  transform: translateY(-1px);
}
.nav-links a.active{
  color: rgba(6,8,18,.92);
  background: linear-gradient(135deg, rgba(34,211,238,.95), rgba(251,191,36,.92));
  border-color: transparent;
}

.nav-indicator{
  position:absolute;
  z-index:0;
  left:0;
  top:0;
  height:100%;
  width:0;
  border-radius:999px;
  pointer-events:none;
  opacity:0;
  background: linear-gradient(135deg, rgba(34,211,238,.28), rgba(251,191,36,.2));
  border:1px solid rgba(255,255,255,.18);
  transition: left .2s ease, width .2s ease, opacity .16s ease;
}

.nav-indicator.show{
  opacity:1;
}

.nav-cta{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:10px 14px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color:var(--text);
  font-weight:700;
  font-size:14px;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  user-select:none;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
}
.btn:active{transform: translateY(0px)}
.btn-primary{
  border-color: transparent;
  background: var(--a2);
  color: #fff;
  box-shadow: 0 14px 36px var(--aSoft);
}
.btn-primary:hover{
  background: var(--a3);
  border-color: transparent;
  color:#fff;
  box-shadow: 0 18px 55px rgba(29,78,216,.28);
}
.btn-ghost{background: rgba(255,255,255,.03)}
.btn-danger{
  border-color: transparent;
  background: rgba(251,113,133,.92);
  color: #fff;
}
.btn-danger:hover{background: rgba(244,63,94,.95); color:#fff}
.btn-small{padding:9px 12px; font-size:13px}

.btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(37,99,235,.25);
}

/* Page layout */
.page-head{
  margin-top:0;
  padding-top:0;
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:14px; flex-wrap:wrap;
}

.page-head.home-slide{
  animation: homeHeaderSlide .48s ease;
}
.page-head .kicker{margin-bottom:12px}
.page-head .kicker{
  transform: translateY(-6px);
}
.page-head h1{
  margin:0 0 12px;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.08;
  letter-spacing: -.02em;
}
.hero-gradient{
  background: linear-gradient(90deg, #22d3ee 0%, #facc15 45%, #60a5fa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dynamic-word{
  display:inline-block;
  min-width: 13ch;
}

.dynamic-word.is-changing{
  animation: wordSwap .32s ease;
}

@keyframes wordSwap{
  0%{opacity:.3; transform: translateY(5px)}
  100%{opacity:1; transform: translateY(0)}
}

@keyframes homeHeaderSlide{
  0%{opacity:.45; transform: translateX(24px)}
  100%{opacity:1; transform: translateX(0)}
}
.page-head p{margin:0; color:var(--muted); max-width: 70ch; line-height:1.6}
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:999px;
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: 13px;
  width: fit-content;
}
.kicker .dot{
  width:8px; height:8px; border-radius:50%;
  background: linear-gradient(135deg, var(--a), var(--a2));
  box-shadow:0 0 0 7px rgba(37,99,235,.14);
}

.grid-2{display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:16px}
.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top:16px}

.card{
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  padding:18px;
  box-shadow: var(--shadow);
}
.card.glass{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  backdrop-filter: blur(18px);
}

.card h2, .card h3{margin:0 0 10px}
.card h2{font-size:18px}
.card h3{font-size:16px}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.tiny{font-size:12px}
.list{margin:0; padding-left:18px; color:var(--muted); line-height:1.65}
.list li{margin:7px 0}

hr.sep-line{
  border:0; height:1px; margin:14px 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
}

/* Chips and logos */
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  font-size: 13px;
  color: var(--muted);
  transition: transform .15s ease, border-color .15s ease;
}
.chip:hover{transform: translateY(-1px); border-color: rgba(34,211,238,.28)}
.chip strong{color: var(--text); font-weight:700}

/* Logo image sizing */
.tool-logo{
  width:20px;
  height:20px;
  display:inline-block;
  flex:0 0 auto;
  border-radius:5px;
  background: transparent;
  object-fit: contain;
}

.tool-logo-square{
  border-radius:6px;
}

/* Mask-based fallback icons */
.i{
  width:18px; height:18px; display:inline-block;
  background: var(--a);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  opacity: .95;
}
.i-sql{mask-image: var(--svg-db); -webkit-mask-image: var(--svg-db)}
.i-pbi{mask-image: var(--svg-chart); -webkit-mask-image: var(--svg-chart)}
.i-azure{mask-image: var(--svg-cloud); -webkit-mask-image: var(--svg-cloud)}
.i-selenium{mask-image: var(--svg-bolt); -webkit-mask-image: var(--svg-bolt)}
.i-uft{mask-image: var(--svg-shield); -webkit-mask-image: var(--svg-shield)}
.i-jira{mask-image: var(--svg-tag); -webkit-mask-image: var(--svg-tag)}
.i-qmetry{mask-image: var(--svg-bug); -webkit-mask-image: var(--svg-bug)}
.i-phone{mask-image: var(--svg-phone); -webkit-mask-image: var(--svg-phone)}
.i-mail{mask-image: var(--svg-mail); -webkit-mask-image: var(--svg-mail)}
.i-linkedin{mask-image: var(--svg-linkedin); -webkit-mask-image: var(--svg-linkedin)}
.i-doc{mask-image: var(--svg-doc); -webkit-mask-image: var(--svg-doc)}
.i-chat{mask-image: var(--svg-chat); -webkit-mask-image: var(--svg-chat)}
.i-menu{mask-image: var(--svg-menu); -webkit-mask-image: var(--svg-menu)}
.i-copy{mask-image: var(--svg-copy); -webkit-mask-image: var(--svg-copy)}
.i-ext{mask-image: var(--svg-ext); -webkit-mask-image: var(--svg-ext)}

:root{
  --svg-db: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2c4.4 0 8 1.3 8 3v14c0 1.7-3.6 3-8 3s-8-1.3-8-3V5c0-1.7 3.6-3 8-3Zm0 2c-3.7 0-6 .9-6 1s2.3 1 6 1 6-.9 6-1-2.3-1-6-1Zm6 4.1c-1.5.8-3.7 1.2-6 1.2s-4.5-.4-6-1.2V11c0 .1 2.3 1 6 1s6-.9 6-1V8.1Zm0 5c-1.5.8-3.7 1.2-6 1.2s-4.5-.4-6-1.2V16c0 .1 2.3 1 6 1s6-.9 6-1v-2.9Zm0 5c-1.5.8-3.7 1.2-6 1.2s-4.5-.4-6-1.2V19c0 .1 2.3 1 6 1s6-.9 6-1v-1z'/%3E%3C/svg%3E");
  --svg-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 19h16v2H2V3h2v16Zm3-2V9h3v8H7Zm5 0V5h3v12h-3Zm5 0v-6h3v6h-3Z'/%3E%3C/svg%3E");
  --svg-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19 18H7a5 5 0 1 1 .6-9.96A6 6 0 0 1 21 10.5 4.5 4.5 0 0 1 19 18Zm0-2a2.5 2.5 0 0 0 .2-4.99l-1.4-.12-.14-1.4A4 4 0 0 0 9.9 8.8l-.55 1.18-1.29-.14A3 3 0 0 0 7 16h12Z'/%3E%3C/svg%3E");
  --svg-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 3 14h7l-1 8 12-14h-7l-1-6Z'/%3E%3C/svg%3E");
  --svg-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 20 6v6c0 5-3.4 9.4-8 10-4.6-.6-8-5-8-10V6l8-4Zm0 2.2L6 7v5c0 3.9 2.4 7.5 6 8 3.6-.5 6-4.1 6-8V7l-6-2.8Z'/%3E%3C/svg%3E");
  --svg-bug: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 8h-3.2A5.8 5.8 0 0 0 12 5a5.8 5.8 0 0 0-4.8 3H4V6h2.3A7.8 7.8 0 0 1 12 3a7.8 7.8 0 0 1 5.7 3H20v2Zm-1 4h3v2h-3v1a7 7 0 0 1-2.2 5.1l1.4 1.4-1.4 1.4-1.8-1.8A7 7 0 0 1 12 22a7 7 0 0 1-3.9-1.2l-1.8 1.8-1.4-1.4 1.4-1.4A7 7 0 0 1 5 15v-1H2v-2h3v-1a7 7 0 0 1 .6-2.8h12.8A7 7 0 0 1 19 11v1Zm-3 0v-1a5 5 0 0 0-.6-2.4H8.6A5 5 0 0 0 8 11v1h8Zm0 2H8v1a5 5 0 0 0 8 0v-1Z'/%3E%3C/svg%3E");
  --svg-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 12V3h9l9 9-9 9-9-9Zm6.5-4A1.5 1.5 0 1 0 8 6.5 1.5 1.5 0 0 0 9.5 8Z'/%3E%3C/svg%3E");
  --svg-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.3 1.2.4 2.4.6 3.7.6.6 0 1 .4 1 1V21c0 .6-.4 1-1 1C10.3 22 2 13.7 2 3c0-.6.4-1 1-1h3.9c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.7.1.4 0 .8-.3 1.1l-2.2 2.2Z'/%3E%3C/svg%3E");
  --svg-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 4-8 5L4 8V6l8 5 8-5v2Z'/%3E%3C/svg%3E");
  --svg-linkedin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.94 6.5A2.44 2.44 0 1 1 6.94 1.6a2.44 2.44 0 0 1 0 4.9ZM2.5 22V8.8h4.9V22H2.5Zm8.1 0V8.8h4.7v1.8h.1c.7-1.2 2.2-2.2 4.1-2.2 4.4 0 5.2 2.7 5.2 6.3V22h-4.9v-6.1c0-1.5 0-3.4-2.2-3.4s-2.5 1.6-2.5 3.3V22h-4.5Z'/%3E%3C/svg%3E");
  --svg-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h9l5 5v15a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm8 1.5V8h4.5L14 3.5ZM8 12h8v2H8v-2Zm0 4h8v2H8v-2Z'/%3E%3C/svg%3E");
  --svg-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H7l-5 4V6a2 2 0 0 1 2-2Zm2 4v2h12V8H6Zm0 4v2h8v-2H6Z'/%3E%3C/svg%3E");
  --svg-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 7h16v2H4V7Zm0 4h16v2H4v-2Zm0 4h16v2H4v-2Z'/%3E%3C/svg%3E");
  --svg-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 7a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2V7Zm2 0v13h10V7H10ZM2 4a2 2 0 0 1 2-2h10v2H4v13H2V4Z'/%3E%3C/svg%3E");
  --svg-ext: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 3h7v7h-2V6.4l-9.3 9.3-1.4-1.4L17.6 5H14V3ZM5 5h6v2H7v10h10v-4h2v6H5V5Z'/%3E%3C/svg%3E");
}

/* Callouts and utility blocks */
.callout{
  margin-top:16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:14px;
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(34,211,238,.12), rgba(251,191,36,.10));
}

.badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: var(--muted);
}
.badge .k{color:var(--faint); font-size:12px}
.badge .v{font-weight:700; color:var(--text); font-size:13px}

.accordion{margin-top:12px}
details{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
  border-radius: 16px;
  padding: 12px 12px;
  margin: 10px 0;
}
summary{
  cursor:pointer;
  font-weight:700;
  list-style:none;
}
summary::-webkit-details-marker{display:none}
details p{margin:10px 0 0; color:var(--muted); line-height:1.6}

.contact-cards{display:grid; gap:12px; margin-top:16px}
.contact-card{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
  transition: transform .15s ease, border-color .15s ease;
}
.contact-card:hover{transform: translateY(-1px); border-color: rgba(34,211,238,.26)}

/* Mobile navigation */
.nav-toggle{
  display:none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: var(--text);
  padding:10px 12px;
  border-radius: 999px;
  font-weight:800;
}
.nav-toggle:hover{background: rgba(255,255,255,.06)}

@media (max-width: 980px){
  .nav{
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 20px;
    max-height: 64px;
    overflow: hidden;
    transition: max-height .26s ease, border-radius .2s ease, box-shadow .2s ease;
  }
  .nav-toggle{
    display:inline-flex;
    align-items:center;
    gap:10px;
    order:2;
    margin-left:auto;
    padding:10px 14px;
    font-size:14px;
  }
  .nav-links{order:3}
  .nav-cta{order:4}
  .nav.open{
    position: fixed;
    inset: 0;
    z-index: 1100;
    border-radius: 0;
    max-height: none;
    margin: 0 !important;
    width: 100%;
    padding: 18px 16px 22px;
    gap:14px;
    justify-content:flex-start;
    align-content:flex-start;
    overflow-y:auto;
    background: rgba(6,8,18,.96);
    backdrop-filter: blur(18px);
    box-shadow: none;
  }
  .nav-links,
  .nav-cta{
    display:flex;
    width:100%;
    opacity:0;
    transform: translateY(10px);
    pointer-events:none;
    transition: opacity .24s ease, transform .24s ease;
  }
  .nav-links{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .nav.open .nav-links{
    padding-top:14px;
    margin-top:4px;
    border-top:1px solid rgba(255,255,255,.12);
  }
  .nav-links a{
    width:100%;
    padding:14px 14px;
    border:1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.04);
    border-radius:16px;
    font-size:16px;
    font-weight:700;
  }
  .nav-cta{
    padding-top:6px;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .nav-cta .btn{
    width:100%;
    justify-content:center;
    min-height:48px;
    font-size:15px;
  }
  .nav-cta .btn-primary{
    justify-content:center;
  }
  .nav.open .nav-links,
  .nav.open .nav-cta{
    opacity:1;
    transform: translateY(0);
    pointer-events:auto;
  }
  .nav-indicator{display:none}
  body.nav-open{
    overflow: hidden;
  }
}
.contact-left{display:flex; align-items:center; gap:12px}
.contact-title{font-weight:800}
.contact-sub{color:var(--muted); font-size:13px; margin-top:2px}
.pill-btns{display:flex; gap:10px; flex-wrap:wrap}

.form{display:grid; gap:12px; margin-top: 10px}
label span{display:block; color:var(--muted); font-size:12px; margin-bottom:6px}
input, textarea{
  width:100%;
  padding:12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: var(--text);
  outline: none;
}
input::placeholder, textarea::placeholder{color: rgba(255,255,255,.35)}
input:focus, textarea:focus{border-color: rgba(34,211,238,.35)}

/* Footer */
.footer{
  margin-top: auto;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  color: var(--muted);
  font-size: 13px;
  padding: 28px 0 10px;
  margin-bottom: 0;
}
.footer-links{display:flex; gap:10px; align-items:center}
.sep{color: rgba(255,255,255,.25)}

/* Toast message */
.toast{
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.55);
  color: var(--text);
  backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show{opacity:1; transform: translateX(-50%) translateY(-2px)}

/* Page navigation loading bar */
.page-loader{
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  opacity: 0;
  z-index: 1200;
  pointer-events: none;
  background: linear-gradient(90deg, #22d3ee, #60a5fa, #facc15);
  box-shadow: 0 0 14px rgba(34,211,238,.45);
  transition: width .16s linear, opacity .16s ease;
}

/* Responsive grid */
@media (max-width: 980px){
  .grid-3{grid-template-columns: 1fr}
  .grid-2{grid-template-columns: 1fr}
}

/* Structured mobile layout */
@media (max-width: 768px){
  .wrap{
    padding:20px 14px 0;
  }

  .nav{
    margin:42px auto 0;
    width:min(var(--max), calc(100% - 12px));
    padding:10px 12px;
    border-radius: 22px;
  }

  main.wrap > section#top{
    padding-top:12px;
  }

  .page-head{
    align-items:flex-start;
    gap:12px;
  }

  .page-head h1{
    margin-bottom:10px;
    font-size: clamp(28px, 9vw, 36px);
    line-height:1.12;
  }

  .page-head p{
    max-width:none;
  }

  .pill-btns{
    width:100%;
    display:grid;
    grid-template-columns: 1fr;
    gap:8px;
  }

  .pill-btns .btn{
    width:100%;
    justify-content:flex-start;
  }

  .badges{
    margin-top:14px;
  }

  .badge{
    width:100%;
    justify-content:space-between;
  }

  .card{
    padding:16px;
    border-radius:22px;
  }

  .chips{
    gap:8px;
  }

  .chip{
    width:100%;
    justify-content:flex-start;
  }

  .callout{
    align-items:flex-start;
  }

  .callout .btn{
    width:100%;
    justify-content:center;
  }

  .contact-card{
    flex-direction:column;
    align-items:flex-start;
  }

  .contact-card .pill-btns{
    width:100%;
  }

  .footer{
    padding:20px 0 10px;
  }
}

@media (max-width: 420px){
  .nav-toggle{
    padding:10px;
  }
  .nav-toggle span.i{
    margin-right:0;
  }
}