PageSourceSearch

https://debrif.app/

html debrif.app collected 2026-10-02 01:13:01 UTC 51,833 bytes, 932 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en" data-lang="en">
3<head>
4<meta charset="utf-8" />
5<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6<title>Debrif — AI Meeting Intelligence</title>
7<meta name="description" content="Automate summaries, extract action items, and maintain a searchable library of all your video conversations across Google Meet, Telemost, Zoom and Teams." />
8<link rel="icon" type="image/svg+xml" href="/logo/debrif-09b-favicon.svg" />
9<link rel="icon" type="image/png" sizes="16x16" href="/logo/png/debrif-favicon-16.png" />
10<link rel="icon" type="image/png" sizes="32x32" href="/logo/png/debrif-favicon-32.png" />
11<link rel="apple-touch-icon" sizes="128x128" href="/logo/png/debrif-app-128.png" />
12<link rel="apple-touch-icon" sizes="256x256" href="/logo/png/debrif-app-256.png" />
13<link rel="preconnect" href="https://fonts.googleapis.com" />
14<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
15<link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=Inter:[email protected]&display=swap" rel="stylesheet" />
16<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,[email protected],0..1&display=swap" rel="stylesheet" />
17<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
vendor: 1 bytes, line 17
17
18<script>
19tailwind.config = {
20  darkMode: "class",
21  theme: {
22    extend: {
23      colors: {
24        "on-surface-variant": "#54433e",
25        "outline-variant": "#dac1ba",
26        "primary-container": "#d17a5e",
27        "surface-container-low": "#f5f3f0",
28        "surface-container-high": "#eae8e5",
29        "on-background": "#1b1c1a",
30        "on-surface": "#1b1c1a",
31        "outline": "#87736d",
32        "surface-container-lowest": "#ffffff",
33        "secondary-fixed": "#e7e2d9",
34        "on-error": "#ffffff",
35        "primary-fixed": "#ffdbd0",
36        "surface": "#fbf9f6",
37        "on-tertiary": "#ffffff",
38        "on-primary-container": "#501703",
39        "background": "#fbf9f6",
40        "error-container": "#ffdad6",
41        "inverse-surface": "#30312f",
42        "tertiary": "#605e55",
43        "surface-dim": "#dbdad7",
44        "on-primary": "#ffffff",
45        "on-secondary-container": "#67645d",
46        "inverse-primary": "#ffb59e",
47        "surface-container": "#efeeeb",
48        "surface-bright": "#fbf9f6",
49        "on-primary-fixed": "#3a0b00",
50        "secondary-container": "#e7e2d9",
51        "surface-container-highest": "#e4e2df",
52        "secondary": "#615e57",
53        "error": "#ba1a1a",
54        "inverse-on-surface": "#f2f0ed",
55        "primary-fixed-dim": "#ffb59e",
56        "tertiary-container": "#949186",
57        "on-tertiary-container": "#2b2a22",
58        "primary": "#934931",
59        "secondary-fixed-dim": "#cbc6be",
60        "on-secondary": "#ffffff",
61        "surface-tint": "#934931",
62        "surface-variant": "#e4e2df"
63      },
64      fontFamily: {
65        "headline": ["Newsreader", "Georgia", "serif"],
66        "body": ["Inter", "system-ui", "sans-serif"],
67        "label": ["Inter", "system-ui", "sans-serif"]
68      },
69      borderRadius: {
70        "DEFAULT": "0.25rem",
71        "lg": "0.5rem",
72        "xl": "0.75rem",
73        "2xl": "1rem",
74        "3xl": "1.5rem",
75        "full": "9999px"
76      },
77    },
78  },
79}
80</script>
80
81<style>
82  *, *::before, *::after { box-sizing: border-box; }
83
84  body {
85    background-color: #fbf9f6;
86    color: #1b1c1a;
87    font-family: 'Inter', system-ui, sans-serif;
88    -webkit-font-smoothing: antialiased;
89    -moz-osx-font-smoothing: grayscale;
90    overflow-x: hidden;
91  }
92
93  /* --- Utility classes --- */
94  .editorial-shadow { box-shadow: 0 12px 40px rgba(27, 28, 26, 0.06); }
95  .editorial-shadow-lg { box-shadow: 0 20px 60px rgba(27, 28, 26, 0.08), 0 4px 16px rgba(27, 28, 26, 0.04); }
96
97  .glass-panel {
98    background: rgba(251, 249, 246, 0.85);
99    backdrop-filter: blur(24px);
100    -webkit-backdrop-filter: blur(24px);
101  }
102
103  .primary-gradient {
104    background: linear-gradient(135deg, #934931 0%, #D17A5E 50%, #FF8A65 100%);
105  }
106
107  .material-symbols-outlined {
108    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
109    vertical-align: middle;
110  }
111
112  .dot-texture {
113    background-image: radial-gradient(circle at 2px 2px, rgba(147, 73, 49, 0.08) 1px, transparent 0);
114    background-size: 24px 24px;
115  }
116
117  /* --- Nav shrink on scroll --- */
118  .nav-scrolled { box-shadow: 0 1px 12px rgba(27, 28, 26, 0.06); }
119
120  /* --- Reveal animations --- */
121  @keyframes fadeUp {
122    from { opacity: 0; transform: translateY(28px); }
123    to { opacity: 1; transform: translateY(0); }
124  }
125  @keyframes fadeIn {
126    from { opacity: 0; }
127    to { opacity: 1; }
128  }
129  @keyframes scaleIn {
130    from { opacity: 0; transform: scale(0.96); }
131    to { opacity: 1; transform: scale(1); }
132  }
133
134  .reveal {
135    opacity: 0;
136    transform: translateY(28px);
137    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
138                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
139  }
140  .reveal.visible {
141    opacity: 1;
142    transform: translateY(0);
143  }
144
145  /* Hero staggered entrance */
146  .hero-enter { animation: fadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
147  .hero-enter-d1 { animation-delay: 0.1s; }
148  .hero-enter-d2 { animation-delay: 0.25s; }
149  .hero-enter-d3 { animation-delay: 0.4s; }
150  .hero-enter-d4 { animation-delay: 0.55s; }
151  .hero-enter-d5 { animation-delay: 0.7s; }
152
153  /* --- Wave section --- */
154  .wave-divider {
155    position: relative;
156    z-index: 20;
157    pointer-events: none;
158    height: 0;
159  }
160  .wave-divider-inner {
161    position: absolute;
162    left: 0;
163    width: 100%;
164    transform: translateY(-50%);
165    display: flex;
166    justify-content: center;
167    overflow: hidden;
168    pointer-events: auto;
169    cursor: default;
170  }
171  .wave-divider-inner svg {
172    width: 100%;
173    max-width: 72rem;
174    height: auto;
175    opacity: 0.7;
176    transition: opacity 0.6s ease;
177  }
178  .wave-divider-inner:hover svg {
179    opacity: 1;
180  }
181
182  /* --- Wave hover animation --- */
183  .wave-divider-inner svg path,
184  .wave-divider-inner svg line {
185    transition: d 0.6s cubic-bezier(0.22, 1, 0.36, 1),
186                stroke-width 0.4s ease;
187  }
188
189  /* Oscillation keyframes for each layer */
190  @keyframes wave-1 {
191    0%   { d: path("M0 60 C150 60, 200 40, 300 60 S450 80, 600 60 S750 40, 900 60 S1050 80, 1200 60"); }
192    16%  { d: path("M0 60 C100 60, 180 20, 280 70 S420 90, 560 45 S720 25, 880 72 S1060 88, 1200 60"); }
193    33%  { d: path("M0 60 C120 60, 200 75, 320 48 S460 30, 620 68 S760 82, 920 42 S1080 28, 1200 60"); }
194    50%  { d: path("M0 60 C140 60, 190 28, 310 72 S440 85, 580 38 S740 22, 900 70 S1070 82, 1200 60"); }
195    66%  { d: path("M0 60 C110 60, 210 68, 290 45 S470 32, 610 72 S770 80, 910 48 S1050 30, 1200 60"); }
196    83%  { d: path("M0 60 C130 60, 195 35, 305 65 S435 78, 590 50 S730 35, 895 68 S1055 7
1965, 1200 60"); }
197    100% { d: path("M0 60 C150 60, 200 40, 300 60 S450 80, 600 60 S750 40, 900 60 S1050 80, 1200 60"); }
198  }
199  @keyframes wave-2 {
200    0%   { d: path("M0 60 C150 60, 200 50, 300 60 S450 70, 600 60 S750 50, 900 60 S1050 70, 1200 60"); }
201    20%  { d: path("M0 60 C120 60, 190 35, 290 68 S440 78, 580 48 S730 32, 890 72 S1060 78, 1200 60"); }
202    40%  { d: path("M0 60 C140 60, 210 72, 310 48 S460 35, 620 70 S770 78, 920 45 S1040 35, 1200 60"); }
203    60%  { d: path("M0 60 C110 60, 195 40, 305 70 S450 80, 590 42 S740 30, 900 68 S1070 76, 1200 60"); }
204    80%  { d: path("M0 60 C135 60, 205 65, 295 50 S445 38, 610 68 S760 75, 910 50 S1050 40, 1200 60"); }
205    100% { d: path("M0 60 C150 60, 200 50, 300 60 S450 70, 600 60 S750 50, 900 60 S1050 70, 1200 60"); }
206  }
207  @keyframes wave-3 {
208    0%   { d: path("M0 60 C150 60, 200 55, 300 60 S450 65, 600 60 S750 55, 900 60 S1050 65, 1200 60"); }
209    25%  { d: path("M0 60 C130 60, 195 48, 295 65 S445 72, 590 52 S740 45, 895 66 S1055 70, 1200 60"); }
210    50%  { d: path("M0 60 C140 60, 205 68, 310 52 S455 45, 610 66 S760 72, 910 50 S1045 46, 1200 60"); }
211    75%  { d: path("M0 60 C120 60, 200 50, 300 64 S450 68, 600 54 S750 48, 900 64 S1050 68, 1200 60"); }
212    100% { d: path("M0 60 C150 60, 200 55, 300 60 S450 65, 600 60 S750 55, 900 60 S1050 65, 1200 60"); }
213  }
214  @keyframes wave-baseline {
215    0%   { opacity: 1; }
216    50%  { opacity: 0.4; }
217    100% { opacity: 1; }
218  }
219
220  .wave-divider-inner:hover .wave-path-1 {
221    animation: wave-1 2.8s ease-in-out infinite;
222    stroke-width: 1.6;
223  }
224  .wave-divider-inner:hover .wave-path-2 {
225    animation: wave-2 2.2s ease-in-out infinite;
226    stroke-width: 2.5;
227  }
228  .wave-divider-inner:hover .wave-path-3 {
229    animation: wave-3 3.2s ease-in-out infinite;
230    stroke-width: 1.4;
231  }
232  .wave-divider-inner:hover .wave-baseline {
233    animation: wave-baseline 1.5s ease-in-out infinite;
234  }
235
236  /* --- Step number accent --- */
237  .step-number {
238    font-family: 'Newsreader', Georgia, serif;
239    font-style: italic;
240    color: #934931;
241  }
242
243  /* --- Card hover lift --- */
244  .card-lift {
245    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
246                box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
247  }
248  .card-lift:hover {
249    transform: translateY(-4px);
250    box-shadow: 0 24px 64px rgba(27, 28, 26, 0.1), 0 6px 20px rgba(27, 28, 26, 0.05);
251  }
252
253  /* --- Hero mockup card --- */
254  .hero-mockup {
255    position: relative;
256  }
257  .hero-mockup::before {
258    content: '';
259    position: absolute;
260    inset: -2px;
261    border-radius: 1rem;
262    background: linear-gradient(135deg, rgba(209,122,94,0.15), rgba(147,73,49,0.05));
263    z-index: -1;
264    filter: blur(1px);
265  }
266
267  /* --- Platform logos --- */
268  .platform-logo {
269    height: 28px;
270    width: auto;
271    opacity: 0.5;
272    transition: opacity 0.3s ease, filter 0.3s ease;
273    filter: grayscale(1);
274  }
275  .platform-logo:hover {
276    opacity: 1;
277    filter: grayscale(0);
278  }
279
280  /* --- CTA background pulse --- */
281  @keyframes pulse-glow {
282    0%, 100% { opacity: 0.12; transform: scale(1); }
283    50% { opacity: 0.2; transform: scale(1.05); }
284  }
285  .cta-glow {
286    animation: pulse-glow 6s ease-in-out infinite;
287  }
288
289  /* --- Step illustration icons --- */
290  .step-icon-wrap {
291    position: relative;
292    display: flex;
293    align-items: center;
294    justify-content: center;
295  }
296  .step-icon-wrap::after {
297    content: '';
298    position: absolute;
299    width: 80px;
300    height: 80px;
301    border-radius: 50%;
302    background: rgba(209, 122, 94, 0.08);
303    z-index: 0;
304  }
305  .step-icon-wrap .material-symbols-outlined {
306    position: relative;
307    z-index: 1;
308  }
309
310  /* --- Smooth scroll --- */
311  html { scroll-behavior: smooth; }
312
313  /* --- Mobile nav toggle --- */
314  .mobile-menu { display: none; }
315  .mobile-menu.open { display: flex; }
316
317  /* --- Focus styles --- */
318  button:focus-visible, a:focus-visible {
319    outline: 2px solid #934931;
320    outline-offset: 2px;
321    border-radius: 4px;
322  }
323
324  /* --- Language toggle active state --- */
325  #lang-toggle { position: relative; }
326  #lang-toggle .lang-active { font-weight: 600; color: #934931; }
327</style>
328</head>
329
330<body class="bg-surface text-on-surface">
331
332<!-- ============================================ -->
333<!-- TOP NAVIGATION                               -->
334<!-- ============================================ -->
335<nav id="main-nav" class="sticky top-0 z-50 glass-panel border-b border-outline-variant/10 transition-all duration-300">
336  <div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
337    <!-- Logo + Links -->
338    <div class="flex items-center gap-12">
339      <a href="/" class="flex items-center gap-3 select-none" aria-label="Debrif">
340        <svg width="34" height="34" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
341          <path d="M14 30 L52 30" stroke="#934931" stroke-width="6" stroke-linecap="round" fill="none"/>
342          <path d="M20 48 L52 48" stroke="#934931" stroke-width="6" stroke-linecap="round" fill="none"/>
343          <path d="M28 66 L52 66" stroke="#934931" stroke-width="6" stroke-linecap="round" fill="none"/>
344          <circle cx="72" cy="48" r="11" fill="#934931"/>
345        </svg>
346        <span class="text-2xl font-headline font-semibold text-primary tracking-tight">Debrif</span>
347      </a>
348      <div class="hidden md:flex items-center gap-8">
349        <a class="text-sm font-label text-on-surface-variant hover:text-primary transition-colors duration-200" href="#features" data-i18n="nav_features">Features</a>
350        <a class="text-sm font-label text-on-surface-variant hover:text-primary transition-colors duration-200" href="#how-it-works" data-i18n="nav_how">How it Works</a>
351        <a class="text-sm font-label text-on-surface-variant hover:text-primary transition-colors duration-200" href="#pricing" data-i18n="nav_pricing">Pricing</a>
352      </div>
353    </div>
354
355    <!-- Right side -->
356    <div class="flex items-center gap-4 sm:gap-6">
357      <button id="lang-toggle" class="text-sm font-label text-on-surface-variant px-3 py-1 hover:bg-surface-container-low rounded-lg transition-colors duration-200">
358        <span class="lang-en">EN</span> / <span class="lang-ru">RU</span>
359      </button>
360      <a href="/auth/login" class="hidden sm:inline-block text-sm font-label text-on-surface-variant hover:text-primary transition-colors duration-200" data-i18n="nav_signin">Sign In</a>
361      <a href="/auth/signup/redirect" class="primary-gradient text-on-primary px-6 py-2.5 rounded-full text-sm font-label editorial-shadow transition-all duration-200 active:scale-95 hover:opacity-90" data-i18n="nav_getstarted">
362        Get Started
363      </a>
364      <!-- Mobile hamburger -->
365      <button id="mobile-toggle" class="md:hidden flex flex-col gap-1.5 p-2" aria-label="Toggle menu">
366        <span class="block w-5 h-0.5 bg-on-surface rounded-full transition-all"></span>
367        <span class="block w-5 h-0.5 bg-on-surface rounded-full transition-all"></span>
368        <span class="block w-3.5 h-0.5 bg-on-surface rounded-full transition-all"></span>
369      </button>
370    </div>
371  </div>
372
373  <!-- Mobile menu -->
374  <div id="mobile-menu" class="mobile-menu flex-col gap-4 px-6 pb-6 md:hidden bg-surface border-t border-outline-variant/10">
375    <a class="text-sm font-label text-on-surface-variant py-2" href="#features" data-i18n="nav_features">Features</a>
376    <a class="text-sm font-label text-on-surface-variant py-2" href="#how-it-works" data-i18n="nav_how">How it Works</a>
377    <a class="text-sm font-label text-on-surface-variant py-2" href="#pricing" data-i18n="nav_pricing">Pricing</a>
378    <a class="text-sm font-label text-on-surface-variant py-2" href="/auth/login" data-i18n="nav_signin">Sign In</a>
379  </div>
380</nav>
381
382<main>
383
384<!-- ============================================ -->
385<!-- HERO SECTION                                 -->
386<!-- ============================================ -->
387<section class="relative pt-20 sm:pt-24 pb-28 sm:pb-32 overflow-hidden">
388  <!-- Ambient background blobs -->
389  <div class="absolute top-0 right-0 w-[500px] h-[500px] bg-primary-fixed/15 blur-[120px] rounded-full -z-10 -mr-48 -mt-24"></div>
390  <div class="absolute bottom-0 left-1/4 w-[300px] h-[300px] bg-secondary-container/20 blur-[80px] rounded-full -z-10"></div>
391
392  <div class="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">
393    <!-- Left: Copy -->
394    <div class="lg:col-span-7">
395      <h1 class="hero-enter hero-enter-d1 text-5xl sm:text-6xl md:text-7xl font-headline leading-[1.08] text-on-surface tracking-tight mb-8">
396        <span data-i18n="hero_line1">The quiet intelligence</span><br class="hidden sm:block" /> <span data-i18n="hero_line2">for your</span> <span class="italic text-primary" data-i18n="hero_accent">daily meetings.</span>
397      </h1>
398      <p class="hero-enter hero-enter-d2 text-lg sm:text-xl text-on-surface-variant mb-10 max-w-xl leading-relaxed" data-i18n="hero_subtitle">
399        Automate summaries, extract action items, and maintain a searchable library of all your video conversations across Google Meet, Telemost, Zoom and Teams.
400      </p>
401      <div class="hero-enter hero-enter-d3 flex flex-wrap gap-4">
402        <a href="/auth/signup/redirect" class="primary-gradient text-on-primary px-8 py-4 rounded-full text-base sm:text-lg font-label editorial-shadow transition-all duration-200 hover:opacity-90 active:scale-95 inline-flex items-center gap-2">
403          <span data-i18n="cta_getstarted">Get Started</span>
404          <span class="material-symbols-outlined text-[20px]">arrow_forward</span>
405        </a>
406        <a href="#how-it-works" class="bg-secondary-container text-on-secondary-container px-8 py-4 rounded-full text-base sm:text-lg font-label transition-colors duration-200 hover:bg-surface-container-high inline-block" data-i18n="cta_demo">
407          View Demo
408        </a>
409      </div>
410
411      <!-- Platform logos -->
412      <div class="hero-enter hero-enter-d4 mt-14 flex items-center gap-6 flex-wrap">
413        <span class="text-[11px] font-label uppercase tracking-[0.15em] text-on-surface-variant/50" data-i18n="integrations_label">Integrations</span>
414        <!-- Google Meet -->
415        <svg class="platform-logo" viewBox="0 0 87.5 72" xmlns="http://www.w3.org/2000/svg">
416          <path d="M49.5 36l8.53-9.38L72 18.88V53.13l-13.97-7.74L49.5 36z" fill="#00832d"/>
417          <path d="M0 51.5V20.5L20.13 36 0 51.5z" fill="#0066da"/>
418          <path d="M49.5 36l-29.37-15.5V5.25a5.26 5.26 0 015.25-5.25h18.37L49.5 7.88 55.25 0h18.37a5.26 5.26 0 015.25 5.25v13.63L64.03 26.62 49.5 36z" fill="#e94235"/>
419          <path d="M20.13 36L0 51.5v-31L20.13 36z" fill="#2684fc"/>
420          <path d="M49.5 36l29.37 17.13v13.63a5.26 5.26 0 01-5.25 5.25h-48a5.26 5.26 0 01-5.25-5.25V51.5L33.73 43 49.5 36z" fill="#00ac47"/>
421          <path d="M78.88 18.88v34.25L49.5 36l29.38-17.12z" fill="#00832d"/>
422          <path d="M49.5 36v15.5H25.63a5.26 5.26 0 01-5.25-5.25V36h29.12z" fill="#00ac47"/>
423          <path d="M49.5 36V20.5h-24a5.26 5.26 0 00-5.25 5.25V36h29.25z" fill="#4285f4"/>
424        </svg>
425        <!-- Telemost (Yandex icon simplified) -->
426        <svg class="platform-logo" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none">
427          <rect width="24" height="24" rx="6" fill="#FC3F1D"/>
428          <path d="M13.32 7.5h-1.08c-1.68 0-2.64 1.02-2.64 2.34 0 1.5.66 2.22 1.98 3.12l1.08.72-3.18 4.82H7.2l2.82-4.26c-1.62-1.14-2.52-2.28-2.52-4.02C7.5 7.98 9.18 6 12.24 6h3.26v12.5h-2.18V7.5z" fill="white"/>
429        </svg>
430        <!-- Zoom -->
431        <svg class="platform-logo" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
432          <rect width="24" height="24" rx="5" fill="#2D8CFF"/>
433          <path d="M4.5 8.5a2 2 0 012-2h7a2 2 0 012 2v5a2 2 0 01-2 2h-7a2 2 0 01-2-2v-5z" fill="white"/>
434          <path d="M15.5 9.5l3.5-2v7l-3.5-2v-3z" fill="white"/>
435        </svg>
436        <!-- Teams -->
437        <svg class="platform-logo" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
438          <rect width="24" height="24" rx="5" fill="#5B5FC7"/>
439          <circle cx="16.5" cy="7.5" r="2" fill="white" opacity="0.8"/>
440          <path d="M14 11h5a1.5 1.5 0 011.5 1.5v3a1.5 1.5 0 01-1.5 1.5h-5v-6z" fill="white" opacity="0.6"/>
441          <circle cx="10" cy="7" r="2.5" fill="white"/>
442          <path d="M5 11.5h10a1.5 1.5 0 011.5 1.5v4a1.5 1.5 0 01-1.5 1.5H5a1.5 1.5 0 01-1.5-1.5v-4A1.5 1.5 0 015 11.5z" fill="white"/>
443        </svg>
444      </div>
445    </div>
446
447    <!-- Right: Hero mockup -->
448    <div class="lg:col-span-5 hero-enter hero-enter-d5">
449      <div class="hero-mockup bg-surface-container-lowest p-5 rounded-2xl editorial-shadow-lg">
450        <div class="rounded-xl overflow-hidden bg-surface-container-low border border-outline-variant/10">
451          <!-- Fake browser chrome -->
452          <div class="flex items-center gap-2 px-4 py-3 bg-surface-container border-b border-outline-variant/10">
453            <span class="w-2.5 h-2.5 rounded-full bg-outline-variant/30"></span>
454            <span class="w-2.5 h-2.5 rounded-full bg-outline-variant/30"></span>
455            <span class="w-2.5 h-2.5 rounded-full bg-outline-variant/30"></span>
456            <div class="ml-3 h-5 w-40 bg-surface-container-high rounded-md"></div>
457          </div>
458          <!-- Fake app content -->
459          <div class="p-6 space-y-5">
460            <!-- Meeting header -->
461            <div class="flex items-center gap-3">
462              <span class="material-symbols-outlined text-primary text-xl">auto_awesome</span>
463              <div class="h-3 w-36 bg-primary/10 rounded-full"></div>
464              <div class="ml-auto h-5 w-16 bg-primary/8 rounded-md"></div>
465            </div>
466            <!-- Summary block -->
467            <div class="space-y-2.5">
468              <div class="h-2.5 w-full bg-outline-variant/15 rounded-full"></div>
469              <div class="h-2.5 w-5/6 bg-outline-variant/10 rounded-full"></div>
470              <div class="h-2.5 w-4/5 bg-outline-variant/10 rounded-full"></div>
471            </div>
472            <!-- Action items -->
473            <div class="space-y-2 pt-2">
474              <div class="flex items-center gap-2">
475                <span class="material-symbols-outlined text-primary text-sm">check_circle</span>
476                <div class="h-2 w-48 bg-outline-variant/12 rounded-full"></div>
477              </div>
478              <div class="flex items-center gap-2">
479                <span class="material-symbols-outlined text-primary text-sm">check_circle</span>
480                <div class="h-2 w-40 bg-outline-variant/12 rounded-full"></div>
481              </div>
482              <div class="flex items-center gap-2">
483                <span class="material-symbols-outlined text-outline-variant/40 text-sm">radio_button_unchecked</span>
484                <div class="h-2 w-44 bg-outline-variant/8 rounded-full"></div>
485              </div>
486            </div>
487            <!-- Transcript teaser -->
488            <div class="pt-3 border-t border-outline-variant/10 space-y-2">
489              <div class="flex items-center gap-2">
490                <div class="w-6 h-6 rounded-full bg-primary/15 flex items-center justify-center text-[9px] font-bold text-primary">A</div>
491                <div class="h-2 w-52 bg-outline-variant/10 rounded-full"></div>
492              </div>
493              <div class="flex items-center gap-2">
494                <div class="w-6 h-6 rounded-full bg-tertiary/15 flex items-center justify-center text-[9px] font-bold text-tertiary">B</div>
495                <div class="h-2 w-44 bg-outline-variant/8 rounded-full"></div>
496              </div>
497            </div>
498          </div>
499        </div>
500      </div>
501    </div>
502  </div>
503</section>
504
505<!-- ============================================ -->
506<!-- WAVE DIVIDER (SVG from layout)               -->
507<!-- ============================================ -->
508<div class="wave-divider">
509  <div class="wave-divider-inner">
510    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" aria-hidden="true">
511      <line class="wave-baseline" x1="0" y1="60" x2="1200" y2="60" stroke="#e6d6cf" stroke-width="1" />
512      <path class="wave-path-1" d="M0 60 C150 60, 200 40, 300 60 S450 80, 600 60 S750 40, 900 60 S1050 80, 1200 60" fill="none" stroke="#c9b7af" stroke-width="1.2" stroke-linecap="round" />
513      <path class="wave-path-2" d="M0 60 C150 60, 200 50, 300 60 S450 70, 600 60 S750 50, 900 60 S1050 70, 1200 60" fill="none" stroke="#a97a6b" stroke-width="2" stroke-linecap="round" />
514      <path class="wave-path-3" d="M0 60 C150 60, 200 55, 300 60 S450 65, 600 60 S750 55, 900 60 S1050 65, 1200 60" fill="none" stroke="#e1c8bf" stroke-width="1" stroke-linecap="round" />
515    </svg>
516  </div>
517</div>
518
519<!-- ============================================ -->
520<!-- FEATURES / BENTO ROLES SECTION               -->
521<!-- ============================================ -->
522<section id="features" class="py-24 sm:py-32 bg-surface-container-low">
523  <div class="max-w-7xl mx-auto px-6">
524    <div class="reveal mb-16 max-w-2xl">
525      <h2 class="text-4xl sm:text-5xl font-headline mb-4 leading-tight" data-i18n="features_title">Tailored for your role.</h2>
526      <p class="text-on-surface-variant text-lg leading-relaxed" data-i18n="features_subtitle">Whether you are driving the vision or managing the execution, Debrif adapts to your needs.</p>
527    </div>
528
529    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
530      <!-- Team Members Card -->
531      <div class="reveal card-lift bg-surface-container-lowest p-10 rounded-2xl editorial-shadow flex flex-col justify-between group">
532        <div>
533          <span class="material-symbols-outlined text-primary text-3xl mb-6 block">group</span>
534          <h3 class="text-2xl font-headline mb-6" data-i18n="card_team_title">Team Members</h3>
535          <ul class="space-y-4">
536            <li class="flex items-start gap-3 text-on-surface-variant">
537              <span class="material-symbols-outlined text-primary text-base mt-0.5">check_circle</span>
538              <span data-i18n="card_team_1">Focus on the conversation, not taking notes.</span>
539            </li>
540            <li class="flex items-start gap-3 text-on-surface-variant">
541              <span class="material-symbols-outlined text-primary text-base mt-0.5">check_circle</span>
542              <span data-i18n="card_team_2">Instant summaries after every call.</span>
543            </li>
544            <li class="flex items-start gap-3 text-on-surface-variant">
545              <span class="material-symbols-outlined text-primary text-base mt-0.5">check_circle</span>
546              <span data-i18n="card_team_3">Searchable personal meeting history.</span>
547            </li>
548          </ul>
549        </div>
550        <button class="mt-12 text-primary font-label flex items-center gap-2 group-hover:translate-x-2 transition-transform duration-300">
551          <span data-i18n="learn_more">Learn more</span> <span class="material-symbols-outlined text-[20px]">arrow_forward</span>
552        </button>
553      </div>
554
555      <!-- Org Owners Card -->
556      <div class="reveal card-lift bg-surface-container-lowest p-10 rounded-2xl editorial-shadow flex flex-col justify-between group" style="transition-delay: 0.1s">
557        <div>
558          <span class="material-symbols-outlined text-primary text-3xl mb-6 block">corporate_fare</span>
559          <h3 class="text-2xl font-headline mb-6" data-i18n="card_org_title">Organization Owners</h3>
560          <ul class="space-y-4">
561            <li class="flex items-start gap-3 text-on-surface-variant">
562              <span class="material-symbols-outlined text-primary text-base mt-0.5">check_circle</span>
563              <span data-i18n="card_org_1">Centralized knowledge base for the whole company.</span>
564            </li>
565            <li class="flex items-start gap-3 text-on-surface-variant">
566              <span class="material-symbols-outlined text-primary text-base mt-0.5">check_circle</span>
567              <span data-i18n="card_org_2">Security-first data processing and storage.</span>
568            </li>
569            <li class="flex items-start gap-3 text-on-surface-variant">
570              <span class="material-symbols-outlined text-primary text-base mt-0.5">check_circle</span>
571              <span data-i18n="card_org_3">Team-wide productivity insights and analytics.</span>
572            </li>
573          </ul>
574        </div>
575        <button class="mt-12 text-primary font-label flex items-center gap-2 group-hover:translate-x-2 transition-transform duration-300">
576          <span data-i18n="learn_more">Learn more</span> <span class="material-symbols-outlined text-[20px]">arrow_forward</span>
577        </button>
578      </div>
579    </div>
580  </div>
581</section>
582
583<!-- ============================================ -->
584<!-- HOW IT WORKS — EDITORIAL STEPS               -->
585<!-- ============================================ -->
586<section id="how-it-works" class="py-28 sm:py-36">
587  <div class="max-w-4xl mx-auto px-6">
588    <div class="reveal text-center mb-24">
589      <h2 class="text-4xl sm:text-5xl font-headline mb-6" data-i18n="how_title">How it Works</h2>
590      <p class="text-on-surface-variant text-lg" data-i18n="how_subtitle">Three steps to a clearer workflow.</p>
591    </div>
592
593    <div class="space-y-20 sm:space-y-28">
594      <!-- Step 1 -->
595      <div class="reveal flex flex-col md:flex-row items-center gap-12 md:gap-16">
596        <div class="flex-1">
597          <span class="step-number text-2xl mb-3 block" data-i18n="step1_num">01. Install</span>
598          <h3 class="text-3xl font-headline mb-4" data-i18n="step1_title">Install Extension</h3>
599          <p class="text-on-surface-variant leading-relaxed mb-6" data-i18n="step1_desc">Install the Chrome plugin in one click from the Chrome Web Store. No configuration needed — it works with Google Meet, Telemost, Zoom and Teams out of the box.</p>
600          <a href="https://chromewebstore.google.com/detail/debrif-%E2%80%94-meeting-recorder/bohfkjfgffffiegnalmjgigbjaoeekgd"
601             target="_blank" rel="noopener"
602             class="primary-gradient text-on-primary px-7 py-3 rounded-full text-base font-label editorial-shadow transition-all duration-200 hover:opacity-90 active:scale-95 inline-flex items-center gap-2">
603            <span class="material-symbols-outlined" style="font-size:20px;">shopping_bag</span>
604            <span data-i18n="step1_cta">Install from Chrome Web Store</span>
605          </a>
606        </div>
607        <div class="flex-1 aspect-video rounded-2xl flex items-center justify-center bg-surface-container-low border border-outline-variant/10">
608          <div class="step-icon-wrap">
609            <span class="material-symbols-outlined text-5xl text-primary/60">extension</span>
610          </div>
611        </div>
612      </div>
613
614      <!-- Step 2 -->
615      <div class="reveal flex flex-col md:flex-row-reverse items-center gap-12 md:gap-16">
616        <div class="flex-1">
617          <span class="step-number text-2xl mb-3 block" data-i18n="step2_num">02. Record</span>
618          <h3 class="text-3xl font-headline mb-4" data-i18n="step2_title">Record &amp; Transcribe</h3>
619          <p class="text-on-surface-variant leading-relaxed" data-i18n="step2_desc">Start your meeting and the plugin will offer to record. Audio is transcribed with speaker identification and multilingual support.</p>
620        </div>
621        <div class="flex-1 aspect-video rounded-2xl flex items-center justify-center bg-surface-container-low border border-outline-variant/10">
622          <div class="step-icon-wrap">
623            <span class="material-symbols-outlined text-5xl text-primary/60">videocam</span>
624          </div>
625        </div>
626      </div>
627
628      <!-- Step 3 -->
629      <div class="reveal flex flex-col md:flex-row items-center gap-12 md:gap-16">
630        <div class="flex-1">
631          <span class="step-number text-2xl mb-3 block" data-i18n="step3_num">03. Review</span>
632          <h3 class="text-3xl font-headline mb-4" data-i18n="step3_title">Get Insights</h3>
633          <p class="text-on-surface-variant leading-relaxed" data-i18n="step3_desc">After the call, access your summary in the portal or get it instantly in Telegram. Action items are extracted automatically.</p>
634        </div>
635        <div class="flex-1 aspect-video rounded-2xl flex items-center justify-center bg-surface-container-low border border-outline-variant/10">
636          <div class="step-icon-wrap">
637            <span class="material-symbols-outlined text-5xl text-primary/60">insights</span>
638          </div>
639        </div>
640      </div>
641    </div>
642  </div>
643</section>
644
645<!-- ============================================ -->
646<!-- CTA SECTION                                  -->
647<!-- ============================================ -->
648<section class="py-20 sm:py-24">
649  <div class="max-w-7xl mx-auto px-6">
650    <div class="reveal relative bg-primary-fixed/20 rounded-3xl p-12 sm:p-16 md:p-20 text-center overflow-hidden">
651      <div class="relative z-10">
652        <h2 class="text-3xl sm:text-4xl md:text-5xl font-headline mb-8 max-w-2xl mx-auto leading-tight" data-i18n="cta_title">
653          Ready to make your meetings work for you?
654        </h2>
655        <div class="flex flex-wrap justify-center gap-4">
656          <a href="/auth/signup/redirect" class="primary-gradient text-on-primary px-10 py-4 rounded-full text-lg font-label editorial-shadow transition-all duration-200 hover:scale-[1.03] active:scale-95 inline-block" data-i18n="cta_getstarted">
657            Get Started
658          </a>
659          <a href="mailto:[email protected]" class="bg-surface text-on-surface px-10 py-4 rounded-full text-lg font-label transition-colors duration-200 hover:bg-surface-container-low inline-block" data-i18n="cta_contact">
660            Contact Sales
661          </a>
662        </div>
663      </div>
664
665      <!-- Decorative blobs -->
666      <div class="cta-glow absolute top-0 right-0 w-80 sm:w-96 h-80 sm:h-96 bg-primary/5 rounded-full blur-3xl -mr-40 -mt-40"></div>
667      <div class="cta-glow absolute bottom-0 left-0 w-80 sm:w-96 h-80 sm:h-96 bg-primary/5 rounded-full blur-3xl -ml-40 -mb-40" style="animation-delay: -3s;"></div>
668      <div class="absolute inset-0 pointer-events-none dot-texture opacity-40"></div>
669    </div>
670  </div>
671</section>
672
673</main>
674
675<!-- ============================================ -->
676<!-- FOOTER                                       -->
677<!-- ============================================ -->
678<footer class="bg-surface-container-low py-16 sm:py-20">
679  <div class="max-w-7xl mx-auto px-6">
680    <div class="flex flex-col md:flex-row justify-between items-start gap-12 mb-16">
681      <div class="max-w-xs">
682        <div class="flex items-center gap-3 mb-4">
683          <svg width="28" height="28" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
684            <path d="M14 30 L52 30" stroke="#934931" stroke-width="6" stroke-linecap="round" fill="none"/>
685            <path d="M20 48 L52 48" stroke="#934931" stroke-width="6" stroke-linecap="round" fill="none"/>
686            <path d="M28 66 L52 66" stroke="#934931" stroke-width="6" stroke-linecap="round" fill="none"/>
687            <circle cx="72" cy="48" r="11" fill="#934931"/>
688          </svg>
689          <span class="text-2xl font-headline font-semibold text-primary">Debrif</span>
690        </div>
691        <p class="text-on-surface-variant leading-relaxed" data-i18n="footer_tagline">AI-powered meeting intelligence for modern, focused teams.</p>
692      </div>
693      <div class="grid grid-cols-2 sm:grid-cols-4 gap-10 sm:gap-12">
694        <div class="flex flex-col gap-3">
695          <span class="font-label text-[11px] uppercase tracking-[0.15em] text-on-surface-variant/50 mb-1" data-i18n="footer_product">Product</span>
696          <a class="text-sm text-on-surface-variant hover:text-primary transition-colors duration-200" href="#features" data-i18n="nav_features">Features</a>
697          <a class="text-sm text-on-surface-variant hover:text-primary transition-colors duration-200" href="#pricing" data-i18n="nav_pricing">Pricing</a>
698          <a class="text-sm text-on-surface-variant hover:text-primary transition-colors duration-200" href="#" data-i18n="footer_changelog">Changelog</a>
699        </div>
700        <div class="flex flex-col gap-3">
701          <span class="font-label text-[11px] uppercase tracking-[0.15em] text-on-surface-variant/50 mb-1" data-i18n="footer_company">Company</span>
702          <a class="text-sm text-on-surface-variant hover:text-primary transition-colors duration-200" href="#" data-i18n="footer_about">About</a>
703          <a class="text-sm text-on-surface-variant hover:text-primary transition-colors duration-200" href="mailto:[email protected]" data-i18n="footer_contact">Contact</a>
704        </div>
705        <div class="flex flex-col gap-3">
706          <span class="font-label text-[11px] uppercase tracking-[0.15em] text-on-surface-variant/50 mb-1" data-i18n="footer_legal">Legal</span>
707          <a class="text-sm text-on-surface-variant hover:text-primary transition-colors duration-200" href="/privacy.html" data-i18n="footer_privacy">Privacy</a>
708          <a class="text-sm text-on-surface-variant hover:text-primary transition-colors duration-200" href="#" data-i18n="footer_terms">Terms</a>
709          <a class="text-sm text-on-surface-variant hover:text-primary transition-colors duration-200" href="#" data-i18n="footer_cookies">Cookie Policy</a>
710        </div>
711        <div class="flex flex-col gap-3">
712          <span class="font-label text-[11px] uppercase tracking-[0.15em] text-on-surface-variant/50 mb-1" data-i18n="footer_social">Social</span>
713          <a class="text-sm text-on-surface-variant hover:text-primary transition-colors duration-200" href="#">Twitter</a>
714          <a class="text-sm text-on-surface-variant hover:text-primary transition-colors duration-200" href="#">LinkedIn</a>
715          <a class="text-sm text-on-surface-variant hover:text-primary transition-colors duration-200" href="#">Telegram</a>
716        </div>
717      </div>
718    </div>
719
720    <div class="pt-8 border-t border-outline-variant/10 flex flex-col sm:flex-row justify-between items-center gap-4">
721      <span class="text-sm text-on-surface-variant/50">&copy; 2026 Debrif AI</span>
722      <div class="flex gap-6">
723        <button onclick="setLang('en')" class="text-xs text-on-surface-variant/40 hover:text-on-surface-variant transition-colors footer-lang" data-footer-lang="en">English</button>
724        <button onclick="setLang('ru')" class="text-xs text-on-surface-variant/40 hover:text-on-surface-variant transition-colors footer-lang" data-footer-lang="ru">Русский</button>
725      </div>
726    </div>
727  </div>
728</footer>
729
730<!-- ============================================ -->
731<!-- SCRIPTS                                      -->
732<!-- ============================================ -->
733<script>
734(function() {
735  // --- Translations ---
736  var T = {
737    en: {
738      nav_features: "Features",
739      nav_how: "How it Works",
740      nav_pricing: "Pricing",
741      nav_signin: "Sign In",
742      nav_getstarted: "Get Started",
743      hero_line1: "The quiet intelligence",
744      hero_line2: "for your",
745      hero_accent: "daily meetings.",
746      hero_subtitle: "Automate summaries, extract action items, and maintain a searchable library of all your video conversations across Google Meet, Telemost, Zoom and Teams.",
747      cta_getstarted: "Get Started",
748      cta_demo: "View Demo",
749      integrations_label: "Integrations",
750      features_title: "Tailored for your role.",
751      features_subtitle: "Whether you are driving the vision or managing the execution, Debrif adapts to your needs.",
752      card_team_title: "Team Members",
753      card_team_1: "Focus on the conversation, not taking notes.",
754      card_team_2: "Instant summaries after every call.",
755      card_team_3: "Searchable personal meeting history.",
756      card_org_title: "Organization Owners",
757      card_org_1: "Centralized knowledge base for the whole company.",
758      card_org_2: "Security-first data processing and storage.",
759      card_org_3: "Team-wide productivity insights and analytics.",
760      learn_more: "Learn more",
761      how_title: "How it Works",
762      how_subtitle: "Three steps to a clearer workflow.",
763      step1_num: "01. Install",
764      step1_title: "Install Extension",
765      step1_desc: "Install the Chrome plugin in one click from the Chrome Web Store. No configuration needed \u2014 it works with Google Meet, Telemost, Zoom and Teams out of the box.",
766      step1_cta: "Install from Chrome Web Store",
767      step2_num: "02. Record",
768      step2_title: "Record & Transcribe",
769      step2_desc: "Start your meeting and the plugin will offer to record. Audio is transcribed with speaker identification and multilingual support.",
770      step3_num: "03. Review",
771      step3_title: "Get Insights",
772      step3_desc: "After the call, access your summary in the portal or get it instantly in Telegram. Action items are extracted automatically.",
773      cta_title: "Ready to make your meetings work for you?",
774      cta_contact: "Contact Sales",
775      footer_tagline: "AI-powered meeting intelligence for modern, focused teams.",
776      footer_product: "Product",
777      footer_company: "Company",
778      footer_legal: "Legal",
779      footer_social: "Social",
780      footer_changelog: "Changelog",
781      footer_about: "About",
782      footer_contact: "Contact",
783      footer_privacy: "Privacy",
784      footer_terms: "Terms",
785      footer_cookies: "Cookie Policy",
786      meta_title: "Debrif \u2014 AI Meeting Intelligence",
787      meta_description: "Automate summaries, extract action items, and maintain a searchable library of all your video conversations across Google Meet, Telemost, Zoom and Teams."
788    },
789    ru: {
790      nav_features: "\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438",
791      nav_how: "\u041a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442",
792      nav_pricing: "\u0426\u0435\u043d\u044b",
793      nav_signin: "\u0412\u043e\u0439\u0442\u0438",
794      nav_getstarted: "\u041d\u0430\u0447\u0430\u0442\u044c",
795      hero_line1: "\u0422\u0438\u0445\u0438\u0439 \u0438\u043d\u0442\u0435\u043b\u043b\u0435\u043a\u0442",
796      hero_line2: "\u0434\u043b\u044f \u0432\u0430\u0448\u0438\u0445",
797      hero_accent: "\u0435\u0436\u0435\u0434\u043d\u0435\u0432\u043d\u044b\u0445 \u0432\u0441\u0442\u0440\u0435\u0447.",
798      hero_subtitle: "\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0430\u043c\u043c\u0430\u0440\u0438, \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u0435 \u0437\u0430\u0434\u0430\u0447 \u0438 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0432\u0441\u0435\u0445 \u0432\u0430\u0448\u0438\u0445 \u0432\u0438\u0434\u0435\u043e\u0437\u0432\u043e\u043d\u043a\u043e\u0432 \u0432 Google Meet, \u0422\u0435\u043b\u0435\u043c\u043e\u0441\u0442, Zoom \u0438 Teams.",
799      cta_getstarted: "\u041d\u0430\u0447\u0430\u0442\u044c",
800      cta_demo: "\u0421\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0434\u0435\u043c\u043e",
801      integrations_label: "\u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438",
802      features_title: "\u0410\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u043f\u043e\u0434 \u0432\u0430\u0448\u0443 \u0440\u043e\u043b\u044c.",
803      features_subtitle: "\u0423\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0435 \u043b\u0438 \u0432\u044b \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0435\u0439 \u0438\u043b\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439 \u2014 Debrif \u043f\u043e\u0434\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0434 \u0432\u0430\u0448\u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u0438.",
804      card_team_title: "\u0427\u043b\u0435\u043d\u044b \u043a\u043e\u043c\u0430\u043d\u0434\u044b",
805      card_team_1: "\u0424\u043e\u043a\u0443\u0441 \u043d\u0430 \u0440\u0430\u0437\u0433\u043e\u0432\u043e\u0440\u0435, \u0430 \u043d\u0435 \u043d\u0430 \u0437\u0430\u043f\u0438\u0441\u044f\u0445.",
806      card_team_2: "\u041c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u044b\u0435 \u0441\u0430\u043c\u043c\u0430\u0440\u0438 \u043f\u043e\u0441\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0437\u0432\u043e\u043d\u043a\u0430.",
807      card_team_3: "\u041f\u043e\u0438\u0441\u043a\u043e\u0432\u0430\u044f \u0438\u0441\u0442\u043e\u0440\u0438\u044f \u0432\u0441\u0442\u0440\u0435\u0447.",
808      card_org_title: "\u0412\u043b\u0430\u0434\u0435\u043b\u044c\u0446\u044b \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438",
809      card_org_1: "\u0415\u0434\u0438\u043d\u0430\u044f \u0431\u0430\u0437\u0430 \u0437\u043d\u0430\u043d\u0438\u0439 \u0434\u043b\u044f \u0432\u0441\u0435\u0439 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438.",
810      card_org_2: "\u0411\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u043c\u0435\u0441\u0442\u0435.",
811      card_org_3: "\u0410\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0430 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u044b.",
812      learn_more: "\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435",
813      how_title: "\u041a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442",
814      how_subtitle: "\u0422\u0440\u0438 \u0448\u0430\u0433\u0430 \u043a \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u0435.",
815      step1_num: "01. \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430",
816      step1_title: "\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435",
817      step1_desc: "Установите плагин для Chrome в один клик из Chrome Web Store. Никакой настройки — плагин работает с Google Meet, Телемост, Zoom и Teams сразу.",
818      step1_cta: "Установить из Chrome Web Store",
819      step2_num: "02. \u0417\u0430\u043f\u0438\u0441\u044c",
820      step2_title: "\u0417\u0430\u043f\u0438\u0441\u044c \u0438 \u0442\u0440\u0430\u043d\u0441\u043a\u0440\u0438\u043f\u0446\u0438\u044f",
821      step2_desc: "\u041d\u0430\u0447\u043d\u0438\u0442\u0435 \u0432\u0441\u0442\u0440\u0435\u0447\u0443, \u0438 \u043f\u043b\u0430\u0433\u0438\u043d \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442 \u0437\u0430\u043f\u0438\u0441\u044c. \u0410\u0443\u0434\u0438\u043e \u0442\u0440\u0430\u043d\u0441\u043a\u0440\u0438\u0431\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0435\u0439 \u0441\u043f\u0438\u043a\u0435\u0440\u043e\u0432 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u044f\u0437\u044b\u043a\u043e\u0432.",
822      step3_num: "03. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442",
823      step3_title: "\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u0438\u043d\u0441\u0430\u0439\u0442\u044b",
824      step3_desc: "\u041f\u043e\u0441\u043b\u0435 \u0437\u0432\u043e\u043d\u043a\u0430 \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0441\u0430\u043c\u043c\u0430\u0440\u0438 \u0432 \u043f\u043e\u0440\u0442\u0430\u043b\u0435 \u0438\u043b\u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u0435\u0433\u043e \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u0432 Telegram. \u0417\u0430\u0434\u0430\u0447\u0438 \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u044e\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438.",
825      cta_title: "\u0413\u043e\u0442\u043e\u0432\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u0442\u0440\u0435\u0447\u0438 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c\u0438?",
826      cta_contact: "\u0421\u0432\u044f\u0437\u0430\u0442\u044c\u0441\u044f \u0441 \u043d\u0430\u043c\u0438",
827      footer_tagline: "AI-\u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0430 \u0432\u0441\u0442\u0440\u0435\u0447 \u0434\u043b\u044f \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u0430\u043d\u0434.",
828      footer_product: "\u041f\u0440\u043e\u0434\u0443\u043a\u0442",
829      footer_company: "\u041a\u043e\u043c\u043f\u0430\u043d\u0438\u044f",
830      footer_legal: "\u042e\u0440\u0438\u0434\u0438\u0447\u0435\u0441\u043a\u043e\u0435",
831      footer_social: "\u0421\u043e\u0446\u0441\u0435\u0442\u0438",
832      footer_changelog: "\u0418\u0441\u0442\u043e\u0440\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439",
833      footer_about: "\u041e \u043d\u0430\u0441",
834      footer_contact: "\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u044b",
835      footer_privacy: "\u041a\u043e\u043d\u0444\u0438\u0434\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c",
836      footer_terms: "\u0423\u0441\u043b\u043e\u0432\u0438\u044f",
837      footer_cookies: "\u041f\u043e\u043b\u0438\u0442\u0438\u043a\u0430 cookie",
838      meta_title: "Debrif \u2014 AI-\u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0430 \u0432\u0441\u0442\u0440\u0435\u0447",
839      meta_description: "\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0430\u043c\u043c\u0430\u0440\u0438, \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u0435 \u0437\u0430\u0434\u0430\u0447 \u0438 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0432\u0441\u0435\u0445 \u0432\u0430\u0448\u0438\u0445 \u0432\u0438\u0434\u0435\u043e\u0437\u0432\u043e\u043d\u043a\u043e\u0432 \u0432 Google Meet, \u0422\u0435\u043b\u0435\u043c\u043e\u0441\u0442, Zoom \u0438 Teams."
840    }
841  };
842
843  function setLang(lang) {
844    if (!T[lang]) return;
845    var root = document.documentElement;
846    root.setAttribute('lang', lang);
847    root.setAttribute('data-lang', lang);
848
849    // Update text nodes via textContent (safe, no XSS risk)
850    document.querySelectorAll('[data-i18n]').forEach(function(el) {
851      var key = el.getAttribute('data-i18n');
852      if (T[lang][key] !== undefined) el.textContent = T[lang][key];
853    });
854
855    // Update meta
856    document.title = T[lang].meta_title;
857    var metaDesc = document.querySelector('meta[name="description"]');
858    if (metaDesc) metaDesc.setAttribute('content', T[lang].meta_description);
859
860    // Update toggle highlight
861    document.querySelector('.lang-en').classList.toggle('lang-active', lang === 'en');
862    document.querySelector('.lang-ru').classList.toggle('lang-active', lang === 'ru');
863
864    // Update footer lang buttons
865    document.querySelectorAll('.footer-lang').forEach(function(btn
865) {
866      btn.style.fontWeight = btn.getAttribute('data-footer-lang') === lang ? '600' : '';
867      btn.style.color = btn.getAttribute('data-footer-lang') === lang ? '#934931' : '';
868    });
869
870    // Save preference
871    try { localStorage.setItem('debrif_lang', lang); } catch(e) {}
872  }
873
874  // Expose globally for footer buttons
875  window.setLang = setLang;
876
877  // --- Language toggle button ---
878  document.getElementById('lang-toggle').addEventListener('click', function() {
879    var current = document.documentElement.getAttribute('data-lang') || 'en';
880    setLang(current === 'en' ? 'ru' : 'en');
881  });
882
883  // --- Init language from localStorage or browser ---
884  var saved = null;
885  try { saved = localStorage.getItem('debrif_lang'); } catch(e) {}
886  if (!saved) {
887    var browserLang = (navigator.language || navigator.userLanguage || 'en').toLowerCase();
888    saved = browserLang.startsWith('ru') ? 'ru' : 'en';
889  }
890  setLang(saved);
891
892  // --- Scroll reveal ---
893  var reveals = document.querySelectorAll('.reveal');
894  var observer = new IntersectionObserver(function(entries) {
895    entries.forEach(function(entry) {
896      if (entry.isIntersecting) {
897        entry.target.classList.add('visible');
898        observer.unobserve(entry.target);
899      }
900    });
901  }, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });
902  reveals.forEach(function(el) { observer.observe(el); });
903
904  // --- Nav shadow on scroll ---
905  var nav = document.getElementById('main-nav');
906  var ticking = false;
907  window.addEventListener('scroll', function() {
908    if (!ticking) {
909      requestAnimationFrame(function() {
910        nav.classList.toggle('nav-scrolled', window.scrollY > 20);
911        ticking = false;
912      });
913      ticking = true;
914    }
915  });
916
917  // --- Mobile menu toggle ---
918  var toggle = document.getElementById('mobile-toggle');
919  var menu = document.getElementById('mobile-menu');
920  toggle.addEventListener('click', function() {
921    menu.classList.toggle('open');
922  });
923
924  // Close mobile menu when clicking a link
925  menu.querySelectorAll('a').forEach(function(a) {
926    a.addEventListener('click', function() { menu.classList.remove('open'); });
927  });
928})();
929</script>
929
930
931</body>
932</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.