/* ============ QUVIANO — Design Tokens ============ */
:root{
  --navy:#0F172A;
  --navy-soft:#1E293B;
  --orange:#F97316;
  --orange-soft:#FDBA74;
  --white:#FFFFFF;
  --bg-warm:#F8F9FB;
  --border:#E2E5EC;
  --text-muted:#64748B;
  --text-body:#334155;
  --radius:14px;
  --radius-lg:26px;
  --container:1240px;
  --ff-display:'Manrope',sans-serif;
  --ff-body:'Manrope',sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--ff-body);
  color:var(--text-body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;margin:0;padding:0;}
.container{max-width:var(--container);margin:0 auto;padding:0 28px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

/* ============ Utility ============ */
.eyebrow{
  font-size:13px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--orange);
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 30px; border-radius:100px; font-weight:700; font-size:15px;
  letter-spacing:0.01em; border:none; cursor:pointer; transition:transform .25s ease, box-shadow .25s ease;
}
.btn-primary{background:var(--orange); color:var(--navy);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 24px -8px rgba(249,115,22,.55);}
.btn-outline{background:transparent; color:var(--white); border:1.5px solid rgba(255,255,255,.35);}
.btn-outline:hover{border-color:var(--white); transform:translateY(-2px);}
.btn-dark{background:var(--navy); color:var(--white);}
.btn-dark:hover{transform:translateY(-2px); box-shadow:0 12px 24px -10px rgba(15,23,42,.5);}

/* ============ Header ============ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:82px;}
.logo img{height:30px;}
.main-nav ul{display:flex; gap:34px;}
.main-nav a{
  font-size:14.5px; font-weight:600; color:var(--navy); position:relative; padding:6px 0;
}
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--orange);
  transition:width .25s ease;
}
.main-nav a:hover::after{width:100%;}
.header-actions{display:flex; align-items:center; gap:20px;}
.icon-btn{
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--border); font-size:17px; transition:border-color .2s, background .2s;
}
.icon-btn:hover{border-color:var(--navy); background:var(--navy); color:var(--white);}
.nav-toggle{display:none; background:none; border:none; font-size:26px; cursor:pointer; color:var(--navy);}

/* ============ Hero ============ */
.hero{
  position:relative; background:var(--navy); color:var(--white);
  padding:120px 0 100px; overflow:hidden;
}
.hero-flare{
  position:absolute; top:-10%; right:-8%; width:640px; height:640px; opacity:.10;
  transform:rotate(8deg);
}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; position:relative; z-index:2;}
.hero h1{
  font-family:var(--ff-display); font-size:clamp(38px,5.2vw,64px); line-height:1.08;
  font-weight:800; letter-spacing:-0.015em; margin:18px 0 22px;
}
.hero h1 span{color:var(--orange);}
.hero p.lead{font-size:18px; color:rgba(255,255,255,.72); max-width:480px; line-height:1.6; margin-bottom:34px;}
.hero-cta{display:flex; gap:16px; flex-wrap:wrap;}
.hero-stats{display:flex; gap:40px; margin-top:56px;}
.hero-stats div strong{display:block; font-size:26px; font-weight:800; font-family:var(--ff-display);}
.hero-stats div span{font-size:13px; color:rgba(255,255,255,.55);}

.hero-visual{
  position:relative; background:linear-gradient(160deg,#182338,#0F172A);
  border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-lg);
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
}
.hero-visual img{width:42%; opacity:.95;}
.hero-visual::before{
  content:''; position:absolute; inset:18px; border:1px dashed rgba(255,255,255,.12); border-radius:20px;
}
.badge-float{
  position:absolute; bottom:26px; left:26px; background:var(--white); color:var(--navy);
  padding:12px 18px; border-radius:14px; font-size:13px; font-weight:700; box-shadow:0 20px 40px -20px rgba(0,0,0,.5);
  display:flex; align-items:center; gap:10px;
}
.badge-float .dot{width:8px; height:8px; border-radius:50%; background:var(--orange);}

/* ============ Trust bar ============ */
.trust-bar{background:var(--bg-warm); border-bottom:1px solid var(--border);}
.trust-inner{display:flex; justify-content:space-between; padding:26px 0; flex-wrap:wrap; gap:20px;}
.trust-item{display:flex; align-items:center; gap:12px; font-size:14px; font-weight:600; color:var(--navy);}
.trust-item .ic{font-size:20px;}

/* ============ Section heading ============ */
.section{padding:90px 0;}
.section-head{max-width:640px; margin-bottom:52px;}
.section-head h2{
  font-family:var(--ff-display); font-size:clamp(28px,3.4vw,40px); font-weight:800;
  letter-spacing:-0.01em; color:var(--navy); margin:14px 0 0;
}
.section-head p{color:var(--text-muted); font-size:16px; margin-top:14px; line-height:1.6;}

