/* =========================================================
   PINU DESIGN — Stylesheet
   Brand:
   - Orange       #F4820A (primary — extras din animațiile Lottie)
   - Orange dark  #D67309
   - Charcoal     #2A2A2A
   - Cream / paper #FFFFFF on subtle grid
   ========================================================= */

/* Self-hosted Anton (display/headings) — loads instantly from our own server so
   headings render in the correct heavy weight on every page, with no flash of the
   lighter Oswald fallback (which was visible on heavier pages like Servicii). */
@font-face {
    font-family: "Anton";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../assets/fonts/anton-v27-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Anton";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../assets/fonts/anton-v27-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --color-orange: #F4820A;
    --color-orange-dark: #D67309;
    --color-orange-soft: #F8B662;

    --color-dark: #2A2A2A;
    --color-dark-2: #1F1F1F;
    --color-charcoal: #3B3B3B;

    --color-bg: #FFFFFF;
    --color-bg-alt: #F7F4EE;
    --color-text: #2A2A2A;
    --color-muted: #6B6B6B;
    --color-line: #E6E0D6;

    --color-white: #FFFFFF;

    --grid-dot: rgba(42, 42, 42, 0.08);

    --radius-pill: 999px;
    --radius-md: 18px;
    --radius-lg: 28px;

    --shadow-soft: 0 14px 40px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 20px 50px rgba(0, 0, 0, 0.12);

    --font-body: Georgia, "Times New Roman", serif;
    /* Anton (web) renders identically on every device; Impact/Oswald only kick in
       as fallbacks while the web font loads or if it fails. */
    --font-display: "Anton", "Oswald", "Impact", "Arial Narrow", sans-serif;
    --font-hand: "Caveat", "Segoe Script", "Brush Script MT", cursive;
    --font-ui: "Montserrat", "Arial Black", sans-serif;

    --transition: 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);

    --container: 1240px;

    /* Vertical rhythm — uniform gap between sections = 2 × --section-y */
    --section-y: 72px;
    --hero-top: 150px;
}

/* -----------------------------
   Reset & base
   ----------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.55;
    font-size: 16px;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* "Squares" PNG backdrop, fixed so it stays still while scrolling (parallax).
       Applies to every page. */
    background-image: url("../assets/images/background.png");
    background-image: -webkit-image-set(url("../assets/images/background.webp") type("image/webp"), url("../assets/images/background.png") type("image/png"));
    background-image: image-set(url("../assets/images/background.webp") type("image/webp"), url("../assets/images/background.png") type("image/png"));
    background-repeat: repeat;
    background-position: center top;
    background-size: auto;
    background-attachment: fixed;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--transition); }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;            /* Impact has a single weight — never faux-bold it */
    line-height: 1.05;
    letter-spacing: 0.01em;
    color: var(--color-dark);
}
h1 { font-size: clamp(2.6rem, 6vw, 5rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
h4 { font-size: 1.1rem; }

p { color: var(--color-text); }

::selection { background: var(--color-orange); color: #fff; }

/* -----------------------------
   Layout helpers
   ----------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 28px;
}

section { padding: var(--section-y) 0; position: relative; }

.hand {
    font-family: var(--font-hand);
    color: var(--color-orange);
    font-weight: 600;
    font-style: italic;
    line-height: 1;
    font-size: 1.6em;
}

/* -----------------------------
   Buttons
   ----------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 34px;
    border-radius: var(--radius-pill);
    font-weight: 900;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    transition: transform var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition);
    cursor: pointer;
    border: 2px solid transparent;
    font-family: var(--font-ui);
    font-style: normal;
}
.btn--primary {
    background: var(--color-orange);
    color: #fff;
}
.btn--primary:hover {
    background: var(--color-orange-dark);
    transform: translateY(-3px);
    box-shadow: 0 14px 26px rgba(244, 130, 10, 0.32);
}
.btn--ghost {
    background: transparent;
    color: var(--color-dark);
    border-color: var(--color-dark);
}
.btn--ghost:hover {
    background: var(--color-dark);
    color: #fff;
    transform: translateY(-3px);
}
.btn--ghost-light {
    background: transparent;
    color: #fff;
    border-color: #fff;
}
.btn--ghost-light:hover {
    background: #fff;
    color: var(--color-orange);
    transform: translateY(-3px);
}

/* Small circle arrow link */
.arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--color-dark);
    font-size: 0.95rem;
}
.arrow-link__circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-orange);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition);
    font-size: 0.95rem;
}
/* Icon points right by default (the source glyph is an up-right arrow → +45° = right) */
.arrow-link__circle svg { transform: rotate(45deg); transition: transform var(--transition); }
.arrow-link:hover .arrow-link__circle { transform: translateX(3px); }
.arrow-link--light { color: #fff; }

/* Small floating circle button (used top-right of hero) */
.float-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-orange);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(244, 130, 10, 0.35);
    transition: transform var(--transition);
}
.float-btn:hover { transform: translateY(-3px) rotate(-12deg); }

