:root {
  --ivory:#f2eee5;
  --ivory-2:#f7f4ed;
  --ivory-3:#ece6db;

  --pearl:#fbfaf6;
  --champagne:#dfcfb9;
  --mist:#dde6e3;
  --silver:#e5e7e3;

  --ink:#10100e;
  --graphite:#2b2a26;

  --muted:#706b63;
  --muted-2:#938e85;

  --dark:#080808;
  --white:#f7f5ef;

  --line:rgba(16,16,14,.10);

  --max:1320px;

  --ease:cubic-bezier(.16,1,.3,1);

  --fast:180ms;
  --ui:360ms;
  --story:900ms;
}

* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html {
  background:var(--ivory);
  scroll-behavior:smooth;
  scroll-padding-top:72px;
}

body {
  min-height:100%;

  background:var(--ivory);
  color:var(--ink);

  font-family:
    "Manrope",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Arial,
    sans-serif;

  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;

  overflow-x:hidden;
}

body.menu-open {
  overflow:hidden;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  color:inherit;
  font:inherit;
}

img,
video,
svg {
  display:block;
}

::selection {
  background:var(--ink);
  color:var(--pearl);
}

:focus-visible {
  outline:2px solid currentColor;
  outline-offset:5px;
}

.container {
  width:min(calc(100% - 64px),var(--max));
  margin-inline:auto;
}

.eyebrow {
  font-family:"IBM Plex Mono",monospace;

  font-size:9px;
  line-height:1.45;

  letter-spacing:.20em;
  text-transform:uppercase;
}

.section-title {
  font-size:clamp(52px,5.6vw,84px);
  line-height:.96;

  letter-spacing:-.064em;

  font-weight:500;
}

.section-copy {
  max-width:480px;

  color:var(--muted);

  font-size:16px;
  line-height:1.62;
}


/* =========================================
   PROGRESS + GRAIN
   ========================================= */

.progress {
  position:fixed;

  top:0;
  left:0;

  width:0;
  height:1px;

  z-index:5000;

  background:var(--ink);
}

.noise {
  position:fixed;
  inset:0;

  z-index:4000;

  pointer-events:none;

  opacity:.10;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");

  mix-blend-mode:soft-light;
}


/* =========================================
   BRAND
   ========================================= */

.brand {
  display:inline-flex;
  align-items:center;
  gap:11px;
}

.brand-mark {
  width:42px;
  height:27px;
  color:currentColor;
}

.brand-mark svg {
  width:100%;
  height:100%;
}

.brand-cut {
  fill:var(--nav-cut,#f2eee5);
  transition:fill var(--ui);
}

.brand-word {
  font-size:15px;
  line-height:1;

  font-weight:600;
  letter-spacing:.19em;
}


/* =========================================
   NAV
   ========================================= */

.nav-shell {
  position:fixed;

  top:0;
  left:0;
  right:0;

  z-index:1500;

  color:var(--ink);

  --nav-cut:#f2eee5;

  transition:
    color var(--ui),
    background var(--ui),
    border-color var(--ui);
}

.nav-shell::before {
  content:"";

  position:absolute;
  inset:0;

  z-index:-1;

  background:
    linear-gradient(
      90deg,
      rgba(249,247,241,.70),
      rgba(245,241,232,.42),
      rgba(255,255,255,.23)
    );

  backdrop-filter:blur(16px) saturate(130%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);

  transition:background var(--ui);
}

.nav-shell.scrolled::before {
  background:
    linear-gradient(
      90deg,
      rgba(248,245,238,.94),
      rgba(241,236,226,.88),
      rgba(248,246,240,.94)
    );
}

.nav-shell.scrolled {
  border-bottom:1px solid rgba(16,16,14,.055);
}

.nav-shell.dark {
  color:var(--white);
  --nav-cut:#080808;
}

.nav-shell.dark::before {
  background:rgba(8,8,8,.56);
}

.nav-shell.dark.scrolled::before {
  background:rgba(8,8,8,.84);
}

nav {
  height:76px;

  display:grid;

  grid-template-columns:1fr auto 1fr;

  align-items:center;

  gap:30px;

  transition:height var(--ui) var(--ease);
}

.nav-shell.scrolled nav {
  height:62px;
}

.nav-links {
  display:flex;
  gap:30px;

  list-style:none;

  font-size:12px;
}

.nav-link {
  position:relative;
  display:inline-block;
  padding:12px 0;

  opacity:.56;

  transition:opacity var(--fast);
}

.nav-link:hover,
.nav-link.active {
  opacity:1;
}

.nav-link::after {
  content:"";

  position:absolute;

  left:0;
  right:100%;
  bottom:5px;

  height:1px;

  background:currentColor;

  transition:right var(--ui) var(--ease);
}

.nav-link:hover::after,
.nav-link.active::after {
  right:0;
}

.nav-actions {
  justify-self:end;

  display:flex;

  align-items:center;

  gap:10px;
}


/* =========================================
   LANGUAGE
   ========================================= */

.language {
  position:relative;
}

.language-trigger {
  min-width:58px;
  height:39px;

  padding:0 12px;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:6px;

  border:1px solid currentColor;
  border-radius:999px;

  background:rgba(255,255,255,.08);

  opacity:.64;

  cursor:pointer;

  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
}

.language-trigger:hover {
  opacity:1;
}

.language-menu {
  position:absolute;

  right:0;
  top:48px;

  width:140px;

  padding:6px;

  border:1px solid var(--line);
  border-radius:15px;

  background:rgba(250,248,243,.97);

  box-shadow:
    0 24px 65px rgba(46,38,26,.10);

  backdrop-filter:blur(20px);

  opacity:0;
  visibility:hidden;

  transform:translateY(-6px) scale(.98);

  transition:
    opacity var(--fast),
    transform var(--ui) var(--ease),
    visibility var(--fast);
}

.language-menu.open {
  opacity:1;
  visibility:visible;

  transform:none;
}

.language-menu button {
  width:100%;

  padding:10px;

  border:0;
  border-radius:9px;

  background:transparent;

  cursor:pointer;

  text-align:left;

  font-size:12px;
}

.language-menu button:hover {
  background:rgba(128,128,128,.09);
}

.nav-shell.dark .language-menu {
  background:rgba(17,17,17,.97);
  border-color:rgba(255,255,255,.1);
}


/* =========================================
   BUTTONS
   ========================================= */

.button {
  min-height:44px;

  padding:0 18px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:10px;

  border-radius:999px;

  font-size:12px;
  font-weight:600;

  transition:
    transform var(--ui) var(--ease),
    background var(--fast);
}

.button-dark {
  background:var(--ink);
  color:var(--pearl);
}

.button-dark:hover {
  background:#000;
  transform:translateY(-2px);
}

.button-light {
  background:var(--white);
  color:var(--ink);
}

.button-outline {
  border:1px solid rgba(16,16,14,.18);

  background:rgba(248,245,238,.22);

  backdrop-filter:blur(8px);
}

.button-arrow {
  transition:transform var(--fast);
}

.button:hover .button-arrow {
  transform:translateX(4px);
}


/* =========================================
   MOBILE MENU
   ========================================= */

.menu-button {
  display:none;

  width:42px;
  height:42px;

  border:0;

  background:transparent;

  position:relative;

  cursor:pointer;
}

.menu-button span {
  position:absolute;

  right:6px;

  width:22px;
  height:1px;

  background:currentColor;

  transition:
    top var(--ui) var(--ease),
    transform var(--ui) var(--ease);
}

.menu-button span:first-child {
  top:17px;
}

.menu-button span:last-child {
  top:24px;
}

.menu-button.open span:first-child {
  top:21px;
  transform:rotate(45deg);
}

.menu-button.open span:last-child {
  top:21px;
  transform:rotate(-45deg);
}

.mobile-menu {
  position:fixed;
  inset:0;

  z-index:1400;

  padding:110px 25px 40px;

  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(255,255,255,.94),
      transparent 30%
    ),
    radial-gradient(
      circle at 82% 25%,
      rgba(223,208,186,.52),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      #f8f6f0,
      #eee8dd
    );

  opacity:0;
  visibility:hidden;

  transform:translateY(-6px);

  transition:
    opacity var(--ui),
    visibility var(--ui),
    transform var(--ui) var(--ease);
}

