:root {
  --bg-top: #f3f4f6;
  --bg-bottom: #ffffff;

  --ink: #0d0f12;
  --muted: #4b5563;

  --nav-bg: #050607;
  --nav-fg: #e5e7eb;

  --card-bg: #ffffff;
  --shadow: 0 22px 50px rgba(0, 0, 0, 0.18);

  --green: #1a7f3c;
  --green-2: #1fc05b;

  --pink: #c2187a;
  --pink-2: #f066b1;

  --radius-lg: 18px;
  --radius-xl: 22px;


    /* --kalo-bg-r: 255;
    --kalo-bg-g: 59;
    --kalo-bg-b: 31; */
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family:  Roboto, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);

  
  background: radial-gradient(1300px 900px at 70% 20%, 
  rgba(var(--kalo-bg-r), 
  var(--kalo-bg-g), 
  var(--kalo-bg-b), .3), 
  transparent 60%), 
  radial-gradient(1100px 800px at 25% 85%, 
  rgba(var(--kalo-bg-r), var(--kalo-bg-g), 
  var(--kalo-bg-b), .2), 
  transparent 65%), 
  radial-gradient(900px 900px at 50% 50%, 
  rgba(var(--kalo-bg-r), var(--kalo-bg-g), 
  var(--kalo-bg-b), .18), transparent 70%), 
  linear-gradient(180deg, rgba(0, 0, 0, .45), 
  rgba(0, 0, 0, .75));
}

.container {
  width: min(1120px, calc(100% - 64px));
  margin: 0 auto;
}

/* ---------------------------
   NAV
---------------------------- */

