/* Self-hosted fonts (SIL Open Font License): Archivo and Rubik, subsets used by the site. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(/assets/fonts/archivo-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(/assets/fonts/archivo-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/assets/fonts/rubik-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/assets/fonts/rubik-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/assets/fonts/rubik-hebrew.woff2) format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/assets/fonts/rubik-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/assets/fonts/rubik-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Concept: printed-matter agency. Black and bone sections joined by torn-ink edges, a huge distressed wordmark, one vermilion accent, and a chevron field (the "vector") used as the only image. Plates, not cards. One look on purpose, so colors are fixed. */
:root {
  --ink: #060E2B;
  --bone: #E6ECFB;
  --acc: #FF6A1A;
  --elec: #2F5BFF;
  --elec-k: #5C86FF;
  --mute-k: #9FAAD0;
  --mute-b: #48527A;
  --line-k: rgba(230,236,251,.22);
  --line-b: rgba(6,14,43,.28);
  --f-disp: "Rubik", "Heebo", system-ui, sans-serif;
  --f-wide: "Archivo", "Rubik", Impact, sans-serif;
  --f-body: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { background: var(--ink); color: var(--bone); font-family: var(--f-body); font-size: 18px; line-height: 1.7; font-weight: 400; overflow-x: clip; }
h1, h2, h3 { font-family: var(--f-disp); font-weight: 900; margin: 0; line-height: 1.04; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; }
.in { max-width: 1240px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); position: relative; }
.k { background: var(--ink); color: var(--bone); }
.b { background: var(--bone); color: var(--ink); }
.sec { position: relative; padding-block: 120px; }
.d { filter: url(#rough); }
.lab { font-size: 15px; font-weight: 500; letter-spacing: .02em; opacity: .75; }
.acc { color: var(--acc); }
.sec.b { --acc: #FF6A1A; --hl: var(--elec); }
.k { --hl: var(--elec-k); }
.hero.sec { background: radial-gradient(55% 45% at 22% 62%, rgba(47,91,255,.42), transparent 72%), var(--ink); }
svg[stroke="currentColor"] { color: var(--hl); }

/* torn edges */
.tear { height: 60px; margin-block: -30px; margin-inline: -60px; position: relative; z-index: 3; filter: url(#tear); pointer-events: none; }
.tear.k { background: var(--ink); }
.tear.b { background: var(--bone); }
.wrapclip { overflow-x: clip; }

/* crosshair marks */
.sec::before, .sec::after { content: "+"; position: absolute; top: 70px; font: 300 26px/1 var(--f-body); opacity: .8; }
.hero.sec::before, .hero.sec::after { display: none; }
.sec::before { inset-inline-start: max(16px, 3vw); }
.sec::after { inset-inline-end: max(16px, 3vw); }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 18px 28px; background: var(--acc); color: var(--ink); font: 500 17px/1 var(--f-body); text-decoration: none; border: 0; cursor: pointer; border-radius: 3px; transition: background .2s, color .2s; }
.btn:hover { background: var(--bone); }
.k .btn:hover { background: var(--bone); }
.ul { font-weight: 500; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 3px; }
.ul:hover { color: var(--acc); }

/* hero */
.hero { padding-block: 0 130px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 28px; }
.mark { display: flex; align-items: center; gap: 10px; font: 900 15px/1 var(--f-wide); direction: ltr; letter-spacing: .04em; }
.mark svg { width: 28px; height: 28px; }
.mark .mk { width: 46px; height: auto; border-radius: 6px; }
.field.logo-field { background: #00040F; aspect-ratio: 1 / 1; max-width: 520px; justify-self: center; align-self: center; height: auto; margin-inline: auto; border-radius: 22px; }
.field.logo-field::after { display: none; }
.field.logo-field img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; }
.nav { display: flex; align-items: center; gap: 36px; font-size: 16px; font-weight: 500; }
.nav a { text-decoration: none; }
.nav a:not(.cta):hover { color: var(--acc); }
.nav .cta { border-bottom: 1.5px solid var(--bone); padding-bottom: 3px; }
.word { font: 900 min(11.6vw, 172px)/.9 var(--f-wide); font-stretch: 125%; direction: ltr; text-align: center; letter-spacing: -.02em; margin-block: 30px 40px; white-space: nowrap; }
.word b { color: var(--acc); font-weight: 900; }
.index { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line-k); margin-bottom: 56px; }
.index a { display: flex; align-items: baseline; gap: 14px; padding: 18px 0; font-size: 17px; font-weight: 500; text-decoration: none; transition: color .2s; }
.index a + a { padding-inline-start: 24px; border-inline-start: 1px solid var(--line-k); }
.index a:hover { color: var(--acc); }
.index i { font: 900 14px/1 var(--f-wide); font-stretch: 125%; font-style: normal; color: var(--hl); direction: ltr; }
.hero-row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 64px; align-items: center; }
.field { border-radius: 18px; overflow: hidden; aspect-ratio: 1.55 / 1; width: 100%; background: var(--acc); position: relative; }
.field::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(10,10,10,.55); border-radius: 8px; pointer-events: none; }
.field svg { width: 100%; height: 100%; display: block; }
.hero h1 { font-size: clamp(32px, 4.1vw, 58px); }
.hero .lead { margin-top: 22px; font-size: 20px; color: var(--mute-k); max-width: 30em; }
.hero .act { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

/* statement */
.stmt { text-align: center; }
.stmt h2 { font-size: clamp(40px, 7vw, 100px); max-width: 11em; margin: 20px auto 0; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 72px; border-top: 1.5px solid var(--ink); text-align: start; }
.pair > div { padding: 34px 0 0; min-width: 0; }
.pair > div:first-child { padding-inline-end: 44px; }
.pair > div + div { padding-inline-start: 44px; border-inline-start: 1.5px solid var(--ink); }
.pair h3 { font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 12px; }
.pair p { color: var(--mute-b); max-width: 34em; }

/* research */
.research h2 { font-size: clamp(38px, 6vw, 88px); margin: 18px 0 20px; }
.research .intro { max-width: 36em; color: var(--mute-k); font-size: 20px; }
.rs { margin-top: 64px; border-bottom: 1px solid var(--line-k); }
.rs-row { display: grid; grid-template-columns: 64px 1.2fr 1fr; gap: 12px 32px; align-items: center; padding-block: 30px; border-top: 1px solid var(--line-k); transition: background .2s; }
.rs-row:hover h3 { color: var(--acc); }
.rs-row svg { width: 34px; height: 34px; }
.rs-row h3 { font-size: clamp(28px, 4vw, 54px); transition: color .2s; }
.rs-row p { color: var(--mute-k); }

/* packages */
.packages h2 { font-size: clamp(36px, 5.8vw, 84px); margin: 18px 0 14px; max-width: 12em; }
.packages .sub { color: var(--mute-b); max-width: 34em; font-size: 20px; }
.plates { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 72px; border: 1.5px solid var(--ink); }
.plate { padding: 40px 34px 34px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.plate + .plate { border-inline-start: 1.5px solid var(--ink); }
.plate.inv { background: var(--ink); color: var(--bone); --hl: var(--elec-k); }
.pnum { font: 900 clamp(64px, 7vw, 100px)/.9 var(--f-wide); font-stretch: 125%; color: var(--hl); direction: ltr; text-align: end; }
.plate h3 { font-size: clamp(26px, 2.8vw, 36px); }
.price { font: 900 clamp(40px, 4.2vw, 58px)/1 var(--f-disp); white-space: nowrap; }
.price small { font: 500 16px var(--f-body); margin-inline-end: 6px; }
.meta { font-weight: 500; font-size: 16px; padding-block: 10px; border-block: 1px solid var(--line-b); }
.inv .meta { border-color: var(--line-k); }
.plate .d2 { color: var(--mute-b); }
.inv .d2 { color: var(--mute-k); }
.plate ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 17px; }
.plate li { padding-inline-start: 26px; position: relative; }
.plate li::before { content: "‹"; position: absolute; inset-inline-start: 0; top: -2px; font: 900 22px/1.3 var(--f-wide); color: var(--hl); }
.learn { margin-top: auto; padding-top: 18px; border-top: 1.5px solid currentColor; font-size: 16px; }
.learn b { display: block; font-weight: 900; font-size: 15px; letter-spacing: .02em; color: var(--hl); margin-bottom: 2px; }
.plate .btn { justify-content: center; }
.plate:not(.inv) .btn { background: var(--ink); color: var(--bone); }
.plate:not(.inv) .btn:hover { background: var(--acc); color: var(--ink); }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1001px) {
    .plates { grid-template-rows: repeat(8, auto); }
    .plate { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 0; }
    .plate > * { margin: 0 0 18px; }
    .plate .learn { align-self: end; margin-top: 0; }
    .plate .btn { margin-bottom: 0; }
  }
}

