/* ========== Base ========== */
:root{
  --bg:#070812;
  --panel:#0b0d14;
  --text:#f3f4f6;
  --muted:#9ca3af;
  --border: rgba(255,255,255,.10);
  --border2: rgba(255,255,255,.06);
  --indigo:#6366f1;
  --purple:#a855f7;
  --green:#22c55e;
  --blue:#3b82f6;
  --pink:#ec4899;
  --yellow:#facc15;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  overflow-x:hidden;

  background:
    radial-gradient(900px 520px at 14% 10%, rgba(99,102,241,.22), transparent 60%),
    radial-gradient(880px 520px at 88% 18%, rgba(168,85,247,.18), transparent 60%),
    radial-gradient(1100px 650px at 50% 90%, rgba(59,130,246,.10), transparent 60%),
    var(--bg);
  position: relative;
}

/* Subtle binary “0/1” texture overlay */
body::before{
  content:"0101010010010100101001010010100101010010010100101001010010100101010010010100";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 14px;

  color: rgba(110,231,183,.12);
  white-space: pre-wrap;
  overflow: hidden;

  transform: rotate(-12deg) scale(1.25);
  opacity: .22;
  filter: blur(.25px);
}

/* Soft grain overlay */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .06;
  mix-blend-mode: overlay;
  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='.35'/%3E%3C/svg%3E");
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.hidden{ display:none !important; }
.center{ text-align:center; }
.maxw{ max-width: 720px; margin: 0.75rem auto 0; }

/* Your gradients (kept) */
.text-gradient{
  background: linear-gradient(to right, var(--indigo), var(--purple));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.btn-gradient{ background: linear-gradient(to right, var(--indigo), var(--purple)); }

/* ========== Layout helpers ========== */
.container{
  width:min(1120px, 100% - 48px);
  margin-inline:auto;
}

.container--narrow{ width:min(820px, 100% - 48px); }

.section{ padding: 64px 0; }
.section--dark{ background: transparent; }
.section--alt{ background: rgba(255,255,255,.02); }

.section-header{ margin-bottom: 56px; }
.h2{
  margin: 12px 0 0;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.1;
}
.h3{
  margin: 0 0 20px;
  font-size: 1.8rem;
}

.p{ line-height:1.75; }
.muted{ color: var(--muted); }
.p--spaced{ margin-top: 20px; }


/* ========== Header / Nav ========== */
.site-header{
  position:sticky;
  top:0;
  z-index:40;
  background: var(--bg);
  border-bottom:1px solid var(--border);
}

.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 16px 0;
}

.brand{
  font-weight:800;
  font-size: 1.2rem;
  color:#fff;
}

.nav{ display:flex; align-items:center; gap: 16px; }

.nav__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap: 28px;
  font-weight:600;
  color: #cbd5e1;
}

