:root{
  --ink:#0a0a0a;
  --paper:#f6f4f0;
  --white:#ffffff;
  --line:#e4e0d8;
  --mute:#7a7671;
  --red:#c81e2c;
  --red-deep:#8f1420;
  --shadow: 0 30px 80px -30px rgba(10,10,10,.35);
  --ease: cubic-bezier(.16,.8,.24,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',sans-serif;
  background:var(--paper);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}
h1,h2,h3,.disp{font-family:'Poppins',sans-serif; font-weight:800; letter-spacing:-.02em;}
.num{font-family:'Space Grotesk',sans-serif;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
::selection{background:var(--red); color:#fff;}

.wrap{max-width:1280px; margin:0 auto; padding:0 48px;}
@media (max-width:860px){.wrap{padding:0 22px;}}

/* progress bar */
#progress{position:fixed; top:0; left:0; height:3px; background:var(--red); z-index:9999; width:0%; transition:width .1s linear;}

/* NAV */
header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:22px 0; transition:all .4s var(--ease);
}
header.scrolled{
  background:rgba(246,244,240,.85); backdrop-filter:blur(16px);
  padding:14px 0; box-shadow:0 1px 0 var(--line);
}
nav{display:flex; align-items:center; justify-content:space-between;}
.logo{display:flex; align-items:center; gap:10px; font-family:'Poppins'; font-weight:900; font-size:20px; letter-spacing:-.01em;}
.logo .mark{width:34px; height:34px; border-radius:8px; background:var(--ink); display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; transform-style:preserve-3d; transition:transform .5s var(--ease);}
.logo:hover .mark{transform:rotateY(180deg);}
.logo .tag{font-size:9px; letter-spacing:.18em; color:var(--mute); font-family:'Inter'; font-weight:600; display:block; margin-top:-2px;}
.navlinks{display:flex; gap:38px; font-size:14px; font-weight:500;}
.navlinks a{position:relative; padding-bottom:4px;}
.navlinks a::after{content:'';position:absolute; left:0; bottom:0; width:0; height:1.5px; background:var(--red); transition:width .3s var(--ease);}
.navlinks a:hover::after{width:100%;}
.navcta{display:flex; align-items:center; gap:20px;}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; border-radius:100px; font-size:13px; font-weight:600;
  border:1px solid var(--ink); background:transparent; color:var(--ink);
  transition:transform .35s var(--ease), background .35s, color .35s, box-shadow .35s;
  position:relative; overflow:hidden;
}
.btn.solid{background:var(--ink); color:#fff;}
.btn.red{background:var(--red); color:#fff; border-color:var(--red);}
.btn:hover{transform:translateY(-3px); box-shadow:var(--shadow);}
.btn.red:hover{background:var(--red-deep);}
@media (max-width:900px){.navlinks{display:none;}}

/* HERO */
.hero{
  min-height:100vh; position:relative; display:flex; align-items:center;
  padding-top:120px; padding-bottom:80px;
  background:
    radial-gradient(1200px 700px at 78% 15%, #efe9de 0%, transparent 60%),
    linear-gradient(180deg, #f8f6f2 0%, var(--paper) 100%);
  overflow:hidden;
}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; position:relative; z-index:2;}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr;}}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--red-deep);
  background:#fff; border:1px solid var(--line); padding:8px 16px; border-radius:100px;
  margin-bottom:28px; box-shadow:0 2px 12px rgba(0,0,0,.03);
}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--red); animation:pulse 1.8s infinite;}
@keyframes pulse{0%,100%{opacity:1} 50%{opacity:.3}}
.hero h1{font-size:clamp(42px,6vw,76px); line-height:.98; margin-bottom:26px;}
.hero h1 .r{color:var(--red);}
.hero p.lead{font-size:18px; color:#4a4742; max-width:520px; line-height:1.65; margin-bottom:38px;}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:56px;}
.trust{display:flex; gap:36px; flex-wrap:wrap;}
.trust div{border-left:2px solid var(--line); padding-left:14px;}
.trust .n{font-size:26px; font-weight:700; display:block;}
.trust .l{font-size:12px; color:var(--mute); letter-spacing:.03em;}

/* 3D floating stage */
.stage{
  position:relative; height:560px; perspective:1400px;
}
.stage-inner{
  position:relative; width:100%; height:100%; transform-style:preserve-3d;
  transition:transform .15s ease-out;
}
.plat{
  position:absolute; left:50%; top:52%; width:340px; height:340px; margin:-170px 0 0 -170px;
  border-radius:50%; background:radial-gradient(circle at 40% 30%, #ffffff, #e9e4da 70%);
  box-shadow:0 60px 90px -30px rgba(10,10,10,.25), inset 0 0 0 1px rgba(255,255,255,.6);
  transform:translateZ(-40px) rotateX(62deg);
}
.tile{
  position:absolute; width:150px; height:150px; border-radius:22px;
  background:linear-gradient(150deg,#ffffff,#f1eee7);
  box-shadow:0 25px 45px -15px rgba(10,10,10,.28), inset 0 1px 0 rgba(255,255,255,.8);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  border:1px solid rgba(255,255,255,.7);
  animation:float 6s ease-in-out infinite;
}
.tile svg{width:38px; height:38px; stroke:var(--ink);}
.tile span{font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mute);}
.tile.t1{top:6%; left:8%; transform:translateZ(90px) rotate(-4deg); animation-delay:0s;}
.tile.t2{top:2%; right:2%; transform:translateZ(140px) rotate(5deg); animation-delay:1.2s; width:120px; height:120px;}
.tile.t3{bottom:18%; left:0; transform:translateZ(60px) rotate(3deg); animation-delay:.6s;}
.tile.t4{bottom:2%; right:14%; transform:translateZ(160px) rotate(-6deg); animation-delay:1.8s;}
.tile.t5{top:38%; left:38%; transform:translateZ(200px) rotate(2deg); background:linear-gradient(150deg,var(--ink),#232323); box-shadow:0 30px 55px -15px rgba(10,10,10,.5);}
.tile.t5 svg{stroke:#fff;}
.tile.t5 span{color:#cfcac0;}
@keyframes float{0%,100%{translate:0 0;} 50%{translate:0 -16px;}}
.ribbon{position:absolute; inset:0; pointer-events:none;}
@media (max-width:980px){.stage{height:380px; margin-top:20px;}}

.scrollcue{position:absolute; bottom:30px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; font-size:11px; letter-spacing:.14em; color:var(--mute); text-transform:uppercase;}
.scrollcue .line{width:1px; height:36px; background:linear-gradient(var(--mute),transparent); animation:down 1.8s infinite;}
@keyframes down{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;}}

/* MARQUEE STRIP */
.strip{background:var(--ink); color:#fff; padding:16px 0; overflow:hidden; white-space:nowrap;}
.strip-track{display:inline-flex; gap:60px; animation:marquee 26s linear infinite;}
.strip-track span{font-family:'Space Grotesk'; font-size:14px; letter-spacing:.05em; display:inline-flex; align-items:center; gap:14px;}
.strip-track span::after{content:'◆'; color:var(--red); font-size:9px;}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* SECTION SCAFFOLD */
section{padding:120px 0;}
.section-head{max-width:640px; margin-bottom:64px;}
.kicker{font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--red-deep); margin-bottom:16px; display:flex; align-items:center; gap:10px;}
.kicker::before{content:''; width:24px; height:1.5px; background:var(--red);}
.section-head h2{font-size:clamp(30px,4vw,46px); line-height:1.05;}
.section-head p{margin-top:18px; color:var(--mute); font-size:16px; line-height:1.6; max-width:520px;}

.reveal{opacity:0; transform:translateY(36px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}

/* WHY GRID */
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:20px; overflow:hidden;}
@media (max-width:900px){.why-grid{grid-template-columns:repeat(2,1fr);}}
.why-cell{background:var(--white); padding:38px 30px; transition:background .35s, transform .35s;}
.why-cell:hover{background:var(--ink); transform:translateY(-4px); z-index:2;}
.why-cell:hover *{color:#fff !important;}
.why-cell:hover svg{stroke:#fff;}
.why-cell svg{width:30px; height:30px; stroke:var(--red); margin-bottom:22px; transition:stroke .35s;}
.why-cell h3{font-size:17px; margin-bottom:8px;}
.why-cell p{font-size:13.5px; color:var(--mute); line-height:1.5;}

/* CATEGORIES 3D CARDS */
.cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
@media (max-width:980px){.cat-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.cat-grid{grid-template-columns:1fr;}}
.cat-card{
  position:relative; border-radius:20px; padding:30px 26px; height:230px;
  background:linear-gradient(155deg,#ffffff,#efeae1);
  border:1px solid var(--line);
  display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden; transform-style:preserve-3d; perspective:800px;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.cat-card:hover{transform:translateY(-10px) rotateX(4deg) rotateY(-4deg); box-shadow:var(--shadow);}
.cat-card .glow{position:absolute; inset:0; background:radial-gradient(220px 160px at var(--mx,50%) var(--my,0%), rgba(200,30,44,.14), transparent 60%); opacity:0; transition:opacity .4s;}
.cat-card:hover .glow{opacity:1;}
.cat-card .idx{font-family:'Space Grotesk'; font-size:12px; color:var(--mute); letter-spacing:.1em;}
.cat-card svg{width:44px; height:44px; stroke:var(--ink); align-self:flex-end;}
.cat-card h3{font-size:20px; margin-top:4px;}
.cat-card .cnt{font-size:12.5px; color:var(--mute);}
.cat-card .arrow{position:absolute; right:22px; bottom:22px; width:34px; height:34px; border-radius:50%; border:1px solid var(--ink); display:flex; align-items:center; justify-content:center; transition:all .35s var(--ease);}
.cat-card:hover .arrow{background:var(--red); border-color:var(--red); transform:rotate(45deg);}
.cat-card .arrow svg{width:14px; height:14px; margin:0;}

/* STATS BAND */
.stats-band{background:var(--ink); color:#fff; padding:90px 0; position:relative;}
.stats-band::before{content:''; position:absolute; inset:0; background:radial-gradient(600px 300px at 15% 20%, rgba(200,30,44,.15), transparent 60%);}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:40px; position:relative;}
@media (max-width:900px){.stats-grid{grid-template-columns:repeat(2,1fr);}}
.stat .n{font-family:'Space Grotesk'; font-size:clamp(38px,4.5vw,58px); font-weight:700; color:#fff;}
.stat .n .r{color:var(--red);}
.stat .l{font-size:13px; color:#a9a49c; letter-spacing:.05em; margin-top:8px;}

/* INDUSTRIES */
.ind-row{display:flex; flex-wrap:wrap; gap:14px;}
.chip{
  border:1px solid var(--line); background:#fff; padding:16px 26px; border-radius:100px;
  font-size:14.5px; font-weight:500; display:flex; align-items:center; gap:10px;
  transition:all .35s var(--ease);
}
.chip:hover{background:var(--ink); color:#fff; border-color:var(--ink); transform:translateY(-3px);}
.chip .d{width:6px; height:6px; border-radius:50%; background:var(--red);}

/* PROCESS / bulk order flow */
.flow{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative;}
@media (max-width:900px){.flow{grid-template-columns:1fr; gap:34px;}}
.flow::before{content:''; position:absolute; top:26px; left:0; right:0; height:1px; background:var(--line);}
@media (max-width:900px){.flow::before{display:none;}}
.flow-step{padding-right:24px; position:relative;}
.flow-step .fn{width:52px; height:52px; border-radius:50%; background:var(--white); border:1.5px solid var(--ink); display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk'; font-weight:700; position:relative; z-index:2; margin-bottom:24px; transition:all .35s;}
.flow-step:hover .fn{background:var(--red); border-color:var(--red); color:#fff; transform:scale(1.08);}
.flow-step h3{font-size:16.5px; margin-bottom:8px;}
.flow-step p{font-size:13.5px; color:var(--mute); line-height:1.5;}

/* TESTIMONIALS */
.tm-track{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:900px){.tm-track{grid-template-columns:1fr;}}
.tm-card{background:#fff; border:1px solid var(--line); border-radius:20px; padding:34px; transition:transform .4s var(--ease), box-shadow .4s;}
.tm-card:hover{transform:translateY(-6px); box-shadow:var(--shadow);}
.tm-card .stars{color:var(--red); font-size:14px; margin-bottom:18px; letter-spacing:2px;}
.tm-card p{font-size:15px; line-height:1.65; color:#333; margin-bottom:24px;}
.tm-who{display:flex; align-items:center; gap:12px;}
.tm-who .av{width:42px; height:42px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-family:'Poppins';}
.tm-who .nm{font-size:14px; font-weight:700;}
.tm-who .rl{font-size:12px; color:var(--mute);}

/* FAQ */
.faq{max-width:820px;}
.faq-item{border-bottom:1px solid var(--line); padding:26px 0;}
.faq-q{display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:17px; font-weight:600;}
.faq-q .plus{width:26px; height:26px; border-radius:50%; border:1px solid var(--ink); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-left:20px; transition:transform .35s var(--ease);}
.faq-item.open .plus{transform:rotate(135deg); background:var(--red); border-color:var(--red); color:#fff;}
.faq-a{max-height:0; overflow:hidden; transition:max-height .4s var(--ease);}
.faq-item.open .faq-a{max-height:200px;}
.faq-a p{padding-top:16px; color:var(--mute); font-size:14.5px; line-height:1.65; max-width:640px;}

/* CTA / FORM */
.cta-band{
  background:linear-gradient(155deg,var(--ink),#1c1c1c); color:#fff; border-radius:28px;
  padding:70px 60px; display:grid; grid-template-columns:1fr 1fr; gap:50px; position:relative; overflow:hidden;
}
@media (max-width:900px){.cta-band{grid-template-columns:1fr; padding:44px 26px;}}
.cta-band::after{content:''; position:absolute; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle, rgba(200,30,44,.25), transparent 70%); top:-150px; right:-100px;}
.cta-band h2{font-size:clamp(28px,3.4vw,40px); margin-bottom:16px; position:relative;}
.cta-band p{color:#b8b3aa; font-size:15px; line-height:1.6; max-width:400px; position:relative;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; position:relative;}
.form-grid input, .form-grid select{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:10px;
  padding:15px 16px; color:#fff; font-size:14px; font-family:'Inter'; outline:none; transition:border .3s, background .3s;
}
.form-grid input::placeholder{color:#8a857c;}
.form-grid input:focus, .form-grid select:focus{border-color:var(--red); background:rgba(255,255,255,.1);}
.form-grid .full{grid-column:1/-1;}
.form-grid select{color:#c9c5bd;}
.form-grid select option{color:#000;}
.submit-btn{grid-column:1/-1; background:var(--red); color:#fff; border:none; padding:16px; border-radius:10px; font-weight:700; font-size:14px; letter-spacing:.03em; transition:all .3s var(--ease);}
.submit-btn:hover{background:#fff; color:var(--ink); transform:translateY(-2px);}
.formnote{font-size:11.5px; color:#847f76; margin-top:10px; grid-column:1/-1;}

/* FOOTER */
footer{background:var(--paper); border-top:1px solid var(--line); padding:80px 0 30px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:50px; margin-bottom:70px;}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr; row-gap:40px;}}
.foot-grid h4{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); margin-bottom:20px;}
.foot-grid ul{list-style:none;}
.foot-grid li{margin-bottom:12px; font-size:14.5px;}
.foot-grid li a:hover{color:var(--red);}
.foot-brand p{color:var(--mute); font-size:14px; line-height:1.6; margin:18px 0 24px; max-width:280px;}
.social{display:flex; gap:10px;}
.social a{width:38px; height:38px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all .3s;}
.social a:hover{background:var(--ink); border-color:var(--ink); color:#fff;}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:26px; border-top:1px solid var(--line); font-size:12.5px; color:var(--mute); flex-wrap:wrap; gap:12px;}

/* WHATSAPP FAB */
.fab{position:fixed; bottom:28px; right:28px; width:58px; height:58px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(37,211,102,.4); z-index:900; animation:bob 2.6s ease-in-out infinite;}
.fab svg{width:28px; height:28px; fill:#fff;}
@keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)}}
/* Products directory page — 3-col category grid, responsive */
.cat-grid-3 { grid-template-columns:repeat(3,1fr); }
@media (max-width:980px){ .cat-grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .cat-grid-3{ grid-template-columns:1fr; } }