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

:root {
  /* Core colors */
  --bg: #ffffff;
  --text: #18181B;
  --muted: #64748B;
  --surface: #F4F4F5;
  --border: #E4E4E7;
  
  /* Vibrant Tech Theme */
  --primary: #7C3AED;
  --primary-light: #A78BFA;
  --accent: #EC4899;
  --tech-mint: #34D399;
  --tech-orange: #F59E0B;
  --tech-red: #EF4444;
  
  /* Functional Colors */
  --success: #34D399;
  --warning: #F59E0B;
  --error: #EF4444;
  --info: #06B6D4;
  
  /* Effects */
  --shadow: 0 10px 30px rgba(79, 70, 229, 0.12);
  --glow: 0 0 20px rgba(96, 165, 250, 0.2);
  --gradient-primary: linear-gradient(135deg, var(--primary), var(--ai-purple));
  --gradient-accent: linear-gradient(135deg, var(--accent), var(--primary-light));
  
  /* Animation */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --text: #f1f5f9;
    --muted: #94a3b8;
    --surface: #1e1b4b;
    --border: #1f2937;
    --card-bg: rgba(30, 27, 75, 0.5);
    
    /* Dark mode adjustments */
    --primary: #818CF8;
    --primary-light: #A5B4FC;
    --accent: #22D3EE;
    --tech-glow: #60A5FA;
    --ai-purple: #C084FC;
    
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    --glow: 0 0 30px rgba(96, 165, 250, 0.15);
  }
}
html{ scroll-behavior:smooth; }
body{
  margin:0; font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color:var(--text); background:var(--bg);
}
img{ max-width:100%; display:block }
a{ color:var(--primary); text-decoration:none }
a:hover{ text-decoration:underline }
.skip-link{ position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip-link:focus{ position:static; width:auto; height:auto; padding:.5rem; background:var(--surface) }

.container{ 
  max-width:1120px; 
  margin-inline:auto; 
  padding-inline:1rem;
  width: 100%;
}
.section{ 
  padding:6rem 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
h1,h2,h3{ line-height:1.2; margin:0 0 .75rem }
h1{ font-size:clamp(2rem,3vw,3rem) }
h2{ font-size:clamp(1.5rem,2.2vw,2.25rem) }
/* Center align all h2 site-wide for consistent presentation */
h2{ text-align: center; }
h3{ font-size:1.125rem }

/* Header */
.site-header{ position:sticky; top:0; z-index:50; background:var(--bg); border-bottom:1px solid var(--border) }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:.75rem 0 }
.brand{ display:flex; align-items:center; gap:.5rem; color:var(--text); text-decoration:none; font-weight:700 }
.nav{ display:flex; gap:1rem; align-items:center }
.nav a{ padding:.5rem .75rem; border-radius:.5rem }
.nav .btn{ text-decoration:none }

/* Hero */
.hero { 
  padding: 8rem 0 12rem; 
  position: relative;
  margin-bottom: -4rem;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(96, 165, 250, 0.1),
    rgba(52, 211, 153, 0.05),
    transparent 70%
  );
  overflow: hidden;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 4rem;
  text-align: center;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}

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

.hero-shape {
  position: absolute;
  right: -5%;
  top: -5%;
  width: 50%;
  height: 50%;
  background: var(--gradient-secondary);
  filter: blur(80px);
  opacity: 0.1;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  z-index: -1;
}

@media (max-width: 768px) {
  .hero-stats {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .stat-number {
    font-size: 2rem;
  }
  
  .hero-shape {
    width: 80%;
    height: 80%;
    opacity: 0.05;
  }
}

.hero::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zM22.343 0L13.857 8.485 15.272 9.9l8.485-8.485h-1.414zM32 0l-9.9 9.9 1.415 1.415L33.414 0H32zM0 9.314L9.9 0h-2.83L0 7.485v1.83zM0 3.657L6.485 0H5.07L0 5.07v-1.41zM0 14.97L14.97 0h-2.83L0 12.143v2.83zm0 5.657L20.627 0h-2.83L0 17.8v2.827zm0 5.657L26.284 0h-2.83L0 23.456v2.83zm0 5.657L31.94 0h-2.827L0 29.113v2.83zm0 5.657L37.6 0h-2.83L0 34.77v2.83zm0 5.657L43.255 0h-2.828L0 40.425v2.83zm0 5.657L48.912 0h-2.827L0 46.082v2.83zm0 5.657L54.57 0h-2.83L0 51.74v2.83zm0 5.657L60 0h-2.83L0 57.395v2.83zM54.627 60L60 54.627V51.8L51.8 60h2.827zm-5.657 0L60 48.97V46.143L46.143 60h2.827zm-5.657 0L60 43.314V40.485L40.485 60h2.828zm-5.657 0L60 37.657V34.83L34.828 60h2.83zm-5.657 0L60 32V29.173L29.173 60h2.83zm-5.657 0L60 26.343V23.516L23.516 60h2.83zm-5.657 0L60 20.686v-2.83L17.857 60h2.83zm-5.657 0L60 15.03v-2.83L12.2 60h2.83zm-5.657 0L60 9.373V6.545L6.544 60h2.83zm-5.657 0L60 3.715V.887L.887 60h2.83z' fill='rgba(96, 165, 250, 0.03)' fill-rule='evenodd'/%3E%3C/svg%3E");
  animation: heroPatternMove 20s linear infinite;
}

