@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@700;800;900&display=swap");

:root{
  --black:#030303;
  --panel:rgba(5,5,8,.74);
  --panel-strong:rgba(5,5,7,.9);
  --cream:#f7efe6;
  --muted:#aaa09c;
  --orange:#ff6b2d;
  --gold:#ffc83d;
  --pink:#ff38a9;
  --violet:#a56bff;
  --purple:#4c0e87;
  --line:rgba(255,255,255,.13);
  --orange-line:rgba(255,107,45,.5);
  --violet-line:rgba(165,107,255,.46);
  --shadow:0 35px 100px rgba(0,0,0,.72);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:#000}
body{min-height:100vh;color:var(--cream);font-family:"Courier New",ui-monospace,SFMono-Regular,Menlo,monospace;background:#000;overflow-x:hidden;position:relative}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
img{display:block;width:100%;height:100%;object-fit:cover}

.site-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;

  background-color:#000;

  background-image:
    linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.82) 32%,rgba(0,0,0,.52) 62%,rgba(0,0,0,.25) 100%),
    linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.48) 76%,#000 100%),
    url("assets/baadjie-bg.png");

  /* Laptop/desktop: portrait artwork sits large on the right without turning into a tiny strip */
  background-size:min(82vw, 1280px) auto;
  background-position:right top;
  background-repeat:no-repeat;
  background-attachment:fixed;

  filter:saturate(1.12) contrast(1.05) brightness(.88);
}
.site-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 78% 20%,rgba(255,56,169,.16),transparent 25%),
    radial-gradient(circle at 70% 54%,rgba(255,107,45,.10),transparent 28%),
    radial-gradient(circle at 45% 72%,rgba(165,107,255,.12),transparent 32%);
  mix-blend-mode:screen;
  pointer-events:none;
}

/* CRITICAL: content must sit above the background layer */
.site-header,
main,
.site-footer{
  position:relative;
  z-index:2;
}
.grain{
  position:fixed;
  inset:0;
  z-index:100;
  pointer-events:none;
  opacity:.075;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 260 260' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

.section-shell{width:min(1180px,calc(100% - 72px));margin-inline:auto}

.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  display:grid;
  grid-template-columns:170px 1fr 150px;
  align-items:center;
  width:min(1180px,calc(100% - 72px));
  margin-inline:auto;
  padding:28px 0 18px;
}
.site-header::before{
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:96px;
  z-index:-1;
  background:linear-gradient(to bottom,rgba(0,0,0,.92),rgba(0,0,0,.42),transparent);
  backdrop-filter:blur(12px);
}
.brand,.footer-brand{
  font-family:Inter,system-ui,sans-serif;
  font-size:28px;
  font-weight:900;
  letter-spacing:-.07em;
  text-transform:lowercase;
  color:var(--orange);
  text-shadow:0 0 24px rgba(255,107,45,.32);
}
.nav-links{display:flex;justify-content:center;gap:36px;font-size:12px;text-transform:uppercase;letter-spacing:.09em}
.nav-links a{opacity:.88;transition:.2s}
.nav-links a:hover{color:var(--orange)}
.nav-cta{justify-self:end;color:var(--orange);border:1px solid var(--orange-line);padding:10px 14px;text-transform:uppercase;font-size:12px;font-weight:900;background:rgba(255,107,45,.07)}

.hero{min-height:100vh;display:grid;grid-template-columns:.95fr .78fr;align-items:center;gap:64px;padding-top:105px;border-bottom:1px solid var(--line)}
.eyebrow{color:var(--violet);text-transform:uppercase;letter-spacing:.15em;font-size:12px;font-weight:900;margin-bottom:18px}
.hero h1{
  max-width:620px;
}

/* Lighter Bakkie/Hilux-sticker inspired hero type */
.brand-title{
  font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  text-transform:uppercase;
  line-height:.86;
  letter-spacing:-.02em;
  color:#f8f1e9;
  font-weight:700;
  transform:rotate(-.8deg) skew(-1.5deg);
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.58));
}

.brand-title span{
  display:block;
  font-size:clamp(46px,6.2vw,86px);
  font-weight:700;
  text-shadow:
    2px 2px 0 #101010,
    5px 5px 0 rgba(0,0,0,.62);
}

