/* ═══════════════════════════════════════════════════════════════════════════
   BusinessLens — optical instrument
   Palette derives from a lens barrel: ground glass, anodized graphite,
   engraved amber numerals, and the cyan sheen of coated glass.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* surfaces */
  --ground:      #EDEEEA;   /* ground glass — the page */
  --chalk:       #F6F7F4;   /* raised panel */
  --white:       #FFFFFF;
  --soft:        #E3E5DF;   /* recessed band */

  /* instrument */
  --graphite:    #15171A;   /* anodized barrel */
  --graphite-2:  #1E2126;
  --slate:       #2C3138;

  /* type */
  --ink:         #14161A;
  --ink-2:       #3B4046;
  --muted:       #6C7278;
  --muted-dark:  #9AA0A6;   /* on graphite */
  --line:        #D3D6CF;
  --line-dark:   #333940;

  /* engraved amber — numerals, indices, the one warm accent */
  --amber:       #BE8034;
  --amber-ink:   #8A5A20;   /* small text on light surfaces */
  --amber-lite:  #D9A05B;   /* on graphite */

  /* coated glass — optics only, never text */
  --coat:        #3F7B84;

  --shell:       1240px;
  --gut:         clamp(20px, 5vw, 56px);

  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 14px;

  --ease: cubic-bezier(.22,.61,.36,1);

  --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-body:    'Newsreader', Georgia, 'Times New Roman', serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

*,*::before,*::after{ box-sizing:border-box }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--f-body);
  font-optical-sizing:auto;
  font-size:clamp(16px,.55vw + 14.5px,18px);
  line-height:1.62;
  font-weight:380;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{ max-width:100%; display:block }
p{ margin:0 0 1.05em }
p:last-child{ margin-bottom:0 }
a{ color:inherit }

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

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--graphite); color:var(--ground);
  padding:12px 18px; font-family:var(--f-mono); font-size:13px;
}
.skip:focus{ left:12px; top:12px }

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--coat);
  outline-offset:3px;
  border-radius:2px;
}

/* ── type roles ───────────────────────────────────────────────────────────── */

h1,h2,h3{
  font-family:var(--f-display);
  font-weight:600;
  font-variation-settings:'wdth' 112;
  letter-spacing:-.022em;
  line-height:1.03;
  margin:0 0 .5em;
  text-wrap:balance;
}

h1{ font-size:clamp(2.5rem,4.6vw,4.05rem); line-height:.99; letter-spacing:-.034em }
h2{ font-size:clamp(1.95rem,3.5vw,3.05rem) }
h3{ font-size:clamp(1.15rem,1.5vw,1.4rem); font-variation-settings:'wdth' 104; letter-spacing:-.012em }

.tag{
  font-family:var(--f-mono);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--amber-ink);
  margin:0 0 1.15rem;
  display:flex;
  align-items:center;
  gap:.7em;
}
.tag::before{
  content:'';
  width:26px; height:1px;
  background:var(--amber);
  flex:none;
}
.tag--light{ color:var(--amber-lite) }
.tag--light::before{ background:var(--amber-lite) }

/* ── buttons ──────────────────────────────────────────────────────────────── */

.btn{
  --btn-bg:transparent;
  --btn-fg:var(--ink);
  --btn-bd:currentColor;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  font-family:var(--f-display);
  font-weight:600;
  font-variation-settings:'wdth' 104;
  font-size:.875rem;
  letter-spacing:.005em;
  line-height:1;
  padding:1.02em 1.5em;
  border:1px solid var(--btn-bd);
  border-radius:var(--r-sm);
  background:var(--btn-bg);
  color:var(--btn-fg);
  text-decoration:none;
  cursor:pointer;
  transition:background .28s var(--ease), color .28s var(--ease),
             border-color .28s var(--ease), transform .28s var(--ease);
}
.btn:hover{ transform:translateY(-1px) }
.btn:active{ transform:translateY(0) }

