:root {
  --white: #ffffff;
  --off-white: #f8f7f4;
  --light-gray: #f0eeea;
  --border: #e5e2db;
  --border-dark: #d0cdc5;
  --text-main: #0f0f0f;
  --text-body: #3d3d3d;
  --text-muted: #888580;
  --text-faint: #b5b2ab;
  --accent: #0f0f0f;
  --accent-soft: #1a1a1a;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--white);
  color: var(--text-main);
  font-family: 'Outfit', sans-serif;
  overflow-x: hidden;
}

/* NAV */
#navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.3s;
}
#navbar.scrolled { box-shadow: 0 4px 40px rgba(0,0,0,0.06); }

/* HERO */
.hero-section {
  background: var(--off-white);
  min-height: 90vh;
  position: relative;
  overflow: hidden;
}
.hero-grid {
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 48px 48px;
  position:absolute; inset:0; opacity:0.5;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 6px 16px 6px 8px;
  font-family:'DM Mono',monospace;
  font-size:0.7rem;
  color: var(--text-muted);
}
.hero-badge .dot { width:8px; height:8px; border-radius:50%; background:#22c55e; flex-shrink:0; animation: blink-dot 2s infinite; }
@keyframes blink-dot { 0%,100%{opacity:1} 50%{opacity:0.3} }

.hero-headline {
  font-family:'Outfit',sans-serif;
  font-weight:800;
  line-height:1.05;
  letter-spacing:-0.03em;
  font-size:clamp(2.8rem,6vw,3.5rem);
  color: var(--text-main);
}
.hero-headline .highlight {
  position:relative; display:inline-block;
}
.hero-headline .highlight::after {
  content:'';
  position:absolute; bottom:-4px; left:0; right:0; height:4px;
  background: var(--text-main);
  border-radius:2px;
}

/* STAT CARD */
.stat-chip {
  background: white;
  border: 1px solid var(--border);
  border-radius:12px;
  padding: 16px 20px;
  display:inline-flex; flex-direction:column; gap:2px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.stat-chip .num {
  font-family:'Outfit',sans-serif;
  font-weight:800;
  font-size:1.6rem;
  color: var(--text-main);
  line-height:1;
}
.stat-chip .lbl {
  font-size:0.68rem;
  color: var(--text-muted);
  font-weight:500;
  letter-spacing:0.05em;
}

/* FLOATING CARD */
.float-card {
  background: white;
  border: 1px solid var(--border);
  border-radius:16px;
  padding:16px 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}

/* SECTION LABEL */
.sec-label {
  font-family:'DM Mono',monospace;
  font-size:0.65rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color: var(--text-muted);
  display:inline-flex; align-items:center; gap:10px;
}
.sec-label::before {
  content:''; display:block; width:24px; height:1px; background:var(--border-dark);
}

/* SECTION TITLE */
.sec-title {
  font-family:'Outfit',sans-serif;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-0.025em;
  color: var(--text-main);
  font-size:clamp(1.8rem,3.5vw,3rem);
}

/* CARDS */
.service-card {
  background: white;
  border: 1px solid var(--border);
  border-radius:16px;
  padding: 32px;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.service-card:hover {
  border-color: var(--border-dark);
  box-shadow: 0 16px 48px rgba(0,0,0,0.08);
  transform: translateY(-4px);
}
.service-icon {
  width:52px; height:52px;
  background: var(--off-white);
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem;
  color: var(--text-main);
  margin-bottom:20px;
  transition: background 0.2s;
}
.service-card:hover .service-icon { background: var(--text-main); color:white; }

/* PORT ITEM */
.port-item {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
  cursor:pointer;
}
.port-item:hover {
  border-color: var(--text-main);
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
  transform: translateY(-3px);
}
.port-body { padding:24px; }
.port-num { font-family:'DM Mono',monospace; font-size:0.65rem; color:var(--text-faint); letter-spacing:0.15em; margin-bottom:8px; }
.port-name { font-weight:700; font-size:0.95rem; color:var(--text-main); margin-bottom:6px; }
.port-cat { font-size:0.75rem; color:var(--text-muted); }

/* TAG */
.tag {
  display:inline-block;
  background: var(--light-gray);
  color: var(--text-muted);
  font-size:0.65rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:6px;
}

/* TESTI */
.testi-card {
  background: white;
  border: 1px solid var(--border);
  border-radius:16px;
  padding:28px;
  transition: box-shadow 0.25s, transform 0.25s;
}
.testi-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.07);
  transform: translateY(-2px);
}

/* CLIENT */
.client-logo {
  background: white;
  border: 1px solid var(--border);
  border-radius:10px;
  padding:14px 20px;
  display:flex; align-items:center; justify-content:center;
  gap:8px;
  font-weight:600;
  font-size:0.7rem;
  letter-spacing:0.06em;
  color: var(--text-muted);
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
  text-align:center;
}
.client-logo:hover {
  border-color: var(--text-main);
  color: var(--text-main);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

/* BTN */
.btn-dark {
  display:inline-flex; align-items:center; gap:8px;
  background: var(--text-main); color:white;
  border:none; border-radius:10px;
  font-family:'Outfit',sans-serif;
  font-weight:600; font-size:0.875rem;
  padding:13px 28px;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
  text-decoration:none; cursor:pointer;
}
.btn-dark:hover { background:#222; box-shadow:0 8px 24px rgba(0,0,0,0.15); transform:translateY(-1px); }

.btn-light {
  display:inline-flex; align-items:center; gap:8px;
  background: white; color:var(--text-main);
  border:1px solid var(--border-dark); border-radius:10px;
  font-family:'Outfit',sans-serif;
  font-weight:600; font-size:0.875rem;
  padding:13px 28px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  text-decoration:none; cursor:pointer;
}
.btn-light:hover { border-color:var(--text-main); box-shadow:0 4px 16px rgba(0,0,0,0.07); transform:translateY(-1px); }

/* INPUT */
.form-input {
  width:100%; padding:13px 16px;
  border:1px solid var(--border);
  border-radius:10px;
  font-family:'Outfit',sans-serif;
  font-size:0.875rem;
  color:var(--text-main);
  background: white;
  outline:none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus { border-color:var(--text-main); box-shadow:0 0 0 3px rgba(0,0,0,0.06); }
.form-input::placeholder { color:var(--text-faint); }

/* MARQUEE */
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee-track { animation:marquee 30s linear infinite; display:flex; width:max-content; align-items:center; gap:0; }

/* REVEAL */
.reveal { opacity:0; transform:translateY(32px); }

/* PRODUCT CARD */
.product-card {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius:20px;
  padding: 40px;
  transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}
.product-card:hover {
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
  transform: translateY(-4px);
  border-color: var(--border-dark);
}

/* SKILL BAR */
.skill-track { background:var(--border); border-radius:99px; height:5px; }
.skill-fill {
  height:5px; border-radius:99px; background:var(--text-main); width:0%;
  transition: width 1.4s cubic-bezier(0.25,1,0.5,1);
}

/* COUNTER */
@keyframes countUp { from{transform:translateY(12px);opacity:0} to{transform:translateY(0);opacity:1} }
.counting { animation: countUp 0.4s ease forwards; }

/* HERO VISUAL CARD */
.hero-visual {
  background: white;
  border: 1px solid var(--border);
  border-radius:20px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.1);
  overflow: hidden;
}
.progress-bar-anim { animation: grow-bar 2s ease forwards 1s; }
@keyframes grow-bar { from{width:0%} to{width:var(--w)} }

/* STEP */
.step-num {
  width:40px; height:40px; border-radius:50%;
  background: var(--text-main); color:white;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:0.8rem;
  flex-shrink:0;
}

/* REVIEW STARS */
.stars { color:#f59e0b; font-size:0.75rem; letter-spacing:2px; }

/* FOOTER */
.foot-link { color:var(--text-muted); text-decoration:none; font-size:0.875rem; transition:color 0.2s; }
.foot-link:hover { color:var(--text-main); }

/* MOBILE MENU */
#mobile-menu { display:none; }
#mobile-menu.open { display:flex; }

/* SMOOTH UNDERLINE NAV */
.nav-link {
  position:relative; font-size:0.875rem; font-weight:500;
  color:var(--text-body); text-decoration:none;
  transition:color 0.2s;
  padding-bottom:2px;
}
.nav-link::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1.5px;
  background:var(--text-main); transform:scaleX(0); transition:transform 0.2s;
  transform-origin:left;
}
.nav-link:hover { color:var(--text-main); }
.nav-link:hover::after { transform:scaleX(1); }

/* SECTION ALT BG */
.bg-alt { background: var(--off-white); }

/* BADGE */
.badge {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--off-white);
  border:1px solid var(--border);
  border-radius:8px;
  padding:5px 12px;
  font-size:0.72rem; font-weight:600;
  color:var(--text-muted);
  letter-spacing:0.05em;
}