:root{
  /* Deep-space data palette */
  --bg:#020A18;
  --bg2:#041226;
  --ink:#F5FAFF;
  --muted:#A8B7CC;
  --card:rgba(7,18,40,.85);
  --line:rgba(168,183,204,.22);

  --brand:#00E0D3;
  --brand-2:#00B7FF;
  --accent:#FF7A5A;

  --shadow:0 18px 50px rgba(0,0,0,.6);
  --shadow-soft:0 10px 30px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
html:focus-within{scroll-behavior:smooth}
body{
  font:16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(900px 600px at 10% 0%, rgba(0,224,211,.17), transparent 60%),
    radial-gradient(900px 600px at 90% 0%, rgba(0,183,255,.15), transparent 60%),
    radial-gradient(900px 600px at 50% 100%, rgba(0,183,255,.1), transparent 70%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* Scroll progress bar */
#progress{
  position:fixed;
  left:0;top:0;
  height:3px;width:0;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  z-index:80;
}

/* Header + nav */
header{
  position:sticky;top:0;z-index:70;
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  background:linear-gradient(180deg,rgba(2,10,24,.98),rgba(2,10,24,.93));
  border-bottom:1px solid rgba(168,183,204,.22);
  transition:box-shadow .25s, background .25s, border-color .25s;
}
header.scrolled{
  box-shadow:var(--shadow);
  background:rgba(2,10,24,.99);
  border-color:rgba(168,183,204,.35);
}
nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:76px;
}

/* Brand / logo in nav */
.brand{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.brand-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#00e0cf;
  box-shadow:
    0 0 6px rgba(0,224,207,.8),
    0 0 14px rgba(0,224,207,.5);
  animation:brandPulse 3s ease-in-out infinite;
}
@keyframes brandPulse{
  0%{box-shadow:0 0 6px rgba(0,224,207,.8);}
  50%{box-shadow:0 0 14px rgba(0,224,207,.7);}
  100%{box-shadow:0 0 6px rgba(0,224,207,.8);}
}
.brand-text{
  font-size:1.2rem;
  font-weight:700;
  letter-spacing:0.16rem;
  text-transform:uppercase;
  background:linear-gradient(90deg,#00d2cf,#28f4ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  opacity:.92;
  position:relative;
}
.brand-text::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0;
  height:2px;
  background:linear-gradient(90deg,#00d2cf,#28f4ff);
  transition:width .3s ease;
}
.brand:hover .brand-text::after{
  width:100%;
}

/* Tooltip under brand */
.brand-tooltip{
  position:absolute;
  left:50%;
  top:110%;
  transform:translateX(-50%);
  white-space:nowrap;
  padding:6px 10px;
  font-size:12px;
  background:rgba(2,14,28,.95);
  border:1px solid rgba(0,224,211,.35);
  color:var(--brand);
  border-radius:8px;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  box-shadow:0 0 18px rgba(0,224,211,.25);
}
.brand:hover .brand-tooltip{
  opacity:1;
  transform:translateX(-50%) translateY(4px);
}

/* Nav links */
.nav-links{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  font-size:14px;
  color:var(--muted);
}
.nav-links a{
  position:relative;
  padding:9px 11px;
  border-radius:999px;
  transition:background .2s,color .2s;
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:16%;
  right:16%;
  bottom:4px;
  height:2px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  transform:scaleX(0);
  transform-origin:center;
  opacity:0;
  transition:transform .25s ease,opacity .25s ease;
}
.nav-links a:hover,
.nav-links a.active{
  color:var(--ink);
  background:rgba(5,23,50,.9);
}
.nav-links a:hover::after,
.nav-links a.active::after{
  transform:scaleX(1);
  opacity:1;
}

/* Logo card under nav */
.nav-logo-container{
  position:relative;
  width:100%;
  display:flex;
  justify-content:center;
  padding:18px 0 18px;
  top:0;
  z-index:60;
  animation:floatWrapper 7s ease-in-out infinite;
}
.nav-logo-container img{
  width:380px;
  max-width:85%;
  border-radius:14px;
  display:block;
  transition:transform .35s ease, box-shadow .35s ease, filter .25s ease;
  box-shadow:
    0 0 20px rgba(0,210,207,.45),
    0 0 40px rgba(12,180,255,.30),
    0 0 80px rgba(0,210,207,.25);
  filter: contrast(1.05) brightness(1.05);
}
@media (min-width:1100px){
  .nav-logo-container img{width:460px;}
}
.nav-logo-container img:hover{
  transform:scale(1.04);
  box-shadow:
    0 0 26px rgba(0,224,211,.65),
    0 0 55px rgba(0,183,255,.55),
    0 0 115px rgba(0,224,211,.45);
}
/* Soft spotlight behind the logo */
.nav-logo-container::before{
  content:"";
  position:absolute;
  inset:8px 18%;
  border-radius:24px;
  background:
    radial-gradient(circle at 30% 40%, rgba(0,224,211,.35), transparent 65%),
    radial-gradient(circle at 70% 60%, rgba(0,183,255,.30), transparent 70%);
  opacity:.8;
  filter:blur(10px);
  z-index:-1;
}
@keyframes floatWrapper{
  0%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
  100%{transform:translateY(0);}
}

/* HERO */
.hero{
  position:relative;
  padding:80px 0 44px;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:36px;
  align-items:center;
}
.hero::before{
  content:"";
  position:absolute;
  inset:-80px -40px auto;
  background:
    radial-gradient(circle at 0% 40%,rgba(0,224,211,.35),transparent 55%),
    radial-gradient(circle at 100% 40%,rgba(0,183,255,.35),transparent 55%);
  opacity:.3;
  filter:blur(2px);
  z-index:-2;
  pointer-events:none;
}

/* floating nodes */
.hero-nodes{
  position:absolute;
  inset:-40px -40px 0;
  pointer-events:none;
  z-index:-1;
}
.hero-nodes span{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:radial-gradient(circle,var(--brand),rgba(0,224,211,0));
  box-shadow:0 0 12px rgba(0,224,211,.8);
  opacity:.55;
  animation:floatNode 14s linear infinite;
}
.hero-nodes span:nth-child(1){top:12%;left:10%;animation-duration:16s;}
.hero-nodes span:nth-child(2){top:28%;left:60%;animation-duration:18s;}
.hero-nodes span:nth-child(3){top:62%;left:20%;animation-duration:20s;}
.hero-nodes span:nth-child(4){top:40%;left:85%;animation-duration:22s;}
.hero-nodes span:nth-child(5){top:75%;left:55%;animation-duration:19s;}
@keyframes floatNode{
  0%{transform:translate3d(0,0,0);opacity:.2;}
  25%{opacity:.65;}
  50%{transform:translate3d(15px,-25px,0);opacity:.4;}
  75%{opacity:.8;}
  100%{transform:translate3d(-10px,15px,0);opacity:.2;}
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:5px 11px;
  border-radius:999px;
  border:1px solid rgba(0,224,211,.7);
  background:rgba(2,13,32,.8);
  color:var(--muted);
  font-size:12px;
}
.badge-dot{
  width:8px;height:8px;
  border-radius:999px;
  background:radial-gradient(circle,var(--brand),#00a3c9);
  box-shadow:0 0 14px rgba(0,224,211,.9);
}

.hero h1{
  position:relative;
  font-size:clamp(42px,6vw,68px);
  line-height:1.05;
  margin:18px 0 16px;
  max-width:22ch;
}
.hero h1::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-12px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  opacity:.45;
  box-shadow:
    0 0 12px rgba(0,224,211,.6),
    0 0 24px rgba(0,183,255,.4);
}
.lead{
  font-size:18px;
  color:var(--muted);
  max-width:52ch;
}

.hero-typing{
  margin-top:10px;
  font-size:14px;
  color:var(--muted);
  display:flex;
  align-items:center;
  flex-wrap:wrap;
}
.hero-typing-label{opacity:.85;}
#typingText{
  font-weight:600;
  color:var(--brand-2);
}
.hero-typing-caret{
  margin-left:2px;
  animation:blinkCaret 1s steps(2,start) infinite;
  color:var(--brand-2);
}
@keyframes blinkCaret{
  0%,49%{opacity:1;}
  50%,100%{opacity:0;}
}

/* CTA buttons */
.cta{
  margin-top:24px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 16px;
  border-radius:12px;
  font-size:14px;
  font-weight:700;
  border:1px solid rgba(168,183,204,.4);
  background:linear-gradient(180deg,rgba(12,27,55,.96),rgba(4,14,33,.96));
  color:var(--ink);
  box-shadow:var(--shadow-soft);
  min-height:42px;
  white-space:nowrap;
  cursor:pointer;
  overflow:hidden;
}
.btn.primary{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  border-color:transparent;
  color:#021215;
}
.btn.success{
  background:radial-gradient(circle at 0% 0%,rgba(0,224,211,.7),rgba(0,183,255,.6));
  border-color:transparent;
  color:#021215;
}
.btn.ghost{
  background:transparent;
}
.btn small{
  font-size:11px;
  opacity:.85;
  font-weight:600;
}

/* Button light sweep */
.btn::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:radial-gradient(circle,rgba(255,255,255,.4),transparent 60%);
  opacity:0;
  transform:translate3d(-60%,0,0);
  transition:opacity .4s ease, transform .4s ease;
  pointer-events:none;
}
.btn:hover::before,
.btn:focus-visible::before{
  opacity:.9;
  transform:translate3d(60%,0,0);
}

