/* ==========================================================
   CoregenX home page (index.html), round 4 (desktop + tablet + phone).
   Colours follow the old homepage: deep violet bands (#432d92), coral/pink accents,
   cyan highlights, white + soft lavender sections. The logo's mint/teal is used only
   as a small accent. No purple-to-pink gradients.
   Motion: transform / opacity only, off for reduced motion.
   ========================================================== */

.hp {
    --violet: #432d92;
    --violet-2: #5b3fd0;
    --violet-dk: #2f1f66;
    --night: #1c1446;
    --pink: #d9265f;
    --pink-dk: #c01f53;
    --coral: #f9758f;
    --cyan: #00c0ff;
    --mint: #4cdaa0;
    --teal: #359fad;
    --ink: #343c55;
    --body: #5e6371;
    --muted: #868b9b;
    --line: #e9eaf2;
    --soft: #f6f5fb;
    --head: 'Jost', sans-serif;
    --text: 'Open Sans', sans-serif;
    --ease: cubic-bezier(.22, .8, .24, 1);
    display: block;
    background: #fff;
    color: var(--body);
    font-family: var(--text);
}

.hp *,
.hp *::before,
.hp *::after {
    box-sizing: border-box;
}

.hp section[id] {
    scroll-margin-top: 90px;
}

.hpWrap {
    width: 100%;
    max-width: 1230px;
    margin: 0 auto;
    padding: 0 15px;
}

/* ---------- Shared bits ---------- */

.hpSec {
    position: relative;
    padding: 64px 0;
}

.hpSec--soft {
    background: var(--soft);
}

.hpSec--violet {
    overflow: hidden;
    isolation: isolate;
    background: var(--violet);
    color: rgba(255, 255, 255, .84);
}

.hpEyebrow {
    margin: 0 0 10px;
    font-family: var(--head);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 4.5px;
    text-transform: uppercase;
    color: var(--pink);
}

.hpSec--violet .hpEyebrow,
.hpTalkBox .hpEyebrow {
    color: var(--coral);
}

.hpTitle {
    margin: 0;
    font-family: var(--head);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--ink);
}

.hpHl {
    color: var(--violet-2);
}

.hpSec--violet .hpTitle,
.hpTalkBox .hpTitle {
    color: #fff;
}

.hpSec--violet .hpHl,
.hpTalkBox .hpHl {
    color: var(--cyan);
}

.hpLead {
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 26px;
    color: var(--body);
}

.hpSec--violet .hpLead,
.hpTalkBox .hpLead {
    color: rgba(255, 255, 255, .8);
}

/* Section head: title left, short text or a link right */
.hpHead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 32px;
}

.hpHeadText {
    max-width: 380px;
    margin: 0;
    padding-left: 20px;
    border-left: 2px solid var(--coral);
    font-size: 16px;
    line-height: 26px;
    color: var(--body);
}

.hpCtas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Buttons (pill, as on the old homepage) */
.hpBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 0 26px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--head);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.hpBtn:hover,
.hpBtn:focus {
    text-decoration: none;
}

.hpBtn:focus-visible {
    outline: 3px solid rgba(0, 192, 255, .55);
    outline-offset: 2px;
}

.hpBtnArrow,
.hpBtnIco {
    flex: none;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .25s ease;
}

.hpBtnIco {
    fill: currentColor;
    stroke: none;
}

.hpBtn:hover .hpBtnArrow {
    transform: translateX(3px);
}

.hpBtn--pink {
    background: var(--pink);
    color: #fff;
    box-shadow: 0 14px 26px -14px rgba(217, 38, 95, .75);
}

.hpBtn--pink:hover,
.hpBtn--pink:focus {
    background: var(--pink-dk);
    color: #fff;
    transform: translateY(-2px);
}

.hpBtn--line {
    border-color: #22242e;
    background: transparent;
    color: #22242e;
}

.hpBtn--line:hover,
.hpBtn--line:focus {
    background: #22242e;
    color: #fff;
}

.hpBtn--ghost {
    border-color: rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.hpBtn--ghost:hover,
.hpBtn--ghost:focus {
    border-color: #fff;
    background: #fff;
    color: var(--violet);
}

.hpBtn--wa {
    background: linear-gradient(135deg, #0c8a72, #0b6f80);
    color: #fff;
}

.hpBtn--wa:hover,
.hpBtn--wa:focus {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -14px rgba(11, 111, 128, .8);
}

.hpBtn--sm {
    min-height: 44px;
    padding: 0 20px;
    font-size: 15px;
}

.hpBtn--block {
    width: 100%;
}

/* Scroll reveal (only once JS is running; content below the first screen) */
.hp-js [data-rv] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s ease, transform .8s var(--ease);
}

.hp-js [data-rv].is-in {
    opacity: 1;
    transform: none;
}

/* Soft circles on violet bands (a quieter take on the old homepage's cyan and coral circles) */
.hpBlob {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

.hpBlob--cyan {
    top: -150px;
    right: -110px;
    width: 340px;
    height: 340px;
    background: var(--cyan);
    opacity: .16;
}

.hpBlob--coral {
    bottom: -120px;
    left: -90px;
    width: 240px;
    height: 240px;
    background: var(--coral);
    opacity: .2;
}

/* ---------- 1. Hero slider ---------- */

.hpHero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: clamp(540px, calc(100svh - 82px), 620px);
    background: var(--night);
    color: #fff;
    font-family: var(--head);
    cursor: grab;
    touch-action: pan-y;
}

.hpHero a,
.hpHero button {
    cursor: pointer;
}

.hpHero.is-dragging,
.hpHero.is-dragging a {
    cursor: grabbing;
    -webkit-user-select: none;
    user-select: none;
}

.hpHeroBgs {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.hpHeroBg {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease;
}

.hpHeroBg.is-active {
    opacity: 1;
}

.hpHeroBg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% 40%;
    transform: scale(1.06);
    transition: transform 7s linear;
    -webkit-user-drag: none;
}

.hpHeroBg.is-active img,
.hpHero:not(.is-ready) .hpHeroBg img {
    transform: none;
}

/* Readable left side in deep violet + a faint tech grid */
.hpHero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(680px 480px at 0% 100%, rgba(67, 45, 146, .55), transparent 70%),
        linear-gradient(90deg, rgba(28, 20, 70, .95) 0%, rgba(28, 20, 70, .86) 32%, rgba(28, 20, 70, .4) 58%, rgba(28, 20, 70, .05) 100%);
}