.nav__link{
  transition: color .2s ease;
}
.nav__link:hover{ color: #a5b4fc; }

.nav__mobile-btn{
  display:none;
  background:transparent;
  border:0;
  color:#cbd5e1;
  font-size: 1.2rem;
  cursor:pointer;
}
.nav__mobile-btn:hover{ color:#a5b4fc; }

.mobile-menu{
  border-top:1px solid var(--border);
  background: var(--bg);
}
.mobile-menu__list{
  list-style:none;
  margin:0;
  padding: 16px;
  display:flex;
  flex-direction:column;
  gap: 14px;
  font-weight:600;
  color:#cbd5e1;
}

/* Navigation container with rounded corners and glow */
.nav {
  background: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
  border-radius: 50px; /* Rounded corners */
  padding: 12px 30px;
  box-shadow: 
    0 0 20px rgba(165, 180, 252, 0.5),
    0 0 40px rgba(165, 180, 252, 0.3),
    0 0 60px rgba(165, 180, 252, 0.1);
}

/* Navigation list */
.nav__list {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

/* Navigation links */
.nav__link {
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 25px;
  transition: all 0.3s ease;
}

/* Hover effect with purple glow */
.nav__link:hover {
  background: rgba(165, 180, 252, 0.2);
  box-shadow: 0 0 15px rgba(165, 180, 252, 0.6);
}

/* Mobile menu button */
.nav__mobile-btn {
  background: transparent;
  border: 2px solid #a5b4fc;
  color: #a5b4fc;
  padding: 10px 15px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav__mobile-btn:hover {
  background: rgba(165, 180, 252, 0.2);
  box-shadow: 0 0 15px rgba(165, 180, 252, 0.6);
}

/* ========== Kickers ========== */
.kicker{
  display:inline-block;
  font-weight:800;
  letter-spacing: .38em;
  text-transform:uppercase;
  font-size: .72rem;
}
.kicker--indigo{ color:#a5b4fc; }
.kicker--rule{
  color: #e5e7eb;
  position:relative;
  padding: 0 14px;
}
.kicker--rule::before,
.kicker--rule::after{
  content:"";
  display:inline-block;
  width: 44px;
  height:1px;
  background: rgba(255,255,255,.35);
  vertical-align: middle;
  margin: 0 12px;
}
@media (max-width: 640px){
  .kicker--rule::before,
  .kicker--rule::after{ display:none; }
}

/* ========== Skills ========== */
.skills-block{ width:min(900px,100%); margin: 0 auto 60px; }
.skillbars{ display:flex; flex-direction:column; gap: 18px; }
.skillbar__row{ display:flex; justify-content:space-between; font-weight:800; font-size:.9rem; }
.skillbar__pct{ color:#a5b4fc; }
.skillbar__track{
  height: 8px;
  background: rgba(255,255,255,.05);
  border-radius: 999px;
  overflow:hidden;
}
.skillbar__fill{
  height:100%;
  background: linear-gradient(to right, var(--indigo), var(--purple));
  border-radius: 999px;
}


   /* =========================================
   Tools Grid Layout
   ========================================= */
.tools-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.tools-block{
  margin-top: 40px;
}

/* Tablet */
@media (max-width: 1100px){
  .tools-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Mobile */
@media (max-width: 640px){
  .tools-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}



/* ========== Services ========== */
.services-grid{
  display:grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width: 1100px){
  .services-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .services-grid{ grid-template-columns: 1fr; }
}

/* Base card: NO rounded boundary, NO visible border */
.service-card{
  padding: 26px;
  border-radius: 0;                /* remove rounding */
  border: 0;                       /* remove boundary */
  background: transparent;          /* looks natural */
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  text-align:center;
}

/* Keep lift on hover */
.service-card:hover{
  transform: translateY(-6px);
}

/* Icons: default (will be overridden per type below) */
.service-card__icon{
  font-size: 2rem;
  margin-bottom: 16px;
  opacity: .95;
}

/* Text */
.service-card__kicker{
  font-size:.65rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  font-weight:800;
  margin:0 0 10px;
  color:#e5e7eb;
}
.service-card__title{
  margin:0 0 14px;
  font-size: 1.15rem;
}
.service-card__list{
  margin:0;
  padding-left: 18px;
  text-align:left;
  color: #cbd5e1;
  line-height:1.6;
}

/* ===== Icon colors per card type (different colors, not uniform blue) ===== */
.service-card--green  .service-card__icon{ color: #34d399; } /* green */
.service-card--blue   .service-card__icon{ color: #60a5fa; } /* blue */
.service-card--orange .service-card__icon{ color: #fb923c; } /* orange */
.service-card--pink   .service-card__icon{ color: #f472b6; } /* pink */
.service-card--amber  .service-card__icon{ color: #fbbf24; } /* amber */
.service-card--violet .service-card__icon{ color: #a78bfa; } /* violet */
.service-card--red    .service-card__icon{ color: #fb7185; } /* red */

/* ===== Hover glows (kept as you had them) ===== */
.service-card--green:hover{
  box-shadow: 0 0 25px rgba(0,167,111,.45);
  background: linear-gradient(90deg, rgba(0,167,111,.30), rgba(0,194,127,.22));
}
.service-card--blue:hover{
  box-shadow: 0 0 25px rgba(30,144,255,.40);
  background: linear-gradient(90deg, rgba(30,144,255,.26), rgba(58,160,255,.18));
}
.service-card--orange:hover{
  box-shadow: 0 0 25px rgba(255,127,80,.35);
  background: linear-gradient(90deg, rgba(255,127,80,.26), rgba(255,159,107,.18));
}
.service-card--pink:hover{
  box-shadow: 0 0 25px rgba(255,105,180,.35);
  background: linear-gradient(90deg, rgba(255,105,180,.22), rgba(255,133,192,.16));
}
.service-card--amber:hover{
  box-shadow: 0 0 25px rgba(255,165,0,.35);
  background: linear-gradient(90deg, rgba(255,165,0,.24), rgba(255,193,77,.16));
}
.service-card--violet:hover{
  box-shadow: 0 0 25px rgba(138,43,226,.35);
  background: linear-gradient(90deg, rgba(138,43,226,.22), rgba(162,79,240,.16));
}
.service-card--red:hover{
  box-shadow: 0 0 25px rgba(255,69,0,.35);
  background: linear-gradient(90deg, rgba(255,69,0,.22), rgba(255,110,61,.16));
}


/* ========== Projects ========== */
.projects-grid{
  display:grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 1100px){
  .projects-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .projects-grid{ grid-template-columns: 1fr; }
}

.project{
  position:relative;
  height: 260px;
  overflow:hidden;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  cursor:pointer;
}
.project__img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition: transform .5s ease;
}
.project:hover .project__img{ transform: scale(1.1); }

.project__overlay{
  position:absolute;
  inset:0;
  z-index: 3;
  padding: 20px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background: rgba(0,0,0,.72);
  opacity:0;
  transition: opacity .35s ease;
}
.project:hover .project__overlay{ opacity:1; }

.project__tag{ color:#c084fc; font-weight:800; font-size:.85rem; }
.project__title{ margin: 6px 0 6px; font-size: 1.15rem; }
.project__desc{ margin:0; color:#e5e7eb; font-size:.9rem; }
.project__tools{ margin-top: 10px; color:#9ca3af; font-size:.85rem; }
.project__tools h4{ margin:0 0 6px; color:#a5b4fc; }
.project__tools ul{ margin:0; padding-left: 18px; }
.project__link{ margin-top: 10px; font-weight:800; color:#a5b4fc; }

/* DEFAULT VIEW (type label) */
.project__front{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  padding: 18px;
  background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,.10), transparent);
  pointer-events: none;
}

.project__type{
  margin: 0;
  font-size: 1.05rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: .2px;
}

/* When you hover: hide the type label and show overlay */
.project:hover .project__front{
  opacity: 0;
  transition: opacity .25s ease;
}

/* ===== Testimonials Slider (2 at a time) ===== */
.twrap{
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 14px;
}

.tviewport{
  overflow: hidden;
  border-radius: 26px;
}

.ttrack{
  display: flex;
  gap: 18px;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

/* 2 cards visible on desktop */
.tcard{
  flex: 0 0 calc((100% - 18px) / 2);
  border-radius: 24px;
  padding: 26px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
  min-height: 220px;
  position: relative;
}

/* Big quote marks */
.tquote{
  margin: 0 0 18px;
  color: #e5e7eb;
  line-height: 1.75;
  position: relative;
  padding: 8px 6px;
}

.tquote::before{
  content: "“";
  position: absolute;
  left: -8px;
  top: -18px;
  font-size: 64px;
  line-height: 1;
  opacity: .18;
  color: rgba(255,255,255,.9);
}

.tquote::after{
  content: "”";
  position: absolute;
  right: -6px;
  bottom: -40px;
  font-size: 64px;
  line-height: 1;
  opacity: .12;
  color: rgba(255,255,255,.9);
}

.twho{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.tavatar{
  width: 48px;
  height: 48px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

.tname{ font-weight: 900; color: #fff; }
.trole{ color: #cbd5e1; font-size: .85rem; }

/* colored variants (matches your old ones) */
.tcard--indigo{ border-color: rgba(99,102,241,.22); background: rgba(49,46,129,.25); }
.tcard--red{ border-color: rgba(248,113,113,.22); background: rgba(127,29,29,.20); }
.tcard--teal{ border-color: rgba(45,212,191,.22); background: rgba(19,78,74,.20); }
.tcard--yellow{ border-color: rgba(250,204,21,.18); background: rgba(113,63,18,.14); }

/* Arrow buttons */
.tbtn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.tbtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(99,102,241,.35);
}

/* Dots */
.tdots{
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}
.tdot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.25);
  border: 0;
  cursor: pointer;
}
.tdot.is-active{
  width: 22px;
  background: rgba(99,102,241,.75);
}

/* Responsive: show 1 card on small screens */
@media (max-width: 900px){
  .twrap{ grid-template-columns: 44px 1fr 44px; }
  .tcard{ flex-basis: 100%; }
}

/* ========== Pricing ========== */
.pricing-grid{
  display:grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 1100px){
  .pricing-grid{ grid-template-columns: 1fr; }
}

.price{
  position: relative;
  border-radius: 24px;
  padding: 26px;

  /* REMOVE boundary */
  border: 0;

  /* Keep it natural / glassy */
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;

  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

/* OPTIONAL: If you feel the top strip looks like a boundary, delete this whole block.
   If you like it, keep it as an accent. */
.price__top{
  position:absolute;
  left:0; top:0; right:0;
  height: 4px;
  background: linear-gradient(to right, var(--indigo), var(--purple));
  opacity: .9;
}

/* REMOVE the gradient border feel completely */
.price::before{ content:none; }

.price:hover{
  transform: translateY(-4px);
  box-shadow:
    0 24px 70px rgba(0,0,0,.40),
    0 0 40px rgba(99,102,241,.10);

  /* subtle hover lift without looking like a "card border" */
  background: rgba(255,255,255,.06);
}

.price h3{ margin: 4px 0 6px; }

.price ul{
  margin:0;
  padding-left: 18px;
  color:#cbd5e1;
  line-height:1.7;
}

/* ========== Price value gradient (KSh 10,000 etc.) ========== */
.price__value{
  font-size: 2.1rem;
  font-weight: 900;
  margin: 14px 0 16px;

  background: linear-gradient(to right, var(--indigo), var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Popular */
.price--popular{
  box-shadow: 0 0 60px rgba(99,102,241,.12);
}

/* Badge (this is fine to keep) */
.price__badge{
  position:absolute;
  top: 14px;
  right: 14px;
  background: linear-gradient(to right, var(--indigo), var(--purple));
  color:#fff;
  font-weight:800;
  font-size:.75rem;
  padding: 7px 10px;
  border-radius: 999px;

  /* reduce "badge boundary" */
  border: 0;
}

/* ========== Buttons: transparent border + gradient on hover ========== */
.btn--clear{
  background: transparent;
  border: 1px solid rgba(255,255,255,.22);
  color: #e5e7eb;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, background .25s ease, border-color .25s ease, color .25s ease;
}

/* Desktop hover: gradient appears */
@media (hover: hover) and (pointer: fine){
  .btn--clear:hover{
    border-color: transparent;
    background: linear-gradient(to right, var(--indigo), var(--purple));
    color: #fff;
    box-shadow: 0 0 26px rgba(99,102,241,.20);
    transform: translateY(-1px);
  }
}

/* Mobile/touch: show gradient on tap/active */
@media (hover: none) and (pointer: coarse){
  .btn--clear:active{
    border-color: transparent;
    background: linear-gradient(to right, var(--indigo), var(--purple));
    color: #fff;
  }
}

/* Keyboard focus */
.btn--clear:focus-visible{
  outline: none;
  border-color: rgba(99,102,241,.55);
  box-shadow: 0 0 0 4px rgba(99,102,241,.18);
}


/* ========== Hire CTA ========== */
.hire{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items:center;
}
@media (max-width: 980px){
  .hire{ grid-template-columns: 1fr; text-align:center; }
}
.hire__img img{
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  transition: transform .35s ease;
}
.hire__img img:hover{ transform: scale(1.04); }
.hire__content{ display:flex; flex-direction:column; gap: 14px; }

/* ========== Contact ========== */
.contact-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 44px;
  align-items:start;
}
@media (max-width: 980px){
  .contact-grid{ grid-template-columns: 1fr; }
}

.form{ display:flex; flex-direction:column; gap: 14px; }
.form__row{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px){ .form__row{ grid-template-columns: 1fr; } }

.field{
  width:100%;
  padding: 14px 16px;
  border-radius: 14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.05);
  color:#fff;
  outline:none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field::placeholder{ color: #6b7280; }
.field:focus{
  border-color: rgba(99,102,241,.9);
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.field--textarea{ resize:none; min-height: 160px; }

.success{
  margin-top: 22px;
  padding: 24px;
  border-radius: 18px;
  border:1px solid rgba(34,197,94,.3);
  background: rgba(255,255,255,.05);
  text-align:center;
  animation: successPop .6s ease forwards;
}
.success__icon{
  width:56px; height:56px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 0 auto 12px;
  background: rgba(34,197,94,.18);
  color: #86efac;
  font-size: 1.3rem;
}
@keyframes successPop{
  0%{ opacity:0; transform:scale(.92); }
  100%{ opacity:1; transform:scale(1); }
}

.info-list{ display:flex; flex-direction:column; gap: 18px; margin-top: 18px; }
.info{ display:flex; align-items:flex-start; gap: 14px; }
.info__icon{
  width: 40px; height: 40px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
}
.info__title{ font-weight:900; color:#fff; margin-bottom: 4px; }
.info__icon--indigo{ color:#a5b4fc; }
.info__icon--green{ color:#86efac; }
.info__icon--yellow{ color:#fde68a; }
.info__icon--pink{ color:#f9a8d4; }

/* ========== Footer ========== */
.site-footer{
  border-top:1px solid var(--border2);
  background: var(--bg);
  padding: 26px 0;
}
.footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  flex-wrap:wrap;
}
.footer__copy{ color:#6b7280; font-size:.9rem; }
.footer__copy strong{ color:#fff; }
.footer__social{ display:flex; gap: 12px; }

/* ========== Responsive nav switch ========== */
@media (max-width: 768px){
  .nav__list--desktop{ display:none; }
  .nav__mobile-btn{ display:inline-flex; }
  .hero__grid{ grid-template-columns: 1fr; }
}


/* ===== Prevent horizontal scroll (safe) ===== */
html, body {
  overflow-x: hidden;
}

/* ===== Intro name glow (used by JS: glow-once) ===== */
@keyframes nameGlow {
  0%   { text-shadow: 0 0 0 rgba(99,102,241,0); }
  50%  {
    text-shadow:
      0 0 12px rgba(99,102,241,0.9),
      0 0 24px rgba(168,85,247,0.7);
  }
  100% { text-shadow: 0 0 0 rgba(99,102,241,0); }
}

.glow-once {
  animation: nameGlow 0.9s ease-in-out;
}

/* ===== Float animation (if you use .animate-float anywhere) ===== */
@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
.animate-float { animation: float 3s ease-in-out infinite; }

/* ===== Pricing button effect (only if you use .pricing-btn) ===== */
.pricing-btn {
  position: relative;
  overflow: hidden;
}
.pricing-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center,
    rgba(255,255,255,0.25),
    transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.pricing-btn:hover::after { opacity: 1; }
.pricing-btn:hover {
  box-shadow: 0 0 30px rgba(99,102,241,0.6);
  transform: translateY(-1px);
}

/* Fix double-scrollbar: ensure ONLY the page scrolls */
html, body {
  height: auto;
  overflow-y: auto;
}

.page {
  height: auto;
  min-height: 100vh;
  overflow: visible;
}

/* ===== Tools (Platforms & Tools) cards ===== */
.tools-grid{
  margin-top: 22px;
  gap: 20px;
  align-items: stretch;
}

.skill-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 22px 18px;
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-height: 170px;
  backdrop-filter: blur(8px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.skill-card:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 14px 40px rgba(124,92,255,.28);
}

.icon{
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
}

.icon img{
  width: 34px;
  height: 34px;
}

.icon img.is-logo{
  width: 40px;
  height: 40px;
}

.title{
  font-size: .95rem;
  font-weight: 700;
  margin: 0;
}

.percent{
  font-size: .85rem;
  font-weight: 700;
  color: #c7c7e6;
  margin: 0;
}

/* ===== About polish (no card) ===== */
#about .container{ max-width: 920px; }

#about .kicker{
  color:#a5b4fc;
  letter-spacing:.45em;
  font-weight:800;
}

#about .h2{
  margin-top: 12px;
  line-height: 1.05;
}

#about .p{
  max-width: 760px;
  margin: 18px auto 0;
  font-size: 1.05rem;
  line-height: 1.9;
  color: rgba(243,244,246,.78);
}

#about .p br + br{ margin-top: 14px; display:block; }

/* =========================================================
   HERO + TERMINAL (FULL OVERRIDE)

/* Make hero feel bigger, wider, and dominant */
.hero{
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: 56px 0;
  overflow: hidden;
}

/* Wider container only for hero */
.hero .container{
  width: min(1320px, 100% - 56px);
  margin-inline: auto;
}

/* Background blobs */
.hero__bg{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__blob{
  position: absolute;
  border-radius: 999px;
  filter: blur(70px);
  opacity: .40;
}

.hero__blob--indigo{
  top: 60px;
  left: 40px;
  width: 360px;
  height: 360px;
  background: rgba(99,102,241,.22);
}

.hero__blob--purple{
  bottom: 60px;
  right: 40px;
  width: 460px;
  height: 460px;
  background: rgba(168,85,247,.18);
}

.hero__inner{ position: relative; z-index: 2; }

/* Bigger layout: content dominates */
.hero__grid{
  display: grid;
  grid-template-columns: 1.35fr .9fr;
  gap: 56px;
  align-items: center;
}

/* Left column spacing */
.hero__left{
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Badge slightly bigger */
.badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: #a5b4fc;
  font-weight: 600;
  font-size: .95rem;
}

/* Title scaling */
.hero__title{
  margin: 0;
  font-weight: 800;
  line-height: 1.04;
}

.hero__hello{
  display: block;
  color: #d1d5db;
  font-weight: 600;
  margin-bottom: 10px;
  font-size: 1.25rem;
}

.hero__name{
  display: block;
  font-size: clamp(2.8rem, 5.2vw, 5.2rem);
  color: #fff;
  letter-spacing: -0.02em;
}

.hero__role{
  display: block;
  margin-top: 14px;
  color: #a5b4fc;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
}

.hero__subtitle{
  margin: 0;
  color: #9ca3af;
  font-size: 1.25rem;
  max-width: 680px;
  line-height: 1.7;
}

/* CTA bigger */
.hero__cta{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 24px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 1rem;
  border: 1px solid transparent;
  transition: transform .2s ease, opacity .2s ease, border-color .2s ease, background-color .2s ease;
}

.btn:hover{ transform: translateY(-1px); }

.btn--pill{ border-radius: 999px; }
.btn--gradient{ background: linear-gradient(to right, #6366f1, #a855f7); color: #fff; }
.btn--ghost{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); color: #fff; }
.btn--block{ width: 100%; }
.btn--outline{ background: transparent; border-color: rgba(99,102,241,.7); color: #a5b4fc; }
.btn--outline:hover{ background: rgba(99,102,241,.18); }

/* Social buttons */
.social{ display: flex; gap: 14px; flex-wrap: wrap; }

.icon-btn{
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
  font-size: 1rem;
}

.icon-btn:hover{
  transform: translateY(-1px);
  color: #fff;
}

.icon-btn--indigo{ color: #a5b4fc; }
.icon-btn--indigo:hover{ border-color: #6366f1; box-shadow: 0 0 18px rgba(99,102,241,.55); }

.icon-btn--green{ color: #86efac; }
.icon-btn--green:hover{ border-color: #22c55e; box-shadow: 0 0 18px rgba(34,197,94,.55); }

.icon-btn--blue{ color: #93c5fd; }
.icon-btn--blue:hover{ border-color: #3b82f6; box-shadow: 0 0 18px rgba(59,130,246,.55); }

.icon-btn--pink{ color: #f9a8d4; }
.icon-btn--pink:hover{ border-color: #ec4899; box-shadow: 0 0 18px rgba(236,72,153,.55); }


/* =========================================================
   TERMINAL — NATURAL / NO VISIBLE BORDER
   ========================================================= */

.terminal{
  position: relative;
  border-radius: 22px;
  overflow: hidden;

  border: none !important;                 /* remove visible boundary */
  background: rgba(18, 20, 26, .16);       /* blend into hero */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  /* ambient depth without “card outline” */
  box-shadow:
    0 28px 90px rgba(0,0,0,.42),
    0 12px 30px rgba(0,0,0,.22);
}

.terminal__bar{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;

  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.04);
}

.dot{ width: 12px; height: 12px; border-radius: 999px; display: inline-block; }
.dot--red{ background: #ff5f56; }
.dot--yellow{ background: #ffbd2e; }
.dot--green{ background: #27c93f; }

.terminal__path{
  margin-left: 8px;
  font-size: .78rem;
  color: rgba(255,255,255,.74);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.terminal__body{
  padding: 24px 18px;
  min-height: 460px;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255,255,255,.84);
  background: transparent !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

/* subtle grain so it feels less “designed” */
.terminal::after{
  content:"";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .055;
  mix-blend-mode: overlay;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 980px){
  .hero__grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .hero{
    min-height: auto;
    padding: 40px 0;
  }
  .hero .container{
    width: min(1120px, 100% - 28px);
  }
  .terminal__body{
    min-height: 380px;
  }
}

/* ===== Kicker with dashes (About Me fix) ===== */
.kicker-line{
  display: inline-flex;
  align-items: center;
  gap: 14px;

  font-weight: 800;
  letter-spacing: .38em;
  text-transform: uppercase;
  font-size: 12px;

  color: #a5b4fc; /* indigo-ish */
}

.kicker-line::before,
.kicker-line::after{
  content: "";
  height: 1px;
  width: 44px;
  background: rgba(255,255,255,.35);
  display: inline-block;
}

/* hide lines on very small screens (optional, matches your other kicker behavior) */
@media (max-width: 640px){
  .kicker-line::before,
  .kicker-line::after{ display:none; }
}

/* ===== Binary tech background ===== */
.hero{ position:relative; overflow:hidden; }

.binary-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
  pointer-events:none;
  opacity:.28;
}

.hero__inner{ position:relative; z-index:1; }
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }

/* TEMP: remove hero colored blobs */
.hero__bg{ display:none !important; }