/* ================================================



   Infinite Digital Solutions KE



   Premium Digital Agency � Nairobi, Kenya



   ================================================ */







@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');







/* ---------- Design Tokens ---------- */



:root {



  /* Core Palette */



  --ink:        #0b0e14;



  --ink-deep:   #060810;



  --ink-mid:    #131721;



  --ink-soft:   #1c2232;



  --ink-muted:  #252d3d;







  --lime:       #ffd700;



  --lime-glow:  #ffe873;



  --lime-dim:   #e6c23e;



  --gold-warm:       #f5d264;



  --gold-warm-dim:   #f8d87d;



  --gold:       #ffd700;



  --gold-glow:  #ffe873;



  --glow-gold:  0 0 40px rgba(255,215,0,0.25);



  --coral:      #ff6b6b;







  --text-white: #f4f7fb;



  --text-soft:  #a8b4cc;



  --text-muted: #b8aa7b;



  --text-dark:  #0b0e14;







  --border:     rgba(255,215,0,0.08);



  --border-lit: rgba(255,215,0,0.18);







  /* Typography */



  --font-display: 'Syne', sans-serif;



  --font-body:    'DM Sans', sans-serif;







  /* Spacing & Shape */



  --section-padding: 120px 0;



  --container-width: 1240px;



  --radius:    12px;



  --radius-sm: 8px;



  --radius-lg: 20px;



  --radius-xl: 32px;







  /* Transitions */



  --ease:  cubic-bezier(0.4, 0, 0.2, 1);



  --fast:  0.18s cubic-bezier(0.4, 0, 0.2, 1);



  --med:   0.3s  cubic-bezier(0.4, 0, 0.2, 1);



  --slow:  0.5s  cubic-bezier(0.4, 0, 0.2, 1);







  /* Shadows */



  --shadow-sm:  0 2px 8px rgba(0,0,0,0.25);



  --shadow-md:  0 8px 32px rgba(0,0,0,0.35);



  --shadow-lg:  0 20px 60px rgba(0,0,0,0.45);



  --glow-lime:  0 0 40px rgba(255,215,0,0.28);



  --glow-gold-warm: 0 0 40px rgba(255,215,0,0.16);



}







/* ---------- Reset ---------- */



*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }



html { scroll-behavior: smooth; font-size: 16px; }



body {



  font-family: var(--font-body);



  color: var(--text-white);



  line-height: 1.7;



  background: var(--ink);



  overflow-x: hidden;



}



a { text-decoration: none; color: inherit; transition: var(--med); }

.text-gold { color: var(--lime); }



ul { list-style: none; }



img { max-width: 100%; height: auto; display: block; }



button, input, textarea, select { font-family: var(--font-body); font-size: inherit; }







/* ---------- Typography ---------- */



h1, h2, h3, h4, h5, h6 {



  font-family: var(--font-display);



  font-weight: 700;



  line-height: 1.15;



  color: var(--text-white);



  letter-spacing: -0.02em;



}



h1 { font-size: clamp(2.75rem, 6vw, 5rem); font-weight: 800; }



h2 { font-size: clamp(2rem, 4vw, 3.25rem); }



h3 { font-size: clamp(1.35rem, 2.5vw, 1.75rem); }



h4 { font-size: 1.2rem; }



p { margin-bottom: 1rem; color: var(--text-soft); }







/* ---------- Layout ---------- */



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







/* ---------- Buttons ---------- */



.btn {



  display: inline-flex;



  align-items: center;



  justify-content: center;



  gap: 8px;



  padding: 15px 32px;



  font-family: var(--font-display);



  font-weight: 600;



  font-size: 0.9375rem;



  border-radius: var(--radius-sm);



  cursor: pointer;



  transition: var(--med);



  border: 1.5px solid transparent;



  letter-spacing: 0.01em;



  position: relative;



  overflow: hidden;



}







.btn-primary {



  background: var(--gold);



  color: var(--ink-deep);



  border-color: var(--gold);



  font-weight: 700;



}



.btn-primary:hover {



  background: var(--gold-glow);



  transform: translateY(-2px);



  box-shadow: var(--glow-gold);



}







.btn-outline {



  background: transparent;



  border: 1.5px solid rgba(255,255,255,0.2);



  color: var(--text-white);



}



.btn-outline:hover {



  border-color: var(--gold);



  color: var(--gold);



  transform: translateY(-2px);



}







.btn-dark {



  background: var(--ink-soft);



  color: var(--text-white);



  border-color: var(--border);



}



.btn-dark:hover {



  background: var(--ink-muted);



  border-color: var(--border-lit);



  transform: translateY(-2px);



}







.btn-accent {



  background: linear-gradient(135deg, var(--lime) 0%, var(--gold-warm) 55%, rgba(255,215,0,0.8) 100%);



  color: var(--ink-deep);



  font-weight: 700;



}