.btn--solid{ --btn-bg:var(--graphite); --btn-fg:var(--ground); --btn-bd:var(--graphite) }
.btn--solid:hover{ --btn-bg:#000; --btn-bd:#000 }

.btn--ghost{ --btn-bd:var(--line); --btn-fg:var(--ink) }
.btn--ghost:hover{ --btn-bd:var(--graphite) }

.btn--amber{ --btn-bg:var(--amber); --btn-fg:#14100A; --btn-bd:var(--amber) }
.btn--amber:hover{ --btn-bg:var(--amber-lite); --btn-bd:var(--amber-lite) }

.btn--sm{ padding:.72em 1.1em; font-size:.8125rem }
.btn--block{ width:100%; margin-top:.4rem }

/* ── topbar ───────────────────────────────────────────────────────────────── */

.topbar{
  position:sticky; top:0; z-index:80;
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.topbar.is-stuck{
  border-bottom-color:var(--line);
  background:color-mix(in srgb, var(--ground) 95%, transparent);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; height:74px;
}

.brand{
  display:inline-flex; align-items:center; gap:.62rem;
  text-decoration:none; color:var(--ink);
}
.brand__mark{ width:26px; height:26px; flex:none; color:var(--amber) }
.brand__word{
  font-family:var(--f-display);
  font-weight:700;
  font-variation-settings:'wdth' 96;
  font-size:1.02rem;
  letter-spacing:-.012em;
}
.brand__word em{ font-style:normal; font-weight:400; color:var(--muted) }

.topnav{ display:flex; align-items:center; gap:clamp(14px,2vw,30px) }
.topnav a{
  font-family:var(--f-display);
  font-size:.875rem;
  font-weight:500;
  text-decoration:none;
  color:var(--ink-2);
  transition:color .2s var(--ease);
}
.topnav a:hover{ color:var(--ink) }
.topnav .btn:hover{ color:var(--ink) }

.menu-toggle{
  display:none;
  width:42px; height:42px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:transparent;
  cursor:pointer;
  align-items:center; justify-content:center;
}
.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after{
  content:''; display:block;
  width:16px; height:1.5px; background:var(--ink);
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.menu-toggle__bars{ position:relative }
.menu-toggle__bars::before{ position:absolute; top:-5px }
.menu-toggle__bars::after{ position:absolute; top:5px }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars{ background:transparent }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before{ transform:translateY(5px) rotate(45deg) }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after{ transform:translateY(-5px) rotate(-45deg) }

.mobilenav[hidden]{ display:none }
.mobilenav{
  border-top:1px solid var(--line);
  padding:8px var(--gut) 22px;
  display:grid;
  gap:2px;
}
.mobilenav a{
  font-family:var(--f-display);
  font-weight:500;
  font-size:1rem;
  text-decoration:none;
  padding:.72rem 0;
  border-bottom:1px solid color-mix(in srgb, var(--line) 60%, transparent);
}

/* ── hero ─────────────────────────────────────────────────────────────────── */

.hero{ padding:clamp(48px,7vw,86px) 0 clamp(56px,7vw,96px) }
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);
  gap:clamp(34px,4.4vw,64px);
  align-items:center;
}
.hero__copy{ max-width:none }

.hero__title{ margin-bottom:.55em }
.hero__title .pull{
  display:block;
  filter:blur(9px);
  opacity:0;
  transform:translateY(10px);
  transition:filter 1.05s var(--ease), opacity 1.05s var(--ease), transform 1.05s var(--ease);
}
.hero__title .pull--2{ transition-delay:.16s; color:var(--muted) }
.is-focused .hero__title .pull{ filter:blur(0); opacity:1; transform:none }
.is-focused .hero__title .pull--2{ color:var(--ink) }

.hero__lead{
  font-size:clamp(1.06rem,1.15vw + .78rem,1.32rem);
  line-height:1.55;
  color:var(--ink-2);
  max-width:47ch;
  margin-bottom:1.9rem;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:10px }

.hero__specs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 18px;
  margin:2.6rem 0 0;
  padding-top:1.4rem;
  border-top:1px solid var(--line);
}
.hero__specs dt{
  font-family:var(--f-mono);
  font-size:.625rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.4rem;
}
.hero__specs dd{
  margin:0;
  font-family:var(--f-display);
  font-weight:500;
  font-size:.92rem;
  line-height:1.3;
}

/* ── the iris ─────────────────────────────────────────────────────────────── */

.hero__optic{ display:grid; justify-items:center; gap:1.1rem; padding-inline:clamp(8px,4vw,58px) }

.iris{
  width:min(100%,400px);
  height:auto;
  overflow:visible;
}
.iris__well{ fill:#0D0F12 }
.iris__glass{ opacity:0; transition:opacity 1.4s var(--ease) .25s }
.iris__glow{
  opacity:0;
  transform:scale(.72);
  transform-origin:center;
  transition:opacity 1.2s var(--ease) .5s, transform 1.2s var(--ease) .5s;
}
.is-focused .iris__glass{ opacity:1 }
.is-focused .iris__glow{ opacity:.5; transform:scale(1) }

.blade circle{
  fill:url(#blade);
  stroke:#3A4047;
  stroke-width:.75;
}
.blade{
  transform:translateY(0);
  transition:transform 1.5s var(--ease) .1s;
}
.is-focused .blade{ transform:translateY(-86px) }

.iris__barrel{
  fill:none;
  stroke:var(--graphite);
  stroke-width:2.5;
}
.iris__ring{
  fill:none;
  stroke:var(--line);
  stroke-width:1;
}
.iris__ticks path{
  stroke:var(--amber);
  stroke-width:1.6;
  stroke-linecap:round;
  opacity:0;
  transition:opacity .9s var(--ease) .85s;
}
.is-focused .iris__ticks path{ opacity:.95 }

.iris__labels text{
  font-family:var(--f-mono);
  font-size:8.6px;
  letter-spacing:.16em;
  fill:var(--muted);
  opacity:0;
  transition:opacity .9s var(--ease) 1s;
}
.is-focused .iris__labels text{ opacity:1 }

.optic__caption{
  text-align:center;
  max-width:34ch;
  font-family:var(--f-mono);
  font-size:.6875rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0;
}

/* ── manifesto ────────────────────────────────────────────────────────────── */

.manifesto{
  background:var(--graphite);
  color:var(--ground);
  padding:clamp(46px,6vw,78px) 0;
}
.manifesto__inner{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);
  align-items:end;
}
.manifesto blockquote{ margin:0 }
.manifesto blockquote p{
  font-family:var(--f-display);
  font-weight:500;
  font-variation-settings:'wdth' 108;
  font-size:clamp(1.7rem,3.2vw,2.75rem);
  line-height:1.08;
  letter-spacing:-.028em;
  margin:0;
}
.manifesto blockquote span{ display:block }
.manifesto blockquote span:last-child{ color:var(--amber-lite) }
.manifesto__note{
  color:var(--muted-dark);
  font-size:.98rem;
  line-height:1.6;
  margin:0;
  padding-left:clamp(16px,2vw,26px);
  border-left:1px solid var(--line-dark);
}

/* ── generic band ─────────────────────────────────────────────────────────── */

.band{
  padding:clamp(60px,8vw,116px) 0;
  scroll-margin-top:80px;
}
.band--soft{ background:var(--soft) }
.band--dark{
  background:var(--graphite);
  color:var(--ground);
}
.band--dark h2,
.band--dark h3{ color:var(--chalk) }

/* doua benzi inchise una dupa alta — separa-le, altfel se citesc ca un bloc */
.band--stack{ border-top:1px solid var(--line-dark) }

.band__head{ max-width:60ch; margin-bottom:clamp(34px,4vw,58px) }
.band__intro{
  font-size:clamp(1rem,.5vw + .88rem,1.14rem);
  color:var(--ink-2);
  line-height:1.6;
  max-width:56ch;
}
.band--dark .band__intro{ color:var(--muted-dark) }

/* ── lenses (the interactive instrument) ──────────────────────────────────── */

.lenses{
  display:grid;
  grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(26px,3.4vw,58px);
  align-items:start;
}

.lenses__scale{
  display:grid;
  gap:0;
  border-top:1px solid var(--line);
}
.lens-tab{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:'idx name' 'idx ro';
  column-gap:.9rem;
  align-items:baseline;
  width:100%;
  text-align:left;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  padding:1.05rem .2rem 1.05rem 0;
  cursor:pointer;
  color:var(--muted);
  position:relative;
  transition:color .3s var(--ease), padding-left .35s var(--ease);
}
.lens-tab::before{
  content:'';
  position:absolute; left:0; top:-1px; bottom:-1px;
  width:2px;
  background:var(--amber);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .4s var(--ease);
}
.lens-tab:hover{ color:var(--ink-2) }
.lens-tab.is-active{ color:var(--ink); padding-left:14px }
.lens-tab.is-active::before{ transform:scaleY(1) }

.lens-tab__idx{
  grid-area:idx;
  font-family:var(--f-mono);
  font-size:.6875rem;
  letter-spacing:.08em;
  color:var(--muted);
  transition:color .3s var(--ease);
}
.lens-tab.is-active .lens-tab__idx{ color:var(--amber-ink) }
.lens-tab__name{
  grid-area:name;
  font-family:var(--f-display);
  font-weight:600;
  font-variation-settings:'wdth' 106;
  font-size:1.08rem;
  letter-spacing:-.012em;
  color:currentColor;
}
.lens-tab__ro{
  grid-area:ro;
  font-family:var(--f-mono);
  font-size:.625rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted);
}

.lenses__stage{
  background:var(--chalk);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(24px,3vw,44px);
  min-height:330px;
  position:relative;
  overflow:hidden;
}
.lenses__stage::after{
  /* the depth-of-field edge: a soft optical vignette */
  content:'';
  position:absolute; inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 60px -30px rgba(20,22,26,.22);
}

.lens-panel{
  animation:focusIn .55s var(--ease) both;
}
.lens-panel[hidden]{ display:none }
.lens-panel h3{ margin-bottom:.6em }
.lens-panel > p{ color:var(--ink-2); max-width:56ch }

@keyframes focusIn{
  from{ opacity:0; filter:blur(6px); transform:translateY(6px) }
  to{ opacity:1; filter:blur(0); transform:none }
}

.findings{
  list-style:none;
  margin:1.5rem 0;
  padding:0;
  border-top:1px solid var(--line);
}
.findings li{
  position:relative;
  padding:.72rem 0 .72rem 1.65rem;
  border-bottom:1px solid var(--line);
  font-size:.97rem;
  color:var(--ink-2);
}
.findings li::before{
  content:'';
  position:absolute; left:.15rem; top:1.32em;
  width:6px; height:6px;
  border:1px solid var(--amber);
  border-radius:50%;
}

.lens-panel__q{
  font-family:var(--f-display);
  font-weight:600;
  font-variation-settings:'wdth' 104;
  font-size:1rem;
  color:var(--ink);
  margin:0;
}

/* ── process ──────────────────────────────────────────────────────────────── */

.steps{
  --step-pad:clamp(18px,2vw,30px);
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:0;
  border-top:1px solid var(--line-dark);
}
.step{
  display:flex;
  flex-direction:column;
  padding:clamp(22px,2.4vw,32px) var(--step-pad) clamp(26px,3vw,38px);
  border-right:1px solid var(--line-dark);
  position:relative;
}
/* the first column in each row sits flush with the shell edge */
.step:first-child{ padding-left:0 }
.step:last-child{ border-right:0; padding-right:0 }
.step::before{
  content:'';
  position:absolute; left:var(--step-pad); top:-1px;
  width:34px; height:2px;
  background:var(--amber);
}
.step:first-child::before{ left:0 }
.step__idx{
  font-family:var(--f-mono);
  font-size:.6875rem;
  letter-spacing:.16em;
  color:var(--amber-lite);
  margin:0 0 1.6rem;
}
.step h3{ margin-bottom:.55em }
/* two lines reserved so every column's body copy starts on the same line */
@media (min-width:681px){
  .step h3{ min-height:2.06em }
}
.step p{ color:var(--muted-dark); font-size:.96rem; line-height:1.58 }
.step__out{
  margin-top:auto;
  padding-top:1.1rem;
  border-top:1px solid var(--line-dark);
  font-family:var(--f-mono);
  font-size:.6875rem;
  line-height:1.5;
  /* two lines reserved so the rule lands at the same height in every column */
  min-height:calc(1.1rem + 1px + 3em);
  letter-spacing:.06em;
  color:var(--chalk);
  text-transform:none;
}

/* ── deliverables spec sheet ──────────────────────────────────────────────── */

.deliver{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(30px,4vw,72px);
  align-items:start;
}
.deliver__head{ position:sticky; top:104px }
.deliver__head .btn{ margin-top:1.6rem }

.specsheet{ margin:0; border-top:1px solid var(--line) }
.spec{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(12px,2vw,28px);
  padding:1.25rem 0;
  border-bottom:1px solid var(--line);
  align-items:start;
}
.spec dt{
  font-family:var(--f-display);
  font-weight:600;
  font-variation-settings:'wdth' 104;
  font-size:1.02rem;
  letter-spacing:-.012em;
}
.spec dd{
  margin:0;
  color:var(--ink-2);
  font-size:.97rem;
  line-height:1.55;
}

/* ── offer ────────────────────────────────────────────────────────────────── */

.offer{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(30px,4vw,72px);
  align-items:start;
}
.includes{
  list-style:none;
  margin:1.8rem 0 1.6rem;
  padding:0;
  border-top:1px solid var(--line-dark);
}
.includes li{
  padding:.78rem 0 .78rem 1.7rem;
  border-bottom:1px solid var(--line-dark);
  position:relative;
  font-size:.98rem;
  color:var(--chalk);
}
.includes li::before{
  content:'';
  position:absolute; left:.1rem; top:1.42em;
  width:9px; height:1px;
  background:var(--amber-lite);
}
.offer__fit{
  color:var(--muted-dark);
  font-size:.94rem;
  max-width:52ch;
}

.pricecard{
  background:var(--graphite-2);
  border:1px solid var(--line-dark);
  border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,34px);
  position:sticky; top:104px;
}
.pricecard__label{
  font-family:var(--f-mono);
  font-size:.625rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--muted-dark);
  margin:0 0 1rem;
}
.pricecard__value{
  font-family:var(--f-display);
  font-weight:600;
  font-variation-settings:'wdth' 100;
  font-size:clamp(2.6rem,4vw,3.5rem);
  line-height:1;
  letter-spacing:-.04em;
  color:var(--chalk);
  margin:0 0 .5rem;
}
.pricecard__value span{
  font-size:.34em;
  font-weight:500;
  letter-spacing:.1em;
  color:var(--amber-lite);
  vertical-align:.52em;
  margin-left:.25em;
}
.pricecard__sub{
  font-family:var(--f-mono);
  font-size:.6875rem;
  letter-spacing:.06em;
  color:var(--muted-dark);
  margin:0 0 1.8rem;
}
.pricecard .btn{ width:100% }
.pricecard__note{
  margin:1rem 0 0;
  font-size:.82rem;
  color:var(--muted-dark);
  text-align:center;
}

