/* ============ SLIK CRETE — Premium Wood-Glow Design System ============ */
:root{
  /* Wood spectrum (16) */
  --w01:#0a0603;--w02:#120b06;--w03:#1b1109;--w04:#24170c;--w05:#2f1d10;--w06:#3d2715;
  --w07:#4d321b;--w08:#5f3f22;--w09:#74502b;--w10:#8a6134;--w11:#a3763f;--w12:#bd8c4c;
  --w13:#d5a45c;--w14:#e9bd72;--w15:#f7d48e;--w16:#ffe9c2;
  /* Accents (9) */
  --a01:#ffb347;--a02:#ff9026;--a03:#ff6b35;--a04:#ffd166;--a05:#67e8f9;--a06:#22d3ee;
  --a07:#0e7490;--a08:#8ea3b8;--a09:#e8f6f9;
  /* Semantic (10) */
  --ink:#fff8ee;--ink-dim:rgba(255,248,238,.74);--ink-faint:rgba(255,248,238,.55);
  --glass:rgba(255,255,255,.055);--glass-2:rgba(255,255,255,.09);
  --line:rgba(255,209,102,.16);--line-2:rgba(255,209,102,.34);
  --glow:rgba(255,179,71,.4);--glow-cy:rgba(103,232,249,.32);
  --grad-brand:linear-gradient(135deg,var(--a04),var(--a02) 55%,var(--a03));
  --grad-cool:linear-gradient(135deg,var(--a05),var(--a07));
  --sh-1:0 18px 50px rgba(0,0,0,.5);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--w02);color:var(--ink);line-height:1.7;overflow-x:clip;
  background-image:
    radial-gradient(900px 500px at 8% -5%,rgba(255,144,38,.14),transparent 60%),
    radial-gradient(800px 520px at 96% 12%,rgba(103,232,249,.08),transparent 60%),
    radial-gradient(1000px 700px at 50% 110%,rgba(255,107,53,.10),transparent 65%);
  background-attachment:fixed;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
h1,h2,h3{line-height:1.2;font-weight:800;letter-spacing:-.02em}
.wrap{width:min(1160px,92%);margin-inline:auto}
.glass{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:20px}
.grad-text{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.skip{position:fixed;left:-999px;top:8px;z-index:200;background:var(--a04);color:#241708;padding:10px 16px;border-radius:10px;font-weight:700}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--a05);outline-offset:3px;border-radius:6px}

/* ---- Reveal: hidden ONLY when JS is active (progressive enhancement) ---- */
.reveal{transition:opacity .8s ease,transform .8s ease}
.js .reveal{opacity:0;transform:translateY(34px)}
.js .reveal.in{opacity:1;transform:none}

/* ---- Background layer ---- */
.bg-layer{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:morph 18s ease-in-out infinite}
.o1{width:46vw;height:46vw;min-width:340px;min-height:340px;left:-12%;top:-14%;background:radial-gradient(circle at 35% 35%,var(--a02),transparent 65%)}
.o2{width:38vw;height:38vw;min-width:280px;min-height:280px;right:-10%;top:22%;background:radial-gradient(circle at 60% 40%,var(--a07),transparent 65%);animation-delay:-6s}
.o3{width:34vw;height:34vw;min-width:260px;min-height:260px;left:26%;bottom:-18%;background:radial-gradient(circle at 50% 50%,var(--a03),transparent 62%);animation-delay:-12s}
@keyframes morph{0%,100%{border-radius:50% 42% 55% 45%/48% 55% 45% 52%;transform:translate3d(0,0,0) scale(1)}33%{border-radius:44% 56% 48% 52%/55% 45% 58% 42%;transform:translate3d(3%,4%,0) scale(1.08)}66%{border-radius:56% 44% 52% 48%/42% 58% 44% 56%;transform:translate3d(-3%,-3%,0) scale(.95)}}
.grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(255,209,102,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,209,102,.05) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 75%)}
.trail{position:absolute;height:2px;width:44vw;background:linear-gradient(90deg,transparent,var(--a04),var(--a05),transparent);filter:blur(1px);opacity:.5;animation:trail 9s linear infinite}
.t1{top:24%;left:-50vw;transform:rotate(-8deg)}
.t2{top:66%;left:-60vw;transform:rotate(6deg);animation-delay:-4.5s;animation-duration:11s;animation-name:trail2}
@keyframes trail{to{transform:translateX(160vw) rotate(-8deg)}}
@keyframes trail2{to{transform:translateX(170vw) rotate(6deg)}}

