/* =========================================================
   Krisup Wholesale — Responsive CSS (clean + mobile-first)
   ========================================================= */

/* ---------- TOKENS ---------- */
:root{
  --bg:#0b1220;
  --bg-soft:#0e1628;
  --card:#111b2f;
  --text:#e8eef9;
  --muted:#9fb0d0;
  --brand:#ffd166;
  --brand-2:#ff8c42;
  --accent:#7bdff2;
  --shadow: 0 8px 24px rgba(0,0,0,.28);
  --radius: 16px;

  /* type scale */
  --h1-min:30px;  --h1-prefer:4.4vw;  --h1-max:42px;
  --h2-min:20px;  --h2-prefer:2.8vw;  --h2-max:28px;
  --lead:1.05rem;
}

/* ---------- BASE ---------- */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji';
  line-height:1.6;
}
img{ max-width:100%; height:auto; display:block }          /* prevents “mirror” gap */
a{ color:var(--accent); text-decoration:none }
a:hover{ text-decoration:underline }
.container{ width:min(1100px,92%); margin-inline:auto }

/* ---------- HEADER ---------- */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,18,32,.85);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
nav{ display:flex; align-items:center; justify-content:space-between; padding:12px 0 }
.brand{ display:flex; gap:.6rem; align-items:center }
.brand .logo-img{
  width:70px; height:70px; object-fit:contain; border-radius:10px;
  background:transparent; box-shadow:var(--shadow);
}
.brand .name{ font-weight:800; letter-spacing:.3px }

.nav-links{ display:flex; gap:.75rem; align-items:center }
.nav-links a{
  padding:.52rem .85rem; border-radius:12px; color:var(--text); opacity:.9
}
.nav-links a:hover,.nav-links a.active{ background:var(--bg-soft); opacity:1 }

.btn{
  display:inline-flex; gap:.5rem; align-items:center;
  padding:.8rem 1.05rem; border-radius:14px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#111; font-weight:700; box-shadow:var(--shadow)
}
.btn.ghost{ background:transparent; border:1px solid rgba(255,255,255,.14); color:var(--text) }

/* ---------- PAGE TITLE (under navbar) ---------- */
.page-title{ padding:18px 0 6px; text-align:center }
.headline{
  font-family:'Poppins','Inter',system-ui,-apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight:800; letter-spacing:.2px; margin:6px 0 0;
  font-size:clamp(var(--h1-min), var(--h1-prefer), var(--h1-max));
  line-height:1.12; text-shadow:0 6px 22px rgba(0,0,0,.35);
}
.headline-sub{ margin-top:6px; font-size:clamp(15px,1.4vw,19px); color:var(--muted) }

/* ---------- HERO ---------- */
.hero{
  display:grid; grid-template-columns:1.2fr 1fr; gap:1.6rem; align-items:center;
  padding:32px 0 56px;
}
.hero .card{
  background:
    radial-gradient(900px 360px at -20% -20%, rgba(255,209,102,.10), transparent 60%),
    var(--card);
  padding:1.6rem; border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.06);
}
h1{ font-size:clamp(var(--h1-min), var(--h1-prefer), var(--h1-max)); line-height:1.15; margin:0 0 .55rem }
h2{ font-size:clamp(var(--h2-min), var(--h2-prefer), var(--h2-max)); margin:0 0 .5rem }
p.lead{ font-size:var(--lead); color:var(--muted) }

.hero .card .btn{ margin-bottom:.5rem }
.hero .card > div:nth-of-type(2){ margin-bottom:1.2rem }

/* ---------- GRID HELPERS ---------- */
.grid{ display:grid; gap:1rem }
.grid.cols-2{ grid-template-columns:repeat(2,1fr) }
.grid.cols-3{ grid-template-columns:repeat(3,1fr) }
.grid.cols-4{ grid-template-columns:repeat(4,1fr) }

.card{
  background:var(--card); padding:1.1rem; border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.06); box-shadow:var(--shadow)
}
.card .tag{
  display:inline-block; font-size:.74rem; color:#111; background:var(--brand);
  padding:.24rem .52rem; border-radius:999px; margin-bottom:.4rem; font-weight:700
}

/* ---------- KPI ---------- */
.kpi{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:.6rem }
.kpi .metric{ background:var(--bg-soft); padding:1rem; border-radius:14px; text-align:center }
.kpi .metric b{ font-size:1.25rem; display:block }

/* ---------- HERO IMAGE GRID (no mirror/reflection) ---------- */
.hero-gallery{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1rem;
}
.hero-gallery .tile{
  position:relative; min-height:160px; border-radius:var(--radius);
  background-size:cover; background-position:center;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow);
  overflow:hidden;                              /* trims shadow/edges */
  transform:translateZ(0);                      /* fixes GPU artifacts */
  transition:transform .25s ease, filter .25s ease;
}
.hero-gallery .tile:hover{ transform:translateY(-2px); filter:brightness(1.05) }

/* Single image mode */
.hero-gallery.single-image{ display:flex; justify-content:center; align-items:center; padding:1rem }
.hero-gallery.single-image .tile{
  width:100%; max-width:460px; aspect-ratio:1/1; border-radius:1rem; box-shadow:0 4px 10px rgba(0,0,0,.15)
}

/* ---------- ABOUT / PARTNERS / CONTACT ---------- */
.about-grid .card{
  min-height:180px;
  background:linear-gradient(120deg, rgba(255,209,102,.08), transparent 50%), var(--card);
}