.mobile-menu.open {
  opacity:1;
  visibility:visible;

  transform:none;
}

.mobile-menu a {
  display:block;

  padding:15px 0;

  border-bottom:1px solid var(--line);

  font-size:clamp(42px,13vw,64px);
  line-height:.98;

  letter-spacing:-.06em;
}

.mobile-languages {
  margin-top:30px;

  display:flex;
  flex-wrap:wrap;

  gap:10px;
}


/* =========================================
   HERO
   ========================================= */

.hero {
  min-height:100svh;

  position:relative;

  overflow:hidden;
  isolation:isolate;

  background:var(--ivory);
}

.hero-film-layer {
  position:absolute;
  inset:0;

  z-index:-8;

  overflow:hidden;

  background:#dcd5c8;
}

.hero-film {
  width:100%;
  height:100%;

  object-fit:cover;
  object-position:59% center;

  transform:scale(1.012);
}

.hero-protection {
  position:absolute;
  inset:0;

  z-index:-6;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      rgba(249,247,241,.995) 0%,
      rgba(247,244,236,.985) 18%,
      rgba(242,237,227,.94) 31%,
      rgba(236,229,216,.76) 43%,
      rgba(231,222,208,.42) 53%,
      rgba(236,232,222,.14) 65%,
      rgba(242,239,231,0) 78%
    );
}

.hero-pearl-light {
  position:absolute;
  inset:-15%;

  z-index:-5;

  pointer-events:none;

  background:
    radial-gradient(
      circle at 7% 20%,
      rgba(255,255,255,.96),
      transparent 27%
    ),
    radial-gradient(
      circle at 34% 72%,
      rgba(223,207,184,.42),
      transparent 30%
    ),
    radial-gradient(
      circle at 70% 76%,
      rgba(218,230,226,.34),
      transparent 33%
    );

  filter:blur(28px);

  animation:
    heroPearl 19s
    ease-in-out
    infinite alternate;
}

@keyframes heroPearl {
  from {
    transform:translate3d(-1%,-1%,0) scale(1);
  }

  to {
    transform:translate3d(3%,4%,0) scale(1.07);
  }
}

.hero-inner {
  min-height:100svh;

  display:flex;
  align-items:center;

  padding:118px 0 75px;
}

.hero-copy {
  position:relative;

  z-index:10;

  width:min(48vw,690px);
  max-width:690px;
}

.hero-copy .eyebrow {
  color:#666158;
}

.hero-title {
  margin-top:26px;

  font-size:clamp(68px,7vw,112px);
  line-height:.95;

  letter-spacing:-.069em;

  font-weight:500;
}

.hero-line {
  display:block;

  padding-bottom:.075em;

  opacity:0;

  transform:translateY(.24em);

  filter:blur(4px);

  transition:
    opacity var(--story) var(--ease),
    transform var(--story) var(--ease),
    filter var(--story) var(--ease);
}

.hero-line.visible {
  opacity:1;

  transform:none;

  filter:none;
}

.hero-line:nth-child(2) {
  transition-delay:80ms;
}

html[lang="en"] .hero-line {
  white-space:nowrap;
}

html[lang="tr"] .hero-title {
  font-size:clamp(57px,6.05vw,97px);
}

.hero-description {
  margin-top:27px;

  max-width:470px;

  color:#615d56;

  font-size:clamp(17px,1.4vw,20px);
  line-height:1.58;
}

.hero-actions {
  margin-top:32px;

  display:flex;
  flex-wrap:wrap;

  gap:11px;
}

.hero-signature {
  position:absolute;

  right:42px;
  top:122px;

  z-index:7;

  width:96px;
  height:57px;

  pointer-events:none;

  opacity:.15;

  mix-blend-mode:multiply;
}

.hero-signature span {
  position:absolute;

  top:0;

  width:57px;
  height:57px;

  border:
    1px solid rgba(16,16,14,.68);

  border-radius:50%;
}

.hero-signature span:nth-child(1) {
  left:0;
}

.hero-signature span:nth-child(2) {
  left:19px;
}

.hero-signature span:nth-child(3) {
  left:38px;
}

.hero-film-id {
  position:absolute;

  right:39px;
  bottom:26px;

  z-index:7;

  color:rgba(255,255,255,.92);

  font-family:"IBM Plex Mono",monospace;

  font-size:9px;

  letter-spacing:.17em;
  text-transform:uppercase;

  text-shadow:
    0 1px 12px rgba(0,0,0,.20);
}


