/* ============================================================
   DuoPolos — VIBE LAYER
   More life, more color, more movement. Loaded AFTER the base
   stylesheet so these rules win. Blue + Amber stay the two poles;
   Violet + Magenta bridge them into a full spectrum.
   ============================================================ */

:root{
  --accent-violet:#8A5CFF;
  --accent-magenta:#FF4D9D;
  --accent-cyan:#19C9E3;
  --spectrum:linear-gradient(100deg,#1677FF 0%,#8A5CFF 34%,#FF4D9D 64%,#FF9F1A 100%);
  --spectrum-rev:linear-gradient(280deg,#1677FF 0%,#8A5CFF 34%,#FF4D9D 64%,#FF9F1A 100%);
  --glow-violet:rgba(138,92,255,0.32);
  --glow-magenta:rgba(255,77,157,0.30);
  --paper:#F4F1EA;
  --paper-2:#EAE5DA;
  --ink:#12141A;
  --ink-soft:rgba(18,20,26,0.66);
  --ink-muted:rgba(18,20,26,0.46);
}

/* ---------- Global background stage ---------- */
html{background:#06070A;}
body{background:transparent;}
main{position:relative;z-index:1;}
footer{position:relative;z-index:1;}

/* Aurora drifting blobs */
.fx-stage{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;}
.fx-aurora{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;mix-blend-mode:screen;will-change:transform;}
.fx-a1{width:46vw;height:46vw;left:-8vw;top:-6vw;background:radial-gradient(circle,#1677FF 0%,transparent 66%);animation:drift1 26s ease-in-out infinite;}
.fx-a2{width:42vw;height:42vw;right:-10vw;top:8vw;background:radial-gradient(circle,#8A5CFF 0%,transparent 66%);animation:drift2 30s ease-in-out infinite;}
.fx-a3{width:40vw;height:40vw;left:14vw;bottom:-12vw;background:radial-gradient(circle,#FF4D9D 0%,transparent 66%);animation:drift3 34s ease-in-out infinite;opacity:.4;}
.fx-a4{width:34vw;height:34vw;right:4vw;bottom:-8vw;background:radial-gradient(circle,#FF9F1A 0%,transparent 66%);animation:drift4 28s ease-in-out infinite;opacity:.42;}
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;}

@keyframes drift1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(8vw,6vw) scale(1.15);}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1.05);}50%{transform:translate(-7vw,9vw) scale(0.92);}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(10vw,-7vw) scale(1.18);}}
@keyframes drift4{0%,100%{transform:translate(0,0) scale(1.1);}50%{transform:translate(-9vw,-6vw) scale(0.9);}}

/* Section surfaces: let movement bleed through, with subtle layering */
.manifesto,.process,.cases{background:transparent;}
.process,.cases{background:linear-gradient(180deg,rgba(255,255,255,0.025),rgba(255,255,255,0.012));}
.logobar{background:transparent;}
footer{background:rgba(6,7,10,0.55);backdrop-filter:saturate(140%) blur(8px);}

/* ---------- Scroll progress ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:80;background:var(--spectrum);background-size:200% 100%;box-shadow:0 0 16px rgba(138,92,255,0.6);animation:flow 6s linear infinite;}
@keyframes flow{to{background-position:200% 0;}}

/* ---------- Spectrum text ---------- */
.spectrum-text{background:var(--spectrum);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flow 7s linear infinite;}

/* Eyebrow gets a gradient lead line + cycles hue */
.eyebrow::before{background:var(--spectrum)!important;width:28px!important;height:2px!important;border-radius:2px;}
.eyebrow{color:var(--accent-violet);}
.eyebrow.amber{color:var(--accent-magenta);}

/* ---------- Buttons ---------- */
.btn-primary{background:var(--spectrum);background-size:200% 100%;background-position:0 0;box-shadow:0 0 0 1px rgba(255,255,255,0.08) inset,0 10px 40px rgba(138,92,255,0.35);transition:background-position .5s ease,transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease;}
.btn-primary:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,255,255,0.12) inset,0 14px 56px rgba(255,77,157,0.5);}
.btn-secondary{position:relative;overflow:hidden;}
.btn-secondary::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--spectrum);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease;}
.btn-secondary:hover::after{opacity:.9;}

/* ---------- Hero ---------- */
.hero h1 .accent{color:transparent;background:var(--spectrum);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;animation:flow 6s linear infinite;}
.hero h1 .accent::after{display:none!important;}

/* Poles: richer satellites + spectrum connector */
.pole-amber{background:radial-gradient(circle at 35% 30%,#ffd6f0 0%,#FF4D9D 52%,#b8166b 100%)!important;box-shadow:0 0 70px rgba(255,77,157,0.55),inset 0 0 16px rgba(255,255,255,0.25)!important;}
.s3{background:rgba(255,77,157,0.7)!important;}
.s2{background:rgba(138,92,255,0.8)!important;}
.connector .glow{opacity:.4!important;stroke-width:7!important;}
.ring-1{border-color:rgba(138,92,255,0.14)!important;}
.ring-2{border-color:rgba(255,77,157,0.12)!important;}
.travel-dot{filter:drop-shadow(0 0 6px rgba(255,255,255,0.9));}

/* ---------- Cards: spectrum gradient border on hover ---------- */
.svc-card,.pair-card,.case-card{position:relative;}
.svc-card::before,.pair-card::before,.case-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:var(--spectrum);background-size:200% 100%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s ease;pointer-events:none;animation:flow 5s linear infinite;}
.svc-card:hover::before,.pair-card:hover::before,.case-card:hover::before{opacity:1;}
.svc-card:hover,.pair-card:hover,.case-card:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,0.45),0 0 50px rgba(138,92,255,0.12);}

