/* Ahmed Rizk — core styles. Mobile first, RTL-native (logical properties only). */
:root{
  /* Design System — change values here, never inside a section. */
  --c-primary:#0b3b36;--c-primary-dark:#082a26;--c-primary-soft:#edf4f3;
  --c-accent:#d9a441;--c-accent-dark:#ae8128;
  --c-ink:#18211f;--c-muted:#5a6663;--c-line:#e3e8e6;--c-bg:#fff;--c-alt:#f6f4ee;
  --c-wa:#14803f;--c-wa-dark:#0f6b34;
  --font:"Rizk Cairo",Tahoma,"Segoe UI",system-ui,-apple-system,"Noto Sans Arabic",Arial,sans-serif;
  --radius-sm:10px;--radius:16px;--radius-lg:22px;
  --shadow-sm:0 1px 3px rgba(8,42,38,.07);--shadow:0 8px 24px -10px rgba(8,42,38,.22);--shadow-lg:0 18px 44px -18px rgba(8,42,38,.35);
  --container:1180px;--gutter:16px;--sec-y:clamp(32px,5vw,60px);
  --btn-h:48px;--btn-h-sm:40px;--input-h:46px;
  --c-gold-text:#8f6a1c;
  --fs-h1:clamp(1.9rem,5.4vw,2.7rem);--fs-title:clamp(1.5rem,3.9vw,2.05rem);--fs-h2:clamp(1.4rem,3.4vw,1.85rem);--fs-h3:clamp(1.12rem,2.4vw,1.3rem);--fs-h4:1.06rem;
  --header-h:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-block-start:84px}
body{margin:0;font-family:var(--font);font-size:1rem;line-height:1.8;color:var(--c-ink);background:var(--c-bg);overflow-x:hidden}
img,svg,iframe{max-width:100%;height:auto;vertical-align:middle}
iframe{height:auto}
h1,h2,h3,h4{margin:0 0 .55em;line-height:1.4;font-weight:700;color:var(--c-primary);text-wrap:balance}
h1{font-size:var(--fs-h1);line-height:1.3}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4)}
button,input,select,textarea{font-family:inherit}
p{margin:0 0 1em}
a{color:var(--c-primary);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--c-accent-dark)}
ul,ol{margin:0;padding:0}
:focus-visible{outline:3px solid var(--c-accent);outline-offset:2px;border-radius:4px}
.ico{width:1.25em;height:1.25em;flex:none}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link{position:absolute;inset-inline-start:12px;inset-block-start:-60px;background:var(--c-primary);color:#fff;padding:.6em 1em;border-radius:8px;z-index:200;transition:inset-block-start .2s}
.skip-link:focus{inset-block-start:12px;color:#fff}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:860px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:var(--btn-h);padding:.4em 1.4em;border-radius:var(--radius-sm);border:2px solid transparent;font:inherit;font-weight:700;font-size:1rem;line-height:1.3;text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s,background-color .15s,color .15s}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn--sm{min-height:var(--btn-h-sm);padding:.25em 1.1em;font-size:.95rem}
.btn--primary{background:var(--c-primary);color:#fff}
.btn--primary:hover{background:var(--c-primary-dark);color:#fff}
.btn--accent{background:var(--c-accent);color:#1a1405}
.btn--accent:hover{background:var(--c-accent-dark);color:#fff}
.btn--wa{background:var(--c-wa);color:#fff}
.btn--wa:hover{background:var(--c-wa-dark);color:#fff}
.btn--outline{border-color:var(--c-primary);color:var(--c-primary);background:transparent}
.btn--outline:hover{background:var(--c-primary);color:#fff}

/* Top bar */
.topbar{background:var(--c-primary-dark);color:#e8f0ee;font-size:.88rem}
.topbar__in{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center;padding-block:6px}
.topbar__item{display:inline-flex;align-items:center;gap:.5em;color:inherit;text-decoration:none}
.topbar a:hover{color:var(--c-accent)}

/* Header */
.site-header{background:#fff;border-block-end:1px solid var(--c-line);z-index:100}
.has-sticky-header .site-header{position:sticky;inset-block-start:0}
.site-header.is-scrolled{box-shadow:var(--shadow-sm)}
.header__in{display:flex;align-items:center;justify-content:space-between;min-height:var(--header-h);gap:12px;position:relative}
.brand{display:flex;align-items:center;min-width:0}
.brand__link{display:inline-flex;align-items:center;gap:.6em;text-decoration:none;color:var(--c-primary);font-weight:800;font-size:1.1rem}
.brand__mark{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--c-primary);color:var(--c-accent);font-size:1.25rem;flex:none}
.brand__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55vw}
.custom-logo{max-height:48px;width:auto}
.nav-toggle{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--c-line);background:#fff;border-radius:var(--radius-sm);color:var(--c-primary);cursor:pointer}
.nav-toggle__close{display:none}
.nav-toggle[aria-expanded="true"] .nav-toggle__open{display:none}
.nav-toggle[aria-expanded="true"] .nav-toggle__close{display:block}
.nav{display:none;position:absolute;inset-inline:0;inset-block-start:100%;background:#fff;border-block-end:1px solid var(--c-line);box-shadow:var(--shadow);padding:10px var(--gutter) 16px}
.nav.is-open{display:block}
.nav__list{list-style:none;display:flex;flex-direction:column}
.nav__list a{display:block;padding:.6em .4em;color:var(--c-ink);font-weight:600;text-decoration:none;border-block-end:1px solid var(--c-line)}
.nav__list a:hover,.nav__list .current-menu-item>a{color:var(--c-accent-dark)}
.nav__list .sub-menu{list-style:none;padding-inline-start:14px}
.nav__cta{margin-block-start:14px}
.nav__cta .btn{width:100%}

/* Sections */
.section{padding-block:var(--sec-y)}
.section--alt{background:var(--c-alt)}
.section__head{max-width:720px;margin:0 auto clamp(20px,3.5vw,32px);text-align:center}
.section__title{display:flex;align-items:center;justify-content:center;gap:14px;margin-block-end:.35em;color:var(--c-gold-text)}
.section__title::before,.section__title::after{content:"";flex:1 1 24px;max-width:110px;height:2px;border-radius:2px}
.section__title::before{background:linear-gradient(270deg,transparent,var(--c-accent))}
.section__title::after{background:linear-gradient(90deg,transparent,var(--c-accent))}
.section__desc{color:var(--c-muted);font-size:1.05rem}
.section__desc p{margin:0}
.section__desc p+p{margin-block-start:.8em}
.section__more{text-align:center;margin-block-start:24px}

/* Grids + cards */
.grid{display:grid;gap:16px}
.grid--cards{grid-template-columns:1fr}
.grid--services{grid-template-columns:repeat(2,1fr);gap:12px}
@media (max-width:639px){
  .grid--services .card__body{padding:12px;gap:.25em}
  .grid--services .card__title{font-size:.98rem;line-height:1.5}
  .grid--services .card__text{font-size:.84rem;line-height:1.7;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .grid--services .card__more{display:none}
  .grid--services .card__icon{width:60px;height:60px}
  .grid--services .card__icon .ico{width:30px;height:30px}
}
.grid--posts{grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:640px){.grid--cards.grid--posts{gap:16px}}
@media (max-width:639px){
  .grid--posts .card__body{padding:12px;gap:.25em}
  .grid--posts .card__title{font-size:.98rem;line-height:1.5}
  .grid--posts .card__text{font-size:.84rem;line-height:1.7;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .grid--posts .card__more{display:none}
  .grid--posts .card__meta{font-size:.74rem}
  .grid--posts .card__icon{width:60px;height:60px}
  .grid--posts .card__icon .ico{width:30px;height:30px}
}
.card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent}
.card__media{aspect-ratio:3/2;background:linear-gradient(135deg,var(--c-primary) 0%,var(--c-primary-dark) 100%);display:grid;place-items:center;overflow:hidden}
.card__img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .card__img{transform:scale(1.05)}
.card__icon{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.1);color:var(--c-accent)}
.card__icon .ico{width:42px;height:42px}
.card__body{display:flex;flex-direction:column;gap:.3em;padding:16px 18px 18px;flex:1}
.card__title{margin:0;font-size:1.15rem;line-height:1.45}
.card__link{color:inherit;text-decoration:none}
.card__link::after{content:"";position:absolute;inset:0}
.card__link:hover{color:var(--c-accent-dark)}
.card__text{margin:0;color:var(--c-muted);font-size:.95rem}
.card__meta{font-size:.82rem;color:var(--c-muted)}
.card__more{margin-block-start:auto;padding-block-start:.5em;display:inline-flex;align-items:center;gap:.4em;font-weight:700;color:var(--c-accent-dark);font-size:.95rem}

/* FAQ */
.faq{display:grid;gap:12px}
.faq__item{background:#fff;border:1px solid var(--c-line);border-radius:var(--radius-sm);overflow:hidden}
.faq__item[open]{border-color:var(--c-primary);box-shadow:var(--shadow-sm)}
.faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:1em 1.2em;cursor:pointer;font-weight:700;color:var(--c-primary);list-style:none}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary .ico{transition:transform .25s;color:var(--c-accent-dark)}
.faq__item[open] summary .ico{transform:rotate(180deg)}
.faq__a{padding:0 1.2em 1em;color:var(--c-muted)}
.faq__a p:last-child{margin:0}

/* Chips / stars */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-block-start:14px}
.chips li{background:var(--c-primary-soft);color:var(--c-primary);padding:.25em .9em;border-radius:999px;font-size:.9rem;font-weight:600}
.chips a{text-decoration:none}
.stars{display:inline-flex;gap:2px;color:var(--c-accent)}
.stars .ico{width:18px;height:18px}
.stars .is-off{color:#d5d9d7}

/* CTA band */
.cta{background:linear-gradient(120deg,var(--c-primary) 0%,var(--c-primary-dark) 100%);color:#fff}
.cta__in{display:flex;flex-direction:column;gap:18px;padding-block:clamp(28px,4.5vw,44px);align-items:flex-start}
.cta__title{color:#fff;margin:0 0 .3em}
.cta p{margin:0;color:#d6e4e1}
.cta__btns{display:flex;flex-wrap:wrap;gap:12px}

/* Footer */
.site-footer{background:var(--c-primary-dark);color:#cfdcd9;font-size:.95rem}
.footer__grid{display:grid;gap:26px;padding-block:36px 24px;grid-template-columns:1fr}
.footer__brand{font-size:1.25rem;font-weight:800;color:#fff;margin-block-end:.5em}
.footer__title{font-size:1.05rem;color:#fff;margin-block-end:.8em}
.footer__list{list-style:none;display:grid;gap:.5em}
.footer__list a,.site-footer a{color:#cfdcd9;text-decoration:none}
.footer__list a:hover,.site-footer a:hover{color:var(--c-accent)}
.footer__contact li{display:flex;gap:.6em;align-items:flex-start}
.footer__contact .ico{margin-block-start:.3em;color:var(--c-accent)}
.social{list-style:none;display:flex;gap:10px;margin-block-start:14px}
.social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);transition:background .2s}
.social a:hover{background:var(--c-accent);color:#1a1405}
.footer__bar{border-block-start:1px solid rgba(255,255,255,.1);padding-block:16px;text-align:center;font-size:.88rem}
.footer__bar p{margin:0}

/* Floating CTAs */
.cta-bar{position:fixed;inset-inline:0;inset-block-end:0;z-index:90;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:#fff;border-block-start:1px solid var(--c-line);box-shadow:0 -6px 20px rgba(0,0,0,.08)}
.cta-bar .btn{width:100%;min-height:44px}
.has-cta-bar{padding-block-end:68px}
.wa-float{display:none}

/* Video (lite embed) */
.vid{position:relative;max-width:880px;margin-inline:auto;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;background:var(--c-primary-dark);box-shadow:var(--shadow)}
.vid__btn,.vid__file,.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;margin:0;display:block}
.vid__btn{cursor:pointer;background:transparent;color:#fff}
.vid__poster{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.vid__btn:hover .vid__poster{transform:scale(1.03)}
.vid__btn::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,42,38,.1),rgba(8,42,38,.45))}
.vid__play{position:absolute;z-index:2;inset:0;margin:auto;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--c-accent);color:var(--c-primary-dark);box-shadow:0 8px 28px rgba(0,0,0,.35);transition:transform .2s}
.vid__btn:hover .vid__play{transform:scale(1.08)}
.vid__play .ico{width:34px;height:34px;margin-inline-start:3px}
.vid__btn:focus-visible{outline:3px solid var(--c-accent);outline-offset:-3px}

/* Team / experts */
.team{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0}
.expert{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;border:1px solid var(--c-line);border-radius:var(--radius-lg);padding:20px 12px}
.expert__photo{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;overflow:hidden;background:var(--c-primary-soft);border:3px solid var(--c-accent);margin-block-end:12px}
.expert__photo img{width:100%;height:100%;object-fit:cover}
.expert__ini{font-size:2rem;font-weight:800;color:var(--c-primary)}
.expert__name{margin:0;font-size:var(--fs-h3)}
.expert__role{margin:.2em 0 0;color:var(--c-gold-text,var(--c-accent-dark));font-weight:700}
.expert__bio{margin:.6em 0 0;color:var(--c-muted);font-size:.92rem;line-height:1.7}
.expert__knows{margin:.5em 0 0;font-size:.82rem;color:var(--c-muted)}
@media (min-width:640px){.team{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media (min-width:1024px){.team{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Skip rendering work for off-screen sections until they approach the viewport (lower main-thread cost on mobile). */
main>section:not(:first-child){content-visibility:auto;contain-intrinsic-size:auto 520px}

/* Icon effects (hero badges + feature cards) */
@keyframes tfx-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes tfx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes tfx-ring{to{transform:rotate(332deg)}}
.fx-pulse .ico{animation:tfx-pulse 5s ease-in-out infinite}
.fx-float .ico{animation:tfx-float 6s ease-in-out infinite}
.fx-pulse>li:nth-child(2) .ico,.fx-float>li:nth-child(2) .ico,.fx-pulse>.why:nth-child(2) .ico,.fx-float>.why:nth-child(2) .ico{animation-delay:.25s}
.fx-pulse>li:nth-child(3) .ico,.fx-float>li:nth-child(3) .ico,.fx-pulse>.why:nth-child(3) .ico,.fx-float>.why:nth-child(3) .ico{animation-delay:.5s}
.fx-pulse>li:nth-child(4) .ico,.fx-float>li:nth-child(4) .ico,.fx-pulse>.why:nth-child(4) .ico,.fx-float>.why:nth-child(4) .ico{animation-delay:.75s}
.fx-pulse>.why:nth-child(5) .ico,.fx-float>.why:nth-child(5) .ico{animation-delay:1s}
.fx-pop .ico{transition:transform .6s ease}
.fx-pop>li:hover .ico,.fx-pop>.why:hover .ico{transform:scale(1.07)}
.fx-ring .why__icon::before{animation:tfx-ring 20s linear infinite}
@media (prefers-reduced-motion:reduce){
  .fx-pulse .ico,.fx-float .ico,.fx-ring .why__icon::before{animation:none!important}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

@media (min-width:640px){
  .grid--cards{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:repeat(2,1fr)}
  .cta__in{flex-direction:row;align-items:center;justify-content:space-between}
}
@media (min-width:900px){
  :root{--header-h:76px}
  .nav-toggle{display:none}
  .nav{display:flex;align-items:center;gap:22px;position:static;border:0;box-shadow:none;padding:0;background:transparent}
  .nav__list{flex-direction:row;gap:4px;align-items:center}
  .nav__list a{border:0;padding:.5em .8em;border-radius:999px}
  .nav__list a:hover{background:var(--c-primary-soft)}
  .nav__list li{position:relative}
  .nav__list .sub-menu{display:none;position:absolute;inset-inline-start:0;inset-block-start:100%;min-width:220px;background:#fff;border:1px solid var(--c-line);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:8px}
  .nav__list li:hover>.sub-menu,.nav__list li:focus-within>.sub-menu{display:block}
  .nav__cta{margin:0}
  .nav__cta .btn{width:auto}
  .cta-bar{display:none}
  .has-cta-bar{padding-block-end:0}
  .wa-float{display:grid;place-items:center;position:fixed;inset-inline-end:22px;inset-block-end:22px;width:58px;height:58px;border-radius:50%;background:var(--c-wa);color:#fff;box-shadow:0 8px 24px rgba(20,128,63,.45);z-index:90;transition:transform .2s}
  .wa-float:hover{transform:scale(1.08);color:#fff}
  .wa-float .ico{width:30px;height:30px}
}
@media (min-width:1024px){
  .grid--cards{grid-template-columns:repeat(3,1fr)}
  .footer__grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
}




/* Service request form (hero / section / inside any post or page) */
.req{display:grid;gap:12px;background:#fff;border:1px solid var(--c-line);border-radius:var(--radius-lg);padding:22px 22px 20px;box-shadow:var(--shadow);color:var(--c-ink)}
.req__title{margin:0;font-size:1.3rem;line-height:1.4}
.req__desc{margin:-4px 0 2px;color:var(--c-muted);font-size:.95rem;line-height:1.7}
.req__field{display:grid;gap:5px}
.req__field label{font-weight:700;font-size:.95rem;color:var(--c-primary)}
.req__field input,.req__field select{width:100%;min-height:var(--input-h);padding:.45em .9em;border:1px solid #cfd8d6;border-radius:var(--radius-sm);font:inherit;background:#fff;color:var(--c-ink)}
.req__field input:focus,.req__field select:focus{outline:3px solid rgba(217,164,65,.55);outline-offset:0;border-color:var(--c-primary)}
.req__error{margin:0;padding:.5em .85em;border-radius:var(--radius-sm);background:#fdecea;color:#8a1c14;font-weight:600;font-size:.92rem}
.req__submit{width:100%;margin-block-start:2px}
.req__points{list-style:none;display:grid;gap:4px;margin:2px 0 0;font-size:.9rem;color:var(--c-muted)}
.req__points li{display:flex;gap:.5em;align-items:center}
.req__points .ico{color:var(--c-wa);width:1.1em;height:1.1em}
.req--inline{max-width:560px;margin-inline:auto}
.req-wrap{margin-block:1.8em 0}
.notice-inline{background:#fff8e5;border:1px solid #f0d58a;border-radius:var(--radius-sm);padding:.6em 1em;margin:12px 0;font-size:.92rem}
@media (min-width:768px){
  .req--section{grid-template-columns:repeat(3,1fr);align-items:end;column-gap:14px}
  .req--section>.req__title,.req--section>.req__desc,.req--section>.req__error,.req--section>.req__submit,.req--section>.req__points,.req--section>noscript{grid-column:1/-1}
  .req--section>.req__title,.req--section>.req__desc{text-align:center}
}

/* Table of contents (closed by default) */
.toc{margin-block:1.4em;border:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-alt);overflow:hidden}
.toc__sum{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--btn-h);padding:.4em 1.1em;cursor:pointer;list-style:none;font-weight:700;color:var(--c-primary)}
.toc__sum::-webkit-details-marker{display:none}
.toc__sum .ico{transition:transform .2s;color:var(--c-accent-dark)}
.toc[open] .toc__sum .ico{transform:rotate(180deg)}
.toc[open] .toc__sum{border-block-end:1px solid var(--c-line)}
.toc__list{margin:0;padding:.8em 1.1em 1em;list-style:none;display:grid;gap:.1em;counter-reset:toc}
.toc__list li{counter-increment:toc}
.toc__list a{display:block;padding:.3em 0;color:var(--c-ink);text-decoration:none;font-weight:600;line-height:1.6}
.toc__list a::before{content:counter(toc) ". ";color:var(--c-accent-dark)}
.toc__list a:hover{color:var(--c-accent-dark)}
.toc__list .toc__sub{padding-inline-start:1.2em;counter-increment:none}
.toc__list .toc__sub a{font-weight:500;font-size:.96rem}
.toc__list .toc__sub a::before{content:"– "}
.thiqa-decor{pointer-events:none}

/* Sections (hero, why, stats, reviews, contact, trust) — available on any page that uses the section editor. */
.hero{position:relative;isolation:isolate;color:#fff;background:linear-gradient(135deg,var(--c-primary) 0%,var(--c-primary-dark) 70%);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 15% 20%,rgba(217,164,65,.22),transparent 45%),radial-gradient(circle at 90% 90%,rgba(255,255,255,.08),transparent 40%)}
/* Animated tech background: CSS only (transform animations run on the compositor), no JS / canvas / images. */
.tl{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict;direction:ltr;-webkit-mask-image:radial-gradient(130% 100% at 70% 35%,#000 30%,transparent 100%);mask-image:radial-gradient(130% 100% at 70% 35%,#000 30%,transparent 100%)}
.tl__grid{position:absolute;inset:-72px;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:72px 72px;animation:tl-grid 16s linear infinite;will-change:transform}
.tl__h,.tl__v{position:absolute;display:block;opacity:.5;will-change:transform}
.tl__h{left:0;width:42%;height:2px;background:linear-gradient(90deg,transparent,var(--c-accent));transform:translate3d(-120%,0,0);animation:tl-h var(--d,10s) linear infinite var(--dl,0s)}
.tl__h::after{content:"";position:absolute;right:0;top:-2px;width:6px;height:6px;border-radius:50%;background:var(--c-accent);box-shadow:0 0 10px 1px var(--c-accent)}
.tl__v{top:0;width:2px;height:38%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.55));transform:translate3d(0,-120%,0);animation:tl-v var(--d,12s) linear infinite var(--dl,0s)}
.tl__v::after{content:"";position:absolute;bottom:0;left:-2px;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 10px 1px rgba(255,255,255,.7)}
.tl__h--1{top:16%;--d:9s;--dl:-2s}
.tl__h--2{top:38%;--d:13s;--dl:-7s;width:34%}
.tl__h--3{top:62%;--d:11s;--dl:-4s}
.tl__h--4{top:86%;--d:15s;--dl:-9s;width:30%}
.tl__v--1{left:14%;--d:12s;--dl:-3s}
.tl__v--2{left:48%;--d:16s;--dl:-10s}
.tl__v--3{left:82%;--d:13s;--dl:-6s}
@keyframes tl-grid{to{transform:translate3d(72px,72px,0)}}
@keyframes tl-h{to{transform:translate3d(260%,0,0)}}
@keyframes tl-v{to{transform:translate3d(0,300%,0)}}
@media (max-width:639px){
  .tl__grid{inset:-56px;background-size:56px 56px;animation-name:tl-grid-m}
  .tl__h--2,.tl__h--4,.tl__v--2{display:none}
}
@keyframes tl-grid-m{to{transform:translate3d(56px,56px,0)}}
@media (prefers-reduced-motion:reduce){
  .tl__grid{animation:none}
  .tl__h,.tl__v{display:none}
}
.hero__grid{display:grid;gap:22px;padding-block:clamp(28px,5vw,56px);align-items:center}
.hero__content{min-width:0;max-width:760px}
.hero__title{color:#fff;margin-block-end:.4em;font-size:var(--fs-h1)}
.hero__desc{font-size:clamp(1.02rem,2.4vw,1.2rem);color:#e0ece9;max-width:640px;margin-block-end:1.1em}
.hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin-block-end:1.1em}
.hero__badges{list-style:none;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.hero__badges li{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.96rem}
.hero__badges .ico{color:var(--c-accent)}
.hero__form{min-width:0;width:100%;max-width:520px;margin-inline:auto}
@media (min-width:900px){
  .hero--form .hero__grid{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:44px}
  .hero__form{max-width:none;margin:0}
}

.why-sec{background:linear-gradient(180deg,#fff 0%,#fbf9f3 100%)}
.why-grid{--g:12px;--c:2;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--g)}
.why{position:relative;overflow:hidden;flex:0 0 calc((100% - (var(--c) - 1) * var(--g)) / var(--c));min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 12px 64px;background:linear-gradient(180deg,#fff 0%,#fcfbf7 100%);border:1px solid #eee8d8;border-radius:var(--radius-lg);box-shadow:0 2px 10px rgba(8,42,38,.05);transition:transform .45s ease,box-shadow .45s ease,border-color .45s ease}
.why:hover{transform:translateY(-2px);border-color:#e3d3a8;box-shadow:0 12px 26px -12px rgba(8,42,38,.25)}
.why::before,.why::after{content:"";position:absolute;inset-block-end:0;inset-inline-end:0;border-start-start-radius:100%;pointer-events:none}
.why::before{width:80%;height:46px;background:var(--c-accent);opacity:.9;transform:translateY(-3px)}
.why::after{width:74%;height:42px;background:var(--c-primary)}
.why__icon{position:relative;display:grid;place-items:center;width:76px;height:76px;margin-block-end:16px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#fff 0%,#f6f1e4 100%);border:1px solid #efe7d2;color:var(--c-primary);flex:none}
.why__icon::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px solid transparent;border-block-start-color:var(--c-primary);border-inline-start-color:var(--c-primary);border-block-end-color:var(--c-accent);border-inline-end-color:var(--c-accent);transform:rotate(-28deg)}
.why__icon .ico{width:36px;height:36px}
.why__img{width:100%;height:100%;border-radius:50%;object-fit:contain}
.why__title{margin:0;font-size:1.05rem;line-height:1.5;color:var(--c-primary)}
.why__title::after{content:"";display:block;width:34px;height:3px;border-radius:3px;background:var(--c-accent);margin:10px auto 0}
.why__text{margin:10px 0 0;color:var(--c-muted);font-size:.9rem;line-height:1.7}
.why--bg{border-color:transparent;background:var(--c-primary-dark);color:#fff}
.why--bg>*{position:relative;z-index:2}
.why--bg::before,.why--bg::after{z-index:1}
.why__bg{position:absolute!important;inset:0;width:100%;height:100%;object-fit:cover;z-index:0!important;transition:transform 1.2s ease}
.why:hover .why__bg{transform:scale(1.03)}
.why__shade{position:absolute!important;inset:0;z-index:1!important;background:linear-gradient(180deg,rgba(8,42,38,.62) 0%,rgba(8,42,38,.82) 100%)}
.why--bg .why__title{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.why--bg .why__text{color:rgba(255,255,255,.9);text-shadow:0 1px 4px rgba(0,0,0,.35)}
.why--bg .why__icon{background:#fff;border-color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.28)}
.why-grid--n1 .why{max-width:360px}
@media (max-width:359px){.why-grid{--c:1}}
@media (min-width:640px){
  .why-grid{--c:3;--g:16px}
  .why-grid--n1{--c:1}.why-grid--n2,.why-grid--n4{--c:2}
  .why{padding-inline:16px}
}
@media (min-width:1024px){
  .why-grid--n1{--c:1}.why-grid--n2{--c:2}.why-grid--n3{--c:3}.why-grid--n4{--c:4}.why-grid--n5{--c:5}.why-grid--n6{--c:6}
  .why-grid--n7,.why-grid--n8,.why-grid--n11,.why-grid--n12{--c:4}.why-grid--n9{--c:3}.why-grid--n10{--c:5}
  .why-grid--n5 .why,.why-grid--n6 .why{padding-inline:10px}
}

.stats{background:var(--st-bg,var(--c-primary));color:#fff;position:relative;overflow:hidden;isolation:isolate}
.stats::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 80% 0,rgba(217,164,65,.2),transparent 50%)}
.stats__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
.stats--img::after{content:"";position:absolute;inset:0;z-index:-2;background:var(--st-bg,var(--c-primary));opacity:var(--st-ov,.85)}
.stats__grid{position:relative;display:grid;grid-template-columns:repeat(var(--st-cols-m,2),minmax(0,1fr));gap:24px 12px;padding-block:var(--st-pad,clamp(26px,4.5vw,44px));text-align:var(--st-align,center)}
.stat__num{font-size:var(--st-num-m,clamp(2rem,7vw,3.2rem));font-weight:var(--st-weight,800);color:var(--st-num,var(--c-accent));line-height:1.1;margin:0 0 .2em;font-variant-numeric:tabular-nums}
.stat__label{margin:0;color:var(--st-lbl,#d6e4e1);font-weight:600;font-size:var(--st-lbl-m,1rem)}
.stats--div .stat+.stat{border-inline-start:1px solid rgba(255,255,255,.18)}
@media (min-width:640px){
  .stat__num{font-size:var(--st-num-d,var(--st-num-m,clamp(2rem,7vw,3.2rem)))}
  .stat__label{font-size:var(--st-lbl-d,var(--st-lbl-m,1rem))}
}

.grid--reviews{grid-template-columns:1fr}
.review{margin:0;background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:14px}
.review__text{margin:0;color:var(--c-ink)}
.review__who{display:flex;align-items:center;gap:12px;margin-block-start:auto}
.review__who small{display:block;color:var(--c-muted)}
.review__avatar{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--c-primary);color:var(--c-accent);font-weight:800}

.contact{display:grid;gap:20px}
.contact__card{background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);padding:clamp(20px,4vw,32px)}
.contact__list{list-style:none;display:grid;gap:16px}
.contact__list li{display:flex;gap:14px;align-items:flex-start}
.contact__list .ico{width:40px;height:40px;padding:9px;border-radius:12px;background:var(--c-primary-soft);color:var(--c-primary);flex:none}
.contact__list small{display:block;color:var(--c-muted);font-size:.85rem}
.contact__list a{font-weight:700;text-decoration:none}
.contact__sub{font-size:1.05rem;margin-block:22px 0}
.contact__grid{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:1fr}
.contact__item{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow-sm)}
.contact__ico{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--c-alt);background:color-mix(in srgb,var(--c-accent) 16%,#fff);color:var(--c-primary);flex:none}
.contact__ico .ico{width:22px;height:22px}
.contact__txt{display:grid;gap:2px;min-width:0;line-height:1.5}
.contact__txt strong{color:var(--c-primary-dark);font-size:1rem}
.contact__txt span{color:var(--c-muted);font-size:.95rem}
.contact__txt a{color:var(--c-ink);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.contact__txt a:hover{color:var(--c-primary)}
.contact__map{min-height:320px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--c-line);background:var(--c-alt)}
.contact__map iframe{width:100%;height:100%;min-height:320px;border:0;display:block}

@media (min-width:640px){
  .grid--reviews{grid-template-columns:repeat(2,1fr)}
  .contact__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){
  .stats__grid{grid-template-columns:repeat(var(--st-cols-d,4),minmax(0,1fr))}
}
@media (min-width:1024px){
  .grid--reviews{grid-template-columns:repeat(3,1fr)}
  .contact__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Trust & proof */
.metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-block-end:28px}
.metric{background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);padding:18px;text-align:center}
.metric__value{font-size:clamp(1.7rem,6vw,2.4rem);font-weight:800;color:var(--c-primary);margin:0;line-height:1.2;font-variant-numeric:tabular-nums}
.metric__label{margin:.2em 0 0;font-weight:700}
.metric__src{margin:.3em 0 0;font-size:.78rem;color:var(--c-muted)}
.trust__cards{list-style:none;display:grid;gap:12px;margin-block-end:28px}
.trust__cards li{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);padding:16px}
.trust__cards .ico{width:36px;height:36px;padding:7px;border-radius:12px;background:var(--c-primary-soft);color:var(--c-primary);flex:none}
.trust__cards strong{display:block}
.trust__cards span{display:block;color:var(--c-muted);font-size:.92rem}
.trust__cards a{font-size:.9rem;font-weight:700}
.logos{list-style:none;display:flex;flex-wrap:wrap;gap:18px 30px;align-items:center;justify-content:center}
.logos img{max-height:54px;width:auto;max-width:140px;object-fit:contain;filter:grayscale(1);opacity:.8;transition:filter .2s,opacity .2s}
.logos a:hover img{filter:none;opacity:1}
@media (min-width:768px){.metrics{grid-template-columns:repeat(4,1fr)}.trust__cards{grid-template-columns:repeat(2,1fr)}}

/* Price calculator (layered) */
.calc{background:linear-gradient(135deg,var(--c-primary-dark),var(--c-primary));color:#fff;border-radius:var(--radius-lg);padding:clamp(18px,3vw,28px);box-shadow:var(--shadow-lg);display:grid;gap:18px}
.calc__title{margin:0;color:#fff;font-size:var(--fs-h3);text-align:center}
.calc__desc{margin:0;color:rgba(255,255,255,.78);font-size:.92rem;text-align:center}
.calc__layer{border:0;margin:0;padding:0;display:grid;gap:10px;min-width:0}
.calc__layer[hidden]{display:none}
.calc__layer legend{padding:0;margin-bottom:8px;font-weight:700;font-size:.92rem;color:var(--c-accent)}
.calc__choices{display:flex;flex-wrap:wrap;gap:8px}
.calc__btn{min-height:var(--btn-h-sm);padding:8px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s}
.calc__btn:hover{background:rgba(255,255,255,.16)}
.calc__btn[aria-pressed="true"]{background:var(--c-accent);border-color:var(--c-accent);color:#1a1405}
.calc__btn:focus-visible,.calc__check input:focus-visible,.calc__qty input:focus-visible,.calc__date input:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
.calc__items{display:grid;gap:8px}
.calc__item{display:grid;gap:8px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);border-radius:var(--radius-sm);padding:10px 12px}
.calc__check{display:flex;align-items:center;gap:10px;cursor:pointer}
.calc__check input{width:20px;height:20px;accent-color:var(--c-accent);flex:none}
.calc__name{flex:1;font-size:.95rem}
.calc__p{white-space:nowrap;color:var(--c-accent);font-weight:700;font-size:.9rem}
.calc__qty,.calc__date{display:flex;align-items:center;gap:10px;font-size:.9rem}
.calc__qty[hidden],.calc__date[hidden]{display:none}
.calc__qty input,.calc__date input{min-height:var(--input-h);border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;padding:0 10px;font:inherit}
.calc__qty input{width:90px}
.calc__result{display:grid;gap:6px;text-align:center;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);border-radius:var(--radius);padding:18px 14px}
.calc__k{font-size:.85rem;color:rgba(255,255,255,.75)}
.calc__v{font-size:clamp(1.2rem,4vw,2rem);color:var(--c-accent);line-height:1.3}
.calc:not(.is-done) .calc__v{font-size:1rem;font-weight:600;color:rgba(255,255,255,.8)}
.calc__old{font-size:1.1rem;color:rgba(255,255,255,.65);text-decoration:line-through}
.calc__old[hidden],.calc__promo[hidden],.calc__cta[hidden]{display:none}
.calc__promo{font-weight:700;color:var(--c-accent)}
.calc__note{font-size:.8rem;color:rgba(255,255,255,.7)}
.calc__cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.calc__admin-note{margin:0;padding:10px 12px;border-radius:var(--radius-sm);background:#fff3cd;color:#5c4400;font-size:.85rem}

/* Before / after projects */
.grid--projects{grid-template-columns:1fr}
@media (min-width:640px){.grid--projects{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.grid--projects{grid-template-columns:repeat(3,1fr)}}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--c-line)}
.ba figure{position:relative;margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--c-alt)}
.ba img,.ba__img{width:100%;height:100%;object-fit:cover;display:block}
.ba figcaption{position:absolute;inset-block-end:8px;inset-inline-start:8px;background:rgba(8,42,38,.85);color:#fff;font-size:.8rem;font-weight:700;padding:.15em .7em;border-radius:999px}
.ba--big{border-radius:var(--radius);overflow:hidden;margin-block-end:26px}
.ba--big figure{aspect-ratio:4/3}
.chips--links a{display:block;color:inherit;text-decoration:none}
.chips--links li:hover{background:var(--c-primary);color:#fff}


/* Map facade (no third-party iframe until asked: faster, back/forward cache friendly) */
.contact__mapbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;height:100%;min-height:320px;border:0;cursor:pointer;font:inherit;font-weight:700;color:var(--c-primary-dark);background:repeating-linear-gradient(45deg,var(--c-alt),var(--c-alt) 14px,#fff 14px,#fff 28px)}
.contact__mapbtn .ico{width:40px;height:40px;color:var(--c-accent-dark)}
.contact__mapbtn:focus-visible{outline:3px solid var(--c-accent);outline-offset:-3px}

/* Lighter hero on phones: no endless animated grid */
@media (max-width:767px){.tl__grid,.tl__h,.tl__v{animation:none!important;will-change:auto}.tl__h,.tl__v{display:none}}


/* AI tools showcase */
.aitools{grid-template-columns:repeat(4,1fr);gap:16px}
.aitool{display:flex;flex-direction:column;align-items:flex-start;gap:.5em;background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);padding:18px}
.aitool__title{font-size:1.05rem;line-height:1.5;margin:0}
.aitool__text{margin:0;font-size:.9rem;line-height:1.8;flex:1}
.aitool__btn{margin-top:.4em}
@media (max-width:1023px){.aitools{grid-template-columns:repeat(2,1fr);gap:12px}}
@media (max-width:640px){.aitool{padding:12px}.aitool__title{font-size:.95rem}.aitool__text{font-size:.82rem;line-height:1.7;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.aitool__btn{font-size:.85rem;padding:.55em .8em;width:100%;justify-content:center}}

/* HTML sitemap */
.sitemap h2{margin:1.4em 0 .5em;font-size:1.15rem}
.sitemap__list{columns:2;column-gap:2em;padding-inline-start:1.2em;margin:0}
.sitemap__list li{break-inside:avoid;margin:.35em 0}
@media (max-width:640px){.sitemap__list{columns:1}}
.footer__bar a{color:inherit;text-decoration:underline}

/* ===== Section builder: emoji, cards, icon tiles, numbered stages (1.9.3) ===== */
.emo{display:inline-block;font-style:normal;line-height:1;font-size:1.9em;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.why__icon .emo{font-size:36px}
.fx-pulse .emo{animation:tfx-pulse 5s ease-in-out infinite}
.fx-float .emo{animation:tfx-float 6s ease-in-out infinite}
.fx-pop .emo{transition:transform .6s ease}
.fx-pop :hover>.emo,.fx-pop :hover>.ico{transform:scale(1.07)}
@media (prefers-reduced-motion:reduce){.fx-pulse .emo,.fx-float .emo{animation:none!important}}

/* cards */
.cardx-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
@media (min-width:640px){.cardx-grid{grid-template-columns:repeat(min(var(--cols,3),2),minmax(0,1fr))}}
@media (min-width:1024px){.cardx-grid{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}}
.cardx{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s,border-color .25s}
.cardx:hover,.cardx:focus-within{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--c-accent)}
.cardx__media{width:100%;aspect-ratio:3/2;overflow:hidden;background:var(--c-primary-soft)}
.cardx__img{width:100%;height:100%;object-fit:cover;display:block}
.cardx__icon{display:grid;place-items:center;width:64px;height:64px;margin-block:18px 0;border-radius:50%;background:var(--c-primary);color:var(--c-accent);border:4px solid #fff;box-shadow:var(--shadow-sm);flex:none}
.cardx__icon .ico{width:30px;height:30px}
.cardx__icon .emo{font-size:30px}
.cardx--img .cardx__icon{margin-block:-32px 0;position:relative;z-index:1}
.cardx__body{padding:12px 18px 22px;display:flex;flex-direction:column;align-items:center;gap:.2em;flex:1}
.cardx__title{margin:.2em 0 .1em;font-size:1.12rem}
.cardx__link{color:inherit;text-decoration:none}
.cardx__link::after{content:"";position:absolute;inset:0}
.cardx__link:hover{color:var(--c-accent-dark)}
.cardx__text{margin:0;color:var(--c-muted);font-size:.95rem}
.cardx__more{margin-block-start:auto;padding-block-start:.7em;font-weight:700;color:var(--c-accent-dark);font-size:.95rem}

/* icon tiles */
.ic-grid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){.ic-grid{grid-template-columns:repeat(min(var(--cols,4),3),minmax(0,1fr))}}
@media (min-width:1024px){.ic-grid{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}}
.ic{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.25em;padding:20px 12px}
.ic-grid--tiles .ic{background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s,border-color .25s}
.ic-grid--tiles .ic:hover,.ic-grid--tiles .ic:focus-within{transform:translateY(-3px);border-color:var(--c-accent);box-shadow:var(--shadow)}
.ic__icon{display:grid;place-items:center;width:68px;height:68px;margin-block-end:8px;border-radius:18px;background:var(--c-primary-soft);color:var(--c-primary);flex:none}
.ic-grid--plain .ic__icon{background:none;width:60px;height:60px}
.ic__icon .ico{width:36px;height:36px}
.ic__icon .emo{font-size:34px}
.ic__title{margin:0;font-size:1rem;line-height:1.5}
.ic__link{color:inherit;text-decoration:none}
.ic__link::after{content:"";position:absolute;inset:0}
.ic__link:hover{color:var(--c-accent-dark)}
.ic__text{margin:0;color:var(--c-muted);font-size:.88rem;line-height:1.7}

/* numbered stages with arrows */
.stp-row{list-style:none;margin:0;padding:0;display:grid;gap:26px 22px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:479px){.stp-row{grid-template-columns:minmax(0,1fr)}}
@media (min-width:640px){.stp-row{grid-template-columns:repeat(min(var(--cols,5),3),minmax(0,1fr))}}
@media (min-width:1024px){.stp-row{grid-template-columns:repeat(var(--cols,5),minmax(0,1fr))}}
.stp{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3em}
.stp__num{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--c-primary);color:var(--c-accent);font-weight:800;font-size:1.05rem;border:3px solid #fff;box-shadow:0 0 0 2px var(--c-accent);margin-block-end:-20px;position:relative;z-index:1}
.stp__media{display:grid;place-items:center;width:100%;aspect-ratio:1/1;max-width:190px;border-radius:var(--radius);overflow:hidden;background:var(--c-primary-soft);color:var(--c-primary);border:1px solid var(--c-line)}
.stp__img{width:100%;height:100%;object-fit:cover;display:block}
.stp__media .ico{width:44%;height:44%}
.stp__media .emo{font-size:clamp(40px,6vw,64px)}
.stp__title{margin:.5em 0 0;font-size:1rem;line-height:1.5}
.stp__text{margin:0;color:var(--c-muted);font-size:.9rem;line-height:1.7}
.stp:not(:last-child)::after{content:"";position:absolute;inset-block-start:calc(min(95px,50%) + 14px);inset-inline-end:-17px;width:12px;height:12px;border-bottom:3px solid var(--c-accent);border-left:3px solid var(--c-accent);transform:rotate(45deg);display:none}
@media (min-width:1024px){.stp:not(:last-child)::after{display:block}}
.req__hp{position:absolute!important;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.req__note{margin:.6em 0 0;font-size:.82rem;color:var(--c-muted);text-align:center}