.hpHero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 55%);
    mask-image: linear-gradient(90deg, #000 0%, transparent 55%);
    pointer-events: none;
}

.hpHeroInner {
    flex: 1;
    display: flex;
    align-items: center;
    padding-top: 44px;
    padding-bottom: 40px;
}

.hpHeroCopy {
    width: 100%;
    max-width: 640px;
}

/* Page H1: the full company name (coral, like the old eyebrows) + the main keyword in a pill */
.hpHeroH1 {
    margin: 0 0 26px;
    font-family: var(--head);
    font-weight: 500;
}

.hpHeroBrand {
    display: block;
    margin-bottom: 14px;
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--coral);
}

.hpHeroKw {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-size: 15px;
    line-height: 1.35;
    color: rgba(255, 255, 255, .94);
}

.hpPulse {
    position: relative;
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mint);
}

.hpPulse::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--mint);
    animation: hpPulse 2s ease-out infinite;
}

@keyframes hpPulse {
    from {
        transform: scale(1);
        opacity: .7;
    }

    to {
        transform: scale(3);
        opacity: 0;
    }
}

/* Slides share one grid cell, so the copy keeps the height of the tallest slide */
.hpSlides {
    display: grid;
}

.hpSlide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity .45s ease, transform .6s var(--ease), visibility 0s linear .6s;
}

.hpSlide.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: .15s, .15s, 0s;
}

/* While dragging, the current slide follows the pointer */
.hpHero.is-dragging .hpSlide.is-active {
    transform: translateX(var(--dx, 0px));
    transition: none;
}

.hpSlideTitle {
    margin: 0 0 16px;
    font-family: var(--head);
    font-size: 54px;
    font-weight: 500;
    line-height: 1.08;
    color: #fff;
}

/* Second line of each title in the logo's mint-to-teal colours */
.hpAccent {
    display: block;
    background: linear-gradient(90deg, var(--mint), #6fd3ea);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hpSlideText {
    max-width: 30em;
    margin: 0 0 28px;
    font-family: var(--text);
    font-size: 18px;
    line-height: 29px;
    color: rgba(255, 255, 255, .84);
}

/* Controls: dots, arrows, pause */
.hpHeroCtrl {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 44px;
}

.hpDots {
    display: flex;
    align-items: center;
}

.hpDot {
    position: relative;
    width: 24px;
    height: 28px;
    padding: 0;
    border: 0;
    background: none;
    transition: width .4s var(--ease);
}

.hpDot::before,
.hpDot i {
    content: '';
    position: absolute;
    top: 50%;
    left: 7px;
    right: 7px;
    height: 8px;
    margin-top: -4px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .32);
}

.hpDot i {
    background: var(--coral);
    transform: scaleX(0);
    transform-origin: left center;
}

.hpDot:hover::before {
    background: rgba(255, 255, 255, .6);
}

.hpDot.is-active {
    width: 60px;
}

.hpDot.is-active i {
    transform: scaleX(1);
}

.hpHero.is-auto .hpDot.is-active i {
    transform: scaleX(0);
    animation: hpFill var(--hp-delay, 6.5s) linear forwards;
}

.hpHero.is-held .hpDot.is-active i {
    animation-play-state: paused;
}

@keyframes hpFill {
    to {
        transform: scaleX(1);
    }
}

.hpDot:focus-visible,
.hpHeroArrow:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
    border-radius: 99px;
}

.hpHeroBtns {
    display: flex;
    gap: 8px;
}

.hpHeroArrow {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.hpHeroArrow:hover {
    border-color: #fff;
    background: #fff;
    color: var(--violet);
}

.hpHeroArrow svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hpHeroPause[hidden] {
    display: none;
}

.hpHeroPause svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
    stroke: none;
}

.hpHeroPause .hpIcoPlay,
.hpHeroPause.is-paused .hpIcoPause {
    display: none;
}

.hpHeroPause.is-paused .hpIcoPlay {
    display: block;
}


/* ---------- 2. About ---------- */

.hpAbout {
    overflow: hidden;
}

.hpAboutInner {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 64px;
    align-items: center;
}

.hpAboutVisual {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 1.08fr 1fr;
    gap: 18px;
    align-items: start;
    padding-bottom: 30px;
}

.hpAboutVisual::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    z-index: -1;
    width: 140px;
    height: 140px;
    background: radial-gradient(#cdc3f4 1.6px, transparent 1.9px) 0 0 / 16px 16px;
}

