:root{
      --black:#030303;
      --panel:#0b0b0b;
      --panel2:#111;
      --text:#f7f1e4;
      --muted:#b6aea0;
      --soft:#ded3bf;
      --gold:#d4af37;
      --gold2:#ffe08a;
      --gold3:#8a5a18;
      --line:rgba(255,224,138,.17);
      --glass:rgba(255,255,255,.055);
      --danger:#ff7a7a;
      --success:#8dffbc;
      --serif:"Playfair Display", Georgia, serif;
      --sans:"Inter", Arial, sans-serif;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth;background:var(--black)}
    body{
      margin:0;
      font-family:var(--sans);
      color:var(--text);
      background:
        radial-gradient(circle at 14% 6%,rgba(212,175,55,.12),transparent 27rem),
        radial-gradient(circle at 86% 26%,rgba(255,255,255,.045),transparent 31rem),
        linear-gradient(180deg,#050505,#020202 42%,#080604);
      letter-spacing:0;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    img,video{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    .grain{
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:50;
      opacity:.17;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170' viewBox='0 0 170 170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)' opacity='.33'/%3E%3C/svg%3E");
      mix-blend-mode:soft-light;
    }
    .nav{
      position:fixed;
      top:0;
      left:0;
      right:0;
      z-index:40;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
      padding:18px clamp(18px,4vw,58px);
      background:linear-gradient(180deg,rgba(0,0,0,.78),rgba(0,0,0,.18));
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:0;
      font-weight:800;
      letter-spacing:.12em;
      text-transform:uppercase;
      font-size:13px;
    }
    .brand img{
      width:42px;
      height:42px;
      object-fit:contain;
      filter:drop-shadow(0 0 18px rgba(212,175,55,.28));
    }
    .nav-links{display:flex;align-items:center;gap:26px;color:var(--soft);font-size:13px}
    .nav-links a{opacity:.82;transition:.25s ease}
    .nav-links a:hover{opacity:1;color:var(--gold2)}
    .nav-actions,.social-links{
      display:flex;
      align-items:center;
    }
    .nav-actions{gap:12px}
    .social-links{gap:8px}
    .social-link{
      width:38px;
      height:38px;
      flex:0 0 38px;
      display:grid;
      place-items:center;
      border:1px solid var(--line);
      border-radius:50%;
      color:var(--gold2);
      background:rgba(255,255,255,.035);
      transition:transform .25s ease,border-color .25s ease,background .25s ease;
    }
    .social-link:hover{
      transform:translateY(-2px);
      border-color:rgba(255,224,138,.54);
      background:rgba(212,175,55,.1);
    }
    .social-link svg{
      width:18px;
      height:18px;
      fill:currentColor;
    }
    .nav-cta{
      border:1px solid rgba(255,224,138,.42);
      color:var(--gold2);
      border-radius:999px;
      padding:12px 18px;
      font-size:12px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.12em;
      box-shadow:0 0 38px rgba(212,175,55,.12) inset;
      white-space:nowrap;
    }
    .hero{
      min-height:92svh;
      position:relative;
      display:grid;
      align-items:end;
      padding:112px clamp(20px,6vw,90px) 42px;
      overflow:hidden;
      isolation:isolate;
    }
    .hero-video{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      z-index:-3;
      opacity:.78;
      filter:brightness(1.16) contrast(1.04) saturate(1.08);
      transform:scale(1.015);
    }
    .hero:before{
      content:"";
      position:absolute;
      inset:0;
      z-index:-2;
      background:
        linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.18) 48%,rgba(0,0,0,.58)),
        linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.72) 88%);
    }
    .hero:after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:-1px;
      height:24vh;
      z-index:-1;
      background:linear-gradient(180deg,transparent,var(--black));
    }
    .hero-inner{max-width:1120px}
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:12px;
      color:var(--gold2);
      font-size:12px;
      font-weight:800;
      letter-spacing:.22em;
      text-transform:uppercase;
    }
    .eyebrow:before{
      content:"";
      width:36px;
      height:1px;
      background:linear-gradient(90deg,var(--gold),transparent);
    }
    h1,h2,h3,p{margin:0}
    h1{
      margin-top:18px;
      max-width:1000px;
      font-family:var(--serif);
      font-size:clamp(54px,7vw,98px);
      line-height:.94;
      font-weight:600;
      text-wrap:balance;
    }
    .hero p{
      max-width:690px;
      margin-top:28px;
      color:#eee3cf;
      font-size:clamp(18px,2vw,23px);
      line-height:1.65;
      text-shadow:0 12px 38px rgba(0,0,0,.72);
    }
    .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
    .btn{
      min-height:52px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      border-radius:999px;
      border:1px solid rgba(255,224,138,.26);
      padding:15px 22px;
      font-weight:800;
      font-size:12px;
      letter-spacing:.13em;
      text-transform:uppercase;
      cursor:pointer;
      transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease;
    }
    .btn-primary{
      color:#130e03;
      background:linear-gradient(135deg,#f9e7a3,#d4af37 52%,#9d6b1f);
      box-shadow:0 24px 75px rgba(212,175,55,.25);
    }
    .btn-secondary{color:var(--gold2);background:rgba(0,0,0,.36)}
    .btn:hover{transform:translateY(-3px);border-color:rgba(255,224,138,.58)}
    .hero-metrics{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:12px;
      max-width:720px;
      margin-top:54px;
    }

    .hero-metrics > span{
      border:1px solid rgba(255,255,255,.11);
      background:rgba(0,0,0,.38);
      backdrop-filter:blur(14px);
      border-radius:999px;
      padding:12px 16px;
      color:var(--gold2);
      font-size:12px;
      font-weight:900;
      letter-spacing:.11em;
      text-transform:uppercase;
      text-align:center;
    }
    .metric{
      border:1px solid rgba(255,255,255,.11);
      background:rgba(0,0,0,.38);
      backdrop-filter:blur(14px);
      border-radius:8px;
      padding:18px;
    }
    .metric strong{display:block;font-family:var(--sans);font-size:28px;color:var(--gold2);font-variant-numeric:lining-nums tabular-nums}
    .metric span{display:block;margin-top:5px;color:var(--muted);font-size:12px;line-height:1.45}
    main{position:relative;z-index:2}
    section{padding:96px clamp(20px,5vw,74px)}
    .section-head{
      display:grid;
      grid-template-columns:minmax(0,1.1fr) minmax(280px,.6fr);
      gap:34px;
      align-items:end;
      margin-bottom:36px;
    }
    h2{
      margin-top:14px;
      font-family:var(--serif);
      font-size:clamp(38px,5.8vw,82px);
      line-height:1;
      font-weight:600;
      text-wrap:balance;
    }
    .section-head p,.lead{
      color:var(--muted);
      line-height:1.8;
      font-size:16px;
    }
    .grid-3{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:16px;
    }
    .card{
      min-height:250px;
      border:1px solid var(--line);
      border-radius:8px;
      padding:24px;
      background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
      box-shadow:0 25px 80px rgba(0,0,0,.22);
    }
    .card small,.offer small{
      color:var(--gold);
      font-weight:800;
      letter-spacing:.18em;
      text-transform:uppercase;
      font-size:11px;
    }
    .card h3,.offer h3{
      margin-top:20px;
      font-family:var(--serif);
      font-size:30px;
      line-height:1.08;
    }
    .card p,.offer p,.offer li{
      color:var(--muted);
      line-height:1.72;
      font-size:14px;
    }
    .card p{margin-top:14px}
    .carousel-section{
      position:relative;
      overflow:hidden;
      border-top:1px solid rgba(255,224,138,.08);
      border-bottom:1px solid rgba(255,224,138,.08);
      background:
        radial-gradient(circle at 50% 24%,rgba(212,175,55,.12),transparent 34rem),
        linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.005));
    }
    .carousel-shell{
      position:relative;
      min-height:520px;
      perspective:1500px;
      display:grid;
      place-items:center;
      margin-top:24px;
      overflow:hidden;
    }
    .carousel-stage{
      position:relative;
      width:100%;
      height:440px;
      transform-style:preserve-3d;
    }
    .carousel-item{
      position:absolute;
      --offset:0;
      --abs:3;
      z-index:17;
      left:50%;
      top:50%;
      width:min(38vw,420px);
      min-width:300px;
      min-height:330px;
      border:1px solid rgba(255,224,138,.2);
      border-radius:8px;
      padding:28px;
      background:
        linear-gradient(145deg,rgba(212,175,55,.13),rgba(255,255,255,.055) 38%,rgba(255,255,255,.025)),
        #080808;
      box-shadow:
        0 35px 105px rgba(0,0,0,.5),
        0 0 0 1px rgba(255,224,138,.09) inset;
      transform:
        translate(-50%,-50%)
        translateX(calc(var(--offset) * 320px))
        translateZ(calc((3 - var(--abs)) * 58px))
        rotateY(calc(var(--offset) * -27deg))
        scale(calc(1 - var(--abs) * .065));
      opacity:calc(1 - var(--abs) * .18);
      transition:transform .75s cubic-bezier(.23,1,.32,1),opacity .55s ease,filter .55s ease,border-color .55s ease;
      transform-style:preserve-3d;
      filter:saturate(calc(1 - var(--abs) * .08));
    }
    .carousel-item[data-offset="-2"]{--offset:-2;--abs:2;z-index:18}
    .carousel-item[data-offset="-1"]{--offset:-1;--abs:1;z-index:19}
    .carousel-item[data-offset="0"]{--offset:0;--abs:0;z-index:20}
    .carousel-item[data-offset="1"]{--offset:1;--abs:1;z-index:19}
    .carousel-item[data-offset="2"]{--offset:2;--abs:2;z-index:18}
    .carousel-item[data-active="true"]{
      border-color:rgba(255,224,138,.62);
      box-shadow:
        0 44px 130px rgba(0,0,0,.54),
        0 0 0 1px rgba(255,224,138,.22) inset,
        0 0 90px rgba(212,175,55,.18);
    }
    .carousel-item:before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:linear-gradient(125deg,rgba(255,239,180,.18),transparent 26%,transparent 67%,rgba(212,175,55,.16));
      mix-blend-mode:screen;
      opacity:.72;
    }
    .carousel-kicker{
      color:var(--gold2);
      font-size:11px;
      font-weight:900;
      letter-spacing:.18em;
      text-transform:uppercase;
    }
    .carousel-item h3{
      margin-top:18px;
      font-family:var(--serif);
      font-size:clamp(32px,3.4vw,48px);
      line-height:1.02;
    }
    .carousel-item p{
      margin-top:16px;
      color:var(--muted);
      line-height:1.75;
      font-size:14px;
    }
    .carousel-tags{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:24px;
    }
    .carousel-tags span{
      border:1px solid rgba(255,224,138,.2);
      border-radius:999px;
      padding:8px 10px;
      color:var(--soft);
      font-size:11px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
      background:rgba(0,0,0,.22);
    }
    .carousel-controls{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:14px;
      margin-top:-18px;
      position:relative;
      z-index:4;
    }
    .carousel-btn{
      width:48px;
      height:48px;
      border-radius:999px;
      border:1px solid rgba(255,224,138,.28);
      background:rgba(0,0,0,.42);
      color:var(--gold2);
      cursor:pointer;
      display:grid;
      place-items:center;
      transition:transform .25s ease,border-color .25s ease,background .25s ease;
    }
    .carousel-btn:hover{
      transform:translateY(-2px);
      border-color:rgba(255,224,138,.62);
      background:rgba(212,175,55,.12);
    }
    .carousel-dots{
      display:flex;
      align-items:center;
      gap:8px;
    }
    .carousel-dot{
      width:8px;
      height:8px;
      border:0;
      border-radius:999px;
      background:rgba(255,255,255,.22);
      cursor:pointer;
      padding:0;
      transition:width .25s ease,background .25s ease;
    }
    .carousel-dot[aria-current="true"]{
      width:28px;
      background:linear-gradient(90deg,var(--gold),var(--gold2));
    }
    .portfolio-list{
      display:flex;
      flex-direction:column;
      gap:clamp(22px,3vw,34px);
    }
    .project{
      min-height:440px;
      border:1px solid rgba(255,224,138,.16);
      border-radius:8px;
      overflow:hidden;
      position:relative;
      background:#070707;
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(280px,520px);
      align-items:center;
      gap:clamp(26px,4vw,56px);
      padding:clamp(28px,4vw,48px);
      perspective:1200px;
      isolation:isolate;
    }
    .project:before{
      content:"";
      position:absolute;
      inset:0;
      z-index:-1;
      background:
        linear-gradient(135deg,rgba(0,0,0,.84),rgba(0,0,0,.48) 58%,rgba(0,0,0,.28)),
        radial-gradient(circle at 78% 42%,rgba(212,175,55,.10),transparent 34%);
    }
    .project-content{
      position:relative;
      z-index:3;
      grid-column:1;
      grid-row:1;
      max-width:610px;
      padding-right:0;
    }
    .project small{
      color:var(--gold);
      letter-spacing:.22em;
      text-transform:uppercase;
      font-size:11px;
      font-weight:800;
    }
    .project h3{
      margin-top:14px;
      font-family:var(--serif);
      font-size:clamp(38px,4.8vw,68px);
      font-weight:600;
      line-height:1;
    }
    .project p{
      color:var(--soft);
      line-height:1.74;
      margin-top:18px;
      max-width:560px;
    }
    .project-visual{
      position:relative;
      z-index:2;
      grid-column:2;
      grid-row:1;
      justify-self:end;
      width:min(100%,340px);
      aspect-ratio:1;
      transform:rotateY(-8deg) rotateX(3deg);
      display:flex;
      align-items:center;
      justify-content:center;
      border:1px solid rgba(255,216,87,.72);
      border-radius:8px;
      background:linear-gradient(145deg,rgba(212,175,55,.07),rgba(255,255,255,.015) 52%,rgba(212,175,55,.09)),rgba(3,3,3,.44);
      box-shadow:0 28px 72px rgba(0,0,0,.42),0 0 0 1px rgba(255,218,92,.16) inset;
      overflow:hidden;
      transform-style:preserve-3d;
      transition:transform .55s ease,box-shadow .55s ease,border-color .55s ease;
    }
    .project-visual:before{
      content:"";
      position:absolute;
      inset:0;
      z-index:4;
      pointer-events:none;
      background:linear-gradient(120deg,rgba(255,238,164,.12),transparent 28%,transparent 72%,rgba(255,214,92,.14) 86%,transparent);
      mix-blend-mode:screen;
      opacity:.5;
    }
    .project-visual:after{display:none}
    .project:hover .project-visual{
      transform:rotateY(-3deg) rotateX(1deg) translateY(-4px) scale(1.018);
      border-color:rgba(255,226,112,.88);
      box-shadow:0 34px 90px rgba(0,0,0,.48),0 0 0 1px rgba(255,218,92,.22) inset;
    }
    .project-visual.logo-preview{
      width:min(100%,275px);
      justify-self:center;
      padding:10px;
    }
    .project-visual.card-preview{
      width:min(100%,540px);
      aspect-ratio:1.545;
      padding:8px;
    }
    .project-visual.site-preview{
      width:min(100%,540px);
      aspect-ratio:8/5;
      padding:8px;
    }
    .project-visual.site-preview img{
      object-fit:cover;
      object-position:top;
      background:#080808;
    }
    .project-visual img,.project-pdf{
      position:relative;
      z-index:2;
      width:100%;
      height:100%;
      border-radius:4px;
      background:transparent;
      box-shadow:0 14px 34px rgba(0,0,0,.20);
    }
    .project-visual img{
      object-fit:contain;
      padding:0;
      background:#f4f4f1;
    }
    .project-pdf{
      display:block;
      border:0;
      background:#fff;
      transform:scale(1.08);
      transform-origin:center;
    }
    .project-visual img.project-card-image{
      object-fit:contain;
      background:#fff;
      padding:0;
    }
    .project-link-secondary{margin-left:16px}
    .project-visual.ppc-card-preview{
      width:min(100%,540px);
      transform:none;
      aspect-ratio:1559/1009;
      padding:0;
      overflow:hidden;
      border:1px solid rgba(255,224,138,.22);
      border-radius:8px;
      background:transparent;
      box-shadow:0 24px 70px rgba(0,0,0,.36);
    }
    .project-visual.ppc-card-preview:before{display:none}
    .project-visual.ppc-card-preview .ppc-card-face{
      position:absolute;
      inset:0;
      z-index:2;
      width:100%;
      height:100%;
      object-fit:contain;
      border-radius:6px;
      background:transparent;
      box-shadow:none;
      opacity:1;
      backface-visibility:hidden;
    }
    .ppc-card-preview .ppc-card-recto{animation:ppcRectoCycle 5s infinite ease-in-out}
    .ppc-card-preview .ppc-card-verso{z-index:3;animation:ppcVersoCycle 5s infinite ease-in-out}
    .project:hover .project-visual.ppc-card-preview{transform:translateY(-4px)}
    @keyframes ppcRectoCycle{
      0%,45%{opacity:1;transform:scale(1)}
      50%,95%{opacity:0;transform:scale(.985)}
      100%{opacity:1;transform:scale(1)}
    }
    @keyframes ppcVersoCycle{
      0%,45%{opacity:0;transform:scale(.985)}
      50%,95%{opacity:1;transform:scale(1)}
      100%{opacity:0;transform:scale(.985)}
    }
    .project-link{
      display:inline-flex;
      margin-top:24px;
      color:var(--gold2);
      font-size:11px;
      font-weight:800;
      letter-spacing:.14em;
      text-transform:uppercase;
      border-bottom:1px solid rgba(212,175,55,.42);
      padding-bottom:6px;
    }
    .ambient-video-section{
      position:relative;
      min-height:min(760px,78vh);
      display:grid;
      align-items:center;
      overflow:hidden;
      border-top:1px solid rgba(255,224,138,.12);
      border-bottom:1px solid rgba(255,224,138,.12);
      isolation:isolate;
      background:#030303;
    }
    .ambient-video-content{
      max-width:1040px;
      position:relative;
      z-index:1;
    }
    .ambient-video-content p{
      max-width:720px;
      margin-top:22px;
      color:#eee3cf;
      font-size:clamp(17px,1.8vw,22px);
      line-height:1.68;
    }
    .ambient-points{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:14px;
      max-width:930px;
      margin-top:34px;
    }
    .ambient-points span{
      min-height:104px;
      display:flex;
      align-items:flex-end;
      border:1px solid rgba(255,224,138,.17);
      border-radius:8px;
      padding:18px;
      color:#f3ead7;
      background:rgba(0,0,0,.32);
      backdrop-filter:blur(14px);
      line-height:1.48;
      box-shadow:0 24px 70px rgba(0,0,0,.18);
    }
    .ambient-video{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      z-index:-3;
      opacity:.78;
      filter:brightness(1.16) contrast(1.04) saturate(1.08);
    }
    .ambient-video-section:before{
      content:"";
      position:absolute;
      inset:0;
      z-index:-2;
      background:
        linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.18) 48%,rgba(0,0,0,.58)),
        linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.72) 88%);
    }
    .ambient-video-section:after{
      content:"";
      position:absolute;
      inset:clamp(20px,4vw,70px);
      z-index:-1;
      border:1px solid rgba(255,224,138,.16);
      border-radius:8px;
      pointer-events:none;
      background:linear-gradient(135deg,rgba(255,255,255,.035),transparent 36%,rgba(212,175,55,.055));
      box-shadow:0 0 80px rgba(212,175,55,.08) inset;
    }
    .system-section{
      position:relative;
      overflow:hidden;
      min-height:78vh;
      display:grid;
      align-items:center;
      isolation:isolate;
    }
    .system-video{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      z-index:-3;
      opacity:.78;
      filter:brightness(1.16) contrast(1.04) saturate(1.08);
    }
    .system-section:before{
      content:"";
      position:absolute;
      inset:0;
      z-index:-2;
      background:
        linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.18) 48%,rgba(0,0,0,.58)),
        linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.72) 88%);
    }
    .flow-grid{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:14px;
      margin-top:34px;
    }
    .flow{
      min-height:135px;
      border:1px solid rgba(255,224,138,.17);
      background:rgba(0,0,0,.38);
      backdrop-filter:blur(16px);
      border-radius:8px;
      padding:18px;
    }
    .flow strong{display:block;color:var(--gold2);font-family:var(--sans);font-size:24px;font-weight:800;font-variant-numeric:lining-nums tabular-nums}
    .flow span{display:block;margin-top:12px;color:var(--muted);font-size:13px;line-height:1.55}
    .offers-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
      gap:18px;
    }
    .formation-grid{
      grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    }
    .offer{
      border:1px solid var(--line);
      border-radius:8px;
      padding:24px;
      background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
    }
    .offer.featured{
      border-color:rgba(255,224,138,.48);
      background:
        linear-gradient(180deg,rgba(212,175,55,.13),rgba(255,255,255,.035)),
        #0b0b0b;
      box-shadow:0 0 80px rgba(212,175,55,.12);
    }
    .price{
      margin-top:18px;
      font-family:var(--sans);
      font-size:clamp(34px,4vw,54px);
      line-height:1;
      color:var(--gold2);
      font-weight:800;
      font-variant-numeric:lining-nums tabular-nums;
    }
    .offer-note{
      margin-top:18px;
      font-family:var(--sans);
      font-size:clamp(20px,2vw,28px);
      line-height:1.08;
      color:var(--gold2);
      font-weight:800;
    }
    .price span,.offer-note span{
      display:block;
      margin-top:8px;
      font-family:var(--sans);
      color:var(--muted);
      font-size:12px;
      font-weight:800;
      letter-spacing:.12em;
      text-transform:uppercase;
    }
    .offer p{margin-top:14px;line-height:1.58}
    .offer ul{padding-left:18px;margin:18px 0 0}
    .offer li{margin:7px 0;line-height:1.55}
    .payment-methods{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:10px;
      margin:-18px 0 28px;
      color:var(--soft);
    }
    .payment-methods strong,.payment-methods span{
      border:1px solid rgba(255,224,138,.18);
      border-radius:8px;
      padding:10px 12px;
      background:rgba(255,255,255,.045);
      font-size:12px;
      font-weight:800;
    }
    .payment-methods strong{color:var(--gold2)}
    .payment-actions{
      display:grid;
      gap:10px;
      margin-top:22px;
    }
    .payment-actions .btn{
      width:100%;
      justify-content:center;
    }
    .payment-actions p,.payment-status{
      margin:0;
      color:var(--muted);
      font-size:12px;
      line-height:1.45;
    }
    .payment-status{
      min-height:20px;
      margin:-12px 0 22px;
      font-weight:700;
    }
    .payment-status.success{color:#9ee6b3}
    .payment-status.error{color:#ffb1a8}
    .method-grid,.faq-grid{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:14px;
    }
    .method-step,.faq-item{
      border:1px solid rgba(255,224,138,.16);
      border-radius:8px;
      padding:22px;
      background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.018));
    }
    .method-step strong{
      display:block;
      color:var(--gold2);
      font-family:var(--sans);
      font-size:32px;
      line-height:1;
      margin-bottom:18px;
      font-weight:800;
      font-variant-numeric:lining-nums tabular-nums;
    }
    .method-step h3,.faq-item h3{
      margin-top:0;
      font-family:var(--serif);
      font-size:26px;
      line-height:1.08;
    }
    .method-step p,.faq-item p{
      margin-top:12px;
      color:var(--muted);
      line-height:1.7;
      font-size:14px;
    }
    .contact-wrap{
      display:grid;
      grid-template-columns:minmax(0,1.05fr) minmax(320px,.75fr);
      gap:20px;
      align-items:start;
    }
    .form-box,.contact-panel{
      border:1px solid rgba(255,224,138,.18);
      border-radius:8px;
      background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025));
      padding:24px;
      position:relative;
    }
    .field-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:14px;
    }
    label{display:grid;gap:8px;color:var(--soft);font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
    input,select,textarea{
      width:100%;
      border:1px solid rgba(255,255,255,.13);
      border-radius:8px;
      background:rgba(0,0,0,.34);
      color:var(--text);
      padding:14px;
      outline:none;
      transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
    }
    input:focus,select:focus,textarea:focus{
      border-color:rgba(255,224,138,.62);
      box-shadow:0 0 0 3px rgba(212,175,55,.11);
      background:rgba(0,0,0,.5);
    }
    select option{background:#080808;color:#fff}
    textarea{min-height:150px;resize:vertical}
    .span-2{grid-column:1/-1}
    .hp-field{
      position:absolute;
      left:-10000px;
      top:auto;
      width:1px;
      height:1px;
      overflow:hidden;
    }
    .form-foot{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      align-items:center;
      justify-content:space-between;
      margin-top:16px;
    }
    .form-status{
      min-height:22px;
      color:var(--muted);
      font-size:13px;
      line-height:1.45;
    }
    .form-status.success{color:var(--success)}
    .form-status.error{color:var(--danger)}
    .form-box button[disabled]{opacity:.65;cursor:wait}
    .contact-panel p{color:var(--muted);line-height:1.75;margin-top:12px}
    .whatsapp{
      position:fixed;
      right:18px;
      bottom:72px;
      z-index:45;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:52px;
      padding:0 18px;
      border-radius:999px;
      color:#071209;
      background:linear-gradient(135deg,#baffce,#31d466);
      font-weight:900;
      font-size:13px;
      letter-spacing:.05em;
      box-shadow:0 20px 65px rgba(49,212,102,.25);
    }
    footer{
      padding:34px clamp(20px,5vw,74px);
      border-top:1px solid rgba(255,255,255,.08);
      color:var(--muted);
      display:flex;
      justify-content:space-between;
      gap:18px;
      flex-wrap:wrap;
      font-size:13px;
    }
    .footer-socials{align-self:center}
    .reveal{opacity:0;transform:translateY(26px);transition:opacity .75s ease,transform .75s ease}
    .reveal.in{opacity:1;transform:none}
    .hero{
      background:
        radial-gradient(circle at 68% 28%,rgba(255,224,138,.18),transparent 24rem),
        radial-gradient(circle at 28% 70%,rgba(255,255,255,.07),transparent 20rem),
        linear-gradient(135deg,#050505 0%,#151007 46%,#030303 100%);
    }
    .ambient-video-section{
      background:
        radial-gradient(circle at 76% 30%,rgba(212,175,55,.18),transparent 24rem),
        linear-gradient(135deg,#030303,#171006 52%,#020202);
    }
    .system-section{
      background:
        radial-gradient(circle at 22% 34%,rgba(255,224,138,.15),transparent 22rem),
        radial-gradient(circle at 78% 70%,rgba(255,255,255,.06),transparent 20rem),
        linear-gradient(135deg,#050505,#120d06 58%,#020202);
    }
    .ambient-video,.system-video{display:none}
    @media (min-width:981px){
      .ambient-video,.system-video{display:block}
    }
    @media (max-width:1280px){
      .hero{min-height:92svh}
    }
    @media (max-width:980px){
      .nav-links{display:none}
      .hero{min-height:92svh;padding-top:104px;padding-bottom:44px}
      .hero-metrics,.grid-3,.section-head,.offers-grid,.formation-grid,.flow-grid,.contact-wrap,.method-grid,.faq-grid{grid-template-columns:1fr}
      .ambient-points{grid-template-columns:1fr}
      .carousel-shell{
        min-height:0;
        display:block;
        overflow:visible;
      }
      .carousel-stage{
        height:auto;
        display:grid;
        grid-template-columns:1fr;
        gap:14px;
      }
      .carousel-item{
        position:relative;
        left:auto;
        top:auto;
        width:100%;
        min-width:0;
        min-height:0;
        transform:none!important;
        opacity:1!important;
      }
      .carousel-controls{display:none}
      .project{
        min-height:auto;
        grid-template-columns:1fr;
        gap:28px;
        padding:24px;
      }
      .project:before{background:linear-gradient(180deg,rgba(0,0,0,.56),rgba(0,0,0,.88))}
      .project-visual{
        position:relative;
        inset:auto;
        grid-column:1;
        grid-row:auto;
        width:min(100%,340px);
        transform:none;
        order:-1;
        justify-self:center;
      }
      .project-content{grid-column:1;grid-row:auto}
      .project-visual.logo-preview{width:min(72%,280px);justify-self:center}
      .project-visual.card-preview{width:100%;max-width:560px}
      .project-visual.site-preview{width:100%;max-width:560px}
      .project-visual.ppc-card-preview{
        width:100%;
        max-width:560px;
        aspect-ratio:1559/1009;
        min-height:0;
        order:-1;
        padding:0;
      }
      .project-visual.ppc-card-preview .ppc-card-face{
        inset:0;
        width:100%;
        height:100%;
        border-radius:7px;
      }
      .project-link-secondary{margin-left:0;margin-top:12px}
      .project:hover .project-visual{transform:none}
      .project-content{padding-right:0}
      .field-grid{grid-template-columns:1fr}
      .span-2{grid-column:auto}
    }
    @media (max-width:620px){
      section{padding:74px 18px}
      .nav{padding:13px 16px}
      .brand span{display:none}
      .nav-actions{gap:8px}
      .nav-actions .social-links{gap:6px}
      .nav-actions .social-link{width:34px;height:34px;flex-basis:34px}
      .nav-actions .social-link svg{width:16px;height:16px}
      h1{font-size:clamp(42px,12vw,52px);line-height:.96}
      .hero{min-height:86svh;padding-top:84px;padding-bottom:28px}
      .hero p{font-size:16px;line-height:1.48;margin-top:16px}
      .hero-actions{display:grid;gap:10px;margin-top:24px}
      .btn{width:100%;min-height:48px;padding-inline:14px}
      .hero-metrics{display:none}
      .project{
        gap:20px;
        padding:20px;
      }
      .project small{font-size:10px;letter-spacing:.14em}
      .project h3{font-size:clamp(34px,10vw,42px)}
      .project p{font-size:14px;line-height:1.65;margin-top:14px}
      .project-visual.logo-preview{width:min(72%,230px)}
      .project-visual.ppc-card-preview{padding:0}
      .project-visual.ppc-card-preview .ppc-card-face{
        inset:0;
        width:100%;
        height:100%;
      }
      .project-link{margin-top:18px}
      .whatsapp{width:52px;padding:0}
      .whatsapp span{display:none}
    }
    @media (prefers-reduced-motion:reduce){
      html{scroll-behavior:auto}
      *,*:before,*:after{transition:none!important;animation:none!important}
      .reveal{opacity:1;transform:none}
    }

.footer-link-muted{color:inherit;opacity:.62;text-decoration:underline;text-underline-offset:3px}



/* Formulaire audit rapide + devis complet */
.offer-cta{
  width:100%;
  margin-top:22px;
}
.form-title{
  margin-bottom:22px;
}
.form-title small{
  display:inline-flex;
  color:var(--gold);
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:11px;
}
.form-title h3{
  margin-top:12px;
  font-family:var(--serif);
  font-size:clamp(30px,3vw,42px);
  line-height:1.05;
  font-weight:600;
}
.form-title p,
.form-note{
  margin-top:12px;
  color:var(--muted);
  line-height:1.7;
  font-size:14px;
}
.audit-form{
  border-color:rgba(255,224,138,.34);
  background:
    linear-gradient(180deg,rgba(212,175,55,.11),rgba(255,255,255,.03)),
    rgba(8,8,8,.86);
  box-shadow:0 0 90px rgba(212,175,55,.10);
}
.label-note{
  display:inline;
  color:var(--muted);
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
  font-size:11px;
}
.contact-points{
  display:grid;
  gap:10px;
  margin-top:22px;
}
.contact-points span{
  border:1px solid rgba(255,224,138,.16);
  border-radius:8px;
  padding:12px 14px;
  color:var(--soft);
  background:rgba(255,255,255,.04);
  font-size:13px;
  font-weight:800;
}
.devis-details{
  margin-top:22px;
  border:1px solid rgba(255,224,138,.16);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  overflow:hidden;
}
.devis-details summary{
  cursor:pointer;
  list-style:none;
  padding:22px 24px;
  color:var(--gold2);
  font-size:12px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
  border-bottom:1px solid transparent;
}
.devis-details summary::-webkit-details-marker{display:none}
.devis-details summary:after{
  content:"+";
  float:right;
  color:var(--gold2);
  font-size:18px;
  line-height:1;
}
.devis-details[open] summary{
  border-bottom-color:rgba(255,224,138,.12);
}
.devis-details[open] summary:after{content:"-"}
.devis-details .form-box{
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.legal-check{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px;
  border:1px solid rgba(255,224,138,.16);
  border-radius:8px;
  background:rgba(255,255,255,.035);
  color:var(--soft);
  font-size:13px;
  font-weight:700;
  letter-spacing:0;
  line-height:1.6;
  text-transform:none;
}
.legal-check input{
  width:auto;
  min-width:18px;
  height:18px;
  margin-top:2px;
  accent-color:var(--gold);
}
.legal-check a{
  color:var(--gold2);
  text-decoration:underline;
  text-underline-offset:3px;
}
.legal-check-muted{
  color:var(--muted);
  font-weight:600;
}
.form-privacy{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
}
.audit-form .form-privacy{margin-top:10px}
.form-privacy a{
  color:var(--gold2);
  text-decoration:underline;
  text-underline-offset:3px;
}
@media (max-width:980px){
  .devis-details summary{line-height:1.5}
}

/* =========================================================
   Finition responsive + alignement conversion + accessibilité
   ========================================================= */
html{scroll-padding-top:92px}
.skip-link{
  position:fixed;
  left:16px;
  top:12px;
  z-index:100;
  transform:translateY(-140%);
  border:1px solid rgba(255,224,138,.42);
  border-radius:999px;
  padding:12px 16px;
  color:#130e03;
  background:linear-gradient(135deg,#f9e7a3,#d4af37 52%,#9d6b1f);
  font-size:12px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:transform .2s ease;
}
.skip-link:focus{transform:translateY(0)}
:focus-visible{
  outline:2px solid var(--gold2);
  outline-offset:4px;
}
.btn{
  min-height:54px;
  text-align:center;
  line-height:1.15;
  white-space:normal;
}
.hero-actions .btn{min-width:min(100%,250px)}
.grid-3,.method-grid,.faq-grid,.flow-grid,.offers-grid{align-items:stretch}
.card,.method-step,.faq-item,.flow{
  height:100%;
  display:flex;
  flex-direction:column;
}
.card p,.method-step p,.faq-item p,.flow span{flex:1}
.offers-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.offer{
  height:100%;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.offer h3{min-height:calc(1.08em * 2)}
.offer-note{min-height:72px}
.offer p{min-height:112px}
.offer ul{
  flex:1;
  display:flex;
  flex-direction:column;
}
.offer-cta{
  margin-top:auto;
  min-height:54px;
}
.contact-wrap{align-items:stretch}
.form-box,.contact-panel{height:100%}
.contact-panel{
  display:flex;
  flex-direction:column;
}
.contact-panel .btn{margin-top:18px}
.contact-points{margin-top:auto;padding-top:22px}
input,select,textarea{font-size:16px}
input,select{min-height:52px}
textarea{min-height:168px}
.form-foot .btn{min-width:260px}
.devis-details{scroll-margin-top:96px}
.project-link{min-height:32px;align-items:center}
@media (min-width:981px){
  .nav{min-height:78px}
  .hero-inner{padding-bottom:14px}
}
@media (max-width:1180px){
  .offers-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .offer h3,.offer-note,.offer p{min-height:0}
}
@media (max-width:980px){
  html{scroll-padding-top:76px}
  .section-head{align-items:start}
  .offers-grid{grid-template-columns:1fr}
  .offer h3,.offer-note,.offer p{min-height:0}
  .offer-cta{margin-top:22px}
  .contact-panel{min-height:auto}
  .contact-points{margin-top:22px;padding-top:0}
  .form-foot{display:grid;grid-template-columns:1fr;align-items:stretch}
  .form-foot .btn{width:100%;min-width:0}
}
@media (max-width:760px){
  section{padding:68px 18px}
  .nav-cta{padding:10px 12px;font-size:10px;letter-spacing:.08em}
  h2{font-size:clamp(32px,10vw,44px);line-height:1.02}
  .section-head{gap:18px;margin-bottom:26px}
  .card,.offer,.method-step,.faq-item,.form-box,.contact-panel{padding:20px}
  .carousel-item{padding:22px}
  .devis-details summary{padding:20px}
}
@media (max-width:420px){
  .hero{padding-left:16px;padding-right:16px}
  h1{font-size:clamp(36px,11vw,44px)}
  .eyebrow{font-size:10px;letter-spacing:.16em}
  .eyebrow:before{width:24px}
  .btn{font-size:11px;letter-spacing:.1em}
  .field-grid{gap:12px}
}