/* ═══════════════════════════════════════════════════════════════════════
   Zebra AI — Landing page · core styles
   Grounded in the Zebra AI design system (cyan #00b1eb, Raleway, soft shadows)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Fonts ───────────────────────────────────────────────────────────── */
@font-face { font-family:'Raleway'; src:url('assets/fonts/raleway/RalewayLight.ttf')     format('truetype'); font-weight:300; font-display:swap; }
@font-face { font-family:'Raleway'; src:url('assets/fonts/raleway/RalewayRegular.ttf')   format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Raleway'; src:url('assets/fonts/raleway/RalewayMedium.ttf')    format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Raleway'; src:url('assets/fonts/raleway/RalewaySemiBold.ttf')  format('truetype'); font-weight:600; font-display:swap; }
@font-face { font-family:'Raleway'; src:url('assets/fonts/raleway/RalewayBold.ttf')      format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Raleway'; src:url('assets/fonts/raleway/RalewayExtraBold.ttf') format('truetype'); font-weight:800; font-display:swap; }

/* ── Tokens ──────────────────────────────────────────────────────────── */
:root{
  --zebra-cyan:#00b1eb; --zebra-cyan-600:#0096c9; --zebra-cyan-700:#007ba6;
  --zebra-cyan-100:#cfeffb; --zebra-cyan-50:#eaf8fd; --zebra-graphite:#6f6f6e;
  --primary:var(--zebra-cyan); --primary-foreground:#fff;

  --app-bg:#f8f9fa; --surface:#fff; --surface-muted:#f1f5f9;
  --border:#e2e8f0; --border-strong:#cbd5e1; --ring:var(--zebra-cyan);

  --fg:#0b1220; --fg-muted:#64748b; --fg-subtle:#94a3b8; --fg-on-brand:#fff;

  --success:#22c55e; --success-soft:#dcfce7; --success-fg:#166534;
  --warning:#f59e0b; --warning-soft:#fef3c7; --warning-fg:#92400e;
  --danger:#ef4444;  --danger-soft:#fee2e2;  --danger-fg:#991b1b;
  --info:#3b82f6;    --info-soft:#dbeafe;    --info-fg:#1e40af;

  --p-present:#22c55e; --p-break:#f97316; --p-absent:#ef4444; --p-vac:#3b82f6; --p-sick:#eab308;

  --radius:.5rem; --radius-sm:.25rem; --radius-md:.375rem; --radius-lg:.5rem;
  --radius-xl:.75rem; --radius-2xl:1rem; --radius-full:9999px;

  --shadow-xs:0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow-sm:0 1px 2px 0 rgb(0 0 0 / .04), 0 1px 3px 0 rgb(0 0 0 / .06);
  --shadow-md:0 4px 6px -1px rgb(0 0 0 / .08), 0 2px 4px -2px rgb(0 0 0 / .06);
  --shadow-lg:0 10px 15px -3px rgb(0 0 0 / .08), 0 4px 6px -4px rgb(0 0 0 / .05);
  --shadow-xl:0 24px 48px -12px rgb(11 18 32 / .18), 0 8px 16px -8px rgb(11 18 32 / .10);

  --font-sans:'Raleway', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --maxw:1200px;
  --nav-h:68px;
}

/* ── Reset / base ────────────────────────────────────────────────────── */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-sans); font-weight:500; color:var(--fg);
  background:var(--surface); line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:0; background:none;}
img,svg{display:block; max-width:100%;}
ul{list-style:none;}
:focus-visible{outline:none; box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--zebra-cyan); border-radius:4px;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
section{position:relative;}

