The user is asking for a Russian-language landing page for a company that produces "cucumbers made from oil (огурцы из нефти)". This is a strange and absurdist premise — cucumbers made from oil. This is probably a satirical/fictional brief. It should be treated as a creative, high-craft task: a fictional company that produces cucumbers from oil (нефтяные огурцы). This is wonderfully absurd — I can treat it as a serious industrial/agricultural brand with a surreal twist. Something like "НефтехимОгурец" — a Soviet/post-Soviet industrial aesthetic could work perfectly: constructivism, oil industry, refinery aesthetics, dark crude oil tones + cucumber green. Design identity: - Palette: deep crude-oil black, iridescent oil sheen (subtle gradients), emerald/cucumber green, possibly amber/gold accents. Oil-slick iridescence could be a signature. - Typography: characterful display font + readable body font. Need Russian text (Cyrillic support!). Cyrillic-capable display fonts on Google Fonts: "Unbounded" (excellent display font, Cyrillic-capable), "Oswald", "Russo One", "Playfair Display" (Cyrillic), "Cormorant", "Tektur", "Bebas Neue" (no Cyrillic?). Let me think: Unbounded (Cyrillic-capable), Russo One (Cyrillic), Oswald (Cyrillic), Tektur (Cyrillic), "Prata" (Cyrillic serif), "Playfair Display" (Cyrillic), "IBM Plex Sans"/"IBM Plex Serif" (Cyrillic), "Manrope" (Cyrillic), "Golos Text" (Cyrillic, Russian-made!), "Onest", "Sofia Sans". Good combo: display = "Unbounded" (very distinctive, geometric, tech-y) — perfect for oil-industrial vibe. Body = "Golos Text" (Russian-made, modern, readable). Mono accent = could add "JetBrains Mono" (Cyrillic-capable) for technical data, GOST numbers, etc. This is a nice trio. Layout ideas — start with something distinctive, not a generic hero: open with an industrial control-panel/specimen-plate vibe: "экстрактор" visualization — an oil-drop-to-cucumber pipeline. Or open with a marquee ticker of production stats + a big scramble-decode headline "ОГУРЦЫ ИЗ НЕФТИ". Left: a rotating oil Derrick (вышка) SVG with animation? Something distinctive: refinery silhouette + pipeline. The first screen could be a "производственная панель" — like a plant control room: live gauges (counters animating: barrels processed, cucumbers produced), scramble-decoded title. Signature motions to include: 1. Scramble-decode title on load (main headline characters get decoded). 2. Live counters (animated numeric tickers). 3. Sticky two-column section: on the left, sticky "process" description, on the right, scrolling process stages (or vice versa). 4. Slow breathing zoom on images (photos in production gallery). 5. Stacked cards for product line (cards stack on scroll). 6. Line-mask reveal on section headings. 7. Subtle noise/grain overlay. 8. Marquee ticker for facts. 9. Pipeline SVG with moving dashes (flow animation) — oil flowing through pipes to become cucumbers. A great custom motif. 10. Oil-slick shimmer on accents (animated gradient borders) — use purposefully. 11. Scroll-triggered reveals via IntersectionObserver. 12. Respect prefers-reduced-motion. Content sections (rich, full): 1. Top bar: marquee ticker (СВОДКА ЦЕХА: today's extraction volume, crude oil grade, etc.). 2. Header/nav: logo "НЕФТЕОГУРЕЦ" or «НЕФТЬ & ОГУРЕЦ» — maybe «ОГУРЦЕПРОМ №9» or «НЕФТЕГУРЕЦЪ». Brand name ideas: «НЕФТЕОГУРЕЦ», «ЧЁРНЫЙ ОГУРЕЦ», «ОГУРЕЦ-НЕФТЬ», «НГК — НефтеГурецкий Комбинат». Let's go with «НЕФТЕОГУРЕЦЪ» — with the archaic hard sign for character. Tagline: «Перерабатываем баррели в банки с 1974 года». Fun. 3. Hero: control-panel style. Left: scramble title «ОГУРЦЫ ИЗ НЕФТИ», subtext, CTA buttons («Запросить прайс», «Экскурсия на комбинат»), stats row with live counters (barrels processed, cucumbers produced, GOST). Right/behind: animated SVG pipeline and oil Derrick, cucumber growing at the end of the pipe? Maybe an "экстракция" visual: animated oil drops morphing into cucumbers. Or a rotating gauge dial. Include a "паспорт партии" card with monospace data (batch #, oil grade, salinity). 4. Marquee strip: repeating facts separated by ◆: «100% органика (условно) • ГОСТ Р 59-НЕФТЬ • 0 баррелей потрачено зря …». 5. «Технология» — sticky two columns: sticky heading on the left + description, on the right: numbered steps (01 Intake of crude oil, 02 Fractional distillation, 03 Chlorophyll synthesis, 04 Forming, 05 Canning). Each step card with image and detail. Scroll reveals. 6. «Продукт» — product line in stacked cards: «Классический нефтегурец», «Малосольный баррельный», «Корнишоны глубокого залегания», «Огурец-сырец тяжёлых сортов». Each card with image (picsum seed), spec table, price per barrel… per kg. Sticky stacked card effect. 7. «Показатели» — stats/dashboard section: gauges, progress bars animating on scroll (salinity, crunch index, oil-to-cucumber conversion), maybe an SVG dial. 8. «История комбината» — timeline (1974 discovery of anomaly, 1979 first batch, 1986 expansion, 1998 crisis, 2012 modernization, 2024 present) — vertical timeline with line-draw. 9. «Галерея производства» — slightly rotated scattered postcards/photos, slow zoom on hover. 10. «Отзывы/Сертификаты» — maybe quote cards from fictitious technologists. 11. «Вопросы» — accordion FAQ (Is it safe? What does it taste like? How many barrels per cucumber?). Interactive accordion. 12. «Контакты/заявка» — form with inputs (name, email/city, purpose: wholesale/retail), fake submit and feedback (toast "Заявка принята в переработку"), styled inputs, maybe no need for radio-button fun. Working validation feedback is essential: show success state. 13. Footer: big logo, nav links, coordinates, «Добыто и выращено в Нижневолжске», small notes. Interactivity: counters, accordion, form submit feedback, hover states, marquee, scramble, maybe a theme toggle? Could add a «День/Ночь» toggle for the refinery shift… maybe overkill. Keep focus. Small delights: cursor-following oil sheen? Maybe a "капнуть нефть" easter egg — clicking the logo generates oil drops? Could be cute: small droplet falls from hero Derrick every few seconds and morphs into a cucumber icon. Keep it CSS-based. Images: picsum seeds like picsum.photos/seed/oil-refinery/800/600, seed/cucumber-jar, seed/pipeline, seed/ural-plant, etc. Note that picsum returns grayscale-ish random photos, fine as placeholders. Could apply duotone overlay (mix-blend, green/amber tint) to unify — apply CSS filters (sepia + hue-rotate) to tint them with oil-green tones and match palette. A nice craft touch: `filter: grayscale(1) sepia(...) hue-rotate(...)` or an overlay with mix-blend-mode: color. Palette: - Background: #0b0d0a (crude black-green) / #0e1210. - Oil sheen accents: purple/teal iridescence subtle gradient (subtly on borders). - Cucumber green: #7ac74f / #9be15d / emerald #2f6b3a. - Amber/crude: #d8a03d or gold #e0a458. - Paper/cream for light sections? Maybe alternate: most dark, one light "laborатория" section in cream (#efe9dc) for contrast. Yes — insert a light section (the "Технология" could be cream with black text, giving strong contrast and editorial feel). Good: dark hero → light process section → dark products → light history? Maybe keep: dark hero, cream process, dark product stack, cream stats? Let's compose: hero (dark), ticker (dark), process (cream), product stack (dark), stats/gauges (cream? or dark green), timeline (dark), gallery (dark), FAQ (cream), contacts (dark), footer (deepest black). Alternating adds depth. Fonts via Google Fonts with Cyrillic subset: Unbounded (wght 400..900), Golos Text (400..900), JetBrains Mono (400..700). Import via . Unbounded supports Cyrillic — yes. Golos Text supports Cyrillic — yes (Russian font). JetBrains Mono supports Cyrillic — yes. Scramble decode: JS that cycles characters (using Cyrillic + symbols) and locks characters. Respect reduced motion: skip and set final text. Live counter: animate numbers on entering view with easing. Maybe also a persistent ticker that slowly increments "cucumbers produced" continuously — a fun "live" feel. Yes: "Произведено сегодня" counter that ticks up every ~2 seconds by a random amount. Good. Pipeline SVG animation: stroke-dashoffset flow along pipe path, moving droplets via CSS offset-path? offset-path support is okay-ish. Simpler: circles animated with CSS keyframes along path via offset-path: path('M...'). Provide fallback (hidden if not supported). Or SVG — well supported. Use animateMotion for droplets moving along pipe path, transform into… animateMotion with two circles (black droplet → green cucumber capsule). Keep it simple: droplets moving along pipe and a row of pulsing "cucumber" capsules at the output. Gauges: half-circle SVGs with needle rotating to value when in view. Progress bars with width animation. Stacked cards: position: sticky; top increment; each card sticks and next slides over. Classic stacked cards with scaling. Implement with CSS sticky + JS for scale on scroll, or pure CSS sticky stack: each card in a container, position sticky with increasing top offset, later cards overlap earlier ones. Add slight scale-down of earlier cards via JS? Simple approach: cards with `position: sticky; top: calc(90px + i*12px)`; stack as you scroll. Maybe add subtle shadow. Good enough and robust. Line-mask reveal on headings: wrap heading words in overflow hidden spans, translateY(110%) → 0 on intersect. Scattered postcards gallery: absolutely positioned/negatively rotated figures, hover straightens, slow scale animation inside. Noise overlay: fixed pseudo element with SVG feTurbulence data URI, low opacity. Ticker marquee: duplicate content, CSS animation translateX -50%, pause on reduced motion. Nav: sticky top with blur? Avoid site-wide glassmorphism; solid dark bar with border is enough, subtle backdrop blur okay but avoid glass aesthetic. Use solid. Form: on submit prevent default, validate, show animated success message («Заявка №… принята»), reset. Maybe generate random заявка number. Toast slides in. FAQ accordion: custom JS with max-height transition and rotating plus icon. Language: everything in Russian. User's request was in English, but the page should be Russian. My short intro sentence can be in English (since request is English). Chat text outside the code: keep short. Let's draft the copy (Russian, with dry industrial humor): Brand: ООО «НЕФТЕОГУРЕЦЪ» — industrial-agrarian комбинат. Founded 1974. City: «Нижний Буров» or «Скважинск». Let's go with г. Скважинск, Западно-Грядская обл. Hero kicker: «Комбинат №9 • Основан в 1974» H1: «ОГУРЦЫ ИЗ НЕФТИ» (scramble decode). Or two lines: «ЧЁРНОЕ ЗОЛОТО — ЗЕЛЁНЫЙ УРОЖАЙ». Keep H1 = «ОГУРЦЫ ИЗ НЕФТИ», with subtitle: «Единственный в мире комбинат полного цикла: от скважины до банки за 72 часа. Без почвы. Без солнца. Без компромиссов.» Buttons: «Оформить заявку» (scroll to form), «Технология производства» (scroll). Stats: 12,480,000 cans per year; 1.2 barrels per 1,000 cucumbers (conversion); 72 hours from extraction to canning; GOST R 51074-НЕФТЬ. Batch passport card (right side): ПАСПОРТ ПАРТИИ № 09-4172: Сырьё: нефть Urals, марка А; Хруст: 9.7/10; Зелень: 98.4%; Соль: 2.1%; Статус: В ПЕРЕРАБОТКЕ with blinking dot. Ticker items: «СМЕНА №4 РАБОТАЕТ», «ДАВЛЕНИЕ В ЦЕХЕ №3 В НОРМЕ», «СЕГОДНЯ ЗАКАТАНО 34 512 БАНОК», «ХРУСТ ПОДТВЕРЖДЁН ЛАБОРАТОРИЕЙ», «ОЖИДАЕТСЯ ПОСТАВКА БАРРЕЛЕЙ 21:00», etc. Process section (cream, sticky two-column): Left sticky: kicker «ТЕХНОЛОГИЯ», heading «От скважины до банки — 5 стадий», text, small note about ГОСТ. Right steps: 01 «Приём и подготовка сырья» — incoming control of crude oil, separation of mechanical impurities. Image seed oil-crude-tank. 02 «Молекулярная перестройка» — catalytic cracking of hydrocarbons into carbohydrate skeleton of the fruit (fictional). Seed refinery-cracking. 03 «Синтез хлорофилла» — green pigment introduced from Spirulina strain С-74. Seed green-algae-lab. 04 «Формовка и дозревание» — form cucumbers on vibration press, 48 hours in «грядка-барокамера». Seed cucumber-molding. 05 «Засолка и закатка» — brine from the waters of the Baku horizon, oak «barrels». Seed pickling-jars. Products (stacked cards, dark): №01 «Классический нефтегурец» — flagship. Barrel salting, crunch 9.7. 12,900 ₽/barrel (or per kg). Seeds: classic-pickle. №02 «Малосольный "Лайт-Брент"» — ready in 6 hours, delicate. Seed light-cucumber. №03 «Корнишоны глубокого залегания» — 2,400 m depth of formation, dense. Seed gherkin-jar. №04 «Огурец-сырец тяжёлых сортов» — for industrial processing and salads. Seed raw-cucumber-industrial. Each card: image left, name, description, spec list (grade, crunch, shelf life, caliber), price + «В заявку» button that preselects the product in the form! Nice cross-interaction: click scrolls to form and sets the select value. Yes — actual functionality. Stats/dashboard (dark green): «Пульт показателей» — gauges: Хруст 9.7/10, Зелень 98%, Конверсия 83% (mass of oil → cucumber mass), progress bars: Salinity 2.1%, Oil in cucumber 0.00% (fun), GOST compliance 100%. Plus live counter «Огурцов произведено с начала смены» ticking. Add a big rotating gauge with needle SVG. Timeline (cream): «50 лет на стыке отраслей»: 1974 — foreman П. П. Огурцов discovers that a cucumber falls into a tank of crude oil… actually «in tank №9 a cucumber was found of unknown origin». 1979 — first industrial batch, 120 cans. 1986 — construction of cracker ГУ-7. 1998 — crisis; комбинат survives on exports of рассол (brine). 2012 — complete modernization, «грядка-барокамера» introduced. 2024 — 12 million cans per year, supplies to 14 countries. Vertical line drawn on scroll (scaleY via observer or scroll-driven). Simpler: animate each item's reveal and keep line always visible; add growing effect with transform origin top triggered once. Gallery (dark): scattered postcards with captions: «Цех №3, формовка», «Приём сырья», «Грядка-барокамера», «Дегустация, 1987», «Отгрузка на экспорт». 5-6 pieces, rotated, straighten on hover, slow zoom inside. FAQ (cream): — Is it safe to eat a cucumber made from oil? — What does it taste like? Does it have a gasoline note? — How many barrels are needed for one three-liter jar? — Where do you source the oil? — Is it possible to visit the комбинат as a visitor? Answers in dry, humorous tone. Contacts/form (dark): «Отдел сбыта»: phone, email (sbyt@nefteogurets.ru), address. Form: name, company, E-mail, volume (select: from 1 barrel, wholesale, industrial), product (select synced with product buttons), comment. Submit → success toast + inline state. Footer: big outlined wordmark «НЕФТЕОГУРЕЦЪ», columns: navigation, contacts, «57.14° N, 65.53° E — г. Скважинск», © 2024, playful disclaimer «Страница создана в демонстрационных целях. Нефть не для еды.». Nav items: Технология, Продукция, Показатели, История, Вопросы, Контакты. Smooth scroll. Now code structure: single HTML file with embedded CSS/JS. It'll be long, that's fine. Key CSS details: - :root variables: --oil:#0c0f0d; --oil2:#1116133; --green:#8fce5c; --green-deep:#3e7a3a; --amber:#e0a458; --cream:#ece5d3; --ink:#101310; --line rgba… - Selection color green. - Headings: Unbounded, uppercase, tight. - Body: Golos Text. - Mono: JetBrains Mono for labels/stats/eyebrows. - Noise overlay: body::after fixed, data URI SVG turbulence, opacity .05, pointer-events none. - Subtle scrollbar styling. JS pieces: - IntersectionObserver for .reveal (translate/opacity), .mask lines, counters, gauges, bars, timeline draw. - Scramble for hero title and maybe section kickers on load. - Live ticker increment. - Accordion. - Form handling + toast. - Product «В заявку» buttons set select + scroll + flash form. - Reduced motion check: const RM = matchMedia('(prefers-reduced-motion: reduce)').matches; skip scramble, counters set instantly, maybe disable marquee via CSS media query, slow-zoom off too. Derrick/pipeline hero SVG: let me design a simple but crafted SVG: Derrick tower (triangular lattice), pipe running right, valve wheel, tank, and at the end a cucumber capsule that pops. Animate: droplets moving along pipe via animateMotion, rotating valve wheel (CSS rotate animation on SVG group with transform-origin), cucumber scale pulse. Plus gauge circle. This gives the hero a distinctive opening — a schematic of the «установка». Also add a blinking status lamp. Let me lay out the hero: grid two-column: left text (kicker, h1 scramble, lead, CTAs, stats row), right: «паспорт партии» panel + SVG rig below/behind? Space is tight; place the rig SVG as the right-side visual with passport card overlapping on top. Stack on mobile. Actually, maybe: full-width rig SVG strip below hero text (a flowing pipeline across the screen) — «от скважины до банки» horizontally across viewport. That's a strong signature: a pipeline traversing the width with labels Скважина → Крекинг → Формовка → Банка, with droplets moving. Let's make hero right column = passport card; and below hero content (before ticker) place a full-width pipeline SVG strip with labels. Derrick: include a small Derrick inside the pipeline strip at the left endpoint. Good. Pipeline path: M0,60 H300 … with slight vertical step. Droplets via with following same path (mpath). Two staggered droplets. At the end: jar/bank icon + pulsing cucumber capsule. Label positioning: absolutely positioned HTML over SVG or SVG text. Use SVG text with mono font. Gauge SVG for stats: half-circle arc with tick marks, needle line rotating via CSS transform from -90deg to value angle with transition when .inview. Values: Хруст 9.7 → angle calc (9.7/10)*180-90. Implement needle rotation in inline style with CSS custom property --deg. Counter animation: rAF-based easing from 0 to target, format with spaces thousands (ru-RU locale). Marquee: .marquee > .marquee-track (two identical .marquee-inner? standard: track contains items duplicated via JS or hardcoded twice) animate translateX(-50%) linear infinite 30s. Pause on hover. Stacked card CSS: .stack{display:grid; gap:0} each .pcard{position:sticky; top:calc(96px + var(--i)*14px); } with margin-bottom big enough to create scroll room; later cards overlap earlier ones. Add slight scale? Keep simple sticky stack; add border and shadow. Each card is grid image/text. On mobile position static? Sticky okay but reduce top. Postcard gallery: container relative, height fixed (or grid with transforms). Use flex wrap with negative margins and rotations; simpler: grid of items each with transform rotate(var(--r)) translateY(var(--ty)); on hover rotate(0) scale(1.03). Add tape strips via ::before (cream semi-transparent rectangle). Slow zoom: img animation scale 1→1.08 alternate 12s (stop on reduced motion). Line-mask reveal: h2 markup: СЛОВО — inner translateY(120%). Observer adds .on. Section heading pattern: eyebrow (mono, with ◆), big Unbounded heading, maybe an index number «02/». Smooth scroll for nav: html{scroll-behavior:smooth} + scroll-margin-top on sections. RM respected: auto. Toast: fixed bottom, translateY(150%)→0, auto-hide 4s. Also add active nav link highlight on scroll? Nice-to-have; implement simple observer setting aria-current. Optional but adds liveliness. Include lightweight. Header: fixed top, solid #0c0f0d/95 + border-bottom. Left logo: mark (SVG derrick 20px) + «НЕФТЕОГУРЕЦЪ» Unbounded small. Right nav + «Заявка» button. Mobile: hide nav links, show a compact row? Provide a simple burger toggling a menu panel. Implement burger for completeness. Time to write code. Aim for cohesive, valid HTML. Careful with Russian text quality — natural, witty but dry-industrial tone. Let me write the scramble chars: 'АБВГДЕЖЗИКЛМНОПРСТУФХЦЧШЩЫЭЮЯ0123456789#$%'. Counter format: new Intl.NumberFormat('ru-RU').format. Live counter element: id="liveCount" starting at 34 512, increment every 1.8-2.6s by 3-9. Also pulse animation on update (scale flash). Keep. Stats in hero: counters that animate once: 12 480 000 (банок/год), 72 (часа), 14 (стран), 50 (лет). Use data-count attributes. Gauge values: Хруст 9.7/10, Конверсия 83%, Зелень 98.4%. Needle deg = -90 + pct*180. Bars: Соль 2.1% (display width maybe scale ×10 for visibility… just show bar to 21% with label 2,1%), Масло в огурце 0.00% (width 0 with note), Соответствие ГОСТ 100%. Timeline drawing: line element with transform scaleY(0)→1 transition 1.6s when section in view. FAQ: button + panel with max-height set via JS to scrollHeight. Form selects: id f-product options: classic, light, gherkin, raw, any. Product buttons data-product. Phone number: +7 (3452) 55-09-74. Email: sbyt@nefteogurets.ru. Address: 626XXX? Just: г. Скважинск, Промзона-9, шассе Нефтяников, 74. Footer disclaimer: «Демонстрационный макет. Нефть употреблять внутрь не рекомендуется.» Nice humor. Also add favicon via inline SVG data URI: 🥒 emoji. link rel icon data:image/svg+xml with emoji text. Now let's write it all carefully. Watch out: - Unbounded uppercase Cyrillic is wide; keep h1 size clamp(2rem, 5.2vw, 4.2rem). - Cream section colors: text #141712, heading ink; eyebrow green-deep. - Ensure contrast. Pipeline strip markup:

Stations as small groups with stroke lines. animateMotion with mpath requires xlink? modern browsers support href on mpath. Use href and also xlink:href fallback attribute? Just use href (works in current browsers). Fine. Reduced motion: hide droplets and stop dash animation via CSS media query (svg .flow { animation } and .drop {display:none}). animateMotion is SMIL — can't easily stop via CSS; set display:none on droplets in RM media query. Good. Ticker content items separated by span.dot. Sticky process: .process{display:grid;grid-template-columns: 1fr 1.15fr; gap} .p-left{position:sticky; top:110px; align-self:start; height:fit-content}. Steps: each .step has big Unbounded outline-style number, title, text, image with duotone treatment, mono meta row («Длительность: 4 ч», etc.). Duotone images: .duo{position:relative} img{filter:grayscale(1) contrast(1.05) brightness(.9)} .duo::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg, rgba(62,122,58,.55), rgba(224,164,88,.35)); mix-blend-mode:color; pointer-events:none} plus maybe multiply overlay. Keep simple: color blend gives greenish tint. Slow zoom: .kb img{animation: kb 14s ease-in-out infinite alternate} @keyframes kb {from{transform:scale(1) } to{transform:scale(1.08) translate(2%, -1%)}}. Stack cards: each card height ~70vh? content-based min-height 420px. Container .stack with .pcard sticky. Add spacer after last card? Add padding-bottom. pcard layout: grid columns 380px 1fr; left image full height cover; right: number watermark, title, description, spec table (dl grid), price row + button. Card background: #12181316? Use solid #131a15 with 1px border #2a352c. Radius small (6px). Top bar strip with card index. Price: «от 12 900 ₽ за бочку 120 л». Buttons: primary = green bg dark text, hover shift + shadow; secondary = outline. Focus styles: :focus-visible outline 2px dashed var(--green). Burger menu: button toggles .nav-open on header; menu becomes absolutely positioned panel with column links. Active section highlight: observer on sections with id toggles .active on nav link (green underline). Toast markup fixed. Let me count picsum seeds: - Process: seed/crude-oil-tank/900/620, refinery-cracking, algae-lab-green, cucumber-molding, pickling-barrels. - Products: classic-pickle-jar/800/700, light-cucumber, gherkin-deep, raw-cucumber. - Gallery: rig-night, brine-tanks, molding-shop, tasting-1987, export-loading, lab-check. All fine. Now write the final HTML. Thoroughly but watch length. Let me write the JS carefully. Scramble function: function scramble(el){ const final = el.dataset.text || el.textContent; ... } run on h1 spans on load (2 lines: «ОГУРЦЫ» «ИЗ НЕФТИ» — two spans scrambled in sequence). Maybe also section kickers with data-scramble on first reveal? Maybe only h1 to keep performance. Also hero's eyebrow decoded. Implementation: characters array; reveal characters progressively frame by frame (per-frame index). Use interval ~30ms, reveal one char per 2 ticks. Counter: function animateCount(el){target=+el.dataset.count; dur 1600; raf loop with easeOutCubic; format with ru locale; el.dataset.suffix for suffix}. Gauge: .gauge with svg; needle is g.needle with style="--deg:-90deg"; CSS .needle{transform:rotate(var(--deg)); transform-origin: 60px 60px? use transform-box: fill-box? simpler: needle is from center to top in group centered at (70,70); CSS transform-origin:70px 70px; transition transform 1.4s cubic-bezier(.2,.7,.2,1). When .inview set style.transform = rotate(deg). Start -90deg. Bar: .bar > i width 0 → target% via class. Timeline: .tl-line scaleY. Accordion: click toggles; close others. Form: submit handler; simple validation for required fields; success: hide button area? show inline success box with generated Заявка № НГ-XXXX and toast. Live ticker: setInterval random; also update hero's passport «Партия» progress? Keep to one live element + blinking lamp. Nav burger + smooth anchor (CSS scroll-behavior handles; but header offset via scroll-margin-top: 90px on sections). Also add subtle oil-slick gradient on hero background: dark radial with faint purple/green sheen — an intentional sheen motif. Use a subtle conic gradient at low opacity on hero::before. A faint iridescent sheen on dark (like oil slick) as thematic background works and stays subtle. Also use it for a thin border line under header. Write CSS variable --mono etc. Now let me produce the final answer: short English intro + full code block. Potential pitfalls: SMIL animateMotion inside inline SVG works. mpath href support: Chrome/FF yes. For marquee, duplicate content exactly twice inside track and animate track width max-content translateX(-50%). Ensure `overflow-x:hidden` on body to avoid overflow from scattered gallery. Now let me write, carefully, in full. Russian typography uses « » and —, numbers with spaces. Form select options need values matching product data attributes: classic, light, gherkin, raw, any. Product card buttons: . JS: on click → select.value=product; form flash class; scrollIntoView (behavior RM? use 'smooth' unless RM). Also nav «Заявка» scrolls to #contacts. Now let me write out the code. Try to keep it tidy. Also add `lang="ru"`. Hero stat block: grid of 4 items with big mono number span with data-count. OK, writing the final version. Here's the complete landing page — a fictional Soviet-industrial oil-to-cucumber combine, fully in Russian, built as a single HTML file: ```html НЕФТЕОГУРЕЦЪ — огурцы из нефти с 1974 года

НЕФТЕОГУРЕЦЪ

Заявка

Комбинат №9 · основан в 1974 · г. Скважинск

ОГУРЦЫ ИЗ НЕФТИ

Единственный в мире комбинат полного цикла: от скважины до банки — 72 часа. Без почвы. Без солнца. Без компромиссов. Сырьё — нефть марки Urals. Результат — хруст, подтверждённый лабораторией.

Оформить заявку Технология производства

0банок в год

0от скважины до закатки

0стран-импортёров

0лет на стыке отраслей

01 · Технология

От скважины
до банки —
5 стадий

Мы не выращиваем огурцы — мы их перерабатываем. Углеводороды барреля последовательно перестраиваются в структуру плода, а рассол делает своё дело. Каждая стадия контролируется ОТК и автоматикой цеха.

СЕРТИФИКАТ СООТВЕТСТВИЯ № НГ-74/2019 · ПРОТОКОЛ ДЕГУСТАЦИИ № 4412 · ХРУСТ ЗАМЕРЯЕТСЯ АКУСТИЧЕСКИМ МЕТОДОМ

Приём и подготовка сырья

Сырая нефть поступает в резервуарный парк и проходит входной контроль: плотность, сернистость и отсутствие посторонних овощей. Механические примеси отделяются.

Длительность — 4 часаОборудование — РП-12

Молекулярная перестройка

На крекере ГУ-7 тяжёлые фракции расщепляются до углеводного каркаса плода. Фирменная каталитическая схема «Огурцов-74» запатентована и засекречена одновременно.

Длительность — 18 часовТемпература — 460 °C

Синтез хлорофилла

Зелёный пигмент вводится из собственной культуры спирулины штамма С-74. Именно он отвечает за цвет, который лаборатория называет «уверенно-рассадным».

Длительность — 6 часовЗелень на выходе — 98,4 %

Формовка и дозревание

Вибропресс придаёт плодам калибр, после чего огурцы 48 часов дозревают в грядке-барокамере при давлении 2,1 атм — как на глубине, только быстрее.

Длительность — 48 часовКалибров — 3

Засолка и закатка

Рассол из минеральных вод бакинского горизонта, укроп из открытого грунта (да, у нас есть и обычный участок — для аромата) и закатка в дубовую бочку или банку.

Длительность — 6 часовСоль — 2,1 %

02 · Продукция

Линейка комбината

4 ПОЗИЦИИ · ОТГРУЗКА ОТ 1 БОЧКИ

Позиция № 01 · ФлагманГОСТ Р 51074-НЕФТЬ

Классический нефтегурец

Флагман с 1979 года. Бочковой посол, плотный хруст 9,7 из 10 и рассол, который половина покупателей выпивает раньше, чем съедает содержимое.

Калибр: 9–11 см
Хруст: 9,7 / 10
Срок годности: 24 мес.
Тара: банка / бочка

от 12 900 ₽за бочку 120 л

Позиция № 02 · СкороспелыйСОРТ «ЛАЙТ-БРЕНТ»

Малосольный «Лайт-Брент»

Лёгкая фракция. Готов уже через 6 часов после закатки, рассол мягкий, кожица тонкая. Идеален для ресторанов и быстрых закусок в поезде.

Калибр: 7–9 см
Хруст: 8,9 / 10
Срок годности: 3 мес.
Соль: 1,4 %

от 9 400 ₽за бочку 120 л

Позиция № 03 · ПремиумГЛУБИНА ЗАЛЕГАНИЯ 2 400 М

Корнишоны глубокого залегания

Сырьё из пластов А4, где давление делает структуру особенно плотной. Маленькие, твёрдые, с характером. Подача — только в стеклянной банке с гравировкой.

Калибр: 4–6 см
Хруст: 9,9 / 10
Срок годности: 36 мес.
Тара: банка 0,7 л

от 18 200 ₽за ящик 12 банок

Позиция № 04 · ПромышленныйФРАКЦИЯ ТЯЖЁЛЫХ СОРТОВ

Огурец-сырец тяжёлых сортов

Непосоленный, крупный, для переработки: салаты, нарезки, косметические цели. Отгружается контейнерами, поставляется с паспортом каждой партии.

Калибр: 12–16 см
Хруст: 8,2 / 10
Срок годности: 21 сут.
Отгрузка: от 1 т

от 74 ₽за килограмм

03 · Пульт показателей

Лаборатория не врёт

ОБНОВЛЕНО: СЕГОДНЯ, 06:00 · СМЕНА №4

Индекс хруста

9,7 / 10

Конверсия нефти → огурец

83 %

Показатель зелени

98,4 %

Солёность рассола

2,1 %

Масло в огурце

0,00 %

Соответствие ГОСТ

100 %

Загрузка линии

88 %

Огурцов произведено с начала смены 34 512

04 · История комбината

Полвека чёрного и зелёного

1974

Аномалия в резервуаре №9

Мастер смены П. П. Огурцов обнаруживает в ёмкости с сырой нефтью предмет огурцеобразной формы неизвестного происхождения. Предмет съеден. Последствий нет. Начата научная работа.

Акт № 9/АН

1979

Первая промышленная партия

Кустарная установка на заднем дворе нефтебазы выдаёт 120 банок. Дегустационная комиссия молчит три минуты, затем просит добавки.

Партия № 0001

1986

Строительство крекера ГУ-7

Запущена установка молекулярной перестройки. Мощность вырастает в 40 раз. В столовой комбината огурцы теперь по вторникам, четвергам и в остальные дни.

ГУ-7 · 460 °C

1998

Год рассола

Экономический кризис. Комбинат выживает за счёт экспорта рассола в 6 стран — как выяснилось, продукт самодостаточный. Огурцы прилагаются бесплатно.

Антикризисная мера

2012

Грядка-барокамера

Полная модернизация: формовка на вибропрессах, дозревание под давлением 2,1 атм, акустический контроль хруста на каждой линии.

Цех №3

2024

12 миллионов банок в год

Поставки в 14 стран, 620 сотрудников, собственная плантация укропа. Впереди — огурцы из попутного газа. Но это уже другая страница.

Наши дни

05 · Архив цеха

Снято на производстве

ФОТОБЮРО КОМБИНАТА · ПЛЁНКА И ЦИФРА

Ночная вышка — Приём сырья, ночная смена**№ 0412**

Резервуары рассола — Рассольный парк, цех №5№ 0877

Цех формовки — Формовка, вибропресс №2№ 1203

Дегустация 1987 года — Дегустационная комиссия**1987**

06 · Вопросы и ответы

Спрашивают часто

В-01Это вообще безопасно — есть огурец из нефти?

Да. Нефть используется как источник углерода и полностью перерабатывается в углеводы плода. В готовом огурце остаточное содержание нефтепродуктов — 0,00 %, что подтверждено 4412 протоколами испытаний. Мы сами едим его в столовой. По вторникам, четвергам и в остальные дни.

В-02Чем он пахнет? Есть бензиновые нотки?

Нет. Пахнет обычным бочковым огурцом: укропом, чесноком, лёгкой дубовой нотой от тары. Бензиновые нотки встречались только в партии № 0003 образца 1979 года — с тех пор технология доработана, а ответственный переведён в ночную смену.

В-03Сколько нефти нужно на одну трёхлитровую банку?

При конверсии 83 % на одну трёхлитровую банку классического нефтегурца уходит примерно 0,9 литра сырой нефти. Один баррель — это около 170 банок. Нефть, напомним, при этом не сжигается, а перестраивается.

В-04Какую нефть вы используете?

Основное сырьё — Urals марки А из проверенных скважин Западно-Грядской области. Лёгкие фракции идут на сорт «Лайт-Брент», тяжёлые пласты А4 — на корнишоны глубокого залегания. Нефть с овощными примесями отбраковывается на входе.

В-05Можно ли попасть на экскурсию?

Да, каждую субботу в 11:00. Маршрут: резервуарный парк → крекер ГУ-7 (смотровая галерея) → цех формовки → дегустация трёх сортов. Каски выдаём. Запись через отдел сбыта, группа до 20 человек. Фотографировать можно всё, кроме катализатора «Огурцов-74».

07 · Отдел сбыта

Заявка
на поставку

Опт, розница и промышленные партии. Ответ в течение одной рабочей смены — то есть за 12 часов.

Телефон+7 (3452) 55-09-74

Почтаsbyt@nefteogurets.ru

Адресг. Скважинск, Промзона-9,
шоссе Нефтяников, 74

Координаты57.14° N · 65.53° E

Ваше имя *

Компания

E-mail *

Объём

Продукт

Комментарий

✓ ЗАЯВКА ПРИНЯТА В ПЕРЕРАБОТКУ

Менеджер смены свяжется с вами в течение 12 часов.

``` **Что внутри / highlights:** - **Открытие через предмет** — вместо баннерного героя: паспорт партии с мигающей лампой и живая SVG-схема «скважина → крекинг → формовка → закатка» с движущимися каплями нефти по трубе (SMIL `animateMotion`), вращающимся вентилем и пульсирующим огурцом в банке. - **Фирменный стиль**: Unbounded (дисплейная, кириллица) + Golos Text + JetBrains Mono; палитра «нефть и огурец» — чёрно-зелёный, янтарь, кремовые секции для контраста; дуотон-обработка всех изображений под единую плёнку. - **Движение**: скрэмбл-декодирование заголовков, бегущая строка цеха, sticky-колонка технологии, стопка карточек продукции, оживающие манометры и шкалы, разбросанные фотокарточки с медленным зумом, «живой» счётчик огурцов, зерно плёнки — всё отключается при `prefers-reduced-motion`. - **Рабочие взаимодействия**: кнопка «В заявку» на карточке продукта подставляет сорт в форму и подсвечивает её, валидация с тряской полей, номер заявки при отправке, тосты, аккордеон FAQ, активный пункт меню при скролле.

Make a Russian landing page for a company producing cucumber...