/* =========================================
   PRODUCTS
   ========================================= */

.products {
  position:relative;

  padding:92px 0 110px;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 81% 8%,
      rgba(227,211,188,.48),
      transparent 29%
    ),
    radial-gradient(
      circle at 14% 74%,
      rgba(217,230,226,.43),
      transparent 34%
    ),
    radial-gradient(
      circle at 50% -5%,
      rgba(255,255,255,.94),
      transparent 32%
    ),
    linear-gradient(
      140deg,
      #f8f6f0 0%,
      #f1ece3 40%,
      #ece5da 68%,
      #f7f4ed 100%
    );
}

.products-head {
  display:grid;

  grid-template-columns:.72fr 1.28fr;

  gap:65px;

  align-items:end;
}

.products-head .eyebrow {
  color:#6d685f;
}

.products-intro {
  justify-self:end;

  max-width:470px;

  color:var(--muted);

  font-size:17px;
  line-height:1.62;
}


/* =========================================
   BOARDVISION
   ========================================= */

.boardvision {
  min-height:660px;

  margin-top:58px;

  position:relative;

  display:grid;

  grid-template-columns:.64fr 1.36fr;

  overflow:hidden;

  border-radius:30px;

  color:var(--white);

  background:
    radial-gradient(
      circle at 75% 18%,
      rgba(255,255,255,.075),
      transparent 28%
    ),
    var(--dark);

  box-shadow:
    0 30px 90px rgba(61,48,30,.12);
}

.board-copy {
  padding:64px 46px;

  display:flex;
  flex-direction:column;

  justify-content:center;
  align-items:flex-start;
}

.product-label {
  display:flex;

  align-items:center;

  gap:8px;

  color:#96958f;

  font-family:"IBM Plex Mono",monospace;

  font-size:8px;

  letter-spacing:.16em;
  text-transform:uppercase;
}

.product-label::before {
  content:"";

  width:6px;
  height:6px;

  border-radius:50%;

  background:#fff;
}

.board-copy h3 {
  margin-top:21px;

  font-size:clamp(52px,5.6vw,84px);
  line-height:.94;

  letter-spacing:-.065em;

  font-weight:500;
}

.board-copy p {
  margin-top:22px;

  max-width:350px;

  color:#9d9c97;

  line-height:1.6;
}

.board-copy .button {
  margin-top:28px;
}

.board-visual {
  position:relative;

  overflow:hidden;
}

.board-glow {
  position:absolute;

  width:620px;
  height:620px;

  right:-280px;
  top:-230px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.10),
      transparent 68%
    );

  filter:blur(30px);
}

.device {
  position:absolute;

  width:84%;
  height:77%;

  right:2%;
  bottom:-7%;

  overflow:hidden;

  border:7px solid #29292b;

  border-radius:
    22px 22px 8px 8px;

  background:#070708;

  box-shadow:
    0 55px 100px rgba(0,0,0,.68);

  transform:
    perspective(1400px)
    rotateY(-7deg)
    rotateX(3deg);

  transition:
    transform 800ms var(--ease);
}

.boardvision:hover .device {
  transform:
    perspective(1400px)
    rotateY(-2deg)
    rotateX(1deg)
    translateY(-9px);
}

.app-ui {
  height:100%;

  display:grid;

  grid-template-columns:92px 1fr;
}

.sidebar {
  padding:26px 14px;

  display:grid;

  align-content:start;

  gap:15px;

  border-right:
    1px solid rgba(255,255,255,.08);
}

.sidebar i {
  width:72%;
  height:5px;

  border-radius:999px;

  background:rgba(255,255,255,.13);
}

.app-main {
  padding:30px 25px;
}

.app-top {
  display:flex;

  align-items:center;
  justify-content:space-between;
}

.app-heading {
  width:140px;
  height:10px;

  border-radius:999px;

  background:rgba(255,255,255,.52);
}

.avatar {
  width:24px;
  height:24px;

  border-radius:50%;

  background:rgba(255,255,255,.14);
}

.columns {
  margin-top:30px;

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:12px;
}

.column {
  min-height:255px;

  padding:12px;

  display:grid;

  align-content:start;

  gap:10px;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:13px;
}

.column-title {
  width:53%;
  height:6px;

  border-radius:999px;

  background:rgba(255,255,255,.29);
}

.task {
  min-height:65px;

  padding:11px;

  display:grid;

  align-content:center;

  gap:7px;

  border-radius:9px;

  background:rgba(255,255,255,.035);
}

.task i {
  width:68%;
  height:4px;

  border-radius:999px;

  background:rgba(255,255,255,.14);
}

.task i:last-child {
  width:43%;
}


/* =========================================
   PRODUCT LAB
   ========================================= */

.product-lab {
  margin-top:18px;

  display:grid;

  grid-template-columns:1.18fr .82fr;

  gap:18px;
}

.lab-card {
  min-height:420px;

  position:relative;

  overflow:hidden;

  border:
    1px solid rgba(16,16,14,.07);

  border-radius:26px;

  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(255,255,255,.80),
      transparent 28%
    ),
    radial-gradient(
      circle at 20% 80%,
      rgba(221,230,226,.38),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #eee8dd,
      #faf8f2
    );
}

.lab-card:nth-child(2) {
  background:
    radial-gradient(
      circle at 80% 18%,
      rgba(255,255,255,.75),
      transparent 29%
    ),
    radial-gradient(
      circle at 15% 80%,
      rgba(218,227,222,.52),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      #dfe4df,
      #f5f3ec
    );
}

.lab-copy {
  position:relative;

  z-index:4;

  padding:41px;

  max-width:380px;
}

.development {
  color:#746f66;

  font-family:"IBM Plex Mono",monospace;

  font-size:8px;

  letter-spacing:.16em;
  text-transform:uppercase;
}

.lab-copy h3 {
  margin-top:17px;

  font-size:42px;

  letter-spacing:-.055em;

  font-weight:500;
}

.lab-copy p {
  margin-top:14px;

  max-width:300px;

  color:var(--muted);

  line-height:1.6;
}

.phone-product {
  position:absolute;

  width:220px;
  height:425px;

  right:4%;
  bottom:-94px;

  border:6px solid #272725;

  border-radius:38px;

  background:
    linear-gradient(
      150deg,
      #151513,
      #060606
    );

  box-shadow:
    0 35px 70px rgba(50,42,30,.22);

  transform:rotate(-4deg);
}

