/* ==========================================================================
   מערכת הנץ / نظام الصقر – digital business card
   1. Variables
   2. Reset / global
   3. Main wrapper
   4. Hero
   5. Profile
   6. Social / contact actions
   7. About
   8. How it works (steps)
   9. Services
   10. Plans
   11. Contact form
   12. Share section
   13. Back to top
   14. Footer
   15. Accessibility
   16. Language switcher
   17. Responsive breakpoints
   18. Scroll reveal
   ========================================================================== */

/* ============ 1. VARIABLES ============ */
:root {
    /* Palette from the Falcon System brand guide:
       Black Charcoal #1F1F1F · Warm Ivory #F4EFE7 ·
       Gold gradient #98783D → #E9CD79 → #98783D */
    --color-dark:         #1f1f1f;   /* hero, cards, footer */
    --color-dark-deep:    #141414;
    --color-dark-soft:    #2b2b2b;

    --color-brand:        #c2a155;   /* mid gold – buttons, icons */
    --color-brand-deep:   #98783d;   /* antique gold */
    --color-brand-light:  #e9cd79;   /* champagne gold */

    --color-heading:      #1f1f1f;
    --color-text:         #3b3833;   /* body copy */
    --color-muted:        #7a7368;

    --color-white:        #ffffff;
    --color-cream:        #f4efe7;   /* warm ivory – page / profile background */
    --color-surface:      #fbf9f5;   /* raised light panels (about, footer) */
    --color-cream-2:      #ece5d8;   /* alternating tinted sections */
    --color-line:         #ddd3bf;   /* hairlines & input borders */

    --gold-gradient: linear-gradient(135deg, #98783d 0%, #e9cd79 50%, #98783d 100%);

    --wrapper-max: 520px;
    --pad-x: 26px;

    /* height of the curve that closes the hero */
    --hero-curve: 44px;
    /* portrait diameter – it is raised so its centre sits exactly on the
       curve line, i.e. the upper half overlaps the hero artwork */
    --avatar-size: 140px;

    --radius-sm: 6px;
    --radius-md: 14px;

    --font-base: "Assistant", "Segoe UI", "Noto Sans Hebrew", "Noto Sans Arabic", Arial, sans-serif;
    --fs-root: 16px;

    --ease: .25s ease;
}

/* ============ 2. RESET / GLOBAL ============ */
* { box-sizing: border-box; }

html {
    font-size: var(--fs-root);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--color-dark-deep);
    font-family: var(--font-base);
    color: var(--color-text);
    line-height: 1.7;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }

h1, h2, h3 { margin: 0; line-height: 1.25; }
p { margin: 0 0 .85em; }
ul, ol { list-style: none; margin: 0; padding: 0; }

a { text-decoration: none; color: inherit; }

:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

.section-title {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--color-heading);
    text-align: center;
    letter-spacing: .01em;
    margin-bottom: 18px;
}

/* Shared brand button – gold with charcoal text (white on gold fails contrast) */
.btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--color-brand);
    color: var(--color-dark);
    font-weight: 800;
    font-size: .95rem;
    border: 0;
    border-radius: 999px;
    padding: 11px 26px;
    cursor: pointer;
    transition: background var(--ease), transform var(--ease), opacity var(--ease);
}
.btn-gold:hover { background: var(--color-brand-light); color: var(--color-dark); transform: translateY(-2px); }
.btn-gold--sm { font-size: .88rem; padding: 9px 22px; }
.btn-gold--block { width: 100%; border-radius: var(--radius-sm); padding: 13px 20px; }
.btn-gold--outline {
    background: transparent;
    color: var(--color-heading);
    border: 1.5px solid var(--color-brand);
}
.btn-gold--outline:hover { background: var(--color-brand); }

/* ============ 3. MAIN WRAPPER ============ */
.site-wrapper {
    position: relative;
    width: 100%;
    max-width: var(--wrapper-max);
    margin-inline: auto;
    background: var(--color-cream);
    overflow: hidden;
    box-shadow: 0 0 40px rgba(0, 0, 0, .5);
}