/* ============ Categories ============ */
.cat-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:20px;}
.cat-card{
  background:var(--bg-warm); border:1px solid var(--border); border-radius:var(--radius);
  padding:28px 22px; text-align:left; transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
  cursor:pointer;
}
.cat-card:hover{transform:translateY(-6px); background:var(--white); box-shadow:0 24px 48px -24px rgba(15,23,42,.18);}
.cat-card .cat-ic{
  width:46px; height:46px; border-radius:12px; background:var(--navy); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:18px;
}
.cat-card h3{font-size:15.5px; font-weight:700; color:var(--navy); margin:0 0 4px;}
.cat-card span{font-size:12.5px; color:var(--text-muted);}

/* ============ Featured products ============ */
.product-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.product-card{border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:box-shadow .3s ease, transform .3s ease;}
.product-card:hover{box-shadow:0 30px 60px -30px rgba(15,23,42,.2); transform:translateY(-4px);}
.product-thumb{
  aspect-ratio:1/1; background:linear-gradient(155deg,#EEF1F6,#F8F9FB);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.product-thumb img{width:34%; opacity:.85;}
.product-tag{
  position:absolute; top:14px; left:14px; background:var(--orange); color:var(--navy);
  font-size:11px; font-weight:800; letter-spacing:.04em; padding:5px 10px; border-radius:100px;
}
.product-info{padding:18px 20px 22px;}
.product-info .cat{font-size:11.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em;}
.product-info h4{font-size:15.5px; font-weight:700; color:var(--navy); margin:6px 0 10px;}
.price-row{display:flex; align-items:center; justify-content:space-between;}
.price{font-weight:800; color:var(--navy); font-size:16px;}
.price .old{font-weight:500; color:var(--text-muted); text-decoration:line-through; font-size:13px; margin-left:6px;}
.add-btn{
  width:36px; height:36px; border-radius:50%; background:var(--navy); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-size:18px; border:none; cursor:pointer;
  transition:background .2s;
}
.add-btn:hover{background:var(--orange); color:var(--navy);}

/* ============ Split promo ============ */
.promo{background:var(--navy); border-radius:var(--radius-lg); padding:64px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; color:var(--white);}
.promo h3{font-family:var(--ff-display); font-size:clamp(26px,3vw,36px); font-weight:800; margin:14px 0 16px; line-height:1.2;}
.promo p{color:rgba(255,255,255,.68); margin-bottom:28px; line-height:1.6;}
.promo-visual{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:18px; aspect-ratio:16/11; display:flex; align-items:center; justify-content:center;}
.promo-visual img{width:30%;}

/* ============ Newsletter ============ */
.newsletter{background:var(--bg-warm); padding:80px 0;}
.newsletter-inner{text-align:center; max-width:560px; margin:0 auto;}
.newsletter h3{font-family:var(--ff-display); font-size:30px; font-weight:800; color:var(--navy); margin:14px 0 12px;}
.newsletter p{color:var(--text-muted); margin-bottom:30px;}
.nl-form{display:flex; gap:10px; max-width:440px; margin:0 auto;}
.nl-form input{
  flex:1; padding:15px 20px; border-radius:100px; border:1.5px solid var(--border); font-size:14px; font-family:var(--ff-body);
}
.nl-form input:focus{outline:none; border-color:var(--navy);}

/* ============ Footer ============ */
.site-footer{background:var(--navy); color:rgba(255,255,255,.7); padding:70px 0 30px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.1);}
.footer-brand p{font-size:14px; line-height:1.6; margin:16px 0 20px; color:rgba(255,255,255,.55); max-width:280px;}
.footer-col h5{color:var(--white); font-size:14px; font-weight:700; margin-bottom:18px;}
.footer-col ul li{margin-bottom:12px;}
.footer-col a{font-size:14px; color:rgba(255,255,255,.6); transition:color .2s;}
.footer-col a:hover{color:var(--orange);}
.social-row{display:flex; gap:10px; margin-top:18px;}
.social-row a{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--white);
  transition:background .2s, border-color .2s;
}
.social-row a:hover{background:var(--orange); border-color:var(--orange); color:var(--navy);}
.footer-bottom{display:flex; justify-content:space-between; padding-top:24px; font-size:13px; color:rgba(255,255,255,.45); flex-wrap:wrap; gap:10px;}

/* ============ Scroll reveal ============ */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ============ Responsive ============ */
@media (max-width:1080px){
  .cat-grid{grid-template-columns:repeat(3,1fr);}
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1.2fr 1fr 1fr; row-gap:36px;}
}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{aspect-ratio:16/10;}
  .promo{grid-template-columns:1fr; padding:40px;}
  .main-nav{display:none;}
  .nav-toggle{display:block;}
}
@media (max-width:640px){
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .product-grid{grid-template-columns:1fr 1fr;}
  .trust-inner{justify-content:flex-start; gap:26px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .nl-form{flex-direction:column;}
  .section{padding:60px 0;}
}