:root{
  --bg:#000;
  --fg:#fff;
  --muted:#cfcfcf;
  --line:#1a1a1a;
  --line-2:#2a2a2a;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:"League Spartan", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
  line-height:1.5;
}

/* Loader */
.loader{
  position:fixed; inset:0;
  background:var(--bg);
  display:grid; place-items:center;
  z-index:9999;
  transition:opacity .6s ease, visibility .6s ease;
}
.loader.hide{ opacity:0; visibility:hidden; }
.loader-mark{
  font-family:"Baron","League Spartan",sans-serif;
  font-size:clamp(28px,4vw,46px);
  letter-spacing:.06em;
  animation:floatIn .9s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes floatIn{
  from{ transform:translateY(18px); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}

/* Layout helpers */
.container{ width:min(1120px, 92%); margin-inline:auto; }
.narrow{ width:min(850px, 92%); margin-inline:auto; }
.section{ padding: clamp(64px, 12vw, 120px) 0; border-top:1px solid var(--line); scroll-margin-top:90px; }
.section-title{
  font-size:clamp(28px,4.2vw,40px);
  letter-spacing:.02em;
  margin:0 0 18px;
}
.lead{ font-size:clamp(16px,2.2vw,20px); color:var(--muted); }

/* Navbar */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(0,0,0,.75);
  backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:8px 4%; }
.brand{
  display:inline-flex; align-items:baseline; gap:.25rem; text-decoration:none; color:var(--fg);
}
.brand-mark{
  font-family:"Baron","League Spartan",sans-serif;
  font-weight:700; letter-spacing:.08em;
  font-size:clamp(18px,2.6vw,22px);
}
.brand-thin{
  font-weight:400; opacity:.65; font-size:clamp(16px,2.2vw,18px);
}

.nav-logo {
  height: 42px;
  width: auto;
}

/* nav links */
.nav-links{
  display:flex; align-items:center; gap:18px; list-style:none; margin:0; padding:0;
}
.nav-link{
  position:relative; padding:8px 10px; text-decoration:none; color:var(--fg);
}
.nav-link::after{
  content:""; position:absolute; left:10px; right:10px; bottom:6px; height:1px; background:var(--fg);
  transform:scaleX(0); transform-origin:left; transition:transform .28s ease;
}
.nav-link:hover::after{ transform:scaleX(1); }

/* Dropdown (desktop) */
.nav-has-dropdown{ position:relative; }
.dropdown-toggle{
  display:none; /* mobile only; shown in small screens */
}
.dropdown{
  position:absolute; right:0; top:calc(100% + 12px);
  background:#0b0b0b; border:1px solid var(--line-2); border-radius:10px; min-width:180px;
  box-shadow:0 10px 24px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
  padding:8px;
}
.dropdown a{
  display:block; padding:10px 12px; border-radius:8px; color:var(--fg); text-decoration:none;
}
.dropdown a:hover{ background:#141414; }
.nav-has-dropdown:hover .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }

/* Mobile nav */
.nav-toggle{
  display:none; position:relative; width:42px; height:34px; background:transparent; border:0; cursor:pointer;
}
.nav-toggle span{
  position:absolute; left:8px; right:8px; height:2px; background:var(--fg); border-radius:1px; transition:transform .3s ease, opacity .3s ease, top .3s ease;
}
.nav-toggle span:nth-child(1){ top:10px; }
.nav-toggle span:nth-child(2){ top:16px; }
.nav-toggle span:nth-child(3){ top:22px; }
.nav-open .nav-toggle span:nth-child(1){ top:16px; transform:rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
.nav-open .nav-toggle span:nth-child(3){ top:16px; transform:rotate(-45deg); }

@media (max-width: 900px){
  .nav-toggle{ display:block; z-index: 200;}

  .nav-links li{
    display: flex;
  }

.nav-links li {
  border-bottom: 1px solid var(--line);
}
.nav-links li:last-child {
  border-bottom: none;
}



  .nav-links{
    position: fixed;
    top: 0; left: 0; right: 0;
    background:#0b0b0b;
    border-bottom:1px solid var(--line);
    padding:16px 18px 22px;
    /* push content *below* the sticky header dynamically */
    padding-top: calc(var(--header-h, 64px) + 8px);

    display:flex; flex-direction:column; align-items:stretch; gap:6px;

    /* fully off-screen when closed */
    transform: translateY(-100%);
    transition: transform .32s cubic-bezier(.2,.7,.2,1);

    /* ensure it sits below the header (header has z-index:50) */
    z-index: 40;
  }

  .nav-open .nav-links{ transform: translateY(0); }

  .nav-link{ padding:12px; border-radius:10px; }
  .nav-link:hover{ background:#131313; }
  .nav-has-dropdown{ display:flex; align-items:center; }
  .dropdown-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    margin-left:8px; width:30px; height:30px;
    border-radius:8px; border:1px solid #3a3a3a;
    background:#121212; cursor:pointer;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
  }
  .dropdown-toggle:hover{ border-color:#5a5a5a; background:#161616; }
  .dropdown-toggle::before{
  content:"";
  display:block;
  width:0;
  height:0;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-left:7px solid #fff;   /* ▶ right arrow */
  transition: transform 0.25s ease;
}

/* When open – arrow points down */
.nav-has-dropdown.open .dropdown-toggle::before{
  transform: rotate(90deg);      /* ▼ down arrow */
}

  /* Smooth dropdown animation (height + fade) */
  .nav-has-dropdown .dropdown{
    position:static; box-shadow:none; border:0; padding:0;
    overflow:hidden;
    display:block;              /* keep in flow for animation */
    max-height:0;               /* collapsed */
    opacity:0;
    transform: translateY(-4px);
    transition: max-height .28s ease, opacity .24s ease, transform .24s ease;
  }
  .nav-has-dropdown.open .dropdown{
  max-height: 240px;               /* 5 × ~44px */
  overflow-y:auto;                 /* enable scrolling when content exceeds */
  -webkit-overflow-scrolling: touch; /* smooth on iOS */
  opacity:1;
  transform: translateY(0);
}

  .dropdown a{
    display:block; padding:10px 12px; border-radius:8px; color:var(--fg); text-decoration:none;
  }
  .dropdown a:hover{ background:#131313; }
}

/* Hero */
.hero{ border-top:0; padding-top:clamp(96px, 14vw, 150px); padding-bottom:clamp(72px, 10vw, 120px); }
.hero-inner{ text-align:center; }
.hero-title{
  font-family:"Baron","League Spartan",sans-serif;
  font-size:clamp(34px,7vw,74px);
  line-height:1.02; letter-spacing:.02em; margin:0 0 10px;
}
.hero-title span{ opacity:.7; font-size:clamp(24px, 5.4vw, 48px); }
.hero-kicker{ color:var(--muted); font-size:clamp(16px,2.4vw,20px); margin:0 0 22px; }

/* Quote */
.quote{
  width:min(820px, 88%); margin:48px auto 0; padding:18px 0 0; color:#bdbdbd;
  text-align:center; border-top:1px dashed var(--line);
}
.quote p{ font-size:clamp(18px,3.6vw,24px); margin:0 0 6px; }
.quote footer{ font-size:14px; opacity:.75; }

/* Buttons */
.btn{
  display:inline-block; padding:12px 18px; border-radius:999px; text-decoration:none; transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  will-change:transform;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-outline{ color:var(--fg); border:1px solid var(--fg); }
.btn-outline:hover{ background:var(--fg); color:var(--bg); }
.btn-solid{ background:var(--fg); color:var(--bg); border:1px solid var(--fg); }
.btn-solid:hover{ background:transparent; color:var(--fg); }

/* Products */
.products-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
}
@media (max-width: 900px){
  .products-grid{ grid-template-columns:1fr; }
}
.card{
  border:1px solid var(--line-2); border-radius:16px; overflow:hidden; background:#0b0b0b;
  display:flex; flex-direction:column; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card:hover{
  transform:translateY(-4px);
  border-color:#3a3a3a;
  box-shadow:0 16px 30px rgba(0,0,0,.35);
}
.card-body{ padding:18px 18px 6px; }
.card-title{
  font-size:clamp(20px,2.8vw,22px);
  margin:0 0 6px;
}
.card-text{ color:var(--muted); margin:0 0 14px; }
.card-footer{
  display:flex; justify-content:space-between; align-items:center; padding:12px 18px 18px;
  border-top:1px solid var(--line);
}
.card-link{ color:var(--fg); text-decoration:none; border-bottom:1px solid transparent; }
.card-link:hover{ border-bottom-color:var(--fg); }
.chip{
  display:inline-block; padding:6px 10px; font-size:12px; border:1px solid var(--line-2); border-radius:999px; color:#bcbcbc;
}

/* Lists */
.bullet-list{ margin:14px 0 0; padding-left:18px; color:#d8d8d8; }
.bullet-list li{ margin:8px 0; }

/* Contact */
.contact-wrap{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:24px; align-items:start;
}
@media (max-width: 900px){
  .contact-wrap{ grid-template-columns:1fr; }
}
.contact-form{
  border:1px solid var(--line-2); border-radius:16px; padding:18px; background:#0b0b0b;
}
.form-row{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
label{ font-size:14px; color:#cfcfcf; }
input, textarea{
  background:#0f0f0f; border:1px solid var(--line-2); color:var(--fg); border-radius:10px; padding:12px 12px;
  outline:none; transition:border-color .2s ease, box-shadow .2s ease;
}
input:focus, textarea:focus{
  border-color:#3a3a3a; box-shadow:0 0 0 4px rgba(255,255,255,.03);
}
.form-note{ font-size:13px; color:#bdbdbd; margin-top:8px; }
.contact-aside{
  border:1px solid var(--line-2); border-radius:16px; padding:18px; background:#0b0b0b;
}
.link-underline {
  color: #ffffff;          /* Make the text white */
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  transition: 0.3s ease;
}

.link-underline:hover {
  border-bottom-color: #ffffff;
  color: #ffffff;
}
.mini{ margin:0 0 10px; font-size:14px; color:#bdbdbd; }

/* Footer */
.site-footer{
  border-top:1px solid var(--line);
  padding:18px 0; color:#bdbdbd; font-size:14px;
}
.footer-inner{ display:flex; align-items:center; gap:10px; }
.sep{ opacity:.35; }

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(16px); }
.reveal.revealed{ opacity:1; transform:translateY(0); transition:opacity .7s ease, transform .7s ease; }