.hero-card{
  background:rgba(2,9,26,.96);
  border-radius:18px;
  border:1px solid rgba(168,183,204,.25);
  padding:18px 18px 10px;
  box-shadow:var(--shadow-soft);
}
.hero-card h3{margin:0 0 8px}
.hero-card ul{
  margin:0 0 10px 18px;
  color:var(--muted);
}

.sep{
  height:1px;
  margin:26px 0;
  background:linear-gradient(90deg,transparent,rgba(168,183,204,.6),transparent);
}

/* Generic sections – tightened vertical spacing */
section{padding:48px 0;}

h2{font-size:clamp(24px,4vw,34px);margin:0 0 12px}
h3{margin:0 0 6px;font-size:20px}
p{margin:8px 0}
.muted{color:var(--muted)}
.grid{display:grid;gap:18px}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{
  background:rgba(2,9,26,.96);
  border-radius:16px;
  border:1px solid rgba(168,183,204,.22);
  padding:18px;
  box-shadow:var(--shadow-soft);
}
.list{padding-left:18px}

/* Pills */
.pill{
  display:inline-block;
  padding:3px 9px;
  border-radius:999px;
  border:1px solid rgba(168,183,204,.5);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
}
.pill.popular{
  border-color:rgba(0,224,211,.9);
  background:rgba(0,224,211,.08);
  color:var(--ink);
}

