/* ===================================================================
   TechMobby IT Solution — Design Tokens
   Palette: deep forest green + warm paper + a single lime pop accent
   Type: Sora (display) / Inter (body)
=================================================================== */

:root{
  --ink: #10241C;
  --ink-soft: #3C5348;
  --paper: #F7F6EF;
  --paper-dim: #EFEDE2;
  --card: #FFFFFF;

  --green-950: #0A2717;
  --green-900: #0E3B25;
  --green-700: #145C37;
  --green-600: #1B7A4D;
  --green-500: #279962;
  --green-400: #4FAE7A;
  --green-200: #C9E6D5;
  --green-100: #E7F3EC;

  --lime: #C6F135;
  --lime-ink: #1E2A0E;

  --line: rgba(16,36,28,0.13);
  --line-soft: rgba(16,36,28,0.08);
  --shadow-1: 0 1px 2px rgba(16,36,28,0.06);

  --radius-s: 6px;
  --radius-m: 10px;

  --font-display: "Sora", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;

  --wrap: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html:focus-within{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--green-950);
  line-height: 1.12;
  margin: 0 0 0.5em;
  font-weight: 600;
  letter-spacing: -0.01em;
}

h1{ font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 650; }
h2{ font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3{ font-size: 1.25rem; }

p{ margin: 0 0 1em; color: var(--ink-soft); max-width: 62ch; }

.wrap{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

section{ padding: 92px 0; }
@media (max-width: 720px){ section{ padding: 56px 0; } }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--green-500);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  html{ scroll-behavior: auto; }
}

/* ---------------- Buttons ---------------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--radius-s);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ background: var(--green-700); color: #fff; }
.btn-primary:hover{ background: var(--green-900); }
.btn-lime{ background: var(--lime); color: var(--lime-ink); }
.btn-lime:hover{ background: #b3dc2c; }
.btn-ghost{ background: transparent; color: var(--green-950); border-color: var(--line); }
.btn-ghost:hover{ border-color: var(--green-600); background: var(--green-100); }
.btn-on-dark{ background: var(--lime); color: var(--lime-ink); }
.btn-on-dark:hover{ background: #b3dc2c; }
.btn-ghost-on-dark{ background: transparent; color: #fff; border-color: rgba(255,255,255,0.28); }
.btn-ghost-on-dark:hover{ border-color: #fff; }

/* ---------------- Header / Nav ---------------- */
.site-header{
  position: sticky; top: 0; z-index: 100;
  background: rgba(247,246,239,0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  height: 76px;
}
.logo{
  display:flex; align-items:center;
}
.logo-img{
  height: 40px; width: auto; display:block;
}
@media (max-width: 480px){ .logo-img{ height: 34px; } }
.nav-links{
  display:flex; align-items:center; gap: 34px;
  list-style:none; margin:0; padding:0;
}
.nav-links > li{ position: relative; }
.nav-links a.top-link{
  font-weight: 500; font-size: 0.96rem; color: var(--ink);
  padding: 10px 2px; display:inline-block;
  border-bottom: 2px solid transparent;
}
.nav-links a.top-link:hover{ border-bottom-color: var(--green-500); }
.nav-cta{ display:flex; align-items:center; gap:14px; }

.has-dropdown .dropdown{
  position:absolute; top: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: 0 12px 32px rgba(16,36,28,0.12);
  padding: 10px;
  min-width: 240px;
  display:none;
  flex-direction: column;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown{ display:flex; }
.dropdown a{
  padding: 10px 14px; border-radius: var(--radius-s); font-size: 0.92rem;
}
.dropdown a:hover{ background: var(--green-100); color: var(--green-900); }
.dropdown .grp-label{
  font-size: 0.72rem; color: var(--green-600); font-weight: 600;
  padding: 8px 14px 2px; margin-top: 4px;
}
.dropdown .grp-label:first-child{ margin-top: 0; }

.dropdown.mega{ min-width: 620px; padding: 18px; }
.has-dropdown:hover .dropdown.mega,
.has-dropdown:focus-within .dropdown.mega{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 2px 20px;
}
.dropdown.mega .grp-col{ display:flex; flex-direction:column; }

.nav-toggle{ display:none; }
.mobile-panel{ display:none; }

@media (max-width: 940px){
  .nav-links, .nav-cta .btn-ghost{ display:none; }
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width: 44px; height: 44px; border-radius: var(--radius-s);
    border: 1px solid var(--line); background: transparent; cursor:pointer;
  }
  .mobile-panel{
    display:none; flex-direction:column; gap: 2px;
    padding: 10px 0 20px;
    border-top: 1px solid var(--line-soft);
  }
  .mobile-panel.open{ display:flex; }
  .mobile-panel a{ padding: 12px 4px; font-weight:500; border-bottom: 1px solid var(--line-soft); }
  .mobile-panel .m-group{ font-size:0.72rem; color:var(--green-600); font-weight:700; padding: 12px 4px 2px; }
}

/* ---------------- Hero ---------------- */
.hero{
  padding: 68px 0 84px;
  overflow: hidden;
}
.hero-grid{
  display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items:center;
}
@media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; } }

