:root{--ink:#101010;--panel:#171717;--line:#34302b;--cream:#f2f2f2;--muted:#aaa39a;--bronze:#91724d;--bronze-dark:#694c2d;--green:#25d366}
*{box-sizing:border-box}
html{background:var(--ink);color:var(--cream);font-family:"DM Sans",sans-serif}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -10%,#3a3025 0,transparent 34rem),var(--ink)}
button,a{-webkit-tap-highlight-color:transparent}
.shell{min-height:100svh;display:grid;place-items:center;padding:24px 14px}
.card{width:min(100%,470px);position:relative;overflow:hidden;padding:34px 24px 25px;border:1px solid rgba(145,114,77,.48);border-radius:32px;background:linear-gradient(155deg,rgba(32,31,29,.98),rgba(17,17,17,.99));box-shadow:0 30px 100px #0009,0 0 0 7px #ffffff05}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.12;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='.3'/%3E%3C/svg%3E")}
.monogram{position:absolute;top:-65px;right:-70px;width:230px;height:230px;opacity:.045;transform:rotate(10deg)}
.monogram img{width:100%;height:100%;object-fit:contain}
.brand{position:relative;text-align:center;margin-bottom:27px}
.logo{display:block;width:min(82%,305px);height:132px;object-fit:contain;margin:0 auto 12px;filter:drop-shadow(0 6px 14px #0008)}
.eyebrow{margin:0 0 10px;color:var(--bronze);font:700 .76rem/1.2 "Montserrat",sans-serif;letter-spacing:.19em;text-transform:uppercase}
h1{margin:0;font:800 clamp(2rem,9vw,3.15rem)/.98 "Montserrat",sans-serif;letter-spacing:-.055em;text-transform:uppercase}
h1 span{color:var(--bronze)}
.intro{max-width:340px;margin:15px auto 0;color:#c8c4be;font-size:1rem;line-height:1.5}
.actions{display:grid;gap:11px;position:relative}
.action{min-height:72px;display:grid;grid-template-columns:43px 1fr 20px;gap:12px;align-items:center;padding:12px 14px;color:var(--cream);text-decoration:none;border:1px solid var(--line);border-radius:17px;background:#ffffff05;transition:.2s ease}
.action:hover,.action:focus-visible{border-color:var(--bronze);background:#ffffff0b;transform:translateY(-2px);outline:none}
.action-primary{background:linear-gradient(135deg,#795936,#9a7a52);border-color:#aa8a62;box-shadow:0 10px 30px #0005}
.action-primary:hover,.action-primary:focus-visible{background:linear-gradient(135deg,#896944,#a98961)}
.icon{display:grid;place-items:center;width:43px;height:43px;border-radius:13px;background:#ffffff0b;color:var(--bronze)}
.action-primary .icon{background:var(--green);color:#fff;box-shadow:inset 0 0 0 1px #ffffff35,0 5px 14px #102d1b55}
.icon svg{width:21px;height:21px;fill:currentColor}
.action-primary .icon .whatsapp-mark{width:25px;height:25px}
.action strong,.action small{display:block}
.action strong{font:700 .98rem/1.2 "Montserrat",sans-serif}
.action small{margin-top:5px;color:var(--muted);font-size:.83rem;line-height:1.2}
.action-primary small{color:#eee5d8}
.arrow{color:var(--bronze);font-size:1.15rem}.action-primary .arrow{color:#fff}
.utilities{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:15px}
.utility{min-height:57px;display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;padding:8px 4px;border:1px solid #302d29;border-radius:14px;background:#111;color:#c9c5bf;text-decoration:none;font:600 .72rem/1.15 "DM Sans",sans-serif;cursor:pointer}
.utility span{color:var(--bronze);font-size:1.2rem;line-height:1}
.utility:hover,.utility:focus-visible{border-color:var(--bronze);color:#fff;outline:none}
footer{display:flex;align-items:center;gap:12px;margin-top:23px;color:#817b73}
footer p{margin:0;white-space:nowrap;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.rule{height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--line))}footer .rule:last-child{transform:scaleX(-1)}
dialog{width:min(calc(100% - 32px),360px);padding:28px;border:1px solid #806240;border-radius:24px;background:#171717;color:#f2f2f2;text-align:center;box-shadow:0 25px 90px #000b}
dialog::backdrop{background:#000b;backdrop-filter:blur(7px)}
dialog img{width:230px;max-width:80%;border:10px solid #fff;border-radius:15px}
dialog h2{margin:18px 0 6px;font:800 1.4rem "Montserrat",sans-serif;text-transform:uppercase}
dialog p{margin:0;color:#aaa39a;line-height:1.4}
.close{position:absolute;top:8px;right:10px;border:0;background:transparent;color:#aaa;font-size:1.8rem;cursor:pointer}
#toast{position:fixed;left:50%;bottom:25px;translate:-50% 20px;padding:11px 18px;border:1px solid #806240;border-radius:999px;background:#171717;color:#fff;box-shadow:0 10px 35px #0008;opacity:0;pointer-events:none;transition:.25s;white-space:nowrap;font-size:.9rem}
#toast.show{opacity:1;translate:-50% 0}
@media(min-width:700px){.shell{padding:45px}.card{padding:42px 34px 29px}.logo{height:145px}}
@media(max-width:360px){.card{padding:28px 15px 22px;border-radius:24px}.action{padding-inline:11px;grid-template-columns:40px 1fr 16px}.icon{width:40px;height:40px}.action strong{font-size:.89rem}.utilities{gap:5px}.utility{font-size:.66rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}