/* ============================================================
   DENILK — Blueprint Precision Theme
   Navy blueprint + brass nameplate accent, condensed industrial type
   ============================================================ */

:root{
  --navy-deep:   #081F33;
  --navy:        #0B2942;
  --navy-panel:  #0E3252;
  --line-cyan:   #7FC7E8;
  --line-cyan-soft: rgba(127,199,232,0.35);
  --bright-cyan: #58B9E8;
  --paper:       #EDEFEC;
  --paper-line:  #D8DCD6;
  --ink:         #142B3D;
  --ink-soft:    #4A5C6B;
  --brass:       #C29A5B;
  --brass-dark:  #9C7A42;
  --radius:      2px;

  --font-display: 'Space Grotesk', sans-serif;
  --font-label: 'Oswald', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family: inherit; cursor:pointer; }
:focus-visible{ outline: 2px solid var(--bright-cyan); outline-offset: 2px; }

h1,h2,h3{ font-family: var(--font-display); letter-spacing: 0.01em; }

.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--line-cyan);
  margin-bottom: 14px;
  display:block;
}
.eyebrow--dark{ color: var(--brass-dark); }

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 13px 26px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: all .2s ease;
}
.btn-primary{
  background: var(--brass);
  color: var(--navy-deep);
  border-color: var(--brass);
}
.btn-primary:hover{ background: var(--brass-dark); border-color: var(--brass-dark); }
.btn-outline{
  border-color: var(--line-cyan-soft);
  color: var(--paper);
}
.btn-outline:hover{ border-color: var(--line-cyan); background: rgba(127,199,232,0.08); }
.btn-ghost{
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--line-cyan);
  border: 1px solid var(--line-cyan-soft);
  padding: 8px 16px;
}
.btn-ghost:hover{ background: rgba(127,199,232,0.08); }
.nav-upcoming{
  cursor: default;
  color: var(--brass);
  border-color: rgba(194,154,91,0.4);
  position: relative;
  letter-spacing: 0.1em;
}
.nav-upcoming::before{
  content:"";
  display:inline-block;
  width:6px; height:6px;
  border-radius:50%;
  background: var(--brass);
  margin-right:8px;
  box-shadow: 0 0 0 3px rgba(194,154,91,0.2);
}
.nav-upcoming:hover{ background: transparent; }

/* ============ HEADER / NAV ============ */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  background: rgba(8,31,51,0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(127,199,232,0.15);
}
.nav-wrap{
  max-width: 1280px; margin:0 auto;
  display:flex; align-items:center; gap: 24px;
  padding: 14px 28px;
}
.brand{ display:flex; align-items:center; gap:10px; color: var(--paper); margin-right:auto; }
.brand-mark{ color: var(--line-cyan); flex-shrink:0; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text strong{ font-family: var(--font-display); font-size:1.15rem; letter-spacing:0.04em; }
.brand-text em{ font-style:normal; font-family: var(--font-mono); font-size:0.58rem; letter-spacing:0.1em; color: var(--line-cyan); }

.main-nav{ display:flex; gap: 28px; }
.main-nav a{
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: rgba(237,239,236,0.8);
  text-transform: uppercase;
  position: relative;
  padding: 4px 0;
}
.main-nav a:hover{ color: var(--paper); }
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background: var(--brass); transition: width .2s ease;
}
.main-nav a:hover::after{ width:100%; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; }
.nav-toggle span{ width:22px; height:2px; background: var(--paper); display:block; }

