:root{
  --bg:#08090c;
  --ink:#0d0f13;
  --panel:#13161c;
  --line:rgba(201,164,92,.22);
  --gold:#c9a45c;
  --gold2:#e4cd96;
  --gold3:#8f7238;
  --blue:#6f8cab;
  --blue2:#1b2737;
  --text:#d8d3c9;
  --muted:#9a968e;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  min-height:100vh;background:var(--bg);font-family:var(--sans);color:var(--text);
  display:flex;justify-content:center;padding:28px 16px;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
svg{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
em{font-style:italic;color:var(--gold2)}

/* ---------- FUNDO: ELEMENTOS DO DIREITO DESFOCADOS ---------- */
.bg-law{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.law{position:absolute;color:var(--gold);opacity:.2;stroke-width:2.2}
.l1{width:520px;top:-60px;left:-140px;filter:blur(7px);transform:rotate(-8deg)}
.l2{width:200px;top:32%;right:-40px;filter:blur(5px);opacity:.16;color:var(--blue)}
.l3{width:380px;bottom:-60px;left:-80px;filter:blur(9px);opacity:.1}
.l4{width:340px;top:58%;right:-90px;filter:blur(10px);opacity:.09}
.l5{width:160px;top:18%;left:6%;filter:blur(6px);opacity:.08;color:var(--blue)}
.glow{position:absolute;border-radius:50%;filter:blur(90px)}
.g1{width:520px;height:520px;top:-180px;right:-160px;background:rgba(111,140,171,.16)}
.g2{width:420px;height:420px;bottom:-160px;left:-120px;background:rgba(201,164,92,.1)}
.g3{width:360px;height:360px;top:45%;left:50%;transform:translateX(-50%);background:rgba(27,39,55,.5)}

/* ---------- PÁGINA ---------- */
.page{
  position:relative;z-index:1;width:100%;max-width:430px;background:var(--ink);border-radius:30px;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(201,164,92,.14);
}

/* ---------- TOPO ---------- */
.hero{position:relative;height:600px;overflow:hidden;isolation:isolate}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 10%;z-index:-2;
  filter:contrast(1.05) brightness(.9);animation:zoom 14s ease-out both}
@keyframes zoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(13,15,19,.35) 0%,transparent 30%,rgba(13,15,19,.55) 58%,var(--ink) 94%),
    linear-gradient(90deg,rgba(13,15,19,.75) 0%,transparent 60%),
    linear-gradient(180deg,transparent 40%,rgba(27,39,55,.45) 80%,transparent)}
.ribbon{position:absolute;inset:0;width:100%;height:100%;z-index:-1;stroke:var(--gold);stroke-width:1;opacity:.45}
.ribbon path+path{opacity:.4}
.hero-txt{position:absolute;left:28px;right:28px;bottom:72px}
.kicker{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.hero h1{margin-top:10px;font-family:var(--serif);font-weight:300;font-size:64px;line-height:.88;color:#f4efe6;letter-spacing:-.5px}
.hero h1 em{font-weight:400}
.oab{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:#cfc8bb}
.oab i{width:4px;height:4px;border-radius:50%;background:var(--gold)}
.scroll{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:34px;height:34px;display:grid;place-items:center;color:var(--gold2);animation:bob 2.4s ease-in-out infinite}
.scroll svg{width:20px;height:20px}
@keyframes bob{50%{transform:translate(-50%,5px)}}

.intro{margin:0 28px 30px;padding-left:16px;border-left:1px solid var(--gold3);font-size:14px;font-weight:300;line-height:1.7;color:var(--muted)}
.intro b{font-weight:400;color:var(--text)}

/* ---------- CARDS ---------- */
.links{display:flex;flex-direction:column;gap:16px;padding:0 18px 40px}
.card{position:relative;display:flex;align-items:stretch;gap:14px;min-height:150px;padding:8px;border-radius:18px;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.015) 50%,rgba(111,140,171,.06));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 34px -18px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s}
.card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,rgba(228,205,150,.45),transparent 35%,transparent 70%,rgba(111,140,171,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.card:hover{transform:translateY(-3px);border-color:rgba(201,164,92,.3);box-shadow:0 24px 40px -18px rgba(0,0,0,.95),0 0 0 1px rgba(201,164,92,.12)}
.card:active{transform:scale(.985)}
.card.rev{flex-direction:row-reverse}
.card-txt{flex:1;display:flex;flex-direction:column;justify-content:center;padding:10px 6px 10px 12px}
.card.rev .card-txt{padding:10px 12px 10px 6px}
.card-txt small{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.card-txt strong{margin-top:4px;font-family:var(--serif);font-weight:400;font-size:27px;line-height:1;color:#f2ede4}
.desc{margin-top:8px;font-size:11.5px;font-weight:300;line-height:1.45;color:var(--muted)}
.go{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:14px;padding:6px 14px;border-radius:30px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold2);
  background:rgba(201,164,92,.08);border:1px solid rgba(201,164,92,.3);transition:background .3s,color .3s}
.go svg{width:13px;height:13px;transition:transform .3s}
.card:hover .go{background:var(--gold);color:var(--ink)}
.card:hover .go svg{transform:translateX(3px)}
.card-img{flex:none;width:118px;border-radius:12px;overflow:hidden;position:relative;
  background:radial-gradient(circle at 50% 35%,#24334a,#11161e 75%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.card-img img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block;transition:transform .6s}
.card:hover .card-img img{transform:scale(1.06)}
.card-img.art{display:grid;place-items:center;color:var(--gold2)}
.card-img.art::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 120%,rgba(201,164,92,.25),transparent 60%)}
.card-img.art svg{width:88px;height:88px;stroke-width:2.6;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));transition:transform .5s}
.card:hover .card-img.art svg{transform:scale(1.07)}
.card .shine{position:absolute;top:0;left:-60%;width:40%;height:100%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(228,205,150,.08),transparent);transform:skewX(-20deg);animation:shine 7s infinite}
@keyframes shine{0%,82%{left:-60%}100%{left:130%}}

