@property --c1{syntax:'<color>';inherits:true;initial-value:#3a2a06}
@property --c2{syntax:'<color>';inherits:true;initial-value:#120e04}
@property --c3{syntax:'<color>';inherits:true;initial-value:#000}
:root{--gold:#d4a537;--gold2:#f6e27a;--ink:#f7f1e1;--muted:#bfb190;--panel:rgba(16,14,10,.8);--line:rgba(212,165,55,.26)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:#000;line-height:1.65;overflow-x:hidden;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
a{color:inherit;text-decoration:none}
.stage{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(circle at 18% 12%,var(--c1),transparent 50%),radial-gradient(circle at 88% 85%,var(--c2),transparent 52%),var(--c3);transition:--c1 1.6s ease,--c2 1.6s ease,--c3 1.6s ease}
.stage::before{content:"";position:absolute;inset:-60%;background:conic-gradient(from 0deg,transparent 0deg,rgba(246,226,122,.08) 40deg,transparent 90deg,transparent 200deg,rgba(212,165,55,.07) 250deg,transparent 300deg);animation:spin 45s linear infinite}
.stage::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .85  0 0 0 0 .5  0 0 0 .14 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");opacity:.7}
body[data-tone=a] .stage{--c1:#3a2a06;--c2:#120e04;--c3:#000}
body[data-tone=b] .stage{--c1:#0b0b0b;--c2:#4a3508;--c3:#050505}
body[data-tone=c] .stage{--c1:#1c1608;--c2:#0e0e0e;--c3:#000}
body[data-tone=d] .stage{--c1:#5a4212;--c2:#1a1407;--c3:#080808}
.wrap{width:min(1140px,92%);margin:0 auto}
section{padding:96px 0;position:relative}
h1,h2,h3{line-height:1.12;letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,6.4vw,4.5rem);font-weight:800}
h2{font-size:clamp(1.9rem,4.8vw,3rem);font-weight:800;margin-bottom:16px}
h3{font-weight:700}
.gold{background:linear-gradient(90deg,#8a6a1f,#f6e27a,#d4a537,#fff4c2,#b8860b,#f6e27a);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:250% 0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes sweep{0%,100%{transform:translateX(-10%)}50%{transform:translateX(10%)}}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:18px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold)}
.lead{color:var(--muted);font-size:1.08rem;max-width:680px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 28px;border-radius:999px;font-weight:700;min-height:52px;transition:transform .25s,box-shadow .25s;letter-spacing:.03em;border:0;cursor:pointer;font:inherit}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:scale(.97)}
.btn-gold{background:linear-gradient(135deg,#f6e27a,#d4a537 55%,#8a6a1f);color:#140e02;box-shadow:0 14px 30px rgba(212,165,55,.3)}
.btn-line{border:1px solid var(--gold);color:var(--gold2);background:rgba(0,0,0,.35)}
.btn-wa{background:#25d366;color:#fff}
.mark{padding:9px 16px;border:1px solid var(--line);border-radius:999px;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold2);background:rgba(0,0,0,.35);display:inline-block}
/* Header */
header{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;background:rgba(0,0,0,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:flex;align-items:center;gap:12px}
.brand svg{width:46px;height:46px;flex-shrink:0}
.wm{display:flex;flex-direction:column;line-height:1}
.wm b{font-family:Georgia,"Times New Roman",serif;font-size:1.2rem;letter-spacing:.14em;background:linear-gradient(90deg,#8a6a1f,#f6e27a,#d4a537,#fff4c2);-webkit-background-clip:text;background-clip:text;color:transparent}
.wm small{font-size:.5rem;letter-spacing:.3em;color:var(--gold);margin-top:6px;font-weight:600;text-transform:uppercase}
.nav-links{display:flex;gap:28px;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.nav-links a:hover{color:var(--gold2)}
.nav-cta{padding:10px 20px;min-height:42px;font-size:.8rem}
@media (max-width:860px){.nav-links{display:none}}
/* Hero */
.hero{padding:150px 0 100px;overflow:hidden}
.hero::before{content:"";position:absolute;top:-20%;right:-10%;width:60%;height:140%;background:linear-gradient(115deg,transparent 35%,rgba(246,226,122,.12) 50%,transparent 65%);animation:sweep 9s ease-in-out infinite;pointer-events:none}
.hero-grid{display:grid;gap:56px;align-items:center}
@media (min-width:940px){.hero-grid{grid-template-columns:1.1fr 1fr}}
.hero .lead{margin:24px 0 34px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.marks{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.phone-hero{position:relative;width:min(370px,92%);margin:0 auto;animation:rise .9s ease both;filter:drop-shadow(0 30px 60px rgba(0,0,0,.6))}
.ph-shot{width:100%;height:auto;display:block;border-radius:26px;border:1px solid var(--line)}
.ph-q{position:absolute;left:10%;top:43.3%;width:62%;height:8.2%;display:flex;align-items:center;font-size:clamp(.66rem,1.9vw,.86rem);color:#202124;font-family:system-ui,sans-serif;white-space:nowrap;overflow:hidden;pointer-events:none}
.ph-q i{display:inline-block;width:2px;height:1.1em;background:#4285f4;margin-left:2px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.hero-logo{display:none}
.hero-logo svg{width:100%;height:auto;display:block}
/* Plates & cards */
.plate{width:100%;height:130px;border-radius:16px;background:#fff;border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;padding:12px;overflow:hidden}
.plate img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
.award{display:grid;gap:26px;align-items:center;padding:34px;border-radius:24px;background:linear-gradient(135deg,rgba(246,226,122,.16),rgba(212,165,55,.06) 50%,rgba(0,0,0,.4));border:1px solid var(--gold);box-shadow:0 30px 60px rgba(0,0,0,.6)}
@media (min-width:760px){.award{grid-template-columns:auto 1fr auto}}
.award .plate{width:130px;height:130px;border-radius:50%}
.award h3{font-size:1.6rem}
.award p{color:var(--muted)}
.pill{justify-self:start;padding:12px 22px;border-radius:999px;background:linear-gradient(135deg,#f6e27a,#b8860b);color:#140e02;font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem}
.creds{display:grid;gap:20px;margin-top:44px;grid-template-columns:repeat(2,1fr)}
@media (min-width:980px){.creds{grid-template-columns:repeat(5,1fr)}}
.cred{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:20px;text-align:center;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .4s,border-color .4s}
.cred:hover{transform:translateY(-8px);border-color:var(--gold)}
.cred .plate{height:124px;margin-bottom:18px}
.cred h3{font-size:1rem;color:var(--gold2);min-height:2.4em;display:flex;align-items:center;justify-content:center}
.cred p{color:var(--muted);font-size:.84rem;margin-top:6px}
.grid{display:grid;gap:20px;margin-top:46px}
@media (min-width:640px){.grid.two{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.grid.three{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:30px;transition:transform .35s,border-color .35s;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(246,226,122,.12),0 20px 40px rgba(0,0,0,.45)}
.card:hover{transform:translateY(-8px);border-color:var(--gold)}
.num{font-size:.72rem;letter-spacing:.2em;color:var(--gold);font-weight:700}
.card h3{font-size:1.2rem;margin:12px 0 10px;color:var(--gold2)}
.card p{color:var(--muted);font-size:.95rem}
.steps{display:grid;gap:18px;margin-top:46px}
@media (min-width:800px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{padding:28px 24px;border-top:2px solid var(--gold);background:linear-gradient(180deg,rgba(212,165,55,.12),transparent 70%);border-radius:0 0 18px 18px}
.step b{font-size:2.6rem;font-weight:800;color:transparent;-webkit-text-stroke:1px var(--gold);display:block}
.step h3{margin:10px 0 8px;font-size:1.1rem;color:var(--gold2)}
.step p{color:var(--muted);font-size:.92rem}
.about{display:grid;gap:52px;align-items:center}
@media (min-width:920px){.about{grid-template-columns:1fr 1fr}}
.checks{list-style:none;margin-top:26px;display:grid;gap:14px}
.checks li{position:relative;padding-left:36px;color:var(--muted)}
.checks li::before{content:"";position:absolute;left:0;top:7px;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#f6e27a,#8a6a1f)}
.faq{display:grid;gap:14px}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px 24px}
.faq summary{cursor:pointer;font-weight:700;color:var(--gold2);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq p{color:var(--muted);margin-top:10px}
.markets{border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
.markets .lead{margin:0 auto}
.chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
/* Enquiry */
.contact{padding:60px 26px;border-radius:30px;background:linear-gradient(160deg,rgba(246,226,122,.16),rgba(0,0,0,.7) 50%,rgba(212,165,55,.1));border:1px solid var(--gold);box-shadow:0 30px 70px rgba(0,0,0,.7);max-width:820px;margin:0 auto}
.contact h2,.contact .lead{text-align:center;margin-left:auto;margin-right:auto}
.contact .lead{margin-bottom:30px}
.enq{display:grid;gap:16px}
.enq .row2{display:grid;gap:16px}
@media (min-width:640px){.enq .row2{grid-template-columns:1fr 1fr}}
.enq label{display:grid;gap:7px;font-size:.84rem;letter-spacing:.04em;color:var(--gold2);font-weight:600}
.enq input,.enq textarea{width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.5);color:var(--ink);font:inherit;font-size:1rem;transition:border-color .25s,box-shadow .25s}
.enq input:focus,.enq textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,165,55,.2)}
.enq textarea{resize:vertical;min-height:130px}
.enq .btn{justify-self:center;margin-top:6px}
.enq .status{text-align:center;color:var(--gold2);font-size:.92rem;min-height:1.4em}
.details{margin-top:26px;color:var(--muted);text-align:center}
.details a{color:var(--gold2);font-weight:700}
footer{padding:34px 0 calc(34px + env(safe-area-inset-bottom,0px));text-align:center;color:var(--muted);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;border-top:1px solid var(--line)}
.fab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));width:60px;height:60px;border-radius:50%;background:#25d366;display:grid;place-items:center;z-index:60;animation:pulse 2.4s infinite}
.fab svg{width:30px;height:30px;fill:#fff}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.6)}70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s ease,transform .9s ease;transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}