/* ── Reusable type ───────────────────────────────────────────────────── */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:.10em; text-transform:uppercase;
  color:var(--zebra-cyan-700);
}
.eyebrow::before{content:""; width:18px; height:2px; border-radius:2px; background:var(--zebra-cyan); display:inline-block;}
.eyebrow--center::before{display:none;}
.section-head{max-width:680px;}
.section-head.center{margin:0 auto; text-align:center;}
.section-title{
  font-size:clamp(28px,4vw,42px); font-weight:800; line-height:1.1;
  letter-spacing:-.02em; margin-top:16px; text-wrap:balance;
}
.section-sub{
  margin-top:16px; font-size:clamp(16px,1.6vw,19px); font-weight:500;
  color:var(--fg-muted); line-height:1.6; text-wrap:pretty;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 20px; border-radius:var(--radius-md);
  font-weight:600; font-size:15px; white-space:nowrap;
  border:1px solid transparent;
  transition:background-color .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.btn svg{width:18px; height:18px;}
.btn--primary{background:var(--zebra-cyan); color:#fff; box-shadow:var(--shadow-sm);}
.btn--primary:hover{background:var(--zebra-cyan-600); transform:translateY(-1px); box-shadow:var(--shadow-md);}
.btn--outline{background:var(--surface); color:var(--fg); border-color:var(--border-strong);}
.btn--outline:hover{background:var(--surface-muted); border-color:var(--fg-subtle);}
.btn--ghost{background:transparent; color:var(--fg);}
.btn--ghost:hover{background:var(--surface-muted);}
.btn--white{background:#fff; color:var(--zebra-cyan-700);}
.btn--white:hover{background:var(--zebra-cyan-50); transform:translateY(-1px);}
.btn--lg{height:52px; padding:0 28px; font-size:16px;}
.btn--block{width:100%;}

/* ── Navigation ──────────────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center;
  background:color-mix(in srgb, #fff 82%, transparent);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .25s, background .25s, box-shadow .25s;
}
.nav.scrolled{border-bottom-color:var(--border); box-shadow:var(--shadow-sm);
  background:color-mix(in srgb, #fff 90%, transparent);}
.nav .wrap{display:flex; align-items:center; gap:24px; width:100%;}
.nav__logo{height:34px; flex:none;}
.nav__logo img{height:100%; width:auto;}
.nav__links{display:flex; align-items:center; gap:4px; margin-left:8px;}
.nav__link{
  padding:8px 12px; border-radius:var(--radius-md); font-size:14px; font-weight:600;
  color:var(--fg-muted); transition:color .15s, background .15s;
}
.nav__link:hover{color:var(--fg); background:var(--surface-muted);}
.nav__right{margin-left:auto; display:flex; align-items:center; gap:10px;}

/* language toggle */
.lang{display:inline-flex; border:1px solid var(--border); border-radius:var(--radius-full); padding:3px; background:var(--surface);}
.lang button{
  font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--fg-muted);
  padding:5px 11px; border-radius:var(--radius-full); transition:.15s;
}
.lang button.on{background:var(--zebra-cyan); color:#fff;}

/* compact demo button, shown instead of the full contact button on mobile */
.nav__demo{display:none; height:42px; padding:0 18px; font-size:14px;}

.nav__burger{display:none; width:44px; height:44px; border-radius:var(--radius-md); align-items:center; justify-content:center; color:var(--fg);}
.nav__burger:hover{background:var(--surface-muted);}
.nav__burger svg{width:22px; height:22px;}

/* mobile menu */
.mobile-menu{
  position:fixed; inset:var(--nav-h) 0 auto 0; z-index:99;
  background:var(--surface); border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-lg); padding:16px 24px 24px;
  display:none; flex-direction:column; gap:6px;
}
.mobile-menu.open{display:flex;}
.mobile-menu a{padding:12px 8px; font-weight:600; border-radius:var(--radius-md); color:var(--fg);}
.mobile-menu a:hover{background:var(--surface-muted);}
.mobile-menu .btn{margin-top:10px;}
.mobile-menu__lang{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px; padding:12px 8px 4px; border-top:1px solid var(--border);}
.mobile-menu__lang > span{font-size:14px; font-weight:600; color:var(--fg-muted);}
.mobile-menu .lang button{padding:11px 18px; font-size:13px;}

/* ── Shared: mocked-app chrome (reused across hero + features) ─────────── */
.appwin{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow-xl); overflow:hidden;
}
.appwin__bar{
  display:flex; align-items:center; gap:8px; height:38px; padding:0 14px;
  background:var(--surface-muted); border-bottom:1px solid var(--border);
}
.appwin__dot{width:10px; height:10px; border-radius:50%;}
.appwin__title{margin-left:8px; font-size:12px; font-weight:600; color:var(--fg-subtle);}

/* mini app body grid (sidebar + content) */
.miniapp{display:grid; grid-template-columns:62px 1fr;}
.miniapp__side{background:var(--surface); border-right:1px solid var(--border); padding:14px 0; display:flex; flex-direction:column; align-items:center; gap:14px;}
.miniapp__logo{width:32px; height:32px; border-radius:8px; background:var(--zebra-cyan); display:flex; align-items:center; justify-content:center;}
.miniapp__logo svg{width:20px; height:20px;}
.miniapp__navi{display:flex; flex-direction:column; gap:8px; align-items:center; margin-top:4px;}
.miniapp__ni{width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--fg-subtle);}
.miniapp__ni svg{width:18px; height:18px;}
.miniapp__ni.on{background:var(--zebra-cyan); color:#fff;}
.miniapp__main{padding:16px; background:var(--app-bg); overflow:hidden;}

/* app cards */
.mc{background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow-sm);}
.mc--raised{box-shadow:var(--shadow-md); border-color:transparent;}
.mc__h{display:flex; align-items:center; justify-content:space-between; padding:14px 16px 0;}
.mc__t{font-size:15px; font-weight:700; letter-spacing:-.01em;}
.mc__d{font-size:11px; color:var(--fg-muted); margin-top:2px;}
.mc__b{padding:14px 16px;}

