/* ===== Coobook Lab — style.css ===== */
:root{
  --bg:#08090C;
  --glass:rgba(255,255,255,0.035);
  --glass-border:rgba(255,255,255,0.09);
  --glass-border-hover:rgba(255,255,255,0.22);
  --text:#F3F3F5;
  --text-dim:#8B8E98;
  --text-faint:#4c4e57;
  --magenta:#E6007E;
  --yellow:#FFD500;
  --radius:22px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
::selection{background:var(--magenta);color:#fff;}
body{
  background:
    radial-gradient(1300px 650px at 12% -8%, rgba(230,0,126,0.11), transparent 58%),
    radial-gradient(1000px 520px at 102% 2%, rgba(255,213,0,0.07), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:'Vazirmatn', sans-serif;
  min-height:100vh;
  overflow-x:hidden;
  cursor:none;
}
body.has-site-bg{
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}
body.has-site-bg::before{
  content:'';position:fixed;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(8,9,12,.75), rgba(8,9,12,.94));
}
.mono{font-family:'JetBrains Mono', monospace;}
a{color:inherit;}
@media (pointer:coarse){ body{cursor:auto;} .cursor-dot,.cursor-ring{display:none;} }

.grain{position:fixed;inset:0;pointer-events:none;z-index:200;opacity:0.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.vignette{position:fixed;inset:0;pointer-events:none;z-index:199;box-shadow:inset 0 0 220px rgba(0,0,0,0.55);}

.cursor-dot{position:fixed;top:0;left:0;width:5px;height:5px;border-radius:50%;background:var(--yellow);z-index:300;pointer-events:none;transform:translate(-50%,-50%);transition:transform .06s linear;}
.cursor-ring{position:fixed;top:0;left:0;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,0.35);z-index:300;pointer-events:none;transform:translate(-50%,-50%);transition:transform .18s cubic-bezier(.16,1,.3,1), width .25s ease, height .25s ease, border-color .25s ease;}
.cursor-ring.hover{width:64px;height:64px;border-color:var(--magenta);background:rgba(230,0,126,0.06);}

.iris{position:fixed;inset:0;z-index:400;background:#08090C;display:flex;align-items:center;justify-content:center;clip-path:circle(80% at 50% 50%);}
.iris-mark{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.3em;color:var(--text-faint);z-index:2;opacity:0;animation:markfade .5s ease .15s forwards;}
@keyframes markfade{to{opacity:1;}}
.iris.opening{animation:irisReveal .9s cubic-bezier(.65,0,.35,1) .25s forwards;}
@keyframes irisReveal{to{clip-path:circle(80% at 50% 50%);opacity:0;visibility:hidden;}}
@media (prefers-reduced-motion: reduce){.iris{display:none;} *{animation-duration:.001s !important;transition-duration:.001s !important;}}

.topbar{display:flex;align-items:center;justify-content:space-between;padding:24px clamp(20px,5vw,64px);position:relative;z-index:2;}
.back{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-dim);border:1px solid var(--glass-border);padding:8px 16px;border-radius:30px;transition:.3s;text-decoration:none;}
.back:hover{border-color:var(--glass-border-hover);color:var(--text);}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-0.02em;text-decoration:none;}
.logo .dot{width:9px;height:9px;border-radius:50%;background:var(--magenta);box-shadow:0 0 14px var(--magenta);}
.logo .sub{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-faint);letter-spacing:.14em;border:1px solid var(--glass-border);padding:3px 9px;border-radius:20px;}
.topbar-status{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-faint);display:flex;align-items:center;gap:8px;}
.topbar-status .pulse{width:6px;height:6px;border-radius:50%;background:#4ADE80;animation:pulse 2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.25;}}

.hero{padding:56px clamp(20px,5vw,64px) 50px;max-width:1220px;position:relative;z-index:2;}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--magenta);letter-spacing:.16em;display:flex;align-items:center;gap:10px;margin-bottom:22px;}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--magenta);}
.hero h1{font-size:clamp(34px,6vw,62px);font-weight:900;line-height:1.16;letter-spacing:-0.02em;max-width:880px;}
.hero h1 .accent{background:linear-gradient(90deg, var(--yellow), var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero p{margin-top:22px;font-size:16px;color:var(--text-dim);max-width:600px;line-height:1.95;}
.hero-meta{display:flex;gap:28px;margin-top:38px;flex-wrap:wrap;}
.hero-meta div{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-faint);}
.hero-meta strong{display:block;font-family:'Vazirmatn';font-size:22px;color:var(--text);font-weight:700;margin-bottom:3px;}

.grid-wrap{padding:10px clamp(20px,5vw,64px) 90px;max-width:1220px;position:relative;z-index:2;margin:0 auto;}
.grid{display:grid;grid-template-columns:repeat(6, 1fr);gap:16px;}

.card{position:relative;border:1px solid var(--glass-border);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;justify-content:space-between;min-height:210px;padding:24px;
  transition:border-color .4s ease, transform .4s cubic-bezier(.16,1,.3,1);}
.card-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(.35) brightness(.4) contrast(1.05);transform:scale(1.06);transition:filter .5s ease, transform .6s cubic-bezier(.16,1,.3,1);z-index:0;}
.card:hover .card-bg{filter:grayscale(.1) brightness(.55) contrast(1.08);transform:scale(1.12);}
.card-scrim{position:absolute;inset:0;background:linear-gradient(180deg, rgba(8,9,12,0.15) 0%, rgba(8,9,12,0.55) 55%, rgba(8,9,12,0.88) 100%);z-index:0;}
.card-noimg{background:var(--glass);backdrop-filter:blur(22px);}
.card::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;z-index:1;
  background:radial-gradient(260px circle at var(--x,50%) var(--y,50%), rgba(255,255,255,0.10), transparent 60%);transition:opacity .4s ease;}