/* ── about ────────────────────────────────────────────────────────────────── */

.about{
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(30px,4vw,68px);
  align-items:start;
}

.portrait{ margin:0 }
.portrait__frame{
  position:relative;
  aspect-ratio:5/6;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--graphite);
  border:1px solid var(--line);
}
.portrait__frame img{ width:100%; height:100%; object-fit:cover; object-position:50% 22% }

.portrait figcaption{ padding-top:1.1rem }
.portrait__name{
  display:block;
  font-family:var(--f-display);
  font-weight:600;
  font-variation-settings:'wdth' 106;
  font-size:1.16rem;
  letter-spacing:-.015em;
}
.portrait__role{
  display:block;
  font-family:var(--f-mono);
  font-size:.6875rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:.3rem;
}

.idcard{ margin:1.8rem 0 0; border-top:1px solid var(--line) }
.idcard > div{
  display:grid;
  grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:12px;
  padding:.72rem 0;
  border-bottom:1px solid var(--line);
}
.idcard dt{
  font-family:var(--f-mono);
  font-size:.625rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted);
  padding-top:.18em;
}
.idcard dd{ margin:0; font-size:.9rem; line-height:1.45 }

.about__lead{
  font-size:clamp(1.08rem,.7vw + .88rem,1.28rem);
  line-height:1.55;
  color:var(--ink);
}
.about__body p{ color:var(--ink-2); max-width:60ch }
.about__body > p:first-child{ color:var(--ink) }