.hpAboutVisual::after {
    content: '';
    position: absolute;
    right: -30px;
    bottom: 10px;
    z-index: -1;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: var(--coral);
    opacity: .12;
}

.hpAboutImg {
    margin: 0;
    overflow: hidden;
    border-radius: 20px;
    background: var(--soft);
    box-shadow: 0 26px 50px -28px rgba(28, 20, 70, .5);
}

.hpAboutImg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hpAboutImg--main {
    aspect-ratio: 4 / 5.2;
}

.hpAboutImg--side {
    aspect-ratio: 4 / 4.8;
    margin-top: 64px;
}

.hpAboutBadge {
    position: absolute;
    left: 50%;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px 14px 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 22px 44px -24px rgba(28, 20, 70, .5);
    white-space: nowrap;
    transform: translateX(-50%);
}

.hpAboutBadge strong {
    font-family: var(--head);
    font-size: 40px;
    font-weight: 600;
    line-height: 1;
    color: var(--violet);
}

.hpAboutBadge span {
    font-family: var(--head);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--ink);
}

.hpAboutContent .hpLead strong {
    color: var(--ink);
    font-weight: 600;
}

.hpPoints {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 24px 0 28px;
    padding: 0;
    list-style: none;
}

.hpPoint {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    font-family: var(--head);
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--ink);
    transition: border-color .25s ease, transform .25s ease;
}

.hpPoint:hover {
    border-color: var(--a);
    transform: translateY(-2px);
}

.hpPointIcon {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--t);
    color: var(--a);
}

.hpPointIcon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- 3. Services (icon cards) ---------- */

.hpSvcGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.hpSvc {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 26px 26px 22px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(28, 20, 70, .04);
    transition: transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease;
}

/* Accent line that draws across the top on hover */
.hpSvc::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--a);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .45s var(--ease);
}

.hpSvc:hover,
.hpSvc:focus {
    color: inherit;
    text-decoration: none;
}

.hpSvc:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--a) 35%, #fff);
    box-shadow: 0 26px 46px -30px color-mix(in srgb, var(--a) 70%, transparent);
}

.hpSvc:hover::after {
    transform: scaleX(1);
}

.hpSvc:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--a) 45%, transparent);
    outline-offset: 2px;
}

.hpSvcTop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
}

.hpSvcIcon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--t);
    color: var(--a);
    transition: background-color .3s ease, color .3s ease, transform .4s var(--ease);
}

.hpSvc:hover .hpSvcIcon {
    background: var(--a);
    color: #fff;
    transform: rotate(-6deg);
}

.hpSvcIcon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hpSvcNo {
    font-family: var(--head);
    font-size: 36px;
    font-weight: 600;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px #d9dbe7;
    transition: -webkit-text-stroke-color .3s ease;
}

.hpSvc:hover .hpSvcNo {
    -webkit-text-stroke-color: var(--a);
}

.hpSvcText {
    display: block;
}

.hpSvc h3 {
    margin: 0 0 8px;
    font-family: var(--head);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink);
}

.hpSvc p {
    margin: 0 0 18px;
    font-size: 15.5px;
    line-height: 24px;
    color: var(--body);
}

.hpSvcMore {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px dashed var(--line);
    font-family: var(--head);
    font-size: 15px;
    font-weight: 500;
    color: var(--a);
}

.hpSvcMore svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .25s ease;
}

.hpSvc:hover .hpSvcMore svg {
    transform: translateX(4px);
}


/* CTA strip under the services */
.hpCtaStrip {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 26px;
    padding: 16px 18px 16px 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
}

.hpCtaStripIcon {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #efebfd;
    color: var(--violet-2);
}

.hpCtaStripIcon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hpCtaStrip p {
    flex: 1;
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--body);
}

.hpCtaStrip p strong {
    font-family: var(--head);
    font-size: 18px;
    font-weight: 500;
    color: var(--ink);
}

/* ---------- 4. Our work (bento) ---------- */

.hpWorkGrid {
    display: grid;
    grid-template-columns: 1.12fr 1fr 1fr;
    grid-template-rows: 280px 280px;
    gap: 22px;
}

.hpTile {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: block;
    padding: 24px 24px 0;
    border-radius: 20px;
    background: var(--t);
    color: inherit;
    text-decoration: none;
    transition: transform .35s var(--ease), box-shadow .35s ease;
}

.hpTile:hover,
.hpTile:focus {
    color: inherit;
    text-decoration: none;
}

.hpTile:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 50px -34px rgba(28, 20, 70, .55);
}

.hpTile:focus-visible {
    outline: 3px solid rgba(91, 63, 208, .45);
    outline-offset: 3px;
}

.hpTile--web {
    --t: #efebfd;
    --a: #5b3fd0;
    grid-row: 1 / 3;
}

.hpTile--app {
    --t: #fdecf1;
    --a: #d9265f;
}

.hpTile--shop {
    --t: #e6f6fd;
    --a: #0a93c9;
}

.hpTile--crm {
    --a: var(--cyan);
    grid-column: 2 / 4;
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 22px;
    padding: 28px 0 0 28px;
    background: var(--violet);
}

.hpTileText {
    position: relative;
    z-index: 1;
}

.hpTileTag {
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 11px;
    border-radius: 999px;
    background: #fff;
    font-family: var(--head);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .4px;
    line-height: 1.2;
    color: var(--a);
}

.hpTile h3 {
    margin: 0 0 4px;
    font-family: var(--head);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink);
}

.hpTile p {
    margin: 0;
    font-size: 14.5px;
    line-height: 22px;
    color: var(--body);
}

.hpTile--crm .hpTileTag {
    background: rgba(255, 255, 255, .12);
    color: var(--cyan);
}

.hpTile--crm h3 {
    font-size: 22px;
    color: #fff;
}

.hpTile--crm p {
    color: rgba(255, 255, 255, .78);
}

.hpTileLink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    font-family: var(--head);
    font-size: 15px;
    font-weight: 500;
    color: #fff;
}

.hpTileLink svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .25s ease;
}

.hpTile:hover .hpTileLink svg {
    transform: translateX(4px);
}

/* Arrow badge in the corner */
.hpTileGo {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    color: var(--a);
    box-shadow: 0 8px 18px -10px rgba(28, 20, 70, .45);
    transition: background-color .25s ease, color .25s ease, transform .3s var(--ease);
}

.hpTileGo svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hpTile:hover .hpTileGo {
    background: var(--a);
    color: #fff;
    transform: rotate(45deg);
}

/* Browser frames */
.hpBrowser {
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(67, 45, 146, .08), 0 24px 44px -24px rgba(28, 20, 70, .55);
}

.hpBrowserBar {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 11px;
    border-bottom: 1px solid #eeedf5;
    background: #f7f6fc;
}

.hpBrowserBar i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e1ddef;
}

.hpBrowserBar i:first-child {
    background: #f9758f;
}

.hpBrowserBar span {
    margin: 0 auto;
    padding: 2px 14px;
    border-radius: 6px;
    background: #fff;
    font-family: var(--head);
    font-size: 11px;
    color: var(--muted);
    box-shadow: 0 0 0 1px #ebe8f6;
}

.hpScreen {
    position: relative;
    overflow: hidden;
}

.hpScreen img,
.hpBrowser > img {
    display: block;
    width: 100%;
    height: auto;
}

/* The screenshot scrolls from top to bottom and back while the section is on screen */
.hpScroll {
    will-change: transform;
}

.hpWork.is-live .hpScroll {
    animation: hpScroll var(--dur, 18s) ease-in-out infinite alternate;
}

.hpTile:hover .hpScroll {
    animation-duration: 7s;
}

@keyframes hpScroll {
    0%,
    8% {
        transform: translateY(0);
    }

    92%,
    100% {
        transform: translateY(calc(-100% + var(--screen)));
    }
}

.hpBrowser--web {
    --screen: 424px;
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 0;
}

.hpBrowser--web .hpScreen {
    height: 424px;
}

.hpBrowser--shop {
    --screen: 122px;
    position: absolute;
    left: 72px;
    right: -14px;
    bottom: 0;
}

.hpBrowser--shop .hpScreen {
    height: 122px;
}

.hpBrowser--shop .hpScroll {
    --dur: 22s;
}

/* Phones peeking from the bottom right */
.hpPhones {
    position: absolute;
    right: 18px;
    bottom: -84px;
    width: 214px;
    height: 230px;
}

.hpPhone {
    position: absolute;
    bottom: 0;
    width: 112px;
    height: auto;
    filter: drop-shadow(0 18px 24px rgba(28, 20, 70, .3));
    transition: transform .5s var(--ease);
}

.hpPhone--a {
    left: 0;
    transform: rotate(-7deg);
}

.hpPhone--b {
    right: 0;
    bottom: 22px;
    transform: rotate(5deg);
}

.hpTile:hover .hpPhone--a {
    transform: rotate(-9deg) translateY(-10px);
}

.hpTile:hover .hpPhone--b {
    transform: rotate(7deg) translateY(-14px);
}

/* CRM dashboards */
.hpDash {
    position: relative;
}

.hpBrowser--crm {
    position: absolute;
    left: 0;
    right: -40px;
    top: 26px;
}

.hpBrowser--crm2 {
    position: absolute;
    left: -46px;
    bottom: -40px;
    width: 300px;
    border-radius: 10px;
    transition: transform .5s var(--ease);
}

.hpTile:hover .hpBrowser--crm2 {
    transform: translateY(-10px);
}

.hpTile--crm .hpTileGo {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    box-shadow: none;
}

.hpTile--crm:hover .hpTileGo {
    background: var(--cyan);
    color: var(--violet);
}

/* ---------- 5. Authorized partners ---------- */

.hpPartnersInner {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 64px;
    align-items: center;
}

.hpTicks {
    display: grid;
    gap: 12px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.hpTicks li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--head);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.35;
    color: #fff;
}

.hpTicks li::before {
    content: '';
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(76, 218, 160, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234cdaa0' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* Membership-style cards, staggered */
.hpCards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.hpCard {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 178px;
    padding: 22px 22px 20px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 30px 50px -32px rgba(10, 6, 40, .7);
    transition: transform .35s var(--ease);
}

.hpCard:nth-child(even) {
    transform: translateY(34px);
}

.hpCard:hover {
    transform: translateY(-4px);
}

.hpCard:nth-child(even):hover {
    transform: translateY(30px);
}

/* Brand colour strip + a faint security-print pattern */
.hpCard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--b);
}

.hpCard::after {
    content: '';
    position: absolute;
    right: -60px;
    bottom: -70px;
    z-index: -1;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: repeating-radial-gradient(circle, transparent 0 9px, color-mix(in srgb, var(--b) 14%, transparent) 9px 10px);
}

