/* ── RESET & BASE ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; overflow-x:hidden; }

:root {
  --orange: #F5A800;
  --orange-glow: #FF8C00;
  --orange-dim: rgba(245,168,0,0.15);
  --white: #FFFFFF;
  --silver: #C8C8C8;
  --black: #060606;
  --dark: #0D0D0D;
  --card-bg: rgba(255,255,255,0.04);
  --glass: rgba(255,255,255,0.06);
  --border: rgba(245,168,0,0.25);
  --nav-h: 70px;
}

body {
  background: var(--black);
  color: var(--white);
  font-family: 'Exo 2', sans-serif;
  overflow-x: hidden;
  position: relative;
  width: 100%;
}

.brand-subtext{
  color: #ffffff;
  font-size: 14px;   /* smaller than ////////////////////////////////////////INSYN */
  letter-spacing: 3px;
  margin-top: 4px;
  font-weight: 500;
}

.about-slider {
  width: 100%;
  max-width: 400px;  
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 16px;
  position: relative;
  
}

/* slider container */
.slides {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* hide scrollbar */
.slides::-webkit-scrollbar {
  display: none;
}

/* each image slide */
.slides img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: contain; 
  scroll-snap-align: start;
}

/* dots */
.dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
}

.dot.active {
  background: #f5a800;
}



