/* ============================================================
   QuoteCraft V4 — Lusion-style immersive layer.
   Film grain, preloader, custom cursor, monumental type,
   WebGL hero canvas. Loads after v3; refines the surface.
   ============================================================ */

/* ---------- film grain ---------- */
.grain{position:fixed;inset:-50%;z-index:2000;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  animation:grain 7s steps(8) infinite;}
@keyframes grain{
  0%,100%{transform:translate(0,0);}20%{transform:translate(-4%,3%);}
  40%{transform:translate(3%,-4%);}60%{transform:translate(-3%,-2%);}80%{transform:translate(4%,3%);}}

/* ---------- preloader ---------- */
#loader{position:fixed;inset:0;z-index:3000;background:#050607;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px;
  transition:transform .9s cubic-bezier(.76,0,.24,1);}
#loader.done{transform:translateY(-101%);}
#loader .l-brand{font-weight:800;font-size:1.4rem;letter-spacing:-.02em;color:#F2F6FB;}
#loader .l-brand span{color:#22D3EE;}
#loader .l-count{font-size:clamp(3.4rem,14vw,6rem);font-weight:800;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.4);}
#loader .l-bar{width:min(320px,60vw);height:2px;background:rgba(255,255,255,.1);overflow:hidden;border-radius:2px;}
#loader .l-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#22D3EE,#818CF8);}

/* ---------- custom cursor ---------- */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:2500;pointer-events:none;border-radius:50%;
  transform:translate(-50%,-50%);display:none;}
@media (pointer:fine){
  .cursor-dot,.cursor-ring{display:block;}
  .cursor-dot{width:8px;height:8px;background:#22D3EE;box-shadow:0 0 12px #22D3EE;}
  .cursor-ring{width:38px;height:38px;border:1px solid rgba(34,211,238,.55);
    transition:width .25s,height .25s,border-color .25s,background .25s;}
  .cursor-ring.hovering{width:64px;height:64px;background:rgba(34,211,238,.08);border-color:rgba(34,211,238,.9);}
}

/* ---------- hero : full viewport stage ---------- */
.hero-v2{min-height:100svh;display:flex;flex-direction:column;align-items:stretch;justify-content:center;}
.hero-v2 .container{width:100%;}
#gl{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.9;}
.hero-v2 .hero-orb{display:none;} /* WebGL takes over */
.display{font-size:clamp(3rem,11vw,7.5rem) !important;line-height:.98 !important;font-weight:800;}
.display .stroke{color:transparent !important;-webkit-text-stroke:1.5px rgba(255,255,255,.75);
  background:none !important;filter:none !important;}
.lusion-label{display:flex;align-items:center;gap:12px;font-size:.72rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:#626C7E;margin-bottom:18px;}
.lusion-label::before{content:"";width:34px;height:1px;background:#22D3EE;box-shadow:0 0 8px #22D3EE;}
.hero-meta{display:flex;gap:26px;margin-top:34px;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:#626C7E;}
.hero-meta b{color:#9AA5B8;}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:#626C7E;}
.scroll-hint i{width:1px;height:44px;background:linear-gradient(#22D3EE,transparent);
  animation:drop 1.8s ease-in-out infinite;}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top;}45%{transform:scaleY(1);transform-origin:top;}
  55%{transform:scaleY(1);transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}

/* ---------- monumental marquee ---------- */
.marquee{padding:34px 0 !important;}
.mq-mega{font-size:clamp(2.6rem,8vw,5rem);font-weight:800;letter-spacing:-.03em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.28);}
.mq-mega .fill{color:#F2F6FB;-webkit-text-stroke:0;}

/* ---------- section headers, lusion style ---------- */
.section-v2{padding:110px 0 !important;}
.section-title{font-size:clamp(2rem,6.4vw,3.6rem) !important;}

/* ---------- magnetic buttons ---------- */
.magnetic{will-change:transform;transition:transform .3s cubic-bezier(.16,1,.3,1);}

/* ---------- product cards : gallery feel ---------- */
.tool-card-v{border-radius:22px !important;overflow:hidden;}
.tool-card-v .tool-img{transition:transform .8s cubic-bezier(.16,1,.3,1);}
.tool-card-v:hover .tool-img{transform:scale(1.05);}

/* ---------- footer : monumental ---------- */
.site-footer .foot-giant{font-size:clamp(3rem,13vw,8rem);font-weight:800;letter-spacing:-.04em;
  line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.22);
  margin:30px 0 10px;user-select:none;}

/* ---------- mobile tuning ---------- */
@media (max-width:640px){
  .hero-v2{min-height:92svh;}
  .hero-meta{flex-wrap:wrap;gap:14px;}
  .scroll-hint{display:none;}
  #loader .l-count{-webkit-text-stroke:1px rgba(255,255,255,.4);}
}
@media (prefers-reduced-motion:reduce){
  .grain{animation:none;}
  .scroll-hint i{animation:none;}
}