.hpCardTop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
}

.hpCardLogo {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.hpCardLogo img {
    display: block;
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.hpCardBadge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #f1effa;
    font-family: var(--head);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .8px;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--violet);
}

.hpCardBadge svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hpCard h3 {
    margin: 0 0 2px;
    font-family: var(--head);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink);
}

.hpCard p {
    margin: 0;
    font-size: 15px;
    line-height: 22px;
    color: var(--body);
}

/* ---------- 6. Clients ---------- */

.hpClientsSide {
    display: flex;
    align-items: center;
    gap: 22px;
}

.hpStat {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding-right: 22px;
    border-right: 1px solid var(--line);
}

.hpStat strong {
    font-family: var(--head);
    font-size: 40px;
    font-weight: 600;
    line-height: 1;
    color: var(--violet);
}

.hpStat span {
    font-family: var(--head);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--ink);
}

.hpMarquee {
    display: grid;
    gap: 14px;
}

.hpMarqueeRow {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.hpMarqueeTrack {
    display: flex;
    gap: 14px;
    width: max-content;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    animation: hpMarquee var(--mq, 70s) linear infinite;
}

.hpMarqueeRow--rev .hpMarqueeTrack {
    animation-direction: reverse;
}

.hpMarqueeRow:hover .hpMarqueeTrack,
.hpClients:not(.is-live) .hpMarqueeTrack {
    animation-play-state: paused;
}

@keyframes hpMarquee {
    to {
        transform: translateX(calc(-50% - 7px));
    }
}

.hpLogo {
    flex: none;
    display: grid;
    place-items: center;
    width: 168px;
    height: 78px;
    padding: 12px 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.hpLogo:hover {
    border-color: #d6d0f2;
    box-shadow: 0 14px 26px -18px rgba(28, 20, 70, .45);
    transform: translateY(-3px);
}

.hpLogo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 50px;
    object-fit: contain;
}

/* Partner benefits */
.hpGetTitle {
    margin: 22px 0 0;
    font-family: var(--head);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
}

.hpPartners .hpTicks {
    margin-top: 12px;
}

.hpCardSub {
    margin: 0;
    font-size: 15px;
    line-height: 22px;
    color: var(--body);
}

.hpCard .hpCardGet {
    display: flex;
    gap: 8px;
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
    font-size: 14.5px;
    line-height: 22px;
    color: var(--ink);
}

.hpCardGet::before {
    content: '';
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--violet-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat;
}

/* ---------- 7. Why choose CoregenX (development) ---------- */

.hpWhyInner {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 56px;
    align-items: center;
}

.hpStats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 28px 0 0;
    padding: 22px 0 0;
    border-top: 1px solid #e3e0f0;
    list-style: none;
}

.hpStats li {
    padding: 0 18px;
    border-left: 1px solid #e3e0f0;
}

.hpStats li:first-child {
    padding-left: 0;
    border-left: 0;
}

.hpStats strong {
    display: flex;
    align-items: center;
    height: 42px;
    margin-bottom: 6px;
    font-family: var(--head);
    font-size: 38px;
    font-weight: 600;
    line-height: 1;
    color: var(--violet);
}

.hpStats strong svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: var(--violet);
    stroke-width: 1.7;
}

.hpStats span {
    display: block;
    font-family: var(--head);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--ink);
}

.hpWhyGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hpWhyItem {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    column-gap: 14px;
    align-content: start;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    transition: transform .3s var(--ease), border-color .3s ease, box-shadow .3s ease;
}

.hpWhyItem:hover {
    border-color: color-mix(in srgb, var(--a) 35%, #fff);
    box-shadow: 0 20px 36px -28px color-mix(in srgb, var(--a) 70%, transparent);
    transform: translateY(-3px);
}

.hpWhyIcon {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--a);
    color: #fff;
    box-shadow: 0 10px 20px -12px var(--a);
}

.hpWhyIcon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hpWhyItem h3 {
    margin: 2px 0 4px;
    font-family: var(--head);
    font-size: 17.5px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink);
}

.hpWhyItem p {
    margin: 0;
    font-size: 14.5px;
    line-height: 22px;
    color: var(--body);
}

/* ---------- 8. Let's talk ---------- */

.hpTalk {
    background: #fff;
}

.hpTalkBox {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: 48px;
    align-items: center;
    padding: 48px;
    border-radius: 28px;
    background:
        radial-gradient(rgba(255, 255, 255, .09) 1.3px, transparent 1.6px) 0 0 / 18px 18px,
        var(--violet);
    background-blend-mode: normal;
    color: rgba(255, 255, 255, .84);
}

/* Dotted texture only on the left half */
.hpTalkBox::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, transparent 0%, var(--violet) 55%);
}

.hpTalkBox .hpBlob--cyan {
    top: -170px;
    right: auto;
    left: 34%;
}

.hpPerks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.hpPerks li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px 6px 9px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    font-family: var(--head);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    color: #fff;
}

