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

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

:root{
  --ink:     #1A1A18;
  --paper:   #F7F4EE;
  --cream:   #FFFDF8;
  --sage:    #2D5016;
  --lime:    #8FC93A;
  --lime-pale: #F0F7E2;
  --gold:    #C8860A;
  --gold-pale: #FDF3E0;
  --border:  #E4E0D6;
  --muted:   #8A8778;
  --dim:     #5A5850;
  --white:   #FFFFFF;
  --surface: #F2EEE6;
  --dark:    #111110;
  --dark2:   #1C1C1A;
}

:root {
  /* Animation timings */
  --nav-load-duration: 3s;
  --shape-morph-delay: 2s;
}

html{scroll-behavior:smooth;}
body{
  font-family:'DM Sans',sans-serif;
  background:var(--cream);
  color:var(--ink);
  overflow-x:hidden;
  line-height:1.65;
}

/* ── NAV ── */

.nav-brand-group {
  display: flex;
  flex-direction: column; /* Stacks logo on top, tagline below */
  align-items: flex-start; /* Aligns both neatly to the left */
  gap: 2px; /* Tiny spacing between logo and tagline */
}

/* ── NEW NAVBAR TAGLINE TYPOGRAPHY ── */
.nav-tagline {
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #2c5e1a; /* Clean contrast matching your branding green */
  opacity: 0.85;
  white-space: nowrap; /* Prevents the text from dropping to a 3rd line */
  line-height: 1;
}

/* ── ADJUSTED NAV PADDING ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 36px; /* Slightly increased top/bottom padding to give the tagline breathing room */
  background: #b8ff90;
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  margin: 20px 50px 0px 50px;
  border-radius: 8px;
}

/*
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 36px;
  background:#b8ff90;
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  margin: 20px 50px 0px 50px;
  border-radius: 8px;
}*/
.nav-logo{font-family:'Fraunces',serif;font-weight:900;font-size:20px;letter-spacing:-0.02em;color:var(--ink);text-decoration:none;}
.nav-logo span{color:var(--sage);}
.nav-logo img {
  height: 60px;
  width: auto;
  display: block;
}
.nav-links{display:flex;align-items:center;gap:32px;list-style:none;}
.nav-links a{font-size:14px;font-weight:500;color:var(--dim);text-decoration:none;transition:color 0.2s;}
.nav-links a:hover{color:var(--ink);}
.nav-cta{background: linear-gradient(135deg, #2c5e1a, #8FC93A);;color:var(--white);font-size:13px;font-weight:600;padding:10px 22px;border-radius:6px;text-decoration:none;transition:background 0.2s;letter-spacing:0.02em;}
.nav-cta:hover{background:#234010;}


nav {
  position: relative;
  overflow: hidden; /* Keeps the shifting background shapes contained */
  animation: navInitialColor var(--nav-load-duration) forwards ease-in-out;
}

/* Creating the moving multicolored geometric shapes using pseudo-elements */
nav::before,
nav::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  z-index: -1; /* Ensures text/logo stays on top */
  opacity: 1;
  pointer-events: none;
  mix-blend-mode: multiply; /* Creates gorgeous overlapping color mix accents */
  animation: shapeCollapse var(--nav-load-duration) forwards cubic-bezier(0.77, 0, 0.175, 1);
}

/* Shape 1: Left Angled Multi-color Block */
nav::before {
  left: 0;
  width: 60%;
  background: linear-gradient(135deg, #8FC93A 0%, #FFB800 50%, #FF4B4B 100%);
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); /* Sharp geometric angle */
  transform-origin: left center;
}

/* Shape 2: Right Angled Multi-color Block */
nav::after {
  right: 0;
  width: 55%;
  background: linear-gradient(225deg, #00C2FF 0%, #7B5CFF 50%, #8FC93A 100%);
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%); /* Intersecting geometric angle */
  transform-origin: right center;
}

/* ==========================================
   KEYFRAME ANIMATIONS  Nav
   ========================================== */

/* 1. Controlling the Nav Background State */
@keyframes navInitialColor {
  0%, 60% {
    /* Keeps the actual nav transparent/hidden while shapes do their work */
    background-color: transparent; 
    box-shadow: none;
  }
  100% {
    /* Smoothly fades into your standard navbar color design token */
    background-color: var(--nav-bg, #b8ff90); 
  }
}

/* 2. Morphing & Collapsing the Shapes into the Logo */
@keyframes shapeCollapse {
  0% {
    transform: scaleX(1);
    opacity: 1;
    filter: blur(0px);
  }
  40% {
    /* Adds a subtle geometric pulsing shift midway */
    transform: scaleX(1.05) skewX(-5deg);
    opacity: 1;
  }
  75% {
    /* Collapses inward drastically toward the logo spot (left) */
    opacity: 0.8;
    filter: blur(2px);
  }
  100% {
    /* Shinks completely down, disappearing right behind the logo area */
    transform: scaleX(0);
    width: 0%;
    opacity: 0;
    filter: blur(8px);
  }
}

/* Subtle accent pulse on the logo precisely when the shapes hit it */
.nav-logo img {
  animation: logoHighlight var(--nav-load-duration) ease-in-out;
}

@keyframes logoHighlight {
  0%, 55% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 transparent);
  }
  75% {
    /* Absorbs the color energy as shapes collapse into it */
    transform: scale(1.06);
    filter: drop-shadow(0 0 12px rgba(143, 201, 58, 0.6));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 transparent);
  }
}

/* ── HERO ── */
/* ── HERO ── */
.hero{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:80px 56px 100px;
  max-width:1300px;
  margin:0 auto;
  position:relative;
  overflow: hidden;
}

.hero-eyebrow
{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:32px;
  animation:fadeUp 0.7s ease both;
  position: relative;
  z-index: 2;
}

.hero-badge
{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background: linear-gradient(135deg, #2c5e1a, #8FC93A);
  color:var(--white);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.15em;
  text-transform:uppercase;
  padding:6px 14px;
  border-radius:4px;
}

.hero-bg-shapes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--lime);animation:blink 2s ease infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0.3;}}
.hero-date{font-size:13px;color:var(--muted);font-weight:400;}



/* --- Master Hero Layout Updates --- */
.hero-main-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 56px;
  position: relative;
  z-index: 2;
  width: 100%;
}

@media (min-width: 992px) {
  .hero-main-split {
    grid-template-columns: 1.3fr 0.7fr;
    gap: 48px;
  }
}



.notification-stream-block {
  width: 100%;
  background: transparent;
  padding: 0;
  box-shadow: none;
  border: none;
  animation: fadeUp 0.7s ease 0.15s both;
}