.v2{
  --color-bg: #0b0d10;
    --color-fg: #e9eef2;
    --accent-color: #4ade80;
    --accent-tech: #4ade80;
    --accent-surface-strong: rgba(74, 222, 128, .2);
    --accent-surface-soft: rgba(74, 222, 128, .1);
    --accent-surface-border: rgba(74, 222, 128, .3);
    --accent-color-hover: #22c55e;
    --accent-mktg: #ff68b8;
    --radius-2: 8px;
    --radius-3: 12px;
    --border-1: 1px solid hsla(0, 0%, 100%, .1);
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;
    --font-sans: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen, Ubuntu, sans-serif;
    --size-0: clamp(.875rem, .8rem + .3vw, 1rem);
    --size-1: clamp(1rem, .9rem + .6vw, 1.25rem);
    --size-2: clamp(1.25rem, 1rem + 1.1vw, 1.625rem);
    --size-3: clamp(1.5rem, 1rem + 1.8vw, 2.125rem);
    --letter-spacing-wide: 3px;
    --letter-spacing-wider: .3em;
    --font-weight-normal: normal;
    --font-weight-bold: bold;
    --section-max: 1120px;
    --section-pad: clamp(16px, 4vw, 32px);


   --work-hero-bg: radial-gradient(38rem 38rem at 50% -10%,
 color-mix(in srgb, var(--accent-tech, #4ade80), transparent 73%), transparent 60%), radial-gradient(40rem 40rem at 85% 30%,
 color-mix(in srgb, var(--accent-tech, #4ade80), transparent 85%), transparent 55%), radial-gradient(40rem 18rem at 15% 55%,
 color-mix(in srgb, var(--accent-tech, #4ade80), transparent 85%), transparent 85%);
}








/* .nav-links {
  display: flex;
  gap: 34px;
  justify-content: center;
  align-items: center;
} */

/* .nav-links a {
  text-decoration: none;
  color: var(--nav-fg);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 13px;
  opacity: 0.92;
}
*/
.nav-links a:hover {
  opacity: 1;
} 

.nav-icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #52ffb0;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.nav-icon svg {
  width: 20px;
  height: 20px;
}
  

/* ---------------------------
   SECTION LAYOUT
---------------------------- */
.page {
  padding-bottom: 40px;
}

.section {
  padding: 48px 0 10px;
}

/* Grid blocks */
.grid {
  display: grid;
  gap: 28px;
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 28px;
}

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

/* Card base */
.card {
  background: var(--card-bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}

/* ---------------------------
   FEATURE CARDS (top row)
---------------------------- */
.feature-card {
  padding: 28px 28px 26px;
  border: 1.5px solid rgba(26, 127, 60, 0.45);
}

.icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--green);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}

.icon svg {
  width: 30px;
  height: 30px;
}

.feature-title {
  margin: 0 0 14px;
  color: var(--green);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: 0.02em;
}

.feature-body {
  margin: 0;
  color: #111827;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.02em;
  max-width: 34ch;
}

/* ---------------------------
   BIG CARDS (bottom row)
---------------------------- */
.big-card {
  padding: 32px 34px 34px;
  min-height: 420px;
  display: grid;
  align-content: start;
  gap: 14px;
  position: relative;
}

.big-card--green {
  border: 2px solid rgba(26, 127, 60, 0.55);
}

.big-card--pink {
  border: 2px solid rgba(194, 24, 122, 0.55);
}

.eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
}

.eyebrow--pink {
  color: var(--pink);
}

.big-title {
  margin: 0;
  font-weight: 800;
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: 0.01em;
}

.big-title--green {
  color: var(--green);
}

.big-title--pink {
  color: var(--pink);
}

.big-body {
  margin: 6px 0 0;
  color: #111827;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.02em;
  max-width: 52ch;
}

/* Buttons */
.btn {
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 26px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 13px;
  width: max-content;
}

.btn--green {
  background: var(--green-2);
  color: #0b1a10;
  box-shadow: 0 10px 28px rgba(31, 192, 91, 0.25);
}

.btn--pink {
  background: var(--pink-2);
  color: #1b0a12;
  box-shadow: 0 10px 28px rgba(240, 102, 177, 0.25);
  position:absolute;
  bottom:35px;
  left:35px;
}

/* ---------------------------
   HERO TAG LINE
---------------------------- */
.swarm-section { background:transparent; padding:0; }
.swarm-hero { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:4rem 1.5rem 2rem; text-align:center; }
.swarm-section .hero-logo { font-size:clamp(1.8rem, 1.5rem + 1.2vw, 3rem); font-weight:400; letter-spacing:.18em; color:rgb(96,224,162); text-transform:uppercase; margin-bottom:2.5rem; text-shadow:0 0 18px rgba(96,224,162,.35); }
.swarm-section .hero-content { display:flex; flex-direction:column; margin:3rem auto; max-width: 1080px; width: 100%; text-align:left; gap:2.5rem; }
.swarm-section .tagline-block { text-align:left; font-size:clamp(1.15rem, 1.05rem + .6vw, 1.65rem); color:#222222; letter-spacing:.04em; }

/* ---------------------------
   FOOTER LINE
---------------------------- */
.footer-line {
  padding: 26px 0 40px;
  text-align: center;
}

.footer-line p {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  color: #111827;
}

/* ---------------------------
   RESPONSIVE
---------------------------- */
@media (max-width: 980px) {
  .grid-3 {
    grid-template-columns: 1fr;
  }
  .grid-2 {
    grid-template-columns: 1fr;
  }
  .big-card {
    min-height: auto;
  }
  .big-title {
    font-size: 38px;
  }
  .footer-line p {
    font-size: 22px;
  }

  .nav {
    grid-template-columns: 1fr 44px;
    gap: 10px;
  }

  .nav-links {
    display: none; /* add a mobile menu if needed */
  }
}

@media (max-width: 520px) {
  .container {
    width: min(1120px, calc(100% - 32px));
  }
  .feature-title {
    font-size: 20px;
  }
  .big-title {
    font-size: 34px;
  }
}



@media (max-width: 768px) {
.btn--pink {
  background: var(--pink-2);
  color: #1b0a12;
  box-shadow: 0 10px 28px rgba(240, 102, 177, 0.25);
  position:relative;
  left:unset;
  bottom:unset;
}
}