:root{
  --bg:#0b0b0b;
  --panel:#101010;
  --ink:#f5f5f5;
  --muted:#bdbdbd;
  --line:#222;
  --accent:#ffd24a;
}

body{ margin:0; background:var(--bg); color:var(--ink); font-family:'Inter',system-ui,Arial,sans-serif; }

/* ===== Eye hero fixed under content (drawn by vision.js) ===== */
.eye-hero{
  position:fixed;
  top:72px;                    /* match sticky nav height from styles.css */
  left:0; right:0;
  height:540px;
  z-index:0;
  pointer-events:none;
}
#eyeCanvas{
  width:100%; height:100%; display:block;
  mix-blend-mode:screen;
  filter: drop-shadow(0 0 16px rgba(255,210,74,.22));
  opacity:.95;                 /* fades on scroll in vision.js */
}
.eye-fallback{
  position:absolute; inset:0;
  width:100%; height:100%;
  mix-blend-mode:screen; opacity:.9; display:none; /* vision.js shows if WebGL fails */
}

/* Eyelids → blink */
.eyelid{
  position:absolute; left:0; right:0; height:50%;
  background:linear-gradient(to bottom, rgba(0,0,0,.96), rgba(0,0,0,.0));
  pointer-events:none;
}
.eyelid--top{ top:0; transform:translateY(-100%); }
.eyelid--bottom{ bottom:0; transform:translateY(100%) rotate(180deg); }

/* Blink keyframes (vision.js toggles .blink / .blink-open) */
.eye-hero.blink .eyelid--top{ animation:blinkTop .18s ease-in forwards; }
.eye-hero.blink .eyelid--bottom{ animation:blinkBottom .18s ease-in forwards; }
@keyframes blinkTop{ from{transform:translateY(-100%);} to{transform:translateY(0);} }
@keyframes blinkBottom{ from{transform:translateY(100%) rotate(180deg);} to{transform:translateY(0) rotate(180deg);} }
.eye-hero.blink-open .eyelid--top{ animation:openTop .22s ease-out forwards; }
.eye-hero.blink-open .eyelid--bottom{ animation:openBottom .22s ease-out forwards; }
@keyframes openTop{ from{transform:translateY(0);} to{transform:translateY(-100%);} }
@keyframes openBottom{ from{transform:translateY(0) rotate(180deg);} to{transform:translateY(100%) rotate(180deg);} }

/* ===== Content ===== */
.vision-content{
  position:relative; z-index:1;
  max-width:1000px; margin:0 auto;
  padding:120px 20px 64px;               /* clear fixed hero */
  display:grid; gap:36px;
}
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:24px;
  box-shadow:0 0 8px rgba(0,0,0,.6);
}
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.lead{ font-size:1.1rem; }
.muted{ color:#a7a7a7; }

/* ===== Compare (Old vs New) ===== */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.compare__panel{
  background:#0f0f0f; border:1px solid var(--line); border-radius:12px; padding:16px;
  position:relative; overflow:hidden;
}
.badge{
  display:inline-block; padding:4px 10px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink); font-weight:600; font-size:.8rem;
  margin-bottom:8px;
}
.badge--new{ border-color:#2a2a2a; color:#fff; }

/* OLD side */
.compare__panel--old{ overflow:hidden; }
.oldwrap{ position:relative; }
.oldwrap__phone{
  position:absolute; right:-16px; bottom:-24px;
  width:220px; height:auto;
}
.oldsteps{ list-style:none; margin:6px 0 10px; padding:0; display:grid; gap:6px; }
.oldsteps li{ display:flex; align-items:flex-start; gap:8px; }
.oldsteps .dot{
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid var(--line);
  margin-top:6px;
}

/* NEW side: product grid */
.product-grid{ display:grid; gap:12px; }
.product-grid.cols-2{ grid-template-columns:1fr 1fr; }

.product-card{
  display:grid; grid-template-columns:56px 1fr; gap:10px;
  align-items:flex-start;
  padding:10px; border:1px solid var(--line); border-radius:10px;
  background:rgba(255,255,255,.02);
}
.product-card__thumb{
  width:56px; height:56px; border-radius:10px;
  display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid #1b1b1b;
}
.product-card__thumb svg{ width:32px; height:32px; opacity:.9; }
.product-card__text{ display:grid; gap:2px; }
.product-card__name{ font-weight:700; letter-spacing:.2px; }
.product-card__line{ display:flex; gap:10px; align-items:center; margin-top:2px; }
.product-card__meta{ font-size:12px; color:var(--muted); margin-top:2px; }

.status{
  display:inline-block; padding:2px 8px; border-radius:999px;
  font-size:11px; font-weight:600; letter-spacing:.1px;
  border:1px solid var(--line); color:#dcdcdc; background:rgba(255,255,255,.03);
}
.status--in{ color:#d6ffd6; border-color:#2c3a2c; background:rgba(64,160,64,.08); }
.status--low{ color:#fff2cc; border-color:#3a3320; background:rgba(200,160,60,.08); }
.status--out{ color:#e6caca; border-color:#3a2a2a; background:rgba(200,64,64,.06); }

.price{ color:#fff; font-weight:600; font-size:12px; }

/* Footer */
.footer{ border-top:1px solid var(--line); padding:24px; text-align:center; color:#8f8f8f; font-size:.9rem; }

/* Responsive */
@media (max-width: 980px){
  .eye-hero{ height:420px; }
  .grid-2{ grid-template-columns:1fr; }
  .compare{ grid-template-columns:1fr; }
}
@media (max-width: 680px){
  .product-grid.cols-2{ grid-template-columns:1fr; }
  .oldwrap__phone{ width:160px; right:-12px; bottom:-18px; }
}