/* ============================================
   SMARTKOSH TECHNOLOGIES — DESIGN TOKENS
   Global CSS Variables & Reset
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');


:root {
  /* Brand Colors */
  --c-bg:          #f2f5f4;
  --c-surface:     #ffffff;
  --c-dark:        #0a1612;
  --c-dark-2:      #0f1f1a;
  --c-accent:      #00c97a;
  --c-accent-dim:  #009e60;
  --c-accent-glow: rgba(0, 201, 122, 0.20);
  --c-accent-soft: rgba(0, 201, 122, 0.09);
  --c-red:         #d9342a;
  --c-text:        #1a2e28;
  --c-muted:       #56736a;
  --c-border:      rgba(0, 0, 0, 0.07);
  --c-border-dark: rgba(255,255,255,0.07);

  /* Typography */
  --f-display: 'Outfit', sans-serif;
  --f-body:    'Outfit', sans-serif;

  /* Layout */
  --nav-h:    72px;
  --max-w:    1240px;
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 24px;

  /* Shadows */
  --shadow-card: 0 8px 32px -8px rgba(0,0,0,0.08);
  --shadow-glow: 0 0 40px rgba(0,201,122,0.25);
  --shadow-lift: 0 24px 60px -12px rgba(0,0,0,0.14);

  /* Transitions */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.18s;
  --t-med:  0.35s;
  --t-slow: 0.6s;
}

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

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

body {
  font-family: var(--f-body);
  background-color: var(--c-bg);
  color: var(--c-text);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

::selection {
  background: var(--c-accent);
  color: #000;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb { background: var(--c-accent); border-radius: 99px; }

/* Utility */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 56px);
}

.tag-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent);
  background: var(--c-accent-soft);
  border: 1px solid rgba(0,201,122,0.18);
  padding: 5px 14px;
  border-radius: 99px;
}

.tag-label .dot {
  width: 6px; height: 6px;
  background: var(--c-accent);
  border-radius: 50%;
  animation: pulse-dot 2s ease infinite;
}

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

/* Reveal Animations */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  text-align: justify;
/*  text-justify: inter-word; /* Ensures spacing between words remains natural */*/
/*  hyphens: auto;           /* Automatically adds hyphens to long words at line breaks */*/
/*  word-break: break-word;   /* Safely handles ultra-long technical words (like micro-architecture) */*/
/*  text-align-last: left;    /* Forces the final line of a paragraph to align normally to the left */*/
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }