/* ============================================================
   iibdaei — Premium Precise Product
   Warm Linear-energy design system
   ============================================================ */

:root{
  --sand:#F5EFE3; --cream:#FBF8F2; --palm:#0B5C45; --ink:#0E1A14;
  --gold:#C9A227; --warm:#241D12; --muted:#7A715F; --line:#E4DBCB;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-snap:cubic-bezier(0.65,0,0.35,1);
}

html{ scroll-behavior:smooth; }
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* smoother focus ring (a11y) */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--palm); outline-offset:3px; border-radius:6px;
}

::selection{ background:var(--palm); color:var(--cream); }

/* ------------- NAV ------------- */
#navbar.scrolled{
  background:rgba(251,248,242,0.82);
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  border-color:var(--line);
  box-shadow:0 8px 30px -12px rgba(14,26,20,0.12);
}
.nav-link{
  position:relative; padding:0.5rem 0.85rem; border-radius:8px;
  color:var(--warm); transition:color .25s var(--ease-out), background .25s var(--ease-out);
}
.nav-link:hover{ color:var(--palm); background:rgba(11,92,69,0.06); }
.mob-link{
  display:block; padding:0.85rem 0.9rem; font-size:15px; font-weight:600;
  color:var(--warm); border-radius:12px; transition:background .2s ease;
}
.mob-link:hover{ background:rgba(11,92,69,0.06); }

/* ------------- HERO BACKDROP ------------- */
.hero-grid{
  background-image:
    linear-gradient(to right, rgba(36,29,18,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(36,29,18,0.05) 1px, transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%);
}
.hero-grid-dark{
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(ellipse 90% 90% at 50% 0%, #000 20%, transparent 80%);
          mask-image:radial-gradient(ellipse 90% 90% at 50% 0%, #000 20%, transparent 80%);
}
.hero-glow{
  background:
    radial-gradient(closest-side, rgba(11,92,69,0.16), transparent 70%),
    radial-gradient(closest-side, rgba(201,162,39,0.10), transparent 70%);
  background-position:30% 40%, 70% 60%;
  background-repeat:no-repeat;
  background-size:70% 80%, 60% 70%;
  animation:breathe 14s ease-in-out infinite alternate;
}
@keyframes breathe{
  0%{ transform:translateX(-2%) scale(1); opacity:.85; }
  100%{ transform:translateX(2%) scale(1.06); opacity:1; }
}

/* spark on logo */
.spark{ animation:sparkpulse 2.6s var(--ease-out) infinite; }
@keyframes sparkpulse{
  0%,100%{ transform:scale(1); opacity:1; box-shadow:0 0 0 0 rgba(201,162,39,0.5); }
  50%{ transform:scale(1.25); opacity:.85; box-shadow:0 0 0 4px rgba(201,162,39,0); }
}

/* ------------- VIDEO COLOR CORRECTION (red -> warm green/neutral) ------------- */
/* base video is reddish; rotate hue toward green, desaturate, lift to neutral */
.video-tint{
  filter:
    hue-rotate(105deg)      /* push crimson toward green */
    saturate(0.62)
    contrast(1.04)
    brightness(0.92)
    sepia(0.12);
  transform:scale(1.02);
}
.video-overlay{
  background:
    linear-gradient(180deg, rgba(8,73,54,0.32) 0%, rgba(14,26,20,0.55) 100%),
    radial-gradient(120% 90% at 50% 0%, rgba(11,92,69,0.30), transparent 60%);
  mix-blend-mode:multiply;
}
.video-frame{ transform:perspective(1200px) rotateY(-6deg) rotateX(2deg); }

/* ------------- DASHBOARD MOCKUP ------------- */
.status-row{
  display:flex; align-items:center; gap:8px; padding:5px 0;
  border-top:1px solid var(--line);
}
.status-row:first-of-type{ border-top:0; }
.status-row .dot{ height:7px; width:7px; border-radius:99px; flex:none; }
.status-row .name{ font-size:12.5px; color:var(--warm); font-weight:500; flex:1; }
.pill{ font-family:"IBM Plex Mono",monospace; font-size:9.5px; font-weight:600;
  padding:2px 7px; border-radius:99px; letter-spacing:.02em; }
.pill-ok{ background:rgba(11,92,69,0.12); color:var(--palm); }
.pill-watch{ background:rgba(201,162,39,0.16); color:#9a7d18; }

/* ------------- PROOF / STATS ------------- */
.stat-cell{ background:var(--ink); padding:1.6rem 1.25rem; }
.stat-num{ font-family:"Bricolage Grotesque",sans-serif; font-weight:800;
  font-size:clamp(1.9rem,3.6vw,2.6rem); line-height:1; letter-spacing:-0.02em; color:var(--cream); }
.stat-num .cu{ font-variant-numeric:tabular-nums; }
.stat-lbl{ margin-top:.5rem; font-family:"IBM Plex Mono",monospace; font-size:11.5px;
  text-transform:uppercase; letter-spacing:.06em; color:rgba(251,248,242,0.5); }

/* ------------- ABOUT CHIPS ------------- */
.chip{
  display:inline-flex; align-items:center; padding:.5rem .95rem; border-radius:99px;
  font-size:13px; font-weight:500; color:var(--palm);
  background:rgba(11,92,69,0.07); border:1px solid rgba(11,92,69,0.16);
  transition:all .25s var(--ease-out);
}
.chip:hover{ background:var(--palm); color:var(--cream); transform:translateY(-1px); }

/* ------------- PILLARS (alternating) ------------- */
.pillar{ display:grid; gap:2rem; align-items:center; }
@media(min-width:1024px){
  .pillar{ grid-template-columns:1fr 1fr; gap:4rem; }
  .pillar.flip .pillar-copy{ order:2; }
  .pillar.flip .pillar-visual{ order:1; }
}
.pillar-index{
  font-family:"IBM Plex Mono",monospace; font-size:13px; letter-spacing:.1em;
  color:var(--gold); font-weight:600;
}
.pillar-title{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:800; letter-spacing:-0.02em;
  color:var(--warm); line-height:1.02; font-size:clamp(1.7rem,3.4vw,2.4rem); margin-top:.4rem;
}
.pillar-desc{ margin-top:1rem; font-size:16.5px; line-height:1.65; color:var(--muted); max-width:30rem; }
.pillar-tags{ margin-top:1.4rem; display:flex; flex-wrap:wrap; gap:.5rem; }
.pillar-tags span{
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--warm);
  padding:.35rem .7rem; border-radius:7px; background:var(--cream); border:1px solid var(--line);
}
/* visual frame */
.pillar-visual-inner{
  position:relative; border-radius:18px; border:1px solid var(--line);
  background:linear-gradient(160deg,var(--cream),var(--sand));
  aspect-ratio:4/3; overflow:hidden;
  box-shadow:0 24px 60px -28px rgba(14,26,20,0.22);
}
.pillar-visual-inner::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(36,29,18,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(36,29,18,0.045) 1px, transparent 1px);
  background-size:28px 28px;
}

/* ------------- STEPPER ------------- */
.step-node{
  display:inline-grid; place-items:center; height:68px; width:68px; border-radius:50%;
  background:var(--cream); border:1px solid var(--line);
  font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:18px; color:var(--palm);
  position:relative; z-index:2; transition:all .35s var(--ease-out);
}
.step:hover .step-node{ border-color:var(--palm); color:var(--cream); background:var(--palm);
  transform:translateY(-3px); box-shadow:0 14px 30px -12px rgba(11,92,69,0.5); }
.step-title{ margin-top:1.1rem; font-family:"Bricolage Grotesque",sans-serif; font-weight:800;
  font-size:1.4rem; letter-spacing:-0.02em; color:var(--warm); }
.step-desc{ margin-top:.6rem; font-size:14.5px; line-height:1.6; color:var(--muted); max-width:16rem; }
.step-tags{ margin-top:1rem; display:flex; flex-wrap:wrap; gap:.4rem; }
.step-tags span{ font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--palm);
  padding:.25rem .55rem; border-radius:6px; background:rgba(11,92,69,0.07); }

/* ------------- VISION STATS ------------- */
.vstat{ background:var(--ink); padding:1.5rem 1.25rem; }
.vstat-num{ font-family:"Bricolage Grotesque",sans-serif; font-weight:800;
  font-size:2rem; line-height:1; letter-spacing:-0.02em; color:var(--cream); }
.vstat-lbl{ margin-top:.55rem; font-size:12.5px; line-height:1.4; color:rgba(251,248,242,0.5); }

/* ------------- CONTACT INFO ------------- */
.info-row{ display:flex; align-items:flex-start; gap:.85rem; }
.info-ic{ flex:none; display:grid; place-items:center; height:40px; width:40px; border-radius:11px;
  background:rgba(11,92,69,0.08); border:1px solid rgba(11,92,69,0.14); }
.info-lbl{ font-family:"IBM Plex Mono",monospace; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); }
.info-val{ font-size:15.5px; font-weight:600; color:var(--warm); margin-top:.1rem; }

/* ------------- REVEAL (GSAP fallback baseline) ------------- */
.reveal, .hero-anim{ will-change:transform,opacity; }

/* button height util */
.h-13{ height:52px; }

/* ------------- REDUCED MOTION ------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .reveal,.hero-anim,.hero-mock{ opacity:1 !important; transform:none !important; }
}

/* mobile overflow guard */
html,body{overflow-x:hidden;max-width:100%;}

/* --- robust mobile fixes --- */
@media (max-width:600px){
  h1.font-display{font-size:clamp(1.4rem,6vw,1.98rem)!important;line-height:1.07!important;}
  section,main,[class*="grid"]{min-width:0!important;}
  [class*="max-w-"]{max-width:100%!important;}
}

/* force single-column grids on mobile so a wide child (dashboard) can't stretch the column */
@media (max-width:600px){
  [class*="lg:grid-cols"]{grid-template-columns:1fr!important;}
  [class*="grid"]>*{min-width:0!important;max-width:100%!important;}
}

/* definitive mobile overflow kill */
@media (max-width:600px){
  html,body{overflow-x:hidden!important;}
  #top *, footer *{max-width:100%!important;}
  svg{max-width:100%!important;height:auto;}
  p,h1,h2,li,a,span{overflow-wrap:anywhere!important;}
}

/* viewport-tied clamp: text can never exceed the screen */
@media (max-width:600px){
  #top *{max-width:100vw!important;}
  #top p,#top h1,#top h2,#top li,#top a{max-width:calc(100vw - 2.5rem)!important;}
}