/* ============ Slik Crete - Floor Refinishing Landing ============ */
:root{
  --bg-0:#0a0a12;
  --bg-1:#11111c;
  --bg-2:#1a1a28;
  --ink:#f4ecd8;
  --ink-dim:#b9b0a0;
  --ink-mute:#878175;
  --accent:#d4a574;
  --accent-2:#e8c087;
  --accent-3:#a77d4f;
  --copper:#b8864f;
  --teal:#6dd4c1;
  --glass:rgba(255,255,255,0.06);
  --glass-2:rgba(255,255,255,0.09);
  --stroke:rgba(212,165,116,0.18);
  --stroke-2:rgba(255,255,255,0.08);
  --glow:0 0 40px rgba(212,165,116,0.25);
  --radius:18px;
  --radius-sm:12px;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow:0 20px 60px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg-0);
  color:var(--ink);
  line-height:1.65;
  overflow-x:hidden;
  min-height:100vh;
  position:relative;
  font-size:16px;
}

a{color:var(--accent-2);text-decoration:none;transition:color .3s var(--ease)}
a:hover{color:var(--accent)}
img,svg{max-width:100%;display:block}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* Background */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(212,165,116,0.08), transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(109,212,193,0.05), transparent 50%),
    linear-gradient(180deg,#0a0a12 0%,#10101c 100%);
  z-index:-3;
  pointer-events:none;
}

#bgCanvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:-2;
  pointer-events:none;
  opacity:.6;
}