@keyframes heroPatternMove {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.hero .container {
  position: relative;
  z-index: 1;
}
.hero p{ max-width:56ch; color:var(--muted) }
.cta-row{ display:flex; gap:.75rem; margin-top:1rem; flex-wrap:wrap }

/* Grid + Cards */
.grid{ 
  display: grid; 
  gap: 1.5rem;
  width: 100%;
}
.cards{ 
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (min-width: 1024px){ 
  .cards{ 
    grid-template-columns: repeat(3, minmax(0,1fr));
  } 
}
@media (max-width: 480px){
  .cards{
    gap: 1rem;
  }
  .card {
    padding: 1.25rem;
  }
  .card p {
    font-size: 0.875rem;
  }
}
.card{position:relative;padding:1.25rem;background:var(--bg);border-radius:16px;box-shadow:var(--shadow);border:1px solid var(--border);overflow:hidden;isolation:isolate;z-index:0;will-change:transform}
.card::before,.card::after{content:"";position:absolute;inset:-2px;border-radius:18px;pointer-events:none;background:conic-gradient(from 0deg,hsl(var(--hue,200) 90% 60%),hsl(calc(var(--hue,200)+120) 90% 60%),hsl(calc(var(--hue,200)+240) 90% 60%),hsl(var(--hue,200) 90% 60%));transform-origin:50% 50%}
.card::before{z-index:1;padding:2px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:smp-spin 6s linear infinite}
.card::after{z-index:-1;filter:blur(16px);opacity:.22;animation:smp-spin 10s linear infinite reverse}
@keyframes smp-spin{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){.card::before,.card::after{animation:none;transform:none}}

/* Blog/Post meta inline centered alignment */
.post-meta{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  justify-content: center;
  color: var(--muted);
  font-size: .95rem;
  width: 100%;
}
.post-meta .tag{
  display: inline-block;
  padding: .1rem .5rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
  font-weight: 600;
  color: var(--text);
}

/* Points */
.points{ display:grid; gap:.5rem; padding:0; margin:0; list-style:none }
.points li{ padding:.5rem 0; border-bottom:1px dashed var(--border) }
.points li:last-child{ border-bottom:none }
/* CTA strip */
.cta-strip{ background:var(--surface); padding:2rem 0; border-block:1px solid var(--border) }
.cta-strip .container{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap }

/* Forms */
form{ margin-top:1rem }
.form-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:1rem }
.form-grid label{ display:flex; flex-direction:column; gap:.35rem; font-weight:600 }
.form-grid input,
.form-grid select,
.form-grid textarea{
  padding:.65rem .75rem; border:1px solid var(--border); border-radius:.5rem;
  background:var(--bg); color:var(--text)
}
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus{ outline:2px solid color-mix(in oklab, var(--primary) 50%, transparent) }
.span-2{ grid-column: span 2 }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr } .span-2{ grid-column:1 } }
.form-actions{ display:flex; align-items:center; gap:1rem; margin-top:.5rem; flex-wrap:wrap }
.form-note{ color:var(--muted); margin:0 }
.form-status{ margin-top:.75rem }

/* Footer */
.site-footer{ border-top:1px solid var(--border); background:var(--bg) }
.footer-inner{ 
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  padding: 2rem 0;
}

.social-links {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
}

.social-links a {
  color: var(--muted);
  transition: color 0.3s ease;
}

.social-links a:hover {
  color: var(--primary);
}

.footer-nav{ 
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .footer-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-nav {
    justify-content: center;
  }
}

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.6rem .9rem; border-radius:.6rem; border:1px solid var(--border); background:var(--surface); color:var(--text);
}
.btn:hover{ text-decoration:none; filter:brightness(0.98) }
.btn-primary{ background:var(--primary); color:#fff; border-color:transparent }
.btn-ghost{ background:transparent }
.btn-sm{ padding:.45rem .7rem; font-size:.9rem }

/* Cookies banner */
.cookies {
  position: fixed;
  inset: auto 1rem 1rem 1rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  max-width: 500px;
  margin: 0 auto;
}

.cookies p {
  color: var(--text);
  margin: 0;
  line-height: 1.5;
}

.cookies-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .cookies {
    padding: 1rem;
  }
  .cookies-actions {
    flex-direction: column;
    width: 100%;
  }
  .cookies-actions button {
    width: 100%;
  }
}

/* WhatsApp FAB */
.wa-fab{
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  z-index: 70;
  transition: all 0.3s ease;
}
.wa-fab:hover{ 
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.5);
}

/* Utilities */
.hidden{ position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
/* Screen-reader only utility */
.sr-only{
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}