.hpPerks svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: var(--mint);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hpContacts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.hpContacts a {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    background: rgba(255, 255, 255, .07);
    font-family: var(--head);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.25;
    color: #fff;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}

.hpContacts a:hover,
.hpContacts a:focus {
    border-color: rgba(255, 255, 255, .34);
    background: rgba(255, 255, 255, .13);
    color: #fff;
    text-decoration: none;
    transform: translateY(-3px);
}

.hpContacts small {
    display: block;
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

.hpContactIco {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--coral);
    color: #fff;
}

.hpContactIco svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hpContactIco--wa {
    background: linear-gradient(135deg, #0c8a72, #0b6f80);
}

.hpContactIco--wa svg {
    fill: currentColor;
    stroke: none;
}

.hpContactIco--mail {
    background: #0a9bd1;
}

/* Form card (fields, names and ids as on contact.html) */
.hpForm {
    padding: 28px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 40px 70px -40px rgba(10, 6, 40, .8);
}

.hpForm h3 {
    margin: 0 0 18px;
    font-family: var(--head);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink);
}

.hpFormGrid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}

.hpField {
    position: relative;
    min-width: 0;
}

.hpField--full {
    grid-column: 1 / -1;
}

.hpField > svg,
.hpDial > svg {
    position: absolute;
    top: 15px;
    left: 14px;
    z-index: 1;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--muted);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.hpField input,
.hpField select,
.hpField textarea {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 14px 0 42px;
    border: 1px solid #dfe1ec;
    border-radius: 12px;
    background: #fbfbfe;
    font-family: var(--text);
    font-size: 15px;
    color: var(--ink);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.hpField select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 38px;
    background: #fbfbfe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23868b9b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 16px no-repeat;
    color: var(--ink);
}

.hpField select:invalid {
    color: #767b8c;
}

.hpField textarea {
    height: 96px;
    padding-top: 13px;
    padding-bottom: 22px;
    resize: vertical;
}

.hpField input:focus,
.hpField select:focus,
.hpField textarea:focus {
    position: relative;
    z-index: 1;
    border-color: var(--violet-2);
    background-color: #fff;
    outline: none;
    box-shadow: 0 0 0 4px rgba(91, 63, 208, .12);
}

.hpField input:focus + svg {
    stroke: var(--violet-2);
}

.hpField ::placeholder {
    color: #767b8c;
    opacity: 1;
}

.hpField--phone {
    display: flex;
}

.hpDial {
    position: relative;
    flex: 0 0 84px;
}

.hpDial input {
    padding-left: 38px;
    padding-right: 4px;
    border-right: 0;
    border-radius: 12px 0 0 12px;
}

.hpField--phone > input {
    padding-left: 12px;
    border-radius: 0 12px 12px 0;
}

.hpField--other {
    display: none;
}

.hpField--other.is-visible {
    display: block;
}

.hpCount {
    position: absolute;
    right: 12px;
    bottom: 7px;
    z-index: 2;
    font-size: 12px;
    color: #6b7080;
    pointer-events: none;
}

.hpForm .hpBtn--block {
    margin-top: 6px;
}

.hpForm .hpBtn[disabled] {
    opacity: .7;
    cursor: wait;
    transform: none;
}

.hpLegal {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: #6b7080;
    text-align: center;
}

.hpLegal a {
    color: var(--violet-2);
    text-decoration: underline;
}

/* The reCAPTCHA holder must not take a grid cell; the legal line replaces its badge */
#recaptcha-holder {
    position: absolute;
    width: 0;
    height: 0;
}

.grecaptcha-badge {
    visibility: hidden !important;
}

/* ---------- Mobile quick-contact bar (phones only) ---------- */

/* The bar sits outside <main class="hp">, so it carries its own colour and font tokens */
.hpBar {
    --pink: #d9265f;
    --head: 'Jost', sans-serif;
    display: none;
}

/* ==========================================================
   Tablets and phones
   ========================================================== */

@media (max-width: 1199px) {
    .hpWrap {
        padding: 0 24px;
    }

    .hpTitle {
        font-size: 30px;
    }

    .hpSlideTitle {
        font-size: 48px;
    }

    .hpAboutInner,
    .hpPartnersInner,
    .hpWhyInner {
        gap: 40px;
    }

    .hpTalkBox {
        gap: 32px;
        padding: 36px;
    }

    .hpWorkGrid {
        grid-template-columns: 1.1fr 1fr 1fr;
    }

    .hpTile--crm {
        grid-template-columns: 210px 1fr;
    }

    .hpContacts {
        grid-template-columns: 1fr;
    }

    .hpContacts a {
        flex-direction: row;
        align-items: center;
    }
}