/* ---- Progress + header (always visible) ---- */
#progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:120;background:var(--grad-brand);box-shadow:0 0 12px var(--glow)}
#header{position:fixed;inset-inline:0;top:0;z-index:100;background:rgba(18,11,6,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .35s,box-shadow .35s}
#header.scrolled{background:rgba(18,11,6,.85);box-shadow:0 10px 40px rgba(0,0,0,.45);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:46px;height:46px;position:relative;border-radius:14px;overflow:hidden;box-shadow:0 8px 24px var(--glow);animation:floaty 6s ease-in-out infinite}
.brand-mark svg{width:100%;height:100%}
.brand-mark::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);animation:sheen 4.5s ease-in-out infinite}
@keyframes sheen{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.brand-text{font-size:1.25rem;font-weight:800;letter-spacing:.02em;line-height:1.1}
.brand-text em{font-style:normal;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-text small{display:block;font-size:.66rem;font-weight:600;color:var(--ink-faint);letter-spacing:.14em;text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a:not(.btn){font-size:.94rem;font-weight:600;color:var(--ink-dim);position:relative;transition:color .25s}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--grad-brand);transition:width .3s;border-radius:2px}
.nav-links a:not(.btn):hover{color:var(--ink)}
.nav-links a:not(.btn):hover::after{width:100%}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{width:24px;height:2px;background:var(--a04);border-radius:2px;transition:.3s}

/* ---- Buttons / chips ---- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;font-weight:700;font-size:.98rem;transition:transform .25s,box-shadow .25s,background .25s;position:relative;overflow:hidden}
.btn-primary{background:var(--grad-brand);color:#241708;box-shadow:0 10px 30px var(--glow)}
.btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 40px var(--glow)}
.btn-ghost{border:1px solid var(--line-2);color:var(--ink);background:var(--glass);backdrop-filter:blur(10px)}
.btn-ghost:hover{transform:translateY(-3px);background:var(--glass-2);box-shadow:0 12px 30px rgba(0,0,0,.4)}
.btn-small{padding:9px 18px;font-size:.86rem}
.chip{padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--glass);font-size:.8rem;font-weight:600;color:var(--ink-dim);backdrop-filter:blur(8px)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

/* ---- Hero ---- */
.hero{padding:150px 0 70px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:999px;border:1px solid var(--line-2);background:var(--glass);font-size:.82rem;font-weight:700;letter-spacing:.06em;color:var(--w15);backdrop-filter:blur(10px)}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--a05);box-shadow:0 0 10px var(--glow-cy);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.35}}
h1{font-size:clamp(2.1rem,4.6vw,3.5rem);margin:20px 0 18px}
.lead{font-size:1.08rem;color:var(--ink-dim);max-width:34rem}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.hero-visual{perspective:1200px}
.stage{position:relative;height:380px;transform-style:preserve-3d;transform:rotateX(8deg);transition:transform .4s ease-out}
.floor{position:absolute;inset:6% 0 0;border-radius:18px;transform:rotateX(52deg) rotateZ(-6deg) scale(1.05);box-shadow:var(--sh-1)}
.floor-old{
  background:
    repeating-linear-gradient(100deg,transparent 0 46px,rgba(255,255,255,.05) 46px 47px,transparent 47px 92px),
    repeating-linear-gradient(90deg,transparent 0 118px,rgba(0,0,0,.4) 118px 120px),
    repeating-linear-gradient(0deg,#6b6259 0 26px,#7a7168 26px 52px,#5d554d 52px 78px);
  filter:grayscale(.55) brightness(.72);
}
.floor-new{
  background:
    radial-gradient(120px 60px at 20% 30%,rgba(255,255,255,.22),transparent 70%),
    radial-gradient(90px 44px at 70% 62%,rgba(255,255,255,.18),transparent 70%),
    repeating-linear-gradient(90deg,transparent 0 118px,rgba(46,22,8,.55) 118px 120px),
    repeating-linear-gradient(0deg,var(--w09) 0 26px,var(--w11) 26px 52px,var(--w08) 52px 78px);
  clip-path:inset(0 100% 0 0);animation:reveal 9s cubic-bezier(.65,0,.35,1) infinite;
}
.floor-new::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.32) 50%,transparent 58%);transform:translateX(-100%);animation:sheen 4.5s ease-in-out infinite}
@keyframes reveal{0%{clip-path:inset(0 100% 0 0);opacity:1}55%{clip-path:inset(0 0 0 0)}92%{clip-path:inset(0 0 0 0);opacity:1}100%{clip-path:inset(0 0 0 0);opacity:0}}
.beam{position:absolute;top:2%;bottom:8%;width:4px;left:0;border-radius:4px;background:linear-gradient(180deg,var(--a05),var(--a04),var(--a03));box-shadow:0 0 22px 6px var(--glow),0 0 40px 10px var(--glow-cy);animation:beam 9s cubic-bezier(.65,0,.35,1) infinite}
@keyframes beam{0%{left:2%;opacity:1}55%{left:97%}58%{opacity:0}100%{left:97%;opacity:0}}
.stage-chip{position:absolute;padding:8px 16px;border-radius:999px;background:rgba(18,11,6,.6);border:1px solid var(--line-2);backdrop-filter:blur(10px);font-size:.78rem;font-weight:700;color:var(--w15);box-shadow:0 10px 26px rgba(0,0,0,.45);animation:floaty 5s ease-in-out infinite}
.sc1{top:4%;left:6%}
.sc2{top:16%;right:4%;animation-delay:-1.6s}
.sc3{bottom:6%;left:38%;animation-delay:-3.2s}
.stage-label{position:absolute;bottom:-4%;right:2%;font-size:.78rem;color:var(--ink-faint);letter-spacing:.08em}