.btn-accent:hover {



  transform: translateY(-3px);



  box-shadow: var(--glow-lime), var(--glow-gold-warm);



}







/* ---------- Header ---------- */



.header {



  position: fixed;



  top: 0; left: 0; right: 0;



  z-index: 1000;



  background: rgba(11, 14, 20, 0.85);



  backdrop-filter: blur(24px);



  -webkit-backdrop-filter: blur(24px);



  border-bottom: 1px solid var(--border);



  transition: var(--med);



}



.header.scrolled {



  background: rgba(6, 8, 16, 0.95);



  border-bottom-color: var(--border-lit);



}



.header-inner {



  display: flex;



  align-items: center;



  justify-content: space-between;



  padding: 18px 0;



  transition: var(--med);



}



.scrolled .header-inner { padding: 12px 0; }







.logo {



  display: flex;



  align-items: center;



  gap: 10px;



  font-family: var(--font-display);



  font-size: 1.3rem;



  font-weight: 800;



}



.logo img {



  height: 38px;



  width: auto;



  object-fit: contain;



  border-radius: 50%;



  border: 1.5px solid rgba(255,215,0,0.28);



}



.logo-infinite { color: var(--text-white); }



.logo-ke { color: var(--lime); }



.logo-text { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }



.social-link svg { width: 18px; height: 18px; fill: currentColor; }







.nav-menu { display: flex; align-items: center; gap: 8px; }



.nav-link {



  font-family: var(--font-body);



  font-weight: 500;



  font-size: 0.9375rem;



  color: var(--text-soft);



  padding: 8px 14px;



  border-radius: var(--radius-sm);



  transition: var(--med);



}



.nav-link:hover { color: var(--text-white); background: rgba(255,255,255,0.06); }



.nav-link.active { color: var(--lime); }







.mobile-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; }



.mobile-toggle span { width: 22px; height: 2px; background: var(--text-white); transition: var(--med); border-radius: 2px; }







/* ---------- Section Utilities ---------- */



.section-label {



  display: inline-flex;



  align-items: center;



  gap: 8px;



  font-family: var(--font-display);



  font-size: 0.8125rem;



  font-weight: 600;



  color: var(--lime);



  text-transform: uppercase;



  letter-spacing: 0.12em;



  margin-bottom: 18px;



}



.section-label::before {



  content: '';



  width: 20px;



  height: 2px;



  background: var(--lime);



  border-radius: 2px;



}



.section-header { text-align: center; max-width: 680px; margin: 0 auto 72px; }



.section-title { margin-bottom: 18px; color: var(--text-white); }



.section-description { color: var(--text-soft); font-size: 1.0625rem; line-height: 1.75; }







/* ---------- Page Header ---------- */



.page-header {



  padding: 160px 0 80px;



  background: var(--ink-deep);



  position: relative;



  overflow: hidden;



}



.page-header::before {



  content: '';



  position: absolute;



  top: 0; left: 0; right: 0; bottom: 0;



  background:



    radial-gradient(ellipse at 10% 50%, rgba(255,215,0,0.08) 0%, transparent 55%),



    radial-gradient(ellipse at 90% 20%, rgba(255,215,0,0.08) 0%, transparent 45%);



  pointer-events: none;



}



.page-header-content { position: relative; z-index: 1; }



.page-header h1 { margin-bottom: 16px; }



.page-header p { color: var(--text-soft); font-size: 1.125rem; max-width: 540px; }



.breadcrumb { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 0.875rem; color: var(--text-muted); }



.breadcrumb a { color: var(--text-muted); }



.breadcrumb a:hover { color: var(--lime); }



.breadcrumb span:last-child { color: var(--lime); }







/* ---------- Hero ---------- */



.hero {



  min-height: 100vh;



  display: flex;



  align-items: center;



  padding: 140px 0 100px;



  background: var(--ink-deep);



  position: relative;



  overflow: hidden;



}



.hero::before {



  content: '';



  position: absolute;



  inset: 0;



  background:



    radial-gradient(ellipse at 15% 60%, rgba(255,215,0,0.08) 0%, transparent 50%),



    radial-gradient(ellipse at 85% 15%, rgba(255,215,0,0.07) 0%, transparent 45%),



    radial-gradient(ellipse at 50% 90%, rgba(255,215,0,0.04) 0%, transparent 50%);



  pointer-events: none;



}



/* Grid texture overlay */



.hero::after {



  content: '';



  position: absolute;



  inset: 0;



  background-image:



    linear-gradient(rgba(255,215,0,0.04) 1px, transparent 1px),



    linear-gradient(90deg, rgba(255,215,0,0.04) 1px, transparent 1px);



  background-size: 60px 60px;



  pointer-events: none;



  mask-image: radial-gradient(ellipse at 30% 50%, black 0%, transparent 70%);



}



