/* Envision, direction C: tokens, type, header, sheet layout, footer */
:root {
  --bg: #0B1118;
  --raised: #111A24;
  --ink: #E6EDF5;
  --ink-2: #9DAEC0;
  --grid: #1F2C3A;
  --rule: #33465B;
  --b1: #2A4C8F;
  --blue: #5C9BFF;
  --cu: #E0A060;
  --pcb: linear-gradient(90deg, #2A4C8F, #5C9BFF);
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --gut: clamp(20px, 5vw, 56px);
  --rail: 0px;
  --head: 64px;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.6 "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
::selection { background: var(--b1); color: #fff; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; line-height: 1.04; letter-spacing: -0.022em; text-wrap: balance; font-optical-sizing: auto; }
h4 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
p, figure, dl, dd { margin: 0; }
p, li, dd { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--blue); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
[id] { scroll-margin-top: calc(var(--head) + 28px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.wrap { width: 100%; max-width: calc(1240px + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.skip { position: absolute; left: var(--gut); top: -80px; z-index: 60; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 6px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 10px; color: var(--bg); }

/* header */
.top {
  position: sticky; top: 0; z-index: 40;
  background: rgba(11, 17, 24, 0.9);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--grid);
}
.top .wrap { display: flex; align-items: center; gap: 24px; height: var(--head); }
.nav a, .lang a { color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.nav a:hover, .lang a:hover { color: var(--ink); }
.lang { display: flex; align-items: center; margin-left: auto; font-size: 14px; font-weight: 600; }
.lang > * { padding: 7px 11px; line-height: 1; }
.lang > :last-child { padding-right: 0; }
.lang > * + * { border-left: 1px solid var(--rule); }
.lang [aria-current] { color: var(--ink); }

/* logo: marka paketi A (O harfine entegre sembol), beyaz SVG */
.mark { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.mark img { height: 22px; width: auto; max-width: none; }
.mark:hover { color: inherit; }

@media (min-width: 1100px) {
  .nav { display: flex; gap: 24px; margin-left: auto; }
  .nav a { font-size: 14.5px; font-weight: 500; padding: 8px 0; }
  .top .lang { margin-left: 4px; }
}
@media (max-width: 1099px) {
  :root { --head: 96px; }
  .top .wrap { flex-wrap: wrap; height: auto; row-gap: 0; padding-top: 6px; }
  .top .mark { padding-block: 9px; }
  .lang > * { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; }
  .nav {
    display: flex; order: 3; width: calc(100% + var(--gut)); margin-right: calc(-1 * var(--gut));
    gap: 22px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(90deg, #000 82%, transparent);
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }
  .nav a:last-child { padding-right: 40px; }
}

/* sheet layout: numbered section heads + capability rows */
.sec { padding-top: clamp(96px, 12vw, 168px); }
.no { font-size: 14px; font-weight: 600; color: var(--cu); }
.sh { display: grid; gap: 14px 0; padding-top: 22px; border-top: 1px solid var(--rule); }
.sh h2 { font-size: clamp(40px, 6vw, 76px); line-height: 1; }
.sh p { color: var(--ink-2); font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; max-width: 44ch; }

.cap { display: grid; gap: 28px 0; margin-top: clamp(56px, 7vw, 96px); padding-top: 22px; border-top: 1px solid var(--grid); }
.cr { display: grid; gap: 10px; align-content: start; }
.cr h3 { font-size: clamp(28px, 3vw, 40px); line-height: 1.08; }
.cr p { color: var(--ink-2); font-size: 17px; line-height: 1.55; max-width: 42ch; }
.cb { min-width: 0; }

@media (min-width: 1000px) {
  :root { --rail: 120px; }
  .sh { grid-template-columns: var(--rail) minmax(0, 4fr) minmax(0, 7fr); }
  .sh .no { grid-row: 1; padding-top: 0.6em; }
  .sh h2 { grid-column: 2 / 4; }
  .sh p { grid-column: 3; }
  .cap { grid-template-columns: var(--rail) minmax(0, 4fr) minmax(0, 7fr); }
  .cr { grid-column: 1 / 3; column-gap: 0; grid-template-columns: var(--rail) minmax(0, 1fr); padding-right: 48px; position: sticky; top: calc(var(--head) + 32px); }
  .cr > * { grid-column: 2; }
  .cr .no { grid-column: 1; grid-row: 1; padding-top: 0.5em; }
  .cb { grid-column: 3; }
}

/* statement line with a blue trace on its left */
.offer { margin-top: 28px; padding-left: 18px; border-left: 2px solid var(--blue); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; max-width: 48ch; }
.offer strong { font-weight: 700; }

/* footer */
.foot { margin-top: clamp(104px, 13vw, 176px); border-top: 1px solid var(--grid); }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding-block: 28px 44px; font-size: 14px; color: var(--ink-2); }
.foot p { margin-right: auto; }
.foot a { color: var(--ink-2); }
.foot a:hover { color: var(--ink); }
.foot .lang { margin-left: 0; }
@media (max-width: 1099px) { .foot a { display: inline-flex; align-items: center; min-height: 44px; } }