/* Pricing heading container */
.pricing-heading{
  display:flex;
  align-items:center;
  gap:10px;
}
.pricing-heading h2{margin:0}

/* “% saved” badge */
.badge-saved{
  border:none;
  padding:4px 10px;
  font-size:12px;
  font-weight:700;
  border-radius:999px;
  cursor:pointer;
  background:rgba(0,224,211,.15);
  color:var(--brand);
  border:1px solid rgba(0,224,211,.55);
  display:inline-flex;
  align-items:center;
  gap:4px;
  transition:
    background .25s ease,
    border-color .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}
.badge-saved::after{
  content:"›";
  font-size:11px;
  opacity:.9;
  transform:translateX(0);
  transition:transform .25s ease;
}
.badge-saved:hover{
  background:rgba(0,224,211,.25);
  border-color:rgba(0,224,211,.75);
  box-shadow:0 0 14px rgba(0,224,211,.4);
  transform:translateY(-1px);
}
.badge-saved:hover::after{
  transform:translateX(3px);
}
.badge-saved.badge-attention{
  animation:badgePulse 1.4s ease-out 0s 2;
}
@keyframes badgePulse{
  0%{
    box-shadow:0 0 0 0 rgba(0,224,211,.6);
    transform:scale(1);
  }
  50%{
    box-shadow:0 0 18px 6px rgba(0,224,211,.35);
    transform:scale(1.06);
  }
  100%{
    box-shadow:0 0 0 0 rgba(0,224,211,0);
    transform:scale(1);
  }
}

/* Table */
.table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
.table th,.table td{
  padding:10px 12px;
  border-bottom:1px solid rgba(168,183,204,.28);
  text-align:left;
}
.table th{
  color:var(--muted);
  font-weight:700;
}

/* Compare table extras */
.compare-table tbody tr{
  cursor:pointer;
  transition:background .18s ease, transform .18s ease;
}
.compare-table tbody tr:hover{
  background:rgba(4,18,40,.9);
  transform:translateY(-1px);
}
.price-pill{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(168,183,204,.4);
  font-size:11px;
  letter-spacing:.02em;
}