.phone-product::before {
  content:"";

  position:absolute;

  top:10px;
  left:50%;

  width:40%;
  height:17px;

  transform:translateX(-50%);

  border-radius:999px;

  background:#000;
}

.phone-grid {
  position:absolute;

  inset:70px 24px;

  background-image:
    linear-gradient(
      rgba(255,255,255,.05) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.05) 1px,
      transparent 1px
    );

  background-size:24px 24px;
}

.frame-product {
  position:absolute;

  right:-4%;
  top:214px; /* below the two-line copy */
  bottom:30px;

  width:66%;
  height:auto;

  border:5px solid #292825;

  border-radius:18px;

  background:
    radial-gradient(
      circle at 72% 64%,
      rgba(130,151,138,.23),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      #e1ddd3,
      #beb8ab
    );

  box-shadow:
    0 30px 60px rgba(50,42,31,.15);
}


/* =========================================
   COMPANY
   ========================================= */

.company {
  overflow:hidden;

  background:
    radial-gradient(
      circle at 5% 4%,
      rgba(255,255,255,.98),
      transparent 30%
    ),
    radial-gradient(
      circle at 72% 22%,
      rgba(231,217,198,.50),
      transparent 33%
    ),
    radial-gradient(
      circle at 12% 90%,
      rgba(221,230,226,.35),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      #fbfaf6,
      #f1ece3 54%,
      #f7f4ed
    );
}

.company-grid {
  min-height:660px;

  display:grid;

  grid-template-columns:.78fr 1.22fr;
}

.company-copy {
  padding:90px 62px 82px 0;

  display:flex;

  flex-direction:column;

  justify-content:center;
}

.company-copy .eyebrow {
  color:#6c685f;
}

.company-copy h2 {
  margin-top:20px;
}

.company-copy p {
  margin-top:25px;

  max-width:480px;

  color:var(--muted);

  line-height:1.62;
}

.text-link {
  margin-top:27px;

  width:max-content;

  padding-bottom:5px;

  display:inline-flex;

  gap:10px;

  border-bottom:
    1px solid rgba(16,16,14,.28);

  font-size:13px;
}

.company-art {
  position:relative;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 30% 13%,
      rgba(255,255,255,.70),
      transparent 33%
    ),
    linear-gradient(
      145deg,
      #eee9df,
      #d2ccc0
    );
}

.arch-wall {
  position:absolute;

  width:106%;
  height:130%;

  right:-28%;
  bottom:-43%;

  border-radius:50% 0 0 50%;

  transform:rotate(-9deg);

  background:
    linear-gradient(
      110deg,
      #c9c3b8,
      #fbf9f3 68%
    );

  box-shadow:
    -24px 0 70px rgba(0,0,0,.06);
}

.arch-opening {
  position:absolute;

  width:44%;
  height:85%;

  left:33%;
  top:8%;

  border-radius:52% 52% 3% 3%;

  background:
    linear-gradient(
      #fffef9,
      #e4dfd5
    );
}

.arch-copy {
  position:absolute;

  right:31px;
  top:65px;

  max-width:150px;

  color:#39362f;

  font-family:"IBM Plex Mono",monospace;

  font-size:9px;
  line-height:1.7;

  letter-spacing:.17em;
  text-transform:uppercase;
}


/* =========================================
   PRINCIPLES
   ========================================= */

.principles {
  padding:98px 0 112px;

  background:
    radial-gradient(
      circle at 50% -12%,
      rgba(255,255,255,.90),
      transparent 38%
    ),
    radial-gradient(
      circle at 92% 58%,
      rgba(223,209,188,.30),
      transparent 32%
    ),
    radial-gradient(
      circle at 8% 72%,
      rgba(216,228,225,.34),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #f7f4ed 0%,
      #eee8dd 100%
    );
}

.principles .eyebrow {
  color:#706c64;
}

.principles-grid {
  margin-top:55px;

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:60px;
}

.principle {
  min-height:250px;

  padding-top:22px;

  border-top:
    1px solid rgba(16,16,14,.17);
}

.principle-top {
  display:flex;

  justify-content:space-between;

  align-items:center;
}

.principle-index {
  color:#6f6a62;

  font-family:"IBM Plex Mono",monospace;

  font-size:9px;
}

.principle-icon {
  width:22px;
  height:22px;

  border:2px solid var(--ink);
}

.principle:nth-child(1) .principle-icon {
  border-radius:50%;
}

.principle:nth-child(3) .principle-icon {
  transform:rotate(45deg);
}

.principle h3 {
  margin-top:44px;

  max-width:240px;

  font-size:32px;
  line-height:1;

  letter-spacing:-.052em;

  font-weight:500;
}

.principle p {
  margin-top:17px;

  max-width:290px;

  color:var(--muted);

  line-height:1.58;
}


/* =========================================
   ECOSYSTEM
   ========================================= */

.ecosystem {
  min-height:650px;

  color:var(--white);

  background:
    radial-gradient(
      circle at 76% 43%,
      rgba(255,255,255,.075),
      transparent 28%
    ),
    var(--dark);
}

.ecosystem-grid {
  min-height:650px;

  display:grid;

  grid-template-columns:.68fr 1.32fr;

  align-items:center;

  gap:60px;
}

.ecosystem .eyebrow {
  color:#8e8d88;
}

.ecosystem h2 {
  margin-top:18px;
}

.ecosystem p {
  margin-top:23px;

  color:#989792;
}

.ecosystem .button {
  margin-top:27px;
}

.device-stage {
  height:510px;

  position:relative;

  perspective:1200px;
}

.ground {
  position:absolute;

  left:5%;
  right:0;
  bottom:25px;

  height:70px;

  background:
    radial-gradient(
      ellipse,
      rgba(255,255,255,.13),
      transparent 70%
    );

  filter:blur(28px);
}

.laptop {
  position:absolute;

  left:5%;
  bottom:78px;

  width:64%;
  height:61%;

  overflow:hidden;

  border:7px solid #29292b;

  border-radius:
    18px 18px 8px 8px;

  background:#060607;

  box-shadow:
    0 45px 90px rgba(0,0,0,.7);
}

.phone {
  position:absolute;

  left:58%;
  bottom:55px;

  width:21%;
  height:52%;

  border:6px solid #29292b;

  border-radius:31px;

  background:#060607;

  box-shadow:
    0 35px 70px rgba(0,0,0,.75);
}

