:root {
  /* Backgrounds & Surfaces */
  --bg:        #f5f1e9;
  --bg2:       #ede8dc;
  --card:      #ffffff;
  --line:      #e3dcd1;
  --line2:     #c8c0b3;

  /* Typography */
  --ink:       #141210;
  --ink2:      #28251e;
  --muted:     #58544e;
  --muted2:    #96918b;

  /* Brand Green */
  --green:     #0f6642;
  --green-d:   #0b5035;
  --green-m:   #1a7a4c;
  --green-lt:  #e5f3ec;
  --green-xl:  #f0f9f4;

  /* WhatsApp */
  --wa:        #1faa55;
  --wa-d:      #178f47;

  /* AI Services Section Tokens */
  --ai-bg:         #f1faf5;
  --ai-card:       #ffffff;
  --ai-brd:        #cde9da;
  --ai-stat-bg:    #e5f3ec;
  --ai-accent:     #0f6642;
  --ai-accent-lt:  #e5f3ec;
  --ai-accent-m:   #1a7a4c;
  --ai-text:       #28251e;
  --ai-muted:      #58544e;
  --ai-stat-num:   #0f6642;
  --ai-tool-bg:    #e5f3ec;
  --ai-tool-text:  #0b5035;
  --ai-result:     #0f6642;

  /* Fonts */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'DM Sans', -apple-system, sans-serif;

  /* Type Scale */
  --xs:   0.70rem;
  --sm:   0.82rem;
  --base: 0.9375rem;
  --md:   1.05rem;
  --lg:   1.2rem;
  --xl:   1.45rem;
  --2xl:  1.85rem;
  --3xl:  2.3rem;
  --hero: 2.8rem;

  /* Shadows — multi-layer warm */
  --sh:  0 1px 2px rgba(20,18,12,.04), 0 4px 16px rgba(20,18,12,.07);
  --sh2: 0 2px 8px rgba(20,18,12,.05), 0 12px 40px rgba(20,18,12,.11);
  --sh3: 0 4px 16px rgba(20,18,12,.06), 0 24px 64px rgba(20,18,12,.14);

  /* Radius */
  --r:  10px;
  --r2: 18px;
  --r3: 26px;
  --r4: 34px;
}


/* ════════════════════════════════════════════════════════════
   COMPONENT: reset.css  — Reset & Base
════════════════════════════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--base);
  line-height: 1.78;
  color: var(--muted);
  background-color: var(--bg);
  background-image: radial-gradient(rgba(20,18,12,.032) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1;
}
img { display: block; max-width: 100%; }
a  { text-decoration: none; color: inherit; }
button, input, textarea, select { font: inherit; }
button { border: none; background: none; cursor: pointer; }


/* ════════════════════════════════════════════════════════════
   COMPONENT: sidebar.css
════════════════════════════════════════════════════════════ */
.sidebar {
  position: fixed; left: 18px; top: 20px; bottom: 20px; width: 300px;
  border: 1px solid var(--line); border-radius: var(--r4);
  background: linear-gradient(180deg, #fff 0%, #fdfcfb 100%);
  padding: 24px 22px 20px;
  display: flex; flex-direction: column; gap: 0;
  z-index: 200; box-shadow: var(--sh3); overflow-y: auto;
  scrollbar-width: none; -ms-overflow-style: none;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.sidebar::-webkit-scrollbar { display: none; }

@media (max-width: 860px) {
  .sidebar {
    left: 0; top: 0; bottom: 0; width: 290px;
    border-radius: 0 var(--r3) var(--r3) 0;
    transform: translateX(-100%); box-shadow: none;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 6px 0 48px rgba(20,18,12,.22);
  }
}

.sb-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(20,18,12,.5); z-index: 190;
  backdrop-filter: blur(2px); opacity: 0; transition: opacity .3s ease;
}
.sb-overlay.open { display: block; opacity: 1; }

.sb-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.sb-logo { font-family: var(--font-display); font-size: var(--xl); color: var(--ink); letter-spacing: -.01em; }
.sb-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--green); background: var(--green-lt); padding: 4px 10px; border-radius: 99px;
  display: flex; align-items: center; gap: 5px;
}
.sb-badge::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green-m); box-shadow: 0 0 0 3px rgba(28,125,79,.22);
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