/* -----------------------------
   Navigation
   ----------------------------- */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: transform;
}
/* Hidden when scrolling down; slides back in on scroll up (toggled from JS).
   translateY(-130%) clears the logo block, which overhangs below the bar. */
.nav--hidden { transform: translateY(-130%); }
/* Never hide the bar while the dropdown menu is open */
.nav.is-open.nav--hidden { transform: none; }
@media (prefers-reduced-motion: reduce) {
    .nav { transition: none; }
}
.nav__inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding-top: 0;
}
.nav__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-orange);
    border-radius: 0;
    padding: 8px;
    width: 116px;
    height: 116px;
    color: #fff;
    line-height: 1;
    transition: background var(--transition);
    margin: 0;
    flex-shrink: 0;
}
.nav__logo:hover { background: var(--color-orange-dark); }
.nav__logo-lottie {
    width: 100%;
    height: 100%;
    display: block;
}

/* Right group: stacked links + the orange circle toggle.
   Links stay in layout (visibility, not display) so the circle never shifts. */
.nav__right {
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    padding-top: 22px;
}

/* Frosted-glass dropdown: its top-right corner sits at the arrow tip, so the
   menu appears to drop out of the arrow. The glass + shadow keep it readable
   on any background (black or white), so links stay a single dark colour. */
.nav__links {
    position: absolute;
    top: 46px;
    right: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
    min-width: 150px;
    padding: 14px 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22), 0 2px 10px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.96);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.nav.is-open .nav__links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
/* Desktop: open the menu on hover (mobile still opens on tap via .is-open) */
@media (hover: hover) and (min-width: 721px) {
    .nav__right:hover .nav__links,
    .nav__right:focus-within .nav__links {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }
    .nav__right:hover .nav__toggle-arrow,
    .nav__right:focus-within .nav__toggle-arrow {
        transform: rotate(-135deg);
    }
}
.nav__links a {
    font-family: var(--font-ui);
    font-weight: 900;
    font-size: 0.92rem;
    color: var(--color-dark);
    font-style: normal;
    letter-spacing: 0.01em;
    line-height: 1.95;
    white-space: nowrap;
}
.nav__links a:hover,
.nav__links a.active { color: var(--color-orange); }

/* Glass panel provides its own contrast, so links stay dark even on .nav--light pages */
.nav--light .nav__links a { color: var(--color-dark); }
.nav--light .nav__links a:hover,
.nav--light .nav__links a.active { color: var(--color-orange); }

/* Orange circle = the menu toggle */
.nav__toggle {
    position: relative;
    z-index: 2;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-orange);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--transition), transform var(--transition);
}
.nav__toggle:hover { background: var(--color-orange-dark); }
.nav__toggle-arrow {
    transition: transform var(--transition);
    transform: rotate(-90deg);                 /* default: points left */
}
.nav.is-open .nav__toggle-arrow { transform: rotate(-135deg); }  /* open: 45° toward bottom-left */

