@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,500;1,600&family=Montserrat:wght@300;400;500&display=swap');
:root { color-scheme: dark; --silver-1:#f4f6f7; --silver-2:#c9cdd1; --silver-3:#737981; --silver-4:#30343a; --black:#050505; }
* { box-sizing:border-box; }
html, body { min-height:100%; }
body { margin:0; min-height:100svh; display:grid; place-items:center; overflow-x:hidden; background:#030303; color:var(--silver-2); font-family:Arial, Helvetica, sans-serif; }
.contact-card { width:min(100% - 40px, 620px); padding:clamp(42px, 7vh, 74px) 0 30px; text-align:center; }
.identity { display:grid; justify-items:center; }
.monogram-stage { position:relative; width:min(100%, 490px); aspect-ratio:1.64; display:grid; place-items:center; margin-bottom:clamp(16px, 3vh, 28px); }
.monogram-stage::after { content:none; }
.monogram-glow { position:absolute; inset:10% 13%; border-radius:50%; background:radial-gradient(ellipse, rgba(209,219,229,.16), rgba(130,142,154,.06) 38%, transparent 72%); filter:blur(17px); animation:contourPulse 6.8s ease-in-out infinite; }
.monogram { position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:contain; }
h1 { margin:0; color:#f0f1f2; font-size:clamp(1.08rem, 2.5vw, 1.38rem); font-weight:500; letter-spacing:.43em; padding-left:.43em; }
.tagline { margin:13px 0 0; color:#b6bac0; font-family:Georgia, 'Times New Roman', serif; font-size:clamp(1rem, 2vw, 1.12rem); font-style:italic; letter-spacing:.025em; }
.actions { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin:clamp(32px, 6vh, 50px) 0 36px; }
.action-button { --edge:rgba(196, 202, 209, .68); position:relative; min-height:52px; display:grid; place-items:center; overflow:hidden; border:1px solid var(--edge); background:linear-gradient(110deg, rgba(255,255,255,.025), rgba(255,255,255,.005)); color:#d9dde1; text-decoration:none; cursor:pointer; font:500 .69rem/1 Arial, Helvetica, sans-serif; letter-spacing:.16em; text-transform:uppercase; transition:border-color .28s ease, box-shadow .28s ease, color .28s ease, transform .14s ease, background .28s ease; }
.action-button::before { content:""; position:absolute; inset:-20% -40%; background:linear-gradient(105deg, transparent 39%, rgba(255,255,255,.05) 45%, rgba(246,248,250,.5) 50%, rgba(255,255,255,.06) 55%, transparent 61%); transform:translateX(-72%) skewX(-12deg); transition:transform .75s cubic-bezier(.2,.7,.2,1); }
.action-button span { position:relative; z-index:1; }
.action-button:hover, .action-button:focus-visible { outline:none; border-color:rgba(248,250,252,.93); box-shadow:inset 0 0 20px rgba(226,232,237,.09), 0 0 15px rgba(201,210,220,.12); color:#fff; background:linear-gradient(110deg, rgba(255,255,255,.08), rgba(255,255,255,.015)); }
.action-button:hover::before, .action-button:focus-visible::before { transform:translateX(73%) skewX(-12deg); }
.action-button:active, .social-button:active { transform:scale(.965); transition-duration:.08s; }
.separator { position:relative; height:1px; width:86%; margin:0 auto; overflow:visible; background:linear-gradient(90deg, transparent, #3e434a 12%, #90969d 50%, #3e434a 88%, transparent); }
.travelling-glint { position:absolute; top:-3px; left:-2%; width:7px; height:7px; opacity:0; border-radius:50%; background:radial-gradient(circle, #fff 0 12%, #f8fbfd 22%, #c6d0d8 43%, transparent 72%); box-shadow:0 0 5px rgba(250,253,255,.95), 0 0 13px rgba(198,210,221,.35); filter:blur(.08px); animation:silverTravel 6.1s ease-in-out infinite, sparkFlicker 1.35s ease-in-out infinite; }
.travelling-glint::before, .travelling-glint::after { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none; }
.travelling-glint::before { width:23px; height:1px; background:linear-gradient(90deg, transparent, rgba(232,239,244,.34) 32%, #fff 50%, rgba(232,239,244,.34) 68%, transparent); }
.travelling-glint::after { width:1px; height:15px; background:linear-gradient(180deg, transparent, rgba(232,239,244,.42) 28%, #fff 50%, rgba(232,239,244,.42) 72%, transparent); }
.socials { display:flex; justify-content:center; gap:17px; margin-top:27px; }
.social-button { width:35px; height:35px; display:grid; place-items:center; border:0; background:transparent; color:#aab0b7; cursor:pointer; border-radius:50%; transition:color .24s ease, filter .24s ease, transform .14s ease, background .24s ease; }
.social-button svg { width:20px; height:20px; fill:currentColor; stroke:currentColor; stroke-width:1.7; }
.social-button svg .dot { fill:currentColor; stroke:none; }
.social-button:hover, .social-button:focus-visible { outline:none; color:#f1f4f6; background:radial-gradient(circle, rgba(217,225,231,.17), transparent 68%); filter:drop-shadow(0 0 7px rgba(231,237,241,.32)); }
.pending-note { position:fixed; bottom:16px; width:100%; margin:0; padding:0 20px; text-align:center; color:#686e75; font-size:.67rem; letter-spacing:.055em; }
.toast { position:fixed; left:50%; bottom:52px; max-width:calc(100% - 36px); padding:11px 15px; border:1px solid rgba(200,207,213,.38); background:rgba(13,14,16,.94); color:#dfe3e6; font-size:.77rem; letter-spacing:.035em; text-align:center; opacity:0; transform:translate(-50%, 10px); pointer-events:none; transition:opacity .2s ease, transform .2s ease; }
.toast.is-visible { opacity:1; transform:translate(-50%, 0); }
@keyframes contourPulse { 0%,100% { opacity:.42; transform:scale(.94); } 50% { opacity:.93; transform:scale(1.055); } }
@keyframes silverTravel { 0%,12% { left:-2%; opacity:0; } 18% { opacity:.95; } 79% { opacity:.95; } 91%,100% { left:101%; opacity:0; } }
@keyframes sparkFlicker { 0%,100% { transform:scale(.74) rotate(0deg); } 38% { transform:scale(1.08) rotate(8deg); } 47% { transform:scale(.81) rotate(3deg); } 56% { transform:scale(1.16) rotate(-6deg); } }
@media (max-width:560px) { body { display:block; } .contact-card { width:min(100% - 32px, 420px); margin:0 auto; padding-top:clamp(35px, 8vh, 58px); } .monogram-stage { width:100%; } .actions { grid-template-columns:1fr; gap:10px; margin-top:34px; margin-bottom:32px; } .action-button { min-height:50px; } .separator { width:91%; } .pending-note { position:static; padding:0 18px 20px; font-size:.62rem; line-height:1.45; } .toast { bottom:30px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important; } .travelling-glint { left:44%; opacity:.7; } .monogram-glow { opacity:.58; transform:none; } }

/* Review V6: composition matched to the approved reference. */
.contact-card { width:min(100% - 40px, 770px); padding-top:clamp(28px, 5vh, 52px); }
.monogram-stage { width:min(100%, 545px); margin-bottom:10px; }
h1 { font-size:clamp(1.3rem, 3.2vw, 2rem); font-weight:400; letter-spacing:.48em; padding-left:.48em; }
.tagline { width:min(100%, 560px); display:flex; align-items:center; justify-content:center; gap:32px; margin:24px 0 0; color:#dadde0; font-size:clamp(1.15rem, 2.65vw, 1.55rem); letter-spacing:.015em; }
.tagline span { flex:1; max-width:112px; height:1px; background:linear-gradient(90deg, transparent, #bfc4c8 35%, #e5e8ea); }
.tagline span:last-child { background:linear-gradient(90deg, #e5e8ea, #bfc4c8 65%, transparent); }
.tagline em { font-style:italic; white-space:nowrap; }
.actions { gap:48px; margin:clamp(37px, 6vh, 52px) 0 40px; }
.action-button { min-height:78px; display:flex; align-items:center; justify-content:center; gap:19px; border-color:rgba(222,226,230,.8); border-radius:18px; font-size:clamp(.92rem, 1.8vw, 1.13rem); font-weight:400; letter-spacing:.02em; text-transform:none; }
.action-button svg { position:relative; z-index:1; width:29px; height:29px; fill:none; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }
.action-button::before { opacity:.62; }
.separator { width:100%; }
.socials { gap:0; margin-top:29px; }
.social-button { position:relative; width:86px; height:56px; color:#e4e8eb; }
.social-button svg { width:34px; height:34px; }
.social-button .instagram-icon { fill:none; }
.social-button .instagram-icon .dot { fill:currentColor; }
.social-button + .social-button::before { content:""; position:absolute; left:0; top:10px; bottom:10px; width:1px; background:linear-gradient(transparent, rgba(210,216,220,.75), transparent); }
.pending-note { display:none; }
@media (max-width:560px) { .contact-card { width:min(100% - 32px, 420px); padding-top:34px; } .monogram-stage { width:100%; } h1 { font-size:1.24rem; letter-spacing:.37em; padding-left:.37em; } .tagline { gap:16px; margin-top:18px; font-size:1.08rem; } .tagline span { max-width:62px; } .actions { gap:11px; margin-top:34px; } .action-button { min-height:60px; border-radius:15px; font-size:1rem; } .action-button svg { width:25px; height:25px; } .social-button { width:74px; } }

/* Review V7: type and optical alignment matched to the reference image. */
body, .action-button { font-family:'Montserrat', Arial, sans-serif; }
.monogram-stage { margin-bottom:-17px; }
h1 { font-family:'Montserrat', Arial, sans-serif; font-weight:300; letter-spacing:.52em; padding-left:.52em; text-shadow:0 1px 8px rgba(255,255,255,.08); }
.tagline { margin-top:18px; font-family:'Cormorant Garamond', Georgia, serif; font-size:clamp(1.45rem, 3.1vw, 2rem); font-weight:500; }
.tagline em { letter-spacing:.035em; }
.action-button { font-weight:400; letter-spacing:.01em; }
@media (max-width:560px) { .monogram-stage { margin-bottom:-10px; } h1 { letter-spacing:.42em; padding-left:.42em; } .tagline { margin-top:16px; font-size:1.42rem; } }

/* Review V8: lighter contact controls and reference-style social marks. */
.action-button { min-height:64px; gap:15px; border-radius:15px; font-size:clamp(.86rem, 1.55vw, 1.02rem); }
.action-button svg { width:25px; height:25px; }
.social-button .facebook-icon { fill:#e5e9eb; stroke:none; filter:drop-shadow(0 0 3px rgba(255,255,255,.25)); }
.social-button .facebook-icon .facebook-letter { fill:#090909; }
.social-button .whatsapp-icon { fill:none; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:560px) { .action-button { min-height:56px; font-size:.96rem; } .action-button svg { width:23px; height:23px; } }

/* Review V9: compact actions and cleaner WhatsApp construction. */
.action-button { min-height:58px; gap:13px; font-size:clamp(.83rem, 1.45vw, .96rem); }
.action-button svg { width:23px; height:23px; }
.social-button .whatsapp-icon { stroke-width:1.35; }
@media (max-width:560px) { .action-button { min-height:53px; font-size:.91rem; } .action-button svg { width:21px; height:21px; } }

/* Review V10: more space below the mark and a slightly stronger WhatsApp icon. */
.monogram-stage { margin-bottom:10px; }
.social-button .whatsapp-icon { transform:scale(1.13); }
@media (max-width:560px) { .monogram-stage { margin-bottom:3px; } }

/* Review V20: a rare name reflection and meaningful social-icon hover motion. */
h1 { background:linear-gradient(110deg, #c5c8ca 0%, #f7f8f8 22%, #c8cbcd 38%, #fff 49%, #c5c8ca 60%, #eef0f1 78%, #c5c8ca 100%); background-size:310% 100%; background-position:130% 0; -webkit-background-clip:text; background-clip:text; color:transparent; animation:nameSilverSweep 9.4s ease-in-out infinite; }
.social-button:hover .facebook-letter, .social-button:focus-visible .facebook-letter { transform-box:fill-box; transform-origin:center; animation:facebookSpin .64s cubic-bezier(.25,.75,.25,1) 1; }
.social-button:hover .instagram-icon .dot, .social-button:focus-visible .instagram-icon .dot { transform-box:view-box; transform-origin:12px 12px; animation:instagramOrbit .78s cubic-bezier(.32,.75,.28,1) 1; }
.social-button:hover .whatsapp-icon, .social-button:focus-visible .whatsapp-icon { transform-box:fill-box; transform-origin:center; animation:whatsappPop .52s ease-out 1; }
.social-button:hover .whatsapp-icon path:last-child, .social-button:focus-visible .whatsapp-icon path:last-child { transform-box:fill-box; transform-origin:center; animation:whatsappAnswer .52s ease-out 1; }
@keyframes nameSilverSweep { 0%,61%,100% { background-position:130% 0; } 72% { background-position:-35% 0; } }
@keyframes facebookSpin { to { transform:rotate(360deg); } }
@keyframes instagramOrbit { to { transform:rotate(360deg); } }
@keyframes whatsappPop { 0% { transform:translateY(0) scale(1); } 46% { transform:translateY(-3px) scale(1.06); } 100% { transform:translateY(0) scale(1); } }
@keyframes whatsappAnswer { 0% { transform:rotate(0deg); } 42% { transform:rotate(-10deg) translateY(-1px); } 100% { transform:rotate(0deg); } }

/* Review V13: a slow, localized silver light behind the outer C curve. */
.monogram-glow { display:none; }
.monogram-burst { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; mix-blend-mode:screen; filter:brightness(2.05) contrast(1.15) blur(6px); opacity:0; -webkit-mask-image:radial-gradient(ellipse 30% 43% at 44% 39%, #000 22%, rgba(0,0,0,.78) 48%, transparent 79%), radial-gradient(ellipse 32% 27% at 45% 83%, #000 18%, rgba(0,0,0,.78) 47%, transparent 81%); mask-image:radial-gradient(ellipse 30% 43% at 44% 39%, #000 22%, rgba(0,0,0,.78) 48%, transparent 79%), radial-gradient(ellipse 32% 27% at 45% 83%, #000 18%, rgba(0,0,0,.78) 47%, transparent 81%); animation:leftContourBurst 9.4s ease-in-out infinite; }
@keyframes leftContourBurst { 0%,39%,100% { opacity:0; transform:scale(1); } 46% { opacity:.9; transform:scale(1.015); } 56% { opacity:0; transform:scale(1); } }
@keyframes fullContourBurst { 0%,39%,100% { opacity:.15; transform:scale(.94); } 46% { opacity:1; transform:scale(1.08); } 56% { opacity:.16; transform:scale(.96); } }

/* Review V11: purposeful hover motion for the three contact actions. */
.action-button:hover .phone-icon, .action-button:focus-visible .phone-icon { transform-origin:45% 72%; animation:phoneRing .62s ease-in-out infinite; }
.action-button:hover .mail-icon, .action-button:focus-visible .mail-icon { animation:mailSent 2.15s cubic-bezier(.25,.8,.25,1) infinite; }
#save-contact:hover .save-icon, #save-contact:focus-visible .save-icon { animation:contactSaved 1.15s cubic-bezier(.2,.8,.2,1) infinite; filter:drop-shadow(0 0 4px rgba(246,250,252,.7)); }
#save-contact:hover::after, #save-contact:focus-visible::after { content:""; position:absolute; z-index:0; width:17px; height:1px; left:calc(50% - 33px); top:calc(50% + 15px); background:linear-gradient(90deg, transparent, rgba(240,246,250,.85), transparent); animation:saveGlint 1.15s ease-out infinite; }
@keyframes phoneRing { 0%,100% { transform:rotate(0deg); } 18% { transform:rotate(-13deg); } 36% { transform:rotate(12deg); } 54% { transform:rotate(-10deg); } 72% { transform:rotate(7deg); } }
@keyframes mailSent { 0%,12% { transform:translateX(0) rotate(0deg); opacity:1; } 16% { transform:translateX(-2px) rotate(-2deg); } 21% { transform:translateX(2px) rotate(2deg); } 27% { transform:translateX(0) rotate(0deg); opacity:1; } 69% { transform:translateX(-62px) rotate(-7deg); opacity:0; } 70%,84% { transform:translateX(18px) rotate(3deg); opacity:0; } 92%,100% { transform:translateX(0) rotate(0deg); opacity:1; } }
@keyframes contactSaved { 0%,100% { transform:translateY(0) scale(1); } 26% { transform:translateY(-2px) scale(1.06); } 48% { transform:translateY(0) scale(.94); } 68% { transform:translateY(-1px) scale(1.02); } }
@keyframes saveGlint { 0%,30% { opacity:0; transform:translateX(-5px); } 46% { opacity:1; } 72%,100% { opacity:0; transform:translateX(12px); } }