.sb-avatar-block { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.sb-avatar {
  width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--green), var(--green-m));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: var(--lg); letter-spacing: -.01em;
}
.sb-name  { font-size: var(--base); font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.sb-title { font-size: var(--xs); color: var(--muted); line-height: 1.5; }

.sb-divider { border: none; border-top: 1px solid var(--line); margin: 14px 0; }

.sb-contact-block { margin-bottom: 14px; }
.sb-contact-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--line);
  font-size: var(--sm); font-weight: 500; color: var(--ink2); transition: color .18s;
}
.sb-contact-item:last-child { border-bottom: none; }
.sb-contact-item i  { color: var(--green); width: 16px; font-size: 13px; flex-shrink: 0; }
.sb-contact-item:hover { color: var(--green); }
.sb-location { display: flex; align-items: center; gap: 7px; font-size: var(--xs); color: var(--muted2); padding-top: 8px; }
.sb-location i { font-size: 11px; }

/* Sidebar section navigation — shown only inside mobile sidebar */
.sb-nav { display: none; flex-direction: column; gap: 1px; margin: 0 -4px 4px; }
.sb-nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 8px;
  font-size: var(--sm); font-weight: 500; color: var(--muted);
  transition: background .15s, color .15s;
}
.sb-nav-link i { width: 15px; text-align: center; font-size: 12px; color: var(--green); flex-shrink: 0; }
.sb-nav-link span { flex: 1; }
.sb-nav-link:hover { background: var(--green-xl); color: var(--ink2); }
.sb-nav-link.active { background: var(--green-lt); color: var(--green); font-weight: 600; }
.sb-nav-link.active i { color: var(--green-d); }
/* Second divider (between nav and socials) — hidden on desktop, visible on mobile */
.sb-nav-sep { display: none; }

.socials { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.socials a {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink2); font-size: 13px; transition: .18s;
}
.socials a:hover { background: var(--green); color: #fff; border-color: var(--green); transform: translateY(-2px); }

.sb-copyright { font-size: 10px; color: var(--muted2); margin-bottom: 12px; }
.sb-ctas { display: flex; flex-direction: column; gap: 9px; margin-top: auto; padding-top: 12px; }


/* ════════════════════════════════════════════════════════════
   COMPONENT: buttons.css
════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: var(--r); font-family: inherit; border: none; background: none;
  font-family: var(--font-body); font-weight: 600; font-size: var(--base); line-height: 1;
  transition: .2s; white-space: nowrap; position: relative; overflow: hidden;
}
.btn-full { width: 100%; }
.btn-primary {
  background: linear-gradient(150deg, var(--green-m) 0%, var(--green) 55%, var(--green-d) 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(15,102,66,.22), 0 6px 20px rgba(15,102,66,.18);
  letter-spacing: .01em;
}
.btn-primary:hover {
  background: linear-gradient(150deg, var(--green) 0%, var(--green-d) 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(15,102,66,.28), 0 12px 32px rgba(15,102,66,.22);
}
.btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg,transparent,rgba(255,255,255,.18),transparent);
  transform: translateX(-130%); transition: transform .45s;
}
.btn-primary:hover::after { transform: translateX(130%); }
.btn-wa  { background: var(--wa); color: #fff; box-shadow: 0 2px 12px rgba(31,170,85,.22); }
.btn-wa:hover  { background: var(--wa-d); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(31,170,85,.28); }
.btn-outline { background: transparent; color: var(--ink2); border: 1.5px solid var(--line2); letter-spacing: .01em; }
.btn-outline:hover { border-color: var(--green); color: var(--green); background: var(--green-xl); }
.btn-sm { padding: 9px 15px; font-size: var(--sm); }


/* ════════════════════════════════════════════════════════════
   COMPONENT: float-nav.css
════════════════════════════════════════════════════════════ */
.float-nav {
  position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 100;
  display: flex; flex-direction: column; gap: 3px;
  background: var(--card); padding: 8px;
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh2);
}
.float-nav-link {
  position: relative; width: 38px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px; color: var(--muted); font-size: 14px; transition: .18s;
}
.float-nav-link span {
  position: absolute; right: calc(100% + 9px); top: 50%;
  transform: translateY(-50%) translateX(5px);
  background: var(--ink); color: #fff;
  font-size: 11px; font-weight: 500; letter-spacing: .01em;
  padding: 4px 9px; border-radius: 6px; white-space: nowrap;
  opacity: 0; visibility: hidden;
  transition: opacity .18s, transform .18s; pointer-events: none;
}
.float-nav-link span::after {
  content: ''; position: absolute; left: 100%; top: 50%;
  transform: translateY(-50%); border: 4px solid transparent; border-left-color: var(--ink);
}
.float-nav-link:hover span { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }
.float-nav-link.active { background: linear-gradient(150deg, var(--green-m), var(--green)); color: #fff; box-shadow: 0 2px 8px rgba(15,102,66,.28); }
.float-nav-link:not(.active):hover { background: var(--green-lt); color: var(--green); }


/* ════════════════════════════════════════════════════════════
   COMPONENT: layout.css — Main Content & Section Base
════════════════════════════════════════════════════════════ */
.main-content { margin-left: 352px; margin-right: 86px; max-width: 820px; padding: 40px 0 80px; }
.section { padding: 44px 0; scroll-margin-top: 26px; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--xs); font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--green); background: var(--green-lt); border: 1px solid rgba(15,102,66,.18);
  padding: 6px 13px; border-radius: 99px; margin-bottom: 16px;
}
.section-title {
  font-family: var(--font-display);
  font-size: var(--3xl); color: var(--ink);
  line-height: 1.12; letter-spacing: -.022em; margin-bottom: 14px;
}
.section-title span { color: var(--green); }
.section-lead { font-size: var(--md); max-width: 620px; margin-bottom: 28px; line-height: 1.72; }