/* -----------------------------
   Hero
   ----------------------------- */
.hero {
    padding: var(--hero-top) 0 0;
    position: relative;
}

.hero__grid {
    display: grid;
    grid-template-columns: 1.05fr 1.1fr;
    gap: clamp(30px, 4vw, 70px);
    align-items: center;
}

.hero__visual {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 560px;
}
.hero__visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hero__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.6rem, 6vw, 5rem);
    color: var(--color-dark);
    letter-spacing: 0.01em;
    line-height: 1.02;
    margin-bottom: 28px;
}
.hero__title .dot { color: var(--color-orange); }

.hero__lede {
    color: var(--color-text);
    font-size: 1.05rem;
    max-width: 520px;
    margin-bottom: 22px;
    line-height: 1.55;
}

.hero__hand {
    display: block;
    color: var(--color-orange);
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1;
    margin-bottom: 28px;
}

.hero__ctas {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.hero__hand-callout {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 34px;
    color: var(--color-orange);
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-style: italic;
    font-weight: 700;
}
.hero__hand-callout .lottie {
    width: 56px;
    height: 56px;
    display: inline-block;
    flex-shrink: 0;
}

/* -----------------------------
   Clients capsule
   ----------------------------- */
.clients {
    padding: 16px 0 0;
}
/* "cine ne recomandă?" callout sits above the scroll, aligned to its RIGHT edge */
.clients__callout {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
    margin: 0 0 18px;
    color: var(--color-dark);
    font-family: var(--font-hand);
    font-style: normal;
    font-weight: 600;
    /* Caveat runs smaller than Segoe Script, so nudge the size up to match */
    font-size: 1.7rem;
}
.clients__capsule {
    background: var(--color-dark);
    border-radius: var(--radius-pill);
    padding: 26px clamp(20px, 4vw, 40px);
    overflow: hidden;
    position: relative;
}
.clients__track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: marquee 30s linear infinite;
}
/* Oprește autoscroll-ul la hover (ca să poți apăsa pe logo-uri) */
.clients__capsule:hover .clients__track { animation-play-state: paused; }
/* Ajustări fine de înălțime per-logo */
.clients__item.clients__item--20 { height: 20px; }
.clients__item.clients__item--18 { height: 18px; }
.clients__item.clients__item--14 { height: 14px; }
/* Per-item spacing (not flex gap) so the duplicated track loops seamlessly at -50% */
.clients__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 16px;
    flex-shrink: 0;
    margin-right: clamp(40px, 5vw, 80px);
    opacity: 0.85;
    transition: opacity var(--transition);
}
.clients__item:hover { opacity: 1; }
.clients__item img {
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: contain;
    filter: brightness(0) invert(1);
}
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* -----------------------------
   About — Cine suntem
   ----------------------------- */
.about {
    padding: var(--section-y) 0;
}
.about__grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(40px, 6vw, 90px);
    align-items: center;
}
.about__title {
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    color: var(--color-dark);
    margin-bottom: 28px;
}
.about__text p {
    font-size: 1.02rem;
    color: var(--color-text);
    margin-bottom: 16px;
    max-width: 560px;
}
.about__text .accent { color: var(--color-orange); font-weight: 700; }

.about__image {
    position: relative;
    background: var(--color-orange);
    aspect-ratio: 4 / 3.4;
    overflow: hidden;
    border-radius: var(--radius-lg);
}
.about__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.about__cta {
    margin-top: 30px;
}

/* -----------------------------
   Services (dark)
   ----------------------------- */
