/* ===========================================================
   Vellora — furniture landing page (Panto-style layout)
   Self-contained, no frameworks.
   =========================================================== */
:root{
  --ink:#1e1e1e;
  --navy:#0d1b39;
  --muted:#8d8d8d;
  --accent:#e58411;
  --accent-2:#f6973f;
  --paper:#ffffff;
  --panel:#f7f7f7;
  --line:rgba(20,20,25,.10);
  --shadow-sm:0 10px 30px -16px rgba(20,20,30,.25);
  --shadow-md:0 30px 60px -28px rgba(20,20,30,.40);
  --maxw:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Manrope",system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 40px}
.muted{color:var(--muted)}
.section{padding:clamp(64px,8vw,110px) 0}

.h2{font-size:clamp(28px,3.4vw,42px);font-weight:800;line-height:1.12;letter-spacing:-.01em;color:var(--ink)}
.center-title{font-size:clamp(26px,3.2vw,40px);font-weight:800;text-align:center;letter-spacing:-.01em}
.label{font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}

.more{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--accent);font-size:15px}
.more i{font-style:normal;transition:transform .3s var(--ease)}
.more:hover i{transform:translateX(5px)}

/* ---------- header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;padding:24px 0;transition:padding .4s var(--ease),background .4s,box-shadow .4s}
.site-header.scrolled{padding:13px 0;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:24px;letter-spacing:-.02em;color:#fff}
.site-header.scrolled .brand{color:var(--ink)}
.brand-mark{width:16px;height:16px;border-radius:5px;background:var(--accent);transform:rotate(45deg);box-shadow:inset 0 0 0 3px rgba(255,255,255,.85)}
.nav{flex:1;display:flex;justify-content:center;gap:38px}
.nav-link{position:relative;font-weight:600;font-size:15px;color:rgba(255,255,255,.92);padding:4px 0}
.site-header.scrolled .nav-link{color:var(--ink)}
.nav-link::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--accent);transition:width .3s var(--ease)}
.nav-link:hover::after{width:100%}
.has-caret::after{content:"▾";position:static;display:inline-block;height:auto;width:auto;background:none;font-size:10px;margin-left:6px;opacity:.7}
.header-actions{display:flex;align-items:center;gap:12px}
.icon-btn{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.16);color:#fff;cursor:pointer;backdrop-filter:blur(8px)}
.site-header.scrolled .icon-btn{background:#fff;color:var(--ink);border-color:var(--line);box-shadow:var(--shadow-sm)}
.cart-count{position:absolute;top:-4px;right:-4px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 4px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:760px;height:78vh;max-height:920px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:116%;object-fit:cover;will-change:transform}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;opacity:.55}
.hero-scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(255,255,255,0) 85%,rgba(255,255,255,1) 100%),
  linear-gradient(180deg,rgba(16,16,20,.52) 0%,rgba(16,16,20,.22) 42%,rgba(16,16,20,0) 64%)}
.hero-content{position:relative;z-index:2;max-width:880px;padding:40px 20px}
.hero-title{font-size:clamp(34px,4.8vw,62px);font-weight:800;line-height:1.08;letter-spacing:-.02em;text-shadow:0 2px 30px rgba(10,10,14,.35)}
.hero-sub{font-size:clamp(16px,1.5vw,22px);max-width:600px;margin:22px auto 0;color:rgba(255,255,255,.88)}
.hero-search{display:flex;align-items:center;gap:8px;width:min(420px,86vw);margin:36px auto 0;padding:8px 8px 8px 22px;border-radius:44px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hero-search input{flex:1;border:0;background:transparent;outline:none;color:#fff;font:inherit;font-size:16px}
.hero-search input::placeholder{color:rgba(255,255,255,.8)}
.search-go{flex:none;width:48px;height:48px;border-radius:50%;border:0;background:var(--accent);color:#fff;cursor:pointer;display:grid;place-items:center;transition:transform .3s var(--ease),background .3s;will-change:transform}
.search-go:hover{background:#d2760b}
.hero-dot{position:absolute;border-radius:50%;z-index:1}
.hero-dot.d1{left:9%;top:62%;width:12px;height:12px;background:var(--accent);box-shadow:0 0 0 8px rgba(229,132,17,.18);animation:float 5s var(--ease) infinite}
.hero-dot.d2{right:12%;top:40%;width:8px;height:8px;background:#fff;opacity:.7;animation:float 6.5s var(--ease) infinite}
.hero-dot.d3{right:24%;bottom:24%;width:14px;height:14px;border:2px solid rgba(255,255,255,.6);animation:float 7s var(--ease) infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

/* ---------- why choosing ---------- */
.why-grid{display:grid;grid-template-columns:.8fr 2.2fr;gap:56px;align-items:start}
.why-title{font-size:clamp(30px,3.6vw,44px);font-weight:800;line-height:1.05;letter-spacing:-.01em}
.why-features{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding-top:6px}
.feature h3{font-size:20px;font-weight:800;color:var(--ink);margin-bottom:10px}
.feature p{color:var(--muted);font-size:14.5px;margin-bottom:14px}

