/* ==========================================================================
   FLOW GROWTH — Landing
   Palette sampled directly from the brand mark:
   petrol #3D5A80 · terracotta #C96A3D · deep terracotta #8B4A2C
   ========================================================================== */

:root{
  /* brand */
  --petrol:        #3D5A80;
  --petrol-800:    #46628C;
  --petrol-700:    #4F6D99;
  --terracotta:       #C96A3D;
  --terracotta-deep:  #8B4A2C;
  --terracotta-soft:  #E8A67D;

  /* surfaces */
  --paper:       #F2F5F4;
  --paper-2:     #FFFFFF;

  /* text */
  --tx-dark:     #0B0E33;
  --tx-mute:     #55597A;
  --tx-light:    #FFFFFF;
  --tx-light-mu: #C9CEDF;

  /* lines */
  --line-l:      rgba(11,14,51,.10);
  --line-d:      rgba(255,255,255,.14);

  /* type */
  --f-display:   'Alexandria', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --f-body:      'IBM Plex Sans Arabic', 'Alexandria', system-ui, sans-serif;
  --f-mono:      'IBM Plex Mono', ui-monospace, monospace;

  /* rhythm */
  --wrap:        1180px;
  --pad:         clamp(18px, 5vw, 44px);
  --sec:         clamp(56px, 9vw, 150px);
  --r:           18px;
  --nav-h:       82px;
}

html[data-lang="en"]{
  --f-display: 'Alexandria', system-ui, sans-serif;
  --f-body:    'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif;
}

html[data-lang="en"]:not(.is-i18n-ready){ visibility:hidden; }

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 12px);
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--tx-dark);
  font-family:var(--f-body);
  font-size:clamp(15.5px,1.05vw,17px);
  line-height:1.9;
  font-weight:400;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
body.is-nav-open{ overflow:hidden; }

img{ max-width:100%; display:block; }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0 0 14px; }
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--terracotta); color:var(--petrol); }

:focus-visible{ outline:2px solid var(--terracotta); outline-offset:3px; border-radius:4px; }