.tablet {
  position:absolute;

  right:0;
  bottom:78px;

  width:35%;
  height:48%;

  border:6px solid #29292b;

  border-radius:19px;

  background:#070708;

  box-shadow:
    0 35px 75px rgba(0,0,0,.67);
}

.screen {
  position:absolute;
  inset:0;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 82% 36%,
      rgba(255,255,255,.11),
      transparent 30%
    ),
    #080809;
}

.screen::after {
  content:"";

  position:absolute;

  width:94%;
  aspect-ratio:1;

  right:-44%;
  top:16%;

  border:
    1px solid rgba(255,255,255,.16);

  border-radius:50%;
}


/* =========================================
   MANIFESTO
   ========================================= */

.manifesto {
  position:relative;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(226,208,184,.58),
      transparent 31%
    ),
    radial-gradient(
      circle at 68% 85%,
      rgba(214,229,225,.55),
      transparent 34%
    ),
    radial-gradient(
      circle at 8% 14%,
      rgba(255,255,255,.94),
      transparent 31%
    ),
    linear-gradient(
      130deg,
      #faf8f3 0%,
      #f0e9de 57%,
      #f7f4ed 100%
    );
}

.manifesto::before {
  content:"";

  position:absolute;

  width:620px;
  height:620px;

  right:-240px;
  top:-300px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.58),
      transparent 70%
    );

  filter:blur(30px);

  pointer-events:none;
}

.manifesto-grid {
  min-height:700px;

  position:relative;

  z-index:2;

  display:grid;

  grid-template-columns:.9fr .72fr;

  align-items:center;

  gap:90px;

  padding:72px 0;
}

.manifesto-copy {
  position:relative;

  z-index:5;
}

.manifesto .eyebrow {
  color:#69655d;
}

.manifesto h2 {
  margin-top:18px;

  font-size:clamp(62px,7vw,108px);
  line-height:.96;

  letter-spacing:-.069em;

  font-weight:500;
}

.manifesto p {
  margin-top:24px;

  max-width:500px;

  color:var(--muted);

  font-size:16px;
  line-height:1.65;
}


/* =========================================
   NEW MANIFESTO VIDEO
   ========================================= */

.manifesto-film-wrap {
  width:min(100%,480px);

  justify-self:end;

  position:relative;

  border-radius:30px;

  overflow:hidden;

  aspect-ratio:3/4;

  background:
    linear-gradient(
      145deg,
      #ded7ca,
      #f4f0e8
    );

  border:
    1px solid rgba(255,255,255,.48);

  box-shadow:
    0 45px 110px
    rgba(73,59,38,.16),
    0 12px 32px
    rgba(73,59,38,.08);

  transform:
    translateZ(0);
}

.manifesto-film-wrap::before {
  content:"";

  position:absolute;
  inset:0;

  z-index:3;

  pointer-events:none;

  border-radius:inherit;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.08),
      transparent 28%,
      transparent 76%,
      rgba(20,18,15,.08)
    );
}

.manifesto-film-wrap::after {
  content:"";

  position:absolute;

  inset:1px;

  z-index:4;

  pointer-events:none;

  border:
    1px solid rgba(255,255,255,.22);

  border-radius:29px;
}

.manifesto-film {
  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center;

  background:#ded7ca;
}

.manifesto-film-tag {
  position:absolute;

  left:20px;
  bottom:18px;

  z-index:5;

  color:rgba(255,255,255,.70);

  font-family:"IBM Plex Mono",monospace;

  font-size:8px;

  letter-spacing:.16em;
  text-transform:uppercase;

  text-shadow:
    0 1px 12px rgba(0,0,0,.22);
}


/* =========================================
   JOURNAL
   ========================================= */

.journal {
  padding:74px 0 90px;

  background:
    radial-gradient(
      circle at 86% 6%,
      rgba(255,255,255,.65),
      transparent 30%
    ),
    radial-gradient(
      circle at 8% 75%,
      rgba(222,230,227,.40),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #e9e5dc,
      #f4f1ea
    );
}

.journal-grid {
  display:grid;

  grid-template-columns:.55fr 1.45fr;

  gap:52px;
}

.journal .eyebrow {
  color:#69655d;
}

.journal-intro h2 {
  margin-top:16px;

  max-width:330px;

  font-size:39px;
  line-height:1.04;

  letter-spacing:-.052em;

  font-weight:500;
}

.journal-intro p {
  margin-top:18px;

  max-width:310px;

  color:var(--muted);

  font-size:14px;
  line-height:1.58;
}

.articles {
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:18px;
}

.article-art {
  aspect-ratio:1.45;

  position:relative;

  overflow:hidden;

  background:
    linear-gradient(
      145deg,
      #cac5ba,
      #f4f2eb
    );
}

.article-art::before,
.article-art::after {
  content:"";

  position:absolute;

  left:-18%;

  width:120%;
  height:46%;
}

.article-art::before {
  top:22%;

  transform:rotate(-18deg);

  background:
    linear-gradient(
      120deg,
      #1d1d1b,
      #bbb4a8
    );
}

.article-art::after {
  top:53%;

  transform:rotate(20deg);

  background:
    linear-gradient(
      120deg,
      #68655f,
      #f4f0e7
    );
}

.article h3 {
  margin-top:13px;

  font-size:15px;
  line-height:1.3;

  font-weight:600;
}

.article small {
  display:block;

  margin-top:8px;

  color:#6b665e;

  font-family:"IBM Plex Mono",monospace;

  font-size:9px;
}


/* =========================================
   FINAL
   ========================================= */

.final {
  min-height:650px;

  position:relative;

  overflow:hidden;

  display:flex;
  align-items:center;

  background:
    radial-gradient(
      circle at 76% 20%,
      rgba(228,211,187,.66),
      transparent 32%
    ),
    radial-gradient(
      circle at 58% 82%,
      rgba(213,229,225,.58),
      transparent 35%
    ),
    radial-gradient(
      circle at 7% 12%,
      rgba(255,255,255,.96),
      transparent 31%
    ),
    linear-gradient(
      130deg,
      #faf8f3 0%,
      #eee7dc 58%,
      #f7f4ed 100%
    );
}

.final-grid {
  width:100%;

  position:relative;

  z-index:3;

  display:grid;

  grid-template-columns:1fr .65fr;

  align-items:end;

  gap:85px;
}

.final h2 {
  max-width:850px;

  font-size:clamp(60px,7.4vw,110px);
  line-height:.96;

  letter-spacing:-.07em;

  font-weight:500;
}

.final-side p {
  max-width:400px;

  color:var(--muted);

  line-height:1.6;
}

.final-side .button {
  margin-top:25px;
}


/* =========================================
   FOOTER
   ========================================= */

footer {
  padding:40px 0 30px;

  background:var(--dark);
  color:var(--white);
}

.footer-grid {
  display:grid;

  grid-template-columns:1fr auto auto;

  gap:72px;
}

.footer-links,
.footer-language {
  display:grid;

  gap:11px;

  list-style:none;

  color:#888783;

  font-size:12px;
}

.footer-language button {
  all:unset;
  cursor:pointer;
}

.footer-links a:hover,
.footer-language button:hover {
  color:#fff;
}

.footer-bottom {
  margin-top:35px;

  padding-top:20px;

  display:flex;

  justify-content:space-between;

  gap:20px;

  border-top:
    1px solid rgba(255,255,255,.06);

  color:#5c5b57;

  font-family:"IBM Plex Mono",monospace;

  font-size:9px;
}


/* =========================================
   REVEAL
   ========================================= */

.reveal {
  opacity:0;

  transform:translateY(25px);

  transition:
    opacity 850ms var(--ease),
    transform 850ms var(--ease);
}

.reveal.visible {
  opacity:1;
  transform:none;
}

.delay-1 {
  transition-delay:80ms;
}

.delay-2 {
  transition-delay:160ms;
}

.delay-3 {
  transition-delay:240ms;
}


/* =========================================
   TABLET
   ========================================= */

@media(max-width:1050px) {

  .container {
    width:min(calc(100% - 40px),var(--max));
  }


  .hero-copy {
    width:min(60vw,650px);
  }

  .products-head {
    grid-template-columns:1fr;
    gap:24px;
  }

  .products-intro {
    justify-self:start;
  }

  .boardvision {
    grid-template-columns:1fr;
  }

  .board-visual {
    min-height:460px;
  }

  .product-lab {
    grid-template-columns:1fr;
  }

  .company-grid,
  .ecosystem-grid,
  .journal-grid,
  .final-grid {
    grid-template-columns:1fr;
  }

  .company-copy {
    padding:75px 0 55px;
  }

  .company-art {
    min-height:480px;
  }

  .principles-grid {
    grid-template-columns:1fr;
    gap:18px;
  }

  .ecosystem-grid {
    padding-top:75px;
  }

  .manifesto-grid {
    grid-template-columns:.9fr .8fr;
    gap:42px;
  }

  .articles {
    grid-template-columns:repeat(2,1fr);
  }


}


/* =========================================
   MOBILE
   ========================================= */

@media(max-width:720px) {

  .container {
    width:calc(100% - 30px);
  }

  nav,
  .nav-shell.scrolled nav {
    height:68px;
  }

  .language {
    display:none;
  }

  .hero-inner {
    min-height:100svh;

    align-items:flex-start;

    padding:127px 0 72px;
  }

  .hero-film {
    object-position:68% center;
  }

  .hero-protection {
    background:
      linear-gradient(
        180deg,
        rgba(249,247,241,.99) 0%,
        rgba(247,243,234,.975) 31%,
        rgba(238,231,218,.86) 49%,
        rgba(233,224,210,.47) 67%,
        rgba(242,239,231,.13) 85%,
        rgba(242,239,231,.05) 100%
      ),
      linear-gradient(
        90deg,
        rgba(248,245,238,.64),
        rgba(242,237,228,.22) 73%,
        transparent
      );
  }

  .hero-copy {
    width:100%;
    max-width:100%;
  }

  .hero-title {
    font-size:clamp(53px,14.7vw,74px);
  }

  html[lang="en"] .hero-line {
    white-space:normal;
  }

  html[lang="tr"] .hero-title {
    font-size:clamp(47px,13.5vw,66px);
  }

  .hero-description {
    font-size:16px;
  }

  .hero-signature {
    top:auto;

    right:19px;
    bottom:88px;

    width:75px;
    height:44px;
  }

  .hero-signature span {
    width:44px;
    height:44px;
  }

  .hero-signature span:nth-child(2) {
    left:15px;
  }

  .hero-signature span:nth-child(3) {
    left:30px;
  }

  .hero-film-id {
    right:18px;
    bottom:34px;
  }

  .products {
    padding:65px 0 76px;
  }

  .boardvision {
    border-radius:22px;
  }

  .board-copy {
    padding:42px 26px 30px;
  }

  .board-copy h3 {
    font-size:54px;
  }

  .board-visual {
    min-height:350px;
  }

  .device {
    width:96%;
    right:-7%;
  }

  .app-ui {
    grid-template-columns:66px 1fr;
  }

  .lab-copy {
    padding:33px 26px;
  }

  .company-art {
    min-height:390px;
  }

  .principles {
    padding:74px 0 82px;
  }

  .device-stage {
    height:365px;
  }

  .laptop {
    width:78%;
  }

  .tablet {
    display:none;
  }

  /* Manifesto becomes editorial mobile film */

  .manifesto-grid {
    min-height:auto;

    grid-template-columns:1fr;

    gap:42px;

    padding:80px 0 70px;
  }

  .manifesto h2 {
    font-size:clamp(57px,15.7vw,83px);
  }

  .manifesto-film-wrap {
    width:100%;

    max-width:none;

    justify-self:stretch;

    border-radius:24px;

    aspect-ratio:3/4;
  }

  .manifesto-film-wrap::after {
    border-radius:23px;
  }

  .articles {
    grid-template-columns:1fr;
  }

  .article:last-child {
    display:block;
  }

  .final {
    min-height:580px;

    padding:82px 0;
  }

  .final h2 {
    font-size:clamp(57px,16vw,84px);
  }

  .footer-grid {
    grid-template-columns:1fr;
  }

  .footer-bottom {
    flex-direction:column;
  }

}


/* =========================================
   REDUCED MOTION
   ========================================= */