.about__quote{
  margin:2.1rem 0;
  padding:1.5rem 0 1.5rem 1.6rem;
  border-left:2px solid var(--amber);
}
.about__quote p{
  font-family:var(--f-display);
  font-weight:500;
  font-variation-settings:'wdth' 106;
  font-size:clamp(1.15rem,1.5vw,1.45rem);
  line-height:1.28;
  letter-spacing:-.018em;
  color:var(--ink);
  margin:0;
  max-width:44ch;
}

.capabilities{
  margin:2.2rem 0 0;
  border-top:1px solid var(--line);
}
.capability{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(12px,2vw,28px);
  padding:1.35rem 0;
  border-bottom:1px solid var(--line);
  align-items:start;
}
.capability dt{ display:grid; gap:.28rem }
.capability__cat{
  font-family:var(--f-mono);
  font-size:.625rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--amber-ink);
}
.capability__what{
  font-family:var(--f-display);
  font-weight:600;
  font-variation-settings:'wdth' 104;
  font-size:1.02rem;
  letter-spacing:-.014em;
  color:var(--ink);
  line-height:1.2;
}
.capability dd{
  margin:0;
  color:var(--ink-2);
  font-size:.96rem;
  line-height:1.55;
}

/* ── privacy ──────────────────────────────────────────────────────────────── */