/* ════════════════════════════════════════════════════════════
   COMPONENT: hero.css
════════════════════════════════════════════════════════════ */
.hero { padding-top: 20px; }
.hero-h1 {
  font-family: var(--font-display);
  font-size: var(--hero); color: var(--ink);
  line-height: 1.06; letter-spacing: -.025em; margin-bottom: 18px;
}
.hero-h1 span  { color: var(--green); }
.hero-h1 em    { font-style: italic; color: var(--green); }
.hero-sub      { font-size: var(--md); max-width: 560px; margin-bottom: 26px; line-height: 1.72; }
.hero-ctas     { display: flex; gap: 11px; margin-bottom: 32px; flex-wrap: wrap; }
.hero-ctas .btn-primary { font-size: var(--md); padding: 14px 22px; }

.proof-strip {
  display: flex; align-items: stretch; gap: 0;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r2); overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--sh);
}
.proof-item {
  flex: 1; padding: 20px 22px; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 5px;
}
.proof-item:last-child { border-right: none; }
.proof-num   { font-family: var(--font-display); font-size: var(--3xl); color: var(--ink); letter-spacing: -.025em; line-height: 1; }
.proof-label { font-size: var(--xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }


/* ════════════════════════════════════════════════════════════
   COMPONENT: about.css
════════════════════════════════════════════════════════════ */
.about-body p { margin-bottom: 14px; max-width: 640px; line-height: 1.8; }
.about-highlights { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.hl-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--sm); font-weight: 500; color: var(--ink2);
  background: var(--card); border: 1px solid var(--line); padding: 7px 14px; border-radius: 99px;
  box-shadow: 0 1px 3px rgba(20,18,12,.05);
  transition: border-color .18s, box-shadow .18s;
}
.hl-chip:hover { border-color: var(--green); box-shadow: 0 2px 8px rgba(15,102,66,.12); }
.hl-chip i { color: var(--green); font-size: 11px; }
.about-actions { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 6px; }


/* ════════════════════════════════════════════════════════════
   COMPONENT: ai-services.css
   ─────────────────────────────────────────────────────────
   FIXED: Uses the SAME light-theme as the rest of the
   portfolio. No dark backgrounds, no dark text, no separate
   color palette. Differentiated only via a subtle green-tinted
   background and a top-border accent — consistent with the
   portfolio's card style.
════════════════════════════════════════════════════════════ */
.ai-section {
  background: var(--ai-bg);           /* #f1faf5 — light green tint */
  border: 1px solid var(--ai-brd);    /* #cde9da */
  border-radius: var(--r4);
  padding: 44px 38px;
  margin: 0 -4px;
  position: relative; overflow: hidden;
}