@media (max-width: 991px) {
    .hpSec {
        padding: 52px 0;
    }

    .hpTitle {
        font-size: 28px;
    }

    .hpHead {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 26px;
    }

    .hpHeadText {
        max-width: none;
    }

    .hpHero {
        min-height: 540px;
    }

    .hpHero::before {
        background:
            radial-gradient(680px 480px at 0% 100%, rgba(67, 45, 146, .55), transparent 70%),
            linear-gradient(90deg, rgba(28, 20, 70, .95) 0%, rgba(28, 20, 70, .85) 45%, rgba(28, 20, 70, .5) 100%);
    }

    .hpAboutInner,
    .hpPartnersInner,
    .hpWhyInner,
    .hpTalkBox {
        grid-template-columns: 1fr;
    }

    .hpAboutVisual {
        max-width: 560px;
    }

    .hpSvcGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .hpCtaStrip {
        flex-wrap: wrap;
    }

    .hpCtaStrip p {
        flex: 1 1 300px;
    }

    .hpWorkGrid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 280px 280px 300px;
        gap: 16px;
    }

    .hpTile--web {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .hpTile--crm {
        grid-column: 1 / 3;
    }

    .hpBrowser--shop {
        left: 40px;
    }

    .hpCards {
        max-width: 640px;
    }

    .hpContacts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hpContacts a {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 767px) {
    .hpWrap {
        padding: 0 16px;
    }

    .hpSec {
        padding: 44px 0;
    }

    .hpEyebrow {
        margin-bottom: 8px;
        font-size: 13px;
        letter-spacing: 2.5px;
    }

    .hpTitle {
        font-size: 24px;
    }

    .hpLead,
    .hpHeadText {
        font-size: 15px;
        line-height: 24px;
    }

    .hpHeadText {
        padding-left: 14px;
    }

    .hpBtn {
        min-height: 48px;
        padding: 0 22px;
        font-size: 15px;
    }

    /* Hero: portrait photo, copy at the bottom */
    .hpHero {
        min-height: 0;
    }

    .hpHero::before {
        background: linear-gradient(180deg, rgba(28, 20, 70, .3) 0%, rgba(28, 20, 70, .72) 34%, rgba(28, 20, 70, .95) 62%, rgba(28, 20, 70, .98) 100%);
    }

    .hpHero::after {
        display: none;
    }

    .hpHeroBg img {
        object-position: 50% 0;
    }

    .hpHeroInner {
        align-items: flex-end;
        padding-top: 150px;
        padding-bottom: 24px;
    }

    .hpHeroH1 {
        margin-bottom: 18px;
    }

    .hpHeroBrand {
        margin-bottom: 10px;
        font-size: 12.5px;
        letter-spacing: 2px;
        white-space: nowrap;
    }

    .hpHeroKw {
        align-items: flex-start;
        padding: 8px 14px 8px 12px;
        border-radius: 14px;
        font-size: 14px;
    }

    .hpHeroKw .hpPulse {
        margin-top: 6px;
    }

    .hpSlideTitle {
        margin-bottom: 12px;
        font-size: min(36px, 9.4vw);
    }

    .hpSlideText {
        margin-bottom: 22px;
        font-size: 15.5px;
        line-height: 24px;
    }

    .hpHero .hpCtas {
        flex-direction: column;
        gap: 10px;
    }

    .hpHero .hpBtn {
        width: 100%;
    }

    .hpHeroCtrl {
        justify-content: space-between;
        margin-top: 24px;
    }

    .hpHeroArrow:not(.hpHeroPause) {
        display: none;
    }

    /* About */
    .hpAboutVisual {
        gap: 12px;
        padding-bottom: 26px;
    }

    .hpAboutImg {
        border-radius: 16px;
    }

    .hpAboutImg--side {
        margin-top: 40px;
    }

    .hpAboutBadge {
        padding: 10px 16px 10px 14px;
    }

    .hpAboutBadge strong {
        font-size: 32px;
    }

    .hpAboutBadge span {
        font-size: 13.5px;
    }

    .hpPoints {
        grid-template-columns: 1fr;
        gap: 10px;
        margin: 20px 0 24px;
    }

    .hpPoint {
        min-height: 0;
        font-size: 15px;
    }

    .hpAbout .hpCtas .hpBtn {
        flex: 1 1 auto;
    }

    /* Services: compact list */
    .hpSvcGrid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .hpSvc {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr) 20px;
        gap: 14px;
        align-items: center;
        padding: 14px 16px;
        border-radius: 14px;
    }

    .hpSvc:hover {
        transform: none;
    }

    .hpSvcTop {
        margin: 0;
    }

    .hpSvcNo {
        display: none;
    }

    .hpSvcIcon {
        width: 48px;
        height: 48px;
        border-radius: 13px;
    }

    .hpSvcIcon svg {
        width: 22px;
        height: 22px;
    }

    .hpSvc h3 {
        margin-bottom: 2px;
        font-size: 16.5px;
    }

    .hpSvc p {
        margin: 0;
        font-size: 14px;
        line-height: 21px;
    }

    .hpSvcMore {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 0;
    }

    .hpSvcMore svg {
        width: 18px;
        height: 18px;
    }

    .hpCtaStrip {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        margin-top: 18px;
        padding: 18px;
    }

    .hpCtaStrip p {
        flex: none;
        font-size: 15px;
    }

    .hpCtaStrip .hpCtas,
    .hpCtaStrip .hpBtn {
        width: 100%;
    }

    /* Our work: one tile per view, swipe sideways */
    .hpWork .hpHead .hpBtn {
        display: none;
    }

    .hpWorkGrid {
        display: flex;
        gap: 12px;
        margin: 0 -16px;
        padding: 0 16px 6px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 16px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .hpWorkGrid::-webkit-scrollbar {
        display: none;
    }

    .hpTile,
    .hpTile--crm {
        flex: 0 0 86%;
        height: 400px;
        scroll-snap-align: start;
        padding: 20px 20px 0;
    }

    .hpTile:hover {
        transform: none;
    }

    .hpTile h3,
    .hpTile--crm h3 {
        font-size: 18px;
    }

    .hpTile--crm {
        display: block;
    }

    .hpTile--crm .hpTileLink {
        margin-top: 10px;
    }

    .hpBrowser--web {
        --screen: 236px;
        left: 20px;
        right: 20px;
    }

    .hpBrowser--web .hpScreen {
        height: 236px;
    }

    .hpBrowser--shop {
        --screen: 210px;
        left: 20px;
        right: 20px;
    }

    .hpBrowser--shop .hpScreen {
        height: 210px;
    }

    .hpPhones {
        right: 50%;
        bottom: -30px;
        margin-right: -107px;
    }

    .hpPhone {
        width: 120px;
    }

    .hpDash {
        position: absolute;
        left: 20px;
        right: 0;
        bottom: 0;
        height: 190px;
    }

    .hpBrowser--crm {
        top: 0;
        right: -80px;
    }

    .hpBrowser--crm2 {
        display: none;
    }

    /* Partners: 2 x 2 compact cards */
    .hpGetTitle {
        font-size: 13px;
    }

    .hpTicks li {
        font-size: 15px;
    }

    .hpCards {
        gap: 12px;
    }

    .hpCard {
        min-height: 0;
        padding: 16px 14px 14px;
        border-radius: 16px;
    }

    .hpCard:nth-child(even),
    .hpCard:nth-child(even):hover,
    .hpCard:hover {
        transform: none;
    }

    .hpCardTop {
        margin-bottom: 12px;
    }

    .hpCardLogo {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .hpCardLogo img {
        width: 28px;
        height: 28px;
    }

    .hpCardBadge {
        padding: 5px;
        font-size: 0;
        letter-spacing: 0;
    }

    .hpCardBadge svg {
        width: 15px;
        height: 15px;
    }

    .hpCard h3 {
        font-size: 18px;
    }

    .hpCardSub {
        display: none;
    }

    .hpCard .hpCardGet {
        gap: 6px;
        margin-top: 10px;
        padding-top: 10px;
        font-size: 13.5px;
        line-height: 20px;
    }

    .hpCardGet::before {
        width: 16px;
        height: 16px;
    }

    /* Clients */
    .hpClientsSide {
        flex-wrap: wrap;
        gap: 14px 18px;
    }

    .hpStat {
        padding-right: 18px;
    }

    .hpStat strong {
        font-size: 32px;
    }

    .hpMarquee {
        gap: 10px;
    }

    .hpMarqueeTrack {
        gap: 10px;
    }

    .hpLogo {
        width: 132px;
        height: 64px;
        padding: 10px 14px;
        border-radius: 12px;
    }

    .hpLogo img {
        max-height: 40px;
    }

    /* Why */
    .hpStats li {
        padding: 0 10px;
    }

    .hpStats strong {
        height: 34px;
        font-size: 30px;
    }

    .hpStats strong svg {
        width: 28px;
        height: 28px;
    }

    .hpStats span {
        font-size: 13.5px;
    }

    .hpWhyGrid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .hpWhyItem {
        padding: 14px;
    }

    .hpWhyItem h3 {
        font-size: 16.5px;
    }

    /* Let's talk */
    .hpTalkBox {
        gap: 24px;
        margin: 0 -4px;
        padding: 26px 16px 16px;
        border-radius: 22px;
    }

    .hpPerks li {
        font-size: 13.5px;
    }

    .hpContacts {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .hpContacts a {
        flex-direction: row;
        align-items: center;
        padding: 10px 12px;
    }

    .hpForm {
        padding: 20px 16px;
        border-radius: 16px;
    }

    .hpFormGrid {
        grid-template-columns: 1fr;
    }

    .hpField input,
    .hpField select,
    .hpField textarea {
        font-size: 16px; /* 16px stops iPhones zooming into the field */
    }

    /* Quick-contact bar */
    .hpBar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        display: grid;
        grid-template-columns: 1fr 1.15fr 1.35fr;
        gap: 8px;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 -8px 24px -12px rgba(28, 20, 70, .3);
        font-family: var(--head);
        transform: translateY(110%);
        transition: transform .3s ease;
    }

    .hpBar.is-on {
        transform: none;
    }

    .hpBar a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 46px;
        border-radius: 999px;
        font-size: 15px;
        font-weight: 500;
        white-space: nowrap;
        text-decoration: none;
    }

    .hpBar svg {
        flex: none;
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .hpBar__wa svg {
        fill: currentColor;
        stroke: none;
    }

    .hpBar__call,
    .hpBar__call:hover,
    .hpBar__call:focus {
        border: 1.5px solid #22242e;
        background: #fff;
        color: #22242e;
    }

    .hpBar__wa,
    .hpBar__wa:hover,
    .hpBar__wa:focus {
        background: linear-gradient(135deg, #0c8a72, #0b6f80);
        color: #fff;
    }

    .hpBar__quote,
    .hpBar__quote:hover,
    .hpBar__quote:focus {
        background: var(--pink);
        color: #fff;
    }

    /* Room so the bar never covers the end of the footer; lift back-to-top above it */
    body.hp-bar-on {
        padding-bottom: 66px;
    }

    body.hp-bar-on #backtotop {
        bottom: 84px !important;
    }
}

@media (max-width: 380px) {
    .hpSlideTitle {
        font-size: 31px;
    }

    .hpHeroBrand {
        font-size: 12px;
        letter-spacing: 1.2px;
    }

    .hpHeroKw {
        font-size: 13px;
    }

    .hpBar {
        grid-template-columns: 1fr 1.2fr 1.4fr;
        gap: 6px;
    }

    .hpBar a {
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hp *,
    .hp *::before,
    .hp *::after {
        animation: none !important;
        transition: none !important;
    }

    .hp-js [data-rv] {
        opacity: 1;
        transform: none;
    }

    .hpMarqueeRow {
        overflow-x: auto;
    }
}