.card:hover::before,.card:focus-visible::before{opacity:1;}
.card:hover,.card:focus-visible{border-color:var(--glass-border-hover);transform:translateY(-4px);outline:none;}

.vf{position:absolute;inset:10px;pointer-events:none;opacity:0;transition:opacity .35s ease, transform .35s ease;transform:scale(.92);z-index:2;}
.card:hover .vf,.card:focus-visible .vf,.item:hover .vf{opacity:1;transform:scale(1);}
.vf i{position:absolute;width:14px;height:14px;border-color:var(--yellow);border-style:solid;border-width:0;}
.vf i:nth-child(1){top:0;left:0;border-top-width:1.5px;border-left-width:1.5px;}
.vf i:nth-child(2){top:0;right:0;border-top-width:1.5px;border-right-width:1.5px;}
.vf i:nth-child(3){bottom:0;left:0;border-bottom-width:1.5px;border-left-width:1.5px;}
.vf i:nth-child(4){bottom:0;right:0;border-bottom-width:1.5px;border-right-width:1.5px;}

.card-featured{grid-column:span 3;grid-row:span 2;min-height:360px;}
.card-wide{grid-column:span 3;}
.card-med{grid-column:span 2;}
.card-cookie{grid-column:span 2;border-style:dashed;}
.card-contact{grid-column:span 2;}

.tag-row{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2;}
.specimen{font-family:'JetBrains Mono',monospace;font-size:10px;color:rgba(243,243,245,.65);letter-spacing:.1em;}
.count-chip{font-family:'JetBrains Mono',monospace;font-size:10.5px;background:rgba(255,255,255,0.10);border:1px solid rgba(255,255,255,.18);padding:3px 10px;border-radius:20px;color:#fff;backdrop-filter:blur(6px);}
.card h3{font-size:20px;font-weight:700;margin-top:18px;letter-spacing:-0.01em;position:relative;z-index:2;}
.card-featured h3{font-size:28px;margin-top:22px;}
.card p.desc{font-size:13px;color:rgba(243,243,245,.72);margin-top:9px;line-height:1.8;max-width:92%;position:relative;z-index:2;}
.card-foot{margin-top:20px;display:flex;align-items:center;gap:9px;font-size:12.5px;color:#fff;font-weight:500;position:relative;z-index:2;}
.arrow{display:inline-flex;width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.3);align-items:center;justify-content:center;transition:transform .4s cubic-bezier(.16,1,.3,1), border-color .4s ease;}
.card:hover .arrow{transform:translateX(-5px);border-color:var(--yellow);}

.icon-box{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);position:relative;z-index:2;backdrop-filter:blur(6px);}
.icon-box svg{width:20px;height:20px;stroke:#fff;}
.card-featured .icon-box{width:52px;height:52px;}
.card-featured .icon-box svg{width:24px;height:24px;}
.external-mark{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--yellow);display:flex;align-items:center;gap:4px;position:relative;z-index:2;}

.card-contact{background:rgba(255,255,255,0.03);backdrop-filter:blur(22px);}
.contact-btns{display:flex;gap:10px;margin-top:16px;position:relative;z-index:2;}
.cbtn{flex:1;text-align:center;padding:11px 8px;border-radius:12px;font-size:13px;font-weight:600;text-decoration:none;border:1px solid var(--glass-border);color:var(--text);transition:all .3s ease;}
.cbtn.call{background:rgba(255,213,0,0.1);}
.cbtn.sms{background:rgba(230,0,126,0.12);}
.cbtn:hover{border-color:var(--glass-border-hover);transform:translateY(-2px);}