/* Quote style */
.quote{
  position:relative;
  padding-left:26px;
}
.quote::before{
  content:"“";
  position:absolute;
  left:0;top:-8px;
  font-size:38px;
  color:var(--brand);
  opacity:.85;
}

/* FAQ layout */
#faq .wrap{
  max-width:1200px;
  margin:0 auto;
  padding-top:40px;
}
#faq details{
  background:rgba(2,9,26,.96);
  border-radius:12px;
  border:1px solid rgba(168,183,204,.25);
  padding:12px 16px;
  transition:border-color .25s ease, background .25s ease;
}
#faq details+details{margin-top:12px}
#faq details:hover{border-color:rgba(0,224,211,.35);}
#faq summary{
  cursor:pointer;
  font-weight:700;
}

/* Contact form */
.contact-section{padding:48px 0 70px;}
.contact-card{
  background:rgba(2,9,26,.96);
  border-radius:18px;
  border:1px solid rgba(168,183,204,.25);
  padding:18px;
  box-shadow:var(--shadow-soft);
  max-width:1100px;
  margin:0 auto;
}
.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.form-grid .intro{
  grid-column:1/-1;
  margin:0 0 6px;
}
.field{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.field--full{grid-column:1/-1}
.field>span{font-weight:700;font-size:14px}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:11px 13px;
  border-radius:12px;
  border:1px solid rgba(168,183,204,.4);
  background:rgba(3,13,31,.96);
  color:var(--ink);
  outline:none;
  transition:border-color .15s,box-shadow .15s,background .15s;
  font-size:14px;
}
.field input::placeholder,
.field textarea::placeholder{color:#7f8da2;}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--brand-2);
  box-shadow:0 0 0 3px rgba(0,183,255,.5);
  background:rgba(3,16,38,1);
}
.field select{
  color:var(--ink);
  background:#050f23;
}
.field select option{
  background:#020A18;
  color:var(--ink);
}
.field select option[disabled]{color:#617089}

.actions{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:3px;
}
.btn.btn--primary{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  border-color:transparent;
  color:#021215;
}
.btn.btn--ghost{background:transparent;}

.small{font-size:.9rem}
.hidden{display:none}

/* Footer */
footer{
  border-top:1px solid rgba(168,183,204,.22);
  padding:26px 0;
  color:var(--muted);
  font-size:13px;
}

/* Back-to-top button */
#toTop{
  position:fixed;
  right:20px;
  bottom:22px;
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity .25s,transform .25s;
  z-index:75;
}
#toTop.show{
  opacity:1;
  pointer-events:auto;
  transform:none;
}

/* Mobile CTA */
.mobile-cta{
  position:fixed;
  left:0;right:0;bottom:0;
  display:none;
  gap:10px;
  padding:10px 14px;
  background:rgba(2,10,24,.98);
  border-top:1px solid rgba(168,183,204,.35);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  z-index:74;
}
.mobile-cta .btn{flex:1;justify-content:center}

/* Query modals */
.query-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(2,10,24,0.86);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:120;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.query-modal{
  position:relative;
  max-width:900px;
  width:calc(100% - 32px);
  background:rgba(2,9,26,0.98);
  border-radius:18px;
  border:1px solid rgba(168,183,204,.35);
  padding:20px 22px 18px;
  box-shadow:0 26px 70px rgba(0,0,0,.75);
}
.query-modal-close{
  position:absolute;
  top:8px;
  right:10px;
  background:transparent;
  border:none;
  color:var(--muted);
  font-size:22px;
  cursor:pointer;
}
.query-modal-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:16px;
}

