/* Photo-led green design. Shared by every static page. */
:root {
  --primary: #237C48;
  --primary-dark: #195D36;
  --dark: #0F2D20;
  --ink: #15291E;
  --text: #465B4D;
  --muted: #587062;
  --lime: #D4EF6C;
  --soft: #F6F9F5;
  --mint: #F0F5ED;
}
body { font-size: 16px; line-height: 1.8; }
h1, h2 { letter-spacing: -.045em; font-weight: 700; }
h2 { font-size: clamp(32px, 3.05vw, 43px); line-height: 1.25; }
h3 { letter-spacing: -.025em; }
.text-green { color: var(--primary); }
.eyebrow { font-size: 12px; letter-spacing: .12em; line-height: 1.7; }
.lead { font-size: 17px; line-height: 1.85; }
.text-link { font-size: 15px; gap: 9px; }
.text-link .icon, .button .icon { transition: transform .2s ease; }
.text-link:hover .icon, .button:hover .icon { transform: translateX(3px); }
.button { min-height: 52px; padding: 13px 23px; font-size: 15px; font-weight: 600; }
.button-primary { box-shadow: 0 7px 18px #237c481a; }
.button-primary:hover { transform: translateY(-2px); box-shadow: 0 9px 24px #237c482b; }
.button-secondary { border-color: #7D9785; background: #ffffff45; }
.button-secondary:hover { border-color: var(--primary); background: #F0F6EC; }
.button-small { min-height: 46px; font-size: 14px; }
.section { padding-block: 100px; }
.section-heading { margin-bottom: 42px; }
.section-heading > p, .section-aside p { font-size: 16px; }
.section-aside { max-width: 370px; }
.section-aside .text-link { margin-top: 16px; }

/* The reference's white navigation and generous green hero. */
.header { border-bottom-color: #e8eee7; background: #fffffff7; transition: box-shadow .25s; }
.header.is-scrolled { box-shadow: 0 6px 25px #102d2110; }
.nav { height: 86px; gap: 22px; }
.brand-mark { width: 43px; height: 43px; }
.brand-name { font-size: 27px; }
.brand-subtitle { font-size: 8px; letter-spacing: .095em; }
.nav-links { gap: 21px; }
.nav-link { font-size: 15px; font-weight: 600; }
.nav-link::after { content: ''; position: absolute; left: 0; bottom: 3px; width: 0; height: 2px; border-radius: 2px; background: var(--primary); transition: width .2s; }
.nav-link:hover::after, .nav-link.active::after { width: 20px; }
.nav-link .icon { width: 14px; height: 14px; }
.nav-cta { min-height: 46px; font-size: 14px; padding: 10px 18px; }
.header-phone { font-size: 13px; }
.mega-menu h3 { font-size: 13px; color: var(--primary-dark); }
.mega-menu a { font-size: 15px; }
.hero { background: #F1F6F0; }
.hero::before { background: linear-gradient(115deg, #F3F7F3 25%, #EDF5E4 70%, #DFECDF); }
.hero-grid { grid-template-columns: 1fr 1fr; gap: 58px; padding-block: 76px 110px; }
.hero-eyebrow { display: flex; align-items: center; gap: 12px; color: #44594B; font-size: 13px; margin-bottom: 0; }
.hero-eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--primary); }
.hero-copy h1 { font-size: clamp(46px, 3.85vw, 57px); line-height: 1.17; margin: 22px 0 26px; letter-spacing: -.055em; }
.hero-copy h1 .hero-location { color: #5F7B66; }
.hero-copy > .hero-intro { color: var(--ink); font-size: 18px; font-weight: 600; line-height: 1.8; margin-bottom: 20px; max-width: 575px; }
.hero-copy > p { font-size: 16px; line-height: 1.9; max-width: 530px; }
.hero-actions { margin-top: 29px; gap: 12px; }
.hero-checks { font-size: 12px; line-height: 1.6; color: #294C36; gap: 12px 19px; margin-top: 26px; }
.hero-checks .icon { width: 17px; height: 17px; color: var(--primary); }
.hero-visual { width: 100%; padding: 0; margin-top: 24px; }
.hero-visual::before { inset: -22px -16px 100px 40px; border: 0; border-radius: 38px 8px 38px 38px; background: #C9DFAE; transform: rotate(4deg); }
.hero-image-frame { position: relative; margin: 0; aspect-ratio: 1.38; border-radius: 30px 10px 30px 30px; overflow: hidden; box-shadow: 0 20px 45px #0f2d2115; }
.hero-image-frame img { width: 100%; height: 100%; object-fit: cover; }
.hero-image-frame figcaption { position: absolute; bottom: 12px; right: 12px; max-width: calc(100% - 24px); padding: 3px 9px; border-radius: 4px; background: #fffffff2; color: #3E5546; font-size: 10px; line-height: 1.8; }
.floating-note { z-index: 2; padding: 14px 18px; border: 1px solid #e5ece2; border-radius: 16px; gap: 12px; box-shadow: 0 12px 30px #102d2114; }
.floating-note strong { font-size: 14px; font-weight: 600; line-height: 1.55; }
.floating-note small { color: #4A6252; font-size: 12px; line-height: 1.6; margin-top: 2px; }
.floating-top { top: -28px; right: -6px; transform: none; animation: gentle-float 7s ease-in-out infinite; }
.floating-bottom { left: -25px; bottom: 114px; animation: gentle-float 8s 1s ease-in-out infinite; }
.icon-badge { width: 43px; height: 43px; border-radius: 12px; background: #ECF5DF; flex: 0 0 auto; }
.floating-note .icon { width: 25px; height: 25px; }
.hero-visual-footer { margin: 25px 12px 0; display: flex; align-items: center; gap: 12px; font-size: 12px; color: #48614F; line-height: 1.65; }
.hero-visual-footer strong { color: var(--ink); font-weight: 600; }
.hero-mini-mark { display: flex; }
.hero-mini-mark .brand-mark { width: 39px; height: 39px; }
.hero-visual-footer > a { margin-left: auto; width: 46px; height: 46px; border: 1px solid #A0BA8B; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary); transition: background .2s; }
.hero-visual-footer > a:hover { background: var(--lime); }
.promise-strip { margin-top: -48px; padding-bottom: 0; background: linear-gradient(#EDF5E7 48px, #FFF 48px); }
.promise-grid { padding: 0 18px; border-radius: 22px; box-shadow: 0 18px 38px #102d2110; }
.promise-item { position: relative; display: block; padding: 29px 27px 31px; }
.promise-item + .promise-item { padding-left: 30px; margin-block: 20px; padding-block: 9px 11px; }
.promise-index { display: block; color: var(--lime); font-size: 43px; line-height: 1.15; font-weight: 600; letter-spacing: -.05em; }
.promise-item > .icon { position: absolute; right: 25px; top: 37px; width: 25px; height: 25px; opacity: .8; }
.promise-item + .promise-item > .icon { top: 17px; }
.promise-item strong { font-size: 17px; margin-top: 10px; }
.promise-item small { font-size: 12px; color: #CDDDCF; margin-top: 4px; line-height: 1.7; }

/* Large, meaningful images instead of tiny decorative previews. */
.service-card { border-radius: 20px; transition: transform .25s, box-shadow .25s, border-color .25s; }
.service-card:hover, .service-card:focus-within { transform: translateY(-5px); box-shadow: 0 18px 38px #102d2112; border-color: #B0C8A4; }
.service-graphic { height: auto; aspect-ratio: 1.5; }
.service-graphic img { transition: transform .5s ease; }
.service-card:hover .service-graphic img { transform: scale(1.045); }
.service-number { top: 17px; left: 17px; font-size: 17px; padding: 4px 11px; box-shadow: 0 3px 12px #102d210d; }
.service-card-body { padding: 28px; }
.service-tag { font-size: 11px; letter-spacing: .095em; margin-bottom: 10px; }
.service-card h3 { font-size: 25px; margin-bottom: 14px; }
.service-card-body > p { font-size: 15px; min-height: 81px; line-height: 1.85; }
.service-links { margin-top: 21px; padding-top: 11px; }
.service-links a { font-size: 14px; min-height: 46px; }
.service-links .icon { color: var(--primary); width: 17px; height: 17px; transition: transform .2s; }
.service-links a:hover .icon { transform: translate(2px, -2px); }
.infra-line { padding: 22px 25px; margin-top: 30px; background: #F7FAF4; border-color: #E0E9DA; border-radius: 15px; }
.infra-line p { font-size: 14px; }
.infra-line strong { display: block; font-size: 16px; }
.filter-button { font-size: 14px; padding: 9px 16px; }
.filter-count, .filter-result { font-size: 13px !important; }
.portfolio-grid { gap: 34px 25px; }
.portfolio-image { border-radius: 14px; background: #FFF; box-shadow: 0 8px 24px #102d2108; transition: box-shadow .25s, border-color .25s; }
.portfolio-image img { aspect-ratio: 1.5; object-fit: cover; }
.portfolio-card:hover .portfolio-image { box-shadow: 0 15px 32px #102d2114; border-color: #BDD1B2; }
.portfolio-card:hover .portfolio-image img { transform: scale(1.015); }
.portfolio-browserbar { height: 28px; padding: 0 12px; display: flex; align-items: center; gap: 4px; border-bottom: 1px solid #EDF0E9; background: #FAFCF8; }
.portfolio-browserbar i { width: 5px; height: 5px; border-radius: 50%; background: #BAC9B7; }
.portfolio-browserbar span { margin-left: auto; font-size: 9px; color: #57705E; }
.portfolio-open span { bottom: 10px; left: 10px; font-size: 11px; color: #334D3B; border: 1px solid #E5EDE1; border-radius: 999px; padding: 4px 10px; }
.portfolio-open .icon { width: 38px; height: 38px; padding: 10px; top: 40px; }
.portfolio-meta h3 { font-size: 19px; }
.portfolio-meta p { font-size: 14px; color: var(--text); }
.portfolio-meta > a { color: var(--primary); border-color: #CFDDC6; }
.portfolio-meta > a .icon { width: 18px; }

/* Editorial brand presentation and responsive website mockup. */
figure { margin: 0; }
.benefits-grid { grid-template-columns: 1fr 1.04fr; gap: 65px; }
.editorial-media { position: relative; border-radius: 24px; }
.editorial-media > img { width: 100%; border-radius: 24px; }
.brand-media { background: #E4EAD9; padding: 18px; border-radius: 30px; }
.brand-media > img { aspect-ratio: 1.15; height: auto; object-fit: cover; border-radius: 19px; }
.brand-media figcaption { display: flex; align-items: center; gap: 12px; margin: -42px 12px 0; position: relative; z-index: 1; padding: 20px; border-radius: 15px; box-shadow: 0 12px 35px #102d2110; background: #FFF; color: var(--ink); }
.image-caption-icon { width: 43px; height: 43px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: #EDF5E4; border-radius: 10px; color: var(--primary); }
.brand-media figcaption strong { display: block; font-size: 14px; font-weight: 600; }
.brand-media figcaption small { display: block; font-size: 12px; color: var(--text); margin-top: 3px; }
.benefits-copy > p { margin-top: 20px; max-width: none; font-size: 16px; }
.benefits-list { grid-template-columns: 1fr 1fr; gap: 24px 26px; margin: 30px 0 26px; }
.benefit > .icon { width: 26px; height: 26px; margin-bottom: 10px; }
.benefit h3 { font-size: 16px; line-height: 1.5; margin-bottom: 7px; }
.benefit p { font-size: 14px; line-height: 1.85; }
.showcase-section { background: #F3F7EF; }
.showcase-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 75px; align-items: center; }
.device-media { overflow: hidden; border: 1px solid #DDE7D3; background: #E5EDDE; box-shadow: 0 16px 35px #102d210a; }
.device-media > img { aspect-ratio: 1.2; height: auto; object-fit: cover; border-radius: 0; }
.device-media figcaption { padding: 13px 20px; font-size: 12px; color: #456048; text-align: center; border-top: 1px solid #D8E3D0; }
.showcase-copy > p { margin-top: 23px; font-size: 16px; }
.showcase-checks { list-style: none; margin: 25px 0 30px; }
.showcase-checks li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.showcase-checks .icon { width: 23px; height: 23px; color: var(--primary); margin-top: 3px; }
.showcase-checks strong { display: block; font-size: 16px; font-weight: 600; }
.showcase-checks small { display: block; color: var(--text); font-size: 14px; }

/* Readable supporting sections on both desktop and mobile. */
.price-card { padding: 35px 28px 29px; border-radius: 20px; transition: box-shadow .25s, transform .25s; }
.price-card:hover { box-shadow: 0 14px 35px #102d2110; transform: translateY(-4px); }
.price-card.featured { background: #F3F8E9; border: 2px solid var(--primary); }
.price-card-tag { font-size: 12px; }
.price-card h3 { font-size: 23px; }
.price-description, .price-features li { font-size: 15px; line-height: 1.8; }
.price-description { min-height: 55px; }
.price-value { font-size: 33px; }
.price-unit, .price-maintenance { font-size: 12px; }
.pricing-note { font-size: 13px; line-height: 1.85; }
.process-step h3 { font-size: 20px; line-height: 1.4; }
.process-step p { font-size: 15px; line-height: 1.85; }
.step-number { font-size: 22px; width: 59px; height: 59px; background: #EEF6E6; border-color: #D6E6CA; }
.step-result { font-size: 12px; }
.bundle-heading h2 { font-size: 42px; }
.bundle-heading p, .bundle p { font-size: 15px; }
.bundle h3 { font-size: 25px; }
.bundle-number { font-size: 12px; }
.bundle .text-link { color: var(--lime); }
.infra-card h3 { font-size: 22px; }
.infra-card p { font-size: 15px; }
.domain-band h3 { font-size: 23px; }
.domain-band p, .domain-status { font-size: 14px; }
.domain-form input, .domain-form select { font-size: 16px; }
.journal-card img { aspect-ratio: 1.6; object-fit: cover; border-radius: 16px; transition: transform .4s; }
.journal-card > a:first-child { display: block; }
.journal-card:hover img { transform: translateY(-3px); }
.journal-card h3 { font-size: 22px; line-height: 1.45; }
.journal-card p { font-size: 15px; line-height: 1.85; }
.journal-meta { font-size: 12px; color: var(--primary-dark); }
.faq-intro p, .faq-answer p { font-size: 15px; line-height: 1.9; }
.faq-question { font-size: 16px; line-height: 1.6; padding-block: 22px; }
.faq-question[aria-expanded='true'] { color: var(--primary-dark); }
.contact-copy > p { font-size: 16px; }
.contact-copy h2 { font-size: 43px; }
.contact-details li { font-size: 16px; }
.contact-details li span { font-size: 13px; }
.contact-assurance { font-size: 13px; line-height: 1.85; }
.form-heading h3 { font-size: 23px; }
.form-heading p, .form-footnote { font-size: 12px; }
.field label { font-size: 14px; }
.field label small { font-size: 12px; }
.field input, .field select, .field textarea { font-size: 16px; line-height: 1.6; padding: 12px 14px; border-color: #C8D7C5; }
.field input::placeholder, .field textarea::placeholder { color: #66796A; opacity: 1; }
.consent { font-size: 13px; line-height: 1.8; }
.field-error { font-size: 12px; }
.form-status { font-size: 14px; }
.footer-about p { font-size: 14px; line-height: 1.9; }
.footer h3 { font-size: 16px; }
.footer li a { font-size: 14px; line-height: 1.65; min-height: 32px; }
.footer-tag, .footer-bottom { font-size: 12px; }
.footer-bottom { color: #BACFBE; flex-wrap: wrap; }
.footer-bottom-links { flex-wrap: wrap; }
.breadcrumb { font-size: 13px; }
.page-hero .lead { font-size: 17px; }
.page-hero h1 { font-size: clamp(36px, 3.55vw, 51px); line-height: 1.25; }
.service-hero-grid { grid-template-columns: 1.05fr 1fr; gap: 65px; }
.service-hero-photo { position: relative; margin: 0; padding: 14px; border-radius: 26px; background: #DFEBD7; }
.service-hero-photo > img { width: 100%; aspect-ratio: 1.4; height: auto; object-fit: cover; border-radius: 17px; }
.service-hero-photo figcaption { display: flex; align-items: center; gap: 12px; padding: 16px 8px 3px; font-size: 15px; color: var(--primary-dark); font-weight: 600; }
.service-hero-photo figcaption > .icon { width: 28px; height: 28px; }
.service-hero-photo figcaption small { display: block; font-size: 11px; color: var(--text); font-weight: 400; }
.feature h3 { font-size: 18px; }
.feature p, .scope-list li, .service-process li { font-size: 15px; }
.content-main p, .service-aside p { font-size: 16px; }
.content-block h2 { font-size: 30px; }
.notice { font-size: 14px; line-height: 1.85; color: #425A47; }
.article p { font-size: 17px; }
.article-cover { aspect-ratio: 1.6; object-fit: cover; }
.preview-dialog { width: min(1100px, calc(100% - 32px)); }
.preview-dialog img { height: auto; }
.preview-features li { color: #35573E; font-size: 13px; }
.dialog-body > p { font-size: 15px; }
.dialog-close { width: 44px; height: 44px; }
.filter-result { margin-top: 15px; }

/* Progressive enhancement: content is visible without JavaScript. */
.reveal { animation: none; }
.will-reveal { opacity: 0; translate: 0 20px; transition: opacity .65s ease, translate .65s cubic-bezier(.2,.7,.2,1), transform .25s, box-shadow .25s, border-color .25s; transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0s, 0s, 0s; }
.will-reveal.is-revealed, .will-reveal:focus-within { opacity: 1; translate: none; }
@keyframes gentle-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

@media (max-width: 1200px) {
  .nav { gap: 16px; }
  .nav-links { gap: 17px; }
  .nav-link { font-size: 14px; }
  .hero-grid { gap: 35px; }
  .hero-copy h1 { font-size: 48px; }
  .hero-copy > p { font-size: 16px; }
  .hero-copy > .hero-intro { font-size: 17px; }
  .hero-actions .button { font-size: 14px; padding-inline: 19px; }
  .hero-checks { font-size: 12px; }
  .hero-visual::before { right: 0; }
  .floating-note { padding: 12px 14px; }
  .floating-note strong { font-size: 13px; }
  .floating-note small { font-size: 11px; }
  .floating-bottom { left: -10px; }
  .service-card-body { padding: 24px; }
  .service-card h3 { font-size: 23px; }
  .service-card-body > p { min-height: 100px; }
  .benefits-grid, .showcase-grid, .service-hero-grid { gap: 42px; }
  .price-value { font-size: 30px; }
}
@media (max-width: 1100px) {
  .nav { height: 76px; }
  .mobile-toggle { display: inline-flex; margin-left: auto; }
  .nav-links { display: none; position: fixed; top: 76px; left: 0; right: 0; height: calc(100dvh - 76px); overflow-y: auto; background: white; padding: 20px 28px 80px; align-items: stretch; flex-direction: column; gap: 0; }
  .nav-links.is-open { display: flex; }
  .nav-links > li { border-bottom: 1px solid var(--line); }
  .nav-link { width: 100%; min-height: 54px; justify-content: space-between; font-size: 16px; }
  .nav-link::after { display: none; }
  .mega-menu { position: static; width: auto; transform: none; box-shadow: none; border: 0; background: var(--soft); grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; padding: 22px; margin-bottom: 15px; }
  .mega-menu a { font-size: 14px; min-height: 44px; }
  .hero-grid { grid-template-columns: 1fr; padding-block: 65px 95px; gap: 60px; }
  .hero-copy { max-width: 730px; }
  .hero-copy h1 { font-size: 58px; }
  .hero-copy > p { max-width: 620px; font-size: 17px; }
  .hero-copy > .hero-intro { max-width: 700px; font-size: 20px; }
  .hero-actions .button { font-size: 15px; padding-inline: 24px; }
  .hero-checks { font-size: 13px; gap: 18px; }
  .hero-visual { width: min(700px, calc(100% - 35px)); margin-inline: auto; margin-top: 0; }
  .hero-image-frame { aspect-ratio: 1.55; }
  .floating-top { right: 10px; }
  .floating-note strong { font-size: 14px; }
  .floating-note small { font-size: 12px; }
  .promise-grid { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 8px 25px; }
  .promise-item { padding: 22px 20px; margin: 0; }
  .promise-item + .promise-item { padding: 22px 20px; margin: 0; }
  .promise-item > .icon, .promise-item + .promise-item > .icon { top: 31px; right: 24px; }
  .promise-item:nth-child(3) { padding-left: 20px; border-left: 0; }
  .promise-item:nth-child(n+3) { border-top: 1px solid #ffffff24; }
  .promise-item strong { font-size: 17px; }
  .promise-item small { font-size: 13px; }
  .services-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .service-card:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .service-card:last-child .service-graphic { height: 100%; aspect-ratio: auto; }
  .service-card-body > p { font-size: 15px; min-height: 81px; }
  .service-links a { font-size: 14px; }
  .section-heading h2 { font-size: 37px; }
  .benefits-grid { grid-template-columns: .9fr 1.1fr; gap: 35px; }
  .brand-media { padding: 12px; }
  .brand-media > img { aspect-ratio: .85; }
  .brand-media figcaption { padding: 15px; margin-inline: 0; }
  .brand-media figcaption strong { font-size: 13px; }
  .benefits-list { gap: 22px; }
  .price-card { padding: 32px 22px 26px; }
  .price-card h3 { font-size: 21px; }
  .price-value { font-size: 27px; }
  .price-features li { font-size: 14px; }
  .price-description { font-size: 14px; min-height: 76px; }
  .showcase-grid { gap: 36px; }
  .showcase-copy h2 { font-size: 36px; }
  .device-media > img { aspect-ratio: .9; }
  .bundle-heading h2 { font-size: 36px; }
  .bundle-panel { padding: 36px; }
  .bundle { padding-inline: 20px; }
  .bundle h3 { font-size: 22px; }
  .contact-copy h2 { font-size: 36px; }
  .service-hero-grid { grid-template-columns: 1.05fr 1fr; gap: 35px; }
  .page-hero h1 { font-size: 40px; }
}
@media (max-width: 760px) {
  .container { width: calc(100% - 40px); }
  .section { padding-block: 70px; }
  h2, .section-heading h2 { font-size: 33px; }
  .section-heading { margin-bottom: 32px; }
  .section-heading > p, .section-aside p { font-size: 15px; }
  .section-aside { max-width: none; }
  .nav { height: 72px; gap: 10px; }
  .nav-links { top: 72px; height: calc(100dvh - 72px); }
  .nav-cta { min-height: 44px; padding: 10px 13px; font-size: 12px; }
  .brand { gap: 7px; }
  .brand-mark { width: 35px; height: 35px; }
  .brand-name { font-size: 23px; }
  .brand-subtitle { font-size: 6.8px; margin-top: 5px; }
  .hero-grid { padding-block: 48px 85px; gap: 56px; }
  .hero-copy h1 { font-size: clamp(35px, 7.9vw, 52px); letter-spacing: -.05em; margin-block: 20px 24px; }
  .hero-eyebrow { font-size: 11px; letter-spacing: .1em; }
  .hero-copy > .hero-intro { font-size: 17px; line-height: 1.75; margin-bottom: 17px; }
  .hero-copy > p { font-size: 16px; line-height: 1.85; }
  .desktop-break { display: none; }
  .hero-actions { gap: 11px; margin-top: 26px; }
  .hero-actions .button { font-size: 14px; min-height: 50px; padding-inline: 20px; }
  .hero-checks { font-size: 12px; gap: 10px 15px; margin-top: 23px; }
  .hero-visual { width: calc(100% - 12px); }
  .hero-visual::before { inset: -17px -5px 90px 25px; border-radius: 25px; }
  .hero-image-frame { aspect-ratio: 1.45; border-radius: 24px 8px 24px 24px; }
  .floating-note { padding: 11px 13px; gap: 10px; border-radius: 13px; }
  .floating-note strong { font-size: 12px; }
  .floating-note small { font-size: 11px; }
  .floating-top { right: 2px; top: -28px; }
  .floating-bottom { left: 0; bottom: 103px; }
  .floating-note .icon-badge { width: 35px; height: 35px; }
  .hero-visual-footer { margin-inline: 0; font-size: 12px; }
  .promise-grid { padding: 7px 10px; border-radius: 19px; }
  .promise-item, .promise-item + .promise-item { padding: 19px 14px; }
  .promise-item:nth-child(3) { padding-left: 14px; }
  .promise-index { font-size: 35px; }
  .promise-item strong { font-size: 15px; margin-top: 7px; }
  .promise-item small { font-size: 11px; line-height: 1.8; }
  .promise-item > .icon, .promise-item + .promise-item > .icon { width: 21px; height: 21px; top: 27px; right: 16px; }
  .services-grid { grid-template-columns: 1fr; gap: 24px; }
  .service-card:last-child { display: block; grid-column: auto; }
  .service-card:last-child .service-graphic { height: auto; aspect-ratio: 1.5; }
  .service-card-body { padding: 26px; }
  .service-card h3 { font-size: 25px; }
  .service-card-body > p { min-height: 0; }
  .service-links a { font-size: 15px; }
  .infra-line { padding: 20px; }
  .infra-line p { font-size: 14px; }
  .infra-line > div { align-items: flex-start; }
  .infra-line > div > .icon { margin-top: 5px; }
  .portfolio-meta h3 { font-size: 19px; }
  .portfolio-meta p { font-size: 14px; }
  .filter-button { font-size: 13px; padding-inline: 13px; }
  .benefits-grid, .showcase-grid { grid-template-columns: 1fr; gap: 38px; }
  .brand-media { padding: 14px; }
  .brand-media > img { aspect-ratio: 1.35; }
  .brand-media figcaption { padding: 18px; margin-inline: 5px; }
  .brand-media figcaption strong { font-size: 14px; }
  .benefits-list { gap: 24px 20px; margin-top: 28px; }
  .benefit h3 { font-size: 16px; }
  .benefit p { font-size: 14px; }
  .device-media > img { aspect-ratio: 1.35; }
  .showcase-copy h2 { font-size: 33px; }
  .showcase-copy > p { font-size: 16px; }
  .pricing-grid { gap: 29px; }
  .price-card { padding: 31px 26px 27px; }
  .price-card h3 { font-size: 24px; }
  .price-description, .price-features li { font-size: 15px; }
  .price-description { min-height: 0; }
  .price-value { font-size: 33px; }
  .bundle-panel { padding: 30px 25px; }
  .bundle-heading h2 { font-size: 33px; }
  .bundle-heading p, .bundle p { font-size: 15px; }
  .bundle { padding: 25px 0; }
  .bundle h3 { font-size: 24px; }
  .process-step h3 { font-size: 21px; }
  .process-step p { font-size: 15px; }
  .infra-card h3, .journal-card h3 { font-size: 22px; }
  .domain-band h3 { font-size: 22px; }
  .faq-question { font-size: 15px; }
  .faq-answer p { font-size: 15px; }
  .contact-copy h2 { font-size: 33px; }
  .contact-form { padding: 25px 21px; }
  .form-heading h3 { font-size: 22px; }
  .field label { font-size: 14px; }
  .field input, .field select, .field textarea { font-size: 16px; }
  .footer-grid { gap: 35px 25px; }
  .footer h3 { font-size: 15px; }
  .footer li a { font-size: 13px; }
  .footer-bottom { font-size: 12px; }
  .service-hero-grid { grid-template-columns: 1fr; gap: 35px; }
  .page-hero h1 { font-size: 35px; }
  .page-hero .lead { font-size: 16px; }
  .service-hero-photo > img { aspect-ratio: 1.5; }
  .content-block h2 { font-size: 28px; }
  .dialog-head { padding: 18px 20px; }
  .dialog-body { padding: 20px; }
  .preview-dialog { width: calc(100% - 20px); }
  .dialog-head h2 { font-size: 20px; }
  .article p { font-size: 16px; }
}
@media (max-width: 580px) {
  .floating-bottom { display: none; }
  .hero-image-frame figcaption { font-size: 9px; right: 8px; bottom: 8px; }
  .hero-actions .button { flex: 1 1 auto; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .portfolio-image img { aspect-ratio: 1.5; }
  .portfolio-browserbar { height: 27px; }
}
@media (max-width: 390px) {
  .container { width: calc(100% - 32px); }
  .nav-cta { padding-inline: 11px; }
  .brand-name { font-size: 21px; }
  .brand-mark { width: 32px; height: 32px; }
  .brand-subtitle { font-size: 6.3px; }
  .hero-copy h1 { font-size: 35px; }
  .hero-actions .button { width: 100%; }
  .hero-checks { font-size: 11px; }
  .hero-visual-footer { font-size: 11px; }
  .promise-item, .promise-item + .promise-item { padding-inline: 12px; }
  .promise-item small { font-size: 10px; }
  .benefits-list { gap: 24px 15px; }
  .benefit h3 { font-size: 15px; }
  .benefit p { font-size: 13px; }
  .service-card-body { padding: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .will-reveal { opacity: 1; translate: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* Shared contact buttons: clear channel icons, calm entrance and hover feedback. */
.contact-float { gap: 12px; }
.contact-float .contact-channel, .mobile-contact .contact-channel {
  --contact-color: #237c48;
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; min-height: 54px; border: 1px solid #ffffff38; border-radius: 999px;
  color: #fff; background: linear-gradient(135deg, #2b9257, #19683d);
  box-shadow: 0 7px 22px #237c4840, inset 0 1px 0 #ffffff30;
  text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.contact-float .contact-channel { width: auto; min-width: 140px; padding: 9px 18px 9px 12px; }
.contact-float .contact-channel[data-contact-channel="zalo"], .mobile-contact .contact-channel[data-contact-channel="zalo"] {
  --contact-color: #176bd3;
  background: linear-gradient(135deg, #2788f4, #155ac5);
  box-shadow: 0 7px 22px #176bd340, inset 0 1px 0 #ffffff38;
}
.contact-channel .contact-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: #ffffff20; }
.contact-channel .contact-icon .icon { width: 22px; height: 22px; }
.contact-channel .contact-label { color: #fff; font-size: 14px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.contact-float .contact-channel::before {
  content: ""; position: absolute; z-index: -1; inset: -3px; border: 2px solid var(--contact-color); border-radius: inherit;
  opacity: 0; pointer-events: none; animation: webhcm-contact-halo 2.1s ease-out 2;
}
.contact-float .contact-channel[data-contact-channel="zalo"]::before { animation-delay: .35s; }
.contact-channel:focus-visible { outline: 3px solid #d3f36a; outline-offset: 4px; }
.contact-channel:active { transform: scale(.97); }
.back-top { border-radius: 12px; transition: transform .2s ease, box-shadow .2s ease; }
@keyframes webhcm-contact-halo { 0% { transform: scale(1); opacity: .4; } 85%, 100% { transform: scale(1.18,1.4); opacity: 0; } }
@keyframes webhcm-contact-ring { 0%,100% { transform: rotate(0); } 20%,60% { transform: rotate(-13deg); } 40%,80% { transform: rotate(13deg); } }
@media (hover:hover) and (pointer:fine) {
  .contact-float .contact-channel:hover, .mobile-contact .contact-channel:hover { transform: translateY(-3px); filter: brightness(1.06); box-shadow: 0 11px 28px color-mix(in srgb, var(--contact-color) 38%, transparent); }
  .contact-channel[data-contact-channel="phone"]:hover .contact-icon .icon { animation: webhcm-contact-ring .65s ease-in-out; }
  .back-top:hover { transform: translateY(-3px); box-shadow: 0 10px 24px #237c482a; }
}
@media(max-width:600px) {
  .mobile-contact { padding-bottom: calc(9px + env(safe-area-inset-bottom,0px)); box-shadow: 0 -6px 24px #102d2112; }
  .mobile-contact .contact-channel { min-height: 50px; gap: 8px; padding: 8px 12px; }
  .mobile-contact .contact-label { font-size: 13px; }
  .has-contact-bar .back-top { bottom: calc(86px + env(safe-area-inset-bottom,0px)); }
}
@media(prefers-reduced-motion:reduce) {
  .contact-float .contact-channel::before, .contact-channel .contact-icon .icon { animation: none !important; }
  .contact-channel, .back-top { transition: none !important; }
}