/* Clinical Clean — component styles (plain CSS, literal colors).
   Palette: emerald #0e9f6e / dark #0b7d57 · ink #10231d · muted #5a6b65
            line #e3ebe7 · surface #fff · bg #f5f8f6 */

body { -webkit-font-smoothing: antialiased; line-height: 1.6; }
h1, h2, h3, h4 { letter-spacing: -.02em; }

.navbar { border-bottom: 1px solid #e3ebe7; backdrop-filter: saturate(1.2) blur(10px);
  background: rgba(245,248,246,.85) !important; }
.navbar-brand { font-weight: 800; letter-spacing: -.02em; }
a { text-decoration: none; }

/* ---- buttons / pills ---- */
.btn-cc { display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:999px;
  font-weight:600; font-size:14px; transition:.15s; border:1px solid transparent; }
.btn-cc.primary { background:#0e9f6e; color:#fff; }
.btn-cc.primary:hover { background:#0b7d57; transform:translateY(-1px); color:#fff; }
.btn-cc.ghost { background:#fff; border-color:#e3ebe7; color:#10231d; }
.btn-cc.ghost:hover { border-color:#0e9f6e; color:#10231d; }

.pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.pill { font-size:12.5px; font-weight:500; color:#5a6b65; background:#fff;
  border:1px solid #e3ebe7; padding:6px 12px; border-radius:999px; }

/* ---- hero ---- */
.hero { padding:56px 0 20px; }
.hero-grid { display:grid; grid-template-columns:230px 1fr; gap:48px; align-items:center; }
.hero .avatar { width:230px; height:230px; border-radius:50%; object-fit:cover;
  box-shadow:0 1px 2px rgba(16,35,29,.04), 0 12px 30px -12px rgba(16,35,29,.18); border:5px solid #fff; }
.hero .eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600;
  color:#0b7d57; text-transform:uppercase; letter-spacing:.08em; margin-bottom:12px; }
.hero .eyebrow::before { content:""; width:7px; height:7px; border-radius:50%; background:#0e9f6e; }
.hero h1 { font-size:clamp(34px,5vw,52px); line-height:1.05; margin:0 0 14px; }
.hero .sub { font-size:18px; color:#5a6b65; max-width:46ch; margin:0 0 24px; }
.hero .sub b { color:#10231d; font-weight:600; }
.hero .cta { display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width:720px) {
  .hero-grid { grid-template-columns:1fr; text-align:center; gap:26px; }
  .hero .avatar { width:150px; height:150px; margin:0 auto; }
  .hero .cta, .pills { justify-content:center; }
  .hero .sub { margin-inline:auto; }
}

/* ---- section heads ---- */
.sec-head { display:flex; align-items:end; justify-content:space-between; margin:40px 0 22px; gap:16px; }
.sec-head h2 { font-size:26px; margin:0; }
.sec-head p { margin:4px 0 0; color:#5a6b65; font-size:14px; }

/* ---- cards (projects / generic) ---- */
.cc-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media (max-width:720px){ .cc-cards { grid-template-columns:1fr; } }
.cc-card { display:block; background:#fff; border:1px solid #e3ebe7; border-radius:1.1rem;
  padding:24px 26px; transition:.16s; color:inherit; }
.cc-card:hover { transform:translateY(-3px); box-shadow:0 18px 40px -22px rgba(16,35,29,.35); border-color:#d4e2db; }
.cc-card h3 { font-size:18px; margin:0 0 6px; }
.cc-card .kicker { font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#0b7d57; }
.cc-card p { color:#5a6b65; font-size:14.5px; margin:8px 0 0; }

/* ---- skill / IDE logo grid ---- */
.logo-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:16px; margin:8px 0 28px; }
.logo-grid .cell { background:#fff; border:1px solid #e3ebe7; border-radius:14px; min-height:104px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:18px 14px; transition:.16s; }
.logo-grid .cell:hover { transform:translateY(-3px); box-shadow:0 14px 30px -20px rgba(16,35,29,.4); border-color:#d4e2db; }
.logo-grid .cell img { height:42px; width:42px; object-fit:contain; }
.logo-grid .cell span { font-size:12.5px; font-weight:600; color:#5a6b65; }

/* ---- carousel ---- */
.carousel-cc { position:relative; }
.carousel-cc .viewport { overflow:hidden; border-radius:1.1rem; }
.carousel-cc .track { display:flex; transition:transform .45s cubic-bezier(.4,0,.15,1); }
.carousel-cc .slide { min-width:100%; display:grid; grid-template-columns:1.3fr 1fr;
  background:#fff; border:1px solid #e3ebe7; border-radius:1.1rem; overflow:hidden; }
.carousel-cc .slide__img { aspect-ratio:16/10; background:#eef3f1; border-right:1px solid #e3ebe7; }
.carousel-cc .slide__img img { width:100%; height:100%; object-fit:cover; display:block; }
.carousel-cc .slide__body { padding:30px 32px; display:flex; flex-direction:column; justify-content:center; }
.carousel-cc .slide__kicker { font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#0b7d57; }
.carousel-cc .slide__body h3 { margin:8px 0 10px; font-size:22px; }
.carousel-cc .slide__body p { margin:0 0 22px; color:#5a6b65; font-size:15px; }
.carousel-cc .open-link { align-self:flex-start; display:inline-flex; align-items:center; gap:8px; color:#0b7d57; font-weight:600; font-size:14px; }
.carousel-cc .open-link svg { transition:.15s; }
.carousel-cc .open-link:hover svg { transform:translateX(4px); }
@media (max-width:720px){
  .carousel-cc .slide { grid-template-columns:1fr; }
  .carousel-cc .slide__img { border-right:0; border-bottom:1px solid #e3ebe7; }
}
.carousel-cc .nav-btn { position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px;
  border-radius:50%; background:#fff; border:1px solid #e3ebe7; box-shadow:0 12px 30px -12px rgba(16,35,29,.25);
  cursor:pointer; display:grid; place-items:center; color:#10231d; z-index:3; }
.carousel-cc .nav-btn:hover { border-color:#0e9f6e; color:#0b7d57; }
.carousel-cc [data-prev]{ left:-14px; } .carousel-cc [data-next]{ right:-14px; }
@media (max-width:720px){ .carousel-cc [data-prev]{left:6px;} .carousel-cc [data-next]{right:6px;} }
.carousel-cc .carousel__dots { display:flex; gap:8px; justify-content:center; margin-top:20px; }
.carousel-cc .carousel__dot { width:8px; height:8px; border-radius:50%; border:0; background:#e3ebe7; cursor:pointer; padding:0; transition:.2s; }
.carousel-cc .carousel__dot.is-active { background:#0e9f6e; width:24px; border-radius:999px; }

/* ---- book slide (featured publication inside the carousel) ---- */
.carousel-cc .slide--book .slide__img { padding:24px; display:flex; align-items:center; justify-content:center; }
.carousel-cc .slide--book .slide__img img { width:auto; max-width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 16px 32px rgba(16,35,29,.28)); }
@media (max-width:720px){
  .carousel-cc .slide--book .slide__img { aspect-ratio:auto; height:300px; }
}

/* ---- contact band (homepage footer CTA) ---- */
.contact-band { margin:64px 0 0; padding:56px 24px; border-radius:1.1rem;
  background:linear-gradient(135deg,#0e9f6e 0%,#0b7d57 100%);
  box-shadow:0 24px 60px -28px rgba(11,125,87,.6); text-align:center; }
.contact-band__inner { max-width:620px; margin:0 auto; }
.contact-band__eyebrow { display:inline-block; font-size:13px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(255,255,255,.8); margin-bottom:12px; }
.contact-band h2 { color:#fff; font-size:clamp(26px,3.5vw,34px); margin:0 0 12px; border:0; padding:0; }
.contact-band p { color:rgba(255,255,255,.88); font-size:16px; margin:0 auto 28px; max-width:46ch; }
.contact-band__actions { display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; justify-content:center; }
.btn-contact { display:inline-flex; align-items:center; gap:9px; background:#fff; color:#0b7d57;
  font-weight:600; font-size:15px; padding:11px 22px; border-radius:999px; transition:.16s; }
.btn-contact:hover { transform:translateY(-1px); box-shadow:0 12px 28px -12px rgba(16,35,29,.4); color:#0b7d57; }
.contact-band__loc { display:inline-flex; align-items:center; gap:8px; color:rgba(255,255,255,.9); font-size:15px; font-weight:500; }
.contact-band__social { display:flex; gap:14px; justify-content:center; margin-top:30px; }
.contact-band__social a { display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; transition:.16s; }
.contact-band__social a:hover { background:#fff; color:#0b7d57; transform:translateY(-2px); }
@media (max-width:720px){ .contact-band { padding:44px 18px; } }