/* =========================================================
   Excandalo — folha de estilo unica
   Blocos <style> extraidos de index.html, NA MESMA ORDEM
   original (a ordem importa para a cascata do CSS).
   ========================================================= */

/* =========================================================
   BASE — layout, tipografia, componentes e animacoes globais
   ========================================================= */
    :root {
      --bg:#050505;
      --bg-soft:#09090b;
      --panel:#0e0e11;
      --panel-2:#131316;
      --text:#f7f7f8;
      --muted:#98989f;
      --line:rgba(255,255,255,.09);
      --line-strong:rgba(255,111,20,.28);
      --orange:#ff6b12;
      --orange-2:#ff9138;
      --orange-soft:rgba(255,107,18,.14);
      --green:#35d28d;
      --shadow:0 24px 80px rgba(0,0,0,.48);
      --radius:24px;
      --radius-sm:16px;
      --container:min(1180px, calc(100% - 40px));
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth;background:var(--bg)}
    body{margin:0;background:
      radial-gradient(circle at 72% -5%,rgba(255,91,0,.12),transparent 28%),
      radial-gradient(circle at 15% 14%,rgba(255,128,36,.06),transparent 22%),
      var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
    body.menu-open{overflow:hidden}
    a{color:inherit;text-decoration:none}
    button,input{font:inherit}
    button{cursor:pointer}
    img{display:block;max-width:100%;image-rendering:auto;-ms-interpolation-mode:bicubic}
    .container{width:var(--container);margin-inline:auto}
    .noise{position:fixed;inset:0;pointer-events:none;opacity:.18;z-index:20;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E")}
    .cursor-glow{position:fixed;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,107,18,.11),transparent 64%);pointer-events:none;z-index:0;transform:translate(-50%,-50%);transition:opacity .2s;opacity:0}

    .site-header{position:sticky;top:0;z-index:60;border-bottom:1px solid transparent;background:rgba(5,5,5,.55);backdrop-filter:blur(18px);transition:.25s ease}
    .site-header.scrolled{border-bottom-color:var(--line);background:rgba(5,5,5,.88)}
    .btn{border:0;border-radius:13px;padding:12px 18px;font-weight:760;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease;white-space:nowrap}
    .btn:hover{transform:translateY(-2px)}
    .btn-primary{background:linear-gradient(135deg,var(--orange),var(--orange-2));color:#160a03;box-shadow:0 12px 28px rgba(255,107,18,.22)}
    .btn-primary:hover{box-shadow:0 16px 38px rgba(255,107,18,.32)}
    .btn-secondary{background:#111114;color:#eee;border:1px solid var(--line)}
    .btn-secondary:hover{background:#17171a}
    .mobile-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:#0d0d10;color:white;align-items:center;justify-content:center}
    .mobile-toggle span,.mobile-toggle::before,.mobile-toggle::after{content:"";display:block;width:18px;height:1.5px;background:currentColor;transition:.25s}
    .mobile-toggle span{margin:4px 0}
    .mobile-menu{display:none}

    .hero{position:relative;z-index:1;padding:84px 0 66px;min-height:760px;display:flex;align-items:center}
    .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:68px}
    .hero h1{font-size:clamp(48px,6.3vw,82px);line-height:.94;letter-spacing:-.065em;margin:0 0 22px;max-width:780px}
    .hero h1 .accent{color:var(--orange);text-shadow:0 0 34px rgba(255,107,18,.16)}
    .hero-copy{font-size:18px;line-height:1.65;color:#b0b0b6;max-width:610px;margin:0}
    .hero-actions{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
    .hero-actions .btn{padding:15px 22px;border-radius:14px}
    .hero-trust{display:flex;align-items:center;gap:20px;margin-top:30px;color:#b6b6bc;font-size:13px;flex-wrap:wrap}
    .avatar-stack{display:flex;padding-left:8px}
    .avatar-stack img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid #050505;margin-left:-8px}
    .trust-copy strong{display:block;color:white;font-size:13px;margin-bottom:2px}
    .rating{color:#ff9d50;letter-spacing:1px}

    .hero-visual{position:relative;min-height:560px;perspective:1200px}
    .visual-halo{position:absolute;inset:10% 0 4% 7%;border-radius:50%;background:radial-gradient(circle,rgba(255,107,18,.19),rgba(255,107,18,.04) 42%,transparent 70%);filter:blur(22px)}
    .visual-grid{position:absolute;inset:0;opacity:.25;background-image:linear-gradient(rgba(255,107,18,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(255,107,18,.12) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,transparent,black 22%,black 75%,transparent)}
    .main-card{position:absolute;inset:56px 18px 40px 54px;border:1px solid rgba(255,125,45,.24);border-radius:28px;background:linear-gradient(160deg,rgba(20,20,23,.97),rgba(8,8,10,.97));box-shadow:var(--shadow);overflow:hidden;transform:rotateY(-5deg) rotateX(2deg);transition:transform .18s ease-out}
    .main-card-top{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--line);background:rgba(8,8,10,.82)}
    .mini-profile{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700}
    .mini-profile img{width:29px;height:29px;border-radius:50%;object-fit:cover;border:2px solid var(--orange)}
    .dots{display:flex;gap:5px}.dots i{display:block;width:5px;height:5px;border-radius:50%;background:#666}
    .hero-photo{height:310px;background:#090909;position:relative;overflow:hidden}
    .hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.9) contrast(1.05)}
    .hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,5,5,.94),transparent 44%),linear-gradient(90deg,rgba(5,5,5,.2),transparent 35%)}
    .hero-photo-copy{position:absolute;left:24px;bottom:24px;z-index:2}
    .hero-photo-copy span{font-size:11px;color:#ffae75;text-transform:uppercase;letter-spacing:.13em;font-weight:800}
    .hero-photo-copy h3{font-size:27px;line-height:1.05;letter-spacing:-.04em;margin:8px 0 0}
    .main-card-footer{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px}
    .micro-stat{background:#111114;border:1px solid var(--line);border-radius:13px;padding:11px 12px}
    .micro-stat span{display:block;color:#777780;font-size:10px;text-transform:uppercase;letter-spacing:.08em}
    .micro-stat strong{font-size:14px;margin-top:3px;display:block}
    .floating-profile{position:absolute;width:186px;border:1px solid var(--line);background:rgba(13,13,16,.88);backdrop-filter:blur(15px);border-radius:18px;padding:10px;box-shadow:0 20px 45px rgba(0,0,0,.44);animation:float 5s ease-in-out infinite}
    .floating-profile img{width:100%;height:110px;border-radius:12px;object-fit:cover}
    .floating-profile strong{display:block;font-size:13px;margin:10px 0 3px}.floating-profile small{color:#8d8d94;font-size:11px}
    .float-one{right:-26px;top:12px;animation-delay:-1s}
    .float-two{left:0;bottom:6px;animation-delay:-2.4s}
    .live-pill{position:absolute;right:18px;bottom:40px;border-radius:999px;padding:9px 12px;background:#111114;border:1px solid var(--line);display:flex;align-items:center;gap:8px;font-size:11px;box-shadow:var(--shadow)}
    .live-pill i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 6px rgba(53,210,141,.12);animation:pulse 1.8s infinite}
    @keyframes float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-12px) rotate(1deg)}}
    @keyframes pulse{50%{box-shadow:0 0 0 10px rgba(53,210,141,0)}}

    .marquee{position:relative;z-index:2;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#08080a;overflow:hidden}
    .marquee-track{display:flex;width:max-content;animation:marquee 28s linear infinite;padding:15px 0;will-change:transform}
    .marquee-group{display:flex;align-items:center;justify-content:space-around;gap:42px;flex:0 0 auto;min-width:100vw;padding:0 21px}
    .marquee-item{display:flex;align-items:center;gap:10px;flex:0 0 auto;color:#bcbcc2;font-size:13px;white-space:nowrap}
    .marquee-item b{color:var(--orange);font-size:17px}
    @keyframes marquee{to{transform:translateX(-50%)}}

    section{position:relative;z-index:1;padding:110px 0}
    .section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:40px}
    .section-kicker{color:var(--orange);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:850;margin-bottom:12px}
    .section-title{font-size:clamp(34px,4.2vw,54px);line-height:1.02;letter-spacing:-.055em;margin:0;max-width:690px}
    .section-title .accent{color:var(--orange)}
    .section-copy{color:#9f9fa6;line-height:1.65;max-width:430px;margin:0}
    .reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.75,.2,1)}
    .reveal.visible{opacity:1;transform:none}

    .experience{padding-top:130px}
    .experience-shell{border:1px solid var(--line);border-radius:30px;background:linear-gradient(180deg,#0d0d10,#09090b);padding:18px;box-shadow:var(--shadow);overflow:hidden}

    .feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
    .feature-card{position:relative;min-height:220px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(160deg,#101013,#0b0b0d);padding:24px;overflow:hidden;transition:.3s ease}
    .feature-card:hover{transform:translateY(-7px);border-color:rgba(255,107,18,.28)}
    .feature-number{font-size:11px;color:#5f5f66;letter-spacing:.12em}
    .feature-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--orange-soft);border:1px solid rgba(255,107,18,.2);margin:25px 0 30px;color:var(--orange)}
    .feature-icon svg{width:22px;height:22px}
    .feature-card h3{font-size:17px;letter-spacing:-.025em;margin:0 0 9px}.feature-card p{margin:0;color:#8f8f96;font-size:13px;line-height:1.55}
    .feature-glow{position:absolute;width:130px;height:130px;border-radius:50%;background:rgba(255,107,18,.12);filter:blur(45px);right:-50px;bottom:-60px}

    .trending-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    .trend-card{position:relative;height:330px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#101013;isolation:isolate;transition:.3s ease}
    .trend-card:hover{transform:translateY(-7px);border-color:rgba(255,107,18,.3)}
    .trend-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .4s;filter:saturate(.88)}
    .trend-card:hover img{transform:scale(1.055);filter:saturate(1.05)}
    .trend-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(5,5,6,.98),rgba(5,5,6,.06) 63%);z-index:1}
    .trend-content{position:absolute;z-index:2;left:20px;right:20px;bottom:18px;display:flex;align-items:end;justify-content:space-between;gap:15px}
    .trend-badge{position:absolute;top:14px;left:14px;z-index:2;background:rgba(5,5,5,.72);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);padding:7px 9px;border-radius:9px;font-size:10px;font-weight:850}
    .trend-content small{color:#a1a1a8;font-size:11px}.trend-content h3{font-size:16px;margin:4px 0 0}.trend-metric{font-size:11px;color:#ff9d5a;background:rgba(255,107,18,.1);padding:7px 9px;border-radius:999px;white-space:nowrap}

    .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:step}
    .step-card{counter-increment:step;border-top:1px solid var(--line);padding-top:24px;position:relative}
    .step-card::before{content:"0" counter(step);display:block;color:var(--orange);font-size:12px;font-weight:850;letter-spacing:.1em;margin-bottom:35px}
    .step-card h3{font-size:24px;letter-spacing:-.035em;margin:0 0 10px}.step-card p{color:#929299;line-height:1.6;margin:0;max-width:300px}
    .step-line{position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,var(--orange),transparent);transform:scaleX(0);transform-origin:left;transition:transform .65s ease}.step-card.visible .step-line{transform:scaleX(1)}

    .pricing-wrap{border:1px solid var(--line);border-radius:30px;background:linear-gradient(160deg,#0e0e11,#09090b);padding:44px;position:relative;overflow:hidden}
    .pricing-wrap::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-210px;top:-210px;background:rgba(255,107,18,.13);filter:blur(70px)}
    .pricing-head{text-align:center;max-width:720px;margin:0 auto 34px;position:relative}.pricing-head h2{font-size:clamp(36px,5vw,58px);margin:0 0 12px;letter-spacing:-.055em}.pricing-head h2 span{color:var(--orange)}.pricing-head p{margin:0;color:#9999a0}

    .testimonials{overflow:hidden}
    .testimonial-track{display:flex;gap:14px;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
    .testimonial{flex:0 0 calc((100% - 28px)/3);min-height:250px;border:1px solid var(--line);border-radius:20px;background:#0d0d10;padding:24px;display:flex;flex-direction:column}
    .quote-mark{color:var(--orange);font-size:32px;line-height:1}.testimonial p{color:#c3c3c8;line-height:1.62;font-size:14px;margin:16px 0 26px}.testimonial-user{margin-top:auto;display:flex;align-items:center;gap:11px}.testimonial-user img{width:42px;height:42px;border-radius:50%;object-fit:cover}.testimonial-user strong{font-size:13px;display:block}.testimonial-user small{color:#777780;font-size:11px}
    .carousel-controls{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.carousel-controls button{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:#101013;color:white;font-size:18px}.carousel-controls button:hover{border-color:rgba(255,107,18,.3);color:var(--orange)}

    .faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
    .faq-list{border-top:1px solid var(--line)}
    .faq-item{border-bottom:1px solid var(--line)}
    .faq-q{width:100%;border:0;background:none;color:white;padding:22px 0;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:20px;font-weight:720}
    .faq-q span:last-child{font-size:22px;color:var(--orange);font-weight:400;transition:transform .25s}.faq-item.open .faq-q span:last-child{transform:rotate(45deg)}
    .faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}.faq-a p{color:#94949b;line-height:1.65;margin:0;padding:0 36px 22px 0;font-size:14px}

    .final-cta{padding-bottom:120px}
    .cta-box{position:relative;min-height:380px;border:1px solid rgba(255,107,18,.24);border-radius:30px;overflow:hidden;background:radial-gradient(circle at 70% 30%,rgba(255,107,18,.22),transparent 32%),linear-gradient(135deg,#111114,#08080a);display:flex;align-items:center;padding:60px}
    .cta-box::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,107,18,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,107,18,.09) 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(90deg,transparent,black);opacity:.25}
    .cta-content{position:relative;z-index:2;max-width:700px}.cta-content h2{font-size:clamp(42px,6vw,70px);line-height:.98;letter-spacing:-.06em;margin:0 0 18px}.cta-content h2 span{color:var(--orange)}.cta-content p{color:#aaaab1;font-size:16px;line-height:1.6;max-width:560px}.cta-content .btn{margin-top:12px;padding:16px 24px}
    .cta-orbit{position:absolute;right:65px;top:50%;transform:translateY(-50%);width:245px;height:245px;border:1px solid rgba(255,107,18,.2);border-radius:50%;z-index:1;animation:spin 18s linear infinite}.cta-orbit::before,.cta-orbit::after{content:"";position:absolute;border:1px solid rgba(255,107,18,.16);border-radius:50%}.cta-orbit::before{inset:34px}.cta-orbit::after{inset:74px}.orbit-dot{position:absolute;left:50%;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--orange);box-shadow:0 0 24px var(--orange)}
    @keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}

    footer{border-top:1px solid var(--line);padding:46px 0 24px;background:#070708;position:relative;z-index:2}

    @media (max-width:1020px){.hero-grid{grid-template-columns:1fr;gap:50px}.hero{padding-top:70px}.hero-copy{max-width:720px}.hero-visual{max-width:680px;width:100%;margin:auto;min-height:570px}.feature-grid{grid-template-columns:repeat(2,1fr)}.trending-grid{grid-template-columns:repeat(2,1fr)}.trend-card:last-child{grid-column:1/-1;height:280px}.testimonial{flex-basis:calc((100% - 14px)/2)}.faq-wrap{grid-template-columns:1fr;gap:34px}.cta-orbit{right:-20px;opacity:.5}.cta-content{max-width:600px}
    }
    @media (max-width:720px){
      :root{--container:min(100% - 28px,1180px)}.site-header{top:0}.mobile-toggle{display:flex;flex-direction:column}.mobile-menu{display:block;position:fixed;top:96px;left:0;right:0;background:rgba(7,7,8,.98);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);padding:15px 14px 22px;transform:translateY(-140%);opacity:0;transition:.3s ease;z-index:55}.mobile-menu.open{transform:none;opacity:1}.mobile-menu a{display:block;padding:14px;border-bottom:1px solid var(--line);color:#c2c2c7}.mobile-menu .btn{margin-top:14px;width:100%}
      .hero{padding:56px 0 50px;min-height:auto}.hero h1{font-size:49px;margin-top:0}.hero-copy{font-size:16px}.hero-actions{display:grid;grid-template-columns:1fr}.hero-actions .btn{width:100%}.hero-trust{gap:13px}.hero-visual{min-height:470px}.main-card{inset:42px 4px 36px 18px}.hero-photo{height:252px}.main-card-footer{grid-template-columns:1fr 1fr}.micro-stat:last-child{display:none}.floating-profile{width:140px;padding:7px}.floating-profile img{height:80px}.float-one{right:-6px}.float-two{left:-5px}.live-pill{right:6px}.section-head{display:block}.section-copy{margin-top:16px}section{padding:82px 0}.experience{padding-top:90px}.experience-shell{padding:11px;border-radius:22px}.feature-grid,.trending-grid,.steps,.plans{grid-template-columns:1fr}.trend-card,.trend-card:last-child{height:310px;grid-column:auto}.step-card{padding-bottom:18px}.pricing-wrap{padding:30px 16px;border-radius:24px}.testimonial{flex-basis:100%}.faq-a p{padding-right:4px}.cta-box{padding:38px 24px;min-height:420px;align-items:flex-start}.cta-orbit{right:-100px;bottom:-80px;top:auto;transform:none}.cta-content h2{font-size:46px}
    }
    @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.marquee-track,.floating-profile,.cta-orbit{animation:none}.reveal{opacity:1;transform:none;transition:none}.main-card{transition:none}}

    /* Conversão VIP — persuasão com transparência */
    .hero{padding-top:74px}
    .hero-content{position:relative;z-index:3}
    .hero h1{font-size:clamp(48px,6vw,78px);max-width:720px}
    .hero-copy{max-width:650px}
    .cta-pulse{position:relative;isolation:isolate}
    .cta-pulse::after{content:"";position:absolute;inset:-6px;border:1px solid rgba(255,133,52,.34);border-radius:inherit;opacity:0;animation:ctaPulse 2.4s ease-out infinite;z-index:-1}
    @keyframes ctaPulse{0%{transform:scale(.98);opacity:.7}75%,100%{transform:scale(1.11);opacity:0}}

    .locked-media{position:relative;overflow:hidden}
    .hero-photo img{filter:blur(7px) brightness(.58) saturate(.72);transform:scale(1.055)}
    .trend-card img{filter:blur(10px) brightness(.54) saturate(.72);transform:scale(1.08)}
    .trend-card:hover img{filter:blur(8px) brightness(.58) saturate(.82);transform:scale(1.12)}
    .locked-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:3;pointer-events:none;background:radial-gradient(circle at center,rgba(5,5,6,.08),rgba(5,5,6,.28) 70%)}
    .locked-overlay strong{font-size:13px;color:#fff;margin-top:9px;letter-spacing:-.01em;text-shadow:0 2px 12px #000}
    .locked-overlay small{font-size:10px;color:#c8c8ce;margin-top:4px}
    .lock-icon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(255,107,18,.24),rgba(255,107,18,.08));border:1px solid rgba(255,140,68,.43);box-shadow:0 0 0 8px rgba(255,107,18,.07),0 14px 35px rgba(0,0,0,.42),0 0 28px rgba(255,107,18,.22);font-size:21px;animation:lockGlow 2.2s ease-in-out infinite}
    @keyframes lockGlow{50%{transform:translateY(-3px);box-shadow:0 0 0 12px rgba(255,107,18,.03),0 18px 40px rgba(0,0,0,.5),0 0 38px rgba(255,107,18,.35)}}
    .hero-lock{background:linear-gradient(to top,rgba(5,5,5,.88),rgba(5,5,5,.18) 72%)}
    .hero-lock .lock-icon{margin-top:-24px}
    .trend-lock{inset:0 0 62px}
    .trend-lock .lock-icon{width:42px;height:42px;border-radius:14px;font-size:18px}
    .trend-content,.trend-badge{z-index:4}

    .feature-card{min-height:245px}
    .offer-shell{position:relative;display:grid;grid-template-columns:1.12fr .88fr;gap:18px;max-width:940px;margin:0 auto}
    .offer-main,.offer-price-card{border:1px solid var(--line);border-radius:24px;background:rgba(9,9,11,.86);padding:32px}
    .offer-main{background:radial-gradient(circle at 5% 0,rgba(255,107,18,.12),transparent 36%),#0a0a0c}
    .offer-badge{display:inline-flex;border:1px solid rgba(255,107,18,.34);background:rgba(255,107,18,.08);color:#ff9b59;border-radius:999px;padding:7px 10px;font-size:9px;font-weight:900;letter-spacing:.11em}
    .offer-main h3{font-size:30px;line-height:1.08;letter-spacing:-.045em;margin:22px 0 12px;max-width:520px}
    .offer-description{color:#929299;line-height:1.6;margin:0 0 25px;max-width:560px}
    .offer-benefits{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
    .offer-benefits span{color:#c6c6cb;font-size:12px}
    .offer-price-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-color:rgba(255,107,18,.34);background:linear-gradient(180deg,rgba(255,107,18,.13),rgba(9,9,11,.9) 54%);box-shadow:0 24px 65px rgba(255,107,18,.11)}
    .price-label{color:#ffae75;text-transform:uppercase;font-size:10px;letter-spacing:.13em;font-weight:900}
    .intro-price{display:flex;align-items:flex-end;justify-content:center;margin:12px 0 8px}
    .intro-price small{font-size:17px;color:#a1a1a7;margin:0 6px 11px 0}
    .intro-price strong{font-size:76px;line-height:.9;letter-spacing:-.075em}
    .intro-price em{font-size:25px;font-style:normal;margin-bottom:8px}
    .next-price{margin:0 0 22px;color:#9b9ba2;font-size:13px}
    .next-price strong{color:white}
    .offer-price-card .btn{width:100%;padding:16px}
    .renewal-note{font-size:10px;line-height:1.55;color:#85858d;margin-top:15px;max-width:340px}
    .renewal-note strong{color:#b9b9c0}
    .secure-row{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;color:#85858d;font-size:10px;margin-top:20px}
    .secure-row span{display:inline-flex;align-items:center;gap:5px}

    .mobile-sticky-cta{display:none}
    :focus-visible{outline:2px solid var(--orange);outline-offset:3px}

    @media (max-width:720px){
      body{padding-bottom:78px}
      .hero{padding-top:50px}
      .hero h1{font-size:44px;line-height:.98}
      .hero-trust{margin-top:24px}
      .offer-shell{grid-template-columns:1fr}
      .offer-main,.offer-price-card{padding:25px 20px}
      .offer-main h3{font-size:27px}
      .offer-benefits{grid-template-columns:1fr}
      .intro-price strong{font-size:68px}
      .secure-row{display:grid;gap:9px;text-align:left;padding:0 8px}
      .mobile-sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:90;height:72px;padding:9px 14px calc(9px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(7,7,8,.94);backdrop-filter:blur(18px);border-top:1px solid rgba(255,255,255,.1);box-shadow:0 -16px 40px rgba(0,0,0,.45)}
      .mobile-sticky-cta>div{display:flex;flex-direction:column}
      .mobile-sticky-cta small{color:#84848b;font-size:9px;text-transform:uppercase;letter-spacing:.1em}
      .mobile-sticky-cta strong{font-size:19px;letter-spacing:-.03em}
      .mobile-sticky-cta .btn{padding:12px 16px;border-radius:12px}
      .hero-lock{display:none}
    }
    @media (prefers-reduced-motion:reduce){.cta-pulse::after,.lock-icon{animation:none}}

/* =========================================================
   MOBILE UI/UX REDESIGN — somente telas de ate 720px
   ========================================================= */
/* =========================================================
   MOBILE UI/UX REDESIGN — somente telas de até 720px
   Mantém integralmente o layout desktop existente.
   ========================================================= */
@media (max-width:720px){
  :root{
    --mobile-gutter:16px;
    --mobile-radius:20px;
    --mobile-radius-sm:14px;
    --container:calc(100% - (var(--mobile-gutter) * 2));
  }

  html{
    scroll-padding-top:96px;
    -webkit-text-size-adjust:100%;
  }

  body{
    padding-bottom:calc(82px + env(safe-area-inset-bottom));
    background:
      radial-gradient(circle at 88% 2%,rgba(255,91,0,.10),transparent 22rem),
      var(--bg);
  }

  body,
  button,
  a,
  input{
    -webkit-tap-highlight-color:transparent;
  }

  a,
  button{
    touch-action:manipulation;
  }

  .container,
  .x-container{
    width:var(--container);
    max-width:none;
    margin-inline:auto;
  }

  .noise{opacity:.10}
  .cursor-glow{display:none}

  .x-skip-link{
    position:fixed;
    left:14px;
    top:-64px;
    z-index:999;
    padding:10px 13px;
    border-radius:10px;
    background:#fff;
    color:#000;
    font-size:12px;
  }

  .x-skip-link:focus{top:12px}

  /* Header e navegação */
  .x-topbar,
  .topbar{
    height:28px;
    min-height:28px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:0 var(--mobile-gutter);
    font-size:9px;
    line-height:1;
    letter-spacing:.035em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .x-topbar strong,
  .topbar strong{margin-right:5px}

  .site-header,
  .x-site-header{
    background:rgba(5,5,5,.88);
    border-bottom:1px solid rgba(255,255,255,.06);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }

  .x-nav,
  .nav{
    height:58px;
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }

  .x-brand{
    display:inline-flex;
    align-items:center;
    min-width:0;
  }

  .x-nav-links{display:none!important}

  .x-nav-actions{
    display:flex;
    align-items:center;
    margin-left:auto;
  }

  .x-brand img{
    width:126px;
    height:auto;
  }

  .x-nav-actions{gap:8px}

  .mobile-menu a,
  .x-mobile-menu>a{
    min-height:48px;
    padding:14px 4px;
    display:flex;
    align-items:center;
    font-size:14px;
  }

  .x-mobile-actions{
    display:grid;
    grid-template-columns:1fr 1.25fr;
    gap:10px;
    margin-top:12px;
  }

  .x-mobile-actions .x-btn{
    min-height:48px;
    width:100%;
    padding:12px 14px;
    border-radius:13px;
  }

  /* Sistema tipográfico e ritmo vertical */
  section{
    padding:68px 0;
    scroll-margin-top:86px;
  }

  .section-head{
    display:block;
    margin-bottom:26px;
  }

  .section-kicker{
    margin-bottom:10px;
    font-size:9px;
    line-height:1.3;
    letter-spacing:.15em;
  }

  .section-title{
    max-width:none;
    font-size:clamp(30px,8.8vw,36px);
    line-height:1.04;
    letter-spacing:-.048em;
    text-wrap:balance;
  }

  .section-copy{
    max-width:none;
    margin-top:14px;
    font-size:14px;
    line-height:1.58;
  }

  .btn{
    min-height:50px;
    border-radius:14px;
    font-size:14px;
  }

  /* Hero */
  .hero{
    min-height:auto;
    padding:38px 0 48px;
  }

  .hero-grid{
    grid-template-columns:1fr;
    gap:34px;
  }

  .hero h1{
    max-width:14ch;
    margin:0 0 17px;
    font-size:clamp(37px,11.2vw,46px);
    line-height:.99;
    letter-spacing:-.058em;
    text-wrap:balance;
  }

  .hero-copy{
    max-width:34rem;
    font-size:15px;
    line-height:1.58;
  }

  .hero-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
    margin-top:24px;
  }

  .hero-actions .btn{
    width:100%;
    min-height:52px;
    padding:14px 18px;
    border-radius:15px;
  }

  .hero-actions .btn-secondary{
    background:rgba(17,17,20,.72);
  }

  .hero-trust{
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:13px;
    margin-top:22px;
    padding:13px 14px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:16px;
    background:rgba(14,14,17,.72);
  }

  .avatar-stack{padding-left:7px}
  .avatar-stack img{width:31px;height:31px}

  .trust-copy{
    min-width:0;
    font-size:11px;
    line-height:1.4;
  }

  .trust-copy strong{
    margin-bottom:3px;
    font-size:11px;
    line-height:1.35;
  }

  .trust-copy span{display:block}
  .trust-copy .rating{letter-spacing:0}

  .hero-visual{
    width:100%;
    min-height:410px;
    margin:0;
    perspective:none;
  }

  .visual-halo{inset:5% 0 0}
  .visual-grid{background-size:34px 34px;opacity:.18}

  .main-card{
    inset:24px 0 28px;
    border-radius:22px;
    transform:none!important;
    box-shadow:0 24px 60px rgba(0,0,0,.52);
  }

  .main-card-top{
    height:44px;
    padding:0 14px;
  }

  .mini-profile{gap:8px;font-size:11px}
  .mini-profile img{width:27px;height:27px}

  .hero-photo{height:242px}
  .hero-photo-copy{left:17px;right:17px;bottom:17px}
  .hero-photo-copy span{font-size:9px}
  .hero-photo-copy h3{max-width:13rem;font-size:21px;line-height:1.05}

  .hero-lock{display:flex}
  .hero-lock .lock-icon{margin-top:-12px}
  .locked-overlay strong{font-size:12px}
  .locked-overlay small{font-size:9px}

  .lock-icon{
    width:44px;
    height:44px;
    border-radius:14px;
    font-size:19px;
  }

  .main-card-footer{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    padding:10px;
  }

  .micro-stat{
    min-width:0;
    padding:9px 8px;
    border-radius:11px;
    text-align:center;
  }

  .micro-stat:last-child{display:block}
  .micro-stat span{font-size:8px;letter-spacing:.06em}
  .micro-stat strong{font-size:12px;white-space:nowrap}

  .floating-profile{
    width:112px;
    padding:6px;
    border-radius:14px;
    animation:none;
  }

  .floating-profile img{height:68px;border-radius:9px}
  .floating-profile strong{margin:7px 0 2px;font-size:10px}
  .floating-profile small{font-size:8px}
  .float-one{top:0;right:-3px}
  .float-two{display:none}

  .live-pill{
    left:14px;
    right:auto;
    bottom:5px;
    padding:8px 10px;
    font-size:9px;
  }

  /*
     Ordem do hero no mobile:
     título → prévia visual → texto → botões → prova social.
     O desktop permanece com as duas colunas originais.
  */
  .hero-grid{row-gap:0}

  .hero-content{
    display:contents;
    max-width:100%;
  }

  .hero-content>h1{
    order:1;
    position:relative;
    z-index:3;
  }

  .hero-grid>.hero-visual{
    order:2;
    margin:0 0 24px;
  }

  .hero-content>.hero-copy{
    order:3;
    position:relative;
    z-index:3;
  }

  .hero-content>.hero-actions{
    order:4;
    position:relative;
    z-index:3;
  }

  .hero-content>.hero-trust{
    order:5;
    position:relative;
    z-index:3;
  }

  /* Faixa de benefícios */
  .marquee-track{padding:11px 0}
  .marquee-group{gap:25px;padding:0 13px}
  .marquee-item{gap:7px;font-size:11px}
  .marquee-item b{font-size:14px}

  /* Prévia da plataforma */
  .experience{padding-top:74px}

  .experience-shell{
    padding:10px;
    border-radius:21px;
    box-shadow:0 22px 60px rgba(0,0,0,.44);
  }

  /* Benefícios */
  .feature-grid{grid-template-columns:1fr;gap:11px}

  .feature-card{
    min-height:0;
    padding:20px;
    border-radius:18px;
  }

  .feature-card:hover{transform:none}

  .feature-number{
    position:absolute;
    top:20px;
    right:20px;
    font-size:9px;
  }

  .feature-icon{
    width:42px;
    height:42px;
    margin:0 0 16px;
    border-radius:13px;
  }

  .feature-icon svg{width:20px;height:20px}
  .feature-card h3{margin-bottom:7px;font-size:17px}
  .feature-card p{font-size:12.5px;line-height:1.5}

  /* Em alta: carrossel nativo por toque */
  .trending-grid{
    display:flex;
    grid-template-columns:none;
    gap:12px;
    margin-right:calc(var(--mobile-gutter) * -1);
    padding-right:var(--mobile-gutter);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-left:0;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
  }

  .trending-grid::-webkit-scrollbar{display:none}

  .trend-card,
  .trend-card:last-child{
    flex:0 0 min(84vw,330px);
    height:326px;
    grid-column:auto;
    border-radius:18px;
    scroll-snap-align:start;
  }

  .trend-card:hover{transform:none}
  .trend-content{left:16px;right:16px;bottom:15px;gap:10px}
  .trend-content h3{font-size:15px}
  .trend-content small{font-size:10px}
  .trend-badge{top:12px;left:12px;font-size:9px}
  .trend-metric{padding:6px 8px;font-size:10px}
  .trend-lock{inset:0 0 58px}

  /* Passos */
  .steps{grid-template-columns:1fr;gap:0}

  .step-card{
    min-height:0;
    padding:21px 0 21px 52px;
    border-top:1px solid var(--line);
  }

  .step-card:last-child{padding-bottom:0}

  .step-card::before{
    position:absolute;
    top:21px;
    left:0;
    width:36px;
    height:36px;
    margin:0;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,107,18,.24);
    border-radius:12px;
    background:var(--orange-soft);
    font-size:9px;
  }

  .step-line{top:-1px}
  .step-card h3{margin:0 0 6px;font-size:19px}
  .step-card p{max-width:none;font-size:13px;line-height:1.55}

  /* Oferta */
  .pricing-wrap{
    margin-inline:-2px;
    padding:24px 13px 20px;
    border-radius:22px;
  }

  .pricing-head{margin-bottom:24px}
  .pricing-head h2{margin-bottom:10px;font-size:34px;line-height:1.02}
  .pricing-head p{font-size:13px;line-height:1.55}

  .offer-shell{grid-template-columns:1fr;gap:11px}

  .offer-main,
  .offer-price-card{
    padding:21px 18px;
    border-radius:18px;
  }

  .offer-price-card{order:-1}
  .offer-badge{font-size:8px}
  .offer-main h3{margin:17px 0 10px;font-size:24px;line-height:1.08}
  .offer-description{margin-bottom:19px;font-size:13px;line-height:1.55}
  .offer-benefits{grid-template-columns:1fr;gap:10px}
  .offer-benefits span{font-size:12px;line-height:1.4}

  .price-label{font-size:9px}
  .intro-price{margin:10px 0 7px}
  .intro-price small{font-size:15px;margin-bottom:9px}
  .intro-price strong{font-size:64px}
  .intro-price em{font-size:22px;margin-bottom:7px}
  .next-price{margin-bottom:18px;font-size:12px}
  .offer-price-card .btn{min-height:52px;padding:14px 16px}
  .renewal-note{margin-top:13px;font-size:9.5px;line-height:1.55}

  .secure-row{
    display:grid;
    grid-template-columns:1fr;
    justify-items:start;
    gap:8px;
    margin-top:16px;
    padding:0 5px;
    text-align:left;
    font-size:9.5px;
  }

  /* Depoimentos */
  .testimonial-track{gap:11px}

  .testimonial{
    flex-basis:100%;
    min-height:220px;
    padding:20px;
    border-radius:18px;
  }

  .quote-mark{font-size:28px}
  .testimonial p{margin:13px 0 22px;font-size:13px;line-height:1.58}
  .testimonial-user img{width:39px;height:39px}
  .testimonial-user strong{font-size:12px}
  .testimonial-user small{font-size:10px}

  .carousel-controls{margin-top:13px;gap:7px}
  .carousel-controls button{width:44px;height:44px;border-radius:13px}

  /* FAQ */
  .faq-wrap{grid-template-columns:1fr;gap:26px}
  .faq-q{min-height:62px;padding:17px 0;gap:14px;font-size:14px;line-height:1.4}
  .faq-q span:last-child{font-size:20px}
  .faq-a p{padding:0 0 19px;font-size:13px;line-height:1.58}

  /* CTA final */
  .final-cta{padding-bottom:70px}

  .cta-box{
    min-height:0;
    padding:32px 21px;
    align-items:flex-start;
    border-radius:22px;
  }

  .cta-content{max-width:100%}
  .cta-content h2{margin-bottom:14px;font-size:38px;line-height:1;letter-spacing:-.055em}
  .cta-content p{font-size:14px;line-height:1.58}
  .cta-content .btn{width:100%;margin-top:10px;padding:14px 18px}
  .cta-orbit{right:-120px;bottom:-120px;top:auto;opacity:.28;animation:none}

  /* Rodapé */
  .x-site-footer,
  footer{
    padding:40px 0 calc(28px + env(safe-area-inset-bottom));
  }

  .x-footer-grid,
  .footer-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:28px;
  }

  .x-footer-brand .x-brand img{width:136px}
  .x-footer-brand p{max-width:none;font-size:12px;line-height:1.6}
  .x-footer-col h2{margin:0 0 12px;font-size:12px}
  .x-footer-col a{min-height:38px;margin:0;display:flex;align-items:center;font-size:12px}

  .x-footer-bottom,
  .footer-bottom{
    display:grid;
    gap:6px;
    margin-top:28px;
    padding-top:18px;
    font-size:10px;
    line-height:1.5;
  }

  /* CTA fixa */
  .mobile-sticky-cta{
    height:auto;
    min-height:74px;
    padding:10px var(--mobile-gutter) calc(10px + env(safe-area-inset-bottom));
    gap:12px;
    background:rgba(7,7,8,.96);
    border-top-color:rgba(255,255,255,.11);
    box-shadow:0 -14px 40px rgba(0,0,0,.54);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }

  .mobile-sticky-cta>div{min-width:76px}
  .mobile-sticky-cta small{font-size:8px}
  .mobile-sticky-cta strong{font-size:19px;line-height:1.1}
  .mobile-sticky-cta .btn{
    min-width:148px;
    min-height:48px;
    padding:12px 17px;
    border-radius:14px;
  }

  /* Modal mobile */

  /* Evita estados hover “presos” em telas de toque */
  .btn:hover,
  .plan:hover,
  .trend-card:hover,
  .feature-card:hover{transform:none}
}

@media (max-width:380px){
  :root{--mobile-gutter:14px}
  .hero h1{font-size:36px}
  .section-title{font-size:29px}
  .hero-visual{min-height:385px}
  .hero-photo{height:224px}
  .floating-profile{width:104px}
  .trend-card,.trend-card:last-child{flex-basis:86vw;height:306px}
  .pricing-head h2{font-size:31px}
  .cta-content h2{font-size:34px}
  .mobile-sticky-cta .btn{min-width:132px;padding-inline:14px}
}

@media (max-width:720px) and (prefers-reduced-motion:reduce){
  .marquee-track,
  .floating-profile,
  .cta-orbit,
  .cta-pulse::after,
  .lock-icon{animation:none!important}
}

/* =========================================================
   PRODUCT DESIGN / PERFORMANCE PASS
   ========================================================= */
:root{
  --ease-product:cubic-bezier(.22,1,.36,1);
  --ease-standard:cubic-bezier(.2,.8,.2,1);
  --motion-fast:220ms;
  --motion-medium:520ms;
  --scroll-progress:0;
}

/* Progressive image decoding: preserves layout and avoids decode spikes. */
img{
  image-rendering:auto;
  -webkit-user-drag:none;
  backface-visibility:hidden;
}
img.image-pending{opacity:0}
img.image-pending.is-decoded{opacity:1}
.avatar-stack img,.mini-profile img,.story img,.suggestion img,.testimonial-user img,
.floating-profile img,.hero-photo img,.feed-card-media img,.trend-card img{
  transition:opacity .32s ease,transform .72s var(--ease-product),filter .55s ease;
}

/* Better perceived sharpness while keeping previews visibly locked. */
.hero-photo img{
  filter:blur(4.25px) brightness(.64) saturate(.9) contrast(1.08);
  transform:scale(1.035) translateZ(0);
}
.trend-card img{
  filter:blur(5.5px) brightness(.6) saturate(.9) contrast(1.08);
  transform:scale(1.045) translateZ(0);
}
.trend-card:hover img{
  filter:blur(4.5px) brightness(.64) saturate(.98) contrast(1.08);
  transform:scale(1.07) translateZ(0);
}
.hero-photo::after{
  background:linear-gradient(to top,rgba(5,5,5,.9),transparent 50%),linear-gradient(90deg,rgba(5,5,5,.16),transparent 40%);
}

/* Lower first-render cost for sections outside the viewport. */
main>section:not(.hero){
  content-visibility:auto;
  contain-intrinsic-size:1px 820px;
}
.experience-shell,.feature-card,.trend-card,.cta-box{contain:paint}

/* Scroll progress integrated into the existing sticky header. */
.site-header::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:2px;
  background:linear-gradient(90deg,var(--orange),var(--orange-2));
  transform:scaleX(var(--scroll-progress));
  transform-origin:left;
  opacity:.78;
  pointer-events:none;
  will-change:transform;
}

/* More natural reveal motion and lighter GPU work. */
.reveal{
  opacity:0;
  transform:translate3d(0,24px,0) scale(.99);
  transition:
    opacity .62s var(--ease-standard) var(--reveal-delay,0ms),
    transform .78s var(--ease-product) var(--reveal-delay,0ms);
  will-change:opacity,transform;
}
.reveal.visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  will-change:auto;
}
.hero-content.visible>h1,
.hero-content.visible>.hero-copy,
.hero-content.visible>.hero-actions,
.hero-content.visible>.hero-trust{
  animation:productHeroIn .72s var(--ease-product) both;
}
.hero-content.visible>.hero-copy{animation-delay:.08s}
.hero-content.visible>.hero-actions{animation-delay:.15s}
.hero-content.visible>.hero-trust{animation-delay:.22s}
@keyframes productHeroIn{
  from{opacity:0;transform:translate3d(0,16px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

/* Buttons: restrained highlight rather than a heavy glow. */
.btn,.x-btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transform:translateZ(0);
  transition:transform .28s var(--ease-product),box-shadow .32s ease,background .25s ease,border-color .25s ease,color .25s ease;
}
.btn::before,.x-btn::before{
  content:"";
  position:absolute;
  inset:-2px auto -2px -45%;
  width:34%;
  z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.2),transparent);
  transform:skewX(-18deg) translateX(-180%);
  transition:transform .72s var(--ease-product);
  pointer-events:none;
}
.btn:hover::before,.x-btn:hover::before{transform:skewX(-18deg) translateX(520%)}
.btn:active,.x-btn:active{transform:translateY(0) scale(.985)}

/* Cards and media use one consistent motion language. */
.main-card{
  transition:transform .48s var(--ease-product),box-shadow .45s ease,border-color .35s ease;
  will-change:transform;
}
.feature-card,.trend-card,.plan,.testimonial{
  transition:transform .45s var(--ease-product),border-color .3s ease,box-shadow .45s ease,background .35s ease;
}
.feature-card::after,.plan::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  border:1px solid transparent;
  background:linear-gradient(135deg,rgba(255,145,56,.28),transparent 38%,transparent 70%,rgba(255,107,18,.12)) border-box;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
.feature-card:hover::after,.plan:hover::after,.plan.selected::after{opacity:1}
.feature-card:hover,.trend-card:hover{
  box-shadow:0 24px 60px rgba(0,0,0,.34),0 0 0 1px rgba(255,107,18,.05);
}
.trend-overlay{transition:opacity .45s ease}
.trend-card:hover .trend-overlay{opacity:.88}

/* Preview tab changes fade rather than snapping. */

/* FAQ and carousel micro-interactions. */
.faq-a p{
  opacity:0;
  transform:translate3d(0,-7px,0);
  transition:opacity .26s ease,transform .38s var(--ease-product);
}
.faq-item.open .faq-a p{opacity:1;transform:none}
.testimonial-track{
  transform:translate3d(0,0,0);
  transition:transform .62s var(--ease-product);
  will-change:transform;
  touch-action:pan-y;
}
.carousel-controls button{
  transition:transform .24s var(--ease-product),border-color .25s ease,color .25s ease,background .25s ease;
}
.carousel-controls button:active{transform:scale(.94)}

/* Expensive infinite animations pause outside the viewport or in hidden tabs. */
.marquee:not(.is-inview) .marquee-track,
.hero-visual:not(.is-inview) .floating-profile,
.final-cta:not(.is-inview) .cta-orbit,
.motion-paused .marquee-track,
.motion-paused .floating-profile,
.motion-paused .cta-orbit,
.motion-paused .lock-icon,
.motion-paused .cta-pulse::after{animation-play-state:paused!important}
.marquee:hover .marquee-track{animation-play-state:paused}

@media (hover:hover) and (pointer:fine){
  .btn:hover,.x-btn:hover{transform:translateY(-2px)}
  .feature-card:hover,.trend-card:hover{transform:translateY(-6px)}
}

@media (max-width:720px){
  .site-header,.x-site-header,.mobile-sticky-cta{
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }
  .floating-profile,.trend-card,.feature-card,.plan{will-change:auto}
  .hero-photo img{filter:blur(3.75px) brightness(.65) saturate(.92) contrast(1.08)}
  .trend-card img{filter:blur(4.75px) brightness(.62) saturate(.92) contrast(1.08)}
  main>section:not(.hero){contain-intrinsic-size:1px 700px}
}

@media (prefers-reduced-motion:reduce){
  .site-header::after{display:none}
  .reveal,.reveal.visible,
  .hero-content.visible>h1,.hero-content.visible>.hero-copy,
  .hero-content.visible>.hero-actions,.hero-content.visible>.hero-trust,
  .main-card,.feature-card,.trend-card,.plan,.testimonial,.testimonial-track,
  .btn,.x-btn,.faq-a p,.app-tabs button,.carousel-controls button{
    animation:none!important;
    transition:none!important;
    transform:none!important;
  }
  .btn::before,.x-btn::before{display:none}
}

/* =========================================================
   PLATAFORMA INTERATIVA — navegação interna inspirada no app
   ========================================================= */

@media (max-width:720px){
  .mobile-sticky-cta{transition:transform .25s ease,opacity .2s ease}
  body.platform-demo-inview .mobile-sticky-cta{
    opacity:0;
    pointer-events:none;
    transform:translateY(calc(100% + 24px));
  }
}

/* =========================================================
   PRODUCT DESIGN REFINEMENT — preview da plataforma
   Hierarquia clara, telas ilustrativas e componentes leves.
   ========================================================= */

/* Home: visão geral simples antes do feed. */

/* Em alta: números rápidos + cards visuais. */

/* Vídeos: explicação compacta + preview vertical. */

/* Busca: sugestões clicáveis e leitura mais limpa. */

/* Perfil: resumo rápido antes das configurações. */

/* =========================================================
   PREVIA INTERATIVA (#xdApp) — reconstrucao desktop + mobile
   ========================================================= */
/* ============ PRÉVIA INTERATIVA — reconstrução desktop + mobile ============ */
#xdApp{
  --xa-orange:#ff6b12;
  --xa-orange-2:#ff9b4a;
  --xa-orange-soft:rgba(255,107,18,.13);
  --xa-bg:#070709;
  --xa-panel:#0d0d11;
  --xa-panel-2:#131318;
  --xa-text:#f7f7f8;
  --xa-muted:#96969f;
  --xa-line:rgba(255,255,255,.09);
  --xa-line-strong:rgba(255,126,47,.32);
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:108px minmax(0,1fr);
  grid-template-rows:70px minmax(0,1fr);
  width:100%;
  height:clamp(560px,calc(100svh - 68px),700px);
  min-height:0;
  overflow:visible;
  border:1px solid var(--xa-line-strong);
  border-radius:28px;
  color:var(--xa-text);
  background:
    radial-gradient(75% 42% at 48% -18%,rgba(255,107,18,.15),transparent 72%),
    linear-gradient(180deg,#0b0b0e 0%,#070709 56%,#060608 100%);
  box-shadow:0 34px 100px rgba(0,0,0,.56),inset 0 1px 0 rgba(255,255,255,.055);
  font-size:14px;
  line-height:1.45;
}
#xdApp::before{
  content:"";
  position:absolute;
  inset:70px 0 0;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.017) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);
  background-size:36px 36px;
  mask-image:linear-gradient(to bottom,black 0%,rgba(0,0,0,.72) 48%,transparent 100%);
}
#xdApp *{box-sizing:border-box}
#xdApp button,#xdApp a{font:inherit}
#xdApp button{color:inherit}
#xdApp section,#xdApp article,#xdApp nav,#xdApp aside{padding:0;margin:0;scroll-margin:0}
#xdApp img,#xdApp svg{display:block}
#xdApp :focus-visible{outline:2px solid var(--xa-orange);outline-offset:3px}
.xa-floating-peeks{position:absolute;top:-18px;right:18px;z-index:6;min-height:40px;display:inline-flex;align-items:center;gap:8px;padding:0 14px;border:1px solid rgba(255,126,47,.34);border-radius:999px;background:linear-gradient(180deg,rgba(24,24,30,.98),rgba(14,14,18,.94));box-shadow:0 18px 40px rgba(0,0,0,.32);color:#ececf0;font-size:11px;font-weight:820;letter-spacing:.01em;white-space:nowrap}
.xa-floating-peeks .xa-icon{width:15px;height:15px;color:var(--xa-orange)}
.xa-floating-peeks.out{color:#ffb18a;border-color:rgba(255,107,18,.42);background:rgba(18,18,24,.98)}
.xa-icon{width:18px;height:18px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.xa-icon.fill{fill:currentColor;stroke:none}

/* Cabeçalho */
.xa-top{
  grid-column:1/-1;
  grid-row:1;
  display:flex;
  align-items:center;
  gap:14px;
  min-height:70px;
  padding:12px 18px 12px 20px;
  border-bottom:1px solid var(--xa-line);
  background:rgba(9,9,12,.82);
  backdrop-filter:blur(18px);
}
.xa-brand{height:26px;width:auto;flex:0 0 auto}
.xa-word{align-items:center;font-size:18px;font-weight:850;letter-spacing:-.045em}
.xa-word b{color:var(--xa-orange)}
.xa-badge{
  min-height:27px;
  display:inline-flex;
  align-items:center;
  padding:0 11px;
  border:1px solid rgba(255,107,18,.36);
  border-radius:999px;
  background:rgba(255,107,18,.09);
  color:#ffc29a;
  font-size:9px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
}
.xa-peeks{
  display:none;
  margin-left:auto;
  min-height:36px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 13px;
  border:1px solid var(--xa-line);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:#d0d0d6;
  font-size:11px;
  font-weight:760;
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.xa-peeks .xa-icon{width:15px;height:15px;color:var(--xa-orange)}
.xa-peeks.out{color:#ffb18a;border-color:rgba(255,107,18,.42);background:rgba(255,107,18,.07)}
.xa-cta{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 17px;
  border:0;
  border-radius:13px;
  background:linear-gradient(135deg,var(--xa-orange),var(--xa-orange-2));
  color:#241007;
  box-shadow:0 13px 32px rgba(255,107,18,.27);
  text-decoration:none;
  font-size:13px;
  font-weight:850;
  white-space:nowrap;
  transition:transform .2s,box-shadow .2s,filter .2s;
}
.xa-cta .xa-icon{width:15px;height:15px}
.xa-cta:hover{transform:translateY(-1px);filter:saturate(1.06);box-shadow:0 17px 40px rgba(255,107,18,.37)}
#xdApp.is-profile .xa-top>.xa-cta{display:none}

/* Navegação desktop */
.xa-tabs{
  grid-column:1;
  grid-row:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  min-height:0;
  padding:26px 12px 18px;
  border-right:1px solid var(--xa-line);
  background:linear-gradient(180deg,rgba(12,12,15,.72),rgba(7,7,9,.3));
}
.xa-tab{
  width:82px;
  min-height:86px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:10px 7px;
  border:1px solid transparent;
  border-radius:19px;
  background:transparent;
  color:#aaaab2;
  font-size:11.5px;
  font-weight:760;
  text-align:center;
  cursor:pointer;
  transition:background .24s,border-color .24s,color .24s,transform .24s,box-shadow .24s;
}
.xa-tab:hover{color:#fff;background:rgba(255,255,255,.035);transform:translateY(-1px)}
.xa-tab.on{
  color:#fff;
  border-color:rgba(255,107,18,.38);
  background:linear-gradient(145deg,rgba(255,107,18,.23),rgba(255,107,18,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 30px rgba(0,0,0,.2);
}
.xa-tab-icon{
  width:39px;
  height:39px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:rgba(255,255,255,.045);
  color:#c2c2ca;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:background .24s,color .24s,transform .24s,box-shadow .24s;
}
.xa-tab-icon svg{
  width:20px;
  height:20px;
  display:block;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.xa-tab:hover .xa-tab-icon{color:#fff;background:rgba(255,255,255,.075)}
.xa-tab.on .xa-tab-icon{color:var(--xa-orange-2);background:rgba(255,107,18,.15);box-shadow:0 0 0 1px rgba(255,107,18,.14),0 8px 20px rgba(255,107,18,.10);transform:scale(1.03)}

/* Painéis */
.xa-pane{
  grid-column:2;
  grid-row:2;
  display:none;
  min-width:0;
  min-height:0;
  overflow:hidden;
  overscroll-behavior:contain;
  padding:18px 24px 24px;
  scrollbar-width:none;
  scrollbar-color:transparent transparent;
}
.xa-pane::-webkit-scrollbar{display:none}
.xa-pane::-webkit-scrollbar-thumb{background:rgba(255,107,18,.28);border-radius:99px}
.xa-pane.on{display:block;animation:xaPaneIn .38s cubic-bezier(.2,.8,.2,1) both}

/* Stories */
.xa-stories,.xa-switch{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  width:min(920px,100%);
  margin:0 auto;
  padding:2px 18px 15px;
  overflow-x:auto;
  border-bottom:1px solid var(--xa-line);
  scrollbar-width:none;
}
.xa-stories::-webkit-scrollbar,.xa-switch::-webkit-scrollbar,.xa-chips::-webkit-scrollbar{display:none}
.xa-sbtn,.xa-sw{
  flex:0 0 auto;
  width:66px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:0;
  border:0;
  background:none;
  color:#b8b8c0;
  cursor:pointer;
  transition:transform .2s,color .2s;
}
.xa-sbtn:hover,.xa-sw:hover{transform:translateY(-2px);color:#fff}
.xa-sbtn>span,.xa-sw>span{
  width:58px;
  height:58px;
  display:block;
  padding:2px;
  border-radius:50%;
  background:conic-gradient(from 150deg,var(--xa-orange),#ff4f8b,var(--xa-orange-2),var(--xa-orange));
  box-shadow:0 8px 22px rgba(0,0,0,.22);
}
.xa-sbtn img,.xa-sw img{
  width:100%;
  height:100%;
  border:2px solid #09090c;
  border-radius:50%;
  object-fit:cover;
  filter:none;
  transform:none;
}
.xa-sbtn b,.xa-sw b{max-width:66px;overflow:hidden;color:inherit;font-size:9.5px;font-weight:720;text-overflow:ellipsis;white-space:nowrap}

/* Início */
.xa-feed{
  display:grid;
  width:min(860px,100%);
  margin:16px auto 0;
}
.xa-post{
  overflow:hidden;
  border:1px solid var(--xa-line);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(20,20,24,.82),rgba(9,9,12,.94));
  box-shadow:0 24px 66px rgba(0,0,0,.3);
}
.xa-phead{min-height:60px;display:flex;align-items:center;gap:11px;padding:11px 15px}
.xa-phead>img{width:37px;height:37px;flex:0 0 auto;border:1px solid rgba(255,255,255,.14);border-radius:50%;object-fit:cover}
.xa-phead div{min-width:0;flex:1}
.xa-phead strong{display:flex;align-items:center;gap:6px;font-size:13px;letter-spacing:-.01em}
.xa-phead small{display:block;margin-top:2px;color:var(--xa-muted);font-size:10.5px}
.xa-verified{width:15px;height:15px;display:grid;place-items:center;border-radius:50%;background:var(--xa-orange);color:#190902}
.xa-verified .xa-icon{width:9px;height:9px;stroke-width:2.5}
.xa-ghost{
  min-height:36px;
  padding:0 13px;
  border:1px solid var(--xa-line);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:#e3e3e7;
  font-size:11px;
  font-weight:760;
  cursor:pointer;
  transition:background .2s,border-color .2s;
}
.xa-ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.xa-media{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  overflow:hidden;
  border:0;
  background:#09090b;
  cursor:pointer;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.xa-post .xa-media{aspect-ratio:16/8.6}
.xa-media img{width:100%;height:100%;object-fit:cover;filter:blur(13px) brightness(.64) saturate(.92);transform:scale(1.14);transition:filter .4s,transform .52s,opacity .35s}
.xa-media.peek img{filter:blur(2.5px) brightness(1) saturate(1.04);transform:scale(1.03)}
.xa-hint{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#fff;pointer-events:none;background:radial-gradient(circle at center,transparent,rgba(0,0,0,.14) 72%);transition:opacity .25s}
.xa-media.peek .xa-hint{opacity:0}
.xa-lock{width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(255,126,48,.52);border-radius:16px;background:rgba(10,10,12,.62);box-shadow:0 0 0 8px rgba(255,107,18,.055),0 14px 34px rgba(0,0,0,.34);backdrop-filter:blur(8px)}
.xa-lock .xa-icon{width:20px;height:20px;color:#ffc08f}
.xa-hint>span:last-child{font-size:11.5px;font-weight:780;text-shadow:0 2px 12px #000}
.xa-flag{position:absolute;left:12px;top:12px;padding:6px 10px;border:1px solid rgba(255,107,18,.32);border-radius:999px;background:rgba(10,10,12,.65);color:#ffc39a;font-size:9px;font-weight:850;letter-spacing:.11em;text-transform:uppercase;backdrop-filter:blur(7px)}
.xa-ring{position:absolute;right:10px;bottom:10px;width:24px;height:24px;border-radius:50%;opacity:0;pointer-events:none;background:conic-gradient(var(--xa-orange) calc(var(--p,0)*1%),rgba(255,255,255,.2) 0);-webkit-mask:radial-gradient(circle,transparent 7px,#000 8px);mask:radial-gradient(circle,transparent 7px,#000 8px);transition:opacity .2s}
.xa-media.peek .xa-ring{opacity:1}
.xa-acts{min-height:56px;display:flex;align-items:center;gap:17px;padding:10px 15px}
.xa-act{min-height:34px;display:inline-flex;align-items:center;gap:7px;padding:0;border:0;background:none;color:#c4c4cb;font-size:11.5px;font-weight:730;cursor:pointer;transition:color .2s,transform .2s}
.xa-act .xa-icon{width:18px;height:18px}
.xa-act:hover{color:#fff;transform:translateY(-1px)}
.xa-act.on{color:var(--xa-orange-2)}
.xa-act.on .xa-icon{fill:currentColor}

/* Vídeos */
.xa-pane[data-pane="videos"]{padding-top:16px}
.xa-chips{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:min(880px,100%);margin:0 auto 16px;padding:2px 0 0;overflow:hidden;scrollbar-width:none}
.xa-chip{min-height:40px;display:inline-flex;align-items:center;gap:7px;padding:0 16px;border:1px solid var(--xa-line);border-radius:999px;background:rgba(255,255,255,.025);color:#b8b8c0;font-size:11.5px;font-weight:760;cursor:pointer;transition:all .2s}
.xa-chip .xa-icon{width:14px;height:14px;stroke-width:2}
.xa-chip .xa-emoji{font-size:14px;line-height:1}
.xa-chip:hover{color:#fff;border-color:rgba(255,255,255,.16)}
.xa-chip.on{color:#241007;border-color:transparent;background:linear-gradient(135deg,var(--xa-orange),var(--xa-orange-2));box-shadow:0 10px 26px rgba(255,107,18,.2)}
.xa-videos-stage{display:grid;justify-items:center;width:min(900px,100%);margin:0 auto}
.xa-video-card{width:min(820px,100%)}
.xa-video-card[hidden]{display:none!important}
.xa-video-card .xa-media{border:1px solid var(--xa-line);border-radius:21px;box-shadow:0 22px 60px rgba(0,0,0,.27);transition:transform .24s,border-color .24s,box-shadow .24s}
.xa-video-card .xa-media:hover{transform:translateY(-2px);border-color:rgba(255,107,18,.28);box-shadow:0 27px 68px rgba(0,0,0,.34)}
.xa-video-card.is-wide .xa-media{aspect-ratio:16/9}
.xa-video-card.is-tall{width:min(330px,100%)}
.xa-video-card.is-tall .xa-media{aspect-ratio:9/16}
.xa-play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(10,10,12,.58);color:#fff;backdrop-filter:blur(8px);transition:opacity .3s,transform .3s}
.xa-play .xa-icon{width:15px;height:15px;margin-left:2px;fill:currentColor;stroke:none}
.xa-play::after{content:"";position:absolute;inset:-1px;border:1px solid rgba(255,107,18,.58);border-radius:50%;animation:xaPing 2.6s ease-out infinite}
.xa-media.peek .xa-play{opacity:0;transform:scale(.82)}
.xa-time{position:absolute;right:10px;top:10px;padding:4px 8px;border-radius:999px;background:rgba(10,10,12,.7);color:#fff;font-size:9px;font-weight:780;backdrop-filter:blur(5px)}
.xa-who{position:absolute;left:13px;bottom:12px;color:#f2f2f4;font-size:10.5px;font-weight:750;text-shadow:0 2px 10px rgba(0,0,0,.75);transition:opacity .3s}
.xa-media.peek .xa-who{opacity:0}
.xa-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 5px 0;color:var(--xa-muted);font-size:11px;font-weight:680}
.xa-meta strong{display:block;color:#f2f2f4;font-size:14px;font-weight:780;letter-spacing:-.01em}
.xa-meta div>span{display:block;margin-top:3px;color:var(--xa-muted)}
.xa-video-tag{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border:1px solid rgba(255,107,18,.22);border-radius:999px;background:rgba(255,107,18,.09);color:#ffb27d;font-size:10px;font-weight:820;white-space:nowrap}
.xa-more{width:min(900px,100%);min-height:62px;display:flex;align-items:center;justify-content:center;gap:14px;margin:18px auto 0;padding:10px 16px;border:1px dashed rgba(255,107,18,.3);border-radius:17px;background:rgba(255,107,18,.03);color:var(--xa-muted);font-size:11.5px;font-weight:690}
.xa-more .xa-cta{min-height:40px}

/* Perfil */
.xa-profile-body{width:min(980px,100%);margin:0 auto;display:grid;gap:12px}
 .xa-cover{position:relative;height:116px;overflow:hidden;border:1px solid var(--xa-line);border-radius:20px;background:#0b0b0e;box-shadow:0 16px 45px rgba(0,0,0,.22)}
.xa-cover img{width:100%;height:100%;object-fit:cover;filter:blur(8px) brightness(.74) saturate(1.04);transform:scale(1.08)}
.xa-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,7,9,.04),rgba(7,7,9,.82))}
.xa-prof{position:relative;z-index:2;display:flex;align-items:flex-end;gap:14px;margin-top:-44px;padding:0 12px}
.xa-face{width:74px;height:74px;flex:0 0 auto;padding:2px;border-radius:23px;background:linear-gradient(140deg,var(--xa-orange),#ff4f8b);box-shadow:0 12px 28px rgba(0,0,0,.28)}
.xa-face img{width:100%;height:100%;border:2px solid #09090c;border-radius:21px;object-fit:cover;filter:none}
.xa-id{flex:1;min-width:0;padding-bottom:5px}
.xa-id strong{display:flex;align-items:center;gap:6px;font-size:18px;letter-spacing:-.03em}
.xa-id small{display:block;margin-top:3px;color:var(--xa-muted);font-size:11px}
.xa-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.xa-stat{padding:12px 14px;border:1px solid var(--xa-line);border-radius:15px;background:rgba(255,255,255,.025);box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}
.xa-stat b{display:block;font-size:17px;letter-spacing:-.025em}
.xa-stat span{display:block;margin-top:3px;color:var(--xa-muted);font-size:8.5px;font-weight:780;letter-spacing:.09em;text-transform:uppercase}
.xa-grid{display:grid;gap:12px}
.xa-grid.sq{grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
 .xa-grid.sq .xa-media{aspect-ratio:.95;border:1px solid var(--xa-line);border-radius:18px;box-shadow:0 18px 45px rgba(0,0,0,.22);transition:transform .24s,border-color .24s}
.xa-grid.sq .xa-media:hover{transform:translateY(-3px);border-color:rgba(255,107,18,.28)}
#xdApp.profile-swap .xa-cover,#xdApp.profile-swap .xa-prof,#xdApp.profile-swap .xa-stats,#xdApp.profile-swap .xa-grid.sq{animation:xaProfileSwap .7s cubic-bezier(.22,.7,.18,1) both}

/* Overlays */
.xa-over{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(7,7,9,.9);backdrop-filter:blur(12px);animation:xaFade .22s ease both}
.xa-over[hidden]{display:none}
.xa-frame{position:relative;width:min(310px,100%);height:100%;max-height:min(540px,100%);aspect-ratio:9/16;overflow:hidden;border:1px solid var(--xa-line);border-radius:20px;background:#09090b;box-shadow:0 28px 80px rgba(0,0,0,.52)}
.xa-frame>img{width:100%;height:100%;object-fit:cover;filter:blur(15px) brightness(.74) saturate(1.04);transform:scale(1.14)}
.xa-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,10,.58),transparent 32%,rgba(8,8,10,.88))}
.xa-bars{position:absolute;left:10px;right:10px;top:10px;z-index:4;display:flex;gap:4px}
.xa-bars i{flex:1;height:3px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.28)}
.xa-bars i b{display:block;width:0;height:100%;background:#fff}
.xa-bars i.done b{width:100%}.xa-bars i.run b{animation:xaBar 5s linear forwards}
.xa-shead{position:absolute;left:12px;top:25px;z-index:4;display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:730}
.xa-shead img{width:29px;height:29px;border:1px solid rgba(255,255,255,.3);border-radius:50%;object-fit:cover;filter:none}
.xa-x{position:absolute;right:10px;top:23px;z-index:5;width:32px;height:32px;border:1px solid var(--xa-line);border-radius:50%;background:rgba(10,10,12,.55);color:#fff;font-size:18px;line-height:1;cursor:pointer}
.xa-nav{position:absolute;top:56px;bottom:104px;z-index:3;width:45%;border:0;background:none;cursor:pointer}
.xa-nav.prev{left:0}.xa-nav.next{right:0;width:55%}
.xa-sfoot{position:absolute;left:14px;right:14px;bottom:14px;z-index:4;display:grid;gap:9px;justify-items:center;text-align:center}
.xa-sfoot span{font-size:11.5px;font-weight:720}
.xa-card{position:relative;width:min(410px,100%);padding:22px;border:1px solid rgba(255,107,18,.3);border-radius:22px;background:linear-gradient(180deg,#17171c,#0d0d11);box-shadow:0 28px 90px rgba(0,0,0,.55);animation:xaPopIn .3s cubic-bezier(.2,.8,.3,1) both}
.xa-card h3{margin:8px 0 0;font-size:23px;line-height:1.15;letter-spacing:-.03em}
.xa-kick{color:#ffc39a;font-size:9px;font-weight:850;letter-spacing:.14em;text-transform:uppercase}
.xa-plans{display:flex;gap:9px;margin:16px 0}
.xa-plan{flex:1;display:grid;gap:2px;padding:12px;border:1px solid var(--xa-line);border-radius:14px;background:rgba(255,255,255,.02);text-align:left;cursor:pointer;transition:all .2s}
.xa-plan.on{border-color:rgba(255,107,18,.55);background:rgba(255,107,18,.12)}
.xa-plan em{color:var(--xa-muted);font-size:11px;font-style:normal;font-weight:700}.xa-plan b{font-size:19px;letter-spacing:-.02em}.xa-plan span{color:var(--xa-orange-2);font-size:10px;font-weight:700}
.xa-perks{display:grid;gap:8px;margin-bottom:16px;color:#d7d7dc;font-size:12.5px}.xa-perks div{display:flex;align-items:center;gap:8px}.xa-perks i{width:18px;height:18px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:rgba(255,107,18,.16);color:var(--xa-orange);font-size:10px;font-style:normal}
.xa-buy{min-height:48px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:linear-gradient(135deg,var(--xa-orange),var(--xa-orange-2));color:#231006;box-shadow:0 14px 34px rgba(255,107,18,.28);text-decoration:none;font-size:14px;font-weight:850;transition:transform .2s}.xa-buy:hover{transform:translateY(-2px)}
.xa-fine{margin:10px 0 0;color:#7b7b84;text-align:center;font-size:10.5px}
.xd-toast{position:absolute;left:50%;bottom:14px;z-index:50;translate:-50% 0;max-width:84%;padding:10px 14px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(18,18,22,.96);box-shadow:0 16px 40px rgba(0,0,0,.5);opacity:0;transform:translateY(10px);pointer-events:none;color:#efeff2;text-align:center;font-size:11.5px;font-weight:680;transition:opacity .25s,transform .25s}.xd-toast.on{opacity:1;transform:translateY(0)}

@keyframes xaPaneIn{from{opacity:0;transform:translateY(7px)}}
@keyframes xaSwap{from{opacity:0;transform:translateY(8px)}}
@keyframes xaProfileSwap{0%{opacity:.42;transform:translateY(10px) scale(.987)}58%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:1;transform:none}}
@keyframes xaFade{from{opacity:0}}
@keyframes xaPopIn{from{opacity:0;transform:translateY(18px) scale(.98)}}
@keyframes xaBar{from{width:0}to{width:100%}}
@keyframes xaPing{0%{transform:scale(1);opacity:.75}70%{transform:scale(1.45);opacity:0}100%{opacity:0}}

/* Tablet */
@media (max-width:900px){
  #xdApp{grid-template-columns:96px minmax(0,1fr);height:min(660px,calc(100svh - 26px));border-radius:24px}
  .xa-top{padding-inline:16px}
  .xa-brand{height:26px}
  .xa-tabs{padding:16px 8px}
  .xa-tab{width:76px;min-height:80px;font-size:11px}
  .xa-pane{padding:14px 16px 18px}
  .xa-feed{width:min(600px,100%)}
  .xa-video-card{width:min(720px,100%)}
  .xa-profile-body{width:min(820px,100%)}
}

/* Mobile */
@media (max-width:620px){
  #xdApp{
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(0,1fr);
    height:min(620px,calc(100svh - 10px));
    min-height:580px;
    border-radius:22px;
  }
  #xdApp::before{inset:90px 0 0;background-size:30px 30px}
  .xa-top{
    grid-column:1;
    grid-row:1;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto auto;
    gap:8px 10px;
    min-height:82px;
    padding:11px 12px 10px;
  }
  .xa-brand{height:22px}
  .xa-floating-peeks{top:-14px;right:12px;min-height:34px;padding:0 11px;font-size:9.8px}
  .xa-badge{display:none}
  .xa-peeks{grid-column:1;grid-row:2;justify-self:start;margin:0;min-height:32px;padding:0 10px;font-size:10px}
  .xa-top>.xa-cta{grid-column:2;grid-row:1/3;min-height:42px;padding:0 14px}
  #xdApp.is-profile .xa-top>.xa-cta{display:none}
  #xdApp.is-profile .xa-peeks{grid-column:1/-1}
  .xa-tabs{
    position:absolute;
    left:12px;
    right:12px;
    bottom:12px;
    z-index:20;
    grid-column:auto;
    grid-row:auto;
    height:auto;
    min-height:0;
    display:flex;
    flex-direction:row;
    gap:7px;
    padding:7px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:20px;
    background:rgba(10,10,13,.94);
    box-shadow:0 16px 42px rgba(0,0,0,.42);
    backdrop-filter:blur(18px);
  }
  .xa-tab{width:auto;min-height:58px;flex:1;gap:5px;padding:7px 5px;border-radius:15px;font-size:10.5px}
  .xa-tab-icon{width:32px;height:32px;border-radius:11px}
  .xa-tab-icon svg{width:17px;height:17px}
  .xa-pane{grid-column:1;grid-row:2;padding:10px 9px 90px;overflow:hidden}
  .xa-stories,.xa-switch{justify-content:space-between;width:100%;gap:8px;padding:2px 0 11px}
  .xa-sbtn,.xa-sw{width:48px;gap:4px}
  .xa-sbtn>span,.xa-sw>span{width:44px;height:44px}
  .xa-sbtn b,.xa-sw b{max-width:48px;font-size:7px}
  .xa-feed{width:100%;margin-top:10px}
  .xa-post{border-radius:19px}
  .xa-phead{min-height:52px;padding:8px 10px}
  .xa-phead>img{width:33px;height:33px}
  .xa-phead strong{font-size:11.5px}.xa-phead small{font-size:9px}
  .xa-ghost{min-height:32px;padding:0 10px;font-size:9.8px}
  .xa-post .xa-media{aspect-ratio:4/2.95;max-height:248px}
  .xa-flag{left:9px;top:9px;padding:5px 8px;font-size:8px}
  .xa-lock{width:46px;height:46px;border-radius:15px}
  .xa-acts{min-height:48px;gap:13px;padding:7px 11px}
  .xa-act{font-size:10px}.xa-act .xa-icon{width:17px;height:17px}
  .xa-pane[data-pane="videos"]{padding-top:10px}
  .xa-chips{justify-content:flex-start;width:100%;margin-bottom:10px;padding:2px 0 0}
  .xa-chip{min-height:38px;padding:0 14px;font-size:11px}
  .xa-videos-stage{width:100%}
  .xa-video-card{width:100%}
  .xa-video-card.is-wide .xa-media{aspect-ratio:16/9.6;border-radius:18px}
  .xa-video-card.is-tall{width:min(205px,100%)}
  .xa-meta{gap:10px;padding:11px 4px 0;align-items:flex-end}
  .xa-meta strong{font-size:14px}.xa-meta div>span{max-width:180px;font-size:10px;line-height:1.35}
  .xa-video-tag{padding:7px 9px;font-size:8.5px}
  .xa-more{min-height:58px;gap:8px;margin-top:10px;padding:8px 9px;font-size:9px;text-align:center}
  .xa-more .xa-cta{min-height:40px;padding:0 14px;font-size:11px}
  .xa-profile-body{width:100%;gap:11px}
  .xa-cover{height:72px;border-radius:18px}
  .xa-prof{gap:10px;margin-top:-24px;padding:0 6px}
  .xa-face{width:52px;height:52px;border-radius:16px}.xa-face img{border-radius:14px}
  .xa-id{padding-bottom:1px}.xa-id strong{font-size:13px}.xa-id small{font-size:8.5px}
  .xa-stats{gap:8px}
  .xa-stat{padding:7px 7px;border-radius:12px}.xa-stat b{font-size:12px}.xa-stat span{font-size:6.6px}
  .xa-grid{gap:7px}
  .xa-grid.sq{grid-template-columns:repeat(3,minmax(0,1fr))}
  .xa-grid.sq .xa-media{border-radius:12px}
  .xa-grid.sq .xa-hint{gap:7px}.xa-grid.sq .xa-lock{width:42px;height:42px;border-radius:14px}.xa-grid.sq .xa-hint>span:last-child{max-width:72px;font-size:9px;line-height:1.25;text-align:center}
  .xa-plans{flex-direction:column}
}

@media (max-width:370px){
  #xdApp{min-height:560px}
  .xa-brand{height:22px}
  .xa-floating-peeks{top:-14px;right:12px;min-height:34px;padding:0 11px;font-size:9.8px}
  .xa-top>.xa-cta{padding:0 11px;font-size:11px}
  .xa-peeks{font-size:9.5px}
  .xa-tab{font-size:10px}
  .xa-post .xa-media{aspect-ratio:4/2.9}
  .xa-video-tag{display:none}
}

@media (prefers-reduced-motion:reduce){
  #xdApp *,#xdApp *::before,#xdApp *::after{animation:none!important;transition-duration:.01ms!important}
}