/* subtle decorative ring — light version */
.ai-section::before {
  content: ''; position: absolute; top: -80px; right: -80px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(20,96,61,.07) 0%, transparent 70%);
  pointer-events: none;
}

/* pill label */
.ai-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--green); background: var(--green-lt); border: 1px solid var(--ai-brd);
  padding: 6px 13px; border-radius: 99px; margin-bottom: 16px;
}

/* section title & lead — inherit portfolio defaults */
.ai-section .section-title { color: var(--ink); }
.ai-section .section-title span { color: var(--green); }
.ai-section .section-lead  { color: var(--muted); }

/* ── Stats bar ── */
.ai-stats {
  display: flex; gap: 0;
  background: var(--card);
  border: 1px solid var(--ai-brd);
  border-radius: var(--r2); overflow: hidden; margin-bottom: 28px;
  box-shadow: var(--sh);
}
.ai-stat-item {
  flex: 1; padding: 14px 18px; border-right: 1px solid var(--ai-brd);
  display: flex; flex-direction: column; gap: 3px;
}
.ai-stat-item:last-child { border-right: none; }
.ai-stat-num   { font-family: var(--font-display); font-size: var(--xl); color: var(--green); line-height: 1; }
.ai-stat-label { font-size: var(--xs); color: var(--muted); font-weight: 500; }

/* ── Cards grid ── */
.ai-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

.ai-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  padding: 26px 22px;
  transition: .22s;
  position: relative; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--sh);
}
/* top accent line on hover — same as svc-card pattern */
.ai-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--green), var(--green-m));
  opacity: 0; transition: opacity .22s;
}
.ai-card:hover::before { opacity: 1; }
.ai-card:hover {
  border-color: var(--green);
  transform: translateY(-3px);
  box-shadow: var(--sh2);
}

/* icon */
.ai-icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--green-lt); color: var(--green);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--lg); margin-bottom: 14px; transition: transform .22s;
}
.ai-card:hover .ai-icon { transform: scale(1.07) rotate(-4deg); }

/* card text — full portfolio palette */
.ai-card h3 { font-size: var(--lg); font-weight: 700; color: var(--ink); margin-bottom: 9px; line-height: 1.3; }
.ai-card p  { font-size: var(--sm); line-height: 1.72; color: var(--muted); margin-bottom: 14px; }

/* tech-stack tags */
.ai-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-tool {
  font-size: var(--xs); font-weight: 500;
  color: var(--green);
  border: 1px solid var(--ai-brd);
  background: var(--green-lt);
  padding: 3px 9px; border-radius: 99px;
}

/* result row */
.ai-result {
  margin-top: 10px; font-size: var(--sm); font-weight: 600;
  color: var(--green); display: flex; align-items: center; gap: 5px;
}

/* ── CTA row ── */
.ai-cta-row {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 26px; padding-top: 26px;
  border-top: 1px solid var(--ai-brd);
}
/* Reuse existing btn classes — no separate btn-ai needed */