.partner-card{ display:grid; gap:.55rem }
.partner-card h3{ margin:.2rem 0 }
.partner-card p{ color:var(--muted) }

.partner-logo-wrap{
  display:grid; place-items:center; height:120px; margin:.2rem 0 .6rem;
  background:var(--bg-soft); border:1px solid rgba(255,255,255,.06);
  border-radius:14px; overflow:hidden
}
.partner-logo{
  max-width:85%; max-height:80%; object-fit:contain;
  filter:grayscale(10%); opacity:.95;
  transition:transform .25s ease, filter .25s ease, opacity .25s ease
}
.partner-card:hover .partner-logo{ transform:translateY(-2px); filter:none; opacity:1 }

.contact-cards{ display:grid; grid-template-columns:1.1fr 1fr; gap:1rem }
.contact .info .row{
  display:grid; grid-template-columns:120px 1fr; gap:.5rem; padding:.5rem 0;
  border-bottom:1px dashed rgba(255,255,255,.08)
}
form .field{ display:flex; flex-direction:column; gap:.35rem }
input,textarea{
  background:#0b1426; border:1px solid rgba(255,255,255,.12);
  padding:.9rem 1rem; border-radius:12px; color:var(--text); outline:none
}
input:focus,textarea:focus{ border-color:var(--brand) }
textarea{ min-height:140px; resize:vertical }

/* ---------- FOOTER ---------- */
footer{ margin-top:40px; border-top:1px solid rgba(255,255,255,.08) }
footer .inner{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  padding:18px 0; color:var(--muted); font-size:.95rem
}

/* ---------- ACCESSIBILITY ---------- */
.visually-hidden{
  position:absolute!important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap
}

/* =========================================================
   RESPONSIVE
   Mobile-first tweaks for cleaner small screens
   ========================================================= */

/* <= 1024px (tablets / small laptops) */
@media (max-width:1024px){
  .container{ width:min(1040px,92%) }
  .hero{ grid-template-columns:1fr; gap:1.2rem }
  .kpi{ grid-template-columns:repeat(3,1fr) }
}

/* <= 900px (tablets & large phones) */
@media (max-width:900px){
  .headline{ font-size:clamp(28px,6vw,36px) }
  .nav-links{ display:none }                 /* hide desktop links */
  .mobile-toggle{ display:inline-flex }      /* if you have a toggle */

  .hero{ padding:20px 0 44px }
  .hero-gallery .tile{ min-height:150px }
  .kpi{ grid-template-columns:1fr 1fr }
  .grid.cols-3,.grid.cols-4{ grid-template-columns:1fr 1fr }
  .contact-cards{ grid-template-columns:1fr }
}

/* <= 640px (phones) */
@media (max-width:640px){
  nav{ padding:10px 0 }
  .brand .logo-img{ width:56px; height:56px }
  .brand .name{ font-size:1rem }
  .page-title{ padding:14px 0 4px }
  .headline{ font-size:clamp(24px,7vw,32px) }

  .hero .card{ padding:1.1rem }
  p.lead{ font-size:1rem }

  .hero-gallery{ grid-template-columns:1fr 1fr; gap:.75rem }
  .hero-gallery .tile{ min-height:130px; border-radius:14px }

  .kpi{ grid-template-columns:1fr; gap:.8rem }

  .grid.cols-2,.grid.cols-3,.grid.cols-4{ grid-template-columns:1fr }
  .partner-logo-wrap{ height:100px }
  .contact .info .row{ grid-template-columns:1fr }
}

/* ---------- Mobile nav drawer (when body.nav-open) ---------- */
.mobile-toggle{ display:none } /* you can style the burger in HTML */
.nav-open .nav-links{
  display:flex; flex-direction:column;
  position:absolute; top:64px; right:4%;
  background:var(--bg-soft); padding:10px;
  border-radius:14px; border:1px solid rgba(255,255,255,.08)
}

/* ---------- Utilities ---------- */
.mt-1{ margin-top:.25rem } .mt-2{ margin-top:.5rem } .mt-3{ margin-top:.75rem } .mt-4{ margin-top:1rem }
.mb-1{ margin-bottom:.25rem } .mb-2{ margin-bottom:.5rem } .mb-3{ margin-bottom:.75rem } .mb-4{ margin-bottom:1rem }
.space-x-1 > * + *{ margin-left:.25rem } .space-x-2 > * + *{ margin-left:.5rem }
/* ================== MOBILE BURGER MENU ================== */

/* Base button (hidden on desktop) */
.mobile-toggle {
  display: none; /* shown on mobile */
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: var(--bg-soft);
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 10px;
  cursor: pointer;
  transition: background 0.25s ease;
}

/* Hover feedback */
.mobile-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Three lines (burger bars) */
.mobile-toggle .bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Show burger on small screens */
@media (max-width: 900px) {
  .mobile-toggle {
    display: inline-flex;
  }
}

/* Dropdown panel (opens under right-side burger) */
.nav-open .nav-links {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 64px;
  right: 4%;              /* ✅ aligns under right-side burger */
  left: auto;             /* cancel left positioning */
  background: var(--bg-soft);
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 60;
  animation: slideDown 0.25s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Smooth dropdown animation */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animate burger to “X” when open */
.nav-open .mobile-toggle .bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-open .mobile-toggle .bar:nth-child(2) {
  opacity: 0;
}
.nav-open .mobile-toggle .bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}