/* ============ 4. HERO ============ */
/* Charcoal with a soft gold glow behind the logo */
.hero {
    position: relative;
    background:
        radial-gradient(ellipse 75% 55% at 50% 38%, rgba(233, 205, 121, .20) 0%, rgba(233, 205, 121, 0) 70%),
        linear-gradient(180deg, var(--color-dark-deep) 0%, var(--color-dark) 60%, var(--color-dark-soft) 100%);
    overflow: hidden;
    min-height: 380px;
    padding: 54px var(--pad-x) calc(var(--hero-curve) + 86px);
    text-align: center;
    color: var(--color-white);
}
.hero__glow {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(233, 205, 121, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(233, 205, 121, .06) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 20%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 20%, transparent 100%);
    pointer-events: none;
}
.hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.hero__logo {
    width: 230px;
    height: auto;
    margin-bottom: 10px;
    filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .55));
    transform: translate3d(0, var(--hero-shift, 0), 0);
    will-change: transform;
}
.hero__tag {
    margin: 0;
    max-width: 34ch;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-brand-light);
    line-height: 1.55;
}

.hero__curve {
    position: absolute;
    inset-inline: -6%;
    bottom: -1px;
    height: var(--hero-curve, 44px);
    background: var(--color-cream);
    border-start-start-radius: 60% 100%;
    border-start-end-radius: 60% 100%;
}

/* ============ 5. PROFILE ============ */
.profile {
    position: relative;
    padding: 0 var(--pad-x) 34px;
    text-align: center;
}

.profile__avatar {
    position: relative;
    z-index: 2;
    width: var(--avatar-size);
    height: var(--avatar-size);
    margin: calc(-1 * (var(--hero-curve) + var(--avatar-size) / 2)) auto 14px;
    border-radius: 50%;
    padding: 4px;
    background: var(--gold-gradient);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
}
.profile__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    border-radius: 50%;
    border: 3px solid var(--color-white);
    background: var(--color-dark);
}

.profile__name {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--color-heading);
    margin-bottom: 4px;
}
.profile__role {
    margin: 0 0 8px;
    font-size: .98rem;
    font-weight: 600;
    color: var(--color-text);
}
.profile__accent {
    display: inline-block;
    margin: 0 0 22px;
    font-size: .84rem;
    font-weight: 700;
    color: var(--color-brand-deep);
    border: 1px solid var(--color-line);
    border-radius: 999px;
    padding: 4px 16px;
    background: var(--color-surface);
}

/* ============ 6. SOCIAL / CONTACT ACTIONS ============ */
.actions {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px 4px;
}

.actions__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.actions__circle {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-dark);
    border: 1px solid var(--color-dark-soft);
    color: var(--color-brand-light);
    font-size: 1.15rem;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
    transition: transform var(--ease), background var(--ease), color var(--ease);
}
.actions__link:hover .actions__circle {
    transform: translateY(-3px);
    background: var(--color-brand);
    color: var(--color-dark);
}

.actions__label {
    font-size: .66rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.2;
    text-align: center;
}

/* Save-to-contacts – full-width gold bar under the icon strip */
.save-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin-top: 22px;
    padding: 13px 18px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--color-brand-light) 0%, var(--color-brand) 55%, var(--color-brand-deep) 100%);
    box-shadow: 0 8px 22px rgba(152, 120, 61, .38);
    transition: transform var(--ease), box-shadow var(--ease), filter var(--ease);
}
.save-contact:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 12px 26px rgba(152, 120, 61, .48);
}
.save-contact:active { transform: translateY(0); }

.save-contact__circle {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-dark);
    color: var(--color-brand-light);
    font-size: 1.05rem;
}

.save-contact__label {
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-dark);
    line-height: 1.3;
}

/* Secondary call to action – jump into the system itself */
.cta-site {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--color-dark);
    color: var(--color-brand-light);
    font-weight: 800;
    font-size: .95rem;
    border: 1px solid var(--color-dark-soft);
    transition: transform var(--ease), background var(--ease), color var(--ease);
}
.cta-site:hover { transform: translateY(-2px); background: var(--color-dark-soft); color: var(--color-brand-light); }
.cta-site .bi { font-size: 1.1rem; }

/* ============ 7. ABOUT ============ */
.about {
    position: relative;
    background: var(--color-surface);
    padding: 0;
}

.about__curve-top,
.about__curve-bottom {
    height: 39px;
    background: var(--color-cream);
}
.about__curve-top {
    border-end-start-radius: 55% 100%;
    border-end-end-radius: 55% 100%;
    margin-inline: -6%;
}
.about__curve-bottom {
    border-start-start-radius: 55% 100%;
    border-start-end-radius: 55% 100%;
    margin-inline: -6%;
    background: var(--color-cream);
}

