@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/studio/assets/fonts/manrope-variable.ttf") format("truetype");
}

:root {
  --paper: #f6f5f0;
  --ink: #222820;
  --muted: #62695e;
  --line: #dedfd5;
  --font: "Manrope", "Segoe UI", sans-serif;
  --orange: #ee7655;
  --orange-hover: #e96847;
}

body { font-size: 16px; font-feature-settings: "ss01"; }
html { scroll-padding-top: calc(var(--header-height, 88px) + 20px); }
svg[class^="icon-"], svg.icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.icon-arrow, .icon-arrow-down { width: 1em; height: 1em; }
.text-link > span, .button > span[aria-hidden] { display: inline-flex; align-items: center; }
.currency-menu-heading .icon-arrow { transform: rotate(180deg); }
.final-section { background: #252e25; }
.final-inner { z-index: 0; }
.final-inner h2 { position: relative; z-index: 1; color: #f6f5f0; }
.final-inner > p:not(.eyebrow) { color: #c7cebf; }
.final-inner .eyebrow { color: #c0d0aa; }
.final-asterisk { color: #bed2a3; opacity: .12; right: -28px; top: 2px; z-index: -1; }
.final-inner .no-payment-note { color: #c7cebf; }
.final-inner > small { font-size: 12px; color: #c7cebf; }
button, input, select, textarea { font-family: var(--font); }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid #55754a;
  outline-offset: 4px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid #55754a; outline-offset: 3px; }

.site-header { background: #f6f5f0f2; border-bottom-color: #dedfd5b3; }
.header-inner { min-height: 88px; }
.brand { letter-spacing: -.055em; }
.brand small { letter-spacing: .2em; color: #6f776a; }
.main-nav { font-size: 12px; font-weight: 600; }
.language-switcher { gap: 4px; }
.language-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; min-height: 36px; padding: 0 8px;
  font-size: 11px; line-height: 1; border-radius: 9px;
  transition: color .18s, background .18s;
}
.language-link.active { background: #e8ecdf; color: #2f4b2b; }
.language-link.active::after { display: none; }
.language-link:hover { color: #222820; background: #e9ebe3; }
.project-toggle { min-height: 40px; font-size: 12px; padding-left: 18px; }
.project-count { background: #2d3829; }

.currency-toolbar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 28px; margin-top: 22px; padding: 13px 18px 13px 20px;
  border: 1px solid #e2e4d9; border-radius: 16px;
  background: #ffffff8a; box-shadow: 0 2px 8px #27331f03;
}
.currency-inline-note {
  max-width: 720px; color: #626c59; font-size: 12px;
  line-height: 1.65; margin: 0;
}
.currency-toolbar > .currency-picker { width: auto; order: 0; gap: 13px; }
.currency-toolbar .currency-picker > span { font-size: 11px; font-weight: 600; color: #606959; }

.hero { padding-top: 54px; padding-bottom: 66px; gap: 54px; }
.hero h1 { font-weight: 700; letter-spacing: -.065em; line-height: 1.07; }
.hero-description { font-size: 15px; line-height: 1.85; color: #60685a; }
.eyebrow { font-size: 10px; letter-spacing: .14em; font-weight: 750; }
.hero-copy .eyebrow { margin-bottom: 25px; }
.hero-buttons { gap: 24px; margin-top: 30px; }
.button { min-height: 50px; border-radius: 13px; font-size: 13px; font-weight: 700; }
.button:hover { transform: translateY(-2px); }
.button-primary { box-shadow: inset 0 1px 0 #ffffff38, 0 4px 10px #d7653012; }
.button-outline { background: #ffffff35; }
.hero-facts { gap: 22px; margin-top: 32px; }
.hero-facts > div > span { font-size: 11px; }
.hero-facts > p { font-size: 12px; line-height: 1.5; }
.hero-facts > p > small { font-size: 11px; line-height: 1.6; }
.hero-art { border-radius: 28px; box-shadow: inset 0 0 0 1px #ffffff08, 0 22px 50px #2a342312; }
.trust-strip { color: #626a5a; padding-block: 23px; font-size: 12px; }
.section { padding-block: 92px; }
.section-heading { margin-bottom: 34px; gap: 36px; }
.section-heading > p { font-size: 14px; line-height: 1.85; }

.service-card { border-radius: 22px; border-color: #d9ddcf; padding: 28px 23px; }
.service-card:not(.featured) { background: #ffffff78; }
.service-card.featured { background: #e9efdc; border-color: #b8c7a4; }
.service-card:hover { border-color: #b7c5a5; box-shadow: 0 16px 36px #2d3f1a09; }
.service-card.selected { border-color: #5b784b; box-shadow: 0 0 0 1px #5b784b20; }
.service-card h3 { font-size: 24px; letter-spacing: -.045em; line-height: 1.2; }
.service-card .card-description { font-size: 13px; line-height: 1.8; color: #636c5c; }
.feature-list li { font-size: 12px; line-height: 1.7; }
.price { gap: 6px; }
.price .price-from, .price .price-period { color: #656e5b; font-size: 11px; }
.converted-price { gap: 6px; }
.service-card .button { font-size: 12px; min-height: 46px; }
.section-footnote, .muted-note { font-size: 12px; line-height: 1.8; color: #626c59; }
.builder-banner-inner { border: 1px solid #c5d8a8; box-shadow: inset 0 1px 0 #ffffff50; }
.builder-banner p:not(.eyebrow), .builder-steps > p:not(.eyebrow) { font-size: 13px; }
.builder-mini-estimate { border-radius: 14px; }
.hosting-banner { background: #eceedf; border-radius: 20px; padding: 26px; gap: 22px; }
.hosting-banner p:not(.price) { font-size: 13px; line-height: 1.8; }
.hosting-banner > .button { min-height: 46px; font-size: 12px; }
.addon-copy h3 { line-height: 1.3; }
.addon-copy p { font-size: 13px; line-height: 1.8; }
.addon-row > .icon-button { width: 44px; height: 44px; min-width: 44px; }
.process-grid p { font-size: 13px; line-height: 1.8; }
.process-grid h3 { line-height: 1.25; }
.faq-item summary { min-height: 34px; font-size: 15px; line-height: 1.6; }
.faq-item > div p { font-size: 14px; line-height: 1.85; }
.templates-section p:not(.eyebrow), .expert-heading p { font-size: 14px; line-height: 1.8; }
.coming-soon { min-height: 40px; display: inline-flex; align-items: center; }
.currency-information summary { min-height: 36px; font-size: 13px; }
.currency-information p { font-size: 12px; color: #626c59; }
.currency-information .rate-status { font-size: 12px; }
.wallet-reference { background: #ffffff50; border: 1px solid #dde2d3; border-radius: 14px; padding: 18px; margin-top: 10px; }
.wallet-reference > span { font-size: 12px; }
.wallet-reference > small { font-size: 11px; }
.wallet-reference > code { font-size: 12px; line-height: 1.8; }
.footer-main > p { font-size: 12px; line-height: 1.8; }
.footer-main > div { font-size: 12px; }
.footer-bottom { font-size: 11px; line-height: 1.8; }

dialog { padding: 30px; border-radius: 26px; border: 1px solid #e6e8de; box-shadow: 0 30px 110px #16200f33; }
dialog::backdrop { background: #17231060; backdrop-filter: blur(5px); }
.dialog-heading { gap: 18px; }
.dialog-heading .icon-button { width: 44px; height: 44px; min-width: 44px; }
.dialog-intro { font-size: 13px; color: #626c59; line-height: 1.8; }
.project-summary { background: #edf1e5; border-color: #d9e2cc; border-radius: 20px; padding: 25px; }
.selection-item strong { font-size: 13px; }
.selection-item p { font-size: 12px; }
.selection-group { font-size: 10px; letter-spacing: .12em; }
.quantity-control { gap: 8px; }
.quantity-control button { width: 36px; height: 36px; min-width: 36px; border-radius: 10px; }
.item-remove { width: 36px; height: 36px; min-width: 36px; border-radius: 10px; font-size: 22px; }
.estimate-totals > div { gap: 12px; flex-wrap: wrap; }
.estimate-note, .currency-estimate-note { font-size: 12px; line-height: 1.75; color: #5b684d; }
.form-intro { font-size: 13px; line-height: 1.8; }
.form-grid label, #project-form > label { font-size: 12px; }
.form-grid label small { font-size: 11px; }
input:not([type=checkbox]), select, textarea { border-radius: 11px; border-color: #d8ddcf; min-height: 46px; background: #fdfefa; }
input:not([type=checkbox]):hover, select:hover, textarea:hover { border-color: #b3c0a6; }
.consent-label { font-size: 12px !important; line-height: 1.8; }
.consent-label input { width: 18px; height: 18px; min-width: 18px; accent-color: #4e6c3d; margin-top: 3px; }
.form-note { font-size: 11px; line-height: 1.8; }
.no-payment-note { font-size: 12px; line-height: 1.7; }
.share-button { min-height: 40px; font-size: 12px; }
.telegram-help p { font-size: 12px; line-height: 1.8; }

@media (max-width: 1100px) {
  .main-nav { gap: 19px; }
  .header-actions { gap: 15px; }
  .hero { gap: 36px; }
  .hero h1 { font-size: 57px; }
  .service-card { padding: 24px 19px; }
  .service-card h3 { font-size: 22px; }
  .feature-list li { font-size: 11px; }
  .service-card .button { padding: 12px; gap: 10px; font-size: 11px; }
  .currency-inline-note { max-width: 560px; }
  .hero-facts { flex-wrap: wrap; row-gap: 17px; }
}

@media (max-width: 760px) {
  .header-inner { width: calc(100% - 32px); min-height: 78px; gap: 12px; }
  .brand { font-size: 17px; gap: 8px; }
  .brand small { font-size: 7px; letter-spacing: .15em; }
  .header-actions { gap: 10px; }
  .language-switcher { gap: 1px; }
  .language-link { min-height: 36px; min-width: 32px; padding: 0 6px; font-size: 11px; }
  .project-toggle { padding-left: 11px; min-height: 40px; gap: 6px; }
  .project-toggle svg { width: 18px; height: 18px; }
  .currency-toolbar { padding: 13px 15px; margin-top: 17px; gap: 16px; border-radius: 16px; }
  .currency-inline-note { font-size: 11px; max-width: none; }
  .currency-toolbar .currency-picker > span { font-size: 11px; }
  .hero { padding-top: 42px; padding-bottom: 46px; gap: 37px; }
  .hero h1 { font-size: clamp(40px, 8vw, 58px); line-height: 1.08; letter-spacing: -.065em; }
  .hero-copy .eyebrow { font-size: 9px; letter-spacing: .11em; }
  .hero-description { font-size: 14px; line-height: 1.85; }
  .hero-buttons { gap: 18px; }
  .hero-buttons > .button { font-size: 13px; min-height: 49px; padding: 14px 19px; }
  .hero-buttons > .text-link { font-size: 12px; gap: 15px; min-height: 44px; }
  .hero-facts { gap: 17px; margin-top: 27px; }
  .hero-facts > div { padding-right: 17px; }
  .hero-facts > div > span { font-size: 11px; }
  .hero-facts > p, .crypto-currency .hero-facts > p { font-size: 11px; }
  .hero-facts > p > small, .crypto-currency .hero-facts > p > small { font-size: 10px; }
  .hero-facts strong, .crypto-currency .hero-facts strong { font-size: 28px; }
  .hero-facts strong small, .crypto-currency .hero-facts strong small { font-size: 13px; }
  .trust-strip { font-size: 11px; gap: 13px 18px; padding-block: 20px; }
  .section { padding-block: 64px; }
  .section-heading { gap: 20px; }
  .section-heading .eyebrow, .builder-banner .eyebrow, .telegram-copy .eyebrow, .templates-section .eyebrow, .faq-heading .eyebrow { font-size: 9px; }
  .section-heading > p { font-size: 13px; }
  .service-card, .care-card, .expert-card { padding: 27px; border-radius: 21px; }
  .service-card h3, .care-card h3, .expert-card h3 { font-size: 27px; }
  .service-card .card-description, .care-card .card-description, .expert-card .card-description { font-size: 13px; min-height: 0; }
  .service-card .feature-list li, .care-card .feature-list li { font-size: 12px; }
  .service-card .button, .care-card .button, .expert-card .button { min-height: 46px; font-size: 12px; }
  .section-footnote { flex-direction: column; gap: 10px; font-size: 12px; }
  .muted-note { font-size: 12px; }
  .builder-banner p:not(.eyebrow), .builder-steps > p:not(.eyebrow) { font-size: 13px; }
  .hosting-banner { padding: 23px; gap: 17px; }
  .hosting-banner > div:nth-child(2) { max-width: calc(100% - 60px); }
  .hosting-banner p:not(.price) { font-size: 12px; }
  .hosting-banner > .button { font-size: 12px; min-height: 44px; padding: 12px 15px; }
  .addon-copy h3 { font-size: 22px; }
  .addon-copy p { font-size: 12px; }
  .addon-row > .icon-button { min-width: 44px; width: 44px; height: 44px; }
  .telegram-copy > p:not(.eyebrow):not(.muted-note) { font-size: 13px; }
  .expert-heading p, .templates-section p:not(.eyebrow) { font-size: 13px; }
  .process-grid p { font-size: 12px; }
  .faq-item summary { font-size: 14px; min-height: 40px; }
  .faq-item > div p { font-size: 13px; }
  .currency-information summary { font-size: 13px; min-height: 40px; }
  .currency-information p { font-size: 12px; }
  .currency-information .rate-status { font-size: 11px; }
  .footer-main > p, .footer-main > div { font-size: 12px; }
  .footer-bottom { font-size: 11px; }
  .mobile-project-bar { min-height: 54px; border-radius: 15px; font-size: 13px; padding-inline: 18px; }
  dialog { padding: 25px 21px; border-radius: 23px; }
  .dialog-heading .icon-button { width: 44px; height: 44px; }
  .dialog-intro { font-size: 12px; }
  .project-summary { padding: 22px; }
  .selection-item strong { font-size: 13px; }
  .selection-item p { font-size: 12px; }
  .quantity-control button, .item-remove { width: 40px; height: 40px; min-width: 40px; }
  .estimate-totals > div { font-size: 12px; flex-wrap: wrap; }
  .estimate-note, .currency-estimate-note { font-size: 12px; }
  .crypto-currency .estimate-totals strong { font-size: 17px; }
  .form-intro, .form-grid label, #project-form > label { font-size: 13px; }
  .form-grid label small { font-size: 11px; }
  .consent-label { font-size: 13px !important; }
  .form-note { font-size: 12px; }
  .no-payment-note { font-size: 12px; }
  input:not([type=checkbox]), select, textarea { font-size: 16px; min-height: 48px; }
}

@media (max-width: 520px) {
  .mobile-project-bar { bottom: calc(12px + env(safe-area-inset-bottom)); }
  .site-footer { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  .final-inner { padding-block: 57px; }
  .final-inner h2 { font-size: clamp(35px, 9vw, 46px); line-height: 1.13; }
  .final-asterisk { font-size: 290px; right: -110px; top: 20px; opacity: .1; }
  .final-inner > p:not(.eyebrow) { font-size: 14px; }
  .header-inner { flex-wrap: wrap; padding-block: 12px; gap: 12px; min-height: 0; }
  .brand { font-size: 17px; }
  .brand-mark { font-size: 30px; height: 40px; }
  .brand-mark > span { font-size: 25px; }
  .header-actions { margin-left: auto; }
  .language-link { min-width: 29px; min-height: 36px; padding: 0 5px; font-size: 10px; }
  .project-toggle { padding-left: 10px; }
  .currency-toolbar { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px; margin-top: 16px; }
  .currency-toolbar > .currency-picker { justify-content: space-between; order: 0; width: 100%; }
  .currency-toolbar > .currency-inline-note { order: 1; font-size: 11px; padding-top: 11px; border-top: 1px solid #e2e5d9; line-height: 1.75; }
  .hero { padding-top: 34px; }
  .hero-copy .eyebrow { font-size: 8px; line-height: 1.8; }
  .hero h1 { font-size: clamp(39px, 10.3vw, 49px); }
  .hero-facts { flex-wrap: wrap; gap: 18px; }
  .hero-facts > p { flex-basis: 100%; }
  .hero-facts > div { border-right: 0; padding-right: 0; }
  .service-card, .care-card, .expert-card { padding: 26px; }
  .hosting-banner > div:nth-child(2) { max-width: calc(100% - 55px); }
  .hosting-banner .price { max-width: none; }
  .hosting-banner .price-period { font-size: 11px; }
  .builder-banner .button { font-size: 12px; }
  .builder-banner-inner { padding: 27px 23px; }
  .process-grid { gap: 29px 20px; }
  .process-grid h3 { font-size: 20px; }
  .currency-information summary { font-size: 12px; }
  .footer-main > div { gap: 18px; flex-wrap: wrap; }
  .footer-bottom { font-size: 10px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 375px) {
  .header-inner { row-gap: 10px; }
  .header-actions { width: 100%; justify-content: space-between; margin-left: 0; }
  .language-switcher { gap: 5px; }
  .language-link { font-size: 11px; min-width: 38px; min-height: 36px; }
  .project-toggle { border-left: 0; padding-left: 0; }
  .header-project-label { display: inline; font-size: 11px; }
  .hero h1 { font-size: 38px; }
  .hero-description { font-size: 14px; }
  .hero-buttons { gap: 12px; }
  .hero-buttons > .button { font-size: 12px; padding: 13px 16px; }
  .hero-buttons > .text-link { font-size: 12px; }
  .hero-copy .eyebrow { font-size: 8px; }
  .service-card, .care-card, .expert-card { padding: 23px; }
  .hosting-banner > .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .button:hover { transform: none; }
}

.footer-bottom { flex-wrap: wrap; column-gap: 24px; row-gap: 8px; }
.footer-bottom > span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }