/* ==========================================================================
   Components — buttons, tags, eyebrow labels, section headings, glass panels
   ========================================================================== */

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);
  font-size:13px; color:var(--teal);
  margin-bottom:18px;
}
.eyebrow::before{content:"$";color:var(--amber);}

.section-head{max-width:640px;margin-bottom:56px;}
.section-head.center{max-width:640px;margin-left:auto;margin-right:auto;text-align:center;}
.section-head h2{font-size:clamp(28px,4vw,42px);margin-bottom:14px;}
.section-head p{font-size:17px;}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;border-radius:100px;
  font-size:15px;font-weight:600;
  cursor:pointer;border:1px solid transparent;
  background:none;color:var(--text);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}
.btn-primary{background:var(--teal);color:var(--ink);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(76,224,210,0.55);}

.btn-outline{border-color:var(--line-strong);color:var(--text);background:rgba(255,255,255,0.02);}
.btn-outline:hover{border-color:var(--teal);color:var(--teal);}

.btn-amber{background:var(--amber);color:var(--ink);}
.btn-amber:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(255,133,82,0.5);}

.btn:disabled{opacity:0.55;cursor:not-allowed;transform:none !important;box-shadow:none !important;}
.btn-block{width:100%;justify-content:center;}

.tag{
  font-size:12px;color:var(--muted);padding:5px 10px;border-radius:100px;
  background:rgba(255,255,255,0.04);border:1px solid var(--line);
  font-family:var(--font-mono);
}
.tag-row{display:flex;gap:8px;flex-wrap:wrap;}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
  border-radius:4px;
}

/* ---- Glass surface: lets the fixed 3D mesh bleed through content ---- */
.glass-section{background:var(--glass);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.glass-card{
  background:var(--glass-alt);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

/* ---- Inner-page header (Services / Work / Process / About / Contact) ---- */
.page-hero{
  padding:calc(var(--nav-h) + 88px) 0 88px;
  position:relative;
  overflow:hidden;
  background:transparent;
}
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 60% at 12% 10%, rgba(76,224,210,0.12), transparent 60%),
    radial-gradient(ellipse 50% 50% at 90% 60%, rgba(255,133,82,0.09), transparent 60%);
}
.page-hero .container{position:relative;z-index:2;}
.page-hero .breadcrumb{
  font-family:var(--font-mono);font-size:13px;color:var(--muted);
  display:flex;align-items:center;gap:8px;margin-bottom:22px;
}
.page-hero .breadcrumb a:hover{color:var(--teal);}
.page-hero .breadcrumb .sep{color:var(--line-strong);}
.page-hero h1{font-size:clamp(32px,5vw,54px);max-width:760px;}
.page-hero p.lede{font-size:clamp(16px,1.8vw,18px);max-width:600px;margin-top:20px;}

/* ---- Toast ---- */
.toast{
  position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(120%);
  background:var(--surface-2);border:1px solid var(--line-strong);
  color:var(--text);padding:14px 22px;border-radius:100px;
  font-size:14px;box-shadow:var(--shadow-lg);
  z-index:400;transition:transform .35s cubic-bezier(.4,0,.2,1);
  display:flex;align-items:center;gap:10px;
}
.toast.show{transform:translateX(-50%) translateY(0);}
.toast.success{border-color:rgba(76,224,160,0.4);}
.toast.error{border-color:rgba(255,107,107,0.4);}
.toast-dot{width:8px;height:8px;border-radius:50%;background:var(--teal);flex-shrink:0;}
.toast.error .toast-dot{background:var(--error);}

/* ---- Scroll to top ---- */
.scroll-top{
  position:fixed;right:24px;bottom:24px;z-index:300;
  width:46px;height:46px;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--line-strong);color:var(--text);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, border-color .2s ease;
}
.scroll-top.visible{opacity:1;pointer-events:auto;transform:translateY(0);}
.scroll-top:hover{border-color:var(--teal);color:var(--teal);}

/* ---- Feature / service card (reused on Home preview + full Services page) ---- */
.feature-card{
  position:relative;
  padding:36px 32px;
  border-radius:var(--radius);
  background:var(--surface);
  border:1px solid var(--line);
  overflow:hidden;
  transition:transform .3s ease, border-color .3s ease, background .3s ease;
}
.feature-card:hover{
  transform:translateY(-6px);
  border-color:rgba(76,224,210,0.35);
  background:var(--surface-2);
}
.fc-icon{
  width:46px;height:46px;border-radius:12px;
  background:var(--teal-dim);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;margin-bottom:22px;
}
.feature-card h3{font-size:19px;margin-bottom:10px;}
.feature-card p.fc-desc{font-size:14.5px;margin-bottom:6px;}

.fc-hover-list{
  list-style:none;
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .35s ease, opacity .3s ease, margin .35s ease;
  margin-top:0;
}
.feature-card:hover .fc-hover-list,
.feature-card:focus-within .fc-hover-list{
  max-height:160px;
  opacity:1;
  margin-top:16px;
}
.fc-hover-list li{
  font-size:13px;color:var(--muted);
  padding:6px 0;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:8px;
}
.fc-hover-list li::before{content:"›";color:var(--teal);font-family:var(--font-mono);}

.fc-link{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:20px;font-size:13.5px;font-weight:600;color:var(--teal);
  transition:gap .2s ease;
}
.fc-link:hover{gap:10px;}

/* ---- Badges (used on cards) ---- */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:11.5px;
  padding:5px 11px;border-radius:100px;
  border:1px solid var(--teal-dim);color:var(--teal);
}
.badge.amber{border-color:var(--amber-dim);color:var(--amber);}