/* =============================================
   Align Labs — fully responsive CSS overhaul
   Drop-in replacement for your existing my.css
   ============================================= */

:root{
  --bg:#f4f5f7; --panel:#fff; --muted:#6b7280; --text:#111827; --ring:#e6e8ee;
  --shadow:0 6px 30px rgba(0,0,0,.08);
  --nav-h: 90px; /* set dynamically in JS, fallback here */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%;}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text); background:var(--bg); line-height:1.5;
  padding-top:var(--nav-h); /* keeps content below sticky nav across breakpoints */
}
.container{width:min(1100px,92vw); margin:0 auto; padding-inline: clamp(10px, 2vw, 16px);} /* subtle gutter on narrow phones */

/* Utility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
section, .site-footer{ scroll-margin-top: calc(var(--nav-h) + 18px) }

/* =====================
   NAV
   ===================== */
.nav{
  position: fixed;
  top: 0; left: 0; width: 100%;
  z-index: 100;                 /* stay on top */
  transition: transform .28s ease;
  will-change: transform;
}
.nav.nav--hidden{ transform: translateY(-120%); }
@media (prefers-reduced-motion: reduce){ .nav{ transition:none } }


.nav-rail{
  width:min(1050px,92vw); margin:0 auto; background:#fff; border-radius:999px;
  padding:10px 14px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px;
  border:1px solid #eceef3; box-shadow:0 18px 40px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(0,0,0,.04);
}
.brand{display:flex; align-items:center; gap:8px; text-decoration:none; color:#0f172a; font-weight:800}
.brand-logo{width: clamp(48px, 6.5vw, 80px); height: clamp(48px, 6.5vw, 80px); object-fit:contain; border-radius:6px}
.menu{display:flex; justify-content:center; gap: clamp(14px, 2.2vw, 28px); font-weight:600}
.menu a{ text-decoration:none; color:#4b5563; padding:8px 10px; border-radius:999px; transition:.2s }
.menu a:hover{ background:#f3f4f6; color:#111827 }
.menu a.active{ color:#111827; background:#f3f4f6 }
.pill-btn{
  justify-self:end; text-decoration:none; color:#fff; font-weight:700; padding:10px 16px; border-radius:999px;
  background:linear-gradient(180deg,#ff944b 0%, #ff7f3a 50%, #ff6a1a 100%);
  box-shadow:0 12px 24px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.25);
  border:1px solid rgba(0,0,0,.08); white-space:nowrap;
}
.pill-btn:hover{ filter:brightness(1.05) }
.nav-toggle{ display:none; border:0; background:transparent; font-size:1.25rem; padding:8px; border-radius:10px }
.nav-toggle:focus-visible{ outline:2px solid #111; outline-offset:2px }

/* Mobile nav */
@media (max-width: 900px){
  .nav-rail{ grid-template-columns:auto auto 1fr }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center }
  .menu{
    grid-column:1 / -1; order: 99; display:flex; flex-direction:column; gap:8px;
    max-height:0; overflow:hidden; transition:max-height .25s ease; padding-inline:4px; margin-top:6px;
  }
  .menu.is-open{ max-height:60vh }
  .pill-btn{ justify-self:end }
}

/* =====================
   HERO
   ===================== */
.hero{ padding: clamp(8px, 1.5vw, 14px) 0 40px; display:flex; flex-direction:column }
.hero-head{ display:flex; flex-direction:column; align-items:center; gap: clamp(16px, 2.8vw, 30px); margin-bottom: 14px }
.pill{
  border-radius:40px; width:fit-content;
  font-size: clamp(22px, 3.2vw, 48px);
  font-weight:800; padding: clamp(10px,1.8vw,26px) clamp(14px,2.4vw,38px);
  background:#f6f7f9; border:1px solid #e6e8ee;
  box-shadow:0 18px 40px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.06); color:#111827;
}
.badge{ display:inline-flex; align-items:center; gap:12px; padding: clamp(12px, 2.2vw, 22px) clamp(16px, 2.4vw, 28px); border-radius:40px; border:1px solid #efebe9;
  box-shadow:0 20px 40px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(0,0,0,.05); transform:rotate(-4deg); margin:0 auto;}
.grad-text{ font-size: clamp(22px, 3.4vw, 48px); font-weight:800; line-height:1.18; background:linear-gradient(180deg,#ff6a00 0%, #ff8a34 55%, #ff5a00 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; -webkit-text-stroke:.35px rgba(0,0,0,.06); text-shadow:0 0 1px rgba(0,0,0,.05)}
.btn{ border:0; border-radius:999px; padding:10px 16px; cursor:pointer; font-weight:700 }
.btn--orange{ color:#fff; background:linear-gradient(180deg,#ff944b 0%, #ff7f3a 50%, #ff6a1a 100%); box-shadow:0 10px 20px rgba(255,122,69,.35), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 0 rgba(0,0,0,.12); border:1px solid rgba(0,0,0,.08); padding:10px 18px}
.panel{ margin-top:20px; background:#fff; border:1px solid var(--ring); border-radius:24px; box-shadow:var(--shadow); padding: clamp(16px, 2.2vw, 28px); width:100% }

/* Hero Illustration Slider */
.illust-viewport{ position:relative; aspect-ratio: 16 / 9; min-height: 220px; border-radius:14px; background:#f8f9fb; border:1px solid #e5e7eb; overflow:hidden }
.illust-viewport img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.02); transition:opacity .7s ease, transform .7s ease }
.illust-viewport img.active{ opacity:1; transform:scale(1) }
.illust-dots{ display:flex; gap:10px; justify-content:center; margin-top:10px }
.illust-dots .dot{ width:10px; height:10px; border-radius:999px; border:0; cursor:pointer; background:#cfd5dc; box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(0,0,0,.08) }
.illust-dots .dot.active{ background:#111827; transform:scale(1.15) }

/* Titles */
.title{ text-align:center; margin: clamp(60px, 9vw, 90px) auto 40px; max-width:740px}
.title h2{font-size: clamp(28px, 4vw, 40px); margin:0 0 8px}
.title p{color:var(--muted); margin:0}

/* =====================
   TESTIMONIALS
   ===================== */
.t-viewport{ position:relative; min-height:220px }
.t-slide{ position:absolute; inset:0; opacity:0; transform:translateY(10px) scale(.995); transition:opacity .5s ease, transform .5s ease; pointer-events:none }
.t-slide.active{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto }
.t-card{ background:#fff; border:1px solid #e6e8ee; border-radius:20px; box-shadow:0 20px 40px rgba(0,0,0,.08); padding: clamp(16px, 2vw, 22px); max-width:760px; margin:0 auto }
.t-head{ display:flex; align-items:center; gap:14px; margin-bottom:10px }
.t-avatar{ width:44px; height:44px; border-radius:50%; object-fit:cover; border:1px solid #edf0f4 }
.t-name{ font-weight:700 } .t-role{ color:#6b7280; font-size:13px } .t-stars{ margin-left:auto; letter-spacing:2px; color:#ff7a45; font-weight:700 }
.t-quote{ margin:0; color:#111827; font-size: clamp(16px, 1.7vw, 18px) }
.t-dots{ display:flex; justify-content:center; gap:10px; margin-top:14px }
.t-dot{ width:10px; height:10px; border-radius:999px; border:0; cursor:pointer; background:#cfd5dc; box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(0,0,0,.08) }
.t-dot.active{ background:#111827; transform:scale(1.15) }
@media (max-width:900px){ .t-card{ margin:0 10px } }

/* =====================
   SCROLLY (5 slides)
   ===================== */
.scrolly{ margin:80px auto }
.scrolly-wrap{ position:relative; height:520vh }
.scrolly-sticky{ position:sticky; top:8vh; height:84vh; border-radius:22px; background:#fff; border:1px solid #e6e8ee; box-shadow:0 28px 60px rgba(0,0,0,.10); overflow:hidden; max-width:1200px; display:flex; align-items:center; margin:0 auto}
.slides{ position:relative; width:100%; height:100% }
.slide{ position:absolute; inset:0; opacity:0; transform:translateY(10px) scale(.995); transition:opacity .5s ease, transform .5s ease; display:grid; place-items:center }
.slide.active{ opacity:1; transform:translateY(0) scale(1) }
.slide-inner{ width:min(1100px, 92vw); margin:0 auto; display:grid; grid-template-columns:1.05fr .95fr; gap: clamp(16px, 3vw, 34px); align-items:center; height:100%; padding: clamp(16px, 2.2vw, 28px) }
.copy h3{ margin:0 0 10px; font-size: clamp(22px, 2.6vw, 28px) }
.copy p{ margin:0 0 14px; color:#6b7280 }
.copy ul{ margin:0; padding-left:20px; line-height:1.8 }
.copy li{ color:#0f172a }
.art{ width:100%; height:100%; display:grid; place-items:center }
.art img{ max-width:100%; max-height:70%; object-fit:contain }
.scrolly-ui{ position:absolute; left:0; right:0; bottom:12px; display:flex; align-items:center; justify-content:center; gap:12px }
.dots{ display:flex; gap:8px } .dot{ width:8px; height:8px; border-radius:999px; background:#cfd5dc; box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(0,0,0,.08) } .dot.active{ background:#111827; transform:scale(1.15) }
.scrolly-space{ height:420vh }

/* Tablet/mobile fallback */
@media (max-width: 992px){
  .scrolly-wrap{ height:auto }
  .scrolly-sticky{ position:static; height:auto; box-shadow:0 14px 30px rgba(0,0,0,.06) }
  .slides{ position:static }
  .slide{ position:static; opacity:1; transform:none }
  .slide-inner{ grid-template-columns: 1fr; gap:16px; padding:18px }
  .art img{ max-height:none }
  .scrolly-space{ display:none }
}

/* =====================
   STATIC TIMELINE (fluid + centered line)
   ===================== */
.tl{ padding:80px 0 }
.tl-head{ text-align:center; margin-bottom:28px }

/* Outer wrap */
.tl-wrap{
  position:relative;
  width:min(980px, 92vw);
  margin:0 auto;
  display:grid;
  grid-template-rows:auto auto auto auto;
  row-gap:120px;
  padding:12px 0;
}

/* Center vertical line */
.tl-line{
  position:absolute;
  top:0; bottom:0;
  left:50%; transform:translateX(-50%);
  width:6px;
  background:#ff914d;
  border-radius:999px;
  z-index:0;
}

/* Step grid: card | gutter | card */
.tl-step{
  display:grid;
  align-items:center;
  min-height:220px;
  position:relative;
  z-index:1;
  grid-template-columns: minmax(320px,1fr) 60px minmax(320px,1fr);
  column-gap:24px;
}

/* Place cards */
.tl-step.right .tl-card{ grid-column:3; margin:0; }
.tl-step.left  .tl-card{ grid-column:1; margin:0; }

/* Nodes */
.tl-node{
  position:absolute;
  left:50%;
  transform:translate(-50%,-50%);
  width:38px; height:38px; border-radius:999px;
  background:#111; color:#fff; font-weight:700; font-size:12px;
  display:grid; place-items:center;
  box-shadow:0 10px 22px rgba(0,0,0,.15);
  z-index:2;
}

/* Cards */
.tl-card{
  background:#fff; border:1px solid var(--ring); border-radius:16px;
  box-shadow:var(--shadow); padding:16px 18px;
  min-width:0;                /* let the grid shrink smoothly */
  overflow-wrap:anywhere;     /* prevent overflow without letter-stacking */
  word-break:normal;
  hyphens:auto;
}
.tl-card img{ width:100%; height:160px; object-fit:cover; border-radius:12px; margin-bottom:10px }
.tl-card h4{ margin:0 0 6px } 
.tl-card p{ margin:0; color:var(--muted) }

/* Slightly narrower desktops */
@media (max-width:1100px){
  .tl-step{
    grid-template-columns: minmax(280px,1fr) 50px minmax(280px,1fr);
  }
}

/* ===== Mobile stack & overrides ===== */
@media (max-width:900px){
  .tl-wrap{ row-gap:60px; }

  /* keep line on the left on phones */
  .tl-line{ left:12px; transform:none; }

  /* rail + content layout */
  .tl-step{
    grid-template-columns:36px 1fr !important;
    column-gap:12px;
  }

  /* force ALL cards to the wide column, override side-specific rules */
  .tl-step .tl-card,
  .tl-step.right .tl-card,
  .tl-step.left  .tl-card{
    grid-column:2 !important;
    margin:0 !important;
  }
}


/* =====================
   ABOUT + FEATURES + CTA
   ===================== */
#about{ padding:80px 0 60px }
#about .section-title{ text-align:center; margin:0 auto 36px; max-width:900px; line-height:1.15 }
#about .feature-grid{ display:grid; grid-template-columns:repeat(4, minmax(230px, 1fr)); gap:24px; align-items:stretch; width:min(1100px, 92vw); margin:0 auto 28px }
#about .feature{ background:#fff; border:1px solid var(--ring); border-radius:20px; box-shadow:var(--shadow); padding:18px 20px; display:flex; flex-direction:column }
#about .feature h5{ margin:6px 0 8px; font-weight:700 } #about .feature p{ margin:0; color:#6b7280 }

/* CTA card — tuned for better balance across sizes */
#about .cta{
  width:min(1100px, 92vw); margin:10px auto 0; background:#ffffff; border:2px solid var(--ring); border-radius:24px; box-shadow:var(--shadow);
  display:grid; grid-template-columns: 1.25fr 0.75fr; gap:20px; padding: 18px 20px; align-items:center; min-height: clamp(260px, 32vw, 440px);
 
}
#about .cta img{ width:100%; height:auto; max-height:100%; aspect-ratio: 4 / 3; object-fit:cover; border-radius:18px }
#about .cta > div{ align-self:center }
@media (max-width:1100px){
  #about .feature-grid{ grid-template-columns:repeat(2, minmax(230px,1fr)) }
  #about .cta{ grid-template-columns: 1.2fr 0.8fr; min-height: clamp(240px, 38vw, 400px); gap:18px; padding: 16px 18px }
}
@media (max-width:640px){
  #about .feature-grid{ grid-template-columns:1fr }
  #about .cta{ grid-template-columns:1fr; min-height:unset }
  #about .cta img{ height:auto; aspect-ratio: 3 / 2 }
}

/* =====================
   PRICING
   ===================== */
#pricing{ padding:90px 0 70px }
#pricing h2{ text-align:center; font-size: clamp(28px, 5vw, 48px); line-height:1.1; margin:14px 0 18px }
#pricing .tabs-wrap{ width:max-content; margin:0 auto 22px; background:linear-gradient(180deg,#ff944b 0%, #ff7f3a 50%, #ff6a1a 100%); border-radius:999px; padding:8px; box-shadow:0 18px 40px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(0,0,0,.04) }
#pricing .tabs{ display:flex; gap:6px }
#pricing .tab{ border:0; background:transparent; padding:10px 18px; border-radius:999px; font-weight:700; color:#4b5563; cursor:pointer; transition:background .15s, color .15s }
#pricing .tab[aria-selected="true"]{ background:#f3f4f6; color:#111827 }
#pricing .plan{ display:block; width:min(1100px,92vw); margin:16px auto 0; background:#fff; border:1px solid #eceef3; border-radius:28px; box-shadow:0 28px 60px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.04); padding: clamp(18px, 2.2vw, 26px) }
#pricing .plan h3{ margin:0 0 4px; font-weight:800 }
#pricing .plan .sub{ color:#6b7280; margin:0 0 16px }
#pricing .features{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin:6px 0 22px }
#pricing .boxy{ background:#EFEFEF; border:1px solid #eef0f4; border-radius:14px; padding:16px; box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 14px 30px rgba(0,0,0,.06); transition:box-shadow .2s, transform .2s }
#pricing .feat{ display:flex; align-items:center; gap:10px; margin:10px 0; color:#0f172a }
#pricing .sq{ width:8px; height:8px; border-radius:2px; display:inline-block }
#pricing .sq.g{ background:#22c55e }
#pricing .sq.r{ background:#ef4444 }
#pricing .price{ font-size: clamp(24px, 3.4vw, 32px); font-weight:900 }
#pricing .price small{ color:#6b7280; font-weight:600; font-size:14px; margin-left:6px }
.bottom{ display:flex; align-items:center; justify-content:space-between; gap:16px }
#pricing .cta{ display:inline-block; min-width:120px; text-align:center; padding:8px 14px; border-radius:999px; font-weight:700; color:#fff; border:0; background:linear-gradient(180deg,#ff944b 0%, #ff7f3a 50%, #ff6a1a 100%); box-shadow:0 10px 20px rgba(255,122,69,.35); transition:transform .15s }
#pricing .cta:hover{ filter:brightness(1.05); transform:translateY(-1px) }
@media (max-width:900px){
  #pricing .features{ grid-template-columns:1fr }
  #pricing .bottom{ flex-direction:column; align-items:flex-start; gap:10px }
}

/* =====================
   BLOG
   ===================== */
.blog-list{ display:grid; gap:24px }
.blog-card{ display:grid; grid-template-columns: minmax(220px, 320px) 1fr; align-items:center; gap:26px; background:#fff; border:1px solid #e6e8ee; border-radius:20px; box-shadow:0 12px 40px rgba(0,0,0,.08); padding: clamp(14px, 2vw, 18px); transition:transform .2s, box-shadow .2s }
.blog-card:hover{ transform:translateY(-3px); box-shadow:0 18px 50px rgba(0,0,0,.10) }
.blog-card img{ width:100%; height: clamp(180px, 26vw, 220px); object-fit:cover; border-radius:14px }
.blog-content h3{ margin:6px 0 8px; font-size: clamp(18px, 2.2vw, 22px); font-weight:800 }
.blog-content p{ margin:0 0 14px; color:#6b7280 }
.blog-content .pill-btn { display:inline-block; margin-left:auto }
.blog-tag{ display:inline-block; background:#f3f4f6; border:1px solid #eceef3; border-radius:999px; padding:5px 10px; font-size:12px; font-weight:700; color:#111; margin-bottom:6px }
.blog-meta{ display:flex; justify-content:space-between; color:#9aa0a6; font-size:13px }
@media (max-width:900px){ .blog-card{ grid-template-columns:1fr } }
@media (max-width:420px){ .blog-content h3{ font-size:18px } .blog-meta{ flex-direction:column; gap:6px } }

/* =====================
   FOOTER
   ===================== */
.site-footer{
  background:#fff; border-top:1px solid #e6e8ee; border-radius:36px 36px 0 0; box-shadow:0 -4px 20px rgba(0,0,0,.05);
  padding:70px 0 40px; margin-top:60px; min-height:340px
}
.site-footer .container{ width:min(1100px, 92vw); margin:0 auto }
.footer-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:48px; align-items:start; grid-auto-rows:min-content }
.footer-brand{ display:block; text-align:left }
.footer-brand .row{ display:grid; grid-template-columns:72px 1fr; align-items:center; column-gap:12px; row-gap:6px; margin:0 0 8px; margin-left:-14px }
.footer-brand img.brand-logo{ width:72px; height:72px; object-fit:contain; border-radius:10px; display:block }
.footer-brand h3{ margin:0; font-weight:800; font-size:22px; line-height:1.1 }
.footer-brand > p{ margin:8px 0 18px; max-width:360px; line-height:1.6; color:#6b7280 }
.footer-social{ display:flex; gap:10px; flex-wrap:wrap }
.footer-social a{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:#f3f4f6; color:#111; font-size:16px; transition:all .2s; line-height:1 }
.footer-social a i{ line-height:0 }
.footer-social a:hover{ background:linear-gradient(180deg,#ff944b 0%, #ff7f3a 55%, #ff6a1a 100%); color:#fff }
.footer-links{ align-self:start; min-width:200px }
.footer-links h4{ margin:0 0 12px !important; font-weight:700; font-size:16px; line-height:1.2 }
.footer-links ul{ list-style:none; padding:0; margin:0 }
.footer-links li{ margin:8px 0 }
.footer-links a{ text-decoration:none; color:#4b5563; font-weight:500; transition:color .2s }
.footer-links a:hover{ color:#ff7a45 }
.footer-bottom{ border-top:1px solid #e6e8ee; text-align:center; margin-top:50px; padding-top:20px; color:#9aa0a6; font-size:14px }
.footer-hero{ display:none !important }
@media (max-width:1100px){ .footer-grid{ grid-template-columns: 1fr 1fr; gap:32px } .footer-links{ min-width:0 } }
@media (max-width:640px){ .footer-grid{ grid-template-columns:1fr; text-align:center } .footer-brand{ text-align:center } .footer-brand .row{ grid-template-columns:1fr; margin-left:0 } .footer-brand img.brand-logo{ margin:0 auto 8px } .footer-social{ justify-content:center } }

/* Footer paragraph centering on small screens */
@media (max-width: 640px){
  .footer-grid{
    grid-template-columns: 1fr;        /* already there, but safe */
    text-align: center;
  }
  .footer-brand{
    grid-template-columns: 1fr;        /* stack */
  }
  .footer-brand > p{
    grid-column: auto;                  /* no side column */
    max-width: 38ch;                    /* comfortable line length */
    margin: 8px auto 18px;              /* <-- center the block */
    text-align: center;                 /* center the text too */
  }
}



/* =====================
   AMBIENT BG + CUSTOM CURSOR
   ===================== */
.bgfx{ position:fixed; inset:0; z-index:-1; pointer-events:none; background-color:#f7f8fb }
.bg-grid{ position:absolute; inset:-200px; opacity:.08; background-image: linear-gradient(to right, #0f172a 1px, transparent 1px), linear-gradient(to bottom, #0f172a 1px, transparent 1px); background-size: 60px 60px, 60px 60px; mask-image: radial-gradient(60% 60% at 50% 40%, #000 55%, transparent 100%) }
@media (max-width: 640px){ .bg-grid{ opacity:.06; background-size: 48px 48px, 48px 48px } }
#cursor-dot, #cursor-ring{ position:fixed; top:0; left:0; pointer-events:none; z-index:60; opacity:0 }
#cursor-dot{ width:6px; height:6px; border-radius:50%; background:#111827; transform:translate(-50%,-50%) }
#cursor-ring{ width:32px; height:32px; border-radius:50%; border:2px solid rgba(17,24,39,.55); backdrop-filter: blur(2px); transform:translate(-50%,-50%); transition: width .15s ease, height .15s ease, border-color .15s ease, opacity .15s ease }
.spark{ position:fixed; width:6px; height:6px; border-radius:50%; background: radial-gradient(circle at 40% 40%, #ff9d64, #ff6a1a); pointer-events:none; z-index:59; opacity:.9; transform:translate(-50%,-50%) scale(1); will-change: transform, opacity }
@media (pointer: coarse){ #cursor-dot, #cursor-ring{ display:none } }
@media (prefers-reduced-motion: reduce){ #cursor-dot, #cursor-ring{ display:none } }