@media(prefers-reduced-motion:reduce) {

  html {
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after {
    animation:none !important;
    transition-duration:.01ms !important;
  }

  .reveal,
  .hero-line {
    opacity:1;

    transform:none;

    filter:none;
  }

}

.skip-link { position:fixed; top:8px; left:16px; z-index:2000; padding:12px 18px; background:var(--ink); color:var(--white); transform:translateY(-180%); border-radius:8px; }
.skip-link:focus { transform:none; }
a:focus-visible, button:focus-visible { outline:2px solid currentColor; outline-offset:5px; }
.mobile-menu { overflow-y:auto; }
.footer-links, .footer-language { color:#b0afa9; }
.footer-bottom { color:#aaa89f; font-size:11px; }
.contact-email { display:block; width:max-content; max-width:100%; margin-top:20px; overflow-wrap:anywhere; font-size:15px; color:var(--ink); }

/* Product clarity, readable notes and compact mobile sections */
.boardvision { grid-template-columns:1fr 1.15fr; min-height:560px; }
.board-copy { padding:42px 34px; }
.board-copy h3 { font-size:clamp(46px,4.7vw,68px); }
.board-copy .board-status { margin:0 0 18px; color:#c3c5c3; font-size:12px; line-height:1.5; }
.board-copy .board-example { color:#c7c8c4; font-size:14px; }
.board-workflow { margin:22px 0 0; padding-left:20px; color:#d5d5cf; display:grid; gap:12px; }
.board-workflow li { font-size:13px; line-height:1.5; padding-left:3px; }
.board-workflow strong { display:block; color:var(--white); font-size:14px; }
.board-workflow span { display:block; }
.board-copy p[data-i18n="boardDescription"] { order:-1; margin:0 0 22px; color:#dddcd5; font-size:16px; }
.board-copy h3 { order:-3; }
.board-copy .product-label { order:-4; }
.board-real { display:flex; flex-direction:column; justify-content:center; padding:40px 26px; min-width:0; }
.board-real a { display:block; border:1px solid #414344; border-radius:12px; overflow:hidden; }
.board-real img { width:100%; height:auto; }
.board-real figcaption { margin-top:14px; font-size:12px; line-height:1.6; color:#c6c8c5; }
.product-label, .development, .eyebrow { font-size:10px; }
.board-copy .product-label { color:#c4c3bc; }
.nav-link { opacity:.8; }
.footer-links, .footer-language { font-size:14px; }
.journal-note summary { cursor:pointer; list-style:none; }
.journal-note summary::-webkit-details-marker { display:none; }
.journal-note summary:focus-visible { outline:2px solid var(--ink); outline-offset:6px; }
.note-meta { display:flex; align-items:center; gap:12px; margin-top:12px; }
.article .note-meta small { margin:0; font-size:11px; }
.read-note { font-size:12px; text-decoration:underline; text-underline-offset:3px; }
.note-toggle { margin-left:auto; font-size:22px; line-height:1; }
.journal-note[open] .note-toggle { transform:rotate(45deg); }
.note-body { padding-top:18px; }
.note-body p { font-size:14px; line-height:1.75; color:#514d46; margin-bottom:14px; }
.article:nth-child(2) .article-art::before { transform:rotate(28deg); }
.article:nth-child(3) .article-art::after { transform:rotate(-35deg); }
@media(max-width:1050px) {
  .boardvision { grid-template-columns:1fr; }
  .board-real { min-height:0; padding:10px 34px 34px; }
  .articles { grid-template-columns:1fr; }
  .article:last-child { display:block; }
  .article-art { aspect-ratio:auto; height:110px; }
}
@media(max-width:720px) {
  .products { padding:52px 0; }
  .boardvision { margin-top:30px; }
  .board-copy { padding:28px 22px; }
  .board-copy h3 { font-size:48px; }
  .board-copy .board-status { font-size:12px; }
  .board-real { padding:0 22px 24px; }
  .board-workflow { gap:10px; }
  .product-lab { gap:14px; }
  .lab-card { min-height:310px; }
  .lab-copy { padding:27px 22px; }
  .lab-copy h3 { font-size:36px; }
  .phone-product { width:145px; height:280px; right:3%; top:170px; bottom:auto; opacity:.5; }
  .frame-product { width:48%; height:40%; top:auto; bottom:12px; opacity:.55; }
  .company-copy { padding:52px 0 34px; }
  .company-art { min-height:220px; }
  .principles { padding:52px 0; }
  .principles-grid { margin-top:28px; gap:16px; }
  .principle { min-height:0; padding:16px 0 12px; }
  .principle h3 { margin-top:20px; font-size:28px; max-width:none; }
  .principle p { margin-top:12px; max-width:none; }
  .ecosystem, .ecosystem-grid { min-height:0; }
  .ecosystem-grid { padding:52px 0 22px; gap:20px; }
  .device-stage { height:245px; }
  .manifesto-grid { padding:52px 0; gap:28px; }
  .manifesto-film-wrap { max-width:300px; justify-self:center; }
  .journal { padding:52px 0; }
  .journal-grid { gap:28px; }
  .articles { gap:24px; }
  .article-art { height:85px; }
  .final { min-height:0; padding:58px 0; }
  .final-grid { gap:28px; }
  .footer-grid { gap:28px; }
}

.language-menu a { display:block; padding:10px; border-radius:9px; font-size:12px; }
.language-menu a:hover, .language-menu a[aria-current="page"] { background:rgba(128,128,128,.12); }
.footer-language a[aria-current="page"] { color:var(--white); text-decoration:underline; text-underline-offset:4px; }
.brand-logo { display:block; width:145px; height:auto; overflow:visible; }
footer .brand-logo { width:160px; filter:brightness(0) invert(1); }
@media(max-width:720px) { .brand-logo { width:130px; } footer .brand-logo { width:145px; } }

/* Clear desktop cursor; touch devices retain native behavior. */
@media (hover:hover) and (pointer:fine) {
  html, body { cursor:url('/assets/brand/echo-cursor-c.svg?v=1') 4 3, auto !important; }
  a, button, summary, label, select, [role="button"], a *, button * { cursor:url('/assets/brand/echo-cursor-c-link.svg?v=1') 4 3, pointer !important; }
  input, textarea, [contenteditable="true"] { cursor:text; }
}

.product-detail-link {margin-top:20px;font-size:14px;color:var(--white);text-decoration:underline;text-underline-offset:4px;}
.article-story {display:block;} .article-story:hover h3 {text-decoration:underline;text-underline-offset:5px;}

/* Journal cards with photographs */
.article-art.has-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.article-art.has-image::before,.article-art.has-image::after{display:none}

@media(max-width:400px){ .phone-product { top:205px; } }

/* Tablet and small laptops (721–1050px): use the width instead of stacking everything. */
@media (max-width:900px) {
  nav { grid-template-columns:1fr auto; }
  .nav-links, .nav-actions > .button { display:none; }
  .menu-button { display:block; }
}
@media (min-width:721px) and (max-width:1050px) {
  .principles-grid { grid-template-columns:repeat(3,1fr); gap:32px; }
  .principle { min-height:0; }
  .principle h3 { margin-top:30px; font-size:26px; }
  .principle p { font-size:14px; }
  .device { width:88%; right:2%; }
  .lab-card { min-height:360px; }
}
@media (min-width:861px) and (max-width:1050px) {
  .company-grid { grid-template-columns:1fr 1fr; min-height:0; }
  .company-copy { padding:60px 36px 60px 0; }
  .company-art { min-height:440px; }
}

/* Mobile polish (2026-10-13): readable type, no clipped graphics, no empty blocks. */
.nav-shell .brand-logo { transition:filter var(--ui) var(--ease); }
.nav-shell.dark .brand-logo { filter:brightness(0) invert(1); }
.mobile-languages a { display:inline-flex; align-items:center; min-height:44px; padding:10px 20px; border:1px solid rgba(16,16,14,.16); border-radius:999px; font-size:17px; line-height:1; letter-spacing:0; }
.mobile-languages a[aria-current="page"] { background:var(--ink); color:var(--pearl); border-color:var(--ink); }
@media (max-width:720px) {
  .hero-inner { min-height:88svh; padding:116px 0 56px; }
  .hero-protection {
    background:
      linear-gradient(180deg, rgba(249,247,241,.98) 0%, rgba(247,243,234,.93) 46%, rgba(238,231,218,.52) 64%, rgba(242,239,231,.10) 82%, rgba(242,239,231,0) 100%),
      linear-gradient(90deg, rgba(248,245,238,.55), rgba(242,237,228,.15) 70%, transparent);
  }
  .hero-description { font-size:17px; line-height:1.55; }
  .products-intro, .company-copy p, .ecosystem p, .manifesto p, .final-side p, .journal-intro p { font-size:16px; line-height:1.6; }
  .board-copy h3 { margin:12px 0 14px; }
  .board-copy p[data-i18n="boardDescription"] { font-size:17px; line-height:1.5; }
  .board-copy .board-status { font-size:13px; }
  .board-workflow strong { font-size:16px; }
  .board-workflow li { font-size:14px; }
  .board-copy .board-example { font-size:15px; line-height:1.55; }
  .board-real figcaption { font-size:13px; }
  .lab-card { min-height:0; }
  .lab-copy { max-width:none; padding:30px 22px 32px; }
  .lab-copy p { font-size:16px; max-width:none; }
  .phone-product, .frame-product { display:none; }
  .company-art { display:none; }
  .company-grid { min-height:0; }
  .company-copy { padding:56px 0 48px; }
  .principle p { font-size:16px; }
  .device-stage { height:210px; }
  .manifesto-film-wrap { max-width:none; aspect-ratio:4/5; }
  .article-art { height:auto; aspect-ratio:16/9; border-radius:14px; }
  .article h3 { font-size:18px; line-height:1.3; }
  .read-note { display:inline-flex; align-items:center; min-height:44px; font-size:14px; }
  .note-meta { margin-top:4px; }
  .final h2 { font-size:clamp(50px,14vw,72px); }
  .contact-email { font-size:17px; }
  .footer-links, .footer-language { font-size:16px; gap:2px; }
  .footer-links a, .footer-language a { display:inline-flex; align-items:center; min-height:40px; }
}

/* Vivid gradients (2026-10-13): same palette, stronger champagne + mist light. */
body {
  background:
    radial-gradient(circle at 85% 12%, rgba(216,195,165,.38), transparent 36%),
    radial-gradient(circle at 10% 85%, rgba(205,222,217,.42), transparent 38%),
    linear-gradient(150deg, #f6f3ec 0%, #efe9de 55%, #e8dfcf 100%);
  background-attachment:fixed;
}
.products {
  background:
    radial-gradient(circle at 82% 8%, rgba(214,192,160,.62), transparent 34%),
    radial-gradient(circle at 12% 76%, rgba(196,218,212,.58), transparent 38%),
    radial-gradient(circle at 50% -6%, rgba(255,255,255,.95), transparent 32%),
    linear-gradient(140deg, #f8f6f0 0%, #efe8dc 42%, #e4d8c5 70%, #f4efe6 100%);
}
.company {
  background:
    radial-gradient(circle at 5% 4%, rgba(255,255,255,.98), transparent 30%),
    radial-gradient(circle at 74% 22%, rgba(214,192,162,.64), transparent 36%),
    radial-gradient(circle at 12% 92%, rgba(198,219,213,.52), transparent 38%),
    linear-gradient(135deg, #fbfaf6, #ede6d9 54%, #e6dbc9);
}
.principles {
  background:
    radial-gradient(circle at 50% -12%, rgba(255,255,255,.92), transparent 38%),
    radial-gradient(circle at 94% 58%, rgba(212,190,160,.50), transparent 36%),
    radial-gradient(circle at 6% 74%, rgba(196,218,212,.52), transparent 36%),
    linear-gradient(180deg, #f7f4ed 0%, #e8dfcf 100%);
}
.journal {
  background:
    radial-gradient(circle at 86% 6%, rgba(255,255,255,.72), transparent 30%),
    radial-gradient(circle at 8% 78%, rgba(198,219,213,.56), transparent 36%),
    radial-gradient(circle at 70% 95%, rgba(214,192,162,.46), transparent 36%),
    linear-gradient(145deg, #e6dfd2, #f4f0e8);
}
.final {
  background:
    radial-gradient(circle at 76% 20%, rgba(212,189,158,.78), transparent 34%),
    radial-gradient(circle at 58% 84%, rgba(190,216,210,.60), transparent 34%),
    radial-gradient(circle at 7% 12%, rgba(255,255,255,.96), transparent 31%),
    linear-gradient(130deg, #faf8f3 0%, #e9e0d2 58%, #f4efe6 100%);
}
.mobile-menu {
  background:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.94), transparent 30%),
    radial-gradient(circle at 84% 28%, rgba(212,190,160,.62), transparent 40%),
    radial-gradient(circle at 20% 90%, rgba(198,219,213,.50), transparent 40%),
    linear-gradient(145deg, #f8f6f0, #e8dfcf);
}