/* ── LOADER ── */
#loader {
  position:fixed; inset:0;
  background:#000;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  z-index:9999;
  transition:opacity .6s ease, visibility .6s;
}
#loader.hidden { opacity:0; visibility:hidden; }
.loader-logo {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(3rem,10vw,7rem);
  letter-spacing:10px;
  animation:loaderPulse 1.4s ease-in-out infinite;
}
.loader-logo span.gold { color:var(--orange); }
.loader-logo span.wht  { color:#fff; }
.loader-bar { width:clamp(140px,50vw,200px); height:2px; background:rgba(255,255,255,0.1); margin-top:20px; border-radius:2px; overflow:hidden; }
.loader-fill { height:100%; width:0%; background:linear-gradient(90deg,var(--orange),#fff); animation:loaderFill 2.2s ease forwards; }
.loader-sub { font-family:'Rajdhani',sans-serif; letter-spacing:4px; font-size:clamp(.65rem,.9vw,.8rem); color:var(--silver); margin-top:12px; text-transform:uppercase; text-align:center; padding:0 1rem; }
/* @keyframes loaderPulse { 0%,100%{text-shadow:0 0 20px rgba(245,168,0,.3);} 50%{text-shadow:0 0 50px rgba(245,168,0,.9),0 0 80px rgba(245,168,0,.4);} } */
@keyframes loaderFill { to{width:100%;} }

/* ── NAVBAR ── */
nav {
  position:fixed; top:0; left:0; right:0;
  width:100%;
  z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 5%;
  height:var(--nav-h);
  background:rgba(6,6,6,0.4);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
  transition:background .4s, border-color .4s, box-shadow .4s;
}
nav.scrolled {
  background:rgba(6,6,6,0.92);
  box-shadow:0 4px 40px rgba(245,168,0,0.08);
}
.nav-brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.logo-circle {
  width:clamp(42px,6vw,54px); height:clamp(42px,6vw,54px);
  border-radius:50%;
  background:#000;
  /* border:1.5px solid rgba(245,168,0,0.5);
  box-shadow:0 0 18px rgba(245,168,0,0.35),inset 0 0 10px rgba(0,0,0,0.9); */
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  transition:transform .4s ease, box-shadow .4s;
  flex-shrink:0;
}


.logo-circle:hover { transform:rotate(-8deg) scale(1.06); }
.logo-circle img { width:100%; height:100%; object-fit:contain; }
.brand-text { font-family:'Bebas Neue',sans-serif; font-size:clamp(1.4rem,3vw,1.9rem); letter-spacing:4px; line-height:1; }
.brand-text .g { color:var(--orange); }
.brand-text .w { color:#fff; }

.nav-links { display:flex; align-items:center; gap:clamp(1rem,2vw,2.2rem); list-style:none; }
.nav-links a {
  font-family:'Rajdhani',sans-serif; font-weight:600; font-size:.88rem;
  text-transform:uppercase; letter-spacing:2px;
  color:var(--silver); text-decoration:none;
  position:relative; transition:color .3s;
  white-space:nowrap;
}
.nav-links a::after { content:''; position:absolute; left:0; bottom:-3px; width:0; height:1.5px; background:var(--orange); box-shadow:0 0 8px var(--orange); transition:width .35s ease; }
.nav-links a:hover { color:var(--orange); }
.nav-links a:hover::after { width:100%; }

/* Hamburger */
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; z-index:1100; padding:4px; }
.hamburger span { display:block; width:26px; height:2px; background:var(--orange); border-radius:2px; transition:transform .4s, opacity .4s; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  display:none;
  position:fixed;
  top:0; left:0;
  width:100%;
  max-width:100vw;
  height:100vh;
  overflow:hidden;

  background:rgba(6,6,6,.97);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);

  z-index:900;

  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2rem;

  opacity:0;
  visibility:hidden;

  transition:opacity .4s, visibility .4s;
}
.mobile-menu.open { opacity:1; visibility:visible; }
.mobile-menu a {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(2rem,8vw,3.5rem);
  letter-spacing:6px; color:var(--silver);
  text-decoration:none; transition:color .3s, text-shadow .3s;
}
.mobile-menu a:hover { color:var(--orange); text-shadow:0 0 30px rgba(245,168,0,.5); }

/* ── HERO ── */
#hero {
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  text-align:center;
  padding:calc(var(--nav-h) + 40px) 5% 80px;
  width:100%;
  max-width:100vw;
}
.hero-bg {
  position:absolute; inset:0;
  background:linear-gradient(135deg,#0a0a0a 0%,#111 40%,#0d0804 80%,#060606 100%);
  z-index:0;
}
.hero-bg::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 60% at 60% 50%,rgba(245,120,0,0.12) 0%,transparent 70%),
              radial-gradient(ellipse 40% 40% at 20% 80%,rgba(245,168,0,0.06) 0%,transparent 60%);
}
.fog { position:absolute; left:0; right:0; height:200px; background:linear-gradient(90deg,transparent,rgba(245,120,0,0.05),rgba(255,255,255,0.02),transparent); animation:fogFloat 8s ease-in-out infinite; pointer-events:none; }
.fog:nth-child(2) { top:30%; animation-duration:12s; animation-delay:-4s; opacity:.5; }
.fog:nth-child(3) { top:60%; animation-duration:10s; animation-delay:-7s; opacity:.3; }
@keyframes fogFloat { 0%,100%{transform:translateX(-10%) skewX(-2deg);} 50%{transform:translateX(10%) skewX(2deg);} }
.hero-scan { position:absolute; inset:0; z-index:1; pointer-events:none; background:repeating-linear-gradient(0deg,transparent 0px,transparent 2px,rgba(0,0,0,0.03) 2px,rgba(0,0,0,0.03) 4px); }
.hero-watermark { position:absolute; bottom:20px; right:3%; font-family:'Bebas Neue',sans-serif; font-size:clamp(3rem,10vw,11rem); color:rgba(255,255,255,0.02); letter-spacing:12px; z-index:2; pointer-events:none; user-select:none; overflow:hidden; max-width:100%; }
.hero-content { position:relative; z-index:5; width:100%; }
.hero-eyebrow { font-family:'Rajdhani',sans-serif; font-size:clamp(.65rem,.9vw,.85rem); letter-spacing:5px; color:var(--orange); text-transform:uppercase; margin-bottom:1rem; opacity:0; animation:fadeUp .8s .4s forwards; padding:0 1rem; }
.hero-title { font-family:'Bebas Neue',sans-serif; font-size:clamp(3rem,10vw,8.5rem); line-height:.95; letter-spacing:clamp(2px,1vw,6px); margin-bottom:1.5rem; opacity:0; animation:fadeUp .9s .6s forwards; }
.hero-title .t-orange { color:var(--orange); text-shadow:0 0 60px rgba(245,168,0,.4); }
.hero-title .t-white  { color:#fff; }
.hero-sub { font-family:'Exo 2',sans-serif; font-size:clamp(.9rem,2vw,1.25rem); color:var(--silver); font-weight:300; font-style:italic; letter-spacing:1px; max-width:550px; margin:0 auto 2.5rem; opacity:0; animation:fadeUp .9s .85s forwards; padding:0 1rem; }
.hero-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; opacity:0; animation:fadeUp .9s 1.05s forwards; padding:0 1rem; }
.btn-primary { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:.9rem; letter-spacing:3px; text-transform:uppercase; padding:13px clamp(20px,5vw,36px); background:var(--orange); color:#000; border:none; border-radius:2px; cursor:pointer; text-decoration:none; position:relative; overflow:hidden; transition:box-shadow .3s, transform .3s; display:inline-block; }
.btn-primary::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent); transform:translateX(-100%); transition:transform .5s; }
.btn-primary:hover::before { transform:translateX(100%); }
.btn-primary:hover { box-shadow:0 0 35px rgba(245,168,0,.6); transform:translateY(-2px); }
.btn-secondary { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:.9rem; letter-spacing:3px; text-transform:uppercase; padding:12px clamp(20px,5vw,36px); background:transparent; color:var(--white); border:1.5px solid rgba(255,255,255,.35); border-radius:2px; cursor:pointer; text-decoration:none; transition:border-color .3s, color .3s, box-shadow .3s, transform .3s; display:inline-block; }
.btn-secondary:hover { border-color:var(--orange); color:var(--orange); box-shadow:0 0 20px rgba(245,168,0,.2); transform:translateY(-2px); }
.scroll-indicator { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; z-index:5; opacity:0; animation:fadeUp .8s 1.4s forwards; }
.scroll-indicator span { font-family:'Rajdhani',sans-serif; font-size:.65rem; letter-spacing:4px; color:rgba(255,255,255,.3); text-transform:uppercase; }
.scroll-line { width:1px; height:40px; background:linear-gradient(180deg,rgba(245,168,0,.6),transparent); animation:scrollPulse 1.8s ease-in-out infinite; }
@keyframes scrollPulse { 0%,100%{opacity:.2;transform:scaleY(.5);} 50%{opacity:1;transform:scaleY(1);} }
@keyframes fadeUp { from{opacity:0;transform:translateY(30px);} to{opacity:1;transform:translateY(0);} }

