/* ChannaHQ — 3-color theme: Ink, Paper, Accent */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Roboto+Slab:wght@400;700&display=swap');

:root{
  --ink:   #0b1220;  /* dark */
  --paper: #ffffff;  /* light */
  --accent:#3bc492;  /* brand */

  --header-h: 64px;
  --radius: 12px;

  --bs-primary: var(--accent);
}

/* Base */
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Roboto",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color: rgba(11,18,32,.86);
  background: var(--paper);
  line-height:1.6;
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
h1,h2,h3,h4,h5{color:var(--ink); margin:0 0 .5em}
h1{font-size:clamp(32px,6vw,56px)}
h2{font-size:clamp(24px,4.8vw,40px)}
p{font-size:clamp(15px,2.6vw,16px)}
a{color:var(--accent); text-decoration:none}
a:hover,a:focus{opacity:.85}

/* Sections */
.section{padding:clamp(32px,6vw,80px) 0}
section[id]{scroll-margin-top:calc(var(--header-h) + 16px)}

/* Buttons (accent only) */
.btn,
.btn-primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn:hover,.btn:focus,
.btn-primary:hover,.btn-primary:focus{background:rgba(59,196,146,.9); border-color:rgba(59,196,146,.9)}
.btn-outline-secondary{border:1.5px solid var(--ink); color:var(--ink); background:transparent}
.btn-outline-secondary:hover{background:var(--ink); color:#fff}

/* Fixed header */
#header{
  position:fixed; top:0; left:0; right:0; z-index:1030;
  background:transparent; backdrop-filter:saturate(160%) blur(6px);
  transition:background .2s ease, box-shadow .2s ease;
}
#header .nav-link{color:rgba(255,255,255,.9)}
#header .nav-link:hover{color:#fff}
#header.scrolled{background:rgba(255,255,255,.98); box-shadow:0 2px 6px rgba(15,23,42,.06)}
#header.scrolled .nav-link{color:var(--ink)}

/* Hero (solid dark) */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--ink); color:#fff;
  min-height:min(100svh,720px);
  display:grid; align-items:center; text-align:center;
  padding-top:calc(var(--header-h) + clamp(12px,3vw,24px));
}
.hero .display-5,.hero h1,.hero h2,.hero .lead{color:#fff}
.hero-divider{position:absolute; left:0; right:0; bottom:-1px; pointer-events:none}
.hero-divider svg{width:100%; height:auto; display:block}
.hero-divider path{fill:var(--paper)}

/* Work grid / overlay (uses ink only) */
.work{box-shadow:0 0 0 1px #fff; overflow:hidden; position:relative; border-radius:var(--radius)}
.work img{width:100%; height:100%; object-fit:cover}
.work .overlay{background:rgba(0,0,0,.55); position:absolute; inset:0; opacity:0; transition:opacity .3s}
.work .overlay-caption{position:absolute; inset:0; display:grid; place-content:center; text-align:center; padding:clamp(12px,2.8vw,24px)}
.work h5,.work p,.work img{transition:transform .35s, opacity .35s}
.work h5,.work p{color:#fff; margin:0; opacity:0}
.work h5{margin-bottom:6px; transform:translateY(-16px)}
.work p{transform:translateY(16px)}
.work-box:hover img{transform:scale(1.06)}
.work-box:hover .overlay{opacity:1}
.work-box:hover .overlay h5,.work-box:hover .overlay p{opacity:1; transform:none}

/* Badges tinted from accent */
.badge{border-radius:9999px; padding:.5rem .75rem; font-weight:500}
.badge.bg-secondary{
  background:color-mix(in srgb, var(--accent) 15%, white);
  color:var(--ink);
  border:1px solid color-mix(in srgb, var(--accent) 35%, white);
}

/* Contact strip */
.hireme{background:#f8fafc}
.hireme p{color:var(--ink)}

/* Footer */
.footer{text-align:center}
.footer p{font-size:11px; color:rgba(11,18,32,.6); letter-spacing:2px; text-transform:uppercase; margin:0}
.footer a{color:rgba(11,18,32,.6)}
.footer a:hover{color:var(--accent)}

/* Motion safety */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .work img,.work h5,.work p{transition:none !important}
}