/* ---- Stats ---- */
.stats{padding:26px 0 8px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{padding:26px 20px;text-align:center;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s}
.stat:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(0,0,0,.45)}
.stat .num{font-size:2.5rem;font-weight:900;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 30px var(--glow)}
.stat p{font-size:.85rem;color:var(--ink-dim);margin-top:6px}

/* ---- Article ---- */
.article{padding:64px 0 30px;max-width:860px}
.article .intro{font-size:1.12rem;color:var(--ink-dim);border-left:3px solid var(--a02);padding-left:20px;margin-bottom:34px}
.article h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:44px 0 14px;position:relative}
.article h2::after{content:"";display:block;width:64px;height:3px;border-radius:3px;background:var(--grad-brand);margin-top:10px;box-shadow:0 0 12px var(--glow)}
.article h3{font-size:1.16rem;margin:26px 0 10px;color:var(--w15)}
.article p{color:var(--ink-dim);margin-bottom:14px}
.kw-link{color:var(--a04);font-weight:700;border-bottom:1px dashed var(--line-2);transition:color .25s,text-shadow .25s}
.kw-link:hover{color:var(--a05);text-shadow:0 0 14px var(--glow-cy)}

/* ---- FAQ ---- */
.faq-list{margin:26px 0 10px;display:grid;gap:14px}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;background:none;border:0;color:var(--ink);font:inherit;font-weight:700;font-size:1.02rem;padding:20px 22px;cursor:pointer;text-align:left}
.faq-icon{flex:0 0 26px;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);position:relative;transition:transform .35s,background .35s}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;inset:0;margin:auto;background:var(--a04);border-radius:2px}
.faq-icon::before{width:12px;height:2px}
.faq-icon::after{width:2px;height:12px;transition:transform .35s}
.faq-q[aria-expanded="true"] .faq-icon{transform:rotate(180deg);background:var(--glass-2)}
.faq-q[aria-expanded="true"] .faq-icon::after{transform:scaleY(0)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s ease}
.faq-a p{padding:0 22px 20px;color:var(--ink-dim)}