.skip{
  position:absolute; inset-inline-start:-9999px; top:12px; z-index:200;
  background:var(--terracotta); color:var(--petrol); padding:10px 18px; border-radius:8px; font-weight:600;
}
.skip:focus{ inset-inline-start:16px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

.grad{
  background:linear-gradient(275deg,var(--terracotta) 10%,var(--terracotta-soft) 55%,var(--terracotta) 95%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.grad-dark{
  background:linear-gradient(275deg,var(--terracotta-deep),var(--terracotta));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:700; font-size:1rem;
  padding:16px 34px; border-radius:999px;
  color:#FFFFFF;
  background:linear-gradient(255deg,var(--terracotta),#D97F52);
  box-shadow:0 10px 30px -12px rgba(201,106,61,.75);
  text-shadow:0 1px 3px rgba(61,90,128,.35);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, filter .35s;
  min-height:48px;
  letter-spacing:.01em;
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -14px rgba(201,106,61,.9); filter:saturate(1.1); }
.btn:active{ transform:translateY(-1px); }
.btn--sm{ padding:11px 20px; font-size:.92rem; min-height:44px; }
.btn--lg{ padding:19px 46px; font-size:1.06rem; min-height:54px; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed; inset-inline:0; top:0; z-index:100;
  transition:background .4s, backdrop-filter .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck,
body.is-nav-open .nav{
  background:rgba(61,90,128,.92);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom-color:var(--line-d);
}
.nav__inner{
  display:flex; align-items:center; gap:20px;
  height:var(--nav-h); position:relative;
}
.nav__logo{ flex:none; min-width:0; }
.nav__logo img{ height:36px; width:auto; max-width:min(202px, 48vw); }
.nav__cta{ flex:none; margin-inline-start:0; }
.lang-toggle--bar{ margin-inline-start:auto; }

.nav__links{ display:flex; align-items:center; gap:30px; margin-inline-end:auto; }
.nav__links a:not(.btn){
  font-size:.94rem; color:var(--tx-light-mu); position:relative; padding-block:6px;
  transition:color .3s; min-height:44px; display:inline-flex; align-items:center;
}
.nav__links a:not(.btn)::after{
  content:''; position:absolute; inset-inline-start:0; bottom:8px; height:1px; width:0;
  background:var(--terracotta); transition:width .35s cubic-bezier(.2,.8,.2,1);
}
.nav__links a:not(.btn):hover{ color:#fff; }
.nav__links a:not(.btn):hover::after{ width:100%; }

.nav__panel-cta{ display:none; }
.nav__toggle{ display:none; }
.nav__backdrop{ display:none; }

.lang-toggle{
  display:inline-flex; align-items:center; gap:4px;
  flex:none; height:36px; padding:0 12px;
  border:1px solid rgba(255,255,255,.16); border-radius:999px;
  background:rgba(255,255,255,.04); color:var(--tx-light-mu);
  font-family:var(--f-mono); font-size:.75rem; font-weight:500; letter-spacing:.08em;
  cursor:pointer;
}
.lang-toggle:hover{ border-color:rgba(201,106,61,.5); color:#fff; }
.lang-toggle__opt{ opacity:.45; transition:opacity .25s, color .25s; }
html[data-lang="ar"] .lang-toggle__opt[data-on="ar"],
html[data-lang="en"] .lang-toggle__opt[data-on="en"]{
  opacity:1; color:var(--terracotta-soft);
}
.lang-toggle--panel{ display:none; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; background:var(--petrol); color:var(--tx-light);
  padding-top:clamp(108px,14vh,176px); padding-bottom:clamp(64px,8vw,110px);
  overflow:hidden;
  min-height:clamp(560px, 88vh, 820px);
  display:flex; align-items:center;
}
.hero__bg{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(900px 640px at 38% 52%, rgba(201,106,61,.07), transparent 58%),
    linear-gradient(180deg, rgba(20,32,48,0) 62%, rgba(20,32,48,.55) 100%);
}
.hero__inner{
  position:relative; z-index:3;
  display:block;
  width:100%;
}
.hero__content{
  position:relative;
  max-width:38rem;
}
.hero__content::before{
  content:'';
  position:absolute;
  inset:-56px -64px -64px -44px;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(
    ellipse 70% 65% at 78% 36%,
    rgba(20,32,48,.7) 0%,
    rgba(20,32,48,.35) 40%,
    rgba(20,32,48,.1) 65%,
    transparent 100%
  );
  filter:blur(32px);
}

.hero__title{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(1.5rem, 4.2vw + .32rem, 3.05rem);
  line-height:1.42; margin:0 0 clamp(18px,2.6vw,28px); letter-spacing:-.015em;
  text-shadow:0 10px 32px rgba(20,32,48,.8);
}
.hero__title .ln,
.hero__title .grad{ display:block; }

.hero__lead{
  font-size:clamp(1rem,1.5vw,1.2rem); color:#E4E6FB; max-width:56ch;
  margin-bottom:12px;
  text-shadow:0 8px 24px rgba(20,32,48,.75);
}
.hero__lead strong{ font-weight:600; color:#fff; }
.hero__sub{ color:var(--tx-light-mu); max-width:58ch; font-size:clamp(.95rem,1.1vw,.99rem); text-shadow:0 8px 24px rgba(20,32,48,.75); }
.hero__cta{ margin-top:clamp(24px,3.4vw,34px); }

/* hero plot — brand terracotta, dimmed on the text side */
.hero__visual{
  position:absolute; z-index:1; pointer-events:none;
  inset-block:4% -8%;
  inset-inline-end:-12%;
  inset-inline-start:6%;
  opacity:1;
  -webkit-mask-image:
    linear-gradient(to left, transparent 0%, rgba(0,0,0,.12) 14%, rgba(0,0,0,.5) 38%, #000 72%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to left, transparent 0%, rgba(0,0,0,.12) 14%, rgba(0,0,0,.5) 38%, #000 72%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-composite:intersect;
}
.hero__graphic{
  position:absolute; inset:0;
}
html[dir="rtl"] .hero__graphic{ transform:scaleX(-1); }
.hero__scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(270deg, rgba(20,32,48,.42) 0%, rgba(20,32,48,.12) 36%, transparent 62%),
    linear-gradient(180deg, rgba(20,32,48,.18) 0%, transparent 24%, transparent 78%, rgba(20,32,48,.4) 100%);
}
html[dir="ltr"] .hero__visual{
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.12) 14%, rgba(0,0,0,.5) 38%, #000 72%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.12) 14%, rgba(0,0,0,.5) 38%, #000 72%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-composite:intersect;
}
html[dir="ltr"] .hero__scrim{
  background:
    linear-gradient(90deg, rgba(20,32,48,.42) 0%, rgba(20,32,48,.12) 36%, transparent 62%),
    linear-gradient(180deg, rgba(20,32,48,.18) 0%, transparent 24%, transparent 78%, rgba(20,32,48,.4) 100%);
}
.plot{
  position:absolute; inset:0; z-index:1;
}
.hero__aura{
  position:absolute;
  left:57.7%;
  top:58%;
  z-index:0;
  width:min(78%, 620px);
  aspect-ratio:1;
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  background:radial-gradient(
    circle,
    rgba(201,106,61,.34) 0%,
    rgba(201,106,61,.18) 24%,
    rgba(201,106,61,.08) 48%,
    rgba(201,106,61,.03) 68%,
    transparent 82%
  );
}
.plot svg{ width:100%; height:100%; display:block; }
.plot__grid{ display:none; }

.plot__area{ opacity:0; animation:fadeIn .9s ease .9s forwards; }
.plot__gap{ opacity:0; animation:fadeIn 1s ease 2.1s forwards; }
.plot__line,
.plot__line-glow{ stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1.7s cubic-bezier(.4,0,.2,1) .25s forwards; }
.plot__line-glow{ opacity:.3; }
.plot__ghost{ stroke-dasharray:6 8; stroke-dashoffset:60; opacity:0; animation:ghost 1.3s ease 1.75s forwards; }
.plot__node{ opacity:0; animation:fadeIn .5s ease 2.4s forwards; }
.plot__pulse{ fill:rgba(201,106,61,.28); transform-origin:300px 232px; animation:pulse 3s ease-out 2.6s infinite; }

@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes fadeIn{ to{ opacity:1; } }
@keyframes ghost{ to{ opacity:.55; stroke-dashoffset:0; } }
@keyframes pulse{
  0%{ transform:scale(.6); opacity:.9; }
  70%{ transform:scale(1.9); opacity:0; }
  100%{ transform:scale(1.9); opacity:0; }
}

/* ==========================================================================
   SECTION SHELL
   ========================================================================== */
.section{ padding-block:var(--sec); position:relative; }
.section--paper{ background:var(--paper); }
.section--ink{ background:var(--petrol); color:var(--tx-light); }
.section--tight{ padding-top:0; }

.head{ max-width:70ch; margin-bottom:clamp(28px,5vw,64px); }
.head--center{ margin-inline:auto; text-align:center; }

.h2{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(1.38rem, 2.9vw + .28rem, 2.65rem); line-height:1.38; margin:0 0 16px;
  letter-spacing:-.012em;
}
.h2--light{ color:#fff; }
.h2 .grad{ display:block; }

.lead{ font-size:clamp(.98rem,1.35vw,1.15rem); color:var(--tx-mute); margin:0 0 8px; }
.lead--light{ color:var(--tx-light-mu); }
.lead--strong{ color:var(--tx-dark); font-weight:600; }

/* ==========================================================================
   FIT — numbered fit matrix
   ========================================================================== */
.section--fit{ padding-bottom:clamp(36px,5vw,64px); }
.checks{
  display:grid; grid-template-columns:repeat(2,1fr); gap:20px 28px;
}
.checks li{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  background:transparent; border:0; border-radius:0;
  padding:8px 4px; font-size:1.02rem;
  min-height:0;
  box-shadow:none;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.checks li:hover{
  transform:translateY(-2px);
  box-shadow:none;
}
.checks__n{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em;
  color:var(--terracotta-deep); padding-top:6px;
}
.checks__body{
  display:block;
}

.note{
  margin:clamp(24px,4vw,34px) 0 0; max-width:78ch;
  border-inline-start:2px solid var(--terracotta);
  padding:6px 20px; color:var(--tx-mute); font-size:.97rem;
}
.note--wide{ max-width:none; margin-top:clamp(28px,4vw,44px); }

.wave{
  background:var(--paper);
  line-height:0;
  margin-bottom:-1px;
}
.wave svg{
  display:block; width:100%; height:clamp(44px, 7.5vw, 80px);
}

/* ==========================================================================
   CHAIN — signature flowing beam through the labels
   ========================================================================== */
.chain-sec{ padding-top:clamp(36px,5vw,72px); }
.chain-sec .head{ margin-bottom:clamp(40px,6vw,78px); }

.chain{
  position:relative;
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  align-items:center;
  gap:4px;
  margin-bottom:clamp(40px,6vw,72px);
  isolation:isolate;
}

.chain__flow{
  position:absolute;
  inset-inline:0;
  top:50%;
  height:48px;
  transform:translateY(-50%);
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.chain__glow,
.chain__core,
.chain__pulse{
  position:absolute;
  inset-inline:0;
}

.chain__glow{
  top:50%; height:28px;
  transform:translateY(-50%);
  background:linear-gradient(
    to left,
    transparent 0%,
    rgba(201,106,61,.18) 8%,
    rgba(232,166,125,.55) 50%,
    rgba(201,106,61,.18) 92%,
    transparent 100%
  );
  filter:blur(12px);
  opacity:.95;
}

.chain__core{
  top:50%; height:3px;
  transform:translateY(-50%);
  inset-inline:3%;
  border-radius:99px;
  background:linear-gradient(
    to left,
    transparent,
    var(--terracotta) 10%,
    var(--terracotta-soft) 50%,
    var(--terracotta) 90%,
    transparent
  );
  box-shadow:
    0 0 10px rgba(201,106,61,.85),
    0 0 22px rgba(201,106,61,.35);
}

.chain__pulse{
  top:50%;
  height:10px;
  width:22%;
  inset-inline:0 auto;
  transform:translateY(-50%);
  border-radius:99px;
  background:linear-gradient(to left, transparent, #fff 35%, var(--terracotta-soft) 70%, transparent);
  filter:blur(5px);
  opacity:.9;
  animation:flowX 5.2s linear infinite;
}

@keyframes flowX{
  0%{ transform:translateY(-50%) translateX(70%); }
  100%{ transform:translateY(-50%) translateX(-500%); }
}
html[dir="ltr"] .chain__pulse{ animation-name:flowXLtr; }
@keyframes flowXLtr{
  0%{ transform:translateY(-50%) translateX(-70%); }
  100%{ transform:translateY(-50%) translateX(500%); }
}

.chain__item{
  position:relative; z-index:1;
  text-align:center;
  padding:18px 2px;
}
.chain__label{
  display:inline-block;
  font-family:var(--f-display);
  font-size:clamp(.78rem,.95vw,.94rem);
  font-weight:500;
  line-height:1.45;
  color:#F2F4FF;
  padding:5px 8px;
  border-radius:8px;
  background:rgba(20,32,48,.55);
  box-shadow:0 0 0 1px rgba(20,32,48,.35);
  text-shadow:0 1px 10px rgba(20,32,48,.9);
  transition:color .35s, transform .35s cubic-bezier(.2,.8,.2,1), background .35s;
}
.chain__item:hover .chain__label{
  color:#fff;
  background:rgba(20,32,48,.78);
  transform:translateY(-2px);
}
.chain__dot,
.chain__snake{ display:none; }
.chain__stage{ display:contents; }

.closer{ text-align:center; }
.closer p{ color:var(--tx-light-mu); margin:0 0 6px; }
.closer__strong{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(1.18rem,2.4vw,1.9rem); color:#fff !important; margin-top:8px !important;
  letter-spacing:-.01em;
}
.section--paper .closer p{ color:var(--tx-mute); }

/* ==========================================================================
   STEPS
   ========================================================================== */
.steps{ display:grid; gap:clamp(16px,2.4vw,26px); }
.step{
  display:grid; grid-template-columns:150px 1fr; gap:clamp(16px,3vw,44px);
  background:var(--paper-2); border:1px solid var(--line-l); border-radius:var(--r);
  padding:clamp(22px,3.4vw,46px);
  position:relative; overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 18px 40px -36px rgba(61,90,128,.35);
  transition:border-color .45s, box-shadow .45s;
}
.step::before{
  content:''; position:absolute; inset-block:0; inset-inline-end:0; width:3px;
  background:linear-gradient(to bottom,var(--terracotta),var(--terracotta-deep));
  transform:scaleY(0); transform-origin:top; transition:transform .55s cubic-bezier(.2,.8,.2,1);
}
.step:hover{ border-color:rgba(201,106,61,.35); box-shadow:0 30px 60px -46px rgba(61,90,128,.7); }
.step:hover::before{ transform:scaleY(1); }

.step__num{
  font-family:var(--f-mono); font-weight:500;
  font-size:clamp(2.4rem,5vw,4rem); line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(11,14,51,.22);
  transition:-webkit-text-stroke-color .45s;
}
.step:hover .step__num{ -webkit-text-stroke-color:var(--terracotta); }

.step__title{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.16rem,2vw,1.62rem); margin:0 0 14px; line-height:1.45;
  letter-spacing:-.01em;
}
.step__body > p{ color:var(--tx-mute); max-width:62ch; }
.step__kicker{
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--terracotta-deep) !important; margin:26px 0 12px;
}
.step__strong{
  font-family:var(--f-display); font-weight:600; font-size:clamp(1.02rem,1.8vw,1.3rem);
  color:var(--tx-dark) !important; margin:0; line-height:1.6;
}

.tags{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  perspective:700px;
}
.tags li{
  font-size:.88rem; color:var(--tx-dark);
  background:rgba(201,106,61,.07); border:1px solid rgba(201,106,61,.22);
  padding:10px 12px; border-radius:12px; min-height:48px;
  display:flex; align-items:center; gap:10px; width:100%;
  opacity:0;
  transform:translateY(10px) rotateX(10deg);
  transform-origin:center top;
  box-shadow:none;
  transition:transform .3s cubic-bezier(.16,1,.3,1), border-color .3s, box-shadow .3s, background .3s;
}
.tags li::before{
  content:''; flex:none; width:6px; height:6px; border-radius:50%;
  background:var(--terracotta);
  box-shadow:0 0 0 3px rgba(201,106,61,.16);
}
.step.is-in .tags li{
  animation:tagIn .62s cubic-bezier(.16,1,.3,1) forwards;
}
.step.is-in .tags li:nth-child(1){ animation-delay:.18s; }
.step.is-in .tags li:nth-child(2){ animation-delay:.24s; }
.step.is-in .tags li:nth-child(3){ animation-delay:.30s; }
.step.is-in .tags li:nth-child(4){ animation-delay:.36s; }
.step.is-in .tags li:nth-child(5){ animation-delay:.42s; }
.step.is-in .tags li:nth-child(6){ animation-delay:.48s; }
.step.is-in .tags li:nth-child(7){ animation-delay:.54s; }
.step.is-in .tags li:nth-child(8){ animation-delay:.60s; }
.step.is-in .tags li:hover,
.step.is-in .tags li:active{
  animation:none;
  opacity:1;
  transform:translateY(-2px);
  border-color:var(--terracotta);
  background:rgba(201,106,61,.12);
  box-shadow:0 10px 24px -16px rgba(201,106,61,.65), 0 0 0 1px rgba(201,106,61,.12);
}
@keyframes tagIn{
  0%{ opacity:0; transform:translateY(10px) rotateX(10deg); box-shadow:none; }
  72%{ opacity:1; transform:translateY(-1px) rotateX(0); box-shadow:0 0 0 1px var(--terracotta), 0 0 16px rgba(201,106,61,.32); }
  100%{ opacity:1; transform:none; box-shadow:none; }
}

.qs{ display:grid; gap:10px; margin-top:22px; }
.qs li{
  font-family:var(--f-display); font-weight:600; font-size:1.02rem;
  padding-inline-start:18px; position:relative; line-height:1.7;
}
.qs li::before{
  content:''; position:absolute; inset-inline-start:0; top:.85em;
  width:8px; height:1.5px; background:var(--terracotta);
}

.loop{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:10px 6px; margin-top:26px;
}
.loop__step{
  font-family:var(--f-display); font-weight:600; font-size:.92rem;
  color:var(--tx-dark);
  background:rgba(201,106,61,.07); border:1px solid rgba(201,106,61,.22);
  padding:10px 16px; border-radius:12px; position:relative;
  min-height:44px; display:inline-flex; align-items:center;
  box-shadow:0 0 0 3px rgba(201,106,61,.05);
  transition:border-color .35s, background .35s, box-shadow .35s;
}
.loop__step:hover{
  border-color:rgba(201,106,61,.5);
  background:rgba(201,106,61,.12);
  box-shadow:0 0 16px rgba(201,106,61,.18);
}
.loop__beam{
  flex:none; width:22px; height:2px; position:relative;
  border-radius:999px;
  background:linear-gradient(to left, var(--terracotta), var(--terracotta-soft));
  box-shadow:0 0 8px rgba(201,106,61,.55), 0 0 16px rgba(201,106,61,.2);
  animation:loopBeam 2.8s ease-in-out infinite;
}
html[dir="ltr"] .loop__beam{
  background:linear-gradient(to right, var(--terracotta-soft), var(--terracotta));
}
.loop__beam::after{
  content:''; position:absolute;
  inset-inline-start:100%; top:50%;
  width:0; height:0;
  transform:translateY(-50%);
  border-block:4px solid transparent;
  border-inline-start:6px solid var(--terracotta);
  border-inline-end:0;
  filter:drop-shadow(0 0 4px rgba(201,106,61,.7));
}
@keyframes loopBeam{
  0%,100%{ opacity:.55; }
  50%{ opacity:1; }
}

/* ==========================================================================
   METRICS
   ========================================================================== */
.metrics{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line-d); border:1px solid var(--line-d); border-radius:var(--r); overflow:hidden;
  margin-bottom:clamp(36px,6vw,72px);
}
.metric{
  background:var(--petrol); padding:28px 22px; min-height:104px;
  display:flex; align-items:center;
  transition:background .4s, box-shadow .4s;
}
.metric:hover{ background:var(--petrol-800); }
.metric__code{
  font-family:var(--f-mono); font-weight:500; font-size:clamp(.92rem,1.2vw,1.02rem); letter-spacing:.04em;
  color:var(--terracotta-soft);
}
.metric--ar span{ font-size:.98rem; color:#E4E6FB; }
.metric--kpi .metric__code{
  font-family:var(--f-body); color:#E4E6FB; letter-spacing:0; font-size:.98rem;
}
html[data-lang="en"] .metric--kpi .metric__code{
  font-family:var(--f-mono); color:var(--terracotta-soft); letter-spacing:.04em;
  font-size:clamp(.92rem,1.2vw,1.02rem);
}
.metric--hl{ background:var(--terracotta); }
.metric--hl:hover{
  background:#D97F52;
  box-shadow:inset 0 0 36px rgba(255,255,255,.16);
}
.metric--hl .metric__code,
.metric--hl span{
  color:#FFFFFF !important;
  text-shadow:0 1px 3px rgba(61,90,128,.35);
}
html[data-lang="en"] .metric--hl.metric--kpi .metric__code{
  color:#FFFFFF;
}

/* ==========================================================================
   LAYERS
   ========================================================================== */
.layers{ display:grid; gap:12px; max-width:820px; }
.layer{
  border:1px solid var(--line-l); border-radius:14px; background:var(--paper-2);
  padding:22px 24px; display:flex; align-items:center; gap:18px;
  min-height:64px;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.layer:hover{ transform:translateX(-6px); }
html[dir="ltr"] .layer:hover{ transform:translateX(6px); }
.layer__text{ font-family:var(--f-display); font-weight:600; font-size:clamp(.98rem,1.4vw,1.05rem); }
.layer--top{
  background:var(--petrol); border-color:var(--petrol);
  color:#fff; padding-block:28px;
  box-shadow:0 30px 60px -40px rgba(61,90,128,.85);
  justify-content:flex-start; flex-wrap:nowrap;
}
.layer--top .layer__text{ font-weight:600; min-width:0; }

/* ==========================================================================
   EXCLUSIONS — scope board
   ========================================================================== */
.excl-board{
  display:grid;
  grid-template-columns:88px 1fr;
  gap:8px 28px;
  align-items:stretch;
  background:var(--petrol);
  color:#d8dbed;
  border-radius:22px;
  padding:clamp(22px,3vw,36px);
  box-shadow:0 28px 60px -42px rgba(61,90,128,.7);
}
.excl-board__mark{
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:8px;
}
.excl-board__mark span{
  display:block; width:44px; height:44px; border-radius:50%;
  border:1.5px solid rgba(232,166,125,.35);
  position:relative;
}
.excl-board__mark span::before{
  content:''; position:absolute; inset-inline:11px; top:50%;
  height:1.5px; background:rgba(232,166,125,.7);
  transform:translateY(-50%);
}
.excl{ display:grid; grid-template-columns:1fr; gap:14px; }
.excl li{
  position:relative;
  padding:4px 0;
  color:rgba(232,234,248,.82); display:block; font-size:1rem;
  min-height:0;
}

/* ==========================================================================
   QUOTE
   ========================================================================== */
.section--quote{ text-align:center; }
.quote{ margin:0 auto; max-width:900px; position:relative; padding:0 clamp(4px,4vw,40px); }
.quote blockquote{
  margin:0; font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.12rem,2.9vw,2.3rem); line-height:1.62; color:#fff;
  letter-spacing:-.012em;
}
.quote::before{
  content:''; display:block; width:46px; height:2px; margin:0 auto 30px;
  background:linear-gradient(to left,var(--terracotta),var(--terracotta-deep));
}
.quote__after{
  margin-top:clamp(24px,4vw,36px); font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.05rem,1.8vw,1.3rem); color:var(--terracotta-soft);
}

/* ==========================================================================
   REVIEW / CTA
   ========================================================================== */
.review{
  background:
    radial-gradient(900px 420px at 82% 0%, rgba(201,106,61,.13), transparent 62%),
    var(--paper-2);
  border-top:1px solid var(--line-l);
}
.review__inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,70px); align-items:start; }
.review__head .h2{ margin-bottom:20px; }
.review__body{
  background:var(--paper); border:1px solid var(--line-l); border-radius:var(--r);
  padding:clamp(22px,3.6vw,44px);
  box-shadow:0 24px 50px -42px rgba(61,90,128,.45);
}
.review__kicker{
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--terracotta-deep); margin-bottom:16px;
}
.chips{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:24px; }
.chips li{
  background:var(--paper-2); border:1px solid var(--line-l);
  padding:10px 16px; border-radius:999px; font-size:.93rem; font-weight:500;
  min-height:44px; display:inline-flex; align-items:center;
  transition:border-color .3s, transform .3s, box-shadow .3s;
}
.chips li:hover{
  border-color:rgba(201,106,61,.4);
  transform:translateY(-1px);
}
.review__text{ color:var(--tx-mute); margin-bottom:30px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ background:var(--petrol); color:#fff; padding-block:clamp(48px,7vw,86px); }
.footer__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(20px,4vw,32px); flex-wrap:wrap;
  border-top:1px solid var(--line-d); padding-top:clamp(28px,4vw,54px);
}
.footer__logo{ height:clamp(36px,5vw,44px); width:auto; flex:none; }
.footer__mail{
  font-family:var(--f-body); font-size:.9rem; font-weight:400;
  color:var(--tx-light-mu); letter-spacing:.01em;
  min-height:44px; display:inline-flex; align-items:center;
  transition:color .3s;
}
.footer__mail:hover{ color:var(--terracotta-soft); }
.footer__claim{ text-align:start; min-width:0; }
.footer__claim p{
  margin:0; font-family:var(--f-display); font-weight:700;
  font-size:clamp(1.02rem,1.9vw,1.42rem); line-height:1.6;
  letter-spacing:-.01em;
}

/* ==========================================================================
   REVEAL
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(26px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1);
}

/* ==========================================================================
   RESPONSIVE — tablet
   ========================================================================== */
@media (max-width:1024px){
  .review__inner{ grid-template-columns:1fr; }
  .chain{ grid-template-columns:repeat(8,minmax(0,1fr)); }
}

@media (max-width:900px){
  .metrics{ grid-template-columns:repeat(2,1fr); }
  .tags{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ==========================================================================
   RESPONSIVE — mobile / small tablet
   ========================================================================== */
@media (max-width:760px){
  :root{ --nav-h: 68px; }

  .nav__inner{
    height:var(--nav-h);
    justify-content:space-between;
    gap:12px;
  }
  .nav__logo img{ height:31px; max-width:min(181px, 48vw); }
  .nav__cta{ display:none; }
  .lang-toggle--bar{ display:none; }
  .lang-toggle--panel{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    width:100%;
    height:auto;
    min-height:48px;
    margin:0;
    padding:12px 4px;
    gap:6px;
    border:0;
    border-bottom:1px solid rgba(255,255,255,.1);
    border-radius:0;
    background:transparent;
    color:#E8EAF8;
    font-family:var(--f-display);
    font-size:1.12rem;
    font-weight:500;
    letter-spacing:0;
  }
  .lang-toggle--panel:hover{
    border-color:transparent;
    border-bottom-color:rgba(255,255,255,.1);
    color:#fff;
    background:transparent;
  }
  .nav__links{ margin-inline-end:0; }

  .nav__toggle{
    display:inline-flex; align-items:center; justify-content:center;
    flex:none; width:44px; height:44px; margin-inline-start:auto;
    padding:0; border:1px solid rgba(255,255,255,.16);
    border-radius:12px; background:rgba(255,255,255,.04);
    cursor:pointer; color:#fff; z-index:130;
  }
  .nav__toggle:hover{ border-color:rgba(201,106,61,.55); background:rgba(201,106,61,.08); }
  .nav__toggle-bars{
    display:flex; flex-direction:column; justify-content:center; gap:6px; width:18px;
  }
  .nav__toggle-bars span{
    display:block; height:1.5px; width:100%; background:#fff; border-radius:2px;
    transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s;
    transform-origin:center;
  }
  body.is-nav-open .nav__toggle-bars span:first-child{ transform:translateY(3.75px) rotate(-45deg); }
  body.is-nav-open .nav__toggle-bars span:last-child{ transform:translateY(-3.75px) rotate(45deg); }

  .nav__backdrop{
    display:block; position:fixed; inset:0; z-index:110;
    background:rgba(0,0,20,.55);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .35s ease, visibility .35s;
  }
  body.is-nav-open .nav__backdrop{
    opacity:1; visibility:visible; pointer-events:auto;
  }

  .nav__links{
    position:fixed;
    inset-block:0; inset-inline-start:0;
    z-index:120;
    width:min(86vw, 360px);
    height:100dvh;
    margin:0;
    padding:calc(var(--nav-h) + 28px) 24px 32px;
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:6px;
    background:linear-gradient(180deg, var(--petrol-800), var(--petrol));
    border-inline-end:1px solid var(--line-d);
    box-shadow:-24px 0 60px -30px rgba(0,0,0,.7);
    transform:translateX(110%);
    visibility:hidden;
    transition:transform .42s cubic-bezier(.2,.8,.2,1), visibility .42s;
  }
  body.is-nav-open .nav__links{
    transform:none; visibility:visible;
  }
  .nav__links a:not(.btn){
    font-size:1.12rem; font-weight:500;
    color:#E8EAF8; padding:12px 4px; min-height:48px;
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .nav__links a:not(.btn)::after{ display:none; }
  .nav__panel-cta{
    display:inline-flex; margin-top:22px; width:100%;
  }

  .checks{ grid-template-columns:1fr; }
  .excl-board{ grid-template-columns:1fr; padding:22px 18px; }
  .excl-board__mark{ justify-content:flex-start; padding-top:0; margin-bottom:8px; }

  .step{
    grid-template-columns:1fr;
    gap:10px;
    padding:22px 18px 24px;
    transition:border-color .45s, box-shadow .45s, transform .7s cubic-bezier(.16,1,.3,1), opacity .7s cubic-bezier(.16,1,.3,1);
  }
  .step.reveal{
    opacity:0;
    transform:translateY(22px) scale(.97);
  }
  .step.reveal.is-in{
    opacity:1;
    transform:none;
    transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  }
  .step.reveal.is-in:active{
    transform:scale(.98);
    transition-duration:.16s;
  }
  .step::before{
    transform:scaleY(0);
    transform-origin:top;
    transition:transform .7s cubic-bezier(.16,1,.3,1);
  }
  .step.is-in::before{ transform:scaleY(1); }
  .step__num{
    font-size:1.85rem;
    opacity:0;
    transform:scale(.9);
  }
  .step.is-in .step__num{
    opacity:1;
    transform:none;
    -webkit-text-stroke-color:var(--terracotta);
    transition:opacity .55s cubic-bezier(.16,1,.3,1) .2s, transform .55s cubic-bezier(.16,1,.3,1) .2s, -webkit-text-stroke-color .55s .2s;
  }

  .layer--top{
    justify-content:flex-start;
    padding:22px 20px;
  }
  .layer{ padding:18px 18px; }
  .layer:hover{ transform:none; }

  .loop{
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .loop__step{ width:100%; justify-content:center; }
  .loop__beam{
    width:12px;
    height:22px;
    align-self:center;
    border-radius:0;
    /* Single continuous shaft + arrowhead (no seam) */
    background:linear-gradient(to bottom, var(--terracotta-soft), var(--terracotta));
    box-shadow:none;
    filter:drop-shadow(0 0 4px rgba(201,106,61,.55));
    clip-path:polygon(
      calc(50% - 1px) 0%,
      calc(50% + 1px) 0%,
      calc(50% + 1px) calc(100% - 7px),
      100% calc(100% - 7px),
      50% 100%,
      0% calc(100% - 7px),
      calc(50% - 1px) calc(100% - 7px)
    );
  }
  html[dir="ltr"] .loop__beam{
    background:linear-gradient(to bottom, var(--terracotta-soft), var(--terracotta));
  }
  .loop__beam::after{ display:none; }

  .footer__inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:center;
    column-gap:12px;
    row-gap:14px;
  }
  .footer__logo{
    grid-column:1;
    justify-self:start;
    height:28px;
    max-width:min(148px, 46vw);
  }
  .footer__claim{
    grid-column:2;
    justify-self:end;
    text-align:start;
  }
  .footer__claim p{ font-size:clamp(.78rem, 3.4vw, .92rem); line-height:1.45; }
  .footer__mail{
    grid-column:1 / -1;
    justify-self:start;
    min-height:0;
    padding-block:2px;
  }

  .hero__cta .btn{ width:100%; }
  .btn--lg{ width:100%; }

  .hero{
    min-height:0;
    align-items:flex-start;
    padding-top:calc(var(--nav-h) + 28px);
  }
  .hero__visual{
    inset: auto;
    top: calc(var(--nav-h) + 4px);
    left: -22%;
    right: auto;
    width: 72%;
    height: 48%;
    opacity: 1;
    -webkit-mask-image:
      linear-gradient(to right, #000 0%, #000 40%, rgba(0,0,0,.45) 68%, transparent 96%),
      linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:
      linear-gradient(to right, #000 0%, #000 40%, rgba(0,0,0,.45) 68%, transparent 96%),
      linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-composite:intersect;
  }
  .hero__scrim{
    background:
      linear-gradient(270deg, rgba(20,32,48,.55) 0%, rgba(20,32,48,.18) 46%, transparent 72%);
  }
  .hero__content{ max-width:none; }
  .hero__content::before{
    inset:-28px -36px -44px 0;
    background:radial-gradient(
      ellipse 75% 70% at 100% 28%,
      rgba(20,32,48,.65) 0%,
      rgba(20,32,48,.28) 40%,
      rgba(20,32,48,.08) 65%,
      transparent 100%
    );
    filter:blur(28px);
  }
  .hero__aura{
    width:min(100%, 380px);
  }

  /* serpentine growth path */
  .chain{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    overflow:visible;
    padding-block:4px;
    /* Android: isolate from scroll-linked paint corruption */
    isolation:isolate;
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
  /* Avoid stacking reveal translateY with stage scaleX / SVG glow layers */
  .chain.reveal{
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
  }
  .chain.reveal.is-in{
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
  }
  .chain__stage{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    position:relative;
    width:100%;
    isolation:isolate;
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
    will-change:transform;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
  .chain__flow{ display:none; }
  .chain__snake{
    display:block;
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:0;
    pointer-events:none;
    overflow:visible;
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
  .chain__snake-halo,
  .chain__snake-glow,
  .chain__snake-core,
  .chain__snake-pulse{
    vector-effect:non-scaling-stroke;
  }
  .chain__snake-halo{
    stroke-width:16px;
    opacity:.16;
  }
  .chain__snake-glow{
    stroke-width:9px;
    opacity:.38;
  }
  .chain__snake-core{
    stroke-width:3.5px;
  }
  .chain__snake-pulse{
    stroke-width:7px;
    stroke-dasharray:.1 .9;
    opacity:.9;
    animation:snakeFlow 5s linear infinite;
    will-change:stroke-dashoffset;
  }
  @keyframes snakeFlow{
    to{ stroke-dashoffset:-1; }
  }

  .chain__item{
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    height:72px;
    padding:0 8px;
    text-align:start;
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
    backface-visibility:hidden;
  }
  .chain__item:nth-of-type(odd){ justify-content:flex-start; }
  .chain__item:nth-of-type(even){
    justify-content:flex-start;
    flex-direction:row-reverse;
  }
  .chain__dot{
    display:grid;
    place-items:center;
    position:relative;
    top:auto;
    left:auto;
    flex:none;
    width:11px;
    height:11px;
    margin:0;
    border-radius:50%;
    background:var(--terracotta-soft);
    border:2px solid var(--terracotta-soft);
    box-shadow:0 0 0 5px rgba(201,106,61,.18), 0 0 0 10px rgba(201,106,61,.08);
    transform:none;
    z-index:2;
  }
  .chain__dot-ring{
    position:absolute;
    width:22px; height:22px; border-radius:50%;
    border:1.5px solid rgba(201,106,61,.28);
    pointer-events:none;
  }
  .chain__item:nth-of-type(even) .chain__dot{ left:auto; }
  .chain__label{
    font-size:.92rem;
    padding:8px 14px;
    min-width:0;
    max-width:58%;
    position:relative;
    z-index:2;
    background:var(--petrol);
    border:1px solid rgba(201,106,61,.28);
    box-shadow:0 0 0 5px rgba(20,32,48,.92);
    text-shadow:none;
  }
  .chain__item:hover .chain__label{ transform:none; }

  html[dir="ltr"] .chain__stage{
    transform:scaleX(-1) translateZ(0);
    -webkit-transform:scaleX(-1) translateZ(0);
  }
  html[dir="ltr"] .chain__item{
    display:block;
    position:relative;
    flex:0 0 72px;
    height:72px;
    min-height:72px;
    max-height:72px;
    padding:0;
    gap:0;
  }
  html[dir="ltr"] .chain__item:nth-of-type(even){ flex-direction:row; }
  html[dir="ltr"] .chain__dot{
    position:absolute;
    top:50%;
    left:80%;
    transform:translate(-50%,-50%) translateZ(0);
    -webkit-transform:translate(-50%,-50%) translateZ(0);
  }
  html[dir="ltr"] .chain__item:nth-of-type(even) .chain__dot{ left:20%; }
  /*
   * EN pills: near edge is locked to the same fixed % as the dot + 18px gap.
   * Width is max-content (capped); only the far edge grows toward center.
   * scaleX(-1) un-mirrors glyphs; origin is the near edge so the gap never drifts.
   */
  html[dir="ltr"] .chain__label{
    position:absolute;
    top:50%;
    right:auto;
    width:max-content;
    max-width:60%;
    white-space:nowrap;
    overflow:visible;
    font-size:.86rem;
    padding:8px 12px;
    box-sizing:border-box;
  }
  html[dir="ltr"] .chain__item:nth-of-type(odd) .chain__label{
    left:80%;
    transform:translateY(-50%) translateX(calc(-100% - 18px)) scaleX(-1) translateZ(0);
    -webkit-transform:translateY(-50%) translateX(calc(-100% - 18px)) scaleX(-1) translateZ(0);
    transform-origin:right center;
  }
  html[dir="ltr"] .chain__item:nth-of-type(even) .chain__label{
    left:20%;
    transform:translateY(-50%) translateX(18px) scaleX(-1) translateZ(0);
    -webkit-transform:translateY(-50%) translateX(18px) scaleX(-1) translateZ(0);
    transform-origin:left center;
  }
  html[dir="ltr"] .chain__item:hover .chain__label{
    transform:translateY(-50%) translateX(calc(-100% - 18px)) scaleX(-1) translateZ(0);
    -webkit-transform:translateY(-50%) translateX(calc(-100% - 18px)) scaleX(-1) translateZ(0);
  }
  html[dir="ltr"] .chain__item:nth-of-type(even):hover .chain__label{
    transform:translateY(-50%) translateX(18px) scaleX(-1) translateZ(0);
    -webkit-transform:translateY(-50%) translateX(18px) scaleX(-1) translateZ(0);
  }

  html[dir="ltr"] .nav__links{
    transform:translateX(-110%);
    border-inline-end:0;
    border-inline-start:1px solid var(--line-d);
    box-shadow:24px 0 60px -30px rgba(0,0,0,.7);
  }
  html[dir="ltr"] body.is-nav-open .nav__links{ transform:none; }

  html[dir="ltr"] .hero__visual{
    left:auto;
    right:-22%;
    -webkit-mask-image:
      linear-gradient(to left, #000 0%, #000 40%, rgba(0,0,0,.45) 68%, transparent 96%),
      linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:
      linear-gradient(to left, #000 0%, #000 40%, rgba(0,0,0,.45) 68%, transparent 96%),
      linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-composite:intersect;
  }
  html[dir="ltr"] .hero__scrim{
    background: linear-gradient(90deg, rgba(20,32,48,.55) 0%, rgba(20,32,48,.18) 46%, transparent 72%);
  }
  html[dir="ltr"] .hero__content::before{
    inset:-28px 0 -44px -36px;
    background:radial-gradient(
      ellipse 75% 70% at 0% 28%,
      rgba(20,32,48,.65) 0%,
      rgba(20,32,48,.28) 40%,
      rgba(20,32,48,.08) 65%,
      transparent 100%
    );
    filter:blur(28px);
  }
}

@media (max-width:480px){
  .metrics{ grid-template-columns:1fr; }
  .metric{ min-height:88px; padding:22px 20px; }
  .hero__title{ font-size:clamp(1.42rem, 7vw, 1.9rem); }
}

@media (max-width:360px){
  .nav__logo img{ max-width:162px; }
  .h2{ font-size:1.38rem; }
}

/* ==========================================================================
   GROWTH REVIEW FORM — modal, steps, option cards
   ========================================================================== */
body.is-lf-open{ overflow:hidden; }

.lf{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(12px,3vw,32px);
}
.lf[hidden]{ display:none; }

.lf__sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

.lf__backdrop{
  position:absolute; inset:0;
  background:rgba(11,14,51,.58);
  backdrop-filter:blur(6px) saturate(1.1);
  -webkit-backdrop-filter:blur(6px) saturate(1.1);
  opacity:0; transition:opacity .35s ease;
}
.lf.is-open .lf__backdrop{ opacity:1; }

.lf__panel{
  position:relative;
  display:flex; flex-direction:column;
  width:100%; max-width:680px;
  max-height:min(92dvh, 880px);
  background:
    radial-gradient(760px 260px at 100% 0%, rgba(201,106,61,.11), transparent 62%),
    var(--paper-2);
  border:1px solid var(--line-l); border-radius:calc(var(--r) + 6px);
  box-shadow:0 46px 90px -50px rgba(11,14,51,.85), 0 1px 0 rgba(255,255,255,.7) inset;
  opacity:0; transform:translateY(16px) scale(.985);
  transition:opacity .3s ease, transform .42s cubic-bezier(.2,.8,.2,1);
  overflow:hidden;
}
.lf.is-open .lf__panel{ opacity:1; transform:none; }

.lf__close{
  position:absolute; top:14px; inset-inline-end:14px; z-index:2;
  width:40px; height:40px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line-l); border-radius:12px;
  background:var(--paper-2); color:var(--tx-mute); cursor:pointer;
  transition:color .3s, border-color .3s, background .3s;
}
.lf__close:hover{ color:var(--terracotta-deep); border-color:rgba(201,106,61,.45); background:rgba(201,106,61,.06); }
.lf__close svg{ width:20px; height:20px; }

.lf__head{
  flex:none;
  padding:clamp(22px,4vw,30px) clamp(20px,4vw,36px) 0;
  padding-inline-end:clamp(62px,8vw,72px);
}
.lf__title{
  margin:0 0 8px; font-family:var(--f-display); font-weight:700;
  font-size:clamp(1.24rem,3vw,1.62rem); line-height:1.5; letter-spacing:-.012em;
  color:var(--tx-dark);
}
.lf__intro{
  margin:0; color:var(--tx-mute); font-size:clamp(.9rem,1.1vw,.97rem); line-height:1.8;
  max-width:52ch;
}

.lf__progress{
  display:flex; align-items:center;
  margin-top:clamp(16px,2.4vw,22px);
  padding-inline-end:clamp(0px,2vw,10px);
}
.lf__seg{ display:flex; align-items:center; flex:none; }
.lf__seg + .lf__seg{ flex:1; }
.lf__seg + .lf__seg::before{
  content:''; flex:1 1 auto; height:2px; min-width:18px;
  margin-inline:8px; border-radius:2px;
  background:var(--line-l); transition:background .45s ease;
}
.lf__seg.is-done + .lf__seg::before{ background:rgba(201,106,61,.55); }
.lf__seg-dot{
  position:relative; flex:none;
  width:22px; height:22px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid rgba(11,14,51,.16); background:var(--paper-2); color:#fff;
  transition:background .35s, border-color .35s, box-shadow .35s;
}
.lf__seg-dot svg{
  width:14px; height:14px; opacity:0; transform:scale(.6);
  transition:opacity .3s, transform .3s cubic-bezier(.2,.8,.2,1);
}
.lf__seg.is-done .lf__seg-dot{ background:var(--terracotta); border-color:var(--terracotta); }
.lf__seg.is-done .lf__seg-dot svg{ opacity:1; transform:none; }
.lf__seg.is-current .lf__seg-dot{
  border-color:var(--terracotta);
  box-shadow:0 0 0 4px rgba(201,106,61,.13);
}
.lf__seg.is-current .lf__seg-dot::after{
  content:''; position:absolute; width:8px; height:8px; border-radius:50%;
  background:var(--terracotta);
}

.lf__form{ display:flex; flex-direction:column; min-height:0; flex:1 1 auto; }
.lf__form[hidden]{ display:none; }
.lf__body{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  padding:clamp(18px,3vw,26px) clamp(20px,4vw,36px) clamp(16px,3vw,22px);
  scrollbar-width:thin;
}

.lf__step{ display:none; }
.lf__step.is-active{
  display:grid; gap:clamp(16px,2.4vw,22px);
  animation:lfStepIn .4s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes lfStepIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:none; }
}

.lf__field{ margin:0; padding:0; border:0; min-width:0; }
.lf__label{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px;
  padding:0 0 9px;
  font-family:var(--f-display); font-weight:600; font-size:.95rem; line-height:1.6;
  color:var(--tx-dark);
}
.lf__tag{
  font-family:var(--f-mono); font-size:.66rem; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--terracotta-deep); opacity:.85;
}

.lf__input{
  display:block; width:100%;
  min-height:50px; padding:12px 16px;
  font-family:var(--f-body); font-size:.97rem; color:var(--tx-dark);
  background:var(--paper); border:1px solid var(--line-l); border-radius:13px;
  transition:border-color .28s, box-shadow .28s, background .28s;
}
.lf__input::placeholder{ color:rgba(85,89,122,.55); }
.lf__input:hover{ border-color:rgba(11,14,51,.18); }
.lf__input:focus{
  outline:none; background:var(--paper-2);
  border-color:var(--terracotta);
  box-shadow:0 0 0 3px rgba(201,106,61,.14);
}
.lf__textarea{ min-height:96px; resize:vertical; line-height:1.8; padding-top:14px; }

.lf__count{
  margin:7px 2px 0; text-align:end;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em;
  color:var(--tx-mute); opacity:.75; transition:color .3s, opacity .3s;
}
.lf__count.is-over{ color:var(--terracotta-deep); opacity:1; }

.lf__opts{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.lf__opts--duo{ grid-template-columns:repeat(2, minmax(0,1fr)); max-width:340px; }

.lf__opt{ position:relative; display:block; min-width:0; }
.lf__opt input{
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; opacity:0; cursor:pointer;
}
.lf__opt > span{
  display:flex; align-items:center; gap:11px;
  min-height:50px; height:100%; padding:11px 15px;
  background:var(--paper-2); border:1px solid var(--line-l); border-radius:14px;
  font-size:.93rem; font-weight:500; line-height:1.6; color:var(--tx-dark);
  transition:border-color .28s, background .28s, box-shadow .28s, transform .28s;
}
.lf__opt > span::before{
  content:''; flex:none; width:17px; height:17px; border-radius:50%;
  border:1.5px solid rgba(11,14,51,.2);
  transition:border-color .25s, background .25s, box-shadow .25s;
}
.lf__opt input[type="checkbox"] + span::before{ border-radius:5px; }
.lf__opt input:hover + span{ border-color:rgba(201,106,61,.4); transform:translateY(-1px); }
.lf__opt input:checked + span{
  border-color:var(--terracotta);
  background:linear-gradient(180deg, rgba(201,106,61,.09), rgba(201,106,61,.04));
  box-shadow:0 12px 26px -20px rgba(201,106,61,.9);
}
.lf__opt input:checked + span::before{
  background:var(--terracotta); border-color:var(--terracotta);
  box-shadow:inset 0 0 0 3.5px var(--paper-2);
}
.lf__opt input:focus-visible + span{ outline:2px solid var(--terracotta); outline-offset:3px; }

.lf__reveal{
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .42s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}
.lf__reveal.is-open{ max-height:640px; opacity:1; }
.lf__reveal-inner{ padding-block:4px; }

.lf__err{
  margin:9px 2px 0; font-size:.85rem; line-height:1.65; font-weight:500;
  color:var(--terracotta-deep);
}
.lf__err::before{ content:'— '; opacity:.7; }
.lf__field.is-invalid .lf__input{
  border-color:rgba(201,106,61,.75);
  background:rgba(201,106,61,.04);
}
.lf__field.is-invalid .lf__opt > span{ border-color:rgba(201,106,61,.4); }

.lf__alert{
  margin:clamp(16px,2.4vw,20px) 0 0; padding:13px 16px;
  border:1px solid rgba(201,106,61,.35); border-inline-start:2px solid var(--terracotta);
  border-radius:12px; background:rgba(201,106,61,.06);
  color:var(--terracotta-deep); font-size:.9rem; line-height:1.75;
}

.lf__actions{
  flex:none; display:flex; align-items:center; gap:12px;
  padding:clamp(14px,2.4vw,18px) clamp(20px,4vw,36px);
  border-top:1px solid var(--line-l);
  background:var(--paper-2);
}
.lf__ghost{
  flex:none; min-height:48px; padding:12px 22px;
  font-family:var(--f-display); font-weight:600; font-size:.94rem;
  color:var(--tx-mute); background:transparent;
  border:1px solid var(--line-l); border-radius:999px; cursor:pointer;
  transition:color .3s, border-color .3s, background .3s;
}
.lf__ghost:hover{ color:var(--tx-dark); border-color:rgba(11,14,51,.22); background:var(--paper); }
.lf__go{
  flex:1 1 auto; margin-inline-start:auto; max-width:340px;
  border:0; cursor:pointer; font-family:var(--f-display);
  position:relative;
}
.lf__go[hidden]{ display:none; }
.lf__go[disabled]{ opacity:.72; cursor:default; transform:none; box-shadow:0 10px 30px -12px rgba(201,106,61,.5); }
.lf__go[disabled]:hover{ transform:none; filter:none; }
.lf__go-label{ display:inline-flex; align-items:center; gap:10px; }
.lf__go-label[hidden]{ display:none; }
.lf__spin{
  width:15px; height:15px; flex:none;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%;
  animation:lfSpin .7s linear infinite;
}
@keyframes lfSpin{ to{ transform:rotate(360deg); } }

.lf__done{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:clamp(30px,6vw,54px) clamp(22px,4vw,44px) clamp(26px,5vw,44px);
  animation:lfStepIn .45s cubic-bezier(.2,.8,.2,1) both;
}
.lf__done[hidden]{ display:none; }
.lf__done-icon{ color:var(--terracotta); margin-bottom:18px; }
.lf__done-icon svg{ width:60px; height:60px; }
.lf__done-title{
  margin:0 0 10px; font-family:var(--f-display); font-weight:700;
  font-size:clamp(1.16rem,2.6vw,1.42rem); line-height:1.55; color:var(--tx-dark);
}
.lf__done-text{
  margin:0 0 clamp(22px,3.4vw,30px); color:var(--tx-mute);
  font-size:.97rem; line-height:1.85; max-width:44ch;
}

/* ---------- growth review form — mobile sheet ---------- */
@media (max-width:760px){
  .lf{ padding:0; align-items:stretch; justify-content:stretch; }
  .lf__panel{
    max-width:none; width:100%;
    height:100dvh; max-height:100dvh;
    border:0; border-radius:0;
    transform:translateY(28px);
  }
  .lf__head{ padding-top:20px; padding-inline-end:64px; }
  .lf__opts{ grid-template-columns:1fr; }
  .lf__opts--duo{ grid-template-columns:repeat(2, minmax(0,1fr)); max-width:none; }
  .lf__actions{
    padding-bottom:max(16px, env(safe-area-inset-bottom));
    box-shadow:0 -14px 30px -28px rgba(11,14,51,.9);
  }
  .lf__go{ max-width:none; }
}

@media (max-width:400px){
  .lf__title{ font-size:1.16rem; }
  .lf__opt > span{ padding:11px 13px; font-size:.9rem; }
  .lf__ghost{ padding:12px 16px; font-size:.9rem; }
  .lf__go{ font-size:.92rem; padding-inline:20px; }
  .lf__actions{ gap:8px; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .plot__area,.plot__gap,.plot__node{ opacity:1; }
  .plot__line,
  .plot__line-glow{ stroke-dashoffset:0; }
  .plot__line-glow{ opacity:.3; }
  .tags li,
  .step .step__num{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }
  .step::before{ transform:scaleY(1); }
  .plot__ghost{ opacity:.55; stroke-dashoffset:0; }
  .loop__beam{ animation:none; filter:none; }
  .chain__pulse,
  .chain__snake-pulse{ display:none; }
  body.is-nav-open .nav__links{ transform:none; }
  .lf__panel{ transform:none; }
  .lf__spin{ animation:lfSpin 1.2s linear infinite !important; }
}