.eyebrow-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 0.82rem; font-weight: 600; color: var(--green-700);
  background: var(--green-100); border: 1px solid var(--green-200);
  padding: 7px 14px; border-radius: 999px; margin-bottom: 22px;
}
.eyebrow-tag .dot{ width:7px; height:7px; border-radius:50%; background: var(--lime); border:2px solid var(--green-700); }

.hero h1{ max-width: 15ch; }
.hero .lede{ font-size: 1.15rem; max-width: 46ch; color: var(--ink-soft); }
.hero-ctas{ display:flex; gap:14px; margin-top: 30px; flex-wrap:wrap; }

.hero-stats{
  display:flex; gap: 34px; margin-top: 46px; flex-wrap:wrap;
}
.hero-stats div{ max-width: 160px; }
.hero-stats strong{
  display:block; font-family:var(--font-display); font-size:1.5rem; color: var(--green-900);
}
.hero-stats span{ font-size: 0.86rem; color: var(--ink-soft); }

.hero-art{ position:relative; }
.hero-art svg{ width:100%; height:auto; }

/* ---------------- Section headers ---------------- */
.section-head{ max-width: 640px; margin-bottom: 48px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.kicker{
  display:block; font-size: 0.85rem; font-weight: 700; color: var(--green-600);
  margin-bottom: 10px;
}

/* ---------------- Pillars (Marketing/Technology/Design) ---------------- */
.pillars{ display:flex; flex-direction:column; gap: 2px; }
.pillar{
  display:grid; grid-template-columns: 0.9fr 1.6fr; gap: 40px;
  padding: 44px 0; border-top: 1px solid var(--line);
}
.pillar:last-child{ border-bottom: 1px solid var(--line); }
@media (max-width: 860px){ .pillar{ grid-template-columns: 1fr; gap:18px; } }

.pillar-intro{ position:sticky; top:100px; align-self:start; }
.pillar-mark{
  width:46px; height:46px; border-radius: var(--radius-s);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 18px;
}
.pillar-mark svg{ width:24px; height:24px; }
.pillar.mkt .pillar-mark{ background: var(--green-100); }
.pillar.tech .pillar-mark{ background: #E4F0FF; }
.pillar.dsg .pillar-mark{ background: #FCEFE0; }

.pillar-list{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; }
@media (max-width: 560px){ .pillar-list{ grid-template-columns: 1fr; } }
.svc-link{
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px; padding: 15px 4px;
  border-bottom: 1px solid var(--line-soft);
  font-weight: 500;
}
.svc-link:hover{ color: var(--green-700); }
.svc-link .arrow{ opacity:0; transition: opacity .15s, transform .15s; }
.svc-link:hover .arrow{ opacity:1; transform: translateX(2px); }

/* ---------------- Why / differentiators ---------------- */
.why-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 0;
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
@media (max-width: 720px){ .why-grid{ grid-template-columns: 1fr; } }
.why-item{
  padding: 40px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.why-item h3{ margin-bottom: 10px; }

/* ---------------- Process (genuine sequence) ---------------- */
.process{ position:relative; }
.process-row{
  display:grid; grid-template-columns: 64px 1fr; gap: 22px;
  padding-bottom: 40px; position:relative;
}
.process-row:last-child{ padding-bottom:0; }
.process-row::before{
  content:""; position:absolute; left:31px; top:56px; bottom:-4px; width:1px;
  background: var(--line);
}
.process-row:last-child::before{ display:none; }
.proc-num{
  width:64px; height:64px; border-radius:50%;
  background: var(--green-900); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; font-size:1.15rem;
  flex-shrink:0;
}
.proc-body h3{ margin-bottom:6px; }

/* ---------------- CTA banner ---------------- */
.cta-banner{
  background: var(--green-950);
  color: #fff; border-radius: 18px; padding: 64px 48px;
  display:flex; align-items:center; justify-content:space-between; gap: 30px;
  flex-wrap:wrap;
}
.cta-banner h2{ color:#fff; max-width: 16ch; margin-bottom:8px; }
.cta-banner p{ color: rgba(255,255,255,0.72); }
.cta-actions{ display:flex; gap: 14px; flex-wrap:wrap; }

/* ---------------- Cards (service overview / detail pages) ---------------- */
.cat-tabs{ display:flex; gap:10px; margin-bottom:40px; flex-wrap:wrap; }
.cat-tab{
  padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line);
  font-weight: 600; font-size: 0.9rem;
}
.cat-tab.is-active{ background: var(--green-900); color:#fff; border-color: var(--green-900); }

.svc-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px){ .svc-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .svc-grid{ grid-template-columns: 1fr; } }

.svc-card{
  border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 28px; background: var(--card);
  display:flex; flex-direction:column; height:100%;
}
.svc-card h3{ margin-bottom: 8px; font-size: 1.08rem; }
.svc-card p{ font-size: 0.94rem; margin-bottom: 18px; }
.svc-card .go{
  margin-top:auto; font-weight:600; font-size:0.88rem; color: var(--green-700);
  display:flex; align-items:center; gap:6px;
}
.svc-card .tag{
  display:inline-block; font-size: 0.72rem; font-weight:700; color: var(--green-700);
  margin-bottom: 14px;
}

/* ---------------- Service detail page ---------------- */
.svc-hero{
  display:grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items:center;
  padding-top: 40px;
}
@media (max-width: 860px){ .svc-hero{ grid-template-columns:1fr; } }
.breadcrumb{ font-size:0.86rem; color: var(--ink-soft); margin-bottom: 20px; }
.breadcrumb a:hover{ color: var(--green-700); }

.check-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.check-list li{ display:flex; gap:12px; align-items:flex-start; font-weight:500; }
.check-list svg{ flex-shrink:0; margin-top:3px; }

.svc-panel{
  background: var(--green-100); border: 1px solid var(--green-200);
  border-radius: var(--radius-m); padding: 30px;
}
.svc-panel h3{ font-size:1.05rem; }

.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; }
@media (max-width: 800px){ .two-col{ grid-template-columns:1fr; gap:30px; } }

.related-strip{ display:flex; gap:14px; flex-wrap:wrap; }
.related-pill{
  padding: 10px 18px; border-radius:999px; border:1px solid var(--line); font-size:0.9rem; font-weight:500;
}
.related-pill:hover{ border-color: var(--green-600); color: var(--green-700); }

/* ---------------- About page ---------------- */
.about-hero{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items:center; }
@media (max-width: 860px){ .about-hero{ grid-template-columns:1fr; } }
.stat-strip{ display:flex; gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin: 20px 0 60px; }
.stat-strip div{ flex:1; padding: 26px 20px; border-right:1px solid var(--line); }
.stat-strip div:last-child{ border-right:none; }
.stat-strip strong{ display:block; font-family:var(--font-display); font-size:1.8rem; color:var(--green-900); }
.stat-strip span{ font-size:0.86rem; color:var(--ink-soft); }

.value-list{ display:grid; grid-template-columns: repeat(2,1fr); gap: 26px; }
@media (max-width:700px){ .value-list{ grid-template-columns:1fr; } }
.value-item{ border-left: 3px solid var(--green-600); padding-left: 18px; }

/* ---------------- Contact page ---------------- */
.contact-grid{ display:grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; }
@media (max-width: 860px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-info-item{ display:flex; gap:16px; padding: 20px 0; border-bottom:1px solid var(--line-soft); }
.contact-info-item .ico{
  width:42px; height:42px; border-radius: var(--radius-s); background: var(--green-100);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.field{ margin-bottom: 20px; }
.field label{ display:block; font-weight:600; font-size:0.9rem; margin-bottom:8px; }
.field input, .field textarea, .field select{
  width:100%; padding: 13px 14px; border-radius: var(--radius-s);
  border: 1.5px solid var(--line); background:#fff; font-family: var(--font-body);
  font-size:1rem; color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus{ border-color: var(--green-500); outline:none; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }
.form-note{ font-size:0.84rem; color: var(--ink-soft); margin-top: -8px; }
.map-frame{ border-radius: var(--radius-m); overflow:hidden; border:1px solid var(--line); margin-top: 30px; }

/* ---------------- Footer ---------------- */
.site-footer{
  background: var(--green-950); color: rgba(255,255,255,0.82);
  padding: 72px 0 28px; margin-top: 40px;
}
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
  padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.12);
}
@media (max-width: 800px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
.footer-grid h4{ color:#fff; font-size:0.86rem; letter-spacing:0.01em; margin-bottom:18px; font-family: var(--font-body); font-weight:700; }
.footer-grid a, .footer-grid li{ display:block; font-size:0.9rem; color: rgba(255,255,255,0.68); padding: 6px 0; }
.footer-grid a:hover{ color: var(--lime); }
.footer-logo-row{ display:flex; align-items:center; gap:12px; }
.footer-mark{ width:34px; height:34px; border-radius:8px; }
.footer-logo{ font-family: var(--font-display); font-weight:700; font-size:1.3rem; color:#fff; }
.footer-tag{ margin-top:10px; font-size:0.92rem; max-width:32ch; color: rgba(255,255,255,0.6); }
.footer-social{ display:flex; gap:10px; margin-top:20px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,0.22);
  display:flex; align-items:center; justify-content:center; padding:0;
}
.footer-social a:hover{ background: var(--lime); border-color: var(--lime); color: var(--lime-ink); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; padding-top: 24px;
  font-size:0.82rem; color: rgba(255,255,255,0.5); flex-wrap:wrap; gap:10px;
}

/* WhatsApp floating button */
.wa-float{
  position:fixed; bottom:22px; right:22px; z-index: 200;
  width:56px; height:56px; border-radius:50%;
  background: var(--green-600); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 22px rgba(16,36,28,0.28);
}
.wa-float:hover{ background: var(--green-700); }