.privacy{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(16px,2vw,24px);
}
.privacy__box{
  background:var(--chalk);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,30px);
}
.privacy__box h3{ margin-bottom:.7em }
.privacy__box p{ color:var(--ink-2); font-size:.96rem; line-height:1.58 }

/* ── faq ──────────────────────────────────────────────────────────────────── */

.faq{
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(28px,4vw,68px);
  align-items:start;
}
.faq__head{ position:sticky; top:104px }
.faq__list{ border-top:1px solid var(--line) }

.faq details{ border-bottom:1px solid var(--line) }
.faq summary{
  list-style:none;
  cursor:pointer;
  padding:1.15rem 2.4rem 1.15rem 0;
  position:relative;
  font-family:var(--f-display);
  font-weight:600;
  font-variation-settings:'wdth' 104;
  font-size:1.02rem;
  letter-spacing:-.012em;
  transition:color .2s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary:hover{ color:var(--amber-ink) }
.faq summary::after{
  content:'';
  position:absolute; right:.3rem; top:1.62em;
  width:11px; height:11px;
  border-right:1.5px solid var(--amber);
  border-bottom:1.5px solid var(--amber);
  transform:translateY(-4px) rotate(45deg);
  transition:transform .3s var(--ease);
}
.faq details[open] summary::after{ transform:translateY(0) rotate(-135deg) }
.faq details > div{ padding:0 2.4rem 1.4rem 0 }
.faq details p{ color:var(--ink-2); font-size:.97rem; max-width:62ch; margin:0 }

/* ── contact ──────────────────────────────────────────────────────────────── */

.contact{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(32px,4vw,72px);
  align-items:start;
}

.hero__promise{
  margin:1.9rem 0;
  max-width:54ch;
  font-family:var(--f-body);
  font-size:1.06rem;
  line-height:1.55;
  color:var(--ink);
  padding-left:1rem;
  border-left:2px solid var(--amber);
}

.hero__call{
  margin:1.1rem 0 0;
  font-family:var(--f-body);
  font-size:.98rem;
  color:var(--muted);
}
.hero__call a{
  font-family:var(--f-display);
  font-size:1.18rem;
  font-weight:600;
  color:var(--amber-ink);
  text-decoration:none;
  border-bottom:1px solid rgba(138,90,32,.4);
  padding-bottom:1px;
  margin-left:.3rem;
}
.hero__call a:hover,
.hero__call a:focus-visible{ border-bottom-color:var(--amber-ink) }

.contact__call{
  margin:1.6rem 0 0;
  font-family:var(--f-body);
  font-size:1.02rem;
  color:var(--muted-dark);
  line-height:1.5;
}
.contact__call a{
  display:inline-block;
  font-family:var(--f-display);
  font-size:1.35rem;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--amber-lite);
  text-decoration:none;
  border-bottom:1px solid rgba(217,160,91,.45);
  padding-bottom:1px;
  margin-left:.35rem;
}
.contact__call a:hover,
.contact__call a:focus-visible{ border-bottom-color:var(--amber-lite) }
.contact__call-note{
  display:block;
  font-family:var(--f-mono);
  font-size:.6875rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted-dark);
  margin-top:.5rem;
}