/* ---- Process / compare / contact cards ---- */
.process,.contact{padding:70px 0}
.sec-title{font-size:clamp(1.7rem,3.2vw,2.4rem);text-align:center}
.sec-sub{text-align:center;color:var(--ink-dim);max-width:44rem;margin:14px auto 40px}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.p-card{padding:28px 22px;position:relative;overflow:hidden;transition:transform .25s,box-shadow .3s,border-color .3s;transform-style:preserve-3d}
.p-card:hover{border-color:var(--line-2);box-shadow:0 22px 50px rgba(0,0,0,.5),0 0 30px var(--glow)}
.p-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-brand);opacity:0;transition:opacity .3s}
.p-card:hover::before{opacity:1}
.p-num{font-size:2.2rem;font-weight:900;color:transparent;-webkit-text-stroke:1px var(--line-2)}
.p-card h3{margin:10px 0 8px;font-size:1.08rem;color:var(--w15)}
.p-card p{font-size:.9rem;color:var(--ink-dim)}
.compare{padding:10px 0 60px}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.c-panel{padding:32px 28px;transition:transform .25s,box-shadow .3s}
.c-panel h3{font-size:1.3rem;margin-bottom:16px}
.c-panel li{padding:10px 0 10px 30px;position:relative;color:var(--ink-dim);border-bottom:1px dashed var(--line)}
.c-panel li:last-child{border-bottom:0}
.c-panel.good li::before{content:"✓";position:absolute;left:2px;color:var(--a04);font-weight:900;text-shadow:0 0 10px var(--glow)}
.c-panel.bad li::before{content:"✕";position:absolute;left:2px;color:var(--a08);font-weight:900}
.c-panel.good{box-shadow:inset 0 0 60px rgba(255,179,71,.06)}
.cta-band{padding:20px 0 70px}
.cta-inner{padding:52px 34px;text-align:center;position:relative;overflow:hidden}
.cta-inner::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,rgba(255,209,102,.14),transparent 40%);animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.cta-inner h2{font-size:clamp(1.5rem,3vw,2.2rem);position:relative}
.cta-inner p{color:var(--ink-dim);margin:12px 0 26px;position:relative}
.cta-inner .cta-row{justify-content:center;position:relative}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.c-card{padding:30px 24px;text-align:center;display:block;transition:transform .25s,box-shadow .3s}
.c-card:hover{transform:translateY(-6px);box-shadow:0 20px 46px rgba(0,0,0,.5),0 0 26px var(--glow)}
.c-ico{font-size:2rem;display:inline-block;filter:drop-shadow(0 0 12px var(--glow));animation:floaty 5s ease-in-out infinite}
.c-card h3{margin:12px 0 6px;font-size:1.05rem;color:var(--w15)}
.c-card p{color:var(--ink-dim);font-weight:600}
.c-card small{color:var(--ink-faint);display:block;margin-top:6px}

/* ---- Footer (always rendered) ---- */
.footer{border-top:1px solid var(--line);background:rgba(10,6,3,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:56px 0 26px;margin-top:30px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
.f-brand{display:flex;gap:14px;align-items:flex-start}
.brand-mark.small{width:40px;height:40px;animation:none}
.brand-mark.small::after{display:none}
.f-brand p{color:var(--ink-dim);font-size:.92rem}
.footer h3{font-size:.86rem;text-transform:uppercase;letter-spacing:.14em;color:var(--w15);margin-bottom:14px}
.footer ul{display:grid;gap:9px}
.footer ul a{color:var(--ink-dim);font-size:.92rem;transition:color .25s,padding-left .25s}
.footer ul a:hover{color:var(--a04);padding-left:5px}
.f-base{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:40px;padding-top:20px}
.f-base p{font-size:.84rem;color:var(--ink-faint)}
.f-tag{font-style:italic}

/* ---- Misc ---- */
#dust{position:fixed;inset:0;z-index:-1;pointer-events:none}
#toTop{position:fixed;right:22px;bottom:22px;z-index:110;width:50px;height:50px;border-radius:50%;border:1px solid var(--line-2);background:rgba(18,11,6,.7);backdrop-filter:blur(10px);color:var(--a04);font-size:1.2rem;cursor:pointer;opacity:0;transform:translateY(20px);pointer-events:none;transition:.35s;box-shadow:0 10px 26px rgba(0,0,0,.5)}
#toTop.show{opacity:1;transform:translateY(0);pointer-events:auto}
#toTop:hover{background:var(--grad-brand);color:#241708;box-shadow:0 0 26px var(--glow)}

/* ---- Responsive ---- */
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero{padding-top:130px}
  .process-grid{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .nav-toggle{display:flex}
  .nav-links{position:fixed;inset:64px 4% auto 4%;flex-direction:column;align-items:flex-start;background:rgba(18,11,6,.92);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:18px;padding:22px;gap:16px;transform:translateY(-16px);opacity:0;pointer-events:none;transition:.35s}
  .nav-links.open{transform:none;opacity:1;pointer-events:auto}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .compare-grid,.contact-grid,.footer-grid{grid-template-columns:1fr}
  .stage{height:300px}
  .trail{display:none}
}
@media(max-width:520px){
  .process-grid,.stats-grid{grid-template-columns:1fr}
  .stage{height:250px}
  .btn{padding:13px 20px;font-size:.92rem}
}
/* ---- Reduced motion ---- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.15s!important}
  .js .reveal{opacity:1;transform:none}
  .floor-new{clip-path:inset(0 0 0 0);animation:none}
  .beam{display:none}
}