/* how */
.how { text-align: center; }
.how p.big { font: 900 clamp(32px, 5.2vw, 76px)/1.08 var(--f-disp); max-width: 15em; margin: 24px auto 0; text-wrap: balance; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 80px; border-top: 1px solid var(--line-k); text-align: start; }
.step { padding: 30px 0 0; padding-inline-end: 36px; min-width: 0; }
.step + .step { padding-inline-start: 36px; border-inline-start: 1px solid var(--line-k); }
.step h3 { font-size: clamp(22px, 2.2vw, 28px); margin-bottom: 8px; display: flex; gap: 12px; align-items: center; }
.step h3 svg { width: 22px; height: 22px; flex: none; }
.step p { color: var(--mute-k); }

/* about */
.about-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px 88px; align-items: center; }
.pic { position: relative; aspect-ratio: 4 / 5; max-width: 440px; width: 100%; background: var(--elec); border-radius: 18px; overflow: hidden; }
.plate-mark { display: none; }
.pic #portrait { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.plate-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rg { position: absolute; font: 300 24px/1 var(--f-body); color: var(--ink); }
.rg.tl { top: 14px; inset-inline-start: 16px; } .rg.tr { top: 14px; inset-inline-end: 16px; }
.rg.bl { bottom: 14px; inset-inline-start: 16px; } .rg.br { bottom: 14px; inset-inline-end: 16px; }
.pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pic-cap { margin-top: 14px; font-size: 15px; font-weight: 500; }
.about h2 { font-size: clamp(48px, 8vw, 120px); margin: 14px 0 20px; }
.about .role { font-size: 22px; max-width: 28em; color: var(--mute-b); }
.chips { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { border: 1.5px solid var(--ink); border-radius: 99px; padding: 9px 18px; font-weight: 500; font-size: 16px; line-height: 1.3; }

/* contact */
.contact { padding-bottom: 40px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 96px; align-items: start; }
.contact h2 { font-size: clamp(46px, 8vw, 118px); margin-top: 18px; }
.contact .sub { margin-top: 24px; color: var(--mute-k); font-size: 20px; max-width: 24em; }
form { display: grid; gap: 22px; min-width: 0; padding-top: 10px; }
label { display: grid; gap: 2px; font-size: 14px; font-weight: 500; color: var(--mute-k); }
input, select { font: 400 20px var(--f-body); color: var(--bone); background: transparent; border: 0; border-bottom: 1.5px solid var(--line-k); border-radius: 0; padding: 10px 0; width: 100%; }
input:focus, select:focus { outline: none; border-bottom-color: var(--acc); }
select option { color: #060E2B; background: #E6ECFB; }
form .btn { justify-content: center; margin-top: 8px; }
.note { min-height: 1.5em; font-size: 15px; }
footer { margin-top: 110px; padding-top: 22px; border-top: 1px solid var(--line-k); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--mute-k); }

@media (max-width: 1000px) {
  .plates { grid-template-columns: 1fr; }
  .plate + .plate { border-inline-start: 0; border-top: 1.5px solid var(--ink); }
  .rs-row { grid-template-columns: 48px 1fr; }
  .rs-row p { grid-column: 2; }
}
@media (max-width: 820px) {
  .sec { padding-block: 88px; }
  .sec::before, .sec::after { top: 52px; }
  .nav > a:not(.cta) { display: none; }
  .hero { padding-bottom: 96px; }
  .word { margin-block: 12px 28px; }
  .hero-row, .about-grid, .contact-grid, .pair, .steps { grid-template-columns: 1fr; }
  .field { aspect-ratio: 1.9 / 1; }
  .index { grid-template-columns: 1fr; margin-bottom: 36px; }
  .index a { padding-block: 13px; }
  .index a + a { padding-inline-start: 0; border-inline-start: 0; border-top: 1px solid var(--line-k); }
  .pair > div:first-child { padding-inline-end: 0; }
  .pair > div + div { padding-inline-start: 0; border-inline-start: 0; border-top: 1.5px solid var(--ink); margin-top: 30px; }
  .step { padding-inline-end: 0; }
  .step + .step { padding-inline-start: 0; border-inline-start: 0; border-top: 1px solid var(--line-k); margin-top: 28px; }
  .plate { padding: 32px 22px 28px; }
  .pic { max-width: 320px; }
  footer { margin-top: 72px; }
}
@media (prefers-reduced-motion: reduce) { .btn, .rs-row, .rs-row h3 { transition: none; } }

/* ===== Liquid glass layer ===== */
:root {
  --bf: blur(22px) saturate(175%);
  --g-edge: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35), inset 0 0 26px rgba(255,255,255,.28);
  --gk-edge: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(255,255,255,.08), inset 0 0 28px rgba(120,160,255,.10);
}
/* ambient light behind the glass */
.sec.k:not(.hero) { background-image: radial-gradient(42% 30% at 82% 30%, rgba(47,91,255,.38), transparent 70%), radial-gradient(34% 26% at 12% 72%, rgba(255,106,26,.20), transparent 70%); }
.sec.b { background-image: radial-gradient(40% 34% at 10% 62%, rgba(47,91,255,.30), transparent 70%), radial-gradient(34% 28% at 92% 40%, rgba(255,106,26,.24), transparent 70%), radial-gradient(30% 24% at 52% 86%, rgba(92,134,255,.22), transparent 70%); }

