:root{
  --brand:#df2635;
  --brand-2:#ff9f1c;
}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;background:#0b0f1a;color:#e2e8f0;line-height:1.6}
a{color:#ffd166;text-decoration:none}
a:hover{text-decoration:underline}
.navbar{position:sticky;top:0;z-index:50;background:rgba(11,15,26,.75);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.08)}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.brand{display:flex;gap:.75rem;align-items:center;padding:14px 0}
.brand img{width:40px;height:40px;border-radius:10px}
.brand span{font-weight:700;letter-spacing:.3px}
.hero{position:relative;border-radius:24px;overflow:hidden;margin:28px 0;box-shadow:0 10px 40px rgba(0,0,0,.4)}
.hero img{width:100%;height:360px;object-fit:cover;filter:brightness(1)}

.hero .overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2rem}
.kicker{font-weight:700;color:#ffd166;letter-spacing:.2em;text-transform:uppercase;font-size:.85rem}
.title{font-size:clamp(28px,4vw,44px);font-weight:800;margin:.2rem 0 1rem}
.subtitle{font-size:1.05rem;max-width:780px;color:#cbd5e1}
.ribbon{display:inline-flex;gap:.5rem;align-items:center;background:linear-gradient(45deg,var(--brand),var(--brand-2));padding:.5rem 1rem;border-radius:999px;color:#fff;font-weight:700;margin-top:1rem;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;margin:30px 0}
.card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:20px;box-shadow:0 6px 30px rgba(0,0,0,.25)}
.card .card-body{padding:22px}
.card h2{margin:0 0 14px;font-size:1.25rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid .full{grid-column:1/-1}
label{font-size:.92rem;color:#cbd5e1;margin-bottom:6px;display:block}
input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:#e2e8f0;outline:none}
input::placeholder{color:#000000}
.btn{display:inline-block;padding:12px 20px;border-radius:14px;border:0;background:linear-gradient(45deg,var(--brand-2),var(--brand));color:#1b1b1b;font-weight:800;letter-spacing:.3px;cursor:pointer;box-shadow:0 10px 30px rgba(230,57,70,.35)}
.btn:hover{filter:brightness(1.05)}
.small{font-size:.8rem;color:#94a3b8}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gallery img{width:100%;height:160px;object-fit:cover;border-radius:14px}
.footer{opacity:.7;text-align:center;margin:32px 0}
.success{color:#22c55e}
.error{color:#fca5a5}
.badge{display:inline-block;padding:.35rem .7rem;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14)}
@media (max-width:900px){.grid{grid-template-columns:1fr} .hero img{height:300px}}
/* === Gurkha Header (Logo left, tabs/burger right) === */
:root{
  --bg:#0b0f1a;
  --panel:#0e1322;
  --ink:#0c0d0e;
  --hair:rgba(255,255,255,.08);
  --accent1:#ff9f1c;
  --accent2:#e63946;
}

.site-header{
  position:sticky; top:0; z-index:1000;
  background:linear-gradient(180deg, rgba(14,19,34,.96), rgba(14,19,34,.92));
  border-bottom:1px solid var(--hair);
  backdrop-filter: blur(6px);
}
.site-header .shell{
  max-width:1100px; margin:0 auto;
  padding:10px 14px;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
}

/* Brand left */
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.brand img{width:44px; height:44px; border-radius:10px; object-fit:cover}
.brand span{font-weight:1000}

/* Tabs right */
.tabs{display:flex; align-items:center; gap:8px}
.tabs a{
  display:inline-block; padding:8px 12px; border-radius:999px;
  color:var(--ink); text-decoration:none; border:1px solid transparent;
}
.tabs a:hover{background:rgba(255,255,255,.06); border-color:var(--hair)}
.tabs a.active{
  background:linear-gradient(45deg,var(--accent1),var(--accent2));
  color:#0b0f1a; font-weight:800;
}

/* Burger right (hidden desktop) */
.burger{display:none; background:none; border:1px solid var(--hair);
  border-radius:8px; padding:6px 8px; cursor:pointer}
.burger-bar{display:block; width:22px; height:2px; background:var(--ink); margin:4px 0}

/* Mobile drawer */
.drawer{background:var(--panel); border-top:1px solid var(--hair)}
.drawer-links{display:flex; flex-direction:column; gap:6px; padding:10px}
.drawer-links a{padding:10px; border-radius:8px; color:var(--ink); text-decoration:none}
.drawer-links a:hover{background:rgba(255,255,255,.06)}
.drawer-links a.active{
  background:linear-gradient(45deg,var(--accent1),var(--accent2));
  color:#0b0f1a; font-weight:800;
}

/* Responsive */
@media (max-width: 768px){
  .tabs{display:none}   /* hide desktop tabs */
  .burger{display:block}
  .brand img{width:38px;height:38px}
}

.brand span{
  font-weight:700;
  font-size:1.5rem;   /* 20px */
  letter-spacing:.6px;
  color:var(--ink);
}

/* Portrait-oriented product grid */
.portrait-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  justify-items: center;
}

.portrait-grid img {
  width: 100%;
  max-width: 300px;   /* keeps portrait look consistent */
  height: auto;       /* preserve 1024x1536 aspect ratio */
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  transition: transform .25s ease, box-shadow .25s ease;
}

.portrait-grid img:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
}
.hero {
  margin: 0 auto;
  max-width: 1536px;   /* keeps it crisp at native size */
  border-radius: 16px;
  overflow: hidden;
}

.hero .banner-img {
  width: 100%;         /* responsive full width */
  height: auto;        /* keep aspect ratio (1536x1024) */
  display: block;
  object-fit: cover;   /* if you ever crop, it fills nicely */
  border-radius: 16px;
  box-shadow: 0 12px 36px rgba(160, 156, 156, 0.35);
}

/* Grid for portrait 1024x1536 images */
.portrait-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  justify-items: center;
}

.portrait-grid img {
  width: 100%;
  max-width: 300px;        /* keeps them portrait-sized */
  aspect-ratio: 2 / 3;     /* 1024x1536 ratio = 2:3 */
  object-fit: cover;       /* crops evenly if resized */
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  transition: transform .25s ease, box-shadow .25s ease;
}

.portrait-grid img:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

/* --- Portrait product grid for 1024x1536 images --- */
.product-grid{
  display:grid;
  gap:18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.product-tile{
  border-radius:14px;
  overflow:hidden;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}

/* Ensure images keep 2:3 aspect and look consistent */
.product-tile img{
  display:block;
  width:100%;
  height:auto;                 /* keep native ratio */
  aspect-ratio: 2 / 3;         /* 1024x1536 = 2:3 */
  object-fit: cover;           /* safe if any image isn't exact 2:3 */
  border-radius:0;
}

/* Kill any old gallery sizing that might conflict */
.gallery img,
.product-grid img{
  height:auto !important;
}

/* Responsive columns */
@media (max-width: 1100px){
  .product-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 780px){
  .product-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .product-grid{ grid-template-columns: 1fr; }
}
/* About Us section */
.about-wrap{
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  padding: 40px 20px;
}

.about-logo img{
  width: 250px; 
  height: auto;
  margin-bottom: 20px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
}

.about-text h1{
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 900;
  margin-bottom: 22px;
  background: linear-gradient(45deg, #ff9f1c, #e63946);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about-text p{
  font-size: 1.05rem;
  line-height: 1.75;
  color: #e6edf3;
  margin-bottom: 18px;
}

/* Giveaway heading */
.giveaway-heading{
  text-align:center;
  margin: 40px auto 30px;
  padding: 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,159,28,.15), rgba(230,57,70,.15));
  border: 1px solid rgba(255,255,255,.08);
  max-width: 900px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

.giveaway-heading h2{
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  line-height: 1.5;
  color: #e6edf3;
  margin: 0;
}

.giveaway-heading h2 span{
  color: #ffd166; /* warm highlight */
}

.giveaway-heading h2 strong{
  color: #ff4d6d; /* stronger red highlight */
}

.giveaway-heading h2 small{
  display:block;
  font-size: .95rem;
  font-weight: 400;
  color: #9aa4b2;
  margin-top: 6px;
}
/* Inputs: consistent size, smooth focus */
.form-grid { display:grid; grid-template-columns: 1fr; gap:14px; }
.form-grid .full { grid-column: 1/-1; }

.form-grid input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #e6edf3;
  transition: border-color .2s, box-shadow .2s, background .2s;
}

.form-grid input::placeholder { color: #000000; }
.form-grid input:focus {
  outline: none;
  border-color: #ff9f1c;
  box-shadow: 0 0 0 3px rgba(255,159,28,.25);
  background: rgba(255,255,255,.08);
}

/* Autofill (Chrome) */
input:-webkit-autofill {
  -webkit-text-fill-color: #121213 !important;
  -webkit-box-shadow: 0 0 0 1000px lab(1.37% 0 0 / 0.06) inset !important;
  caret-color: #000000 !important;
}

/* Button with warm glow */
.btn.btn-glow {
  padding: 12px 18px;
  border-radius: 14px;
  border: 0;
  background: linear-gradient(45deg, #ff9f1c, #e63946);
  color: #0b0f1a;
  font-weight: 900;
  letter-spacing: .2px;
  box-shadow: 0 12px 24px rgba(230,57,70,.35);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.btn.btn-glow:hover { transform: translateY(-1px); filter: brightness(1.03); }
.btn.btn-glow:active { transform: translateY(0); box-shadow: 0 8px 18px rgba(230,57,70,.28); }

/* Mobile spacing */
@media (max-width: 640px){
  .form-grid { gap: 12px; }
  .btn.btn-glow { width: 100%; }
}

/* === Override input colors for dark theme === */
input, .form-grid input, textarea, select{
  background:#141826 !important;   /* dark field */
  color:#e6edf3 !important;        /* light text */
  border:1px solid #2a3140 !important;
}

input::placeholder,
.form-grid input::placeholder{
  color:#94a3b8 !important;        /* soft grey placeholder */
}

/* Chrome autofill — keep dark */
input:-webkit-autofill{
  -webkit-text-fill-color:#e6edf3 !important;
  -webkit-box-shadow:0 0 0 1000px #141826 inset !important;
  caret-color:#e6edf3 !important;
}