:root {
  --bg: #f3f5f7;
  --surface: #ffffff;
  --ink: #10141c;
  --muted: #657080;
  --line: rgba(16,20,28,.12);
  --dark: #10141c;
  --dark-2: #171d28;
  --accent: #b79a45;
  --accent-dark: #8f752c;
  --accent-soft: rgba(183,154,69,.13);
  --shadow: 0 22px 65px rgba(16,20,28,.10);
  --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 6%, rgba(184,161,94,.16), transparent 28rem),
    radial-gradient(circle at 90% 0%, rgba(16,20,28,.08), transparent 34rem),
    var(--bg);
  line-height: 1.6;
}
a { color: inherit; }
a:hover { color: #8f7835; }
img { max-width: 100%; }
.container { width: min(calc(100% - 34px), var(--max)); margin: 0 auto; }

.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,.93);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 28px;
}
.brand img { display:block; width: clamp(165px, 18vw, 245px); height:auto; }
.nav-links { display:flex; align-items:center; flex-wrap:wrap; gap: 22px; font-weight:700; font-size:.94rem; }
.nav-links a { text-decoration:none; color:rgba(16,20,28,.72); }
.nav-links a:hover { color:var(--ink); }
.lang { display:flex; gap:7px; margin-left:8px; }
.lang a { border:1px solid var(--line); padding:4px 8px; border-radius:999px; font-size:.78rem; }
.lang a.active { background:var(--dark); color:#fff; border-color:var(--dark); }

.hero { padding: clamp(4rem, 7vw, 6.5rem) 0 clamp(3.5rem, 5vw, 5rem); overflow:hidden; }
.hero-grid { display:grid; grid-template-columns: 1.25fr .75fr; gap: clamp(35px, 7vw, 85px); align-items:center; }
.eyebrow {
  display:inline-flex; align-items:center; gap:.6rem; text-transform:uppercase;
  letter-spacing:.16em; font-size:.74rem; font-weight:850; color:var(--muted);
}
.eyebrow::before { content:""; width:42px; height:1px; background:var(--accent); }
h1 {
  font-size: clamp(2.65rem, 5.4vw, 5.25rem);
  line-height:.99; letter-spacing:-.06em; margin:1.25rem 0 1.3rem; font-weight:870;
}
.lead { color:var(--muted); font-size:clamp(1.08rem, 1.55vw, 1.3rem); max-width:760px; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; min-height:48px;
  padding:.72rem 1.2rem; border-radius:999px; font-weight:800; text-decoration:none;
  border:1px solid var(--dark);
}
.btn-primary { background:var(--dark); color:#fff; }
.btn-primary:hover { background:#000; color:#fff; }
.btn-secondary { background:transparent; color:var(--ink); border-color:rgba(16,20,28,.22); }
.btn-secondary:hover { background:var(--ink); color:#fff; }

.logo-panel {
  background:rgba(255,255,255,.95); border:1px solid rgba(255,255,255,.96);
  border-radius:28px; box-shadow:var(--shadow); padding:clamp(24px, 4vw, 42px);
}
.logo-caption { border-top:1px solid var(--line); margin-top:18px; padding-top:15px; color:var(--muted); font-size:.9rem; }
.logo-caption strong { color:var(--ink); display:block; margin-top:3px; }

.section { padding: clamp(3.4rem, 6vw, 5.5rem) 0; }
.section-tight { padding-top:0; }
.section-title {
  font-size:clamp(2rem, 4vw, 3.55rem); line-height:1.05; letter-spacing:-.05em;
  margin:.85rem 0 1.1rem; font-weight:860;
}
.intro-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(34px, 7vw, 85px); }
.muted { color:var(--muted); }
.big { font-size:1.15rem; }

.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:32px; }
.card {
  background:rgba(255,255,255,.94); border:1px solid var(--line); border-radius:21px;
  padding:clamp(24px, 3vw, 34px); box-shadow:0 15px 42px rgba(16,20,28,.06);
}
.card h3 { font-size:1.35rem; margin:.25rem 0 .75rem; }
.card p { color:var(--muted); margin-bottom:0; }
.card ul { color:var(--muted); padding-left:1.2rem; margin-bottom:0; }
.icon {
  width:48px; height:48px; display:grid; place-items:center; border-radius:15px;
  background:var(--accent-soft); font-size:1.35rem; font-weight:850; margin-bottom:16px;
}

.dark {
  background:
    radial-gradient(circle at 15% 12%, rgba(184,161,94,.18), transparent 28rem),
    linear-gradient(135deg,var(--dark),#07090d);
  color:#fff; border-radius:30px; padding:clamp(30px,5vw,58px);
}
.dark p, .dark li { color:rgba(255,255,255,.72); }
.dark .eyebrow { color:rgba(255,255,255,.7); }
.dark-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,7vw,85px); align-items:start; }
.checks { list-style:none; padding:0; display:grid; gap:12px; }
.checks li { position:relative; padding-left:28px; }
.checks li::before { content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:900; }

.reference {
  display:grid; grid-template-columns:1fr 1fr; gap:0; background:#fff;
  border:1px solid var(--line); border-radius:28px; overflow:hidden; box-shadow:var(--shadow);
}
.reference-side { background:linear-gradient(135deg,var(--dark),var(--dark-2)); color:#fff; padding:clamp(28px,5vw,55px); }
.reference-side p { color:rgba(255,255,255,.72); }
.reference-main { padding:clamp(28px,5vw,55px); }
.tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.tag { background:#fff; border:1px solid var(--line); padding:.42rem .7rem; border-radius:999px; font-weight:750; font-size:.87rem; color:rgba(16,20,28,.72); }

.contact { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(34px,7vw,85px); }
.contact-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.contact-card { background:#fff; border:1px solid var(--line); border-radius:20px; padding:25px; }
.contact-card h3 { margin:0 0 8px; font-size:1.05rem; }
.contact-card p { margin:0; color:var(--muted); }

.footer { border-top:1px solid var(--line); background:rgba(255,255,255,.82); padding:25px 0; color:var(--muted); }
.footer-inner { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.footer-links { display:flex; flex-wrap:wrap; gap:18px; }
.footer a { text-decoration:none; }

.legal-hero { padding:clamp(4rem,8vw,6rem) 0 2rem; }
.legal-card { background:#fff; border:1px solid var(--line); border-radius:22px; padding:clamp(25px,5vw,50px); box-shadow:var(--shadow); }
.legal-card h2 { margin-top:2.1rem; padding-top:1.4rem; border-top:1px solid var(--line); font-size:1.35rem; }
.legal-card h2:first-of-type { margin-top:0; padding-top:0; border-top:0; }
.notice { background:#fff8e7; border:1px solid #e8d28c; border-radius:14px; padding:15px 18px; }

@media (max-width:900px) {
  .nav-inner { align-items:flex-start; flex-direction:column; padding:16px 0; gap:14px; }
  .nav-links { gap:13px 17px; }
  .hero-grid,.intro-grid,.dark-grid,.reference,.contact { grid-template-columns:1fr; }
  .logo-panel { max-width:560px; }
  .cards { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .container { width:min(calc(100% - 24px),var(--max)); }
  .nav-links { font-size:.86rem; }
  .contact-grid { grid-template-columns:1fr; }
  h1 { font-size:clamp(2.35rem,13vw,3.4rem); }
}

/* RC3: restrained colour accents */
.eyebrow::before {
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
  height: 2px;
}

.nav-links > a {
  position: relative;
}
.nav-links > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -8px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
  transition: right .22s ease;
}
.nav-links > a:hover::after {
  right: 0;
}

.btn-primary {
  box-shadow: 0 10px 28px rgba(16,20,28,.12);
}
.btn-primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

.btn-secondary:hover {
  border-color: var(--accent);
}

.logo-panel {
  position: relative;
  overflow: hidden;
}
.logo-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
}

.card {
  position: relative;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent 72%);
  opacity: .72;
}

.icon {
  color: var(--accent-dark);
  border: 1px solid rgba(183,154,69,.20);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}

.tag {
  border-color: rgba(183,154,69,.28);
  background: linear-gradient(180deg, #fff, rgba(183,154,69,.045));
}
.tag:hover {
  border-color: var(--accent);
}

.contact-card {
  position: relative;
  overflow: hidden;
}
.contact-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  opacity: .65;
}

.reference-main h3,
.contact-card h3 {
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.dark .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #111318;
}
.dark .btn-primary:hover {
  background: #c7ad5b;
  border-color: #c7ad5b;
  color: #111318;
}

.dark .checks li::before {
  color: #d4bc6c;
}

.footer a:hover,
.contact-card a:hover {
  color: var(--accent-dark);
}

@media (prefers-reduced-motion: reduce) {
  .nav-links > a::after {
    transition: none;
  }
}

/* RC4: compact spacing, anchor offset and accessibility */
section[id] {
  scroll-margin-top: 100px;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid rgba(183,154,69,.48);
  outline-offset: 4px;
  border-radius: 6px;
}

.btn:focus-visible,
.lang a:focus-visible {
  border-radius: 999px;
}

body {
  overflow-x: hidden;
}

@media (max-width: 900px) {
  html {
    scroll-padding-top: 150px;
  }

  section[id] {
    scroll-margin-top: 150px;
  }

  .section {
    padding: 3.5rem 0;
  }

  .hero {
    padding: 4rem 0;
  }
}

/* 2026 visual refresh */
:root {
  --bg: #f5f3ee;
  --surface: #fffdf9;
  --ink: #14201d;
  --muted: #61706b;
  --line: rgba(20,32,29,.13);
  --dark: #10221e;
  --dark-2: #18342d;
  --accent: #c99a45;
  --accent-dark: #8a6322;
  --accent-soft: rgba(201,154,69,.14);
  --shadow: 0 28px 80px rgba(20,32,29,.11);
}

body {
  background:
    linear-gradient(rgba(20,32,29,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,32,29,.025) 1px, transparent 1px),
    radial-gradient(circle at 8% 2%, rgba(201,154,69,.18), transparent 30rem),
    var(--bg);
  background-size: 42px 42px, 42px 42px, auto, auto;
}

.nav { background: rgba(245,243,238,.91); }
.brand { display:inline-flex; align-items:center; color:var(--ink); text-decoration:none; flex:0 0 auto; }
.brand img { width:clamp(150px,16vw,210px); max-height:56px; object-fit:contain; }
.brand-mark { display:none; }
.brand-name { position:relative; padding-left:17px; font-size:.78rem; line-height:1; font-weight:700; letter-spacing:.22em; text-transform:uppercase; }
.brand-name::before { content:""; position:absolute; inset:-4px auto -4px 0; width:3px; border-radius:2px; background:var(--accent); }
.brand-name strong { display:block; margin-top:7px; font-size:1.02rem; letter-spacing:.13em; color:var(--ink); }

.hero { position:relative; min-height:calc(100vh - 78px); display:grid; align-items:center; }
.hero::after { content:""; position:absolute; right:-10rem; top:8%; width:34rem; height:34rem; border:1px solid rgba(201,154,69,.2); border-radius:50%; pointer-events:none; }
.hero-grid { position:relative; z-index:1; }
h1 { max-width:900px; }
.lead { line-height:1.72; }
.logo-panel { min-height:440px; display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(145deg,#fffdf9,#eee9df); border-color:rgba(20,32,29,.1); color:var(--ink); }
.panel-kicker { color:var(--accent-dark); font-size:.7rem; font-weight:850; letter-spacing:.18em; text-transform:uppercase; }
.hero-logo { display:block; width:100%; height:auto; margin:36px 0 26px; }
.system-graphic { position:relative; width:min(100%,330px); aspect-ratio:1.55; margin:32px 0; border:1px solid rgba(255,255,255,.12); border-radius:22px; background:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:28px 28px; }
.system-graphic::before,.system-graphic::after { content:""; position:absolute; height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); transform-origin:left center; }
.system-graphic::before { width:62%; left:18%; top:30%; transform:rotate(24deg); }
.system-graphic::after { width:55%; left:25%; top:70%; transform:rotate(-31deg); }
.system-graphic span { position:absolute; width:17px; height:17px; border:3px solid var(--accent); border-radius:50%; background:var(--dark-2); box-shadow:0 0 0 7px rgba(201,154,69,.08); }
.system-graphic span:nth-child(1){left:15%;top:20%}.system-graphic span:nth-child(2){right:16%;top:18%}.system-graphic span:nth-child(3){left:27%;bottom:18%}.system-graphic span:nth-child(4){right:22%;bottom:22%}
.system-graphic i { position:absolute; left:50%; top:50%; width:48px; height:48px; transform:translate(-50%,-50%); border:1px solid rgba(255,255,255,.4); border-radius:50%; background:radial-gradient(circle,var(--accent) 0 4px,transparent 5px); }
.panel-statement { max-width:340px; font-size:1.16rem; line-height:1.5; color:var(--muted); }
.logo-caption { border-color:var(--line); color:var(--muted); }
.logo-caption strong { color:var(--ink); }
.logo-download { display:inline-flex; margin-top:15px; color:var(--accent-dark); font-weight:800; text-decoration:none; }
.logo-download::after { content:"↓"; margin-left:8px; }
.logo-download:hover { color:var(--ink); }

.card,.contact-card,.legal-card,.reference { background:rgba(255,253,249,.94); }
.card { transition:transform .22s ease, box-shadow .22s ease; }
.card:hover { transform:translateY(-5px); box-shadow:0 22px 60px rgba(20,32,29,.1); }
.dark { background:radial-gradient(circle at 10% 10%,rgba(201,154,69,.2),transparent 28rem),linear-gradient(135deg,var(--dark),#081310); }
.reference-side { background:linear-gradient(145deg,var(--dark),var(--dark-2)); }

@media (max-width:900px) {
  .nav-inner { align-items:center; flex-direction:row; padding:11px 0 0; gap:16px; flex-wrap:wrap; }
  .nav-links { order:2; width:100%; flex-wrap:nowrap; overflow-x:auto; padding:0 0 12px; gap:18px; scrollbar-width:none; }
  .nav-links::-webkit-scrollbar { display:none; }
  .nav-links > a { white-space:nowrap; }
  .lang { margin-left:auto; }
  .hero { min-height:auto; padding-top:4.5rem; }
  .hero::after { display:none; }
  .logo-panel { min-height:360px; }
}

@media (max-width:560px) {
  .brand img { width:148px; max-height:48px; }
  .nav-links { font-size:.82rem; }
  .lang { margin-left:0; }
  .hero { padding-top:3.5rem; }
  .actions .btn { width:100%; }
  .logo-panel { min-height:320px; border-radius:22px; }
  .system-graphic { max-width:270px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .card { transition:none; }
}

/* Portfolio links */
.portfolio-list { display:grid; gap:22px; }
.portfolio-link { display:inline-flex; align-items:center; gap:8px; margin-top:24px; color:var(--accent-dark); font-weight:850; text-decoration:none; }
.portfolio-link span { transition:transform .2s ease; }
.portfolio-link:hover { color:var(--ink); }
.portfolio-link:hover span { transform:translate(3px,-3px); }
.portfolio-link:focus-visible { border-radius:6px; }
@media (prefers-reduced-motion: reduce) { .portfolio-link span { transition:none; } }

.card-link { display:inline-flex; align-items:center; gap:7px; margin-top:20px; color:var(--accent-dark); font-weight:850; text-decoration:none; }
.card-link span { transition:transform .2s ease; }
.card-link:hover { color:var(--ink); }
.card-link:hover span { transform:translate(3px,-3px); }
.card-link:focus-visible { border-radius:6px; }
@media (prefers-reduced-motion: reduce) { .card-link span { transition:none; } }

/* Portfolio brand logos */
.portfolio-logo { display:flex; align-items:center; justify-content:center; width:min(100%,360px); min-height:112px; margin:24px 0 22px; padding:18px 24px; border:1px solid rgba(255,255,255,.18); border-radius:16px; background:#fff; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease; }
.portfolio-logo img { display:block; width:auto; max-width:100%; max-height:72px; object-fit:contain; }
.portfolio-logo:hover { transform:translateY(-3px); box-shadow:0 14px 34px rgba(0,0,0,.18); }
.portfolio-logo:focus-visible { outline-color:rgba(255,255,255,.9); }
@media (prefers-reduced-motion: reduce) { .portfolio-logo { transition:none; } }

/* Final transparent logo placement and 5% type scale reduction */
html { font-size:95%; }
h1 { font-size:clamp(2.65rem,5.13vw,5.25rem); }
.section-title { font-size:clamp(2rem,3.8vw,3.55rem); }
.portfolio-logo--vectorbirds,
.portfolio-logo--heli,
.portfolio-logo--automationslogik {
  width:min(100%,360px);
  min-height:0;
  margin:25px 0 22px;
  padding:10px 0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.portfolio-logo--vectorbirds:hover,
.portfolio-logo--heli:hover,
.portfolio-logo--automationslogik:hover { box-shadow:none; }
.portfolio-logo--vectorbirds img { width:min(100%,330px); max-height:88px; }
.portfolio-logo--heli img { width:min(100%,300px); max-height:70px; }
.portfolio-logo--automationslogik img { width:min(100%,340px); max-height:68px; }
@media (max-width:560px) {
  h1 { font-size:clamp(2.35rem,12.35vw,3.4rem); }
  .portfolio-logo--vectorbirds, .portfolio-logo--heli, .portfolio-logo--automationslogik { min-height:0; }
  .portfolio-logo--heli img { max-height:64px; }
}