/* dark glass surfaces */
.top, .index, .field.logo-field, .rs-row, .steps .step, form {
  background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: var(--gk-edge), 0 24px 60px -28px rgba(0,0,0,.6);
  -webkit-backdrop-filter: var(--bf); backdrop-filter: var(--bf);
}
.top { position: sticky; top: 12px; z-index: 20; margin-top: 18px; padding: 10px 22px; border-radius: 999px; }
.index { border-radius: 24px; border-block-width: 1px; margin-bottom: 56px; }
.index a { padding-inline-start: 26px; }
.index a + a { border-inline-start: 1px solid rgba(255,255,255,.14); }
.field.logo-field { padding: 10px; border-radius: 36px; overflow: hidden; background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.04)); }
.field.logo-field img { border-radius: 27px; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.rs { border: 0; display: grid; gap: 14px; }
.rs-row { border-radius: 26px; padding: 26px 32px; transition: background .25s, transform .25s; }
.rs-row:hover { background: linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.06)); transform: translateY(-2px); }
.steps { border-top: 0; gap: 18px; }
.steps .step, .steps .step + .step { padding: 28px 30px; border-radius: 26px; margin-top: 0; border: 1px solid rgba(255,255,255,.16); }
form { padding: 36px; border-radius: 32px; }