/* Query Explorer tabs & panels */
.qe-intro{margin-top:4px;}
.qe-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
  margin-bottom:10px;
}
.qe-tab{
  border-radius:999px;
  border:1px solid rgba(168,183,204,.4);
  background:rgba(5,16,35,.95);
  color:var(--muted);
  font-size:12px;
  font-weight:600;
  padding:6px 11px;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.qe-tab:hover{
  transform:translateY(-1px);
  border-color:rgba(0,224,211,.6);
}
.qe-tab.active{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  border-color:transparent;
  color:#021215;
}
.qe-panel{
  display:none;
  margin-top:6px;
}
.qe-panel.active{display:block;}
.qe-bullets{
  margin-top:10px;
  padding-left:18px;
}
.qe-metrics{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:10px;
}
.qe-metrics h4{
  margin:0 0 4px;
}
.qe-note{
  margin-top:12px;
  font-size:13px;
}

/* Stack metrics on small screens */
@media (max-width:720px){
  .qe-metrics{grid-template-columns:1fr;}
}

/* Shared heading layout (e.g., Case Study with pill) */
.section-heading{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:space-between;
}

/* Info icon */
.info-icon{
  width:20px;
  height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1px solid rgba(0,224,211,.45);
  background:rgba(0,224,211,.08);
  color:var(--brand);
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    transform .25s ease;
}
.info-icon:hover{
  background:rgba(0,224,211,.22);
  border-color:rgba(0,224,211,.75);
  box-shadow:0 0 8px rgba(0,224,211,.5);
  transform:translateY(-1px);
}

/* Overview grid inside overview modal */
.overview-grid{
  margin-top:24px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:18px;
}
.overview-block{
  background:rgba(3,13,33,.95);
  border-radius:16px;
  padding:16px 16px 14px;
  border:1px solid rgba(141,169,201,.2);
  box-shadow:0 12px 30px rgba(0,0,0,.7);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.overview-block h3{margin:0 0 4px;}
.overview-block p{margin:0 0 10px;}
.overview-block .btn{width:100%;}

/* Smaller back buttons at bottom of each modal */
.small-btn{
  margin-top:12px;
  font-size:13px;
  padding:6px 12px;
}

/* optional: lock scroll when a modal is open */
body.modal-open{overflow:hidden;}

/* --- Glow Button & Pill Styles --- */
.glow-btn{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(0,224,211,.35);
  transition:
    background .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    transform .2s ease;
  animation:glowPulse 5s ease-in-out infinite;
}
.glow-btn::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:radial-gradient(circle at center,
    rgba(0,224,211,.40) 0%,
    rgba(0,224,211,.18) 35%,
    transparent 70%);
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
.glow-btn:hover{
  background:rgba(4,36,48,0.9);
  border-color:rgba(0,224,211,.75);
  box-shadow:0 0 22px rgba(0,224,211,.35);
  transform:translateY(-2px);
}
.glow-btn:hover::before{opacity:1;}
@keyframes glowPulse{
  0%,100%{box-shadow:0 0 0 rgba(0,224,211,0);}
  50%{box-shadow:0 0 16px rgba(0,224,211,0.25);}
}

.glow-pill{
  border:1px solid rgba(0,224,211,.35);
  background:rgba(4,18,40,.75);
  transition:
    background .25s ease,
    transform .2s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}
.glow-pill:hover{
  background:rgba(5,26,54,.95);
  border-color:rgba(0,224,211,.65);
  box-shadow:0 0 18px rgba(0,224,211,.35);
  transform:translateY(-1px);
}

/* Services layout: 3 + 2 centered */
.services-flex{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:24px;
  margin-top:24px;
}
.service-card{
  flex:1 1 280px;
  max-width:320px;
  position:relative;
  overflow:hidden;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
}
.service-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:radial-gradient(circle at top left,
    rgba(0,224,211,.18),
    transparent 55%);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}
.service-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 50px rgba(0,0,0,.7);
  border-color:rgba(0,224,211,.55);
  background:rgba(4,18,40,.98);
}
.service-card:hover::before{opacity:1;}
@media (max-width:900px){
  .service-card{max-width:100%;}
}

/* Work With Me grid */
.offers-grid{
  margin-top:24px;
  gap:24px;
}
.offers-note{
  margin-top:18px;
  max-width:720px;
}
#offers .grid{
  max-width:1250px;
  margin-inline:auto;
}

/* Case Study heading with "See all examples" pill */
#case-study .wrap{max-width:1100px;}
.examples-pill{
  border-radius:999px;
  padding:4px 14px;
  font-size:13px;
  letter-spacing:.03em;
  text-transform:uppercase;
  border:1px solid rgba(168,183,204,.4);
  background:rgba(4,18,40,.9);
  color:var(--brand);
  cursor:pointer;
  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}
.examples-pill:hover{
  background:rgba(5,26,54,1);
  border-color:rgba(0,224,211,.7);
  box-shadow:0 0 18px rgba(0,224,211,.35);
  transform:translateY(-1px);
}