/* ============ HERO ============ */
.hero{
  position: relative;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
  color: var(--paper);
  padding: 140px 28px 80px;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.blueprint-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(127,199,232,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127,199,232,0.07) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 30% 40%, black 40%, transparent 85%);
}
.hero-inner{
  position:relative; z-index:2;
  max-width: 1280px; margin:0 auto;
  display:grid; grid-template-columns: 1.05fr 0.95fr;
  gap: 48px; align-items:center; width:100%;
}
.hero h1{
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 22px;
}
.hero h1 span{ color: var(--brass); }
.hero-sub{
  font-size: 1.02rem; line-height:1.6;
  color: rgba(237,239,236,0.78);
  max-width: 480px;
  margin-bottom: 32px;
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom: 48px; }
.hero-stats{ display:flex; gap: 40px; }
.hero-stats strong{ display:block; font-family: var(--font-display); font-size:1.7rem; color: var(--paper); }
.hero-stats span{ font-family: var(--font-mono); font-size:0.68rem; letter-spacing:0.06em; color: var(--line-cyan); text-transform:uppercase; }

.hero-viewport{ position:relative; }

.latest-stack{
  position:relative;
  width:100%;
  min-height: 420px;
  max-height: 600px;
  aspect-ratio: 1/1.05;
}
.latest-frame{
  position:absolute;
  border: 1px solid rgba(127,199,232,0.35);
  background: var(--navy-panel);
  overflow:hidden;
  box-shadow: 0 24px 48px rgba(0,0,0,0.4);
  transition: transform .35s ease, box-shadow .35s ease;
}
.latest-frame img{
  width:100%; height:100%; object-fit: cover; display:block;
  filter: saturate(1.05) contrast(1.03);
}
.latest-frame::before, .latest-frame::after{
  content:""; position:absolute; width:14px; height:14px;
  border-top: 1px solid var(--line-cyan); border-left: 1px solid var(--line-cyan);
  top:-1px; left:-1px; z-index:3;
}
.latest-frame::after{ top:auto; left:auto; bottom:-1px; right:-1px; border:none; border-bottom:1px solid var(--line-cyan); border-right:1px solid var(--line-cyan); }

.latest-frame--prev{
  top: 0; left: 0;
  width: 62%; height: 58%;
  z-index: 1;
  filter: grayscale(0.15);
  opacity: 0.88;
}
.latest-frame--now{
  bottom: 0; right: 0;
  width: 74%; height: 68%;
  z-index: 2;
  border-color: var(--brass);
}
.latest-frame--now:hover, .latest-frame--prev:hover{ transform: translateY(-4px); }

.latest-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding: 10px 12px 8px;
  background: linear-gradient(0deg, rgba(8,31,51,0.92) 40%, transparent 100%);
}
.latest-caption span{
  display:block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  line-height:1.35;
  color: var(--paper);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}


.frame-label{
  position:absolute; font-family: var(--font-mono); font-size:0.62rem;
  letter-spacing:0.08em; color: var(--line-cyan); text-transform:uppercase;
}
.frame-label--tl{ top:10px; left:10px; }
.frame-label--tr{ top:10px; right:10px; }
.frame-label--bl{ bottom:10px; left:10px; }
.frame-label--br{ bottom:10px; right:10px; }

.scroll-cue{
  position:absolute; bottom: 24px; left:50%; transform: translateX(-50%);
  color: var(--line-cyan); animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform: translateX(-50%) translateY(0);} 50%{ transform: translateX(-50%) translateY(6px);} }