.hero-image-overlay {



  position: absolute;



  top: 0; left: 0;



  width: 100%; height: 100%;



  z-index: 0;



}



.hero-image-overlay img {



  width: 100%; height: 100%;



  object-fit: cover;



  opacity: 0.06;



  filter: grayscale(1) brightness(0.5);



}



.hero-content { max-width: 760px; position: relative; z-index: 1; }







.hero-badge {



  display: inline-flex;



  align-items: center;



  gap: 10px;



  padding: 10px 20px;



  background: rgba(255,215,0,0.12);



  border: 1px solid rgba(255,215,0,0.25);



  border-radius: 50px;



  color: var(--lime);



  font-size: 0.8125rem;



  font-weight: 600;



  font-family: var(--font-display);



  letter-spacing: 0.05em;



  margin-bottom: 32px;



  text-transform: uppercase;



}



.hero-badge::before {



  content: '';



  width: 8px; height: 8px;



  background: var(--lime);



  border-radius: 50%;



  animation: pulse 2s infinite;



  box-shadow: 0 0 12px var(--lime);



}



@keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.5; transform:scale(1.3); } }







.hero h1 { color: var(--text-white); margin-bottom: 24px; }



.hero h1 span {



  background: linear-gradient(135deg, var(--lime) 0%, var(--gold-warm) 55%, rgba(255,215,0,0.8) 100%);



  -webkit-background-clip: text;



  -webkit-text-fill-color: transparent;



  background-clip: text;



}



.hero h1::after {



  content: '';



  display: block;



  width: 64px; height: 4px;



  background: var(--lime);



  border-radius: 2px;



  margin-top: 28px; margin-bottom: 28px;



}



.hero-description {



  font-size: 1.1875rem;



  color: var(--text-soft);



  margin-bottom: 40px;



  max-width: 560px;



  line-height: 1.8;



}



.hero-buttons { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 56px; }



.hero-buttons .btn { padding: 16px 34px; font-size: 0.9375rem; }







.hero-stats {



  display: flex;



  gap: 48px;



  padding-top: 40px;



  border-top: 1px solid var(--border);



}



.stat-item { text-align: left; }



.stat-number {



  font-family: var(--font-display);



  font-size: 2.5rem;



  font-weight: 800;



  color: var(--lime);



  line-height: 1;



  margin-bottom: 6px;



}



.stat-label { color: var(--text-muted); font-size: 0.875rem; font-weight: 500; }







.hero-visual {



  position: absolute;



  right: 4%;



  top: 50%;



  transform: translateY(-50%);



  width: 360px; height: 460px;



  border: 1px solid var(--border);



  border-radius: var(--radius-xl);



  background: linear-gradient(135deg, rgba(255,215,0,0.04), rgba(255,215,0,0.04));



  display: flex;



  align-items: center;



  justify-content: center;



}



.hero-visual-icon { font-size: 4rem; opacity: 0.4; }







/* ---------- Services ---------- */



.services { padding: var(--section-padding); background: var(--ink); }



.services-grid {



  display: grid;



  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));



  gap: 20px;



}



.service-card {



  background: var(--ink-mid);



  border: 1px solid var(--border);



  padding: 0;



  border-radius: var(--radius-lg);



  transition: var(--med);



  position: relative;



  overflow: hidden;



  cursor: pointer;



}



.service-card::before {



  content: '';



  position: absolute;



  top: 0; left: 0; right: 0;



  height: 2px;



  background: linear-gradient(90deg, var(--lime), rgba(255,215,0,0.85));



  transform: scaleX(0);



  transform-origin: left;



  transition: var(--med);



}



.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(255,215,0,0.18); }



.service-card:hover::before { transform: scaleX(1); }



.service-image { width: 100%; height: 160px; overflow: hidden; }



.service-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); filter: brightness(0.75) saturate(0.85); }



.service-card:hover .service-image img { transform: scale(1.06); filter: brightness(0.9) saturate(1); }



.service-card h3 { font-size: 1.125rem; padding: 20px 24px 10px; color: var(--text-white); }



.service-card p { padding: 0 24px; color: var(--text-soft); font-size: 0.9375rem; }



.service-link {



  display: inline-flex;



  align-items: center;



  gap: 6px;



  margin: 12px 24px 24px;



  color: var(--lime);



  font-size: 0.875rem;



  font-weight: 600;



  font-family: var(--font-display);



  transition: var(--fast);



}



.service-link:hover { gap: 10px; }







/* ---------- Process ---------- */



.process { padding: var(--section-padding); background: var(--ink-deep); }



.process-grid {



  display: grid;



  grid-template-columns: repeat(5, 1fr);



  gap: 0;



  position: relative;



}