/* Code blocks */
.code-block{
  margin:6px 0 0;
  padding:10px 12px;
  background:#050d1c;
  border-radius:10px;
  border:1px solid rgba(168,183,204,.3);
  color:#e9f3ff;
  font-size:13px;
  line-height:1.4;
  overflow-x:auto;
  font-family:"JetBrains Mono","Consolas","SF Mono",monospace;
}
.code-block code,
.query-notes code{
  font-family:inherit;
  color:#7ee7ff;
}
.query-notes{
  margin-top:14px;
  padding-left:18px;
}

/* Scroll-reveal micro interaction */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s ease,transform .5s ease;
}
.reveal.visible{
  opacity:1;
  transform:none;
}

/* Responsive */
@media (max-width:960px){
  .hero{
    grid-template-columns:1fr;
    padding-top:70px;
  }
  .grid.cols-3{grid-template-columns:1fr;}
}
@media (max-width:720px){
  .nav-links{display:none;}
  .mobile-cta{display:flex;}
  body{padding-bottom:74px;}
  .query-modal-grid{grid-template-columns:1fr;}
}
@media (max-width:520px){
  h1{font-size:30px;}
  .btn{
    padding:9px 14px;
    font-size:13px;
    min-height:38px;
  }
  .form-grid{grid-template-columns:1fr;}
  .field--full{grid-column:auto;}
}

/* Contact button subtle breathing pulse */
@keyframes contactPulse{
  0%,100%{box-shadow:0 0 0 rgba(0,224,211,0);}
  50%{box-shadow:0 0 16px rgba(0,224,211,0.20);}
}
.contact-glow-btn{
  animation:contactPulse 6s ease-in-out infinite;
}
/* Tooling strip */
.tooling-strip {
  padding: 16px 0 56px;      /* small gap under the "How I work" card */
}

.tooling-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-radius: 999px;
  background: radial-gradient(circle at 0% 50%, rgba(0,224,211,0.18), transparent 60%),
              rgba(3, 14, 32, 0.96);
  border: 1px solid rgba(168,183,204,0.35);
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  overflow-x: auto;
}

/* label on the left */
.tooling-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  white-space: nowrap;
}

/* pill list */
.tooling-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  font-size: 13px;
}

.tooling-list span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(5,18,40,0.95);
  border: 1px solid rgba(168,183,204,0.35);
  color: var(--ink);
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.tooling-list span:hover {
  background: rgba(7,26,56,1);
  border-color: rgba(0,224,211,0.6);
  transform: translateY(-1px);
}

/* On small screens, let the strip be more "bar-like" and scrollable */
@media (max-width: 720px) {
  .tooling-inner {
    border-radius: 16px;
    padding: 10px 12px;
    flex-direction: column;
    align-items: flex-start;
  }

  .tooling-list {
    width: 100%;
    overflow-x: auto;
  }
}
/* Category wrapper */
.tooling-category {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

/* Tiny category label */
.tooling-category-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  opacity: 0.85;
  padding-left: 4px;
}
.tooling-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  font-size: 13px;
}

/* Pills */
.tooling-list span {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  background: rgba(5,18,40,0.95);
  border: 1px solid rgba(168,183,204,0.35);
  color: var(--ink);
  white-space: nowrap;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease;
}

/* Outer container (already styled but refined here) */
.tooling-inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 24px;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  backdrop-filter: blur(4px);
}

/* Category block */
.tooling-category {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Tiny category tags */
.tooling-category-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--text-muted);
  opacity: 0.9;
  padding-left: 2px;
}

/* Pill wrapper */
.tooling-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}

/* Pills with emojis */
.tooling-list span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(10,20,40,0.78);
  border: 1px solid rgba(120,150,170,0.3);
  border-radius: 999px;
  font-size: 0.9rem;
  line-height: 1;
  backdrop-filter: blur(4px);

  /* transition for glow */
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.25s ease,
    transform 0.18s ease;
}

/* Hover: NUMERA glow */
.tooling-list span:hover {
  background: rgba(0,224,211,0.08);
  border-color: rgba(0,224,211,0.6);
  box-shadow: 0 0 14px rgba(0,224,211,0.4);
  transform: translateY(-2px);
}
.tooling-title {
  text-align: center;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 18px;
  opacity: 0.8;
}