/* ============ ESSENTIALS ============ */
.essentials{ padding: 90px 28px 20px; max-width:1280px; margin:0 auto; }
.essentials-row{
  display:flex; gap: 18px; overflow-x: auto; padding-bottom: 12px;
  scroll-snap-type: x proximity;
}
.essentials-row::-webkit-scrollbar{ height: 6px; }
.essentials-row::-webkit-scrollbar-thumb{ background: var(--paper-line); }
.essential-card{
  flex: 0 0 220px; scroll-snap-align: start;
  background:#fff; border: 1px solid var(--paper-line);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.essential-card:hover{ transform: translateY(-4px); border-color: var(--brass); box-shadow: 0 12px 24px rgba(20,43,61,0.08); }
.essential-card .essential-media{
  aspect-ratio: 4/3; background: linear-gradient(155deg, var(--navy) 0%, var(--navy-panel) 100%); overflow:hidden;
}
.essential-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.essential-card .essential-cat{
  display:block; font-family: var(--font-mono); font-size:0.6rem; letter-spacing:0.06em;
  text-transform:uppercase; color: var(--brass-dark); padding: 12px 12px 0;
}
.essential-card h4{
  font-family: var(--font-display); font-size:0.9rem; font-weight:600; color: var(--ink);
  padding: 6px 12px 14px; line-height:1.35;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}

/* ============ PRODUCT SEARCH ============ */
.product-search{
  display:flex; align-items:center; gap:10px;
  border: 1px solid var(--paper-line); background:#fff;
  padding: 12px 16px; margin-bottom: 18px; max-width: 560px;
  color: var(--ink-soft);
}
.product-search:focus-within{ border-color: var(--brass); color: var(--ink); }
.product-search input{
  flex:1; border:none; outline:none; background:none;
  font-family: var(--font-body); font-size:0.92rem; color: var(--ink);
}
.search-clear{
  background:none; border:none; color: var(--ink-soft); cursor:pointer; font-size:0.9rem; padding:2px 4px;
}
.search-clear:hover{ color: var(--ink); }
.search-status{
  font-family: var(--font-mono); font-size:0.78rem; color: var(--ink-soft); margin-bottom: 20px;
}

/* ============ PRODUCTS ============ */
.products{ padding: 50px 28px 100px; max-width:1280px; margin:0 auto; }
.section-head{ max-width: 640px; margin-bottom: 48px; }
.section-head h2, .about-copy h2, .contact-info h2{
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  color: var(--ink); font-weight:600; margin-bottom: 14px; line-height:1.1;
}
.section-sub{ color: var(--ink-soft); font-size:1rem; line-height:1.6; }

.tabs{ display:flex; gap:2px; margin-bottom: 40px; border-bottom: 1px solid var(--paper-line); flex-wrap:wrap; }
.tab{
  background:none; border:none; padding: 16px 22px;
  font-family: var(--font-mono); font-size:0.82rem; letter-spacing:0.04em; text-transform:uppercase;
  color: var(--ink-soft); position:relative; text-align:left;
}
.tab-index{ color: var(--brass-dark); margin-right:8px; }
.tab-count{
  font-family: var(--font-mono); font-size:0.68rem; color: var(--ink-soft);
  margin-left:6px; opacity:0.7;
}
.tab.is-active{ color: var(--ink); }
.tab.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background: var(--brass); }
.tab:hover{ color: var(--ink); }