.process-grid::before {



  content: '';



  position: absolute;



  top: 32px; left: 10%; right: 10%;



  height: 1px;



  background: linear-gradient(90deg, transparent, var(--lime), rgba(255,215,0,0.55), transparent);



  opacity: 0.3;



}



.process-step {



  text-align: center;



  padding: 0 16px;



  position: relative;



}



.step-number {



  width: 64px; height: 64px;



  background: var(--ink-soft);



  border: 1px solid var(--border-lit);



  border-radius: 50%;



  display: flex;



  align-items: center;



  justify-content: center;



  margin: 0 auto 24px;



  font-family: var(--font-display);



  font-size: 1.25rem;



  font-weight: 800;



  color: var(--lime);



  transition: var(--med);



}



.process-step:hover .step-number {



  background: var(--lime);



  color: var(--ink);



  box-shadow: var(--glow-lime);



}



.process-step h3 { font-size: 1rem; margin-bottom: 10px; color: var(--text-white); }



.process-step p { font-size: 0.875rem; color: var(--text-muted); }







/* ---------- Testimonials ---------- */



.testimonials { padding: var(--section-padding); background: var(--ink); }



.testimonials-grid {



  display: grid;



  grid-template-columns: repeat(3, 1fr);



  gap: 24px;



}



.testimonial-card {



  background: var(--ink-mid);



  border: 1px solid var(--border);



  border-radius: var(--radius-lg);



  padding: 36px;



  transition: var(--med);



  position: relative;



}



.testimonial-card::before {



  content: '"';



  position: absolute;



  top: 20px; right: 28px;



  font-family: var(--font-display);



  font-size: 5rem;



  line-height: 1;



  color: var(--lime);



  opacity: 0.12;



}



.testimonial-card:hover { border-color: rgba(255,215,0,0.18); transform: translateY(-4px); }



.testimonial-stars { color: var(--lime); font-size: 1rem; letter-spacing: 2px; margin-bottom: 16px; }



.testimonial-text { color: var(--text-soft); font-size: 0.9375rem; line-height: 1.75; margin-bottom: 28px; font-style: italic; }



.testimonial-author { display: flex; align-items: center; gap: 14px; }



.author-avatar {



  width: 46px; height: 46px;



  background: linear-gradient(135deg, var(--lime), var(--gold-warm));



  border-radius: 50%;



  display: flex;



  align-items: center;



  justify-content: center;



  font-family: var(--font-display);



  font-size: 0.8125rem;



  font-weight: 700;



  color: var(--ink);



  flex-shrink: 0;



}



.author-info h4 { font-size: 0.9375rem; color: var(--text-white); margin-bottom: 2px; }



.author-info span { font-size: 0.8125rem; color: var(--text-muted); }







/* ---------- Portfolio ---------- */



.portfolio { padding: var(--section-padding); background: var(--ink-deep); }



.portfolio-grid {



  display: grid;



  grid-template-columns: repeat(3, 1fr);



  gap: 24px;



}



.portfolio-item {



  background: var(--ink-mid);



  border: 1px solid var(--border);



  border-radius: var(--radius-lg);



  overflow: hidden;



  transition: var(--med);



}



.portfolio-item:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(255,215,0,0.14); }



.portfolio-image {



  height: 200px;



  display: flex;



  align-items: center;



  justify-content: center;



  overflow: hidden;



  position: relative;



}



.portfolio-image img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.7); transition: var(--slow); }