.hero-h1{
  font-family:'Fraunces',serif;
  font-weight:900;
  font-size:clamp(44px, 6vw, 76px);
  line-height:0.95;
  letter-spacing:-0.04em;
  margin-bottom: 0;
  animation:fadeUp 0.7s ease 0.1s both;
}
.hero-h1 .sage{color:var(--sage);}
.hero-h1 .italic{font-style:italic;font-weight:300;}

.hero-bottom{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  align-items:start;
  animation:fadeUp 0.7s ease 0.25s both; 
  position: relative;
  z-index: 2;
  width: 100%;
}

@media (min-width: 768px) {
  .hero-bottom {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
  }
}

.hero-sub{font-size:17px;color:var(--dim);line-height:1.75;max-width:480px;}
.hero-sub strong{color:var(--ink);font-weight:600;}
.hero-proof{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:28px 32px;}
.hero-proof-label{font-size:10px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;}
.proof-stat{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--border);}
.proof-stat:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none;}
.proof-num{font-family:'Fraunces',serif;font-weight:900;font-size:36px;color:var(--sage);letter-spacing:-0.03em;line-height:1;}
.proof-text{font-size:13px;color:var(--dim);line-height:1.4;}
.proof-text strong{color:var(--ink);font-weight:600;display:block;}
.hero-actions{display:flex;align-items:center;gap:14px;margin-top:40px;animation:fadeUp 0.7s ease 0.4s both;}
.btn-primary{background: linear-gradient(135deg, #2c5e1a, #8FC93A);;color:var(--white);font-size:14px;font-weight:600;padding:14px 28px;border-radius:7px;text-decoration:none;transition:background 0.2s,transform 0.2s;display:inline-block;}
.btn-primary:hover{background:#234010;transform:translateY(-1px);}
.btn-ghost{font-size:14px;font-weight:500;color:var(--dim);text-decoration:none;display:flex;align-items:center;gap:6px;transition:color 0.2s;}
.btn-ghost:hover{color:var(--ink);}

/* --- Live Feed Panel & Window Engine --- */

.stream-window {
  position: relative;
  height: 239px; 
  width: 100%;
  overflow: hidden;
}
.stream-track {
 display: flex;
  flex-direction: column;
  gap: 12px;
  /* FIXED: Changed name to notificationTickerFifteenBars and adjusted duration to 45s */
  animation: notificationTickerFifteenBars 45s cubic-bezier(0.85, 0, 0.15, 1) infinite;


}
.stream-track:hover { animation-play-state: paused; }

.stream-card-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  height: 70px;
  display: flex;
  align-items: center;
  gap: 14px;
  /*box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);*/
  box-sizing: border-box;
}

.card-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.card-body-box { display: flex; flex-direction: column; overflow: hidden; width: 100%; }
.card-topline { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.card-topline h5 { font-size: 0.82rem; font-weight: 700; color: #0f172a; margin: 0; text-align: left; }
.card-topline span { font-size: 0.65rem; color: #94a3b8; font-weight: 600; }
.card-body-box p { font-size: 0.72rem; color: #64748b; margin: 2px 0 0 0; text-align: left; }

/* Notification Carousel Mechanics
   Translates down perfectly by computing: card height (70px) + gap (12px) = 82px intervals.
*/

@keyframes notificationTickerFifteenBars {
  /* Line 1 */
  0%, 5.33% { transform: translateY(0); }
  
  /* Line 2 */
  6.66%, 12% { transform: translateY(-82px); }
  
  /* Line 3 */
  13.33%, 18.66% { transform: translateY(-164px); }
  
  /* Line 4 */
  20%, 25.33% { transform: translateY(-246px); }
  
  /* Line 5 */
  26.66%, 32% { transform: translateY(-328px); }
  
  /* Line 6 */
  33.33%, 38.66% { transform: translateY(-410px); }
  
  /* Line 7 */
  40%, 45.33% { transform: translateY(-492px); }
  
  /* Line 8 */
  46.66%, 52% { transform: translateY(-574px); }
  
  /* Line 9 */
  53.33%, 58.66% { transform: translateY(-656px); }
  
  /* Line 10 */
  60%, 65.33% { transform: translateY(-738px); }
  
  /* Line 11 */
  66.66%, 72% { transform: translateY(-820px); }
  
  /* Line 12 */
  73.33%, 78.66% { transform: translateY(-902px); }
  
  /* Line 13 */
  80%, 85.33% { transform: translateY(-984px); }
  
  /* Line 14 */
  86.66%, 92% { transform: translateY(-1066px); }
  
  /* Line 15 (Final content item) */
  93.33%, 98.66% { transform: translateY(-1148px); }
  
  /* Instant seamless jump back to top line clone frame */
  100% { transform: translateY(-1230px); }
}

/* Background Abstract Shapes setup */
.shape.cube {
  position: absolute;
  border-radius: 12px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  opacity: 0;
}

.shape.green { width: 140px; height: 140px; background: linear-gradient(135deg, rgba(144, 201, 58, 0.624), rgba(143, 201, 58, 0.05)); top: 25%; left: 4%; animation: floatJoyful 14s infinite ease-in-out; }
.shape.purple { width: 115px; height: 115px; background: linear-gradient(135deg, rgba(122, 92, 255, 0.325), rgba(123, 92, 255, 0.02)); top: 15%; right: 12%; animation: floatJoyful 18s infinite ease-in-out 2s; }
/*.shape.pink { width: 115px; height: 115px; background: linear-gradient(135deg, rgba(252, 92, 255, 0.325), rgba(123, 92, 255, 0.02)); top: 20%; right: 35%; animation: floatJoyful 14s infinite ease-in-out; }*/
.shape.orange { width: 90px; height: 90px; background: linear-gradient(135deg, rgba(255, 183, 0, 0.322), rgba(255, 75, 75, 0.05)); top: 45%; right: 42%; animation: floatJoyful 12s infinite ease-in-out 4s; }
.shape.blue { width: 120px; height: 120px; background: linear-gradient(135deg, rgba(0, 195, 255, 0.435), rgba(143, 201, 58, 0.05)); bottom: 10%; left: 25%; animation: floatJoyful 16s infinite ease-in-out 1s; }
.shape.glow-circle { position: absolute; width: 600px; height: 600px; background: radial-gradient(circle, rgba(144, 201, 58, 0.2) 0%, rgba(0, 0, 0, 0) 70%); top: -10%; left: 50%; transform: translateX(-50%); mix-blend-mode: screen; }

/* Global System Keyframe Timings */
@keyframes streamScrollUp { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }
@keyframes pulsePing { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes floatJoyful {
  0% { transform: translateY(0px) rotate(0deg) scale(0.9); opacity: 0; }
  15% { opacity: 0.75; }
  50% { transform: translateY(-45px) translateX(20px) rotate(45deg) scale(1.05); opacity: 0.9; }
  85% { opacity: 0.75; }
  100% { transform: translateY(-90px) rotate(90deg) scale(0.9); opacity: 0; }
}

.your-ticker-container {
  animation: notificationTickerFifteenBars 5s infinite ease-in-out;
}


/* ==========================================
   ULTRA-TRENDY HYPER-BLUR BENTO GRID
   ========================================== */

.blur-bento-section {
  position: relative;
  padding: 120px 6%;
  background: #274234; /* Dark void background so the colorful blur pops */
  overflow: hidden;
  display: flex;
  justify-content: center;
}

/* 1. Moving Ambient Colored Orbs Layer */
.bento-ambient-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px); /* Massive blur radius creates the liquid glow look */
  opacity: 0.45;
}

.orb-lime {
  width: 350px;
  height: 350px;
  background: #8FC93A;
  top: 10%;
  left: 20%;
  animation: liquidMoveOne 22s infinite ease-in-out alternate;
}

.orb-purple {
  width: 400px;
  height: 400px;
  background: #7B5CFF;
  bottom: -10%;
  right: 15%;
  animation: liquidMoveTwo 26s infinite ease-in-out alternate 2s;
}

.orb-cyan {
  width: 280px;
  height: 280px;
  background: #00C2FF;
  top: 40%;
  right: 45%;
  animation: liquidMoveOne 18s infinite ease-in-out alternate 4s;
}

/* 2. Glassmorphic Bento Layout */
.bento-grid-wrapper {
  position: relative;
  z-index: 2; /* Sits over the glowing orbs */
  display: grid;
  grid-template-columns: 1fr 2.2fr; /* Asymmetric balance */
  gap: 24px;
  width: 100%;
  max-width: 1140px;
}

.bento-tile {
  background: rgba(255, 255, 255, 0.02);
  /* The Secret: High strength backdrop blur overrides the boxy look */
  backdrop-filter: blur(45px);
  -webkit-backdrop-filter: blur(45px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 28px;
  padding: 40px;
  box-sizing: border-box;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), 
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Left Tile Micro-details */
.tile-small {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tile-status {
  font-family: monospace;
  font-size: 11px;
  color: rgba(247, 244, 238, 0.6);
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pulse-dot {
  width: 6px;
  height: 6px;
  background: #8FC93A;
  border-radius: 50%;
  box-shadow: 0 0 10px #8FC93A;
  animation: statusPulse 2s infinite ease-in-out;
}

.tile-huge-num {
  font-size: 72px;
  font-weight: 800;
  line-height: 1;
  color: #f7f4ee;
  letter-spacing: -4px;
  opacity: 0.8;
  font-family: 'Fraunces',serif;
}

.tile-caption {
  font-size: 14px;
  color: #8FC93A;
  margin: 0;
  font-weight: 500;
}

/* Right Content Tile Typography */
.bento-question {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  color: #f7f4ee;
  letter-spacing: -1px;
  margin: 0 0 20px 0;
}

.neon-text {
  color: #8FC93A;
  text-shadow: 0 0 30px rgba(143, 201, 58, 0.3);
}

.bento-answer {
  font-size: 17px;
  line-height: 1.7;
  
  margin: 0 0 16px 0;
}

.bento-answer:last-child { margin: 0; }

.highlight-p {
  color: rgba(247, 244, 238, 0.85);
}

/* ==========================================
   SCROLL INTERSECTION CINEMATIC FLASH
   ========================================== */

.blur-bento-section.hidden .bento-tile {
  opacity: 0;
  transform: translateY(40px) scale(0.97);
}

.blur-bento-section.animate .bento-tile {
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Refraction Text Flash Event */
.blur-bento-section.animate .bento-flash-layer {
  animation: cinematicRefract 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* KEYFRAMES */
@keyframes liquidMoveOne {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(80px, -60px) scale(1.2); }
  100% { transform: translate(-40px, 40px) scale(0.9); }
}

@keyframes liquidMoveTwo {
  0% { transform: translate(0, 0) scale(1.1); }
  50% { transform: translate(-90px, 50px) scale(0.85); }
  100% { transform: translate(50px, -70px) scale(1.15); }
}

@keyframes statusPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

@keyframes cinematicRefract {
  0% {
    opacity: 0;
    filter: blur(12px) brightness(2);
    transform: translateY(10px);
  }
  40% {
    opacity: 0.8;
    filter: blur(4px) brightness(1.3);
  }
  100% {
    opacity: 1;
    filter: blur(0px) brightness(1);
    transform: translateY(0);
  }
}

/* Responsive Grid Adaptation */
@media (max-width: 900px) {
  .bento-grid-wrapper { grid-template-columns: 1fr; gap: 16px; }
  .tile-small { height: 180px; flex-direction: row; align-items: center; }
  .bento-question { font-size: 24px; }
}



/* SCROLLER */

/* ==========================================
   DYNAMIC COLORFUL INFINITE SCROLLER
   ========================================== */

.joy-scroller-section {
  padding: 80px 0;
  /*background: #111110;*/ /* Blends flawlessly into the core background layout */
  overflow: hidden;
  position: relative;
}

/* Elegant edge shading so the colorful badges fade away on sides instead of clipping */
.marquee-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  position: relative;
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.marquee-track {
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: 20px;
  width: 100%;
}

.marquee-group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 20px;
  min-width: 100%;
}

/* Direction Control System */
.track-left .marquee-group {
  animation: scrollLinearLeft 35s linear infinite;
}

.track-right .marquee-group {
  animation: scrollLinearRight 35s linear infinite;
}

/* Pause the fun on mouse hover so users can easily read details */
.marquee-track:hover .marquee-group {
  animation-play-state: paused;
}

/* ==========================================
   THE UNIQUE TRENDY CAPSULE CHIPS
   ========================================== */

.joy-badge {
  padding: 16px 28px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  /*box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);*/
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease;
  cursor: pointer;
}

/* Interactive bounding bounce action */
.joy-badge:hover {
  transform: scale(1.08) rotate(-1.5deg);
  filter: brightness(1.2);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

/* Neon Gradient Styling Arrays */
.c-1  { background: linear-gradient(135deg, #2c5e1a, #8FC93A); }
.c-2  { background: linear-gradient(135deg, #7b5cff, #b35cff); }
.c-3  { background: linear-gradient(135deg, #ff4b4b, #ff824b); }
.c-4  { background: linear-gradient(135deg, #0072ff, #00c2ff); }
.c-5  { background: linear-gradient(135deg, #ffb800, #ff8500); }
.c-6  { background: linear-gradient(135deg, #009688, #4caf50); }
.c-7  { background: linear-gradient(135deg, #ea00d9, #711c91); }
.c-8  { background: linear-gradient(135deg, #130cb7, #52e5e7); }
.c-9  { background: linear-gradient(135deg, #f12711, #f5af19); }
.c-10 { background: linear-gradient(135deg, #8a2387, #e94057); }
.c-11 { background: linear-gradient(135deg, #11998e, #38ef7d); }
.c-12 { background: linear-gradient(135deg, #1f4068, #162447); }
.c-13 { background: linear-gradient(135deg, #ff007f, #ffaa00); }
.c-14 { background: linear-gradient(135deg, #00c6ff, #0072ff); }
.c-15 { background: linear-gradient(135deg, #6441a5, #2a0845); }

/* ==========================================
   THE PERFORMANCE-OPTIMIZED KEYFRAMES
   ========================================== */
@keyframes scrollLinearLeft {
  0% { transform: translateX(0%); }
  100% { transform: translateX(calc(-100% - 20px)); }
}

@keyframes scrollLinearRight {
  0% { transform: translateX(calc(-100% - 20px)); }
  100% { transform: translateX(0%); }
}





/* ── ZERO CODE BANNER ── */

/* ==========================================
   HYPER-GLOW ZERO BANNER DESIGN
   ========================================== */

.zero-banner-modern {
  position: relative;
  padding: 120px 8%;
      background: var(--sage);
  overflow: hidden;
  
}

/* Ambient glow vector under the text layout */
.zero-bg-glow {
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(143, 201, 58, 0.05) 0%, rgba(0, 0, 0, 0) 70%);
  top: 20%;
  left: -10%;
  z-index: 1;
  pointer-events: none;
}

.zero-inner-modern {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
}

/* Left Typography Styling */
.zero-label-neon {
  font-family: monospace;
  font-size: 12px;
  color: #8FC93A;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.zero-headline-modern {
  font-size: 46px;
  font-weight: 800;
  line-height: 1.15;
  color: #f7f4ee;
  letter-spacing: -2px;
  margin: 0 0 28px 0;
  font-family: 'Fraunces',serif;
}

.strikethrough {
  text-decoration: line-through;
  color: rgba(247, 244, 238, 0.3);
}

.text-gradient-lime {
  background: linear-gradient(135deg, #fff 40%, #8FC93A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.zero-body-modern p {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(247, 244, 238, 0.65);
  margin: 0 0 20px 0;
}

.zero-world-first-badge {
  display: inline-block;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 500;
  color: #8FC93A;
  background: rgba(143, 201, 58, 0.08);
  padding: 8px 16px;
  border-radius: 30px;
  border: 1px solid rgba(143, 201, 58, 0.2);
}

/* Right Glassmorphic Table Design */
.table-glass-card {
  background: rgba(255, 255, 255, 0.01);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  padding: 16px;
  box-shadow: 0 40px 80px rgb(0 0 0 / 22%), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.zero-table-modern {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.zero-table-modern th {
  padding: 18px 20px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgb(246, 244, 239);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-weight: 600;
}

.zero-table-modern td {
  padding: 18px 20px;
  font-size: 14px;
  color: rgba(247, 244, 238, 0.993);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.platform-name {
  font-weight: 500;
  color: #f7f4ee;
}

.generates-old {
  font-family: monospace;
  opacity: 0.6;
}

/* Custom Highlight Rows matching the Neon Aesthetic */
.zero-table-modern tr.appselfie-premium-row td {
  background: linear-gradient(90deg, rgba(143, 201, 58, 0.12) 0%, rgba(143, 201, 58, 0.02) 100%);
  color: #ffffff;
  border-bottom: none;
  font-weight: 600;
}

/* Give the final row unique sharp roundings */
.appselfie-premium-row td:first-child {
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}
.appselfie-premium-row td:last-child {
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}

.platform-name-prime {
  color: #8FC93A !important;
  text-shadow: 0 0 20px rgba(143, 201, 58, 0.4);
}

.generates-prime {
  color: #f7f4ee;
}

/* Responsive Grid layout breakpoint */
@media (max-width: 992px) {
  .zero-inner-modern {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .zero-headline-modern { font-size: 36px; }
}




/* ── SECTION SHARED ── */
.section-wrap{max-width:1200px;margin:0 auto;padding:10px 10px 56px 10px;}

/* ── DIFFERENTIATORS ── */
.diff{padding:82px 56px 10px 56px ;/* border-top:1px solid var(--border);*/}
.diff-header{display:grid;grid-template-columns:5fr 4fr;gap:60px;align-items:end;margin-bottom:64px;}
.diff-headline{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(36px,4vw,56px);line-height:1.05;letter-spacing:-0.03em;}
.diff-headline em{font-style:italic;font-weight:300;color:var(--sage);}
.diff-intro{font-size:16px;color:var(--dim);line-height:1.75;}
.diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:16px;overflow:hidden;}
.diff-item{background:var(--cream);padding:36px 32px;transition:background 0.2s;}
.diff-item:hover{background:var(--lime-pale);}
.diff-num{font-family:'Fraunces',serif;font-weight:900;font-size:48px;color:var(--border);letter-spacing:-0.04em;line-height:1;margin-bottom:16px;}
.diff-icon{font-size:28px;margin-bottom:14px;}
.diff-title{font-family:'Fraunces',serif;font-weight:700;font-size:19px;color:var(--ink);margin-bottom:10px;line-height:1.2;letter-spacing:-0.02em;}
.diff-text{font-size:13.5px;color:var(--dim);line-height:1.7;}
.diff-highlight{display:inline-block;margin-top:14px;font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--sage);background:var(--lime-pale);border:1px solid rgba(143,201,58,0.3);padding:4px 12px;border-radius:4px;}


/* -- Generation method ---*/


/*  ---- */
.zero-banner{
  background:var(--dark);
  padding:0;
  overflow:hidden;
}
.zero-inner{
  max-width:1200px;margin:0 auto;
  padding:80px 56px;
  display:grid;grid-template-columns:1fr 1fr;
  gap:80px;align-items:center;
}
.zero-label{font-size:11px;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;color:var(--lime);margin-bottom:20px;display:flex;align-items:center;gap:10px;}
.zero-label::before{content:'';width:20px;height:2px;background:var(--lime);}
.zero-headline{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(36px,3.5vw,52px);line-height:1.05;letter-spacing:-0.03em;margin-bottom:24px;color:var(--paper);}
.zero-headline em{font-style:italic;font-weight:300;color:var(--lime);}
.zero-body{font-size:16px;color:rgba(247,244,238,0.65);line-height:1.8;}
.zero-body p{margin-bottom:16px;}
.zero-body p:last-child{margin-bottom:0;}
.zero-body strong{color:var(--paper);font-weight:600;}

/* comparison mini-table */
.zero-table{width:100%;border-collapse:collapse;margin-top:4px;}
.zero-table th{font-size:10px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:rgba(247,244,238,0.35);padding:8px 14px;text-align:left;border-bottom:1px solid rgba(255,255,255,0.06);}
.zero-table td{font-size:13px;padding:13px 14px;border-bottom:1px solid rgba(255,255,255,0.05);color:rgba(247,244,238,0.6);vertical-align:middle;}
.zero-table tr:last-child td{border-bottom:none;}
.zero-table td:first-child{font-weight:600;color:rgba(247,244,238,0.85);}
.zero-table td.generates{font-family:'Courier New',monospace;font-size:14px;color:rgba(247,244,238,0.45);}
.zero-table tr.cs-row td{color:var(--lime);font-weight:700;}
.zero-table tr.cs-row td.generates{font-family:'Courier New',monospace;font-size:13px;color:var(--lime);letter-spacing:0.05em;}
.zero-table tr.cs-row{background:rgba(143,201,58,0.06);border-radius:6px;}
.zero-world-first{display:inline-flex;align-items:center;gap:8px;margin-top:20px;background:rgba(143,201,58,0.12);border:1px solid rgba(143,201,58,0.25);border-radius:6px;padding:8px 16px;font-size:12px;font-weight:600;color:var(--lime);letter-spacing:0.06em;}



/* -- Trial Story Section -- */
/* Seamless Infinite Grid Framework */
    

    .grid-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  background-color: var(--grid-border);
  gap: 1px; 
  border: 1px solid var(--grid-border);
  max-width: 1400px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
}

    /* Base Grid Tile */
    .grid-tile {
  background-color: #ffffff;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
  position: relative;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  z-index: 1;
}


    .tile-icon {
      font-size: 2rem; 
      margin-bottom: 0.75rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      color: #64748b; 
      width: 100%;  
}

    .tile-label {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--text-muted);
      margin: 0;
      transition: all 0.3s ease;
    }

    /* ── CORNER ACCENT GRADIENTS ── */

/* 1. Top Left Corner (First Child - HRM) */
.grid-tile:first-child {
  background: linear-gradient(135deg, rgb(255 253 248) 0%, #ffffff 70%);
}

/* 2. Top Right Corner (6th element - Service Repair) */
.grid-tile:nth-child(5) {
  background: linear-gradient(273deg, rgb(255 253 248) 0%, #ffffff 70%);
}

/* 3. Bottom Left Corner (Customer Portal) */
.grid-tile:nth-last-child(2) {
  background: linear-gradient(135deg, rgb(255 253 248) 0%, #ffffff 70%);
}

/* 4. Bottom Right Corner (Last Child - Innovation) */
.grid-tile:last-child {
  background: linear-gradient(273deg, rgb(255 253 248) 0%, #ffffff 70%);
}

/* Optional: Slight color shift on hovering over a gradient corner */
.grid-tile:first-child:hover,
.grid-tile:nth-child(5):hover,
.grid-tile:nth-last-child(2):hover,
.grid-tile:last-child:hover {
  filter: brightness(0.98);
}


    /* --- Dynamic Gradient Hover Effects --- */
    
    /* HRM / EHS / Fleet (Red/Pink vibes) */
    .grid-tile:nth-child(1):hover, .grid-tile:nth-child(7):hover, .grid-tile:nth-child(11):hover {
      background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
    }
    .grid-tile:nth-child(1):hover .tile-icon, .grid-tile:nth-child(7):hover .tile-icon, .grid-tile:nth-child(11):hover .tile-icon { color: #f43f5e; transform: scale(1.1); }
    .grid-tile:nth-child(1):hover .tile-label, .grid-tile:nth-child(7):hover .tile-label, .grid-tile:nth-child(11):hover .tile-label { color: #9f1239; }

    /* Payroll / Time & Attendance / Supplier (Blue vibes) */
    .grid-tile:nth-child(2):hover, .grid-tile:nth-child(8):hover, .grid-tile:nth-child(12):hover {
      background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    }
    .grid-tile:nth-child(2):hover .tile-icon, .grid-tile:nth-child(8):hover .tile-icon, .grid-tile:nth-child(12):hover .tile-icon { color: #3b82f6; transform: scale(1.1); }
    .grid-tile:nth-child(2):hover .tile-label, .grid-tile:nth-child(8):hover .tile-label, .grid-tile:nth-child(12):hover .tile-label { color: #1e40af; }

    /* CRM / Strategy / Fleet Mgmt */
    .grid-tile:nth-child(3):hover, .grid-tile:nth-child(9):hover, .grid-tile:nth-child(13):hover, .grid-tile:nth-child(16):hover {
      background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    }
    .grid-tile:nth-child(3):hover .tile-icon, .grid-tile:nth-child(9):hover .tile-icon, .grid-tile:nth-child(13):hover .tile-icon, .grid-tile:nth-child(16):hover .tile-icon { color: #a855f7; transform: scale(1.1); }
    .grid-tile:nth-child(3):hover .tile-label, .grid-tile:nth-child(9):hover .tile-label, .grid-tile:nth-child(13):hover .tile-label, .grid-tile:nth-child(16):hover .tile-label { color: #6b21a8; }

    /* Campaign / Customer Support / Innovation (Amber/Orange vibes) */
    .grid-tile:nth-child(4):hover, .grid-tile:nth-child(10):hover, .grid-tile:nth-child(14):hover {
      background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    }
    .grid-tile:nth-child(4):hover .tile-icon, .grid-tile:nth-child(10):hover .tile-icon, .grid-tile:nth-child(14):hover .tile-icon { color: #f59e0b; transform: scale(1.1); }
    .grid-tile:nth-child(4):hover .tile-label, .grid-tile:nth-child(10):hover .tile-label, .grid-tile:nth-child(14):hover .tile-label { color: #92400e; }

    .grid-tile:nth-child(17):hover .tile-icon { color: #6ee7b7; transform: scale(1.1); }
    .grid-tile:nth-child(17):hover .tile-label { color: #259a6b; }

    /* Service Repair & Stock Take (Teal/Green vibes) */
    .grid-tile:nth-child(5):hover, .grid-tile:nth-child(6):hover, .grid-tile:nth-child(17):hover {
      background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    }
    .grid-tile:nth-child(5):hover .tile-icon, .grid-tile:nth-child(6):hover .tile-icon { color: #10b981; transform: scale(1.1); }
    .grid-tile:nth-child(5):hover .tile-label, .grid-tile:nth-child(6):hover .tile-label { color: #166534; }

    /* Default Standalone Color Accents for Clean Visuals */
    .grid-tile:nth-child(1) .tile-icon, .grid-tile:nth-child(7) .tile-icon, .grid-tile:nth-child(11) .tile-icon { color: #fda4af; }
    .grid-tile:nth-child(2) .tile-icon, .grid-tile:nth-child(8) .tile-icon, .grid-tile:nth-child(12) .tile-icon { color: #93c5fd; }
    .grid-tile:nth-child(3) .tile-icon, .grid-tile:nth-child(9) .tile-icon, .grid-tile:nth-child(13) .tile-icon, .grid-tile:nth-child(16) .tile-icon  { color: #c084fc; }
    .grid-tile:nth-child(4) .tile-icon, .grid-tile:nth-child(10) .tile-icon, .grid-tile:nth-child(14) .tile-icon { color: #fcd34d; }
    .grid-tile:nth-child(5) .tile-icon, .grid-tile:nth-child(6) .tile-icon, .grid-tile:nth-child(15) .tile-icon, .grid-tile:nth-child(17) .tile-icon { color: #6ee7b7; }

    /* Active Highlight Override */
    .grid-tile.active-tile {
      box-shadow: inset 0 0 0 2px var(--text-dark);
      z-index: 2;
    }

    /* Feature Presentation Cards (Spans 2x2) */
    .feature-card {
      grid-column: span 2;
      grid-row: span 2;
      background-color: #ffffff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 1.75rem;
    }

    .feature-mockup {
      width: 100%;
      height: 100%;
      min-height: 220px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding: 1.25rem;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
      transition: transform 0.3s ease;
    }

    .feature-card:hover .feature-mockup {
      transform: scale(1.02);
    }

    /* Enhanced Dashboard Gradients matching your system branding */
    .bg-team { 
      background: linear-gradient(145deg, #f5f3ff 0%, #f4f7ff 100%); 
      border: 1px solid #e0e7ff; 
    }
    .bg-projects { 
      background: linear-gradient(145deg, #fffbeb 0%, #faf5ff 100%); 
      border: 1px solid #fef3c7; 
    }

    /* Content Styling inside Feature Cards */
    .mock-badge {
      font-size: 0.85rem;
      line-height: 1.6;
      color: #334155 !important;
      display: block;
      font-weight: 500;
      text-align: left;
    }
    
    .mock-badge strong {
      color: #1e1b4b;
      font-weight: 700;
    }
/* ── STORY SECTION ── */
.story{background: #fffdf8 ;color:var(--ink);padding:120px 56px 10px 56px ;border-top:1px solid var(--border);  -webkit-mask-image: linear-gradient(90deg,transparent 2%,rgb(217,217,217) 10%,rgb(217,217,217) 90%,transparent 98%),linear-gradient(180deg,transparent 5%,rgb(217,217,217) 15%,rgb(217,217,217) 85%,transparent 95%);
    mask-image: linear-grad }
.story-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.section-label{font-size:11px;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;color:var(--sage);margin-bottom:16px;display:flex;align-items:center;gap:10px;}
/*.section-label::before{content:'';width:20px;height:2px;background:var(--sage);}*/
.story-headline{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(36px,3.5vw,52px);line-height:1.05;letter-spacing:-0.03em;margin-bottom:24px;color:var(--ink);}
.story-headline em{font-style:italic;font-weight:300;color:var(--sage);}
.story-body{font-size:16px;color:var(--dim);line-height:1.8;}
.story-body p{margin-bottom:16px;}
.story-body p:last-child{margin-bottom:0;}
.story-body strong{color:var(--ink);font-weight:600;}

.story-right{display:flex;flex-direction:column;gap:10px;max-height:520px;overflow-y:auto;padding-right:8px;scrollbar-width:thin;scrollbar-color:rgba(45,80,22,0.2) transparent;}
.story-right::-webkit-scrollbar{width:4px;}
.story-right::-webkit-scrollbar-thumb{background:rgba(45,80,22,0.2);border-radius:2px;}
.app-card{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:16px 20px;display:flex;align-items:center;gap:16px;transition:border-color 0.2s,transform 0.2s,box-shadow 0.2s;}
.app-card:hover{border-color:rgba(45,80,22,0.3);transform:translateX(6px);box-shadow:0 4px 16px rgba(0,0,0,0.05);}
.app-card-icon{font-size:18px;flex-shrink:0;width:38px;height:38px;background:var(--lime-pale);border-radius:8px;display:flex;align-items:center;justify-content:center;}
.app-card-name{font-size:14px;font-weight:600;color:var(--ink);}
.app-card-type{font-size:11px;color:var(--muted);letter-spacing:0.04em;}
.app-card-badge{margin-left:auto;font-size:10px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--sage);background:var(--lime-pale);border:1px solid rgba(143,201,58,0.3);padding:3px 10px;border-radius:4px;flex-shrink:0;}


/* ── HOW IT WORKS ── */

/* ── NUMBER ANIMATION ── */
@keyframes countUp {
  0% { opacity: 0; transform: translateY(20px) scale(0.8); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}


.how-bg{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border); padding: 82px 56px 10px 56px;}
.how-headline{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(36px,4vw,52px);letter-spacing:-0.03em;line-height:1.05;text-align:center;margin-bottom:12px; }
.how-sub{text-align:center;font-size:16px;color:var(--dim);margin-bottom:72px;}
.how-note{text-align:center;margin-top:48px;padding:18px 28px;background:var(--dark);border-radius:10px;display:inline-block;}
.how-note-wrap{text-align:center;}
.how-note strong{color:var(--lime);font-weight:700;}
.how-note span{font-size:14px;color:rgba(247,244,238,0.65);}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;}
.steps::before{content:'';position:absolute;top:44px;left:12%;right:12%;height:1px;background:var(--border);z-index:0;}
.step{text-align:center;padding:0 20px;position:relative;z-index:1;}
.step-circle{
   width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: 26px;
  color: var(--ink);
  transition: all 0.25s;
  
  /* Trigger Animation */
  opacity: 0;
  animation: countUp 0.6s ease forwards;
}
.step:hover .step-circle{background: var(--sage);
  color: var(--white);
  border-color: var(--sage);
  transform: scale(1.08);
}

/* Staggered Timings */
.step:nth-child(1) .step-circle { animation-delay: 0.2s; }
.step:nth-child(2) .step-circle { animation-delay: 0.4s; }
.step:nth-child(3) .step-circle { animation-delay: 0.6s; }
.step:nth-child(4) .step-circle { animation-delay: 0.8s; }

.step-title{font-family:'Fraunces',serif;font-weight:700;font-size:16px;margin-bottom:8px;color:var(--ink);letter-spacing:-0.01em;}
.step-text{font-size:13px;color:var(--dim);line-height:1.6;}

/* ── CSS FEATURE ── */
.css-wrap{border-top:1px solid var(--border); padding: 82px 56px 10px 56px;}
.css-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.css-headline{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(32px,3.5vw,48px);line-height:1.05;letter-spacing:-0.03em;margin-bottom:18px;}
.css-headline em{font-style:italic;font-weight:300;color:var(--sage);}
.css-body{font-size:15px;color:var(--dim);line-height:1.75;margin-bottom:28px;}
.css-list{list-style:none;}
.css-list li{font-size:14px;color:var(--ink);padding:11px 0;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:12px;line-height:1.4;}
.css-list li::before{content:'✦';font-size:9px;color:var(--sage);flex-shrink:0;margin-top:4px;}
.css-list li:last-child{border-bottom:none;}
.css-demo{background:var(--dark);border-radius:16px;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,0.18);}
.css-bar{display:flex;align-items:center;gap:7px;padding:14px 18px;background:rgba(255,255,255,0.04);border-bottom:1px solid rgba(255,255,255,0.06);}
.css-dot{width:10px;height:10px;border-radius:50%;}
.css-dot-r{background:#FF5F57;}.css-dot-y{background:#FEBC2E;}.css-dot-g{background:#28C840;}
.css-file{font-family:monospace;font-size:11px;color:rgba(247,244,238,0.35);margin-left:8px;}
.css-code-block{padding:24px 28px;font-family:'Courier New',monospace;font-size:13px;line-height:2;}
.tok-comment{color:#4a5e4a;}.tok-selector{color:#8FC93A;}.tok-prop{color:#88C0D0;}.tok-val{color:#EBCB8B;}.tok-punc{color:rgba(247,244,238,0.3);}
.css-result{margin:0 20px 20px;background:var(--white);border-radius:10px;overflow:hidden;}
.css-result-label{background:var(--sage);color:var(--white);font-size:10px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;padding:6px 14px;text-align:center;}
.mock-ui{padding:14px;}
.mock-topbar{height:32px;background:#1a3a6b;border-radius:5px;display:flex;align-items:center;padding:0 12px;gap:8px;margin-bottom:10px;}
.mock-tb-logo{width:60px;height:8px;background:rgba(255,255,255,0.6);border-radius:2px;}
.mock-tb-nav{width:30px;height:6px;background:rgba(255,255,255,0.25);border-radius:2px;}
.mock-body{display:grid;grid-template-columns:70px 1fr;gap:8px;}
.mock-side{background:#f0f4f8;border-radius:4px;min-height:60px;}
.mock-content{background:#e8f0e8;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--sage);}

/* ── EXTENSIBILITY ── */
.ext-wrap{border-top:1px solid var(--border);background:var(--gold-pale);}
.ext-inner{max-width:1200px;margin:0 auto;padding:100px 56px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.ext-label{font-size:11px;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);margin-bottom:20px;display:flex;align-items:center;gap:10px;}
.ext-label::before{content:'';width:20px;height:2px;background:var(--gold);}
.ext-headline{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(32px,3.5vw,48px);line-height:1.05;letter-spacing:-0.03em;color:var(--ink);margin-bottom:18px;}
.ext-headline em{font-style:italic;font-weight:300;color:var(--gold);}
.ext-body{font-size:15px;color:var(--dim);line-height:1.75;margin-bottom:24px;}
.ext-badge{display:inline-flex;align-items:center;gap:8px;background:var(--white);border:1px solid rgba(200,134,10,0.3);border-radius:6px;padding:8px 16px;font-size:12px;font-weight:600;color:var(--gold);letter-spacing:0.06em;}
.ext-cards{display:flex;flex-direction:column;gap:14px;}
.ext-card{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:22px 24px;display:flex;gap:16px;align-items:flex-start;transition:border-color 0.2s,box-shadow 0.2s;}
.ext-card:hover{border-color:rgba(200,134,10,0.3);box-shadow:0 4px 16px rgba(0,0,0,0.06);}
.ext-card-icon{font-size:20px;flex-shrink:0;width:40px;height:40px;background:var(--gold-pale);border-radius:8px;display:flex;align-items:center;justify-content:center;}
.ext-card-title{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:5px;}
.ext-card-text{font-size:13px;color:var(--dim);line-height:1.55;}

/* ── EXCLUSIVE ACCESS ── */
.exclusive{background:var(--sage);color:var(--white);padding:0;}
.exclusive-inner{max-width:1200px;margin:0 auto;padding:100px 56px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.excl-label{font-size:11px;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;color:rgba(255,255,255,0.5);margin-bottom:20px;display:flex;align-items:center;gap:10px;}
/*.excl-label::before{content:'';width:20px;height:2px;background:var(--lime);}*/
.excl-headline{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(36px,3.5vw,52px);line-height:1.05;letter-spacing:-0.03em;color:var(--white);margin-bottom:20px;}
.excl-headline em{font-style:italic;font-weight:300;color:var(--lime);}
.excl-body{font-size:16px;color:rgba(255,255,255,0.65);line-height:1.75;margin-bottom:36px;}
.excl-body strong{color:var(--white);}
.excl-products{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px;}
.prod-chip{font-size:12px;font-weight:600;color:var(--white);border:1px solid rgba(255,255,255,0.2);padding:6px 16px;border-radius:20px;background:rgba(255,255,255,0.06);}
.excl-cta{background:var(--lime);color:var(--dark);font-size:14px;font-weight:700;padding:14px 28px;border-radius:7px;text-decoration:none;display:inline-block;transition:opacity 0.2s,transform 0.2s;}
.excl-cta:hover{opacity:0.9;transform:translateY(-1px);}
.excl-right{display:flex;flex-direction:column;gap:0;}
.excl-card{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:28px 30px;margin-bottom:16px;}
.excl-card:last-child{margin-bottom:0;}
.excl-card-icon{font-size:22px;margin-bottom:12px;}
.excl-card-title{font-family:'Fraunces',serif;font-weight:700;font-size:17px;color:var(--white);margin-bottom:8px;}
.excl-card-text{font-size:13px;color:rgba(255,255,255,0.55);line-height:1.65;}

/* ── WAITLIST ── */
.waitlist{background:var(--surface);border-top:1px solid var(--border);padding:100px 56px;text-align:center;}
.waitlist-inner{max-width:560px;margin:0 auto;}
.waitlist-headline{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(32px,4vw,48px);letter-spacing:-0.03em;line-height:1.05;margin-bottom:16px;}
.waitlist-headline em{font-style:italic;font-weight:300;color:var(--sage);}
.waitlist-sub{font-size:16px;color:var(--dim);line-height:1.7;margin-bottom:36px;}
.waitlist-form{display:flex;gap:10px;background:var(--white);border:1px solid var(--border);border-radius:10px;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,0.06);}
.waitlist-input{flex:1;border:none;outline:none;font-family:'DM Sans',sans-serif;font-size:14px;color:var(--ink);padding:10px 14px;background:transparent;}
.waitlist-input::placeholder{color:var(--muted);}
.waitlist-btn{background:var(--sage);color:var(--white);font-size:13px;font-weight:600;padding:10px 22px;border-radius:7px;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;white-space:nowrap;transition:background 0.2s;}
.waitlist-btn:hover{background:#234010;}
.waitlist-note{font-size:12px;color:var(--muted);margin-top:14px;}
.waitlist-timeline{display:flex;justify-content:center;gap:0;margin-top:48px;background:var(--white);border:1px solid var(--border);border-radius:12px;overflow:hidden;}
.wt-item{flex:1;padding:20px 16px;text-align:center;border-right:1px solid var(--border);}
.wt-item:last-child{border-right:none;}
.wt-date{font-family:'Fraunces',serif;font-weight:700;font-size:14px;color:var(--ink);margin-bottom:4px;}
.wt-event{font-size:12px;color:var(--dim);}
.wt-dot{width:8px;height:8px;border-radius:50%;background:var(--border);margin:0 auto 10px;}
.wt-dot.active{background:var(--sage);}

/* ── FOOTER ── */

/* ── HIGH-IMPACT MASSIVE FOOTER FRAMEWORK ── */
.massive-footer {
  border-top: 1px solid var(--border);
  padding: 80px 56px 40px 56px;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  gap: 80px;
  position: relative;
}

.footer-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-links {
  display: flex;
  gap: 32px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-contact-info {
  text-align: right;
}

.meta-headline {
  font-size: 14px;
  font-weight: 600;
  color: var(--sage);
}

.meta-link {
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.meta-link:hover {
  color: var(--sage);
}

.footer-logo-hero-wrap {

  
  width: 100%;
  display: flex;
  flex-direction: column; /* Forces logo container and tagline to stack vertically */
  justify-content: center; 
  align-items: center;
  gap: 20px;
}

.massive-brand-engine {
  display: flex;
  flex-direction: row;     
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.brand-animated-box {
  width: clamp(100px, 10vw, 160px); 
  height: clamp(100px, 10vw, 160px);
  flex-shrink: 0;
  display: block;
}

.brand-animated-box svg {
  width: 100%;
  height: 100%;
  display: block;
}

.brand-typography-wrap {
  display: flex;
  align-items: center;
  height: clamp(100px, 10vw, 160px);
}

.cropped-wordmark-img {
  height: 90%;           
  width: auto;           
  object-fit: contain;
  display: block;
  flex-shrink: 0;        
  margin-left: 0;        
  filter: brightness(0.95);
}

/* ── MODERN CORNER-TO-CORNER ENGINE ── */
.footer-bottom-row {
  display: flex;
  justify-content: space-between; /* Pushes copyright to left, social wrap to right */
  align-items: center;
  width: 100%;
  border-top: 1px solid rgba(0, 0, 0, 0.05); /* Optional layout divider line */
  padding-top: 24px;
}

.footer-by {
  font-size: 14px;
  color: var(--muted);
}

.footer-social-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.social-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted); /* Fallback to muted or change to hardcoded colors like #2e4034 */
  letter-spacing: 0.5px;
}

.social-icon-link {
  display: flex;
  align-items: center;
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0.8;
}

.social-icon-link:hover {
  transform: translateY(-2px);
  opacity: 1;
}

.social-svg-icon {
  width: 20px !important;
  height: 20px !important;
  display: inline-block !important;
  fill: #aec93c;
  vertical-align: middle;
}

.footer-tagline {
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 500;
  color: var(--sage); /* Gracefully inherits your signature sage tone */
  letter-spacing: 0.5px;
  margin: 0;
  padding: 0;
  text-align: center;
  opacity: 0.

/* ── BREAKPOINTS & RESPONSIVE ENGINE ── */
@media(max-width: 960px) {
  .massive-footer {
    padding: 60px 24px 30px 24px;
    gap: 50px;
  }

  .footer-top-row {
    flex-direction: column;
    gap: 32px;
    text-align: center;
  }

  .footer-links {
    flex-direction: column;
    gap: 16px;
  }

  .massive-brand-engine {
    justify-content: center;
    gap: 16px;
  }
  
  .brand-animated-box {
    width: 75px;
    height: 75px;
  }
  
  .brand-typography-wrap {
    height: 75px;
  }
  
  .cropped-wordmark-img {
    height: 100%;
    object-position: 29% center; 
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .footer-bottom-row {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    justify-content: center;
  }
  
  .footer-social-wrap {
    justify-content: center;
    width: 100%;
  }
}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
.reveal{opacity:1;transform:translateY(0);transition:opacity 0.7s ease,transform 0.7s ease;}
.reveal.hidden{opacity:0;transform:translateY(28px);}
.reveal.animate{opacity:1;transform:translateY(0);}
.d1{transition-delay:0.08s;}.d2{transition-delay:0.16s;}.d3{transition-delay:0.24s;}.d4{transition-delay:0.32s;}.d5{transition-delay:0.40s;}.d6{transition-delay:0.48s;}

/* ── RESPONSIVE GLOBAL CLEANUP ── */
@media(max-width:960px){
  nav{padding:16px 24px;}
  .nav-links{display:none;}
  .hero{padding:110px 24px 80px;}
  .hero-bottom{grid-template-columns:1fr;}
  .zero-inner,.story-inner,.diff-header,.css-grid,.ext-inner,.exclusive-inner{grid-template-columns:1fr;}
  .section-wrap{padding:80px 24px;}
  .diff-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr 1fr;gap:40px;}
  .steps::before{display:none;}
  .story,.waitlist{padding:80px 24px;}
  .zero-inner,.exclusive-inner,.ext-inner{padding:80px 24px;}
  .waitlist-form{flex-direction:column;}
  .waitlist-timeline{flex-direction:column;}
  .wt-item{border-right:none;border-bottom:1px solid var(--border);}
  
  /* Removed duplicate broken footer assignment rules from here to avoid conflicts */
}