.product-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 22px;
}
.product-card{
  background: #fff;
  border: 1px solid var(--paper-line);
  padding: 24px;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, border-color .2s ease;
}
.product-card.reveal-init{ opacity: 0; transform: translateY(14px); }
.product-card.reveal-init.is-visible{ opacity: 1; transform: translateY(0); transition: transform .45s cubic-bezier(.2,.7,.3,1), opacity .45s ease; }
.product-card:hover{
  transform: translateY(-5px);
  border-color: var(--brass);
  box-shadow: 0 16px 32px rgba(20,43,61,0.10);
}
.product-media{
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 3px;
  margin-bottom: 18px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-panel) 100%);
  overflow:hidden;
  position:relative;
}
.product-media::after{
  content:""; position:absolute; inset:0;
  background-image: linear-gradient(rgba(127,199,232,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(127,199,232,0.06) 1px, transparent 1px);
  background-size: 14px 14px;
}
.product-media img{ width:100%; height:100%; object-fit: cover; position:relative; z-index:1; }
.product-card h3{
  font-family: var(--font-display); font-size:1rem; font-weight:600;
  color: var(--ink); letter-spacing:-0.01em; line-height:1.35;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
}

/* ============ ABOUT ============ */
.about{ background: var(--navy-deep); color: var(--paper); padding: 100px 28px; }
.about-grid{ max-width:1280px; margin:0 auto; display:grid; grid-template-columns: 1.2fr 0.8fr; gap:60px; align-items:start; }
.about-copy p{ color: rgba(237,239,236,0.75); line-height:1.7; margin-bottom:18px; max-width: 560px; }
.about-copy h2{ color: var(--paper); }
.about-list{ margin-top: 36px; display:flex; flex-direction:column; gap:22px; }
.about-list > div{ display:flex; gap:16px; }
.about-list .num{ font-family: var(--font-mono); color: var(--brass); font-size:0.85rem; padding-top:2px; }
.about-list strong{ display:block; font-family: var(--font-display); font-weight:500; margin-bottom:4px; }
.about-list p{ margin:0; font-size:0.86rem; color: rgba(237,239,236,0.65); }

.plate{
  border: 1px solid rgba(127,199,232,0.3);
  padding: 8px;
}
.plate-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding: 14px 12px; border-bottom: 1px dashed rgba(127,199,232,0.2);
  font-size:0.85rem;
}
.plate-row:last-child{ border-bottom:none; }
.plate-row em{ font-style:normal; font-family: var(--font-mono); font-size:0.68rem; letter-spacing:0.08em; color: var(--line-cyan); text-transform:uppercase; }
.plate-row b{ font-weight:500; color: var(--paper); text-align:right; }

/* ============ CONTACT ============ */
.contact{ padding: 100px 28px; max-width:1280px; margin:0 auto; }
.contact-grid{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 60px; }
.contact-info p.section-sub{ margin-bottom:28px; max-width:420px; }
.contact-email{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-mono); font-size:1rem; color: var(--ink);
  border-bottom: 1px solid var(--ink); width:fit-content; padding-bottom:6px; margin-bottom:16px;
}
.contact-email:hover{ color: var(--brass-dark); border-color: var(--brass-dark); }
.contact-site{ font-family: var(--font-mono); font-size:0.85rem; color: var(--ink-soft); }
.contact-site:hover{ color: var(--ink); }

.contact-form{
  display:grid; grid-template-columns: 1fr 1fr; gap: 18px;
  background:#fff; border:1px solid var(--paper-line); padding: 32px;
}
.field{ display:flex; flex-direction:column; gap:6px; }
.field-full{ grid-column: 1 / -1; }
.field label{ font-family: var(--font-mono); font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase; color: var(--ink-soft); }
.field input, .field select, .field textarea{
  font-family: var(--font-body); font-size:0.92rem; padding: 11px 12px;
  border: 1px solid var(--paper-line); background: var(--paper);
  color: var(--ink); border-radius: var(--radius);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--brass); }
.form-note{ grid-column:1/-1; font-family: var(--font-mono); font-size:0.72rem; color: var(--ink-soft); }

/* ============ FOOTER ============ */
.site-footer{ background: var(--navy-deep); color: rgba(237,239,236,0.6); padding: 22px 28px; }
.footer-inner{
  max-width:1280px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-family: var(--font-mono); font-size:0.75rem;
}
.footer-links{ display:flex; gap:20px; }
.footer-links a:hover{ color: var(--line-cyan); }

/* ============ SCROLL REVEAL ============ */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible{ opacity:1; transform: translateY(0); }

/* ============ RESPONSIVE ============ */
@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-viewport{ order:-1; max-width:420px; margin:0 auto; }
  .about-grid, .contact-grid{ grid-template-columns:1fr; }
  .contact-form{ grid-template-columns:1fr; }
}
@media (max-width: 760px){
  .main-nav, .nav-email{ display:none; }
  .nav-toggle{ display:flex; }
  .site-header.is-open .main-nav{
    display:flex; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; background: var(--navy-deep);
    padding: 20px 28px; gap:16px; border-top: 1px solid rgba(127,199,232,0.15);
  }
  .hero{ padding-top: 120px; }
}