/* Service icons cycle through the spectrum */
.services-grid .svc-card:nth-child(1) .svc-icon{background:rgba(22,119,255,0.12);color:#1677FF;}
.services-grid .svc-card:nth-child(2) .svc-icon{background:rgba(138,92,255,0.14);color:#8A5CFF;}
.services-grid .svc-card:nth-child(3) .svc-icon{background:rgba(255,77,157,0.14);color:#FF4D9D;}
.svc-row-2 .svc-card:nth-child(1) .svc-icon{background:rgba(25,201,227,0.14);color:#19C9E3;}
.svc-row-2 .svc-card:nth-child(2) .svc-icon{background:rgba(255,159,26,0.14);color:#FF9F1A;}
.svc-row-2 .svc-card:nth-child(3) .svc-icon{background:rgba(138,92,255,0.14);color:#8A5CFF;}
.svc-card:hover .svc-icon{box-shadow:0 0 28px currentColor;transform:translateY(-2px) rotate(-4deg);transition:all .35s cubic-bezier(.2,.7,.2,1);}
.svc-list li .check{color:var(--accent-violet);}

/* Diferenciais icons alternate spectrum hues */
.diff-grid .diff:nth-child(1) .diff-icon{background:rgba(22,119,255,0.1);color:#1677FF;}
.diff-grid .diff:nth-child(2) .diff-icon{background:rgba(138,92,255,0.12);color:#8A5CFF;}
.diff-grid .diff:nth-child(3) .diff-icon{background:rgba(255,77,157,0.12);color:#FF4D9D;}
.diff-grid .diff:nth-child(4) .diff-icon{background:rgba(255,159,26,0.12);color:#FF9F1A;}
.diff-grid .diff:nth-child(5) .diff-icon{background:rgba(25,201,227,0.12);color:#19C9E3;}
.diff-grid .diff:nth-child(6) .diff-icon{background:rgba(138,92,255,0.12);color:#8A5CFF;}
.diff:hover .diff-icon{transform:translateY(-3px) scale(1.06);box-shadow:0 0 26px currentColor;transition:all .3s ease;}
.diff-icon{transition:all .3s ease;}

/* ---------- Process timeline: animated spectrum line ---------- */
.timeline::before{background:var(--spectrum)!important;background-size:200% 100%!important;opacity:.55;height:2px!important;animation:flow 6s linear infinite;}
.step:nth-child(1) .dot{border-color:#1677FF!important;box-shadow:0 0 0 4px var(--bg-secondary),0 0 22px rgba(22,119,255,0.7)!important;}
.step:nth-child(2) .dot{border-color:#8A5CFF!important;box-shadow:0 0 0 4px var(--bg-secondary),0 0 22px rgba(138,92,255,0.7)!important;}
.step:nth-child(3) .dot{border-color:#FF4D9D!important;box-shadow:0 0 0 4px var(--bg-secondary),0 0 22px rgba(255,77,157,0.7)!important;}
.step:nth-child(4) .dot{border-color:#FF9F1A!important;box-shadow:0 0 0 4px var(--bg-secondary),0 0 22px rgba(255,159,26,0.7)!important;}
.step .num{transition:all .4s ease;}
.step:hover .num{color:transparent;-webkit-text-stroke:0;background:var(--spectrum);-webkit-background-clip:text;background-clip:text;opacity:1;}
.step .duration::before{background:var(--accent-magenta)!important;}

/* ---------- Cases: spectrum metric + count ---------- */
.case-metric{background:var(--spectrum)!important;background-size:220% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;animation:flow 7s linear infinite;}
.case-card .pill{border-color:rgba(138,92,255,0.4);color:var(--text-secondary);}

/* ---------- Manifesto = LIGHT punctual section ---------- */
.manifesto.light{background:radial-gradient(120% 120% at 50% -10%,var(--paper) 0%,var(--paper-2) 100%);}
.manifesto.light .eyebrow{color:#8A5CFF;}
.manifesto.light .eyebrow::before{background:var(--spectrum)!important;}
.manifesto.light h2,.manifesto.light .section-head h2{color:var(--ink);}
.manifesto.light .body-lg,.manifesto.light .section-head p{color:var(--ink-soft);}
.manifesto.light .pair-card{background:#FFFFFF;border:1px solid rgba(18,20,26,0.08);box-shadow:0 12px 40px rgba(18,20,26,0.08);}
.manifesto.light .pair-card:hover{box-shadow:0 24px 60px rgba(18,20,26,0.14),0 0 50px rgba(138,92,255,0.12);}
.manifesto.light .pair-card p{color:var(--ink-soft);}
.manifesto.light .pair-icon{border-color:rgba(18,20,26,0.08);}
.manifesto.light .pair-icon.blue{background:rgba(22,119,255,0.1);color:#1677FF;}
.manifesto.light .pair-icon.amber{background:rgba(255,77,157,0.1);color:#FF4D9D;}
.manifesto.light .pair-labels .l{color:#FF4D9D;}
.manifesto.light .pair-labels .r{color:#1677FF;}
.manifesto.light .pair-link{background:var(--spectrum);opacity:.6;}
.manifesto.light .pair-link::before{background:#FF4D9D;}
.manifesto.light .pair-link::after{background:#1677FF;}
/* soft divider so the light block reads as an inset panel */
.manifesto.light::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--spectrum);opacity:.5;}
.manifesto.light::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--spectrum);opacity:.5;}

/* ---------- Cases = LIGHT punctual section ---------- */
.cases.light{background:radial-gradient(120% 120% at 50% -10%,var(--paper) 0%,var(--paper-2) 100%)!important;}
.cases.light .eyebrow{color:#8A5CFF;}
.cases.light .eyebrow::before{background:var(--spectrum)!important;}
.cases.light h2,.cases.light .section-head h2{color:var(--ink);}
.cases.light .body-lg,.cases.light .section-head p{color:var(--ink-soft);}
.cases.light .case-card{background:#FFFFFF;border:1px solid rgba(18,20,26,0.08);box-shadow:0 12px 40px rgba(18,20,26,0.08);}
.cases.light .case-card:hover{box-shadow:0 24px 60px rgba(18,20,26,0.14),0 0 50px rgba(138,92,255,0.12);}
.cases.light .case-tag{background:rgba(18,20,26,0.05);border-color:rgba(18,20,26,0.1);color:var(--ink-soft);}
.cases.light .case-metric-desc{color:var(--ink);}
.cases.light .case-context{color:var(--ink-soft);}
.cases.light .case-foot{border-top-color:rgba(18,20,26,0.1);}
.cases.light .case-segment{color:var(--ink-muted);}
.cases.light::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--spectrum);opacity:.5;}
.cases.light::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--spectrum);opacity:.5;}

/* ---------- Logobar hover hues ---------- */
.logo-ph:hover{color:#8A5CFF;}
.logo-ph:nth-child(2):hover{color:#FF4D9D;}
.logo-ph:nth-child(4):hover{color:#19C9E3;}
.logo-ph:nth-child(6):hover{color:#FF9F1A;}

/* ---------- FAQ accent ---------- */
.faq-q:hover{color:var(--accent-violet);}
.faq-item.open .faq-icon{background:var(--accent-violet);border-color:var(--accent-violet);}

/* ---------- CTA watermark + glow ---------- */
.cta-wrap::before{background:radial-gradient(circle,rgba(138,92,255,0.26) 0%,rgba(255,77,157,0.12) 35%,transparent 60%)!important;}
.cta-wrap{border-color:rgba(138,92,255,0.18);}

/* ---------- Reveal: a touch more life ---------- */
.reveal{transform:translateY(26px) scale(.985);}
.reveal.in{transform:none;}

/* ============================================================
   SERVICE PAGES
   ============================================================ */
.svc-section.alt{background:linear-gradient(180deg,rgba(255,255,255,0.025),rgba(255,255,255,0.012))!important;}
.svc-hero-icon{background:var(--spectrum)!important;background-size:200% 100%!important;color:#fff!important;box-shadow:0 12px 40px rgba(138,92,255,0.4);animation:flow 6s linear infinite;}
.svc-hero .eyebrow{color:var(--accent-violet);}
.feat-card{position:relative;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease;}
.feat-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:var(--spectrum);background-size:200% 100%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s ease;pointer-events:none;animation:flow 5s linear infinite;}
.feat-card:hover::before{opacity:1;}
.feat-card:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,0.45),0 0 50px rgba(138,92,255,0.12);}
.feat-grid .feat-card:nth-child(4n+1) .feat-icon{color:#1677FF;}
.feat-grid .feat-card:nth-child(4n+2) .feat-icon{color:#8A5CFF;}
.feat-grid .feat-card:nth-child(4n+3) .feat-icon{color:#FF4D9D;}
.feat-grid .feat-card:nth-child(4n+4) .feat-icon{color:#FF9F1A;}
.step-card .step-n{background:var(--spectrum);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flow 7s linear infinite;}
.svc-cta-box{position:relative;overflow:hidden;}
.svc-cta-box::after{content:"";position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:120%;aspect-ratio:1;background:radial-gradient(circle,rgba(138,92,255,0.22) 0%,rgba(255,77,157,0.1) 38%,transparent 62%);pointer-events:none;z-index:0;}
.svc-cta-box > *{position:relative;z-index:1;}
.svc-pager a:hover .name{background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent;}
.back-link:hover{color:var(--accent-violet);}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .fx-aurora,.scroll-progress,.spectrum-text,.btn-primary,.case-metric,.hero h1 .accent,.timeline::before,.svc-card::before,.pair-card::before,.case-card::before{animation:none!important;}
}