/* =========================================================
   OLD IRON — Tanıtım Sitesi
   Palet: derin siyah · kan kırmızısı · kemik · altın (çok az)
   Tip: Anton (display), Barlow Condensed (ui), JetBrains Mono (data), Inter (body)
   ========================================================= */

:root{
  --bg:        #0a0a0a;
  --bg-2:      #111111;
  --bg-3:      #161616;
  --panel:     #141414;
  --line:      #262626;
  --line-soft: #1d1d1d;
  --ink:       #e8e3d8;     /* kemik */
  --ink-2:     #b7b0a2;
  --ink-3:     #7a7366;
  --red:       #c2161c;     /* kan */
  --red-2:     #8b0000;
  --red-3:     #ff2a2e;
  --gold:      #c9a961;
  --green:     #61d67a;     /* sadece durum */
  --pass:      #3bd16f;

  --f-display: 'Anton', 'Archivo Black', Impact, sans-serif;
  --f-ui:      'Barlow Condensed', 'Barlow', sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;
  --f-body:    'Inter', system-ui, sans-serif;

  --maxw: 1480px;
  --pad:  clamp(20px, 4vw, 56px);
}

*{box-sizing:border-box; margin:0; padding:0}
html,body{background:var(--bg); color:var(--ink); font-family:var(--f-body); -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{background:none; border:0; color:inherit; cursor:pointer; font:inherit}

::selection{background:var(--red); color:#fff}

/* Selective global noise overlay (subtle concrete grain) */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:80;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity:.55;
}

/* =========================================================
   TOP STRIP (running marquee)
   ========================================================= */
.strip{
  position:sticky; top:0; z-index:60;
  background:var(--red);
  color:#fff;
  border-bottom:1px solid #000;
  overflow:hidden;
  font-family:var(--f-ui); font-weight:700; letter-spacing:.12em; font-size:12px;
  text-transform:uppercase;
}
.strip-track{
  display:inline-flex; gap:28px; align-items:center;
  padding:8px 0;
  white-space:nowrap;
  animation: marquee 45s linear infinite;
}
.strip .dot{opacity:.75; font-size:8px}
@keyframes marquee{
  from{ transform:translateX(0) }
  to  { transform:translateX(-50%) }
}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:sticky; top:30px; z-index:55;
  display:grid; grid-template-columns: auto 1fr auto auto; align-items:center; gap:24px;
  padding: 18px var(--pad);
  background:rgba(10,10,10,.78);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.brand{display:flex; align-items:center; gap:12px}
.brand-mark{
  width:40px; height:40px; display:grid; place-items:center;
  background:#000; color:var(--red);
  border:1px solid var(--line);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.brand-text{display:flex; flex-direction:column; line-height:1}
.brand-text b{font-family:var(--f-display); font-weight:400; letter-spacing:.04em; font-size:22px; color:var(--ink)}
.brand-text em{font-family:var(--f-mono); font-style:normal; letter-spacing:.1em; font-size:9.5px; color:var(--ink-3); margin-top:3px}
.brand.big .brand-text b{font-size:40px}

.nav-links{display:flex; gap:28px; justify-content:center; font-family:var(--f-ui); font-weight:600; letter-spacing:.12em; font-size:13px}
.nav-links a{color:var(--ink-2); transition: color .15s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{
  display:inline-flex; gap:10px; align-items:center;
  padding:12px 18px;
  background:var(--red); color:#fff;
  font-family:var(--f-ui); font-weight:700; letter-spacing:.12em; font-size:12.5px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: background .15s, transform .15s;
}
.nav-cta:hover{background:#e11920; transform:translate(-1px,-1px)}
.nav-cta .arr{font-family:var(--f-mono)}
.nav-burger{display:none; flex-direction:column; gap:4px; padding:8px}
.nav-burger span{display:block; width:22px; height:2px; background:var(--ink)}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  padding: clamp(40px, 6vw, 96px) var(--pad) clamp(40px, 4vw, 64px);
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero-grid-bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 80px 100%,
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 100% 80px,
    radial-gradient(circle at 78% 40%, rgba(194,22,28,.22), transparent 55%),
    linear-gradient(180deg, #0a0a0a, #0b0606);
}
.hero-noise{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:overlay; opacity:.5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.12 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.hero-meta{
  position:absolute; top:18px; z-index:3;
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  font-family:var(--f-mono); letter-spacing:.08em; font-size:10.5px;
  color:var(--ink-3);
}
.hero-meta.top-left{left:var(--pad)}
.hero-meta.top-right{right:var(--pad)}
.hero-meta .kbd{
  padding:4px 8px; border:1px solid var(--line); color:var(--ink-2);
  background:rgba(255,255,255,.02);
}
.hero-meta .tag{letter-spacing:.14em}

.hero-inner{
  position:relative; z-index:2;
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns: 1.15fr 1fr; gap:48px;
  align-items:center;
  padding-top: 56px;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-ui); font-weight:700; letter-spacing:.18em; font-size:12px;
  color:var(--ink-2); margin-bottom:18px;
}
.hero-eyebrow .hx{
  display:inline-block; width:10px; height:10px;
  background:var(--red); transform:rotate(45deg);
}
.hx.green{background:var(--green)}

.hero-title{
  font-family:var(--f-display); font-weight:400;
  font-size: clamp(70px, 13vw, 220px);
  line-height:.85; letter-spacing:-.01em;
  text-transform:uppercase;
}
.hero-title .line{display:block; color:var(--ink)}
.hero-title .outline{
  color:transparent;
  -webkit-text-stroke: 2px var(--ink);
  letter-spacing:.01em;
}

.hero-lede{
  max-width:52ch; margin-top:24px;
  color:var(--ink-2); font-size:17px; line-height:1.55;
}
.hero-lede b{color:var(--ink)}

.hero-ctas{display:flex; flex-wrap:wrap; gap:14px; margin-top:28px}
.btn{
  display:inline-flex; gap:12px; align-items:center;
  padding:16px 22px;
  font-family:var(--f-ui); font-weight:700; letter-spacing:.14em; font-size:13.5px;
  text-transform:uppercase;
  transition: background .15s, transform .15s, color .15s, border-color .15s;
  border:1px solid transparent;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.btn-primary{ background:var(--red); color:#fff; }
.btn-primary:hover{ background:#e11920; transform:translate(-1px,-1px) }
.btn-ghost{ border-color:var(--line); color:var(--ink); background:transparent }
.btn-ghost:hover{ border-color:var(--ink); background:rgba(255,255,255,.03) }
.btn-arrow{font-family:var(--f-mono); transition: transform .2s}
.btn:hover .btn-arrow{transform:translateX(4px)}

.hero-stats{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:0;
  margin-top:44px; max-width:640px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.stat{
  padding:18px 14px 18px 0;
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:6px;
}
.stat:last-child{border-right:0}
.stat:not(:first-child){padding-left:14px}
.stat-n{font-family:var(--f-display); font-size:44px; line-height:1; color:var(--ink)}
.stat-l{font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; color:var(--ink-3); line-height:1.3}

/* Hero right: product stage */
.hero-right{
  position:relative; aspect-ratio: 1/1.15;
  display:flex; align-items:center; justify-content:center;
}
.hero-stage{
  position:relative; width:100%; height:100%;
  display:grid; place-items:center;
}
.stage-glow{
  position:absolute; inset:10%;
  background: radial-gradient(circle, rgba(194,22,28,.45), transparent 65%);
  filter: blur(30px);
}
.stage-rings{
  position:absolute; inset:0;
  display:grid; place-items:center; pointer-events:none;
}
.stage-rings span{
  position:absolute;
  border:1px dashed var(--line);
  border-radius:50%;
  animation: spin 40s linear infinite;
}
.stage-rings span:nth-child(1){ width:92%; height:92%; border-color:#2a2a2a }
.stage-rings span:nth-child(2){ width:70%; height:70%; border-color:#1f1f1f; animation-duration:60s; animation-direction:reverse }
.stage-rings span:nth-child(3){ width:50%; height:50%; border-color:#2a2a2a; animation-duration:80s }
@keyframes spin{ to{ transform:rotate(360deg) } }

.hero-bottle{
  position:relative; z-index:2;
  max-height:78%; width:auto;
  filter: drop-shadow(0 40px 80px rgba(194,22,28,.35)) drop-shadow(0 10px 20px rgba(0,0,0,.6));
}

.stage-tick{
  position:absolute; z-index:3;
  display:flex; flex-direction:column; gap:2px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.08em;
  color:var(--ink-3); line-height:1;
  padding:6px 8px;
  border:1px solid var(--line);
  background:rgba(10,10,10,.6); backdrop-filter: blur(4px);
}
.stage-tick span:first-child{color:var(--ink); font-family:var(--f-display); font-size:18px}
.stage-tick.tl{ top:8%; left:0 }
.stage-tick.tr{ top:14%; right:0 }
.stage-tick.bl{ bottom:14%; left:4% }
.stage-tick.br{ bottom:8%; right:2% }

.hero-chip{
  position:absolute; bottom:-28px; left:50%; transform:translateX(-50%);
  background:#000; border:1px solid var(--red-2);
  padding:12px 20px;
  display:flex; gap:18px; align-items:center; white-space:nowrap;
  z-index:5;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.chip-num{ font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; color:var(--red-3) }
.chip-name{ font-family:var(--f-display); font-size:22px; letter-spacing:.02em }
.chip-sub{ font-family:var(--f-mono); font-size:10px; color:var(--ink-3); letter-spacing:.06em }

.hero-footer{
  position:relative; z-index:2;
  max-width:var(--maxw); margin:72px auto 0;
  display:grid; grid-template-columns: auto 1fr auto;
  gap:24px; align-items:center;
  padding-top:18px; border-top:1px solid var(--line);
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; color:var(--ink-3);
}
.hero-footer > div:first-child{display:flex; gap:8px; align-items:center}
.hero-footer-center{
  overflow:hidden; white-space:nowrap;
  mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}

/* =========================================================
   SECTION HEADS
   ========================================================= */
section{ padding: clamp(80px, 9vw, 140px) var(--pad); position:relative }
.sec-head{ max-width:var(--maxw); margin:0 auto 56px; position:relative }
.sec-num{
  display:inline-block; font-family:var(--f-mono); font-size:11.5px;
  letter-spacing:.2em; color:var(--red-3); margin-bottom:14px;
}
.sec-title{
  font-family:var(--f-display); font-weight:400;
  font-size: clamp(56px, 9vw, 160px); line-height:.9;
  letter-spacing:-.01em; text-transform:uppercase;
}
.sec-desc{
  max-width: 54ch; margin-top:20px;
  color:var(--ink-2); font-size:16.5px; line-height:1.55;
}
.sec-desc em{ font-style:italic; color:var(--ink-3) }

/* =========================================================
   SCIENCE / FORMUL
   ========================================================= */
.science{ background:var(--bg); border-bottom:1px solid var(--line) }
.science-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns: repeat(4, 1fr);
  border:1px solid var(--line); background:var(--panel);
}
.sci-card{
  padding:28px 26px 24px;
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:14px;
  position:relative; background:var(--panel);
  transition: background .2s;
}
.sci-card:last-child{border-right:0}
.sci-card:hover{ background:#181818 }
.sci-card .sci-ix{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; color:var(--red-3);
}
.sci-card h3{
  font-family:var(--f-display); font-weight:400;
  font-size: 30px; letter-spacing:.005em; line-height:1;
  padding-bottom:12px; border-bottom:1px solid var(--line);
}
.sci-card p{ color:var(--ink-2); font-size:14.5px; line-height:1.55 }
.sci-meta{
  margin-top:auto; display:flex; justify-content:space-between; gap:8px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.12em;
  color:var(--ink-3);
  padding-top:12px; border-top:1px solid var(--line);
}

/* =========================================================
   PRODUCTS
   ========================================================= */
.products{ background:var(--bg) }
.product-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(0, auto);
  gap:1px; background:var(--line);
  border:1px solid var(--line);
}
.prod{
  grid-column: span 3;
  background:var(--bg);
  display:flex; flex-direction:column;
  position:relative;
  transition: background .2s;
  min-height: 440px;
}
.prod:hover{ background:#0e0e0e }
.prod-lg{ grid-column: span 6; grid-row: span 2; min-height:640px }
.prod-lg .prod-img{ flex:1 }

.prod-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em;
  border-bottom:1px solid var(--line);
}
.prod-ix{ color:var(--ink-3) }
.prod-tag{
  color:var(--red-3);
  padding:3px 7px; border:1px solid var(--red-2);
  background:rgba(194,22,28,.08);
}
.prod-img{
  position:relative;
  aspect-ratio: 4/3;
  overflow:hidden;
  display:grid; place-items:center;
  background:
    radial-gradient(circle at 50% 50%, rgba(194,22,28,.18), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 2px, transparent 2px 10px),
    #0a0a0a;
  border-bottom:1px solid var(--line);
}
.prod-lg .prod-img{ aspect-ratio: unset }
.prod-img img{
  max-height: 86%; max-width: 78%; width:auto; object-fit:contain;
  filter: drop-shadow(0 20px 40px rgba(194,22,28,.3)) drop-shadow(0 6px 14px rgba(0,0,0,.6));
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.prod:hover .prod-img img{ transform: scale(1.06) translateY(-4px) }

.prod-body{ padding:18px; display:flex; flex-direction:column; gap:10px }
.prod-body h3{
  font-family:var(--f-display); font-weight:400;
  font-size: 28px; line-height:.95; letter-spacing:.005em;
  text-transform:uppercase;
}
.prod-lg .prod-body h3{ font-size:44px }
.prod-sub{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.05em;
  color:var(--ink-3); line-height:1.5;
}
.prod-foot{
  margin-top:auto; padding-top:14px; border-top:1px dashed var(--line);
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
}
.prod-dose{ font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; color:var(--ink-3) }
.prod-price{ font-family:var(--f-display); font-size:22px; color:var(--ink) }

/* =========================================================
   BIG MARQUEE
   ========================================================= */
.big-marquee{
  overflow:hidden; background:#0a0a0a;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding: 28px 0;
}
.bm-track{
  display:inline-flex; gap:38px; align-items:center;
  font-family:var(--f-display); font-weight:400;
  font-size: clamp(52px, 9vw, 140px); line-height:1;
  white-space:nowrap; color:var(--ink);
  animation: marquee 38s linear infinite;
  letter-spacing:.01em;
}
.bm-dot{color:var(--red)}

/* =========================================================
   LAB
   ========================================================= */
.lab{ background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.lab-board{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns: 1.5fr 1fr; gap:24px;
}
.lab-sheet{
  background:#ede6d6; color:#1a1a1a;
  padding:28px; border:1px solid #2a2a2a;
  font-family:var(--f-mono);
  position:relative;
  box-shadow: 10px 10px 0 #000;
}
.lab-sheet::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(to bottom, transparent 0 26px, rgba(0,0,0,.04) 26px 27px);
}
.sheet-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding-bottom:14px; border-bottom:2px solid #1a1a1a;
  margin-bottom:14px;
}
.sh-l{ font-weight:700; font-size:13px; letter-spacing:.12em }
.sh-s{ font-size:10.5px; letter-spacing:.12em; color:#4a4a4a; margin-top:4px }
.sh-stamp{
  border:2px solid #8b0000; color:#8b0000;
  padding:6px 14px; transform: rotate(-4deg); text-align:center;
  font-weight:700;
}
.sh-stamp > div:first-child{ font-size:18px; letter-spacing:.18em }
.sh-stamp-s{ font-size:9.5px; letter-spacing:.14em }

.sheet-table{
  width:100%; border-collapse:collapse;
  font-size:12.5px;
}
.sheet-table th, .sheet-table td{
  text-align:left; padding:8px 6px;
  border-bottom:1px dashed rgba(0,0,0,.25);
  vertical-align: middle;
}
.sheet-table th{
  font-size:10.5px; letter-spacing:.14em;
  border-bottom:1px solid #1a1a1a;
  color:#4a4a4a;
}
.sheet-table td.ok{ color:#2a7c3d; font-weight:700; letter-spacing:.12em }
.sheet-foot{
  display:flex; justify-content:space-between;
  margin-top:14px; padding-top:12px; border-top:2px solid #1a1a1a;
  font-size:10.5px; letter-spacing:.12em; color:#4a4a4a;
}

.lab-side{
  display:grid; grid-template-columns: 1fr 1fr; gap:12px; align-content:start;
}
.lab-badge{
  border:1px solid var(--line); background:var(--panel);
  padding:22px 18px;
  display:flex; flex-direction:column; gap:8px;
  aspect-ratio:1/1;
  transition: border-color .2s, background .2s;
}
.lab-badge:hover{ border-color: var(--red-2); background:#1a0f0f }
.lb-num{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.2em; color:var(--red-3) }
.lb-l{ font-family:var(--f-display); font-weight:400; font-size:34px; line-height:1; letter-spacing:.01em; margin-top:auto }
.lb-s{ font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; color:var(--ink-3); line-height:1.5 }

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testis{ background:var(--bg) }
.testi-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns: repeat(3, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.testi{
  background:var(--bg); padding:28px;
  display:flex; flex-direction:column; gap:16px;
  min-height:320px;
}
.testi-rate{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.14em;
}
.testi-rate > span:first-child{ color:var(--red); letter-spacing:.15em; font-size:15px }
.testi-date{ color:var(--ink-3) }
.testi blockquote{
  font-family:var(--f-body); font-size:16px; line-height:1.6;
  color:var(--ink); font-weight:300;
  flex:1;
}
.testi figcaption{
  display:flex; gap:14px; align-items:center;
  padding-top:14px; border-top:1px solid var(--line);
}
.t-ix{
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--line); color:var(--ink-2);
  font-family:var(--f-mono); font-size:12px; letter-spacing:.1em;
  flex-shrink:0;
}
.testi figcaption b{ font-family:var(--f-ui); font-weight:700; letter-spacing:.06em; font-size:14.5px; display:block }
.testi figcaption em{ font-family:var(--f-mono); font-style:normal; font-size:11px; letter-spacing:.08em; color:var(--ink-3); display:block; margin-top:2px }

/* =========================================================
   ABOUT
   ========================================================= */
.about{
  background: var(--bg-2);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.about-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns: 1fr 1fr; gap:64px;
  align-items:flex-start;
}
.about-left .sec-num{ color:var(--red-3) }
.about-title{
  font-family:var(--f-display); font-weight:400;
  font-size: clamp(56px, 8vw, 140px); line-height:.88;
  letter-spacing:-.005em; text-transform:uppercase;
  margin-top:14px;
}
.about-right p{
  color:var(--ink-2); font-size:16px; line-height:1.7;
  margin-bottom:16px;
}
.about-right p.about-lede{
  color:var(--ink); font-size:19px; line-height:1.55; font-weight:300;
  padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:22px;
}
.about-right b{ color:var(--ink); font-weight:600 }

.about-facts{
  margin-top:28px; display:grid; grid-template-columns: repeat(3, 1fr); gap:0;
  border:1px solid var(--line);
}
.fact{
  padding:18px; border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:6px;
}
.fact:last-child{ border-right:0 }
.fact-n{ font-family:var(--f-display); font-size:32px; line-height:1; letter-spacing:.01em }
.fact-l{ font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; color:var(--ink-3); line-height:1.3 }

/* =========================================================
   CTA
   ========================================================= */
.cta{
  background:
    radial-gradient(circle at 20% 60%, rgba(194,22,28,.35), transparent 50%),
    #0a0a0a;
  position:relative; overflow:hidden;
}
.cta::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 1px, transparent 1px 12px);
}
.cta-inner{
  position:relative; z-index:2;
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns: 1.1fr 1fr; gap:56px;
  align-items:flex-start;
}
.cta-eyebrow{
  display:inline-flex; gap:10px; align-items:center;
  font-family:var(--f-ui); font-weight:700; letter-spacing:.18em; font-size:12px;
  color:var(--ink-2); margin-bottom:14px;
}
.cta-title{
  font-family:var(--f-display); font-weight:400;
  font-size: clamp(64px, 10vw, 180px); line-height:.85;
  text-transform:uppercase; letter-spacing:-.005em;
}
.cta-title .outline{
  color:transparent;
  -webkit-text-stroke: 2px var(--ink);
}
.cta-left p{ margin-top:22px; color:var(--ink-2); max-width:48ch; font-size:16px; line-height:1.6 }

.cta-right{ display:flex; flex-direction:column; gap:12px }
.cta-card{
  display:grid; grid-template-columns: auto 1fr auto; align-items:center;
  gap:20px;
  padding:22px 24px;
  border:1px solid var(--line); background:rgba(10,10,10,.7);
  backdrop-filter: blur(6px);
  transition: background .2s, border-color .2s, transform .2s;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.cta-card:hover{ background:#141414; border-color:var(--red-2); transform: translate(-2px, -2px) }
.ccard-l{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.18em; color:var(--ink-3) }
.ccard-v{ font-family:var(--f-display); font-size:26px; letter-spacing:.005em }
.ccard-arr{ font-family:var(--f-mono); color:var(--ink-2) }

/* =========================================================
   FOOTER
   ========================================================= */
.foot{
  background:#050505;
  padding: 80px var(--pad) 28px;
  border-top:1px solid var(--line);
}
.foot-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap:32px;
  padding-bottom:32px; border-bottom:1px solid var(--line);
}
.foot-brand p{ font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; color:var(--ink-3); margin-top:16px }
.foot-col h4{
  font-family:var(--f-ui); font-weight:700; letter-spacing:.18em; font-size:12px;
  color:var(--ink-3); margin-bottom:14px;
}
.foot-col a, .foot-col p{
  display:block; color:var(--ink-2); font-size:14px; line-height:1.8;
}
.foot-col a:hover{ color:var(--ink) }
.foot-bottom{
  max-width:var(--maxw); margin:18px auto 0;
  display:flex; justify-content:space-between; gap:16px;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; color:var(--ink-3);
}
.foot-mono{ color:var(--ink-3) }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px){
  .nav-links{ display:none }
  .nav{ grid-template-columns: auto 1fr auto; gap:14px }
  .nav-burger{ display:flex }

  .hero-inner{ grid-template-columns: 1fr; gap:40px; padding-top:40px }
  .hero-right{ max-width:480px; margin:0 auto; width:100%; aspect-ratio:4/5 }
  .hero-meta.top-right{ display:none }
  .hero-stats{ grid-template-columns: repeat(2, 1fr); max-width:none }
  .stat{ padding:16px 0 }
  .stat:nth-child(2){ border-right:0 }
  .stat:nth-child(3){ padding-left:0; border-top:1px solid var(--line) }
  .stat:nth-child(4){ border-top:1px solid var(--line); padding-left:14px }

  .science-grid{ grid-template-columns: repeat(2, 1fr) }
  .sci-card:nth-child(2){ border-right:0 }
  .sci-card:nth-child(1), .sci-card:nth-child(2){ border-bottom:1px solid var(--line) }

  .product-grid{ grid-template-columns: repeat(6, 1fr) }
  .prod{ grid-column: span 3 }
  .prod-lg{ grid-column: span 6; grid-row:auto; min-height:520px }

  .lab-board{ grid-template-columns: 1fr }
  .testi-grid{ grid-template-columns: 1fr }
  .about-grid{ grid-template-columns: 1fr; gap:32px }
  .cta-inner{ grid-template-columns: 1fr; gap:36px }
  .foot-grid{ grid-template-columns: 1fr 1fr; gap:24px }
}

@media (max-width: 680px){
  .strip{ font-size:10.5px }
  .nav-cta span:first-child{ display:none }
  .nav-cta{ padding:10px 14px }
  .hero{ padding-top:28px }
  .hero-meta.top-left{ position:relative; left:auto; top:auto; margin-bottom:20px }
  .hero-eyebrow{ font-size:10.5px }
  .hero-lede{ font-size:15.5px }
  .hero-chip{ padding:10px 14px; gap:10px; flex-wrap:wrap; max-width:90%; white-space:normal; justify-content:center }
  .chip-name{ font-size:16px }
  .chip-sub{ font-size:9px }

  .science-grid{ grid-template-columns: 1fr }
  .sci-card{ border-right:0; border-bottom:1px solid var(--line) }
  .sci-card:last-child{ border-bottom:0 }

  .product-grid{ grid-template-columns: repeat(2, 1fr) }
  .prod{ grid-column: span 1; min-height:380px }
  .prod-lg{ grid-column: span 2; min-height:460px }
  .prod-lg .prod-body h3{ font-size:32px }

  .testi{ min-height:auto; padding:22px }
  .about-right p.about-lede{ font-size:16.5px }
  .about-facts{ grid-template-columns: 1fr }
  .fact{ border-right:0; border-bottom:1px solid var(--line) }
  .fact:last-child{ border-bottom:0 }

  .foot-grid{ grid-template-columns: 1fr; gap:28px }
  .foot-bottom{ flex-direction:column; gap:8px }

  .sheet-table{ font-size:11px }
  .sheet-table th:nth-child(2), .sheet-table td:nth-child(2){ display:none }
}