/* light glass surfaces */
.pair { border-top: 0; gap: 22px; }
.pair > div, .pair > div:first-child, .pair > div + div, .chips li {
  background: linear-gradient(145deg, rgba(255,255,255,.7), rgba(255,255,255,.28));
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: var(--g-edge), 0 24px 50px -24px rgba(31,77,255,.35);
  -webkit-backdrop-filter: var(--bf); backdrop-filter: var(--bf);
}
.pair > div, .pair > div:first-child, .pair > div + div { padding: 34px; border-radius: 30px; margin-top: 0; }
.chips li { box-shadow: var(--g-edge), 0 10px 24px -14px rgba(31,77,255,.35); }

/* packages */
.plates { border: 0; gap: 22px; }
.plates > .plate, .plates > .plate + .plate {
  position: relative; isolation: isolate; border-radius: 32px; padding: 40px 34px 34px;
  background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.26));
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--g-edge), 0 34px 70px -28px rgba(31,77,255,.45);
  -webkit-backdrop-filter: var(--bf); backdrop-filter: var(--bf);
}
.plates > .plate::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(120% 60% at 15% 0%, rgba(255,255,255,.65), transparent 55%); pointer-events: none; }
.plates > .plate.inv, .plates > .plate.inv + .plate {
  background: linear-gradient(150deg, rgba(70,110,235,.26), rgba(6,14,43,.86) 50%);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: var(--gk-edge), 0 34px 70px -24px rgba(6,14,43,.8);
}
.plates > .plate.inv::before { background: radial-gradient(120% 60% at 15% 0%, rgba(160,190,255,.16), transparent 55%); }
.meta { border-color: rgba(6,14,43,.14); }
.plate.inv .meta { border-color: rgba(255,255,255,.16); }
.learn { border-top-width: 1px; border-color: rgba(6,14,43,.18); }
.plate.inv .learn { border-color: rgba(255,255,255,.2); }
.plate.inv .pnum { color: var(--acc); }