/* badges */
.bdg{display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:var(--radius-full); font-size:11px; font-weight:700; border:1px solid transparent;}
.bdg .d{width:7px; height:7px; border-radius:50%;}
.bdg--brand{background:var(--zebra-cyan-50); color:var(--zebra-cyan-700);}
.bdg--success{background:var(--success-soft); color:var(--success-fg);}
.bdg--warning{background:var(--warning-soft); color:var(--warning-fg);}
.bdg--danger{background:var(--danger-soft); color:var(--danger-fg);}
.bdg--info{background:var(--info-soft); color:var(--info-fg);}
.bdg--neutral{background:var(--surface-muted); color:var(--neutral-fg,#334155);}

/* punch clock block */
.punch{display:flex; align-items:center; gap:14px;}
.punch__time{font-size:34px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1; color:var(--fg);}
.punch__status{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-muted);}
.punch__small{font-size:11px; color:var(--fg-muted); margin-top:6px;}
.punch__btn{margin-left:auto; display:inline-flex; align-items:center; gap:7px; height:42px; padding:0 18px; border-radius:var(--radius-md); font-weight:700; font-size:14px; color:#fff; background:var(--danger);}
.punch__btn svg{width:16px; height:16px;}

/* stat tiles */
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.stat{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px; box-shadow:var(--shadow-xs);}
.stat__l{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-muted);}
.stat__v{font-size:24px; font-weight:800; letter-spacing:-.02em; margin-top:4px;}
.stat__v small{font-size:13px; font-weight:600; color:var(--fg-muted);}
.stat__d{font-size:10px; color:var(--fg-muted); margin-top:3px; display:flex; align-items:center; gap:3px;}
.stat__d svg{width:11px; height:11px; color:var(--success);}

/* attendance list */
.att{display:flex; flex-direction:column; gap:2px;}
.att__row{display:flex; align-items:center; gap:10px; padding:8px 4px; border-bottom:1px solid var(--border);}
.att__row:last-child{border-bottom:0;}
.pdot{width:9px; height:9px; border-radius:50%; flex:none; position:relative;}
.pdot::after{content:""; position:absolute; inset:0; border-radius:50%; background:inherit; opacity:.35; animation:pingdot 1.8s cubic-bezier(0,0,.2,1) infinite;}
.att__name{font-size:13px; font-weight:600;}
.att__meta{margin-left:auto; font-size:11px; color:var(--fg-muted);}

/* budget ring */
.ring-wrap{display:flex; align-items:center; gap:16px;}
.ring{position:relative; width:92px; height:92px; flex:none;}
.ring__c{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.ring__big{font-size:20px; font-weight:800; letter-spacing:-.02em;}
.ring__small{font-size:9px; color:var(--fg-muted); text-transform:uppercase; letter-spacing:.05em;}
.ring-rows{flex:1; display:flex; flex-direction:column; gap:6px;}
.ring-rows .r{display:flex; justify-content:space-between; font-size:11px;}
.ring-rows .r span:first-child{color:var(--fg-muted);}
.ring-rows .r span:last-child{font-weight:700;}

/* week grid */
.week{display:grid; grid-template-columns:auto repeat(5,1fr); gap:5px;}
.week .h{font-size:9px; font-weight:700; color:var(--fg-subtle); text-align:center; padding-bottom:2px;}
.week .nm{font-size:11px; font-weight:700; display:flex; align-items:center;}
.week .cell{height:24px; border-radius:5px; background:var(--surface-muted);}
.bar{height:24px; border-radius:5px; display:flex; align-items:center; justify-content:center; padding:0 5px; font-size:9.5px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden;}
.bar--cyan{background:var(--zebra-cyan);}
.bar--purple{background:#8b5cf6;}
.bar--green{background:var(--success);}
.bar--slate{background:var(--border-strong); color:var(--fg-muted);}

/* small progress */
.prog{height:6px; border-radius:var(--radius-full); background:var(--surface-muted); overflow:hidden;}
.prog > i{display:block; height:100%; border-radius:inherit; background:var(--zebra-cyan);}

/* ── Footer ──────────────────────────────────────────────────────────── */
.footer{background:#0b1220; color:#cbd5e1; padding:64px 0 32px;}
.footer__top{display:grid; grid-template-columns:1.6fr repeat(2,1fr); gap:40px;}
.footer__brand img{height:32px; margin-bottom:16px; opacity:.96;}
.footer__brand p{font-size:14px; color:#94a3b8; max-width:300px; line-height:1.6;}
.footer__col h4{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#fff; margin-bottom:16px;}
.footer__col a{display:block; font-size:14px; color:#94a3b8; padding:6px 0; transition:color .15s;}
.footer__col a:hover{color:#fff;}
.footer__bottom{margin-top:48px; padding-top:24px; border-top:1px solid rgb(255 255 255 / .08); display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; font-size:13px; color:#64748b;}
.footer__bottom .dot-sep{display:flex; gap:18px;}

/* ── Scroll reveal ───────────────────────────────────────────────────── */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);}
.reveal.in{opacity:1; transform:none;}
.reveal[data-delay="1"]{transition-delay:.08s;}
.reveal[data-delay="2"]{transition-delay:.16s;}
.reveal[data-delay="3"]{transition-delay:.24s;}
.reveal[data-delay="4"]{transition-delay:.32s;}

@keyframes pingdot{75%,100%{transform:scale(2.2); opacity:0;}}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;}
  .reveal{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
}

/* ── Responsive (shared) ─────────────────────────────────────────────── */
@media (max-width:900px){
  .nav__links{display:none;}
  .nav__burger{display:flex;}
  .nav__contact{display:none;}
  .nav__demo{display:inline-flex;}
  .nav__right > .lang{display:none;}  /* lives in the burger menu instead */
  .footer__top{grid-template-columns:1fr 1fr;}
  .footer__brand{grid-column:1 / -1;}
}
@media (max-width:560px){
  .stat-row{grid-template-columns:repeat(2,1fr);}
  .footer__top{grid-template-columns:1fr;}
}