/* ════════════════════════════════════════════════════════════
   COMPONENT: services.css
════════════════════════════════════════════════════════════ */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.svc-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r2);
  padding: 22px 20px; transition: .22s; position: relative; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--sh);
}
.svc-card:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--sh2); border-color: var(--green); }
.svc-card.featured { border-color: var(--green); background: var(--green-xl); }
.svc-tag {
  position: absolute; top: 13px; right: 13px; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--green); background: var(--green-lt); padding: 3px 8px; border-radius: 99px;
}
.svc-icon {
  width: 44px; height: 44px; border-radius: 12px; background: var(--green-lt); color: var(--green);
  display: flex; align-items: center; justify-content: center; font-size: var(--lg);
  margin-bottom: 13px; transition: transform .22s;
}
.svc-card:hover .svc-icon { transform: scale(1.07) rotate(-3deg); }
.svc-card h3     { font-size: var(--lg); font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.svc-card p      { font-size: var(--sm); line-height: 1.68; }
.svc-result      { margin-top: 11px; font-size: var(--sm); font-weight: 600; color: var(--green); display: flex; align-items: center; gap: 6px; }


/* ════════════════════════════════════════════════════════════
   COMPONENT: slider.css
════════════════════════════════════════════════════════════ */
.slider-overflow { overflow: hidden; border-radius: var(--r2); }
.slider-track    { display: flex; transition: transform .42s cubic-bezier(.4,0,.2,1); will-change: transform; gap: 14px; }
.slider-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; }
.slider-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink2); font-size: 14px; transition: .18s; box-shadow: var(--sh); flex-shrink: 0;
}
.slider-btn:hover { background: var(--green); border-color: var(--green); color: #fff; box-shadow: var(--sh2); }
.slider-btn:disabled { opacity: .32; cursor: not-allowed; pointer-events: none; }
.slider-dots { display: flex; gap: 7px; align-items: center; }
.slider-dot  { width: 7px; height: 7px; border-radius: 50%; background: var(--line2); border: none; cursor: pointer; transition: .2s; padding: 0; }
.slider-dot.active { background: var(--green); transform: scale(1.35); }

/* project cards */
.proj-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; transition: box-shadow .2s; flex-shrink: 0; display: flex; flex-direction: column; }
.proj-card:hover { box-shadow: var(--sh2); }
.proj-card-header { padding: 20px 22px 0; display: flex; align-items: flex-start; gap: 14px; }
.proj-card-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--green-lt); display: flex; align-items: center; justify-content: center; color: var(--green); font-size: 20px; flex-shrink: 0; }
.proj-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.proj-tags span { font-size: 10px; font-weight: 700; background: var(--green-lt); color: var(--green); padding: 3px 10px; border-radius: 99px; letter-spacing: .02em; }
.proj-info { padding: 14px 22px 22px; flex: 1; display: flex; flex-direction: column; }
.proj-info h3   { font-size: var(--lg); font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.proj-info p    { font-size: var(--sm); line-height: 1.68; color: var(--muted); }
.proj-how { margin-top: 10px; font-size: var(--sm); line-height: 1.68; color: var(--muted); border-left: 3px solid var(--green); padding-left: 10px; }
.proj-how strong { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--green); margin-bottom: 6px; }
.proj-how ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.proj-how ul li { display: flex; gap: 7px; align-items: flex-start; }
.proj-how ul li::before { content: '↳'; color: var(--green); font-weight: 700; flex-shrink: 0; line-height: 1.68; }
.case-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.case-list li { display: flex; gap: 8px; align-items: flex-start; font-size: var(--base); line-height: 1.6; }
.case-list li::before { content: '✓'; color: var(--green); font-weight: 700; flex-shrink: 0; }
.proj-result    { margin-top: 12px; font-size: var(--sm); font-weight: 600; color: var(--green); }
.proj-links     { display: flex; gap: 13px; margin-top: auto; padding-top: 14px; }
.proj-link      { font-size: var(--sm); font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; transition: .18s; }
.proj-link.pri  { color: var(--green); }
.proj-link:hover{ color: var(--ink); }

/* review cards */
.review-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r2); padding: 26px 24px; flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--sh); }
.review-stars { color: #c07a18; margin-bottom: 12px; font-size: var(--sm); }
.review-text {
  font-size: var(--base); line-height: 1.75; color: var(--ink2); margin-bottom: 18px;
  font-style: italic; position: relative; padding-left: 18px;
}
.review-text::before { content: '\201C'; position: absolute; left: 0; top: -4px; font-family: var(--font-display); font-size: var(--2xl); line-height: 1; color: var(--green-lt); font-style: normal; }
.review-author { display: flex; align-items: center; gap: 11px; padding-top: 14px; border-top: 1px solid var(--line); }
.r-avatar { width: 40px; height: 40px; border-radius: 10px; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--sm); flex-shrink: 0; }
.r-name   { font-weight: 700; color: var(--ink); font-size: var(--base); line-height: 1.3; }
.r-role   { font-size: var(--xs); color: var(--muted); margin-top: 2px; }
.r-role a { color: var(--green); font-weight: 600; }