/* glass buttons */
.btn, .btn:hover, .k .btn:hover {
  border-radius: 999px; padding: 18px 32px; color: #fff; border: 1px solid rgba(255,255,255,.5);
  background: linear-gradient(180deg, rgba(255,150,80,.96), rgba(255,98,18,.9));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -10px 18px rgba(170,45,0,.28), 0 14px 32px -10px rgba(255,106,26,.7);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  text-shadow: 0 1px 1px rgba(120,30,0,.35);
}
.btn { transition: transform .2s, filter .2s, box-shadow .2s; }
.btn:hover, .k .btn:hover { filter: brightness(1.1) saturate(1.1); transform: translateY(-2px); }
.plates .plate:not(.inv) .btn, .plates .plate:not(.inv) .btn:hover { background: linear-gradient(180deg, rgba(52,80,190,.95), rgba(10,22,70,.97)); border-color: rgba(255,255,255,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -10px 18px rgba(0,0,30,.35), 0 14px 30px -12px rgba(6,14,43,.8); color: #fff; text-shadow: none; }
.plates .plate:not(.inv) .btn:hover { background: linear-gradient(180deg, rgba(255,150,80,.96), rgba(255,98,18,.9)); }

/* portrait as a glass pane */
.pic { border-radius: 34px; box-shadow: 0 40px 80px -30px rgba(31,77,255,.6), 0 0 0 8px rgba(255,255,255,.45), 0 0 0 9px rgba(255,255,255,.9); }
.pic::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 2px rgba(255,255,255,.8), inset 0 0 0 1px rgba(255,255,255,.25); background: linear-gradient(125deg, rgba(255,255,255,.22), transparent 35%); }
input, select { border-bottom-color: rgba(255,255,255,.28); }

@media (max-width: 1000px) {
  .plates > .plate + .plate { border-top: 1px solid rgba(255,255,255,.9); }
}
@media (max-width: 820px) {
  .top { padding: 8px 14px; }
  .index a + a { border-top: 1px solid rgba(255,255,255,.14); border-inline-start: 0; padding-inline-start: 26px; }
  .pair > div + div { border-top: 1px solid rgba(255,255,255,.85); border-inline-start: 1px solid rgba(255,255,255,.85); }
  .steps .step + .step { margin-top: 0; }
  form { padding: 24px; }
  .field.logo-field { border-radius: 28px; }
}

/* language toggle */
.lang { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); cursor: pointer; font: 700 13px/1 var(--f-body); color: var(--bone); direction: ltr; }
.lang span { padding: 7px 12px; border-radius: 999px; letter-spacing: .04em; transition: background .2s, color .2s; }
#app[lang="he"] .lang [data-l="he"], #app[lang="ru"] .lang [data-l="ru"] { background: linear-gradient(180deg, rgba(255,150,80,.96), rgba(255,98,18,.9)); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 16px -6px rgba(255,106,26,.7); }
.lang:hover span:not(:is(#app[lang="he"] [data-l="he"], #app[lang="ru"] [data-l="ru"])) { background: rgba(255,255,255,.14); }
.nav { gap: 24px; }
#app[lang="ru"] #f-phone { text-align: left !important; }
#app[lang="ru"] .hero h1 { font-size: clamp(32px, 4.1vw, 58px); }
#app[lang="ru"] .stmt h2, #app[lang="ru"] .research h2, #app[lang="ru"] .packages h2 { overflow-wrap: anywhere; }

#app[lang="ru"] .stmt h2 { font-size: clamp(34px, 5.4vw, 78px); }
#app[lang="ru"] .research h2 { font-size: clamp(34px, 5vw, 72px); }
#app[lang="ru"] .packages h2 { font-size: clamp(32px, 4.6vw, 68px); }
#app[lang="ru"] .how p.big { font-size: clamp(28px, 4.2vw, 60px); }
#app[lang="ru"] .about h2 { font-size: clamp(44px, 7vw, 104px); }
#app[lang="ru"] .contact h2 { font-size: clamp(40px, 6.4vw, 92px); }
#app[lang="ru"] .rs-row h3 { font-size: clamp(24px, 3.2vw, 44px); }
#app[lang="ru"] .rs-row svg, #app[lang="ru"] .step h3 svg { transform: scaleX(-1); }
#app[lang="ru"] .plate li::before { content: "›"; }
@media (max-width: 480px) {
  .top { padding: 8px 10px 8px 12px; gap: 8px; }
  .nav { gap: 8px; }
  .nav .cta { font-size: 14px; white-space: nowrap; }
  .mark { font-size: 13px; gap: 6px; }
  .mark .mk { width: 36px; }
  .lang span { padding: 6px 9px; }
}
#app[lang="ru"] .pnum { text-align: start; }
.lang span { display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; }
.lang svg { width: 22px; height: 22px; display: block; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.lang span:not(:is(#app[lang="he"] [data-l="he"], #app[lang="ru"] [data-l="ru"])) svg { opacity: .6; filter: saturate(.7); }
@media (max-width: 480px) { .lang span { padding: 5px 8px; } .lang svg { width: 20px; height: 20px; } }

/* --- site additions --- */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.lang a { display: contents; text-decoration: none; color: inherit; }
.flinks { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.flinks a { color: var(--mute-k); text-decoration: none; }
.flinks a:hover { color: var(--bone); text-decoration: underline; }
.consent { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.55; font-weight: 400; color: var(--mute-k); }
.consent input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; padding: 0; margin: 2px 0 0; border: 1px solid rgba(255,255,255,.4); border-radius: 7px; background: rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); cursor: pointer; position: relative; }
.consent input:checked { background: linear-gradient(180deg, rgba(255,150,80,.96), rgba(255,98,18,.9)); border-color: rgba(255,255,255,.6); }
.consent input:checked::after { content: ""; position: absolute; inset: 3px 6px 5px 6px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.consent input:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.consent a { color: var(--bone); text-decoration: underline; }
.skip { position: absolute; inset-inline-start: 8px; top: -60px; z-index: 50; background: var(--bone); color: var(--ink); padding: 10px 16px; border-radius: 10px; }
.skip:focus { top: 8px; }

/* ===== conversion blocks ===== */
.fit { display: block; margin-top: 12px; font-size: 15.5px; line-height: 1.55; }
.fit b { font-weight: 700; color: var(--hl); margin-inline-end: 4px; }
.how-sub { max-width: 34em; margin: 26px auto 0; color: var(--mute-k); font-size: 20px; }
html { scroll-padding-top: 90px; }

/* comparison: course vs agency vs us, inside the light statement section */
.vs { margin-top: 110px; text-align: start; }
.vs-h { font-size: clamp(28px, 4.2vw, 58px); text-align: center; max-width: 15em; margin: 0 auto; }
.vs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 52px; align-items: stretch; }
.vs-card { padding: 34px; border-radius: 30px; min-width: 0; background: linear-gradient(145deg, rgba(255,255,255,.7), rgba(255,255,255,.28)); border: 1px solid rgba(255,255,255,.85); box-shadow: var(--g-edge), 0 24px 50px -24px rgba(31,77,255,.35); -webkit-backdrop-filter: var(--bf); backdrop-filter: var(--bf); }
.vs-card h4 { font: 900 clamp(22px, 2.2vw, 30px)/1.1 var(--f-disp); margin: 0 0 18px; }
.vs-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; color: var(--mute-b); }
.vs-card li { position: relative; padding-inline-start: 26px; }
.vs-card li::before { content: ""; position: absolute; inset-inline-start: 0; top: .85em; width: 12px; height: 2px; border-radius: 2px; background: currentColor; opacity: .55; }
.vs-card.mine { background: linear-gradient(150deg, rgba(70,110,235,.26), rgba(6,14,43,.86) 50%); border-color: rgba(255,255,255,.28); color: var(--bone); box-shadow: var(--gk-edge), 0 34px 70px -24px rgba(6,14,43,.8); }
.vs-card.mine ul { color: var(--bone); }
.vs-card.mine li::before { background: var(--acc); opacity: 1; }

/* proof slot (stays hidden until PROOF has items) and the repeat CTA */
.proof { margin-top: 80px; text-align: start; }
.proof h3 { font-size: clamp(26px, 3.4vw, 44px); margin-bottom: 28px; }
.proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.quote, .cta-band { background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.16); box-shadow: var(--gk-edge), 0 24px 60px -28px rgba(0,0,0,.6); -webkit-backdrop-filter: var(--bf); backdrop-filter: var(--bf); }
.quote { margin: 0; padding: 28px 30px; border-radius: 26px; }
.quote blockquote { margin: 0 0 18px; font-size: 20px; line-height: 1.55; }
.quote figcaption { font-size: 15px; color: var(--mute-k); }
.quote figcaption b { display: block; color: var(--bone); font-size: 17px; font-weight: 700; }
.cta-band { margin-top: 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; padding: 38px 42px; border-radius: 32px; text-align: start; }
.cta-band h3 { font-size: clamp(24px, 3vw, 40px); max-width: 17em; }

/* FAQ, above the contact form */
.faq-wrap { margin-bottom: 120px; }
.faq-wrap h2 { font-size: clamp(36px, 6vw, 88px); margin: 18px 0 44px; }
#app[lang="ru"] .faq-wrap h2 { font-size: clamp(32px, 5vw, 72px); overflow-wrap: anywhere; }
.faq { display: grid; gap: 14px; }
details.q { border-radius: 24px; background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.16); box-shadow: var(--gk-edge), 0 24px 60px -28px rgba(0,0,0,.6); -webkit-backdrop-filter: var(--bf); backdrop-filter: var(--bf); transition: border-color .2s; }
details.q[open] { border-color: rgba(255,106,26,.6); }
details.q summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px 30px; font: 900 clamp(19px, 2vw, 26px)/1.25 var(--f-disp); }
details.q summary::-webkit-details-marker { display: none; }
details.q summary::after { content: "+"; flex: none; font: 300 32px/1 var(--f-body); color: var(--acc); transition: transform .2s; }
details.q[open] summary::after { transform: rotate(45deg); }
details.q p { padding: 0 30px 26px; max-width: 50em; color: var(--mute-k); }
details.q summary:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; border-radius: 24px; }

@media (max-width: 1000px) { .vs-grid { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
  .vs { margin-top: 72px; }
  .vs-card { padding: 26px; }
  .cta-band { padding: 28px 24px; margin-top: 56px; }
  .cta-band .btn { width: 100%; justify-content: center; }
  .faq-wrap { margin-bottom: 80px; }
  details.q summary { padding: 18px 20px; }
  details.q p { padding: 0 20px 22px; }
}
@media (prefers-reduced-motion: reduce) { details.q, details.q summary::after { transition: none; } }
.vat { margin-top: 30px; text-align: center; font-size: 16px; font-weight: 500; color: var(--mute-b); }
.why { margin-top: 110px; text-align: start; }
.why .vs-card p { color: var(--mute-b); }
.why-cta { margin-top: 44px; text-align: center; }
@media (max-width: 820px) { .why { margin-top: 72px; } }