.contact__note{
  font-family:var(--f-mono);
  font-size:.6875rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--amber-lite);
  margin:1.8rem 0 0;
}

.reach{
  display:grid;
  gap:0;
  border-top:1px solid var(--line-dark);
}
.reach__item{
  display:grid;
  grid-template-columns:minmax(0,150px) minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  padding:1.45rem .2rem 1.45rem 0;
  border-bottom:1px solid var(--line-dark);
  text-decoration:none;
  color:var(--chalk);
  position:relative;
  transition:padding-left .35s var(--ease), color .25s var(--ease);
}
.reach__item::before{
  content:'';
  position:absolute; left:0; top:-1px; bottom:-1px;
  width:2px;
  background:var(--amber);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .35s var(--ease);
}
.reach__item:hover,
.reach__item:focus-visible{ padding-left:16px }
.reach__item:hover::before,
.reach__item:focus-visible::before{ transform:scaleY(1) }

.reach__k{
  font-family:var(--f-mono);
  font-size:.625rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted-dark);
  transition:color .25s var(--ease);
}
.reach__item:hover .reach__k{ color:var(--amber-lite) }
.reach__v{
  font-family:var(--f-display);
  font-weight:600;
  font-variation-settings:'wdth' 104;
  font-size:clamp(1.02rem,1.1vw,1.18rem);
  letter-spacing:-.014em;
  overflow-wrap:anywhere;
}
.reach__go{
  font-family:var(--f-display);
  font-size:1.1rem;
  color:var(--muted-dark);
  transition:transform .3s var(--ease), color .25s var(--ease);
}
.reach__item:hover .reach__go{ transform:translateX(4px); color:var(--amber-lite) }

/* ── landing hero (paid-traffic page, no optic column) ───────────────────── */

.hero--lp .hero__copy{ max-width:62ch }
.hero--lp .hero__specs{ margin-top:1.9rem; padding-top:1.2rem }

/* ── lens grid (compact, non-interactive summary of the five lenses) ─────── */

.lensgrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.lensgrid__item{ background:var(--chalk); padding:1.5rem 1.4rem }
.lensgrid__idx{
  font-family:var(--f-mono);
  font-size:.6875rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--amber-ink);
  margin:0 0 .6rem;
}
.lensgrid__q{
  font-family:var(--f-display);
  font-weight:600;
  font-variation-settings:'wdth' 104;
  font-size:1rem;
  letter-spacing:-.012em;
  color:var(--ink);
  margin:0;
}

/* ── lead form (instrument-panel inputs) ──────────────────────────────────── */

.contact__formwrap{
  border-top:1px solid var(--line-dark);
  margin-top:clamp(40px,5vw,64px);
  padding-top:clamp(40px,5vw,64px);
}
.contact__formhead{ max-width:60ch; margin-bottom:1.8rem }
.contact__formhead h3{ margin-bottom:.5em }
.contact__formwrap .leadform{ max-width:640px }

.leadform__note{
  font-family:var(--f-mono);
  font-size:.75rem;
  letter-spacing:.04em;
  color:var(--muted);
  margin:0 0 1.4rem;
}
.band--dark .leadform__note{ color:var(--muted-dark) }

.leadform__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin-bottom:20px;
}
.field{ display:grid; align-content:start; gap:.55rem }
.field--full{ grid-column:1/-1 }

.field label{
  font-family:var(--f-mono);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.band--dark .field label{ color:var(--muted-dark) }

.field__req{ color:var(--amber-ink) }
.band--dark .field__req{ color:var(--amber-lite) }
.field__opt{
  font-family:var(--f-mono);
  font-size:.625rem;
  font-weight:400;
  letter-spacing:.04em;
  text-transform:none;
  color:var(--muted);
}
.band--dark .field__opt{ color:var(--muted-dark) }

.field input:not([type="checkbox"]):not([type="radio"]),
.field textarea{
  width:100%;
  font-family:var(--f-body);
  font-size:1rem;
  color:var(--ink);
  background:var(--chalk);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:.85em 1em;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea{ resize:vertical; min-height:110px; line-height:1.5 }
.field input::placeholder,
.field textarea::placeholder{ color:var(--muted); opacity:.75 }
.field input:focus-visible,
.field textarea:focus-visible{
  outline:none;
  border-color:var(--amber);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--amber) 28%, transparent);
}
.field__hint{
  margin:0;
  font-family:var(--f-mono);
  font-size:.75rem;
  letter-spacing:.02em;
  color:var(--muted);
}
.band--dark .field__hint{ color:var(--muted-dark) }