/* ════════════════════════════════════════════════════════════
   COMPONENT: case-study.css
════════════════════════════════════════════════════════════ */
.case {
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--green);
  border-radius: var(--r2); padding: 26px; margin-top: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--sh);
}
.case-meta { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 11px; }
.case-meta span { font-size: var(--xs); font-weight: 600; background: var(--green-lt); color: var(--green); padding: 3px 9px; border-radius: 99px; }
.case h3 { font-family: var(--font-display); font-size: var(--xl); color: var(--ink); margin-bottom: 12px; }
.case-block { margin-bottom: 12px; }
.case-block .lbl { font-size: var(--xs); text-transform: uppercase; letter-spacing: .08em; color: var(--muted2); font-weight: 700; margin-bottom: 4px; }
.case-block p { font-size: var(--base); line-height: 1.68; }
.case-result { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.case-stat { padding: 0 20px 0 0; }
.case-stat + .case-stat { padding-left: 20px; border-left: 1px solid var(--line); }
.case-stat .n { font-family: var(--font-display); font-size: var(--2xl); color: var(--green); line-height: 1.1; }
.case-stat .l { font-size: var(--xs); color: var(--muted); margin-top: 3px; }
.case-quote { margin: 18px 0 0; padding: 16px 20px; background: var(--green-xl); border-left: 4px solid var(--green); border-radius: 0 var(--r) var(--r) 0; }
.case-quote p { font-size: var(--base); line-height: 1.68; color: var(--ink2); font-style: italic; margin: 0 0 8px; }
.case-quote cite { font-size: var(--xs); font-weight: 700; color: var(--green); font-style: normal; letter-spacing: .03em; }


/* ════════════════════════════════════════════════════════════
   COMPONENT: process.css
════════════════════════════════════════════════════════════ */
.process-grid { display: flex; align-items: stretch; gap: 0; margin-top: 8px; }
.process-arrow {
  display: flex; align-items: center; justify-content: center;
  padding: 0 10px; color: var(--green); font-size: 13px; opacity: 0.5; flex-shrink: 0;
}
.process-step {
  flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: var(--r2);
  padding: 28px 22px 26px; transition: .22s; position: relative; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--sh);
}
.process-step::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--green), var(--green-m)); opacity: 0; transition: opacity .22s;
}
.process-step:hover::before { opacity: 1; }
.process-step:hover { border-color: var(--green); transform: translateY(-3px); box-shadow: var(--sh2); }
.process-header { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.process-num {
  width: 40px; height: 40px; border-radius: 10px; background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: var(--base); font-weight: 700; flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(20,96,61,.28);
}
.process-ico {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--ai-bg); color: var(--green); border: 1px solid var(--ai-brd);
  display: flex; align-items: center; justify-content: center; font-size: var(--base);
}
.process-step h4 { font-size: var(--base); font-weight: 700; color: var(--ink); margin-bottom: 8px; line-height: 1.3; }
.process-step p  { font-size: var(--sm); line-height: 1.65; color: var(--muted); }
.process-free { margin-top: 14px; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #fff; background: var(--green); padding: 3px 9px; border-radius: 99px; display: inline-block; }


/* ════════════════════════════════════════════════════════════
   COMPONENT: faq.css
════════════════════════════════════════════════════════════ */
.faq-list { display: flex; flex-direction: column; max-width: 760px; }
.faq-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: 9px; }
.faq-q {
  padding: 18px 20px; font-weight: 600; font-size: var(--base); color: var(--ink); cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 14px; line-height: 1.4; transition: color .18s;
}
.faq-q:hover { color: var(--green); }
.faq-toggle {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--green-lt); color: var(--green);
  display: flex; align-items: center; justify-content: center; font-size: 11px; transition: .22s;
}
.faq-item.open .faq-toggle { background: var(--green); color: #fff; transform: rotate(45deg); }
.faq-item.open .faq-q { color: var(--green); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .32s ease, padding .32s ease; padding: 0 20px; }
.faq-item.open .faq-a { max-height: 260px; padding: 0 20px 18px; }
.faq-a p { font-size: var(--sm); line-height: 1.72; color: var(--muted); padding-top: 2px; }


/* ════════════════════════════════════════════════════════════
   COMPONENT: contact.css
════════════════════════════════════════════════════════════ */
.contact-channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-bottom: 22px; }
.channel-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r2); padding: 16px 15px; display: flex; align-items: center; gap: 11px; transition: .18s; }
.channel-card:hover { transform: translateY(-2px); box-shadow: var(--sh); border-color: var(--green); }
.channel-ico { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: var(--lg); flex-shrink: 0; transition: transform .22s; }
.channel-card:hover .channel-ico { transform: scale(1.08) rotate(-3deg); }
.channel-ico.email { background: var(--green-lt); color: var(--green); }
.channel-ico.wa    { background: #e6f7ed; color: #1faa55; }
.channel-ico.cal   { background: #fdf2e3; color: #c07a18; }
.channel-label { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 2px; }
.channel-val   { font-size: var(--sm); font-weight: 600; color: var(--ink); }
.contact-form  { background: var(--card); border: 1px solid var(--line); border-radius: var(--r3); padding: 26px; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--sh); }
.form-grid     { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-bottom: 13px; }
.form-group    { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: var(--sm); font-weight: 600; color: var(--ink2); }
.form-group input,
.form-group select,
.form-group textarea {
  border: 1px solid var(--ai-brd); border-radius: var(--r);
  padding: 11px 13px; background: var(--ai-bg); color: var(--ink);
  font-size: var(--base); transition: .18s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: none; border-color: var(--green); background: #fff; }
.form-group textarea { resize: vertical; min-height: 110px; }
.form-note { font-size: var(--xs); color: var(--muted2); margin-top: 9px; }
.form-feedback { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; padding: 13px 16px; border-radius: var(--r); font-size: var(--sm); font-weight: 500; line-height: 1.5; }
.form-feedback[hidden] { display: none; }
.form-success { background: var(--green-lt); color: var(--green-d); border: 1px solid #b6dfc8; }
.form-success i { margin-top: 2px; flex-shrink: 0; }
.form-error { background: #fff2f2; color: #b91c1c; border: 1px solid #fca5a5; }
.form-error i { margin-top: 2px; flex-shrink: 0; }
.form-error a { color: #b91c1c; font-weight: 700; }
#cfSubmit:disabled { opacity: .65; cursor: not-allowed; }


/* ════════════════════════════════════════════════════════════
   COMPONENT: hamburger.css
════════════════════════════════════════════════════════════ */
/* ── Mobile Top Bar ───────────────────────────────────────── */
.mobile-topbar {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; z-index: 195;
  height: 62px; padding: 0 14px 0 16px;
  background: var(--card); border-bottom: 1px solid var(--line);
  align-items: center; justify-content: space-between;
  box-shadow: 0 2px 12px rgba(20,18,12,.07);
}
.mtb-left       { display: flex; flex-direction: column; gap: 3px; }
.mtb-top-row    { display: flex; align-items: center; gap: 8px; }
.mtb-name       { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.mtb-badge      {
  font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--green); background: var(--green-lt); padding: 2px 8px; border-radius: 99px;
  display: flex; align-items: center; gap: 4px;
}
.mtb-badge::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--green-m); box-shadow: 0 0 0 2px rgba(28,125,79,.2);
  animation: pulse 2s infinite;
}
.mtb-sub { font-size: 0.68rem; color: var(--muted); line-height: 1; letter-spacing: .01em; }

/* ── Hamburger ─────────────────────────────────────────────── */
.menu-toggle {
  display: none; position: static; z-index: auto;
  width: 44px; height: 44px; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; flex-direction: column; gap: 5px;
  align-items: center; justify-content: center; transition: background .18s;
  flex-shrink: 0;
}
.menu-toggle:active { background: var(--green-lt); }
.menu-toggle span { width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: .25s; display: block; }
.menu-toggle.open { background: var(--green); }
.menu-toggle.open span { background: #fff; }
.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-cta { display: none; }


/* ════════════════════════════════════════════════════════════
   COMPONENT: animations.css — Scroll Reveal
════════════════════════════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.hero-h1, .hero-sub, .hero-ctas, .proof-strip { opacity: 0; transform: translateY(16px); animation: rise .72s cubic-bezier(.16,1,.3,1) forwards; }
.hero-sub   { animation-delay: .09s; }
.hero-ctas  { animation-delay: .18s; }
.proof-strip{ animation-delay: .27s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .reveal, .hero-h1, .hero-sub, .hero-ctas, .proof-strip { opacity: 1; transform: none; animation: none; transition: none; }
  * { scroll-behavior: auto; }
}


/* ════════════════════════════════════════════════════════════
   COMPONENT: responsive.css
════════════════════════════════════════════════════════════ */
@media (max-width: 1260px) { .float-nav { display: none; } .main-content { margin-right: 40px; } }
@media (max-width: 1080px) { .main-content { margin-left: 330px; margin-right: 32px; } }

@media (max-width: 860px) {
  :root { --hero: 2.15rem; --3xl: 1.85rem; }

  /* Show mobile topbar, topbar contains the hamburger */
  .mobile-topbar { display: flex; }
  .menu-toggle   { display: flex; }
  /* Show sidebar navigation menu */
  .sb-nav        { display: flex; }

  /* Push content below the 62px topbar, above the 64px bottom CTA */
  .main-content  { margin: 0; padding: 78px 16px 100px; max-width: 100%; overflow-x: hidden; }

  /* Single-column grids */
  .svc-grid, .ai-grid, .contact-channels { grid-template-columns: 1fr; }

  /* Contact form — full-width single column */
  .form-grid { grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; }
  .contact-form { padding: 18px 14px; border-radius: var(--r2); }
  .form-group input,
  .form-group select,
  .form-group textarea { font-size: 1rem; padding: 13px 14px; }
  .form-group label { font-size: 0.82rem; }
  .contact-channels { gap: 10px; margin-bottom: 18px; }
  .channel-card { padding: 14px 16px; min-width: 0; }
  .channel-val  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #cfSubmit     { width: 100%; }

  /* Process */
  .process-grid  { flex-direction: column; gap: 0; }
  .process-arrow { transform: rotate(90deg); padding: 4px 0; height: 28px; }

  /* AI section */
  .ai-section   { padding: 28px 18px; margin: 0; border-radius: var(--r3); }
  .ai-stats     { flex-direction: column; }
  .ai-stat-item { border-right: none; border-bottom: 1px solid var(--ai-brd); }
  .ai-stat-item:last-child { border-bottom: none; }
  .ai-cta-row   { flex-direction: column; }
  .ai-cta-row .btn { justify-content: center; }

  /* Proof strip */
  .proof-strip  { flex-direction: column; }
  .proof-item   { border-right: none; border-bottom: 1px solid var(--line); }
  .proof-item:last-child { border-bottom: none; }

  /* Fixed bottom CTA bar */
  .mobile-cta {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 150;
    padding: 10px 14px; background: rgba(244,240,232,.97);
    backdrop-filter: blur(8px); border-top: 1px solid var(--line);
  }
  .mobile-cta .btn { width: 100%; justify-content: center; }

  /* Sidebar stays above topbar; overlay stays below topbar so hamburger remains tappable */
  .sidebar { z-index: 200; }
}

@media (max-width: 560px) {
  :root { --hero: 1.7rem; --3xl: 1.5rem; }

  .mobile-topbar { height: 58px; }
  .mtb-name      { font-size: 0.97rem; }

  .main-content  { padding: 72px 12px 100px; }
  .section       { padding: 32px 0; }

  /* Hero */
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { justify-content: center; width: 100%; }

  /* Highlights chips — wrap cleanly */
  .about-highlights { gap: 7px; }

  /* Sliders */
  .slider-btn { width: 36px; height: 36px; }

  /* Case study */
  .case-result { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .case-stat + .case-stat { border-left: none; padding-left: 0; }
  .case-quote  { margin-top: 14px; }
  .case        { padding: 20px 16px; }
  .case-list   { padding-left: 16px; }

  /* About */
  .about-actions { flex-direction: column; }
  .about-actions .btn { justify-content: center; }

  /* Process */
  .process-step { padding: 22px 16px 20px; }

  /* Contact */
  .contact-form { padding: 16px 12px; }
  .form-group input,
  .form-group select,
  .form-group textarea { font-size: 0.95rem; }
}