*,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      @font-face {
        font-family: "DM Sans";
        src: url("fonts/dm-sans-v17-latin-300.woff2") format("woff2");
        font-weight: 300;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: "DM Sans";
        src: url("fonts/dm-sans-v17-latin-regular.woff2") format("woff2");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: "DM Sans";
        src: url("fonts/dm-sans-v17-latin-500.woff2") format("woff2");
        font-weight: 500;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: "DM Sans";
        src: url("fonts/dm-sans-v17-latin-600.woff2") format("woff2");
        font-weight: 600;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: "Playfair Display";
        src: url("fonts/playfair-display-v40-latin-700.woff2") format("woff2");
        font-weight: 700;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: "Playfair Display";
        src: url("fonts/playfair-display-v40-latin-900.woff2") format("woff2");
        font-weight: 900;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: "Playfair Display";
        src: url("fonts/playfair-display-v40-latin-700italic.woff2") format("woff2");
        font-weight: 700;
        font-style: italic;
        font-display: swap;
      }
      :root {
        --cream: #f5f0e8;
        --cream2: #ede7d9;
        --paper: #fffaf1;
        --dark: #141210;
        --dark2: #1e1b18;
        --coral: #ff5a36;
        --coral2: #ff7d4a;
        --coral-rgb: 255, 90, 54;
        --coral2-rgb: 255, 125, 74;
        --lime: #b8d44a;
        --gold: #f6b73c;
        --text-dark: #1a1612;
        --text-mid: #4a443c;
        --text-muted: #8a7e72;
        --muted: #82776b;
        --bl: rgba(26, 22, 18, 0.09);
        --bd: rgba(245, 240, 232, 0.08);
        --shadow: 0 18px 55px rgba(20, 18, 16, 0.13);
        --shadow2: 0 28px 75px rgba(0, 0, 0, 0.32);
        --fs: "Playfair Display", Georgia, serif;
        --fb: "DM Sans", system-ui, sans-serif;
        --ease: cubic-bezier(0.22, 0.68, 0, 1.2);
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        overflow-x: clip;
        background: var(--cream);
        color: var(--text-dark);
        font-family: var(--fb);
        font-size: 16px;
        line-height: 1.65;
        font-weight: 300;
        -webkit-font-smoothing: antialiased;
      }

      /* HEADER */
      header {
        position: sticky;
        top: 0;
        z-index: 200;
        background: rgba(245, 240, 232, 0.93);
        backdrop-filter: blur(18px) saturate(1.5);
        -webkit-backdrop-filter: blur(18px) saturate(1.5);
        border-bottom: 1px solid var(--bl);
      }
      .hdr {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 32px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 68px;
      }
      .logo {
        display: flex;
        align-items: center;
        text-decoration: none;
      }
      .logo-mark {
        display: block;
      }
      .logo-mark img {
        display: block;
        height: 45px;
        width: auto;
      }
      nav {
        display: flex;
        align-items: center;
        gap: 36px;
      }
      nav a {
        font-size: 0.77rem;
        font-weight: 500;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-mid);
        text-decoration: none;
        transition: color 0.2s;
      }
      nav a:hover {
        color: var(--text-dark);
      }
      .nav-cta {
        padding: 10px 22px;
        background: var(--coral);
        color: #fff;
        border-radius: 40px;
        font-size: 0.77rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 8px;
        transition:
          background 0.2s,
          transform 0.2s var(--ease);
      }
      .nav-cta:hover {
        background: #ea4f2f;
        transform: translateY(-1px);
      }
      .ham {
        display: none;
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px;
        flex-direction: column;
        gap: 5px;
      }
      .ham span {
        display: block;
        width: 22px;
        height: 1.5px;
        background: var(--text-dark);
        transition:
          transform 0.25s,
          opacity 0.2s;
      }

      /* HERO */
      .hero {
        max-width: 1200px;
        margin: 0 auto;
        padding: 72px 32px 64px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 56px;
        align-items: center;
        min-height: calc(100vh - 68px);
        position: relative;
      }
      .hero > div:first-child {
        position: relative;
        z-index: 4;
      }
      .hero::before {
        content: "";
        position: absolute;
        top: -80px;
        right: -100px;
        width: 580px;
        height: 580px;
        background: radial-gradient(
          circle at 60% 40%,
          rgba(var(--coral-rgb), 0.07),
          transparent 65%
        );
        pointer-events: none;
      }
      .eyebrow {
        font-size: 0.66rem;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--coral);
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .eyebrow::before {
        content: "";
        display: inline-block;
        width: 22px;
        height: 1.5px;
        background: var(--coral);
      }
      h1 {
        font-family: var(--fs);
        font-size: clamp(2rem, 4vw, 3.8rem);
        font-weight: 900;
        line-height: 1.03;
        letter-spacing: -0.02em;
        margin-bottom: 22px;
        color: var(--text-dark);
      }
      h1 em {
        font-style: italic;
        color: var(--coral);
      }
      .hero-sub {
        font-size: 1.03rem;
        color: var(--text-mid);
        line-height: 1.75;
        max-width: 480px;
        margin-bottom: 32px;
      }
      .hero-sub strong {
        color: var(--text-dark);
        font-weight: 500;
      }
      .hero-btns {
        display: flex;
        align-items: center;
        gap: 18px;
        flex-wrap: wrap;
      }
      .btn-dark {
        padding: 15px 30px;
        background: var(--text-dark);
        color: var(--cream);
        border-radius: 40px;
        font-size: 0.87rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        transition:
          background 0.2s,
          transform 0.2s var(--ease),
          box-shadow 0.2s;
      }
      .btn-dark:hover {
        background: #2e2a26;
        transform: translateY(-2px);
        box-shadow: 0 10px 32px rgba(20, 18, 16, 0.18);
      }
      .btn-ghost {
        padding: 14px 26px;
        border: 1.5px solid rgba(26, 22, 18, 0.2);
        border-radius: 40px;
        font-size: 0.87rem;
        font-weight: 500;
        color: var(--text-mid);
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        transition:
          border-color 0.2s,
          color 0.2s,
          transform 0.2s var(--ease);
      }
      .btn-ghost:hover {
        border-color: var(--coral);
        color: var(--coral);
        transform: translateY(-1px);
      }
      .hero-trust {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 34px;
        padding-top: 26px;
        border-top: 1px solid var(--bl);
        flex-wrap: wrap;
      }
      .tpill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 14px;
        border: 1.5px solid var(--bl);
        border-radius: 24px;
        font-size: 0.73rem;
        font-weight: 500;
        color: var(--text-mid);
        background: #fff;
      }
      .tpill strong {
        color: var(--text-dark);
      }
      /* ─ HERO RIGHT ACCORDÉON ─ */
      .hero-r {
        position: relative;
        height: 480px;
      }
      .acc-stack {
        position: relative;
        width: 100%;
        height: 100%;
      }
      .ac {
        position: absolute;
        border-radius: 16px;
        overflow: hidden;
        cursor: pointer;
        box-shadow: 0 8px 40px rgba(20, 18, 16, 0.12);
        transition: all 0.5s var(--ease);
        transform-origin: top center;
      }
      .ac:nth-child(1) {
        top: 0;
        left: 0;
        width: 54%;
        z-index: 3;
      }
      .ac:nth-child(2) {
        top: 20px;
        left: 38%;
        width: 56%;
        z-index: 2;
        transform: rotate(1.5deg);
      }
      .ac:nth-child(3) {
        top: 38px;
        left: 52%;
        width: 50%;
        z-index: 1;
        transform: rotate(3deg);
      }
      .ac.on {
        z-index: 10 !important;
        transform: rotate(0) scale(1.03) !important;
        left: 0 !important;
        top: -8px !important;
        width: 62% !important;
      }
      .ac-thumb {
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
      }
      .ac-inner {
        text-align: center;
        position: relative;
        z-index: 2;
        padding: 20px;
      }
      .ac-title {
        font-family: var(--fs);
        font-size: 1.25rem;
        font-weight: 700;
        color: #f5f0e8;
        line-height: 1.2;
      }
      .ac-sub {
        font-size: 0.66rem;
        font-weight: 500;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(245, 240, 232, 0.4);
        margin-top: 10px;
      }
      .ac-foot {
        padding: 13px 15px;
        background: #fff;
      }
      .ac-foot-t {
        font-size: 0.79rem;
        font-weight: 600;
        color: var(--text-dark);
        margin-bottom: 2px;
      }
      .ac-foot-s {
        font-size: 0.69rem;
        color: var(--text-muted);
      }
      .hero-r {
        position: relative;
        height: 480px;
        overflow: visible;
      }
      .hero-orb {
        position: absolute;
        right: -34px;
        top: -28px;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        background: radial-gradient(
          circle at 38% 34%,
          rgba(255, 255, 255, 0.74) 0%,
          rgba(247, 239, 226, 0.9) 36%,
          rgba(242, 230, 211, 0.98) 68%,
          rgba(236, 224, 205, 1) 100%
        );
        z-index: 1;
        pointer-events: none;
      }
      .orb {
        position: absolute;
        border-radius: 50%;
        box-shadow:
          inset -12px -16px 22px rgba(0, 0, 0, 0.2),
          inset 10px 10px 18px rgba(255, 255, 255, 0.35),
          0 18px 32px rgba(0, 0, 0, 0.2);
        z-index: 2;
        pointer-events: none;
      }
      .orb.a {
        right: 410px;
        top: 4px;
        width: 70px;
        height: 70px;
        background: radial-gradient(circle at 32% 28%, #ffc0aa, #ff6249 46%, #b43224);
      }
      .orb.b {
        right: 0;
        top: 376px;
        width: 86px;
        height: 86px;
        background: radial-gradient(circle at 32% 28%, #f1ff98, #c9ea45 46%, #89a526);
      }
      .orb.c {
        right: 28px;
        bottom: 12px;
        width: 52px;
        height: 52px;
        background: radial-gradient(circle at 32% 28%, #ffb19e, #ff5b45 46%, #9d2e20);
      }
      .acc-stack {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 3;
      }
      .fbadge {
        position: absolute;
        border-radius: 12px;
        padding: 11px 14px;
        pointer-events: none;
        z-index: 20;
        animation: fl 6s ease-in-out infinite alternate;
      }
      @keyframes fl {
        from {
          transform: translateY(0);
        }
        to {
          transform: translateY(-8px);
        }
      }
      .fb-p {
        top: -81px;
        left: -18px;
        right: auto;
        width: 98px;
        height: 98px;
        padding: 0;
        border-radius: 50%;
        background: linear-gradient(145deg, var(--coral2) 0%, var(--coral) 100%);
        box-shadow: 0 14px 32px rgba(var(--coral-rgb), 0.28);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        animation-delay: 0.5s;
      }
      .fb-p .fbn {
        font-family: var(--fs);
        font-size: 1.75rem;
        font-weight: 900;
        color: #fff;
        line-height: 1;
        margin-bottom: 4px;
      }
      .fb-p .fbl {
        font-size: 0.54rem;
        font-weight: 600;
        letter-spacing: 0.11em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.88);
        line-height: 1.35;
        max-width: 74px;
      }
      .check {
        position: absolute;
        top: -15px;
        left:47px;
        z-index: 25;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-weight: 1000;
        background: var(--lime);
        color: #14120f;
        box-shadow: 0 15px 35px rgba(163, 230, 53, 0.34);
      }
      .score {
        position: absolute;
        left: 0;
        bottom: 34px;
        z-index: 8;
        width: 210px;
        min-height: 205px;
        border-radius: 22px;
        background: #fffaf0;
        display: grid;
        place-items: center;
        padding: 22px 18px;
        text-align: center;
        box-shadow: 0 26px 70px rgba(26, 21, 21, 0.2);
        transform: translate3d(
          calc(var(--mx) * 0.58px),
          calc(var(--my) * 0.58px),
          0
        );
        transition: transform 0.12s ease-out;
        will-change: transform;
      }
      .score p:first-child {
        font-size: 0.72rem;
        font-weight: 900;
        color: #4b403a;
      }
      .ring {
        width: 98px;
        height: 98px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        margin: 14px 0 10px;
        background: conic-gradient(
          var(--lime) 0 78%,
          var(--gold) 78% 92%,
          #eadfcb 92% 100%
        );
        position: relative;
      }
      .ring::after {
        content: "";
        position: absolute;
        inset: 13px;
        border-radius: 50%;
        background: #fffaf0;
      }
      .ring b {
        z-index: 1;
        font-size: 2rem;
        line-height: 1;
      }
      .ring small {
        z-index: 1;
        font-size: 0.62rem;
      }
      .score strong {
        font-size: 0.78rem;
      }
      .tpill i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--lime);
        display: inline-block;
      }
      .hero-visual {
        position: relative;
        height: 560px;
      }
      .hero-visual:before {
        content: "";
        position: absolute;
        right: -28vw;
        top: -155px;
        width: 62vw;
        max-width: 820px;
        aspect-ratio: 1.2;
        border-radius: 42% 58% 62% 38%/44% 42% 58% 56%;
        background: linear-gradient(140deg, rgba(255,255,255,.8), rgba(238,216,188,.62));
        z-index: 0;
      }
      .hero-visual:after {
        content: "";
        position: absolute;
        left: -18vw;
        bottom: -90px;
        width: 38vw;
        max-width: 520px;
        aspect-ratio: 1;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255,90,54,.12), transparent 64%);
        z-index: 0;
      }
      .hero-stage {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 1;
      }
      .project-card {
        position: absolute;
        border-radius: 20px;
        overflow: hidden;
        background: #fffaf1;
        box-shadow: var(--shadow, 0 18px 55px rgba(20, 18, 16, 0.13));
        border: 1px solid rgba(25,21,18,.06);
        isolation: isolate;
      }
      .project-card.main {
        right: 6px;
        top: 18px;
        width: 78%;
        min-height: 238px;
        z-index: 5;
        transform: rotate(-1.2deg);
      }
      .project-card.mid {
        right: 84px;
        top: 220px;
        width: 72%;
        min-height: 176px;
        z-index: 3;
        transform: rotate(1deg);
      }
      .project-card.low {
        right: 24px;
        top: 372px;
        width: 68%;
        min-height: 156px;
        z-index: 1;
        transform: rotate(-.8deg);
      }
      .pc-top {
        height: 92px;
        background: linear-gradient(135deg,#1a1714,#2c241f);
        position: relative;
        overflow: hidden;
      }
      .pc-top:before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 72% 28%, rgba(255,90,54,.34), transparent 32%), radial-gradient(circle at 18% 70%, rgba(184,212,74,.22), transparent 34%);
      }
      .project-card.mid .pc-top {
        height: 58px;
        background: linear-gradient(135deg,#0f1f18,#283621);
      }
      .project-card.low .pc-top {
        height: 52px;
        background: linear-gradient(135deg,#2b1620,#3a202b);
      }
      .pc-body {
        padding: 22px 24px 24px;
      }
      .pc-kicker {
        font-size: .62rem;
        text-transform: uppercase;
        letter-spacing: .15em;
        font-weight: 900;
        color: var(--coral);
        margin-bottom: 8px;
      }
      .pc-title {
        font-family: var(--fs);
        font-size: 1.36rem;
        font-weight: 900;
        letter-spacing: -.03em;
        line-height: 1.12;
      }
      .pc-text {
        font-size: .84rem;
        color: var(--muted);
        line-height: 1.55;
        margin-top: 9px;
      }
      .pc-tags {
        display:flex;
        flex-wrap:wrap;
        gap:7px;
        margin-top:16px;
      }
      .pc-tags span {
        font-size:.62rem;
        text-transform:uppercase;
        letter-spacing:.07em;
        font-weight:900;
        border-radius:999px;
        padding:5px 9px;
        background:rgba(25,21,18,.06);
        color:#5c5147;
      }
      .hero .project-card .pc-title {
        color: var(--text-dark);
      }
      .hero .project-card .pc-text {
        color: var(--text-mid);
      }
      .hero .project-card .pc-tags span {
        color: #5c5147;
        background: rgba(25, 21, 18, 0.06);
      }
      .fbadge {
        position: absolute;
        border-radius: 12px;
        padding: 11px 14px;
        pointer-events: none;
        z-index: 20;
        animation: fl 6s ease-in-out infinite alternate;
      }
      @keyframes fl {
        from { transform: translateY(0); }
        to { transform: translateY(-8px); }
      }
      .fb-p {
        left: 18px;
        top: -42px;
        right: auto;
        width: 98px;
        height: 98px;
        padding: 0;
        border-radius: 50%;
        background: linear-gradient(145deg, var(--coral2) 0%, var(--coral) 100%);
        box-shadow: 0 14px 32px rgba(var(--coral-rgb), 0.28);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        animation-delay: 0.5s;
      }
      .fb-p .fbn {
        font-family: var(--fs);
        font-size: 1.75rem;
        font-weight: 900;
        color: #fff;
        line-height: 1;
        margin-bottom: 4px;
      }
      .fb-p .fbl {
        font-size: 0.54rem;
        font-weight: 600;
        letter-spacing: 0.11em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.88);
        line-height: 1.35;
        max-width: 74px;
      }
      .check {
        position: absolute;
        top: 18px;
        left: 80px;
        z-index: 25;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-weight: 1000;
        background: var(--lime);
        color: #14120f;
        box-shadow: 0 15px 35px rgba(163, 230, 53, 0.34);
      }
      .score {
        position: absolute;
        left: -13px;
        bottom: 34px;
        z-index: 8;
        width: 150px;
        min-height: 205px;
        border-radius: 22px;
        background: #fffaf0;
        display: grid;
        place-items: center;
        padding: 22px 18px;
        text-align: center;
        box-shadow: 0 26px 70px rgba(26, 21, 21, 0.2);
        transform: translate3d(
          calc(var(--mx) * 0.58px),
          calc(var(--my) * 0.58px),
          0
        );
        transition: transform 0.12s ease-out;
        will-change: transform;
      }
      .score p:first-child {
        font-size: 0.72rem;
        font-weight: 900;
        color: #4b403a;
      }
      .ring {
        width: 98px;
        height: 98px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        margin: 14px 0 10px;
        background: conic-gradient(
          var(--lime) 0 78%,
          var(--gold) 78% 92%,
          #eadfcb 92% 100%
        );
        position: relative;
      }
      .ring::after {
        content: "";
        position: absolute;
        inset: 10px;
        border-radius: 50%;
        background: #fffaf0;
      }
      .ring b {
        position: relative;
        z-index: 1;
        font-family: var(--fs);
        font-size: 1.72rem;
        font-weight: 800;
        color: #263115;
      }
      .ring small {
        position: relative;
        z-index: 1;
        font-size: 0.66rem;
        color: #8a7d6f;
        margin-left: 2px;
      }
      .score strong {
        font-size: 0.84rem;
        color: #2b4f1a;
      }
      .score p:last-child {
        font-size: 0.68rem;
        color: #81746a;
        margin-top: 3px;
      }
      .fin {
        right:-53px;
        bottom:-76px;
        width:206px;
        border-radius:20px;
        background:#171411;
        color:var(--cream);
        padding:20px;
        box-shadow:var(--shadow2);
        border:1px solid rgba(255,255,255,.1);
        position:absolute;
        z-index: 6;
      }
      .fin small {
        display:block;
        font-size:.62rem;
        text-transform:uppercase;
        letter-spacing:.14em;
        color:rgba(245,240,232,.42);
        font-weight:900;
      }
      .fin b {
        display:block;
        font-family:var(--fs);
        line-height:1.05;
        margin-top:7px;
        color:var(--lime);
      }
      .fin strong {
        display:block;
        font-family:var(--fs);
        font-size:1.55rem;
        line-height:1.05;
        margin-top:7px;

      }
      .fin p {
        font-size:.78rem;
        line-height:1.5;
        color:rgba(245,240,232,.58);
        margin-top:9px;
      }
      .orb {
        position:absolute;
        border-radius:50%;
        box-shadow:0 16px 32px rgba(20,18,16,.18), inset -10px -14px 18px rgba(0,0,0,.22), inset 10px 10px 18px rgba(255,255,255,.28);
        z-index:1;
      }
      .orb.one {
        right:42px;
        top:-12px;
        width:54px;
        height:54px;
        background:radial-gradient(circle at 35% 30%, #ffb59d, #ff6847 46%, #9f3324);
      }
      .orb.two {
        right: -84px;
        top: 388px;
        left: auto;
        bottom: auto;
        width: 86px;
        height: 86px;
        background:radial-gradient(circle at 35% 30%, #effaa5, #b8d44a 46%, #78952a);
      }
      .orb.three {
        right: -112px;
        bottom: 12px;
        width: 52px;
        height: 52px;
        background:radial-gradient(circle at 35% 30%, #ffb19e, #ff5b45 46%, #9d2e20);
      }
      /* TICKER */
      .ticker-wrap{overflow:hidden;background:var(--dark);padding:0.75rem 0}
      .ticker{display:flex;gap:0;animation:ticker 30s linear infinite;width:max-content}
      .ticker-item{white-space:nowrap;padding:0 3rem;font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(245, 240, 232, 0.58);font-weight:500}
      .ticker-item span{color:var(--lime);margin-right:0.5rem}
      @keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

      .wrap {
        width: min(1200px, calc(100% - 40px));
        margin-inline: auto;
      }
      .section {
        padding: 92px 0;
      }
      .section-head {
        display: grid;
        grid-template-columns: 0.85fr 1fr;
        gap: 48px;
        align-items: end;
        margin-bottom: 48px;
      }
      .section-sub {
        font-size: 0.98rem;
        color: var(--text-mid);
        line-height: 1.78;
        max-width: 620px;
      }
      .service-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
      }
      .service {
        position: relative;
        background: rgba(255, 250, 241, 0.68);
        border: 1px solid rgba(25, 21, 18, 0.07);
        border-radius: 18px;
        padding: 28px 22px;
        min-height: 284px;
        box-shadow: 0 12px 36px rgba(20, 18, 16, 0.08);
        overflow: hidden;
        transition:
          transform 0.25s var(--ease),
          box-shadow 0.25s ease,
          border-color 0.25s ease;
      }
      .service:hover {
        transform: translateY(-6px);
        border-color: rgba(255, 90, 54, 0.18);
        box-shadow: 0 18px 46px rgba(20, 18, 16, 0.12);
      }
      .service:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 3px;
        background: var(--coral);
        transform: scaleX(0.32);
        transform-origin: left;
      }
      .service:nth-child(2):after,
      .service:nth-child(4):after {
        background: var(--lime);
      }
      .service-icon {
        width: 46px;
        height: 46px;
        border-radius: 15px;
        background: rgba(255, 90, 54, 0.1);
        display: grid;
        place-items: center;
        color: var(--coral);
        margin-bottom: 20px;
      }
      .service:nth-child(2) .service-icon,
      .service:nth-child(4) .service-icon {
        background: rgba(184, 212, 74, 0.16);
        color: #6d8223;
      }
      .service-icon svg {
        width: 25px;
        height: 25px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .service h3 {
        font-family: var(--fs);
        font-size: 1.32rem;
        letter-spacing: -0.03em;
        line-height: 1.15;
        margin-bottom: 12px;
      }
      .service p {
        font-size: 0.88rem;
        color: var(--text-muted);
        line-height: 1.68;
      }
      .service ul {
        list-style: none;
        padding: 0;
        margin: 18px 0 0;
        display: grid;
        gap: 7px;
      }
      .service li {
        font-size: 0.74rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-weight: 900;
        color: #5e554d;
        display: flex;
        gap: 8px;
      }
      .service li:before {
        content: "\2713";
        color: #748d20;
      }

      /* SECTIONS */
      .sec {
        padding: 96px 32px;
      }
      .sec-in {
        max-width: 1200px;
        margin: 0 auto;
      }
      .sec-dark {
        background: var(--dark);
        padding: 96px 32px;
      }
      .sec-dark h2 {
        color: var(--cream);
      }
      .sec-dark .eyebrow::before {
        background: var(--coral);
      }
      .sec-dark .section-sub {
        color: rgba(245, 240, 232, 0.56);
      }
      .custom-block{
        margin-top:32px;
        padding:34px;
        border-radius:22px;
        background:linear-gradient(135deg,#141210,#241d19);
        border:1px solid rgba(255,90,54,.28);
        box-shadow:0 28px 75px rgba(0,0,0,.28);
        display:grid;
        grid-template-columns:1fr auto;
        gap:28px;
        align-items:center;
      }

      .custom-badge{
        display:inline-flex;
        margin-bottom:14px;
        padding:6px 12px;
        border-radius:999px;
        background:rgba(184,212,74,.16);
        color:#b8d44a;
        font-size:.68rem;
        text-transform:uppercase;
        letter-spacing:.12em;
        font-weight:900;
      }

      .custom-block h3{
        margin:0 0 12px;
        font-family:var(--fs);
        font-size:2rem;
        color:#f5f0e8;
      }

      .custom-block p{
        margin:0;
        max-width:760px;
        color:rgba(245,240,232,.58);
        font-family:var(--fb);
        line-height:1.7;
      }

      .custom-btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:10px;
        padding:15px 30px;
        border-radius:40px;
        background:var(--coral);
        color:var(--cream);
        font-family:var(--fb);
        font-size:0.87rem;
        font-weight:600;
        letter-spacing:0.04em;
        text-decoration:none;
        white-space:nowrap;
        transition:
          background 0.2s,
          transform 0.2s var(--ease),
          box-shadow 0.2s;
        box-shadow:0 14px 32px rgba(255,90,54,.24);
      }
      .custom-btn:hover{
        background:#ed4f31;
        transform:translateY(-2px);
        box-shadow:0 10px 32px rgba(20,18,16,.18);
      }
      h2 {
        font-family: var(--fs);
        font-size: clamp(2rem, 3.8vw, 3.3rem);
        font-weight: 700;
        letter-spacing: -0.02em;
        line-height: 1.1;
        color: var(--text-dark);
      }
      h2 em {
        font-style: italic;
        color: var(--coral);
      }
      .sec-sub {
        font-size: 0.93rem;
        color: var(--text-mid);
        line-height: 1.75;
        margin-top: 16px;
        max-width: 480px;
      }
      .mt-18 {
        margin-top: 18px;
      }
      .sec-sub-light {
        color: rgba(245, 240, 232, 0.38);
      }
      .sec-dark-alt {
        background: var(--dark2);
      }

      /* ─ PROBLÈME ─ */
      .prob-g {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 52px;
        margin-top: 0;
        align-items: start;
      }
      .prob-list {
        display: flex;
        flex-direction: column;
      }
      .pi {
        display: flex;
        gap: 18px;
        padding: 20px 0;
        border-bottom: 1px solid var(--bl);
        transition: padding-left 0.3s var(--ease);
        cursor: default;
      }
      .pi:first-child {
        border-top: 1px solid var(--bl);
      }
      .pi:hover {
        padding-left: 5px;
      }
      .pn {
        font-family: var(--fs);
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--cream2);
        line-height: 1;
        flex-shrink: 0;
        width: 28px;
        margin-top: 3px;
        transition: color 0.3s;
      }
      .pi:hover .pn {
        color: var(--coral);
      }
      .pt {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text-dark);
        margin-bottom: 4px;
      }
      .pd {
        font-size: 0.85rem;
        color: var(--text-muted);
        line-height: 1.65;
      }
      .prob-r {
        background: var(--dark);
        border-radius: 20px;
        padding: 38px;
        color: var(--cream);
        position: sticky;
        top: 120px;
      }
      .pr-eye {
        font-size: 0.61rem;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--coral);
        margin-bottom: 16px;
      }
      .pr-h {
        font-family: var(--fs);
        font-size: 1.65rem;
        font-weight: 700;
        line-height: 1.25;
        margin-bottom: 16px;
      }
      .pr-h em {
        color: var(--lime);
      }
      .pr-p {
        font-size: 0.85rem;
        color: rgba(245, 240, 232, 0.48);
        line-height: 1.75;
        margin-bottom: 22px;
      }
      .sol-pts {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .sp {
        display: flex;
        gap: 11px;
        font-size: 0.84rem;
        color: rgba(245, 240, 232, 0.55);
        line-height: 1.5;
      }
      .sp-chk {
        width: 17px;
        height: 17px;
        background: rgba(184, 212, 74, 0.13);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-top: 1px;
      }
      .sp-chk svg {
        width: 9px;
        height: 9px;
        stroke: var(--lime);
        fill: none;
        stroke-width: 2.5;
        stroke-linecap: round;
      }

      /* SERVICES */
      .svc-g {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
        margin-top: 52px;
      }
      .sc {
        background: rgba(245, 240, 232, 0.04);
        border: 1px solid rgba(245, 240, 232, 0.07);
        border-radius: 16px;
        padding: 32px 26px;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
        transition:
          border-color 0.35s,
          transform 0.4s var(--ease),
          box-shadow 0.35s;
      }
      .sc::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--coral);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s var(--ease);
      }
      .sc:hover {
        border-color: rgba(245, 240, 232, 0.16);
        transform: translateY(-6px);
        box-shadow: 0 22px 56px rgba(0, 0, 0, 0.32);
      }
      .sc:hover::after {
        transform: scaleX(1);
      }
      .sc.feat {
        border-color: rgba(var(--coral-rgb), 0.3);
        background: linear-gradient(
          150deg,
          rgba(var(--coral-rgb), 0.07),
          rgba(245, 240, 232, 0.03)
        );
      }
      .sc.feat::after {
        transform: scaleX(1);
      }
      .sc-pop {
        position: absolute;
        top: 16px;
        right: 16px;
        padding: 4px 11px;
        background: var(--coral);
        color: #fff;
        border-radius: 20px;
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .sc-n {
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(245, 240, 232, 0.2);
        margin-bottom: 14px;
      }
      .sc-t {
        font-family: var(--fs);
        font-size: 1.15rem;
        font-weight: 700;
        line-height: 1.25;
        color: var(--cream);
        margin-bottom: 11px;
      }
      .sc-d {
        font-size: 0.83rem;
        color: rgba(245, 240, 232, 0.43);
        line-height: 1.7;
        flex: 1;
        margin-bottom: 24px;
      }
      .sc-price {
        font-family: var(--fs);
        font-size: 2.6rem;
        font-weight: 900;
        color: var(--lime);
        line-height: 1;
        letter-spacing: -0.03em;
        margin-bottom: 10px;
      }
      .sc-price sup {
        font-size: 1.25rem;
        font-weight: 700;
        vertical-align: top;
        margin-top: 5px;
        display: inline-block;
      }
      .sc-price small {
        font-size: 0.9rem;
        color: rgba(245, 240, 232, 0.28);
        font-family: var(--fb);
        font-weight: 400;
      }
      .sc-fin {
        font-size: 0.72rem;
        color: rgba(245, 240, 232, 0.26);
        line-height: 1.5;
        padding: 8px 12px;
        background: rgba(245, 240, 232, 0.04);
        border-radius: 7px;
        border-left: 2px solid rgba(245, 240, 232, 0.06);
        margin-bottom: 18px;
      }
      .sc-fin strong {
        color: rgba(245, 240, 232, 0.52);
      }
      .sc:not(.feat) .sc-price small {
        color: rgba(245, 240, 232, 0.56);
        text-transform: none;
      }
      .sc:not(.feat) .sc-d,
      .sc:not(.feat) .sc-fin {
        color: rgba(245, 240, 232, 0.56);
      }
      .sc:not(.feat) .sc-fin strong {
        color: var(--lime);
      }
      .sc-feats {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-bottom: 24px;
      }
      .sc-feats li {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 0.74rem;
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: rgba(245, 240, 232, 0.32);
      }
      .sc-feats li::before {
        content: "\2713";
        color: var(--lime);
        font-weight: 700;
        font-size: 0.76rem;
      }
      .sc-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 12px 18px;
        border: 1px solid rgba(245, 240, 232, 0.1);
        border-radius: 40px;
        color: rgba(245, 240, 232, 0.55);
        font-size: 0.8rem;
        font-weight: 500;
        text-decoration: none;
        transition:
          border-color 0.2s,
          color 0.2s,
          transform 0.2s var(--ease);
        margin-top: auto;
      }
      .sc-cta:hover {
        border-color: var(--coral);
        color: var(--coral);
        transform: translateY(-1px);
      }
      .sc.feat .sc-cta {
        background: var(--coral);
        border-color: var(--coral);
        color: #fff;
        font-weight: 600;
      }
      .sc.feat .sc-cta:hover {
        background: #ea4f2f;
        border-color: #ea4f2f;
      }
      .sc.feat {
        background: var(--paper);
        border-color: transparent;
        box-shadow: 0 22px 60px rgba(0, 0, 0, 0.18);
      }
      .sc.feat .sc-n,
      .sc.feat .sc-t,
      .sc.feat .sc-d,
      .sc.feat .sc-feats li {
        color: var(--ink);
      }
      .sc.feat .sc-cta {
        color: #fff;
      }
      .sc.feat .sc-d {
        color: var(--text);
      }
      .sc.feat .sc-feats li::before {
        color: var(--lime);
      }
      .sc.feat .sc-fin {
        background: rgba(255, 90, 54, 0.08);
        border-left-color: var(--coral);
        color: var(--text);
      }
      .sc.feat .sc-fin strong {
        color: var(--coral);
      }
      .sc.feat .sc-price {
        color: var(--ink);
        display: flex;
        align-items: baseline;
        gap: 10px;
      }
      .sc.feat .sc-price small {
        font-size: 0.72rem;
        color: var(--text);
        text-transform: none;
        letter-spacing: 0.03em;
      }

      /* PROJETS */
      .proj-sec{background:var(--dark);padding:96px 32px}
      .proj-head{max-width:1200px;margin:0 auto 56px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end}
      .proj-head h2{color:var(--cream)}
      .proj-head h2 em{font-style:italic;color:var(--coral)}
      .proj-head-r{font-size:.93rem;color:rgba(245,240,232,.42);line-height:1.8}
      .proj-head-r strong{color:rgba(245,240,232,.75);font-weight:500}
      .proj-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
      .pc{background:#1a1714;border:1px solid rgba(245,240,232,.07);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .4s var(--ease),border-color .3s,box-shadow .3s;position:relative}
      .pc:hover{transform:translateY(-6px);border-color:rgba(245,240,232,.14);box-shadow:0 28px 64px rgba(0,0,0,.4)}
      .pc-thumb{height:220px;position:relative;overflow:hidden;flex-shrink:0}
      .pc-thumb svg{width:100%;height:100%;display:block}
      .pc-body{padding:28px 26px 30px;display:flex;flex-direction:column;flex:1}
      .pc-tag{font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;display:inline-flex;align-items:center;gap:6px}
      .pc-tag::before{content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0}
      .pc-tag.teal{color:#4ecdc4}.pc-tag.teal::before{background:#4ecdc4}
      .pc-tag.coral{color:var(--coral2)}.pc-tag.coral::before{background:var(--coral2)}
      .pc-tag.blue{color:#7eb8f7}.pc-tag.blue::before{background:#7eb8f7}
      .pc-title{font-family:var(--fs);font-size:1.2rem;font-weight:700;line-height:1.25;color:var(--cream);margin-bottom:8px}
      .pc-desc{font-size:.82rem;color:rgba(245,240,232,.4);line-height:1.65;flex:1;margin-bottom:22px}
      .pc-link{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;color:rgba(245,240,232,.55);letter-spacing:.04em;text-decoration:none;transition:color .2s,gap .2s var(--ease)}
      .pc-link:hover{color:var(--cream);gap:12px}
      .pc-link svg{width:14px;height:14px;transition:transform .2s var(--ease)}
      .pc-link:hover svg{transform:translateX(2px)}

      /* POURQUOI */
      .why-g {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 76px;
        margin-top: 60px;
        align-items: start;
      }
      .why-p {
        font-size: 0.98rem;
        color: var(--text-mid);
        line-height: 1.8;
        margin-top: 18px;
        margin-bottom: 30px;
      }
      .wf-list {
        display: flex;
        flex-direction: column;
      }
      .wf {
        display: flex;
        gap: 16px;
        padding: 18px 0;
        border-bottom: 1px solid var(--bl);
      }
      .wf:first-child {
        border-top: 1px solid var(--bl);
      }
      .wf-ic {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        background: rgba(var(--coral-rgb), 0.08);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .wf-ic svg {
        width: 16px;
        height: 16px;
        stroke: var(--coral);
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .wf-t {
        font-size: 0.92rem;
        font-weight: 600;
        color: var(--text-dark);
        margin-bottom: 3px;
      }
      .wf-d {
        font-size: 0.82rem;
        color: var(--text-muted);
        line-height: 1.6;
      }
      .why-r {
        position: sticky;
        top: 96px;
      }
      .why-big {
        background: var(--dark);
        border-radius: 20px;
        padding: 36px;
        color: var(--cream);
        margin-bottom: 16px;
      }
      .wb-eye {
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--coral);
        margin-bottom: 11px;
      }
      .wb-h {
        font-family: var(--fs);
        font-size: 1.4rem;
        font-weight: 700;
        line-height: 1.25;
        margin-bottom: 12px;
      }
      .wb-p {
        font-size: 0.84rem;
        color: rgba(245, 240, 232, 0.48);
        line-height: 1.75;
      }
      .wb-p strong {
        color: rgba(245, 240, 232, 0.8);
      }
      .why-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 11px;
      }
      .ws {
        background: var(--cream2);
        border-radius: 13px;
        padding: 18px 16px;
        text-align: center;
      }
      .ws-n {
        font-family: var(--fs);
        font-size: 1.85rem;
        font-weight: 700;
        color: var(--text-dark);
        line-height: 1;
      }
      .ws-l {
        font-size: 0.69rem;
        color: var(--text-muted);
        line-height: 1.4;
        margin-top: 3px;
      }

      /* CONTACT */
      .sec-contact {
        background: var(--dark);
        padding: 96px 32px;
      }
      .cg {
        display: grid;
        grid-template-columns: 1fr 1.4fr;
        gap: 96px;
        max-width: 1200px;
        margin: 0 auto;
        align-items: start;
      }
      .cg h2 {
        color: var(--cream) !important;
      }
      .cg h2 em {
        color: var(--coral) !important;
      }
      .cg .eyebrow::before {
        background: var(--coral);
      }
      .cl-p {
        font-size: 0.91rem;
        color: rgba(245, 240, 232, 0.43);
        line-height: 1.75;
        margin-top: 16px;
        margin-bottom: 30px;
      }
      .ct-pts {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .ct-pt {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 0;
        font-size: 0.9rem;
        color: rgba(245, 240, 232, 0.72);
        line-height: 1.45;
      }
      .ct-pt a,
      .ct-pt span {
        color: inherit;
        text-decoration: none;
      }
      .ct-pt a:hover {
        color: var(--cream);
      }
      .ct-ic {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: rgba(245, 240, 232, 0.06);
        border: 1px solid rgba(245, 240, 232, 0.08);
        display: grid;
        place-items: center;
        flex-shrink: 0;
        color: var(--lime);
      }
      .ct-ic.coral {
        color: var(--coral);
      }
      .ct-ic svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .ct-pt strong {
        display: block;
        font-family: var(--fs);
        font-size: 1.02rem;
        font-weight: 700;
        color: var(--cream);
        line-height: 1.15;
        margin-bottom: 2px;
      }
      .ct-pt small {
        display: block;
        font-size: 0.78rem;
        color: rgba(245, 240, 232, 0.42);
      }
      form {
        display: flex;
        flex-direction: column;
      }
      .fr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 13px;
        margin-bottom: 13px;
      }
      .fg {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-bottom: 13px;
      }
      .fg:last-of-type {
        margin-bottom: 0;
      }
      label {
        font-size: 0.61rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(245, 240, 232, 0.26);
      }
      input,
      textarea,
      select {
        width: 100%;
        padding: 13px 14px;
        background: rgba(245, 240, 232, 0.05);
        border: 1px solid rgba(245, 240, 232, 0.08);
        border-radius: 9px;
        color: var(--cream);
        font-family: var(--fb);
        font-size: 0.9rem;
        font-weight: 300;
        outline: none;
        transition:
          border-color 0.2s,
          box-shadow 0.2s;
        -webkit-appearance: none;
      }
      select {
        padding-right: 42px;
        appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%23f5f0e8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 14px center;
        background-size: 14px;
      }
      input::placeholder,
      textarea::placeholder {
        color: rgba(245, 240, 232, 0.17);
      }
      input:focus,
      textarea:focus,
      select:focus {
        border-color: rgba(var(--coral-rgb), 0.45);
        box-shadow: 0 0 0 3px rgba(var(--coral-rgb), 0.08);
      }
      select option {
        background: var(--dark);
        color: var(--cream);
      }
      textarea {
        resize: vertical;
        min-height: 112px;
        line-height: 1.65;
      }
      .btn-sub {
        width: 100%;
        padding: 15px 22px;
        background: var(--coral);
        color: #fff;
        border: none;
        border-radius: 40px;
        font-family: var(--fb);
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        letter-spacing: 0.03em;
        transition:
          background 0.2s,
          transform 0.2s var(--ease),
          box-shadow 0.2s;
        margin-top: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
      }
      .btn-sub:hover {
        background: #ea4f2f;
        transform: translateY(-2px);
        box-shadow: 0 12px 36px rgba(var(--coral-rgb), 0.26);
      }

      /* FOOTER */
      footer {
        background: var(--dark);
        border-top: 1px solid rgba(245, 240, 232, 0.06);
        padding: 26px 32px;
      }
      .fi {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
      }
      .fc {
        font-size: 0.74rem;
        color: rgba(245, 240, 232, 0.2);
      }
      .fl {
        font-size: 0.74rem;
        color: rgba(245, 240, 232, 0.2);
        text-decoration: none;
        border-bottom: 1px solid rgba(245, 240, 232, 0.08);
        padding-bottom: 1px;
        transition:
          color 0.2s,
          border-color 0.2s;
      }
      .fl:hover {
        color: rgba(245, 240, 232, 0.52);
        border-color: rgba(245, 240, 232, 0.32);
      }

      .to-top {
        position: fixed;
        right: 22px;
        bottom: 22px;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: var(--coral);
        color: #fff;
        display: grid;
        place-items: center;
        box-shadow: 0 16px 34px rgba(255, 90, 54, 0.28);
        border: 1px solid rgba(255, 255, 255, 0.08);
        opacity: 0;
        transform: translateY(12px);
        pointer-events: none;
        transition:
          opacity 0.22s,
          transform 0.22s var(--ease),
          box-shadow 0.22s,
          background 0.22s;
        z-index: 220;
      }
      .to-top svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .to-top.visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
      }
      .to-top:hover {
        background: #ed4f31;
        box-shadow: 0 18px 40px rgba(255, 90, 54, 0.34);
        transform: translateY(-2px);
      }

      .modal {
        position: fixed;
        inset: 0;
        z-index: 260;
        display: grid;
        place-items: center;
        padding: 20px;
        background: rgba(20, 18, 16, 0.78);
        backdrop-filter: blur(10px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
      }
      .modal.open {
        opacity: 1;
        pointer-events: auto;
      }
      .modal-panel {
        width: min(920px, 100%);
        max-height: min(88vh, 980px);
        overflow: auto;
        background: linear-gradient(180deg, #181512, #141210);
        border: 1px solid rgba(184, 212, 74, 0.2);
        border-radius: 28px;
        box-shadow: 0 36px 90px rgba(0, 0, 0, 0.45);
        position: relative;
        padding: 30px;
      }
      .modal-close {
        position: absolute;
        right: 18px;
        top: 18px;
        width: 40px;
        height: 40px;
        border: 1px solid rgba(245, 240, 232, 0.12);
        border-radius: 50%;
        background: rgba(245, 240, 232, 0.04);
        color: var(--cream);
        display: grid;
        place-items: center;
        cursor: pointer;
      }
      .modal-close svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .modal-kicker {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 0.64rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--lime);
        margin-bottom: 16px;
      }
      .modal-kicker::before {
        content: "";
        width: 24px;
        height: 2px;
        border-radius: 999px;
        background: var(--lime);
      }
      .modal-title {
        font-family: var(--fs);
        font-size: clamp(2rem, 4vw, 3.4rem);
        line-height: 1.02;
        letter-spacing: -0.04em;
        color: var(--cream);
        max-width: 15ch;
        margin-bottom: 18px;
      }
      .modal-intro {
        max-width: 760px;
        color: rgba(245, 240, 232, 0.62);
        font-size: 0.96rem;
        line-height: 1.75;
        margin-bottom: 26px;
      }
      .modal-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 28px;
        align-items: start;
      }
      .modal-form {
        display: grid;
        gap: 12px;
      }
      .modal-form .row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }
      .modal-note {
        font-size: 0.78rem;
        color: rgba(245, 240, 232, 0.32);
        line-height: 1.55;
        margin-top: 2px;
      }
      .consent-note {
        font-size: 0.78rem;
        line-height: 1.55;
        color: rgba(245, 240, 232, 0.42);
        margin-top: 2px;
      }
      .consent-note a {
        color: inherit;
        text-decoration: none;
      }
      .consent-note a:hover {
        color: var(--coral);
      }
      .form-gap {
        margin-top: 10px;
      }
      .mb-0 {
        margin-bottom: 0;
      }
      .inline-note {
        text-transform: none;
        font-style: italic;
        color: rgba(245, 240, 232, 0.18);
      }
      .btn-icon {
        width: 14px;
        height: 14px;
      }
      .analysis-ok {
        width: 16px;
        height: 16px;
      }
      .score-note {
        font-size: 0.68rem;
        color: #81746a;
      }
      .lime-dot {
        color: var(--lime);
      }
      body.modal-open {
        overflow: hidden;
      }

      /* REVEAL */
      .rv {
        opacity: 0;
        transform: translateY(24px);
        transition:
          opacity 0.75s ease,
          transform 0.75s var(--ease);
      }
      .rv.vis {
        opacity: 1;
        transform: none;
      }
      .d1 {
        transition-delay: 0.1s;
      }
      .d2 {
        transition-delay: 0.2s;
      }
      .d3 {
        transition-delay: 0.3s;
      }
      .arr {
        width: 13px;
        height: 13px;
        flex-shrink: 0;
      }

      /* RESPONSIVE */
      @media (max-width: 940px) {
        .hero,
        .prob-g,
        .why-g,
        .cg {
          grid-template-columns: 1fr;
        }
        .modal-grid,
        .modal-form .row {
          grid-template-columns: 1fr;
        }
        .modal-panel {
          padding: 24px;
        }
        .hero {
          min-height: auto;
          padding: 60px 24px 64px;
        }
        .hero-visual {
          height: 520px;
        }
        .fb-p {
          left: -6px;
          top: 18px;
        }
        .score {
          left: 0;
          bottom: 38px;
          width: 182px;
        }
        .fin {
          right: 12px;
          bottom: 12px;
        }
        .section-head,
        .proj-head {
          grid-template-columns: 1fr;
        }
        .service-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .svc-g {
          grid-template-columns: 1fr;
        }
        .projects,
        .proj-grid {
          grid-template-columns: 1fr;
        }
        .pc-thumb {
          height: 200px;
        }
        .why-r {
          position: static;
        }
        .prob-r {
          position: static;
        }
        .why-stats {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 680px) {
        .hdr {
          padding: 0 20px;
        }
        nav {
          display: none;
          position: fixed;
          top: 68px;
          left: 0;
          right: 0;
          height: calc(100dvh - 68px);
          min-height: calc(100dvh - 68px);
          background: linear-gradient(180deg, #f8f2e9 0%, #f5f0e8 100%);
          background-color: #f5f0e8;
          background-image: none;
          opacity: 1;
          flex-direction: column;
          align-items: flex-start;
          padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
          gap: 0;
          z-index: 260;
          border-top: 1px solid var(--bl);
          box-shadow: 0 18px 40px rgba(20, 18, 16, 0.12);
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
          overscroll-behavior: contain;
        }
        nav.open {
          display: flex;
        }
        nav.open::before {
          content: "";
          position: fixed;
          top: 68px;
          left: 0;
          right: 0;
          bottom: 0;
          background: #f5f0e8;
          z-index: -1;
          pointer-events: none;
        }
        .logo {
          position: relative;
          z-index: 270;
        }
        nav a {
          padding: 15px 0;
          border-bottom: 1px solid var(--bl);
          width: 100%;
          font-size: 0.93rem;
        }
        .nav-cta {
          margin-top: 20px;
          width: 100%;
          justify-content: center;
        }
        .ham {
          display: flex;
        }
        .hero,
        .sec,
        .sec-dark,
        .sec-contact,
        .section {
          padding-left: 20px;
          padding-right: 20px;
        }
        .hero {
          position: relative;
          padding-top: 48px;
          padding-bottom: 48px;
          gap: 42px;
        }
        .hero > div:first-child {
          position: relative;
          z-index: 3;
        }
        .hero-visual {
          position: relative;
          z-index: 0;
          margin-top: 18px;
        }
        h1 {
          font-size: 2.2rem;
          margin-bottom: 18px;
        }
        .hero-sub {
          margin-bottom: 24px;
          font-size: 0.98rem;
          line-height: 1.65;
        }
        .hero-btns {
          gap: 12px;
        }
        .btn-dark,
        .btn-ghost {
          width: 100%;
          justify-content: center;
          padding: 13px 18px;
        }
        .btn-dark {
          padding: 14px 18px;
        }
        .fr {
          grid-template-columns: 1fr;
        }
        .service-grid {
          grid-template-columns: 1fr;
        }
        .section-head {
          gap: 20px;
          margin-bottom: 34px;
        }
        .service {
          min-height: auto;
        }
        .hero-visual {
          height: 610px;
          margin-top: 12px;
        }
        .project-card.main,
        .project-card.mid,
        .project-card.low {
          right: 0;
          width: 92%;
          transform: none;
        }
        .project-card.main { top: 6px; }
        .project-card.mid { top: 248px; }
        .project-card.low { top: 436px; }
        .fb-p {
          top: 12px;
          left: -6px;
          width: 94px;
          height: 94px;
        }
        .fb-p b { font-size: 1.35rem; }
        .score {
          right: auto;
          left: 0;
          bottom: 14px;
          width: 170px;
          padding: 16px;
        }
        .ring { width: 76px; height: 76px; }
        .fin {
          left: 218px;
          right: auto;
          bottom: 132px;
          width: 190px;
        }
        .orb.one {
          right: 14px;
          top: -8px;
          width: 48px;
          height: 48px;
        }
        .orb.two {
          display: none;
        }
        .orb.three {
          right: 18px;
          bottom: 6px;
          width: 42px;
          height: 42px;
        }
        .custom-block{
          grid-template-columns:1fr;
          padding:26px;
        }

        .custom-btn{
          width:100%;
        }
        .fi {
          flex-direction: column;
          align-items: center;
          text-align: center;
        }
      }
      @media (max-width: 420px) {
        .sg,
        .why-stats {
          grid-template-columns: 1fr 1fr;
        }
        .hero-visual { height: 640px; }
        .project-card.main { top: 8px; }
        .project-card.mid { top: 258px; }
        .project-card.low { top: 452px; }
        .fb-p { left: -8px; top: 10px; width: 82px; height: 82px; }
        .fb-p .fbn { font-size: 1.45rem; }
        .fb-p .fbl { font-size: 0.48rem; max-width: 64px; }
        .check { top: 3px; left: 56px; z-index: 45; }
        .score { width: 170px; left: 0; bottom: -48px; z-index: 30; }
        .fin { width: 176px; bottom: 140px; right: 0; }
        .orb.one { top: 0; right: 10px; width: 40px; height: 40px; }
        .orb.two { display: none; }
        .orb.three { right: 16px; bottom: 8px; width: 36px; height: 36px; }
      }

      /* POLICY PAGE */
      .back-link {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 0.78rem;
        font-weight: 500;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-muted);
        text-decoration: none;
        transition: color 0.2s, transform 0.2s var(--ease);
      }
      .back-link:hover {
        color: var(--coral);
        transform: translateX(-2px);
      }
      .back-link svg {
        width: 13px;
        height: 13px;
      }
      .policy-content a[href^="mailto:"] {
        color: var(--coral);
        text-decoration: none;
      }
      .policy-content a[href^="mailto:"]:hover {
        color: #ea4f2f;
      }
      .page-hero {
        background: var(--dark);
        padding: 72px 32px 64px;
        position: relative;
        overflow: hidden;
      }
      .page-hero::before {
        content: "";
        position: absolute;
        top: -40px;
        right: -60px;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(255, 90, 54, 0.08), transparent 65%);
        pointer-events: none;
      }
      .page-hero-in {
        max-width: 1100px;
        margin: 0 auto;
      }
      .page-eyebrow {
        font-size: 0.65rem;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--coral);
        margin-bottom: 18px;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .page-eyebrow::before {
        content: "";
        display: inline-block;
        width: 20px;
        height: 1.5px;
        background: var(--coral);
      }
      .page-h1 {
        font-family: var(--fs);
        font-size: clamp(2.2rem, 4.5vw, 3.6rem);
        font-weight: 900;
        line-height: 1.06;
        letter-spacing: -0.025em;
        color: var(--cream);
        margin-bottom: 20px;
      }
      .page-h1 em {
        font-style: italic;
        color: var(--coral);
      }
      .page-sub {
        max-width: 800px;
        font-size: 1.02rem;
        color: rgba(245, 240, 232, 0.82);
        line-height: 1.8;
      }
      .page-sub strong {
        color: var(--cream);
        font-weight: 600;
      }
      .page-meta {
        display: flex;
        align-items: center;
        gap: 18px;
        flex-wrap: wrap;
        margin-top: 28px;
        padding-top: 24px;
        border-top: 1px solid rgba(245, 240, 232, 0.08);
      }
      .meta-item {
        font-size: 0.78rem;
        color: rgba(245, 240, 232, 0.58);
        display: flex;
        align-items: center;
        gap: 7px;
      }
      .meta-item strong {
        color: rgba(245, 240, 232, 0.82);
        font-weight: 500;
      }
      .meta-dot {
        width: 3px;
        height: 3px;
        background: rgba(245, 240, 232, 0.2);
        border-radius: 50%;
      }
      .content-wrap {
        max-width: 1100px;
        margin: 0 auto;
        padding: 80px 32px 100px;
        display: grid;
        grid-template-columns: 220px 1fr;
        gap: 72px;
        align-items: start;
      }
      .sidebar {
        position: sticky;
        top: 88px;
      }
      .sidebar-label {
        font-size: 0.62rem;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: 16px;
      }
      .sidebar-nav {
        display: flex;
        flex-direction: column;
        gap: 0;
        border-left: 1.5px solid var(--bl);
      }
      .sidebar-nav a {
        padding: 9px 0 9px 16px;
        font-size: 0.82rem;
        color: var(--text-muted);
        text-decoration: none;
        transition: color 0.2s, padding-left 0.2s var(--ease), border-color 0.2s;
        border-left: 2px solid transparent;
        margin-left: -1.5px;
        line-height: 1.35;
      }
      .sidebar-nav a:hover {
        color: var(--text-dark);
        padding-left: 20px;
      }
      .sidebar-nav a.active {
        color: var(--coral);
        border-left-color: var(--coral);
        font-weight: 500;
      }
      .sidebar-badge {
        margin-top: 28px;
        padding: 16px;
        background: var(--dark);
        border-radius: 10px;
        color: var(--cream);
      }
      .sb-eye {
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--coral);
        margin-bottom: 8px;
      }
      .sb-txt {
        font-size: 0.78rem;
        color: rgba(245, 240, 232, 0.45);
        line-height: 1.6;
      }
      .sb-txt strong {
        color: rgba(245, 240, 232, 0.7);
        font-weight: 500;
      }
      .sb-contact {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 12px;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--coral);
        text-decoration: none;
        transition: gap 0.2s var(--ease);
      }
      .sb-contact:hover {
        gap: 10px;
      }
      .sb-contact-ico {
        width: 12px;
        height: 12px;
      }
      .sb-contact svg {
        width: 12px;
        height: 12px;
      }
      .policy-content {
        min-width: 0;
      }
      .policy-intro {
        font-size: 1.06rem;
        color: var(--text-mid);
        line-height: 1.8;
        padding: 28px 32px;
        background: var(--cream2);
        border-radius: 12px;
        border-left: 3px solid var(--coral);
        margin-bottom: 52px;
      }
      .policy-intro strong {
        color: var(--text-dark);
        font-weight: 500;
      }
      .pol-section {
        margin-bottom: 52px;
        padding-bottom: 52px;
        border-bottom: 1px solid var(--bl);
      }
      .pol-section:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
      }
      .pol-num {
        font-size: 0.62rem;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--coral);
        margin-bottom: 10px;
      }
      .pol-h2 {
        font-family: var(--fs);
        font-size: 1.65rem;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -0.015em;
        color: var(--text-dark);
        margin-bottom: 18px;
      }
      .pol-h2 em {
        font-style: italic;
        color: var(--coral);
      }
      .pol-h3 {
        font-family: var(--fb);
        font-size: 0.93rem;
        font-weight: 600;
        color: var(--text-dark);
        margin: 24px 0 10px;
        letter-spacing: 0.01em;
      }
      p {
        font-size: 0.93rem;
        color: var(--text-mid);
        line-height: 1.8;
        margin-bottom: 14px;
      }
      p:last-child {
        margin-bottom: 0;
      }
      p strong {
        color: var(--text-dark);
        font-weight: 500;
      }
      .info-box {
        padding: 18px 22px;
        border-radius: 10px;
        margin: 20px 0;
        font-size: 0.88rem;
        line-height: 1.7;
      }
      .info-box.note {
        background: rgba(255, 90, 54, 0.06);
        border: 1px solid rgba(255, 90, 54, 0.14);
        color: var(--text-mid);
      }
      .info-box.note strong {
        color: var(--coral);
      }
      .info-box.green {
        background: rgba(184, 212, 74, 0.07);
        border: 1px solid rgba(184, 212, 74, 0.18);
        color: var(--text-mid);
      }
      .info-box.green strong {
        color: #5a7a1a;
      }
      .info-box.dark {
        background: var(--dark2);
        border: 1px solid rgba(245, 240, 232, 0.06);
        color: rgba(245, 240, 232, 0.55);
      }
      .info-box.dark strong {
        color: rgba(245, 240, 232, 0.8);
      }
      .policy-note {
        margin-top: 12px;
        color: rgba(245, 240, 232, 0.66);
      }
      .data-table {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
        font-size: 0.84rem;
      }
      .data-table th {
        text-align: left;
        padding: 10px 14px;
        background: var(--dark);
        color: rgba(245, 240, 232, 0.55);
        font-size: 0.65rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }
      .data-table th:first-child {
        border-radius: 8px 0 0 0;
      }
      .data-table th:last-child {
        border-radius: 0 8px 0 0;
      }
      .data-table td {
        padding: 12px 14px;
        border-bottom: 1px solid var(--bl);
        color: var(--text-mid);
        vertical-align: top;
        line-height: 1.55;
      }
      .data-table tr:last-child td {
        border-bottom: none;
      }
      .data-table tr:hover td {
        background: rgba(26, 22, 18, 0.03);
      }
      .tag {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 10px;
        font-size: 0.65rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }
      .tag-req {
        background: rgba(255, 90, 54, 0.1);
        color: var(--coral);
      }
      .tag-opt {
        background: rgba(184, 212, 74, 0.1);
        color: #5a7a1a;
      }
      .tag-sys {
        background: rgba(26, 22, 18, 0.07);
        color: var(--text-muted);
      }
      .rights-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin: 20px 0;
      }
      .right-card {
        padding: 18px 18px;
        border: 1px solid var(--bl);
        border-radius: 10px;
        background: #fff;
      }
      .right-card-icon {
        font-size: 1.1rem;
        margin-bottom: 8px;
      }
      .right-card-title {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-dark);
        margin-bottom: 4px;
      }
      .right-card-desc {
        font-size: 0.78rem;
        color: var(--text-muted);
        line-height: 1.5;
      }
      ul.pol-list {
        margin: 12px 0 16px 0;
        padding-left: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      ul.pol-list li {
        display: flex;
        gap: 10px;
        font-size: 0.9rem;
        color: var(--text-mid);
        line-height: 1.6;
      }
      ul.pol-list li::before {
        content: "—";
        color: var(--coral);
        font-weight: 600;
        flex-shrink: 0;
        margin-top: 1px;
      }
      footer {
        background: var(--dark);
        border-top: 1px solid rgba(245, 240, 232, 0.06);
        padding: 28px 32px;
      }
      .fi {
        max-width: 1100px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
      }
      .fc {
        font-size: 0.74rem;
        color: rgba(245, 240, 232, 0.2);
      }
      .fl {
        font-size: 0.74rem;
        color: rgba(245, 240, 232, 0.2);
        text-decoration: none;
        border-bottom: 1px solid rgba(245, 240, 232, 0.08);
        padding-bottom: 1px;
        transition: color 0.2s;
      }
      .fl:hover {
        color: rgba(245, 240, 232, 0.5);
      }
      @media (max-width: 780px) {
        .hdr,
        .page-hero,
        .content-wrap,
        footer {
          padding-left: 20px;
          padding-right: 20px;
        }
        .content-wrap {
          grid-template-columns: 1fr;
          gap: 40px;
        }
        .sidebar {
          position: static;
        }
        .rights-grid {
          grid-template-columns: 1fr;
        }
        .fi {
          flex-direction: column;
          align-items: center;
          text-align: center;
        }
        .logo-mark img {
          width: 122px;
          height: auto;
        }
      }