.about__inner {
    padding: 8px var(--pad-x) 26px;
    text-align: center;
    font-size: .9rem;
    line-height: 1.95;
    color: var(--color-text);
}
.about__inner .section-title { font-size: 1.25rem; margin-bottom: 12px; }

.about__quote {
    margin: 18px 0 0;
    font-weight: 700;
    font-size: .92rem;
    color: var(--color-brand-deep);
    padding-top: 14px;
    border-top: 1px solid var(--color-line);
}

/* ============ 8. HOW IT WORKS ============ */
.steps {
    background: var(--color-cream);
    padding: 30px var(--pad-x) 34px;
}
.steps__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    counter-reset: step;
}
.step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .05);
}
.step__num {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--gold-gradient);
    color: var(--color-dark);
    font-weight: 800;
    font-size: 1.05rem;
    box-shadow: 0 4px 10px rgba(152, 120, 61, .3);
}
.step__title {
    font-size: .98rem;
    font-weight: 800;
    color: var(--color-heading);
    margin-bottom: 4px;
}
.step__text {
    margin: 0;
    font-size: .82rem;
    line-height: 1.7;
    color: var(--color-text);
}

/* ============ 9. SERVICES ============ */
.services {
    background: var(--color-cream-2);
    padding: 30px var(--pad-x) 36px;
}

.services__head {
    text-align: center;
    margin-bottom: 20px;
}
.services__ornament {
    display: block;
    font-size: 1.05rem;
    color: var(--color-brand-deep);
    margin-bottom: 6px;
}
.services__ornament::before,
.services__ornament::after {
    content: "";
    display: inline-block;
    width: 46px;
    height: 1px;
    background: var(--color-brand-deep);
    opacity: .5;
    vertical-align: middle;
    margin-inline: 8px;
}

.services__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.service-card {
    background: linear-gradient(160deg, var(--color-dark-soft) 0%, var(--color-dark-deep) 100%);
    border: 1px solid rgba(233, 205, 121, .25);
    border-radius: var(--radius-md);
    padding: 20px 14px 18px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 200px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
    transition: transform var(--ease), filter var(--ease), border-color var(--ease);
}
.service-card:hover { transform: translateY(-3px); border-color: var(--color-brand); }

.service-card__icon {
    font-size: 1.6rem;
    color: var(--color-brand-light);
    margin-bottom: 10px;
}
.service-card__title {
    font-size: .95rem;
    font-weight: 800;
    color: var(--color-white);
    margin-bottom: 8px;
}
.service-card__text {
    margin: 0;
    font-size: .76rem;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, .86);
}

/* ============ 10. PLANS ============ */
.plans {
    background: var(--color-cream);
    padding: 32px var(--pad-x) 36px;
}
.plans__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.plan {
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: 22px 20px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
}
.plan--featured {
    border: 2px solid var(--color-brand);
    box-shadow: 0 10px 26px rgba(152, 120, 61, .22);
    padding-top: 30px;
}
.plan__badge {
    position: absolute;
    top: -12px;
    inset-inline-start: 50%;
    transform: translateX(50%);
    background: var(--gold-gradient);
    color: var(--color-dark);
    font-size: .72rem;
    font-weight: 800;
    padding: 4px 14px;
    border-radius: 999px;
    white-space: nowrap;
}
.plan__name {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-heading);
}
.plan__price {
    margin: 6px 0 12px;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--color-brand-deep);
    line-height: 1.2;
}
.plan__price small {
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-muted);
}
.plan__items {
    width: 100%;
    text-align: start;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.plan__items li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .84rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.5;
}
.plan__items .bi { color: var(--color-brand); flex: 0 0 auto; margin-top: 3px; font-size: .85rem; }
.plan .btn-gold { width: 100%; margin-top: auto; }

/* ============ 11. CONTACT FORM ============ */
.contact {
    background: var(--color-cream-2);
    padding: 34px var(--pad-x) 38px;
}

.contact__form { display: block; }

.field {
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    padding: 11px 13px;
    font-size: .88rem;
    color: var(--color-text);
    margin-bottom: 8px;
    text-align: right;
}
.field::placeholder { color: #a39b8e; }
.field:focus {
    box-shadow: none;
    border-color: var(--color-brand);
}
.field--area { resize: vertical; min-height: 110px; }
.field.is-invalid { border-color: #d4646b; }

.row.g-2 .field { margin-bottom: 8px; text-align: right; }

.field-error {
    display: none;
    font-size: .72rem;
    color: #b33f47;
    margin: -4px 0 6px;
}
.field-error.is-visible { display: block; }

.contact__consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .74rem;
    line-height: 1.5;
    color: var(--color-muted);
    margin: 6px 0 14px;
    cursor: pointer;
}
.contact__consent input { margin-top: 3px; accent-color: var(--color-brand); }

.hp {
    position: absolute;
    inset-inline-start: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact__failure {
    margin: 14px 0 0;
    text-align: center;
    font-size: .85rem;
    font-weight: 700;
    color: #a8323b;
    background: rgba(180, 60, 70, .10);
    border: 1px solid rgba(180, 60, 70, .30);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}
.contact__failure a { text-decoration: underline; }

.contact__success {
    margin: 14px 0 0;
    text-align: center;
    font-size: .88rem;
    font-weight: 700;
    color: #2f7a4a;
    background: rgba(60, 160, 90, .12);
    border: 1px solid rgba(60, 160, 90, .30);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}

/* ============ 12. SHARE SECTION ============ */
.share {
    background: var(--color-cream);
    padding: 30px var(--pad-x) 26px;
    text-align: center;
}
.share__list {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.share__btn {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--color-dark);
    color: var(--color-brand-light);
    font-size: 1.1rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
    transition: transform var(--ease), background var(--ease), color var(--ease);
}
.share__btn:hover { transform: translateY(-3px); background: var(--color-brand); color: var(--color-dark); }

.share__toast {
    margin: 14px 0 0;
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-brand-deep);
}

/* ============ 13. BACK TO TOP ============ */
.backtop {
    background: var(--color-cream);
    padding: 4px var(--pad-x) 30px;
    text-align: center;
}
.backtop__btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--color-brand);
    background: var(--color-surface);
    color: var(--color-brand-deep);
    font-size: 1.05rem;
    cursor: pointer;
    transition: background var(--ease), color var(--ease), transform var(--ease);
}
.backtop__btn:hover {
    background: var(--color-brand);
    color: var(--color-dark);
    transform: translateY(-3px);
}
.backtop__label {
    display: block;
    margin-top: 8px;
    font-size: .74rem;
    color: var(--color-muted);
}

/* ============ 14. FOOTER ============ */
.footer {
    background: var(--color-dark);
    color: rgba(255, 255, 255, .7);
    text-align: center;
    padding: 18px var(--pad-x) 20px;
    border-top: 3px solid var(--color-brand);
}
.footer p { margin: 0; font-size: .74rem; }
.footer__credit { margin-top: 4px; }
.footer__studio {
    font-weight: 800;
    color: var(--color-brand-light);
    letter-spacing: .05em;
}
.footer__studio:hover { text-decoration: underline; }

/* ============ 15. ACCESSIBILITY ============ */
.a11y-fab {
    position: fixed;
    inset-inline-start: 14px;
    bottom: 18px;
    z-index: 1050;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: var(--color-brand);
    color: var(--color-dark);
    font-size: 1.25rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
    transition: transform var(--ease);
}
.a11y-fab:hover { transform: translateY(-3px); }

.a11y-panel {
    position: fixed;
    inset-inline-start: 14px;
    bottom: 74px;
    z-index: 1050;
    width: 200px;
    background: #fff;
    color: var(--color-text);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}
.a11y-panel__title {
    margin: 0 0 8px;
    font-size: .8rem;
    font-weight: 800;
    color: var(--color-heading);
}
.a11y-panel__btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-cream);
    border: 0;
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    margin-bottom: 6px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    transition: background var(--ease);
}
.a11y-panel__btn:last-child { margin-bottom: 0; }
.a11y-panel__btn:hover { background: var(--color-cream-2); }

/* High contrast mode */
body.hc {
    --color-brand: #ffe600;
    --color-brand-deep: #ffe600;
    --color-brand-light: #ffe600;
    --color-dark: #000000;
    --color-dark-deep: #000000;
    --color-dark-soft: #000000;
    --color-heading: #000000;
    --color-text: #000000;
    --color-muted: #000000;
    --color-cream: #ffffff;
    --color-cream-2: #ffffff;
    --color-surface: #ffffff;
    --color-line: #000000;
    --gold-gradient: #ffe600;
}
body.hc .hero { background: #000; }
body.hc .service-card,
body.hc .save-contact,
body.hc .cta-site { background: #000; border: 1px solid #ffe600; }
body.hc .service-card__title,
body.hc .service-card__text,
body.hc .service-card__icon,
body.hc .save-contact__label { color: #ffe600; }
body.hc .save-contact__circle { background: #ffe600; color: #000; }
body.hc .step__num,
body.hc .plan__badge { background: #000; color: #ffe600; border: 1px solid #ffe600; }
body.hc .actions__circle,
body.hc .share__btn,
body.hc .backtop__btn,
body.hc .btn-gold { background: #000; border: 1px solid #ffe600; color: #ffe600; }
body.hc .a11y-fab { background: #000; color: #ffe600; border: 1px solid #ffe600; }

/* ============ 16. LANGUAGE SWITCHER ============ */
.lang-switch {
    position: absolute;
    inset-inline-end: var(--pad-x);
    top: 14px;
    z-index: 5;
    display: inline-flex;
    background: rgba(31, 31, 31, .75);
    border: 1px solid rgba(233, 205, 121, .45);
    border-radius: 999px;
    padding: 3px;
    backdrop-filter: blur(4px);
}
.lang-switch__btn {
    border: 0;
    background: transparent;
    color: var(--color-brand-light);
    font-family: inherit;
    font-size: .72rem;
    font-weight: 700;
    padding: 10px 11px;
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
}
.lang-switch__btn.is-active {
    background: var(--color-brand);
    color: var(--color-dark);
}

/* ============ 17. RESPONSIVE ============ */
@media (max-width: 575.98px) {
    :root { --pad-x: 20px; --avatar-size: 126px; --hero-curve: 38px; }
    .site-wrapper { max-width: 100%; box-shadow: none; }
    .profile__name { font-size: 1.6rem; }
    .section-title { font-size: 1.4rem; }
    .actions { gap: 10px 2px; }
    .actions__circle { width: 42px; height: 42px; font-size: 1.05rem; }
    .actions__label { font-size: .6rem; }
    .service-card { min-height: 186px; padding: 16px 11px; }
    .hero { min-height: 330px; padding-top: 56px; }
    .hero__logo { width: 200px; }
    .hero__tag { font-size: .94rem; }
}

@media (max-width: 360px) {
    :root { --pad-x: 15px; --avatar-size: 116px; --hero-curve: 34px; }
    .actions__circle { width: 38px; height: 38px; font-size: .95rem; }
    .actions__label { font-size: .55rem; }
    .service-card__title { font-size: .88rem; }
    .service-card__text { font-size: .72rem; }
}

/* 2 columns are kept down to 300px; below that a single column stays readable */
@media (max-width: 299px) {
    .services__grid { grid-template-columns: 1fr; }
}

/* ============ 18. SCROLL REVEAL ============ */
/* Elements ease in as they enter the viewport. The travel direction follows
   the scroll direction, so going back up feels just as intentional as
   going down. Everything is opt-in via [data-reveal], added by main.js,
   so the page stays fully visible if JS never runs. */
[data-reveal] {
    opacity: 0;
    transform: translateY(var(--reveal-shift, 22px)) scale(.985);
    transition:
        opacity .75s cubic-bezier(.22, .68, .3, 1),
        transform .75s cubic-bezier(.22, .68, .3, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

/* scrolling up → elements drift down into place instead of up */
:root[data-scroll-dir="up"] [data-reveal] { --reveal-shift: -22px; }

[data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

/* the portrait gets a softer, rounder entrance of its own */
.profile__avatar[data-reveal] {
    transform: translateY(var(--reveal-shift, 22px)) scale(.9);
    transition-duration: .9s;
}

/* Service cards slide in from their own side of the grid: in RTL the odd
   items sit in the right column and arrive from the right, the even ones
   from the left. They still pick up the shared stagger and fade. */
.service-card[data-reveal] {
    --card-x: 52px;
    transform:
        translateX(var(--card-x))
        translateY(calc(var(--reveal-shift, 22px) * .35))
        scale(.97);
}
.services__grid .service-card:nth-child(even)[data-reveal] { --card-x: -52px; }

/* must repeat the reset here – same specificity as the rule above, and it
   has to come later to win */
.service-card[data-reveal].is-revealed { transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
    .hero__logo { transform: none !important; }
}