.consent{
  display:flex;
  align-items:flex-start;
  gap:.7em;
  margin:4px 0 22px;
  font-size:.85rem;
  line-height:1.45;
  color:var(--ink-2);
}
.band--dark .consent{ color:var(--muted-dark) }
.consent input[type="checkbox"]{
  flex:none;
  width:17px; height:17px;
  margin-top:.2em;
  accent-color:var(--amber);
}

/* ── confirmation page (/multumesc) ───────────────────────────────────────── */

.confirm{ padding:clamp(80px,12vw,140px) 0 }
.confirm__inner{ max-width:56ch }
.confirm__lead{
  font-size:clamp(1.06rem,1.15vw + .78rem,1.32rem);
  line-height:1.55;
  color:var(--ink-2);
  max-width:52ch;
}
.confirm__actions{ display:flex; flex-wrap:wrap; gap:10px; margin:1.9rem 0 1.5rem }
.confirm__note{
  font-family:var(--f-mono);
  font-size:.8125rem;
  letter-spacing:.03em;
  color:var(--muted);
  margin:0;
}

/* ── footer ───────────────────────────────────────────────────────────────── */

.foot{
  background:var(--graphite);
  color:var(--muted-dark);
  padding:clamp(38px,4vw,58px) 0 clamp(30px,3vw,42px);
  border-top:1px solid var(--line-dark);
}
.foot__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,auto);
  gap:clamp(22px,3vw,48px);
  align-items:start;
}
.foot__brand .brand__word{ color:var(--chalk); font-size:1.05rem }
.foot__brand .brand__word em{ color:var(--muted-dark) }
.foot__brand p{
  margin:.55rem 0 0;
  font-size:.9rem;
  max-width:32ch;
}
.foot__nav{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1.5rem;
  justify-content:flex-end;
}
.foot__nav a{
  font-family:var(--f-display);
  font-size:.85rem;
  font-weight:500;
  text-decoration:none;
  color:var(--muted-dark);
  transition:color .2s var(--ease);
}
.foot__nav a:hover{ color:var(--chalk) }
.foot__legal{
  grid-column:1/-1;
  margin:clamp(20px,3vw,34px) 0 0;
  padding-top:1.2rem;
  border-top:1px solid var(--line-dark);
  font-family:var(--f-mono);
  font-size:.6875rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* ── reveal ───────────────────────────────────────────────────────────────── */

.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none }

/* ── responsive ───────────────────────────────────────────────────────────── */

@media (max-width:1080px){
  .lenses{ grid-template-columns:minmax(0,250px) minmax(0,1fr) }
  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .step:nth-child(2n+1){ padding-left:0 }
  .step:nth-child(2n+1)::before{ left:0 }
  .step:nth-child(2n){ border-right:0; padding-right:0; padding-left:var(--step-pad) }
  .step:nth-child(2n)::before{ left:var(--step-pad) }
  .step:nth-child(n+3){ border-top:1px solid var(--line-dark); margin-top:-1px }
}

@media (max-width:960px){
  .topnav{ display:none }
  .menu-toggle{ display:inline-flex }
  .hero__grid{ grid-template-columns:1fr; gap:clamp(30px,6vw,48px) }
  .hero__copy{ max-width:none }
  .iris{ width:min(76%,340px) }
  .manifesto__inner{ grid-template-columns:1fr; align-items:start }
  .manifesto__note{ padding-left:0; border-left:0; padding-top:1.1rem; border-top:1px solid var(--line-dark) }
  .deliver,
  .offer,
  .about,
  .faq,
  .contact{ grid-template-columns:1fr }
  .deliver__head,
  .faq__head,
  .pricecard{ position:static }
  .contact__formwrap .leadform{ max-width:none }
  .portrait{ max-width:340px }
  .foot__inner{ grid-template-columns:1fr }
  .foot__nav{ justify-content:flex-start }
}

@media (max-width:680px){
  .lenses{ grid-template-columns:1fr }
  .lenses__scale{
    display:flex;
    overflow-x:auto;
    gap:0;
    border-top:0;
    border-bottom:1px solid var(--line);
    scrollbar-width:none;
    margin-bottom:20px;
  }
  .lenses__scale::-webkit-scrollbar{ display:none }
  .lens-tab{
    flex:0 0 auto;
    grid-template-areas:'idx name' 'idx ro';
    border-bottom:0;
    padding:.9rem 1.15rem .9rem 0;
  }
  .lens-tab::before{ top:auto; bottom:-1px; left:0; right:1.15rem; width:auto; height:2px; transform:scaleX(0); transform-origin:left }
  .lens-tab.is-active{ padding-left:0 }
  .lens-tab.is-active::before{ transform:scaleX(1) }
  .steps{ grid-template-columns:1fr }
  .step,
  .step:nth-child(2n),
  .step:nth-child(2n+1){ border-right:0; padding-inline:0 }
  .step::before,
  .step:nth-child(2n)::before,
  .step:nth-child(2n+1)::before{ left:0 }
  .step:nth-child(n+2){ border-top:1px solid var(--line-dark); margin-top:-1px }
  .spec,
  .capability,
  .idcard > div{ grid-template-columns:1fr; gap:6px }
  .leadform__grid{ grid-template-columns:1fr }
  .reach__item{ grid-template-columns:1fr auto; gap:4px 16px }
  .reach__k{ grid-column:1/-1 }
  .hero__specs{ grid-template-columns:1fr; gap:0 }
  .hero__specs > div{ display:flex; justify-content:space-between; gap:16px; padding:.55rem 0; border-bottom:1px solid var(--line) }
  .hero__specs dt{ margin-bottom:0 }
  .btn{ width:100%; }
  .hero__actions .btn{ width:100% }
  .foot__nav{ gap:.35rem 1.15rem }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .hero__title .pull{ filter:none; opacity:1; transform:none }
  .blade{ transform:translateY(-86px) }
  .iris__glass,.iris__glow,.iris__ticks path,.iris__labels text{ opacity:1 }
  .iris__glow{ transform:scale(1) }
  .reveal{ opacity:1; transform:none }
}

