/*!****************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/blocks/hero/editor.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* Editor-only tweaks for the hero block.
   The global keyframes (fadeUp, morph, marquee…) are not loaded inside
   the editor iframe, so neutralise entrance animations to keep all
   content visible while editing, and tame the full-bleed marquee. */
.editor-styles-wrapper .wp-block-dykyiivan-hero .hero-eyebrow,
.editor-styles-wrapper .wp-block-dykyiivan-hero .hero-greeting,
.editor-styles-wrapper .wp-block-dykyiivan-hero .hero-heading,
.editor-styles-wrapper .wp-block-dykyiivan-hero .hero-role,
.editor-styles-wrapper .wp-block-dykyiivan-hero .hero-sub,
.editor-styles-wrapper .wp-block-dykyiivan-hero .hero-actions,
.editor-styles-wrapper .wp-block-dykyiivan-hero .hero-stats,
.editor-styles-wrapper .wp-block-dykyiivan-hero .hero-photo {
  opacity: 1 !important;
  animation: none !important;
}
.editor-styles-wrapper .wp-block-dykyiivan-hero .hero-photo--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 8, 8, 0.05);
  border: 2px dashed rgba(8, 8, 8, 0.25);
}
.editor-styles-wrapper .wp-block-dykyiivan-hero .hero-photo-tools {
  position: absolute;
  inset: auto 0 14px 0;
  display: flex;
  gap: 8px;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}
.editor-styles-wrapper .wp-block-dykyiivan-hero .hero-photo:hover .hero-photo-tools {
  opacity: 1;
}
/*!***************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/blocks/hero/style.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/** Хедер: горизонтальний ряд замість бургера. */
/* Shared section eyebrow / subtitle style — one source of truth.
   Use via `@include eyebrow;` (colour + margin stay per-block) or the
   global `.subtitle` class. */
/* ===========================================================
   Кнопки-пігулки — ОДНЕ джерело правди для розмірів.

   Раніше ту саму кнопку було написано в кількох місцях окремо, і вони
   розповзлись: .process-btn 15/30 gap 8, .cta-btn 13/22 gap 10,
   .btn-secondary 14/28. Тобто «однакова» кнопка мала різні розміри.

   Тепер геометрія лише тут; споживачі: .btn-primary / .btn-secondary
   (банер), .process-btn (CTA), .cta-btn (services), core/button (is-style-*).

   Прозора рамка 1.5px у базі — щоб обведений варіант мав ІДЕНТИЧНУ
   геометрію, а не був на 3px нижчим через товщину рамки.
   =========================================================== */
/* темна пігулка — головна кнопка (банер «Замовити сайт») */
/* амбер пігулка — CTA («Обговорити проєкт», services) */
/* обведена пігулка — вторинна кнопка (банер «Мої послуги») */
/* стрілка ↗ через CSS — для кнопок, куди SVG у розмітку не вставити
   (core/button). Там, де SVG уже є в розмітці (.btn-primary, .cta-btn),
   анімацію робить `svg` у pill-base. */
/* ===========================================================
   Hero block — ported 1:1 from the design (hero.html).
   Colours via theme.json presets (§8). Keyframes (morph,
   float1/2/3, pulse, wave, fadeUp, fadeIn, marquee) live in
   the global _effects.scss.
   =========================================================== */
.wp-block-dykyiivan-hero {
  padding-top: 72px;
  position: relative;
  background: var(--wp--preset--color--cream);
  overflow-x: clip;
}
@media screen and (min-width: 1024px) {
  .wp-block-dykyiivan-hero {
    padding-top: 88px;
  }
}
.wp-block-dykyiivan-hero {
  /* none/wide: content == contentSize (1300), gutter from constrained parent */
}
.wp-block-dykyiivan-hero .hero-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--site-container);
  margin: 0 auto;
  padding: 0 0 50px;
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 1024px) {
  .wp-block-dykyiivan-hero .hero-inner {
    grid-template-columns: 1fr 1fr;
    padding: 0 0 60px;
  }
}
.wp-block-dykyiivan-hero {
  /* full: bleed bg, re-cap inner content to 1300 + side gutter */
}
.wp-block-dykyiivan-hero.alignfull .hero-inner {
  max-width: calc(var(--site-container) + var(--site-gutter) * 2);
  padding: 0 20px 50px;
}
@media screen and (min-width: 1024px) {
  .wp-block-dykyiivan-hero.alignfull .hero-inner {
    padding: 0 var(--site-gutter) 60px;
  }
}
.wp-block-dykyiivan-hero {
  /* Amber blob */
}
.wp-block-dykyiivan-hero .hero-blob {
  position: absolute;
  right: -40px;
  top: -20px;
  width: 340px;
  height: 360px;
  background: var(--wp--preset--color--primary);
  border-radius: 60% 40% 55% 45%/50% 60% 40% 50%;
  animation: morph 10s ease-in-out infinite alternate;
  z-index: 0;
  pointer-events: none;
}
@media screen and (min-width: 1024px) {
  .wp-block-dykyiivan-hero .hero-blob {
    right: 48px;
    top: 0;
    width: 620px;
    height: 640px;
  }
}
.wp-block-dykyiivan-hero .hero-left {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 0 24px;
  order: 1;
}
@media screen and (min-width: 1024px) {
  .wp-block-dykyiivan-hero .hero-left {
    padding: 60px 48px 100px 0;
    order: 0;
  }
}
.wp-block-dykyiivan-hero .hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  opacity: 0;
  animation: fadeUp 0.7s 0.2s forwards;
}
.wp-block-dykyiivan-hero .hero-eyebrow-line {
  width: 40px;
  height: 1.5px;
  background: var(--wp--preset--color--muted);
}
.wp-block-dykyiivan-hero .hero-eyebrow-text {
  font-family: var(--wp--preset--font-family--body-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}
.wp-block-dykyiivan-hero .hero-greeting {
  font-family: var(--wp--preset--font-family--body-font);
  font-size: 17px;
  font-weight: 400;
  color: var(--wp--preset--color--muted);
  margin-bottom: 10px;
  opacity: 0;
  animation: fadeUp 0.7s 0.3s forwards;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wp-block-dykyiivan-hero .greeting-wave {
  font-size: 22px;
  display: inline-block;
  animation: wave 2s ease-in-out infinite;
}
.wp-block-dykyiivan-hero .hero-heading {
  font-family: var(--wp--preset--font-family--heading-font);
  font-weight: 800;
  font-size: clamp(52px, 14vw, 72px);
  line-height: 0.94;
  letter-spacing: -0.03em;
  color: var(--wp--preset--color--foreground);
  margin-bottom: 24px;
  opacity: 0;
  animation: fadeUp 0.7s 0.4s forwards;
}
@media screen and (min-width: 1024px) {
  .wp-block-dykyiivan-hero .hero-heading {
    font-size: clamp(50px, 6.8vw, 86px);
  }
}
.wp-block-dykyiivan-hero .hero-heading .name-first,
.wp-block-dykyiivan-hero .hero-heading .name-last {
  display: block;
}
.wp-block-dykyiivan-hero .hero-heading .highlight {
  position: relative;
  display: inline-block;
}
.wp-block-dykyiivan-hero .hero-heading .highlight::before {
  content: "";
  position: absolute;
  bottom: 4px;
  left: -4px;
  right: -4px;
  height: 14px;
  background: var(--wp--preset--color--primary);
  z-index: -1;
  border-radius: 3px;
  transform: skewX(-3deg);
}
.wp-block-dykyiivan-hero .hero-role {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--wp--preset--color--foreground);
  color: var(--wp--preset--color--background);
  border-radius: 100px;
  padding: 8px 18px;
  font-family: var(--wp--preset--font-family--body-font);
  font-size: 12px;
  font-weight: 500;
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: 24px;
  opacity: 0;
  animation: fadeUp 0.7s 0.5s forwards;
}
.wp-block-dykyiivan-hero .hero-role-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wp--preset--color--primary);
  animation: pulse 2s infinite;
}
.wp-block-dykyiivan-hero .hero-sub {
  font-family: var(--wp--preset--font-family--body-font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--wp--preset--color--muted);
  max-width: 420px;
  margin-bottom: 40px;
  opacity: 0;
  animation: fadeUp 0.7s 0.6s forwards;
}
.wp-block-dykyiivan-hero .hero-sub strong {
  color: var(--wp--preset--color--foreground);
  font-weight: 500;
}
.wp-block-dykyiivan-hero .hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 0.7s 0.7s forwards;
}
.wp-block-dykyiivan-hero {
  /* .btn-primary / .btn-secondary — shared, see global/_buttons-design.scss */
}
.wp-block-dykyiivan-hero .hero-stats {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 52px;
  padding-top: 28px;
  border-top: 1px solid rgba(8, 8, 8, 0.1);
  opacity: 0;
  animation: fadeUp 0.7s 0.85s forwards;
  flex-wrap: wrap;
}
@media screen and (min-width: 1024px) {
  .wp-block-dykyiivan-hero .hero-stats {
    gap: 32px;
  }
}
.wp-block-dykyiivan-hero .stat-num {
  font-family: var(--wp--preset--font-family--heading-font);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.03em;
  color: var(--wp--preset--color--foreground);
}
.wp-block-dykyiivan-hero .stat-num sup {
  font-size: 13px;
  vertical-align: super;
}
.wp-block-dykyiivan-hero .stat-label {
  font-family: var(--wp--preset--font-family--body-font);
  font-size: 11px;
  font-weight: 400;
  color: var(--wp--preset--color--muted);
  margin-top: 3px;
}
.wp-block-dykyiivan-hero .stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(8, 8, 8, 0.12);
  display: none;
}
@media screen and (min-width: 1024px) {
  .wp-block-dykyiivan-hero .stat-divider {
    display: block;
  }
}
.wp-block-dykyiivan-hero {
  /* ── RIGHT: floating cards ── */
}
.wp-block-dykyiivan-hero .hero-right {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  order: 2;
}
@media screen and (min-width: 1024px) {
  .wp-block-dykyiivan-hero .hero-right {
    justify-content: center;
    padding: 60px 0 60px 40px;
    order: 0;
  }
}
.wp-block-dykyiivan-hero {
  /* Author photo in front of the amber blob (a bit smaller than the sphere) */
}
.wp-block-dykyiivan-hero .hero-photo {
  position: relative;
  z-index: 3;
  width: 240px;
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  opacity: 0;
  animation: fadeIn 0.9s 0.5s forwards;
}
@media screen and (min-width: 1024px) {
  .wp-block-dykyiivan-hero .hero-photo {
    width: 460px;
  }
}
.wp-block-dykyiivan-hero .hero-photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
  display: block;
}
@media (max-width: 480px) {
  .wp-block-dykyiivan-hero .hero-heading {
    font-size: clamp(44px, 13vw, 62px);
  }
  .wp-block-dykyiivan-hero .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }
  .wp-block-dykyiivan-hero .hero-actions .btn-primary,
  .wp-block-dykyiivan-hero .hero-actions .btn-secondary {
    width: 100%;
    justify-content: center;
  }
}

/*# sourceMappingURL=index.css.map*/