/* ── SECTION BASE ── */
section { padding:clamp(60px,10vw,130px) clamp(1rem,5%,5%); position:relative; width:100%; max-width:100vw; overflow-x:hidden; }
.section-label { font-family:'Rajdhani',sans-serif; font-size:.75rem; letter-spacing:5px; text-transform:uppercase; color:var(--orange); margin-bottom:.6rem; }
.section-title { font-family:'Bebas Neue',sans-serif; font-size:clamp(2rem,5vw,4.2rem); line-height:1; letter-spacing:3px; margin-bottom:1.4rem; }
.section-sub { font-family:'Exo 2',sans-serif; font-size:clamp(.9rem,1.5vw,1rem); color:var(--silver); font-weight:300; max-width:560px; line-height:1.7; }
.section-divider { width:60px; height:2px; background:linear-gradient(90deg,var(--orange),transparent); margin:.8rem 0 1.5rem; }

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

/* ── STATS ── */
#stats { background:var(--dark); border-top:1px solid rgba(245,168,0,0.12); border-bottom:1px solid rgba(245,168,0,0.12); padding:clamp(30px,6vw,55px) 5%; width:100%; overflow:hidden; }
.stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; text-align:center; max-width:900px; margin:0 auto; }
@media (min-width:600px) { .stats-grid { grid-template-columns:repeat(4,1fr); } }
.stat-num { font-family:'Bebas Neue',sans-serif; font-size:clamp(2rem,6vw,3.6rem); color:var(--orange); line-height:1; }
.stat-label { font-family:'Rajdhani',sans-serif; font-size:.75rem; letter-spacing:3px; text-transform:uppercase; color:var(--silver); margin-top:.3rem; }

/* ── ABOUT ── */
#about { overflow:hidden; width:100%; }
.about-grid { display:grid; grid-template-columns:1fr; gap:2.5rem; max-width:1200px; margin:0 auto; }
@media (min-width:860px) { .about-grid { grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,6rem); align-items:center; } }
.about-img-wrap { position:relative; max-width:460px; margin:0 auto; width:100%; }
.about-img-placeholder { width:100%; padding-top:100%; background:linear-gradient(135deg,#141414,#0d0d0d); border:1px solid var(--border); border-radius:2px; position:relative; overflow:hidden; }
.about-img-placeholder img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.about-img-accent { position:absolute; bottom:-14px; right:-14px; width:80px; height:80px; border:2px solid var(--orange); border-radius:2px; background:rgba(245,168,0,0.04); z-index:-1; }
.about-img-label { position:absolute; top:16px; left:-12px; background:var(--orange); color:#000; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:.65rem; letter-spacing:3px; text-transform:uppercase; padding:5px 12px; writing-mode:vertical-rl; transform:rotate(180deg); }
.about-text .section-sub { max-width:100%; }
.about-features { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin-top:1.8rem; }
@media (max-width:380px) { .about-features { grid-template-columns:1fr; } }
.about-feat { display:flex; align-items:flex-start; gap:.6rem; }
.feat-icon { width:30px; height:30px; flex-shrink:0; border:1px solid rgba(245,168,0,.4); display:flex; align-items:center; justify-content:center; font-size:.85rem; }
.feat-text { font-family:'Rajdhani',sans-serif; font-size:.83rem; letter-spacing:1px; color:var(--silver); line-height:1.5; }
.feat-text strong { color:#fff; display:block; font-size:.88rem; }

/* ── PRODUCTS ── */
#products { background:var(--dark); }
.products-header { text-align:center; max-width:600px; margin:0 auto 3rem; }
.products-header .section-divider { margin-left:auto; margin-right:auto; }
.products-grid { display:grid; grid-template-columns:1fr; gap:1.5rem; max-width:1200px; margin:0 auto; }
@media (min-width:560px) { .products-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px) { .products-grid { grid-template-columns:repeat(3,1fr); } }

.product-card { background:var(--card-bg); border:1px solid rgba(255,255,255,0.07); border-radius:4px; overflow:hidden; position:relative; transition:transform .4s ease, border-color .4s, box-shadow .4s; }
.product-card::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(245,168,0,0.1) 0%,transparent 70%); opacity:0; transition:opacity .4s; }
@media (hover:hover) {
  .product-card:hover { transform:translateY(-8px); border-color:rgba(245,168,0,.4); box-shadow:0 20px 60px rgba(245,168,0,0.12),0 0 0 1px rgba(245,168,0,0.15); }
  .product-card:hover::before { opacity:1; }
}
.badge { position:absolute; top:14px; left:14px; z-index:3; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:.62rem; letter-spacing:2px; text-transform:uppercase; padding:4px 10px; border-radius:1px; }
.badge-bestseller { background:var(--orange); color:#000; }
.badge-coming     { background:rgba(255,255,255,0.1); color:var(--silver); border:1px solid rgba(255,255,255,.2); }
.product-img { aspect-ratio:4/5; width:100%; background:linear-gradient(160deg,#111,#0a0a0a); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; border-bottom:1px solid rgba(245,168,0,0.08); }
.product-img img { width:100%; height:100%; object-fit:cover; }
.product-img-glow { position:absolute; width:150px; height:150px; background:radial-gradient(circle,rgba(245,168,0,0.08),transparent 70%); transition:opacity .4s; }
.product-body { padding:clamp(1rem,3vw,1.5rem); }
.product-name { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:clamp(.95rem,2vw,1.1rem); letter-spacing:2px; text-transform:uppercase; margin-bottom:.3rem; }
.product-desc { font-size:.84rem; color:var(--silver); line-height:1.6; margin-bottom:.9rem; }
.product-sizes { display:flex; gap:.5rem; margin-bottom:.9rem; flex-wrap:wrap; }
.size-chip { font-family:'Rajdhani',sans-serif; font-size:.68rem; letter-spacing:1px; padding:3px 10px; border:1px solid rgba(245,168,0,.3); color:var(--orange); border-radius:1px; }
.product-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; }
.product-price { font-family:'Bebas Neue',sans-serif; font-size:clamp(1.3rem,3vw,1.6rem); color:var(--orange); letter-spacing:2px; }
.product-price span { font-size:.78rem; color:var(--silver); font-family:'Rajdhani',sans-serif; letter-spacing:1px; }
.product-price del { font-size:.9rem; color:#555; margin-right:5px; }
.btn-order { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:.73rem; letter-spacing:2px; text-transform:uppercase; padding:9px 16px; background:transparent; border:1px solid var(--orange); color:var(--orange); border-radius:2px; cursor:pointer; transition:background .3s, color .3s, box-shadow .3s; }
.btn-order:hover { background:var(--orange); color:#000; box-shadow:0 0 20px rgba(245,168,0,.4); }
.product-feats { display:flex; gap:.5rem; margin-top:.8rem; flex-wrap:wrap; }
.pfeat { font-size:.63rem; font-family:'Rajdhani',sans-serif; letter-spacing:1px; color:#666; }
.pfeat::before { content:'✓ '; color:var(--orange); }

/* ── REVIEWS ── */
#reviews { overflow:hidden; max-width:100vw; }
.reviews-header { text-align:center; max-width:500px; margin:0 auto 3rem; }
.reviews-header .section-divider { margin:auto; }
.reviews-track-outer { overflow:hidden; position:relative; width:100%; }
.reviews-track-outer::before, .reviews-track-outer::after { content:''; position:absolute; top:0; bottom:0; width:60px; z-index:2; pointer-events:none; }
.reviews-track-outer::before { left:0; background:linear-gradient(90deg,var(--black),transparent); }
.reviews-track-outer::after  { right:0; background:linear-gradient(-90deg,var(--black),transparent); }
.reviews-track { display:flex; gap:1.2rem; padding:1rem 0; animation:reviewScroll 35s linear infinite; width:max-content; will-change:transform; }
.reviews-track:hover { animation-play-state:paused; }
@keyframes reviewScroll { to{transform:translateX(-50%);} }
.review-card { width:clamp(260px,80vw,320px); flex-shrink:0; background:var(--glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.07); border-radius:4px; padding:clamp(1.2rem,3vw,1.8rem); position:relative; transition:border-color .3s, transform .3s; }
.review-card:hover { border-color:rgba(245,168,0,.3); transform:translateY(-4px); }
.review-card::before { content:'"'; position:absolute; top:10px; right:16px; font-family:'Bebas Neue',sans-serif; font-size:5rem; color:rgba(245,168,0,0.08); line-height:1; }
.review-stars { display:flex; gap:3px; margin-bottom:.8rem; }
.star { color:var(--orange); font-size:.95rem; }
.review-text { font-size:.88rem; color:var(--silver); line-height:1.7; margin-bottom:1.1rem; font-style:italic; }
.review-author { display:flex; align-items:center; gap:.8rem; }
.review-avatar { width:38px; height:38px; border-radius:50%; border:1.5px solid rgba(245,168,0,.35); background:linear-gradient(135deg,#1a1a1a,#111); display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue',sans-serif; font-size:.95rem; color:var(--orange); flex-shrink:0; }
.review-name { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:.88rem; letter-spacing:1px; }
.review-meta { font-size:.68rem; color:#555; margin-top:1px; }

/* ── ORDER ── */
#order { background:linear-gradient(180deg,var(--dark) 0%,#0a0500 50%,var(--dark) 100%); text-align:center; position:relative; overflow:hidden; }
#order::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(245,120,0,0.08) 0%,transparent 70%); }
.order-content { position:relative; z-index:2; max-width:700px; margin:0 auto; }
.order-title { font-family:'Bebas Neue',sans-serif; font-size:clamp(2.4rem,7vw,5rem); letter-spacing:4px; margin-bottom:.5rem; }
.order-sub { color:var(--silver); font-size:clamp(.88rem,2vw,1rem); margin-bottom:2.5rem; line-height:1.7; padding:0 .5rem; }
.order-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

.btn-wa { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:.88rem; letter-spacing:2px; text-transform:uppercase; padding:13px clamp(18px,4vw,32px); background:#25D366; color:#000; border:none; border-radius:2px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; transition:box-shadow .3s, transform .3s; }
.btn-wa:hover { box-shadow:0 0 30px rgba(37,211,102,.5); transform:translateY(-2px); }
.btn-ig { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:.88rem; letter-spacing:2px; text-transform:uppercase; padding:13px clamp(18px,4vw,32px); background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045); color:#fff; border:none; border-radius:2px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; transition:box-shadow .3s, transform .3s; }
.btn-ig:hover { box-shadow:0 0 30px rgba(253,29,29,.4); transform:translateY(-2px); }

/* Float WA */
.float-wa { position:fixed; bottom:clamp(16px,4vw,28px); right:clamp(16px,4vw,28px); z-index:900; width:52px; height:52px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(37,211,102,.5); cursor:pointer; text-decoration:none; animation:floatWA 3s ease-in-out infinite; transition:transform .3s; }
.float-wa:hover { transform:scale(1.12); animation-play-state:paused; }
.float-wa svg { width:24px; height:24px; fill:#fff; }
@keyframes floatWA { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }

/* Promo banner */
/* ===== RESPONSIVE PROMO BANNER ===== */

.promo-banner{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 3.5rem;

    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 4px;

    aspect-ratio: 16 / 6;   /* Keeps same image ratio */
    background: #111;
}

/* Banner image */
.promo-banner img{
    width: 100%;
    height: 100%;
    object-fit: cover;

    display: block;
}

/* Optional shimmer effect */
/* ===== PROMO BANNER ===== */

.promo-banner{
    width: 100%;
    max-width: 1200px;

    margin: 0 auto 3.5rem;

    aspect-ratio: 1200 / 180;

    border: 1px solid var(--border);
    border-radius: 4px;

    overflow: hidden;
    background: #111;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* Banner Image */
.promo-banner img{
    width: 100%;
    height: 100%;

    object-fit: contain;   /* Prevents cropping */

    display: block;
}
.promo-banner::before { content:''; position:absolute; left:-40px; width:200px; height:200%; background:linear-gradient(90deg,transparent,rgba(245,168,0,0.06),transparent); transform:skewX(-20deg); animation:shimmer 4s linear infinite; }
.promo-banner span { font-family:'Rajdhani',sans-serif; font-size:.7rem; letter-spacing:4px; color:rgba(245,168,0,.25); text-transform:uppercase; }
@keyframes shimmer { to{left:120%;} }

/* ── CONTACT ── */
#contact { background:var(--dark); }
.contact-grid { display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vw,4rem); max-width:1100px; margin:0 auto; }
@media (min-width:860px) { .contact-grid { grid-template-columns:1fr 1fr; } }
.contact-info { display:flex; flex-direction:column; gap:1.3rem; }
.contact-item { display:flex; align-items:flex-start; gap:1rem; }
.contact-icon { width:42px; height:42px; flex-shrink:0; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:1rem; transition:border-color .3s, box-shadow .3s; }
.contact-item:hover .contact-icon { border-color:var(--orange); box-shadow:0 0 12px rgba(245,168,0,.2); }
.contact-label { font-family:'Rajdhani',sans-serif; font-size:.68rem; letter-spacing:2px; text-transform:uppercase; color:var(--silver); }
.contact-val { font-size:.93rem; color:#fff; margin-top:2px; word-break:break-word; }
.social-row { display:flex; gap:.7rem; margin-top:.5rem; flex-wrap:wrap; }
.social-btn { width:38px; height:38px; border:1px solid rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center; font-size:.95rem; cursor:pointer; text-decoration:none; color:var(--silver); transition:border-color .3s, color .3s, box-shadow .3s; flex-shrink:0; }
.social-btn:hover { border-color:var(--orange); color:var(--orange); box-shadow:0 0 12px rgba(245,168,0,.2); }

/* Contact Form */
.contact-form { display:flex; flex-direction:column; gap:1.1rem; }
.form-group { position:relative; }
.form-group input,
.form-group textarea,
.form-group select { width:100%; padding:13px 15px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:2px; color:#fff; font-family:'Exo 2',sans-serif; font-size:clamp(.88rem,2vw,.95rem); outline:none; resize:vertical; transition:border-color .3s, box-shadow .3s; -webkit-appearance:none; appearance:none; }
.form-group input::placeholder, .form-group textarea::placeholder { color:#444; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color:var(--orange); box-shadow:0 0 0 2px rgba(245,168,0,.08); }
.form-group select { color:#888; cursor:pointer; }
.form-group select option { background:#111; color:#fff; }
.form-group textarea { min-height:110px; }
.btn-submit { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:.9rem; letter-spacing:3px; text-transform:uppercase; padding:13px; background:var(--orange); color:#000; border:none; border-radius:2px; cursor:pointer; transition:box-shadow .3s, transform .3s; width:100%; }
.btn-submit:hover { box-shadow:0 0 30px rgba(245,168,0,.5); transform:translateY(-1px); }

/* ── FOOTER ── */
footer { background:#000; border-top:1px solid rgba(245,168,0,0.12); padding:clamp(2rem,5vw,3rem) 5% 2rem; width:100%; overflow:hidden; }
.footer-grid { display:grid; grid-template-columns:1fr; gap:2rem; max-width:1100px; margin:0 auto 2rem; }
@media (min-width:500px) { .footer-grid { grid-template-columns:1fr 1fr; } }
@media (min-width:900px) { .footer-grid { grid-template-columns:2fr 1fr 1fr; } }
.footer-brand .brand-text { font-size:clamp(1.3rem,3vw,1.6rem); margin-bottom:.8rem; }
.footer-tagline { font-family:'Exo 2',sans-serif; font-size:.84rem; color:#555; line-height:1.7; }
.footer-col h4 { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:.78rem; letter-spacing:3px; text-transform:uppercase; color:var(--orange); margin-bottom:1rem; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:.6rem; }
.footer-col a { font-size:.84rem; color:#555; text-decoration:none; transition:color .3s; }
.footer-col a:hover { color:var(--orange); }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.05); padding-top:1.5rem; max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.8rem; }
.footer-copy { font-size:.72rem; color:#333; font-family:'Rajdhani',sans-serif; letter-spacing:1px; }
.footer-orange { color:var(--orange); }

/* ── TOUCH ACTIVE STATES ── */
@media (hover:none) {
  .btn-primary:active  { box-shadow:0 0 35px rgba(245,168,0,.6); transform:scale(.97); }
  .btn-secondary:active{ border-color:var(--orange); color:var(--orange); }
  .btn-wa:active       { box-shadow:0 0 30px rgba(37,211,102,.5); transform:scale(.97); }
  .btn-ig:active       { box-shadow:0 0 30px rgba(253,29,29,.4); transform:scale(.97); }
  .btn-order:active    { background:var(--orange); color:#000; }
  .btn-submit:active   { box-shadow:0 0 30px rgba(245,168,0,.5); }
}

/* ── RESPONSIVE NAV BREAKPOINTS ── */
@media (max-width:860px) {
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .mobile-menu { display:flex; }
}
@media (min-width:861px) {
  .hamburger { display:none; }
}

/* ── SMALL PHONE TWEAKS ── */
@media (max-width:400px) {
  :root { --nav-h:60px; }
  .hero-btns { flex-direction:column; align-items:center; }
  .order-btns { flex-direction:column; align-items:center; }
  .order-btns .btn-wa, .order-btns .btn-ig { width:100%; max-width:300px; justify-content:center; }
}

/* ── SAFE AREA (notch devices) ── */
@supports (padding: env(safe-area-inset-bottom)) {
  .float-wa { bottom:calc(clamp(16px,4vw,28px) + env(safe-area-inset-bottom)); right:calc(clamp(16px,4vw,28px) + env(safe-area-inset-right)); }
  footer { padding-bottom:calc(2rem + env(safe-area-inset-bottom)); }
}

/* ── LANDSCAPE MOBILE ── */
@media (max-height:500px) and (orientation:landscape) {
  #hero { min-height:auto; padding-top:calc(var(--nav-h) + 20px); padding-bottom:40px; }
  .scroll-indicator { display:none; }
}

/* ── TABLET (561–859px) ── */
@media (min-width:561px) and (max-width:859px) {
  .about-img-wrap { max-width:360px; }
}