.feedback-fab{position:fixed;bottom:24px;left:24px;background:linear-gradient(135deg, var(--magenta), #a3005f);color:#fff;border:none;padding:13px 20px;border-radius:50px;font-family:'Vazirmatn';font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:8px;box-shadow:0 10px 28px rgba(230,0,126,0.35);cursor:pointer;z-index:50;transition:transform .3s cubic-bezier(.16,1,.3,1);}
.feedback-fab:hover{transform:translateY(-3px) scale(1.02);}

.install-fab{position:fixed;bottom:24px;right:24px;background:linear-gradient(135deg, var(--yellow), #cf9d00);color:#08090C;border:none;padding:13px 20px;border-radius:50px;font-family:'Vazirmatn';font-size:13.5px;font-weight:700;display:none;align-items:center;gap:8px;box-shadow:0 10px 28px rgba(255,213,0,0.3);cursor:pointer;z-index:50;transition:transform .3s cubic-bezier(.16,1,.3,1);}
.install-fab.show{display:flex;}
.install-fab:hover{transform:translateY(-3px) scale(1.02);}

.ios-steps{list-style:none;margin-top:6px;}
.ios-steps li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-dim);padding:8px 0;border-bottom:1px solid var(--glass-border);}
.ios-steps li:last-child{border-bottom:none;}
.ios-steps b{display:inline-flex;width:22px;height:22px;border-radius:50%;background:rgba(255,213,0,.15);color:var(--yellow);align-items:center;justify-content:center;font-size:11.5px;flex-shrink:0;}

footer{padding:30px clamp(20px,5vw,64px) 40px;border-top:1px solid var(--glass-border);font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-faint);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;position:relative;z-index:2;max-width:1220px;margin:0 auto;}

/* ===== Category / item list page ===== */
.head{padding:16px clamp(20px,5vw,64px) 40px;max-width:1220px;border-bottom:1px solid var(--glass-border);position:relative;z-index:2;margin:0 auto;}
.head h1{font-size:clamp(28px,4.2vw,42px);font-weight:900;letter-spacing:-0.02em;}
.head p{margin-top:12px;color:var(--text-dim);max-width:560px;line-height:1.9;font-size:14.5px;}
.head-stats{display:flex;gap:24px;margin-top:24px;flex-wrap:wrap;}
.head-stats div{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--text-faint);}
.head-stats strong{display:block;font-family:'Vazirmatn';font-size:19px;color:var(--text);font-weight:700;margin-bottom:2px;}

.list-wrap{padding:40px clamp(20px,5vw,64px) 90px;max-width:1220px;position:relative;z-index:2;margin:0 auto;}
.item-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.item{position:relative;border:1px solid var(--glass-border);border-radius:20px;overflow:hidden;transition:border-color .35s ease, transform .35s ease;text-decoration:none;color:inherit;display:block;background:var(--glass);}
.item:hover{border-color:var(--glass-border-hover);transform:translateY(-4px);}
.item-media{height:170px;position:relative;overflow:hidden;background:#111318;}
.item-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3) brightness(.75);transition:transform .6s cubic-bezier(.16,1,.3,1), filter .5s ease;}
.item:hover .item-media img{transform:scale(1.08);filter:grayscale(.05) brightness(.9);}
.item-media .type-tag{position:absolute;top:10px;right:10px;font-family:'JetBrains Mono',monospace;font-size:9.5px;background:rgba(8,9,12,0.72);border:1px solid rgba(255,255,255,.15);padding:3px 9px;border-radius:20px;backdrop-filter:blur(6px);}
.item-body{padding:18px;}
.item-body h3{font-size:16px;font-weight:700;}
.item-body p{font-size:12.5px;color:var(--text-dim);margin-top:7px;line-height:1.75;}
.item-foot{display:flex;align-items:center;justify-content:space-between;margin-top:16px;}
.item-link{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--yellow);}
.item-date{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-faint);}
.empty-state{padding:60px 20px;text-align:center;color:var(--text-faint);font-size:13.5px;border:1px dashed var(--glass-border);border-radius:16px;}

/* ===== Survey modal ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(4,5,7,.75);backdrop-filter:blur(6px);z-index:500;display:none;align-items:center;justify-content:center;padding:20px;}
.modal-overlay.open{display:flex;}
.modal{background:#0c0d11;border:1px solid var(--glass-border);border-radius:20px;padding:28px;max-width:420px;width:100%;position:relative;}
.modal h3{font-size:18px;font-weight:800;margin-bottom:8px;}
.modal p{font-size:13px;color:var(--text-dim);margin-bottom:18px;}
.modal textarea, .modal input{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--glass-border);border-radius:12px;padding:12px;color:var(--text);font-family:'Vazirmatn';font-size:14px;margin-bottom:12px;resize:vertical;}
.modal-close{position:absolute;top:16px;left:16px;background:none;border:none;color:var(--text-dim);font-size:18px;cursor:pointer;}
.modal-submit{width:100%;padding:12px;border-radius:12px;background:var(--magenta);border:none;color:#fff;font-family:'Vazirmatn';font-weight:700;font-size:14px;cursor:pointer;transition:.3s;}
.modal-submit:hover{background:#c40068;}
.modal-success{color:#4ADE80;font-size:13.5px;text-align:center;padding:20px 0;display:none;}

@media (max-width:880px){
  .grid{grid-template-columns:repeat(2,1fr);}
  .card-featured,.card-wide,.card-med,.card-cookie,.card-contact{grid-column:span 2;}
  .card-featured{min-height:280px;}
  .item-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .item-grid{grid-template-columns:1fr;}
}