@font-face { font-family: "Rajdhani"; src: url("/fonts/Rajdhani-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
:root {
  --navy: #071421; --panel: #0d2135; --line: #1d3a57; --white: #f2fcff; --muted: #9fb6c9;
  --cyan: #78ebfb; --orange: #ffad5b;
  --display: "Rajdhani", "Arial Narrow", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--navy); color: var(--white); font-family: var(--body); font-size: 17px; line-height: 1.6; }
a { color: var(--cyan); }
img, video { max-width: 100%; display: block; }
img { height: auto; }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.05; margin: 0; text-wrap: balance; }

/* Hero: wide image with the Auger on the right, text on the left. Phones swap to the portrait capture. */
.hero { background: var(--navy) url("/img/hero-background.jpg") right center / cover no-repeat; }
.hero .wrap { min-height: min(86vh, 760px); display: flex; flex-direction: column; justify-content: center; gap: 18px; padding-block: 48px; }
.hero .copy { max-width: 470px; display: flex; flex-direction: column; gap: 16px; }
.wordmark { width: min(420px, 82vw); }
.hero h1 { font-size: clamp(2.6rem, 7vw, 4.2rem); color: var(--white); }
.hero p { margin: 0; font-size: 1.15rem; color: #d6e6f0; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.btn { display: inline-block; padding: 13px 24px; border-radius: 10px; background: var(--orange); color: #1a0e02; font-family: var(--display); font-size: 1.25rem; letter-spacing: .04em; text-decoration: none; }
.btn:focus-visible, a:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.status { font-family: var(--display); font-size: 1.1rem; letter-spacing: .08em; color: var(--cyan); }
@media (max-width: 760px) {
  .hero { background: none; position: relative; }
  .hero::before { content: ""; position: absolute; inset: 0; background: url("/img/auger.jpg") center 30% / cover no-repeat; }
  .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,20,33,.25) 0%, rgba(7,20,33,.55) 50%, var(--navy) 100%); }
  .hero .wrap { position: relative; z-index: 1; min-height: 92vh; justify-content: flex-end; }
}

section { padding-block: 64px; }
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.feature.flip .text { order: 2; }
.feature .text { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.feature h2 { font-size: clamp(2rem, 5.5vw, 3rem); color: var(--cyan); }
.feature p { margin: 0; color: #d0e0ea; max-width: 46ch; }
.shots { display: flex; gap: 14px; justify-content: center; }
.shots figure { margin: 0; flex: 0 1 260px; min-width: 0; }
.shots img { border-radius: 14px; border: 1px solid var(--line); aspect-ratio: 9 / 16; object-fit: cover; width: 100%; }
.shots figcaption { font-size: .85rem; color: var(--muted); text-align: center; margin-top: 6px; }
@media (max-width: 760px) {
  .feature { grid-template-columns: 1fr; gap: 22px; }
  .feature.flip .text { order: 0; }
}

.video { text-align: center; }
.video h2 { font-size: clamp(2rem, 5.5vw, 3rem); margin-bottom: 18px; }
.video video { margin: 0 auto; width: min(360px, 88vw); height: auto; aspect-ratio: 9 / 16; border-radius: 16px; border: 1px solid var(--line); background: #000; }
.video p { color: var(--muted); font-size: .92rem; }

.closing { text-align: center; background: var(--panel); border-block: 1px solid var(--line); }
.closing h2 { font-size: clamp(2rem, 5.5vw, 3rem); margin-bottom: 12px; }
.closing p { margin: 6px auto; max-width: 52ch; color: #d0e0ea; }

footer { padding-block: 28px 44px; color: var(--muted); font-size: .92rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
footer img { width: 40px; height: 40px; border-radius: 8px; }

.doc { padding-block: 48px; max-width: 760px; }
.doc h1 { font-size: clamp(2.2rem, 7vw, 3rem); margin-bottom: 6px; }
.doc h2 { font-size: 1.5rem; color: var(--cyan); margin-top: 28px; margin-bottom: 6px; }
.doc .meta { color: var(--muted); }
.doc ul { padding-left: 1.2em; }
.top { padding-block: 18px; }
.top img { width: 180px; }