:root{
      --bg:#11100E;--bg-deep:#090807;--bg-soft:#1F1B16;--cream:#FFFAF0;--beige:#C9BDA8;--muted:#8F8370;
      --gold:#D6B36A;--gold-2:#F4D58A;--gold-3:#9D7B39;--cyan:#8FD3FF;--cyan-soft:rgba(143,211,255,.18);
      --green:#5DE39A;--emoji-1:#FFD35A;--emoji-2:#F6A900;--line:rgba(214,179,106,.24)
    }
    *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;color:var(--cream);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg-deep);overflow-x:hidden;line-height:1.45}
    body:before{content:"";position:fixed;inset:0;z-index:-5;background:radial-gradient(circle at var(--mx,50%) var(--my,26%),rgba(214,179,106,.15),transparent 26%),radial-gradient(circle at 86% 22%,rgba(143,211,255,.10),transparent 28%),radial-gradient(circle at 15% 72%,rgba(214,179,106,.10),transparent 31%),linear-gradient(145deg,#080807 0%,#11100E 45%,#1A1611 100%);pointer-events:none}
    .noise,.grid,.waves{position:fixed;inset:0;pointer-events:none}.noise{z-index:-4;opacity:.12;background-image:radial-gradient(circle at 20% 30%,rgba(255,255,255,.24) 0 1px,transparent 1px),radial-gradient(circle at 70% 60%,rgba(255,255,255,.13) 0 1px,transparent 1px);background-size:38px 42px,52px 48px;animation:noiseMove 22s linear infinite}.grid{z-index:-3;opacity:.17;background:linear-gradient(90deg,transparent 0 49.85%,rgba(214,179,106,.12) 50%,transparent 50.15%),linear-gradient(0deg,transparent 0 49.85%,rgba(255,250,240,.035) 50%,transparent 50.15%);background-size:92px 92px;mask-image:linear-gradient(to bottom,black,transparent 86%)}.waves{z-index:-2;opacity:.38;background:radial-gradient(ellipse at 50% 16%,transparent 0 39%,rgba(214,179,106,.15) 40%,transparent 42%),radial-gradient(ellipse at 74% 19%,transparent 0 49%,rgba(143,211,255,.13) 50%,transparent 52%),radial-gradient(ellipse at 35% 58%,transparent 0 47%,rgba(214,179,106,.10) 48%,transparent 50%);animation:waveMove 12s ease-in-out infinite alternate}
    .progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:50;background:rgba(255,250,240,.045)}.progress span{display:block;width:0%;height:100%;background:linear-gradient(90deg,var(--gold),var(--cyan));box-shadow:0 0 24px rgba(214,179,106,.5)}
    .story{position:fixed;top:92px;right:clamp(18px,4vw,72px);width:1px;height:calc(100vh - 150px);z-index:12;background:linear-gradient(to bottom,transparent,rgba(214,179,106,.8),rgba(143,211,255,.55),transparent);opacity:.58}.story-dot{position:absolute;left:50%;top:5%;width:14px;height:14px;border:1px solid var(--gold);border-radius:50%;background:var(--bg);transform:translate(-50%,-50%);box-shadow:0 0 24px rgba(214,179,106,.36);transition:top .45s ease}.story-label{position:absolute;left:22px;transform:translateY(-50%);color:var(--beige);font-size:11px;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;opacity:.72}
    .page{max-width:1190px;margin:0 auto;padding:24px 20px 80px;position:relative;z-index:2}header{position:sticky;top:18px;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 18px;border:1px solid rgba(214,179,106,.18);border-radius:999px;background:rgba(17,16,14,.70);backdrop-filter:blur(18px);box-shadow:0 18px 70px rgba(0,0,0,.30)}.brand{display:flex;align-items:center;gap:12px;color:var(--cream);text-decoration:none;font-weight:900;letter-spacing:.32em;text-transform:uppercase;font-size:15px}.brand-icon{width:24px;height:24px;border:2px solid var(--gold);transform:rotate(45deg);box-shadow:0 0 18px rgba(214,179,106,.28)}nav{display:flex;gap:24px;align-items:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase}nav a{color:var(--beige);text-decoration:none;position:relative;transition:color .25s ease}nav a:after{content:"";position:absolute;height:1px;left:0;right:100%;bottom:-9px;background:var(--gold);transition:right .25s ease}nav a:hover,nav a.active{color:var(--gold-2)}nav a:hover:after,nav a.active:after{right:0}.quick{padding:11px 16px;border-radius:999px;background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,var(--gold-3));color:#1B1307;font-weight:900;text-decoration:none;font-size:12px;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 12px 38px rgba(214,179,106,.22)}
    section{position:relative;padding:76px 0}.kicker{display:inline-flex;align-items:center;gap:10px;color:var(--cyan);font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px}.kicker:before{content:"";width:8px;height:8px;border:1px solid var(--cyan);border-radius:50%;box-shadow:0 0 16px var(--cyan-soft)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(48px,7.4vw,96px);line-height:.86;letter-spacing:-.07em;margin-bottom:24px}h2{font-size:clamp(34px,5vw,62px);line-height:.92;letter-spacing:-.058em;margin-bottom:18px}h1 em,h2 em{color:var(--gold);font-style:normal;text-shadow:0 0 42px rgba(214,179,106,.25)}p{color:var(--beige);font-size:17px}.btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:13px 18px;border-radius:999px;border:1px solid rgba(214,179,106,.28);color:var(--cream);background:rgba(255,250,240,.045);text-decoration:none;font-weight:850;letter-spacing:.06em;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,background .25s ease}.btn:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 0 34px rgba(214,179,106,.18);background:rgba(214,179,106,.08)}.btn.primary{border:0;color:#1B1307;background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,var(--gold-3));box-shadow:0 16px 42px rgba(214,179,106,.26)}.btn.cyan{color:var(--cyan);border-color:rgba(143,211,255,.32);background:rgba(143,211,255,.055)}
    .hero{min-height:660px;display:grid;grid-template-columns:1fr 1.08fr;align-items:center;gap:52px}.hero-copy p{max-width:560px;margin-bottom:30px;font-size:18px}.actions{display:flex;gap:14px;flex-wrap:wrap}.hero-stage{position:relative;min-height:470px;display:grid;place-items:center;perspective:900px}.orb-field{position:absolute;width:min(45vw,515px);height:min(45vw,515px);border-radius:50%;border:1px solid rgba(214,179,106,.18);background:radial-gradient(circle at 50% 50%,rgba(214,179,106,.16),transparent 42%),radial-gradient(circle,transparent 60%,rgba(143,211,255,.10) 61%,transparent 63%);animation:breathe 6.6s ease-in-out infinite}.orb-field:before,.orb-field:after{content:"";position:absolute;inset:54px;border-radius:50%;border:1px solid rgba(214,179,106,.28);transform:rotate(16deg) scaleX(1.35)}.orb-field:after{inset:92px;border-color:rgba(143,211,255,.18);transform:rotate(-28deg) scaleX(1.42)}.smart-face{--look-x:0px;--look-y:0px;position:relative;z-index:2;width:214px;height:214px;border-radius:50%;background:radial-gradient(circle at 34% 22%,#FFF2AA,transparent 24%),linear-gradient(135deg,var(--emoji-1),var(--emoji-2) 65%,#C77A00);box-shadow:0 0 80px rgba(214,179,106,.36),inset 0 -30px 50px rgba(86,49,0,.25);animation:float 4.8s ease-in-out infinite;transition:transform .35s ease}.eyes{position:absolute;top:72px;left:50%;transform:translateX(-50%);display:flex;gap:44px}.eye{width:22px;height:28px;border-radius:50%;background:#1A1207;position:relative;transform:translate(var(--look-x),var(--look-y));transition:transform .28s ease;box-shadow:inset 4px 4px 0 rgba(255,255,255,.42)}.mouth{position:absolute;left:50%;bottom:54px;width:62px;height:28px;border-bottom:6px solid #1A1207;border-radius:0 0 60px 60px;transform:translateX(-50%);transition:all .28s ease}.smart-face.happy .mouth{width:70px;height:38px;border-bottom-width:7px}.smart-face.wink .eye:first-child{height:5px;margin-top:11px;border-radius:8px;box-shadow:none}.speech{position:absolute;right:18px;top:78px;width:226px;padding:15px 16px;border:1px solid rgba(214,179,106,.24);border-radius:18px 18px 18px 4px;background:rgba(31,27,22,.78);backdrop-filter:blur(16px);color:var(--cream);box-shadow:0 18px 55px rgba(0,0,0,.28);font-size:14px;z-index:3}.down-pulse{position:absolute;bottom:30px;left:50%;width:52px;height:52px;border-radius:50%;transform:translateX(-50%);border:1px solid rgba(214,179,106,.26);display:grid;place-items:center;color:var(--gold);animation:pulseRing 2.8s ease-in-out infinite;text-decoration:none}
    .about{display:grid;grid-template-columns:1fr 1.2fr;gap:52px;border-top:1px solid rgba(214,179,106,.16);border-bottom:1px solid rgba(214,179,106,.16)}.about-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}.metric{padding:18px;border:1px solid rgba(214,179,106,.18);border-radius:22px;background:rgba(255,250,240,.045)}.metric strong{display:block;color:var(--gold);font-size:28px}.metric span{color:var(--beige);font-size:13px}.process{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-items:stretch}.step{position:relative;min-height:175px;padding:18px 16px;border:1px solid rgba(214,179,106,.18);border-radius:22px;background:rgba(255,250,240,.04);transition:transform .25s ease,border-color .25s ease,background .25s ease;overflow:hidden}.step:before{content:"";position:absolute;left:16px;top:18px;width:36px;height:36px;border:1px solid rgba(214,179,106,.34);border-radius:50%;box-shadow:0 0 25px rgba(214,179,106,.12)}.step:hover{transform:translateY(-6px);border-color:var(--gold);background:rgba(214,179,106,.07)}.step .num{margin:48px 0 10px;color:var(--gold);font-weight:900;font-family:ui-monospace,monospace}.step h3{margin-bottom:8px;font-size:16px}.step p{font-size:13px;margin:0}.section-title{text-align:center;max-width:760px;margin:0 auto 38px}
    .quote-panel{position:relative;padding:34px 44px 30px;border-radius:3px;border:1px solid rgba(214,179,106,.34);background:linear-gradient(135deg,rgba(255,250,240,.065),rgba(255,250,240,.028)),radial-gradient(circle at 50% 38%,rgba(214,179,106,.13),transparent 42%);backdrop-filter:blur(20px);box-shadow:0 34px 110px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,250,240,.08);overflow:hidden}.quote-top{display:grid;grid-template-columns:1fr 340px 1fr;gap:28px;align-items:center;min-height:410px;position:relative;z-index:1}.form-side{display:grid;gap:18px}.field{display:grid;gap:8px}.field label{color:var(--muted);font-size:11px;letter-spacing:.25em;text-transform:uppercase;font-weight:800}.cut-input{position:relative;height:54px;border:1px solid rgba(214,179,106,.18);background:rgba(20,25,32,.35);clip-path:polygon(0 0,92% 0,100% 50%,92% 100%,0 100%);transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease,background .22s ease}.form-side.right .cut-input{clip-path:polygon(8% 0,100% 0,100% 100%,8% 100%,0 50%)}.cut-input:focus-within{border-color:rgba(214,179,106,.74);box-shadow:0 0 0 4px rgba(214,179,106,.08),0 0 28px rgba(214,179,106,.12);transform:translateY(-1px);background:rgba(31,27,22,.70)}.cut-input input,.cut-input select,.cut-input textarea{width:100%;height:100%;border:0;outline:0;background:transparent;color:var(--cream);padding:0 18px;font:inherit;appearance:none}.cut-input textarea{padding:18px 24px 14px 38px;resize:none;line-height:1.45}.cut-input.tall{height:190px;clip-path:polygon(12% 0,100% 0,100% 100%,0 100%,8% 50%)}.select-wrap:after{content:"";position:absolute;right:18px;top:50%;transform:translateY(-50%);border-top:7px solid var(--beige);border-left:6px solid transparent;border-right:6px solid transparent;pointer-events:none;opacity:.75}.diamond-core{position:relative;min-height:340px;display:grid;place-items:center}.diamond-outline{position:absolute;width:300px;height:300px;border:1px solid rgba(214,179,106,.68);transform:rotate(45deg);box-shadow:0 0 46px rgba(214,179,106,.14);border-radius:6px}.diamond-outline:before,.diamond-outline:after{content:"";position:absolute;inset:18px;border:1px dashed rgba(143,211,255,.20);border-radius:6px}.diamond-outline:after{inset:52px;border-style:solid;border-color:rgba(214,179,106,.18);border-radius:40px}.mini-face{--look-x:0px;--look-y:0px;width:148px;height:148px;border-radius:50%;position:relative;z-index:2;background:radial-gradient(circle at 34% 22%,#FFF2AA,transparent 24%),linear-gradient(135deg,var(--emoji-1),var(--emoji-2) 65%,#C77A00);box-shadow:0 0 68px rgba(214,179,106,.40),inset 0 -22px 38px rgba(86,49,0,.24);animation:miniPulse 3.8s ease-in-out infinite;transition:transform .3s ease}.mini-face .eyes{top:50px;gap:30px}.mini-face .eye{width:15px;height:20px}.mini-face .mouth{bottom:39px;width:43px;height:20px;border-bottom-width:4px}.emoji-caption{position:absolute;left:50%;bottom:54px;z-index:3;transform:translateX(-50%);min-width:210px;padding:10px 14px;border:1px solid rgba(214,179,106,.20);border-radius:999px;background:rgba(31,27,22,.78);color:var(--beige);text-align:center;font-size:12px;letter-spacing:.18em;text-transform:uppercase;backdrop-filter:blur(12px)}.quote-divider{height:1px;margin:26px 0 34px;background:linear-gradient(to right,transparent,rgba(214,179,106,.24),transparent)}.quote-bottom{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:end;position:relative;z-index:1}.choice-area{display:grid;gap:22px}.legend{color:var(--muted);font-size:11px;letter-spacing:.25em;text-transform:uppercase;font-weight:800;margin-bottom:14px}.pill-row{display:flex;flex-wrap:wrap;gap:10px}.pill{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 18px;border:1px solid rgba(214,179,106,.18);border-radius:999px;background:rgba(255,250,240,.035);color:var(--beige);cursor:pointer;transition:transform .22s ease,border-color .22s ease,color .22s ease,background .22s ease}.pill:hover{transform:translateY(-2px);border-color:var(--gold);color:var(--cream);background:rgba(214,179,106,.07)}.pill input{width:15px;height:15px;accent-color:var(--gold)}.quote-actions{display:grid;grid-template-columns:1fr;gap:12px;min-width:290px}.quote-helper{grid-column:1/-1;color:var(--muted);font-size:11px;letter-spacing:.20em;text-transform:uppercase;margin:18px 0 0}
    .carousel-section{border-top:1px solid rgba(214,179,106,.12);border-bottom:1px solid rgba(214,179,106,.12);overflow:hidden}.carousel-title{text-align:center;margin-bottom:40px}.carousel-track{display:flex;gap:44px;width:max-content;animation:marquee 24s linear infinite}.carousel-track:hover{animation-play-state:paused}.brand-word{display:inline-flex;align-items:center;gap:12px;color:var(--beige);font-size:20px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;opacity:.78;white-space:nowrap}.brand-word:before{content:"";width:10px;height:10px;background:var(--gold);transform:rotate(45deg);opacity:.85}
    .contacts{padding-top:88px}.contacts-head{text-align:center;max-width:780px;margin:0 auto 54px}.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:34px}.contact-card{min-height:96px;display:grid;grid-template-columns:58px 1fr 20px;gap:14px;align-items:center;padding:18px 22px;border:1px solid rgba(214,179,106,.18);border-radius:18px;background:rgba(255,250,240,.045);color:var(--cream);text-decoration:none;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,background .25s ease}.contact-card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 20px 62px rgba(0,0,0,.30);background:rgba(214,179,106,.07)}.contact-card.whatsapp{border-color:rgba(143,211,255,.42);background:rgba(143,211,255,.075)}.contact-card.whatsapp:hover{border-color:var(--cyan);box-shadow:0 0 36px rgba(143,211,255,.16)}.contact-icon{width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(214,179,106,.20);border-radius:12px;color:var(--gold);background:rgba(255,250,240,.035);font-weight:900}.contact-card.whatsapp .contact-icon{color:var(--green);border-color:rgba(80,219,136,.24)}.contact-card.email .contact-icon{color:var(--cyan);border-color:rgba(143,211,255,.24)}.contact-card small{display:block;color:var(--muted);letter-spacing:.22em;text-transform:uppercase;font-size:10px;margin-bottom:4px}.contact-card strong{font-size:18px}.contact-arrow{color:var(--beige);opacity:.72}.contact-lower{display:grid;grid-template-columns:1.55fr .95fr;gap:28px;align-items:stretch}.message-oval{position:relative;min-height:300px;display:grid;grid-template-columns:280px 1fr;gap:38px;align-items:center;padding:34px 44px;border:1px solid rgba(214,179,106,.22);border-radius:999px;background:radial-gradient(circle at 22% 50%,rgba(214,179,106,.18),transparent 32%),rgba(255,250,240,.045);box-shadow:0 28px 90px rgba(0,0,0,.36);overflow:hidden}.message-oval:after{content:"";position:absolute;left:70px;top:50%;width:250px;height:250px;border:1px dashed rgba(214,179,106,.22);border-radius:50%;transform:translateY(-50%)}.message-oval .mini-face{margin:0 auto;width:150px;height:150px}.message-oval .mini-face .eyes{top:51px;gap:30px}.message-oval .mini-face .eye{width:15px;height:20px}.message-oval .mini-face .mouth{bottom:40px;width:45px;height:20px;border-bottom-width:4px}.message-copy{position:relative;z-index:2}.message-copy .kicker{margin-bottom:10px}.message-copy h3{font-size:clamp(28px,3vw,44px);line-height:1.05;letter-spacing:-.04em;margin-bottom:16px}.payment-box{min-height:300px;padding:28px;border:1px solid rgba(214,179,106,.16);border-radius:26px;background:rgba(255,250,240,.04);overflow:hidden;display:grid;align-content:center;gap:22px}.pay-window{overflow:hidden;border-top:1px solid rgba(214,179,106,.14);border-bottom:1px solid rgba(214,179,106,.14);padding:20px 0;position:relative}.pay-window:before,.pay-window:after{content:"";position:absolute;top:0;bottom:0;width:55px;z-index:2;pointer-events:none}.pay-window:before{left:0;background:linear-gradient(to right,rgba(31,27,22,1),transparent)}.pay-window:after{right:0;background:linear-gradient(to left,rgba(31,27,22,1),transparent)}.pay-track{display:flex;gap:12px;width:max-content;animation:marqueePay 18s linear infinite}.pay-chip{min-width:112px;text-align:center;padding:12px 14px;border:1px solid rgba(214,179,106,.16);border-radius:10px;color:var(--beige);background:rgba(255,250,240,.035);font-size:12px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}.payment-tabs{display:flex;gap:22px;justify-content:center;color:var(--muted);font-size:12px;letter-spacing:.20em;text-transform:uppercase}.payment-tabs span:first-child{color:var(--cyan)}
    .projects{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}.project{min-height:190px;border:1px solid rgba(214,179,106,.18);border-radius:18px;padding:16px;background:radial-gradient(circle at 50% 38%,rgba(214,179,106,.12),transparent 34%),rgba(255,250,240,.04);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;position:relative;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}.project:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 18px 60px rgba(0,0,0,.34)}.project:before{content:"";position:absolute;inset:20px 20px auto auto;width:42px;height:42px;border:1px solid var(--gold);border-radius:50%}.project:after{content:"";position:absolute;right:35px;top:33px;border-left:10px solid var(--gold);border-top:7px solid transparent;border-bottom:7px solid transparent}.project strong{color:var(--cream)}.project span{color:var(--gold);margin-top:6px;font-size:13px}footer{padding-top:44px;border-top:1px solid rgba(214,179,106,.16);display:grid;grid-template-columns:.8fr 1fr .8fr;gap:18px}.footer-box{border:1px solid rgba(214,179,106,.16);border-radius:24px;background:rgba(255,250,240,.04);padding:20px}.footer-brand{color:var(--gold);font-size:30px;letter-spacing:.34em;text-transform:uppercase;font-weight:950}.reveal{opacity:0;transform:translateY(28px);transition:opacity .78s ease,transform .78s ease}.reveal.show{opacity:1;transform:translateY(0)}
    @keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-13px) rotate(1deg)}}@keyframes breathe{0%,100%{transform:scale(1);opacity:.78}50%{transform:scale(1.035);opacity:1}}@keyframes miniPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}@keyframes pulseRing{0%,100%{box-shadow:0 0 0 0 rgba(214,179,106,.16)}50%{box-shadow:0 0 0 14px rgba(214,179,106,0)}}@keyframes waveMove{0%{transform:translateY(0) scale(1)}100%{transform:translateY(24px) scale(1.04)}}@keyframes noiseMove{0%{transform:translate(0,0)}100%{transform:translate(38px,44px)}}@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}@keyframes marqueePay{from{transform:translateX(0)}to{transform:translateX(-50%)}}
    @media(max-width:1040px){nav{display:none}.hero,.about,footer{grid-template-columns:1fr}.process,.projects,.contact-cards{grid-template-columns:1fr}.quote-top{grid-template-columns:1fr}.quote-bottom{grid-template-columns:1fr}.quote-actions{min-width:0}.diamond-outline{width:260px;height:260px}.cut-input,.form-side.right .cut-input,.cut-input.tall{clip-path:none}.contact-lower{grid-template-columns:1fr}.message-oval{grid-template-columns:1fr;border-radius:32px;text-align:center}.story{display:none}.brand{letter-spacing:.18em}header{border-radius:28px}}

    /* === DESKTOP FIX V5 — overrides === */

    /* Remove the problematic right-side narrative line completely for now */
    .story {
      display: none !important;
    }

    /* Desktop form: force safe spacing and prevent overlap */
    @media (min-width: 1041px) {
      .quote-panel {
        padding-left: 64px !important;
        padding-right: 64px !important;
        overflow: visible !important;
      }

      .quote-top {
        grid-template-columns: minmax(300px, 1fr) 220px minmax(300px, 1fr) !important;
        gap: 110px !important;
        align-items: center !important;
      }

      .diamond-core {
        min-height: 300px !important;
        max-width: 220px !important;
        margin-inline: auto !important;
        isolation: isolate !important;
      }

      .diamond-outline {
        width: 210px !important;
        height: 210px !important;
      }

      .diamond-outline::before {
        inset: 14px !important;
      }

      .diamond-outline::after {
        inset: 38px !important;
      }

      .diamond-core .mini-face,
      .quote-panel .mini-face#formFace {
        width: 128px !important;
        height: 128px !important;
      }

      .quote-panel .mini-face#formFace .eyes {
        top: 43px !important;
        gap: 26px !important;
      }

      .quote-panel .mini-face#formFace .eye {
        width: 13px !important;
        height: 18px !important;
      }

      .quote-panel .mini-face#formFace .mouth {
        bottom: 34px !important;
        width: 39px !important;
        height: 18px !important;
      }

      .emoji-caption {
        bottom: 26px !important;
        min-width: 180px !important;
        font-size: 10px !important;
        letter-spacing: .14em !important;
        padding: 8px 12px !important;
      }

      /* Keep the diagonal style on normal inputs, but make it softer */
      .cut-input {
        clip-path: polygon(0 0, 96% 0, 100% 50%, 96% 100%, 0 100%) !important;
      }

      .form-side.right .cut-input {
        clip-path: polygon(4% 0, 100% 0, 100% 100%, 4% 100%, 0 50%) !important;
      }

      /* Observações must NEVER overlap the diamond */
      .cut-input.tall,
      .form-side.right .cut-input.tall {
        clip-path: none !important;
        border-radius: 2px !important;
        margin-left: 0 !important;
      }

      .cut-input.tall textarea {
        padding-left: 18px !important;
      }
    }

    /* Footer links corrected */
    .footer-box a {
      color: var(--beige) !important;
      text-decoration: none !important;
      transition: color .22s ease;
    }

    .footer-box a:hover {
      color: var(--gold) !important;
    }


    /* === STORY LINE V6 — safe lateral navigation === */
    .story {
      display: block !important;
      position: fixed !important;
      top: 108px !important;
      right: clamp(42px, 4vw, 72px) !important;
      width: 1px !important;
      height: calc(100vh - 190px) !important;
      min-height: 420px !important;
      z-index: 18 !important;
      background: linear-gradient(to bottom, transparent, rgba(214,179,106,.34), rgba(143,211,255,.24), transparent) !important;
      opacity: .9 !important;
    }

    .story-fill {
      position: absolute;
      top: 0;
      left: 0;
      width: 1px;
      height: 0%;
      background: linear-gradient(to bottom, var(--gold), var(--cyan));
      box-shadow: 0 0 18px rgba(214,179,106,.38);
      transition: height .25s ease;
    }

    .story-dot {
      position: absolute !important;
      left: 50% !important;
      top: 5%;
      width: 13px !important;
      height: 13px !important;
      border: 1px solid var(--gold) !important;
      border-radius: 50% !important;
      background: var(--bg) !important;
      transform: translate(-50%, -50%) !important;
      box-shadow: 0 0 24px rgba(214,179,106,.42) !important;
      transition: top .45s ease, border-color .45s ease, box-shadow .45s ease !important;
      pointer-events: none !important;
    }

    .story-point {
      position: absolute;
      left: 50%;
      width: 13px;
      height: 13px;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid rgba(214,179,106,.38);
      background: rgba(17,16,14,.84);
      box-shadow: 0 0 18px rgba(214,179,106,.14);
      text-decoration: none;
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
    }

    .story-point:hover,
    .story-point.active {
      border-color: var(--cyan);
      background: rgba(143,211,255,.12);
      box-shadow: 0 0 24px rgba(143,211,255,.22);
      transform: translate(-50%, -50%) scale(1.24);
    }

    .story-point::after {
      content: attr(data-label);
      position: absolute;
      right: 26px;
      top: 50%;
      transform: translateY(-50%) translateX(8px);
      padding: 7px 10px;
      border: 1px solid rgba(214,179,106,.18);
      border-radius: 999px;
      background: rgba(17,16,14,.86);
      color: var(--beige);
      font-size: 10px;
      letter-spacing: .13em;
      text-transform: uppercase;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity .22s ease, transform .22s ease;
      backdrop-filter: blur(12px);
    }

    .story-point:hover::after,
    .story-point.active::after {
      opacity: 1;
      transform: translateY(-50%) translateX(0);
    }

    @media (max-width: 1320px) {
      .story {
        display: none !important;
      }
    }


    /* === STORY LINE V8 — final clean version === */
    .story-label {
      display: none !important;
    }

    .story {
      display: block !important;
      position: fixed !important;
      top: 118px !important;
      right: 24px !important;
      left: auto !important;
      width: 1px !important;
      height: calc(100vh - 210px) !important;
      min-height: 360px !important;
      z-index: 18 !important;
      background: linear-gradient(to bottom, transparent, rgba(214,179,106,.34), rgba(143,211,255,.24), transparent) !important;
      opacity: .85 !important;
      pointer-events: auto !important;
    }

    .story-fill {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 1px !important;
      height: 0% !important;
      background: linear-gradient(to bottom, var(--gold), var(--cyan)) !important;
      box-shadow: 0 0 18px rgba(214,179,106,.38) !important;
      transition: height .25s ease !important;
    }

    .story-dot {
      position: absolute !important;
      left: 50% !important;
      top: 5%;
      width: 13px !important;
      height: 13px !important;
      border: 1px solid var(--gold) !important;
      border-radius: 50% !important;
      background: var(--bg) !important;
      transform: translate(-50%, -50%) !important;
      box-shadow: 0 0 24px rgba(214,179,106,.42) !important;
      transition: top .45s ease !important;
      pointer-events: none !important;
    }

    .story-point {
      position: absolute !important;
      left: 50% !important;
      width: 13px !important;
      height: 13px !important;
      border-radius: 50% !important;
      transform: translate(-50%, -50%) !important;
      border: 1px solid rgba(214,179,106,.38) !important;
      background: rgba(17,16,14,.84) !important;
      box-shadow: 0 0 18px rgba(214,179,106,.14) !important;
      text-decoration: none !important;
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease !important;
    }

    .story-point:hover,
    .story-point.active {
      border-color: var(--cyan) !important;
      background: rgba(143,211,255,.12) !important;
      box-shadow: 0 0 24px rgba(143,211,255,.22) !important;
      transform: translate(-50%, -50%) scale(1.24) !important;
    }

    .story-point::after {
      content: attr(data-label) !important;
      position: absolute !important;
      right: 24px !important;
      left: auto !important;
      top: 50% !important;
      transform: translateY(-50%) translateX(8px) !important;
      padding: 7px 10px !important;
      border: 1px solid rgba(214,179,106,.18) !important;
      border-radius: 999px !important;
      background: rgba(17,16,14,.88) !important;
      color: var(--beige) !important;
      font-size: 10px !important;
      letter-spacing: .13em !important;
      text-transform: uppercase !important;
      white-space: nowrap !important;
      opacity: 0 !important;
      pointer-events: none !important;
      transition: opacity .22s ease, transform .22s ease !important;
      backdrop-filter: blur(12px) !important;
    }

    .story-point:hover::after,
    .story-point.active::after {
      opacity: 1 !important;
      transform: translateY(-50%) translateX(0) !important;
    }

    @media (max-width: 1320px) {
      .story {
        display: none !important;
      }
    }



/* =========================================================
   INTERNAL PAGES
   ========================================================= */

.page-main {
  padding-top: 72px;
}

.page-hero {
  min-height: 420px;
  display: grid;
  align-items: center;
  border-bottom: 1px solid rgba(214,179,106,.14);
}

.page-hero-inner {
  max-width: 860px;
}

.page-hero h1 {
  font-size: clamp(42px, 6vw, 82px);
  line-height: .9;
  letter-spacing: -.065em;
  margin-bottom: 22px;
}

.page-hero p {
  max-width: 760px;
  font-size: 18px;
}

.page-card {
  border: 1px solid rgba(214,179,106,.18);
  border-radius: 28px;
  background: rgba(255,250,240,.045);
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
  padding: 28px;
}

.page-card strong,
.page-card h2,
.page-card h3 {
  color: var(--cream);
}

.page-card p,
.page-card li {
  color: var(--beige);
}

.two-paths {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  align-items: stretch;
}

.path-card {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(214,179,106,.2);
  border-radius: 28px;
  background:
    radial-gradient(circle at 85% 20%, rgba(214,179,106,.12), transparent 34%),
    rgba(255,250,240,.045);
  padding: 28px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.path-card:hover {
  transform: translateY(-5px);
  border-color: var(--gold);
  box-shadow: 0 22px 72px rgba(0,0,0,.32);
}

.path-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(214,179,106,.22);
  border-radius: 16px;
  color: var(--gold);
  background: rgba(255,250,240,.04);
  font-weight: 900;
  margin-bottom: 22px;
}

.path-card.positive .path-icon {
  color: var(--cyan);
  border-color: rgba(143,211,255,.3);
}

.compliment-form {
  margin-top: 28px;
  display: grid;
  gap: 18px;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.form-row.full {
  grid-template-columns: 1fr;
}

.form-note {
  color: var(--muted);
  font-size: 13px;
}

.success-message {
  display: none;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(143,211,255,.25);
  border-radius: 16px;
  background: rgba(143,211,255,.065);
  color: var(--cyan);
}

.success-message.show {
  display: block;
}

.legal-content {
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.72;
}

.legal-content h2 {
  font-size: 28px;
  letter-spacing: -.03em;
  margin-top: 34px;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.template-card {
  min-height: 330px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(214,179,106,.18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 30%, rgba(214,179,106,.13), transparent 35%),
    rgba(255,250,240,.04);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.template-card::before {
  content: "Em breve";
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 8px 11px;
  border-radius: 999px;
  border: 1px solid rgba(143,211,255,.25);
  color: var(--cyan);
  background: rgba(143,211,255,.06);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 850;
}

.template-card::after {
  content: "";
  position: absolute;
  top: 42px;
  left: 24px;
  right: 24px;
  height: 120px;
  border: 1px solid rgba(214,179,106,.15);
  border-radius: 20px;
  background:
    linear-gradient(90deg, transparent 0 49%, rgba(214,179,106,.12) 50%, transparent 51%),
    linear-gradient(0deg, transparent 0 49%, rgba(255,250,240,.035) 50%, transparent 51%);
  background-size: 32px 32px;
  opacity: .72;
}

.portfolio-list {
  display: grid;
  gap: 28px;
}

.portfolio-card {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 28px;
  align-items: stretch;
  border: 1px solid rgba(214,179,106,.18);
  border-radius: 32px;
  background: rgba(255,250,240,.045);
  padding: 24px;
  box-shadow: 0 24px 80px rgba(0,0,0,.30);
}

.portfolio-card[id] {
  scroll-margin-top: 120px;
}

.portfolio-card:nth-child(even) {
  grid-template-columns: .92fr 1.08fr;
}

.portfolio-card:nth-child(even) .portfolio-media {
  order: 2;
}

.portfolio-media {
  min-height: 340px;
  border: 1px solid rgba(214,179,106,.16);
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(214,179,106,.16), transparent 34%),
    rgba(255,250,240,.035);
  position: relative;
}

.portfolio-media video,
.portfolio-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder visual when no video is added yet */
.portfolio-media::before {
  content: "";
  position: absolute;
  inset: 28px;
  border: 1px solid rgba(214,179,106,.18);
  border-radius: 18px;
  background:
    linear-gradient(90deg, transparent 0 49%, rgba(214,179,106,.12) 50%, transparent 51%),
    linear-gradient(0deg, transparent 0 49%, rgba(143,211,255,.06) 50%, transparent 51%);
  background-size: 42px 42px;
}

.portfolio-media::after {
  content: "Preview vídeo";
  position: absolute;
  left: 28px;
  bottom: 28px;
  padding: 10px 13px;
  border-radius: 999px;
  border: 1px solid rgba(214,179,106,.22);
  background: rgba(17,16,14,.72);
  color: var(--beige);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
}

.portfolio-info {
  padding: 14px 6px;
  display: grid;
  align-content: center;
}

.project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0;
}

.project-meta span {
  padding: 8px 11px;
  border-radius: 999px;
  border: 1px solid rgba(214,179,106,.18);
  color: var(--beige);
  background: rgba(255,250,240,.035);
  font-size: 12px;
}

.feature-list {
  display: grid;
  gap: 8px;
  margin: 18px 0 24px;
  padding: 0;
  list-style: none;
}

.feature-list li::before {
  content: "✦";
  color: var(--gold);
  margin-right: 9px;
}

@media (max-width: 980px) {
  .two-paths,
  .form-row,
  .template-grid,
  .portfolio-card,
  .portfolio-card:nth-child(even) {
    grid-template-columns: 1fr;
  }

  .portfolio-card:nth-child(even) .portfolio-media {
    order: initial;
  }

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

  .page-hero {
    min-height: 340px;
  }
}


/* === HOMEPAGE POLISH V9 applied to project folder === */
.process-four {
  grid-template-columns: repeat(4, 1fr) !important;
}

.process-four .step {
  min-height: 205px;
}

.hero-stage::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 120px;
  bottom: 42px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(214,179,106,.10), transparent 70%);
  filter: blur(12px);
  z-index: 0;
}

.quote-panel {
  border-radius: 18px !important;
}

.brand-word {
  color: color-mix(in srgb, var(--beige) 90%, white) !important;
}

.contact-card strong {
  letter-spacing: -.01em;
}

.message-oval {
  border-radius: 58px !important;
}

.footer-box a {
  color: var(--beige);
  text-decoration: none;
}

.footer-box a:hover {
  color: var(--gold);
}

@media (max-width: 1040px) {
  .process-four {
    grid-template-columns: 1fr !important;
  }

  .message-oval {
    border-radius: 32px !important;
  }
}


/* === HOMEPAGE V10 — visible direction update === */

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.hero-chips span {
  padding: 9px 12px;
  border: 1px solid rgba(214,179,106,.18);
  border-radius: 999px;
  background: rgba(255,250,240,.035);
  color: var(--beige);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.signature-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 0 0 76px;
}

.signature-strip > div {
  min-height: 170px;
  padding: 22px;
  border: 1px solid rgba(214,179,106,.18);
  border-radius: 26px;
  background:
    radial-gradient(circle at 85% 18%, rgba(214,179,106,.12), transparent 35%),
    rgba(255,250,240,.04);
  box-shadow: 0 20px 70px rgba(0,0,0,.22);
}

.signature-label {
  display: block;
  color: var(--cyan);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 18px;
  font-weight: 850;
}

.signature-strip strong {
  display: block;
  color: var(--cream);
  font-size: 24px;
  letter-spacing: -.03em;
  margin-bottom: 10px;
}

.signature-strip p {
  margin: 0;
  color: var(--beige);
  font-size: 14px;
}

.process-four {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
}

.process-four .step {
  min-height: 210px;
  background:
    linear-gradient(135deg, rgba(255,250,240,.055), rgba(255,250,240,.026)),
    radial-gradient(circle at 85% 18%, rgba(214,179,106,.12), transparent 34%) !important;
}

.process-four .step::before {
  border-radius: 12px !important;
  transform: rotate(45deg);
}

.hero-stage::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 120px;
  bottom: 42px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(214,179,106,.10), transparent 70%);
  filter: blur(12px);
  z-index: 0;
}

.quote-panel {
  border-radius: 18px !important;
}

.footer-box a {
  color: var(--beige);
  text-decoration: none;
}

.footer-box a:hover {
  color: var(--gold);
}

@media (max-width: 1040px) {
  .signature-strip,
  .process-four {
    grid-template-columns: 1fr !important;
  }

  .signature-strip {
    padding-bottom: 36px;
  }
}


/* === V12 FIXES — mobile menu, selects, templates and compliment form === */

/* 1) Native selects/options: keep dark field and improve opened list where browser allows */
select,
.cut-input select,
input,
textarea {
  color-scheme: dark;
}

select option {
  background: #1F1B16;
  color: #FFFAF0;
}

select option:checked,
select option:hover {
  background: #D6B36A;
  color: #1B1307;
}

/* 2) Mobile menu: fully hidden by default, visible only on mobile and only when open */
.mobile-menu-toggle {
  display: none !important;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(214,179,106,.24);
  border-radius: 999px;
  background: rgba(255,250,240,.045);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  flex: 0 0 auto;
}

.mobile-menu-toggle span {
  width: 18px;
  height: 2px;
  border-radius: 99px;
  background: var(--gold);
  transition: transform .25s ease, opacity .25s ease;
}

.mobile-menu-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-panel {
  display: none !important;
}

/* Make sure header links never spill as raw text on mobile */
@media (max-width: 1040px) {
  header {
    align-items: center;
  }

  header nav,
  header .quick {
    display: none !important;
  }

  .mobile-menu-toggle {
    display: inline-flex !important;
  }

  .mobile-panel {
    display: grid !important;
    gap: 10px;
    position: sticky;
    top: 86px;
    z-index: 29;
    margin-top: 12px;
    padding: 0 14px;
    border: 1px solid rgba(214,179,106,.18);
    border-radius: 24px;
    background: rgba(17,16,14,.90);
    backdrop-filter: blur(18px);
    box-shadow: 0 22px 70px rgba(0,0,0,.34);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
    transition: opacity .25s ease, transform .25s ease, max-height .28s ease, padding .25s ease;
  }

  .mobile-panel.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    max-height: 620px;
    padding: 14px;
  }

  .mobile-panel a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    padding: 12px 14px;
    border: 1px solid rgba(214,179,106,.12);
    border-radius: 16px;
    color: var(--beige);
    text-decoration: none;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
    font-size: 12px;
    background: rgba(255,250,240,.028);
  }

  .mobile-panel a::after {
    content: "›";
    color: var(--gold);
    font-size: 20px;
    line-height: 1;
  }

  .mobile-panel a:hover {
    color: var(--cream);
    border-color: rgba(214,179,106,.32);
    background: rgba(214,179,106,.06);
  }

  .mobile-panel .mobile-panel-cta {
    color: #1B1307;
    background: linear-gradient(135deg, var(--gold-2), var(--gold) 55%, var(--gold-3));
    border: 0;
    justify-content: center;
  }

  .mobile-panel .mobile-panel-cta::after {
    content: "";
  }
}

/* 3) Templates page: 2 cards per row on desktop, not 4 */
.template-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  max-width: 980px;
  margin-inline: auto;
}

.template-card {
  min-height: 300px;
}

.template-card h2 {
  font-size: clamp(30px, 3vw, 46px) !important;
  line-height: .95 !important;
  letter-spacing: -.045em !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Tablet/mobile template safety */
@media (max-width: 760px) {
  .template-grid {
    grid-template-columns: 1fr !important;
  }

  .template-card h2 {
    font-size: 34px !important;
  }
}

/* 4) Compliment form: force internal form fields to Graphite Gold */
.compliment-form input[type="text"],
.compliment-form input[type="email"],
.compliment-form textarea,
.page-card input[type="text"],
.page-card input[type="email"],
.page-card textarea {
  width: 100%;
  border: 1px solid rgba(214,179,106,.24) !important;
  border-radius: 14px !important;
  background: rgba(17,16,14,.78) !important;
  color: var(--cream) !important;
  padding: 14px 16px !important;
  outline: none !important;
  font: inherit !important;
  box-shadow: none !important;
}

.compliment-form textarea,
.page-card textarea {
  min-height: 150px;
  resize: vertical;
}

.compliment-form input::placeholder,
.compliment-form textarea::placeholder,
.page-card input::placeholder,
.page-card textarea::placeholder {
  color: rgba(201,189,168,.55) !important;
}

.compliment-form input:focus,
.compliment-form textarea:focus,
.page-card input:focus,
.page-card textarea:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 4px rgba(214,179,106,.10) !important;
  background: rgba(31,27,22,.86) !important;
}

.compliment-form .pill {
  width: 100%;
  justify-content: flex-start;
}

.compliment-form .pill input {
  width: 16px !important;
  height: 16px !important;
  min-height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  accent-color: var(--gold);
}


/* === V15 FIX — premium blurred background menu === */
.mobile-menu-backdrop {
  display: none;
}

@media (max-width: 1040px) {
  .mobile-menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9980;
    background:
      radial-gradient(circle at 50% 8%, rgba(214,179,106,.12), transparent 38%),
      rgba(0,0,0,.46);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .24s ease;
  }

  body.mobile-menu-open .mobile-menu-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-panel {
    position: fixed !important;
    top: 108px !important;
    left: 20px !important;
    right: 20px !important;
    z-index: 9999 !important;
    display: grid !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 14px !important;
    border: 1px solid rgba(214,179,106,.26) !important;
    border-radius: 24px !important;
    background:
      radial-gradient(circle at 88% 10%, rgba(214,179,106,.14), transparent 35%),
      rgba(17,16,14,.96) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow:
      0 28px 90px rgba(0,0,0,.58),
      inset 0 1px 0 rgba(255,250,240,.06) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    max-height: calc(100vh - 138px) !important;
    overflow-y: auto !important;
    transform: translateY(-12px) scale(.985) !important;
    transition: opacity .22s ease, transform .22s ease !important;
    filter: none !important;
  }

  .mobile-panel.is-open {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
    filter: none !important;
  }

  .mobile-panel a {
    position: relative !important;
    z-index: 10000 !important;
    filter: none !important;
  }

  body.mobile-menu-open::after {
    content: none !important;
  }

  header {
    z-index: 10001 !important;
  }

  .mobile-menu-toggle {
    z-index: 10002 !important;
    position: relative !important;
  }
}

@media (max-width: 520px) {
  .mobile-panel {
    top: 100px !important;
    left: 14px !important;
    right: 14px !important;
    max-height: calc(100vh - 120px) !important;
  }
}


/* === V16 FIX — mobile menu links clickable everywhere === */
@media (max-width: 1040px) {
  .mobile-menu-backdrop {
    z-index: 9000 !important;
    pointer-events: auto !important;
  }

  .mobile-panel {
    z-index: 20000 !important;
    pointer-events: auto !important;
    isolation: isolate !important;
  }

  .mobile-panel.is-open {
    z-index: 20000 !important;
    pointer-events: auto !important;
  }

  .mobile-panel a {
    position: relative !important;
    z-index: 20001 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: rgba(214,179,106,.22);
  }

  header {
    z-index: 21000 !important;
  }

  .mobile-menu-toggle {
    z-index: 21001 !important;
  }
}


/* === V17 FIX — internal pages mobile menu === */
@media (max-width: 1040px) {
  .mobile-menu-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 9000 !important;
    background:
      radial-gradient(circle at 50% 8%, rgba(214,179,106,.12), transparent 38%),
      rgba(0,0,0,.46) !important;
    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .24s ease !important;
  }

  body.mobile-menu-open .mobile-menu-backdrop {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .mobile-panel {
    position: fixed !important;
    top: 108px !important;
    left: 20px !important;
    right: 20px !important;
    z-index: 10000 !important;
    display: grid !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 14px !important;
    border: 1px solid rgba(214,179,106,.26) !important;
    border-radius: 24px !important;
    background:
      radial-gradient(circle at 88% 10%, rgba(214,179,106,.14), transparent 35%),
      rgba(17,16,14,.96) !important;
    box-shadow:
      0 28px 90px rgba(0,0,0,.58),
      inset 0 1px 0 rgba(255,250,240,.06) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    max-height: calc(100vh - 138px) !important;
    overflow-y: auto !important;
    transform: translateY(-12px) scale(.985) !important;
    transition: opacity .22s ease, transform .22s ease !important;
    filter: none !important;
  }

  .mobile-panel.is-open {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }

  .mobile-panel a {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10001 !important;
  }

  header {
    z-index: 10002 !important;
  }

  .mobile-menu-toggle {
    z-index: 10003 !important;
    position: relative !important;
  }
}

@media (max-width: 520px) {
  .mobile-panel {
    top: 100px !important;
    left: 14px !important;
    right: 14px !important;
    max-height: calc(100vh - 120px) !important;
  }
}


/* === V19 FIX — mobile label cursor/tap behavior === */

/* Labels/titles must not look like links in mobile responsive mode */
.field label,
.legend,
.kicker,
.emoji-caption {
  cursor: default;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* Text inputs still feel like editable fields */
.cut-input input,
.cut-input textarea,
.compliment-form input[type="text"],
.compliment-form input[type="email"],
.compliment-form textarea,
.page-card input[type="text"],
.page-card input[type="email"],
.page-card textarea {
  cursor: text;
}

/* Clickable elements keep pointer behavior */
.cut-input select,
.select-wrap,
.pill,
.pill input,
.btn,
.quick,
.mobile-menu-toggle,
.mobile-panel a,
.contact-card,
.project,
.template-card,
.pay-chip {
  cursor: pointer;
}

@media (max-width: 1040px) {
  .field label,
  .legend,
  .kicker,
  .emoji-caption {
    cursor: default !important;
    text-decoration: none !important;
    color: inherit;
    -webkit-tap-highlight-color: transparent !important;
  }

  .field label:hover,
  .legend:hover,
  .kicker:hover,
  .emoji-caption:hover {
    text-decoration: none !important;
  }

  /* Prevent mobile browsers/devtools from styling form labels like tappable links */
  form label:not(.pill) {
    cursor: default !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  form label:not(.pill):hover {
    color: var(--muted);
  }
}


/* === V20 FORM VISUAL STRUCTURE === */

/* Painel do formulário com mais profundidade e menos sensação apertada */
.quote-panel {
  padding: 42px 56px 34px !important;
  border-radius: 24px !important;
  background:
    linear-gradient(135deg, rgba(255,250,240,.072), rgba(255,250,240,.03)),
    radial-gradient(circle at 50% 42%, rgba(214,179,106,.14), transparent 42%),
    radial-gradient(circle at 84% 18%, rgba(143,211,255,.06), transparent 32%) !important;
  box-shadow:
    0 38px 120px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,250,240,.09) !important;
}

/* Desktop: mais espaço real entre campos e losango */
.quote-top {
  grid-template-columns: minmax(310px, 1fr) 280px minmax(310px, 1fr) !important;
  gap: 72px !important;
  align-items: center !important;
}

.form-side {
  gap: 20px !important;
}

.form-side.left {
  padding-right: 8px;
}

.form-side.right {
  padding-left: 8px;
}

/* Campos mais confortáveis */
.cut-input {
  height: 58px !important;
  background:
    linear-gradient(135deg, rgba(31,27,22,.64), rgba(17,16,14,.74)) !important;
  border-color: rgba(214,179,106,.22) !important;
}

.cut-input input,
.cut-input select {
  padding-inline: 20px !important;
}

.cut-input:focus-within {
  border-color: rgba(214,179,106,.78) !important;
  box-shadow:
    0 0 0 4px rgba(214,179,106,.09),
    0 0 32px rgba(214,179,106,.14) !important;
}

/* Observações mais limpa e segura */
.cut-input.tall,
.form-side.right .cut-input.tall {
  height: 205px !important;
  clip-path: none !important;
  border-radius: 16px !important;
  background:
    linear-gradient(135deg, rgba(31,27,22,.66), rgba(17,16,14,.76)) !important;
}

.cut-input.tall textarea,
.form-side.right .cut-input.tall textarea {
  padding: 18px 20px !important;
}

/* Losango central mais equilibrado */
.diamond-core {
  min-height: 330px !important;
  max-width: 280px !important;
  margin-inline: auto !important;
}

.diamond-outline {
  width: 250px !important;
  height: 250px !important;
  border-color: rgba(214,179,106,.56) !important;
  box-shadow:
    0 0 46px rgba(214,179,106,.16),
    inset 0 0 32px rgba(214,179,106,.035) !important;
}

.diamond-outline::before {
  inset: 18px !important;
  border-color: rgba(143,211,255,.18) !important;
}

.diamond-outline::after {
  inset: 48px !important;
  border-color: rgba(214,179,106,.18) !important;
}

/* Emoji central mais contido */
.diamond-core .mini-face,
.quote-panel .mini-face#formFace {
  width: 138px !important;
  height: 138px !important;
}

.quote-panel .mini-face#formFace .eyes {
  top: 47px !important;
  gap: 28px !important;
}

.quote-panel .mini-face#formFace .eye {
  width: 14px !important;
  height: 19px !important;
}

.quote-panel .mini-face#formFace .mouth {
  bottom: 36px !important;
  width: 42px !important;
  height: 19px !important;
}

.emoji-caption {
  bottom: 38px !important;
  min-width: 205px !important;
  padding: 9px 13px !important;
  font-size: 10px !important;
  letter-spacing: .15em !important;
}

/* Parte inferior mais organizada */
.quote-divider {
  margin: 34px 0 30px !important;
}

.quote-bottom {
  grid-template-columns: 1fr 280px !important;
  align-items: end !important;
}

.choice-area {
  gap: 20px !important;
}

.pill-row {
  gap: 12px !important;
}

.pill {
  min-height: 46px !important;
  padding-inline: 16px !important;
}

.quote-actions {
  min-width: 280px !important;
  align-self: end !important;
}

.quote-actions .btn {
  width: 100%;
}

/* Responsive: simplificar cortes e manter usabilidade */
@media (max-width: 1040px) {
  .quote-panel {
    padding: 28px 20px 26px !important;
    border-radius: 26px !important;
  }

  .quote-top {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .form-side.left,
  .form-side.right {
    padding: 0 !important;
  }

  .cut-input,
  .form-side.right .cut-input {
    clip-path: none !important;
    border-radius: 16px !important;
  }

  .diamond-core {
    min-height: 260px !important;
    order: -1;
  }

  .diamond-outline {
    width: 218px !important;
    height: 218px !important;
  }

  .quote-bottom {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .quote-actions {
    min-width: 0 !important;
  }
}


/* === V21 FORM FIELDS === */
.form-mini-note {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  color: rgba(201,189,168,.72);
  font-size: 13px;
  line-height: 1.45;
}

.cut-input input::placeholder,
.cut-input textarea::placeholder {
  color: rgba(201,189,168,.50);
}

.quote-actions .btn + .btn {
  color: var(--cyan);
  border-color: rgba(143,211,255,.26);
  background: rgba(143,211,255,.045);
}

@media (max-width: 1040px) {
  .form-mini-note {
    font-size: 12px;
  }
}


/* === V22 SMART EMOJI REACTIONS === */
#formFace {
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    filter .28s ease;
}

#formFace.smart-pulse {
  animation: formFacePulse .48s ease;
}

.quote-panel.contact-whatsapp #formFace {
  box-shadow:
    0 0 72px rgba(80,219,136,.25),
    0 0 40px rgba(214,179,106,.22),
    inset 0 -22px 38px rgba(86,49,0,.24) !important;
}

.quote-panel.contact-email #formFace {
  box-shadow:
    0 0 72px rgba(143,211,255,.28),
    0 0 40px rgba(214,179,106,.18),
    inset 0 -22px 38px rgba(86,49,0,.24) !important;
}

.quote-panel.contact-whatsapp .diamond-outline {
  border-color: rgba(80,219,136,.40) !important;
  box-shadow: 0 0 54px rgba(80,219,136,.12) !important;
}

.quote-panel.contact-email .diamond-outline {
  border-color: rgba(143,211,255,.40) !important;
  box-shadow: 0 0 54px rgba(143,211,255,.13) !important;
}

#emojiText {
  transition:
    color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    transform .25s ease;
}

.quote-panel.contact-whatsapp #emojiText {
  color: #5DE39A;
  border-color: rgba(80,219,136,.28);
  box-shadow: 0 0 24px rgba(80,219,136,.10);
}

.quote-panel.contact-email #emojiText {
  color: var(--cyan);
  border-color: rgba(143,211,255,.28);
  box-shadow: 0 0 24px rgba(143,211,255,.10);
}

@keyframes formFacePulse {
  0% { transform: scale(1); }
  42% { transform: scale(1.08); }
  100% { transform: scale(1); }
}


/* === V23 FORM VALIDATION === */
.field.has-error label {
  color: #ff8f8f !important;
}

.field.has-error .cut-input,
.cut-input:has(.input-error) {
  border-color: rgba(255, 96, 96, .86) !important;
  box-shadow:
    0 0 0 4px rgba(255, 96, 96, .10),
    0 0 30px rgba(255, 96, 96, .12) !important;
}

.field-error {
  display: block;
  min-height: 16px;
  margin-top: 6px;
  color: #ff9b9b;
  font-size: 11px;
  letter-spacing: .06em;
}

.input-error {
  color: var(--cream);
}

#formFace.attention {
  animation: attentionShake .42s ease;
  box-shadow:
    0 0 70px rgba(255,96,96,.24),
    0 0 38px rgba(214,179,106,.18),
    inset 0 -22px 38px rgba(86,49,0,.24) !important;
}

.quote-panel:has(.has-error) .diamond-outline {
  border-color: rgba(255,96,96,.36) !important;
  box-shadow: 0 0 54px rgba(255,96,96,.12) !important;
}

button.btn {
  font: inherit;
  cursor: pointer;
}

@keyframes attentionShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}


/* === V25 DEFINITIVE EMOJI ERROR STATE === */
.quote-panel.form-has-errors #formFace,
#formFace.attention {
  background:
    radial-gradient(circle at 34% 22%, #FFD3BC, transparent 24%),
    linear-gradient(135deg, #FF9A76, #EF4444 62%, #8F1111) !important;
  box-shadow:
    0 0 88px rgba(255, 75, 75, .40),
    0 0 46px rgba(255, 75, 75, .22),
    inset 0 -22px 38px rgba(90, 0, 0, .30) !important;
  filter: saturate(1.12);
}

.quote-panel.form-has-errors #formFace .eye,
#formFace.attention .eye {
  background: #2A0606 !important;
}

.quote-panel.form-has-errors #formFace .mouth,
#formFace.attention .mouth {
  width: 40px !important;
  height: 13px !important;
  border-bottom: 0 !important;
  border-top: 5px solid #2A0606 !important;
  border-radius: 50px 50px 0 0 !important;
  bottom: 43px !important;
}

.quote-panel.form-has-errors .diamond-outline {
  border-color: rgba(255, 80, 80, .55) !important;
  box-shadow:
    0 0 70px rgba(255, 80, 80, .20),
    inset 0 0 32px rgba(255, 80, 80, .06) !important;
}

.quote-panel.form-has-errors #emojiText {
  color: #FFB4B4 !important;
  border-color: rgba(255, 80, 80, .38) !important;
  box-shadow: 0 0 30px rgba(255, 80, 80, .14) !important;
}

/* Red field state remains elegant */
.field.has-error label {
  color: #ff9b9b !important;
}

.field.has-error .cut-input,
.cut-input:has(.input-error) {
  border-color: rgba(255, 96, 96, .86) !important;
  box-shadow:
    0 0 0 4px rgba(255, 96, 96, .10),
    0 0 30px rgba(255, 96, 96, .12) !important;
}

.field-error {
  display: block;
  min-height: 16px;
  margin-top: 6px;
  color: #ffaaaa;
  font-size: 11px;
  letter-spacing: .06em;
}


/* === V26 SMART SEND === */
.pill-row.contact-error {
  padding: 10px;
  border: 1px solid rgba(255, 96, 96, .42);
  border-radius: 20px;
  background: rgba(255, 96, 96, .045);
}

.pill-row.contact-error .field-error {
  width: 100%;
  color: #ffaaaa;
  padding-left: 4px;
}

.quote-actions button.btn {
  border: 0;
  appearance: none;
  font: inherit;
  cursor: pointer;
}

.quote-actions button.btn.primary {
  color: #1B1307;
  background: linear-gradient(135deg, var(--gold-2), var(--gold) 55%, var(--gold-3));
}


/* === V27 CONTACTS VISUAL STRUCTURE === */

/* Secção de contactos com mais presença e continuidade com o formulário */
.contacts {
  padding-top: 96px !important;
}

.contacts-head {
  margin-bottom: 46px !important;
}

.contacts-head h2 {
  max-width: 850px;
  margin-inline: auto;
}

.contact-cards {
  gap: 20px !important;
  margin-bottom: 42px !important;
}

/* Cards de contacto mais premium */
.contact-card {
  position: relative;
  min-height: 116px !important;
  grid-template-columns: 62px 1fr 28px !important;
  padding: 22px 24px !important;
  border-radius: 24px !important;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,250,240,.06), rgba(255,250,240,.028)),
    radial-gradient(circle at 88% 16%, rgba(214,179,106,.12), transparent 34%) !important;
  box-shadow:
    0 22px 72px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,250,240,.055);
}

.contact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(214,179,106,.28), rgba(143,211,255,.10), rgba(214,179,106,.10))
    border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .45;
}

.contact-card:hover {
  transform: translateY(-6px) !important;
  box-shadow:
    0 28px 86px rgba(0,0,0,.36),
    0 0 36px rgba(214,179,106,.10) !important;
}

/* WhatsApp destacado, mas dentro da paleta */
.contact-card.whatsapp {
  background:
    linear-gradient(135deg, rgba(255,250,240,.065), rgba(255,250,240,.03)),
    radial-gradient(circle at 88% 16%, rgba(80,219,136,.16), transparent 34%),
    radial-gradient(circle at 24% 88%, rgba(214,179,106,.09), transparent 34%) !important;
  border-color: rgba(80,219,136,.30) !important;
}

.contact-card.whatsapp::before {
  opacity: .68;
  background:
    linear-gradient(135deg, rgba(80,219,136,.38), rgba(214,179,106,.20), rgba(143,211,255,.12))
    border-box;
}

.contact-icon {
  width: 50px !important;
  height: 50px !important;
  border-radius: 16px !important;
  background:
    linear-gradient(135deg, rgba(255,250,240,.06), rgba(255,250,240,.026)) !important;
  box-shadow: inset 0 1px 0 rgba(255,250,240,.08);
}

.contact-card strong {
  font-size: 19px !important;
}

.contact-card small {
  color: rgba(201,189,168,.72) !important;
}

.contact-arrow {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(214,179,106,.16);
  border-radius: 999px;
  background: rgba(255,250,240,.035);
  color: var(--gold) !important;
  opacity: 1 !important;
}

/* Área inferior: mensagem + pagamentos mais integrada */
.contact-lower {
  grid-template-columns: 1.45fr 1fr !important;
  gap: 24px !important;
  align-items: stretch !important;
}

.message-oval {
  min-height: 330px !important;
  border-radius: 64px !important;
  padding: 38px 46px !important;
  background:
    radial-gradient(circle at 20% 50%, rgba(214,179,106,.20), transparent 31%),
    radial-gradient(circle at 82% 18%, rgba(143,211,255,.08), transparent 30%),
    linear-gradient(135deg, rgba(255,250,240,.058), rgba(255,250,240,.028)) !important;
  box-shadow:
    0 30px 95px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,250,240,.065);
}

.message-oval::after {
  left: 76px !important;
  width: 260px !important;
  height: 260px !important;
  border-color: rgba(214,179,106,.26) !important;
}

.message-oval .mini-face {
  box-shadow:
    0 0 70px rgba(214,179,106,.35),
    inset 0 -22px 38px rgba(86,49,0,.24) !important;
}

.message-copy h3 {
  max-width: 590px;
}

.message-copy p {
  max-width: 560px;
}

/* Caixa de pagamentos com visual de painel premium */
.payment-box {
  min-height: 330px !important;
  border-radius: 30px !important;
  padding: 30px !important;
  background:
    radial-gradient(circle at 78% 18%, rgba(143,211,255,.10), transparent 32%),
    radial-gradient(circle at 18% 86%, rgba(214,179,106,.10), transparent 34%),
    linear-gradient(135deg, rgba(255,250,240,.052), rgba(255,250,240,.025)) !important;
  box-shadow:
    0 28px 88px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,250,240,.055);
}

.pay-window {
  border-top-color: rgba(214,179,106,.20) !important;
  border-bottom-color: rgba(214,179,106,.20) !important;
  padding: 22px 0 !important;
}

.pay-chip {
  min-width: 124px !important;
  padding: 13px 16px !important;
  border-radius: 14px !important;
  background:
    linear-gradient(135deg, rgba(255,250,240,.052), rgba(255,250,240,.025)) !important;
  border-color: rgba(214,179,106,.20) !important;
  color: rgba(255,250,240,.84) !important;
  box-shadow: inset 0 1px 0 rgba(255,250,240,.045);
}

.payment-tabs {
  padding-top: 4px;
}

/* Responsive: sequência limpa no mobile/tablet */
@media (max-width: 1040px) {
  .contacts {
    padding-top: 74px !important;
  }

  .contact-cards {
    grid-template-columns: 1fr !important;
  }

  .contact-card {
    min-height: 104px !important;
  }

  .contact-lower {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .message-oval {
    min-height: auto !important;
    grid-template-columns: 1fr !important;
    border-radius: 34px !important;
    text-align: center;
    padding: 34px 24px !important;
  }

  .message-oval::after {
    left: 50% !important;
    top: 92px !important;
    width: 220px !important;
    height: 220px !important;
    transform: translateX(-50%) translateY(-50%) !important;
  }

  .payment-box {
    min-height: 280px !important;
    border-radius: 26px !important;
  }
}

@media (max-width: 520px) {
  .contact-card {
    grid-template-columns: 54px 1fr 24px !important;
    padding: 18px !important;
    border-radius: 20px !important;
  }

  .contact-card strong {
    font-size: 17px !important;
  }

  .contact-icon {
    width: 44px !important;
    height: 44px !important;
  }

  .message-oval {
    padding: 30px 20px !important;
  }

  .payment-box {
    padding: 24px 20px !important;
  }
}


/* === V28 CONTACTS TEXT POLISH === */
.payment-note {
  margin: 0;
  color: rgba(201,189,168,.70);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

.contact-card strong {
  line-height: 1.12;
}

.message-copy h3 {
  letter-spacing: -.045em;
}

.message-copy p {
  font-size: 16px;
}


/* === V32 PAYMENT CAROUSEL POLISH === */

.payment-box {
  position: relative;
  overflow: hidden;
}

.payment-box::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(214,179,106,.08);
  border-radius: 24px;
  pointer-events: none;
}

.payment-box h3,
.payment-box strong {
  position: relative;
  z-index: 1;
}

.pay-window {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 14%, black 86%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 14%, black 86%, transparent);
}

.pay-track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: payMarquee 26s linear infinite;
}

.payment-box:hover .pay-track {
  animation-play-state: paused;
}

.pay-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px !important;
  height: 46px;
  white-space: nowrap;
  font-size: 12px !important;
  letter-spacing: .13em !important;
  text-transform: uppercase;
}

.pay-chip:nth-child(4n + 1) {
  border-color: rgba(214,179,106,.28) !important;
}

.pay-chip:nth-child(4n + 2) {
  border-color: rgba(143,211,255,.22) !important;
}

.payment-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  color: rgba(201,189,168,.74);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.payment-tabs span:first-child,
.payment-tabs span:last-child {
  color: var(--beige);
}

.payment-note {
  max-width: 420px;
  margin: 14px auto 0 !important;
  color: rgba(201,189,168,.68) !important;
}

@keyframes payMarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 1040px) {
  .pay-track {
    animation-duration: 24s;
  }

  .pay-chip {
    min-width: 120px !important;
  }
}

@media (max-width: 520px) {
  .pay-window {
    mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  }

  .pay-chip {
    min-width: 112px !important;
    height: 42px;
    font-size: 11px !important;
  }

  .payment-tabs {
    font-size: 10px;
    gap: 9px;
  }
}


/* === V36 FOOTER POLISH === */
.site-footer {
  position: relative;
  margin-top: 36px;
  padding-top: 44px;
  border-top: 1px solid rgba(214,179,106,.18);
  display: grid;
  grid-template-columns: .85fr .8fr 1.15fr;
  gap: 18px;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 180px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  box-shadow: 0 0 28px rgba(214,179,106,.32);
}

.site-footer .footer-box {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(214,179,106,.16);
  border-radius: 26px;
  background:
    radial-gradient(circle at 86% 18%, rgba(214,179,106,.10), transparent 34%),
    linear-gradient(135deg, rgba(255,250,240,.046), rgba(255,250,240,.022));
  padding: 22px;
  min-height: 160px;
  box-shadow:
    0 20px 70px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,250,240,.045);
}

.site-footer .footer-box::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 18px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(214,179,106,.18);
  border-radius: 50%;
  opacity: .7;
}

.site-footer .footer-box strong {
  display: block;
  margin-bottom: 16px;
  color: var(--cream);
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.site-footer p {
  margin: 0;
  color: var(--beige);
  font-size: 15px;
}

.site-footer a {
  color: var(--beige);
  text-decoration: none;
  transition: color .22s ease, opacity .22s ease;
}

.site-footer a:hover {
  color: var(--gold);
}

.footer-signature {
  background:
    radial-gradient(circle at 86% 18%, rgba(143,211,255,.08), transparent 34%),
    radial-gradient(circle at 16% 84%, rgba(214,179,106,.12), transparent 34%),
    linear-gradient(135deg, rgba(255,250,240,.055), rgba(255,250,240,.024)) !important;
}

.footer-brand {
  color: var(--gold);
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: .9;
  letter-spacing: .30em;
  text-transform: uppercase;
  font-weight: 950;
  margin-bottom: 16px;
  text-shadow: 0 0 32px rgba(214,179,106,.16);
}

.footer-signature small {
  display: block;
  margin-top: 18px;
  color: rgba(201,189,168,.62);
  font-size: 12px;
  letter-spacing: .08em;
}

.footer-support .kicker {
  margin-bottom: 16px;
}

@media (max-width: 1040px) {
  .site-footer {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 24px;
  }

  .site-footer .footer-box {
    min-height: auto;
  }

  .footer-brand {
    letter-spacing: .22em;
  }
}

@media (max-width: 520px) {
  .site-footer {
    padding-top: 34px;
  }

  .site-footer .footer-box {
    padding: 20px;
    border-radius: 22px;
  }

  .footer-brand {
    font-size: 28px;
    letter-spacing: .18em;
  }

  .site-footer p {
    font-size: 14px;
  }
}


/* === V37 PORTFOLIO POLISH === */

.portfolio-hero {
  min-height: 460px;
}

.portfolio-section {
  padding-top: 84px;
}

.portfolio-list {
  gap: 34px !important;
}

.portfolio-card {
  position: relative;
  grid-template-columns: 1.05fr .95fr !important;
  gap: 34px !important;
  align-items: center !important;
  border-radius: 34px !important;
  padding: 28px !important;
  background:
    radial-gradient(circle at 14% 18%, rgba(214,179,106,.10), transparent 32%),
    radial-gradient(circle at 86% 84%, rgba(143,211,255,.06), transparent 34%),
    linear-gradient(135deg, rgba(255,250,240,.055), rgba(255,250,240,.025)) !important;
  box-shadow:
    0 30px 100px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,250,240,.055) !important;
  overflow: hidden;
}

.portfolio-card::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(214,179,106,.08);
  border-radius: 26px;
  pointer-events: none;
}

.portfolio-card:nth-child(even) {
  grid-template-columns: .95fr 1.05fr !important;
}

.portfolio-card:nth-child(even) .portfolio-media {
  order: 2;
}

.portfolio-info {
  position: relative;
  z-index: 1;
  padding: 20px 10px !important;
}

.portfolio-info h2 {
  font-size: clamp(32px, 4vw, 54px);
  line-height: .94;
  letter-spacing: -.055em;
  margin-bottom: 18px;
}

.portfolio-info p {
  font-size: 16px;
  max-width: 560px;
}

.portfolio-media {
  min-height: 390px !important;
  border-radius: 28px !important;
  border-color: rgba(214,179,106,.20) !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(214,179,106,.16), transparent 34%),
    linear-gradient(135deg, rgba(255,250,240,.045), rgba(255,250,240,.02)) !important;
  box-shadow:
    0 24px 80px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,250,240,.055);
}

/* Remover placeholder antigo */
.portfolio-media::before,
.portfolio-media::after {
  content: none !important;
}

.video-placeholder {
  display: grid;
  grid-template-rows: 42px 1fr;
  overflow: hidden;
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(214,179,106,.14);
  background: rgba(17,16,14,.62);
}

.browser-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(214,179,106,.42);
}

.browser-bar span:nth-child(2) {
  background: rgba(143,211,255,.32);
}

.browser-bar span:nth-child(3) {
  background: rgba(255,250,240,.22);
}

.preview-screen {
  position: relative;
  padding: 34px;
  display: grid;
  align-content: center;
  gap: 24px;
  background:
    linear-gradient(90deg, transparent 0 49%, rgba(214,179,106,.08) 50%, transparent 51%),
    linear-gradient(0deg, transparent 0 49%, rgba(143,211,255,.04) 50%, transparent 51%);
  background-size: 42px 42px;
}

.preview-hero {
  height: 130px;
  border: 1px solid rgba(214,179,106,.18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 24% 50%, rgba(214,179,106,.24), transparent 28%),
    linear-gradient(135deg, rgba(255,250,240,.07), rgba(255,250,240,.025));
}

.preview-lines {
  display: grid;
  gap: 10px;
  max-width: 70%;
}

.preview-lines i {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,250,240,.10);
}

.preview-lines i:nth-child(2) {
  width: 78%;
}

.preview-lines i:nth-child(3) {
  width: 58%;
}

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

.preview-grid i {
  min-height: 116px;
  border: 1px solid rgba(214,179,106,.16);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 35%, rgba(214,179,106,.16), transparent 32%),
    rgba(255,250,240,.04);
}

.preview-orbits {
  width: 180px;
  height: 180px;
  border: 1px solid rgba(214,179,106,.26);
  border-radius: 50%;
  margin-inline: auto;
  box-shadow:
    0 0 48px rgba(214,179,106,.16),
    inset 0 0 40px rgba(143,211,255,.06);
  position: relative;
}

.preview-orbits::before,
.preview-orbits::after {
  content: "";
  position: absolute;
  inset: 32px;
  border: 1px solid rgba(143,211,255,.18);
  border-radius: 50%;
  transform: scaleX(1.45) rotate(18deg);
}

.preview-orbits::after {
  inset: 58px;
  border-color: rgba(214,179,106,.18);
  transform: scaleX(1.55) rotate(-28deg);
}

.play-orb {
  position: absolute;
  right: 28px;
  bottom: 28px;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #1B1307;
  background: linear-gradient(135deg, var(--gold-2), var(--gold) 55%, var(--gold-3));
  box-shadow: 0 18px 50px rgba(214,179,106,.24);
  font-size: 20px;
  padding-left: 4px;
}

.project-meta {
  margin: 22px 0 !important;
  gap: 10px !important;
}

.project-meta span {
  border-color: rgba(214,179,106,.20) !important;
  background: rgba(255,250,240,.038) !important;
}

.feature-list {
  margin-bottom: 28px !important;
}

@media (max-width: 1040px) {
  .portfolio-card,
  .portfolio-card:nth-child(even) {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .portfolio-card:nth-child(even) .portfolio-media {
    order: initial;
  }

  .portfolio-media {
    min-height: 330px !important;
  }

  .portfolio-info {
    padding: 4px !important;
  }
}

@media (max-width: 520px) {
  .portfolio-section {
    padding-top: 56px;
  }

  .portfolio-card {
    padding: 20px !important;
    border-radius: 28px !important;
  }

  .portfolio-media {
    min-height: 280px !important;
    border-radius: 22px !important;
  }

  .preview-screen {
    padding: 24px;
  }

  .preview-hero {
    height: 100px;
  }

  .preview-grid i {
    min-height: 86px;
  }

  .play-orb {
    width: 50px;
    height: 50px;
    right: 22px;
    bottom: 22px;
  }
}


/* === V39 TEMPLATES POLISH === */

.templates-hero {
  min-height: 470px;
}

.templates-hero .actions {
  margin-top: 28px;
}

.templates-intro {
  padding-top: 78px;
}

.template-note {
  max-width: 860px;
  margin: 0 auto 44px;
  text-align: center;
}

.template-note h2 {
  font-size: clamp(30px, 4vw, 54px);
  line-height: .95;
  letter-spacing: -.055em;
  margin-bottom: 16px;
}

.template-note p {
  max-width: 760px;
  margin-inline: auto;
}

.template-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  max-width: 1040px !important;
  gap: 22px !important;
}

.template-card {
  min-height: 390px !important;
  position: relative;
  justify-content: flex-end;
  padding: 28px !important;
  border-radius: 32px !important;
  background:
    radial-gradient(circle at 82% 16%, rgba(214,179,106,.12), transparent 34%),
    radial-gradient(circle at 18% 84%, rgba(143,211,255,.06), transparent 32%),
    linear-gradient(135deg, rgba(255,250,240,.052), rgba(255,250,240,.024)) !important;
  box-shadow:
    0 28px 90px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,250,240,.055);
}

.template-card::before,
.template-card::after {
  content: none !important;
}

.template-status {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(143,211,255,.25);
  color: var(--cyan);
  background: rgba(143,211,255,.06);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 850;
}

.template-preview {
  position: absolute;
  left: 28px;
  right: 28px;
  top: 70px;
  height: 150px;
  border: 1px solid rgba(214,179,106,.16);
  border-radius: 24px;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 0 49%, rgba(214,179,106,.10) 50%, transparent 51%),
    linear-gradient(0deg, transparent 0 49%, rgba(143,211,255,.045) 50%, transparent 51%);
  background-size: 34px 34px;
}

.template-preview::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 24px;
  width: 42%;
  height: 18px;
  border-radius: 999px;
  background: rgba(214,179,106,.18);
}

.template-preview::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 24px;
  height: 58px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 50%, rgba(214,179,106,.18), transparent 22%),
    rgba(255,250,240,.045);
}

.template-preview.landing::after {
  height: 82px;
  background:
    radial-gradient(circle at 74% 48%, rgba(143,211,255,.12), transparent 24%),
    linear-gradient(135deg, rgba(255,250,240,.06), rgba(255,250,240,.025));
}

.template-preview.portfolio::after {
  height: 72px;
  background:
    linear-gradient(90deg, rgba(255,250,240,.055) 0 32%, transparent 32% 36%, rgba(255,250,240,.055) 36% 68%, transparent 68% 72%, rgba(255,250,240,.055) 72%);
}

.template-preview.shop::after {
  height: 74px;
  background:
    linear-gradient(90deg, rgba(214,179,106,.12) 0 22%, transparent 22% 26%, rgba(255,250,240,.055) 26% 48%, transparent 48% 52%, rgba(143,211,255,.08) 52% 74%, transparent 74% 78%, rgba(255,250,240,.055) 78%);
}

.template-card h2 {
  position: relative;
  z-index: 1;
  font-size: clamp(32px, 3.2vw, 48px) !important;
  margin-bottom: 12px;
}

.template-card p {
  position: relative;
  z-index: 1;
  max-width: 430px;
}

.template-cta {
  padding-top: 56px;
}

.template-cta .page-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  max-width: 1040px;
  margin-inline: auto;
  background:
    radial-gradient(circle at 84% 18%, rgba(214,179,106,.12), transparent 34%),
    linear-gradient(135deg, rgba(255,250,240,.055), rgba(255,250,240,.024));
}

.template-cta h2 {
  font-size: clamp(28px, 4vw, 46px);
  line-height: .98;
  letter-spacing: -.05em;
  margin-bottom: 14px;
}

@media (max-width: 900px) {
  .template-grid,
  .template-cta .page-card {
    grid-template-columns: 1fr !important;
  }

  .template-card {
    min-height: 370px !important;
  }

  .template-cta .btn {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .templates-intro {
    padding-top: 56px;
  }

  .template-card {
    min-height: 350px !important;
    padding: 24px !important;
    border-radius: 28px !important;
  }

  .template-preview {
    left: 24px;
    right: 24px;
    height: 132px;
  }
}


/* === V40 COMPLAINTS POLISH === */

.complaints-hero {
  min-height: 440px;
}

.complaints-paths {
  padding-top: 78px;
}

.two-paths {
  align-items: stretch;
}

.path-card {
  position: relative;
  overflow: hidden;
  border-radius: 32px !important;
  min-height: 310px !important;
  background:
    radial-gradient(circle at 82% 16%, rgba(214,179,106,.12), transparent 34%),
    linear-gradient(135deg, rgba(255,250,240,.052), rgba(255,250,240,.024)) !important;
  box-shadow:
    0 28px 90px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,250,240,.055);
}

.path-card::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(214,179,106,.08);
  border-radius: 24px;
  pointer-events: none;
}

.path-card.complaint-card {
  background:
    radial-gradient(circle at 82% 16%, rgba(255,96,96,.10), transparent 34%),
    radial-gradient(circle at 16% 84%, rgba(214,179,106,.08), transparent 34%),
    linear-gradient(135deg, rgba(255,250,240,.052), rgba(255,250,240,.024)) !important;
}

.path-icon {
  position: relative;
  z-index: 1;
  width: 58px !important;
  height: 58px !important;
  border-radius: 18px !important;
  font-size: 22px;
}

.complaint-card .path-icon {
  color: #ffaaaa !important;
  border-color: rgba(255,96,96,.28) !important;
  background: rgba(255,96,96,.045) !important;
}

.path-card h2 {
  position: relative;
  z-index: 1;
  font-size: clamp(30px, 4vw, 48px);
  line-height: .96;
  letter-spacing: -.05em;
}

.path-card p,
.path-card .btn {
  position: relative;
  z-index: 1;
}

.compliment-section {
  padding-top: 58px;
}

.compliment-panel {
  max-width: 1040px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 34px;
  align-items: start;
  border: 1px solid rgba(214,179,106,.18);
  border-radius: 34px;
  padding: 32px;
  background:
    radial-gradient(circle at 18% 20%, rgba(214,179,106,.12), transparent 34%),
    radial-gradient(circle at 88% 82%, rgba(143,211,255,.06), transparent 34%),
    linear-gradient(135deg, rgba(255,250,240,.052), rgba(255,250,240,.024));
  box-shadow:
    0 30px 100px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,250,240,.055);
}

.compliment-copy h2 {
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: .95;
  letter-spacing: -.055em;
  margin-bottom: 16px;
}

.compliment-copy p {
  max-width: 420px;
}

.compliment-form {
  margin-top: 0 !important;
  padding: 24px;
  border: 1px solid rgba(214,179,106,.12);
  border-radius: 26px;
  background: rgba(17,16,14,.35);
}

.compliment-form .field label {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 8px;
  display: block;
}

.compliment-form input[type="text"],
.compliment-form input[type="email"],
.compliment-form textarea {
  border-radius: 16px !important;
  background:
    linear-gradient(135deg, rgba(31,27,22,.70), rgba(17,16,14,.78)) !important;
}

.compliment-consent {
  margin-top: 2px;
}

.compliment-form button.btn {
  width: 100%;
  border: 0;
  appearance: none;
  font: inherit;
}

.form-note {
  margin: 0;
  color: rgba(201,189,168,.62);
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .compliment-panel {
    grid-template-columns: 1fr;
    padding: 26px;
  }

  .compliment-form {
    padding: 20px;
  }

  .two-paths {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 520px) {
  .complaints-paths {
    padding-top: 56px;
  }

  .path-card {
    border-radius: 28px !important;
    min-height: 280px !important;
  }

  .compliment-panel {
    border-radius: 28px;
    padding: 20px;
  }

  .compliment-form {
    padding: 18px;
    border-radius: 22px;
  }
}


/* === V41 PRIVACY POLISH === */

.privacy-hero {
  min-height: 440px;
}

.privacy-section {
  padding-top: 78px;
}

.privacy-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 28px;
  align-items: start;
  max-width: 1080px;
  margin-inline: auto;
}

.privacy-sidebar {
  position: sticky;
  top: 120px;
  border: 1px solid rgba(214,179,106,.18);
  border-radius: 28px;
  padding: 24px;
  background:
    radial-gradient(circle at 82% 18%, rgba(214,179,106,.12), transparent 34%),
    linear-gradient(135deg, rgba(255,250,240,.052), rgba(255,250,240,.024));
  box-shadow:
    0 24px 80px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,250,240,.055);
}

.privacy-sidebar p {
  margin-bottom: 20px;
  font-size: 15px;
}

.privacy-sidebar span {
  display: inline-flex;
  padding: 8px 11px;
  border: 1px solid rgba(143,211,255,.24);
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(143,211,255,.055);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 850;
}

.privacy-content {
  display: grid;
  gap: 18px;
}

.privacy-warning {
  border: 1px solid rgba(255, 183, 77, .22);
  border-radius: 24px;
  padding: 22px;
  background:
    radial-gradient(circle at 90% 20%, rgba(214,179,106,.12), transparent 34%),
    rgba(214,179,106,.045);
}

.privacy-warning strong {
  display: block;
  color: var(--gold);
  margin-bottom: 8px;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 12px;
}

.privacy-warning p {
  margin: 0;
  font-size: 15px;
}

.privacy-block {
  position: relative;
  border: 1px solid rgba(214,179,106,.16);
  border-radius: 26px;
  padding: 26px 28px 26px 82px;
  background:
    linear-gradient(135deg, rgba(255,250,240,.048), rgba(255,250,240,.022));
  box-shadow:
    0 20px 70px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,250,240,.045);
}

.privacy-block > span {
  position: absolute;
  left: 24px;
  top: 28px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(214,179,106,.28);
  border-radius: 12px;
  color: var(--gold);
  background: rgba(255,250,240,.035);
  font-family: ui-monospace, monospace;
  font-size: 13px;
  font-weight: 900;
}

.privacy-block h2 {
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1;
  letter-spacing: -.04em;
  margin-bottom: 12px;
}

.privacy-block p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
}

@media (max-width: 980px) {
  .privacy-layout {
    grid-template-columns: 1fr;
  }

  .privacy-sidebar {
    position: relative;
    top: auto;
  }
}

@media (max-width: 520px) {
  .privacy-section {
    padding-top: 56px;
  }

  .privacy-sidebar,
  .privacy-warning,
  .privacy-block {
    border-radius: 22px;
  }

  .privacy-block {
    padding: 24px;
  }

  .privacy-block > span {
    position: relative;
    left: auto;
    top: auto;
    margin-bottom: 16px;
  }

  .privacy-block p {
    font-size: 15px;
  }
}


/* === V42 PRIVACY PREFINAL === */

.privacy-block p + p {
  margin-top: 12px;
}

.privacy-block strong {
  color: var(--gold);
  font-weight: 850;
}

.privacy-placeholder {
  padding: 12px 14px;
  border: 1px solid rgba(143,211,255,.18);
  border-radius: 14px;
  background: rgba(143,211,255,.045);
  color: rgba(201,189,168,.78) !important;
  font-size: 14px !important;
}

.privacy-warning {
  background:
    radial-gradient(circle at 90% 20%, rgba(214,179,106,.15), transparent 34%),
    rgba(214,179,106,.052) !important;
}

.privacy-content {
  gap: 20px !important;
}

.privacy-block {
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.privacy-block:hover {
  border-color: rgba(214,179,106,.26);
  transform: translateY(-2px);
  box-shadow:
    0 24px 78px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,250,240,.05);
}


/* === V44 VISUAL REVIEW === */

/* Consistência global de títulos e blocos */
.page-hero-inner {
  position: relative;
  z-index: 1;
}

.page-hero .kicker,
.section-title .kicker,
.contacts-head .kicker {
  justify-content: flex-start;
}

.section-title .kicker,
.contacts-head .kicker,
.template-note .kicker {
  justify-content: center;
}

/* Botões com largura mais previsível em mobile */
.btn {
  text-align: center;
}

/* Evitar que palavras grandes esmaguem cards */
h1, h2, h3, .footer-brand {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* Melhor acabamento dos cards repetidos */
.page-card,
.footer-box,
.path-card,
.portfolio-card,
.template-card,
.contact-card,
.payment-box,
.message-oval,
.quote-panel {
  backface-visibility: hidden;
}

/* Foco acessível sem estragar estética */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(143,211,255,.8);
  outline-offset: 3px;
}

/* Harmonizar espaçamentos finais nas páginas internas */
.page-main main section:last-of-type {
  padding-bottom: 82px;
}

/* Corrigir possíveis quebras demasiado apertadas em cards pequenos */
.contact-card,
.project-meta span,
.pay-chip,
.pill {
  -webkit-font-smoothing: antialiased;
}

/* Rodapé mais respirado após páginas internas */
.site-footer {
  margin-bottom: 46px;
}

/* Mobile polish */
@media (max-width: 1040px) {
  .page {
    padding-left: 18px;
    padding-right: 18px;
  }

  .page-main {
    padding-top: 20px;
  }

  section {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .page-hero {
    min-height: 360px;
  }

  .page-hero h1 {
    font-size: clamp(38px, 12vw, 58px);
  }
}

@media (max-width: 520px) {
  .actions {
    width: 100%;
  }

  .actions .btn {
    width: 100%;
  }

  .brand {
    font-size: 13px;
  }

  header {
    padding: 12px 14px;
  }

  .page {
    padding-left: 14px;
    padding-right: 14px;
  }
}



/* === V49 SMART EMOJI REAL MOTION === */

/* Movimento agora é mais visível e controlado por JS */
#smartForm .diamond-core {
  --core-x: 0px;
  --core-y: 0px;
  --core-r: 0deg;
  transform: translate3d(var(--core-x), var(--core-y), 0) rotate(var(--core-r));
  transition: transform .48s cubic-bezier(.18,.9,.22,1);
  will-change: transform;
}

#formFace {
  --face-r: 0deg;
  --face-s: 1;
  transform: rotate(var(--face-r)) scale(var(--face-s)) !important;
  transition:
    transform .42s cubic-bezier(.18,.9,.22,1),
    background .28s ease,
    box-shadow .28s ease,
    filter .28s ease !important;
  will-change: transform;
}

/* Idle só quando a pessoa não está a interagir */
#smartForm:not(.emoji-active) #formFace:not(.attention) {
  animation: futereEmojiIdleV49 5.6s ease-in-out infinite;
}

#smartForm.emoji-active #formFace {
  animation: none !important;
}

#smartForm .field.emoji-field-active .cut-input {
  border-color: rgba(214,179,106,.74) !important;
  box-shadow:
    0 0 0 4px rgba(214,179,106,.08),
    0 0 36px rgba(214,179,106,.16) !important;
}

#smartForm .field.emoji-field-active label {
  color: rgba(255,250,240,.9) !important;
}

#formFace.emoji-bounce {
  animation: futereEmojiBounceV49 .55s cubic-bezier(.18,.9,.22,1) !important;
}

#formFace.emoji-spin {
  animation: futereEmojiSpinV49 .68s cubic-bezier(.18,.9,.22,1) !important;
}

#formFace.emoji-nod {
  animation: futereEmojiNodV49 .62s cubic-bezier(.18,.9,.22,1) !important;
}

#smartForm.emoji-left .diamond-outline {
  border-color: rgba(214,179,106,.66) !important;
  box-shadow: 0 0 58px rgba(214,179,106,.18) !important;
}

#smartForm.emoji-right .diamond-outline {
  border-color: rgba(143,211,255,.42) !important;
  box-shadow: 0 0 58px rgba(143,211,255,.14) !important;
}

/* No telemóvel o movimento existe, mas é reduzido */
@media (max-width: 1040px) {
  #smartForm .diamond-core {
    --core-x: 0px !important;
    --core-y: 0px !important;
    --core-r: 0deg !important;
  }

  #formFace {
    --face-r: 0deg !important;
    --face-s: 1 !important;
  }
}

@keyframes futereEmojiIdleV49 {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  35% {
    transform: rotate(1.6deg) scale(1.012);
  }
  72% {
    transform: rotate(-1.2deg) scale(1.006);
  }
}

@keyframes futereEmojiBounceV49 {
  0% { transform: rotate(var(--face-r)) scale(1); }
  42% { transform: rotate(var(--face-r)) scale(1.12); }
  100% { transform: rotate(var(--face-r)) scale(var(--face-s)); }
}

@keyframes futereEmojiSpinV49 {
  0% { transform: rotate(var(--face-r)) scale(1); }
  52% { transform: rotate(calc(var(--face-r) + 24deg)) scale(1.10); }
  100% { transform: rotate(var(--face-r)) scale(var(--face-s)); }
}

@keyframes futereEmojiNodV49 {
  0% { transform: rotate(var(--face-r)) scale(1); }
  35% { transform: rotate(calc(var(--face-r) - 7deg)) scale(1.05); }
  68% { transform: rotate(calc(var(--face-r) + 5deg)) scale(1.03); }
  100% { transform: rotate(var(--face-r)) scale(var(--face-s)); }
}


/* === V51 ORBYTE BRANDING === */

/* Header logo */
.orbyte-brand {
  gap: 12px !important;
}

.orbyte-brand .brand-mark {
  display: none !important;
}

.brand-orb {
  position: relative;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
}

.brand-orb::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  box-shadow:
    0 0 24px rgba(214,179,106,.20),
    inset 0 0 18px rgba(214,179,106,.08);
}

.brand-orb::after {
  content: "";
  position: absolute;
  width: 40px;
  height: 14px;
  border-top: 2px solid var(--gold);
  border-radius: 50%;
  transform: rotate(-32deg);
  opacity: .95;
}

.brand-orb i {
  position: absolute;
  right: 4px;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 14px rgba(143,211,255,.74);
}

.orbyte-brand small {
  margin-left: -4px;
  color: var(--gold);
  font-size: 9px;
  letter-spacing: .26em;
  line-height: 1;
  align-self: end;
  padding-bottom: 2px;
}

/* Hero logo replacing first emoji */
.logo-stage {
  min-height: 520px;
  display: grid;
  place-items: center;
  position: relative;
}

.hero-logo-orbit {
  position: relative;
  width: clamp(270px, 34vw, 470px);
  height: clamp(270px, 34vw, 470px);
  display: grid;
  place-items: center;
  animation: orbyteFloat 6.8s ease-in-out infinite;
  filter:
    drop-shadow(0 28px 80px rgba(0,0,0,.42))
    drop-shadow(0 0 44px rgba(214,179,106,.17));
  will-change: transform;
}

.hero-logo-orbit .logo-core {
  position: absolute;
  width: 46%;
  height: 46%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,250,240,.72), transparent 18%),
    radial-gradient(circle at 72% 74%, rgba(0,0,0,.42), transparent 40%),
    linear-gradient(135deg, #F6D77D, #D6B36A 50%, #4B3413);
  box-shadow:
    0 0 72px rgba(214,179,106,.30),
    inset -22px -26px 48px rgba(0,0,0,.28),
    inset 18px 18px 38px rgba(255,250,240,.16);
}

.hero-logo-orbit .logo-core::before {
  content: "O";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(17,16,14,.42);
  font-size: clamp(64px, 8vw, 128px);
  font-weight: 950;
  letter-spacing: -.08em;
  transform: translateX(-2px);
}

.logo-ring {
  position: absolute;
  width: 86%;
  height: 28%;
  border: 2px solid rgba(214,179,106,.62);
  border-left-color: rgba(214,179,106,.16);
  border-bottom-color: rgba(143,211,255,.22);
  border-radius: 50%;
  transform: rotate(-24deg);
  box-shadow:
    0 0 34px rgba(214,179,106,.14),
    inset 0 0 18px rgba(143,211,255,.06);
}

.logo-ring.ring-b {
  width: 74%;
  height: 24%;
  border-color: rgba(143,211,255,.22);
  border-top-color: rgba(214,179,106,.40);
  transform: rotate(18deg);
  opacity: .72;
}

.logo-particle {
  position: absolute;
  width: clamp(12px, 1.4vw, 18px);
  height: clamp(12px, 1.4vw, 18px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #fff, var(--cyan) 42%, #0C6A72);
  box-shadow:
    0 0 28px rgba(143,211,255,.78),
    0 0 52px rgba(143,211,255,.30);
  transform: translate(148px, -78px);
  animation: orbyteParticle 6.8s ease-in-out infinite;
}

.logo-stage .speech-bubble {
  right: clamp(8px, 3vw, 42px) !important;
  top: clamp(70px, 10vw, 130px) !important;
}

/* Replace footer brand feel */
.footer-brand {
  letter-spacing: .22em !important;
}

/* Small brand corrections */
.brand span {
  letter-spacing: .24em;
}

@keyframes orbyteFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-1deg) scale(1);
  }
  45% {
    transform: translate3d(0, -18px, 0) rotate(1.2deg) scale(1.015);
  }
  72% {
    transform: translate3d(0, -8px, 0) rotate(-.4deg) scale(1.006);
  }
}

@keyframes orbyteParticle {
  0%, 100% {
    transform: translate(148px, -78px) scale(1);
  }
  45% {
    transform: translate(154px, -94px) scale(1.08);
  }
  72% {
    transform: translate(142px, -84px) scale(.98);
  }
}

@media (max-width: 1040px) {
  .logo-stage {
    min-height: 390px;
  }

  .hero-logo-orbit {
    width: clamp(230px, 62vw, 360px);
    height: clamp(230px, 62vw, 360px);
  }

  .logo-stage .speech-bubble {
    top: auto !important;
    right: 50% !important;
    bottom: 22px !important;
    transform: translateX(50%);
  }
}

@media (max-width: 520px) {
  .orbyte-brand small {
    display: none;
  }

  .brand-orb {
    width: 34px;
    height: 34px;
  }

  .logo-stage {
    min-height: 320px;
  }

  .hero-logo-orbit {
    width: 245px;
    height: 245px;
  }

  .logo-particle {
    transform: translate(86px, -48px);
  }

  @keyframes orbyteParticle {
    0%, 100% {
      transform: translate(86px, -48px) scale(1);
    }
    45% {
      transform: translate(92px, -60px) scale(1.08);
    }
    72% {
      transform: translate(82px, -54px) scale(.98);
    }
  }
}


/* === V52 HERO LOGO FIX === */

/* Garantir que o logo grande do hero aparece sempre */
.hero .logo-stage,
.logo-stage {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  min-height: 520px !important;
  width: 100% !important;
  overflow: visible !important;
  isolation: isolate;
}

.hero-logo-orbit {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: clamp(300px, 34vw, 500px) !important;
  height: clamp(300px, 34vw, 500px) !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 2 !important;
  animation: orbyteFloatV52 6.8s ease-in-out infinite !important;
  filter:
    drop-shadow(0 28px 80px rgba(0,0,0,.42))
    drop-shadow(0 0 48px rgba(214,179,106,.20)) !important;
}

.hero-logo-orbit .logo-core {
  position: absolute !important;
  width: 46% !important;
  height: 46% !important;
  border-radius: 50% !important;
  display: block !important;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,250,240,.72), transparent 18%),
    radial-gradient(circle at 72% 74%, rgba(0,0,0,.42), transparent 40%),
    linear-gradient(135deg, #F6D77D, #D6B36A 50%, #4B3413) !important;
  box-shadow:
    0 0 72px rgba(214,179,106,.30),
    inset -22px -26px 48px rgba(0,0,0,.28),
    inset 18px 18px 38px rgba(255,250,240,.16) !important;
}

.hero-logo-orbit .logo-core::before {
  content: "O";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(17,16,14,.42);
  font-size: clamp(70px, 8vw, 132px);
  font-weight: 950;
  letter-spacing: -.08em;
  transform: translateX(-2px);
}

.logo-ring {
  position: absolute !important;
  display: block !important;
  width: 88% !important;
  height: 30% !important;
  border: 2px solid rgba(214,179,106,.68) !important;
  border-left-color: rgba(214,179,106,.18) !important;
  border-bottom-color: rgba(143,211,255,.24) !important;
  border-radius: 50% !important;
  transform: rotate(-24deg) !important;
  box-shadow:
    0 0 34px rgba(214,179,106,.14),
    inset 0 0 18px rgba(143,211,255,.06) !important;
}

.logo-ring.ring-b {
  width: 74% !important;
  height: 24% !important;
  border-color: rgba(143,211,255,.24) !important;
  border-top-color: rgba(214,179,106,.45) !important;
  transform: rotate(18deg) !important;
  opacity: .78 !important;
}

.logo-particle {
  position: absolute !important;
  display: block !important;
  width: clamp(12px, 1.4vw, 18px) !important;
  height: clamp(12px, 1.4vw, 18px) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 32% 28%, #fff, var(--cyan) 42%, #0C6A72) !important;
  box-shadow:
    0 0 28px rgba(143,211,255,.78),
    0 0 52px rgba(143,211,255,.30) !important;
  transform: translate(152px, -82px);
  animation: orbyteParticleV52 6.8s ease-in-out infinite !important;
  z-index: 4;
}

.logo-stage .speech-bubble {
  position: absolute !important;
  right: clamp(8px, 3vw, 42px) !important;
  top: clamp(72px, 10vw, 132px) !important;
  z-index: 5 !important;
}

@keyframes orbyteFloatV52 {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-1deg) scale(1);
  }
  45% {
    transform: translate3d(0, -18px, 0) rotate(1.2deg) scale(1.015);
  }
  72% {
    transform: translate3d(0, -8px, 0) rotate(-.4deg) scale(1.006);
  }
}

@keyframes orbyteParticleV52 {
  0%, 100% {
    transform: translate(152px, -82px) scale(1);
  }
  45% {
    transform: translate(158px, -98px) scale(1.08);
  }
  72% {
    transform: translate(146px, -88px) scale(.98);
  }
}

@media (max-width: 1040px) {
  .hero .logo-stage,
  .logo-stage {
    min-height: 390px !important;
  }

  .hero-logo-orbit {
    width: clamp(230px, 62vw, 360px) !important;
    height: clamp(230px, 62vw, 360px) !important;
  }

  .logo-stage .speech-bubble {
    top: auto !important;
    right: 50% !important;
    bottom: 22px !important;
    transform: translateX(50%) !important;
  }
}

@media (max-width: 520px) {
  .hero .logo-stage,
  .logo-stage {
    min-height: 320px !important;
  }

  .hero-logo-orbit {
    width: 245px !important;
    height: 245px !important;
  }

  .logo-particle {
    transform: translate(86px, -48px) !important;
  }

  @keyframes orbyteParticleV52 {
    0%, 100% {
      transform: translate(86px, -48px) scale(1);
    }
    45% {
      transform: translate(92px, -60px) scale(1.08);
    }
    72% {
      transform: translate(82px, -54px) scale(.98);
    }
  }
}


/* === V53 CLEAN ORBYTE MARK === */

/* Esconder qualquer resíduo do logo 3D anterior */
.hero-logo-orbit,
.logo-core,
.logo-ring,
.logo-particle {
  display: none !important;
}

/* Header: símbolo mais fino e premium */
.brand-orb {
  width: 34px !important;
  height: 34px !important;
}

.brand-orb::before {
  inset: 8px !important;
  border-width: 2px !important;
  border-color: rgba(214,179,106,.92) !important;
  background: transparent !important;
}

.brand-orb::after {
  width: 38px !important;
  height: 12px !important;
  border-top-width: 2px !important;
  border-color: rgba(214,179,106,.82) !important;
  transform: rotate(-34deg) !important;
}

.brand-orb i {
  width: 6px !important;
  height: 6px !important;
  right: 5px !important;
  top: 8px !important;
}

/* Hero: marca gráfica, sem planeta 3D */
.clean-logo-stage {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  min-height: 520px !important;
  overflow: visible !important;
}

.clean-orbyte-mark {
  position: relative;
  width: clamp(280px, 32vw, 470px);
  height: clamp(280px, 32vw, 470px);
  display: grid;
  place-items: center;
  animation: cleanOrbyteFloat 7.2s ease-in-out infinite;
  filter:
    drop-shadow(0 26px 70px rgba(0,0,0,.42))
    drop-shadow(0 0 32px rgba(214,179,106,.14));
  will-change: transform;
}

/* círculo incompleto */
.clean-circle {
  position: absolute;
  width: 46%;
  height: 46%;
  border-radius: 50%;
  border: clamp(10px, 1.1vw, 15px) solid rgba(214,179,106,.86);
  border-right-color: rgba(214,179,106,.20);
  border-bottom-color: rgba(214,179,106,.36);
  transform: rotate(-18deg);
  box-shadow:
    0 0 38px rgba(214,179,106,.11),
    inset 0 0 22px rgba(214,179,106,.035);
}

/* órbita fina */
.clean-orbit {
  position: absolute;
  width: 78%;
  height: 24%;
  border-top: 2px solid rgba(214,179,106,.74);
  border-radius: 50%;
  transform: rotate(-32deg);
  opacity: .95;
}

.clean-orbit.orbit-soft {
  width: 70%;
  height: 22%;
  border-top-color: rgba(143,211,255,.23);
  transform: rotate(18deg);
  opacity: .72;
}

/* corte diagonal que dá identidade */
.clean-slash {
  position: absolute;
  width: 58%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(214,179,106,.92), transparent);
  transform: rotate(-34deg);
  box-shadow: 0 0 22px rgba(214,179,106,.18);
}

/* ponto orbital */
.clean-dot {
  position: absolute;
  width: clamp(13px, 1.2vw, 18px);
  height: clamp(13px, 1.2vw, 18px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #fff, var(--gold) 34%, #8B6421);
  box-shadow:
    0 0 24px rgba(214,179,106,.56),
    0 0 40px rgba(214,179,106,.22);
  transform: translate(118px, -92px);
  animation: cleanDotFloat 7.2s ease-in-out infinite;
}

/* bolha reposicionada, mais contida */
.clean-logo-stage .speech-bubble {
  position: absolute !important;
  right: clamp(10px, 4vw, 72px) !important;
  top: clamp(96px, 12vw, 150px) !important;
  z-index: 5 !important;
  max-width: 310px !important;
}

/* animação elegante */
@keyframes cleanOrbyteFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-1deg);
  }
  46% {
    transform: translate3d(0, -14px, 0) rotate(1.1deg);
  }
  72% {
    transform: translate3d(0, -6px, 0) rotate(-.35deg);
  }
}

@keyframes cleanDotFloat {
  0%, 100% {
    transform: translate(118px, -92px) scale(1);
  }
  46% {
    transform: translate(126px, -106px) scale(1.05);
  }
  72% {
    transform: translate(112px, -98px) scale(.98);
  }
}

@media (max-width: 1040px) {
  .clean-logo-stage {
    min-height: 380px !important;
  }

  .clean-orbyte-mark {
    width: clamp(230px, 58vw, 350px);
    height: clamp(230px, 58vw, 350px);
  }

  .clean-logo-stage .speech-bubble {
    top: auto !important;
    right: 50% !important;
    bottom: 20px !important;
    transform: translateX(50%) !important;
  }
}

@media (max-width: 520px) {
  .clean-logo-stage {
    min-height: 300px !important;
  }

  .clean-orbyte-mark {
    width: 235px;
    height: 235px;
  }

  .clean-dot {
    transform: translate(74px, -62px);
  }

  @keyframes cleanDotFloat {
    0%, 100% {
      transform: translate(74px, -62px) scale(1);
    }
    46% {
      transform: translate(80px, -72px) scale(1.05);
    }
    72% {
      transform: translate(70px, -66px) scale(.98);
    }
  }
}


/* === V54 ORBYTE MOON LOGO === */

/* Esconder símbolos CSS anteriores no hero */
.clean-orbyte-mark,
.clean-circle,
.clean-orbit,
.clean-slash,
.clean-dot,
.hero-logo-orbit,
.logo-core,
.logo-ring,
.logo-particle {
  display: none !important;
}

/* Header conforme referência: lua + ORBYTE STUDIO */
.orbyte-brand {
  gap: 12px !important;
}

.brand-moon {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: inline-block;
  background-image: none;
  background-size: 145%;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
  filter:
    drop-shadow(0 0 14px rgba(214,179,106,.20))
    drop-shadow(0 0 8px rgba(214,179,106,.12));
}

.orbyte-brand span:not(.brand-moon) {
  letter-spacing: .32em !important;
}

.orbyte-brand small {
  color: var(--gold);
  font-size: 9px;
  letter-spacing: .26em;
  margin-left: -5px;
  align-self: end;
  padding-bottom: 2px;
}

/* Hero com lua real da referência */
.moon-logo-stage {
  position: relative !important;
  min-height: 520px !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
}

.hero-moon-logo {
  width: clamp(260px, 30vw, 430px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  animation: moonFloatV54 7.4s ease-in-out infinite;
  filter:
    drop-shadow(0 30px 80px rgba(0,0,0,.44))
    drop-shadow(0 0 38px rgba(214,179,106,.16));
  will-change: transform;
}

.hero-moon-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  pointer-events: none;
}

.moon-logo-stage .speech-bubble {
  position: absolute !important;
  right: clamp(10px, 4vw, 74px) !important;
  top: clamp(98px, 12vw, 150px) !important;
  z-index: 5 !important;
  max-width: 330px !important;
}

/* Logo flutuante muito subtil */
@keyframes moonFloatV54 {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-.6deg) scale(1);
  }
  46% {
    transform: translate3d(0, -14px, 0) rotate(.8deg) scale(1.012);
  }
  74% {
    transform: translate3d(0, -6px, 0) rotate(-.25deg) scale(1.005);
  }
}

@media (max-width: 1040px) {
  .moon-logo-stage {
    min-height: 380px !important;
  }

  .hero-moon-logo {
    width: clamp(230px, 56vw, 350px);
  }

  .moon-logo-stage .speech-bubble {
    top: auto !important;
    right: 50% !important;
    bottom: 20px !important;
    transform: translateX(50%) !important;
  }
}

@media (max-width: 520px) {
  .brand-moon {
    width: 34px;
    height: 34px;
  }

  .orbyte-brand small {
    display: none;
  }

  .moon-logo-stage {
    min-height: 300px !important;
  }

  .hero-moon-logo {
    width: 235px;
  }
}


/* === V55 ORBYTE BRAND DIRECTION === */

/* Direção visual inspirada nas imagens de branding enviadas */
:root {
  --orbyte-black: #050607;
  --orbyte-panel: #0B0D0E;
  --orbyte-line: rgba(214,179,106,.20);
}

/* Fundo mais escuro, menos verde/amarelado */
body {
  background:
    radial-gradient(circle at 74% 8%, rgba(214,179,106,.06), transparent 30%),
    radial-gradient(circle at 18% 30%, rgba(143,211,255,.035), transparent 28%),
    linear-gradient(180deg, #050607 0%, #090A0B 46%, #050607 100%) !important;
}

body::before {
  opacity: .45 !important;
}

/* Header mais próximo do mockup: preto, fino, premium */
header {
  background:
    linear-gradient(135deg, rgba(5,6,7,.92), rgba(12,13,13,.78)) !important;
  border-color: rgba(214,179,106,.18) !important;
  box-shadow:
    0 20px 70px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,250,240,.04) !important;
}

.orbyte-brand span:not(.brand-moon) {
  color: rgba(255,250,240,.94) !important;
  letter-spacing: .28em !important;
}

.brand-moon {
  background-color: transparent !important;
  border-radius: 50%;
}

/* Hero: sem bolha/frase, marca como elemento visual */
.logo-stage .speech-bubble,
.moon-logo-stage .speech-bubble {
  display: none !important;
}

.moon-logo-stage {
  min-height: 520px !important;
}

.hero-moon-logo {
  width: clamp(300px, 31vw, 470px) !important;
  opacity: .96;
  filter:
    drop-shadow(0 30px 90px rgba(0,0,0,.58))
    drop-shadow(0 0 32px rgba(214,179,106,.13)) !important;
}

.hero h1 {
  letter-spacing: -.075em !important;
}

.hero h1 em {
  color: var(--gold) !important;
  text-shadow: 0 0 36px rgba(214,179,106,.12);
}

/* Nova faixa editorial com imagens da marca */
.brand-mood {
  padding-top: 32px;
  padding-bottom: 72px;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 28px;
  align-items: stretch;
}

.brand-mood-copy {
  border: 1px solid rgba(214,179,106,.16);
  border-radius: 30px;
  padding: 32px;
  background:
    radial-gradient(circle at 84% 18%, rgba(214,179,106,.10), transparent 34%),
    linear-gradient(135deg, rgba(255,250,240,.044), rgba(255,250,240,.018));
  box-shadow:
    0 24px 80px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,250,240,.045);
}

.brand-mood-copy h2 {
  font-size: clamp(34px, 4.5vw, 62px);
  line-height: .92;
  letter-spacing: -.06em;
  margin: 16px 0;
}

.brand-mood-copy p {
  max-width: 480px;
}

.brand-mood-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
}

.brand-mood-grid figure {
  position: relative;
  overflow: hidden;
  margin: 0;
  min-height: 210px;
  border-radius: 26px;
  border: 1px solid rgba(214,179,106,.16);
  background: #070809;
  box-shadow:
    0 22px 72px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,250,240,.04);
}

.brand-mood-grid figure:nth-child(2) {
  grid-row: span 2;
}

.brand-mood-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.04) saturate(.92) brightness(.90);
  opacity: .88;
  transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
}

.brand-mood-grid figure:hover img {
  transform: scale(1.035);
  opacity: 1;
}

.brand-mood-grid figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 44%, rgba(0,0,0,.34)),
    radial-gradient(circle at 76% 22%, rgba(214,179,106,.10), transparent 32%);
  pointer-events: none;
}

/* Cards mais próximos do moodboard */
.signature-strip > div,
.contact-card,
.portfolio-card,
.template-card,
.page-card,
.path-card,
.payment-box,
.message-oval,
.quote-panel,
.site-footer .footer-box {
  background:
    radial-gradient(circle at 82% 16%, rgba(214,179,106,.075), transparent 34%),
    linear-gradient(135deg, rgba(255,250,240,.040), rgba(255,250,240,.016)) !important;
  border-color: rgba(214,179,106,.15) !important;
}

/* Portefólio com imagem de marca como atmosfera */
.portfolio-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 84% 18%, rgba(214,179,106,.10), transparent 34%);
  pointer-events: none;
}

/* Footer mais sóbrio */
.footer-brand {
  color: rgba(255,250,240,.92) !important;
}

.footer-signature {
  background:
    radial-gradient(circle at 86% 18%, rgba(214,179,106,.08), transparent 34%),
    linear-gradient(135deg, rgba(255,250,240,.044), rgba(255,250,240,.018)) !important;
}

/* Melhor mobile */
@media (max-width: 1040px) {
  .brand-mood {
    grid-template-columns: 1fr;
    padding-top: 18px;
  }

  .brand-mood-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .brand-mood-grid figure,
  .brand-mood-grid figure:nth-child(2) {
    min-height: 220px;
    grid-row: auto;
  }

  .moon-logo-stage {
    min-height: 360px !important;
  }
}

@media (max-width: 520px) {
  .brand-mood {
    padding-bottom: 54px;
  }

  .brand-mood-copy {
    padding: 24px;
    border-radius: 24px;
  }

  .brand-mood-grid figure {
    min-height: 185px;
    border-radius: 22px;
  }

  .hero-moon-logo {
    width: 240px !important;
  }
}


/* === V56 ORBYTE CHARCOAL REFORMULATION === */

/*
  Correção de direção:
  - As imagens deixam de ser conteúdo.
  - O site passa a seguir a estética delas: preto carvão, dourado discreto,
    textura premium, menos brilho, mais editorial.
*/

:root {
  --bg: #050505 !important;
  --bg-2: #090908 !important;
  --panel: #0E0E0C !important;
  --panel-2: #13120F !important;
  --cream: #F3EEE5 !important;
  --beige: #C9BDA8 !important;
  --muted: #8F8778 !important;
  --gold: #C9A65A !important;
  --gold-2: #E2C774 !important;
  --gold-3: #7D6027 !important;
  --cyan: #8FD3FF !important;
  --line: rgba(201,166,90,.18) !important;
}

/* Fundo preto carvão inspirado no cartão/caderno */
html,
body {
  background: #050505 !important;
}

body {
  color: var(--cream) !important;
  background:
    radial-gradient(circle at 68% 10%, rgba(201,166,90,.055), transparent 30%),
    radial-gradient(circle at 22% 38%, rgba(143,211,255,.025), transparent 26%),
    linear-gradient(180deg, #050505 0%, #080807 44%, #050505 100%) !important;
}

/* textura muito subtil, sem ficar verde/amarelo */
body::before {
  opacity: .22 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
}

body::after {
  opacity: .42 !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(201,166,90,.08), transparent 28%),
    linear-gradient(115deg, transparent 0 40%, rgba(255,255,255,.028) 48%, transparent 58%) !important;
}

/* Remover a secção/imagens da v55 caso ainda existam */
.brand-mood,
.brand-mood-copy,
.brand-mood-grid {
  display: none !important;
}

/* Header mais próximo da referência: escuro, limpo, com marca real */
header {
  background:
    linear-gradient(135deg, rgba(5,5,5,.96), rgba(14,14,12,.88)) !important;
  border: 1px solid rgba(201,166,90,.20) !important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.orbyte-brand {
  gap: 13px !important;
}

.brand-crescent {
  position: relative;
  width: 38px;
  height: 38px;
  display: inline-block;
  flex: 0 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 62% 50%, #050505 0 46%, transparent 47%),
    radial-gradient(circle at 44% 50%, rgba(226,199,116,.95) 0 48%, transparent 49%);
  filter:
    drop-shadow(0 0 14px rgba(201,166,90,.22))
    drop-shadow(0 0 5px rgba(226,199,116,.16));
}

.brand-crescent::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border: 1px solid rgba(201,166,90,.20);
}

.orbyte-brand span:not(.brand-crescent) {
  color: rgba(243,238,229,.96) !important;
  letter-spacing: .30em !important;
  font-weight: 900;
}

.orbyte-brand small {
  color: var(--gold) !important;
  font-size: 9px !important;
  letter-spacing: .28em !important;
}

/* Hero: remover imagem/planeta/elementos antigos e criar lockup premium */
.hero-logo-orbit,
.logo-core,
.logo-ring,
.logo-particle,
.clean-orbyte-mark,
.clean-circle,
.clean-orbit,
.clean-slash,
.clean-dot,
.hero-moon-logo,
.hero-moon-logo img,
.moon-logo-stage .speech-bubble,
.logo-stage .speech-bubble {
  display: none !important;
}

.orbyte-hero-brand {
  min-height: 520px !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  overflow: visible !important;
}

.hero-brand-lockup {
  position: relative;
  display: grid;
  place-items: center;
  gap: 26px;
  animation: orbyteLockupFloatV56 7.5s ease-in-out infinite;
  filter:
    drop-shadow(0 30px 90px rgba(0,0,0,.54))
    drop-shadow(0 0 32px rgba(201,166,90,.12));
}

.hero-crescent-mark {
  position: relative;
  width: clamp(145px, 15vw, 220px);
  height: clamp(145px, 15vw, 220px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 62% 50%, #050505 0 46%, transparent 47%),
    radial-gradient(circle at 44% 50%, rgba(226,199,116,.96) 0 48%, transparent 49%);
  box-shadow:
    0 0 46px rgba(201,166,90,.14),
    inset 0 0 34px rgba(255,255,255,.03);
}

.hero-crescent-mark::before {
  content: "";
  position: absolute;
  inset: -12px;
  border: 1px solid rgba(201,166,90,.14);
  border-radius: 50%;
}

.hero-crescent-mark::after {
  content: "";
  position: absolute;
  right: 9%;
  top: 14%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold-2);
  box-shadow:
    0 0 18px rgba(226,199,116,.56),
    0 0 34px rgba(226,199,116,.18);
}

.hero-wordmark {
  display: grid;
  gap: 12px;
  text-align: center;
}

.hero-wordmark strong {
  color: rgba(243,238,229,.95);
  font-size: clamp(34px, 4vw, 58px);
  letter-spacing: .34em;
  font-weight: 700;
  line-height: 1;
  text-indent: .34em;
}

.hero-wordmark small {
  color: var(--gold);
  font-size: clamp(12px, 1.2vw, 16px);
  letter-spacing: .48em;
  text-indent: .48em;
  font-weight: 600;
}

/* Hero texto mantém força mas com mais sofisticação */
.hero h1 {
  color: rgba(243,238,229,.98) !important;
  text-shadow: none !important;
}

.hero h1 em {
  color: var(--gold) !important;
  text-shadow: 0 0 30px rgba(201,166,90,.10) !important;
}

.hero p {
  color: rgba(201,189,168,.86) !important;
}

/* Painéis/carvão: parar com o amarelo esverdeado */
.signature-strip > div,
.quote-panel,
.contact-card,
.message-oval,
.payment-box,
.portfolio-card,
.template-card,
.path-card,
.page-card,
.site-footer .footer-box,
.privacy-sidebar,
.privacy-warning,
.privacy-block,
.compliment-panel,
.compliment-form {
  background:
    radial-gradient(circle at 84% 14%, rgba(201,166,90,.065), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.040), rgba(255,255,255,.014)) !important;
  border-color: rgba(201,166,90,.16) !important;
  box-shadow:
    0 26px 90px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

/* Form fields mais carvão */
.cut-input,
.compliment-form input[type="text"],
.compliment-form input[type="email"],
.compliment-form textarea {
  background:
    linear-gradient(135deg, rgba(16,16,14,.92), rgba(8,8,8,.88)) !important;
  border-color: rgba(201,166,90,.17) !important;
}

/* Botões em dourado menos saturado */
.btn.primary,
.quick,
.mobile-panel-cta,
.quote-actions button.btn.primary {
  background:
    linear-gradient(135deg, #E0C36F, #C9A65A 55%, #8A6A2D) !important;
  color: #0B0905 !important;
  box-shadow:
    0 16px 46px rgba(201,166,90,.16),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}

/* Footer lockup */
.footer-brand {
  color: rgba(243,238,229,.94) !important;
  letter-spacing: .30em !important;
}

.footer-signature p {
  color: rgba(201,189,168,.80) !important;
}

@keyframes orbyteLockupFloatV56 {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  48% {
    transform: translate3d(0, -12px, 0) scale(1.006);
  }
  72% {
    transform: translate3d(0, -5px, 0) scale(1.002);
  }
}

/* Mobile */
@media (max-width: 1040px) {
  .orbyte-hero-brand {
    min-height: 360px !important;
  }

  .hero-brand-lockup {
    gap: 20px;
  }

  .hero-crescent-mark {
    width: 150px;
    height: 150px;
  }
}

@media (max-width: 520px) {
  .brand-crescent {
    width: 34px;
    height: 34px;
  }

  .orbyte-brand small {
    display: none;
  }

  .orbyte-hero-brand {
    min-height: 290px !important;
  }

  .hero-crescent-mark {
    width: 126px;
    height: 126px;
  }

  .hero-wordmark strong {
    font-size: 28px;
    letter-spacing: .26em;
    text-indent: .26em;
  }

  .hero-wordmark small {
    font-size: 11px;
    letter-spacing: .34em;
    text-indent: .34em;
  }
}


/* === V57 ORBYTE FINAL BRAND ALIGNMENT === */

/*
  Correção:
  - Logo passa a ser losango + ORBYTE STUDIO como na referência.
  - Hero usa o mesmo logo, maior.
  - Conteúdo volta a ficar centrado, sem esticar até às pontas.
  - Fundo mantém os detalhes premium, mas com preto carvão.
*/

/* Preto carvão, mantendo atmosfera dourada/creme original */
:root {
  --bg: #070706 !important;
  --bg-2: #0C0B0A !important;
  --panel: #11100E !important;
  --panel-2: #171510 !important;
  --cream: #F5F1E8 !important;
  --beige: #C9BDA8 !important;
  --muted: #928A7C !important;
  --gold: #C9A65A !important;
  --gold-2: #E5C873 !important;
  --gold-3: #80632B !important;
  --cyan: #8FD3FF !important;
  --line: rgba(201,166,90,.20) !important;
}

html,
body {
  background: #070706 !important;
}

body {
  background:
    radial-gradient(circle at 72% 8%, rgba(201,166,90,.07), transparent 32%),
    radial-gradient(circle at 18% 34%, rgba(245,241,232,.035), transparent 28%),
    radial-gradient(circle at 78% 72%, rgba(201,166,90,.045), transparent 30%),
    linear-gradient(180deg, #070706 0%, #0B0A09 42%, #070706 100%) !important;
}

/* manter detalhes de fundo, apenas mais carvão */
body::before {
  opacity: .34 !important;
  background-image:
    linear-gradient(rgba(245,241,232,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,241,232,.014) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
}

body::after {
  opacity: .58 !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(201,166,90,.07), transparent 31%),
    linear-gradient(115deg, transparent 0 38%, rgba(245,241,232,.032) 48%, transparent 60%),
    linear-gradient(22deg, transparent 0 44%, rgba(201,166,90,.038) 50%, transparent 62%) !important;
}

/* Largura global para não esticar até ao limite */
.page,
main,
.hero,
.signature-strip,
.brand-mood,
section,
.site-footer {
  max-width: 1440px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.page {
  width: min(1440px, calc(100% - 56px)) !important;
}

@media (max-width: 760px) {
  .page {
    width: min(100% - 28px, 1440px) !important;
  }
}

/* Corrigir secções específicas que estavam demasiado largas */
.signature-strip,
.contact-cards,
.contact-lower,
.portfolio-list,
.template-grid,
.privacy-layout,
.compliment-panel,
.two-paths,
.quote-panel {
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Header com losango da referência */
.brand-crescent,
.brand-moon,
.brand-orb {
  display: none !important;
}

.brand-diamond {
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: inline-block;
  transform: rotate(45deg);
  border: 2px solid var(--gold);
  box-shadow:
    0 0 18px rgba(201,166,90,.16),
    inset 0 0 12px rgba(201,166,90,.035);
}

.brand-diamond::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(201,166,90,.16);
}

.orbyte-brand span:not(.brand-diamond) {
  color: rgba(245,241,232,.97) !important;
  letter-spacing: .30em !important;
  font-weight: 900 !important;
}

.orbyte-brand small {
  display: none !important;
}

.orbyte-brand {
  gap: 16px !important;
}

/* Header mais parecido com a referência */
header {
  background:
    linear-gradient(135deg, rgba(7,7,6,.94), rgba(15,14,12,.86)) !important;
  border: 1px solid rgba(201,166,90,.22) !important;
}

/* Remover qualquer logo antigo do hero */
.hero-crescent-mark,
.hero-logo-orbit,
.logo-core,
.logo-ring,
.logo-particle,
.clean-orbyte-mark,
.clean-circle,
.clean-orbit,
.clean-slash,
.clean-dot,
.hero-moon-logo,
.hero-moon-logo img,
.moon-logo-stage,
.clean-logo-stage .speech-bubble,
.logo-stage .speech-bubble {
  display: none !important;
}

/* Hero com mesmo logo do header, maior */
.orbyte-hero-brand {
  min-height: 500px !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  overflow: visible !important;
}

.hero-diamond-lockup {
  display: grid;
  justify-items: center;
  gap: 34px;
  animation: orbyteBrandFloatV57 7.2s ease-in-out infinite;
  filter:
    drop-shadow(0 28px 80px rgba(0,0,0,.54))
    drop-shadow(0 0 28px rgba(201,166,90,.10));
}

.hero-diamond-mark {
  width: clamp(78px, 7vw, 118px);
  height: clamp(78px, 7vw, 118px);
  display: block;
  transform: rotate(45deg);
  border: 3px solid var(--gold);
  box-shadow:
    0 0 34px rgba(201,166,90,.14),
    inset 0 0 24px rgba(201,166,90,.035);
}

.hero-diamond-mark::after {
  content: "";
  position: absolute;
  inset: 16%;
  border: 1px solid rgba(201,166,90,.17);
}

.hero-wordmark strong {
  display: block;
  color: rgba(245,241,232,.96);
  font-size: clamp(26px, 3vw, 48px);
  letter-spacing: .34em;
  text-indent: .34em;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

/* Cards: devolver detalhe premium original, só mais escuro */
.signature-strip > div,
.quote-panel,
.contact-card,
.message-oval,
.payment-box,
.portfolio-card,
.template-card,
.path-card,
.page-card,
.site-footer .footer-box,
.privacy-sidebar,
.privacy-warning,
.privacy-block,
.compliment-panel,
.compliment-form {
  background:
    radial-gradient(circle at 84% 14%, rgba(201,166,90,.085), transparent 34%),
    radial-gradient(circle at 16% 86%, rgba(245,241,232,.025), transparent 34%),
    linear-gradient(135deg, rgba(245,241,232,.044), rgba(245,241,232,.016)) !important;
  border-color: rgba(201,166,90,.17) !important;
}

/* Não deixar cards colados às extremidades */
.signature-strip {
  gap: 24px !important;
}

@keyframes orbyteBrandFloatV57 {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -10px, 0);
  }
}

@media (max-width: 1040px) {
  .orbyte-hero-brand {
    min-height: 340px !important;
  }

  .hero-diamond-lockup {
    gap: 24px;
  }

  .hero-wordmark strong {
    font-size: clamp(22px, 5vw, 36px);
    letter-spacing: .24em;
    text-indent: .24em;
  }
}

@media (max-width: 520px) {
  .brand-diamond {
    width: 30px;
    height: 30px;
  }

  .orbyte-hero-brand {
    min-height: 280px !important;
  }

  .hero-diamond-mark {
    width: 72px;
    height: 72px;
  }

  .hero-wordmark strong {
    font-size: 20px;
    letter-spacing: .18em;
    text-indent: .18em;
    white-space: normal;
  }

  .signature-strip {
    gap: 14px !important;
  }
}


/* === V58 GOLD CURSOR AURA === */

/* Aura dourada subtil emitida pelo cursor — apenas em desktop/rato */
.cursor-aura,
.cursor-aura-soft {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform, opacity;
  mix-blend-mode: screen;
}

.cursor-aura {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(229,200,115,.95) 0 18%, rgba(201,166,90,.42) 35%, transparent 72%);
  box-shadow:
    0 0 16px rgba(229,200,115,.55),
    0 0 34px rgba(201,166,90,.26);
  transition:
    opacity .22s ease,
    width .22s ease,
    height .22s ease,
    box-shadow .22s ease;
}

.cursor-aura-soft {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(201,166,90,.18) 0 12%, rgba(201,166,90,.08) 34%, transparent 70%);
  filter: blur(4px);
  transition:
    opacity .32s ease,
    width .28s ease,
    height .28s ease;
}

body.cursor-ready .cursor-aura,
body.cursor-ready .cursor-aura-soft {
  opacity: 1;
}

body.cursor-hovering .cursor-aura {
  width: 20px;
  height: 20px;
  box-shadow:
    0 0 18px rgba(229,200,115,.65),
    0 0 46px rgba(201,166,90,.36);
}

body.cursor-hovering .cursor-aura-soft {
  width: 118px;
  height: 118px;
  opacity: .95;
}

body.cursor-clicking .cursor-aura {
  width: 9px;
  height: 9px;
  box-shadow:
    0 0 22px rgba(229,200,115,.80),
    0 0 54px rgba(201,166,90,.42);
}

/* Em dispositivos touch/tablet/mobile não aparece */
@media (hover: none), (pointer: coarse), (max-width: 1040px) {
  .cursor-aura,
  .cursor-aura-soft {
    display: none !important;
  }
}


/* === V59 REFERENCE LOGO SYMBOL === */

/*
  Agora o logo usa o símbolo geométrico da imagem de referência:
  - header: símbolo no lugar do losango;
  - hero: lockup completo da referência;
  - fundo carvão e detalhes premium mantidos.
*/

/* Remover/ocultar símbolos anteriores */
.brand-diamond,
.brand-crescent,
.brand-moon,
.brand-orb,
.hero-diamond-mark,
.hero-diamond-lockup,
.hero-crescent-mark,
.hero-moon-logo,
.clean-orbyte-mark,
.hero-logo-orbit {
  display: none !important;
}

/* Header: símbolo da referência */
.brand-ref-symbol {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: inline-block;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter:
    drop-shadow(0 0 16px rgba(201,166,90,.16))
    drop-shadow(0 0 4px rgba(255,255,255,.08));
}

.orbyte-brand {
  gap: 14px !important;
}

.orbyte-brand span:not(.brand-ref-symbol) {
  color: rgba(245,241,232,.97) !important;
  letter-spacing: .30em !important;
  font-weight: 900 !important;
}

.orbyte-brand small {
  display: none !important;
}

/* Hero: lockup completo da referência, sem frases soltas */
.orbyte-hero-brand {
  min-height: 500px !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  overflow: visible !important;
}

.hero-ref-lockup {
  width: min(520px, 42vw);
  display: grid;
  place-items: center;
  animation: orbyteRefFloatV59 7.2s ease-in-out infinite;
  filter:
    drop-shadow(0 28px 80px rgba(0,0,0,.55))
    drop-shadow(0 0 28px rgba(201,166,90,.10));
}

.hero-ref-lockup img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  opacity: .98;
  mix-blend-mode: screen;
}

/* O fundo do lockup da imagem mistura melhor com o carvão */
.hero-ref-lockup::after {
  content: "";
  position: absolute;
  inset: -16%;
  background: radial-gradient(circle, rgba(201,166,90,.055), transparent 58%);
  z-index: -1;
  pointer-events: none;
}

/* Mantém a largura controlada da v57/v58 */
.page {
  width: min(1440px, calc(100% - 56px)) !important;
}

.signature-strip,
.contact-cards,
.contact-lower,
.portfolio-list,
.template-grid,
.privacy-layout,
.compliment-panel,
.two-paths,
.quote-panel {
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@keyframes orbyteRefFloatV59 {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -10px, 0);
  }
}

@media (max-width: 1040px) {
  .brand-ref-symbol {
    width: 42px;
    height: 42px;
  }

  .orbyte-hero-brand {
    min-height: 340px !important;
  }

  .hero-ref-lockup {
    width: min(390px, 70vw);
  }
}

@media (max-width: 520px) {
  .brand-ref-symbol {
    width: 36px;
    height: 36px;
  }

  .orbyte-hero-brand {
    min-height: 280px !important;
  }

  .hero-ref-lockup {
    width: min(310px, 82vw);
  }

  .page {
    width: min(100% - 28px, 1440px) !important;
  }
}


/* === V60 REAL CSS ORBYTE LOGO === */

/*
  Correção definitiva:
  - Sem imagem colada no hero.
  - Sem losango.
  - Logo geométrico feito em CSS, inspirado na referência:
    símbolo angular prata/dourado + ORBYTE STUDIO.
*/

/* Esconder resíduos de versões anteriores */
.brand-ref-symbol,
.brand-diamond,
.brand-crescent,
.brand-moon,
.brand-orb,
.hero-ref-lockup,
.hero-ref-lockup img,
.hero-diamond-lockup,
.hero-diamond-mark,
.hero-crescent-mark,
.hero-moon-logo,
.hero-logo-orbit,
.clean-orbyte-mark {
  display: none !important;
}

/* HEADER SYMBOL — símbolo geométrico tipo referência */
.brand-tech-symbol {
  position: relative;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: inline-block;
  filter:
    drop-shadow(0 0 12px rgba(201,166,90,.14))
    drop-shadow(0 0 8px rgba(245,241,232,.08));
}

/* lado prata / branco */
.brand-tech-symbol::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 24px;
  height: 34px;
  clip-path: polygon(46% 0, 100% 14%, 100% 32%, 58% 24%, 28% 40%, 28% 62%, 58% 78%, 100% 68%, 100% 86%, 46% 100%, 0 74%, 0 26%);
  background:
    linear-gradient(135deg, #F6F6F0 0%, #AEB2B5 45%, #4E555A 100%);
}

/* lado dourado */
.brand-tech-symbol::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 10px;
  width: 20px;
  height: 28px;
  clip-path: polygon(0 0, 76% 18%, 76% 38%, 38% 30%, 22% 42%, 76% 54%, 76% 76%, 0 100%, 18% 76%, 52% 66%, 0 54%, 0 36%, 42% 24%);
  background:
    linear-gradient(135deg, #E5C873 0%, #C9A65A 55%, #7C5C22 100%);
}

/* corte escuro interno */
.brand-tech-symbol i {
  position: absolute;
  left: 16px;
  top: 13px;
  width: 13px;
  height: 20px;
  display: block;
  clip-path: polygon(0 0, 100% 18%, 100% 82%, 0 100%);
  background: #070706;
  z-index: 2;
}

.brand-tech-symbol b {
  position: absolute;
  right: 3px;
  top: 7px;
  width: 8px;
  height: 12px;
  display: block;
  clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 78%);
  background: #C9A65A;
  z-index: 3;
}

/* Header wordmark */
.orbyte-brand {
  gap: 14px !important;
}

.orbyte-brand span:not(.brand-tech-symbol) {
  color: rgba(245,241,232,.97) !important;
  letter-spacing: .30em !important;
  font-weight: 900 !important;
}

.orbyte-brand small {
  display: none !important;
}

/* HERO — logo construído, não imagem colada */
.orbyte-hero-brand {
  min-height: 500px !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  overflow: visible !important;
}

.hero-tech-lockup {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: clamp(22px, 3vw, 42px);
  animation: orbyteTechFloatV60 7.2s ease-in-out infinite;
  filter:
    drop-shadow(0 30px 90px rgba(0,0,0,.56))
    drop-shadow(0 0 28px rgba(201,166,90,.10));
}

/* Hero symbol — versão grande */
.hero-tech-symbol {
  position: relative;
  width: clamp(118px, 10vw, 170px);
  height: clamp(118px, 10vw, 170px);
  display: inline-block;
  flex: 0 0 auto;
}

.hero-tech-symbol::before {
  content: "";
  position: absolute;
  left: 7%;
  top: 8%;
  width: 55%;
  height: 82%;
  clip-path: polygon(46% 0, 100% 14%, 100% 32%, 58% 24%, 28% 40%, 28% 62%, 58% 78%, 100% 68%, 100% 86%, 46% 100%, 0 74%, 0 26%);
  background:
    linear-gradient(135deg, #F6F6F0 0%, #ADB2B6 46%, #394247 100%);
  box-shadow: 0 0 34px rgba(245,241,232,.08);
}

.hero-tech-symbol::after {
  content: "";
  position: absolute;
  right: 8%;
  top: 17%;
  width: 43%;
  height: 66%;
  clip-path: polygon(0 0, 76% 18%, 76% 38%, 38% 30%, 22% 42%, 76% 54%, 76% 76%, 0 100%, 18% 76%, 52% 66%, 0 54%, 0 36%, 42% 24%);
  background:
    linear-gradient(135deg, #E5C873 0%, #C9A65A 55%, #7C5C22 100%);
  box-shadow: 0 0 34px rgba(201,166,90,.13);
}

.hero-tech-symbol i {
  position: absolute;
  left: 36%;
  top: 30%;
  width: 26%;
  height: 42%;
  display: block;
  clip-path: polygon(0 0, 100% 18%, 100% 82%, 0 100%);
  background: #070706;
  z-index: 2;
}

.hero-tech-symbol b {
  position: absolute;
  right: 6%;
  top: 12%;
  width: 14%;
  height: 24%;
  display: block;
  clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 78%);
  background: #C9A65A;
  z-index: 3;
}

/* Hero wordmark */
.hero-tech-wordmark {
  display: grid;
  gap: 13px;
}

.hero-tech-wordmark strong {
  color: rgba(245,241,232,.96);
  font-size: clamp(34px, 4vw, 62px);
  letter-spacing: .34em;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.hero-tech-wordmark small {
  color: var(--gold);
  font-size: clamp(13px, 1.3vw, 18px);
  letter-spacing: .54em;
  font-weight: 500;
  line-height: 1;
}

.hero-tech-wordmark em {
  display: block;
  margin-top: 22px;
  color: rgba(245,241,232,.70);
  font-style: normal;
  font-size: clamp(10px, .85vw, 13px);
  letter-spacing: .34em;
  font-weight: 500;
  white-space: nowrap;
}

/* Manter preto carvão e detalhes de fundo bons */
body {
  background:
    radial-gradient(circle at 72% 8%, rgba(201,166,90,.07), transparent 32%),
    radial-gradient(circle at 18% 34%, rgba(245,241,232,.035), transparent 28%),
    radial-gradient(circle at 78% 72%, rgba(201,166,90,.045), transparent 30%),
    linear-gradient(180deg, #070706 0%, #0B0A09 42%, #070706 100%) !important;
}

/* Animação subtil */
@keyframes orbyteTechFloatV60 {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -10px, 0);
  }
}

@media (max-width: 1040px) {
  .orbyte-hero-brand {
    min-height: 360px !important;
  }

  .hero-tech-lockup {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 18px;
  }

  .hero-tech-symbol {
    width: 118px;
    height: 118px;
  }

  .hero-tech-wordmark strong {
    font-size: clamp(28px, 6vw, 44px);
    letter-spacing: .26em;
    text-indent: .26em;
  }

  .hero-tech-wordmark small {
    letter-spacing: .42em;
    text-indent: .42em;
  }

  .hero-tech-wordmark em {
    white-space: normal;
    letter-spacing: .22em;
  }
}

@media (max-width: 520px) {
  .brand-tech-symbol {
    width: 38px;
    height: 38px;
  }

  .orbyte-hero-brand {
    min-height: 300px !important;
  }

  .hero-tech-symbol {
    width: 92px;
    height: 92px;
  }

  .hero-tech-wordmark strong {
    font-size: 25px;
    letter-spacing: .18em;
    text-indent: .18em;
  }

  .hero-tech-wordmark small {
    font-size: 11px;
    letter-spacing: .32em;
    text-indent: .32em;
  }

  .hero-tech-wordmark em {
    display: none;
  }
}


/* === V61 LOGO ONLY HEADER HERO === */

/* Header: apenas o logo, sem texto */
.orbyte-brand.logo-only {
  gap: 0 !important;
  width: auto !important;
}

.orbyte-brand.logo-only span:not(.brand-tech-symbol),
.orbyte-brand.logo-only small,
.orbyte-brand.logo-only .brand-text,
.orbyte-brand.logo-only strong {
  display: none !important;
}

.orbyte-brand.logo-only .brand-tech-symbol {
  display: inline-block !important;
  width: 48px !important;
  height: 48px !important;
}

/* Hero: apenas o logo flutuante, sem wordmark/slogan */
.hero-tech-wordmark,
.hero-tech-wordmark strong,
.hero-tech-wordmark small,
.hero-tech-wordmark em,
.hero-ref-lockup,
.hero-diamond-lockup,
.hero-brand-lockup,
.hero-wordmark {
  display: none !important;
}

.hero-logo-only {
  display: grid !important;
  place-items: center !important;
  animation: orbyteLogoOnlyFloatV61 7.2s ease-in-out infinite;
  filter:
    drop-shadow(0 30px 90px rgba(0,0,0,.56))
    drop-shadow(0 0 30px rgba(201,166,90,.12));
}

.hero-logo-only .hero-tech-symbol {
  display: inline-block !important;
  position: relative !important;
  width: clamp(155px, 14vw, 235px) !important;
  height: clamp(155px, 14vw, 235px) !important;
}

/* Garantir que a estrutura antiga não põe texto ao lado */
.hero-tech-lockup {
  display: none !important;
}

/* Recriar o símbolo grande só dentro do hero-logo-only */
.hero-logo-only .hero-tech-symbol::before {
  content: "";
  position: absolute;
  left: 7%;
  top: 8%;
  width: 55%;
  height: 82%;
  clip-path: polygon(46% 0, 100% 14%, 100% 32%, 58% 24%, 28% 40%, 28% 62%, 58% 78%, 100% 68%, 100% 86%, 46% 100%, 0 74%, 0 26%);
  background:
    linear-gradient(135deg, #F6F6F0 0%, #ADB2B6 46%, #394247 100%);
  box-shadow: 0 0 34px rgba(245,241,232,.08);
}

.hero-logo-only .hero-tech-symbol::after {
  content: "";
  position: absolute;
  right: 8%;
  top: 17%;
  width: 43%;
  height: 66%;
  clip-path: polygon(0 0, 76% 18%, 76% 38%, 38% 30%, 22% 42%, 76% 54%, 76% 76%, 0 100%, 18% 76%, 52% 66%, 0 54%, 0 36%, 42% 24%);
  background:
    linear-gradient(135deg, #E5C873 0%, #C9A65A 55%, #7C5C22 100%);
  box-shadow: 0 0 34px rgba(201,166,90,.13);
}

.hero-logo-only .hero-tech-symbol i {
  position: absolute;
  left: 36%;
  top: 30%;
  width: 26%;
  height: 42%;
  display: block;
  clip-path: polygon(0 0, 100% 18%, 100% 82%, 0 100%);
  background: #070706;
  z-index: 2;
}

.hero-logo-only .hero-tech-symbol b {
  position: absolute;
  right: 6%;
  top: 12%;
  width: 14%;
  height: 24%;
  display: block;
  clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 78%);
  background: #C9A65A;
  z-index: 3;
}

@keyframes orbyteLogoOnlyFloatV61 {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(0, -12px, 0) scale(1.012);
  }
}

@media (max-width: 1040px) {
  .hero-logo-only .hero-tech-symbol {
    width: 140px !important;
    height: 140px !important;
  }
}

@media (max-width: 520px) {
  .orbyte-brand.logo-only .brand-tech-symbol {
    width: 40px !important;
    height: 40px !important;
  }

  .hero-logo-only .hero-tech-symbol {
    width: 112px !important;
    height: 112px !important;
  }
}


/* === V62 SVG LOGO DEFINITIVO === */

/* Remover todos os símbolos antigos */
.brand-diamond,
.brand-crescent,
.brand-moon,
.brand-orb,
.brand-ref-symbol,
.brand-tech-symbol,
.hero-tech-symbol,
.hero-tech-lockup,
.hero-logo-only,
.hero-ref-lockup,
.hero-diamond-lockup,
.hero-brand-lockup,
.hero-wordmark,
.hero-tech-wordmark {
  display: none !important;
}

/* Header: símbolo geométrico + ORBYTE STUDIO */
.orbyte-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.brand-svg-symbol {
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  filter:
    drop-shadow(0 0 12px rgba(201,166,90,.18))
    drop-shadow(0 0 7px rgba(245,241,232,.08));
}

.brand-svg-symbol svg {
  width: 100%;
  height: 100%;
  display: block;
}

.brand-svg-symbol .silver-part {
  fill: url(#orbyteSilverHeader);
}

.brand-svg-symbol .gold-part {
  fill: url(#orbyteGoldHeader);
}

.brand-svg-symbol .cut-part {
  fill: #070706;
}

.brand-wordmark {
  display: inline-block !important;
  color: rgba(245,241,232,.98) !important;
  letter-spacing: .30em !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Hero: só o mesmo logo/símbolo, grande e flutuante */
.orbyte-hero-brand {
  min-height: 500px !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  overflow: visible !important;
}

.hero-svg-logo {
  width: clamp(170px, 16vw, 270px);
  height: clamp(170px, 16vw, 270px);
  display: grid;
  place-items: center;
  animation: orbyteSvgFloatV62 7.2s ease-in-out infinite;
  filter:
    drop-shadow(0 30px 90px rgba(0,0,0,.58))
    drop-shadow(0 0 34px rgba(201,166,90,.16));
}

.hero-svg-logo svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hero-svg-logo .silver-part {
  fill: url(#orbyteSilverHero);
}

.hero-svg-logo .gold-part {
  fill: url(#orbyteGoldHero);
}

.hero-svg-logo .cut-part {
  fill: #070706;
}

/* Pequeno brilho elegante atrás, sem parecer imagem colada */
.hero-svg-logo::after {
  content: "";
  position: absolute;
  width: 150%;
  height: 150%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(201,166,90,.09), transparent 58%);
  z-index: -1;
}

@keyframes orbyteSvgFloatV62 {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(0, -12px, 0) scale(1.012);
  }
}

@media (max-width: 1040px) {
  .brand-svg-symbol {
    width: 42px;
    height: 42px;
  }

  .brand-wordmark {
    font-size: 13px !important;
    letter-spacing: .24em !important;
  }

  .orbyte-hero-brand {
    min-height: 340px !important;
  }

  .hero-svg-logo {
    width: 150px;
    height: 150px;
  }
}

@media (max-width: 520px) {
  .brand-svg-symbol {
    width: 38px;
    height: 38px;
  }

  .brand-wordmark {
    font-size: 11px !important;
    letter-spacing: .18em !important;
  }

  .orbyte-hero-brand {
    min-height: 285px !important;
  }

  .hero-svg-logo {
    width: 118px;
    height: 118px;
  }
}


/* === V63 EXACT LOGO FROM REFERENCE === */

/*
  Logo correto:
  - símbolo recortado da imagem de referência;
  - usado no header;
  - usado no hero como logo grande flutuante;
  - sem recriações CSS erradas.
*/

/* esconder todos os símbolos antigos/recriados */
.brand-svg-symbol,
.brand-tech-symbol,
.brand-diamond,
.brand-crescent,
.brand-moon,
.brand-orb,
.brand-ref-symbol,
.hero-svg-logo,
.hero-tech-symbol,
.hero-logo-only,
.hero-ref-lockup,
.hero-diamond-lockup,
.hero-tech-lockup,
.hero-brand-lockup,
.hero-wordmark,
.hero-tech-wordmark {
  display: none !important;
}

/* Header com o logo exato + ORBYTE STUDIO */
.orbyte-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.brand-logo-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
  flex: 0 0 auto;
  filter:
    drop-shadow(0 0 14px rgba(201,166,90,.16))
    drop-shadow(0 0 6px rgba(245,241,232,.08));
}

.brand-wordmark {
  display: inline-block !important;
  color: rgba(245,241,232,.98) !important;
  letter-spacing: .30em !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Hero: só o logo exato, grande e flutuante */
.orbyte-hero-brand {
  min-height: 500px !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  overflow: visible !important;
}

.hero-logo-img {
  width: clamp(190px, 17vw, 295px);
  height: auto;
  display: block;
  object-fit: contain;
  animation: orbyteExactLogoFloatV63 7.2s ease-in-out infinite;
  filter:
    drop-shadow(0 30px 90px rgba(0,0,0,.58))
    drop-shadow(0 0 34px rgba(201,166,90,.18))
    drop-shadow(0 0 10px rgba(245,241,232,.08));
}

/* brilho muito subtil atrás do logo */
.orbyte-hero-brand::after {
  content: "";
  position: absolute;
  width: min(420px, 34vw);
  height: min(420px, 34vw);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(201,166,90,.07), transparent 60%);
  z-index: -1;
  pointer-events: none;
}

@keyframes orbyteExactLogoFloatV63 {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(0, -12px, 0) scale(1.012);
  }
}

@media (max-width: 1040px) {
  .brand-logo-img {
    width: 44px;
    height: 44px;
  }

  .brand-wordmark {
    font-size: 13px !important;
    letter-spacing: .24em !important;
  }

  .orbyte-hero-brand {
    min-height: 340px !important;
  }

  .hero-logo-img {
    width: 165px;
  }
}

@media (max-width: 520px) {
  .brand-logo-img {
    width: 38px;
    height: 38px;
  }

  .brand-wordmark {
    font-size: 11px !important;
    letter-spacing: .18em !important;
  }

  .orbyte-hero-brand {
    min-height: 285px !important;
  }

  .hero-logo-img {
    width: 130px;
  }
}


/* === V66 LOGO EXATO MELHORADO === */

/*
  Mantém o MESMO logo aprovado.
  Não é redesenho.
  Apenas usa PNG maior e ligeiramente mais nítido.
*/

.brand-logo-img,
.hero-logo-img {
  image-rendering: auto !important;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.brand-logo-img {
  filter:
    drop-shadow(0 0 10px rgba(201,166,90,.13))
    drop-shadow(0 0 4px rgba(245,241,232,.05)) !important;
}

.hero-logo-img {
  filter:
    drop-shadow(0 28px 74px rgba(0,0,0,.48))
    drop-shadow(0 0 22px rgba(201,166,90,.11)) !important;
}

/* Evitar que o brilho de fundo pareça blur no logo */
.orbyte-hero-brand::after {
  opacity: .58;
}


/* === V67 LOGO FINAL FROM GENERATED IMAGE === */

/*
  Logo final vindo da imagem HD gerada.
  Mesmo logo no header e no hero.
  Não redesenhar. Não substituir por CSS.
*/

.brand-logo-img,
.hero-logo-img {
  image-rendering: auto !important;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.brand-logo-img {
  width: 54px !important;
  height: 54px !important;
  object-fit: contain !important;
  filter:
    drop-shadow(0 0 10px rgba(201,166,90,.14))
    drop-shadow(0 0 5px rgba(245,241,232,.07)) !important;
}

.hero-logo-img {
  width: clamp(230px, 20vw, 360px) !important;
  height: auto !important;
  object-fit: contain !important;
  animation: orbyteFinalLogoFloatV67 7.2s ease-in-out infinite !important;
  filter:
    drop-shadow(0 30px 82px rgba(0,0,0,.52))
    drop-shadow(0 0 28px rgba(201,166,90,.14))
    drop-shadow(0 0 7px rgba(245,241,232,.06)) !important;
}

.orbyte-hero-brand::after {
  content: "";
  position: absolute;
  width: min(440px, 36vw);
  height: min(440px, 36vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,166,90,.06), transparent 62%);
  z-index: -1;
  pointer-events: none;
}

@keyframes orbyteFinalLogoFloatV67 {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(0, -12px, 0) scale(1.01);
  }
}

@media (max-width: 1040px) {
  .brand-logo-img {
    width: 46px !important;
    height: 46px !important;
  }

  .hero-logo-img {
    width: 210px !important;
  }
}

@media (max-width: 520px) {
  .brand-logo-img {
    width: 40px !important;
    height: 40px !important;
  }

  .hero-logo-img {
    width: 155px !important;
  }
}


/* === V68 HERO LOGO BASE LIGHT === */

/* Luz premium por baixo do logo, sem desfocar o próprio logo */
.orbyte-hero-brand {
  position: relative !important;
  isolation: isolate;
}

.orbyte-hero-brand::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 58%;
  width: clamp(280px, 32vw, 520px);
  height: clamp(80px, 8vw, 145px);
  transform: translate(-50%, 22%);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center,
      rgba(245,241,232,.18) 0%,
      rgba(201,166,90,.13) 24%,
      rgba(201,166,90,.055) 48%,
      transparent 72%);
  filter: blur(18px);
  opacity: .82;
  z-index: -2;
  pointer-events: none;
}

.orbyte-hero-brand::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 62%;
  width: clamp(230px, 25vw, 420px);
  height: clamp(26px, 3vw, 46px);
  transform: translate(-50%, 210%);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center,
      rgba(245,241,232,.20) 0%,
      rgba(201,166,90,.12) 36%,
      rgba(0,0,0,.08) 62%,
      transparent 78%);
  filter: blur(10px);
  opacity: .68;
  z-index: -1;
  pointer-events: none;
}

/* pequeno reforço de presença sem suavizar o logo */
.hero-logo-img {
  position: relative;
  z-index: 2;
}

@media (max-width: 1040px) {
  .orbyte-hero-brand::before {
    width: 340px;
    height: 96px;
    top: 58%;
  }

  .orbyte-hero-brand::after {
    width: 260px;
    height: 32px;
  }
}

@media (max-width: 520px) {
  .orbyte-hero-brand::before {
    width: 230px;
    height: 70px;
    filter: blur(14px);
  }

  .orbyte-hero-brand::after {
    width: 180px;
    height: 24px;
    filter: blur(8px);
  }
}


/* === V69 CHARCOAL RELIEF TEXTURE === */

/*
  Textura carvão/relevo aplicada como atmosfera do site.
  A imagem é usada como fundo subtil, não como elemento solto.
*/

html,
body {
  background-color: #050505 !important;
}

body {
  background:
    radial-gradient(circle at 72% 8%, rgba(201,166,90,.075), transparent 32%),
    radial-gradient(circle at 18% 34%, rgba(245,241,232,.034), transparent 28%),
    radial-gradient(circle at 78% 72%, rgba(201,166,90,.045), transparent 30%),
    linear-gradient(180deg, rgba(5,5,5,.82), rgba(7,7,6,.92)),
    url("../img/charcoal-relief-texture.webp") center top / 980px auto repeat !important;
  background-attachment: fixed, fixed, fixed, fixed, fixed !important;
}

/* Camada para dar profundidade sem matar a textura */
body::before {
  opacity: .26 !important;
  background:
    linear-gradient(rgba(245,241,232,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,241,232,.010) 1px, transparent 1px),
    radial-gradient(circle at 50% 10%, rgba(201,166,90,.055), transparent 32%) !important;
  background-size: 24px 24px, 24px 24px, 100% 100% !important;
}

body::after {
  opacity: .46 !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(201,166,90,.07), transparent 30%),
    linear-gradient(115deg, transparent 0 38%, rgba(245,241,232,.026) 48%, transparent 60%),
    linear-gradient(22deg, transparent 0 44%, rgba(201,166,90,.030) 50%, transparent 62%) !important;
}

/* Painéis mais carvão fosco, como se estivessem sobre o material */
.signature-strip > div,
.quote-panel,
.contact-card,
.message-oval,
.payment-box,
.portfolio-card,
.template-card,
.path-card,
.page-card,
.site-footer .footer-box,
.privacy-sidebar,
.privacy-warning,
.privacy-block,
.compliment-panel,
.compliment-form {
  background:
    radial-gradient(circle at 84% 14%, rgba(201,166,90,.075), transparent 34%),
    linear-gradient(135deg, rgba(14,14,12,.90), rgba(7,7,6,.78)) !important;
  backdrop-filter: blur(8px);
  border-color: rgba(201,166,90,.18) !important;
}

/* Header mais integrado com a textura */
header {
  background:
    linear-gradient(135deg, rgba(5,5,5,.94), rgba(12,11,10,.82)) !important;
  backdrop-filter: blur(10px);
}

/* Hero: a textura fica visível sem competir com o logo */
.hero {
  position: relative;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 72% 50%, rgba(201,166,90,.055), transparent 28%),
    linear-gradient(90deg, rgba(5,5,5,.10), rgba(5,5,5,.26));
  pointer-events: none;
  z-index: -1;
}

/* Em mobile evita fundo fixo, para ficar mais leve */
@media (max-width: 1040px) {
  body {
    background-attachment: scroll, scroll, scroll, scroll, scroll !important;
    background-size: auto, auto, auto, auto, 760px auto !important;
  }
}


/* === V70 TEXTURA MAIS NITIDA === */

/* Relevo carvão um pouco mais presente, sem perder o premium */
body {
  background:
    radial-gradient(circle at 72% 8%, rgba(201,166,90,.078), transparent 32%),
    radial-gradient(circle at 18% 34%, rgba(245,241,232,.040), transparent 28%),
    radial-gradient(circle at 78% 72%, rgba(201,166,90,.050), transparent 30%),
    linear-gradient(180deg, rgba(5,5,5,.70), rgba(7,7,6,.86)),
    url("../img/charcoal-relief-texture.webp") center top / 860px auto repeat !important;
}

/* Menos véu por cima da textura para ela respirar mais */
body::before {
  opacity: .20 !important;
}

body::after {
  opacity: .40 !important;
}

/* Nas zonas de texto/painéis, manter leitura forte */
.hero::after {
  background:
    radial-gradient(circle at 72% 50%, rgba(201,166,90,.052), transparent 28%),
    linear-gradient(90deg, rgba(5,5,5,.06), rgba(5,5,5,.20)) !important;
}

/* Painéis ligeiramente mais transparentes para deixar ver o material */
.signature-strip > div,
.quote-panel,
.contact-card,
.message-oval,
.payment-box,
.portfolio-card,
.template-card,
.path-card,
.page-card,
.site-footer .footer-box,
.privacy-sidebar,
.privacy-warning,
.privacy-block,
.compliment-panel,
.compliment-form {
  background:
    radial-gradient(circle at 84% 14%, rgba(201,166,90,.070), transparent 34%),
    linear-gradient(135deg, rgba(14,14,12,.84), rgba(7,7,6,.70)) !important;
}

@media (max-width: 1040px) {
  body {
    background-size: auto, auto, auto, auto, 700px auto !important;
  }
}


/* === V73 CONTACT SVG ICONS === */

.contact-svg {
  display: inline-grid !important;
  place-items: center !important;
  font-size: 0 !important;
}

.contact-svg svg {
  width: 24px;
  height: 24px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.instagram-svg {
  color: #E7C66F !important;
}

.whatsapp-svg {
  color: #45D483 !important;
}

.email-svg {
  color: var(--cyan) !important;
}

.contact-card:hover .contact-svg svg {
  transform: scale(1.06);
}

.contact-svg svg {
  transition: transform .22s ease, filter .22s ease;
}

.contact-card.instagram:hover .contact-svg svg {
  filter: drop-shadow(0 0 10px rgba(231,198,111,.28));
}

.contact-card.whatsapp:hover .contact-svg svg {
  filter: drop-shadow(0 0 10px rgba(69,212,131,.24));
}

.contact-card.email:hover .contact-svg svg {
  filter: drop-shadow(0 0 10px rgba(143,211,255,.24));
}


/* === V74 CONTACT ICON BRAND COLORS === */

/* Instagram com cores aproximadas do logo oficial */
.instagram-svg {
  color: #D62976 !important;
}

.instagram-svg svg,
.instagram-svg svg * {
  stroke: url(#instagramGradient) !important;
}

/* Email com azul/ciano em gradiente */
.email-svg {
  color: #8FD3FF !important;
}

.email-svg svg,
.email-svg svg * {
  stroke: url(#emailGradient) !important;
}

/* WhatsApp mantém verde */
.whatsapp-svg {
  color: #45D483 !important;
}

/* Glow hover ajustado às novas cores */
.contact-card.instagram:hover .contact-svg svg {
  filter:
    drop-shadow(0 0 8px rgba(214,41,118,.30))
    drop-shadow(0 0 12px rgba(150,47,191,.18));
}

.contact-card.email:hover .contact-svg svg {
  filter:
    drop-shadow(0 0 8px rgba(143,211,255,.30))
    drop-shadow(0 0 12px rgba(77,163,255,.18));
}


/* === V75 ICONES REAIS CONTACTO === */

/* Apenas os ícones foram ajustados para parecerem mais próximos dos logos reais */
.real-brand-icon svg {
  width: 23px;
  height: 23px;
}

.real-brand-icon .brand-bg {
  stroke: none !important;
}

.instagram-svg .brand-bg {
  fill: url(#instagramRealGradient) !important;
}

.instagram-svg .brand-line {
  fill: none !important;
  stroke: #FFFFFF !important;
  stroke-width: 1.65 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.instagram-svg .brand-dot {
  fill: #FFFFFF !important;
  stroke: none !important;
}

.whatsapp-svg .brand-bg {
  fill: #25D366 !important;
}

.whatsapp-svg .brand-line {
  fill: #FFFFFF !important;
  stroke: none !important;
}

.email-svg .brand-bg {
  fill: url(#emailRealGradient) !important;
}

.email-svg .brand-line {
  fill: none !important;
  stroke: #FFFFFF !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Neutralizar estilos anteriores que forçavam stroke/gradiente nos filhos */
.instagram-svg svg *,
.email-svg svg *,
.whatsapp-svg svg * {
  transition: transform .22s ease, filter .22s ease;
}

.contact-card:hover .real-brand-icon svg {
  transform: scale(1.07);
}


/* === V76 CONTACT CARDS BRAND COLORS === */

/*
  Cada card combina com o ícone correspondente:
  - Instagram: rosa / roxo / laranja
  - WhatsApp: verde
  - Email: azul / ciano
*/

/* Base premium comum */
.contact-card {
  box-shadow:
    0 26px 90px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

/* Instagram */
.contact-card.instagram {
  border-color: rgba(214,41,118,.28) !important;
  background:
    radial-gradient(circle at 15% 50%, rgba(214,41,118,.14), transparent 34%),
    radial-gradient(circle at 78% 18%, rgba(150,47,191,.10), transparent 30%),
    radial-gradient(circle at 90% 75%, rgba(250,126,30,.07), transparent 30%),
    linear-gradient(135deg, rgba(14,14,12,.88), rgba(7,7,6,.74)) !important;
}

.contact-card.instagram:hover {
  border-color: rgba(214,41,118,.45) !important;
  background:
    radial-gradient(circle at 15% 50%, rgba(214,41,118,.18), transparent 34%),
    radial-gradient(circle at 78% 18%, rgba(150,47,191,.14), transparent 30%),
    radial-gradient(circle at 90% 75%, rgba(250,126,30,.10), transparent 30%),
    linear-gradient(135deg, rgba(18,14,17,.92), rgba(8,7,8,.78)) !important;
  box-shadow:
    0 30px 100px rgba(0,0,0,.42),
    0 0 34px rgba(214,41,118,.14),
    0 0 44px rgba(150,47,191,.10),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* WhatsApp */
.contact-card.whatsapp {
  border-color: rgba(37,211,102,.28) !important;
  background:
    radial-gradient(circle at 16% 50%, rgba(37,211,102,.14), transparent 34%),
    radial-gradient(circle at 84% 16%, rgba(37,211,102,.08), transparent 30%),
    linear-gradient(135deg, rgba(11,18,13,.90), rgba(7,7,6,.74)) !important;
}

.contact-card.whatsapp:hover {
  border-color: rgba(37,211,102,.45) !important;
  background:
    radial-gradient(circle at 16% 50%, rgba(37,211,102,.18), transparent 34%),
    radial-gradient(circle at 84% 16%, rgba(37,211,102,.12), transparent 30%),
    linear-gradient(135deg, rgba(11,22,14,.94), rgba(7,8,7,.78)) !important;
  box-shadow:
    0 30px 100px rgba(0,0,0,.42),
    0 0 34px rgba(37,211,102,.13),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* Email */
.contact-card.email {
  border-color: rgba(56,189,248,.28) !important;
  background:
    radial-gradient(circle at 16% 50%, rgba(56,189,248,.14), transparent 34%),
    radial-gradient(circle at 84% 16%, rgba(37,99,235,.08), transparent 30%),
    linear-gradient(135deg, rgba(10,15,20,.90), rgba(7,7,6,.74)) !important;
}

.contact-card.email:hover {
  border-color: rgba(56,189,248,.45) !important;
  background:
    radial-gradient(circle at 16% 50%, rgba(56,189,248,.18), transparent 34%),
    radial-gradient(circle at 84% 16%, rgba(37,99,235,.12), transparent 30%),
    linear-gradient(135deg, rgba(10,17,24,.94), rgba(7,8,9,.78)) !important;
  box-shadow:
    0 30px 100px rgba(0,0,0,.42),
    0 0 34px rgba(56,189,248,.13),
    0 0 42px rgba(37,99,235,.08),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* Caixas dos ícones combinam com cada card */
.contact-card.instagram .contact-icon {
  border-color: rgba(214,41,118,.28) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(214,41,118,.13), transparent 62%),
    linear-gradient(135deg, rgba(18,14,17,.95), rgba(8,7,8,.88)) !important;
}

.contact-card.whatsapp .contact-icon {
  border-color: rgba(37,211,102,.28) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(37,211,102,.13), transparent 62%),
    linear-gradient(135deg, rgba(11,18,13,.95), rgba(7,7,6,.88)) !important;
}

.contact-card.email .contact-icon {
  border-color: rgba(56,189,248,.28) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(56,189,248,.13), transparent 62%),
    linear-gradient(135deg, rgba(10,15,20,.95), rgba(7,7,6,.88)) !important;
}

/* Setas também acompanham de forma subtil */
.contact-card.instagram .contact-arrow {
  color: #D62976 !important;
  border-color: rgba(214,41,118,.26) !important;
  background: rgba(214,41,118,.045) !important;
}

.contact-card.whatsapp .contact-arrow {
  color: #25D366 !important;
  border-color: rgba(37,211,102,.26) !important;
  background: rgba(37,211,102,.045) !important;
}

.contact-card.email .contact-arrow {
  color: #38BDF8 !important;
  border-color: rgba(56,189,248,.26) !important;
  background: rgba(56,189,248,.045) !important;
}


/* === V77 SMART EMOJI PERSONALITY === */

/*
  A smart-emoji passa a ser a mesma personagem no formulário e nos contactos.
  Segue o cursor, reage a links, adormece e fica chateada se for clicada muitas vezes.
*/

/* Containers com espaço para movimento controlado */
.quote-panel,
.message-oval {
  position: relative;
  overflow: hidden;
}

/* A diamond-core do formulário passa a poder mover-se dentro do painel */
#smartForm .diamond-core {
  --emoji-x: 0px;
  --emoji-y: 0px;
  --emoji-r: 0deg;
  transform:
    translate3d(var(--emoji-x), var(--emoji-y), 0)
    rotate(var(--emoji-r)) !important;
  transition:
    transform .48s cubic-bezier(.18,.9,.22,1),
    filter .28s ease !important;
  will-change: transform;
  cursor: pointer;
}

/* A mini-face dos contactos também ganha liberdade dentro do bloco */
.message-oval > div:first-child {
  position: relative;
  min-height: 230px;
}

#contactFace {
  --emoji-x: 0px;
  --emoji-y: 0px;
  --emoji-r: 0deg;
  --emoji-s: 1;
  position: relative;
  z-index: 3;
  transform:
    translate3d(var(--emoji-x), var(--emoji-y), 0)
    rotate(var(--emoji-r))
    scale(var(--emoji-s)) !important;
  transition:
    transform .48s cubic-bezier(.18,.9,.22,1),
    background .28s ease,
    box-shadow .28s ease,
    filter .28s ease !important;
  will-change: transform;
  cursor: pointer;
}

/* A face do formulário reage na própria cara */
#formFace {
  --emoji-s: 1;
  transform:
    rotate(var(--face-r, 0deg))
    scale(var(--emoji-s)) !important;
  transition:
    transform .34s cubic-bezier(.18,.9,.22,1),
    background .28s ease,
    box-shadow .28s ease,
    filter .28s ease !important;
  cursor: pointer;
}

/* Estados de personalidade */
.mini-face.emoji-happy,
#formFace.emoji-happy {
  --emoji-s: 1.08;
  background:
    radial-gradient(circle at 36% 30%, rgba(255,255,255,.32), transparent 22%),
    linear-gradient(135deg, #FFD35A, #E5B321 58%, #A8730A) !important;
  box-shadow:
    0 0 38px rgba(229,179,33,.36),
    inset -10px -13px 22px rgba(0,0,0,.16),
    inset 10px 10px 18px rgba(255,255,255,.14) !important;
}

.mini-face.emoji-angry,
#formFace.emoji-angry {
  --emoji-s: 1.04;
  background:
    radial-gradient(circle at 36% 30%, rgba(255,255,255,.22), transparent 22%),
    linear-gradient(135deg, #FF7A45, #D9412E 58%, #7A1714) !important;
  box-shadow:
    0 0 42px rgba(217,65,46,.34),
    inset -10px -13px 22px rgba(0,0,0,.20),
    inset 10px 10px 18px rgba(255,255,255,.10) !important;
}

.mini-face.emoji-sleepy,
#formFace.emoji-sleepy {
  --emoji-s: .96;
  filter: saturate(.72) brightness(.82);
  box-shadow:
    0 0 24px rgba(201,166,90,.14),
    inset -10px -13px 22px rgba(0,0,0,.22) !important;
}

.mini-face.emoji-curious,
#formFace.emoji-curious {
  --emoji-s: 1.035;
  box-shadow:
    0 0 34px rgba(143,211,255,.18),
    inset -10px -13px 22px rgba(0,0,0,.16),
    inset 10px 10px 18px rgba(255,255,255,.12) !important;
}

.mini-face.emoji-clicked,
#formFace.emoji-clicked {
  animation: emojiPopV77 .42s cubic-bezier(.18,.9,.22,1) !important;
}

/* Olhos */
.mini-face.emoji-sleepy .eye,
#formFace.emoji-sleepy .eye {
  height: 3px !important;
  border-radius: 999px !important;
  transform: translateY(4px) !important;
}

.mini-face.emoji-angry .eye,
#formFace.emoji-angry .eye {
  height: 7px !important;
  width: 12px !important;
  border-radius: 999px 999px 30% 30% !important;
}

.mini-face.emoji-happy .eye,
#formFace.emoji-happy .eye {
  height: 5px !important;
  border-radius: 999px !important;
  transform: translateY(2px) !important;
}

/* Boca */
.mini-face.emoji-happy .mouth,
#formFace.emoji-happy .mouth {
  width: 34px !important;
  height: 18px !important;
  border-bottom: 3px solid rgba(35,30,20,.78) !important;
  border-top: 0 !important;
  border-radius: 0 0 34px 34px !important;
  transform: translateY(-2px) !important;
}

.mini-face.emoji-angry .mouth,
#formFace.emoji-angry .mouth {
  width: 26px !important;
  height: 12px !important;
  border-top: 3px solid rgba(35,20,20,.78) !important;
  border-bottom: 0 !important;
  border-radius: 34px 34px 0 0 !important;
  transform: translateY(8px) !important;
}

.mini-face.emoji-sleepy .mouth,
#formFace.emoji-sleepy .mouth {
  width: 18px !important;
  height: 8px !important;
  border-bottom: 2px solid rgba(35,30,20,.55) !important;
  border-radius: 0 0 999px 999px !important;
  opacity: .7;
}

/* Zzz quando dorme */
#contactFace.emoji-sleepy::after,
#formFace.emoji-sleepy::after {
  content: "zZ";
  position: absolute;
  right: -18px;
  top: -18px;
  color: rgba(245,241,232,.72);
  font-size: 14px;
  letter-spacing: .08em;
  font-weight: 900;
  animation: emojiZzzV77 1.8s ease-in-out infinite;
  text-shadow: 0 0 12px rgba(245,241,232,.16);
}

/* Vibração de irritação */
.mini-face.emoji-angry,
#formFace.emoji-angry {
  animation: emojiAnnoyedV77 .28s ease-in-out 2;
}

/* Quando há link/botão por perto, a aura do container reage */
.message-oval.emoji-link-near,
.quote-panel.emoji-link-near {
  border-color: rgba(201,166,90,.34) !important;
  box-shadow:
    0 30px 100px rgba(0,0,0,.42),
    0 0 40px rgba(201,166,90,.10),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

@keyframes emojiPopV77 {
  0%, 100% { transform: scale(var(--emoji-s, 1)); }
  42% { transform: scale(1.16); }
}

@keyframes emojiAnnoyedV77 {
  0%, 100% { translate: 0 0; }
  25% { translate: -2px 0; }
  75% { translate: 2px 0; }
}

@keyframes emojiZzzV77 {
  0% { opacity: 0; transform: translate3d(0, 6px, 0) scale(.88); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(10px, -12px, 0) scale(1.12); }
}

/* Em mobile reduzimos movimento para não atrapalhar o toque */
@media (max-width: 1040px), (pointer: coarse) {
  #smartForm .diamond-core,
  #contactFace {
    --emoji-x: 0px !important;
    --emoji-y: 0px !important;
    --emoji-r: 0deg !important;
  }

  .message-oval > div:first-child {
    min-height: auto;
  }
}


/* === V78 CURSOR GLOBAL REFINEMENT === */

/* Cursor dourado global — funciona também nas páginas internas */
.cursor-aura,
.cursor-aura-soft {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 2147483000;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform, opacity;
  mix-blend-mode: screen;
}

.cursor-aura {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(229,200,115,.96) 0 18%, rgba(201,166,90,.42) 35%, transparent 72%);
  box-shadow:
    0 0 16px rgba(229,200,115,.55),
    0 0 34px rgba(201,166,90,.26);
  transition:
    opacity .22s ease,
    width .22s ease,
    height .22s ease,
    box-shadow .22s ease;
}

.cursor-aura-soft {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(201,166,90,.18) 0 12%, rgba(201,166,90,.08) 34%, transparent 70%);
  filter: blur(4px);
  transition:
    opacity .32s ease,
    width .28s ease,
    height .28s ease;
}

body.cursor-ready .cursor-aura,
body.cursor-ready .cursor-aura-soft {
  opacity: 1;
}

body.cursor-hovering .cursor-aura {
  width: 20px;
  height: 20px;
  box-shadow:
    0 0 18px rgba(229,200,115,.65),
    0 0 46px rgba(201,166,90,.36);
}

body.cursor-hovering .cursor-aura-soft {
  width: 122px;
  height: 122px;
  opacity: .95;
}

body.cursor-clicking .cursor-aura {
  width: 9px;
  height: 9px;
  box-shadow:
    0 0 22px rgba(229,200,115,.80),
    0 0 54px rgba(201,166,90,.42);
}

/* Em dispositivos touch/tablet/mobile não aparece */
@media (hover: none), (pointer: coarse), (max-width: 1040px) {
  .cursor-aura,
  .cursor-aura-soft {
    display: none !important;
  }
}


/* === V79 TEMPLATES BLOQUEADO === */

.locked-templates-hero {
  min-height: 470px;
}

.template-locked-section {
  padding-top: 68px;
}

.template-locked-card {
  max-width: 1040px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  background:
    radial-gradient(circle at 84% 18%, rgba(214,179,106,.12), transparent 34%),
    radial-gradient(circle at 16% 84%, rgba(143,211,255,.06), transparent 34%),
    linear-gradient(135deg, rgba(255,250,240,.055), rgba(255,250,240,.024)) !important;
}

.template-locked-card h2 {
  font-size: clamp(30px, 4vw, 52px);
  line-height: .96;
  letter-spacing: -.055em;
  margin-bottom: 14px;
}

.template-locked-card p {
  max-width: 760px;
}

@media (max-width: 900px) {
  .template-locked-card {
    grid-template-columns: 1fr;
  }

  .template-locked-card .btn {
    width: 100%;
  }
}


/* === V80 CONTACTO EMAIL INSTAGRAM SEM WHATSAPP === */

/* Contactos agora com 2 cards: Instagram sem conta oficial + Email principal */
.contact-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  max-width: 900px;
  margin-inline: auto;
}

.contact-card-disabled {
  cursor: default !important;
  pointer-events: none;
}

.contact-card-disabled .contact-arrow {
  opacity: .7 !important;
}

.contact-card-disabled strong {
  color: rgba(255,250,240,.82) !important;
}

/* Remover qualquer destaque específico antigo de WhatsApp */
.contact-card.whatsapp,
.contact-card.whatsapp:hover {
  display: none !important;
}

/* Email mais formal/principal */
.contact-card.email {
  border-color: rgba(56,189,248,.32) !important;
  background:
    radial-gradient(circle at 16% 50%, rgba(56,189,248,.14), transparent 34%),
    radial-gradient(circle at 84% 16%, rgba(37,99,235,.08), transparent 30%),
    linear-gradient(135deg, rgba(10,15,20,.90), rgba(7,7,6,.74)) !important;
}

.contact-card.email:hover {
  border-color: rgba(56,189,248,.48) !important;
  box-shadow:
    0 30px 100px rgba(0,0,0,.42),
    0 0 34px rgba(56,189,248,.13),
    0 0 42px rgba(37,99,235,.08),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* Instagram fica visível, mas sem fingir conta oficial */
.contact-card.instagram {
  opacity: .92;
}

.email-only-pill {
  pointer-events: none;
}

.email-only-pill input {
  pointer-events: none;
}

@media (max-width: 760px) {
  .contact-cards {
    grid-template-columns: 1fr !important;
    max-width: none;
  }
}


/* === V81 MIX PREMIUM REDESIGN === */

/*
  Mistura entre:
  - base funcional do site atual
  - atmosfera editorial/atelier do redesign
  - carvão mais profundo
  - textura viva
  - luz dourada mais cinematográfica
  - sem reativar templates nem WhatsApp
*/

:root {
  --bg: #0c0a07;
  --bg-deep: #070604;
  --bg-soft: #15110c;
  --bg-card: rgba(20, 17, 12, .72);
  --cream: #f5efe2;
  --beige: #c6bba7;
  --muted: #8a7d68;
  --gold: #d6b36a;
  --gold-2: #f4d58a;
  --gold-3: #9d7b39;
  --cyan: #8fd3ff;
  --line: rgba(214,179,106,.22);
}

/* Base mais parecida com parede carvão premium */
body {
  background:
    radial-gradient(ellipse at 50% 12%, rgba(214,179,106,.13), transparent 48%),
    radial-gradient(ellipse at 12% 78%, rgba(120,80,40,.12), transparent 60%),
    radial-gradient(ellipse at 90% 88%, rgba(80,55,30,.14), transparent 65%),
    linear-gradient(180deg, #090704 0%, #14100a 42%, #1a1410 72%, #0b0906 100%) !important;
  color: var(--cream) !important;
}

/* Sobrepor a textura antiga com mais relevo */
body::before {
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,28%), rgba(244,213,138,.14), transparent 23%),
    radial-gradient(circle at 86% 22%, rgba(143,211,255,.075), transparent 26%),
    linear-gradient(145deg,#070604 0%,#0d0b08 45%,#17120c 100%) !important;
}

.noise {
  opacity: .19 !important;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 18% 28%, rgba(255,255,255,.28) 0 1.2px, transparent 1.2px),
    radial-gradient(circle at 70% 62%, rgba(255,255,255,.16) 0 1px, transparent 1px),
    radial-gradient(circle at 42% 82%, rgba(214,179,106,.10) 0 1px, transparent 1px) !important;
  background-size: 42px 46px, 58px 54px, 92px 84px !important;
}

.grid {
  opacity: .10 !important;
  background-size: 140px 140px !important;
}

.waves {
  opacity: .28 !important;
  filter: blur(.2px);
  background:
    radial-gradient(ellipse at 50% 16%, transparent 0 40%, rgba(214,179,106,.13) 41%, transparent 43%),
    radial-gradient(ellipse at 74% 18%, transparent 0 50%, rgba(143,211,255,.08) 51%, transparent 53%),
    radial-gradient(ellipse at 36% 58%, transparent 0 48%, rgba(214,179,106,.085) 49%, transparent 51%) !important;
}

/* Header mais "masthead premium", sem perder o menu atual */
header {
  border-radius: 999px !important;
  border-color: rgba(214,179,106,.24) !important;
  background:
    linear-gradient(135deg, rgba(20,17,12,.82), rgba(7,6,4,.72)),
    radial-gradient(circle at 88% 10%, rgba(214,179,106,.10), transparent 42%) !important;
  box-shadow:
    0 22px 80px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(245,239,226,.055) !important;
}

.brand-logo-img {
  filter:
    drop-shadow(0 0 12px rgba(214,179,106,.18))
    drop-shadow(0 8px 22px rgba(0,0,0,.45));
}

.brand-wordmark {
  letter-spacing: .36em !important;
}

/* Hero com composição mais editorial */
.hero {
  min-height: 720px !important;
  grid-template-columns: 1.18fr .82fr !important;
  gap: 70px !important;
}

.hero .kicker,
.section-title .kicker,
.contacts-head .kicker,
.page-hero .kicker {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  letter-spacing: .28em !important;
}

.hero h1 {
  font-size: clamp(50px, 7.2vw, 108px) !important;
  line-height: .82 !important;
  letter-spacing: -.074em !important;
  max-width: 880px;
}

.hero h1 em,
h1 em,
h2 em {
  color: var(--gold-2) !important;
  font-style: italic !important;
  text-shadow:
    0 0 70px rgba(244,213,138,.34),
    0 0 26px rgba(214,179,106,.26) !important;
}

.hero-copy p {
  max-width: 620px !important;
  color: rgba(245,239,226,.74) !important;
  font-size: 18px !important;
}

.hero-stage {
  min-height: 530px !important;
}

/* Logo flutuante com mais presença cinematográfica */
.orbyte-hero-brand,
.logo-stage {
  position: relative;
}

.orbyte-hero-brand::before,
.logo-stage::before {
  content: "";
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 55%, rgba(244,213,138,.34), rgba(214,179,106,.12) 28%, rgba(214,179,106,.035) 48%, transparent 70%);
  filter: blur(24px);
  animation: v81GlowPulse 5.5s ease-in-out infinite;
}

.orbyte-hero-brand::after,
.logo-stage::after {
  content: "";
  position: absolute;
  width: min(560px, 80%);
  height: 120px;
  bottom: 48px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse, rgba(214,179,106,.16), rgba(214,179,106,.05) 44%, transparent 72%);
  filter: blur(16px);
  z-index: 0;
}

.hero-logo-img {
  position: relative;
  z-index: 2;
  filter:
    drop-shadow(0 36px 70px rgba(214,179,106,.32))
    drop-shadow(0 0 28px rgba(244,213,138,.20))
    drop-shadow(0 18px 26px rgba(0,0,0,.58)) !important;
  animation: v81SymbolFloat 7s ease-in-out infinite !important;
}

@keyframes v81SymbolFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(1.2deg); }
}

@keyframes v81GlowPulse {
  0%,100% { opacity: .82; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

/* Strip/cartões mais próximos do redesign editorial */
.signature-strip > div,
.step,
.portfolio-card,
.path-card,
.page-card,
.template-locked-card,
.contact-card,
.message-oval,
.payment-box,
.footer-box {
  background:
    radial-gradient(circle at 86% 18%, rgba(214,179,106,.105), transparent 36%),
    linear-gradient(135deg, rgba(245,239,226,.055), rgba(245,239,226,.022)) !important;
  border-color: rgba(214,179,106,.20) !important;
  box-shadow:
    0 26px 88px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(245,239,226,.045) !important;
}

.signature-strip > div:hover,
.step:hover,
.portfolio-card:hover,
.path-card:hover,
.contact-card:hover {
  border-color: rgba(214,179,106,.44) !important;
  box-shadow:
    0 34px 105px rgba(0,0,0,.40),
    0 0 42px rgba(214,179,106,.09),
    inset 0 1px 0 rgba(245,239,226,.055) !important;
}

/* Processo com toque mais "atelier" */
.process-four .step {
  min-height: 230px !important;
  padding: 24px 20px !important;
}

.process-four .step .num {
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--gold-2) !important;
}

.process-four .step h3 {
  font-size: 19px !important;
  letter-spacing: -.025em;
}

.process-four .step p {
  color: rgba(245,239,226,.66) !important;
}

/* Formulário: manter funcional, mas mais escuro/premium */
.quote-panel {
  background:
    radial-gradient(circle at 50% 38%, rgba(214,179,106,.16), transparent 44%),
    radial-gradient(circle at 84% 18%, rgba(143,211,255,.06), transparent 34%),
    linear-gradient(135deg, rgba(245,239,226,.065), rgba(245,239,226,.022)) !important;
  border-color: rgba(214,179,106,.32) !important;
}

.cut-input,
.form-side.right .cut-input,
.cut-input.tall {
  background:
    linear-gradient(135deg, rgba(20,17,12,.74), rgba(7,6,4,.72)) !important;
  border-color: rgba(214,179,106,.22) !important;
}

/* Contactos: 2 cards depois da remoção do WhatsApp */
.contact-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  max-width: 940px;
  margin-inline: auto;
}

/* Instagram inativo com boa presença visual */
.contact-card-disabled,
.contact-card.instagram.contact-card-disabled {
  opacity: .88;
  pointer-events: none;
}

/* Footer mais editorial */
.site-footer {
  border-top-color: rgba(214,179,106,.22) !important;
}

.footer-brand {
  color: var(--gold-2) !important;
  text-shadow:
    0 0 36px rgba(214,179,106,.22),
    0 0 70px rgba(214,179,106,.08) !important;
}

/* Cursor aura maior e mais parecido ao redesign */
.cursor-aura {
  width: 18px !important;
  height: 18px !important;
  background:
    radial-gradient(circle, rgba(244,213,138,.98) 0 14%, rgba(214,179,106,.42) 36%, transparent 72%) !important;
}

.cursor-aura-soft {
  width: 160px !important;
  height: 160px !important;
  background:
    radial-gradient(circle, rgba(244,213,138,.18) 0 12%, rgba(214,179,106,.08) 38%, transparent 72%) !important;
  filter: blur(8px) !important;
}

/* Mobile: preservar estabilidade */
@media (max-width: 1040px) {
  .hero {
    min-height: auto !important;
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  .hero h1 {
    font-size: clamp(44px, 13vw, 72px) !important;
  }

  .hero-stage {
    min-height: 360px !important;
    order: -1;
  }

  .contact-cards {
    grid-template-columns: 1fr !important;
  }

  .brand-wordmark {
    letter-spacing: .20em !important;
  }
}

@media (max-width: 520px) {
  header {
    border-radius: 26px !important;
  }

  .hero h1 {
    font-size: clamp(40px, 14vw, 62px) !important;
  }

  .hero-copy p {
    font-size: 16px !important;
  }
}


/* === V82 FUNDO CARVAO PREMIUM === */

/*
  Refinamento do v81:
  - fundo mais carvão verdadeiro
  - menos castanho/rust
  - textura mais nítida e premium
  - dourado mais controlado para não "lavar" o site
*/

:root {
  --bg: #090908;
  --bg-deep: #050505;
  --bg-soft: #11110f;
  --bg-card: rgba(15, 15, 14, .78);
  --cream: #f5efe2;
  --beige: #c9bda8;
  --muted: #8f8370;
  --gold: #d6b36a;
  --gold-2: #f4d58a;
  --gold-3: #9d7b39;
  --cyan: #8fd3ff;
  --line: rgba(214,179,106,.21);
}

/* Fundo principal: carvão, menos chocolate/castanho */
body {
  background:
    radial-gradient(ellipse 78% 52% at 50% 6%, rgba(214,179,106,.085), transparent 58%),
    radial-gradient(ellipse 56% 50% at 8% 72%, rgba(90,80,64,.08), transparent 64%),
    radial-gradient(ellipse 62% 58% at 94% 86%, rgba(62,56,48,.10), transparent 66%),
    linear-gradient(180deg, #050505 0%, #0b0b0a 32%, #11110f 58%, #080807 100%) !important;
}

/* Camada de relevo carvão */
body::before {
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,28%), rgba(214,179,106,.105), transparent 21%),
    radial-gradient(circle at 84% 18%, rgba(143,211,255,.045), transparent 28%),
    radial-gradient(circle at 16% 82%, rgba(245,239,226,.035), transparent 34%),
    linear-gradient(145deg, #050505 0%, #0a0a09 48%, #12110f 100%) !important;
}

/* Textura tipo carvão: mais presente, mas sem sujar leitura */
.noise {
  opacity: .27 !important;
  mix-blend-mode: overlay !important;
  background-image:
    radial-gradient(circle at 18% 28%, rgba(255,255,255,.26) 0 1px, transparent 1.15px),
    radial-gradient(circle at 70% 62%, rgba(255,255,255,.13) 0 1px, transparent 1.1px),
    radial-gradient(circle at 42% 82%, rgba(214,179,106,.075) 0 .9px, transparent 1px),
    linear-gradient(115deg, transparent 0 46%, rgba(255,255,255,.035) 47%, transparent 49%) !important;
  background-size: 38px 44px, 62px 58px, 110px 96px, 260px 260px !important;
  filter: contrast(1.18) brightness(.9);
}

/* Grelha mais subtil para o carvão respirar */
.grid {
  opacity: .075 !important;
  background:
    linear-gradient(90deg, transparent 0 49.9%, rgba(214,179,106,.10) 50%, transparent 50.1%),
    linear-gradient(0deg, transparent 0 49.9%, rgba(245,239,226,.028) 50%, transparent 50.1%) !important;
  background-size: 132px 132px !important;
  mask-image: linear-gradient(to bottom, black 0 70%, transparent 96%) !important;
}

/* Waves quase invisíveis, só profundidade */
.waves {
  opacity: .18 !important;
  filter: blur(.45px);
  background:
    radial-gradient(ellipse at 50% 14%, transparent 0 42%, rgba(214,179,106,.09) 43%, transparent 45%),
    radial-gradient(ellipse at 76% 20%, transparent 0 52%, rgba(143,211,255,.055) 53%, transparent 55%),
    radial-gradient(ellipse at 32% 58%, transparent 0 48%, rgba(245,239,226,.045) 49%, transparent 51%) !important;
}

/* Header no mesmo carvão, com menos brilho castanho */
header {
  background:
    linear-gradient(135deg, rgba(17,17,16,.84), rgba(5,5,5,.76)),
    radial-gradient(circle at 88% 10%, rgba(214,179,106,.065), transparent 44%) !important;
  border-color: rgba(214,179,106,.22) !important;
  box-shadow:
    0 24px 82px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(245,239,226,.045) !important;
}

/* Cards e caixas com carvão mais elegante */
.signature-strip > div,
.step,
.portfolio-card,
.path-card,
.page-card,
.template-locked-card,
.contact-card,
.message-oval,
.payment-box,
.footer-box,
.quote-panel {
  background:
    radial-gradient(circle at 86% 18%, rgba(214,179,106,.075), transparent 36%),
    radial-gradient(circle at 14% 86%, rgba(245,239,226,.022), transparent 38%),
    linear-gradient(135deg, rgba(22,22,20,.76), rgba(7,7,7,.66)) !important;
  border-color: rgba(214,179,106,.19) !important;
}

/* Hover mais premium, menos amarelo espalhado */
.signature-strip > div:hover,
.step:hover,
.portfolio-card:hover,
.path-card:hover,
.contact-card:hover {
  border-color: rgba(214,179,106,.38) !important;
  box-shadow:
    0 34px 105px rgba(0,0,0,.44),
    0 0 34px rgba(214,179,106,.075),
    inset 0 1px 0 rgba(245,239,226,.05) !important;
}

/* Hero: logo destaca mais sobre o carvão */
.orbyte-hero-brand::before,
.logo-stage::before {
  background:
    radial-gradient(circle at 50% 55%, rgba(244,213,138,.30), rgba(214,179,106,.10) 28%, rgba(214,179,106,.025) 48%, transparent 72%) !important;
  filter: blur(26px) !important;
}

.orbyte-hero-brand::after,
.logo-stage::after {
  background:
    radial-gradient(ellipse, rgba(214,179,106,.13), rgba(214,179,106,.038) 46%, transparent 76%) !important;
  filter: blur(18px) !important;
}

.hero-logo-img {
  filter:
    drop-shadow(0 38px 78px rgba(0,0,0,.72))
    drop-shadow(0 0 34px rgba(214,179,106,.24))
    drop-shadow(0 0 18px rgba(244,213,138,.13)) !important;
}

/* Títulos: brilho mais elegante */
.hero h1 em,
h1 em,
h2 em {
  color: var(--gold-2) !important;
  text-shadow:
    0 0 52px rgba(244,213,138,.28),
    0 0 21px rgba(214,179,106,.22) !important;
}

/* Campos do formulário mais carvão */
.cut-input,
.form-side.right .cut-input,
.cut-input.tall {
  background:
    linear-gradient(135deg, rgba(18,18,17,.82), rgba(6,6,6,.76)) !important;
  border-color: rgba(214,179,106,.20) !important;
}

.cut-input:focus-within {
  background:
    linear-gradient(135deg, rgba(24,23,20,.86), rgba(8,8,8,.78)) !important;
  border-color: rgba(214,179,106,.62) !important;
}

/* Email principal fica mais formal e limpo */
.contact-card.email {
  background:
    radial-gradient(circle at 16% 50%, rgba(56,189,248,.105), transparent 34%),
    linear-gradient(135deg, rgba(15,18,20,.84), rgba(6,6,6,.74)) !important;
}

/* Instagram inativo menos chamativo */
.contact-card.instagram {
  background:
    radial-gradient(circle at 84% 18%, rgba(214,179,106,.075), transparent 34%),
    linear-gradient(135deg, rgba(18,18,17,.72), rgba(7,7,7,.66)) !important;
}

/* Progress e cursor harmonizados */
.progress span {
  background: linear-gradient(90deg, rgba(214,179,106,.95), rgba(244,213,138,.85)) !important;
  box-shadow: 0 0 22px rgba(214,179,106,.32) !important;
}

.cursor-aura-soft {
  background:
    radial-gradient(circle, rgba(244,213,138,.145) 0 12%, rgba(214,179,106,.055) 38%, transparent 72%) !important;
}

/* Mais contraste nas páginas internas */
.page-hero {
  border-bottom-color: rgba(214,179,106,.16) !important;
}

/* Responsivo */
@media (max-width: 1040px) {
  body {
    background:
      radial-gradient(ellipse 90% 40% at 50% 4%, rgba(214,179,106,.08), transparent 62%),
      linear-gradient(180deg, #050505 0%, #0b0b0a 42%, #080807 100%) !important;
  }
}


/* === V83 PAREDE DE CARVAO NITIDA === */

/*
  Objetivo:
  O fundo deixa de ser apenas "escuro premium" e passa a ler-se melhor
  como parede de carvão: veios, placas, rachaduras e relevo mineral.
*/

body {
  background:
    radial-gradient(ellipse 70% 44% at 50% 5%, rgba(214,179,106,.070), transparent 58%),
    radial-gradient(ellipse 46% 40% at 14% 72%, rgba(120,115,100,.060), transparent 62%),
    radial-gradient(ellipse 56% 48% at 88% 78%, rgba(64,60,54,.110), transparent 64%),
    linear-gradient(180deg, #030303 0%, #090909 32%, #11110f 58%, #050505 100%) !important;
}

/* Camada principal: parede/placas de carvão mais identificável */
body::before {
  background:
    /* luz do cursor */
    radial-gradient(circle at var(--mx,50%) var(--my,28%), rgba(214,179,106,.115), transparent 20%),

    /* placas grandes irregulares */
    linear-gradient(118deg, transparent 0 8%, rgba(255,255,255,.030) 8.4%, transparent 10.5% 28%, rgba(0,0,0,.24) 29%, transparent 31% 100%),
    linear-gradient(63deg, transparent 0 16%, rgba(245,239,226,.026) 16.5%, transparent 19% 54%, rgba(0,0,0,.30) 55%, transparent 58% 100%),
    linear-gradient(151deg, transparent 0 35%, rgba(255,255,255,.022) 35.4%, transparent 38% 72%, rgba(0,0,0,.24) 73%, transparent 76% 100%),

    /* manchas minerais de carvão */
    radial-gradient(ellipse at 22% 18%, rgba(255,255,255,.055), transparent 18%),
    radial-gradient(ellipse at 76% 38%, rgba(255,255,255,.038), transparent 22%),
    radial-gradient(ellipse at 38% 78%, rgba(214,179,106,.035), transparent 26%),
    radial-gradient(ellipse at 88% 88%, rgba(255,255,255,.026), transparent 20%),

    linear-gradient(145deg, #030303 0%, #080808 43%, #11100e 100%) !important;
  background-size:
    auto,
    520px 520px,
    620px 620px,
    760px 760px,
    auto,
    auto,
    auto,
    auto,
    auto !important;
  filter: contrast(1.12) brightness(.92);
}

/* Textura granulada + micro rachaduras */
.noise {
  opacity: .36 !important;
  mix-blend-mode: overlay !important;
  background-image:
    /* grão fino */
    radial-gradient(circle at 18% 28%, rgba(255,255,255,.34) 0 .8px, transparent .95px),
    radial-gradient(circle at 70% 62%, rgba(255,255,255,.20) 0 .8px, transparent 1px),
    radial-gradient(circle at 42% 82%, rgba(0,0,0,.38) 0 1px, transparent 1.2px),

    /* riscos/veios */
    linear-gradient(104deg, transparent 0 42%, rgba(255,255,255,.060) 42.4%, transparent 43.2% 100%),
    linear-gradient(24deg, transparent 0 62%, rgba(0,0,0,.34) 62.3%, transparent 63.1% 100%),
    linear-gradient(154deg, transparent 0 30%, rgba(245,239,226,.040) 30.2%, transparent 31% 100%),

    /* zonas partidas */
    conic-gradient(from 18deg at 20% 30%, rgba(255,255,255,.035), transparent 18%, rgba(0,0,0,.20) 33%, transparent 55%, rgba(255,255,255,.025), transparent 80%),
    conic-gradient(from 210deg at 82% 72%, rgba(0,0,0,.26), transparent 20%, rgba(255,255,255,.030) 42%, transparent 60%, rgba(0,0,0,.20), transparent 88%) !important;
  background-size:
    31px 37px,
    47px 43px,
    59px 61px,
    390px 390px,
    480px 480px,
    610px 610px,
    720px 720px,
    860px 860px !important;
  filter: contrast(1.55) brightness(.90);
}

/* Nova camada visual usando .waves como relevo de parede, não ondas */
.waves {
  opacity: .32 !important;
  filter: contrast(1.35) brightness(.82);
  mix-blend-mode: soft-light;
  background:
    /* lascas grandes */
    linear-gradient(132deg, transparent 0 18%, rgba(255,255,255,.075) 18.2%, transparent 19.4% 46%, rgba(0,0,0,.50) 47.2%, transparent 49% 100%),
    linear-gradient(42deg, transparent 0 12%, rgba(0,0,0,.46) 12.4%, transparent 14% 68%, rgba(255,255,255,.055) 68.4%, transparent 70% 100%),
    linear-gradient(88deg, transparent 0 28%, rgba(245,239,226,.045) 28.3%, transparent 29.1% 75%, rgba(0,0,0,.35) 75.4%, transparent 77% 100%),

    /* sombras de blocos */
    radial-gradient(ellipse at 18% 22%, rgba(255,255,255,.065), transparent 14%),
    radial-gradient(ellipse at 64% 20%, rgba(0,0,0,.55), transparent 24%),
    radial-gradient(ellipse at 42% 68%, rgba(255,255,255,.045), transparent 18%),
    radial-gradient(ellipse at 88% 82%, rgba(0,0,0,.45), transparent 26%) !important;
  background-size:
    700px 700px,
    840px 840px,
    980px 980px,
    auto,
    auto,
    auto,
    auto !important;
  animation: coalWallShift 38s ease-in-out infinite alternate !important;
}

/* Grelha ainda mais discreta para não esconder a parede */
.grid {
  opacity: .045 !important;
  mix-blend-mode: screen;
}

/* Vinheta para a textura não competir nas bordas */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 0 46%, rgba(0,0,0,.34) 82%, rgba(0,0,0,.58) 100%),
    linear-gradient(180deg, rgba(0,0,0,.18), transparent 22%, transparent 68%, rgba(0,0,0,.34));
}

/* Mais contraste nos painéis para a textura ficar atrás */
header,
.signature-strip > div,
.step,
.portfolio-card,
.path-card,
.page-card,
.template-locked-card,
.contact-card,
.message-oval,
.payment-box,
.footer-box,
.quote-panel {
  background:
    radial-gradient(circle at 86% 18%, rgba(214,179,106,.065), transparent 36%),
    linear-gradient(135deg, rgba(18,18,17,.84), rgba(5,5,5,.72)) !important;
  backdrop-filter: blur(10px);
}

/* Hero: logo e texto ficam por cima da parede */
.hero h1,
.hero-copy p,
.kicker,
.hero-logo-img {
  position: relative;
  z-index: 2;
}

/* Halo do logo mais controlado para não esconder a textura */
.orbyte-hero-brand::before,
.logo-stage::before {
  background:
    radial-gradient(circle at 50% 55%, rgba(244,213,138,.24), rgba(214,179,106,.075) 30%, rgba(214,179,106,.018) 50%, transparent 74%) !important;
  filter: blur(24px) !important;
}

.orbyte-hero-brand::after,
.logo-stage::after {
  opacity: .82;
}

/* Reforço subtil de arestas nas letras douradas */
.hero h1 em,
h1 em,
h2 em {
  text-shadow:
    0 0 44px rgba(244,213,138,.25),
    0 0 18px rgba(214,179,106,.20),
    0 1px 0 rgba(255,255,255,.10) !important;
}

@keyframes coalWallShift {
  0% {
    transform: translate3d(0,0,0) scale(1);
  }
  45% {
    transform: translate3d(-10px, 8px, 0) scale(1.012);
  }
  100% {
    transform: translate3d(12px, -8px, 0) scale(1.006);
  }
}

/* Mobile: manter textura visível, mas menos pesada */
@media (max-width: 1040px) {
  .noise {
    opacity: .28 !important;
  }

  .waves {
    opacity: .24 !important;
  }

  body::before {
    background-size:
      auto,
      420px 420px,
      520px 520px,
      620px 620px,
      auto,
      auto,
      auto,
      auto,
      auto !important;
  }
}


/* === V84 MARMORE CARVAO DOURADO EM RELEVO === */

/*
  Direção:
  Fundo inspirado numa parede marmorizada/preto-carvão com veios cinza,
  branco fumado e pequenos rasgos dourados em relevo.
  A ideia é aproximar do visual da referência enviada, mas sem usar a imagem
  literalmente e sem tornar o site ilegível.
*/

:root {
  --bg: #070707;
  --bg-deep: #030303;
  --bg-soft: #11100e;
  --cream: #f5efe2;
  --beige: #c9bda8;
  --muted: #8f8370;
  --gold: #d6b36a;
  --gold-2: #f4d58a;
  --gold-3: #9d7b39;
  --cyan: #8fd3ff;
  --line: rgba(214,179,106,.21);
}

/* Base do fundo: carvão + mármore fumado */
body {
  background:
    radial-gradient(ellipse 80% 45% at 50% 5%, rgba(214,179,106,.065), transparent 60%),
    linear-gradient(180deg, #030303 0%, #090909 38%, #11100e 64%, #050505 100%) !important;
}

/* Camada principal marmorizada: manchas e ondas grandes */
body::before {
  background:
    /* luz do cursor */
    radial-gradient(circle at var(--mx,50%) var(--my,28%), rgba(214,179,106,.105), transparent 21%),

    /* mármore preto/cinza em ondas */
    radial-gradient(ellipse 62% 18% at 18% 12%, rgba(245,245,245,.18), transparent 58%),
    radial-gradient(ellipse 56% 22% at 78% 18%, rgba(210,210,205,.13), transparent 62%),
    radial-gradient(ellipse 70% 22% at 36% 42%, rgba(255,255,255,.115), transparent 60%),
    radial-gradient(ellipse 60% 18% at 76% 58%, rgba(230,230,225,.105), transparent 62%),
    radial-gradient(ellipse 72% 24% at 28% 84%, rgba(255,255,255,.10), transparent 64%),

    /* sombras profundas entre veios */
    radial-gradient(ellipse 60% 20% at 38% 18%, rgba(0,0,0,.62), transparent 64%),
    radial-gradient(ellipse 70% 24% at 64% 44%, rgba(0,0,0,.58), transparent 66%),
    radial-gradient(ellipse 66% 24% at 34% 66%, rgba(0,0,0,.55), transparent 68%),

    /* veios dourados grandes e raros */
    linear-gradient(116deg, transparent 0 18%, rgba(244,213,138,.00) 18%, rgba(244,213,138,.20) 18.25%, rgba(157,123,57,.18) 18.75%, transparent 19.2% 100%),
    linear-gradient(31deg, transparent 0 46%, rgba(214,179,106,.00) 46%, rgba(244,213,138,.18) 46.35%, rgba(157,123,57,.16) 46.95%, transparent 47.5% 100%),
    linear-gradient(147deg, transparent 0 73%, rgba(244,213,138,.00) 73%, rgba(244,213,138,.16) 73.25%, rgba(157,123,57,.12) 73.8%, transparent 74.25% 100%),

    linear-gradient(145deg, #030303 0%, #080808 43%, #12110f 100%) !important;

  background-size:
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    820px 820px,
    980px 980px,
    1180px 1180px,
    auto !important;

  filter: contrast(1.22) brightness(.88);
}

/* Camada de veios finos e textura de relevo */
.noise {
  opacity: .48 !important;
  mix-blend-mode: soft-light !important;
  background-image:
    /* grão mineral */
    radial-gradient(circle at 16% 24%, rgba(255,255,255,.36) 0 .8px, transparent 1px),
    radial-gradient(circle at 68% 60%, rgba(255,255,255,.20) 0 .8px, transparent 1px),
    radial-gradient(circle at 42% 82%, rgba(0,0,0,.45) 0 1px, transparent 1.2px),

    /* veios brancos/cinza */
    linear-gradient(105deg, transparent 0 32%, rgba(255,255,255,.145) 32.2%, rgba(255,255,255,.045) 33.1%, transparent 34.2% 100%),
    linear-gradient(23deg, transparent 0 58%, rgba(255,255,255,.12) 58.2%, rgba(255,255,255,.035) 59.1%, transparent 60% 100%),
    linear-gradient(152deg, transparent 0 24%, rgba(255,255,255,.10) 24.2%, rgba(255,255,255,.035) 24.9%, transparent 26% 100%),

    /* veios dourados finos com sensação de fissura preenchida */
    linear-gradient(74deg, transparent 0 18%, rgba(244,213,138,.28) 18.18%, rgba(157,123,57,.22) 18.55%, transparent 19% 100%),
    linear-gradient(131deg, transparent 0 68%, rgba(244,213,138,.22) 68.15%, rgba(157,123,57,.17) 68.55%, transparent 69.1% 100%),

    /* manchas rodopiadas */
    conic-gradient(from 22deg at 28% 32%, rgba(255,255,255,.12), transparent 16%, rgba(0,0,0,.40) 34%, transparent 52%, rgba(214,179,106,.10), transparent 78%),
    conic-gradient(from 210deg at 78% 70%, rgba(0,0,0,.42), transparent 22%, rgba(255,255,255,.11) 42%, transparent 61%, rgba(214,179,106,.09), transparent 86%) !important;

  background-size:
    28px 33px,
    44px 41px,
    63px 58px,
    520px 520px,
    640px 640px,
    760px 760px,
    900px 900px,
    1120px 1120px,
    760px 760px,
    980px 980px !important;

  filter: contrast(1.65) brightness(.92);
}

/* .waves vira camada de relevo fluido/mármore */
.waves {
  opacity: .42 !important;
  mix-blend-mode: overlay !important;
  filter: contrast(1.5) brightness(.86);
  background:
    /* faixas curvas claras */
    radial-gradient(ellipse 82% 18% at 16% 18%, transparent 0 36%, rgba(255,255,255,.16) 38%, transparent 43%),
    radial-gradient(ellipse 80% 20% at 78% 22%, transparent 0 42%, rgba(255,255,255,.13) 44%, transparent 49%),
    radial-gradient(ellipse 90% 22% at 44% 48%, transparent 0 44%, rgba(255,255,255,.15) 46%, transparent 51%),
    radial-gradient(ellipse 84% 22% at 24% 74%, transparent 0 42%, rgba(255,255,255,.12) 44%, transparent 49%),

    /* cortes dourados em relevo */
    linear-gradient(112deg, transparent 0 12%, rgba(244,213,138,.28) 12.1%, rgba(157,123,57,.22) 12.65%, transparent 13.2% 100%),
    linear-gradient(28deg, transparent 0 82%, rgba(244,213,138,.24) 82.2%, rgba(157,123,57,.20) 82.85%, transparent 83.4% 100%),

    /* sombras de profundidade */
    radial-gradient(ellipse at 64% 36%, rgba(0,0,0,.55), transparent 28%),
    radial-gradient(ellipse at 22% 64%, rgba(0,0,0,.50), transparent 32%),
    radial-gradient(ellipse at 90% 86%, rgba(0,0,0,.50), transparent 28%) !important;

  background-size:
    auto,
    auto,
    auto,
    auto,
    900px 900px,
    1200px 1200px,
    auto,
    auto,
    auto !important;

  animation: marbleReliefMove 46s ease-in-out infinite alternate !important;
}

/* Camada de brilho dourado nas fissuras: não muito forte */
.grid {
  opacity: .12 !important;
  mix-blend-mode: screen !important;
  background:
    linear-gradient(117deg, transparent 0 23%, rgba(244,213,138,.085) 23.10%, transparent 23.55% 100%),
    linear-gradient(34deg, transparent 0 62%, rgba(244,213,138,.075) 62.08%, transparent 62.50% 100%),
    linear-gradient(151deg, transparent 0 79%, rgba(255,255,255,.045) 79.08%, transparent 79.55% 100%) !important;
  background-size:
    940px 940px,
    1180px 1180px,
    780px 780px !important;
  mask-image: none !important;
}

/* Vinheta: segura a leitura e dá profundidade à parede */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 0 38%, rgba(0,0,0,.20) 68%, rgba(0,0,0,.62) 100%),
    linear-gradient(180deg, rgba(0,0,0,.24), transparent 20%, transparent 64%, rgba(0,0,0,.42));
}

/* Painéis com blur e carvão translúcido para parecerem sobre a parede */
header,
.signature-strip > div,
.step,
.portfolio-card,
.path-card,
.page-card,
.template-locked-card,
.contact-card,
.message-oval,
.payment-box,
.footer-box,
.quote-panel {
  background:
    radial-gradient(circle at 86% 18%, rgba(214,179,106,.070), transparent 36%),
    linear-gradient(135deg, rgba(14,14,14,.86), rgba(5,5,5,.74)) !important;
  border-color: rgba(214,179,106,.22) !important;
  backdrop-filter: blur(12px) saturate(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
}

/* Hero/logo: mantém premium sem tapar a parede */
.orbyte-hero-brand::before,
.logo-stage::before {
  background:
    radial-gradient(circle at 50% 55%, rgba(244,213,138,.22), rgba(214,179,106,.070) 30%, rgba(214,179,106,.018) 50%, transparent 74%) !important;
  filter: blur(24px) !important;
}

.hero-logo-img {
  filter:
    drop-shadow(0 38px 78px rgba(0,0,0,.76))
    drop-shadow(0 0 34px rgba(214,179,106,.22))
    drop-shadow(0 0 16px rgba(244,213,138,.10)) !important;
}

/* Dourados mais parecidos com metal incrustado */
.hero h1 em,
h1 em,
h2 em,
.footer-brand {
  color: #ecd28b !important;
  text-shadow:
    0 0 44px rgba(244,213,138,.24),
    0 0 17px rgba(214,179,106,.18),
    0 1px 0 rgba(255,255,255,.12) !important;
}

/* Cursor aura ligeiramente dourado, sem lavar o mármore */
.cursor-aura-soft {
  background:
    radial-gradient(circle, rgba(244,213,138,.13) 0 12%, rgba(214,179,106,.045) 38%, transparent 72%) !important;
}

@keyframes marbleReliefMove {
  0% {
    transform: translate3d(0,0,0) scale(1);
  }
  45% {
    transform: translate3d(-14px, 8px, 0) scale(1.012);
  }
  100% {
    transform: translate3d(12px, -10px, 0) scale(1.006);
  }
}

/* Mobile: reduzir intensidade para manter performance */
@media (max-width: 1040px) {
  .noise {
    opacity: .36 !important;
  }

  .waves {
    opacity: .32 !important;
  }

  .grid {
    opacity: .08 !important;
  }

  body::before {
    filter: contrast(1.08) brightness(.88);
  }
}

@media (max-width: 520px) {
  .noise {
    opacity: .30 !important;
  }

  .waves {
    opacity: .24 !important;
  }
}


/* === V86 FUNDO ORIGINAL COM RELEVO === */

/*
  Correção:
  Esta versão NÃO copia a imagem de referência.
  Usa uma textura original gerada para o projeto:
  - mármore/carvão preto e cinza
  - veios claros orgânicos
  - fissuras douradas
  - camada emboss/relevo criada a partir da textura
*/

body {
  background:
    linear-gradient(rgba(3,3,3,.48), rgba(3,3,3,.68)),
    url("../img/original-charcoal-marble-gold-bg.jpg") center top / cover fixed no-repeat !important;
  background-color: #050505 !important;
}

/* Relevo real da textura: emboss + luz do cursor */
body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -5 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,28%), rgba(244,213,138,.15), transparent 20%),
    url("../img/original-charcoal-marble-gold-relief.jpg") center top / cover fixed no-repeat !important;
  mix-blend-mode: overlay !important;
  opacity: .56 !important;
  filter: contrast(1.45) brightness(.86) saturate(.82) !important;
}

/* Luz dourada muito subtil nas fissuras */
.grid {
  opacity: .18 !important;
  mix-blend-mode: screen !important;
  background:
    radial-gradient(ellipse at 24% 20%, rgba(244,213,138,.11), transparent 22%),
    radial-gradient(ellipse at 74% 30%, rgba(244,213,138,.08), transparent 26%),
    radial-gradient(ellipse at 38% 78%, rgba(214,179,106,.075), transparent 30%) !important;
  background-size: auto !important;
  mask-image: none !important;
}

/* Grão leve, não para desenhar o fundo */
.noise {
  opacity: .14 !important;
  mix-blend-mode: soft-light !important;
  background-image:
    radial-gradient(circle at 18% 28%, rgba(255,255,255,.30) 0 .75px, transparent 1px),
    radial-gradient(circle at 70% 62%, rgba(255,255,255,.16) 0 .75px, transparent 1px),
    radial-gradient(circle at 42% 82%, rgba(0,0,0,.40) 0 1px, transparent 1.2px) !important;
  background-size: 28px 33px, 44px 41px, 63px 58px !important;
}

/* Profundidade extra, sem criar um padrão falso */
.waves {
  opacity: .12 !important;
  mix-blend-mode: multiply !important;
  background:
    radial-gradient(ellipse at 72% 22%, rgba(0,0,0,.38), transparent 32%),
    radial-gradient(ellipse at 18% 72%, rgba(0,0,0,.34), transparent 36%),
    radial-gradient(ellipse at 50% 88%, rgba(0,0,0,.32), transparent 34%) !important;
  filter: blur(.2px) !important;
}

/* Vinheta para leitura */
body::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse at center, transparent 0 36%, rgba(0,0,0,.22) 68%, rgba(0,0,0,.70) 100%),
    linear-gradient(180deg, rgba(0,0,0,.26), transparent 22%, transparent 62%, rgba(0,0,0,.48)) !important;
}

/* Painéis escuros translúcidos para deixar a textura aparecer */
header,
.signature-strip > div,
.step,
.portfolio-card,
.path-card,
.page-card,
.template-locked-card,
.contact-card,
.message-oval,
.payment-box,
.footer-box,
.quote-panel {
  background:
    radial-gradient(circle at 86% 18%, rgba(214,179,106,.065), transparent 36%),
    linear-gradient(135deg, rgba(8,8,8,.80), rgba(3,3,3,.70)) !important;
  border-color: rgba(214,179,106,.24) !important;
  backdrop-filter: blur(13px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(13px) saturate(1.08) !important;
}

/* O hero deixa perceber melhor o fundo */
.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 36px -80px 20px -80px !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse at 70% 50%, rgba(0,0,0,.28), transparent 58%),
    radial-gradient(ellipse at 22% 48%, rgba(0,0,0,.22), transparent 62%) !important;
}

/* Logo com luz controlada */
.orbyte-hero-brand::before,
.logo-stage::before {
  opacity: .68 !important;
  background:
    radial-gradient(circle at 50% 55%, rgba(244,213,138,.18), rgba(214,179,106,.052) 30%, rgba(214,179,106,.012) 50%, transparent 74%) !important;
}

.orbyte-hero-brand::after,
.logo-stage::after {
  opacity: .62 !important;
}

/* Texto com sombra para ficar legível no fundo marmorizado */
.hero h1,
.hero-copy p,
.kicker,
.page-hero h1,
.page-hero p {
  text-shadow: 0 2px 24px rgba(0,0,0,.66);
}

.hero h1 em,
h1 em,
h2 em,
.footer-brand {
  color: #ecd28b !important;
  text-shadow:
    0 0 42px rgba(244,213,138,.24),
    0 0 17px rgba(214,179,106,.18),
    0 1px 0 rgba(255,255,255,.11) !important;
}

@media (max-width: 1040px) {
  body {
    background:
      linear-gradient(rgba(3,3,3,.56), rgba(3,3,3,.76)),
      url("../img/original-charcoal-marble-gold-bg.jpg") center top / cover scroll no-repeat !important;
  }

  body::before {
    background:
      radial-gradient(circle at var(--mx,50%) var(--my,28%), rgba(244,213,138,.12), transparent 20%),
      url("../img/original-charcoal-marble-gold-relief.jpg") center top / cover scroll no-repeat !important;
    opacity: .46 !important;
  }

  .noise {
    opacity: .10 !important;
  }

  .grid {
    opacity: .14 !important;
  }
}


/* === V87 BACKGROUND CARVAO GOLD MIX === */

/*
  Background criado a partir da direção das 4 referências:
  - carvão/preto mineral com relevo
  - cinza grafite
  - rio dourado elegante
  - fios dourados a descer, controlados
  - compatível com a paleta Graphite Gold
*/

body {
  background:
    linear-gradient(rgba(2,2,2,.34), rgba(2,2,2,.58)),
    url("../img/v87-charcoal-gold-relief-background.jpg") center top / cover fixed no-repeat !important;
  background-color: #050505 !important;
}

body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -5 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,28%), rgba(244,213,138,.13), transparent 21%),
    url("../img/v87-charcoal-gold-relief-map.jpg") center top / cover fixed no-repeat !important;
  mix-blend-mode: overlay !important;
  opacity: .42 !important;
  filter: contrast(1.55) brightness(.78) saturate(.78) !important;
}

.grid {
  opacity: .16 !important;
  mix-blend-mode: screen !important;
  background:
    radial-gradient(ellipse at 34% 42%, rgba(244,213,138,.13), transparent 26%),
    radial-gradient(ellipse at 70% 49%, rgba(244,213,138,.10), transparent 24%),
    radial-gradient(ellipse at 88% 55%, rgba(214,179,106,.08), transparent 22%) !important;
  background-size: auto !important;
  mask-image: none !important;
}

.noise {
  opacity: .10 !important;
  mix-blend-mode: soft-light !important;
  background-image:
    radial-gradient(circle at 18% 28%, rgba(255,255,255,.30) 0 .75px, transparent 1px),
    radial-gradient(circle at 70% 62%, rgba(255,255,255,.14) 0 .75px, transparent 1px),
    radial-gradient(circle at 42% 82%, rgba(0,0,0,.40) 0 1px, transparent 1.2px) !important;
  background-size: 28px 33px, 44px 41px, 63px 58px !important;
}

.waves {
  opacity: .20 !important;
  mix-blend-mode: multiply !important;
  background:
    radial-gradient(ellipse at 74% 20%, rgba(0,0,0,.42), transparent 34%),
    radial-gradient(ellipse at 20% 72%, rgba(0,0,0,.36), transparent 38%),
    radial-gradient(ellipse at 50% 92%, rgba(0,0,0,.44), transparent 34%) !important;
  filter: blur(.2px) !important;
}

body::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse at center, transparent 0 38%, rgba(0,0,0,.18) 66%, rgba(0,0,0,.66) 100%),
    linear-gradient(180deg, rgba(0,0,0,.24), transparent 24%, transparent 62%, rgba(0,0,0,.48)) !important;
}

header,
.signature-strip > div,
.step,
.portfolio-card,
.path-card,
.page-card,
.template-locked-card,
.contact-card,
.message-oval,
.payment-box,
.footer-box,
.quote-panel {
  background:
    radial-gradient(circle at 86% 18%, rgba(214,179,106,.060), transparent 36%),
    linear-gradient(135deg, rgba(8,8,8,.82), rgba(3,3,3,.72)) !important;
  border-color: rgba(214,179,106,.25) !important;
  backdrop-filter: blur(14px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
}

.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 30px -80px 16px -80px !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse at 72% 48%, rgba(0,0,0,.22), transparent 58%),
    radial-gradient(ellipse at 20% 46%, rgba(0,0,0,.20), transparent 62%) !important;
}

.hero h1,
.hero-copy p,
.kicker,
.page-hero h1,
.page-hero p {
  text-shadow: 0 2px 24px rgba(0,0,0,.68);
}

.hero h1 em,
h1 em,
h2 em,
.footer-brand {
  color: #ecd28b !important;
  text-shadow:
    0 0 42px rgba(244,213,138,.23),
    0 0 17px rgba(214,179,106,.18),
    0 1px 0 rgba(255,255,255,.10) !important;
}

.orbyte-hero-brand::before,
.logo-stage::before {
  opacity: .58 !important;
  background:
    radial-gradient(circle at 50% 55%, rgba(244,213,138,.15), rgba(214,179,106,.045) 30%, rgba(214,179,106,.010) 50%, transparent 74%) !important;
}

.orbyte-hero-brand::after,
.logo-stage::after {
  opacity: .54 !important;
}

@media (max-width: 1040px) {
  body {
    background:
      linear-gradient(rgba(2,2,2,.46), rgba(2,2,2,.70)),
      url("../img/v87-charcoal-gold-relief-background.jpg") center top / cover scroll no-repeat !important;
  }

  body::before {
    background:
      radial-gradient(circle at var(--mx,50%) var(--my,28%), rgba(244,213,138,.10), transparent 21%),
      url("../img/v87-charcoal-gold-relief-map.jpg") center top / cover scroll no-repeat !important;
    opacity: .32 !important;
  }

  .grid {
    opacity: .10 !important;
  }

  .noise {
    opacity: .08 !important;
  }
}


/* === V88 ORIGINAL GOLD RIVER BACKGROUND === */

/*
  Fundo original recriado para o site, inspirado na referência escolhida:
  - parede carvão/grafite com relevo nítido
  - rio dourado principal
  - fios dourados a escorrer
  - alta nitidez e contraste
  - sem colar a imagem de referência
*/

body {
  background:
    linear-gradient(rgba(2,2,2,.26), rgba(2,2,2,.54)),
    url("../img/v88-original-charcoal-gold-river-bg.jpg") center top / cover fixed no-repeat !important;
  background-color: #050505 !important;
}

/* Camada de relevo real, criada a partir da textura original */
body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -5 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,28%), rgba(244,213,138,.12), transparent 20%),
    url("../img/v88-original-charcoal-gold-river-relief.jpg") center top / cover fixed no-repeat !important;
  mix-blend-mode: overlay !important;
  opacity: .38 !important;
  filter: contrast(1.45) brightness(.78) saturate(.74) !important;
}

/* Brilho dourado só nas zonas centrais do rio */
.grid {
  opacity: .12 !important;
  mix-blend-mode: screen !important;
  background:
    radial-gradient(ellipse at 33% 44%, rgba(244,213,138,.12), transparent 25%),
    radial-gradient(ellipse at 68% 48%, rgba(244,213,138,.09), transparent 24%),
    radial-gradient(ellipse at 82% 54%, rgba(214,179,106,.07), transparent 20%) !important;
  background-size: auto !important;
  mask-image: none !important;
}

/* Grão limpo */
.noise {
  opacity: .09 !important;
  mix-blend-mode: soft-light !important;
  background-image:
    radial-gradient(circle at 18% 28%, rgba(255,255,255,.28) 0 .7px, transparent 1px),
    radial-gradient(circle at 70% 62%, rgba(255,255,255,.12) 0 .7px, transparent 1px),
    radial-gradient(circle at 42% 82%, rgba(0,0,0,.42) 0 1px, transparent 1.2px) !important;
  background-size: 28px 33px, 44px 41px, 63px 58px !important;
}

/* Sombra para leitura */
.waves {
  opacity: .18 !important;
  mix-blend-mode: multiply !important;
  background:
    radial-gradient(ellipse at 78% 18%, rgba(0,0,0,.42), transparent 34%),
    radial-gradient(ellipse at 18% 72%, rgba(0,0,0,.34), transparent 38%),
    radial-gradient(ellipse at 50% 92%, rgba(0,0,0,.44), transparent 34%) !important;
}

body::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse at center, transparent 0 36%, rgba(0,0,0,.16) 66%, rgba(0,0,0,.64) 100%),
    linear-gradient(180deg, rgba(0,0,0,.22), transparent 24%, transparent 62%, rgba(0,0,0,.46)) !important;
}

/* Cards mais integrados com o novo fundo */
header,
.signature-strip > div,
.step,
.portfolio-card,
.path-card,
.page-card,
.template-locked-card,
.contact-card,
.message-oval,
.payment-box,
.footer-box,
.quote-panel {
  background:
    radial-gradient(circle at 86% 18%, rgba(214,179,106,.058), transparent 36%),
    linear-gradient(135deg, rgba(8,8,8,.84), rgba(3,3,3,.73)) !important;
  border-color: rgba(214,179,106,.26) !important;
  backdrop-filter: blur(14px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
}

/* Hero deixa o rio dourado respirar sem perder texto */
.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 22px -90px 12px -90px !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse at 70% 48%, rgba(0,0,0,.20), transparent 58%),
    radial-gradient(ellipse at 20% 46%, rgba(0,0,0,.22), transparent 62%) !important;
}

.hero h1,
.hero-copy p,
.kicker,
.page-hero h1,
.page-hero p {
  text-shadow: 0 2px 24px rgba(0,0,0,.70);
}

.hero h1 em,
h1 em,
h2 em,
.footer-brand {
  color: #ecd28b !important;
  text-shadow:
    0 0 42px rgba(244,213,138,.24),
    0 0 17px rgba(214,179,106,.18),
    0 1px 0 rgba(255,255,255,.10) !important;
}

/* Logo: menos halo para não competir com o rio dourado */
.orbyte-hero-brand::before,
.logo-stage::before {
  opacity: .50 !important;
  background:
    radial-gradient(circle at 50% 55%, rgba(244,213,138,.14), rgba(214,179,106,.040) 30%, rgba(214,179,106,.010) 50%, transparent 74%) !important;
}

.orbyte-hero-brand::after,
.logo-stage::after {
  opacity: .48 !important;
}

@media (max-width: 1040px) {
  body {
    background:
      linear-gradient(rgba(2,2,2,.42), rgba(2,2,2,.70)),
      url("../img/v88-original-charcoal-gold-river-bg.jpg") center top / cover scroll no-repeat !important;
  }

  body::before {
    background:
      radial-gradient(circle at var(--mx,50%) var(--my,28%), rgba(244,213,138,.10), transparent 20%),
      url("../img/v88-original-charcoal-gold-river-relief.jpg") center top / cover scroll no-repeat !important;
    opacity: .28 !important;
  }

  .grid {
    opacity: .08 !important;
  }

  .noise {
    opacity: .07 !important;
  }
}


/* === V89 BACKGROUND 4K PNG FINAL === */

/*
  Background final 4K PNG aplicado ao site.
  Usa a imagem:
  assets/img/background-carvao-gold-4k.webp
*/

body {
  background:
    linear-gradient(rgba(2,2,2,.24), rgba(2,2,2,.56)),
    url("../img/background-carvao-gold-4k.webp") center top / cover fixed no-repeat !important;
  background-color: #050505 !important;
}

/* Relevo visual + luz do cursor, sem esconder a imagem */
body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -5 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,28%), rgba(244,213,138,.12), transparent 21%),
    linear-gradient(135deg, rgba(255,255,255,.045), transparent 28%, rgba(0,0,0,.22) 72%, rgba(0,0,0,.34)) !important;
  mix-blend-mode: overlay !important;
  opacity: .48 !important;
  filter: contrast(1.15) brightness(.88) !important;
}

/* Mantém leitura do site sobre o fundo forte */
body::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse at center, transparent 0 38%, rgba(0,0,0,.16) 66%, rgba(0,0,0,.64) 100%),
    linear-gradient(180deg, rgba(0,0,0,.18), transparent 24%, transparent 62%, rgba(0,0,0,.46)) !important;
}

.noise {
  opacity: .08 !important;
}

.grid {
  opacity: .10 !important;
}

.waves {
  opacity: .16 !important;
  mix-blend-mode: multiply !important;
}

/* Cards continuam legíveis */
header,
.signature-strip > div,
.step,
.portfolio-card,
.path-card,
.page-card,
.template-locked-card,
.contact-card,
.message-oval,
.payment-box,
.footer-box,
.quote-panel {
  background:
    radial-gradient(circle at 86% 18%, rgba(214,179,106,.058), transparent 36%),
    linear-gradient(135deg, rgba(8,8,8,.84), rgba(3,3,3,.73)) !important;
  border-color: rgba(214,179,106,.26) !important;
  backdrop-filter: blur(14px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
}

@media (max-width: 1040px) {
  body {
    background:
      linear-gradient(rgba(2,2,2,.42), rgba(2,2,2,.70)),
      url("../img/background-carvao-gold-4k.webp") center top / cover scroll no-repeat !important;
  }

  body::before {
    opacity: .32 !important;
  }
}


/* === V91 NOVO SIMBOLO TWO BYTE === */

.brand-logo-img {
  width: 42px !important;
  height: 42px !important;
  object-fit: contain !important;
  filter:
    drop-shadow(0 0 12px rgba(214,179,106,.22))
    drop-shadow(0 8px 20px rgba(0,0,0,.52)) !important;
}

.brand-wordmark {
  letter-spacing: .28em !important;
}

.hero-logo-img,
.orbyte-hero-brand img,
.logo-stage img {
  width: min(540px, 45vw) !important;
  max-width: 580px !important;
  height: auto !important;
  object-fit: contain !important;
  filter:
    drop-shadow(0 42px 80px rgba(0,0,0,.72))
    drop-shadow(0 0 36px rgba(214,179,106,.26))
    drop-shadow(0 0 16px rgba(244,213,138,.12)) !important;
}

.orbyte-hero-brand::before,
.logo-stage::before {
  opacity: .64 !important;
  background:
    radial-gradient(circle at 50% 55%, rgba(244,213,138,.18), rgba(214,179,106,.052) 30%, rgba(214,179,106,.012) 50%, transparent 74%) !important;
}

.orbyte-hero-brand::after,
.logo-stage::after {
  opacity: .58 !important;
}

@media (max-width: 1040px) {
  .hero-logo-img,
  .orbyte-hero-brand img,
  .logo-stage img {
    width: min(420px, 82vw) !important;
  }

  .brand-logo-img {
    width: 36px !important;
    height: 36px !important;
  }
}


/* === V92 TWO BYTE BRANDING TOTAL === */

/* Header: 2B maior do que STUDIO */
.brand,
.orbyte-brand {
  gap: 13px !important;
  align-items: center !important;
}

.brand-lockup {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  line-height: 1;
  white-space: nowrap;
}

.brand-main {
  font-size: clamp(24px, 2vw, 34px);
  font-weight: 950;
  letter-spacing: .04em;
  color: var(--cream, #f5efe2);
  text-shadow:
    0 0 20px rgba(214,179,106,.16),
    0 2px 12px rgba(0,0,0,.55);
}

.brand-sub {
  font-size: clamp(10px, .85vw, 13px);
  font-weight: 850;
  letter-spacing: .34em;
  color: rgba(245,239,226,.88);
  transform: translateY(-2px);
}

/* Esconde qualquer wordmark antiga se sobrar */
.brand-wordmark {
  display: none !important;
}

.brand-logo-img {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
  filter:
    drop-shadow(0 0 12px rgba(214,179,106,.25))
    drop-shadow(0 8px 22px rgba(0,0,0,.55)) !important;
}

/* Símbolo flutuante do hero */
.hero-logo-img,
.orbyte-hero-brand img,
.logo-stage img {
  width: min(540px, 45vw) !important;
  max-width: 580px !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Ajuste de header para acomodar o novo lockup */
header .brand {
  min-width: fit-content;
}

@media (max-width: 760px) {
  .brand-lockup {
    gap: 7px;
  }

  .brand-main {
    font-size: 24px;
  }

  .brand-sub {
    font-size: 10px;
    letter-spacing: .22em;
  }

  .brand-logo-img {
    width: 40px !important;
    height: 40px !important;
  }
}


/* === V93 HERO SYMBOL MENOR COM AURA === */

/*
  Ajuste pedido:
  - símbolo flutuante um pouco mais pequeno
  - aura dourada/amarela discreta no hero
  - sem mexer no resto da estrutura
*/

.hero-logo-img,
.orbyte-hero-brand img,
.logo-stage img {
  width: min(420px, 34vw) !important;
  max-width: 440px !important;
  height: auto !important;
  object-fit: contain !important;
  filter:
    drop-shadow(0 34px 68px rgba(0,0,0,.70))
    drop-shadow(0 0 24px rgba(214,179,106,.18))
    drop-shadow(0 0 10px rgba(244,213,138,.10)) !important;
}

/* Aura discreta tipo cursor, mas mais elegante e parada */
.orbyte-hero-brand,
.logo-stage,
.hero-stage {
  position: relative;
}

.orbyte-hero-brand::before,
.logo-stage::before,
.hero-stage::before {
  content: "";
  position: absolute;
  width: min(520px, 42vw);
  height: min(520px, 42vw);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle,
      rgba(244,213,138,.145) 0%,
      rgba(214,179,106,.070) 28%,
      rgba(214,179,106,.025) 48%,
      transparent 72%);
  filter: blur(18px);
  opacity: .72;
  pointer-events: none;
  z-index: 0;
}

/* Garante que o símbolo fica por cima da aura */
.orbyte-hero-brand img,
.logo-stage img,
.hero-stage img,
.hero-logo-img {
  position: relative;
  z-index: 2;
}

/* Sombra inferior mais pequena para acompanhar o novo tamanho */
.orbyte-hero-brand::after,
.logo-stage::after {
  width: min(420px, 34vw) !important;
  height: 92px !important;
  bottom: 34px !important;
  opacity: .48 !important;
  background:
    radial-gradient(ellipse,
      rgba(214,179,106,.115),
      rgba(214,179,106,.032) 46%,
      transparent 76%) !important;
  filter: blur(16px) !important;
}

/* Se o layout do hero tiver stage à direita, puxa ligeiramente para dentro */
.hero-stage,
.orbyte-hero-brand,
.logo-stage {
  transform: scale(.94);
  transform-origin: center;
}

/* Mobile/tablet */
@media (max-width: 1040px) {
  .hero-logo-img,
  .orbyte-hero-brand img,
  .logo-stage img {
    width: min(330px, 72vw) !important;
    max-width: 360px !important;
  }

  .orbyte-hero-brand::before,
  .logo-stage::before,
  .hero-stage::before {
    width: min(390px, 82vw);
    height: min(390px, 82vw);
    opacity: .58;
  }

  .hero-stage,
  .orbyte-hero-brand,
  .logo-stage {
    transform: scale(.92);
  }
}


/* === V94 AURA 50 POR CENTO === */

/*
  Teste:
  - mantém o símbolo do v93
  - reduz a aura dourada para cerca de 50%
  - objetivo: mais contraste no logo gigante
*/

.orbyte-hero-brand::before,
.logo-stage::before,
.hero-stage::before {
  background:
    radial-gradient(circle,
      rgba(244,213,138,.070) 0%,
      rgba(214,179,106,.035) 28%,
      rgba(214,179,106,.012) 48%,
      transparent 72%) !important;
  opacity: .50 !important;
  filter: blur(16px) !important;
}

.hero-logo-img,
.orbyte-hero-brand img,
.logo-stage img {
  filter:
    drop-shadow(0 34px 68px rgba(0,0,0,.72))
    drop-shadow(0 0 18px rgba(214,179,106,.13))
    drop-shadow(0 0 7px rgba(244,213,138,.07)) !important;
}

@media (max-width: 1040px) {
  .orbyte-hero-brand::before,
  .logo-stage::before,
  .hero-stage::before {
    opacity: .42 !important;
  }
}


/* === V95 SEM AURA SOMBRA REALISTA === */

/*
  Ajuste:
  - remove a aura circular grande
  - mantém só brilho mínimo nas arestas
  - adiciona sombra elíptica realista por baixo do símbolo
  - objetivo: símbolo mais realista e menos “efeito mágico”
*/

/* Remove a aura circular */
.orbyte-hero-brand::before,
.logo-stage::before,
.hero-stage::before {
  opacity: 0 !important;
  display: none !important;
}

/* Símbolo com contraste e glow mínimo nas arestas */
.hero-logo-img,
.orbyte-hero-brand img,
.logo-stage img {
  filter:
    drop-shadow(0 42px 78px rgba(0,0,0,.78))
    drop-shadow(0 18px 34px rgba(0,0,0,.54))
    drop-shadow(0 0 10px rgba(214,179,106,.10))
    drop-shadow(0 0 4px rgba(244,213,138,.06)) !important;
}

/* Sombra de objeto flutuante/pousado, mais realista */
.orbyte-hero-brand::after,
.logo-stage::after {
  content: "" !important;
  position: absolute !important;
  width: min(360px, 30vw) !important;
  height: 72px !important;
  left: 50% !important;
  bottom: 28px !important;
  transform: translateX(-50%) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(ellipse,
      rgba(0,0,0,.58) 0%,
      rgba(0,0,0,.38) 34%,
      rgba(214,179,106,.055) 52%,
      transparent 78%) !important;
  filter: blur(18px) !important;
  opacity: .86 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Pequeno reflexo dourado apenas por baixo, sem aura global */
.hero-stage::after {
  content: "" !important;
  position: absolute !important;
  width: min(330px, 28vw) !important;
  height: 60px !important;
  left: 50% !important;
  top: 63% !important;
  transform: translateX(-50%) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(ellipse,
      rgba(214,179,106,.070) 0%,
      rgba(214,179,106,.025) 45%,
      transparent 75%) !important;
  filter: blur(14px) !important;
  opacity: .62 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 1040px) {
  .orbyte-hero-brand::after,
  .logo-stage::after {
    width: min(280px, 62vw) !important;
    height: 58px !important;
    bottom: 22px !important;
    opacity: .74 !important;
  }

  .hero-stage::after {
    width: min(260px, 60vw) !important;
    height: 48px !important;
    opacity: .48 !important;
  }
}


/* === V98 PORTFOLIO VANILLA + INFORFIX === */

/* Mantém Vanilla no primeiro bloco e coloca InforFix no segundo */
.case-inforfix {
  position: relative;
  overflow: hidden;
}

.case-inforfix .kicker {
  color: #8fd3ff !important;
}

.case-inforfix .portfolio-media {
  border-color: rgba(143,211,255,.20) !important;
  background:
    radial-gradient(circle at 78% 24%, rgba(143,211,255,.12), transparent 32%),
    linear-gradient(135deg, rgba(8,11,14,.84), rgba(3,3,3,.72)) !important;
}

.case-inforfix .inforfix-screen {
  position: relative;
  min-height: 310px;
  padding: 28px;
  display: block;
  background:
    radial-gradient(circle at 82% 26%, rgba(143,211,255,.13), transparent 34%),
    radial-gradient(circle at 26% 84%, rgba(214,179,106,.07), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,.040), rgba(255,255,255,.012));
}

.inforfix-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}

.inforfix-topline strong {
  color: #f5efe2;
  font-size: 17px;
  letter-spacing: .22em;
  font-weight: 950;
}

.inforfix-topline small {
  color: rgba(143,211,255,.82);
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: 10px;
  white-space: nowrap;
}

.inforfix-hero {
  min-height: 112px;
  border-radius: 22px;
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 82px;
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(143,211,255,.16);
  background:
    radial-gradient(circle at 86% 50%, rgba(143,211,255,.16), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
}

.inforfix-hero b {
  display: block;
  color: #f5efe2;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.04;
  letter-spacing: -.04em;
  margin-bottom: 8px;
}

.inforfix-hero em {
  color: rgba(201,189,168,.86);
  font-style: normal;
  font-size: 13px;
  line-height: 1.35;
}

.inforfix-device {
  width: 58px;
  height: 88px;
  justify-self: end;
  border-radius: 15px;
  border: 2px solid rgba(143,211,255,.58);
  background:
    linear-gradient(160deg, rgba(143,211,255,.22), rgba(214,179,106,.08)),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.46));
  box-shadow:
    0 0 24px rgba(143,211,255,.16),
    inset 0 1px 0 rgba(255,255,255,.12);
  position: relative;
}

.inforfix-device::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 3px;
  border-radius: 999px;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  background: rgba(245,239,226,.40);
}

.inforfix-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
  margin-top: 15px;
}

.inforfix-grid div {
  min-height: 78px;
  border-radius: 17px;
  border: 1px solid rgba(214,179,106,.13);
  background:
    radial-gradient(circle at 50% 18%, rgba(214,179,106,.10), transparent 38%),
    rgba(255,255,255,.028);
  padding: 13px;
}

.inforfix-grid i {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 11px;
  margin-bottom: 8px;
  background:
    linear-gradient(135deg, rgba(143,211,255,.45), rgba(214,179,106,.28));
  box-shadow: 0 0 20px rgba(143,211,255,.08);
}

.inforfix-grid p {
  margin: 0;
  color: rgba(245,239,226,.82);
  font-size: 11px;
  line-height: 1.25;
}

.case-inforfix .play-orb {
  background: linear-gradient(135deg, #8fd3ff, #d6b36a) !important;
  color: #071014 !important;
}

@media (max-width: 860px) {
  .inforfix-hero {
    grid-template-columns: 1fr;
  }

  .inforfix-device {
    justify-self: start;
  }

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


/* === V99 VANILLA CARD PREMIUM === */

/* Primeiro bloco do portefólio — Vanilla Cakes */
.case-vanilla {
  position: relative;
  overflow: hidden;
}

.case-vanilla .kicker {
  color: #f4d58a !important;
}

.case-vanilla .portfolio-media {
  border-color: rgba(244,213,138,.22) !important;
  background:
    radial-gradient(circle at 78% 24%, rgba(244,213,138,.14), transparent 32%),
    radial-gradient(circle at 28% 80%, rgba(245,239,226,.055), transparent 36%),
    linear-gradient(135deg, rgba(14,10,6,.86), rgba(3,3,3,.72)) !important;
}

.case-vanilla .vanilla-screen {
  position: relative;
  min-height: 310px;
  padding: 28px;
  display: block;
  background:
    radial-gradient(circle at 82% 26%, rgba(244,213,138,.13), transparent 34%),
    radial-gradient(circle at 26% 84%, rgba(245,239,226,.06), transparent 38%),
    linear-gradient(135deg, rgba(255,250,240,.046), rgba(255,255,255,.012));
}

.vanilla-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}

.vanilla-topline strong {
  color: #f5efe2;
  font-size: 17px;
  letter-spacing: .22em;
  font-weight: 950;
}

.vanilla-topline small {
  color: rgba(244,213,138,.82);
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: 10px;
  white-space: nowrap;
}

.vanilla-hero-mini {
  min-height: 112px;
  border-radius: 22px;
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 96px;
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(244,213,138,.18);
  background:
    radial-gradient(circle at 86% 50%, rgba(244,213,138,.17), transparent 36%),
    linear-gradient(135deg, rgba(255,250,240,.060), rgba(255,255,255,.018));
}

.vanilla-hero-mini b {
  display: block;
  color: #f5efe2;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.04;
  letter-spacing: -.04em;
  margin-bottom: 8px;
}

.vanilla-hero-mini em {
  color: rgba(201,189,168,.88);
  font-style: normal;
  font-size: 13px;
  line-height: 1.35;
}

.vanilla-cake-icon {
  width: 84px;
  height: 84px;
  justify-self: end;
  position: relative;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 25%, rgba(244,213,138,.22), transparent 40%),
    linear-gradient(160deg, rgba(244,213,138,.13), rgba(0,0,0,.42));
  border: 1px solid rgba(244,213,138,.32);
  box-shadow:
    0 0 28px rgba(244,213,138,.13),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.vanilla-cake-icon i {
  position: absolute;
  left: 18px;
  right: 18px;
  height: 13px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f5efe2, #d6b36a);
  box-shadow: 0 0 16px rgba(214,179,106,.14);
}

.vanilla-cake-icon i:nth-child(1) {
  top: 25px;
  width: 48px;
}

.vanilla-cake-icon i:nth-child(2) {
  top: 42px;
  left: 14px;
  right: 14px;
}

.vanilla-cake-icon i:nth-child(3) {
  top: 59px;
  left: 10px;
  right: 10px;
}

.vanilla-cake-icon::before {
  content: "";
  position: absolute;
  width: 7px;
  height: 16px;
  border-radius: 999px;
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
  background: #f4d58a;
  box-shadow: 0 0 16px rgba(244,213,138,.45);
}

.vanilla-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
  margin-top: 15px;
}

.vanilla-grid div {
  min-height: 78px;
  border-radius: 17px;
  border: 1px solid rgba(214,179,106,.14);
  background:
    radial-gradient(circle at 50% 18%, rgba(244,213,138,.11), transparent 38%),
    rgba(255,255,255,.028);
  padding: 13px;
}

.vanilla-grid i {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 11px;
  margin-bottom: 8px;
  background:
    linear-gradient(135deg, rgba(245,239,226,.50), rgba(214,179,106,.34));
  box-shadow: 0 0 20px rgba(244,213,138,.09);
}

.vanilla-grid p {
  margin: 0;
  color: rgba(245,239,226,.84);
  font-size: 11px;
  line-height: 1.25;
}

.case-vanilla .play-orb {
  background: linear-gradient(135deg, #f5efe2, #d6b36a) !important;
  color: #120d06 !important;
}

@media (max-width: 860px) {
  .vanilla-hero-mini {
    grid-template-columns: 1fr;
  }

  .vanilla-cake-icon {
    justify-self: start;
  }

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




/* === V101 CORRECAO ELOGIOS TRANSPARENCIA === */

/*
  Correção:
  - remove o retângulo extra atrás do formulário
  - deixa o card "Enviar Elogio" com o mesmo vidro/transparência do card de reclamação
  - deixa o formulário com vidro escuro transparente, sem fundo gigante adicional
  - estilos mais específicos para não apanhar a secção inteira
*/

/* Remove fundos extra que possam ter ficado na área do formulário */
.feedback-section,
.praise-section,
.compliments-section,
.review-section,
#elogio,
#formulario-elogio {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Se houver wrapper da secção com retângulo grande, limpa */
.feedback-wrapper,
.praise-wrapper,
.compliments-wrapper,
.review-wrapper,
.feedback-area,
.praise-area,
.compliments-area,
.review-area,
.form-section,
.form-area {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Cartão Enviar Elogio — igual ao estilo do Livro de Reclamações */
.praise-card,
.compliments-card,
.review-card,
.feedback-card,
.feedback-actions .card:nth-child(2),
.complaint-grid .card:nth-child(2),
.legal-grid .card:nth-child(2) {
  background:
    radial-gradient(circle at 84% 22%, rgba(244,213,138,.125), transparent 34%),
    radial-gradient(circle at 20% 86%, rgba(214,179,106,.060), transparent 40%),
    linear-gradient(135deg, rgba(18,14,8,.66), rgba(5,5,5,.58)) !important;
  border: 1px solid rgba(214,179,106,.26) !important;
  box-shadow:
    0 34px 110px rgba(0,0,0,.42),
    0 0 38px rgba(214,179,106,.040),
    inset 0 1px 0 rgba(255,255,255,.055) !important;
  backdrop-filter: blur(16px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
}

/* Remove o azul do card elogio, mas sem o deixar opaco */
.praise-card .btn,
.compliments-card .btn,
.review-card .btn,
.feedback-card .btn,
.feedback-actions .card:nth-child(2) .btn,
.complaint-grid .card:nth-child(2) .btn,
.legal-grid .card:nth-child(2) .btn {
  border-color: rgba(214,179,106,.34) !important;
  color: #161006 !important;
  background: linear-gradient(135deg, #f4d58a, #d6b36a 58%, #9d7b39) !important;
  box-shadow:
    0 18px 46px rgba(214,179,106,.16),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}

/* Ícone do elogio em dourado discreto */
.praise-card .icon,
.compliments-card .icon,
.review-card .icon,
.feedback-card .icon,
.feedback-actions .card:nth-child(2) .icon,
.complaint-grid .card:nth-child(2) .icon,
.legal-grid .card:nth-child(2) .icon {
  color: #f4d58a !important;
  border-color: rgba(214,179,106,.30) !important;
  background:
    radial-gradient(circle at 50% 35%, rgba(244,213,138,.14), transparent 54%),
    linear-gradient(135deg, rgba(214,179,106,.08), rgba(6,6,5,.42)) !important;
  box-shadow:
    0 0 22px rgba(214,179,106,.08),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
}

/* Formulário — apenas o cartão interior, transparente/vidro */
.praise-form,
.compliment-form,
.review-form,
.feedback-form,
.form-card,
.form-panel,
.form-box,
.quote-panel {
  background:
    radial-gradient(circle at 86% 18%, rgba(244,213,138,.085), transparent 34%),
    radial-gradient(circle at 18% 84%, rgba(214,179,106,.045), transparent 40%),
    linear-gradient(135deg, rgba(12,10,7,.64), rgba(3,3,3,.56)) !important;
  border: 1px solid rgba(214,179,106,.24) !important;
  box-shadow:
    0 32px 95px rgba(0,0,0,.40),
    0 0 34px rgba(214,179,106,.035),
    inset 0 1px 0 rgba(255,255,255,.050) !important;
  backdrop-filter: blur(15px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(15px) saturate(1.05) !important;
}

/* Evita que a secção que contém o formulário vire cartão gigante */
section:has(.praise-form),
section:has(.compliment-form),
section:has(.review-form),
section:has(.feedback-form),
section:has(.form-card),
section:has(.form-panel),
section:has(.form-box) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Inputs do formulário */
.praise-form input,
.praise-form textarea,
.compliment-form input,
.compliment-form textarea,
.review-form input,
.review-form textarea,
.feedback-form input,
.feedback-form textarea,
.form-card input,
.form-card textarea,
.form-panel input,
.form-panel textarea,
.form-box input,
.form-box textarea,
.quote-panel input,
.quote-panel textarea {
  border-color: rgba(214,179,106,.24) !important;
  background: linear-gradient(135deg, rgba(6,6,5,.70), rgba(10,8,5,.56)) !important;
  color: #f5efe2 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;
}

.praise-form input:focus,
.praise-form textarea:focus,
.compliment-form input:focus,
.compliment-form textarea:focus,
.review-form input:focus,
.review-form textarea:focus,
.feedback-form input:focus,
.feedback-form textarea:focus,
.form-card input:focus,
.form-card textarea:focus,
.form-panel input:focus,
.form-panel textarea:focus,
.form-box input:focus,
.form-box textarea:focus,
.quote-panel input:focus,
.quote-panel textarea:focus {
  border-color: rgba(244,213,138,.50) !important;
  box-shadow:
    0 0 0 4px rgba(214,179,106,.070),
    inset 0 1px 0 rgba(255,255,255,.055) !important;
}

/* Botão do formulário */
.praise-form button,
.compliment-form button,
.review-form button,
.feedback-form button,
.form-card button,
.form-panel button,
.form-box button,
.quote-panel button {
  color: #161006 !important;
  background: linear-gradient(135deg, #f4d58a, #d6b36a 58%, #9d7b39) !important;
  border-color: transparent !important;
  box-shadow:
    0 20px 55px rgba(214,179,106,.18),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}

/* Kicker do formulário em dourado */
.praise-form .kicker,
.compliment-form .kicker,
.review-form .kicker,
.feedback-form .kicker,
.form-card .kicker,
.form-panel .kicker,
.form-box .kicker,
.quote-panel .kicker {
  color: #f4d58a !important;
}



/* === V102 PASTA LIMPA FINAL OVERRIDES === */

/* Garantia final: background 4K atual aplicado em todas as páginas */
html,
body {
  background-color: #050505 !important;
}

body {
  background:
    linear-gradient(rgba(2,2,2,.24), rgba(2,2,2,.56)),
    url("../img/background-carvao-gold-4k.webp") center top / cover fixed no-repeat !important;
}

/* Em mobile evita o fixed para melhor performance */
@media (max-width: 1040px) {
  body {
    background:
      linear-gradient(rgba(2,2,2,.42), rgba(2,2,2,.70)),
      url("../img/background-carvao-gold-4k.webp") center top / cover scroll no-repeat !important;
  }
}

/* Corrige a zona Reclamações/Elogios sem criar retângulo extra */
.compliment-section {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.path-card.positive {
  background:
    radial-gradient(circle at 84% 22%, rgba(244,213,138,.125), transparent 34%),
    radial-gradient(circle at 20% 86%, rgba(214,179,106,.060), transparent 40%),
    linear-gradient(135deg, rgba(18,14,8,.66), rgba(5,5,5,.58)) !important;
  border: 1px solid rgba(214,179,106,.26) !important;
  box-shadow:
    0 34px 110px rgba(0,0,0,.42),
    0 0 38px rgba(214,179,106,.040),
    inset 0 1px 0 rgba(255,255,255,.055) !important;
  backdrop-filter: blur(16px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
}

.path-card.positive .btn {
  border-color: rgba(214,179,106,.34) !important;
  color: #161006 !important;
  background: linear-gradient(135deg, #f4d58a, #d6b36a 58%, #9d7b39) !important;
  box-shadow:
    0 18px 46px rgba(214,179,106,.16),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.compliment-panel {
  background:
    radial-gradient(circle at 86% 18%, rgba(244,213,138,.085), transparent 34%),
    radial-gradient(circle at 18% 84%, rgba(214,179,106,.045), transparent 40%),
    linear-gradient(135deg, rgba(12,10,7,.64), rgba(3,3,3,.56)) !important;
  border: 1px solid rgba(214,179,106,.24) !important;
  box-shadow:
    0 32px 95px rgba(0,0,0,.40),
    0 0 34px rgba(214,179,106,.035),
    inset 0 1px 0 rgba(255,255,255,.050) !important;
  backdrop-filter: blur(15px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(15px) saturate(1.05) !important;
}


/* === V102 SEO FINALIZACAO === */

/*
  Finalização:
  - background otimizado em WebP com fallback PNG
  - mantém qualidade visual
  - reforça favicon/OG assets sem alterar layout
*/

body {
  background:
    linear-gradient(rgba(2,2,2,.24), rgba(2,2,2,.56)),
    image-set(
      url("../img/background-carvao-gold-4k.webp") type("image/webp"),
      url("../img/background-carvao-gold-4k.webp") type("image/webp")
    ) center top / cover fixed no-repeat !important;
}

@media (max-width: 1040px) {
  body {
    background:
      linear-gradient(rgba(2,2,2,.42), rgba(2,2,2,.70)),
      image-set(
        url("../img/background-carvao-gold-4k.webp") type("image/webp"),
        url("../img/background-carvao-gold-4k.webp") type("image/webp")
      ) center top / cover scroll no-repeat !important;
  }
}

.not-found-card {
  max-width: 820px;
}


/* === V103 ESCONDER SCROLLBAR DO BROWSER === */

/*
  Esconde a barra de scroll nativa do browser,
  mas mantém o scroll normal por rato, touchpad, teclado e mobile.
*/

html,
body {
  scrollbar-width: none !important;        /* Firefox */
  -ms-overflow-style: none !important;     /* Edge antigo / IE */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;                /* Chrome, Brave, Edge, Safari */
}

html {
  scroll-behavior: smooth;
}


/* === V104 PROGRESS GOLD TO BLUE === */

/*
  Barra superior de progresso:
  - começa dourada
  - ganha azul conforme o utilizador desce a página
  - mantém brilho premium subtil
*/

.progress {
  background: rgba(5, 5, 5, .22) !important;
  box-shadow:
    0 0 18px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}

.progress span,
#progress {
  background:
    linear-gradient(
      90deg,
      #f4d58a 0%,
      #d6b36a 32%,
      color-mix(in srgb, #d6b36a calc(100% - var(--scroll-blue, 0%)), #8fd3ff var(--scroll-blue, 0%)) 66%,
      color-mix(in srgb, #d6b36a calc(100% - var(--scroll-blue, 0%)), #38bdf8 var(--scroll-blue, 0%)) 100%
    ) !important;
  box-shadow:
    0 0 16px rgba(214,179,106,.22),
    0 0 calc(8px + (var(--scroll-blue-value, 0) * 18px)) rgba(143,211,255,.18) !important;
}

/* fallback para browsers sem color-mix */
@supports not (color: color-mix(in srgb, #fff 50%, #000 50%)) {
  .progress span,
  #progress {
    background:
      linear-gradient(
        90deg,
        #f4d58a 0%,
        #d6b36a 42%,
        #8fd3ff 100%
      ) !important;
  }
}


/* === V105 BACKGROUND MOBILE AJUSTADO === */

/*
  Ajuste específico para telemóvel:
  - mantém o background premium
  - melhora o enquadramento vertical
  - evita o efeito pesado do fixed em mobile
  - aumenta leitura dos textos
*/

@media (max-width: 760px) {
  body {
    background:
      linear-gradient(rgba(2,2,2,.50), rgba(2,2,2,.76)),
      image-set(
        url("../img/background-carvao-gold-4k.webp") type("image/webp"),
        url("../img/background-carvao-gold-4k.webp") type("image/webp")
      ) 58% top / auto 100vh scroll no-repeat,
      #050505 !important;
  }

  body::before {
    background:
      radial-gradient(circle at 50% 12%, rgba(244,213,138,.10), transparent 34%),
      radial-gradient(circle at 44% 58%, rgba(214,179,106,.10), transparent 42%),
      linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.62)) !important;
    opacity: .90 !important;
  }

  body::after {
    background:
      radial-gradient(ellipse at center, transparent 0 42%, rgba(0,0,0,.24) 72%, rgba(0,0,0,.58) 100%),
      linear-gradient(180deg, rgba(0,0,0,.20), transparent 28%, rgba(0,0,0,.52)) !important;
  }

  .page,
  .page-main {
    background: transparent !important;
  }
}

/* Telemóveis muito estreitos: puxa ligeiramente o rio dourado para o centro */
@media (max-width: 430px) {
  body {
    background:
      linear-gradient(rgba(2,2,2,.54), rgba(2,2,2,.78)),
      image-set(
        url("../img/background-carvao-gold-4k.webp") type("image/webp"),
        url("../img/background-carvao-gold-4k.webp") type("image/webp")
      ) 62% top / auto 100vh scroll no-repeat,
      #050505 !important;
  }
}

/* Secções internas em mobile: mantém fundo contínuo sem cortes feios */
@media (max-width: 760px) {
  .hero,
  .page-hero,
  section {
    background: transparent !important;
  }

  .portfolio-card,
  .path-card,
  .compliment-panel,
  .quote-panel,
  .page-card,
  .privacy-content,
  .privacy-sidebar {
    background:
      radial-gradient(circle at 86% 18%, rgba(214,179,106,.060), transparent 36%),
      linear-gradient(135deg, rgba(8,8,8,.80), rgba(3,3,3,.68)) !important;
    backdrop-filter: blur(14px) saturate(1.05) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.05) !important;
  }
}


/* === V106 AJUSTE ULTRAWIDE E MONITORES BAIXOS === */

/*
  Ajustes para:
  - monitores largos / ultrawide
  - monitores largos mas com pouca altura
  - evitar que o conteúdo fique demasiado espalhado
  - preservar o background premium
*/

/* Ecrãs grandes normais */
@media (min-width: 1440px) {
  .page,
  .page-main {
    max-width: 1480px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero,
  .page-hero,
  .signature-strip,
  .about,
  #processo,
  #orcamento,
  .carousel-section,
  .contacts,
  #projects,
  .portfolio-section,
  .privacy-section,
  .complaints-paths,
  .compliment-section,
  .template-locked-section {
    max-width: 1420px;
    margin-left: auto;
    margin-right: auto;
  }

  body {
    background-position: center top !important;
    background-size: cover !important;
  }
}

/* Ultrawide: segura o conteúdo para não ficar perdido */
@media (min-width: 1700px) {
  .page,
  .page-main {
    max-width: 1540px;
  }

  .hero,
  .page-hero,
  .signature-strip,
  .about,
  #processo,
  #orcamento,
  .carousel-section,
  .contacts,
  #projects,
  .portfolio-section,
  .privacy-section,
  .complaints-paths,
  .compliment-section,
  .template-locked-section {
    max-width: 1480px;
  }

  .hero {
    grid-template-columns: minmax(0, 1.02fr) minmax(420px, .82fr);
    gap: clamp(48px, 5vw, 92px);
  }

  .hero-copy {
    max-width: 780px;
  }

  .hero-stage,
  .logo-stage,
  .twobyte-hero-brand {
    justify-self: center;
  }

  .hero-logo-img,
  .orbyte-hero-brand img,
  .logo-stage img {
    width: min(430px, 26vw) !important;
    max-width: 480px !important;
  }

  body {
    background-position: center center !important;
  }
}

/* Super ultrawide: evita excesso de largura visual */
@media (min-width: 2100px) {
  .page,
  .page-main {
    max-width: 1620px;
  }

  .hero,
  .page-hero,
  .signature-strip,
  .about,
  #processo,
  #orcamento,
  .carousel-section,
  .contacts,
  #projects,
  .portfolio-section,
  .privacy-section,
  .complaints-paths,
  .compliment-section,
  .template-locked-section {
    max-width: 1540px;
  }

  body::after {
    background:
      radial-gradient(ellipse at center, transparent 0 44%, rgba(0,0,0,.20) 70%, rgba(0,0,0,.58) 100%),
      linear-gradient(90deg, rgba(0,0,0,.34), transparent 16%, transparent 84%, rgba(0,0,0,.34)),
      linear-gradient(180deg, rgba(0,0,0,.10), transparent 28%, rgba(0,0,0,.42)) !important;
  }
}

/* Monitores largos mas baixos: reduz altura/padding do hero */
@media (min-width: 1200px) and (max-height: 760px) {
  .hero {
    min-height: 760px !important;
    padding-top: clamp(88px, 12vh, 118px) !important;
    padding-bottom: 56px !important;
  }

  .hero h1,
  .page-hero h1 {
    font-size: clamp(58px, 6.2vw, 96px) !important;
    line-height: .88 !important;
  }

  .hero p,
  .page-hero p {
    font-size: clamp(16px, 1.25vw, 19px) !important;
  }

  .signature-strip {
    margin-top: 22px !important;
  }

  .hero-logo-img,
  .orbyte-hero-brand img,
  .logo-stage img {
    width: min(380px, 31vw) !important;
    max-width: 430px !important;
  }
}

/* Monitores muito baixos: compacta ainda mais sem estragar */
@media (min-width: 1200px) and (max-height: 650px) {
  header {
    top: 14px !important;
  }

  .hero {
    min-height: 650px !important;
    padding-top: 92px !important;
    padding-bottom: 38px !important;
  }

  .hero h1,
  .page-hero h1 {
    font-size: clamp(48px, 5.4vw, 82px) !important;
  }

  .actions {
    margin-top: 22px !important;
  }

  .hero-logo-img,
  .orbyte-hero-brand img,
  .logo-stage img {
    width: min(330px, 27vw) !important;
    max-width: 380px !important;
  }
}




/* === V108 ULTRAWIDE SEM PARTIR HERO === */

/*
  Correção da v107:
  - remove scale() agressivo no hero
  - evita que o título fique partido em linhas demasiado curtas
  - mantém o conteúdo mais presente em ecrãs muito largos
  - fecha laterais com vinheta sem distorcer o layout
  - desktop normal e mobile continuam iguais à base anterior
*/

/* Ecrãs largos reais */
@media (min-width: 1750px) {
  .page,
  .page-main {
    max-width: 1760px !important;
  }

  header {
    max-width: 1420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero {
    max-width: 1560px !important;
    grid-template-columns: minmax(760px, 1.08fr) minmax(420px, .72fr) !important;
    gap: clamp(40px, 3.2vw, 74px) !important;
    transform: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: clamp(122px, 12vh, 168px) !important;
  }

  .hero-copy {
    max-width: 900px !important;
  }

  .hero h1 {
    max-width: 900px !important;
    font-size: clamp(78px, 4.55vw, 116px) !important;
    line-height: .86 !important;
    letter-spacing: -.07em !important;
  }

  .hero p {
    max-width: 720px !important;
    font-size: clamp(18px, .92vw, 22px) !important;
  }

  .hero-logo-img,
  .orbyte-hero-brand img,
  .logo-stage img {
    width: min(430px, 21vw) !important;
    max-width: 480px !important;
  }

  .signature-strip {
    max-width: 1400px !important;
    transform: none !important;
    margin-top: clamp(30px, 5vh, 72px) !important;
  }

  body::after {
    background:
      linear-gradient(90deg, rgba(0,0,0,.48), transparent 18%, transparent 82%, rgba(0,0,0,.48)),
      radial-gradient(ellipse at center, transparent 0 44%, rgba(0,0,0,.28) 72%, rgba(0,0,0,.66) 100%),
      linear-gradient(180deg, rgba(0,0,0,.08), transparent 28%, rgba(0,0,0,.42)) !important;
  }
}

/* Larguras extremas / dois monitores */
@media (min-width: 2200px) {
  .page,
  .page-main {
    max-width: 1900px !important;
  }

  header {
    max-width: 1520px !important;
  }

  .hero {
    max-width: 1720px !important;
    grid-template-columns: minmax(900px, 1.12fr) minmax(430px, .66fr) !important;
    gap: clamp(44px, 3vw, 82px) !important;
    transform: none !important;
    padding-top: clamp(118px, 11vh, 158px) !important;
  }

  .hero-copy {
    max-width: 1050px !important;
  }

  .hero h1 {
    max-width: 1050px !important;
    font-size: clamp(86px, 4.1vw, 128px) !important;
    line-height: .86 !important;
  }

  .hero p {
    max-width: 780px !important;
    font-size: clamp(19px, .82vw, 24px) !important;
  }

  .hero-logo-img,
  .orbyte-hero-brand img,
  .logo-stage img {
    width: min(460px, 18vw) !important;
    max-width: 520px !important;
  }

  .signature-strip {
    max-width: 1520px !important;
    margin-top: clamp(36px, 5vh, 80px) !important;
    transform: none !important;
  }

  body::after {
    background:
      linear-gradient(90deg, rgba(0,0,0,.62), transparent 20%, transparent 80%, rgba(0,0,0,.62)),
      radial-gradient(ellipse at center, transparent 0 40%, rgba(0,0,0,.34) 72%, rgba(0,0,0,.74) 100%),
      linear-gradient(180deg, rgba(0,0,0,.10), transparent 28%, rgba(0,0,0,.48)) !important;
  }
}

/* Monitores largos mas baixos: compacta sem partir */
@media (min-width: 1750px) and (max-height: 820px) {
  .hero {
    padding-top: 104px !important;
    min-height: 720px !important;
  }

  .hero h1 {
    font-size: clamp(68px, 3.75vw, 102px) !important;
    max-width: 980px !important;
  }

  .hero-logo-img,
  .orbyte-hero-brand img,
  .logo-stage img {
    width: min(390px, 17vw) !important;
    max-width: 440px !important;
  }

  .signature-strip {
    margin-top: 20px !important;
  }
}

@media (min-width: 2200px) and (max-height: 820px) {
  .hero {
    padding-top: 96px !important;
    min-height: 700px !important;
    grid-template-columns: minmax(860px, 1.08fr) minmax(380px, .60fr) !important;
  }

  .hero h1 {
    font-size: clamp(72px, 3.35vw, 108px) !important;
    max-width: 1100px !important;
  }

  .hero-logo-img,
  .orbyte-hero-brand img,
  .logo-stage img {
    width: min(390px, 16vw) !important;
    max-width: 430px !important;
  }
}


/* === V109 EMOJI NATIVO CORRIGIDO SEM PARTIR LAYOUT === */

/*
  Correção:
  - mantém a estrutura visual original do formulário e do cartão mensagem
  - troca apenas a carinha desenhada por emoji nativo
  - não altera o grid do formulário
  - não cria wrappers novos que partem o layout
*/

.native-emoji-face {
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","EmojiOne Color","Android Emoji",sans-serif !important;
  display: grid !important;
  place-items: center !important;
  line-height: 1 !important;
  user-select: none !important;
  cursor: pointer !important;
  background: transparent !important;
  border: 0 !important;
  color: inherit !important;
  transform-origin: center !important;
  transition:
    transform .32s cubic-bezier(.2,.9,.25,1.2),
    filter .32s ease !important;
  filter:
    drop-shadow(0 22px 34px rgba(0,0,0,.42))
    drop-shadow(0 0 18px rgba(214,179,106,.18)) !important;
}

.native-emoji-face .eyes,
.native-emoji-face .eye,
.native-emoji-face .mouth {
  display: none !important;
}

/* Emoji do formulário: centrado dentro do diamond-core original */
.native-form-emoji,
#formFace.native-emoji-face {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  font-size: clamp(92px, 10vw, 148px) !important;
  box-shadow: none !important;
}

/* Estado visual controlado pelo JS antigo e novo */
#formFace.native-emoji-face.happy,
#contactFace.native-emoji-face.happy,
.native-emoji-face.native-happy {
  transform: translate(var(--look-x, 0), var(--look-y, 0)) scale(1.08) rotate(-2deg) !important;
  filter:
    drop-shadow(0 24px 36px rgba(0,0,0,.44))
    drop-shadow(0 0 24px rgba(214,179,106,.24)) !important;
}

#formFace.native-emoji-face.attention,
.native-emoji-face.native-attention {
  transform: translate(var(--look-x, 0), var(--look-y, 0)) scale(1.04) rotate(2deg) !important;
  filter:
    drop-shadow(0 24px 36px rgba(0,0,0,.44))
    drop-shadow(0 0 24px rgba(255,130,130,.20)) !important;
}

/* Animações leves sem mexer no layout */
.native-emoji-face.native-pop {
  animation: nativeEmojiPop .48s cubic-bezier(.18,.9,.22,1) both;
}

@keyframes nativeEmojiPop {
  0% { transform: translate(var(--look-x,0), var(--look-y,0)) scale(.86) rotate(-6deg); }
  58% { transform: translate(var(--look-x,0), var(--look-y,0)) scale(1.14) rotate(4deg); }
  100% { transform: translate(var(--look-x,0), var(--look-y,0)) scale(1) rotate(0); }
}

.native-emoji-face.native-hop {
  animation: nativeEmojiHop .72s cubic-bezier(.2,.9,.25,1.1) both;
}

@keyframes nativeEmojiHop {
  0%,100% { transform: translate(var(--look-x,0), var(--look-y,0)) scale(1); }
  32% { transform: translate(var(--look-x,0), calc(var(--look-y,0px) - 18px)) scale(1.07); }
  58% { transform: translate(var(--look-x,0), var(--look-y,0)) scale(.98); }
}

.native-emoji-face.native-wiggle {
  animation: nativeEmojiWiggle .7s ease both;
}

@keyframes nativeEmojiWiggle {
  0%,100% { transform: translate(var(--look-x,0), var(--look-y,0)) rotate(0); }
  22% { transform: translate(var(--look-x,0), var(--look-y,0)) rotate(-8deg); }
  48% { transform: translate(var(--look-x,0), var(--look-y,0)) rotate(7deg); }
  72% { transform: translate(var(--look-x,0), var(--look-y,0)) rotate(-4deg); }
}

/* Contactos: manter a oval original e só adaptar a escala da cara */
#contactFace.native-emoji-face {
  width: auto !important;
  height: auto !important;
  font-size: clamp(64px, 7vw, 94px) !important;
  box-shadow: none !important;
  position: relative !important;
  z-index: 2 !important;
}

/* A zona esquerda do cartão de mensagem continua com o halo/orbita original */
.message-oval .native-contact-emoji {
  margin: auto !important;
}

@media (max-width: 760px) {
  #formFace.native-emoji-face {
    font-size: clamp(82px, 24vw, 118px) !important;
  }

  #contactFace.native-emoji-face {
    font-size: clamp(58px, 18vw, 82px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .native-emoji-face,
  .native-emoji-face.native-pop,
  .native-emoji-face.native-hop,
  .native-emoji-face.native-wiggle {
    animation: none !important;
    transition: none !important;
  }
}


/* === V110 EMOJI MAIOR SEM CARA ANTIGA === */

/*
  Correção:
  - aumenta o emoji do formulário
  - aumenta o emoji do cartão de mensagem/contacto
  - remove completamente restos visuais da carinha antiga
  - mantém o layout original sem partir o formulário
*/

/* Mata qualquer desenho/pseudo-elemento antigo da mini-face quando for emoji nativo */
.native-emoji-face::before,
.native-emoji-face::after,
#formFace.native-emoji-face::before,
#formFace.native-emoji-face::after,
#contactFace.native-emoji-face::before,
#contactFace.native-emoji-face::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Remove olhos/boca antigos caso ainda existam por alguma razão */
#formFace.native-emoji-face .eyes,
#formFace.native-emoji-face .eye,
#formFace.native-emoji-face .mouth,
#contactFace.native-emoji-face .eyes,
#contactFace.native-emoji-face .eye,
#contactFace.native-emoji-face .mouth {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Garante que a caixa antiga não cria uma “bolha/cabeça” atrás */
#formFace.native-emoji-face,
#contactFace.native-emoji-face {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Formulário: emoji bem maior e dominante dentro do losango */
#formFace.native-emoji-face,
.native-form-emoji {
  font-size: clamp(148px, 14vw, 220px) !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  line-height: 1 !important;
  z-index: 5 !important;
  filter:
    drop-shadow(0 28px 42px rgba(0,0,0,.48))
    drop-shadow(0 0 22px rgba(214,179,106,.18)) !important;
}

/* Se o diamond-core tiver tamanho limitado, dá mais espaço visual ao emoji */
.diamond-core:has(#formFace.native-emoji-face) {
  overflow: visible !important;
}

.diamond-core:has(#formFace.native-emoji-face) .emoji-caption,
.diamond-core:has(#formFace.native-emoji-face) #emojiText {
  position: relative !important;
  z-index: 6 !important;
}

/* Contactos/mensagem: emoji maior dentro da órbita */
#contactFace.native-emoji-face,
.native-contact-emoji {
  font-size: clamp(118px, 10vw, 170px) !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  z-index: 5 !important;
  filter:
    drop-shadow(0 26px 40px rgba(0,0,0,.46))
    drop-shadow(0 0 24px rgba(214,179,106,.20)) !important;
}

/* Ajusta a zona esquerda do cartão para o emoji maior respirar */
.message-oval:has(#contactFace.native-emoji-face) > div:first-child {
  overflow: visible !important;
  display: grid !important;
  place-items: center !important;
}

.message-oval:has(#contactFace.native-emoji-face) .native-contact-emoji {
  transform-origin: center !important;
}

/* Reações continuam a respeitar o tamanho maior */
#formFace.native-emoji-face.happy,
#contactFace.native-emoji-face.happy,
.native-emoji-face.native-happy {
  transform: translate(var(--look-x, 0), var(--look-y, 0)) scale(1.06) rotate(-2deg) !important;
}

#formFace.native-emoji-face.attention,
.native-emoji-face.native-attention {
  transform: translate(var(--look-x, 0), var(--look-y, 0)) scale(1.04) rotate(2deg) !important;
}

/* Mobile: grande, mas sem rebentar */
@media (max-width: 760px) {
  #formFace.native-emoji-face,
  .native-form-emoji {
    font-size: clamp(132px, 34vw, 178px) !important;
  }

  #contactFace.native-emoji-face,
  .native-contact-emoji {
    font-size: clamp(104px, 30vw, 150px) !important;
  }
}

/* Fallback para browsers sem :has() */
.diamond-core #formFace.native-emoji-face {
  margin: 0 auto !important;
}

.message-oval #contactFace.native-emoji-face {
  margin: 0 auto !important;
}


/* ============================================================
   EMOJI NATIVO V2 (substitui a carinha antiga) — 2B Studio
   emoji Unicode real do dispositivo + aura + vida própria
   ============================================================ */
#neCore{
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  gap:22px!important;max-width:none!important;
}
.ne-stage{position:relative;width:260px;height:260px;display:grid;place-items:center}
.ne-halo{
  position:absolute;inset:10%;border-radius:50%;filter:blur(42px);opacity:.7;z-index:0;
  transition:background .5s,opacity .5s;
  background:radial-gradient(circle,rgba(214,179,106,.6),rgba(214,179,106,.26) 42%,transparent 70%);
  animation:neAura 5.5s ease-in-out infinite;
}
@keyframes neAura{0%,100%{transform:scale(.96);opacity:.6}50%{transform:scale(1.08);opacity:.82}}
.ne-face{
  position:relative;z-index:2;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","EmojiOne Color","Android Emoji",sans-serif;
  font-size:150px;line-height:1;user-select:none;cursor:pointer;
  filter:drop-shadow(0 20px 34px rgba(0,0,0,.45));
  transition:transform .32s cubic-bezier(.2,.9,.25,1.2);will-change:transform;
}
.ne-face.ne-idle{animation:neFloat 5.6s ease-in-out infinite}
@keyframes neFloat{0%,100%{transform:translate(var(--ex,0),0) rotate(-1.5deg) scale(1)}50%{transform:translate(var(--ex,0),-12px) rotate(1.5deg) scale(1.02)}}
.ne-face.ne-pop{animation:nePop .55s cubic-bezier(.18,.9,.22,1)}
@keyframes nePop{0%{transform:translate(var(--ex,0),0) scale(.6) rotate(-12deg)}55%{transform:translate(var(--ex,0),0) scale(1.18) rotate(6deg)}100%{transform:translate(var(--ex,0),0) scale(1) rotate(0)}}
.ne-cap{
  position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;top:auto!important;transform:none!important;
  min-width:210px;max-width:250px;text-align:center;font-size:13px;font-weight:700;letter-spacing:.02em;color:#F4D58A;
  border:1px solid rgba(214,179,106,.28);background:rgba(214,179,106,.06);padding:9px 16px;border-radius:999px;
  transition:color .3s,border-color .3s,background .3s;margin:0 auto;
}
#neCore[data-mood="cyan"] .ne-halo{background:radial-gradient(circle,rgba(143,211,255,.6),rgba(143,211,255,.26) 42%,transparent 70%)}
#neCore[data-mood="cyan"] .ne-cap{color:#8FD3FF;border-color:rgba(143,211,255,.30);background:rgba(143,211,255,.07)}
#neCore[data-mood="green"] .ne-halo{background:radial-gradient(circle,rgba(93,227,154,.6),rgba(93,227,154,.26) 42%,transparent 70%)}
#neCore[data-mood="green"] .ne-cap{color:#5DE39A;border-color:rgba(93,227,154,.30);background:rgba(93,227,154,.07)}
#neCore[data-mood="error"] .ne-halo{background:radial-gradient(circle,rgba(255,120,120,.56),rgba(255,96,96,.24) 42%,transparent 70%);opacity:.82}
#neCore[data-mood="error"] .ne-cap{color:#FFB4B4;border-color:rgba(255,96,96,.35);background:rgba(255,96,96,.07)}

/* carinha dos contactos */
.ne-cwrap{
  position:relative;width:120px;height:120px;display:grid;place-items:center;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 50% 38%,rgba(214,179,106,.14),rgba(9,8,7,.35));border:1px solid rgba(214,179,106,.28);
}
.ne-chalo{
  position:absolute;inset:-6px;border-radius:50%;filter:blur(26px);opacity:.6;z-index:0;
  background:radial-gradient(circle,rgba(214,179,106,.5),transparent 70%);animation:neAura 5s ease-in-out infinite;
}
.ne-cface{
  position:relative;z-index:2;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","EmojiOne Color","Android Emoji",sans-serif;
  font-size:74px;line-height:1;user-select:none;cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.9,.25,1.2);will-change:transform;
}

/* vida própria (partilhada pelas duas carinhas) */
.ne-blink{animation:neBlink .42s ease}
@keyframes neBlink{0%,100%{transform:scaleY(1)}45%{transform:scaleY(.7)}55%{transform:scaleY(.7)}}
.ne-hop{animation:neHop .7s cubic-bezier(.2,.9,.25,1.1)}
@keyframes neHop{0%{transform:translateY(0) scale(1)}28%{transform:translateY(-22px) scale(1.05)}52%{transform:translateY(0) scale(.97)}70%{transform:translateY(-8px)}100%{transform:translateY(0) scale(1)}}
.ne-wiggle{animation:neWiggle .7s ease}
@keyframes neWiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-8deg)}45%{transform:rotate(7deg)}70%{transform:rotate(-4deg)}}
.ne-glanceL{animation:neGlanceL 1.1s ease}
@keyframes neGlanceL{0%,100%{transform:translateX(0) rotate(0)}35%,62%{transform:translateX(-24px) rotate(-6deg)}}
.ne-glanceR{animation:neGlanceR 1.1s ease}
@keyframes neGlanceR{0%,100%{transform:translateX(0) rotate(0)}35%,62%{transform:translateX(24px) rotate(6deg)}}
.ne-nod{animation:neNod .8s ease}
@keyframes neNod{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(6px) rotate(-3deg)}62%{transform:translateY(-4px) rotate(3deg)}}
@media (prefers-reduced-motion: reduce){
  .ne-blink,.ne-hop,.ne-wiggle,.ne-glanceL,.ne-glanceR,.ne-nod,.ne-face.ne-idle,.ne-halo,.ne-chalo{animation:none!important}
}

/* estado de erro nos campos */
#smartForm .cut-input.ne-error{border-color:rgba(255,96,96,.6)!important;box-shadow:0 0 0 3px rgba(255,96,96,.12)!important}
#smartForm .ne-field-error{display:block;color:#FFB4B4;font-size:11.5px;margin-top:5px}


/* Esconder anéis/órbitas decorativos antigos à volta das carinhas (substituídos pela aura nova) */
.message-oval::before,
.message-oval::after,
.message-oval > div:first-child::before,
.message-oval > div:first-child::after,
.diamond-core::before,
.diamond-core::after,
.diamond-outline{
  display:none !important;
}


/* ============================================================
   CONTACTOS — cartão de mensagem limpo (sem oval) + pagamento por transferência bancária
   ============================================================ */
/* Cartão de mensagem: deixar de ser uma bolha oval gigante */
.message-oval{
  display:grid !important;
  grid-template-columns:auto 1fr !important;
  align-items:center !important;
  gap:28px !important;
  min-height:auto !important;
  border-radius:18px !important;
  padding:28px 34px !important;
}
.message-oval > div:first-child{ min-height:auto !important; }
@media (max-width:760px){
  .message-oval{ grid-template-columns:1fr !important; justify-items:center; text-align:center; padding:26px 22px !important; }
}

/* Destaque único do meio de pagamento (transferência bancária) */
.pay-single{
  margin-top:14px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  padding:28px 24px;border:1px solid rgba(214,179,106,.34);border-radius:16px;
  background:radial-gradient(circle at 50% -10%, rgba(214,179,106,.12), transparent 70%), rgba(255,250,240,.02);
}
.pay-single-mark{
  font-size:26px;font-weight:800;letter-spacing:.03em;color:#F4D58A;
  text-shadow:0 0 26px rgba(214,179,106,.35);
}
.pay-single-note{ font-size:13.5px;line-height:1.5;color:#C9BDA8;max-width:320px; }


/* ============================================================
   VÍDEO — miniatura clica → abre em grande (lightbox)
   ============================================================ */
[data-video]{cursor:pointer}
[data-video]:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.portfolio-media[data-video]{transition:transform .3s ease, box-shadow .3s ease}
.portfolio-media[data-video]:hover{transform:translateY(-4px);box-shadow:0 24px 70px rgba(0,0,0,.4)}
.portfolio-media[data-video] .play-orb{transition:transform .3s ease, background .3s ease, box-shadow .3s ease}
.portfolio-media[data-video]:hover .play-orb{transform:scale(1.12);box-shadow:0 0 40px rgba(214,179,106,.45)}

.vanilla-video-screen{
  display:block!important;
  padding:0!important;
  overflow:hidden!important;
  background:#120d0a!important;
}

.vanilla-video-screen .portfolio-loop-video{
  width:100%!important;
  height:100%!important;
  min-height:100%;
  object-fit:contain!important;
  background:#120d0a;
}

.portfolio-video-screen{
  display:block!important;
  padding:0!important;
  overflow:hidden!important;
  background:#071014!important;
}

.portfolio-video-screen .portfolio-loop-video{
  width:100%!important;
  height:100%!important;
  min-height:100%;
  object-fit:contain!important;
  display:block!important;
}

.case-vanilla .portfolio-media[data-video] .play-orb{
  width:auto!important;
  min-width:132px!important;
  height:48px!important;
  padding:0 18px!important;
  border-radius:999px!important;
  right:20px!important;
  bottom:20px!important;
  font-size:.72rem!important;
  letter-spacing:.11em!important;
}

.portfolio-media[data-video] .play-orb{
  width:auto!important;
  min-width:132px!important;
  max-width:calc(100% - 40px)!important;
  height:48px!important;
  padding:0 18px!important;
  border-radius:999px!important;
  right:20px!important;
  bottom:20px!important;
  z-index:6!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:clip!important;
  font-size:.72rem!important;
  line-height:1!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
}

.portfolio-media[data-video]:hover .play-orb{
  transform:scale(1.04)!important;
}

@media(max-width:620px){
  .portfolio-media[data-video] .play-orb{
    right:14px!important;
    bottom:14px!important;
    min-width:118px!important;
    height:42px!important;
    padding:0 14px!important;
    font-size:.66rem!important;
  }
}

.video-lightbox{
  position:fixed;inset:0;z-index:6000;display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,56px);
  background:rgba(6,5,4,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;
}
.video-lightbox.open{opacity:1;visibility:visible}
body.video-open .cookie-banner{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.video-lightbox-stage{
  position:relative;width:min(1100px,100%);max-height:86vh;aspect-ratio:16/9;
  border:1px solid rgba(214,179,106,.34);border-radius:16px;overflow:hidden;
  background:#000;box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 80px rgba(214,179,106,.12);
  transform:scale(.92);transition:transform .35s cubic-bezier(.2,.9,.25,1.1);
}
.video-lightbox.open .video-lightbox-stage{transform:scale(1)}
.video-lightbox-stage video{width:100%;height:100%;display:block;object-fit:contain;background:#000}
.video-lightbox-close{
  position:absolute;top:clamp(12px,3vw,28px);right:clamp(12px,3vw,32px);z-index:2;
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:30px;line-height:1;
  color:#FFFAF0;background:rgba(255,250,240,.08);border:1px solid rgba(214,179,106,.4);
  transition:background .2s ease,transform .2s ease,border-color .2s ease;
}
.video-lightbox-close:hover{background:rgba(214,179,106,.2);border-color:var(--gold);transform:scale(1.08)}
@media (max-width:760px){
  .video-lightbox-close{top:10px;right:12px;width:42px;height:42px;font-size:26px}
}

/* ============================================================
   V3 — leitura reforçada sobre a imagem de fundo
   ============================================================ */
.about p,
.section-title p,
.carousel-title p,
.contacts-head p,
.message-copy p,
.portfolio-info p,
.page-hero p,
.privacy-content p,
.privacy-sidebar p,
.compliment-copy p,
.template-locked-card p,
.step p,
.footer-box p {
  font-family: "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 500 !important;
  line-height: 1.68 !important;
  color: #E9E0D0 !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.48) !important;
}

.about p,
.section-title p,
.contacts-head p,
.page-hero p {
  font-size: 18px !important;
}

.about > div:last-child,
.page-hero-inner,
.privacy-sidebar,
.privacy-content,
.message-copy {
  text-wrap: pretty;
}

.compliment-form-disabled {
  opacity: .78;
}

.compliment-form-disabled button[disabled] {
  cursor: not-allowed;
  filter: saturate(.72);
  opacity: .72;
}

.video-pending {
  cursor: default !important;
}

.video-pending .play-orb {
  width: auto !important;
  min-width: 92px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

/* ============================================================
   V4 — portefólio com preview ampliado
   ============================================================ */
[data-expand-screen] {
  cursor: zoom-in !important;
}

[data-expand-screen]:focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 4px !important;
}

.portfolio-media[data-expand-screen] {
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important;
}

.portfolio-media[data-expand-screen]:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(214,179,106,.46) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.4), 0 0 42px rgba(214,179,106,.12) !important;
}

.portfolio-media[data-expand-screen] .play-orb {
  width: auto !important;
  min-width: 94px !important;
  padding: 0 15px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.screen-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 4vw, 58px);
  background: rgba(6,5,4,.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease, visibility .28s ease;
}

.screen-lightbox.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.screen-lightbox-stage {
  width: min(1120px, 92vw);
  max-height: 84vh;
  overflow: hidden;
  border: 1px solid rgba(214,179,106,.34);
  border-radius: 20px;
  background: radial-gradient(circle at 50% 0%, rgba(214,179,106,.12), transparent 48%), rgba(11,10,9,.96);
  box-shadow: 0 40px 120px rgba(0,0,0,.68), 0 0 80px rgba(214,179,106,.16);
  transform: scale(.94);
  transition: transform .32s cubic-bezier(.2,.9,.25,1.1);
}

.screen-lightbox.open .screen-lightbox-stage {
  transform: scale(1);
}

.screen-expanded-shell {
  width: 100% !important;
  min-height: min(640px, 76vh);
  display: grid;
  grid-template-rows: auto 1fr;
  background: rgba(10,8,7,.96);
}

.screen-expanded-shell .browser-bar {
  min-height: 44px !important;
  padding: 0 22px !important;
  border-bottom: 1px solid rgba(214,179,106,.18) !important;
  background: rgba(255,250,240,.035) !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}

.screen-expanded-shell .browser-bar span {
  width: 11px !important;
  height: 11px !important;
  border-radius: 50% !important;
}

.screen-expanded-shell .preview-screen {
  min-height: min(590px, 72vh) !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.screen-expanded-shell .vanilla-screen,
.screen-expanded-shell .inforfix-screen,
.screen-expanded-shell .creative {
  padding: clamp(24px, 4vw, 52px) !important;
}

.screen-lightbox-close {
  position: fixed;
  top: clamp(14px, 3vw, 30px);
  right: clamp(14px, 3vw, 34px);
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(214,179,106,.42);
  background: rgba(255,250,240,.08);
  color: #FFFAF0;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.screen-lightbox-close:hover {
  transform: scale(1.08);
  border-color: var(--gold);
  background: rgba(214,179,106,.2);
}

/* ============================================================
   V5 — aviso de cookies
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: clamp(16px, 3vw, 34px);
  right: clamp(16px, 3vw, 34px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 1300;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px 20px;
  border: 1px solid rgba(214,179,106,.30);
  border-radius: 20px;
  background: rgba(12,10,8,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 26px 90px rgba(0,0,0,.48), 0 0 42px rgba(214,179,106,.10);
  transition: opacity .24s ease, transform .24s ease, visibility .24s ease;
}

.cookie-banner.hide {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
}

.cookie-banner strong {
  display: block;
  color: var(--gold-2);
  font-size: 14px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.cookie-banner p {
  margin: 0;
  color: #E9E0D0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.cookie-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.cookie-actions a,
.cookie-actions button {
  min-height: 40px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}

.cookie-actions a {
  display: inline-flex;
  align-items: center;
  color: var(--beige);
  padding: 0 8px;
}

.cookie-actions button {
  border: 1px solid rgba(214,179,106,.28);
  padding: 0 15px;
  cursor: pointer;
}

.cookie-secondary {
  color: var(--cream);
  background: rgba(255,250,240,.06);
}

.cookie-primary {
  color: #1B1307;
  border: 0 !important;
  background: linear-gradient(135deg,var(--gold-2),var(--gold) 55%,var(--gold-3));
}

@media (max-width: 760px) {
  .cookie-banner {
    grid-template-columns: 1fr;
  }

  .cookie-actions {
    justify-content: flex-start;
  }
}

/* ============================================================
   Cortina temporaria de manutencao
   ============================================================ */
body.maintenance-live {
  overflow: hidden !important;
}

body.maintenance-live > *:not(.maintenance-curtain):not(script) {
  /* display:none (not visibility:hidden) so the site can't leak through the
     curtain: mobile rules force `visibility: visible !important` on .btn, which
     reactivates a visibility-hidden ancestor's children but cannot override a
     display:none ancestor. Fixes hero buttons showing over the curtain on
     phone/tablet. No visual change on desktop (curtain covers everything). */
  display: none !important;
}

.maintenance-curtain {
  position: fixed;
  inset: 0;
  z-index: 5000;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 72px);
  color: var(--cream);
  background:
    radial-gradient(circle at 22% 18%, rgba(214,179,106,.26), transparent 30%),
    radial-gradient(circle at 82% 78%, rgba(143,211,255,.16), transparent 34%),
    linear-gradient(135deg, rgba(7,6,5,.92), rgba(17,16,14,.90) 50%, rgba(8,7,6,.96)),
    url("../img/background-carvao-gold-4k.webp") center/cover no-repeat,
    #080706;
  isolation: isolate;
  overflow: hidden;
}

.maintenance-curtain::before,
.maintenance-curtain::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.maintenance-curtain:focus {
  outline: none;
}

.maintenance-curtain::before {
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, transparent 0 49.8%, rgba(214,179,106,.12) 50%, transparent 50.2%),
    linear-gradient(0deg, transparent 0 49.8%, rgba(255,250,240,.04) 50%, transparent 50.2%);
  background-size: 92px 92px;
  mask-image: radial-gradient(circle at center, black, transparent 78%);
  opacity: .38;
}

.maintenance-curtain::after {
  width: min(620px, 78vw);
  height: min(620px, 78vw);
  border: 1px solid rgba(214,179,106,.20);
  transform: rotate(45deg);
  box-shadow: 0 0 90px rgba(214,179,106,.14), inset 0 0 60px rgba(143,211,255,.05);
}

.maintenance-card {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  padding: clamp(30px, 6vw, 64px);
  border: 1px solid rgba(214,179,106,.34);
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(255,250,240,.10), rgba(255,250,240,.035)),
    rgba(10,8,7,.76);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 38px 120px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,250,240,.08);
  text-align: center;
}

.maintenance-mark {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  color: var(--gold-2);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.maintenance-mark img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 0 22px rgba(214,179,106,.30));
}

.maintenance-kicker {
  margin: 0 0 16px;
  color: var(--cyan) !important;
  font-size: 12px !important;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.maintenance-card h1 {
  max-width: 680px;
  margin: 0 auto 22px;
  font-size: clamp(38px, 6vw, 72px);
  line-height: .92;
  letter-spacing: -.055em;
}

.maintenance-card p {
  max-width: 610px;
  margin-inline: auto;
}

.maintenance-card #maintenanceText {
  margin-bottom: 28px;
  color: #E9E0D0;
  font-size: clamp(16px, 2vw, 19px);
}

.maintenance-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 18px;
  margin-bottom: 22px;
  border: 1px solid rgba(214,179,106,.28);
  border-radius: 999px;
  background: rgba(214,179,106,.08);
  color: var(--gold-2);
  letter-spacing: .08em;
}

.maintenance-status span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 18px rgba(214,179,106,.70);
  animation: maintenancePulse 1.9s ease-in-out infinite;
}

.maintenance-status strong {
  font-size: 12px;
  text-transform: uppercase;
}

.maintenance-note {
  margin: 0;
  color: var(--beige) !important;
  font-size: 14px !important;
}

.maintenance-note a {
  color: var(--gold-2);
  font-weight: 850;
  text-decoration: none;
  border-bottom: 1px solid rgba(214,179,106,.42);
}

.maintenance-note a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 5px;
  border-radius: 4px;
}

@keyframes maintenancePulse {
  0%, 100% {
    opacity: .55;
    transform: scale(.82);
  }

  50% {
    opacity: 1;
    transform: scale(1.16);
  }
}

@media (max-width: 640px) {
  .maintenance-card {
    text-align: left;
  }

  .maintenance-mark,
  .maintenance-status {
    justify-content: flex-start;
  }

  .maintenance-card h1,
  .maintenance-card p {
    margin-left: 0;
    margin-right: 0;
  }
}


/* ============================================================
   V14 — estabilidade mobile Android
   ============================================================
   O Chrome Android e alguns telemoveis com escala/fonte propria mostram
   overflow que o iOS tende a esconder. Esta camada final impede que
   fundos, marquees, pseudos e grids antigos alarguem a viewport.
*/
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  @supports not (overflow-x: clip) {
    html,
    body {
      overflow-x: hidden !important;
    }
  }

  body::before,
  body::after,
  .noise,
  .grid,
  .waves {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
  }

  .noise,
  .grid,
  .waves {
    animation: none !important;
    background-attachment: scroll !important;
  }

  .page,
  main,
  section,
  header,
  footer,
  .hero,
  .hero-copy,
  .hero-stage,
  .signature-strip,
  .about,
  .process,
  .section-title,
  .quote-panel,
  .quote-top,
  .quote-bottom,
  .form-side,
  .carousel-section,
  .carousel-title,
  .contacts,
  .contact-cards,
  .contact-lower,
  .message-oval,
  .payment-box,
  .projects,
  .site-footer {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .page {
    width: 100% !important;
    padding-left: clamp(14px, 4vw, 18px) !important;
    padding-right: clamp(14px, 4vw, 18px) !important;
    overflow-x: clip !important;
  }

  header {
    width: 100% !important;
    gap: 12px !important;
    padding: 12px 14px !important;
  }

  .brand-lockup,
  .brand-main,
  .brand-sub {
    min-width: 0 !important;
  }

  .quick {
    display: none !important;
  }

  .hero {
    overflow: hidden !important;
    padding-top: 42px !important;
  }

  .hero-copy,
  .hero-copy p,
  .hero h1,
  .section-title,
  .section-title p,
  .contacts-head,
  .contacts-head p,
  .page-hero-inner,
  .portfolio-info,
  .template-locked-card,
  .privacy-content,
  .compliment-panel {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .hero-stage {
    width: 100% !important;
    min-height: 300px !important;
    overflow: hidden !important;
  }

  .logo-stage::before,
  .logo-stage::after,
  .orbyte-hero-brand::before,
  .orbyte-hero-brand::after {
    max-width: 88vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .hero-logo-img,
  .orbyte-hero-brand img,
  .logo-stage img {
    max-width: min(78vw, 300px) !important;
    height: auto !important;
  }

  .actions,
  .quote-actions,
  .pill-row {
    width: 100% !important;
  }

  .actions .btn,
  .quote-actions .btn {
    width: 100% !important;
  }

  .quote-panel {
    width: 100% !important;
    padding: 24px 16px !important;
    overflow: hidden !important;
  }

  #neCore,
  .ne-stage {
    width: min(260px, 72vw) !important;
    max-width: 100% !important;
  }

  .ne-face {
    font-size: clamp(104px, 30vw, 140px) !important;
  }

  .cut-input,
  .form-side.right .cut-input,
  .cut-input.tall {
    width: 100% !important;
  }

  .cut-input input,
  .cut-input select,
  .cut-input textarea {
    min-width: 0 !important;
    font-size: 16px !important;
  }

  .carousel-section {
    overflow: hidden !important;
  }

  .carousel-track {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    animation: none !important;
    transform: none !important;
  }

  .brand-word {
    max-width: 100% !important;
    font-size: 12px !important;
    letter-spacing: .08em !important;
    padding: 9px 11px !important;
    border: 1px solid rgba(214,179,106,.16) !important;
    border-radius: 999px !important;
    background: rgba(255,250,240,.035) !important;
  }

  .contact-cards,
  .projects,
  .template-grid,
  .status-grid,
  .grid {
    grid-template-columns: 1fr !important;
  }

  .contact-card {
    width: 100% !important;
    grid-template-columns: 46px minmax(0, 1fr) 18px !important;
    padding: 16px !important;
  }

  .contact-card strong {
    font-size: 16px !important;
    overflow-wrap: anywhere !important;
  }

  .message-oval,
  .payment-box,
  .footer-box {
    width: 100% !important;
    border-radius: 18px !important;
  }

  .ne-cwrap {
    width: 108px !important;
    height: 108px !important;
  }

  .ne-cface {
    font-size: 64px !important;
  }

  .site-footer {
    grid-template-columns: 1fr !important;
  }

  .footer-brand {
    font-size: clamp(22px, 8vw, 30px) !important;
    letter-spacing: .18em !important;
    overflow-wrap: anywhere !important;
  }

  .cookie-banner {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    max-width: none !important;
  }
}

/* Travão global contra largura fantasma causada por marquees/camadas animadas. */
html,
body {
  max-width: 100% !important;
  overflow-x: clip !important;
}

@supports not (overflow-x: clip) {
  html,
  body {
    overflow-x: hidden !important;
  }
}

.carousel-section {
  max-width: 100% !important;
  overflow: clip !important;
  contain: paint !important;
}


/* ============================================================
   V109 - mobile/tablet background and action stability
   ============================================================ */
@media (max-width: 1040px) {
  html,
  body {
    background-color: #050505 !important;
  }

  body {
    background:
      radial-gradient(circle at 50% 0%, rgba(244,213,138,.13), transparent 34%) center top / 100% 720px no-repeat,
      linear-gradient(180deg, rgba(5,5,5,.84), rgba(5,5,5,.91) 42%, rgba(3,3,3,.96)) center top / 100% 100% no-repeat,
      image-set(
        url("../img/background-carvao-gold-4k.webp") type("image/webp"),
        url("../img/background-carvao-gold-4k.webp") type("image/webp")
      ) 50% 0 / 1600px auto repeat-y scroll !important;
    background-color: #050505 !important;
    background-attachment: scroll, scroll, scroll !important;
  }

  body::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: -5 !important;
    pointer-events: none !important;
    background:
      radial-gradient(circle at 50% 8%, rgba(214,179,106,.12), transparent 34%),
      radial-gradient(circle at 85% 28%, rgba(143,211,255,.055), transparent 28%),
      linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.48) 68%, rgba(0,0,0,.68)) !important;
    background-size: auto !important;
    mix-blend-mode: normal !important;
    opacity: .82 !important;
    filter: none !important;
  }

  body::after {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    background:
      radial-gradient(ellipse at center, transparent 0 42%, rgba(0,0,0,.24) 74%, rgba(0,0,0,.62) 100%),
      linear-gradient(180deg, rgba(0,0,0,.20), transparent 24%, rgba(0,0,0,.48)) !important;
    opacity: .96 !important;
  }

  .noise {
    opacity: .055 !important;
    mix-blend-mode: soft-light !important;
  }

  .grid,
  .waves {
    opacity: .06 !important;
    animation: none !important;
    transform: none !important;
    background-attachment: scroll !important;
  }

  .carousel-section,
  .contacts,
  #projects,
  .portfolio-section,
  .privacy-section,
  .complaints-paths,
  .compliment-section,
  .template-locked-section {
    isolation: isolate !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(214,179,106,.055), transparent 42%),
      linear-gradient(180deg, rgba(5,5,5,.48), rgba(5,5,5,.70)) !important;
  }

  .carousel-section {
    padding-top: clamp(58px, 8vw, 78px) !important;
    padding-bottom: clamp(58px, 8vw, 78px) !important;
    border-top-color: rgba(214,179,106,.18) !important;
    border-bottom-color: rgba(214,179,106,.18) !important;
  }

  .carousel-title {
    max-width: min(760px, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-inline: clamp(8px, 2vw, 18px) !important;
  }

  .carousel-title h2,
  .contacts-head h2 {
    text-wrap: balance !important;
  }

  .carousel-track {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    animation: none !important;
    transform: none !important;
  }

  .brand-word {
    max-width: 100% !important;
    min-height: 42px !important;
    padding: 10px 13px !important;
    border: 1px solid rgba(214,179,106,.24) !important;
    border-radius: 999px !important;
    background: rgba(8,8,8,.70) !important;
    color: rgba(255,250,240,.90) !important;
    opacity: 1 !important;
    white-space: normal !important;
  }

  .btn,
  button.btn,
  .mobile-panel a,
  .contact-card,
  .pill,
  .pay-chip,
  .cookie-actions button,
  .path-card .btn,
  .template-card .btn,
  .portfolio-info .btn {
    color: #FFFAF0 !important;
    border-color: rgba(214,179,106,.42) !important;
    background:
      linear-gradient(135deg, rgba(20,18,14,.94), rgba(8,8,8,.86)) !important;
    box-shadow:
      0 16px 44px rgba(0,0,0,.34),
      inset 0 1px 0 rgba(255,250,240,.07) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .btn.primary,
  button.btn.primary,
  .quote-actions .btn,
  .quote-actions button.btn.primary,
  .mobile-panel .mobile-panel-cta,
  .cookie-primary,
  .path-card.positive .btn {
    color: #161006 !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, #f4d58a, #d6b36a 58%, #9d7b39) !important;
    box-shadow:
      0 18px 48px rgba(214,179,106,.18),
      inset 0 1px 0 rgba(255,255,255,.22) !important;
  }

  .mobile-menu-toggle {
    display: inline-flex !important;
    background:
      linear-gradient(135deg, rgba(20,18,14,.96), rgba(5,5,5,.92)) !important;
    border-color: rgba(244,213,138,.52) !important;
    box-shadow:
      0 14px 38px rgba(0,0,0,.38),
      0 0 0 1px rgba(255,250,240,.035) inset !important;
  }

  .mobile-menu-toggle span {
    background: #f4d58a !important;
  }

  .mobile-panel {
    background:
      radial-gradient(circle at 88% 10%, rgba(244,213,138,.14), transparent 34%),
      linear-gradient(135deg, rgba(16,14,11,.98), rgba(4,4,4,.96)) !important;
    border-color: rgba(214,179,106,.32) !important;
  }

  .mobile-panel a {
    min-height: 48px !important;
  }

  .contact-card,
  .message-oval,
  .payment-box,
  .quote-panel,
  .portfolio-card,
  .path-card,
  .page-card,
  .template-card,
  .template-locked-card,
  .footer-box,
  .privacy-content,
  .privacy-sidebar {
    background:
      radial-gradient(circle at 86% 14%, rgba(214,179,106,.075), transparent 34%),
      linear-gradient(135deg, rgba(12,11,9,.90), rgba(4,4,4,.80)) !important;
    border-color: rgba(214,179,106,.28) !important;
  }

  .contact-icon {
    background: rgba(255,250,240,.07) !important;
    border-color: rgba(214,179,106,.30) !important;
  }

  .pay-window::before {
    background: linear-gradient(to right, rgba(5,5,5,.96), transparent) !important;
  }

  .pay-window::after {
    background: linear-gradient(to left, rgba(5,5,5,.96), transparent) !important;
  }
}

@media (max-width: 760px) {
  body {
    background:
      radial-gradient(circle at 50% 0%, rgba(244,213,138,.12), transparent 32%) center top / 100% 600px no-repeat,
      linear-gradient(180deg, rgba(5,5,5,.90), rgba(5,5,5,.95) 48%, rgba(3,3,3,.98)) center top / 100% 100% no-repeat,
      image-set(
        url("../img/background-carvao-gold-4k.webp") type("image/webp"),
        url("../img/background-carvao-gold-4k.webp") type("image/webp")
      ) 50% 0 / 1180px auto repeat-y scroll !important;
  }

  .carousel-title h2,
  .contacts-head h2 {
    font-size: clamp(36px, 11vw, 50px) !important;
    line-height: .92 !important;
  }

  .brand-word {
    font-size: 12px !important;
    letter-spacing: .08em !important;
  }
}

@media (max-width: 430px) {
  body {
    background:
      radial-gradient(circle at 50% 0%, rgba(244,213,138,.11), transparent 32%) center top / 100% 560px no-repeat,
      linear-gradient(180deg, rgba(5,5,5,.92), rgba(5,5,5,.96) 48%, rgba(3,3,3,.985)) center top / 100% 100% no-repeat,
      image-set(
        url("../img/background-carvao-gold-4k.webp") type("image/webp"),
        url("../img/background-carvao-gold-4k.webp") type("image/webp")
      ) 50% 0 / 980px auto repeat-y scroll !important;
  }
}


/* ============================================================
   V111 - tablet/mobile background scale and ghost-tap fix
   ============================================================ */
@media (max-width: 1040px) {
  body {
    background:
      radial-gradient(circle at 50% 0%, rgba(244,213,138,.12), transparent 38%) center top / 100% 720px no-repeat,
      linear-gradient(180deg, rgba(5,5,5,.26), rgba(5,5,5,.46) 52%, rgba(3,3,3,.70)) center top / 100% 100% no-repeat,
      url("../img/background-carvao-gold-4k.webp") center top / 100% auto repeat-y scroll,
      #050505 !important;
    background-attachment: scroll, scroll, scroll, scroll !important;
  }

  body::before {
    background:
      radial-gradient(circle at 50% 7%, rgba(244,213,138,.11), transparent 34%),
      radial-gradient(circle at 82% 26%, rgba(143,211,255,.045), transparent 30%),
      linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.34) 62%, rgba(0,0,0,.52)) !important;
    opacity: .74 !important;
  }

  body::after {
    background:
      radial-gradient(ellipse at center, transparent 0 48%, rgba(0,0,0,.18) 78%, rgba(0,0,0,.48) 100%),
      linear-gradient(180deg, rgba(0,0,0,.08), transparent 30%, rgba(0,0,0,.34)) !important;
    opacity: .78 !important;
  }

  .carousel-section,
  .contacts,
  #projects,
  .portfolio-section,
  .privacy-section,
  .complaints-paths,
  .compliment-section,
  .template-locked-section {
    background:
      radial-gradient(circle at 50% 0%, rgba(214,179,106,.045), transparent 42%),
      linear-gradient(180deg, rgba(5,5,5,.18), rgba(5,5,5,.42)) !important;
  }

  .mobile-panel:not(.is-open),
  .mobile-panel[aria-hidden="true"] {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .mobile-panel:not(.is-open) a,
  .mobile-panel[aria-hidden="true"] a {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .mobile-panel.is-open,
  .mobile-panel.is-open a {
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

@media (max-width: 760px) {
  body {
    background:
      radial-gradient(circle at 50% 0%, rgba(244,213,138,.12), transparent 36%) center top / 100% 620px no-repeat,
      linear-gradient(180deg, rgba(5,5,5,.24), rgba(5,5,5,.44) 52%, rgba(3,3,3,.70)) center top / 100% 100% no-repeat,
      url("../img/background-carvao-gold-4k.webp") center top / 760px auto repeat-y scroll,
      #050505 !important;
  }
}

@media (max-width: 430px) {
  body {
    background:
      radial-gradient(circle at 50% 0%, rgba(244,213,138,.12), transparent 34%) center top / 100% 560px no-repeat,
      linear-gradient(180deg, rgba(5,5,5,.24), rgba(5,5,5,.44) 52%, rgba(3,3,3,.72)) center top / 100% 100% no-repeat,
      url("../img/background-carvao-gold-4k.webp") center top / 620px auto repeat-y scroll,
      #050505 !important;
  }
}

/* V112 - remove a costura visual do fundo em viewport tablet/mobile
   v58: vh substituido por auto para evitar redimensionamento do fundo
   no iOS quando a barra de URL retrai/expande durante o scroll. */
@media (max-width: 1040px) {
  body {
    background:
      radial-gradient(circle at 50% 0%, rgba(244,213,138,.12), transparent 38%) center top / 100% 720px no-repeat,
      linear-gradient(180deg, rgba(5,5,5,.24), rgba(5,5,5,.44) 52%, rgba(3,3,3,.68)) center top / 100% 100% no-repeat,
      url("../img/background-carvao-gold-4k.webp") center top / 100% auto repeat-y scroll,
      #050505 !important;
  }
}

@media (max-width: 760px) {
  body {
    background:
      radial-gradient(circle at 50% 0%, rgba(244,213,138,.12), transparent 36%) center top / 100% 620px no-repeat,
      linear-gradient(180deg, rgba(5,5,5,.24), rgba(5,5,5,.44) 52%, rgba(3,3,3,.70)) center top / 100% 100% no-repeat,
      url("../img/background-carvao-gold-4k.webp") center top / 135% auto repeat-y scroll,
      #050505 !important;
  }
}

@media (max-width: 430px) {
  body {
    background:
      radial-gradient(circle at 50% 0%, rgba(244,213,138,.12), transparent 34%) center top / 100% 560px no-repeat,
      linear-gradient(180deg, rgba(5,5,5,.24), rgba(5,5,5,.44) 52%, rgba(3,3,3,.72)) center top / 100% 100% no-repeat,
      url("../img/background-carvao-gold-4k.webp") center top / 145% auto repeat-y scroll,
      #050505 !important;
  }
}

/* V113 - fundo vertical premium para tablet/mobile
   v58: vh substituido por auto para evitar redimensionamento do fundo
   no iOS quando a barra de URL retrai/expande durante o scroll. */
@media (max-width: 1040px) {
  html,
  body {
    background-color: #050505 !important;
  }

  body {
    background:
      radial-gradient(circle at 50% 0%, rgba(244,213,138,.10), transparent 38%) center top / 100% 760px no-repeat,
      linear-gradient(180deg, rgba(5,5,5,.10), rgba(5,5,5,.26) 50%, rgba(3,3,3,.56)) center top / 100% 100% no-repeat,
      url("../img/background-mobile-vertical-premium.webp") center top / 100% auto repeat-y scroll,
      #050505 !important;
    background-attachment: scroll, scroll, scroll, scroll !important;
  }

  body::before {
    background:
      radial-gradient(circle at 50% 7%, rgba(244,213,138,.08), transparent 34%),
      radial-gradient(circle at 82% 26%, rgba(143,211,255,.04), transparent 30%),
      linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.28) 62%, rgba(0,0,0,.44)) !important;
    opacity: .62 !important;
  }

  body::after {
    background:
      radial-gradient(ellipse at center, transparent 0 50%, rgba(0,0,0,.14) 78%, rgba(0,0,0,.42) 100%),
      linear-gradient(180deg, rgba(0,0,0,.04), transparent 28%, rgba(0,0,0,.28)) !important;
    opacity: .72 !important;
  }
}

@media (max-width: 760px) {
  body {
    background:
      radial-gradient(circle at 50% 0%, rgba(244,213,138,.10), transparent 36%) center top / 100% 640px no-repeat,
      linear-gradient(180deg, rgba(5,5,5,.10), rgba(5,5,5,.25) 50%, rgba(3,3,3,.54)) center top / 100% 100% no-repeat,
      url("../img/background-mobile-vertical-premium.webp") center top / 100% auto repeat-y scroll,
      #050505 !important;
  }
}

@media (max-width: 430px) {
  body {
    background:
      radial-gradient(circle at 50% 0%, rgba(244,213,138,.10), transparent 34%) center top / 100% 580px no-repeat,
      linear-gradient(180deg, rgba(5,5,5,.08), rgba(5,5,5,.22) 50%, rgba(3,3,3,.52)) center top / 100% 100% no-repeat,
      url("../img/background-mobile-vertical-premium.webp") center top / 100% auto repeat-y scroll,
      #050505 !important;
  }
}

/* ============================================================
   V114 — Otimizacao de performance mobile
   Corta o backdrop-filter (blur) no telemovel/tablet: era a maior
   fonte de jank no scroll (18+ elementos a desfocar o fundo a cada
   frame de scroll). Os cards mantem o fundo escuro translucido — so
   perdem o desfoque do que esta por tras. Sem qualquer impacto no
   desktop (>1040px e com hover/pointer fino).
   O seletor :not(#_):not(#_) tem especificidade (2,0,0) de proposito,
   para superar as regras por-card que usam `backdrop-filter: blur() !important`.
   ============================================================ */
@media (max-width: 1040px), (hover: none) and (pointer: coarse) {
  :not(#_):not(#_),
  :not(#_):not(#_)::before,
  :not(#_):not(#_)::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ============================================================
   V115 — Formulario: retangulos limpos nos campos
   Altera apenas o formato visual dos wrappers dos campos.
   Nao mexe em textos, emoji, labels, placeholders ou conteudo.
   ============================================================ */
#smartForm .cut-input,
#smartForm .form-side.right .cut-input,
#smartForm .cut-input.tall,
#smartForm .form-side.right .cut-input.tall {
  clip-path: none !important;
  border-radius: 10px !important;
  border: 1px solid rgba(214, 179, 106, .24) !important;
  background:
    linear-gradient(135deg, rgba(18, 15, 11, .82), rgba(5, 5, 4, .80)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 240, .045),
    0 16px 42px rgba(0, 0, 0, .16) !important;
  overflow: hidden !important;
}

#smartForm .cut-input {
  height: 58px !important;
}

#smartForm .cut-input.tall,
#smartForm .form-side.right .cut-input.tall {
  height: 205px !important;
}

#smartForm .cut-input input,
#smartForm .cut-input select {
  padding: 0 20px !important;
}

#smartForm .cut-input textarea,
#smartForm .form-side.right .cut-input.tall textarea {
  padding: 20px 22px !important;
}

#smartForm .cut-input:focus-within {
  border-color: rgba(214, 179, 106, .74) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 240, .06),
    0 0 0 3px rgba(214, 179, 106, .085),
    0 0 30px rgba(214, 179, 106, .14) !important;
}

/* ============================================================
   V116 — Home: projetos como marcas, sem pre-videos
   Troca a montra de videos por cartoes de marcas mais leves.
   ============================================================ */
.brand-projects-section {
  position: relative;
  overflow: hidden;
}

.brand-projects-section::before {
  content: "";
  position: absolute;
  inset: 10% -8% auto auto;
  width: min(520px, 55vw);
  height: min(520px, 55vw);
  pointer-events: none;
  background: radial-gradient(circle, rgba(214, 179, 106, .13), transparent 68%);
  opacity: .72;
}

.brand-projects {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 36px;
}

.brand-project-card {
  min-height: 292px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  position: relative;
  overflow: hidden;
  padding: 24px;
  border: 1px solid rgba(214, 179, 106, .22);
  border-radius: 22px;
  color: var(--cream);
  background:
    radial-gradient(circle at 18% 16%, rgba(143, 211, 255, .10), transparent 30%),
    radial-gradient(circle at 78% 20%, rgba(214, 179, 106, .15), transparent 34%),
    linear-gradient(145deg, rgba(255, 250, 240, .065), rgba(255, 250, 240, .025));
  box-shadow:
    0 24px 70px rgba(0, 0, 0, .25),
    inset 0 1px 0 rgba(255, 250, 240, .07);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.brand-project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 26%, rgba(3, 3, 3, .70) 100%),
    repeating-linear-gradient(90deg, rgba(255, 250, 240, .035) 0 1px, transparent 1px 18px);
  opacity: .72;
}

.brand-project-card:hover {
  transform: translateY(-6px);
  border-color: rgba(214, 179, 106, .68);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, .34),
    0 0 0 1px rgba(214, 179, 106, .08),
    inset 0 1px 0 rgba(255, 250, 240, .10);
}

.brand-project-logo {
  position: relative;
  z-index: 1;
  width: 170px;
  max-width: 76%;
  height: 72px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: auto;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .34));
}

.brand-project-logo-inforfix,
.brand-project-logo-vanilla {
  height: 86px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(214, 179, 106, .30);
  box-sizing: border-box;
  object-position: center;
}

.brand-project-logo-inforfix {
  width: 86px;
  padding: 11px;
}

.brand-project-logo-vanilla {
  width: 196px;
  padding: 12px 16px;
}

.brand-project-logo-2b {
  width: 82px;
  height: 82px;
}

.brand-project-type,
.brand-project-card strong,
.brand-project-card p,
.brand-project-card a {
  position: relative;
  z-index: 1;
}

.brand-project-type {
  color: var(--gold);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.brand-project-card strong {
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1;
}

.brand-project-card p {
  max-width: 34ch;
  margin: 0;
  color: rgba(255, 250, 240, .72);
  font-size: 14px;
  line-height: 1.55;
}

.brand-project-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-top: 6px;
  padding: 0 18px;
  border: 1px solid rgba(214, 179, 106, .44);
  border-radius: 999px;
  color: var(--cream);
  background: rgba(5, 5, 5, .26);
  font-weight: 900;
  text-decoration: none;
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
}

.brand-project-card a:hover {
  transform: translateY(-2px);
  border-color: rgba(214, 179, 106, .86);
  background: rgba(214, 179, 106, .13);
}

.brand-project-trust {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}

.brand-project-trust span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 18px;
  border: 1px solid rgba(214, 179, 106, .24);
  border-radius: 999px;
  color: rgba(255, 250, 240, .78);
  background: rgba(5, 5, 5, .28);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.brand-project-trust span::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 10px;
  border-radius: 50%;
  border: 1px solid var(--cyan);
  box-shadow: 0 0 16px rgba(143, 211, 255, .42);
}

@media (max-width: 1040px) {
  .brand-projects {
    grid-template-columns: 1fr;
  }

  .brand-project-card {
    min-height: 250px;
  }
}

@media (max-width: 620px) {
  .brand-projects {
    gap: 14px;
    margin-top: 26px;
  }

  .brand-project-card {
    min-height: 238px;
    padding: 20px;
    border-radius: 18px;
  }

  .brand-project-logo {
    width: 148px;
    height: 58px;
  }

  .brand-project-logo-inforfix {
    width: 74px;
    height: 74px;
    padding: 10px;
  }

  .brand-project-logo-vanilla {
    width: 170px;
    height: 74px;
  }

  .brand-project-logo-2b {
    width: 68px;
    height: 68px;
  }

  .brand-project-trust {
    gap: 10px;
  }

  .brand-project-trust span {
    min-height: 34px;
    padding: 0 14px;
    font-size: 10px;
    letter-spacing: .18em;
  }
}

/* V55 — refinamento mobile da homepage */
@media(max-width:620px){
  .hero{
    gap:18px!important;
    padding-top:42px!important;
    padding-bottom:34px!important;
  }

  .hero h1{
    max-width:11ch;
    margin-bottom:14px!important;
    line-height:.98!important;
  }

  .hero-copy p{
    max-width:31ch!important;
    margin-bottom:22px!important;
    line-height:1.55!important;
  }

  .signature-strip{
    gap:12px!important;
    margin-top:10px!important;
  }

  .signature-strip > div,
  .metric,
  .step,
  .brand-project-card{
    border-radius:18px!important;
  }

  .signature-strip > div{
    padding:18px!important;
  }

  .about{
    gap:24px!important;
  }

  .about p,
  .section-title p,
  .carousel-title p,
  .contacts-head p,
  .message-copy p{
    max-width:32ch!important;
    margin-left:auto!important;
    margin-right:auto!important;
    font-size:16px!important;
    line-height:1.6!important;
  }

  .process{
    gap:12px!important;
  }

  .step{
    min-height:auto!important;
    padding:16px!important;
  }

  .step .num{
    margin-top:42px!important;
  }

  .quote-panel{
    padding:22px 16px 24px!important;
  }

  .quote-top{
    gap:18px!important;
  }

  .field label,
  .legend,
  .quote-helper{
    letter-spacing:.14em!important;
  }

  .quote-helper,
  .form-mini-note{
    text-align:center!important;
    line-height:1.55!important;
  }

  .contacts{
    padding-top:54px!important;
  }

  .contacts-head{
    margin-bottom:30px!important;
  }

  .message-oval{
    min-height:auto!important;
    padding:26px 18px!important;
    border-radius:28px!important;
  }

  .message-copy h3{
    max-width:12ch;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* V56 — limpeza dos blocos mobile demasiado pesados */
@media(max-width:620px){
  .about,
  .carousel-section,
  .contacts{
    padding-top:56px!important;
    padding-bottom:56px!important;
  }

  .about > .reveal,
  .carousel-title,
  .contacts-head{
    width:min(100% - 32px, 360px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
  }

  .about h2,
  .carousel-title h2,
  .contacts-head h2{
    max-width:12ch!important;
    margin-left:auto!important;
    margin-right:auto!important;
    font-size:clamp(34px,9.8vw,42px)!important;
    line-height:1.03!important;
    letter-spacing:-.035em!important;
  }

  .about p,
  .carousel-title p,
  .contacts-head p{
    max-width:30ch!important;
  }

  .about-metrics{
    grid-template-columns:1fr!important;
    gap:12px!important;
    width:min(100% - 32px, 360px)!important;
    margin:24px auto 0!important;
  }

  .metric{
    min-height:82px!important;
    display:grid!important;
    grid-template-columns:58px 1fr!important;
    gap:14px!important;
    align-items:center!important;
    padding:16px 18px!important;
    text-align:left!important;
  }

  .metric strong{
    margin:0!important;
    font-size:26px!important;
  }

  .metric span{
    font-size:15px!important;
    line-height:1.35!important;
  }

  .carousel-track{
    width:min(100% - 32px, 360px)!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:12px!important;
    margin:0 auto!important;
    animation:none!important;
  }

  .carousel-track .brand-word:nth-child(n+8){
    display:none!important;
  }

  .brand-word{
    min-height:50px!important;
    justify-content:center!important;
    gap:9px!important;
    padding:0 12px!important;
    border:1px solid rgba(214,179,106,.22)!important;
    border-radius:999px!important;
    background:rgba(255,250,240,.035)!important;
    font-size:12px!important;
    letter-spacing:.08em!important;
    opacity:1!important;
  }

  .brand-word:before{
    width:8px!important;
    height:8px!important;
    flex:0 0 auto!important;
  }

  .brand-word:nth-child(7){
    grid-column:1/-1!important;
    justify-self:center!important;
    min-width:154px!important;
  }

  .contact-cards{
    width:min(100% - 24px, 380px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    gap:12px!important;
  }

  .contact-card{
    min-height:82px!important;
    padding:16px!important;
  }

  .message-oval{
    width:min(100% - 24px, 380px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    gap:10px!important;
    padding:20px 18px 26px!important;
  }

  .ne-cwrap{
    transform:scale(.78)!important;
    margin:-18px auto -8px!important;
  }

  .message-copy h3{
    max-width:13ch!important;
    font-size:clamp(28px,8.6vw,36px)!important;
    line-height:1.08!important;
  }

  .payment-box{
    width:min(100% - 24px, 380px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* V57 — proposta de valor mobile redesenhada */
@media(max-width:620px){
  body .about{
    display:block!important;
    width:100%!important;
    padding:48px 18px 44px!important;
    border-top:1px solid rgba(214,179,106,.12)!important;
    border-bottom:1px solid rgba(214,179,106,.12)!important;
  }

  body .about > .reveal{
    width:100%!important;
    max-width:352px!important;
    margin:0 auto!important;
    text-align:left!important;
  }

  body .about > .reveal:first-child{
    margin-bottom:18px!important;
  }

  body .about .kicker{
    justify-content:flex-start!important;
    margin-bottom:12px!important;
    font-size:11px!important;
    letter-spacing:.18em!important;
  }

  body .about h2{
    max-width:9.8ch!important;
    margin:0!important;
    text-align:left!important;
    font-size:36px!important;
    line-height:1.04!important;
    letter-spacing:-.035em!important;
  }

  body .about h2 em{
    display:inline!important;
  }

  body .about p{
    max-width:30ch!important;
    margin:0 0 22px!important;
    text-align:left!important;
    font-size:16px!important;
    line-height:1.55!important;
  }

  body .about-metrics{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:100%!important;
    max-width:352px!important;
    margin:0 auto!important;
  }

  body .about .metric{
    min-height:76px!important;
    grid-template-columns:52px 1fr!important;
    padding:14px 16px!important;
    border-radius:16px!important;
    background:rgba(8,8,8,.46)!important;
  }

  body .about .metric strong{
    font-size:24px!important;
  }

  body .about .metric span{
    font-size:14px!important;
    line-height:1.35!important;
  }
}


/* ============================================================
   V117 — Fundo das areas do sistema em mobile (iOS e Android).
   Em Android Chrome/Brave a meta theme-color ja pintava a status bar;
   no iOS Chrome/Safari faltava garantir que a status bar superior, a
   bottom bar do browser e as safe-areas (notch / home indicator)
   ficassem na cor do site em vez de brancas. Combinacao:
     - HTML: viewport-fit=cover + apple-mobile-web-app-status-bar-style
     - CSS:  html background-color escuro como fallback robusto
   Aplica-se ao html (nao ao body), portanto NAO altera o layout.
   ============================================================ */
html {
  background-color: #050505;
}


/* ============================================================
   V118 — Bloqueio de scroll do background quando o menu mobile
   esta aberto. Padrao de UX usado em Apple, Stripe, Samsung, etc:
   o utilizador nao consegue scrollar o conteudo atras do painel.
     - Android Chrome/Brave: overflow:hidden no body chega.
     - iOS Safari/Chrome: overflow:hidden NAO trava (quirk antiga
       do WebKit); o JS coloca tambem .scroll-locked no body, que
       forca position:fixed (truque iOS-safe) e guarda/restaura a
       posicao do scroll para nao saltar para o topo ao fechar.
   ============================================================ */
body.mobile-menu-open {
  overflow: hidden !important;
}

body.mobile-menu-open.scroll-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}


/* ============================================================
   V119 — Headings mobile (≤620px): largura util + text-wrap balance.
   Antes: .about/.carousel-title/.contacts-head/.message-copy h2/h3
   estavam limitados a max-width 9.8ch/12ch/13ch (V56/V57), forcando
   quebras precoces como "Presenca / premium, / feita / a medida.".
   Agora: max-width liberta + text-wrap: balance, que distribui as
   palavras pelas linhas de forma equilibrada (suportado em Chrome
   114+, Safari 17.5+, Firefox 121+; fallback gracioso noutros).
   Aplica-se de forma identica a Android e iOS.
   ============================================================ */
@media (max-width: 620px) {
  body .about h2,
  body .carousel-title h2,
  body .contacts-head h2,
  body .section-title h2,
  body .message-copy h3 {
    max-width: 18ch !important;
    text-wrap: balance;
  }

  body .about p,
  body .carousel-title p,
  body .contacts-head p,
  body .section-title p,
  body .message-copy p {
    max-width: 42ch !important;
    text-wrap: pretty;
  }
}


/* ============================================================
   V120 — Respiracao lateral das seccoes centradas em mobile.
   .contacts-head (Contacto) nao tinha width-cap como as outras
   seccoes centradas (.carousel-title, .about > .reveal), por isso
   o H2 e o paragrafo iam quase ate as bordas. Damos-lhe a mesma
   estrutura: largura limitada com margens auto, criando margem
   lateral consistente em todas as seccoes mobile.
   ============================================================ */
@media (max-width: 620px) {
  body .contacts-head,
  body .section-title {
    width: min(100% - 28px, 380px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body .about h2,
  body .carousel-title h2,
  body .contacts-head h2,
  body .section-title h2,
  body .message-copy h3 {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body .about h2 {
    margin-left: 0 !important;
  }
}


/* ============================================================
   V123 — Caixa de consentimento RGPD com texto + link inline.
   Substitui V122. O HTML passou a envolver texto+link num `<span
   class="compliment-consent-text">`, o que resolve o bug do link
   aparecer em coluna separada (era flex item irmao do checkbox).
   Agora ha 2 flex items: input + span; o `<a>` flui inline dentro
   do span. Adicionado strong como kicker, estado :has(checked)
   com fundo gold subtil, e accent gold left para o consentimento
   RGPD (distincao visual do "autorizo contacto" simples).
   Aplicada para Android, iOS e desktop.
   ============================================================ */
.compliment-form .pill.compliment-consent {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  min-height: auto;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255, 250, 240, .028);
  border: 1px solid rgba(214, 179, 106, .18);
  color: var(--beige);
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
  transition: border-color .22s ease, background .22s ease, color .22s ease;
}

.compliment-form .pill.compliment-consent:hover {
  border-color: rgba(214, 179, 106, .38);
  background: rgba(255, 250, 240, .045);
  color: var(--cream);
  transform: none;
}

.compliment-form .pill.compliment-consent:has(input:checked) {
  border-color: rgba(214, 179, 106, .54);
  background: rgba(214, 179, 106, .065);
  color: var(--cream);
}

.compliment-form .pill.compliment-consent input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 3px;
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--gold);
  cursor: pointer;
}

.compliment-form .pill.compliment-consent .compliment-consent-text {
  flex: 1 1 auto;
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  text-transform: none;
  letter-spacing: normal;
  text-wrap: pretty;
}

.compliment-form .pill.compliment-consent .compliment-consent-text strong {
  display: block;
  margin-bottom: 6px;
  color: var(--cream);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .005em;
  text-transform: none;
}

.compliment-form .pill.compliment-consent .compliment-consent-text a {
  color: var(--gold-2);
  text-decoration: underline;
  text-decoration-color: rgba(214, 179, 106, .42);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 600;
  transition: color .2s ease, text-decoration-color .2s ease;
}

.compliment-form .pill.compliment-consent .compliment-consent-text a:hover {
  color: var(--cream);
  text-decoration-color: var(--gold);
}

/* Variante RGPD: accent gold a esquerda + ligeira diferenca visual */
.compliment-form .pill.compliment-consent-rgpd {
  border-left-width: 3px;
  border-left-color: rgba(214, 179, 106, .42);
  padding-left: 17px;
}

.compliment-form .pill.compliment-consent-rgpd:has(input:checked) {
  border-left-color: var(--gold);
}

@media (max-width: 620px) {
  .compliment-form .pill.compliment-consent {
    padding: 14px;
    gap: 12px;
  }

  .compliment-form .pill.compliment-consent .compliment-consent-text {
    font-size: 12.5px;
    line-height: 1.55;
  }

  .compliment-form .pill.compliment-consent .compliment-consent-text strong {
    font-size: 13px;
    margin-bottom: 4px;
  }

  .compliment-form .pill.compliment-consent-rgpd {
    padding-left: 13px;
  }
}


/* ============================================================
   V121 — Seccao de testemunhos (.testimonials) por baixo do
   formulario de elogios em complaints.html. Estilo premium e
   consistente com os outros cards do site (mesma palete e
   tratamento de borda/sombra), com aspas em gold e estrelas
   gold. Layout mobile herda o respiro das V119/V120.
   ============================================================ */
.testimonials {
  padding: 76px 0 96px;
}

.testimonials-head {
  max-width: 720px;
  margin: 0 auto 48px;
  padding-inline: 18px;
  text-align: center;
}

.testimonials-head .kicker {
  justify-content: center;
}

.testimonials-head h2 {
  margin: 14px 0 12px;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.testimonials-head p {
  max-width: 580px;
  margin: 0 auto;
  color: var(--beige);
}

.testimonials-grid {
  display: grid;
  gap: 22px;
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
}

.testimonial-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 32px 30px 26px;
  border: 1px solid rgba(214, 179, 106, .22);
  border-radius: 24px;
  background:
    radial-gradient(circle at 18% 14%, rgba(143, 211, 255, .10), transparent 32%),
    radial-gradient(circle at 82% 16%, rgba(214, 179, 106, .14), transparent 34%),
    linear-gradient(145deg, rgba(255, 250, 240, .060), rgba(255, 250, 240, .022));
  box-shadow:
    0 24px 70px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 250, 240, .07);
}

.testimonial-card::before {
  content: "“";
  position: absolute;
  top: 4px;
  left: 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 110px;
  line-height: 1;
  color: var(--gold);
  opacity: .22;
  pointer-events: none;
}

.testimonial-rating {
  position: relative;
  z-index: 1;
  font-size: 18px;
  letter-spacing: .12em;
  color: var(--gold);
  text-shadow: 0 2px 14px rgba(214, 179, 106, .35);
}

.testimonial-quote {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--cream);
  font-size: 16.5px;
  line-height: 1.6;
  text-wrap: pretty;
}

.testimonial-quote p {
  margin: 0 0 12px;
}

.testimonial-quote p:last-child {
  margin-bottom: 0;
}

.testimonial-quote a {
  color: var(--gold-2);
  text-decoration: none;
  border-bottom: 1px solid rgba(214, 179, 106, .42);
  transition: color .2s ease, border-color .2s ease;
}

.testimonial-quote a:hover {
  color: var(--cream);
  border-color: var(--gold);
}

.testimonial-meta {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid rgba(214, 179, 106, .14);
}

.testimonial-logo {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 12px;
  background: #fff;
  padding: 6px;
  border: 1px solid rgba(214, 179, 106, .26);
}

.testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
  min-width: 0;
}

.testimonial-author strong {
  color: var(--cream);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
}

.testimonial-author span {
  color: var(--beige);
  font-size: 13px;
}

.testimonial-author a {
  color: var(--gold-2);
  text-decoration: none;
}

.testimonial-author a:hover {
  color: var(--cream);
}

.testimonial-date {
  color: var(--beige);
  font-size: 12px;
  letter-spacing: .04em;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .testimonials {
    padding: 56px 0 72px;
  }

  .testimonials-head {
    margin-bottom: 32px;
  }

  body .testimonials-head h2 {
    max-width: 18ch;
    margin-left: auto;
    margin-right: auto;
    font-size: 30px;
    line-height: 1.08;
    text-wrap: balance;
  }

  body .testimonials-head p {
    max-width: 42ch;
    text-wrap: pretty;
  }

  .testimonials-grid {
    gap: 16px;
    padding-inline: 14px;
  }

  .testimonial-card {
    padding: 26px 22px 22px;
    border-radius: 20px;
    gap: 18px;
  }

  .testimonial-card::before {
    top: 0;
    left: 14px;
    font-size: 86px;
  }

  .testimonial-quote {
    font-size: 15.5px;
    line-height: 1.55;
  }

  .testimonial-meta {
    grid-template-columns: 44px 1fr;
    grid-template-areas:
      "logo author"
      "date date";
    gap: 12px 14px;
    padding-top: 14px;
  }

  .testimonial-logo {
    grid-area: logo;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    padding: 5px;
  }

  .testimonial-author {
    grid-area: author;
  }

  .testimonial-date {
    grid-area: date;
    margin-top: 4px;
  }
}


/* ------------------------------------------------------------------
   V124 — Hero: faixa de confianca (trust strip) por baixo dos CTAs.
   Objetivo: responder em segundos a resposta/compromisso/prazo/pagamento
   sem abrir reforma do hero. Tom de confianca, nao promocao.
   Marcador em losango dourado (motivo da marca). Desktop: chips que
   equilibram em duas linhas dentro da coluna do hero. Mobile: empilham
   sem cortar texto.
------------------------------------------------------------------ */
.hero-trust {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  border: 1px solid rgba(214,179,106,.20);
  border-radius: 999px;
  background:
    radial-gradient(circle at 16% 50%, rgba(214,179,106,.10), transparent 62%),
    rgba(255,250,240,.04);
  color: var(--cream);
  font-size: 13px;
  line-height: 1.25;
  letter-spacing: .005em;
}

.hero-trust li::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  box-shadow: 0 0 10px rgba(214,179,106,.45);
}

@media (max-width: 620px) {
  .hero-trust {
    gap: 8px;
    margin-top: 22px;
  }

  .hero-trust li {
    font-size: 12.5px;
    padding: 9px 13px;
  }
}


/* ------------------------------------------------------------------
   V125 — Homepage: prova social compacta (testemunho real InforFix)
   entre a signature-strip e a Proposta de valor. Reutiliza o
   testemunho real publicado em complaints.html (Bruno Inacio, CEO
   InforFix), com excerto curto so de palavras reais. Sem estrelas
   (o formulario de elogios nao tem campo de rating real). Mesma
   linguagem visual da V121: borda/gradientes gold, aspa decorativa.
   Card horizontal premium em desktop; empilha em <=720px.
------------------------------------------------------------------ */
.proof-compact {
  padding: clamp(28px, 6vw, 64px) 0 clamp(8px, 2vw, 20px);
}

.proof-compact-head {
  max-width: 720px;
  margin: 0 auto 28px;
  padding-inline: 18px;
  text-align: center;
}

.proof-compact-head .kicker {
  justify-content: center;
}

.proof-compact-head h2 {
  margin: 14px 0 12px;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.08;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.proof-compact-head p {
  max-width: 560px;
  margin: 0 auto;
  color: var(--beige);
}

.proof-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 940px;
  margin: 0 auto;
  padding: 32px 34px 28px;
  border: 1px solid rgba(214, 179, 106, .22);
  border-radius: 22px;
  background:
    radial-gradient(circle at 14% 18%, rgba(143, 211, 255, .09), transparent 34%),
    radial-gradient(circle at 86% 14%, rgba(214, 179, 106, .13), transparent 36%),
    linear-gradient(145deg, rgba(255, 250, 240, .055), rgba(255, 250, 240, .020));
  box-shadow:
    0 22px 60px rgba(0, 0, 0, .26),
    inset 0 1px 0 rgba(255, 250, 240, .06);
}

.proof-card::before {
  content: "“";
  position: absolute;
  top: 2px;
  left: 20px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 92px;
  line-height: 1;
  color: var(--gold);
  opacity: .20;
  pointer-events: none;
}

.proof-quote {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  border: 0;
}

.proof-quote p {
  margin: 0;
  color: var(--cream);
  font-size: clamp(17px, 1.9vw, 20px);
  line-height: 1.5;
  text-wrap: pretty;
}

.proof-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid rgba(214, 179, 106, .14);
}

.proof-logo {
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 12px;
  background: #fff;
  padding: 6px;
  border: 1px solid rgba(214, 179, 106, .26);
}

.proof-author {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
  min-width: 0;
}

.proof-author strong {
  color: var(--cream);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
}

.proof-author > span {
  color: var(--beige);
  font-size: 13px;
}

.proof-cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid rgba(214, 179, 106, .34);
  border-radius: 999px;
  color: var(--gold-2);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.proof-cta:hover {
  color: var(--bg-deep);
  border-color: var(--gold);
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
}

@media (max-width: 720px) {
  .proof-card {
    padding: 26px 22px 22px;
    gap: 20px;
  }

  .proof-card::before {
    font-size: 76px;
    left: 16px;
  }

  .proof-meta {
    flex-wrap: wrap;
  }

  .proof-cta {
    margin-left: 0;
    flex-basis: 100%;
    justify-content: center;
  }
}


/* ------------------------------------------------------------------
   V126 — Homepage: FAQ "Duvidas rapidas" (cards estaticos) entre o
   Processo e o Pedido de orcamento. 6 perguntas visiveis (preco,
   prazo, incluido, materiais, mobile, evolucao) — sem acordeao, sem
   JS, para reduzir friccao antes do formulario. JSON-LD FAQPage no
   index.html replica so este conteudo visivel. Grid auto-fit:
   3 col desktop / 2 tablet / 1 mobile. Marcador em losango dourado
   (motivo da marca, igual a hero-trust V124).
------------------------------------------------------------------ */
.faq-section {
  padding: clamp(40px, 7vw, 88px) 0 clamp(28px, 5vw, 56px);
}

.faq-head {
  max-width: 720px;
  margin: 0 auto 40px;
  padding-inline: 18px;
  text-align: center;
}

.faq-head .kicker {
  justify-content: center;
}

.faq-head h2 {
  margin: 14px 0 12px;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.06;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.faq-head p {
  max-width: 600px;
  margin: 0 auto;
  color: var(--beige);
}

.faq-grid {
  display: grid;
  gap: 18px;
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.faq-card {
  padding: 26px 26px 24px;
  border: 1px solid rgba(214, 179, 106, .20);
  border-radius: 20px;
  background:
    radial-gradient(circle at 16% 12%, rgba(214, 179, 106, .10), transparent 40%),
    linear-gradient(150deg, rgba(255, 250, 240, .050), rgba(255, 250, 240, .018));
  box-shadow: inset 0 1px 0 rgba(255, 250, 240, .05);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.faq-card:hover {
  transform: translateY(-4px);
  border-color: rgba(214, 179, 106, .42);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, .26),
    inset 0 1px 0 rgba(255, 250, 240, .07);
}

.faq-card h3 {
  margin: 0 0 10px;
  color: var(--cream);
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.faq-card h3::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border-radius: 2px;
  transform: rotate(45deg) translateY(-1px);
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  box-shadow: 0 0 10px rgba(214, 179, 106, .45);
}

.faq-card p {
  margin: 0;
  max-width: 46ch;
  color: var(--beige);
  font-size: 14.5px;
  line-height: 1.6;
  text-wrap: pretty;
}

.faq-cta-note {
  max-width: 640px;
  margin: 36px auto 0;
  padding-inline: 18px;
  text-align: center;
  color: var(--cream);
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.55;
  text-wrap: pretty;
}

@media (max-width: 620px) {
  .faq-section {
    padding: 48px 0 32px;
  }

  .faq-head {
    margin-bottom: 28px;
  }

  body .faq-head h2 {
    max-width: 20ch;
    margin-inline: auto;
    font-size: 28px;
  }

  body .faq-head p {
    max-width: 42ch;
  }

  .faq-grid {
    gap: 14px;
    padding-inline: 14px;
  }

  .faq-card {
    padding: 22px 20px 20px;
    border-radius: 16px;
  }

  .faq-card p {
    max-width: none;
  }

  .faq-cta-note {
    margin-top: 28px;
  }
}


/* ------------------------------------------------------------------
   V127 — v98 HOTFIX de legibilidade da FAQ ("Duvidas rapidas").
   Problema: cards demasiado translucidos deixavam a textura gold/preta
   do fundo competir com o texto. Correcao (so CSS, sem mexer na copy
   nem no JSON-LD): (1) escurecer a zona da FAQ com overlay, (2) tornar
   os cards solidos/escuros, (3) subir o contraste do texto (alvo
   WCAG AA >= 4.5:1), (4) mais respiro vertical. O dourado fica so como
   detalhe (marcador + borda fina), nunca atras de blocos de texto.
   Prioridade absoluta: leitura.
------------------------------------------------------------------ */
.faq-section {
  position: relative;
  isolation: isolate;
}

/* Overlay que torna o fundo ambiente, nao concorrente: mais escuro no
   centro (atras do texto), com um leve respiro de textura nos topos. */
.faq-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(130% 70% at 50% 0%, rgba(214, 179, 106, .07), transparent 58%),
    linear-gradient(180deg,
      rgba(6, 6, 7, .80) 0%,
      rgba(6, 6, 7, .93) 22%,
      rgba(6, 6, 7, .93) 78%,
      rgba(6, 6, 7, .80) 100%);
}

/* Cards solidos: a textura deixa de atravessar ate ao texto. */
.faq-card {
  background:
    linear-gradient(155deg, rgba(20, 19, 17, .94), rgba(11, 11, 12, .96));
  border-color: rgba(214, 179, 106, .28);
  box-shadow:
    0 12px 34px rgba(0, 0, 0, .40),
    inset 0 1px 0 rgba(255, 250, 240, .05);
}

.faq-card:hover {
  transform: translateY(-4px);
  border-color: rgba(214, 179, 106, .50);
  box-shadow:
    0 20px 52px rgba(0, 0, 0, .46),
    inset 0 1px 0 rgba(255, 250, 240, .08);
}

/* Texto com contraste forte, sem opacidades baixas. */
.faq-card h3 {
  color: #FBF8F2;
  font-weight: 700;
}

.faq-card p {
  color: #E7E1D4;
  font-size: 15px;
  line-height: 1.7;
  max-width: 52ch;
}

@media (max-width: 620px) {
  .faq-card p {
    max-width: none;
    line-height: 1.68;
  }
}


/* ------------------------------------------------------------------
   V128 — v99: efeito "luz + inclinacao" (inspirado nos cards de
   servicos da Hera) nos cards do FAQ. O glare dourado segue o cursor
   e fica SEMPRE por baixo do texto (h3/p sobem para z-index 2), por
   isso NAO toca no contraste AAA fixado na v98. O tilt 3D e a
   profundidade (translateZ) sao ligados pelo JS em main.js e
   desligam-se com prefers-reduced-motion (a luz fica para todos).
   So visual: nao mexe na copy nem no JSON-LD FAQPage.
------------------------------------------------------------------ */
.faq-card {
  position: relative;
  perspective: 900px;
  transform-style: preserve-3d;
}

.faq-card h3,
.faq-card p {
  position: relative;
  z-index: 2;
}

.faq-card h3 {
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), color .25s ease;
}

.faq-card p {
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.faq-card:hover h3 {
  transform: translateZ(20px);
}

.faq-card:hover p {
  transform: translateZ(8px);
}

.faq-glare {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
    rgba(244, 213, 138, .16), transparent 46%);
  opacity: 0;
  transition: opacity .35s ease;
  mix-blend-mode: screen;
}

.faq-card:hover .faq-glare {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .faq-card:hover h3,
  .faq-card:hover p {
    transform: none;
  }
}


/* ------------------------------------------------------------------
   V129 — v100: (1) FAQ cards passam a fundo TRANSLUCIDO escuro, no
   estilo das caixas `.path-card` de complaints.html (pedido do Renato,
   screenshot "assim"): translucido para a textura/dourado espreitarem,
   com moldura interna. Fica mais escuro que o path-card porque a overlay
   da seccao (V127, rgba(6,6,7,.80->.93)) continua por tras — e e ela,
   com o texto claro (#FBF8F2 / #E7E1D4), que mantem a leitura AAA.
   (2) Fix do glare: o `mix-blend-mode:screen` da V128 deixava de
   funcionar quando o tilt 3D estava ativo (o card vai para camada
   composta e o blend morre), por isso a luz dourada nao aparecia no
   site. Agora e um dourado direto (sem blend), visivel com ou sem tilt,
   sempre por baixo do texto (z-index).
------------------------------------------------------------------ */
.faq-card {
  background:
    radial-gradient(circle at 82% 16%, rgba(214, 179, 106, .12), transparent 34%),
    linear-gradient(135deg, rgba(255, 250, 240, .055), rgba(255, 250, 240, .022));
  border-color: rgba(214, 179, 106, .22);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 250, 240, .055);
}

.faq-card::before {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 0;
  border: 1px solid rgba(214, 179, 106, .10);
  border-radius: 14px;
  pointer-events: none;
}

.faq-glare {
  mix-blend-mode: normal;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
    rgba(244, 213, 138, .28), rgba(244, 213, 138, .07) 34%, transparent 60%);
}


/* ------------------------------------------------------------------
   V130 — v101: aproximar os cards do FAQ ao look das caixas `.path-card`
   das reclamacoes. O Renato notou (com razao) que a v100 ficou mais
   escura/menos texturada. A unica diferenca era a overlay da seccao
   (V127): o `.path-card` nao tem overlay e mostra o marmore; o FAQ tinha
   overlay forte (.80->.93). Aqui aliviamos a overlay (.38->.55) para a
   textura/dourado espreitarem como no path-card, mantendo escuro o
   suficiente; o texto continua claro (#FBF8F2 / #E7E1D4) para a leitura.
------------------------------------------------------------------ */
.faq-card {
  background:
    radial-gradient(circle at 82% 16%, rgba(214, 179, 106, .13), transparent 36%),
    linear-gradient(135deg, rgba(255, 250, 240, .05), rgba(255, 250, 240, .02)),
    rgba(9, 9, 10, .50);
}

.faq-section::before {
  background:
    radial-gradient(130% 70% at 50% 0%, rgba(214, 179, 106, .09), transparent 58%),
    linear-gradient(180deg,
      rgba(6, 6, 7, .40) 0%,
      rgba(6, 6, 7, .55) 26%,
      rgba(6, 6, 7, .55) 74%,
      rgba(6, 6, 7, .40) 100%);
}


/* ------------------------------------------------------------------
   V131 — v101: painel "glass" por tras da grelha do FAQ, para agrupar
   os 6 cards numa "ilha" premium (pedido do Renato). Novo wrapper
   `.faq-panel` (a volta de `.faq-grid` no index.html): escuro
   translucido + `backdrop-filter: blur` + borda/sombra subtis + detalhe
   dourado discreto. Como o painel (escuro + blur) passa a ser o fundo
   por tras dos cards, a leitura fica GARANTIDA de forma uniforme (o blur
   dilui os veios do marmore); por isso a overlay da seccao e aliviada
   (os lados mantem a textura premium) e os cards ficam mais leves.
   So visual: nao mexe na copy, nas 6 perguntas/respostas nem no JSON-LD.
------------------------------------------------------------------ */

/* Seccao: overlay aliviada para os lados mostrarem o fundo premium; o
   painel passa a fazer a separacao central. */
.faq-section::before {
  background:
    radial-gradient(120% 55% at 50% 0%, rgba(214, 179, 106, .05), transparent 62%),
    linear-gradient(180deg,
      rgba(6, 6, 7, .40) 0%,
      rgba(6, 6, 7, .12) 22%,
      rgba(6, 6, 7, .12) 78%,
      rgba(6, 6, 7, .40) 100%);
}

/* Painel glass por tras dos cards. */
.faq-panel {
  position: relative;
  width: min(1120px, calc(100% - 32px));
  margin-inline: auto;
  padding: clamp(18px, 3vw, 40px);
  border-radius: 32px;
  background:
    radial-gradient(circle at 14% 8%, rgba(214, 179, 106, .10), transparent 34%),
    radial-gradient(circle at 88% 94%, rgba(214, 179, 106, .07), transparent 36%),
    rgba(6, 6, 7, .55);
  border: 1px solid rgba(214, 179, 106, .16);
  box-shadow:
    0 30px 84px rgba(0, 0, 0, .46),
    inset 0 1px 0 rgba(255, 250, 240, .05);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.faq-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 250, 240, .045), transparent 34%),
    linear-gradient(315deg, rgba(214, 179, 106, .05), transparent 42%);
}

.faq-panel > .faq-grid {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: none;
  padding-inline: 0;
}

/* Fallback sem backdrop-filter: painel mais opaco, continua premium. */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .faq-panel {
    background:
      radial-gradient(circle at 14% 8%, rgba(214, 179, 106, .10), transparent 34%),
      radial-gradient(circle at 88% 94%, rgba(214, 179, 106, .07), transparent 36%),
      rgba(8, 8, 9, .90);
  }
}

/* Cards mais leves agora que ha painel por tras (o painel escuro+blur
   faz de fundo e garante a leitura). Borda subtil, sombra controlada. */
.faq-card {
  background:
    radial-gradient(circle at 82% 14%, rgba(214, 179, 106, .10), transparent 42%),
    rgba(255, 250, 240, .038);
  border-color: rgba(214, 179, 106, .18);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 250, 240, .045);
}

.faq-card:hover {
  border-color: rgba(214, 179, 106, .40);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, .36),
    inset 0 1px 0 rgba(255, 250, 240, .07);
}

/* Mobile: painel com respiro, radius menor, sem scroll horizontal. */
@media (max-width: 620px) {
  .faq-panel {
    width: calc(100% - 24px);
    padding: 16px 12px;
    border-radius: 20px;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}


/* ------------------------------------------------------------------
   V132 — v102: pagina propria de FAQ (`perguntas-frequentes.html`).
   Aplica a linguagem do painel glass aprovado na homepage (V131) a uma
   pagina completa: hero institucional (reusa .page-hero + .hero-trust)
   + painel central com blur + perguntas AGRUPADAS por categoria + cards
   SOLIDOS escuros (leitura primeiro, sem textura atras do texto) + CTA
   final integrado. Sem acordeao. O texto dos cards e igual ao JSON-LD
   FAQPage da pagina.
------------------------------------------------------------------ */
.faq-page-section {
  padding: clamp(8px, 2vw, 24px) 0 clamp(48px, 7vw, 96px);
}

.faq-page-panel {
  position: relative;
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
  padding: clamp(20px, 4vw, 52px);
  border-radius: 34px;
  background:
    radial-gradient(circle at 12% 6%, rgba(214, 179, 106, .09), transparent 32%),
    radial-gradient(circle at 88% 94%, rgba(214, 179, 106, .06), transparent 34%),
    rgba(6, 6, 7, .58);
  border: 1px solid rgba(214, 179, 106, .16);
  box-shadow:
    0 34px 96px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 250, 240, .05);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.faq-page-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 250, 240, .04), transparent 34%),
    linear-gradient(315deg, rgba(214, 179, 106, .045), transparent 44%);
}

.faq-page-panel > * {
  position: relative;
  z-index: 1;
}

.faq-category + .faq-category {
  margin-top: clamp(32px, 5vw, 58px);
}

.faq-category-heading {
  max-width: 760px;
  margin: 0 0 clamp(16px, 2.4vw, 26px);
}

.faq-category-heading h2 {
  margin: 8px 0 0;
  font-size: clamp(23px, 3vw, 33px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--cream);
  text-wrap: balance;
}

.faq-page-grid {
  display: grid;
  gap: clamp(14px, 2vw, 20px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.faq-page-card {
  position: relative;
  padding: clamp(20px, 2.5vw, 28px);
  border-radius: 20px;
  background: linear-gradient(155deg, rgba(20, 19, 17, .96), rgba(11, 11, 12, .98));
  border: 1px solid rgba(214, 179, 106, .14);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 250, 240, .045);
}

.faq-page-card h3 {
  position: relative;
  margin: 0 0 10px;
  padding-left: 18px;
  color: #FBF8F2;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.faq-page-card h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  box-shadow: 0 0 10px rgba(214, 179, 106, .45);
}

.faq-page-card p {
  margin: 0;
  color: #E7E1D4;
  font-size: 15px;
  line-height: 1.7;
}

.faq-page-cta {
  position: relative;
  width: min(920px, calc(100% - 32px));
  margin: clamp(34px, 5vw, 64px) auto 0;
  padding: clamp(28px, 4vw, 48px);
  text-align: center;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 0%, rgba(214, 179, 106, .10), transparent 55%),
    rgba(255, 250, 240, .03);
  border: 1px solid rgba(214, 179, 106, .18);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .38);
}

.faq-page-cta .kicker {
  justify-content: center;
}

.faq-page-cta h2 {
  margin: 12px 0 12px;
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--cream);
  text-wrap: balance;
}

.faq-page-cta p {
  margin: 0 auto;
  max-width: 48ch;
  color: var(--beige);
}

.faq-page-cta .actions {
  justify-content: center;
  margin-top: 24px;
}

.faq-page-cta .cta-micro {
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted);
}

@media (max-width: 820px) {
  .faq-page-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .faq-page-panel {
    width: calc(100% - 24px);
    padding: 18px 14px;
    border-radius: 22px;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  .faq-page-card {
    padding: 18px 16px;
  }

  .faq-page-cta {
    width: calc(100% - 24px);
    padding: 26px 18px;
  }
}

@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .faq-page-panel {
    background:
      radial-gradient(circle at 12% 6%, rgba(214, 179, 106, .09), transparent 32%),
      radial-gradient(circle at 88% 94%, rgba(214, 179, 106, .06), transparent 34%),
      rgba(8, 8, 9, .92);
  }
}

/* Homepage: link para a pagina completa de FAQ, por baixo do painel. */
.faq-more {
  text-align: center;
  margin-top: clamp(20px, 3vw, 32px);
}