.bg-blobs{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  opacity:.35;
  animation:blobMorph 20s ease-in-out infinite;
}
.blob-1{width:500px;height:500px;background:radial-gradient(circle,#d4a574,transparent 70%);top:-100px;left:-100px}
.blob-2{width:600px;height:600px;background:radial-gradient(circle,#6dd4c1,transparent 70%);bottom:-200px;right:-200px;animation-delay:-7s}
.blob-3{width:400px;height:400px;background:radial-gradient(circle,#a77d4f,transparent 70%);top:40%;left:50%;animation-delay:-13s}

@keyframes blobMorph{
  0%,100%{transform:translate(0,0) scale(1);border-radius:50%}
  33%{transform:translate(80px,-40px) scale(1.1);border-radius:40% 60% 70% 30%}
  66%{transform:translate(-40px,60px) scale(.9);border-radius:60% 40% 30% 70%}
}

/* Progress */
.progress-bar{
  position:fixed;
  top:0;left:0;
  height:3px;
  width:0;
  background:linear-gradient(90deg,var(--accent-3),var(--accent-2),var(--teal));
  z-index:1000;
  box-shadow:0 0 12px var(--accent);
  transition:width .1s linear;
}

/* NAV */
.nav-wrap{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  background:rgba(10,10,18,0.72);
  border-bottom:1px solid var(--stroke-2);
  transition:all .4s var(--ease);
}
.nav-wrap.scrolled{background:rgba(10,10,18,0.92);box-shadow:0 10px 40px rgba(0,0,0,.5)}
.nav{
  max-width:1280px;
  margin:0 auto;
  padding:1rem 1.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.brand{display:flex;align-items:center;gap:.75rem;color:var(--ink);font-weight:800}
.brand-logo{
  width:46px;height:46px;
  display:inline-block;
  filter:drop-shadow(0 0 15px rgba(212,165,116,0.35));
  animation:logoFloat 5s ease-in-out infinite;
  position:relative;
}
.brand-logo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);
  border-radius:14px;
  animation:logoSweep 4s ease-in-out infinite;
}
@keyframes logoFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(1deg)}}
@keyframes logoSweep{0%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.brand-name{font-size:1.15rem;letter-spacing:.02em}
.nav-links{display:flex;gap:1.8rem;align-items:center;list-style:none}
.nav-links a{
  color:var(--ink-dim);
  font-weight:500;
  font-size:.95rem;
  position:relative;
  padding:.4rem 0;
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:0;height:2px;
  background:linear-gradient(90deg,var(--accent),var(--teal));
  transition:width .35s var(--ease);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{width:100%}
.cta-nav{
  background:linear-gradient(135deg,var(--accent-3),var(--accent));
  color:#1a130a!important;
  padding:.65rem 1.2rem!important;
  border-radius:30px;
  font-weight:700!important;
  box-shadow:0 4px 18px rgba(212,165,116,.35);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cta-nav:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(212,165,116,.55)}
.cta-nav::after{display:none}

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  width:36px;height:36px;
  align-items:center;justify-content:center;
}
.nav-toggle span{
  display:block;
  width:22px;height:2px;
  background:var(--ink);
  border-radius:2px;
  transition:all .3s var(--ease);
}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* HERO */
.hero{
  min-height:100vh;
  padding:8rem 1.5rem 4rem;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  perspective:1200px;
}
.hero-grid{
  max-width:1280px;
  width:100%;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:3rem;
  align-items:center;
}
.hero-text .tagline{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.45rem 1rem;
  border:1px solid var(--stroke);
  border-radius:30px;
  font-size:.82rem;
  letter-spacing:.05em;
  color:var(--accent-2);
  background:var(--glass);
  backdrop-filter:blur(10px);
  margin-bottom:1.5rem;
}
.tagline .dot{
  width:8px;height:8px;
  background:var(--teal);
  border-radius:50%;
  box-shadow:0 0 12px var(--teal);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{50%{opacity:.4;transform:scale(.8)}}

.hero h1{
  font-size:clamp(2.1rem,5vw,3.8rem);
  line-height:1.08;
  letter-spacing:-.02em;
  font-weight:800;
  margin-bottom:1.5rem;
  background:linear-gradient(135deg,#fff 30%,var(--accent-2) 70%,var(--teal));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 60px rgba(212,165,116,.1);
}
.lede{
  font-size:1.1rem;
  color:var(--ink-dim);
  max-width:600px;
  margin-bottom:2rem;
}
.hero-ctas{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2.5rem}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.95rem 1.8rem;
  border-radius:30px;
  font-weight:600;
  font-size:.98rem;
  letter-spacing:.01em;
  transition:all .3s var(--ease);
  cursor:pointer;
  border:1px solid transparent;
}
.btn-primary{
  background:linear-gradient(135deg,var(--accent-3),var(--accent-2));
  color:#1a130a;
  box-shadow:0 10px 30px rgba(212,165,116,.35), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 15px 40px rgba(212,165,116,.55);color:#1a130a}
.btn-ghost{
  background:var(--glass);
  border:1px solid var(--stroke);
  color:var(--ink);
  backdrop-filter:blur(10px);
}
.btn-ghost:hover{background:var(--glass-2);border-color:var(--accent-2);transform:translateY(-3px)}

.hero-meta{
  display:flex;
  gap:2rem;
  flex-wrap:wrap;
  padding-top:1.5rem;
  border-top:1px solid var(--stroke-2);
}
.meta-item{display:flex;flex-direction:column}
.mi-num{
  font-size:2rem;
  font-weight:800;
  color:var(--accent-2);
  letter-spacing:-.02em;
  line-height:1;
}
.mi-label{
  font-size:.78rem;
  color:var(--ink-mute);
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-top:.4rem;
}

/* Hero Visual - Floor scene */
.hero-visual{
  position:relative;
  aspect-ratio:1/1;
  max-width:520px;
  margin-left:auto;
  perspective:1000px;
}
.floor-scene{
  position:relative;
  width:100%;height:100%;
  transform-style:preserve-3d;
  animation:sceneFloat 8s ease-in-out infinite;
}
@keyframes sceneFloat{
  0%,100%{transform:rotateX(18deg) rotateY(-12deg) translateY(0)}
  50%{transform:rotateX(18deg) rotateY(-12deg) translateY(-15px)}
}
.floor-base{
  position:absolute;
  inset:15% 10%;
  background:linear-gradient(135deg,#3a2a1a 0%,#2a1d12 100%);
  border-radius:8px;
  box-shadow:
    0 40px 80px rgba(0,0,0,.6),
    0 0 60px rgba(212,165,116,.2),
    inset 0 2px 20px rgba(0,0,0,.5);
  transform:translateZ(-20px);
  overflow:hidden;
}
.floor-base::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 18%, rgba(0,0,0,.4) 18%, rgba(0,0,0,.4) 18.5%),
    repeating-linear-gradient(90deg, transparent 0, transparent 24%, rgba(0,0,0,.3) 24%, rgba(0,0,0,.3) 24.4%);
}
.tile{
  position:absolute;
  width:30%;height:22%;
  border-radius:6px;
  background:linear-gradient(135deg,#5c4530,#3a2a1a);
  box-shadow:0 8px 20px rgba(0,0,0,.4), inset 0 1px 2px rgba(255,255,255,.15);
  animation:tileFloat 6s ease-in-out infinite;
  transform-style:preserve-3d;
}
.tile::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:4px;
  background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 50%);
}
.t1{top:10%;left:8%;transform:translateZ(30px) rotate(-4deg);animation-delay:0s}
.t2{top:22%;left:58%;transform:translateZ(50px) rotate(6deg);animation-delay:-1.5s}
.t3{top:60%;left:25%;transform:translateZ(40px) rotate(-2deg);animation-delay:-3s}

.plank{
  position:absolute;
  height:10%;
  width:50%;
  background:linear-gradient(90deg,#6b4a2c,#8a5f3a,#6b4a2c);
  border-radius:3px;
  box-shadow:0 6px 16px rgba(0,0,0,.4), inset 0 1px 2px rgba(255,255,255,.2);
  animation:plankFloat 7s ease-in-out infinite;
  transform-style:preserve-3d;
}
.plank::before{
  content:"";
  position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent,transparent 10px,rgba(0,0,0,.15) 10px,rgba(0,0,0,.15) 11px);
  border-radius:3px;
}
.p1{top:35%;left:5%;transform:translateZ(25px) rotate(-3deg);animation-delay:-.5s}
.p2{top:48%;left:42%;transform:translateZ(45px) rotate(3deg);animation-delay:-2s}
.p3{top:62%;left:60%;transform:translateZ(35px) rotate(-1deg);animation-delay:-3.5s}
.p4{top:78%;left:15%;transform:translateZ(55px) rotate(4deg);animation-delay:-5s}

@keyframes tileFloat{
  0%,100%{transform:translateZ(30px) rotate(-4deg) translateY(0)}
  50%{transform:translateZ(38px) rotate(-3deg) translateY(-8px)}
}
@keyframes plankFloat{
  0%,100%{transform:translateZ(30px) rotate(0) translateY(0)}
  50%{transform:translateZ(50px) rotate(2deg) translateY(-10px)}
}

.shimmer{
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.15) 50%,transparent 60%);
  animation:shimmerMove 4s ease-in-out infinite;
  mix-blend-mode:screen;
  pointer-events:none;
}
@keyframes shimmerMove{
  0%{transform:translateX(-100%) rotate(15deg)}
  100%{transform:translateX(100%) rotate(15deg)}
}

.measure-line{
  position:absolute;
  bottom:12%;left:12%;right:12%;
  height:2px;
  background:linear-gradient(90deg,var(--teal),var(--accent-2));
  box-shadow:0 0 12px var(--teal);
  opacity:.7;
  animation:measurePulse 3s ease-in-out infinite;
}
.measure-line::before,.measure-line::after{
  content:"";
  position:absolute;
  top:-6px;width:2px;height:14px;
  background:var(--teal);
  box-shadow:0 0 8px var(--teal);
}
.measure-line::before{left:0}
.measure-line::after{right:0}
@keyframes measurePulse{0%,100%{opacity:.4}50%{opacity:.9}}

.tool.sander{
  position:absolute;
  top:45%;right:8%;
  width:60px;height:40px;
  background:linear-gradient(135deg,#c24b2a,#7a2a15);
  border-radius:8px;
  box-shadow:0 8px 20px rgba(0,0,0,.5), inset 0 1px 2px rgba(255,255,255,.3);
  transform:translateZ(70px) rotate(-10deg);
  animation:sanderMove 5s ease-in-out infinite;
}
.tool.sander::before{
  content:"";
  position:absolute;
  top:-14px;left:50%;
  width:14px;height:18px;
  background:#2a2a2a;
  border-radius:4px 4px 2px 2px;
  transform:translateX(-50%);
}
@keyframes sanderMove{
  0%,100%{transform:translateZ(70px) rotate(-10deg) translateX(0)}
  50%{transform:translateZ(75px) rotate(-8deg) translateX(-20px)}
}

.sparkles{position:absolute;inset:0;pointer-events:none}
.sparkles::before,.sparkles::after{
  content:"";
  position:absolute;
  width:4px;height:4px;
  background:#fff;
  border-radius:50%;
  box-shadow:
    40px 60px 0 rgba(232,192,135,.8),
    120px 30px 0 rgba(109,212,193,.8),
    180px 90px 0 rgba(255,255,255,.6),
    240px 150px 0 rgba(232,192,135,.7),
    80px 200px 0 rgba(255,255,255,.5),
    300px 80px 0 rgba(109,212,193,.6);
  animation:sparkleTwinkle 2.5s ease-in-out infinite;
}
.sparkles::after{animation-delay:-1.2s;transform:translate(50px,30px)}
@keyframes sparkleTwinkle{0%,100%{opacity:.2}50%{opacity:1}}

.hero-scroll{
  position:absolute;
  bottom:2rem;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  color:var(--ink-mute);
  font-size:.75rem;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.scroll-bar{
  display:block;
  width:1px;height:40px;
  background:linear-gradient(180deg,var(--accent),transparent);
  animation:scrollBar 2s ease-in-out infinite;
}
@keyframes scrollBar{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ARTICLE */
.article-wrap{
  max-width:880px;
  margin:0 auto;
  padding:4rem 1.5rem;
  position:relative;
  z-index:1;
}
.article{
  padding:3rem;
  background:var(--glass);
  border:1px solid var(--stroke-2);
  border-radius:var(--radius);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:var(--shadow);
}
.article-meta{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:2rem;
  flex-wrap:wrap;
}
.pill{
  display:inline-block;
  padding:.35rem .9rem;
  border-radius:20px;
  background:linear-gradient(135deg,var(--accent-3),var(--accent));
  color:#1a130a;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.05em;
}
.date{color:var(--ink-mute);font-size:.85rem}

.article h2{
  font-size:clamp(1.6rem,3.5vw,2.3rem);
  font-weight:800;
  margin:2.5rem 0 1rem;
  letter-spacing:-.02em;
  line-height:1.2;
  background:linear-gradient(135deg,#fff,var(--accent-2));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.article h2:first-of-type{margin-top:0}
.article h3{
  font-size:1.35rem;
  font-weight:700;
  margin:2rem 0 .8rem;
  color:var(--accent-2);
  position:relative;
  padding-left:1.2rem;
}
.article h3::before{
  content:"";
  position:absolute;
  left:0;top:50%;
  width:4px;height:70%;
  background:linear-gradient(180deg,var(--accent),var(--teal));
  border-radius:2px;
  transform:translateY(-50%);
}
.article p{
  color:var(--ink-dim);
  margin-bottom:1.15rem;
  font-size:1.02rem;
}
.article p a{
  color:var(--accent-2);
  border-bottom:1px solid rgba(232,192,135,.3);
  font-weight:500;
  transition:all .3s var(--ease);
}
.article p a:hover{
  color:var(--teal);
  border-color:var(--teal);
}

/* Process grid */
.process-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;
  margin:1.5rem 0 2rem;
}
.process-step{
  padding:1.5rem 1.25rem;
  background:var(--glass);
  border:1px solid var(--stroke-2);
  border-radius:var(--radius-sm);
  position:relative;
  transition:all .4s var(--ease);
  overflow:hidden;
}
.process-step::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,var(--accent),var(--teal));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s var(--ease);
}
.process-step:hover{
  transform:translateY(-5px);
  border-color:var(--stroke);
  background:var(--glass-2);
}
.process-step:hover::before{transform:scaleX(1)}
.step-num{
  font-size:1.8rem;
  font-weight:800;
  color:var(--accent);
  opacity:.8;
  letter-spacing:-.02em;
  margin-bottom:.5rem;
}
.process-step h4{
  font-size:1.05rem;
  font-weight:700;
  margin-bottom:.5rem;
  color:var(--ink);
}
.process-step p{
  font-size:.92rem;
  color:var(--ink-mute);
  margin:0;
}

.glass-card-sm{
  background:var(--glass);
  border:1px solid var(--stroke-2);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

/* Check list */
.check-list{
  list-style:none;
  margin:1rem 0 1.5rem;
  display:grid;
  gap:.75rem;
}
.check-list li{
  position:relative;
  padding-left:2rem;
  color:var(--ink-dim);
}
.check-list li::before{
  content:"";
  position:absolute;
  left:0;top:.35rem;
  width:18px;height:18px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--teal));
  box-shadow:0 0 12px rgba(212,165,116,.4);
}
.check-list li::after{
  content:"";
  position:absolute;
  left:5px;top:9px;
  width:8px;height:4px;
  border-left:2px solid #1a130a;
  border-bottom:2px solid #1a130a;
  transform:rotate(-45deg);
}

/* Materials */
.materials-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1rem;
  margin:1.5rem 0;
}
.material{
  padding:1.5rem;
  border-radius:var(--radius-sm);
  transition:all .4s var(--ease);
}
.material:hover{transform:translateY(-4px) scale(1.02);border-color:var(--stroke);background:var(--glass-2)}
.material h4{font-size:1.1rem;margin-bottom:.5rem;color:var(--accent-2)}
.material p{font-size:.92rem;color:var(--ink-mute);margin:0}

/* FAQ */
.faq-list{margin:1.5rem 0;display:flex;flex-direction:column;gap:.8rem}
.faq-item{
  background:var(--glass);
  border:1px solid var(--stroke-2);
  border-radius:var(--radius-sm);
  overflow:hidden;
  transition:all .3s var(--ease);
}
.faq-item[open]{background:var(--glass-2);border-color:var(--stroke)}
.faq-item summary{
  padding:1.1rem 1.3rem;
  font-weight:600;
  font-size:1.02rem;
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  color:var(--ink);
  transition:color .3s var(--ease);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";
  flex-shrink:0;
  width:14px;height:14px;
  border-right:2px solid var(--accent-2);
  border-bottom:2px solid var(--accent-2);
  transform:rotate(45deg);
  transition:transform .3s var(--ease);
  margin-top:-6px;
}
.faq-item[open] summary::after{transform:rotate(-135deg);margin-top:2px}
.faq-item p{
  padding:0 1.3rem 1.2rem;
  color:var(--ink-dim);
  margin:0;
  font-size:.96rem;
}
.faq-item summary:hover{color:var(--accent-2)}

/* CTA SECTION */
.cta-section{
  max-width:1280px;
  margin:4rem auto;
  padding:0 1.5rem;
}
.cta-inner{
  padding:3.5rem 3rem;
  background:
    radial-gradient(ellipse at top right, rgba(212,165,116,.15), transparent 60%),
    var(--glass-2);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  display:grid;
  grid-template-columns:1fr auto;
  gap:2rem;
  align-items:center;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.cta-inner::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,transparent 40%,rgba(109,212,193,.05) 70%,transparent);
  pointer-events:none;
}
.cta-text h2{
  font-size:clamp(1.6rem,3vw,2.4rem);
  margin-bottom:1rem;
  font-weight:800;
  background:linear-gradient(135deg,#fff,var(--accent-2));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.cta-text p{color:var(--ink-dim);margin-bottom:1.5rem;max-width:600px}
.cta-actions{display:flex;flex-wrap:wrap;gap:1rem}
.cta-visual{position:relative;width:200px;height:200px}
.cta-orb{
  width:100%;height:100%;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%,var(--accent-2),var(--accent-3) 40%,#5a3a1a 80%);
  box-shadow:
    0 0 80px rgba(212,165,116,.5),
    inset -20px -20px 60px rgba(0,0,0,.5),
    inset 20px 20px 60px rgba(255,255,255,.1);
  animation:orbSpin 12s linear infinite;
  position:relative;
}
.cta-orb::before{
  content:"";
  position:absolute;
  inset:10%;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.4),transparent 40%);
}
.cta-orb::after{
  content:"";
  position:absolute;
  inset:-20px;
  border-radius:50%;
  border:1px dashed rgba(212,165,116,.3);
  animation:orbSpin 20s linear infinite reverse;
}
@keyframes orbSpin{to{transform:rotate(360deg)}}

/* FOOTER */
.site-footer{
  border-top:1px solid var(--stroke-2);
  padding:3.5rem 1.5rem 1.5rem;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.4));
  position:relative;
  z-index:2;
}
.footer-grid{
  max-width:1280px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:2.5rem;
  margin-bottom:2rem;
}
.foot-col h4{
  font-size:.85rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--accent-2);
  margin-bottom:1rem;
  font-weight:700;
}
.footer-brand{margin-bottom:1rem}
.foot-about{color:var(--ink-mute);font-size:.95rem}
.foot-list{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.foot-list li,.foot-list a{color:var(--ink-dim);font-size:.95rem}
.foot-list a:hover{color:var(--accent-2)}

.socials{display:flex;gap:.7rem}
.social{
  width:40px;height:40px;
  border-radius:50%;
  background:var(--glass);
  border:1px solid var(--stroke-2);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink-dim);
  transition:all .3s var(--ease);
}
.social svg{width:18px;height:18px}
.social:hover{
  background:linear-gradient(135deg,var(--accent-3),var(--accent));
  color:#1a130a;
  transform:translateY(-3px);
  border-color:transparent;
  box-shadow:0 6px 16px rgba(212,165,116,.4);
}