.portfolio-image.gradient-a { background: linear-gradient(135deg, rgba(255,215,0,0.22), rgba(255,215,0,0.06)), linear-gradient(135deg, #07101d 0%, #121a2c 100%); }

.portfolio-image.gradient-b { background: linear-gradient(135deg, rgba(255,215,0,0.18), rgba(255,215,0,0.05)), linear-gradient(135deg, #08121f 0%, #141c30 100%); }

.portfolio-image.gradient-c { background: linear-gradient(135deg, rgba(255,215,0,0.16), rgba(255,215,0,0.05)), linear-gradient(135deg, #0b1424 0%, #162036 100%); }

.portfolio-image.gradient-d { background: linear-gradient(135deg, rgba(255,215,0,0.20), rgba(255,215,0,0.06)), linear-gradient(135deg, #091324 0%, #172741 100%); }

.portfolio-image.gradient-e { background: linear-gradient(135deg, rgba(255,215,0,0.14), rgba(255,215,0,0.04)), linear-gradient(135deg, #0c1329 0%, #162b42 100%); }

.portfolio-image.gradient-f { background: linear-gradient(135deg, rgba(255,215,0,0.18), rgba(255,215,0,0.05)), linear-gradient(135deg, #100f2a 0%, #1c3151 100%); }





.portfolio-item:hover .portfolio-image img { filter: brightness(0.85); transform: scale(1.04); }



.portfolio-icon { font-size: 3rem; opacity: 0.8; }



.portfolio-content { padding: 28px; }



.portfolio-category {



  font-size: 0.75rem;



  font-weight: 700;



  font-family: var(--font-display);



  color: var(--lime);



  text-transform: uppercase;



  letter-spacing: 0.1em;



  display: block;



  margin-bottom: 10px;



}



.portfolio-content h3 { font-size: 1.1875rem; margin-bottom: 10px; color: var(--text-white); }



.portfolio-content p { font-size: 0.9rem; color: var(--text-soft); margin-bottom: 18px; }



.portfolio-link {



  font-size: 0.875rem;



  font-weight: 600;



  font-family: var(--font-display);



  color: var(--lime);



  display: inline-flex;



  align-items: center;



  gap: 4px;



  transition: var(--fast);



}



.portfolio-link:hover { gap: 8px; }







/* ---------- CTA Section ---------- */



.cta-section {



  padding: 100px 0;



  background: linear-gradient(135deg, var(--ink-deep) 0%, var(--ink-mid) 100%);



  position: relative;



  overflow: hidden;



}



.cta-section::before {



  content: '';



  position: absolute;



  inset: 0;



  background: radial-gradient(ellipse at 50% 50%, rgba(255,215,0,0.07) 0%, transparent 65%);



}



.cta-section::after {



  content: '';



  position: absolute;



  top: -50%; left: -10%;



  width: 600px; height: 600px;



  border: 1px solid rgba(255,215,0,0.06);



  border-radius: 50%;



  pointer-events: none;



}



.cta-content {



  text-align: center;



  position: relative;



  z-index: 1;



  max-width: 640px;



  margin: 0 auto;



}



.cta-content h2 { margin-bottom: 16px; font-size: clamp(2rem, 4vw, 3rem); }



.cta-content p { color: var(--text-soft); font-size: 1.0625rem; margin-bottom: 40px; }



.cta-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }







/* ---------- Footer ---------- */



.footer {



  background: var(--ink-deep);



  border-top: 1px solid var(--border);



  padding: 80px 0 0;



}



.footer-grid {



  display: grid;



  grid-template-columns: 1.8fr 1fr 1fr 1fr;



  gap: 48px;



  padding-bottom: 64px;



}



.footer-brand p { color: var(--text-muted); font-size: 0.9rem; margin-top: 16px; }



.social-links { display: flex; gap: 10px; margin-top: 24px; }



.social-link {



  width: 38px; height: 38px;



  background: var(--ink-soft);



  border: 1px solid var(--border);



  border-radius: var(--radius-sm);



  display: flex;



  align-items: center;



  justify-content: center;



  font-size: 0.875rem;



  font-weight: 700;



  color: var(--text-muted);



  transition: var(--med);



}



.social-link:hover {



  background: var(--lime);



  border-color: var(--lime);



  color: var(--ink);



  transform: translateY(-2px);



}



.footer-column h4 {



  font-family: var(--font-display);



  font-size: 0.875rem;



  font-weight: 700;



  color: var(--text-white);



  text-transform: uppercase;



  letter-spacing: 0.08em;



  margin-bottom: 20px;



}



.footer-column ul li {



  margin-bottom: 12px;



}



.footer-column ul li a {



  color: var(--text-muted);



  font-size: 0.9rem;



  transition: var(--fast);



}



.footer-column ul li a:hover { color: var(--lime); }



.footer-column ul li:not(:has(a)) { color: var(--text-muted); font-size: 0.9rem; }







.footer-bottom {



  border-top: 1px solid var(--border);



  padding: 24px 0;



  display: flex;



  align-items: center;



  justify-content: space-between;



}



.footer-bottom p { color: var(--text-muted); font-size: 0.875rem; margin: 0; }



.footer-links { display: flex; gap: 24px; }



.footer-links a { color: var(--text-muted); font-size: 0.875rem; }



.footer-links a:hover { color: var(--lime); }







/* ---------- About Page ---------- */



.about-hero { padding: var(--section-padding); background: var(--ink); }



.about-grid {



  display: grid;



  grid-template-columns: 1fr 1fr;



  gap: 72px;



  align-items: center;



}



.about-image {



  height: 500px;



  border-radius: var(--radius-xl);



  overflow: hidden;



  border: 1px solid var(--border);



  position: relative;



}

.about-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}



.about-image::after {



  content: '';



  position: absolute;



  inset: 0;



  background: linear-gradient(135deg, rgba(255,215,0,0.12), transparent 60%);



  pointer-events: none;



}



.about-content h2 { margin-bottom: 20px; }



.about-content > p { color: var(--text-soft); margin-bottom: 14px; }



.about-features {



  display: grid;



  grid-template-columns: 1fr 1fr;



  gap: 14px;



  margin-top: 28px;



}



.feature-item {



  display: flex;



  align-items: center;



  gap: 10px;



  font-size: 0.9375rem;



  color: var(--text-soft);



}



.feature-icon {



  width: 24px; height: 24px;



  background: rgba(255,215,0,0.12);



  border: 1px solid rgba(255,215,0,0.3);



  border-radius: 50%;



  display: flex;



  align-items: center;



  justify-content: center;



  font-size: 0.7rem;



  color: var(--lime);



  font-weight: 700;



  flex-shrink: 0;



}







.values { padding: var(--section-padding); background: var(--ink-deep); }



.values-grid {



  display: grid;



  grid-template-columns: repeat(4, 1fr);



  gap: 20px;



}



.value-card {



  background: var(--ink-mid);



  border: 1px solid var(--border);



  border-radius: var(--radius-lg);



  padding: 36px 28px;



  transition: var(--med);



}



.value-card:hover { border-color: rgba(255,215,0,0.2); transform: translateY(-4px); }



.value-icon { font-size: 2.25rem; margin-bottom: 20px; }



.value-card h3 { font-size: 1.125rem; margin-bottom: 12px; }



.value-card p { font-size: 0.9rem; color: var(--text-muted); margin: 0; }







/* ---------- Services Detail Page ---------- */



.services-detail { padding: var(--section-padding); background: var(--ink); }



.service-detail-item {



  display: grid;



  grid-template-columns: 1fr 1fr;



  gap: 72px;



  align-items: center;



  padding: 80px 0;



  border-bottom: 1px solid var(--border);



}



.service-detail-item:first-child { padding-top: 0; }



.service-detail-item:last-child { border-bottom: none; }



.service-detail-item:nth-child(even) { direction: rtl; }



.service-detail-item:nth-child(even) > * { direction: ltr; }



.service-detail-image {



  height: 400px;



  border-radius: var(--radius-xl);



  overflow: hidden;



  border: 1px solid var(--border);



}



.service-detail-image img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.8) saturate(0.9); }



.service-detail-content h2 { margin-bottom: 16px; }



.service-detail-content > p { color: var(--text-soft); margin-bottom: 28px; }



.service-benefits { margin-bottom: 28px; }



.service-benefits li {



  display: flex;



  align-items: center;



  gap: 12px;



  margin-bottom: 12px;



  color: var(--text-soft);



  font-size: 0.9375rem;



}



.service-detail-content .btn { margin-top: 24px; }



.service-benefits li::before {



  content: '✓';



  color: var(--lime);



  font-weight: 700;



  flex-shrink: 0;



}







/* ---------- Pricing ---------- */



.pricing-section { padding: var(--section-padding); background: var(--ink-deep); }



.pricing-grid {



  display: grid;



  grid-template-columns: repeat(3, 1fr);



  gap: 24px;



  max-width: 960px;



  margin: 0 auto;



}



.pricing-card {



  background: var(--ink-mid);



  border: 1px solid var(--border);



  border-radius: var(--radius-xl);



  padding: 40px 32px;



  position: relative;



  transition: var(--med);



}



.pricing-card:hover { transform: translateY(-4px); border-color: rgba(255,215,0,0.18); }



.pricing-card.popular {



  border-color: var(--lime);



  background: linear-gradient(135deg, rgba(255,215,0,0.08), rgba(255,215,0,0.04));



}



.pricing-badge {



  position: absolute;



  top: -14px;



  left: 50%;



  transform: translateX(-50%);



  background: var(--lime);



  color: var(--ink);



  font-family: var(--font-display);



  font-size: 0.75rem;



  font-weight: 700;



  padding: 6px 18px;



  border-radius: 50px;



  letter-spacing: 0.05em;



  text-transform: uppercase;



  white-space: nowrap;



}



.pricing-header h3 { margin-bottom: 10px; font-size: 1.5rem; }



.pricing-header p { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 28px; }



.pricing-features ul { margin-bottom: 32px; }



.pricing-features li {



  display: flex;



  align-items: center;



  gap: 10px;



  padding: 10px 0;



  border-bottom: 1px solid var(--border);



  color: var(--text-soft);



  font-size: 0.9rem;



}



.pricing-features li:last-child { border-bottom: none; }



.pricing-features li::before { content: '✓'; color: var(--lime); font-weight: 700; flex-shrink: 0; }



.pricing-card .btn { width: 100%; justify-content: center; }







/* ---------- Contact ---------- */



.contact-section { padding: var(--section-padding); background: var(--ink); }



.contact-grid {



  display: grid;



  grid-template-columns: 1fr 1.6fr;



  gap: 72px;



}



.contact-info h2 { margin-bottom: 16px; }



.contact-info > p { color: var(--text-soft); margin-bottom: 36px; }



.contact-details { margin-bottom: 36px; }



.contact-item { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 26px; }



.contact-icon {



  width: 46px; height: 46px;



  background: rgba(255,215,0,0.12);



  border: 1px solid rgba(255,215,0,0.25);



  border-radius: var(--radius-sm);



  display: flex;



  align-items: center;



  justify-content: center;



  font-size: 1.1rem;



  flex-shrink: 0;



}



.contact-item h4 { font-size: 0.9rem; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 4px; }



.contact-item p { color: var(--text-soft); font-size: 0.9375rem; margin: 0; }







.contact-form {



  background: var(--ink-mid);



  border: 1px solid var(--border);



  padding: 48px;



  border-radius: var(--radius-xl);



}



.section-subtitle { font-family: var(--font-display); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 16px; }



.brand-tagline { margin-top: 16px; color: var(--text-muted); font-size: 0.95rem; letter-spacing: 0.18em; text-transform: uppercase; }



.faq-section { padding: var(--section-padding); background: var(--ink-deep); }







  background: var(--ink-mid);



  border: 1px solid var(--border);



  padding: 48px;



  border-radius: var(--radius-xl);



}



.contact-form h3 { margin-bottom: 28px; font-size: 1.5rem; }



.form-group { margin-bottom: 22px; }



.form-group label {



  display: block;



  font-size: 0.8125rem;



  font-weight: 600;



  font-family: var(--font-display);



  text-transform: uppercase;



  letter-spacing: 0.07em;



  color: var(--text-muted);



  margin-bottom: 8px;



}



.form-group input,



.form-group select,



.form-group textarea {



  width: 100%;



  padding: 14px 18px;



  background: var(--ink-soft);



  border: 1px solid var(--border);



  border-radius: var(--radius-sm);



  color: var(--text-white);



  font-size: 0.9375rem;



  transition: var(--med);



  -webkit-appearance: none;



  appearance: none;



}



.form-group select { cursor: pointer; }



.form-group input::placeholder,



.form-group textarea::placeholder { color: var(--text-muted); }



.form-group input:focus,



.form-group select:focus,



.form-group textarea:focus {



  outline: none;



  border-color: var(--lime);



  box-shadow: 0 0 0 3px rgba(255,215,0,0.14);



  background: var(--ink-muted);



}



.form-group textarea { min-height: 140px; resize: vertical; }



.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }



.contact-form .btn { width: 100%; margin-top: 6px; padding: 16px; font-size: 1rem; }







/* ---------- FAQ ---------- */



.faq-grid { max-width: 760px; margin: 0 auto; }



.faq-item {



  background: var(--ink-mid);



  border: 1px solid var(--border);



  border-radius: var(--radius);



  margin-bottom: 12px;



  overflow: hidden;



  transition: var(--med);



}



.faq-item:hover { border-color: rgba(255,215,0,0.18); }



.faq-item.active { border-color: rgba(255,215,0,0.28); }



.faq-question {



  width: 100%;



  padding: 22px 26px;



  background: none;



  border: none;



  display: flex;



  justify-content: space-between;



  align-items: center;



  cursor: pointer;



  text-align: left;



  color: var(--text-white);



}



.faq-question h3 {



  font-size: 1rem;



  font-weight: 600;



  color: var(--text-white);



  margin: 0;



  padding-right: 16px;



  font-family: var(--font-body);



}



.faq-icon {



  flex-shrink: 0;



  width: 30px; height: 30px;



  display: flex;



  align-items: center;



  justify-content: center;



  background: var(--ink-soft);



  border-radius: 50%;



  transition: var(--med);



  position: relative;



}



.faq-icon::before, .faq-icon::after {



  content: '';



  width: 12px; height: 2px;



  background: var(--text-muted);



  position: absolute;



  border-radius: 2px;



}



.faq-icon::after { transform: rotate(90deg); transition: var(--med); }



.faq-item.active .faq-icon { background: var(--lime); }



.faq-item.active .faq-icon::before,



.faq-item.active .faq-icon::after { background: var(--ink); }



.faq-item.active .faq-icon::after { transform: rotate(0); }



.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }



.faq-answer-content { padding: 0 26px 22px; color: var(--text-soft); font-size: 0.9375rem; line-height: 1.75; }



.faq-item.active .faq-answer { max-height: 220px; }







/* ---------- Floating Buttons ---------- */



.floating-buttons {



  position: fixed;



  bottom: 28px; right: 28px;



  display: flex;



  flex-direction: column;



  gap: 12px;



  z-index: 999;



}



.whatsapp-btn, .quote-btn {



  width: 54px; height: 54px;



  border-radius: 50%;



  display: flex;



  align-items: center;



  justify-content: center;



  font-size: 1.4rem;



  box-shadow: var(--shadow-md);



  transition: var(--med);



  border: none;



}



.whatsapp-btn {



  background: linear-gradient(135deg, #25d366, #1db954);



  color: white;



}



.whatsapp-btn:hover { transform: scale(1.1); box-shadow: 0 0 28px rgba(37,211,102,0.45); }



.quote-btn {



  background: var(--gold);



  color: var(--ink);



}



.quote-btn:hover { transform: scale(1.1); box-shadow: var(--glow-gold); }







/* ---------- Animations ---------- */



@keyframes fadeInUp { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } }



.animate-fade-in { animation: fadeInUp 0.6s var(--ease) forwards; }



.delay-1 { animation-delay: 0.1s; }



.delay-2 { animation-delay: 0.2s; }



.delay-3 { animation-delay: 0.3s; }



.delay-4 { animation-delay: 0.4s; }



.delay-5 { animation-delay: 0.5s; }







/* ---------- Portfolio Filter (portfolio.html) ---------- */



.portfolio-filter { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 48px; }



.filter-btn {



  padding: 8px 22px;



  background: var(--ink-mid);



  border: 1px solid var(--border);



  border-radius: 50px;



  color: var(--text-muted);



  font-size: 0.875rem;



  font-weight: 600;



  font-family: var(--font-display);



  cursor: pointer;



  transition: var(--med);



}



.filter-btn:hover, .filter-btn.active {



  background: var(--lime);



  border-color: var(--lime);



  color: var(--ink);



}







/* ---------- Responsive ---------- */



@media (max-width: 1100px) {



  .hero-visual { display: none; }



  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }



  .values-grid { grid-template-columns: repeat(2, 1fr); }



  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }



  .process-grid { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }



  .process-grid::before { display: none; }



  .hero { padding: 120px 0 80px; }



  .page-header { padding: 120px 0 60px; }



  .hero-description { max-width: 100%; }



}







@media (max-width: 900px) {



  .about-grid, .contact-grid, .service-detail-item { grid-template-columns: 1fr; gap: 48px; }



  .service-detail-item:nth-child(even) { direction: ltr; }



  .portfolio-grid, .pricing-grid { grid-template-columns: 1fr 1fr; }



  .about-image { height: 320px; }



  .hero { padding: 100px 0 60px; }



  .services-grid { gap: 18px; }



}







@media (max-width: 768px) {



  :root { --section-padding: 64px 0; }



  .header-inner { flex-wrap: wrap; gap: 14px; }



  .logo { gap: 8px; }



  .logo img { height: 34px; }



  .logo-text { white-space: normal; font-size: 1rem; min-width: 0; }



  .logo-infinite, .logo-ke { line-height: 1.1; }



  .nav-menu {



    position: fixed;



    top: 0; right: -100%;



    width: 82%; max-width: 320px;



    height: 100vh;



    background: var(--ink-deep);



    border-left: 1px solid var(--border);



    padding: 90px 32px 40px;



    box-shadow: var(--shadow-xl);



    transition: var(--med);



    flex-direction: column;



    align-items: flex-start;



    gap: 6px;



  }



  .nav-menu.active { right: 0; }



  .nav-link { width: 100%; padding: 12px 16px; }



  .mobile-nav-cta { display: block; margin-top: 12px; width: 100%; text-align: center; }



  .mobile-toggle { display: flex; }



  .hero-stats { flex-wrap: wrap; gap: 32px; }



  .testimonials-grid, .portfolio-grid, .pricing-grid { grid-template-columns: 1fr; }



  .values-grid { grid-template-columns: 1fr 1fr; }



  .process-grid { grid-template-columns: 1fr 1fr; }



  .contact-form {



  background: var(--ink-mid);



  border: 1px solid var(--border);



  padding: 48px;



  border-radius: var(--radius-xl);



}



.section-subtitle { font-family: var(--font-display); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 16px; }



.brand-tagline { margin-top: 16px; color: var(--text-muted); font-size: 0.95rem; letter-spacing: 0.18em; text-transform: uppercase; }



.faq-section { padding: var(--section-padding); background: var(--ink-deep); }



 padding: 28px; }



  .footer-grid { grid-template-columns: 1fr; gap: 32px; }



  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }



  .container { padding: 0 22px; }



}







@media (max-width: 540px) {



  :root { --section-padding: 48px 0; }



  .hero h1 { font-size: 2.25rem; }



  .hero-buttons { flex-direction: column; }



  .hero-buttons .btn { width: 100%; text-align: center; }



  .cta-buttons { flex-direction: column; align-items: center; }



  .values-grid { grid-template-columns: 1fr; }



  .process-grid { grid-template-columns: 1fr; }



  .form-row { grid-template-columns: 1fr; }



  .about-features { grid-template-columns: 1fr; }



  .container { padding: 0 18px; }



  .page-header { padding: 100px 0 50px; }



  .section-header { margin-bottom: 56px; }



  .mobile-nav-cta { margin-top: 16px; }



}