.brand-title strong{
  display:block;
  font-family:Inter,system-ui,sans-serif;
  font-size:clamp(66px,8.5vw,122px);
  font-weight:900;
  text-transform:lowercase;
  letter-spacing:-.09em;
  color:var(--orange);
  margin-top:2px;
  text-shadow:
    2px 2px 0 #101010,
    5px 5px 0 rgba(0,0,0,.66),
    0 0 28px rgba(255,107,45,.38);
}

.hero-text{margin-top:26px;max-width:560px;color:#eee4de;font-size:18px;line-height:1.55;text-transform:lowercase}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border:1px solid var(--orange-line);text-transform:uppercase;font-size:13px;font-weight:950;transition:.22s}
.button.primary{color:#080808;background:linear-gradient(90deg,var(--orange),var(--pink));box-shadow:0 0 35px rgba(255,56,169,.22)}
.button.secondary{color:var(--violet);border-color:var(--violet-line);background:rgba(165,107,255,.06)}
.button:hover{transform:translateY(-2px);filter:saturate(1.12)}

.hero-card{border:1px solid rgba(255,255,255,.13);background:var(--panel);box-shadow:var(--shadow);backdrop-filter:blur(18px);padding:34px;position:relative;overflow:hidden}
.hero-card::before{content:"";position:absolute;inset:-1px;background:linear-gradient(135deg,rgba(255,107,45,.20),transparent 42%,rgba(165,107,255,.22));pointer-events:none}
.card-kicker{position:relative;color:var(--orange);font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:900;margin-bottom:52px}
.hero-card h2{position:relative;font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-size:50px;font-weight:700;line-height:1;text-transform:uppercase}
.hero-card p:last-child{position:relative;margin-top:22px;color:var(--muted);line-height:1.55}

.drops-section{padding:52px 0}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:26px}
.section-heading h2{max-width:720px;font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-size:clamp(38px,5.2vw,70px);font-weight:700;line-height:1;text-transform:uppercase}
.drop-tools{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.filter-button{cursor:pointer;border:1px solid var(--line);background:rgba(0,0,0,.45);color:var(--muted);padding:10px 13px;text-transform:uppercase;font-size:12px}
.filter-button.is-active,.filter-button:hover{color:#050505;background:var(--violet);border-color:var(--violet)}
.product-status{color:var(--muted);margin:18px 0}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.product-card{background:rgba(4,4,6,.88);border:1px solid rgba(255,255,255,.105);box-shadow:0 28px 80px rgba(0,0,0,.65);backdrop-filter:blur(18px);overflow:hidden;transition:.25s}
.product-card:hover{transform:translateY(-7px);border-color:var(--orange-line);box-shadow:0 35px 100px rgba(0,0,0,.8),0 0 40px rgba(255,56,169,.1)}
.product-image{height:270px;background:radial-gradient(circle at 50% 38%,#19191f,#050505 68%);padding:18px;display:flex;align-items:center;justify-content:center;position:relative}
.product-image::after{content:"";position:absolute;left:14%;right:14%;bottom:20px;height:18px;border-radius:50%;background:rgba(0,0,0,.72);filter:blur(10px)}
.product-image img{width:90%;height:90%;object-fit:contain;position:relative;z-index:2;filter:saturate(1.05) contrast(1.08) brightness(.84) drop-shadow(0 24px 22px rgba(0,0,0,.88))}
.product-info{padding:18px 16px 20px}
.product-category{color:var(--violet);font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:900;margin-bottom:9px}
.product-title{font-size:14px;text-transform:uppercase;margin-bottom:8px}
.product-meta{color:var(--muted);font-size:12px;text-transform:uppercase;line-height:1.45}
.product-desc{margin-top:12px;color:#d8d0cc;font-size:12px;line-height:1.5}
.product-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px}
.price{color:var(--orange);font-weight:950;text-shadow:0 0 18px rgba(255,107,45,.28)}
.product-link{color:#080808;background:var(--orange);padding:9px 11px;font-size:11px;text-transform:uppercase;font-weight:950}
.sold{opacity:.45}
.sold .product-link{pointer-events:none;background:#777;color:#111}

.philosophy-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:24px;padding:28px 0}
.statement-card,.copy-card,.process-card{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(18px)}
.statement-card{padding:36px}
.statement-card h2{font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-size:clamp(46px,5.4vw,72px);font-weight:700;line-height:1.08;text-transform:uppercase}
.statement-card span{display:block}
.statement-card span:nth-child(1){color:var(--orange)}
.statement-card span:nth-child(2){color:var(--pink)}
.statement-card span:nth-child(3){color:var(--violet)}
.copy-card{padding:36px}
.copy-card h3{font-size:24px;margin-bottom:16px}
.copy-card p{color:#ddd3ce;line-height:1.7}
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:28px 0 54px}
.process-card{padding:30px}
.process-card span{color:var(--orange);font-weight:950}
.process-card h3{margin:22px 0 12px;text-transform:uppercase;color:var(--violet)}
.process-card p{color:#d8d0cc;line-height:1.6}

.site-footer{display:grid;grid-template-columns:1fr 1fr;gap:30px;border-top:1px solid var(--line);padding:34px 0 48px}
.footer-brand{font-size:44px}
.site-footer p{margin-top:10px;color:#ddd;line-height:1.4}
.footer-links{display:flex;justify-content:flex-end;align-items:center;gap:28px;color:var(--orange);font-size:12px;text-transform:uppercase;font-weight:900}
.reveal{animation:rise .75s ease both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:920px){
  .section-shell,.site-header{width:min(100% - 34px,1180px)}
  .site-header{grid-template-columns:1fr auto}
  .nav-links{display:none}
  .hero{grid-template-columns:1fr;padding-top:120px;gap:26px}
  .hero-card{max-width:none}
  .section-heading{display:block}
  .drop-tools{justify-content:flex-start;margin-top:18px}
  .product-grid{grid-template-columns:1fr 1fr;gap:14px}
  .philosophy-grid,.process-grid,.site-footer{grid-template-columns:1fr}
  .footer-links{justify-content:flex-start;flex-wrap:wrap}
  .site-bg{
    background-image:
      linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.58) 78%,#000 100%),
      url("assets/baadjie-bg.png");
    background-size:auto 100svh;
    background-position:center top;
    background-repeat:no-repeat;
    background-attachment:scroll;
  }
}
@media(max-width:560px){
  .section-shell,.site-header{width:min(100% - 26px,1180px)}
  .nav-cta{display:none}
  .brand-title span{font-size:42px}.brand-title strong{font-size:66px}
  .hero-text{font-size:15px}
  .hero-actions{display:grid}
  .button{width:100%}
  .product-grid{grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px}
  .product-image{height:170px;padding:10px}
  .statement-card,.copy-card,.process-card,.hero-card{padding:24px}
  .footer-brand{font-size:38px}
}


/* LAPTOP/WIDE SCREEN BACKGROUND POSITIONING */
@media(min-width:921px){
  .site-bg{
    background-size:min(82vw, 1280px) auto;
    background-position:right top;
  }
}

@media(min-width:1400px){
  .site-bg{
    background-size:72vw auto;
    background-position:right top;
  }
}


/* FINAL MOBILE 2-PRODUCT OVERRIDE */
@media(max-width:560px){
  .product-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }

  .product-image{
    height:170px;
    padding:10px;
  }

  .product-info{
    padding:12px 10px 14px;
  }

  .product-title{
    font-size:14px;
  }

  .product-desc{
    display:none;
  }

  .product-bottom{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }

  .product-link{
    width:100%;
    text-align:center;
  }

  .brand-title{
    transform:rotate(-.4deg) skew(-.8deg);
  }

  .brand-title span{
    font-size:42px;
  }

  .brand-title strong{
    font-size:66px;
  }
}
.product-modal{
  position:fixed;
  inset:0;
  z-index:999;
  background:rgba(0,0,0,.92);
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
}

.product-modal.is-open{
  display:flex;
}

.product-modal img{
  width:min(92vw,900px);
  max-height:88vh;
  object-fit:contain;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.9));
}

.product-modal-close{
  position:absolute;
  top:22px;
  right:22px;
  background:var(--orange);
  color:#050505;
  border:0;
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
  text-transform:uppercase;
}