.footer-bottom{
  max-width:1280px;
  margin:0 auto;
  padding-top:1.5rem;
  border-top:1px solid var(--stroke-2);
  text-align:center;
  color:var(--ink-mute);
  font-size:.85rem;
}

/* Back to top */
.to-top{
  position:fixed;
  bottom:1.5rem;
  right:1.5rem;
  width:48px;height:48px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--accent-3),var(--accent));
  color:#1a130a;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 30px rgba(212,165,116,.35);
  opacity:0;
  pointer-events:none;
  transform:translateY(20px);
  transition:all .4s var(--ease);
  z-index:50;
}
.to-top.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.to-top:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 14px 40px rgba(212,165,116,.55)}
.to-top svg{width:20px;height:20px}

/* Reveal */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* Focus */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent-2);
  outline-offset:3px;
  border-radius:4px;
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.1s!important}
  .blob,.logoFloat,.sceneFloat,.tileFloat,.plankFloat,.sanderMove,.sparkleTwinkle,.orbSpin,.shimmerMove,.measurePulse,.scrollBar{animation:none!important}
}

/* MOBILE */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:2rem}
  .hero-visual{max-width:360px;margin:0 auto}
  .nav-toggle{display:flex}
  .nav-links{
    position:absolute;
    top:100%;left:0;right:0;
    flex-direction:column;
    background:rgba(10,10,18,.98);
    backdrop-filter:blur(20px);
    padding:1.5rem;
    gap:1rem;
    border-bottom:1px solid var(--stroke-2);
    transform:translateY(-10px);
    opacity:0;
    pointer-events:none;
    transition:all .3s var(--ease);
  }
  .nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto}
  .cta-inner{grid-template-columns:1fr;padding:2rem}
  .cta-visual{display:none}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .article{padding:2rem 1.5rem}
  .hero{padding:7rem 1.25rem 3rem}
  .hero-meta{gap:1.25rem}
  .mi-num{font-size:1.6rem}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr}
  .hero-ctas{flex-direction:column;align-items:stretch}
  .btn{width:100%}
  .cta-actions{flex-direction:column;align-items:stretch}
}