/* ---------- best selling ---------- */
.best{background:var(--panel);border-radius:44px;margin:0 16px}
.best .center-title{margin-bottom:26px}
.tabs{position:relative;display:flex;justify-content:center;gap:4px;width:max-content;margin:0 auto 44px;background:#fff;padding:6px;border-radius:40px;box-shadow:var(--shadow-sm)}
.tab{position:relative;z-index:1;border:0;background:transparent;font:inherit;font-weight:700;font-size:15px;color:var(--muted);padding:10px 26px;border-radius:40px;cursor:pointer;transition:color .3s}
.tab.is-active{color:#fff}
.tab-underline{position:absolute;z-index:0;top:6px;bottom:6px;left:0;border-radius:40px;background:var(--accent);transition:transform .4s var(--ease),width .4s var(--ease)}
.best-row{display:flex;align-items:center;gap:18px}
.product-grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.carousel-btn{flex:none;width:54px;height:54px;border-radius:50%;border:0;background:#fff;box-shadow:var(--shadow-md);font-size:18px;color:var(--navy);cursor:pointer;transition:background .3s,color .3s,transform .3s var(--ease);will-change:transform}
.carousel-btn:hover{background:var(--navy);color:#fff}
.card{background:transparent;border-radius:20px;padding:0;box-shadow:none;display:flex;flex-direction:column;transition:transform .45s var(--ease);opacity:0;transform:translateY(16px)}
.card.in{opacity:1;transform:none}
.card:hover{transform:translateY(-6px)}
.card-media{background:transparent;height:300px;display:grid;place-items:center;padding:8px 8px 0}
.card-media img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 20px 24px rgba(20,20,30,.18));transform:translateY(var(--dy,0));transition:transform .5s var(--ease)}
.card:hover .card-media img{transform:translateY(calc(var(--dy,0) - 3px)) scale(1.05)}
.card-info{background:#fff;border-radius:18px;padding:16px 18px;box-shadow:0 24px 46px -30px rgba(20,20,30,.5)}
.card-cat{display:block;font-size:13px;color:var(--muted);margin:0 0 4px}
.card h3{font-family:"Inter",sans-serif;font-size:18px;font-weight:600;color:var(--navy);margin:0}
.card .stars{color:var(--accent);font-size:13px;letter-spacing:2px;margin:7px 0 0}
.card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.price{font-family:"Inter",sans-serif;font-weight:600;font-size:18px;color:var(--navy)}
.add{width:42px;height:42px;border-radius:50%;border:0;background:var(--navy);color:#fff;font-size:22px;line-height:1;cursor:pointer;transition:background .3s,transform .3s var(--ease)}
.add:hover{background:var(--accent);transform:rotate(90deg)}
.view-all{display:block;width:max-content;margin:38px auto 0;font-weight:700;color:var(--accent)}
.view-all i{font-style:normal}

/* ---------- bands (experience / materials) ---------- */
.band-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.band-media{position:relative;border-radius:26px;overflow:hidden;box-shadow:var(--shadow-md)}
.band-media>img{width:100%;height:480px;object-fit:cover}
.band-text .label{margin-bottom:14px}
.band-text .h2{margin-bottom:20px}
.band-text .muted{font-size:16px;max-width:440px;margin-bottom:26px;line-height:1.7}
.badge{position:absolute;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-radius:16px;box-shadow:var(--shadow-md);font-weight:600}
.badge-rating{top:22px;right:22px;display:flex;align-items:center;gap:10px;padding:12px 16px}
.badge-rating strong{font-size:26px;color:var(--navy)}
.badge-rating span{font-size:11px;color:var(--accent);line-height:1.35}
.badge-ship{left:22px;bottom:22px;display:flex;align-items:center;gap:9px;padding:11px 16px;font-size:13px;color:var(--ink)}
.badge-ship .dot{width:9px;height:9px;border-radius:50%;background:#2bb673;box-shadow:0 0 0 4px rgba(43,182,115,.18)}
/* materials collage */
.materials .band-grid{grid-template-columns:1fr 1fr}
.collage{display:grid;grid-template-columns:.62fr 1.38fr;grid-template-rows:1fr 1fr;gap:16px;height:440px}
.collage img{width:100%;height:100%;object-fit:cover;border-radius:20px;box-shadow:var(--shadow-md)}
.collage .c1{grid-column:1;grid-row:1}
.collage .c2{grid-column:1;grid-row:2}
.collage .c3{grid-column:2;grid-row:1/3}

/* ---------- testimonials ---------- */
.testimonials .center-head{text-align:center;margin-bottom:48px}
.testimonials .center-head .label{display:block;margin-bottom:10px}
.t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.t-card{position:relative}
.t-photo{border-radius:24px;overflow:hidden;height:420px;box-shadow:var(--shadow-md)}
.t-photo img{width:100%;height:100%;object-fit:cover}
.t-bubble{position:absolute;left:16px;right:16px;bottom:0;background:#fff;border-radius:22px;padding:42px 24px 26px;text-align:center;box-shadow:var(--shadow-md)}
.t-avatar{position:absolute;top:-26px;left:50%;transform:translateX(-50%);width:52px;height:52px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 0 0 2px var(--accent)}
.t-bubble strong{display:block;font-size:17px;color:var(--navy)}
.t-bubble small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.t-bubble blockquote{font-size:14.5px;color:#555;margin:14px 0 16px;line-height:1.6}
.t-bubble .stars{color:var(--accent);letter-spacing:3px}
.t-card:hover .t-bubble{transform:translateY(-4px);transition:transform .4s var(--ease)}

/* ---------- footer ---------- */
.site-footer{background:var(--panel);color:var(--ink);padding:80px 0 34px;margin-top:20px}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px;padding-bottom:60px}
.footer-brand .brand{color:var(--ink);margin-bottom:18px}
.footer-brand p{max-width:300px;font-size:15px;color:#555;line-height:1.7}
.footer-col h4{color:var(--accent);font-size:16px;font-weight:700;margin-bottom:18px}
.footer-col a{display:block;font-size:15px;color:#3a3a3a;padding:7px 0;transition:color .25s}
.footer-col a:hover{color:var(--accent)}
.footer-col .soc{display:flex;align-items:center;gap:10px}
.footer-bar{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--muted);flex-wrap:wrap;gap:10px}
.footer-legal a{margin-left:26px;color:#3a3a3a;transition:color .25s}
.footer-legal a:hover{color:var(--accent)}

/* ---------- scroll reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .nav{display:none}
  .why-grid{grid-template-columns:1fr;gap:30px}
  .why-features{gap:24px}
  .band-grid{grid-template-columns:1fr;gap:36px}
  .materials .band-text{order:0}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .carousel-btn{display:none}
  .t-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}
  .band-media>img{height:380px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .container{padding:0 20px}
  .best{margin:0 8px;border-radius:30px}
  .why-features{grid-template-columns:1fr}
  .product-grid{grid-template-columns:1fr 1fr;gap:14px}
  .collage{grid-template-rows:130px 150px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal],.card{opacity:1!important;transform:none!important}
  .hero-canvas,.hero-dot{display:none}
}