@media print{
  .topbar,.mobilenav,.hero__optic,.menu-toggle{ display:none }
  body{ background:#fff; color:#000 }
  .band--dark,.manifesto,.foot{ background:#fff; color:#000 }
}

@media (min-width:961px){
  .mobilenav{ display:none }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GHIDURI — articole si indexul lor.
   Masura ingusta, aceleasi tokens ca restul site-ului. Nimic nou in paleta.
   ═══════════════════════════════════════════════════════════════════════════ */

.article{ padding:clamp(36px,6vw,72px) 0 clamp(48px,7vw,96px) }
.article__wrap{ max-width:70ch; margin-inline:auto }

.crumbs{
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 1.4em;
}
.crumbs a{ color:var(--amber-ink); text-decoration:none }
.crumbs a:hover{ text-decoration:underline }
.crumbs span{ margin-inline:.5em; opacity:.5 }

.article__title{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(1.85rem,4.2vw,2.9rem);
  line-height:1.1;
  letter-spacing:-.02em;
  text-wrap:balance;
  margin:0 0 .5em;
}
.article__standfirst{
  font-size:clamp(1.05rem,1.6vw,1.22rem);
  line-height:1.6;
  color:var(--ink-2);
  margin:0 0 1.6em;
}
.article__meta{
  font-family:var(--f-mono);
  font-size:.74rem;
  letter-spacing:.06em;
  color:var(--muted);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:.75em 0;
  margin:0 0 2.4em;
}

.article__body h2{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(1.28rem,2.2vw,1.6rem);
  line-height:1.25;
  letter-spacing:-.01em;
  margin:2.2em 0 .6em;
  text-wrap:balance;
}
.article__body h3{
  font-family:var(--f-display);
  font-weight:600;
  font-size:1.06rem;
  line-height:1.3;
  margin:1.8em 0 .5em;
}
.article__body ul,
.article__body ol{ margin:0 0 1.05em; padding-left:1.35em }
.article__body li{ margin-bottom:.5em }
.article__body li::marker{ color:var(--amber) }
.article__body strong{ font-weight:600 }
.article__body a{ color:var(--amber-ink); text-decoration:underline; text-underline-offset:2px }

.pull{
  border-left:2px solid var(--amber);
  padding:.15em 0 .15em 1.1em;
  margin:1.8em 0;
  font-size:1.06rem;
  line-height:1.55;
  color:var(--ink-2);
}

.note{
  background:var(--chalk);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:clamp(16px,2.4vw,24px);
  margin:1.8em 0;
  font-size:.95rem;
}
.note__label{
  display:block;
  font-family:var(--f-mono);
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--amber-ink);
  margin-bottom:.5em;
}

.article__cta{
  margin-top:3em;
  padding:clamp(22px,3vw,32px);
  background:var(--graphite);
  color:var(--chalk);
  border-radius:var(--r-lg);
}
.article__cta h2{
  font-family:var(--f-display);
  font-weight:600;
  font-size:1.2rem;
  line-height:1.3;
  margin:0 0 .5em;
  color:var(--white);
}
.article__cta p{ color:var(--muted-dark); font-size:.97rem; margin-bottom:1.2em }
.article__cta a{ color:inherit }

/* ── indexul de ghiduri ── */
.guides__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:2px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
}
.guidecard{
  background:var(--chalk);
  padding:clamp(20px,2.6vw,28px);
  display:flex;
  flex-direction:column;
  gap:.55em;
  text-decoration:none;
  transition:background .18s var(--ease);
}
.guidecard:hover{ background:var(--white) }
.guidecard__kicker{
  font-family:var(--f-mono);
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--amber-ink);
}
.guidecard__title{
  font-family:var(--f-display);
  font-weight:600;
  font-size:1.06rem;
  line-height:1.28;
  margin:0;
  text-wrap:balance;
}
.guidecard__sub{ font-size:.93rem; color:var(--muted); margin:0 }