.services {
    background: var(--color-dark);
    color: #fff;
    position: relative;
    overflow: hidden;
    padding: var(--section-y) 0;
}
.services::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../assets/images/bg-servicii.jpg");
    background-image: -webkit-image-set(url("../assets/images/bg-servicii.webp") type("image/webp"), url("../assets/images/bg-servicii.jpg") type("image/jpeg"));
    background-image: image-set(url("../assets/images/bg-servicii.webp") type("image/webp"), url("../assets/images/bg-servicii.jpg") type("image/jpeg"));
    background-size: cover;
    background-position: center;
    opacity: 1;
    pointer-events: none;
}
.services > .container { position: relative; z-index: 1; }
/* Acoperă cusăturile de 1px (gol de rotunjire subpixel) de la marginile
   secțiunilor full-bleed cu bg-servicii — vizibile mai ales pe mobil */
.services, .subhero { box-shadow: 0 1px 0 var(--color-dark), 0 -1px 0 var(--color-dark); }

.services__title {
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    color: #fff;
    margin-bottom: 24px;
}
.services__intro {
    color: rgba(255, 255, 255, 0.78);
    max-width: 720px;
    margin-bottom: 70px;
    font-size: 1.05rem;
}

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

.service-card {
    color: #fff;
    max-width: 480px;
}
.service-card__icon {
    width: 64px;
    height: 64px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.service-card__icon .lottie {
    width: 100%;
    height: 100%;
}
/* Team avatars: photo cropped into the same 64px round slot */
.service-card__icon--photo { border-radius: 50%; overflow: hidden; }
.service-card__icon--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Team card header: avatar and name side by side */
.member__head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}
.member__head .service-card__icon { margin-bottom: 0; flex-shrink: 0; }
/* Anton sits high in its line box, so nudge the name to optically center it on the avatar */
.member__head h3 { margin-bottom: 0; line-height: 1; transform: translateY(0.08em); }
/* Extra breathing room under "Echipa Pinu Design" — only when the grid follows the
   title directly (team page), not on pages where an intro paragraph sits between them */
.services__title + .services__grid { margin-top: 34px; }
.service-card h3 {
    color: #fff;
    font-size: clamp(1.4rem, 1.9vw, 1.7rem);
    margin-bottom: 14px;
    font-weight: 400;
}
.service-card p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.98rem;
    margin-bottom: 22px;
}

.services__cta-wrap {
    display: flex;
    justify-content: center;
}

/* -----------------------------
   Subpage hero (servicii.html, portofoliu.html ...)
   ----------------------------- */
.subhero {
    background-color: var(--color-dark);
    background-image: url("../assets/images/bg-servicii.jpg");
    background-image: -webkit-image-set(url("../assets/images/bg-servicii.webp") type("image/webp"), url("../assets/images/bg-servicii.jpg") type("image/jpeg"));
    background-image: image-set(url("../assets/images/bg-servicii.webp") type("image/webp"), url("../assets/images/bg-servicii.jpg") type("image/jpeg"));
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: var(--hero-top) 0 var(--section-y);
    position: relative;
    overflow: hidden;
}
.subhero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(30, 30, 30, 0) 0%, rgba(30, 30, 30, 0.12) 55%, rgba(30, 30, 30, 0.3) 100%);
    pointer-events: none;
}
.subhero > .container { position: relative; z-index: 1; }
.subhero__grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(30px, 4vw, 60px);
    align-items: center;
}
.subhero__content { position: relative; z-index: 1; }
.subhero h1 {
    color: #fff;
    font-size: clamp(2.6rem, 6vw, 5rem);
    margin-bottom: 24px;
}
.subhero p {
    color: rgba(255, 255, 255, 0.85);
    max-width: 540px;
    font-size: 1.08rem;
    margin-bottom: 36px;
}
.subhero__visual { position: relative; }
.subhero__visual img {
    width: 100%;
    max-width: 520px;
    margin-right: auto;
    display: block;
}

/* -----------------------------
   Service content sections
   ----------------------------- */
.service-block {
    padding: var(--section-y) 0;
}
.service-block__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 90px);
    align-items: center;
}
/* Alternating blocks: Lottie on the left, text on the right */
.service-block--reverse .service-block__media { order: -1; }

/* All text (subtitle + title + lead + body + list + button) shares one
   column, so every title sits directly above and aligned with its text. */
.service-block__text .sub {
    display: block;
    color: var(--color-orange);
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 14px;
    letter-spacing: 0.02em;
    font-family: var(--font-body);
}
.service-block__text h2 {
    color: var(--color-dark);
    margin-bottom: 18px;
    font-size: clamp(2.2rem, 4vw, 3.4rem);
}
.service-block__lead {
    font-size: 1.4rem;
    margin-bottom: 16px;
    color: var(--color-dark);
}
.service-block__text p {
    margin-bottom: 16px;
    font-size: 1rem;
    color: var(--color-text);
}
.service-block__text .accent { color: var(--color-orange); font-weight: 700; }
.service-block__media {
    background-color: var(--color-dark);
    background-image: url("../assets/images/bg-servicii.jpg");
    background-image: -webkit-image-set(url("../assets/images/bg-servicii.webp") type("image/webp"), url("../assets/images/bg-servicii.jpg") type("image/jpeg"));
    background-image: image-set(url("../assets/images/bg-servicii.webp") type("image/webp"), url("../assets/images/bg-servicii.jpg") type("image/jpeg"));
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-md);
    padding: clamp(60px, 7vw, 96px);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.service-block__media .lottie {
    width: 100%;
    height: 100%;
    max-width: 300px;
    max-height: 300px;
    margin: auto;
    /* Reglaj manual per animație — schimbă valorile --lottie-* în servicii.html:
       --lottie-x  = stânga(-) / dreapta(+)
       --lottie-y  = sus(-) / jos(+)
       --lottie-scale = mărime (1 = normal, 1.2 = mai mare, 0.8 = mai mic) */
    transform: translate(var(--lottie-x, 0px), var(--lottie-y, 0px)) scale(var(--lottie-scale, 1));
}
.service-block__media .lottie svg { display: block; }
.service-block__list {
    margin: 20px 0 28px;
}
.service-block__list li {
    position: relative;
    padding: 10px 0 10px 30px;
    color: var(--color-text);
    font-size: 0.98rem;
    border-bottom: 1px solid var(--color-line);
}
.service-block__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 17px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-orange);
}
.service-block__list li::after {
    content: "✓";
    position: absolute;
    left: 4px;
    top: 12px;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

/* -----------------------------
   Pricing / packages
   ----------------------------- */
.packages { padding: var(--section-y) 0; }
/* Single "long-term collaboration" card on the bg-servicii dark backdrop */
.retainer {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    padding: clamp(48px, 7vw, 104px);
    color: #fff;
    background-color: var(--color-dark);
    background-image: url("../assets/images/bg-servicii.jpg");
    background-image: -webkit-image-set(url("../assets/images/bg-servicii.webp") type("image/webp"), url("../assets/images/bg-servicii.jpg") type("image/jpeg"));
    background-image: image-set(url("../assets/images/bg-servicii.webp") type("image/webp"), url("../assets/images/bg-servicii.jpg") type("image/jpeg"));
    background-size: cover;
    background-position: center;
}
.retainer__kicker {
    display: block;
    color: var(--color-orange);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.retainer h2 { color: #fff; margin-bottom: 20px; }
.retainer p { color: rgba(255, 255, 255, 0.82); font-size: 1.05rem; max-width: 720px; }
.retainer p + p { margin-top: 16px; }
.retainer strong { color: var(--color-orange); font-weight: 700; }
.retainer .btn { margin-top: 34px; }

/* -----------------------------
   FAQ
   ----------------------------- */
.faq { padding: var(--section-y) 0; background: var(--color-bg-alt); }
.faq__head { text-align: center; max-width: 720px; margin: 0 auto 50px; }
.faq__head h2 { color: var(--color-dark); margin-bottom: 14px; }
.faq__head p { color: var(--color-muted); }
.faq__list { max-width: 820px; margin: 0 auto; }
.faq-item { border-top: 1px solid var(--color-line); }
.faq-item:last-child { border-bottom: 1px solid var(--color-line); }
.faq-item__q {
    width: 100%;
    text-align: left;
    padding: 24px 0;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.25rem;
    color: var(--color-dark);
    transition: color var(--transition);
}
.faq-item__q:hover { color: var(--color-orange); }
.faq-item__q .icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-dark);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), transform var(--transition);
    flex-shrink: 0;
}
.faq-item.is-open .faq-item__q .icon {
    background: var(--color-orange);
    transform: rotate(45deg);
}
.faq-item__a {
    max-height: 0;
    overflow: hidden;
    color: var(--color-text);
    transition: max-height 0.4s ease, padding 0.4s ease;
}
.faq-item.is-open .faq-item__a {
    max-height: 400px;
    padding: 0 0 24px;
}

/* -----------------------------
   Portfolio — simple grid (florinmve style)
   ----------------------------- */
.portfolio-intro {
    padding: var(--hero-top) 0 0;
    text-align: center;
}
.portfolio-intro h1 { margin-bottom: 16px; }
.portfolio-intro p {
    color: var(--color-muted);
    max-width: 600px;
    margin: 0 auto 20px;
    font-size: 1.05rem;
}
.portfolio-intro__cats {
    font-style: italic;
    color: var(--color-orange);
    font-weight: 700;
    letter-spacing: 0.04em;
    font-size: 1rem;
    margin-bottom: 0;
}

.portfolio-simple { padding: var(--section-y) 0; }
.portfolio-simple__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px 40px;
}
.portfolio-item {
    display: block;
    color: inherit;
}
.portfolio-item__thumb {
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    transition: transform var(--transition);
    margin-bottom: 20px;
    overflow: hidden;
}
.portfolio-item:hover .portfolio-item__thumb { transform: translateY(-4px); }
.portfolio-item__caption h3 {
    font-size: 1.6rem;
    margin-bottom: 6px;
    color: var(--color-dark);
    font-weight: 400;
}
.portfolio-item__caption span {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.74rem;
    color: var(--color-muted);
    font-weight: 700;
    font-family: var(--font-body);
    font-style: normal;
}

/* Cover gradient palettes (also used on project pages) */
.cover--rerise   { background: linear-gradient(135deg, #F4820A, #B35E06); }
.cover--nomaad   { background: linear-gradient(135deg, #2C5F2D, #97BC62); }
.cover--caro     { background: linear-gradient(135deg, #FF9A3D, #FFC57A); }
.cover--desior   { background: linear-gradient(135deg, #2A2A2A, #5A5A5A); }

/* -----------------------------
   Project detail page
   ----------------------------- */
.project-hero {
    padding: var(--hero-top) 0 var(--section-y);
    text-align: center;
}
.project-hero h1 {
    margin-bottom: 10px;
    font-size: clamp(2.6rem, 6vw, 5rem);
}
.project-hero__cat {
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.82rem;
    color: var(--color-orange);
    font-weight: 700;
    margin-bottom: 28px;
    font-style: normal;
    font-family: var(--font-body);
}
.project-hero__lede {
    max-width: 640px;
    margin: 0 auto;
    font-size: 1.1rem;
    color: var(--color-text);
}

.project-gallery { padding: var(--section-y) 0; }
.project-gallery img {
    width: 100%;
    display: block;
    border-radius: var(--radius-md);
    margin-bottom: 24px;
}
.project-pdf {
    width: 100%;
    height: 82vh;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
}
.project-pdf__fallback {
    margin-top: 16px;
    text-align: center;
    font-family: var(--font-body);
}
.project-pdf__fallback a { color: var(--color-orange); font-weight: 700; }
/* Portfolio thumbs that use a real image instead of a gradient */
.portfolio-item__thumb--img { background-size: cover; background-position: center; }
.portfolio-item__thumb--logo {
    display: flex; align-items: center; justify-content: center;
    background: var(--color-dark); padding: 18%;
}
.portfolio-item__thumb--logo img { max-width: 100%; max-height: 100%; filter: brightness(0) invert(1); }
.project-gallery__item {
    aspect-ratio: 16 / 10;
    margin-bottom: 32px;
    background-size: cover;
    background-position: center;
}
.project-gallery__item:nth-child(odd) { aspect-ratio: 4 / 3; }

.project-cta {
    padding: var(--section-y) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    border-top: 1px solid var(--color-line);
}
.project-cta .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

@media (max-width: 720px) {
    .portfolio-simple__grid { grid-template-columns: 1fr; gap: 50px; }
}

/* -----------------------------
   Despre noi (about page)
   ----------------------------- */
.about-hero {
    padding: var(--hero-top) 0 var(--section-y);
}
.about-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(36px, 5vw, 80px);
    align-items: center;
}
.about-hero__content h1 { margin-bottom: 22px; }
.about-hero__content p { max-width: 520px; font-size: 1.1rem; color: var(--color-text); }
.about-hero__content p + p { margin-top: 16px; }
.about-hero__cta { margin-top: 30px; }
.about-hero__image {
    background: var(--color-orange);
    overflow: hidden;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    max-width: 540px;
    margin: 0 auto;
}
.about-hero__image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.values { padding: var(--section-y) 0; }
.values__head { max-width: 720px; margin: 0 auto 50px; }
.values__head h2 { margin-bottom: 14px; }
.values__head p { color: var(--color-muted); }
.values__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.value {
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: 36px;
    transition: transform var(--transition), border-color var(--transition);
}
.value:hover { transform: translateY(-6px); border-color: var(--color-orange); }
.value__num {
    display: block;
    font-family: var(--font-display);
    font-size: 2.2rem;
    color: var(--color-orange);
    font-weight: 400;
    margin-bottom: 12px;
}
.value h3 { margin-bottom: 10px; font-size: 1.3rem; }
.value p { font-size: 0.98rem; color: var(--color-text); }

/* -----------------------------
   Contact page
   ----------------------------- */
.contact-hero {
    padding: var(--hero-top) 0 0;
    text-align: center;
}
.contact-hero h1 { max-width: 800px; margin: 18px auto 18px; }
.contact-hero p  { max-width: 600px; margin: 0 auto; font-size: 1.1rem; color: var(--color-text); }

.contact-section { padding: var(--section-y) 0; }
.contact-card {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: stretch;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-line);
    box-shadow: var(--shadow-md);
    background: #fff;
}
.contact-info {
    background: var(--color-dark);
    color: #fff;
    border-radius: 0;
    padding: 48px;
}
.contact-info h2 { color: #fff; margin-bottom: 16px; }
.contact-info p  { color: rgba(255, 255, 255, 0.75); margin-bottom: 36px; }
.contact-info__item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.contact-info__item:last-child { border-bottom: none; }
.contact-info__icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--color-orange);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}
.contact-info__label {
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 4px;
    display: block;
    font-weight: 700;
}
.contact-info__value { color: #fff; font-weight: 600; font-size: 1.02rem; }

.contact-form {
    background: #fff;
    border-radius: 0;
    padding: 48px;
}
.contact-form h2 { margin-bottom: 8px; }
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}
.form-field { margin-bottom: 18px; }
.form-field label {
    display: block;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 6px;
}
.form-field input,
.form-field textarea,
.form-field select {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--color-line);
    background: var(--color-bg-alt);
    font-family: inherit;
    font-size: 0.98rem;
    color: var(--color-dark);
    transition: border-color var(--transition), background var(--transition);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    outline: none;
    border-color: var(--color-orange);
    background: #fff;
}
.form-field textarea { min-height: 140px; resize: vertical; }
.contact-form .btn { width: 100%; }
.form-success {
    display: none;
    margin-top: 16px;
    padding: 14px 18px;
    background: rgba(46, 160, 67, 0.1);
    border: 1px solid rgba(46, 160, 67, 0.3);
    border-radius: 12px;
    color: #1d6f30;
}
.form-success.is-visible { display: block; }
.form-success.is-error {
    background: rgba(192, 57, 43, 0.1);
    border-color: rgba(192, 57, 43, 0.3);
    color: #c0392b;
}

/* -----------------------------
   Footer (orange)
   ----------------------------- */
.footer {
    background: var(--color-orange);
    color: var(--color-dark);
    padding: var(--section-y) 0 28px;
    /* trage footer-ul 1px peste secțiunea de deasupra ca să acopere cusătura subpixel */
    position: relative;
    z-index: 1;
    margin-top: -1px;
}
.footer__grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr 1.2fr;
    gap: 40px;
    margin-bottom: 50px;
}
.footer__brand {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.footer__brand .nav__logo {
    background: transparent;
    box-shadow: none;
    padding: 0;
    width: 92px;
    height: 92px;
}
.footer h4 {
    color: var(--color-dark);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.25rem;
    margin-bottom: 18px;
    letter-spacing: 0.01em;
}
.footer ul li { margin-bottom: 10px; }
.footer ul a {
    color: #fff;
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 0.9rem;
}
.footer ul a:hover { color: var(--color-dark); }

.footer__contact a {
    display: block;
    color: #fff;
    margin-bottom: 8px;
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 0.9rem;
}
.footer__contact a:hover { color: var(--color-dark); }

.footer__socials {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}
.footer__socials a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--color-orange-dark);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), transform var(--transition);
}
.footer__socials a:hover {
    background: var(--color-dark);
    color: #fff;
    transform: translateY(-3px);
}
.footer__bottom {
    padding-top: 22px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 0.88rem;
    color: var(--color-dark);
    font-weight: 600;
}

/* -----------------------------
   Reveal on scroll
   ----------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }
.reveal--delay-4 { transition-delay: 0.4s; }

/* -----------------------------
   Responsive
   ----------------------------- */
@media (max-width: 1024px) {
    :root { --section-y: 60px; --hero-top: 130px; }
    .hero__grid { grid-template-columns: 1fr; gap: 50px; }
    .hero__visual { margin: 0 auto; max-width: 460px; }
    .hero__float { display: none; }

    .about__grid,
    .about-hero__grid,
    .service-block__row,
    .contact-card { grid-template-columns: 1fr; }
    /* Stacked on mobile: animation first, then the text block — for every block */
    .service-block__media { order: -1; max-width: 460px; justify-self: center; }
    /* Despre noi hero: imaginea apare înaintea textului pe mobil */
    .about-hero__image { order: -1; }

    .subhero__grid { grid-template-columns: 1fr; gap: 36px; }
    .subhero__visual img { margin: 0 auto; max-width: 340px; }

    .services__grid,
    .values__grid { grid-template-columns: repeat(2, 1fr); }

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

@media (max-width: 720px) {
    body { font-size: 15.5px; }
    :root { --section-y: 52px; --hero-top: 100px; }

    /* Mobile keeps the same glass dropdown menu as desktop — only the logo shrinks */
    .nav__logo { width: 88px; height: 88px; padding: 7px; }

    .hero__grid { gap: 10px; }
    .hero__title { font-size: clamp(2.4rem, 11vw, 3.6rem); }
    .clients__capsule {
        border-radius: var(--radius-pill);
        padding: 18px 22px;
    }

    .services__grid,
    .values__grid,
    .footer__grid,
    .form-row { grid-template-columns: 1fr; }

    .service-block__media { padding: 30px; }
    .contact-info,
    .contact-form { padding: 30px 24px; }

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

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .reveal { opacity: 1; transform: none; }
}