:root { --ink:#091b13; --deep:#07140f; --panel:#10251b; --gold:#e7c16a; --cream:#f6f0df; --muted:#b4bead; --green:#288448; --red:#bf3a35; --line:rgba(231,193,106,.24); --body:'Manrope',Arial,sans-serif; --display:'Cormorant Garamond',Georgia,serif; }
* { box-sizing:border-box; }
html { color-scheme:dark; }
body { margin:0; background:radial-gradient(ellipse at 15% 42%,rgba(40,132,72,.11),transparent 56%),var(--ink); color:var(--cream); font:400 14px/1.8 var(--body); }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; }
a,button { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible { outline:3px solid var(--gold); outline-offset:5px; }
img { display:block; max-width:100%; height:auto; }
svg { display:block; }
p,h1,h2 { margin-top:0; }
.wrap { width:min(1240px,calc(100% - 96px)); margin-inline:auto; }
.rasta-line { height:4px; background:linear-gradient(90deg,var(--green) 0 33.333%,var(--gold) 33.333% 66.666%,var(--red) 66.666%); }
.skip { position:absolute; z-index:5; left:20px; top:-100px; padding:10px 20px; background:var(--gold); color:var(--deep); }
.skip:focus { top:8px; }
.site-header { background:rgba(7,20,15,.96); border-bottom:1px solid var(--line); }
.header-inner { display:flex; justify-content:space-between; align-items:center; gap:24px; min-height:110px; padding-block:10px; }
.brand { width:247px; flex-shrink:0; }
.brand img { width:100%; height:90px; object-fit:contain; }
.language-picker { display:flex; flex-wrap:wrap; gap:6px; }
.language-picker button { display:flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:6px 10px; border:1px solid transparent; border-radius:5px; background:transparent; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:1px; }
.language-picker img { width:28px; height:19px; object-fit:cover; border-radius:3px; }
.language-picker button[aria-pressed="true"] { border-color:var(--line); color:var(--gold); background:rgba(231,193,106,.06); }
.language-picker button:hover { color:var(--gold); border-color:var(--gold); }
.back-link { display:inline-flex; align-items:center; gap:10px; padding-block:24px; color:var(--muted); font-size:11px; min-height:44px; }
.back-link:hover { color:var(--gold); }
.gratitude { display:grid; grid-template-columns:1.12fr .88fr; border:1px solid var(--line); background:linear-gradient(130deg,#132a1e,#0b2016 62%); overflow:hidden; border-radius:3px; box-shadow:0 24px 75px rgba(0,0,0,.14); }
.gratitude-copy { position:relative; z-index:1; padding:52px 46px 40px; }
.eyebrow { display:flex; align-items:center; gap:11px; margin-bottom:24px; color:var(--gold); font-size:9px; font-weight:700; letter-spacing:1.9px; text-transform:uppercase; }
.sun { font-size:27px; line-height:1; font-weight:400; }
h1 { font:500 clamp(55px,5.8vw,82px)/1.02 var(--display); letter-spacing:-2px; margin-bottom:23px; }
h1 em { color:var(--gold); font-style:normal; font-weight:400; }
.lead { font-size:13px; color:var(--cream); margin-bottom:17px; }
.message { max-width:460px; color:var(--muted); font-size:13px; line-height:1.9; margin-bottom:26px; }
.actions { display:flex; flex-wrap:wrap; gap:12px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:49px; padding:13px 18px; border:1px solid var(--gold); border-radius:2px; background:var(--gold); color:var(--deep); font-size:11px; font-weight:700; transition:background .18s,border-color .18s; }
.button:hover { background:#f4d489; }
.button.secondary { background:transparent; color:var(--cream); border-color:rgba(246,240,223,.32); }
.button.secondary:hover { border-color:var(--gold); color:var(--gold); }
.payment-note { display:flex; align-items:flex-start; gap:12px; max-width:460px; padding:20px 0 0; margin-top:29px; border-top:1px solid var(--line); }
.receipt-icon { width:22px; height:22px; flex:0 0 22px; color:var(--gold); margin-top:2px; }
.payment-note h2 { font:600 11px/1.7 var(--body); color:#e2d8bb; margin-bottom:4px; }
.payment-note p { margin:0; color:var(--muted); font-size:11px; line-height:1.8; }
.signature { margin:22px 0 0; font-size:10px; color:var(--gold); letter-spacing:1px; }
.signature span { padding-inline:6px; }
.gratitude-art { position:relative; min-height:620px; overflow:hidden; border-left:1px solid var(--line); background:#10251b; }
.lion-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:35% center; opacity:.64; }
.art-shade { position:absolute; inset:0; background:linear-gradient(0deg,#07140f 1%,rgba(7,20,15,.9) 17%,rgba(7,20,15,.16) 59%,rgba(7,20,15,.08)); }
.art-caption { position:absolute; inset:auto 38px 36px; z-index:1; }
.art-kicker { display:block; font-size:9px; color:var(--gold); letter-spacing:2.5px; text-transform:uppercase; margin-bottom:15px; }
.art-caption p { font:500 clamp(34px,3.5vw,48px)/1.06 var(--display); letter-spacing:-.7px; margin-bottom:21px; text-wrap:balance; }
.art-rule { display:block; width:42px; height:1px; background:var(--gold); margin-bottom:18px; }
.art-values { font-size:9px; color:#d6c9a5; letter-spacing:2px; text-transform:uppercase; }
.connection { display:flex; justify-content:space-between; align-items:center; gap:24px; padding-block:37px 40px; }
.connection h2 { font:500 32px/1.2 var(--display); margin-bottom:7px; }
.connection p { font-size:11px; color:var(--muted); margin:0; }
.socials { display:flex; flex-wrap:wrap; gap:12px; }
.social { display:flex; align-items:center; justify-content:center; min-width:48px; min-height:48px; border:1px solid #bda364; border-radius:50%; color:var(--gold); background:radial-gradient(circle at 27% 18%,rgba(255,238,166,.3),transparent 58%),linear-gradient(145deg,#384b29,#173a27 56%,#10281c); box-shadow:inset 0 1px 1px rgba(255,246,196,.32),0 0 12px rgba(240,179,58,.12); transition:transform .18s,box-shadow .18s; }
.social img,.social svg { width:25px; height:25px; object-fit:contain; }
.social:hover { transform:translateY(-3px); border-color:#fff0ad; box-shadow:0 0 18px rgba(240,179,58,.3); }
footer { background:var(--deep); border-top:1px solid var(--line); }
.footer-inner { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px 25px; padding-block:17px; color:#aab6a4; font-size:10px; }
.footer-inner p { margin:0; }
.footer-inner nav { display:flex; gap:23px; }
.footer-inner a { display:inline-flex; align-items:center; min-height:44px; }
.footer-inner a:hover { color:var(--gold); }
@media(min-width:1700px) { .gratitude { margin-top:15px; } }
@media(max-width:1100px) { .wrap { width:calc(100% - 64px); } .gratitude-copy { padding:40px 30px 35px; } .gratitude { grid-template-columns:1.2fr 1fr; } h1 { font-size:64px; } .gratitude-art { min-height:610px; } .art-caption { inset:auto 25px 33px; } .art-values { letter-spacing:1px; } }
@media(max-width:850px) { .header-inner { min-height:93px; } .brand { width:217px; } .brand img { height:78px; } .gratitude { grid-template-columns:1fr; } .gratitude-copy { padding:40px; } h1 { font-size:75px; } .gratitude-art { min-height:335px; border-left:0; border-top:1px solid var(--line); } .lion-art { object-position:35% 39%; opacity:.6; } .art-shade { background:linear-gradient(90deg,rgba(7,20,15,.84),rgba(7,20,15,.08)),linear-gradient(0deg,rgba(7,20,15,.76),transparent 90%); } .art-caption { inset:auto 38px 30px; max-width:350px; } .art-caption p { font-size:40px; margin-bottom:16px; } .art-rule { margin-bottom:13px; } .connection { align-items:flex-start; flex-direction:column; gap:20px; } }
@media(max-width:560px) { .wrap { width:calc(100% - 36px); } .header-inner { flex-direction:column; gap:3px; padding-block:6px 10px; } .brand { width:212px; } .brand img { height:77px; } .language-picker { gap:5px; } .language-picker button { padding:5px 9px; } .back-link { padding-block:16px; } .gratitude-copy { padding:30px 24px; } .eyebrow { font-size:8px; letter-spacing:1.15px; gap:9px; margin-bottom:21px; } h1 { font-size:clamp(46px,12.2vw,66px); letter-spacing:-1.5px; } .lead { font-size:12px; } .message { font-size:12px; } .actions { flex-direction:column; align-items:stretch; } .button { font-size:11px; justify-content:space-between; } .payment-note { margin-top:24px; } .gratitude-art { min-height:292px; } .art-caption { inset:auto 24px 25px; } .art-kicker { font-size:8px; margin-bottom:12px; } .art-caption p { font-size:37px; } .art-values { font-size:8px; letter-spacing:1.5px; } .connection { padding-block:30px; } .connection h2 { font-size:30px; } .socials { gap:10px; } .social { min-width:43px; min-height:44px; } .social img,.social svg { width:23px; height:23px; } .footer-inner { font-size:9px; gap:3px; padding-block:17px 8px; } .footer-inner nav { width:100%; gap:24px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; } .social:hover { transform:none; } }