/* ---------- TÍTULOS ---------- */
.eyebrow{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.areas h2,.why h2{margin:6px 0 22px;font-family:var(--serif);font-weight:300;font-size:38px;line-height:1;color:#f2ede4}

/* ---------- ÁREAS ---------- */
.areas{margin:0 18px 18px;padding:30px 22px 14px;border-radius:20px;
  background:linear-gradient(180deg,rgba(27,39,55,.55),rgba(13,15,19,.2));border:1px solid rgba(111,140,171,.16)}
.areas ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.areas li{padding:14px 0 16px;border-top:1px solid var(--line);font-family:var(--serif);font-size:19px;line-height:1.1;color:#ece6db}
.areas li span{display:block;margin-bottom:6px;font-family:var(--sans);font-size:9.5px;letter-spacing:.2em;color:var(--blue)}
.areas li small{display:block;margin-top:6px;font-family:var(--sans);font-size:11px;line-height:1.45;font-weight:300;color:var(--muted)}

/* ---------- POR QUE ---------- */
.why{margin:0 18px 40px;padding:30px 22px 12px;border-radius:20px;background:#f3eee5;color:#3b3a37}
.why .eyebrow{color:var(--gold3)}
.why h2{color:#16181d}
.why h2 em{color:var(--gold3)}
.why ol{list-style:none}
.why li{display:flex;gap:16px;padding:16px 0;border-top:1px solid rgba(143,114,56,.25)}
.why li span{font-family:var(--serif);font-size:22px;color:var(--gold3);line-height:1}
.why strong{display:block;font-family:var(--serif);font-style:italic;font-weight:500;font-size:19px;color:#16181d}
.why p{margin-top:4px;font-size:12px;font-weight:300;line-height:1.6}

/* ---------- CITAÇÃO ---------- */
.quote{position:relative;height:440px;overflow:hidden;isolation:isolate}
.quote img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;z-index:-2}
.quote::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--ink) 0%,transparent 22%,transparent 45%,rgba(13,15,19,.85) 78%,var(--ink) 100%),
  linear-gradient(270deg,transparent 30%,rgba(13,15,19,.5))}
.quote-txt{position:absolute;left:26px;bottom:34px;max-width:260px;text-align:left}
.mark{width:28px;height:22px;color:var(--gold);stroke-width:1.6}
.quote p{margin-top:8px;font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.08;color:#f4efe6}
.quote small{display:block;margin-top:12px;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}

/* ---------- RODAPÉ ---------- */
footer{padding:30px 22px 28px;text-align:center;background:var(--ink)}
.cta{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:40px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--ink);
  background:linear-gradient(135deg,var(--gold2),var(--gold) 50%,var(--gold3));
  box-shadow:0 12px 26px -12px rgba(201,164,92,.6),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .3s}
.cta svg{width:18px;height:18px;stroke-width:1.6}
.cta:hover{transform:translateY(-2px)}
.social{display:flex;justify-content:center;gap:14px;margin:24px 0}
.social a{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--gold2);transition:all .3s}
.social a:hover{background:var(--gold);border-color:var(--gold);color:var(--ink);transform:translateY(-3px)}
.social svg{width:19px;height:19px;stroke-width:1.5}
.mono{width:54px;height:54px;margin:0 auto;display:grid;place-items:center;border:1px solid var(--gold3);border-radius:10px;
  font-family:var(--serif);font-size:26px;letter-spacing:-.06em;color:var(--gold2)}
.copy{margin-top:14px;font-size:10.5px;line-height:1.6;color:#6f6c66}

/* ---------- ANIMAÇÕES ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  .hero-img,.scroll,.card .shine{animation:none}
}

@media (max-width:480px){
  body{padding:0}
  .page{border-radius:0;max-width:none;box-shadow:none}
  .hero{height:560px}
  .hero h1{font-size:58px}
}
@media (max-width:360px){
  .card-img{width:96px}
  .card-txt strong{font-size:23px}
  .areas ul{grid-template-columns:1fr}
}

/* Grão sutil sobre a foto da citação (disfarça a baixa resolução de origem) */
.quote::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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)'/%3E%3C/svg%3E")}
.quote img{filter:contrast(1.04) saturate(.92)}

/* ---------- ÍCONES EM MEDALHÃO ---------- */
.card-img.art::before{content:"";position:absolute;width:92px;height:92px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;
  border:1px solid rgba(214,178,107,.4);box-shadow:0 0 0 4px rgba(214,178,107,.04),0 0 0 4.6px rgba(214,178,107,.16),inset 0 0 20px rgba(214,178,107,.07)}
.card-img.art svg.ico{position:relative;z-index:1;width:70px;height:70px;stroke-width:0;filter:drop-shadow(0 3px 6px rgba(0,0,0,.55))}
.ico .fill{fill:url(#gold);stroke:none}
.ico .line{fill:none;stroke:url(#gold);stroke-width:2.6}
.ico .line.bold{stroke-width:6}
.ico .thin{fill:none;stroke:url(#gold);stroke-width:1.1}
.ico .cut{fill:#141a24;stroke:none}
.ico .chk{fill:none;stroke:#141a24;stroke-width:2.4}
.ico .scallop{fill:none;stroke:url(#gold);stroke-width:3;stroke-dasharray:2.2 1.6}
.ico .edge{stroke:#141a24;stroke-width:1.4;paint-order:stroke}