:root {
  --ink: #0b2035; --ink-2: #143d5a; --blue: #1676ef; --blue-d: #0862d4;
  --paper: #f4f8fb; --white: #fff; --text: #172c3c; --muted: #617585;
  --line: #dbe6ed; --green: #1aa66b; --wrap: 1160px; --radius: 18px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--text); background: var(--white); font: 16px/1.62 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; }
.wrap { width: min(var(--wrap), calc(100% - 40px)); margin: auto; }

/* header */
.site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid rgba(220,230,237,.9); background: rgba(255,255,255,.91); backdrop-filter: blur(14px); }
.navigation { display: flex; align-items: center; gap: 32px; height: 76px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 20px; font-weight: 800; letter-spacing: -.045em; white-space: nowrap; }
.logo > span:last-child > span { color: #8092a0; font-weight: 500; }
.logo-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 15px; letter-spacing: 0; }
nav { display: flex; gap: 25px; margin-left: auto; }
nav a { color: #42596b; font-size: 14px; font-weight: 650; }
nav a:hover { color: var(--blue); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 21px; border: 1px solid transparent; border-radius: 10px; font-size: 15px; font-weight: 750; cursor: pointer; transition: transform .18s, box-shadow .18s, background .18s, border-color .18s; }
.button:hover { transform: translateY(-2px); }
.button span { font-size: 19px; line-height: 1; }
.button-primary { color: #fff; background: var(--blue); box-shadow: 0 9px 22px rgba(22,118,239,.24); }
.button-primary:hover { background: var(--blue-d); box-shadow: 0 12px 25px rgba(22,118,239,.32); }
.button-small { min-height: 40px; padding: 0 15px; font-size: 14px; }
.button-outline { color: var(--ink); border-color: #cbd9e3; background: #fff; }
.button-outline:hover { color: var(--blue); border-color: var(--blue); }
.button-light { color: var(--ink); background: #fff; box-shadow: 0 8px 26px rgba(0,0,0,.13); }

/* hero */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: 86px 0 0; color: #fff; background: radial-gradient(circle at 75% 8%, #1e628e 0, transparent 30%), linear-gradient(120deg, #071a2b, #0a2c45 58%, #0f4a6e); }
.glow { position: absolute; z-index: -1; border-radius: 50%; opacity: .42; filter: blur(8px); }
.glow-left { top: -160px; left: 31%; width: 310px; height: 310px; background: #187dff; }
.glow-right { top: 155px; right: -205px; width: 470px; height: 470px; background: #21a9bd; }
.hero-grid { display: grid; grid-template-columns: 46% 54%; align-items: center; min-height: 495px; }
.hero-copy { padding-bottom: 74px; }
.eyebrow, .overline { display: inline-flex; align-items: center; gap: 8px; color: #a2c8e5; font-size: 11px; font-weight: 800; letter-spacing: .12em; line-height: 1; text-transform: uppercase; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: #62e2ae; box-shadow: 0 0 0 5px rgba(98,226,174,.14); }
.hero h1 { max-width: 675px; margin: 21px 0 20px; font-size: clamp(39px,4.5vw,64px); line-height: 1.04; letter-spacing: -.055em; }
.hero h1 em { color: #89ceff; font-style: normal; }
.hero-lead { max-width: 535px; margin: 0; color: #c0d3e0; font-size: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 32px; }
.hero-notes { display: flex; align-items: center; gap: 12px; margin-top: 29px; color: #b7cbd9; font-size: 13px; }
.hero-notes b { color: #fff; }.hero-notes i { width: 4px; height: 4px; border-radius: 50%; background: #75a1ba; }
.hero-visual { position: relative; align-self: end; padding: 3px 0 45px 23px; }
.excel-window { position: relative; z-index: 2; overflow: hidden; border: 1px solid rgba(255,255,255,.3); border-radius: 14px; background: #edf5f8; box-shadow: 0 30px 55px rgba(0,9,18,.35); transform: perspective(1200px) rotateY(-3deg) rotateX(1deg); transform-origin: bottom center; }
.window-top { display: flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px; color: #6b8191; background: #f8fafc; font-size: 9px; }
.window-top > span { width: 7px; height: 7px; border-radius: 50%; background: #e0b54a; }.window-top > span:nth-child(2) { background: #e3756a; }.window-top > span:nth-child(3) { background: #72b792; }
.window-top p { margin: auto; letter-spacing: .03em; }.window-top b { color: #8fa1ad; font-size: 13px; }.excel-window img { width: 100%; }
.formula-pill { position: absolute; right: 9%; bottom: 8%; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px; color: #3a5367; background: #fff; box-shadow: 0 9px 21px rgba(15,34,51,.18); font-size: 11px; }
.formula-pill b { color: var(--blue); }.formula-pill strong { color: var(--green); }
.floating-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 13px; color: #294659; border: 1px solid rgba(255,255,255,.6); border-radius: 11px; background: rgba(255,255,255,.97); box-shadow: 0 13px 30px rgba(0,15,30,.21); line-height: 1.2; }
.floating-card > span { display: grid; place-items: center; flex: 0 0 25px; width: 25px; height: 25px; border-radius: 7px; color: #097449; background: #dcf6e9; font-size: 12px; font-weight: 800; }
.floating-card b { display: block; font-size: 11px; }.floating-card small { display: block; max-width: 126px; margin-top: 3px; color: #748998; font-size: 9px; }
.top-card { top: 18%; left: -17px; }.bottom-card { right: -13px; bottom: 18px; }.bottom-card > span { color: #075cb9; background: #e4f1ff; }
.facts { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4,1fr); padding: 22px 0; border-top: 1px solid rgba(255,255,255,.16); }
.facts > div { display: flex; align-items: center; justify-content: center; gap: 12px; border-right: 1px solid rgba(255,255,255,.16); }.facts > div:last-child { border: 0; }
.facts strong { color: #91ceff; font-size: 30px; line-height: 1; letter-spacing: -.05em; }.facts span { color: #aec4d3; font-size: 11px; line-height: 1.3; }
.trust-strip { background: #e9f4fd; color: #537289; }.trust-strip .wrap { display: flex; align-items: center; gap: 23px; min-height: 66px; }.trust-strip p { margin: 0 auto 0 0; font-size: 14px; }.trust-strip b { color: var(--ink-2); }.trust-strip span { color: #52718a; font-size: 11px; font-weight: 800; letter-spacing: .06em; white-space: nowrap; }

/* universal section elements */
.section { padding: 112px 0; }.heading { margin-bottom: 48px; }.heading h2, .contact-card h2, .download h2 { margin: 13px 0 0; color: var(--ink); font-size: clamp(31px,4vw,49px); line-height: 1.08; letter-spacing: -.052em; }.heading p { color: var(--muted); font-size: 17px; }
.overline { color: #1373ce; }.heading.split { display: grid; grid-template-columns: 1fr 390px; gap: 70px; align-items: end; }.heading.split p { margin: 0 0 3px; }.heading.centered { max-width: 675px; margin-right: auto; margin-left: auto; text-align: center; }.heading.centered p { max-width: 530px; margin: 15px auto 0; }

/* features */
.feature-grid { display: grid; grid-template-rows: 1fr 1fr; grid-template-columns: 1.36fr 1fr 1fr; gap: 16px; }
.feature-card { position: relative; min-height: 228px; overflow: hidden; padding: 27px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: transform .22s, box-shadow .22s; }
.feature-card:hover { z-index: 1; transform: translateY(-4px); box-shadow: 0 15px 35px rgba(15,42,61,.1); }
.feature-card.large { grid-row: span 2; padding: 32px; border: 0; color: #fff; background: linear-gradient(145deg,#0b2942,#114f76); }
.index { position: absolute; top: 23px; right: 25px; color: #8ca5b6; font-size: 12px; font-weight: 800; }.large .index { color: #8bb5d4; }
.feature-icon { display: grid; place-items: center; width: 39px; height: 39px; margin-bottom: 37px; border-radius: 10px; color: #1273d2; background: #e9f4ff; font-size: 21px; font-weight: 800; }.large .feature-icon { color: #6dceff; background: rgba(134,208,255,.13); }
.feature-card h3 { margin: 0 0 7px; color: var(--ink); font-size: 19px; letter-spacing: -.025em; }.feature-card p { max-width: 350px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.58; }.large h3 { color: #fff; font-size: 25px; }.large p { color: #c3d7e6; font-size: 15px; }
.formula-example { position: absolute; right: 24px; bottom: 25px; display: flex; gap: 9px; align-items: center; padding: 8px 10px; border-radius: 7px; color: #adcce1; background: rgba(1,16,28,.26); font-size: 10px; }.formula-example code { color: #78cdff; }

/* workflow */
.workflow { background: var(--paper); }.steps { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 68px; }.steps::before { position: absolute; top: 76px; right: 18%; left: 18%; border-top: 1px dashed #a6bdce; content: ""; }
.step { position: relative; text-align: center; }.step-number { position: relative; z-index: 1; display: grid; place-items: center; width: 29px; height: 29px; margin: 0 auto 21px; border-radius: 50%; color: #fff; background: var(--ink-2); box-shadow: 0 0 0 6px var(--paper); font-size: 10px; font-weight: 800; }
.step-art { display: flex; align-items: center; justify-content: center; width: 124px; height: 96px; margin: 0 auto 23px; border: 1px solid #cbdce9; border-radius: 13px; color: var(--blue); background: #fff; box-shadow: 0 7px 17px rgba(26,65,94,.06); }
.files-art { position: relative; gap: 5px; }.files-art span { display: grid; place-items: center; width: 45px; height: 55px; border: 1px solid #b9cfdf; border-radius: 5px; color: #46718e; font-size: 11px; font-weight: 800; }.files-art span:first-child { transform: translateY(-5px); }.files-art span:last-child { transform: translateY(5px); }
.calculate-art { position: relative; gap: 6px; }.calculate-art i { width: 15px; height: 15px; border-radius: 3px; background: #dcecff; }.calculate-art b { position: absolute; display: grid; place-items: center; width: 41px; height: 41px; border-radius: 50%; color: #fff; background: var(--blue); font-size: 16px; }.result-art { border-color: #a9ddc8; color: #1d9b69; background: #f4fdf8; font-size: 49px; font-weight: 300; }
.step h3 { margin: 0 0 7px; color: var(--ink); font-size: 19px; }.step p { max-width: 285px; margin: auto; color: var(--muted); font-size: 14px; }

/* showcase */
.showcase { color: #fff; background: var(--ink); }.showcase-grid { display: grid; grid-template-columns: 38% 62%; gap: 60px; align-items: center; }.showcase .overline { color: #81c7ff; }.showcase h2 { margin: 14px 0 17px; font-size: clamp(32px,4vw,48px); line-height: 1.08; letter-spacing: -.05em; }.showcase-copy > p { max-width: 385px; margin: 0 0 27px; color: #b6c9d6; }
.screen-tabs { display: flex; flex-wrap: wrap; gap: 7px; }.screen-tab { padding: 8px 11px; border: 1px solid #33536a; border-radius: 7px; color: #a7bfce; background: transparent; font-size: 12px; font-weight: 700; cursor: pointer; transition: .18s; }.screen-tab:hover, .screen-tab.active { border-color: #5fbcfb; color: #fff; background: #164867; }
.screen-copy { min-height: 75px; margin-top: 19px; padding-top: 13px; border-top: 1px solid #28465c; }.screen-copy b { color: #fff; font-size: 14px; }.screen-copy p { margin: 4px 0 0; color: #9db5c6; font-size: 13px; line-height: 1.5; }
.preview { position: relative; overflow: hidden; margin: 0; border: 1px solid #335369; border-radius: 12px; background: #dfeff5; box-shadow: 0 24px 45px rgba(0,0,0,.25); }.preview img { width: 100%; min-height: 350px; object-fit: cover; object-position: top; transition: opacity .12s ease; }.preview img.changing { opacity: .3; }
.preview figcaption { position: absolute; right: 0; bottom: 0; left: 0; display: flex; align-items: center; gap: 8px; padding: 13px 17px; color: #d5e7f2; background: linear-gradient(transparent,rgba(5,24,39,.85)); font-size: 11px; }.preview figcaption span { width: 6px; height: 6px; border-radius: 50%; background: #5cddaa; }
.zoom-button { position: absolute; top: 14px; right: 14px; z-index: 1; padding: 7px 10px; border: 0; border-radius: 7px; color: #426075; background: rgba(255,255,255,.94); font-size: 11px; font-weight: 800; cursor: pointer; opacity: 0; transform: translateY(-4px); transition: .18s; }.preview:hover .zoom-button { opacity: 1; transform: none; }


/* pricing */
.pricing { padding-top: 105px; }.price-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 17px; max-width: 950px; margin: auto; }.price-card { position: relative; display: flex; flex-direction: column; min-height: 304px; padding: 31px 29px 27px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }.price-card.selected { transform: translateY(-11px); border: 2px solid var(--blue); box-shadow: 0 14px 34px rgba(24,119,242,.12); }
.popular { position: absolute; top: -13px; left: 50%; padding: 5px 11px; border-radius: 100px; color: #fff; background: var(--blue); transform: translateX(-50%); white-space: nowrap; font-size: 10px; font-weight: 800; }.package { margin: 0 0 22px; color: #5f778a; font-size: 13px; font-weight: 700; }.quantity { color: var(--ink); font-size: 34px; font-weight: 800; letter-spacing: -.05em; }.quantity span { color: #698093; font-size: 14px; font-weight: 600; letter-spacing: 0; }.price { margin: 19px 0 0; color: var(--blue); font-size: 27px; font-weight: 800; letter-spacing: -.04em; }.per-unit { margin: 0 0 23px; color: #748897; font-size: 12px; }.price-card .button { width: 100%; margin-top: auto; }
.price-note { max-width: 950px; margin: 25px auto 0; padding: 13px 17px; border: 1px solid #efe0b5; border-radius: 10px; color: #6a624c; background: #fff9ea; text-align: center; font-size: 13px; }

/* download, FAQ, contact */
.download { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #f7fafc; }.download-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }.download-grid h2 { font-size: 38px; }.download-grid p { max-width: 500px; margin: 0 0 23px; color: #51697b; font-size: 16px; }.download-grid small { display: block; margin-top: 15px; color: #7890a0; font-size: 11px; }
.faq-grid { display: grid; grid-template-columns: 40% 60%; gap: 65px; }.faq-grid > div > p { max-width: 330px; color: var(--muted); }.faq-list { border-top: 1px solid var(--line); }details { padding: 17px 0; border-bottom: 1px solid var(--line); }summary { display: flex; justify-content: space-between; gap: 20px; color: var(--ink); font-size: 16px; font-weight: 700; cursor: pointer; list-style: none; }summary::-webkit-details-marker { display: none; }summary::after { color: #7091a9; font-size: 21px; font-weight: 400; line-height: .8; content: "+"; }details[open] summary::after { content: "−"; }details p { margin: 10px 32px 0 0; color: var(--muted); font-size: 14px; }
.contact-section { padding: 0 0 80px; }.contact-card { display: grid; grid-template-columns: 1fr auto; gap: 50px; overflow: hidden; padding: 55px 61px; border-radius: 20px; color: #fff; background: var(--ink); }.contact-card .overline { color: #86c9f8; }.contact-card h2 { color: #fff; font-size: 40px; }.contact-card p { max-width: 510px; margin: 14px 0 0; color: #b6cad8; }.contact-links { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }.phone { color: #fff; font-size: 26px; font-weight: 800; line-height: 1.35; letter-spacing: -.035em; white-space: nowrap; }.phone:hover,.telegram:hover { color: #9cdaff; }.telegram { margin-top: 15px; color: #8dceff; font-size: 14px; font-weight: 700; }.telegram span { font-size: 18px; }.contact-links small { margin-top: 21px; color: #839daa; font-size: 10px; }
footer { padding: 26px 0; border-top: 1px solid var(--line); }footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #728695; font-size: 12px; }footer p { margin: 0; }.footer-logo { font-size: 16px; }.footer-logo .logo-mark { width: 28px; height: 28px; border-radius: 8px; font-size: 12px; }footer a:last-child { color: #456980; font-weight: 700; }

/* dialog and animations */
.lightbox { width: min(1200px,94vw); max-height: 90vh; padding: 13px; overflow: auto; border: 1px solid #315169; border-radius: 13px; color: #fff; background: #0b2134; box-shadow: 0 20px 80px rgba(0,0,0,.55); }.lightbox::backdrop { background: rgba(0,17,30,.8); backdrop-filter: blur(4px); }.lightbox img { width: 100%; }.lightbox p { margin: 9px 3px 0; color: #b8ccd9; font-size: 11px; }.close-lightbox { position: fixed; top: 5vh; right: 4vw; width: 36px; height: 36px; border: 1px solid #587187; border-radius: 50%; color: #fff; background: #112f45; font-size: 27px; line-height: 1; cursor: pointer; }
.animate { animation: rise .55s both; }@keyframes rise { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .navigation { height: 65px; }.site-header nav { display: none; }.navigation .button-small { margin-left: auto; }
  .hero { padding-top: 55px; }.hero-grid { grid-template-columns: 1fr; }.hero-copy { padding-bottom: 36px; }.hero-visual { max-width: 650px; margin: auto; padding: 12px 14px 52px; }.top-card { left: -5px; }.bottom-card { right: -4px; }
  .facts { grid-template-columns: repeat(2,1fr); }.facts > div { justify-content: flex-start; padding: 12px 8%; }.facts > div:nth-child(2) { border-right: 0; }.facts > div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.16); }
  .trust-strip .wrap { flex-wrap: wrap; justify-content: center; gap: 10px 17px; padding: 12px 0; }.trust-strip p { width: 100%; text-align: center; }
  .heading.split,.showcase-grid,.download-grid,.faq-grid { grid-template-columns: 1fr; gap: 34px; }.feature-grid { grid-template-columns: 1fr 1fr; }.feature-card.large { grid-row: span 1; grid-column: span 2; min-height: 275px; }
  .steps { gap: 29px; }.contact-card { grid-template-columns: 1fr; gap: 26px; padding: 43px; }
}
@media (max-width: 600px) {
  .wrap { width: min(100% - 30px,var(--wrap)); }.navigation .button-small { min-height: 36px; padding: 0 10px; font-size: 12px; }.navigation .button-small span { display: none; }
  .hero h1 { font-size: 39px; }.hero-lead { font-size: 16px; }.hero-actions { align-items: stretch; gap: 8px; }.hero-actions .button { width: 100%; }.hero-notes { flex-wrap: wrap; }.hero-notes i { display: none; }.floating-card { padding: 8px; }.floating-card small { display: none; }.top-card { top: 4%; }.bottom-card { bottom: 8px; }
  .facts strong { font-size: 25px; }.facts span { font-size: 10px; }.section { padding: 74px 0; }.heading h2,.contact-card h2,.download h2 { font-size: 32px; }.feature-grid,.price-grid { grid-template-columns: 1fr; }.feature-card.large { grid-column: span 1; min-height: 265px; }.feature-card { min-height: 200px; }.feature-icon { margin-bottom: 23px; }
  .steps { grid-template-columns: 1fr; gap: 35px; }.steps::before { display: none; }.step { display: grid; grid-template-columns: 43px 90px 1fr; gap: 0 15px; text-align: left; }.step-number { grid-row: span 3; width: 29px; margin: 0; }.step-art { grid-row: span 2; width: 85px; height: 70px; margin: 0; }.step h3 { margin: 4px 0 5px; }.step p { grid-column: 3; margin: 0; font-size: 13px; }.files-art span { width: 31px; height: 39px; font-size: 8px; }
  .showcase-grid { gap: 29px; }.preview img { min-height: 250px; }.zoom-button { opacity: 1; transform: none; }
  .price-card.selected { transform: none; }.download-grid { gap: 26px; }.contact-section { padding-bottom: 50px; }.contact-card { padding: 37px 25px; }.phone { font-size: 23px; }footer .wrap { flex-wrap: wrap; }.close-lightbox { top: 3vh; right: 3vw; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.animate,.ring-two { animation: none; }.button,.feature-card { transition: none; } }